|
@@ -22,11 +22,15 @@
|
|
|
<!-- 数据表 -->
|
|
|
<h2>订单温湿度列表</h2>
|
|
|
<el-table :data="tableData2" stripe border style="width: 97%">
|
|
|
- <el-table-column prop="measuringPointName" label="车牌号或保温箱" align="center" min-width="200" />
|
|
|
- <el-table-column prop="measuringPointAddr" label="探头" align="center" min-width="100" />
|
|
|
- <el-table-column prop="temperature" label="温度" align="center" min-width="100" />
|
|
|
- <el-table-column prop="hisDate" label="时间点" align="center" min-width="300" />
|
|
|
- <el-table-column prop="address" label="地址" min-width="400" />
|
|
|
+ <el-table-column prop="measuringPointName" label="车牌号或保温箱" align="center" min-width="150" />
|
|
|
+ <el-table-column prop="measuringPointAddr" label="探头" align="center" min-width="90" />
|
|
|
+ <el-table-column prop="temperature" label="温度" align="center" min-width="80" />
|
|
|
+ <el-table-column prop="hisDate" label="时间点" align="center" min-width="200" />
|
|
|
+ <el-table-column prop="measuringPointName1" label="车牌号或保温箱" align="center" min-width="150" />
|
|
|
+ <el-table-column prop="measuringPointAddr1" label="探头" align="center" min-width="90" />
|
|
|
+ <el-table-column prop="temperature1" label="温度" align="center" min-width="80" />
|
|
|
+ <el-table-column prop="hisDate1" label="时间点" align="center" min-width="200" />
|
|
|
+ <!-- <el-table-column prop="address" label="地址" width="400" /> -->
|
|
|
</el-table>
|
|
|
</el-timeline>
|
|
|
</div>
|
|
@@ -221,6 +225,45 @@
|
|
|
fontSize: 12
|
|
|
}
|
|
|
},
|
|
|
+ markArea: {
|
|
|
+ itemStyle: {
|
|
|
+ color: 'rgba(255, 173, 177, 0.4)'
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ [{
|
|
|
+ name: '冷藏温度警戒线',
|
|
|
+ yAxis: '8'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ yAxis: '8.1'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ [{
|
|
|
+ name: '冷藏温度警戒线',
|
|
|
+ yAxis: '2'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ yAxis: '1.9'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ [{
|
|
|
+ name: '冷冻温度警戒线',
|
|
|
+ yAxis: '-15'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ yAxis: '-14.9'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ [{
|
|
|
+ name: '冷冻温度警戒线',
|
|
|
+ yAxis: '-25'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ yAxis: '-25.1'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ ]
|
|
|
+ }
|
|
|
}
|
|
|
// count = 0;
|
|
|
for (let j = 0; j < latitudeLongitude.length; j++) {
|
|
@@ -254,6 +297,45 @@
|
|
|
fontSize: 12
|
|
|
}
|
|
|
},
|
|
|
+ markArea: {
|
|
|
+ itemStyle: {
|
|
|
+ color: 'rgba(255, 173, 177, 0.4)'
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ [{
|
|
|
+ name: '冷藏温度警戒线',
|
|
|
+ yAxis: '8'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ yAxis: '8.1'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ [{
|
|
|
+ name: '冷藏温度警戒线',
|
|
|
+ yAxis: '2'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ yAxis: '1.9'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ [{
|
|
|
+ name: '冷冻温度警戒线',
|
|
|
+ yAxis: '-15'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ yAxis: '-14.9'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ [{
|
|
|
+ name: '冷冻温度警戒线',
|
|
|
+ yAxis: '-25'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ yAxis: '-25.1'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ ]
|
|
|
+ }
|
|
|
}
|
|
|
// count = 0;
|
|
|
for (let j = 0; j < res.data.length; j++) {
|
|
@@ -340,7 +422,10 @@
|
|
|
initEcharts() {
|
|
|
this.option = {
|
|
|
tooltip: {
|
|
|
- trigger: 'axis'
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross'
|
|
|
+ }
|
|
|
},
|
|
|
grid: {
|
|
|
left: '3%',
|
|
@@ -348,8 +433,16 @@
|
|
|
bottom: '5%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
- toolbox: {},
|
|
|
+ toolbox: {
|
|
|
+ //保存图
|
|
|
+ // show: true,
|
|
|
+ // feature: {
|
|
|
+ // saveAsImage: {}
|
|
|
+ // }
|
|
|
+ },
|
|
|
xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
data: this.xData
|
|
|
},
|
|
|
//图例
|
|
@@ -357,7 +450,13 @@
|
|
|
data: [],
|
|
|
// bottom: "0%"
|
|
|
},
|
|
|
- yAxis: {},
|
|
|
+ yAxis: {
|
|
|
+ name: '温度',
|
|
|
+ // Y轴最大值
|
|
|
+ // max: 10,
|
|
|
+ // 间隔值
|
|
|
+ // interval: 3
|
|
|
+ },
|
|
|
//加上dataZoom可实现缩放
|
|
|
dataZoom: [{
|
|
|
//x轴
|
|
@@ -450,7 +549,49 @@
|
|
|
this.modelData1[0].startTime = array[0].hisDate;
|
|
|
this.modelData1[0].endTime = array[array.length - 1].hisDate;
|
|
|
this.tableData1 = this.modelData1;
|
|
|
- this.tableData2 = array;
|
|
|
+ let median = (array.length / 2).toFixed(0);
|
|
|
+ console.log(median, 'median');
|
|
|
+ let table = []
|
|
|
+ for (let i = 0; i < median; i++) {
|
|
|
+ table[i] = {
|
|
|
+ measuringPointName: '',
|
|
|
+ measuringPointAddr: '',
|
|
|
+ temperature: '',
|
|
|
+ hisDate: '',
|
|
|
+ measuringPointName1: '',
|
|
|
+ measuringPointAddr1: '',
|
|
|
+ temperature1: '',
|
|
|
+ hisDate1: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(table, 'table');
|
|
|
+ if (array.length % 2 == 0) {
|
|
|
+ for (let i = 0, j = 0, z = 1; i < median; i++, j = j + 2, z = z + 2) {
|
|
|
+ table[i].measuringPointName = array[j].measuringPointName;
|
|
|
+ table[i].measuringPointAddr = array[j].measuringPointAddr;
|
|
|
+ table[i].temperature = array[j].temperature;
|
|
|
+ table[i].hisDate = array[j].hisDate;
|
|
|
+ table[i].measuringPointName1 = array[z].measuringPointName;
|
|
|
+ table[i].measuringPointAddr1 = array[z].measuringPointAddr;
|
|
|
+ table[i].temperature1 = array[z].temperature;
|
|
|
+ table[i].hisDate1 = array[z].hisDate;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ for (let i = 0, j = 0, z = 1; i < median; i++, j = j + 2, z = z + 2) {
|
|
|
+ table[i].measuringPointName = array[j].measuringPointName;
|
|
|
+ table[i].measuringPointAddr = array[j].measuringPointAddr;
|
|
|
+ table[i].temperature = array[j].temperature;
|
|
|
+ table[i].hisDate = array[j].hisDate;
|
|
|
+ if (i != median - 1) {
|
|
|
+ table[i].measuringPointName1 = array[z].measuringPointName;
|
|
|
+ table[i].measuringPointAddr1 = array[z].measuringPointAddr;
|
|
|
+ table[i].temperature1 = array[z].temperature;
|
|
|
+ table[i].hisDate1 = array[z].hisDate;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(table, 'table');
|
|
|
+ this.tableData2 = table;
|
|
|
},
|
|
|
//获取当前时间
|
|
|
getCurrentTime() {
|