bigDataApp/pages/prevention/ucharts.vue

<template>
  <view>
    <view class="status_bar"></view>
    <view class="" style="position: relative; top: 44px">
      <view style="position: fixed; z-index: 100; width: 100%; color: #ffffff">
        <uni-nav-bar
          @clickLeft="clickLeft"
          left-icon="back"
          left-text="返回"
          title="历史数据"
        ></uni-nav-bar>
      </view>
      <view class="selecttimes" @click="tiemshow = !tiemshow">
        <view class="timesbox">
          <image
            :src="
              $imageURL+ '/bigdata_app' +
              '/image/prevention/1acfe2751c01d3786cdc49b83d7e505.png'
            "
            mode=""
          ></image>
          <p>{{ timetab(oldtime) }}</p>
          <p class="or">~</p>
          <p>{{ timetab(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>
      </view>
      <view class="shuju_one">
        <view class="shuju_one_title">
          <view
            :class="titleidnex == index ? 'title_text_color' : 'tltle_text'"
            v-for="(item, index) in titletext"
            :key="index"
            @click="changeindex(index)"
          >
            {{ item }}
          </view>
        </view>
        <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_two" v-if="allqingchong">
        <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="canvasColumnB"
          id="canvasColumnB"
          class="charts"
          @touchstart="touchLineBb($event)"
          @touchmove="moveLineBb($event)"
          @touchend="touchEndLineBb($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"
        :style="{ top: allqingchong ? '1380rpx' : '790rpx' }"
      >
        刷 新
      </view>
      <view
        class="condition"
        :style="{ top: allqingchong ? '1450rpx' : '870rpx' }"
      >
        <scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
          <table
            class="table"
            v-if="$QueryPermission(264) || $QueryPermission(323)"
          >
            <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="'b' + indexs"
              v-if="forbidden"
            >
              <td class="td">{{ items.d_h_t.addtime | timeFormat() }}</td>
              <td class="td">{{ items.d_h_t.ds }}</td>
              <td class="td">{{ items.d_h_t.ws }}</td>
              <td class="td">{{ items.d_h_t.rps }}</td>
              <td class="td">{{ items.d_h_t.tps }}</td>
              <td class="td">{{ items.d_h_t.dps }}</td>
              <td class="td">{{ items.d_h_t.tt }}</td>
              <td class="td">{{ items.d_h_t.ct }}</td>
              <td class="td">
                {{ items.d_h_t.at == '' ? '--' : items.d_h_t.at }}
              </td>
              <td class="td">
                {{ items.d_h_t.ah == '' ? '--' : items.d_h_t.ah }}
              </td>
              <td class="td">{{ items.d_h_t.cv }}</td>
              <td class="td">
                {{
                  items.d_h_t.vps == 0
                    ? '正常'
                    : items.d_h_t.vps == 1
                    ? '欠压'
                    : items.d_h_t.vps == 2
                    ? '过压'
                    : items.d_h_t.vps
                }}
              </td>
              <td class="td">{{ items.d_h_t.bv }}</td>
              <td class="td">{{ items.d_h_t.csq }}</td>
            </tr>
            <tr class="tr" v-if="!forbidden">
              <td class="td" v-for="item in 14">暂无数据</td>
            </tr>
          </table>
          <table class="table2" v-else-if="!allqingchong">
            <tr class="tr">
              <th
                class="th"
                v-for="(item, index) in thdata3"
                :key="'a' + index"
              >
                {{ item }}
              </th>
            </tr>
            <tr
              class="tr"
              v-for="(items, indexs) in eqlistdata"
              :key="'b' + indexs"
              v-if="forbidden"
            >
              <td class="td">{{ items.d_h_t.addtime | timeFormat() }}</td>
              <td class="td">{{ items.d_h_t.ds }}</td>
              <td class="td">{{ items.d_h_t.ws }}</td>
              <td class="td">{{ items.d_h_t.tps }}</td>
              <td class="td">{{ items.d_h_t.tt }}</td>
              <td class="td">
                {{ items.d_h_t.at == '' ? '--' : items.d_h_t.at }}
              </td>
              <td class="td">
                {{ items.d_h_t.ah == '' ? '--' : items.d_h_t.ah }}
              </td>
            </tr>
            <tr class="tr" v-if="!forbidden">
              <td class="td" v-for="item in 7">暂无数据</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="'b' + indexs"
              v-if="forbidden"
            >
              <td class="td">{{ items.d_h_t.addtime | timeFormat() }}</td>
              <td class="td">{{ items.d_h_t.ds }}</td>
              <td class="td">{{ items.d_h_t.ws }}</td>
              <td class="td">{{ items.d_h_t.rps }}</td>
              <td class="td">{{ items.d_h_t.tps }}</td>
              <td class="td">{{ items.d_h_t.dps }}</td>
              <td class="td">{{ items.d_h_t.tt }}</td>
              <td class="td">{{ items.d_h_t.ct }}</td>
              <td class="td">
                {{ items.d_h_t.at == '' ? '--' : items.d_h_t.at }}
              </td>
              <td class="td">
                {{ items.d_h_t.ah == '' ? '--' : items.d_h_t.ah }}
              </td>
            </tr>
            <tr class="tr" v-if="!forbidden">
              <td class="td" v-for="item in 10">暂无数据</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>
  </view>
</template>
<style lang="scss"></style>
<script>
import uCharts from '../../components/js_sdk/u-charts/u-charts/u-charts.js';
var canvaColumnA = null;
var canvaColumnB = null;
var presenttime = null;
// var oldpresenttime = presenttime - 24*60*60*1000
export default {
  data() {
    return {
      thdata: [
        '上报时间',
        '设备开关',
        '工作状态',
        '雨控状态',
        '温控状态',
        '倾倒状态',
        '定时(h)',
        '电击次数',
        '温度(℃)',
        '湿度(%)',
        '充电电压(v)',
        '电压状态',
        '电池电压(v)',
        '信号强度',
      ],
      thdata2: [
        '上报时间',
        '设备开关',
        '工作状态',
        '雨控状态',
        '温控状态',
        '倾倒状态',
        '定时(h)',
        '电击次数',
        '温度(℃)',
        '湿度(%)',
      ],
      thdata3: [
        '上报时间',
        '设备开关',
        '工作状态',
        '温控状态',
        '定时(h)',
        '温度(℃)',
        '湿度(%)',
      ],
      eqlistdata: [],
      cWidth: '400',
      cHeight: '400',
      pixelRatio: 1,
      titletext: ['24小时', '近一个月', '近半年', '近一年'],
      titleidnex: 0,
      oldtime: '',
      newtime: '',
      page: 1,
      forbidden: false, //暂无数据
      times: {
        d_id: null,
        start_time: null,
        end_time: null,
        device_id: null,
      },
      canvastishiTF: false, //折线图暂无数据提示
      dataloadingtf: true, //加载中提示
      pagesum: 1,
      tiemshow: false, //日历选择器
      allqingchong: false,
    };
  },
  // 页面加载执行的函数
  onLoad(option) {
    this.times.d_id = option.d_id;
    this.times.imei = option.imei;
    this.cWidth = uni.upx2px(650);
    this.cHeight = uni.upx2px(500);
    this.getworm();
  },
  onShow() {
    presenttime = +new Date();
    this.oldtime = parseInt((presenttime - 24 * 60 * 60 * 1000) / 1000);
    this.newtime = parseInt(presenttime / 1000);
    setTimeout(() => {
      this.getServerData(
        parseInt(presenttime / 1000),
        parseInt((presenttime - 24 * 60 * 60 * 1000) / 1000)
      );
      this.historydata(
        parseInt(presenttime / 1000),
        parseInt((presenttime - 24 * 60 * 60 * 1000) / 1000)
      );
    }, 1000);
  },
  onPullDownRefresh() {
    console.log('refresh');
    this.getServerData(
      parseInt(presenttime / 1000),
      parseInt((presenttime - 24 * 60 * 60 * 1000) / 1000)
    );
    this.historydata(
      parseInt(presenttime / 1000),
      parseInt((presenttime - 24 * 60 * 60 * 1000) / 1000)
    );
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  methods: {
    //
    //forecast.worm_lamp.device_polyline_data
    // 获取数据，发请求
    async getServerData(newtime, oldtimes) {
      //设备折线图
      this.dataloadingtf = true;
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.worm_lamp.device_polyline_data',
        data: {
          device_type_id: 2,
          d_id: this.times.d_id,
          end_time: newtime,
          start_time: oldtimes,
        },
      });
      this.dataloadingtf = false;
      if (res.length == 0) {
        this.canvastishiTF = false;
      } else {
        this.canvastishiTF = true;
        var xtitle = [];
        var arr = [];
        var arr1 = [];
        var arr2 = [];
        var arr3 = [];
        var arr4 = [];
        var arr5 = [];
        for (var i = 0; i < res.length; i++) {
          var times = new Date(res[i].addtime * 1000);
          xtitle.unshift(
            times.getMonth() +
              1 +
              '/' +
              times.getDate() +
              '-' +
              times.getHours() +
              ':' +
              times.getMinutes()
          );
          arr1.unshift(res[i].temperature);
          arr2.unshift(res[i].humidity);
          arr3.unshift(Number(res[i].others.bv));
          arr4.unshift(Number(res[i].others.cv));
          arr5.unshift(res[i].others.ct);
        }
        arr.unshift(arr1, arr2, arr3, arr4);
        var obj = [
          {
            name: '温度',
            data: arr[0],
            color: '#F97000',
          },
          {
            name: '湿度',
            data: arr[1],
            color: '#00E29D',
          },
          {
            name: '电池电压',
            data: arr[2],
            color: '#FF3F3F',
          },
          {
            name: '充电电压',
            data: arr[3],
            color: '#6CBBFF',
          },
        ];
        var obj2 = [
          {
            name: '击虫次数',
            data: arr5,
            color: '#00E29D',
          },
        ];
        // console.log(obj)
        this.showColumn('canvasColumnA', xtitle, obj);
        this.showColumnb('canvasColumnB', xtitle, obj2);
      }
    },
    changeindex(index) {
      //选择日期
      this.titleidnex = index;
      var now = new Date();
      if (index == 0) {
        this.newtime = parseInt(+new Date(now) / 1000);
        this.oldtime = parseInt((presenttime - 24 * 60 * 60 * 1000) / 1000);
        this.getServerData(
          parseInt(presenttime / 1000),
          parseInt((presenttime - 24 * 60 * 60 * 1000) / 1000)
        );
        this.historydata(
          parseInt(presenttime / 1000),
          parseInt((presenttime - 24 * 60 * 60 * 1000) / 1000)
        );
      } else if (index == 1) {
        this.newtime = parseInt(+new Date(now) / 1000);
        var oldtime = now.setMonth(now.getMonth() - 1) / 1000;
        this.oldtime = parseInt(oldtime);
        this.getServerData(parseInt(presenttime / 1000), parseInt(oldtime));
        this.historydata(parseInt(presenttime / 1000), parseInt(oldtime));
      } else if (index == 2) {
        this.newtime = parseInt(+new Date(now) / 1000);
        var oldtime = now.setMonth(now.getMonth() - 6) / 1000;
        this.oldtime = parseInt(oldtime);
        this.getServerData(parseInt(presenttime / 1000), parseInt(oldtime));
        this.historydata(parseInt(presenttime / 1000), parseInt(oldtime));
      } else if (index == 3) {
        this.newtime = parseInt(+new Date(now) / 1000);
        var oldtime = now.setFullYear(now.getFullYear() - 1) / 1000;
        this.oldtime = parseInt(oldtime);
        this.getServerData(parseInt(presenttime / 1000), parseInt(oldtime));
        this.historydata(parseInt(presenttime / 1000), parseInt(oldtime));
      }
    },
    async historydata(newtime, oldtimes) {
      //设备表格数据
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.worm_lamp.device_history_data',
        data: {
          device_type_id: 2,
          device_id: this.times.imei,
          page: this.page,
          page_size: 10,
          start_time: oldtimes,
          end_time: newtime,
        },
      });
      console.log(res.data);
      this.pagesum = Math.ceil(res.counts / 10) || 1;
      this.eqlistdata = res.data;
      if (res.data.length == 0) {
        this.forbidden = false;
      } else {
        this.forbidden = true;
      }
    },
    prev() {
      //上一页
      if (this.page != 1) {
        this.page--;
        this.historydata(this.newtime, this.oldtime);
      }
    },
    next() {
      //下一页
      if (this.page < this.pagesum) {
        this.page++;
        this.historydata(this.newtime, this.oldtime);
      }
    },
    tiemchange(e) {
      console.log(e);
      this.oldtime = +new Date(e.startDate) / 1000;
      this.newtime = +new Date(e.endDate) / 1000 + 16 * 60 * 60;
      this.getServerData(this.newtime, this.oldtime);
      this.historydata(this.newtime, this.oldtime);
    },
    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;
    },
    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: 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',
          },
        },
      });
    },
    showColumnb(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 + ':' + Number(item.data).toFixed(3)
          );
        },
      });
    },
    touchLineBb(e) {
      console.log(e);
      canvaColumnB.scrollStart(e);
    },
    moveLineBb(e) {
      canvaColumnB.scroll(e);
    },
    touchEndLineBb(e) {
      canvaColumnB.scrollEnd(e);
      //下面是toolTip事件，如果滚动后不需要显示，可不填写
      canvaColumnB.showToolTip(e, {
        format: function (item, category) {
          return category + ' ' + item.name + ':' + item.data;
        },
      });
    },
    async newdata() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.send_control.get_device_config',
        data: {
          device_type_id: 2,
          d_id: this.times.d_id,
          control_type: 'data',
        },
      });
      if (res) {
        uni.showToast({
          title: '刷新成功',
          duration: 2000,
          icon: 'none',
        });
      } else {
        uni.showToast({
          title: '刷新失败',
          duration: 2000,
          icon: 'none',
        });
      }
    },
    refresh() {
      //获取当前时间的数据
      this.newdata();
    },
    async getworm() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.send_control.clear_insects_permission',
        data: {},
      });
      console.log(res);
      this.allqingchong = res[2] == 1 ? false : true;
    },
  },
};
</script>

<style lang="scss">
/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
.shuju_one,
.shuju_two {
  position: absolute;
  top: 190rpx;
  width: 90%;
  left: 5%;
  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;
    }
  }

  .qiun-columns {
    .qiun-charts {
      width: 650upx;
      height: 400upx;
      background-color: #ffffff;
    }

    .charts {
      width: 650upx;
      height: 400upx;
      background-color: #ffffff;
    }
  }
}

.shuju_two {
  top: 790rpx;
}

.selecttimes {
  position: absolute;
  top: 54px;
  width: 90%;
  box-shadow: 0 0 10rpx #bcb9ca;
  left: 5%;
  padding: 10rpx 20rpx;
  box-sizing: border-box;

  .timesbox {
    display: flex;
    justify-content: space-around;

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

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

.refresh {
  position: absolute;
  left: 5%;
  width: 160rpx;
  height: 50rpx;
  background-color: #57c878;
  color: #ffffff;
  line-height: 50rpx;
  text-align: center;
  box-shadow: 0 0 10rpx #bcb9ca;
}

.condition {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  left: 5%;
  box-shadow: 0 0 10rpx #bcb9ca;
  margin-bottom: 30rpx;

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

    .table {
      width: 1056px;
    }

    .tr {
      display: flex;
      overflow: hidden;

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

      .th:first-child,
      .td:first-child {
        width: 300rpx;
      }

      .th:nth-last-child(1),
      .th:nth-last-child(2),
      .td:nth-last-child(1),
      .td:nth-last-child(2) {
        width: 200rpx;
      }
    }

    .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;
    }
  }
}

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

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