bigDataApp/pages/cb/cbd/equip-set/analyse.vue

<template>
  <view class="anabox">
    <view class="timebox">
      <view class="schedulebox">
        <view class="schedule" @click="modelPicker = !modelPicker">
          <p class="schedule_value">{{ modelList[identify_model].label }}</p>
          <!-- {{titletext[indexone]}} -->
          <p class="schedule_icon">
            <u-icon name="arrow-down"></u-icon>
          </p>
        </view>
        <u-select
          v-model="modelPicker"
          mode="single-column"
          @confirm="confirmModel"
          :default-value="[identify_model]"
          :list="modelList"
        ></u-select>
        <view class="schedule" @click="pickertfone = !pickertfone">
          <p class="schedule_value">{{ yservalue }}</p>
          <!-- {{titletext[indexone]}} -->
          <p class="schedule_icon">
            <u-icon name="arrow-down"></u-icon>
          </p>
        </view>
        <u-picker
          v-model="pickertfone"
          mode="selector"
          @confirm="confirmFun"
          :default-selector="[yserindex]"
          :range="yearlist"
        ></u-picker>
        <view class="schedule" @click="pickertfworm = !pickertfworm">
          <p class="schedule_value">{{ wormvalue }}</p>
          <!-- {{titletext[indexone]}} -->
          <p class="schedule_icon">
            <u-icon name="arrow-down"></u-icon>
          </p>
        </view>
        <u-picker
          v-model="pickertfworm"
          mode="selector"
          @confirm="confirmFun2"
          :default-selector="[wormindex]"
          :range="wormlist"
        ></u-picker>
      </view>
      <view class="wormtime">
        <view class="wormtime_item">
          <image
            src="../../../../static/images/cb/shijianqi.png"
            mode=""
            class="img"
          ></image>
          <p>始见期</p>
          <p>{{ timeobj.startTime }}</p>
        </view>
        <view class="wormtime_item">
          <image
            src="../../../../static/images/cb/gaofengqi.png"
            mode=""
            class="img"
          ></image>
          <p>高峰期</p>
          <p>{{ timeobj.highTime }}</p>
          <p>数量：{{ timeobj.highNum }}头</p>
        </view>
        <view class="wormtime_item">
          <image
            src="../../../../static/images/cb/zhongjianqi.png"
            mode=""
            class="img"
          ></image>
          <p>终见期</p>
          <p>{{ timeobj.endTime }}</p>
        </view>
      </view>
      <view class="selecttimes" @click="tiemshow = !tiemshow">
        <view class="" style="line-height: 28px"> 日期 </view>
        <view class="timesbox">

          <p>{{ oldtime }}</p>
          <p class="or">至</p>
          <p>{{ newtime }}</p>
          <!-- <u-icon name="rili" custom-prefix="custom-icon" class="icon"></u-icon> -->
        </view>
        <u-calendar
          v-model="tiemshow"
          mode="range"
          @change="tiemchange"
          range-color="#999"
          btn-type="success"
          active-bg-color="#0BBC58"
          range-bg-color="rgba(11,188,88,0.13)"
        ></u-calendar>
        <u-button
          type="primary"
          text="归档时间"
          size="mini"
          @click="timeshow = true"
          >归档时间</u-button
        >
        <u-select
          v-model="timeshow"
          mode="mutil-column"
          :list="list"
          @confirm="Hourchange"
          :default-value="defaultValue"
        ></u-select>
      </view>
      <view class="tendency">
        <canvas
          canvas-id="canvasColumnA"
          id="canvasColumnA"
          class="charts"
          @touchstart="touchLineA($event)"
          @touchmove="moveLineA($event)"
          @touchend="touchEndLineA($event)"
          disable-scroll="true"
          :style="{
            width: cWidth * pixelRatio + 'px',
            height: cHeight * pixelRatio + 'px',
            transform: 'scale(' + 1 / pixelRatio + ')',
            'margin-left': (-cWidth * (pixelRatio - 1)) / 2 + 'px',
            'margin-top': (-cHeight * (pixelRatio - 1)) / 2 + 'px',
          }"
        ></canvas>
      </view>
      <view class="tendency">
        <canvas
          canvas-id="canvasRing"
          id="canvasRing"
          class="charts"
          @touchstart="touchRing"
          :style="{
            width: cWidth * pixelRatio + 'px',
            height: cHeight * pixelRatio + 'px',
            transform: 'scale(' + 1 / pixelRatio + ')',
            'margin-left': (-cWidth * (pixelRatio - 1)) / 2 + 'px',
            'margin-top': (-cHeight * (pixelRatio - 1)) / 2 + 'px',
          }"
        ></canvas>
      </view>
      <view class="tendency_pro">
        <view class="" v-for="(item, index) in progresslist">
          <span>{{ index + 1 }}、{{ item.name }}</span>
          <u-line-progress
            :active-color="colorlist[index % 6]"
            :percent="Number(((item.data / pestsum) * 100).toFixed(2))"
            :show-percent="false"
          ></u-line-progress>
          <span>{{ Number(((item.data / pestsum) * 100).toFixed(2)) }}%</span>
        </view>
      </view>
      <view class="tablebox">
        <view class="top_text">
          <view
            :class="topindex == index ? 'title_text_color' : 'tltle_text'"
            v-for="(item, index) in toptext"
            :key="index"
            @click="changeindex(index)"
          >
            <span class="title_item">
              {{ item }}
            </span>
          </view>
        </view>
        <scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
          <table class="table" v-if="topindex == 0">
            <tr class="tr">
              <th class="th" v-for="(item, index) in thdata" :key="'a' + index">
                {{ item }}
              </th>
            </tr>
            <tr class="tr" v-for="(items, indexs) in eqlistdata" :key="indexs">
              <td class="td">{{ items.deviceId }}</td>
              <td class="td">{{ items.deviceName }}</td>
              <td class="td" @click="wormdetails(items.pest_dict)">
                {{ items.pestName }}
              </td>
              <td class="td">{{ items.addtime | timeFormat() }}</td>
              <td class="td">{{ items.location }}</td>
              <td class="td" @click="examine(items.indentify_photo)">查看</td>
            </tr>
            <tr class="tr" v-if="forbidden1">
              <td class="td" v-for="item in 6">暂无数据</td>
            </tr>
          </table>
          <table class="table2" v-else>
            <tr class="tr">
              <th
                class="th"
                v-for="(item, index) in thdata2"
                :key="'a' + index"
              >
                {{ item }}
              </th>
            </tr>
            <tr class="tr" v-for="(items, indexs) in eqlistdata" :key="indexs">
              <td class="td">{{ items.pest_name }}</td>
              <td class="td">{{ items.pest_num }}</td>
              <td class="td">{{ items.addtime | timeFormat() }}</td>
            </tr>
            <tr class="tr" v-if="forbidden2">
              <td class="td" v-for="item in 6">暂无数据</td>
            </tr>
          </table>
        </scroll-view>
        <view class="pagenumber">
          <button @click="prev" :disabled="page == 1">上一页</button>
          <view class="pagenumber_page"> 第{{ page }}页 </view>
          <view class="pagenumber_page"> 共 {{ pagesum }} 页 </view>
          <button @click="next" :disabled="page == pagesum">下一页</button>
        </view>
      </view>
      <u-modal v-model="show" :mask-close-able="true" title="24小时数据">
        <view class="modalbox">
          <p v-for="(item, key) in pest_dict">
            {{ key }}--{{ pest_dict[key] }}头
          </p>
        </view>
      </u-modal>
    </view>
  </view>
</template>

<script>
import uCharts from '../../../../components/js_sdk/u-charts/u-charts/u-charts.js';
var canvaColumnA = null;
var canvasRing = null;
export default {
  data() {
    return {
      modelPicker: false,
      identify_model: 1,
      modelList: [
        {
          value: 'A',
          label: '模型A',
        },
        {
          value: 'B',
          label: '模型B',
        },
      ],
      d_id: '',
      oldtime: '',
      newtime: '',
      sp_hour_st: '00:00', // 归档开始时间
      sp_hour_ed: '00:00', // 归档结束时间
      timeshow: false, // 归档时间设置弹框
      defaultValue: [0, 0],
      list: [
        [
          {
            value: '00:00',
            label: '00时',
          },
          {
            value: '01:00',
            label: '01时',
          },
          {
            value: '02:00',
            label: '02时',
          },
          {
            value: '03:00',
            label: '03时',
          },
          {
            value: '04:00',
            label: '04时',
          },
          {
            value: '05:00',
            label: '05时',
          },
          {
            value: '06:00',
            label: '06时',
          },
          {
            value: '07:00',
            label: '07时',
          },
          {
            value: '08:00',
            label: '08时',
          },
          {
            value: '09:00',
            label: '09时',
          },
          {
            value: '10:00',
            label: '10时',
          },
          {
            value: '11:00',
            label: '11时',
          },
          {
            value: '12:00',
            label: '12时',
          },
          {
            value: '13:00',
            label: '13时',
          },
          {
            value: '14:00',
            label: '14时',
          },
          {
            value: '15:00',
            label: '15时',
          },
          {
            value: '16:00',
            label: '16时',
          },
          {
            value: '17:00',
            label: '17时',
          },
          {
            value: '18:00',
            label: '18时',
          },
          {
            value: '19:00',
            label: '19时',
          },
          {
            value: '20:00',
            label: '20时',
          },
          {
            value: '21:00',
            label: '21时',
          },
          {
            value: '22:00',
            label: '22时',
          },
          {
            value: '23:00',
            label: '23时',
          },
        ],
        [
          {
            value: '00:00',
            label: '00时',
          },
          {
            value: '01:00',
            label: '01时',
          },
          {
            value: '02:00',
            label: '02时',
          },
          {
            value: '03:00',
            label: '03时',
          },
          {
            value: '04:00',
            label: '04时',
          },
          {
            value: '05:00',
            label: '05时',
          },
          {
            value: '06:00',
            label: '06时',
          },
          {
            value: '07:00',
            label: '07时',
          },
          {
            value: '08:00',
            label: '08时',
          },
          {
            value: '09:00',
            label: '09时',
          },
          {
            value: '10:00',
            label: '10时',
          },
          {
            value: '11:00',
            label: '11时',
          },
          {
            value: '12:00',
            label: '12时',
          },
          {
            value: '13:00',
            label: '13时',
          },
          {
            value: '14:00',
            label: '14时',
          },
          {
            value: '15:00',
            label: '15时',
          },
          {
            value: '16:00',
            label: '16时',
          },
          {
            value: '17:00',
            label: '17时',
          },
          {
            value: '18:00',
            label: '18时',
          },
          {
            value: '19:00',
            label: '19时',
          },
          {
            value: '20:00',
            label: '20时',
          },
          {
            value: '21:00',
            label: '21时',
          },
          {
            value: '22:00',
            label: '22时',
          },
          {
            value: '23:00',
            label: '23时',
          },
        ],
      ],
      tiemshow: false,
      cWidth: '350',
      cHeight: '350',
      pixelRatio: 1,
      pickertfone: false,
      yservalue: '',
      yearlist: [],
      yserindex: '',
      pickertfworm: false,
      wormvalue: '',
      wormlist: [],
      wormindex: '',
      timeobj: {
        endTime: '',
        highNum: '',
        highTime: '',
        startTime: '',
      },
      progresslist: [],
      reslist: {
        char_data: {},
        at_ah_info: [],
      },
      pestsum: 0,
      colorlist: [
        'rgb(24, 144, 255)',
        'rgb(47, 194, 91)',
        'rgb(250, 204, 20)',
        'rgb(240, 72, 100)',
        'rgb(133, 67, 224)',
        'rgb(144, 237, 125)',
      ],
      page: 1,
      pagesum: 1,
      eqlistdata: [],
      thdata: [
        '设备ID',
        '设备名称',
        '害虫名称',
        '上报时间',
        '设备位置',
        '图像',
      ],
      thdata2: ['害虫名称', '害虫数量', '上报时间'],
      topindex: 0,
      toptext: ['图像溯源', '虫害基础数据'],
      forbidden1: false,
      forbidden2: false,
      show: false,
      pest_dict: {},
    };
  },
  methods: {
    // 切换模型
    confirmModel(e) {
      this.modelList.forEach((item, index) => {
        if (e[0].value == item.value) {
          this.identify_model = index;
        }
      });
      this.getyear();
      // console.log(e)
    },
    getyear() {
      var Year = new Date().getFullYear();
      var num = Year - 2019;
      for (var i = 0; i < num + 1; i++) {
        this.yearlist.push(2019 + i);
      }
      this.yservalue = this.yearlist[this.yearlist.length - 1];
      this.yserindex = this.yearlist.length - 1;
      this.getwormtime();
    },
    async getwormtime() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.worm_lamp.pest_raise_info',
        data: {
          d_ids: this.d_id,
          identify_model: this.modelList[this.identify_model].value,
          year: this.yservalue,
        },
      });
      // console.log(res)
      this.wormlist = res.pest_list;
      this.wormtimelist = res.pest_info;
      this.wormvalue = this.wormlist[0];
      this.wormindex = 0;
      if (this.wormvalue) {
        this.timeobj = this.wormtimelist[this.wormvalue];
      }
      this.$nextTick(() => {
        this.getwormline();
        if (this.topindex == 0) {
          this.gettabledata();
        } else if (this.topindex == 1) {
          this.gettabledata2();
        }
      }, 500);
      console.log(this.timeobj);
    },
    confirmFun(e) {
      console.log(e);
      this.yserindex = e[0];
      this.yservalue = this.yearlist[e[0]];
      this.getwormtime();
    },
    confirmFun2(e) {
      // console.log(e)
      this.wormindex = e[0];
      this.wormvalue = this.wormlist[e[0]];
      this.timeobj = this.wormtimelist[this.wormvalue];
      this.setlineoption();
    },
    async getwormline() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.worm_lamp.pest_statistics_char_new',
        data: {
          d_ids: this.d_id,
          identify_model: this.modelList[this.identify_model].value,
          start_time: this.oldtime,
          end_time: this.newtime,
          sp_hour_st: this.sp_hour_st,
          sp_hour_ed: this.sp_hour_ed,
          amend: 1,
        },
      });
      // console.log(res)
      this.reslist.char_data = res.char_data;
      this.reslist.at_ah_info = res.at_ah_info;
      var ringarr = [];

      if (this.checkObj(res.pest_total)) {
        for (var key in res.pest_total) {
          var nameobj = {
            name: '',
            data: '',
          };
          // console.log(key)
          nameobj.name = key;
          nameobj.data = res.pest_total[key];
          ringarr.push(nameobj);
        }
      }
      this.setlineoption();
      // this.showRing(ringarr)
      var num = 0;
      for (var i = 0; i < ringarr.length - 5; i++) {
        console.log(ringarr[i].name);
        num += ringarr[i].data;
      }
      this.pestsum = 0;
      for (var i = 0; i < ringarr.length; i++) {
        this.pestsum += ringarr[i].data;
      }
      var sumobj = {
        name: '其他',
        data: num,
      };
      var ringarr2 = ringarr.slice(ringarr.length - 5);
      ringarr2.unshift(sumobj);
      // console.log(ringarr2)
      this.showRing(ringarr2);
      console.log(ringarr);
      this.progresslist = ringarr;
    },
    // 根据起始日期获取中间时间列表
    getDates(startDate, endDate) {
      var dates = [];
      var currentDate = new Date(startDate);
      endDate = new Date(endDate);

      while (currentDate <= endDate) {
        dates.push(currentDate.toISOString().split('T')[0].substring(5));
        currentDate.setDate(currentDate.getDate() + 1);
      }

      return dates;
    },
    // 时间戳转换为月日，并以-分割，同时确保不足两位的数字补零
    formatMonthDay(timestamp) {
      var date = new Date(timestamp * 1000);
      var month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份并补零
      var day = date.getDate().toString().padStart(2, '0'); // 获取日期并补零

      return `${month}-${day}`;
    },
    setlineoption() {
      var res = this.reslist;
      var obj = [];
      let xtitle = this.getDates(this.oldtime, this.newtime);
      var aharr = Array(xtitle.length).fill(null);
      var atHigharr = Array(xtitle.length).fill(null); //高温
      var atLowarr = Array(xtitle.length).fill(null); //低温
      var pestArr = Array(xtitle.length).fill(null);
      let indentText = 0;
      res.at_ah_info.forEach((item) => {
        let index = xtitle.indexOf(this.formatMonthDay(item.addtime));
        atHigharr[index] = item.height;
        atLowarr[index] = item.low;
        aharr[index] = item.ah;
      });
      res.char_data[this.wormvalue] &&
        res.char_data[this.wormvalue].forEach((pest) => {
          let index = xtitle.indexOf(this.formatMonthDay(pest.addtime));
          pestArr[index] = pest.sum;
        });

      var atHighobj = {
        name: '高温',
        data: atHigharr,
        color: '#ff0000',
      };
      var atlowobj = {
        name: '低温',
        data: atLowarr,
        color: '#00E29D',
      };
      var ahobj = {
        name: '湿度',
        data: aharr,
        color: '#6CBBFF',
      };
      var pestObj = {
        name: this.wormvalue || '',
        data: pestArr,
        color: '#FA73F5',
      };
      obj.push(atHighobj);
      obj.push(atlowobj);
      obj.push(ahobj);
      obj.push(pestObj);
      console.log(xtitle, 'xtitle', obj);
      this.showColumn('canvasColumnA', xtitle, obj);
    },
    checkObj(obj) {
      for (let i in obj) {
        return true;
      }
      return false;
    },
    tiemchange(e) {
      console.log(e);
      // this.oldtime = +new Date(e.startDate) / 1000 - 8 * 60 * 60
      // this.newtime = +new Date(e.endDate) / 1000 + 16 * 60 * 60 - 1
      this.newtime = e.endDate;
      this.oldtime = e.startDate;
      // newtime: "",
      console.log(this.oldtime, this.newtime);
      this.page = 1;
      this.getwormline();
      if (this.topindex == 0) {
        this.gettabledata();
      } else if (this.topindex == 1) {
        this.gettabledata2();
      }
    },
    Hourchange(e) {
      this.sp_hour_st = e[0].value;
      this.sp_hour_ed = e[1].value;
      // 本地缓存
      uni.setStorageSync('sp_hour_st', this.sp_hour_st);
      uni.setStorageSync('sp_hour_ed', this.sp_hour_ed);
      this.getyear();
      console.log(e);
    },
    timetab(e) {
      // e = new Date(e * 1000)
      // var year = e.getFullYear()
      // var month = e.getMonth() + 1 < 10 ? "0" + (e.getMonth() + 1) : e.getMonth() + 1
      // var day = e.getDate() < 10 ? "0" + e.getDate() : e.getDate()
      // var time = year + "/" + month + "/" + day
      // return time
    },
    showColumn(id, xtitle, xinfo) {
      console.log(xinfo, '高温');
      var _self = this;
      const ctx = uni.createCanvasContext(id, this);
      canvaColumnA = new uCharts({
        context: ctx,
        type: 'line',
        legend: {
          position: 'top',
        },
        fontSize: 11,
        background: '#FFFFFF',
        pixelRatio: 1,
        animation: true,
        dataLabel: false,
        categories: xtitle,
        series: xinfo,
        enableScroll: true, //开启图表拖拽功能
        xAxis: {
          disableGrid: true,
          type: 'grid',
          gridType: 'dash',
          itemCount: 5, //x轴单屏显示数据的数量，默认为5个
          scrollShow: true, //新增是否显示滚动条，默认false
          // scrollAlign: 'left', //滚动条初始位置
          scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
          scrollColor: '#DEE7F7', //默认为 #A6A6A6
        },
        yAxis: {},
        width: _self.cWidth * 1,
        height: _self.cHeight * 1,
        extra: {
          line: {
            type: 'curve',
          },
        },
      });
    },
    touchLineA(e) {
      // console.log(e)
      canvaColumnA.scrollStart(e);
    },
    moveLineA(e) {
      canvaColumnA.scroll(e);
    },
    touchEndLineA(e) {
      canvaColumnA.scrollEnd(e);
      //下面是toolTip事件，如果滚动后不需要显示，可不填写
      canvaColumnA.showToolTip(e, {
        format: function (item, category) {
          return category + ' ' + item.name + ':' + item.data;
        },
      });
    },
    showRing(data) {
      var _self = this;
      const ctx = uni.createCanvasContext('canvasRing', this);
      canvasRing = new uCharts({
        context: ctx,
        type: 'ring',
        fontSize: 11,
        legend: {
          show: true,
        },
        extra: {
          ring: {
            offsetAngle: -45,
            ringWidth: 40 * _self.pixelRatio,
            labelWidth: 15,
          },
        },
        background: '#FFFFFF',
        pixelRatio: _self.pixelRatio,
        series: data,
        animation: true,
        width: _self.cWidth * _self.pixelRatio,
        height: _self.cHeight * _self.pixelRatio,
        disablePieStroke: true,
        dataLabel: true,
      });
    },
    touchRing(e) {
      canvasRing.showToolTip(e, {
        format: function (item) {
          return item.name + ':' + item.data;
        },
      });
    },
    tap(e) {
      canvasgroup[e.target.id].touchLegend(e);
      canvasgroup[e.target.id].showToolTip(e);
    },
    async gettabledata() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.worm_lamp.pest_image_source',
        data: {
          d_ids: this.d_id,
          identify_model: this.modelList[this.identify_model].value,
          start_time: this.oldtime,
          end_time: this.newtime,
          sp_hour_st: this.sp_hour_st,
          sp_hour_ed: this.sp_hour_ed,
          page: this.page,
        },
      });
      this.pagesum = Math.ceil(res.total_count / 10);
      this.eqlistdata = res.pest_image_data;
      if (this.eqlistdata.length == 0) {
        this.forbidden1 = true;
      } else {
        this.forbidden1 = false;
      }
      console.log(res);
    },
    async gettabledata2() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.worm_lamp.pest_base_data',
        data: {
          d_ids: this.d_id,
          identify_model: this.modelList[this.identify_model].value,
          start_time: this.oldtime,
          end_time: this.newtime,
          page: this.page,
        },
      });
      this.pagesum = Math.ceil(res.total_count / 10);
      this.eqlistdata = res.pest_image_data;
      if (this.eqlistdata.length == 0) {
        this.forbidden2 = true;
      } else {
        this.forbidden2 = false;
      }
      console.log(res);
    },
    changeindex(e) {
      this.topindex = e;
      this.page = 1;
      if (e == 0) {
        this.gettabledata();
      } else if (e == 1) {
        this.gettabledata2();
      }
    },
    prev() {
      this.page--;
      if (this.topindex == 0) {
        this.gettabledata();
      } else if (this.topindex == 1) {
        this.gettabledata2();
      }
    },
    next() {
      this.page++;
      if (this.topindex == 0) {
        this.gettabledata();
      } else if (this.topindex == 1) {
        this.gettabledata2();
      }
    },
    wormdetails(data) {
      console.log(data);
      this.show = true;
      this.pest_dict = data;
    },
    examine(url) {
      var imgarr = [url];
      uni.previewImage({
        urls: imgarr,
        current: 0,
      });
    },
  },
  onLoad(option) {
    this.d_id = option.d_id;
    var date = +new Date();
    this.oldtime = this.formatTime(date, 'yyyy-MM-dd');
    this.newtime = this.formatTime(date, 'yyyy-MM-dd');
    this.sp_hour_st =
      uni.getStorageSync('sp_hour_st') == ''
        ? '00:00'
        : uni.getStorageSync('sp_hour_st');
    this.sp_hour_ed =
      uni.getStorageSync('sp_hour_ed') == ''
        ? '00:00'
        : uni.getStorageSync('sp_hour_ed');
    this.defaultValue = [
      this.sp_hour_st.substring(0, 1) == '0'
        ? this.sp_hour_st.substring(1, 2)
        : this.sp_hour_st.substring(0, 2),
      this.sp_hour_ed.substring(0, 1) == '0'
        ? this.sp_hour_ed.substring(1, 2)
        : this.sp_hour_ed.substring(0, 2),
    ];
    this.cWidth = uni.upx2px(650);
    this.cHeight = uni.upx2px(500);
    this.getyear();
  },
};
</script>

<style lang="scss">
.anabox {
  background-color: #f1f4ff;
  padding-top: 10px;
}

.selecttimes {
  // box-shadow: 0 0 10rpx #bcb9ca;
  // padding: 10rpx 20rpx;
  padding: 10px;
  box-sizing: border-box;
  margin: 10px auto 0;
  display: flex;
  background-color: #fff;
  width: 95%;

  .timesbox {
    display: flex;
    justify-content: space-around;
    width: 60%;
    margin-left: 10px;
    border: 1px solid #cccccc;
    padding: 5px;
    font-size: 12px;
    border-radius: 5px;

    image {
      width: 30rpx;
      height: 30rpx;
      margin-top: 6rpx;
    }

    .icon {
      color: #949494;
      text-align: right;
      margin-left: 30rpx;
    }
  }
}

.wormtime {
  width: 95%;
  padding: 10px;
  box-sizing: border-box;
  margin: 0 auto;
  // margin-top: 10px;
  display: flex;
  justify-content: space-around;
  background-color: #fff;

  .wormtime_item {
    width: 25%;
    margin-top: 10px;
    padding: 10px;
    text-align: center;
    .img {
      width: 50px;
      height: 50px;
    }

    p:nth-child(2) {
      font-size: 16px;
      font-weight: 700;
    }

    p:nth-child(3) {
      font-size: 12px;
      margin-top: 5px;
    }

    p:last-child {
      font-size: 12px;
      margin-top: 5px;
    }
  }

  .wormtime_item:first-child {
    background-color: #f9fafe;
  }

  .wormtime_item:nth-child(2) {
    background-color: #fffcf9;
  }

  .wormtime_item:last-child {
    background-color: #fcf8ff;
  }
}

.schedulebox {
  display: flex;
  padding: 10px 10px;
  box-sizing: border-box;
  width: 95%;
  // justify-content: space-around;
  margin: 0px auto;
  background-color: #fff;

  .schedule {
    display: flex;
    width: 240rpx;
    height: 50rpx;
    // border: 2rpx solid #F0F0F0;
    margin-right: 20rpx;
    background-color: #f9fafc;
    border-radius: 25px;

    .schedule_value {
      width: 70%;
      text-align: center;
      line-height: 50rpx;
      font-size: 24rpx;
    }

    .schedule_icon {
      width: 30%;
      // background-color: #F2F2F2;
      text-align: center;
      line-height: 50rpx;

      ::v-deep .u-icon__icon {
        color: rgba(0, 0, 0, 0.3);
      }
    }
  }
}

.tendency {
  width: 95%;
  display: flex;
  justify-content: space-around;
  margin: 0 auto;
  background-color: #fff;
}

.tendency_pro {
  width: 95%;
  padding: 0 20px;
  box-sizing: border-box;
  height: 140px;
  overflow-y: auto;
  margin: 0 auto;
  background-color: #fff;

  span:first-child {
    display: inline-block;
    width: 100px;
    overflow: hidden; //溢出隐藏
    white-space: nowrap; //禁止换行
    text-overflow: ellipsis; //...
  }

  .u-progress {
    width: calc(100% - 150px);
  }

  span:last-child {
    display: inline-block;
    width: 30px;
    margin-left: 10px;
  }
}

.tablebox {
  display: flex;
  flex-wrap: wrap;
  width: 95%;
  margin: 10px auto 20px;
  // box-shadow: 0 0 10rpx #bcb9ca;
  background-color: #fff;

  .top_text {
    width: 100%;
    display: flex;
    height: 30px;
    line-height: 30px;

    .tltle_text {
      width: 30%;
      text-align: center;
      // border: 2rpx solid #F0F0F0;
      // text-align: center;
      // background-color: #F0F0F0;
      // color: #000;
    }

    .title_text_color {
      width: 30%;
      text-align: center;

      .title_item {
        border-bottom: 2px solid #64cc82;
        color: #64cc82;
      }

      // width: 50%;
      // border: 2rpx solid #64CC82;
      // background-color: #64CC82;
      // color: #fff;
      // text-align: center;
    }
  }

  .scroll-X {
    width: 95%;
    margin: 20rpx auto;

    .table {
      width: 1800rpx;

      .td:nth-child(3),
      .td:last-child {
        color: #37aed8;
      }
    }

    .tr {
      display: flex;
      overflow: hidden;

      .th,
      .td {
        display: inline-block;
        padding: 5rpx;
        text-align: center;
        height: 52rpx;
        line-height: 52rpx;
        width: 320rpx;
      }
    }

    .tr:nth-child(2n-1) {
      background-color: #f5fff8;
    }

    .tr:first-child {
      background-color: #57c878;
      color: #fff;
    }
  }

  .pagenumber {
    display: flex;
    margin: 20rpx auto;

    button {
      width: 150rpx;
      height: 50rpx;
      line-height: 50rpx;
      font-size: 26rpx;
      text-align: center;
      background-color: #57c878;
      color: #ffffff;
    }

    .pagenumber_page {
      width: 150rpx;
      height: 50rpx;
      line-height: 50rpx;
      font-size: 26rpx;
      text-align: center;
    }
  }
}

.modalbox {
  width: 100%;
  // display: flex;
  // flex-wrap: wrap;
  height: 120px;
  padding-left: 30px;
  margin-top: 10px;
  overflow-y: auto;

  p {
    // width: 50%;
  }
}

::v-deep .u-calendar__action {
  display: flex;
  justify-content: space-around;

  .u-calendar__action__text {
    line-height: 25px;
  }
}
</style>