bigDataApp/pages/disease/cmb.vue

<template>
  <view>
    <view class="status_bar"></view>
    <view class="" style="position: relative; top: 44px">
      <view style="position: fixed; z-index: 100; width: 100%">
        <uni-nav-bar
          @clickLeft="clickLeft"
          left-icon="back"
          left-text="返回"
          title="设备详情"
        ></uni-nav-bar>
      </view>
      <view class="info">
        <view class="info_item">
          <image
		  
            :src="$imageURL+'/bigdata_app/image/cb/onBg.png'"
            mode=""
            class="bgi"
          ></image>
          <p style="font-size: 32rpx" @click="copy(eqinfo.device_id)">
            设备 ID：{{ eqinfo.device_id || '无'  }}
            <image
              :src="$imageURL+'/bigdata_app/image/environment/fuzhi.png'"
              mode=""
              class="tishi"
            ></image>
          </p>
          <p>设备名称：{{ eqinfo.device_name || eqinfo.name || '无' }}</p>
          <p>
            最近上报时间：<span v-if="eqinfo.uptime">{{
              eqinfo.uptime == 0 ? '无' : eqinfo.uptime | timeFormat()
            }}</span
            ><span v-else>{{
              eqinfo.uptime == 0 ? '无' : eqinfo.uptime | timeFormat()
            }}</span>
          </p>
          <p>地址：{{ eqinfo.location || eqinfo.address || '暂无地址' }}</p>
        </view>
      </view>
      <view class="control">
        <view class="control_item" v-if="kongtf" @click="control">
          <image
            :src="
              $imageURL+ '/bigdata_app' +
              '/image/environment/forecastResult.png'
            "
            mode=""
          ></image>
          <p>预测结果</p>
        </view>
      </view>
      <view class="his_box" v-if="datatf">
        <view class="selecttimes" @click="tiemshow = !tiemshow">
          <view class="timesbox">
            <image
              :src="$imageURL+'/bigdata_app/image/prevention/1acfe2751c01d3786cdc49b83d7e505.png'"
              mode=""
            ></image>
            <p>{{ timetab(begintime) }}</p>
            <p class="or">~</p>
            <p>{{ timetab(end) }}</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="canvastishi" v-if="!canvastishiTF && !dataloadingtf">
            暂无数据
          </view>
          <view class="canvastishi" v-if="dataloadingtf">
            <p class="dataloading">加载中</p>
          </view>
          <canvas
            v-show="!tiemshow"
            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>
          <canvas
            v-show="!tiemshow"
            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 tableHead"
                  :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.uploadTime | timeFormat() }}</td>
                <td class="td">{{ items.dianChiDianYa }}</td>
                <td class="td">{{ items.fiftyTuRangHanShuiLiang }}</td>
                <td class="td">{{ items.fiftyTuRangWenDu }}</td>
                <td class="td">{{ items.fiveTuRangHanShuiLiang }}</td>
                <td class="td">{{ items.fiveTuRangWenDu }}</td>
                <td class="td">{{ items.kongQiWenDu }}</td>
                <td class="td">{{ items.luDianWenDu }}</td>
                <td class="td">{{ items.riZhaoShiShu }}</td>
                <td class="td">{{ items.shiRunShiJian }}</td>
                <td class="td">{{ items.tenTuRangHanShuiLiang }}</td>
                <td class="td">{{ items.tenTuRangWenDu }}</td>
                <td class="td">{{ items.tianJiangYuLiang }}</td>
                <td class="td">{{ items.tuRangDaoDianLv }}</td>
                <td class="td">{{ items.twentyFiveTuRangHanShuiLiang }}</td>
                <td class="td">{{ items.twentyFiveTuRangWenDu }}</td>
                <td class="td">{{ items.twentyTuRangHanShuiLiang }}</td>
                <td class="td">{{ items.twentyTuRangWenDu }}</td>
                <td class="td">{{ items.xiangDuiShiDu }}</td>
                <td class="td">{{ items.xiaoShiJiangYuLiang }}</td>
              </tr>
              <tr class="tr" v-if="forbidden">
                <td class="td" v-for="item in 13">暂无数据</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">下一页</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import uCharts from '../../components/js_sdk/u-charts/u-charts/u-charts.js';
var canvaColumnA = null;
var canvaColumnB = null;
export default {
  data() {
    return {
      basetype: '',
      kongtf: false,
      datatf: false,
      eqinfo: {},
      city: '河南省',
      tiemshow: false, //时间筛选弹框
      begintime: '', //开始时间
      end: '', //结束时间
      dataloadingtf: true,
      canvastishiTF: false,
      device_id: '', //设备ID
      tableHead: [
        '上报时间',
        '电池电压',
        '50cm土壤含水量',
        '50cm土壤温度',
        '5cm土壤含水量',
        '5cm土壤温度',
        '空气温度',
        '露点温度',
        '日照时数',
        '叶面湿润时间',
        '10cm土壤含水量',
        '10cm土壤温度',
        '天降雨量',
        '土壤导电率',
        '25cm土壤含水量',
        '25cm土壤温度',
        '20cm土壤含水量',
        '20cm土壤温度',
        '相对湿度',
        '时降雨量',
      ], //表格抬头
      forbidden: false,
      historylistdata: [], //历史数据
      pagesum: 1,
      page: 1,
      cWidth: '',
      cHeight: '',
      pixelRatio: 1,
      param: {
        dianChiDianYa: '电池电压',
        fiftyTuRangHanShuiLiang: '50cm土壤含水量',
        fiftyTuRangWenDu: '50cm土壤温度',
        fiveTuRangHanShuiLiang: '5cm土壤含水量',
        fiveTuRangWenDu: '5cm土壤温度',
        kongQiWenDu: '空气温度',
        luDianWenDu: '露点温度',
        riZhaoShiShu: '日照时数',
        shiRunShiJian: '叶面湿润时间',
        tenTuRangHanShuiLiang: '10cm土壤含水量',
        tenTuRangWenDu: '10cm土壤温度',
        tianJiangYuLiang: '天降雨量',
        tuRangDaoDianLv: '土壤导电率',
        twentyFiveTuRangHanShuiLiang: '25cm土壤含水量',
        twentyFiveTuRangWenDu: '25cm土壤温度',
        twentyTuRangHanShuiLiang: '20cm土壤含水量',
        twentyTuRangWenDu: '20cm土壤温度',
        xiangDuiShiDu: '相对湿度',
        xiaoShiJiangYuLiang: '小时降雨量',
      },
      color: [
        '#ff7b30',
        '#f93948',
        '#fb2ea4',
        '#bc59db',
        '#7457ec',
        '#307dfd',
        '#31bfff',
        '#46e9b1',
        '#19cd48',
        '#b2e409',
        '#f0f254',
        '#fed000',
        '#f06f14',
        '#a74040',
        '#90bb71',
        '#a07635',
        '#6502bd',
        '#048bbb',
        '#9ebb01',
        '#cc9202',
        '#ff8fa0',
        '#a3d55f',
        '#d9bedd',
        '#00a6b6',
        '#236093',
        '#009fff',
        '#ddc0a6',
        '#c4a6dd',
        '#dda6a6',
        '#779e33',
        '#a6ddb0',
      ],
    };
  },
  methods: {
    copy(item) {
      uni.setClipboardData({
        data: item,
        success: function () {
          console.log('success');
        },
      });
    },
    control() {
      //设备控制
      uni.navigateTo({
        url: './forecastResult?id=' + this.eqinfo.device_id,
      });
    },
    tiemchange(e) {
      console.log(e);
      //切换时间
      // this.begintime = parseInt(+new Date(e.startDate) / 1000);
      this.begintime = parseInt(+new Date(`${e.startDate} 00:00:00`) / 1000);
      this.end = parseInt(+new Date(`${e.endDate} 00:00:00`) / 1000);
      this.histprydatas();
      this.getChartLine();
    },
    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;
    },
    // 表格数据
    async histprydatas() {
      //表格历史数据
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=wheat.wheat.wheat_data_list',
        data: {
          device_id: this.eqinfo.device_id,
          page: this.page,
          begin: this.begintime,
          end: this.end,
        },
      });
      this.pagesum = Math.ceil(res.nums / 10) || 1;
      if (this.pagesum > 0) {
        var dat = res.sta;
        this.historylistdata = [];
        for (var i = 0; i < dat.length; i++) {
          var item = eval('(' + dat[i] + ')');
          var obj = {};
          for (var i1 in item) {
            // if (i1 == "uploadTime") {
            //   obj[i1] = this.formatTime(item[i1] * 1000);
            // } else {
            obj[i1] = item[i1];
            // }
          }
          this.historylistdata.push(obj);
        }
      } else {
        this.historylistdata = [];
      }
    },
    //获取折线图数据
    async getChartLine() {
      const res = await this.$myRequest({
        method: 'POST',
        url: '/api/api_gateway?method=wheat.wheat.wheat_data',
        data: {
          device_id: this.eqinfo.device_id,
          begin: this.begintime,
          end: this.end,
        },
      });
      this.dataloadingtf = false;
      var dat = res;
      if (dat.length) {
        var regroupData = []; //重组数据
        var kindArr = []; //通道数组
        var time = [];
        var xtitle = [];
        for (var i = 0; i < dat.length; i++) {
          var item = eval('(' + dat[i] + ')');
          console.log(item);
          var tim = parseInt(item['uploadTime']) * 1000;
          var times = new Date(tim);
          xtitle.unshift(
            times.getMonth() +
              1 +
              '/' +
              times.getDate() +
              '-' +
              times.getHours() +
              ':' +
              times.getMinutes()
          );
          time.unshift(tim);
          for (var j in item) {
            var arr = '';
            if (j == 'id' || j == 'uploadTime') {
              continue;
            } else if (kindArr.indexOf(j) == '-1') {
              kindArr.push(j);
              regroupData.push({
                name: this.param[j],
                color: this.color[kindArr.length - 1],
                data: [],
              });
              // arr.push(tim);
              arr = parseFloat(item[j]);
              regroupData[kindArr.indexOf(j)].data.unshift(arr);
            } else {
              // arr.push(tim);
              // arr.push(parseFloat(item[j]));
              arr = parseFloat(item[j]);
              regroupData[kindArr.indexOf(j)].data.unshift(arr);
            }
          }
        }
        console.log(regroupData);
        // 分割折线图
        const regroupDataNum = Math.ceil(regroupData.length / 2);
        const options1 = regroupData.filter((v, i) => {
          return i < regroupDataNum;
        });
        const options2 = regroupData.filter((v, i) => {
          return i >= regroupDataNum;
        });
        console.log(options1, options1);

        this.showColumn('canvasColumnA', xtitle, options1);
        this.showColumn('canvasColumnB', xtitle, options2);
        this.canvastishiTF = true;
      } else {
        this.canvastishiTF = false;
        this.showColumn('canvasColumnA', xtitle, []);
        this.showColumn('canvasColumnB', xtitle, []);
      }
    },
    prev() {
      //上一页
      if (this.page > 1) {
        this.page--;
        this.histprydatas();
      }
    },
    next() {
      //下一页
      if (this.page < this.pagesum) {
        this.page++;
        this.histprydatas();
      }
    },
    clickLeft() {
      uni.navigateBack({
        delta: 1,
      });
    },
    showColumn(id, xtitle, xinfo) {
      console.log(id);
      var _self = this;
      const ctx = uni.createCanvasContext(id, this);
      if (id === 'canvasColumnA') {
        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',
            },
          },
        });
      } else if (id === 'canvasColumnB') {
        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.eqinfo = JSON.parse(option.shebei);
    this.basetype = this.eqinfo.type;
    this.cWidth = uni.upx2px(650);
    this.cHeight = uni.upx2px(500);
    this.device_id = option.id;
    this.end = parseInt(+new Date() / 1000);
    this.begintime = parseInt(this.end - 24 * 60 * 60);
    this.histprydatas();
    this.getChartLine();
    if (this.basetype == 11) {
      this.kongtf = this.$QueryPermission(251);
      this.datatf = this.$QueryPermission(221);
    } else if (this.basetype == 19) {
      this.kongtf = this.$QueryPermission(252);
      this.datatf = this.$QueryPermission(222);
    } else if (this.basetype == 20) {
      this.kongtf = this.$QueryPermission(253);
      this.datatf = this.$QueryPermission(223);
    } else if (this.basetype == 21) {
      this.kongtf = this.$QueryPermission(280);
      this.datatf = this.$QueryPermission(279);
    } else if (this.basetype == 26) {
      this.kongtf = this.$QueryPermission(344);
      this.datatf = this.$QueryPermission(343);
    }
  },
};
</script>

<style lang="scss">
.info {
  width: 100%;
  position: absolute;
  top: 44px;

  .info_item {
    width: 90%;
    margin: 0 auto;
    height: 240rpx;
    padding: 40rpx 50rpx;
    position: relative;
    box-sizing: border-box;

    .bgi {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }

    p {
      font-size: 24rpx;
      color: #ffffff;
      margin-bottom: 10rpx;

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

.control {
  width: 90%;
  position: absolute;
  top: 360rpx;
  left: 5%;
  display: flex;
  text-align: center;
  // padding: 0 30rpx;
  box-sizing: border-box;

  .control_item {
    width: 128rpx;
    height: 120rpx;
    width: 20%;

    image {
      width: 70rpx;
      height: 70rpx;
    }

    p {
      font-size: 24rpx;
    }
  }
}

.his_box {
  width: 100%;
  top: 270px;
  position: relative;
}

.selecttimes {
  width: 90%;
  box-shadow: 0 0 10rpx #bcb9ca;
  padding: 10rpx 20rpx;
  box-sizing: border-box;
  margin: 0 auto;
  font-size: 28rpx;

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

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

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

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

    .u-calendar__action__text {
      line-height: 25px;
    }
  }
}

.shuju_one {
  width: 90%;
  margin: 20px auto;
  box-shadow: 0 0 10rpx #bcb9ca;
  padding-top: 20rpx;
  height: 1000rpx;

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

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

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

    .tr {
      display: flex;
      overflow: hidden;

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

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