增加数组差值小于最大途径点数量的判断，修改导出的页面范围为整个页签。

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

@@ -1,140 +1,141 @@
 <template>
-  <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" stretch="true">
-    <el-tab-pane label="温湿度信息" name="first">
-      <div id="body" :style="{width: width - 300 + 'px'}">
-        <!-- 单据信息 -->
-        <el-timeline>
+  <div id="print">
+    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" stretch="true">
+      <el-tab-pane label="温湿度信息" name="first">
+        <div id="body" :style="{width: width - 300 + 'px'}">
+          <!-- 单据信息 -->
           <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-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-button class="OutCss" v-print="'#print'" type="primary">导出</el-button>  
+            </el-timeline>
           </el-timeline>
-        </el-timeline>
-        <el-timeline>
-         	<!--导出按钮-->
-           <el-button class="OutCss" v-print="'#body'" type="primary">导出</el-button>  
-          <!-- 数据表 -->
-          <h2>订单温湿度列表</h2>
-          <el-table
-            :data="tableData2"
-            stripe
-            border
+          <el-timeline>
+            <!-- 数据表 -->
+            <h2>订单温湿度列表</h2>
+            <el-table
+              :data="tableData2"
+              stripe
+              border
+              style="width: 97%">
+              <el-table-column
+              prop="temperature"
+              label="温度"
+              align="center"
+              min-width="300">
+              </el-table-column>
+              <el-table-column
+              prop="hisDate"
+              label="时间点"
+              align="center"
+              min-width="400">
+              </el-table-column>
+              <el-table-column
+              prop="address"
+              label="地址"
+              min-width="500">
+              </el-table-column>
+            </el-table>
+          </el-timeline>
+        </div>
+        <br>
+        <div id="body" :style="{width: width - 300 + 'px'}">
+          <el-timeline>
+            <h2>订单温度折线图</h2>
+            <div class="echart" id="mychart" :style="myChartStyle"></div>
+          </el-timeline>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="运输信息" name="second">
+        <div id="body" :style="{width: width - 300 + 'px'}">
+          <!-- 单据信息 -->
+          <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="temperature"
-            label="温度"
+            prop="maxTemperature"
+            label="温度最大值"
             align="center"
-            min-width="300">
+            min-width="100">
             </el-table-column>
             <el-table-column
-            prop="hisDate"
-            label="时间点"
+            prop="avgTemperature"
+            label="温度平均值"
             align="center"
-            min-width="400">
+            min-width="100">
             </el-table-column>
             <el-table-column
-            prop="address"
-            label="地址"
-            min-width="500">
+            prop="minTemperature"
+            label="温度最小值"
+            align="center"
+            min-width="100">
             </el-table-column>
-          </el-table>
-        </el-timeline>
-      </div>
-      <br>
-      <div id="body" :style="{width: width - 300 + 'px'}">
-        <el-timeline>
-          <h2>订单温度折线图</h2>
-          <div class="echart" id="mychart" :style="myChartStyle"></div>
-        </el-timeline>
-      </div>
-    </el-tab-pane>
-    <el-tab-pane label="运输信息" name="second">
-      <div id="body" :style="{width: width - 300 + 'px'}">
-        <!-- 单据信息 -->
-        <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-table-column
+            prop="maxHumidity"
+            label="湿度最大值"
+            align="center"
+            min-width="100">
+            </el-table-column>
+            <el-table-column
+            prop="avgHumidity"
+            label="湿度平均值"
+            align="center"
+            min-width="100">
+            </el-table-column>
+            <el-table-column
+            prop="minHumidity"
+            label="湿度最小值"
+            align="center"
+            min-width="100">
+            </el-table-column>
+            <el-table-column
+            prop="startTime"
+            label="开始时间"
+            align="center"
+            min-width="250">
+            </el-table-column>
+            <el-table-column
+            prop="endTime"
+            align="center"
+            label="结束时间"
+            min-width="250">
+            </el-table-column>
+            </el-table>
           </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"
-          min-width="100">
-          </el-table-column>
-          <el-table-column
-          prop="avgTemperature"
-          label="温度平均值"
-          align="center"
-          min-width="100">
-          </el-table-column>
-          <el-table-column
-          prop="minTemperature"
-          label="温度最小值"
-          align="center"
-          min-width="100">
-          </el-table-column>
-          <el-table-column
-          prop="maxHumidity"
-          label="湿度最大值"
-          align="center"
-          min-width="100">
-          </el-table-column>
-          <el-table-column
-          prop="avgHumidity"
-          label="湿度平均值"
-          align="center"
-          min-width="100">
-          </el-table-column>
-          <el-table-column
-          prop="minHumidity"
-          label="湿度最小值"
-          align="center"
-          min-width="100">
-          </el-table-column>
-          <el-table-column
-          prop="startTime"
-          label="开始时间"
-          align="center"
-          min-width="250">
-          </el-table-column>
-          <el-table-column
-          prop="endTime"
-          align="center"
-          label="结束时间"
-          min-width="250">
-          </el-table-column>
-          </el-table>
-        </el-timeline>
-     </div>
-    </el-tab-pane>
-
-  </el-tabs>
+      </div>
+      </el-tab-pane>
 
+    </el-tabs>
+  </div>
 </template>
 
 <script>
@@ -146,6 +147,11 @@ import historyApi from '@/api/WMS/historical-route'
 import * as echarts from "echarts";
 
 export default {
+  mounted() {
+    //DOM初始化完成进行地图初始化
+    this.initMap();
+    // this.initEcharts();
+  },
   data() {
     return {
       width: document.documentElement.clientWidth - 10,
@@ -194,11 +200,6 @@ export default {
       option:{}
     };
   },
-  mounted() {
-    //DOM初始化完成进行地图初始化
-    this.initMap();
-    // this.initEcharts();
-  },
   methods: {
     handleClick(tab, event) {
       console.log(tab, event);
@@ -235,11 +236,7 @@ export default {
           bottom: '5%',
           containLabel: true
         },
-        toolbox: {
-          feature: {
-            saveAsImage: {}
-          }
-        },
+        toolbox: {},
         xAxis: {
           data: this.xData
         },
@@ -285,7 +282,14 @@ export default {
         this.myChart.resize();
       });
     },
-
+    //
+    // maploading() {
+    //   var map;
+    //   //基本地图加载
+    //   map = new AMap.Map("container", {
+    //     resizeEnable: true
+    //   });
+    // },
     handleGeocodeRepo(data) {
       // let data = {
       //     billCode: "CS01",
@@ -313,11 +317,6 @@ export default {
               //定义经纬度不为0的数组[j]为终点
               for	(let j = data.length - 1; j > i; j--) {
                 if (data[j].gpsLatitude != 0 && data[j].gpsLongitude != 0) {
-                  var map, route;
-                  //基本地图加载
-                  map = new AMap.Map("container", {
-                    resizeEnable: true
-                  });
                   //绘制初始路径
                   var path = [];
                   path.push([data[i].gpsLongitude, data[i].gpsLatitude]);
@@ -326,18 +325,32 @@ export default {
                   this.resX[0] = res.data[i].hisDate;
                   this.resYTemperature[0] = res.data[i].temperature;
                   this.resYHumidity[0] = res.data[i].humidity / 100;
-                  //定义递增值
-                  let increment = Math.trunc((j - i) / 14);
-                  //途径点数据
-                  for (let z = i + increment; z < j; z = z + increment) {
-                  // for (let z = i; z < j; z++) {
-                    if(data[z].gpsLongitude != 0 && data[z].gpsLatitude != 0) {
-                      path.push([data[z].gpsLongitude, data[z].gpsLatitude]);
-                      this.resData[count + 1] = res.data[z];
-                      this.resX[count + 1] = res.data[z].hisDate;
-                      this.resYTemperature[count + 1] = res.data[z].temperature;
-                      this.resYHumidity[count + 1] = res.data[z].humidity / 100;
-                      count++;
+                  //判断差值
+                  if ((j - i) < 14) {
+                    //途径点数据
+                    for (let z = i + 1; z < j; z++) {
+                      if(data[z].gpsLongitude != 0 && data[z].gpsLatitude != 0) {
+                        path.push([data[z].gpsLongitude, data[z].gpsLatitude]);
+                        this.resData[count + 1] = res.data[z];
+                        this.resX[count + 1] = res.data[z].hisDate;
+                        this.resYTemperature[count + 1] = res.data[z].temperature;
+                        this.resYHumidity[count + 1] = res.data[z].humidity / 100;
+                        count++;
+                      }
+                    }
+                  } else {
+                    //定义递增值
+                    let increment = Math.trunc((j - i) / 14);
+                    //途径点数据
+                    for (let z = i + increment; z < j; z = z + increment) {
+                      if(data[z].gpsLongitude != 0 && data[z].gpsLatitude != 0) {
+                        path.push([data[z].gpsLongitude, data[z].gpsLatitude]);
+                        this.resData[count + 1] = res.data[z];
+                        this.resX[count + 1] = res.data[z].hisDate;
+                        this.resYTemperature[count + 1] = res.data[z].temperature;
+                        this.resYHumidity[count + 1] = res.data[z].humidity / 100;
+                        count++;
+                      }
                     }
                   }
                   path.push([data[j].gpsLongitude, data[j].gpsLatitude]);
@@ -346,10 +359,6 @@ export default {
                   this.resX[count] = res.data[j].hisDate;
                   this.resYTemperature[count] = res.data[j].temperature;
                   this.resYHumidity[count] = res.data[j].humidity / 100;
-                  map.plugin("AMap.DragRoute", function() {
-                    route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE); //构造拖拽导航类
-                    route.search(); //查询导航路径并开启拖拽导航
-                  });
                   this.xData = res.data.temperature;
                   this.tableData2 = this.resData;
                   this.xData = this.resX;
@@ -411,6 +420,15 @@ export default {
                   this.basicData.endTime = this.modelData1[0].endTime
                   //渲染图表
                   this.initEcharts();
+                  //基本地图加载
+                  var map, route;
+                  map = new AMap.Map("container", {
+                    resizeEnable: true
+                  });
+                  map.plugin("AMap.DragRoute", function() {
+                    route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE); //构造拖拽导航类
+                    route.search(); //查询导航路径并开启拖拽导航
+                  });
                   return;
                 }
               }
@@ -436,12 +454,6 @@ export default {
   width: 1000;
   height: 800px;
 }
-.Button {
-padding-top:3px; 
-padding-left:1000px;
-padding-right:3px;
-padding-bottom:100px;
-}
 .OutCss {
 float: right; 
 }
@@ -466,4 +478,3 @@ float: right;
   }
 }
 </style>
-