bigDataApp/pages/environment/history.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 class="graph">
        <view class="canvasbox">
          <view class="" style="display: flex; justify-content: flex-end">
            <view class="schedule" @click="pickertfone = !pickertfone">
              <p class="schedule_value">{{ titletext[indexone] }}</p>
              <p class="schedule_icon">
                <u-icon name="arrow-down"></u-icon>
              </p>
            </view>
          </view>
          <u-picker
            v-model="pickertfone"
            mode="selector"
            @confirm="confirmFun"
            :default-selector="[indexone]"
            :range="titletext"
          ></u-picker>
          <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="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"
          ></u-calendar>
        </view>
        <view class="condition" v-if="scrollTF">
          <scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
            <!-- @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll" -->
            <table
              class="table"
              :style="{ width: 300 + 240 * datalength + 'rpx' }"
            >
              <tr class="tr">
                <th class="th">日期</th>
                <th
                  class="th"
                  v-for="(key, index) in historydatas.conf"
                  :key="index"
                  v-show="key"
                >
                  {{ key.replace('#', '(') + ')' }}
                </th>
              </tr>
              <tr
                :class="`tr ${
                  items.is_history && myuser_type == 1 ? 'redText' : ''
                }`"
                v-for="(items, index) in historydatas.data"
                :key="index"
                v-if="!forbidden"
              >
                <td class="td">{{ items.time | timeFormat() }}</td>
                <td
                  class="td"
                  v-for="(item, indexss) in datalength"
                  :key="indexss"
                >
                  {{
                    parseFloat(items.dat['e' + (indexss + 1)]) == -99.99
                      ? 'N/A'
                      : parseFloat(items.dat['e' + (indexss + 1)])
                  }}
                </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>
  </view>
</template>

<script>
import uCharts from '../../components/js_sdk/u-charts/u-charts/u-charts.js';
var canvasColumnA = null;
var presenttime = +new Date();
export default {
  data() {
    return {
      myuser_type: null,
      cWidth: '400',
      cHeight: '400',
      pixelRatio: 1,
      canvastishiTF: false, //暂无数据提示
      dataloadingtf: true, //加载中提示
      id: '',
      begintime: '', //开始时间
      end: '', //结束时间
      titletext: [], //折线图数据切换列表数据
      titleidnex: 0,
      historydatas: [],
      page: 1,
      forbidden: false,
      pagesum: 1,
      datalength: 0,
      scrollTF: true,
      indexone: 0, //折线图数据切换列表下标
      pickertfone: false, //折线图数据切换列表
      chartdata: {}, //折线图数据
      tiemshow: false, //日期选择
    };
  },
  methods: {
    //weather.weather.qxz_detail
    async listhistorydata(datas) {
      //历史记录表格信息
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=weather.weather.qxz_detail',
        data: {
          device_id: datas,
          start_time: parseInt(this.begintime),
          end_time: parseInt(this.end),
          page: this.page,
        },
      });
      this.historydatas = res;
      console.log(res);
      this.datalength = 0;
      for (var key in res.conf) {
        if (key && res.conf[key] != '') {
          this.datalength++;
        }
      }
      console.log(this.datalength);
      if (this.datalength == 0) {
        this.scrollTF = false;
      } else {
        this.scrollTF = true;
      }
      this.pagesum = Math.ceil(res.nums / 10) || 1;
      if (res.data.length == 0) {
        this.forbidden = true;
      } else {
        this.forbidden = false;
      }
    },
    async historydata(datas) {
      //上传时间 //折线图
      this.dataloadingtf = true;
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=weather.weather.qxz_data_chart',
        data: {
          device_id: datas,
          begin: parseInt(this.begintime),
          end: parseInt(this.end),
        },
      });
      this.dataloadingtf = false;
      console.log(res);
      this.chartdata = res;
      this.titletext = [];
      if (res.data.length == 0) {
        this.canvastishiTF = false;
      } else {
        this.canvastishiTF = true;
        for (var key in res.conf) {
          if (res.conf[key]) {
            this.titletext.push(res.conf[key]);
          }
        }
        this.conflist(res, 'e1');
      }
      console.log(this.titletext);
    },
    conflist(res, eindex) {
      var xtitle = [];
      var linearr = [];
      for (var i = 0; i < res.data.length; i++) {
        var times = new Date(res.data[i].time * 1000);
        xtitle.unshift(
          times.getMonth() +
            1 +
            '/' +
            times.getDate() +
            '-' +
            times.getHours() +
            ':' +
            times.getMinutes()
        );
      }
      var obj = {};
      obj.name = res.conf[eindex];
      var arr = [];
      for (var i = 0; i < res.data.length; i++) {
        if (parseFloat(res.data[i].dat[0][eindex].split('#')[0]) != -99.99) {
          arr.unshift(parseFloat(res.data[i].dat[0][eindex].split('#')[0]));
        }
      }
      obj.data = arr;
      if (obj.name) {
        linearr.push(obj);
      }
      this.canvastishiTF = linearr.some((item) => {
        return item.data.length != 0;
      });
      console.log(obj);
      this.showColumn('canvasColumnA', xtitle, linearr);
    },
    confirmFun(index) {
      console.log(index);
      this.indexone = index[0];
      var str = 'e' + (index[0] + 1);
      console.log(str);
      this.conflist(this.chartdata, str);
    },
    tiemchange(e) {
      console.log(e);
      this.begintime = +new Date(e.startDate) / 1000;
      this.end = +new Date(e.endDate) / 1000 + 16 * 60 * 60;
      this.historydata(this.id);
      this.listhistorydata(this.id);
    },
    prev() {
      //上一页
      if (this.page > 1) {
        this.page--;
        this.listhistorydata(this.id);
      }
    },
    next() {
      //下一页
      if (this.page < this.pagesum) {
        this.page++;
        this.listhistorydata(this.id);
      }
    },
    clickLeft() {
      uni.navigateBack({
        delta: 1,
      });
    },
    showColumn(id, xtitle, xinfo) {
      var _self = this;
      const ctx = uni.createCanvasContext(id, this);
      canvasColumnA = 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) {
      canvasColumnA.scrollStart(e);
    },
    moveLineA(e) {
      canvasColumnA.scroll(e);
    },
    touchEndLineA(e) {
      canvasColumnA.scrollEnd(e);
      //下面是toolTip事件，如果滚动后不需要显示，可不填写
      canvasColumnA.showToolTip(e, {
        format: function (item, category) {
          return category + ' ' + item.name + ':' + item.data;
        },
      });
    },
    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;
    },
  },
  onLoad(option) {
    this.cWidth = uni.upx2px(650);
    this.cHeight = uni.upx2px(500);
    this.id = option.device_id;
    this.end = presenttime / 1000;
    this.begintime = presenttime / 1000 - 24 * 60 * 60;
    console.log(new Date(1616145097 * 1000), new Date(1616231497 * 1000));
    this.historydata(option.device_id);
    this.listhistorydata(option.device_id);
    this.myuser_type = uni.getStorageSync('myuser_type');
  },
};
</script>

<style lang="scss">
.graph {
  position: absolute;
  top: 54px;
  width: 90%;
  left: 5%;

  .canvasbox {
    width: 100%;
    height: 550rpx;
    position: relative;
    box-shadow: 0 0 10rpx #bcb9ca;
    padding-top: 20px;

    .charts {
    }

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

    .schedule {
      display: flex;
      width: 280rpx;
      height: 50rpx;
      border: 2rpx solid #f0f0f0;
      margin-right: 40rpx;

      .schedule_value {
        width: 70%;
        text-align: center;
        line-height: 50rpx;
        font-size: 24rpx;
      }

      .schedule_icon {
        width: 30%;
        background-color: #f2f2f2;
        text-align: center;
        line-height: 50rpx;
      }
    }
  }

  .none_hint {
    font-size: 32rpx;
    font-weight: 700;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -64rpx;
  }
}

.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;
    color: #fff;
    text-align: center;
    font-size: 24rpx;
    height: 50rpx;
    line-height: 50rpx;
  }
}

.selecttimes {
  width: 100%;
  box-shadow: 0 0 10rpx #bcb9ca;
  margin-top: 20rpx;
  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;
    }
  }
}

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

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

    .table {
      // width: 10420px;
    }

    .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;
      }
    }
    .redText {
      .td {
        color: #dc143c;
      }
    }
    .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>