初始化

components/datetimePicker/datetimePicker.js

@@ -0,0 +1,601 @@
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    is_show: {
+      type: Boolean,
+      value: false,
+      observer:function(val){   //弹出动画
+        // console.log(this.data);
+        if(val){
+          let animation = wx.createAnimation({
+            duration: 500,
+            timingFunction: "ease"
+          });
+          let animationOpacity = wx.createAnimation({
+            duration: 500,
+            timingFunction: "ease"
+          });
+          setTimeout(() => {
+            animation.bottom(0).step();
+            animationOpacity.opacity(0.7).step();
+            this.setData({
+              animationOpacity: animationOpacity.export(),
+              animationData: animation.export()
+            })
+          }, 0);
+        }else{
+          let animation = wx.createAnimation({
+            duration: 100,
+            timingFunction: "ease"
+          });
+          let animationOpacity = wx.createAnimation({
+            duration: 500,
+            timingFunction: "ease"
+          });
+          animation.bottom(-320).step();
+          animationOpacity.opacity(0).step();
+          this.setData({
+            animationOpacity: animationOpacity.export(),
+            animationData: animation.export()
+          });
+        }
+
+        // 在picker滚动未停止前点确定，会使startValue数组各项归零，发生错误，这里判断并重新初始化
+        // 微信新增了picker滚动的回调函数，已进行兼容
+        if(this.data.startValue&&this.data.endValue){
+          let s = 0, e = 0;
+          let conf = this.data.config;
+          
+          this.data.startValue.map(val => {
+            if (val == 0) {
+              s++
+            }
+          })
+          this.data.endValue.map(val => {
+            if (val == 0) {
+              e++;
+            }
+          });
+          let tmp={
+            hour:4,
+            minute:5,
+            second:6
+          }
+          let n = tmp[conf.column];
+          if (s>=n || e>=n) {
+            this.initPick();
+            this.setData({
+              startValue: this.data.startValue,
+              endValue: this.data.endValue,
+            });
+          }
+        }
+        
+
+      }
+    },
+    config: Object
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    value: [],
+    currentTag:'start'
+  },
+  ready: function () {
+    this.readConfig();
+    this.initPick(this.data.config || null);
+    this.setData({
+      startValue: this.data.startValue,
+      endValue: this.data.endValue,
+    });
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    // 关闭弹框
+    cancel() {
+      this.setData({
+        is_show: false
+      })
+      this.triggerEvent('cancel')
+    },
+    chooseTime(e){
+      console.log(e);
+      const {name}=e.currentTarget.dataset
+      this.setData({
+        currentTag:name
+      })
+      console.log(this.data.currentTag,'currentTag');
+    },
+    onConfirm: function() {
+      //滚动未结束时不能确认
+      if(this.data.isPicking){return}
+      let startTime = new Date(this.data.startPickTime.replace(/-/g, "/"));
+      let endTime = new Date(this.data.endPickTime.replace(/-/g, "/"));
+      console.log(startTime,'startTime');
+      console.log(endTime,'endTime');
+      if (startTime <= endTime || !this.data.endDate) {
+        this.setData({
+          startTime,
+          endTime
+        });
+        let startArr = formatTime(startTime).arr;
+        let endArr = formatTime(endTime).arr;
+        let format0 = function(num){
+          return num<10?'0'+num:num
+        }
+        
+        let startTimeBack =
+          startArr[0] +
+          "-" +
+          format0(startArr[1]) +
+          "-" +
+          format0(startArr[2]) +
+          " " +
+          (this.data.hourColumn ? format0(startArr[3]) : "00") +
+          ":" +
+          (this.data.minColumn ? format0(startArr[4]) : "00") +
+          ":" +
+          (this.data.secColumn ? format0(startArr[5]) : "00");
+
+        let endTimeBack =
+          endArr[0] +
+          "-" +
+          format0(endArr[1]) +
+          "-" +
+          format0(endArr[2]) +
+          " " +
+          (this.data.hourColumn ? format0(endArr[3]) : "00") +
+          ":" +
+          (this.data.minColumn ? format0(endArr[4]) : "00") +
+          ":" +
+          (this.data.secColumn ? format0(endArr[5]) : "00");
+        const days=this.calculateTimeSpan(startTimeBack,endTimeBack)
+        let time = {
+          startTime: startTimeBack,
+          endTime: endTimeBack
+        };
+        if(days>90){
+          wx.showModal({
+            title: "提示",
+            content: "时间跨度不能超过90天，请重新选择!",
+            showCancel:false
+          });
+        }else{
+        //触发自定义事件
+          this.triggerEvent("setPickerTime", time);
+        this.triggerEvent("hidePicker", {});
+        }
+      } else {
+        wx.showToast({
+          icon: "none",
+          title: "时间不合理"
+        });
+      }
+    },
+    calculateTimeSpan(startDate, endDate) {
+      const startTime = new Date(startDate);
+      const endTime = new Date(endDate);
+      const timeSpanMilliseconds = endTime - startTime;
+      const timeSpanDays = Math.ceil(timeSpanMilliseconds / (1000 * 60 * 60 * 24)) ;
+      return timeSpanDays;
+  },
+    bindChange: function (e) {
+      const val = e.detail.value
+      this.setData({
+        year: this.data.years[val[0]],
+        month: this.data.months[val[1]],
+        day: this.data.days[val[2]]
+      })
+    },
+    //读取配置项
+    readConfig() {
+      let limitEndTime = new Date().getTime();
+      // let limitStartTime = new Date().getTime() - 1000 * 60 * 60 * 24 * 30*3;
+      let limitStartTime = '';
+      if (this.data.config) {
+        let conf = this.data.config;
+        if (typeof conf.dateLimit == "number") {
+          limitStartTime =
+            new Date().getTime() - 1000 * 60 * 60 * 24 * conf.dateLimit;
+        }
+        if (conf.limitStartTime) {
+          limitStartTime = new Date(conf.limitStartTime.replace(/-/g, '/')).getTime();
+        }
+        if (conf.limitEndTime) {
+          limitEndTime = new Date(conf.limitEndTime.replace(/-/g, '/')).getTime();
+        }
+        this.setData({
+          yearStart: conf.yearStart || 2000,
+          yearEnd: conf.yearEnd || 2100,
+          endDate: conf.endDate || false,
+          dateLimit: conf.dateLimit || false,
+          hourColumn:
+            conf.column == "hour" ||
+            conf.column == "minute" ||
+            conf.column == "second",
+          minColumn: conf.column == "minute" || conf.column == "second",
+          // secColumn: conf.column == "second"
+        });
+      }
+
+      let limitStartTimeArr = formatTime(limitStartTime);
+      let limitEndTimeArr = formatTime(limitEndTime);
+
+      this.setData({
+        limitStartTime,
+        limitStartTimeArr,
+        limitEndTime,
+        limitEndTimeArr
+      });
+    },
+    //滚动开始
+    handlePickStart: function (e) {
+      this.setData({
+        isPicking: true
+      })
+    },
+    //滚动结束
+    handlePickEnd: function (e) {
+      this.setData({
+        isPicking: false
+      })
+    },
+    changeStartDateTime: function (e) {
+      let val = e.detail.value;
+      this.compareTime(val, "start");
+    },
+
+    changeEndDateTime: function (e) {
+      let val = e.detail.value;
+      this.compareTime(val, "end");
+    },
+    //比较时间是否在范围内
+    compareTime(val, type) {
+      let h = val[3] ? this.data.HourList[val[3]] : "00";
+      let m = val[4] ? this.data.MinuteList[val[4]] : "00";
+      let s = val[5] ? this.data.SecondList[val[5]] : "00";
+      let time =
+        this.data.YearList[val[0]] +
+        "-" +
+        this.data.MonthList[val[1]] +
+        "-" +
+        this.data.DayList[val[2]] +
+        " " +
+        h +
+        ":" +
+        m +
+        ":" +
+        s;
+
+      let start = this.data.limitStartTime;
+      let end = this.data.limitEndTime;
+      let timeNum = new Date(time.replace(/-/g, '/')).getTime();
+      let year, month, day, hour, min, sec, limitDate;
+      let tempArr = []
+
+      if (!this.data.dateLimit) {
+        limitDate = [
+          this.data.YearList[val[0]],
+          this.data.MonthList[val[1]],
+          this.data.DayList[val[2]],
+          this.data.HourList[val[3]],
+          this.data.MinuteList[val[4]],
+          this.data.SecondList[val[5]]]
+      } else if (type == "start" && timeNum > new Date(this.data.endPickTime.replace(/-/g, '/')) && this.data.config.endDate) {
+        limitDate = formatTime(this.data.endPickTime).arr;
+
+      } else if (type == "end" && timeNum < new Date(this.data.startPickTime.replace(/-/g, '/'))) {
+        limitDate = formatTime(this.data.startPickTime).arr;
+
+      } else if (timeNum < start) {
+        limitDate = this.data.limitStartTimeArr.arr;
+
+      } else if (timeNum > end) {
+        limitDate = this.data.limitEndTimeArr.arr;
+
+      } else {
+        limitDate = [
+          this.data.YearList[val[0]],
+          this.data.MonthList[val[1]],
+          this.data.DayList[val[2]],
+          this.data.HourList[val[3]],
+          this.data.MinuteList[val[4]],
+          this.data.SecondList[val[5]]
+        ]
+
+      }
+
+      year = limitDate[0];
+      month = limitDate[1];
+      day = limitDate[2];
+      hour = limitDate[3];
+      min = limitDate[4];
+      sec = limitDate[5];
+
+      if (type == "start") {
+        this.setStartDate(year, month, day, hour, min, 0);
+      } else if (type == "end") {
+        this.setEndDate(year, month, day, hour, min, 0);
+      }
+    },
+    getDays: function (year, month) {
+      let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+      if (month === 2) {
+        return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0
+          ? 29
+          : 28;
+      } else {
+        return daysInMonth[month - 1];
+      }
+    },
+    initPick: function (initData) {
+      const date = initData.initStartTime ? new Date(initData.initStartTime.replace(/-/g, '/')) : new Date();
+      const endDate = initData.initEndTime ? new Date(initData.initEndTime.replace(/-/g, '/')) : new Date();
+      // const startDate = new Date(date.getTime() - 1000 * 60 * 60 * 24);
+      const startDate = date;
+      const startYear = date.getFullYear();
+      const startMonth = date.getMonth() + 1;
+      const startDay = date.getDate();
+      const startHour = date.getHours();
+      const startMinute = date.getMinutes();
+      const startSecond = date.getSeconds();
+
+      const endYear = endDate.getFullYear();
+      const endMonth = endDate.getMonth() + 1;
+      const endDay = endDate.getDate();
+      const endHour = endDate.getHours();
+      const endMinute = endDate.getMinutes();
+      const endSecond = endDate.getSeconds();
+
+      let YearList = [];
+      let MonthList = [];
+      let DayList = [];
+      let HourList = [];
+      let MinuteList = [];
+      let SecondList = [];
+
+      //设置年份列表
+      for (let i = this.data.yearStart; i <= this.data.yearEnd; i++) {
+        YearList.push(i);
+      }
+
+      // 设置月份列表
+      for (let i = 1; i <= 12; i++) {
+        MonthList.push(i);
+      }
+      // 设置日期列表
+      for (let i = 1; i <= 31; i++) {
+        DayList.push(i);
+      }
+      // 设置时列表
+      for (let i = 0; i <= 23; i++) {
+        if (0 <= i && i < 10) {
+          i = "0" + i;
+        }
+        HourList.push(i);
+      }
+      // 分|秒
+      for (let i = 0; i <= 59; i++) {
+        if (0 <= i && i < 10) {
+          i = "0" + i;
+        }
+        MinuteList.push(i);
+        SecondList.push(i);
+      }
+
+      this.setData({
+        YearList,
+        MonthList,
+        DayList,
+        HourList,
+        MinuteList,
+        SecondList
+      });
+
+      this.setStartDate(startYear, startMonth, startDay, startHour, startMinute, 0);
+      this.setEndDate(endYear, endMonth, endDay, endHour, endMinute, 0);
+
+      //!!!
+      // setTimeout(() => {
+      //   this.setStartDate(nowYear, nowMonth, nowDay, nowHour, nowMinute)
+      //   this.setEndDate(nowYear, nowMonth, nowDay, nowHour, nowMinute)
+      // }, 0);
+    },
+    setPickerDateArr(type, year, month, day, hour, minute, second) {
+      let yearIdx = 0;
+      let monthIdx = 0;
+      let dayIdx = 0;
+      let hourIdx = 0;
+      let minuteIdx = 0;
+      let secondIdx = 0;
+
+      this.data.YearList.map((v, idx) => {
+        if (parseInt(v) === year) {
+          yearIdx = idx;
+        }
+      });
+
+      this.data.MonthList.map((v, idx) => {
+        if (parseInt(v) === month) {
+          monthIdx = idx;
+        }
+      });
+
+      // 重新设置日期列表
+      let DayList = [];
+      for (let i = 1; i <= this.getDays(year, month); i++) {
+        DayList.push(i);
+      }
+
+      DayList.map((v, idx) => {
+        if (parseInt(v) === day) {
+          dayIdx = idx;
+        }
+      });
+      if (type == "start") {
+        this.setData({ startDayList: DayList });
+      } else if (type == "end") {
+        this.setData({ endDayList: DayList });
+      }
+
+      this.data.HourList.map((v, idx) => {
+        if (parseInt(v) === parseInt(hour)) {
+          hourIdx = idx;
+        }
+      });
+
+      this.data.MinuteList.map((v, idx) => {
+        if (parseInt(v) === parseInt(minute)) {
+          minuteIdx = idx;
+        }
+      });
+      this.data.SecondList.map((v, idx) => {
+        if (parseInt(v) === parseInt(second)) {
+          secondIdx = idx;
+        }
+      });
+
+      return {
+        yearIdx,
+        monthIdx,
+        dayIdx,
+        hourIdx,
+        minuteIdx,
+        secondIdx
+      };
+    },
+    setStartDate: function (year, month, day, hour, minute, second) {
+      let pickerDateArr = this.setPickerDateArr(
+        "start",
+        year,
+        month,
+        day,
+        hour,
+        minute,
+        second
+      );
+      this.setData({
+        startYearList: this.data.YearList,
+        startMonthList: this.data.MonthList,
+        // startDayList: this.data.DayList,
+        startHourList: this.data.HourList,
+        startMinuteList: this.data.MinuteList,
+        startSecondList: this.data.SecondList,
+        startValue: [
+          pickerDateArr.yearIdx,
+          pickerDateArr.monthIdx,
+          pickerDateArr.dayIdx,
+          pickerDateArr.hourIdx,
+          pickerDateArr.minuteIdx,
+          pickerDateArr.secondIdx
+        ],
+       
+        startPickTime:
+          this.data.YearList[pickerDateArr.yearIdx] +
+          "-" +
+          this.data.MonthList[pickerDateArr.monthIdx] +
+          "-" +
+          this.data.DayList[pickerDateArr.dayIdx] +
+          " " +
+          this.data.HourList[pickerDateArr.hourIdx] +
+          ":" +
+          this.data.MinuteList[pickerDateArr.minuteIdx]
+        // startPickTime:
+        //   this.data.YearList[pickerDateArr.yearIdx] +
+        //   "-" +
+        //   this.data.MonthList[pickerDateArr.monthIdx] +
+        //   "-" +
+        //   this.data.DayList[pickerDateArr.dayIdx] +
+        //   " " +
+        //   this.data.HourList[pickerDateArr.hourIdx] +
+        //   ":" +
+        //   this.data.MinuteList[pickerDateArr.minuteIdx] +
+        //   ":" +
+        //   this.data.SecondList[pickerDateArr.secondIdx]
+      });
+    },
+    setEndDate: function (year, month, day, hour, minute, second) {
+      let pickerDateArr = this.setPickerDateArr(
+        "end",
+        year,
+        month,
+        day,
+        hour,
+        minute,
+        second
+      );
+
+      this.setData({
+        endYearList: this.data.YearList,
+        endMonthList: this.data.MonthList,
+        // endDayList: this.data.DayList,
+        endHourList: this.data.HourList,
+        endMinuteList: this.data.MinuteList,
+        endSecondList: this.data.SecondList,
+        endValue: [
+          pickerDateArr.yearIdx,
+          pickerDateArr.monthIdx,
+          pickerDateArr.dayIdx,
+          pickerDateArr.hourIdx,
+          pickerDateArr.minuteIdx,
+          pickerDateArr.secondIdx
+        ],
+        endPickTime:
+          this.data.YearList[pickerDateArr.yearIdx] +
+          "-" +
+          this.data.MonthList[pickerDateArr.monthIdx] +
+          "-" +
+          this.data.DayList[pickerDateArr.dayIdx] +
+          " " +
+          this.data.HourList[pickerDateArr.hourIdx] +
+          ":" +
+          this.data.MinuteList[pickerDateArr.minuteIdx]
+        // endPickTime:
+        //   this.data.YearList[pickerDateArr.yearIdx] +
+        //   "-" +
+        //   this.data.MonthList[pickerDateArr.monthIdx] +
+        //   "-" +
+        //   this.data.DayList[pickerDateArr.dayIdx] +
+        //   " " +
+        //   this.data.HourList[pickerDateArr.hourIdx] +
+        //   ":" +
+        //   this.data.MinuteList[pickerDateArr.minuteIdx] +
+        //   ":" +
+        //   this.data.SecondList[pickerDateArr.secondIdx]
+      });
+    },
+  }
+})
+function formatTime(date) {
+
+  if (typeof date == 'string' || 'number') {
+    try {
+      date = date.replace(/-/g, '/')//兼容ios
+    } catch (error) {
+    }
+    date = new Date(date)
+  }
+
+  const year = date.getFullYear()
+  const month = date.getMonth() + 1
+  const day = date.getDate()
+  const hour = date.getHours()
+  const minute = date.getMinutes()
+  const second = date.getSeconds()
+
+  return {
+    str: [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':'),
+    arr: [year, month, day, hour, minute, second]
+  }
+}
+function formatNumber(n) {
+  n = n.toString()
+  return n[1] ? n : '0' + n
+}

components/datetimePicker/datetimePicker.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

components/datetimePicker/datetimePicker.wxml

@@ -0,0 +1,69 @@
+<view class="mask" hidden="{{!is_show}}" catchtouchmove="true"></view>
+<view class="modal_info fixed" hidden="{{!is_show}}">
+  <!-- 头部 -->
+  <view class="header">
+    <view class="left">选择时间</view>
+    <view class="right" bind:tap="onConfirm">确定</view>
+  </view>
+  <!-- 日期显示 -->
+  <view class="body">
+    <view class="{{currentTag==='start'?'left':'currentTag'}}" bind:tap="chooseTime" data-name="start">{{startPickTime}}</view>
+    <view class="{{currentTag==='end'?'right':'currentTag'}}"bind:tap="chooseTime"data-name="end">{{endPickTime}}</view>
+  </view>
+  <view class="footer">
+  <view class="timeNav">
+    <view class="item">年</view>
+    <view class="item">月</view>
+    <view class="item">日</view>
+    <view class="item">时</view>
+    <view class="item">分</view>
+  </view>
+    <view wx:if="{{currentTag==='start'}}">
+      <picker-view class='sensorTypePicker'bindchange="changeStartDateTime"
+      indicator-class='indicator'
+        value="{{startValue}}" style="height: {{endDate?'120px':'250px'}};" bindpickstart="handlePickStart" bindpickend="handlePickEnd">
+        <picker-view-column style="min-width: 70px;flex-shrink: 0">
+          <view class="{{[startValue[0]===index?'picker-item-active':'picker-item']}}" wx:for="{{startYearList}}" wx:key='*this'>{{item}}</view>
+        </picker-view-column>
+        <picker-view-column>
+          <view class="{{[startValue[1]===index?'picker-item-active':'picker-item']}}" wx:for="{{startMonthList}}" wx:key='*this'>{{item}}</view>
+        </picker-view-column>
+        <picker-view-column>
+          <view class="{{[startValue[2]===index?'picker-item-active':'picker-item']}}" wx:for="{{startDayList}}" wx:key='*this'>{{item}}</view>
+        </picker-view-column>
+        <picker-view-column hidden="{{!hourColumn}}">
+          <view class="{{[startValue[3]===index?'picker-item-active':'picker-item']}}" wx:for="{{startHourList}}" wx:key='*this'>{{item}}</view>
+        </picker-view-column>
+        <picker-view-column hidden="{{!minColumn}}">
+          <view class="{{[startValue[4]===index?'picker-item-active':'picker-item']}}" wx:for="{{startMinuteList}}" wx:key='*this'>{{item}}</view>
+        </picker-view-column>
+        <picker-view-column hidden="{{!secColumn}}">
+          <view class="{{[startValue[5]===index?'picker-item-active':'picker-item']}}" wx:for="{{startSecondList}}" wx:key='*this'>{{item}}</view>
+        </picker-view-column>
+      </picker-view>
+    </view>
+    <view wx:else>
+        <picker-view class='sensorTypePicker' indicator-style='height: 35px;' bindchange="changeEndDateTime" bindpickstart="handlePickStart" bindpickend="handlePickEnd" 
+          value="{{endValue}}">
+          <picker-view-column style="min-width: 70px;flex-shrink: 0">
+            <view class="{{[endValue[0]===index?'picker-item-active':'picker-item']}}" wx:for="{{endYearList}}" wx:key='*this' style="min-width: 70px;">{{item}}</view>
+          </picker-view-column>
+          <picker-view-column>
+            <view class="{{[endValue[1]===index?'picker-item-active':'picker-item']}}" wx:for="{{endMonthList}}" wx:key='*this'>{{item}}</view>
+          </picker-view-column>
+          <picker-view-column>
+            <view class="{{[endValue[2]===index?'picker-item-active':'picker-item']}}" wx:for="{{endDayList}}" wx:key='*this'>{{item}}</view>
+          </picker-view-column>
+          <picker-view-column hidden="{{!hourColumn}}" >
+            <view class="{{[endValue[3]===index?'picker-item-active':'picker-item']}}" wx:for="{{endHourList}}" wx:key='*this'>{{item}}</view>
+          </picker-view-column>
+          <picker-view-column hidden="{{!minColumn}}">
+            <view class="{{[endValue[4]===index?'picker-item-active':'picker-item']}}" wx:for="{{endMinuteList}}" wx:key='*this'>{{item}}</view>
+          </picker-view-column>
+          <picker-view-column hidden="{{!secColumn}}">
+            <view class="{{[endValue[5]===index?'picker-item-active':'picker-item']}}" wx:for="{{startSecondList}}" wx:key='*this'>{{item}}</view>
+          </picker-view-column>
+        </picker-view>
+    </view>
+  </view>
+</view>

components/datetimePicker/datetimePicker.wxss

@@ -0,0 +1,193 @@
+/* components/datetimePicker/datetimePicker.wxss */
+/* 遮罩 */
+.mask {
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, .6);
+  -webkit-transition-duration: .3s;
+  transition-duration: .3s;
+}
+
+.fixed {
+  z-index: 1003;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  /* top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%); */
+}
+
+.modal_info {
+  width: 100%;
+  background: #FFFFFF;
+  border-radius: 20rpx 20rpx 0 0;
+  padding-top: 16rpx;
+  overflow: hidden;
+  font-size: 32rpx;
+  line-height: 49rpx;
+  color: #333333;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 22rpx 30rpx;
+  box-sizing: border-box;
+}
+
+.header .left {
+  color: #191b27;
+  font-size: 32rpx;
+  font-weight: 700;
+}
+
+.header .right {
+  display: flex;
+  width: 130rpx;
+  box-sizing: border-box;
+  justify-content: center;
+  align-items: center;
+  background: #367DF9;
+color: #ffffff;
+ font-size: 28rpx;
+ font-weight: 500;
+}
+
+.body {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 22rpx 30rpx;
+  box-sizing: border-box;
+}
+
+.body .left,
+.right {
+  display: flex;
+  width: 320rpx;
+  height: 72rpx;
+  padding: 16rpx 0rpx;
+  justify-content: center;
+  align-items: center;
+  gap: 20rpx;
+  flex-shrink: 0;
+  border-radius: 8rpx;
+  border: 2rpx solid #367DF9;
+  background: #F5F8FE;
+  color: #367df9;
+  text-align: center;
+  font-size: 28rpx;
+  font-weight: 500;
+  line-height: normal;
+  box-sizing: border-box;
+}
+.body .currentTag {
+  display: flex;
+  width: 320rpx;
+  height: 72rpx;
+  padding: 16rpx 0rpx;
+  justify-content: center;
+  align-items: center;
+  gap: 20rpx;
+  flex-shrink: 0;
+  border-radius: 8rpx;
+  /* border: 2rpx solid #367DF9; */
+  background: #F5F8FE;
+  color: #8fb8ff;
+  text-align: center;
+  font-size: 28rpx;
+  font-weight: 500;
+  line-height: normal;
+  box-sizing: border-box;
+}
+.footer {
+  width: 100%;
+}
+
+.picker {
+  width: 100%;
+  height: 100%;
+}
+
+.picker .item {
+  width: 100%;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8rpx;
+  background: #F5F8FE;
+  text-align: center;
+  font-size: 32rpx;
+}
+
+.sensorTypePicker {
+  width: 100%;
+  height: 120px;
+  /* padding: 45px 0; */
+}
+/* 至 */
+.to{
+  width:100%;
+  display: flex;
+  justify-content: center;align-items: center;
+  color:rgb(138,138,138);
+  border-radius: 8rpx;
+  color: #367df9;
+  text-align: center;
+  font-size: 32rpx;
+  font-weight: 700;
+  background: #F5F8FE;
+  /* font-size:30rpx; */
+}
+.picker-item {
+  line-height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  /* overflow: hidden; */
+}
+
+.indicator {
+  border-radius: 8rpx;
+  text-align: center;
+  font-size: 32rpx;
+  font-weight: 700;
+  border: none !important;
+}
+.picker-item-active{
+  line-height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 17px;
+  color: #367df9;
+  font-weight: 700;
+  background: rgba(245, 248, 254, 1);
+}
+.timeNav{
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.timeNav .item{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #808080;
+ text-align: center;
+ font-size: 28rpx;
+ font-weight: 500;
+}