bigDataApp/pages/cb/nlNewXy/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="!canvastishiTF2"> 暂无数据 </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">
          <tr class="tr">
            <th class="th" v-for="(item, index) in thdata" :key="'a' + index">
              {{ item[0] }}
            </th>
          </tr>
          <tr
            class="tr"
            v-for="(items, indexs) in historylistdata"
            :key="'b' + indexs"
          >
            <td class="td" v-for="head in thdata" :key="'head' + head[1]">
              <view v-if="head[1] == 'addtime'">{{
                items.d_h_t.addtime | timeFormat()
              }}</view>
              <view v-else>
                {{ items.d_h_t[head[1]] }}
              </view>
            </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: [
        ['上报时间', 'addtime'],
        ['电池功率', 'battery_p'],
        ['太阳能板电流', 'solar_c'],
        ['太阳能板功率', 'solar_p'],
        ['电池电压', 'battery_v'],
        ['太阳能板电压', 'solar_v'],
        ['电池电流', 'battery_c'],
      ],
      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.page = 1;
      this.history();
      this.getworm();
      this.getwind();
    },
    async history() {
      //历史数据列表折线图
      this.dataloadingtf = true;
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.worm_lamp.xy_three_at_ah',
        data: {
          device_type_id: 8,
          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;
    },
    async getworm() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.worm_lamp.xycb_pest_chart_new',
        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: 29,
          years: new Date().getFullYear(),
        },
      });
      console.log(res);
      this.dataloadingtf2 = false;
      var data = res.pest_data;
      if (data.length == 0) {
        this.canvastishiTF2 = false;
      } else {
        this.canvastishiTF2 = true;
        // console.log(arr1)
        var obj = [
          {
            name: '诱虫次数',
            data: res.pest_data[0],
            color: '#00E29D',
          },
        ];
        this.showColumn2('canvasColumnB', res.md_lst, obj);
      }
    },
    async getwind() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.worm_lamp.xy_three_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,
        },
      });
      this.historylistdata = res.data;
      this.pagesum = Math.ceil(res.counts / 10);
      if (res.data.length) {
        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>