bigDataApp/pages/cb/xctdetail/analyse.vue

<template>
  <view class="anabox">
    <view class="timebox">
      <view class="schedulebox">
        <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 {
      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: {
    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: 'A',
          year: this.yservalue,
          device_type: 'xct',
        },
      });
      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];
      }
      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: 'A',
          start_time: this.oldtime,
          end_time: this.newtime,
          sp_hour_st: this.sp_hour_st,
          sp_hour_ed: this.sp_hour_ed,
          device_type: 'xct',
        },
      });
      // 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;
    },
    setlineoption() {
      var res = this.reslist;
      var xtitle = [];
      var obj = [];
      if (res.at_ah_info.length != 0) {
        var aharr = [];
        var atarr = [];
        var pestArr = [];
        let indentText = 0;
        for (var i = 0; i < res.at_ah_info.length; i++) {
          var times = new Date(res.at_ah_info[i].addtime * 1000);
          xtitle.push(times.getMonth() + 1 + '/' + times.getDate());
          atarr.push(res.at_ah_info[i].at == '' ? '0' : res.at_ah_info[i].at);
          aharr.push(res.at_ah_info[i].ah == '' ? '0' : res.at_ah_info[i].ah);
          if (this.checkObj(res.char_data) && res.char_data[this.wormvalue]) {
            if (
              res.char_data[this.wormvalue][i - indentText] &&
              res.char_data[this.wormvalue][i - indentText].addtime ==
                res.at_ah_info[i].addtime
            ) {
              pestArr.push(res.char_data[this.wormvalue][i - indentText].sum);
            } else {
              indentText++;
              pestArr.push(null);
            }
          }
        }
        // console.log(this.wormvalue)
        // if (this.checkObj(res.char_data)) {
        // 	for (var key in res.char_data) {
        // 		if (this.wormvalue == key) {
        // 			var wormobj = {
        // 				name: key,
        // 				data: [],
        // 			}
        // 			for (var i = 0; i < res.char_data[key].length; i++) {
        // 				wormobj.data.push(res.char_data[key][i].ah == "" ? "0" : res.char_data[key][i].sum)
        // 			}
        // 			obj.push(wormobj)
        // 		}
        // 	}

        // }
        var atobj = {
          name: '温度',
          data: atarr,
          color: '#00E29D',
        };
        var ahobj = {
          name: '湿度',
          data: aharr,
          color: '#6CBBFF',
        };
        var pestObj = {
          name: this.wormvalue,
          data: pestArr,
        };
        obj.push(atobj);
        obj.push(ahobj);
        obj.push(pestObj);
      }
      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_xc', this.sp_hour_st);
      uni.setStorageSync('sp_hour_ed_xc', 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) {
      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: 'A',
          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,
          device_type: 'xct',
        },
      });
      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: 'A',
          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.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_xc') == ''
        ? '00:00'
        : uni.getStorageSync('sp_hour_st_xc');
    this.sp_hour_ed =
      uni.getStorageSync('sp_hour_ed_xc') == ''
        ? '00:00'
        : uni.getStorageSync('sp_hour_ed_xc');
    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();
    this.$nextTick(() => {
      this.getwormline();
      if (this.topindex == 0) {
        this.gettabledata();
      } else if (this.topindex == 1) {
        this.gettabledata2();
      }
    }, 500);
  },
};
</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;
    .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>