bigDataApp/pages/cb/xctdetail/xctdetail.vue

<template>
  <view>
    <view :class="['info', equipInfo.is_online == 1 ? 'on' : 'off']">
      <view class="" @click="copy(equipInfo)">
        设备ID：{{ equipInfo.imei || equipInfo.device_id }}
        <image
          :src="$imageURL+'/bigdata_app/image/environment/fuzhi.png'"
          mode=""
          class="tishi"
        >
        </image>
      </view>
      <view class="">
        设备名称：{{
          equipInfo.device_name == '' ? '无' : equipInfo.device_name
        }}
      </view>
      <view class=""> 设备类型：吸虫塔 </view>
      <view class="">
        最新上报时间：{{ equipInfo.uptime || equipInfo.uptime | timeFormat }}
      </view>
      <view class=""> 设备地址：{{ equipInfo.address || city }} </view>
    </view>
    <view class="caobox">
      <view class="caobox_item" v-if="$QueryPermission(182)" @click="tophoto">
        <image
          :src="$imageURL+'/bigdata_app/image/cb/1.png'"
          mode="widthFix"
        ></image>
        <view class=""> 查看图片 </view>
      </view>
      <view class="caobox_item" v-if="$QueryPermission(172)" @click="toset">
        <image
          :src="$imageURL+'/bigdata_app/image/cb/4.png'"
          mode="widthFix"
        ></image>
        <view class=""> 设备控制 </view>
      </view>
      <view class="caobox_item" v-if="$QueryPermission(238)" @click="toanal">
        <image
          :src="$imageURL+'/bigdata_app/image/cb/3.png'"
          mode="widthFix"
        ></image>
        <view class=""> 虫情分析 </view>
      </view>
      <view class="caobox_item" @click="simRouter">
        <image
          :src="$imageURL+'/bigdata_app/image/cb/6.png'"
          mode="widthFix"
        ></image>
        <view class=""> SIM卡 </view>
      </view>
    </view>
    <view class="" v-if="$QueryPermission(183)">
      <view class=""> 历史数据 </view>
      <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>
        <u-calendar
          v-model="timeshow"
          :mode="mode"
          @change="timechange"
        ></u-calendar>
      </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="condition">
        <scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
          <table class="table" v-if="$QueryPermission(271)">
            <tr class="tr">
              <th
                class="th"
                v-for="(item, index) in tableHeadTxt"
                :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">{{ items.d_h_t.at }}</td>
              <td class="td">{{ items.d_h_t.ah }}</td>
              <td class="td">{{ items.d_h_t.dver }}</td>
              <td class="td">{{ items.d_h_t.ws == 0 ? '待机' : '工作' }}</td>
              <td class="td">{{ items.d_h_t.current }}</td>
              <td class="td">{{ items.d_h_t.vbat }}</td>
              <td class="td">{{ items.d_h_t.lng }}</td>
              <td class="td">{{ items.d_h_t.lat }}</td>
            </tr>
            <tr class="tr" v-if="forbidden">
              <td class="td" v-for="item in 9">暂无数据</td>
            </tr>
          </table>
          <table class="table" v-else>
            <tr class="tr">
              <th
                class="th"
                v-for="(item, index) in tableHeadTxt2"
                :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">{{ items.d_h_t.at }}</td>
              <td class="td">{{ items.d_h_t.ah }}</td>
              <td class="td">{{ items.d_h_t.dver }}</td>
              <td class="td">{{ items.d_h_t.ws == 0 ? '待机' : '工作' }}</td>
              <td class="td">{{ items.d_h_t.lng }}</td>
              <td class="td">{{ items.d_h_t.lat }}</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>
    </view>
    <view class="" v-else> 暂无数据 </view>
  </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;
export default {
  data() {
    return {
      equipInfo: {},
      canvastishiTF: false,
      dataloadingtf: false,
      cWidth: '400',
      cHeight: '400',
      pixelRatio: 1,
      start_time: '',
      end_time: '',
      timeshow: false,
      mode: 'range',
      historydatas: [],
      tableHeadTxt: [
        '上报时间',
        '环境温度(°C)',
        '环境湿度(%)',
        '版本号',
        '工作状态',
        '电流(mA)',
        '电压(V)',
        '经度',
        '纬度',
      ],
      tableHeadTxt2: [
        '上报时间',
        '环境温度(°C)',
        '环境湿度(%)',
        '版本号',
        '工作状态',
        '经度',
        '纬度',
      ],
      historylistdata: [],
      pagesum: 10,
      page: 1,
      forbidden: false,
    };
  },
  methods: {
    copy(item) {
      console.log(item);
      uni.setClipboardData({
        data: item.imei || item.device_id,
        success: function () {
          console.log('success');
        },
      });
    },
    toset() {
      uni.navigateTo({
        url:
          './xctset?device_id=' +
          this.equipInfo.imei +
          '&d_id=' +
          this.equipInfo.d_id +
          '&dtype=' +
          this.equipInfo.dtype +
          '&device_name=' +
          this.equipInfo.device_name,
      });
    },
    tophoto() {
      uni.navigateTo({
        url:
          './photolist?device_id=' +
          this.equipInfo.imei +
          '&d_id=' +
          this.equipInfo.d_id,
      });
    },
    toanal() {
      uni.navigateTo({
        url:
          './analyse?d_id=' +
          this.equipInfo.d_id +
          '&device_id=' +
          this.equipInfo.imei +
          '&device_type=12&disable=' +
          this.equipInfo.disable,
      });
    },
    simRouter() {
      uni.navigateTo({
        url: '/pages/prevention/sim?id=' + this.equipInfo.d_id,
      });
    },
    timechange(e) {
      this.start_time = +new Date(e.startDate);
      this.end_time = +new Date(e.endDate);
      this.history();
      this.getwind();
    },
    async history() {
      //历史数据列表折线图
      this.dataloadingtf = true;
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.worm_lamp.device_xct_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),
        },
      });
      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].temperature == '' ? '0' : res[i].temperature);
          arr2.push(res[i].humidity == '' ? '0' : res[i].humidity);
        }
        // console.log(arr1)
        var obj = [
          {
            name: '温度',
            data: arr1,
            color: '#00E29D',
          },
          {
            name: '湿度',
            data: arr2,
            color: '#6CBBFF',
          },
        ];
        this.showColumn('canvasColumnA', xtitle, obj);
      }
    },
    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: {
          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;
        },
      });
    },
    async getwind() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.worm_lamp.xct_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),
          page: this.page,
          page_size: '10',
        },
      });
      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();
      }
    },
  },
  onLoad(option) {
    console.log(JSON.parse(option.info));
    this.equipInfo = JSON.parse(option.info);
    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.getwind();
  },
};
</script>

<style lang="scss">
page {
  padding: 20rpx;
  box-sizing: border-box;

  .info {
    padding: 20rpx 40rpx;
    color: #fff;
    line-height: 50rpx;
    font-size: 26rpx;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-color: #0dc6b6;
    background-position: top left;
    box-sizing: border-box;
    width: 100%;

    .tishi {
      width: 28rpx;
      height: 28rpx;
      margin: 0rpx 0 0 20rpx;
    }
  }

  .on {
    background-image: url('https://s3.hnyfwlw.com/webstaticimg/bigdata_app/image/cb/onBg.png');
  }

  .off {
    background-image: url('https://s3.hnyfwlw.com/webstaticimg/bigdata_app/image/cb/offBg.png');
  }

  .caobox {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    font-size: 28rpx;
    color: #666;
    line-height: 50rpx;

    image {
      width: 52rpx;
    }

    .caobox_item {
      padding: 20rpx 0;
      box-sizing: border-box;
      flex-basis: 25%;
    }
  }

  .timebox {
    box-shadow: 0 0 10rpx #bcb9ca;
    display: flex;
    background-color: #fff;
    padding: 10px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    margin-top: 30rpx;

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

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

  .shuju_one {
    position: relative;
    width: 100%;
    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;
      }
    }
  }
}

.condition {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  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;
    }
  }
}

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

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