bigDataApp/pages/cb/xy2.0/historydatas.vue

<template>
  <view>
    <view class="">
      <view class="timeandtype">
        <view class="timebox">
          <view class="firsttime" @click="timeshow = true">
            <view class="" v-if="start_time != ''">
              {{
                ((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 == '' ? '请选择结束时间' : 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="refresh" @click="refresh"> 刷 新 </view>
      <view class="condition">
        <scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
          <table class="table" v-if="$QueryPermission(266)">
            <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.xy_addtime | timeFormat() }}</td>
              <td class="td">{{ items.at == '' ? '0' : items.at }}</td>
              <td class="td">{{ items.ah == '' ? '0' : items.ah }}</td>
              <!-- <td class="td">{{items.warn==""?"0":items.warn}}</td> -->
              <td class="td">{{ items.b_V == '' ? '0' : items.b_V }}</td>
              <td class="td">{{ items.b_c == '' ? '0' : items.b_c }}</td>
              <td class="td">{{ items.p_v == '' ? '0' : items.p_v }}</td>
              <td class="td">{{ items.p_c == '' ? '0' : items.p_c }}</td>
            </tr>
            <tr class="tr" v-if="forbidden">
              <td class="td" v-for="item in 8">暂无数据</td>
            </tr>
          </table>
          <table class="thdata2" 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.xy_addtime | timeFormat() }}</td>
              <td class="td">{{ items.at == '' ? '0' : items.at }}</td>
              <td class="td">{{ items.ah == '' ? '0' : items.ah }}</td>
              <!-- <td class="td">{{items.warn==""?"--":items.warn}}</td> -->
            </tr>
            <tr class="tr" v-if="forbidden">
              <td class="td" v-for="item in 4">暂无数据</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>
    </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';
var canvaColumnA = null;
export default {
  data() {
    return {
      styles: {
        // width: "650rpx",
        height: '400rpx',
      },
      d_id: '',
      start_time: '',
      end_time: '',
      historydatas: [],
      titletext: ['24小时', '近一个月', '近半年', '近一年'],
      titleidnex: 0,
      device_id: '',
      page: 1,
      historylistdata: [],
      thdata: [
        '上报时间',
        '环境温度(°C)',
        '环境湿度(%)',
        '电池电压',
        '电池电流',
        '太阳能板电压',
        '太阳能板电流',
      ],
      thdata2: ['上报时间', '环境温度(°C)', '环境湿度(%)'],
      forbidden: false,
      cWidth: '400',
      cHeight: '400',
      pixelRatio: 1,
      canvastishiTF: false, //暂无数据提示
      dataloadingtf: true, //加载中提示
      pagesum: 1,
      worms: [],
      timeshow: false,
      mode: 'range',
      device_code: 0,
    };
  },
  methods: {
    async Chistory() {
      //历史数据列表折线图
      this.dataloadingtf = true;
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_line_chart',
        data: {
          device_id: this.device_id,
          start_time: parseInt(this.start_time / 1000),
          end_time: parseInt(this.end_time / 1000),
          status: 'pest',
          device_code: this.device_code,
        },
      });
      this.dataloadingtf = false;
      this.worms = res;
      console.log(this.worms);
      if (this.worms.data.length == 0) {
        this.canvastishiTF = false;
      } else {
        this.canvastishiTF = true;
        var arr3 = [];
        var xtitle = [];
        for (var i = 0; i < res.data.length; i++) {
          xtitle.push(res.data[i].xy_addtime);
        }
        for (var j = 0; j < this.worms.data.length; j++) {
          arr3.push(
            this.worms.data[j].pest_num == ''
              ? '0'
              : this.worms.data[j].pest_num
          );
        }
        console.log(arr3);
        this.$nextTick(() => {
          var obj = [
            {
              name: '诱虫次数',
              data: arr3,
              color: '#ff0000',
            },
          ];
          this.showColumn('canvasColumnA', xtitle, obj);
        });
      }
    },
    //forecast.worm_lamp.device_history_data历史数据列表
    async historylist() {
      //历史数据列表
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_history',
        data: {
          device_id: this.device_id,
          start_time: parseInt(this.start_time / 1000),
          end_time: parseInt(this.end_time / 1000),
          page: this.page,
          device_code: this.device_code,
        },
      });
      this.historylistdata = res.data;
      console.log(res.data);
      this.pagesum = Math.ceil(res.nums / 10) || 1;
      if (res.data.length == 0) {
        this.forbidden = true;
      } else {
        this.forbidden = false;
      }
      console.log(this.historylistdata);
    },
    // forecast.send_control.get_device_config 获取当前时间的数据
    async newdata() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_mqtt',
        data: {
          d_id: this.d_id,
        },
      });
      if (res) {
        uni.showToast({
          title: '刷新成功',
          duration: 2000,
          icon: 'none',
        });
      } else {
        uni.showToast({
          title: '刷新失败',
          duration: 2000,
          icon: 'none',
        });
      }
    },
    refresh() {
      //获取当前时间的数据
      this.newdata();
    },
    prev() {
      //上一页
      if (this.page > 1) {
        this.page--;
        this.historylist();
      }
    },
    next() {
      //下一页
      if (this.page < this.pagesum) {
        this.page++;
        this.historylist();
      }
    },
    clickLeft() {
      uni.navigateBack({
        delta: 1,
      });
    },
    showColumn(id, xtitle, xinfo) {
      var _self = this;
      const ctx = uni.createCanvasContext(id, this);
      canvaColumnA = new uCharts({
        context: ctx,
        type: 'line',
        legend: {
          position: 'top',
        },
        fontSize: 10,
        background: '#FFFFFF',
        pixelRatio: 1,
        animation: true,
        dataLabel: false,
        categories: xtitle,
        series: xinfo,
        enableScroll: true, //开启图表拖拽功能
        xAxis: {
          disableGrid: true,
          type: 'grid',
          gridType: 'dash',
          itemCount: 3, //x轴单屏显示数据的数量，默认为5个
          scrollShow: true, //新增是否显示滚动条，默认false
          // scrollAlign: 'left', //滚动条初始位置
          scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
          scrollColor: '#DEE7F7', //默认为 #A6A6A6
        },
        yAxis: {
          gridType: 'dash',
          gridColor: '#CCCCCC',
          dashLength: 8,
          splitNumber: 5,
          format: (val) => {
            return val.toFixed(1);
          },
        },
        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;
        },
      });
    },
    closetime() {
      this.start_time = '';
      this.end_time = '';
      this.listpage = 1;
      this.Chistory();
      this.historylist();
    },
    timechange(e) {
      console.log(e);
      this.start_time = +new Date(e.startDate);
      this.end_time = +new Date(e.endDate);
      this.listpage = 1;
      this.Chistory();
      this.historylist();
    },
  },
  onLoad(option) {
    console.log(option);
    this.d_id = option.d_id;
    this.device_id = option.device_id;
    this.device_code = option.device_code;
    this.cWidth = uni.upx2px(650);
    this.cHeight = uni.upx2px(500);
  },
  onShow() {
    this.end_time = +new Date() + 1000;
    this.start_time = this.end_time - 24 * 60 * 60 * 1000 * 30;
    console.log(new Date(this.end_time), new Date(this.start_time));
    // this.history()
    this.Chistory();
    this.historylist();
  },
  onPullDownRefresh() {
    console.log('refresh');
    this.Chistory();
    this.historylist();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
};
</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,
.shuju_two {
  // position: absolute;
  // top: 100px;
  // width: 90%;
  // left: 5%;
  width: 90%;
  margin: 40rpx 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;
    }
  }
}

.refresh {
  width: 90%;
  // margin: 40rpx auto;
  margin-left: 5%;
  width: 160rpx;
  height: 50rpx;
  background-color: #57c878;
  color: #ffffff;
  line-height: 50rpx;
  text-align: center;
}

.condition {
  width: 90%;
  margin: 40rpx auto;
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  box-shadow: 0 0 10rpx #bcb9ca;
  margin-bottom: 30rpx;

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

    .table {
      width: 1042px;
    }

    .tr {
      display: flex;
      overflow: hidden;

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

      .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;
    }
  }
}
::v-deep .u-calendar__action {
  display: flex;
  justify-content: space-around;

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