|
|
@@ -1,217 +1,286 @@
|
|
|
<template>
|
|
|
- <!-- 页面 -->
|
|
|
- <div class="block">
|
|
|
- <br>
|
|
|
- <el-timeline>
|
|
|
- <h1>表单</h1>
|
|
|
- <el-table
|
|
|
- :data="tableData"
|
|
|
- height="250"
|
|
|
- border
|
|
|
- style="width: 97%">
|
|
|
- <el-table-column
|
|
|
- prop="billCode"
|
|
|
- label="单据号"
|
|
|
- width="90">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="measuringPointName"
|
|
|
- label="车牌号"
|
|
|
- width="110">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="temperature"
|
|
|
- label="温度"
|
|
|
- width="90">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="humidity"
|
|
|
- label="湿度"
|
|
|
- width="90">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="hisDate"
|
|
|
- label="时间点"
|
|
|
- width="180">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="address"
|
|
|
- label="地址"
|
|
|
- >
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </el-timeline>
|
|
|
- <!-- <el-timeline>
|
|
|
- <input type="button" value="查询" @click="handleQuery" />
|
|
|
- </el-timeline> -->
|
|
|
+ <!-- 页面 -->
|
|
|
+ <div class="block">
|
|
|
+ <br>
|
|
|
+ <el-timeline>
|
|
|
+ <h1>数据表单</h1>
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ height="250"
|
|
|
+ border
|
|
|
+ style="width: 97%">
|
|
|
+ <el-table-column
|
|
|
+ prop="billCode"
|
|
|
+ label="单据号"
|
|
|
+ width="90">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="measuringPointName"
|
|
|
+ label="车牌号"
|
|
|
+ width="110">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="temperature"
|
|
|
+ label="温度"
|
|
|
+ width="90">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="humidity"
|
|
|
+ label="湿度"
|
|
|
+ width="90">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="hisDate"
|
|
|
+ label="时间点"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="gpsLongitude"
|
|
|
+ label="经度"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="gpsLatitude"
|
|
|
+ label="纬度"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="address"
|
|
|
+ label="地址">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-timeline>
|
|
|
|
|
|
- <el-timeline>
|
|
|
- <br><br><br>
|
|
|
- <h1>温湿度曲线图</h1>
|
|
|
- <div class="echart" id="mychart" :style="myChartStyle"></div>
|
|
|
- <br><br><br>
|
|
|
- <h1>路线</h1>
|
|
|
- </el-timeline>
|
|
|
- <iframe :src = url width="100%" height="1000"> </iframe>
|
|
|
- </div>
|
|
|
+ <el-timeline>
|
|
|
+ <br><br><br>
|
|
|
+ <h1>温湿度折线图</h1>
|
|
|
+ <div class="echart" id="mychart" :style="myChartStyle"></div>
|
|
|
+ <br><br><br>
|
|
|
+ <h1>历史轨迹</h1>
|
|
|
+ </el-timeline>
|
|
|
+ <!-- <el-timeline>
|
|
|
+ <input type="button" value="查询" @click="aaa" />
|
|
|
+ </el-timeline> -->
|
|
|
+ <div id="container"></div>
|
|
|
+ <!-- <iframe :src = url width="100%" height="1000"> </iframe> -->
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import AMapLoader from '@amap/amap-jsapi-loader'
|
|
|
+ window._AMapSecurityConfig = {
|
|
|
+ securityJsCode: '8e23904a0cf421675353f31fd1fc213c'
|
|
|
+ }
|
|
|
import historyApi from '@/api/WMS/historical-route'
|
|
|
import * as echarts from "echarts";
|
|
|
// import {queryAddress,} from '@/api/WMS/historical-route'
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- myChart: {},
|
|
|
- xData: [], //横坐标
|
|
|
- temperatureData: [], //温度数据
|
|
|
- humidityData: [], //湿度数据
|
|
|
- myChartStyle: { float: "left", width: "100%", height: "400px" }, //图表样式
|
|
|
- position: [],
|
|
|
- url: '',
|
|
|
- tableData:[],
|
|
|
- resData:[],
|
|
|
- resX:[],
|
|
|
- resYTemperature:[],
|
|
|
- resYHumidity:[],
|
|
|
- carMessage:{
|
|
|
- billCode: "",
|
|
|
- plateNumber: "",
|
|
|
- startTime: "",
|
|
|
- endTime: ""
|
|
|
- }
|
|
|
- };
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- //渲染
|
|
|
- this.initEcharts();
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //地图对象
|
|
|
+ map: null,
|
|
|
+ myChart: {},
|
|
|
+ xData: [], //横坐标
|
|
|
+ temperatureData: [], //温度数据
|
|
|
+ humidityData: [], //湿度数据
|
|
|
+ myChartStyle: { float: "left", width: "100%", height: "400px" }, //图表样式
|
|
|
+ position: [],
|
|
|
+ // url: '',
|
|
|
+ tableData:[],
|
|
|
+ resData:[],
|
|
|
+ resX:[],
|
|
|
+ resYTemperature:[],
|
|
|
+ resYHumidity:[],
|
|
|
+ carMessage:{
|
|
|
+ billCode: "",
|
|
|
+ plateNumber: "",
|
|
|
+ startTime: "",
|
|
|
+ endTime: ""
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ //渲染图表
|
|
|
+ this.initEcharts();
|
|
|
+ //DOM初始化完成进行地图初始化
|
|
|
+ this.initMap()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ 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)
|
|
|
+ })
|
|
|
},
|
|
|
- methods: {
|
|
|
- //渲染图标
|
|
|
- initEcharts() {
|
|
|
- const option = {
|
|
|
- xAxis: {
|
|
|
- data: this.xData
|
|
|
- },
|
|
|
- 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
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- this.myChart = echarts.init(document.getElementById("mychart"));
|
|
|
- this.myChart.setOption(option);
|
|
|
- //随着屏幕大小调节图表
|
|
|
- window.addEventListener("resize", () => {
|
|
|
- this.myChart.resize();
|
|
|
- });
|
|
|
+ //渲染图表
|
|
|
+ initEcharts() {
|
|
|
+ const option = {
|
|
|
+ xAxis: {
|
|
|
+ data: this.xData
|
|
|
+ },
|
|
|
+ legend: { // 图例
|
|
|
+ data: ["温度", "湿度/100"],
|
|
|
+ bottom: "0%"
|
|
|
},
|
|
|
- //查询按钮
|
|
|
- handleQuery() {
|
|
|
- // window.location.href = ''
|
|
|
- this.handleGeocodeRepo(this.carMessage);
|
|
|
-
|
|
|
+ yAxis: {},
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "温度",
|
|
|
+ data: this.temperatureData,
|
|
|
+ type: "line", // 类型设置为折线图
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "top",
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
- handleGeocodeRepo(data) {
|
|
|
+ {
|
|
|
+ name: "湿度/100",
|
|
|
+ data: this.humidityData,
|
|
|
+ type: "line", // 类型设置为折线图
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "bottom",
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.myChart = echarts.init(document.getElementById("mychart"));
|
|
|
+ this.myChart.setOption(option);
|
|
|
+ //随着屏幕大小调节图表
|
|
|
+ window.addEventListener("resize", () => {
|
|
|
+ this.myChart.resize();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //查询按钮
|
|
|
+ handleQuery() {
|
|
|
+ // window.location.href = ''
|
|
|
+ this.handleGeocodeRepo(this.carMessage);
|
|
|
+ },
|
|
|
+ handleGeocodeRepo(data) {
|
|
|
|
|
|
- // let data = {
|
|
|
- // billCode: "CS01",
|
|
|
- // plateNumber: "湘A79D2R",
|
|
|
- // startTime: "2023-02-01",
|
|
|
- // endTime: "2023-02-02"
|
|
|
- // }
|
|
|
+ // let data = {
|
|
|
+ // billCode: "CS01",
|
|
|
+ // plateNumber: "湘A79D2R",
|
|
|
+ // startTime: "2023-02-01",
|
|
|
+ // endTime: "2023-02-02"
|
|
|
+ // }
|
|
|
|
|
|
- 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) {
|
|
|
- for (let z = i; z < j; z = z + Math.trunc((j - i) / 9)) {
|
|
|
- // console.log("i",i)
|
|
|
- text += `&via[${count}][id][${z}]&via[${count}][lnglat]=${data[z].gpsLongitude},${data[z].gpsLatitude}` ;
|
|
|
- this.resData[count] = res.data[z];
|
|
|
- this.resX[count] = res.data[z].hisDate;
|
|
|
- this.resYTemperature[count] = res.data[z].temperature;
|
|
|
- this.resYHumidity[count] = res.data[z].humidity / 100;
|
|
|
- count++;
|
|
|
- }
|
|
|
- // this.position = data;
|
|
|
- // let url = `//uri.amap.com/navigation?from=${data[0].gpsLongitude},${data[0].gpsLatitude},startpoint&to=${data[data.length-1].gpsLongitude},${data[data.length-1].gpsLatitude},endpoint&via=${data[260].gpsLongitude},${data[260].gpsLatitude},midwaypoint&mode=car&policy=0&src=mypage&coordinate=gaode&callnative=0`
|
|
|
- let url = `https://ditu.amap.com/dir?type=car&policy=1&from[lnglat]=${data[i].gpsLongitude},${data[i].gpsLatitude}&from[name]=startpoint&from[id]=${i}-from&to[lnglat]=${data[j].gpsLongitude},${data[j].gpsLatitude}&to[name]=endpoint&to[id]=${i}-to${text}&src=mypage&callnative=0&platform=pc&innersrc=uriapi`
|
|
|
- console.log(url, 'url---------------------');
|
|
|
- this.url = url;
|
|
|
- this.xData = res.data.temperature;
|
|
|
- this.tableData = this.resData;
|
|
|
- // window.location.href = url;
|
|
|
- // window.open(url, "newWindow", "width=1000,height=1000");
|
|
|
- // window.location.reload();
|
|
|
- this.xData = this.resX;
|
|
|
- this.temperatureData = this.resYTemperature;
|
|
|
- this.humidityData = this.resYHumidity;
|
|
|
- // console.log('this.xData',this.xData);
|
|
|
- // console.log('this.temperatureData',this.temperatureData);
|
|
|
- // console.log('this.humidityData',this.humidityData);
|
|
|
- this.initEcharts();
|
|
|
- console.log(text,'text')
|
|
|
- return;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ 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 map, route;
|
|
|
+ //基本地图加载
|
|
|
+ map = new AMap.Map("container", {
|
|
|
+ resizeEnable: true
|
|
|
+ });
|
|
|
+ //绘制初始路径
|
|
|
+ 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;
|
|
|
+ //定义递增值
|
|
|
+ let increment = Math.trunc((j - i) / 15);
|
|
|
+ for (let z = i + increment; z < j; z = z + increment) {
|
|
|
+ // for (let z = i; z < j; z++) {
|
|
|
+ // console.log("i",i)
|
|
|
+ // text += `&via[${count}][id][${z}]&via[${count}][lnglat]=${data[z].gpsLongitude},${data[z].gpsLatitude}` ;
|
|
|
+ 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;
|
|
|
+ map.plugin("AMap.DragRoute", function() {
|
|
|
+ route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE); //构造拖拽导航类
|
|
|
+ route.search(); //查询导航路径并开启拖拽导航
|
|
|
+ });
|
|
|
+ // this.position = data;
|
|
|
+ // let url = `//uri.amap.com/navigation?from=${data[0].gpsLongitude},${data[0].gpsLatitude},startpoint&to=${data[data.length-1].gpsLongitude},${data[data.length-1].gpsLatitude},endpoint&via=${data[260].gpsLongitude},${data[260].gpsLatitude},midwaypoint&mode=car&policy=0&src=mypage&coordinate=gaode&callnative=0`
|
|
|
+ // let url = `https://ditu.amap.com/dir?type=car&policy=1&from[lnglat]=${data[i].gpsLongitude},${data[i].gpsLatitude}&from[name]=startpoint&from[id]=${i}-from&to[lnglat]=${data[j].gpsLongitude},${data[j].gpsLatitude}&to[name]=endpoint&to[id]=${i}-to${text}&src=mypage&callnative=0&platform=pc&innersrc=uriapi`
|
|
|
+ // console.log(url, 'url---------------------');
|
|
|
+ // this.url = url;
|
|
|
+ this.xData = res.data.temperature;
|
|
|
+ this.tableData = this.resData;
|
|
|
+ // window.location.href = url;
|
|
|
+ // window.open(url, "newWindow", "width=1000,height=1000");
|
|
|
+ // window.location.reload();
|
|
|
+ this.xData = this.resX;
|
|
|
+ this.temperatureData = this.resYTemperature;
|
|
|
+ this.humidityData = this.resYHumidity;
|
|
|
+ // console.log('this.xData',this.xData);
|
|
|
+ // console.log('this.temperatureData',this.temperatureData);
|
|
|
+ // console.log('this.humidityData',this.humidityData);
|
|
|
+ this.initEcharts();
|
|
|
+ // console.log(text,'text')
|
|
|
+ return;
|
|
|
}
|
|
|
- })
|
|
|
- // queryAddress({})
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- },
|
|
|
- created() {
|
|
|
- console.log(this.$route.query,'this.$route')
|
|
|
- this.carMessage = this.$route.query;
|
|
|
- this.handleQuery();
|
|
|
+ })
|
|
|
+ // queryAddress({})
|
|
|
}
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ console.log(this.$route.query,'this.$route')
|
|
|
+ this.carMessage = this.$route.query;
|
|
|
+ this.handleQuery();
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
-
|
|
|
+<style scoped>
|
|
|
+#container {
|
|
|
+ padding: 100px;
|
|
|
+ margin: 10px;
|
|
|
+ width: 1000;
|
|
|
+ height: 800px;
|
|
|
+}
|
|
|
</style>
|
黄梓星