去掉了湿度数据，增加了导出功能

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

@@ -1,141 +1,136 @@
 <template>
-  <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" stretch="true" >
-
+  <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" stretch="true">
     <el-tab-pane label="温湿度信息" name="first">
-      <!-- 单据信息 -->
-      <el-timeline>
+      <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>
+        <el-timeline>
+         	<!--导出按钮-->
+           <el-button class="OutCss" v-print="'#body'" type="primary">导出</el-button>  
+          <!-- 数据表 -->
+          <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-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-timeline>
         </el-timeline>
-      </el-timeline>
       
-      <el-timeline>
-        <!-- 数据表 -->
-        <h2>订单温湿度列表</h2>
-        <el-table
-          :data="tableData2"
-          stripe
-          height="300"
-          border
+        <!-- 地图 -->
+        <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"
-          width="300">
+          min-width="100">
           </el-table-column>
           <el-table-column
-          prop="humidity"
-          label="湿度"
+          prop="avgTemperature"
+          label="温度平均值"
           align="center"
-          width="300">
+          min-width="100">
           </el-table-column>
           <el-table-column
-          prop="hisDate"
-          label="时间点"
+          prop="minTemperature"
+          label="温度最小值"
           align="center"
-          width="400">
+          min-width="100">
           </el-table-column>
           <el-table-column
-          prop="address"
-          label="地址">
+          prop="maxHumidity"
+          label="湿度最大值"
+          align="center"
+          min-width="100">
           </el-table-column>
-        </el-table>
-        <br><br><br>
-        <!-- 折线图 -->
-        <h2>订单的温湿度折线图</h2>
-
-      </el-timeline>
-
-      <div class="echart" id="mychart" :style="myChartStyle"></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-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"
-        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"
-        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>
@@ -153,6 +148,8 @@ import * as echarts from "echarts";
 export default {
   data() {
     return {
+      width: document.documentElement.clientWidth - 10,
+      param: this.$route.query,
       basicData:{
         billCode: "",
         plateNumber: "",
@@ -203,7 +200,6 @@ export default {
     // this.initEcharts();
   },
   methods: {
-    //切换标签页时执行
     handleClick(tab, event) {
       console.log(tab, event);
       this.handleGeocodeRepo(this.carMessage);
@@ -264,19 +260,19 @@ export default {
               fontSize: 16
             }
           },
-        },
-        {
-          name: "湿度/100",
-          data: this.humidityData,
-          type: "line", // 类型设置为折线图
-          label: {
-            show: true,
-            position: "bottom",
-            textStyle: {
-              fontSize: 16
-            }
-          }
         }
+        // {
+        //   name: "湿度/100",
+        //   data: this.humidityData,
+        //   type: "line", // 类型设置为折线图
+        //   label: {
+        //     show: true,
+        //     position: "bottom",
+        //     textStyle: {
+        //       fontSize: 16
+        //     }
+        //   }
+        // }
         ]
       };
       this.windowSize();
@@ -440,5 +436,34 @@ export default {
   width: 1000;
   height: 800px;
 }
+.Button {
+padding-top:3px; 
+padding-left:1000px;
+padding-right:3px;
+padding-bottom:100px;
+}
+.OutCss {
+float: right; 
+}
+
+#body {
+  /* padding: 0px 200px 0px 200px; */
+  margin: 0 auto;
+
+}
+@media print {
+  @page {
+    margin: 0;
+    size: portrait;
+    /* size: A4 landscape; size: landscape横向，size: portrait;纵向，如果不设置，则页面有横向和纵向的选择框 */
+  }
+
+  #body {
+    /* margin: 20cm; */
+    margin: 0 auto;
+    /* 打印时缩放，防止页面溢出 */
+    zoom: 0.6;
+  }
+}
 </style>