bigDataApp/pages/cb/zjxydetail/thxyhisdata.vue

<template>
  <view>
    <view class="timeandtype">
      <view class="timebox">
        <view class="firsttime" @click="timeshow = true">
          <view class="" v-if="start_time != ''">
            {{ (start_time / 1000) | timeFormat() }}
          </view>
          <view class="" v-else>
            {{ start_time == '' ? '请选择开始时间' : start_time }}
          </view>
        </view>
        <view class="jiange"> - </view>
        <view class="endtime" @click="timeshow = true">
          <view class="" v-if="end_time != ''">
            {{ (end_time / 1000) | timeFormat() }}
          </view>
          <view class="" v-else>
            {{ end_time == '' ? '请选择结束时间' : end_time }}
          </view>
        </view>
      </view>
    </view>
    <view class="shuju_one">
      <view class="canvastishi" v-if="!canvastishiTF && !dataloadingtf">
        暂无数据
      </view>
      <view class="canvastishi" v-if="dataloadingtf">
        <p class="dataloading">加载中</p>
      </view>
      <canvas
        v-if="canvastishiTF"
        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="shuju_one">
      <view class="canvastishi" v-if="!canvastishiTF2 && !dataloadingtf2">
        暂无数据
      </view>
      <view class="canvastishi" v-if="dataloadingtf2">
        <p class="dataloading">加载中</p>
      </view>
      <canvas
        v-if="canvastishiTF2"
        canvas-id="canvasColumnB"
        id="canvasColumnB"
        class="charts"
        @touchstart="touchLineB($event)"
        @touchmove="moveLineB($event)"
        @touchend="touchEndLineB($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="condition">
      <scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
        <table class="table" v-if="$QueryPermission(267)">
          <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 historylistdata"
            :key="'b' + indexs"
            v-if="!forbidden"
          >
            <td class="td">{{ items.d_h_t.addtime | timeFormat() }}</td>
            <td class="td">
              {{ Circulation.highVolt.value[items.d_h_t.highVolt] }}
            </td>
            <td class="td">{{ Circulation.light.value[items.d_h_t.light] }}</td>
            <td class="td">{{ items.d_h_t.temperature }}</td>
            <td class="td">{{ items.d_h_t.humidity }}</td>
            <td class="td">{{ items.d_h_t.illumination }}</td>
            <td class="td">
              {{ Circulation.rainFall.value[items.d_h_t.rainFall] }}
            </td>
            <td class="td">
              {{ Circulation.rectifier.value[items.d_h_t.rectifier] }}
            </td>
            <td class="td">
              {{ Circulation.chargeStatus.value[items.d_h_t.chargeStatus] }}
            </td>
            <td class="td">{{ items.d_h_t.bugCount }}</td>
            <td class="td">
              {{ Circulation.rectifier.value[items.d_h_t.solarStatus] }}
            </td>
          </tr>
          <tr class="tr" v-if="forbidden">
            <td class="td" v-for="item in 11">暂无数据</td>
          </tr>
        </table>
        <table class="table" 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 historylistdata"
            :key="'b' + indexs"
            v-if="!forbidden"
          >
            <td class="td">{{ items.d_h_t.addtime | timeFormat() }}</td>
            <td class="td">
              {{ Circulation.highVolt.value[items.d_h_t.highVolt] }}
            </td>
            <td class="td">{{ Circulation.light.value[items.d_h_t.light] }}</td>
            <td class="td">{{ items.d_h_t.temperature }}</td>
            <td class="td">{{ items.d_h_t.humidity }}</td>
            <td class="td">
              {{ Circulation.chargeStatus.value[items.d_h_t.chargeStatus] }}
            </td>
            <td class="td">{{ items.d_h_t.bugCount }}</td>
          </tr>
          <tr class="tr" v-if="forbidden">
            <td class="td" v-for="item in 7">暂无数据</td>
          </tr>
        </table>
      </scroll-view>
      <view class="pagenumber">
        <button @click="prev">上一页</button>
        <view class="pagenumber_page"> 第 {{ page }} 页 </view>
        <view class="pagenumber_page"> 共 {{ pagesum }} 页 </view>
        <button @click="next" :disabled="forbidden">下一页</button>
      </view>
    </view>
    <u-calendar
      v-model="timeshow"
      :mode="mode"
      @change="timechange"
    ></u-calendar>
  </view>
</template>

<script>
import uCharts from '../../../components/js_sdk/u-charts/u-charts/u-charts.js';
import Circulation from '../../../static/js/equipState_dict.json';
var canvaColumnA = null;
var canvaColumnB = null;
export default {
  data() {
    return {
      start_time: '',
      end_time: '',
      timeshow: false,
      mode: 'range',
      cWidth: '400',
      cHeight: '400',
      pixelRatio: 1,
      canvastishiTF: false,
      dataloadingtf: false,
      canvastishiTF2: false,
      dataloadingtf2: false,
      equipInfo: {},
      historylistdata: [],
      thdata: [
        '上报时间',
        '高压网状态',
        '灯管状态',
        '环境温度(℃)',
        '环境湿度(%)',
        '光照度LUX',
        '下雨传感',
        '整流器状态',
        '充电状态',
        '杀虫数(累计)',
        '太阳板状态',
      ],
      thdata2: [
        '上报时间',
        '高压网状态',
        '灯管状态',
        '环境温度(℃)',
        '环境湿度(%)',
        '充电状态',
        '杀虫数(累计)',
      ],
      page: 1,
      pagesum: '10',
      Circulation: Circulation,
      forbidden: false,
    };
  },
  methods: {
    timechange(e) {
      this.start_time = +new Date(e.startDate);
      this.end_time = +new Date(e.endDate);
      this.history();
      this.getworm();
      this.getwind();
    },
    async history() {
      //历史数据列表折线图
      this.dataloadingtf = true;
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.worm_lamp.zjxy_at_ah',
        data: {
          device_type_id: 24,
          d_id: this.equipInfo.d_id,
          start_time: Math.floor(+new Date(this.start_time) / 1000),
          end_time: Math.floor(+new Date(this.end_time) / 1000),
        },
      });
      console.log(res);
      this.dataloadingtf = false;
      this.historydatas = res;
      console.log(this.historydatas);
      if (this.historydatas.length == 0) {
        this.canvastishiTF = false;
      } else {
        this.canvastishiTF = true;

        var arr1 = [];
        var arr2 = [];
        var arr3 = [];
        var xtitle = [];
        for (var i = 0; i < res.length; i++) {
          var times = new Date(res[i].addtime * 1000);
          xtitle.push(
            times.getMonth() +
              1 +
              '/' +
              times.getDate() +
              '-' +
              times.getHours() +
              ':' +
              times.getMinutes()
          );
          arr1.push(res[i].at == '' ? '0' : res[i].at);
          arr2.push(res[i].ah == '' ? '0' : res[i].ah);
        }
        // console.log(arr1)
        var obj = [
          {
            name: '温度',
            data: arr1,
            color: '#00E29D',
          },
          {
            name: '湿度',
            data: arr2,
            color: '#6CBBFF',
          },
        ];
        this.showColumn('canvasColumnA', xtitle, obj);
      }
    },
    async getworm() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.worm_lamp.zjxycb_pest_chart',
        data: {
          d_id: this.equipInfo.d_id,
          start_time: Math.floor(+new Date(this.start_time) / 1000),
          end_time: Math.floor(+new Date(this.end_time) / 1000),
          device_type_id: '24',
        },
      });
      console.log(res);
      this.dataloadingtf2 = false;
      var data = res.pest_data;
      if (data.length == 0) {
        this.canvastishiTF2 = false;
      } else {
        this.canvastishiTF2 = true;

        var arr1 = [];
        var xtitle = [];
        for (var i = 0; i < data.length; i++) {
          var times = new Date(data[i].addtime * 1000);
          xtitle.push(
            times.getMonth() +
              1 +
              '/' +
              times.getDate() +
              '-' +
              times.getHours() +
              ':' +
              times.getMinutes()
          );
          arr1.push(data[i].pest_num == '' ? '0' : data[i].pest_num);
        }
        // console.log(arr1)
        var obj = [
          {
            name: '杀虫次数',
            data: arr1,
            color: '#00E29D',
          },
        ];
        this.showColumn2('canvasColumnB', xtitle, obj);
      }
    },
    async getwind() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.worm_lamp.zjxy_history_data',
        data: {
          d_id: this.equipInfo.d_id,
          start_time: Math.floor(+new Date(this.start_time) / 1000),
          end_time: Math.floor(+new Date(this.end_time) / 1000),
          device_id: this.equipInfo.device_id,
          page: this.page,
        },
      });
      console.log(res);
      if (res.data.length) {
        this.historylistdata = res.data;
        this.pagesum = Math.ceil(res.counts / 10);
        this.forbidden = false;
      } else {
        this.forbidden = true;
      }
    },
    prev() {
      //上一页
      if (this.page > 1) {
        this.page--;
        this.getwind();
      }
    },
    next() {
      //下一页
      if (this.page < this.pagesum) {
        this.page++;
        this.getwind();
      }
    },
    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: 4, //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',
          },
        },
      });
    },
    showColumn2(id, xtitle, xinfo) {
      var _self = this;
      const ctx = uni.createCanvasContext(id, this);
      canvaColumnB = 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: 4, //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;
        },
      });
    },
    touchLineB(e) {
      console.log(e);
      canvaColumnB.scrollStart(e);
    },
    moveLineB(e) {
      canvaColumnB.scroll(e);
    },
    touchEndLineB(e) {
      canvaColumnB.scrollEnd(e);
      //下面是toolTip事件，如果滚动后不需要显示，可不填写
      canvaColumnB.showToolTip(e, {
        format: function (item, category) {
          return category + ' ' + item.name + ':' + item.data;
        },
      });
    },
  },
  onLoad(option) {
    this.equipInfo = option;
    console.log(option);
    this.end_time = +new Date();
    this.start_time = +new Date() - 30 * 24 * 60 * 60 * 1000;
    this.cWidth = uni.upx2px(650);
    this.cHeight = uni.upx2px(500);
    this.history();
    this.getworm();
    this.getwind();
  },
};
</script>

<style lang="less">
.timeandtype {
  // background-color: #F6F6FB;
  // padding: 20rpx;
  box-sizing: border-box;
  width: 90%;
  margin: 40rpx auto 0;
  .timebox {
    box-shadow: 0 0 10rpx #bcb9ca;
    display: flex;
    background-color: #fff;
    padding: 10px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;

    .jiange {
      width: 5%;
      text-align: center;
    }

    .firsttime,
    .endtime {
      width: 45%;
      text-align: center;
    }
  }

  .warntypebox {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    padding: 10px;
    border-top: 1px solid #f6f6fb;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
  }
}
.shuju_one {
  position: relative;
  width: 90%;
  margin: 30rpx auto;
  box-shadow: 0 0 10rpx #bcb9ca;
  padding-top: 20rpx;
  height: 550rpx;

  .canvastishi {
    font-size: 32rpx;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -64rpx;
    margin-top: -21rpx;
    .dataloading:after {
      overflow: hidden;
      display: inline-block;
      vertical-align: bottom;
      animation: ellipsis 2s infinite;
      content: '\2026';
    }

    @keyframes ellipsis {
      from {
        width: 2px;
      }

      to {
        width: 15px;
      }
    }
  }

  .shuju_one_title {
    width: 70%;
    margin: 0 auto;
    display: flex;

    .tltle_text {
      width: 25%;
      border: 2rpx solid #b2b2b2;
      color: #57c878;
      text-align: center;
      font-size: 24rpx;
      height: 50rpx;
      line-height: 50rpx;
    }

    .title_text_color {
      width: 25%;
      border: 2rpx solid #57c878;
      background-color: #57c878;
      color: #fff;
      text-align: center;
      font-size: 24rpx;
      height: 50rpx;
      line-height: 50rpx;
    }
  }
}
::v-deep .u-calendar__action {
  display: flex;
  justify-content: space-around;

  .u-calendar__action__text {
    line-height: 25px;
  }
}
.condition {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 30rpx auto;
  box-shadow: 0 0 10rpx #bcb9ca;
  margin-bottom: 30rpx;

  .scroll-X {
    width: 95%;
    margin: 20rpx auto;
    .table {
      // width: 1672px;
    }
    .tr {
      display: flex;
      overflow: hidden;

      .th,
      .td {
        display: inline-block;
        padding: 5rpx;
        width: 240rpx;
        text-align: center;
        height: 52rpx;
        line-height: 52rpx;
        border: 2rpx solid #f1f1f1;
      }

      .th:first-child,
      .td:first-child {
        width: 300rpx;
      }
    }
    .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: 100rpx;
      height: 50rpx;
      line-height: 50rpx;
      font-size: 26rpx;
      text-align: center;
      margin: 0 20rpx;
    }
  }
}
</style>