新增页签区分运输信息与温湿度信息，新增最大最小平均温湿度

src/views/WMS/historical-route/index.vue

@@ -1,69 +1,143 @@
 <template>
-  <!-- 页面 -->
-  <div class="block">
-    <br>
-    <el-timeline>
-      <h1>数据表单</h1>
-      <el-table
-      :data="tableData"
-      height="250"
-      border
-      style="width: 97%">
-      <el-table-column
-      prop="billCode"
-      label="单据号"
-      width="90">
-      </el-table-column>
-      <el-table-column
-      prop="measuringPointName"
-      label="车牌号"
-      width="110">
-      </el-table-column>
-      <el-table-column
-      prop="temperature"
-      label="温度"
-      width="90">
-      </el-table-column>
-      <el-table-column
-      prop="humidity"
-      label="湿度"
-      width="90">
-      </el-table-column>
-      <el-table-column
-      prop="hisDate"
-      label="时间点"
-      width="180">
-      </el-table-column>
-      <el-table-column
-      prop="gpsLongitude"
-      label="经度"
-      width="180">
-      </el-table-column>
-      <el-table-column
-      prop="gpsLatitude"
-      label="纬度"
-      width="180">
-      </el-table-column>
-      <el-table-column
-      prop="address"
-      label="地址">
-        </el-table-column>
-      </el-table>
-    </el-timeline>
+  <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" stretch="true" >
+
+    <el-tab-pane label="温湿度信息" name="first">
+      <!-- 单据信息 -->
+      <el-timeline>
+        <el-timeline>
+          <el-descriptions>
+            <el-descriptions-item label="订单编号">{{this.basicData.billCode}}</el-descriptions-item>
+            <el-descriptions-item label="车牌号">{{this.basicData.plateNumber}}</el-descriptions-item>
+          </el-descriptions>
+          <el-descriptions>
+            <el-descriptions-item label="开始时间">{{this.basicData.startTime}}</el-descriptions-item>
+            <el-descriptions-item label="结束时间">{{this.basicData.endTime}}</el-descriptions-item>
+          </el-descriptions>
+        </el-timeline>
+      </el-timeline>
+      
+      <el-timeline>
+        <!-- 数据表 -->
+        <h2>订单温湿度列表</h2>
+        <el-table
+          :data="tableData2"
+          height="300"
+          border
+          style="width: 97%">
+          <el-table-column
+          prop="temperature"
+          label="温度"
+          align="center"
+          width="300">
+          </el-table-column>
+          <el-table-column
+          prop="humidity"
+          label="湿度"
+          align="center"
+          width="300">
+          </el-table-column>
+          <el-table-column
+          prop="hisDate"
+          label="时间点"
+          align="center"
+          width="400">
+          </el-table-column>
+          <el-table-column
+          prop="address"
+          label="地址">
+          </el-table-column>
+        </el-table>
+        <br><br><br>
+        <!-- 折线图 -->
+        <h2>订单的温湿度折线图</h2>
+
+      </el-timeline>
 
-    <el-timeline>
-      <br><br><br>
-      <h1>温湿度折线图</h1>
       <div class="echart" id="mychart" :style="myChartStyle"></div>
-      <br><br><br>
-      <h1>历史轨迹</h1>
-    </el-timeline>
-    <!-- <el-timeline>
-      <input type="button" value="查询" @click="aaa" />
-    </el-timeline> -->
-    <div id="container"></div>
-    <!-- <iframe :src = url width="100%" height="1000"> </iframe> -->
-  </div>
+
+    </el-tab-pane>
+
+    <el-tab-pane label="运输信息" name="second">
+
+      <!-- 单据信息 -->
+      <el-timeline>
+        <el-timeline>
+          <el-descriptions>
+            <el-descriptions-item label="订单编号">{{this.basicData.billCode}}</el-descriptions-item>
+            <el-descriptions-item label="车牌号">{{this.basicData.plateNumber}}</el-descriptions-item>
+          </el-descriptions>
+          <el-descriptions>
+            <el-descriptions-item label="开始时间">{{this.basicData.startTime}}</el-descriptions-item>
+            <el-descriptions-item label="结束时间">{{this.basicData.endTime}}</el-descriptions-item>
+          </el-descriptions>
+        </el-timeline>
+      </el-timeline>
+      
+      <!-- 地图 -->
+      <div id="container"></div>
+
+      <!-- 订单温湿度列表 -->
+      <el-timeline>
+        <br>
+        <h2>订单温湿度列表</h2>
+        <el-table
+        :data="tableData1"
+        height="200"
+        style="width: 97%">
+        <el-table-column
+        prop="maxTemperature"
+        label="温度最大值"
+        align="center"
+        width="150">
+        </el-table-column>
+        <el-table-column
+        prop="avgTemperature"
+        label="温度平均值"
+        align="center"
+        width="150">
+        </el-table-column>
+        <el-table-column
+        prop="minTemperature"
+        label="温度最小值"
+        align="center"
+        width="150">
+        </el-table-column>
+        <el-table-column
+        prop="maxHumidity"
+        label="湿度最大值"
+        align="center"
+        width="150">
+        </el-table-column>
+        <el-table-column
+        prop="avgHumidity"
+        label="湿度平均值"
+        align="center"
+        width="150">
+        </el-table-column>
+        <el-table-column
+        prop="minHumidity"
+        label="湿度最小值"
+        align="center"
+        width="150">
+        </el-table-column>
+        <el-table-column
+        prop="startTime"
+        label="开始时间"
+        align="center"
+        width="350">
+        </el-table-column>
+        <el-table-column
+        prop="endTime"
+        align="center"
+        label="结束时间">
+        </el-table-column>
+        </el-table>
+      </el-timeline>
+
+    </el-tab-pane>
+
+  </el-tabs>
+
 </template>
 
 <script>
@@ -73,20 +147,41 @@ import AMapLoader from '@amap/amap-jsapi-loader'
   }
 import historyApi from '@/api/WMS/historical-route'
 import * as echarts from "echarts";
-// import {queryAddress,} from '@/api/WMS/historical-route'
+
 export default {
   data() {
     return {
+      basicData:{
+        billCode: "",
+        plateNumber: "",
+        startTime: "",
+        endTime: ""
+      },
+      //标签页
+      activeName: 'first',
       //地图对象
       map: null,
+      //图表
       myChart: {},
       xData: [], //横坐标
       temperatureData: [], //温度数据
       humidityData: [], //湿度数据
       myChartStyle: { float: "left", width: "100%", height: "400px" }, //图表样式
       position: [],
-      // url: '',
-      tableData:[],
+      //运输信息表单数据
+      tableData1:[],
+      //运输信息表单数据准备
+      modelData1:[{
+        maxTemperature:"",
+        avgTemperature:"",
+        minTemperature:"",
+        maxHumidity:"",
+        avgHumidity:"",
+        minHumidity:"",
+        startTime:"",
+        endTime:""
+      }],
+      tableData2:[],
       resData:[],
       resX:[],
       resYTemperature:[],
@@ -96,16 +191,22 @@ export default {
         plateNumber: "",
         startTime: "",
         endTime: ""
-      }
+      },
+      option:{}
     };
   },
   mounted() {
-    //渲染图表
-    this.initEcharts();
     //DOM初始化完成进行地图初始化
-    this.initMap()
+    this.initMap();
+    // this.initEcharts();
   },
   methods: {
+    //切换标签页时执行
+    handleClick(tab, event) {
+      console.log(tab, event);
+      this.handleQuery();
+    },
+    //地图初始化
     initMap() {
       AMapLoader.load({
         key: 'f953210b2d5276ffbf5a2bc01ef80f55', // 申请好的Web端开发者Key，首次调用 load 时必填
@@ -126,7 +227,7 @@ export default {
     },
     //渲染图表
     initEcharts() {
-      const option = {
+      this.option = {
         xAxis: {
         data: this.xData
         },
@@ -162,9 +263,12 @@ export default {
         }
         ]
       };
+      this.windowSize();
+    },
+     //随着屏幕大小调节图表
+    windowSize() {
       this.myChart = echarts.init(document.getElementById("mychart"));
-      this.myChart.setOption(option);
-      //随着屏幕大小调节图表
+      this.myChart.setOption(this.option);
       window.addEventListener("resize", () => {
         this.myChart.resize();
       });
@@ -216,11 +320,10 @@ export default {
                   this.resYTemperature[0] = res.data[i].temperature;
                   this.resYHumidity[0] = res.data[i].humidity / 100;
                   //定义递增值
-                  let increment = Math.trunc((j - i) / 15);
+                  let increment = Math.trunc((j - i) / 14);
+                  //途径点数据
                   for (let z = i + increment; z < j; z = z + increment) {
                   // for (let z = i; z < j; z++) {
-                    // console.log("i",i)
-                    // text += `&via[${count}][id][${z}]&via[${count}][lnglat]=${data[z].gpsLongitude},${data[z].gpsLatitude}` ;
                     if(data[z].gpsLongitude != 0 && data[z].gpsLatitude != 0) {
                       path.push([data[z].gpsLongitude, data[z].gpsLatitude]);
                       this.resData[count + 1] = res.data[z];
@@ -240,24 +343,67 @@ export default {
                     route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE); //构造拖拽导航类
                     route.search(); //查询导航路径并开启拖拽导航
                   });
-                  // this.position = data;
-                  // let url = `//uri.amap.com/navigation?from=${data[0].gpsLongitude},${data[0].gpsLatitude},startpoint&to=${data[data.length-1].gpsLongitude},${data[data.length-1].gpsLatitude},endpoint&via=${data[260].gpsLongitude},${data[260].gpsLatitude},midwaypoint&mode=car&policy=0&src=mypage&coordinate=gaode&callnative=0`
-                  // let url = `https://ditu.amap.com/dir?type=car&policy=1&from[lnglat]=${data[i].gpsLongitude},${data[i].gpsLatitude}&from[name]=startpoint&from[id]=${i}-from&to[lnglat]=${data[j].gpsLongitude},${data[j].gpsLatitude}&to[name]=endpoint&to[id]=${i}-to${text}&src=mypage&callnative=0&platform=pc&innersrc=uriapi`
-                  // console.log(url, 'url---------------------');
-                  // this.url = url;
                   this.xData = res.data.temperature;
-                  this.tableData = this.resData;
-                  // window.location.href = url;
-                  // window.open(url, "newWindow", "width=1000,height=1000");
-                  // window.location.reload();
+                  this.tableData2 = this.resData;
                   this.xData = this.resX;
                   this.temperatureData = this.resYTemperature;
                   this.humidityData = this.resYHumidity;
-                  // console.log('this.xData',this.xData);
-                  // console.log('this.temperatureData',this.temperatureData);
-                  // console.log('this.humidityData',this.humidityData);
+                  //计算订单温湿度列表值
+                  let maxT = data[i].temperature;
+                  let maxH = data[i].humidity;
+                  let minT = data[i].temperature;
+                  let minH = data[i].humidity;
+                  let aggT = 0;
+                  let aggH = 0;
+                  // let test1 = 0;
+                  // let test2 = 0;
+                  for (let x = i; x < j; x++) {
+                    //温度最大值
+                    if (res.data[x].temperature > maxT) {
+                      maxT = res.data[x].temperature;
+                    }
+                    //湿度最大值
+                    if (res.data[x].humidity > maxH) {
+                      maxH = res.data[x].humidity;
+                    }
+                    //温度最小值
+                    if (res.data[x].temperature < minT) {
+                      minT = res.data[x].temperature
+                    }
+                    //湿度最小值
+                    if (res.data[x].humidity < minH) {
+                      minH = res.data[x].humidity
+                    }
+                    // test1 += res.data[x].temperature + ", "
+                    // test2 += res.data[x].humidity + ", "
+                    aggT += parseFloat(res.data[x].temperature);
+                    aggH += parseFloat(res.data[x].humidity);
+                  }
+                  // console.log(aggT, 'aggt');
+                  // console.log(aggH, 'aggh');
+                  // console.log(test1, 'test');
+                  // console.log(test2, 'test2');
+                  // console.log(i, 'i')
+                  // console.log(j, 'j')
+                  let avgT = aggT / (j - i);
+                  let avgH = aggH / (j - i);
+                  //对订单温湿度列表进行赋值
+                  this.modelData1[0].maxTemperature = maxT;
+                  this.modelData1[0].maxHumidity = maxH;
+                  this.modelData1[0].minTemperature = minT;
+                  this.modelData1[0].minHumidity = minH;
+                  this.modelData1[0].avgTemperature = avgT.toFixed(2);
+                  this.modelData1[0].avgHumidity = avgH.toFixed(1);
+                  this.modelData1[0].startTime = res.data[i].hisDate;
+                  this.modelData1[0].endTime = res.data[j].hisDate;
+                  this.tableData1 = this.modelData1;
+                  //对基础数据进行赋值
+                  this.basicData.billCode = this.resData[i].billCode;
+                  this.basicData.plateNumber = this.resData[i].measuringPointName;
+                  this.basicData.startTime = this.modelData1[0].startTime
+                  this.basicData.endTime = this.modelData1[0].endTime
+                  //渲染图表
                   this.initEcharts();
-                  // console.log(text,'text')
                   return;
                 }
               }
@@ -283,4 +429,5 @@ export default {
   width: 1000;
   height: 800px;
 }
-</style>
+</style>
+