bigDataApp/pages/disease/forecastResult.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="http://www.hnyfwlw.com:8006/bigdata_app/image/cb/onBg.png"
            mode=""
            class="bgi"
          ></image>
          <p style="font-size: 32rpx" @click="copy(device_id)">
            设备 ID：{{ device_id }}
            <image
              src="http://www.hnyfwlw.com:8006/bigdata_app/image/environment/fuzhi.png"
              mode=""
              class="tishi"
            ></image>
          </p>
          <p>预测位置：{{ this.address || "无" }}</p>
          <p>
            最近预测时间：<span v-if="this.latest_uptime != ''">{{
              this.latest_uptime | timeFormat()
            }}</span>
            <span v-else>暂无数据</span>
          </p>
        </view>
      </view>
      <!-- <view class="control">
				<view class="control_item" v-if="kongtf" @click="control">
					<image :src="'http://www.hnyfwlw.com:8006/bigdata_app'+'/image/environment/8.png'" mode=""></image>
					<p>预测结果</p>
				</view>
			</view> -->
      <view class="his_box">
        <view class="title">预测数据</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">{{ formetDate(items.uptime) }}</td>
                <td class="td">{{ items.incidence }}</td>
                <td class="td">{{ filterIncidence(items.incidence) }}</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;
export default {
  data() {
    return {
      latest_uptime: "",
      address: "",
      eqinfo: {},
      tiemshow: false, //时间筛选弹框
      begintime: "", //开始时间
      end: "", //结束时间
      dataloadingtf: true,
      canvastishiTF: false,
      device_id: "", //设备ID
      tableHead: ["预测时间", "预测值", "预测结果"], //表格抬头
      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: {
    formetDate(time) {
      let date = new Date(time * 1000);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      return `${y}-${this.addZero(m)}-${this.addZero(d)}`;
    },
    addZero(x) {
      return Number(x) < 10 ? `0${x}` : x;
    },
    copy(item) {
      uni.setClipboardData({
        data: item,
        success: function () {
          console.log("success");
        },
      });
    },
    filterIncidence(data) {
      if (data === "") {
        return "暂无预测结果";
      } else if (Number(data) <= 0.1) {
        return "不发生";
      } else if (Number(data) > 0.1 && Number(data) <= 10) {
        return "轻发生";
      } else if (Number(data) > 10 && Number(data) <= 20) {
        return "偏轻发生";
      } else if (Number(data) > 20 && Number(data) <= 30) {
        return "中等发生";
      } else if (Number(data) > 30 && Number(data) <= 40) {
        return "偏重发生";
      } else if (Number(data) > 40) {
        return "大发生";
      }
    },
    // tiemchange(e) {
    //   //切换时间
    //   this.begintime = parseInt(+new Date(e.startDate) / 1000);
    //   this.end = parseInt(+new Date(e.endDate) / 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() {
      //表格历史数据
      this.dataloadingtf = true;
      const res = await this.$myRequest({
        url: "/api/api_gateway?method=wheat.wheat.wheat_incidence",
        data: {
          device_id: this.device_id,
          page: this.page,
          begin: this.begintime,
          end: this.end,
        },
      });
      console.log(res);
      this.pagesum = Math.ceil(res.nums / 10) || 1;
      this.address = res.province + res.city + res.county;
      this.latest_uptime = res.latest_uptime;
      if (this.pagesum > 0) {
        var dat = res.data;
        this.historylistdata = [];
        for (var i = 0; i < dat.length; i++) {
          // console.log(eval("(" + dat[i] + ")"));
          var item = dat[i];
          var obj = {};
          for (var i1 in item) {
            if (i1 === "incidence") {
              obj[i1] = item[i1].toFixed(5);
            } else {
              obj[i1] = item[i1];
            }
            // if (i1 == "uploadTime") {
            //   obj[i1] = this.formatTime(item[i1] * 1000);
            // } else {
            // }
          }
          this.historylistdata.push(obj);
        }
      } else {
        this.historylistdata = [];
      }
      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;
    //   canvaColumnA = new uCharts({
    //     canvasId: id,
    //     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) {
    // console.log(option);
    // this.eqinfo = JSON.parse(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">
.info {
  width: 100%;
  position: absolute;
  top: 44px;

  .info_item {
    width: 90%;
    margin: 0 auto;
    // height: 180rpx;
    padding: 50rpx 50rpx;
    position: relative;
    box-sizing: border-box;
    .bgi {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }

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

      .tishi {
        width: 30rpx;
        height: 30rpx;
        margin: 0rpx 0 0 20rpx;
      }
    }
  }
}
.his_box {
  width: 100%;
  top: 340rpx;
  position: relative;
  .title {
    padding: 20rpx 50rpx;
    font-weight: 600;
    font-size: 28rpx;
  }
}

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