|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div id="print">
|
|
|
- <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" stretch="true">
|
|
|
+ <el-tabs v-model="activeName" type="border-card" stretch @tab-click="handleClick">
|
|
|
<el-tab-pane label="温湿度信息" name="first">
|
|
|
<div id="body" :style="{width: width - 300 + 'px'}">
|
|
|
<!-- 单据信息 -->
|
|
|
@@ -15,34 +15,18 @@
|
|
|
<el-descriptions-item label="结束时间">{{this.basicData.endTime}}</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
<!--导出按钮-->
|
|
|
- <el-button class="OutCss" v-print="'#print'" type="primary">导出</el-button>
|
|
|
+ <el-button class="OutCss" v-print="'#print'" type="primary">导出</el-button>
|
|
|
</el-timeline>
|
|
|
</el-timeline>
|
|
|
<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 :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>
|
|
|
</el-timeline>
|
|
|
</div>
|
|
|
@@ -69,7 +53,7 @@
|
|
|
</el-descriptions>
|
|
|
</el-timeline>
|
|
|
</el-timeline>
|
|
|
-
|
|
|
+
|
|
|
<!-- 地图 -->
|
|
|
<div id="container"></div>
|
|
|
|
|
|
@@ -77,61 +61,18 @@
|
|
|
<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 :data="tableData1" height="200" style="width: 97%">
|
|
|
+ <el-table-column prop="maxTemperature" label="温度最大值" align="center" min-width="100" />
|
|
|
+ <el-table-column prop="avgTemperature" label="温度平均值" align="center" min-width="100" />
|
|
|
+ <el-table-column prop="minTemperature" label="温度最小值" align="center" min-width="100" />
|
|
|
+ <el-table-column prop="maxHumidity" label="湿度最大值" align="center" min-width="100" />
|
|
|
+ <el-table-column prop="avgHumidity" label="湿度平均值" align="center" min-width="100" />
|
|
|
+ <el-table-column prop="minHumidity" label="湿度最小值" align="center" min-width="100" />
|
|
|
+ <el-table-column prop="startTime" label="开始时间" align="center" min-width="250" />
|
|
|
+ <el-table-column prop="endTime" label="结束时间" align="center" min-width="250" />
|
|
|
</el-table>
|
|
|
</el-timeline>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
</el-tab-pane>
|
|
|
|
|
|
</el-tabs>
|
|
|
@@ -139,379 +80,359 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import AMapLoader from '@amap/amap-jsapi-loader'
|
|
|
+ import AMapLoader from '@amap/amap-jsapi-loader'
|
|
|
window._AMapSecurityConfig = {
|
|
|
securityJsCode: '8e23904a0cf421675353f31fd1fc213c'
|
|
|
}
|
|
|
-import historyApi from '@/api/WMS/historical-route'
|
|
|
-import * as echarts from "echarts";
|
|
|
+ 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,
|
|
|
- param: this.$route.query,
|
|
|
- basicData:{
|
|
|
- billCode: "",
|
|
|
- plateNumber: "",
|
|
|
- startTime: "",
|
|
|
- endTime: ""
|
|
|
- },
|
|
|
- //标签页
|
|
|
- activeName: 'first',
|
|
|
- //地图对象
|
|
|
- map: null,
|
|
|
- //图表
|
|
|
- myChart: {},
|
|
|
- xData: [], //横坐标
|
|
|
- temperatureData: [], //温度数据
|
|
|
- humidityData: [], //湿度数据
|
|
|
- myChartStyle: { float: "left", width: "100%", height: "400px" }, //图表样式
|
|
|
- position: [],
|
|
|
- //运输信息表单数据
|
|
|
- tableData1:[],
|
|
|
- //运输信息表单数据准备
|
|
|
- modelData1:[{
|
|
|
- maxTemperature:"",
|
|
|
- avgTemperature:"",
|
|
|
- minTemperature:"",
|
|
|
- maxHumidity:"",
|
|
|
- avgHumidity:"",
|
|
|
- minHumidity:"",
|
|
|
- startTime:"",
|
|
|
- endTime:""
|
|
|
- }],
|
|
|
- tableData2:[],
|
|
|
- resData:[],
|
|
|
- resX:[],
|
|
|
- resYTemperature:[],
|
|
|
- resYHumidity:[],
|
|
|
- carMessage:{
|
|
|
- billCode: "",
|
|
|
- plateNumber: "",
|
|
|
- startTime: "",
|
|
|
- endTime: ""
|
|
|
- },
|
|
|
- option:{}
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- handleClick(tab, event) {
|
|
|
- console.log(tab, event);
|
|
|
- this.handleGeocodeRepo(this.carMessage);
|
|
|
- },
|
|
|
- //地图初始化
|
|
|
- initMap() {
|
|
|
- AMapLoader.load({
|
|
|
- key: 'f953210b2d5276ffbf5a2bc01ef80f55', // 申请好的Web端开发者Key，首次调用 load 时必填
|
|
|
- version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|
|
- plugins: [''] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
|
|
- })
|
|
|
- .then(AMap => {
|
|
|
- this.map = new AMap.Map('container', {
|
|
|
- //设置地图容器id
|
|
|
- viewMode: '3D', //是否为3D地图模式
|
|
|
- zoom: 13, //初始化地图级别
|
|
|
- center: [112.976376,28.195318] //初始化地图中心点位置
|
|
|
- })
|
|
|
- })
|
|
|
- .catch(e => {
|
|
|
- console.log(e)
|
|
|
- })
|
|
|
- },
|
|
|
- //渲染图表
|
|
|
- initEcharts() {
|
|
|
- this.option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis'
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: '3%',
|
|
|
- right: '4%',
|
|
|
- bottom: '5%',
|
|
|
- containLabel: true
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ width: document.documentElement.clientWidth - 10,
|
|
|
+ param: this.$route.query,
|
|
|
+ basicData: {
|
|
|
+ billCode: "",
|
|
|
+ plateNumber: "",
|
|
|
+ startTime: "",
|
|
|
+ endTime: ""
|
|
|
},
|
|
|
- toolbox: {},
|
|
|
- xAxis: {
|
|
|
- data: this.xData
|
|
|
+ //标签页
|
|
|
+ activeName: 'first',
|
|
|
+ //地图对象
|
|
|
+ map: null,
|
|
|
+ //图表
|
|
|
+ myChart: {},
|
|
|
+ xData: [], //横坐标
|
|
|
+ temperatureData: [], //温度数据
|
|
|
+ humidityData: [], //湿度数据
|
|
|
+ myChartStyle: {
|
|
|
+ float: "left",
|
|
|
+ width: "100%",
|
|
|
+ height: "400px"
|
|
|
+ }, //图表样式
|
|
|
+ position: [],
|
|
|
+ //运输信息表单数据
|
|
|
+ tableData1: [],
|
|
|
+ //运输信息表单数据准备
|
|
|
+ modelData1: [{
|
|
|
+ maxTemperature: "",
|
|
|
+ avgTemperature: "",
|
|
|
+ minTemperature: "",
|
|
|
+ maxHumidity: "",
|
|
|
+ avgHumidity: "",
|
|
|
+ minHumidity: "",
|
|
|
+ startTime: "",
|
|
|
+ endTime: ""
|
|
|
+ }],
|
|
|
+ //温湿度信息表单数据
|
|
|
+ tableData2: [],
|
|
|
+ resData: [],
|
|
|
+ carMessage: {
|
|
|
+ billCode: "",
|
|
|
+ plateNumber: "",
|
|
|
+ boxCode: [],
|
|
|
+ startTime: "",
|
|
|
+ endTime: ""
|
|
|
},
|
|
|
- legend: { // 图例
|
|
|
- data: ["温度", "湿度/100"],
|
|
|
- // bottom: "0%"
|
|
|
- },
|
|
|
- yAxis: {},
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: "温度",
|
|
|
- data: this.temperatureData,
|
|
|
- type: "line", // 类型设置为折线图
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: "top",
|
|
|
- textStyle: {
|
|
|
- fontSize: 16
|
|
|
- }
|
|
|
- },
|
|
|
- }
|
|
|
- // {
|
|
|
- // name: "湿度/100",
|
|
|
- // data: this.humidityData,
|
|
|
- // type: "line", // 类型设置为折线图
|
|
|
- // label: {
|
|
|
- // show: true,
|
|
|
- // position: "bottom",
|
|
|
- // textStyle: {
|
|
|
- // fontSize: 16
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- ]
|
|
|
+ //图表
|
|
|
+ option: {},
|
|
|
+ //表单各值
|
|
|
+ maxT: 0,
|
|
|
+ maxH: 0,
|
|
|
+ minT: 0,
|
|
|
+ minH: 0,
|
|
|
+ aggT: 0,
|
|
|
+ aggH: 0,
|
|
|
+ avgT: 0,
|
|
|
+ avgH: 0
|
|
|
};
|
|
|
- this.windowSize();
|
|
|
},
|
|
|
- //随着屏幕大小调节图表
|
|
|
- windowSize() {
|
|
|
- this.myChart = echarts.init(document.getElementById("mychart"));
|
|
|
- this.myChart.setOption(this.option);
|
|
|
- window.addEventListener("resize", () => {
|
|
|
- this.myChart.resize();
|
|
|
- });
|
|
|
+ mounted() {
|
|
|
+ //DOM初始化完成进行地图初始化
|
|
|
+ this.initMap();
|
|
|
+ // this.initEcharts();
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ //把传参中的保温箱转换成数组
|
|
|
+ this.carMessage = this.$route.query;
|
|
|
+ this.carMessage.boxCode = this.$route.query.boxCode.split(',');
|
|
|
+ //当结束时间为空时，默认为当前时间
|
|
|
+ if (this.carMessage.endTime == '' || this.carMessage.endTime == null) {
|
|
|
+ this.carMessage.endTime = this.formatDateTime(this.getCurrentTime(), 'yyyy-MM-dd HH:mm:ss');
|
|
|
+ }
|
|
|
+ console.log(this.carMessage, 'this.carMessage')
|
|
|
+ this.handleGeocodeRepo(this.carMessage);
|
|
|
},
|
|
|
- //
|
|
|
- // maploading() {
|
|
|
- // var map;
|
|
|
- // //基本地图加载
|
|
|
- // map = new AMap.Map("container", {
|
|
|
- // resizeEnable: true
|
|
|
- // });
|
|
|
- // },
|
|
|
- handleGeocodeRepo(data) {
|
|
|
- // let data = {
|
|
|
- // billCode: "CS01",
|
|
|
- // plateNumber: "湘A79D2R",
|
|
|
- // startTime: "2023-02-01",
|
|
|
- // endTime: "2023-02-02"
|
|
|
- // }
|
|
|
+ methods: {
|
|
|
+ handleClick(tab, event) {
|
|
|
+ console.log(tab, event);
|
|
|
+ this.handleGeocodeRepo(this.carMessage);
|
|
|
+ },
|
|
|
+ //地图初始化
|
|
|
+ initMap() {
|
|
|
+ AMapLoader.load({
|
|
|
+ key: 'f953210b2d5276ffbf5a2bc01ef80f55', // 申请好的Web端开发者Key，首次调用 load 时必填
|
|
|
+ version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|
|
+ plugins: [''] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
|
|
+ })
|
|
|
+ .then(AMap => {
|
|
|
+ this.map = new AMap.Map('container', {
|
|
|
+ //设置地图容器id
|
|
|
+ viewMode: '3D', //是否为3D地图模式
|
|
|
+ zoom: 13, //初始化地图级别
|
|
|
+ center: [112.976376, 28.195318] //初始化地图中心点位置
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //渲染图表
|
|
|
+ initEcharts() {
|
|
|
+ this.option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '5%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ toolbox: {},
|
|
|
+ xAxis: {
|
|
|
+ data: this.xData
|
|
|
+ },
|
|
|
+ legend: { // 图例
|
|
|
+ data: ["温度", "湿度/100"],
|
|
|
+ // bottom: "0%"
|
|
|
+ },
|
|
|
+ yAxis: {},
|
|
|
+ dataZoom: [ //加上dataZoom可实现缩放
|
|
|
+ {
|
|
|
+ type: 'slider', //x轴
|
|
|
+ xAxisIndex: 0,
|
|
|
|
|
|
- console.log(data, 'data');
|
|
|
- historyApi.queryAddress(data).then(res => {
|
|
|
- console.log(res, 'res-----------------');
|
|
|
- // //X轴时间数据
|
|
|
- // this.xData = res.data.map(item => {return item.hisDate});
|
|
|
- // //温度数据转换
|
|
|
- // this.temperatureData = res.data.map(item => {return item.temperature});
|
|
|
- // //湿度数据转换
|
|
|
- // this.humidityData = res.data.map(item => {return item.humidity});
|
|
|
- let { code, data } = res;
|
|
|
- // let text;
|
|
|
- let count = 0;
|
|
|
- if (code == 200) {
|
|
|
- //定义经纬度不为0的数组[i]为起点
|
|
|
- for (let i = 0; i < data.length; i++) {
|
|
|
- if (data[i].gpsLatitude != 0 && data[i].gpsLongitude != 0) {
|
|
|
- //定义经纬度不为0的数组[j]为终点
|
|
|
- for (let j = data.length - 1; j > i; j--) {
|
|
|
- if (data[j].gpsLatitude != 0 && data[j].gpsLongitude != 0) {
|
|
|
- //绘制初始路径
|
|
|
- var path = [];
|
|
|
- path.push([data[i].gpsLongitude, data[i].gpsLatitude]);
|
|
|
- //起点数据
|
|
|
- this.resData[0] = res.data[i];
|
|
|
- this.resX[0] = res.data[i].hisDate;
|
|
|
- this.resYTemperature[0] = res.data[i].temperature;
|
|
|
- this.resYHumidity[0] = res.data[i].humidity / 100;
|
|
|
- //判断差值
|
|
|
- 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]);
|
|
|
- //终点数据
|
|
|
- this.resData[count] = res.data[j];
|
|
|
- this.resX[count] = res.data[j].hisDate;
|
|
|
- this.resYTemperature[count] = res.data[j].temperature;
|
|
|
- this.resYHumidity[count] = res.data[j].humidity / 100;
|
|
|
- this.xData = res.data.temperature;
|
|
|
- this.tableData2 = this.resData;
|
|
|
- this.xData = this.resX;
|
|
|
- this.temperatureData = this.resYTemperature;
|
|
|
- this.humidityData = this.resYHumidity;
|
|
|
- //计算订单温湿度列表值
|
|
|
- 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();
|
|
|
- //基本地图加载
|
|
|
- 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;
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'inside', //x轴
|
|
|
+ xAxisIndex: 0,
|
|
|
+ zoomOnMouseWheel: 'true', //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [{
|
|
|
+ name: "温度",
|
|
|
+ data: this.temperatureData,
|
|
|
+ type: "line", // 类型设置为折线图
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "top",
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12
|
|
|
}
|
|
|
+ },
|
|
|
+ }
|
|
|
+ // {
|
|
|
+ // name: "湿度/100",
|
|
|
+ // data: this.humidityData,
|
|
|
+ // type: "line", // 类型设置为折线图
|
|
|
+ // label: {
|
|
|
+ // show: true,
|
|
|
+ // position: "bottom",
|
|
|
+ // textStyle: {
|
|
|
+ // fontSize: 16
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.windowSize();
|
|
|
+ },
|
|
|
+ //随着屏幕大小调节图表
|
|
|
+ windowSize() {
|
|
|
+ this.myChart = echarts.init(document.getElementById("mychart"));
|
|
|
+ this.myChart.setOption(this.option);
|
|
|
+ window.addEventListener("resize", () => {
|
|
|
+ this.myChart.resize();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //通过传参查询数据
|
|
|
+ handleGeocodeRepo(data) {
|
|
|
+ historyApi.queryAddress(data).then(res => {
|
|
|
+ console.log(res, 'res-----------------');
|
|
|
+ // let {
|
|
|
+ // code,
|
|
|
+ // data
|
|
|
+ // } = res;
|
|
|
+ if (res.code == 200) {
|
|
|
+ //定义路线数组
|
|
|
+ let path = [];
|
|
|
+ //筛选含经纬度的数组
|
|
|
+ let latitudeLongitude = [];
|
|
|
+ let count = 0;
|
|
|
+ for (let i = 0; i < res.data.length; i++) {
|
|
|
+ if (res.data[i].gpsLatitude != 0 && res.data[i].gpsLongitude != 0) {
|
|
|
+ latitudeLongitude[count] = res.data[i];
|
|
|
+ count++;
|
|
|
}
|
|
|
}
|
|
|
+ //定义整数递增值
|
|
|
+ let increment = Math.trunc(latitudeLongitude.length / 14);
|
|
|
+ for (let i = 0; i < latitudeLongitude.length; i = i + increment) {
|
|
|
+ //绘制初始路径
|
|
|
+ path.push([latitudeLongitude[i].gpsLongitude, latitudeLongitude[i].gpsLatitude]);
|
|
|
+ }
|
|
|
+ console.log(latitudeLongitude, 'latitudeLongitude')
|
|
|
+ console.log(path, 'path')
|
|
|
+ //计算各值
|
|
|
+ this.calculate(res.data);
|
|
|
+ //对订单温湿度列表进行赋值
|
|
|
+ this.assignmentTable1(res.data);
|
|
|
+ // this.assignmentTable2();
|
|
|
+ //对基础数据进行赋值
|
|
|
+ this.basicData.billCode = this.carMessage.billCode;
|
|
|
+ this.basicData.plateNumber = this.carMessage.plateNumber;
|
|
|
+ this.basicData.startTime = this.modelData1[0].startTime;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //计算各值
|
|
|
+ calculate(array) {
|
|
|
+ //定义初始值
|
|
|
+ this.maxT = array[0].temperature;
|
|
|
+ this.maxH = array[0].humidity;
|
|
|
+ this.minT = array[0].temperature;
|
|
|
+ this.minH = array[0].humidity;
|
|
|
+ this.aggT = 0;
|
|
|
+ this.aggH = 0;
|
|
|
+ for (let i = 0; i < array.length; i++) {
|
|
|
+ //对X轴的时间进行赋值
|
|
|
+ this.xData[i] = array[i].hisDate;
|
|
|
+ //对Y轴的温度进行赋值
|
|
|
+ this.temperatureData[i] = array[i].temperature;
|
|
|
+ //温度最大值
|
|
|
+ if (array[i].temperature > this.maxT) {
|
|
|
+ this.maxT = array[i].temperature;
|
|
|
+ }
|
|
|
+ //湿度最大值
|
|
|
+ if (array[i].humidity > this.maxH) {
|
|
|
+ this.maxH = array[i].humidity;
|
|
|
+ }
|
|
|
+ //温度最小值
|
|
|
+ if (array[i].temperature < this.minT) {
|
|
|
+ this.minT = array[i].temperature
|
|
|
+ }
|
|
|
+ //湿度最小值
|
|
|
+ if (array[i].humidity < this.minH) {
|
|
|
+ this.minH = array[i].humidity
|
|
|
}
|
|
|
+ //温湿度合计值
|
|
|
+ this.aggT += parseFloat(array[i].temperature);
|
|
|
+ this.aggH += parseFloat(array[i].humidity);
|
|
|
}
|
|
|
- })
|
|
|
- // queryAddress({})
|
|
|
- },
|
|
|
- //获取当前时间
|
|
|
- getCurrentTime() {
|
|
|
- let date = new Date();
|
|
|
- return date;
|
|
|
- },
|
|
|
- //日期名称格式化
|
|
|
- formatDateTime(date, format) {
|
|
|
- const o = {
|
|
|
- 'M+': date.getMonth() + 1, // 月份
|
|
|
- 'd+': date.getDate(), // 日
|
|
|
- 'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
|
|
|
- 'H+': date.getHours(), // 小时
|
|
|
- 'm+': date.getMinutes(), // 分
|
|
|
- 's+': date.getSeconds(), // 秒
|
|
|
- 'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
|
|
|
- S: date.getMilliseconds(), // 毫秒
|
|
|
- a: date.getHours() < 12 ? '上午' : '下午', // 上午/下午
|
|
|
- A: date.getHours() < 12 ? 'AM' : 'PM', // AM/PM
|
|
|
- };
|
|
|
- if (/(y+)/.test(format)) {
|
|
|
- format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
|
|
|
- }
|
|
|
- for (let k in o) {
|
|
|
- if (new RegExp('(' + k + ')').test(format)) {
|
|
|
- format = format.replace(
|
|
|
- RegExp.$1,
|
|
|
- RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
|
|
|
- );
|
|
|
+ //温湿度平均值
|
|
|
+ this.avgT = this.aggT / array.length;
|
|
|
+ this.avgH = this.aggH / array.length;
|
|
|
+ },
|
|
|
+ //对订单温湿度列表进行赋值
|
|
|
+ assignmentTable1(array) {
|
|
|
+ this.modelData1[0].maxTemperature = this.maxT;
|
|
|
+ this.modelData1[0].maxHumidity = this.maxH;
|
|
|
+ this.modelData1[0].minTemperature = this.minT;
|
|
|
+ this.modelData1[0].minHumidity = this.minH;
|
|
|
+ this.modelData1[0].avgTemperature = this.avgT.toFixed(2);
|
|
|
+ this.modelData1[0].avgHumidity = this.avgH.toFixed(1);
|
|
|
+ this.modelData1[0].startTime = array[0].hisDate;
|
|
|
+ this.modelData1[0].endTime = array[array.length - 1].hisDate;
|
|
|
+ this.tableData1 = this.modelData1;
|
|
|
+ this.tableData2 = array;
|
|
|
+ },
|
|
|
+ // assignmentTable2() {
|
|
|
+
|
|
|
+ // },
|
|
|
+ //获取当前时间
|
|
|
+ getCurrentTime() {
|
|
|
+ let date = new Date();
|
|
|
+ return date;
|
|
|
+ },
|
|
|
+ //日期名称格式化
|
|
|
+ formatDateTime(date, format) {
|
|
|
+ const o = {
|
|
|
+ 'M+': date.getMonth() + 1, // 月份
|
|
|
+ 'd+': date.getDate(), // 日
|
|
|
+ 'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
|
|
|
+ 'H+': date.getHours(), // 小时
|
|
|
+ 'm+': date.getMinutes(), // 分
|
|
|
+ 's+': date.getSeconds(), // 秒
|
|
|
+ 'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
|
|
|
+ S: date.getMilliseconds(), // 毫秒
|
|
|
+ a: date.getHours() < 12 ? '上午' : '下午', // 上午/下午
|
|
|
+ A: date.getHours() < 12 ? 'AM' : 'PM', // AM/PM
|
|
|
+ };
|
|
|
+ if (/(y+)/.test(format)) {
|
|
|
+ format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
|
|
|
}
|
|
|
- }
|
|
|
- return format;
|
|
|
- },
|
|
|
- },
|
|
|
- created() {
|
|
|
- console.log(this.$route.query,'this.$route')
|
|
|
- this.carMessage = this.$route.query;
|
|
|
- //当结束时间为空时，默认为当前时间
|
|
|
- if (this.carMessage.endTime == '' || this.carMessage.endTime == null) {
|
|
|
- this.carMessage.endTime = this.formatDateTime(this.getCurrentTime(), 'yyyy-MM-dd HH:mm:ss');
|
|
|
+ for (let k in o) {
|
|
|
+ if (new RegExp('(' + k + ')').test(format)) {
|
|
|
+ format = format.replace(
|
|
|
+ RegExp.$1,
|
|
|
+ RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return format;
|
|
|
+ },
|
|
|
}
|
|
|
- this.handleGeocodeRepo(this.carMessage);
|
|
|
- console.log(this.carMessage,'this.carMessage')
|
|
|
- }
|
|
|
-};
|
|
|
+ };
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-#container {
|
|
|
- padding: 100px;
|
|
|
- margin: 10px;
|
|
|
- width: 1000;
|
|
|
- height: 800px;
|
|
|
-}
|
|
|
-.OutCss {
|
|
|
-float: right;
|
|
|
-}
|
|
|
-
|
|
|
-#body {
|
|
|
- /* padding: 0px 200px 0px 200px; */
|
|
|
- margin: 0 auto;
|
|
|
+ #container {
|
|
|
+ padding: 100px;
|
|
|
+ margin: 10px;
|
|
|
+ width: 1000;
|
|
|
+ height: 800px;
|
|
|
+ }
|
|
|
|
|
|
-}
|
|
|
-@media print {
|
|
|
- @page {
|
|
|
- margin: 0;
|
|
|
- size: portrait;
|
|
|
- /* size: A4 landscape; size: landscape横向，size: portrait;纵向，如果不设置，则页面有横向和纵向的选择框 */
|
|
|
+ .OutCss {
|
|
|
+ float: right;
|
|
|
}
|
|
|
|
|
|
#body {
|
|
|
- /* margin: 20cm; */
|
|
|
+ /* padding: 0px 200px 0px 200px; */
|
|
|
margin: 0 auto;
|
|
|
- /* 打印时缩放，防止页面溢出 */
|
|
|
- zoom: 0.6;
|
|
|
+
|
|
|
}
|
|
|
-}
|
|
|
+
|
|
|
+ @media print {
|
|
|
+ @page {
|
|
|
+ margin: 0;
|
|
|
+ size: portrait;
|
|
|
+ /* size: A4 landscape; size: landscape横向，size: portrait;纵向，如果不设置，则页面有横向和纵向的选择框 */
|
|
|
+ }
|
|
|
+
|
|
|
+ #body {
|
|
|
+ /* margin: 20cm; */
|
|
|
+ margin: 0 auto;
|
|
|
+ /* 打印时缩放，防止页面溢出 */
|
|
|
+ zoom: 0.6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
</style>
|
DongZ