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