bigDataApp/pages/environment/gshistory.vue

<template>
  <view>
    <view class="status_bar"></view>
    <view class="" style="position: relative; top: 44px">
      <view
        style="
          position: fixed;
          z-index: 10000000;
          width: 100%;
          background-color: #000000;
        "
      >
        <uni-nav-bar
          @clickLeft="clickLeft"
          left-icon="back"
          left-text="返回"
          title="历史数据"
        ></uni-nav-bar>
      </view>
    </view>
    <view class="his_box">
      <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>
      </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 }}
              </th>
            </tr>
            <tr
              class="tr"
              v-for="(items, indexs) in historylistdata"
              :key="'b' + indexs"
              v-if="!forbidden"
            >
              <td class="td">{{ items.uptime | timeFormat() }}</td>
              <!-- <td class="td">{{ items.ats }}</td>
              <td class="td">{{ items.at }}</td> -->
              <td
                class="td"
                v-for="(item, index) in items.temp"
                :key="'c' + index"
              >
                {{ item }}
              </td>
              <td
                class="td"
                v-for="(item, index) in items.swc"
                :key="'d' + index"
              >
                {{ item }}
              </td>
              <td
                class="td"
                v-for="(item, index) in items.ecs"
                :key="'e' + index"
              >
                {{ item }}
              </td>
              <!-- <td class="td">{{ items.atm }}</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>
</template>

<script>
import uCharts from '../../components/js_sdk/u-charts/u-charts/u-charts.js';
var canvaColumnA = null;
export default {
  data() {
    return {
      tiemshow: false, //时间筛选弹框
      begintime: '', //开始时间
      end: '', //结束时间
      dataloadingtf: true,
      canvastishiTF: false,
      device_id: '', //设备ID
      thdata: [
        '上传时间',
        // "空气湿度(%RH)",
        // "空气温度(℃)",
        '10cm土壤温度(%RH)',
        '20cm土壤温度(%RH)',
        '30cm土壤温度(%RH)',
        '10cm土壤湿度(%RH)',
        '20cm土壤湿度(%RH)',
        '30cm土壤湿度(%RH)',
        // "大气压强(Pa)",
      ], //表格抬头
      forbidden: false,
      historylistdata: [], //历史数据
      pagesum: 1,
      page: 1,
      cWidth: '',
      cHeight: '',
      pixelRatio: 1,
    };
  },
  methods: {
    tiemchange(e) {
      //切换时间
      this.begintime = parseInt(+new Date(e.startDate) / 1000);
      this.end = parseInt(+new Date(e.endDate) / 1000);
      this.histprydatas();
    },
    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() {
      //历史数据
      this.dataloadingtf = true;
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=weather.weather.nd_data',
        data: {
          device_id: this.device_id,
          page: this.page,
          begin: this.begintime,
          end: this.end,
        },
      });
      this.dataloadingtf = false;
      console.log(res.nums);
      this.pagesum = Math.ceil(res.nums / 10) || 1;
      this.historylistdata = res.dat_list;
      for (var i = 0; i < this.historylistdata.length; i++) {
        this.historylistdata[i].temp = this.historylistdata[i].temp.split(',');
        this.historylistdata[i].swc = this.historylistdata[i].swc.split(',');
        this.historylistdata[i].ecs = this.historylistdata[i].ecs.split(',');
      }
      var arr1 = [];
      var arr2 = [];
      var xtitle = [];
      var obj = [
        {
          name: '空气温度',
          data: [],
          color: '#00E29D',
        },
        {
          name: '空气湿度',
          data: [],
          color: '#6CBBFF',
        },
      ];
      var arr3 = [];
      var k = 0;
      for (var i = 0; i < res.dat_char.length; i++) {
        var times = new Date(res.dat_char[i].uptime * 1000);
        xtitle.unshift(
          times.getMonth() +
            1 +
            '/' +
            times.getDate() +
            '-' +
            times.getHours() +
            ':' +
            times.getMinutes()
        );
        arr1.unshift(res.dat_char[i].at == '' ? '0' : res.dat_char[i].at); //空气温度
        arr2.unshift(res.dat_char[i].ats == '' ? '0' : res.dat_char[i].ats); //空气湿度
        res.dat_char[i].temp = res.dat_char[i].temp.split(',');
        res.dat_char[i].swc = res.dat_char[i].swc.split(',');
        res.dat_char[i].ecs = res.dat_char[i].ecs.split(',');
        for (var j = 0; j < res.dat_char[i].temp.length; j++) {
          arr3.unshift(
            res.dat_char[i].temp[j] == '' ? '0' : res.dat_char[i].temp[j]
          ); //10cm土壤温度
        }
        this.thdata.length = 1;
        res.depth.split(',').forEach((dep, index) => {
          this.thdata.push(`${dep}cm土壤温度(℃)`);
          res.dat_char[i].temp.forEach((items, indexs) => {
            var tempdata = [];
            var tempdatas = [];
            var ecsarr = [];
            tempdata.push(Number(items));
            tempdatas.push(Number(res.dat_char[i].swc[indexs]));
            if (res.dat_char[i].ecs[indexs]) {
              ecsarr.push(Number(res.dat_char[i].ecs[indexs]));
            }
            var temparrs = {
              name: dep + 'cm土壤温度(℃)',
              data: tempdata,
            };
            var temparr = {
              name: dep + 'cm土壤湿度(%RH)',
              data: tempdatas,
            };
            var ecsparr = {
              name: dep + 'cm电导率(ms/cm)',
              data: ecsarr,
            };
            obj.push(temparr);
            obj.push(temparrs);
            if (ecsarr.length > 0) {
              obj.push(ecsparr);
            }
          });
        });
        res.depth.split(',').forEach((dep, index) => {
          this.thdata.push(`${dep}cm土壤湿度(%RH)`);
        });
        res.depth.split(',').forEach((dep, index) => {
          this.thdata.push(`${dep}cm电导率(ms/cm)`);
        });
      }
      obj[0].data = arr1;
      obj[1].data = arr2;
      var listArr = [];
      obj.forEach(function (el, index) {
        for (var i = 0; i < listArr.length; i++) {
          // 对比相同的字段key，相同放入对应的数组中
          if (listArr[i].name == el.name && el.data !== undefined) {
            listArr[i].data.unshift(el.data[0]);
            return;
          }
        }
        // 第一次对比没有参照，放入参照
        listArr.push({
          name: el.name,
          data: el.data,
        });
      });
      console.log(listArr);
      if (listArr.length == 0) {
        this.canvastishiTF = false;
      } else {
        this.canvastishiTF = true;
      }
      this.showColumn('canvasColumnA', xtitle, listArr);
      // console.log(this.historylistdata)
    },
    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) {
      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',
          },
        },
      });
    },
    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;
        },
      });
    },
  },
  onLoad(option) {
    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();
  },
};
</script>

<style lang="scss">
.his_box {
  width: 100%;
  top: 200rpx;
  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: 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;
      }
    }
  }
}

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