|
@@ -136,7 +136,7 @@
|
|
|
startTime: "",
|
|
|
endTime: ""
|
|
|
},
|
|
|
- //图表
|
|
|
+ //线
|
|
|
option: {},
|
|
|
//表单各值
|
|
|
maxT: 0,
|
|
@@ -153,6 +153,7 @@
|
|
|
//DOM初始化完成进行地图初始化
|
|
|
this.initMap();
|
|
|
// this.initEcharts();
|
|
|
+ // this.windowSize();
|
|
|
},
|
|
|
created() {
|
|
|
//把传参中的保温箱转换成数组
|
|
@@ -170,6 +171,87 @@
|
|
|
console.log(tab, event);
|
|
|
this.handleGeocodeRepo(this.carMessage);
|
|
|
},
|
|
|
+ //通过传参查询数据
|
|
|
+ handleGeocodeRepo(data) {
|
|
|
+ historyApi.queryAddress(data).then(res => {
|
|
|
+ console.log(res, '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];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //定义整数递增值,并且绘制初始路径
|
|
|
+ if (latitudeLongitude.length >= 14) {
|
|
|
+ this.increment = Math.trunc(latitudeLongitude.length / 14);
|
|
|
+ for (let i = 0; i < latitudeLongitude.length; i = i + this.increment) {
|
|
|
+ path.push([latitudeLongitude[i].gpsLongitude, latitudeLongitude[i].gpsLatitude]);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ for (let i = 0; i < latitudeLongitude.length; i++) {
|
|
|
+ path.push([latitudeLongitude[i].gpsLongitude, latitudeLongitude[i].gpsLatitude]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(latitudeLongitude, 'latitudeLongitude')
|
|
|
+ //车辆温度数组
|
|
|
+ for (let i = 0; i < latitudeLongitude.length; i++) {
|
|
|
+ this.temperatureData.push(latitudeLongitude[i].temperature);
|
|
|
+ }
|
|
|
+ // console.log(path, 'path')
|
|
|
+ // console.log(this.temperatureData, 'temperatureData')
|
|
|
+ this.initEcharts();
|
|
|
+ //筛选保温箱的数组
|
|
|
+ console.log(this.carMessage.boxCode, 'this.carMessage.boxCode')
|
|
|
+ for (let i = 0; i < this.carMessage.boxCode.length; i++) {
|
|
|
+ let boxForm = {
|
|
|
+ name: this.carMessage.boxCode[i],
|
|
|
+ data: [],
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "top",
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ // count = 0;
|
|
|
+ for (let j = 0; j < res.data.length; j++) {
|
|
|
+ if (boxForm.name == res.data[j].measuringPointName) {
|
|
|
+ boxForm.data[j] = res.data[j].temperature;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.option.series.push(boxForm);
|
|
|
+ this.option.legend.data.push(boxForm.name);
|
|
|
+ }
|
|
|
+ //计算各值
|
|
|
+ this.calculate(res.data);
|
|
|
+ //对订单温湿度列表进行赋值
|
|
|
+ this.assignmentTable1(res.data);
|
|
|
+ //对基础数据进行赋值
|
|
|
+ this.basicData.billCode = this.carMessage.billCode;
|
|
|
+ this.basicData.plateNumber = this.carMessage.plateNumber;
|
|
|
+ this.basicData.startTime = res.data[0].hisDate;
|
|
|
+ this.basicData.endTime = res.data[res.data.length - 1].hisDate;
|
|
|
+ //基本地图加载
|
|
|
+ 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(); //查询导航路径并开启拖拽导航
|
|
|
+ });
|
|
|
+ this.windowSize();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
//地图初始化
|
|
|
initMap() {
|
|
|
AMapLoader.load({
|
|
@@ -189,7 +271,7 @@
|
|
|
console.log(e)
|
|
|
})
|
|
|
},
|
|
|
- //渲染图表
|
|
|
+ //图表属性赋值
|
|
|
initEcharts() {
|
|
|
this.option = {
|
|
|
tooltip: {
|
|
@@ -206,7 +288,7 @@
|
|
|
data: this.xData
|
|
|
},
|
|
|
legend: { // 图例
|
|
|
- data: ["温度", "湿度/100"],
|
|
|
+ data: ["车辆温度"],
|
|
|
// bottom: "0%"
|
|
|
},
|
|
|
yAxis: {},
|
|
@@ -223,34 +305,21 @@
|
|
|
},
|
|
|
],
|
|
|
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
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- ]
|
|
|
+ name: "车辆温度",
|
|
|
+ data: this.temperatureData,
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "top",
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }],
|
|
|
};
|
|
|
- this.windowSize();
|
|
|
},
|
|
|
- //随着屏幕大小调节图表
|
|
|
+ //渲染图表
|
|
|
windowSize() {
|
|
|
this.myChart = echarts.init(document.getElementById("mychart"));
|
|
|
this.myChart.setOption(this.option);
|
|
@@ -258,59 +327,6 @@
|
|
|
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) {
|
|
|
//定义初始值
|
|
@@ -324,7 +340,7 @@
|
|
|
//对X轴的时间进行赋值
|
|
|
this.xData[i] = array[i].hisDate;
|
|
|
//对Y轴的温度进行赋值
|
|
|
- this.temperatureData[i] = array[i].temperature;
|
|
|
+ // this.temperatureData[i] = array[i].temperature;
|
|
|
//温度最大值
|
|
|
if (array[i].temperature > this.maxT) {
|
|
|
this.maxT = array[i].temperature;
|
|
@@ -362,9 +378,6 @@
|
|
|
this.tableData1 = this.modelData1;
|
|
|
this.tableData2 = array;
|
|
|
},
|
|
|
- // assignmentTable2() {
|
|
|
-
|
|
|
- // },
|
|
|
//获取当前时间
|
|
|
getCurrentTime() {
|
|
|
let date = new Date();
|