病害模块

pages.json

@@ -483,6 +483,22 @@
 			}
 
 		}, {
+			"path": "pages/disease/cmb",
+			"style": {
+				"navigationBarTitleText": "小麦赤霉病设备详情页",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+
+		},{
+			"path": "pages/disease/forecastResult",
+			"style": {
+				"navigationBarTitleText": "病害设备详情页",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+
+		},{
 			"path": "pages/index/indexcopy",
 			"style": {
 				"navigationBarTitleText": "首页",

pages/disease/cmb.vue

@@ -0,0 +1,684 @@
+<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(eqinfo.device_id)">
+            设备 ID：{{ eqinfo.device_id }}
+            <image
+              src="http://www.hnyfwlw.com:8006/bigdata_app/image/environment/fuzhi.png"
+              mode=""
+              class="tishi"
+            ></image>
+          </p>
+          <p>设备名称：{{ eqinfo.device_name || "无" }}</p>
+          <p>
+            最近上报时间：<span v-if="eqinfo.uptime">{{
+              eqinfo.uptime | timeFormat()
+            }}</span
+            ><span v-else>{{ eqinfo.addtime | timeFormat() }}</span>
+          </p>
+          <p>地址：{{ eqinfo.location || "暂无地址" }}</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/forecastResult.png'
+            "
+            mode=""
+          ></image>
+          <p>预测结果</p>
+        </view>
+      </view>
+      <view class="his_box">
+        <view class="selecttimes" @click="tiemshow = !tiemshow">
+          <view class="timesbox">
+            <image
+              :src="'http://www.hnyfwlw.com:8006/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="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 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;
+export default {
+  data() {
+    return {
+      kongtf: 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) {
+      //切换时间
+      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() {
+      //表格历史数据
+      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] + ")");
+          var tim = parseInt(item["uploadTime"]) * 1000 - 8 * 3600000;
+          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);
+        this.showColumn("canvasColumnA", xtitle, regroupData);
+        this.canvastishiTF = true;
+      } else {
+        this.canvastishiTF = false;
+        this.showColumn("canvasColumnA", 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) {
+      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) {
+    this.eqinfo = JSON.parse(option.shebei);
+    console.log(this.eqinfo);
+    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();
+    uni.getStorage({
+      key: "jurisdiction",
+      success: (res) => {
+        let items = JSON.parse(res.data).filter((item) => {
+          return item.purview_name == "环境监测系统";
+        });
+        let items2 = items[0].children.filter((item) => {
+          return item.purview_name == "环境监测";
+        });
+        var arr = items2[0].children;
+        for (var i = 0; i < arr.length; i++) {
+          switch (arr[i].purview_name) {
+            case "设备控制":
+              this.kongtf = true;
+              break;
+            case "24小时数据":
+              this.daydatatf = true;
+              break;
+            case "历史数据":
+              this.shujutf = true;
+              break;
+          }
+        }
+      },
+    });
+  },
+};
+</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;
+    }
+  }
+
+  /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>

pages/disease/forecastResult.vue

@@ -0,0 +1,438 @@
+<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">{{ items.uptime | timeFormat() }}</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: {
+    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>

pages/environment/gshistory.vue

@@ -1,408 +1,481 @@
 <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="'http://www.hnyfwlw.com:8006/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="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">{{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>
+  <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="'http://www.hnyfwlw.com:8006/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="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">{{ 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(",")
-				}
-				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(",")
-					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土壤温度
-					}
-					res.dat_char[i].temp.forEach((items, indexs) => {
-						var tempdata = [];
-						var tempdatas = [];
-						tempdata.push(Number(items));
-						tempdatas.push(Number(res.dat_char[i].swc[indexs]));
-						var temparrs = {
-							name: 10 + indexs * res.topic + "cm土壤温度",
-							data: tempdata,
-						};
-						var temparr = {
-							name: 10 + indexs * res.topic + "cm土壤湿度",
-							data: tempdatas,
-						};
-						obj.push(temparr);
-						obj.push(temparrs);
-					})
-				}
-				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.push(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
-				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) {
-			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()
-		}
-	}
+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(",");
+      }
+      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(",");
+        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土壤温度
+        }
+        res.dat_char[i].temp.forEach((items, indexs) => {
+          var tempdata = [];
+          var tempdatas = [];
+          tempdata.push(Number(items));
+          tempdatas.push(Number(res.dat_char[i].swc[indexs]));
+          var temparrs = {
+            name: 10 + indexs * res.topic + "cm土壤温度",
+            data: tempdata,
+          };
+          var temparr = {
+            name: 10 + indexs * res.topic + "cm土壤湿度",
+            data: tempdatas,
+          };
+          obj.push(temparr);
+          obj.push(temparrs);
+        });
+      }
+      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.push(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;
+      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) {
+    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;
+.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;
+  .timesbox {
+    display: flex;
+    justify-content: space-around;
 
-			image {
-				width: 30rpx;
-				height: 30rpx;
-				margin-top: 6rpx;
-			}
+    image {
+      width: 30rpx;
+      height: 30rpx;
+      margin-top: 6rpx;
+    }
 
-			.icon {
-				color: #949494;
-				text-align: right;
-				margin-left: 30rpx;
+    .icon {
+      color: #949494;
+      text-align: right;
+      margin-left: 30rpx;
+    }
+  }
 
-			}
-		}
+  /deep/.u-calendar__action {
+    display: flex;
+    justify-content: space-around;
 
-		/deep/.u-calendar__action {
-			display: flex;
-			justify-content: space-around;
+    .u-calendar__action__text {
+      line-height: 25px;
+    }
+  }
+}
 
-			.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;
 
-	.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;
 
-		.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";
+    }
 
-			.dataloading:after {
-				overflow: hidden;
-				display: inline-block;
-				vertical-align: bottom;
-				animation: ellipsis 2s infinite;
-				content: "\2026";
-			}
+    @keyframes ellipsis {
+      from {
+        width: 2px;
+      }
 
-			@keyframes ellipsis {
-				from {
-					width: 2px;
-				}
+      to {
+        width: 15px;
+      }
+    }
+  }
+}
 
-				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;
 
-	.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;
+      }
+    }
 
-				.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:nth-child(2n-1) {
-				background-color: #f5fff8;
-			}
+    .tr:first-child {
+      background-color: #57c878;
+      color: #fff;
+    }
+  }
 
-			.tr:first-child {
-				background-color: #57c878;
-				color: #fff;
-			}
-		}
+  .pagenumber {
+    display: flex;
+    margin: 20rpx auto;
 
-		.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;
+    }
 
-			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;
-			}
-		}
-	}
+    .pagenumber_page {
+      width: 100rpx;
+      height: 50rpx;
+      line-height: 50rpx;
+      font-size: 26rpx;
+      text-align: center;
+    }
+  }
+}
 </style>

util/api.js

@@ -49,15 +49,15 @@ export const myRequest = (options) => {
 			data: data,
 			success: (res) => {
 				if (res.data.message != "") {
-					if(res.data.message !== "识别无结果"){
+					if (res.data.message !== "识别无结果") {
 						return uni.showToast({
 							title: res.data.message,
 							icon: "none"
 						})
-					}else{
+					} else {
 						resolve(res.data.data)
 					}
-				} 
+				}
 				resolve(res.data.data)
 			},
 			fail: (err) => {