|
|
@@ -0,0 +1,217 @@
|
|
|
+<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> -->
|
|
|
+
|
|
|
+ <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>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+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();
|
|
|
+ },
|
|
|
+ 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();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //查询按钮
|
|
|
+ handleQuery() {
|
|
|
+ // window.location.href = ''
|
|
|
+ this.handleGeocodeRepo(this.carMessage);
|
|
|
+
|
|
|
+ },
|
|
|
+ handleGeocodeRepo(data) {
|
|
|
+
|
|
|
+ // 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) / 2)) {
|
|
|
+ // 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // queryAddress({})
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ console.log(this.$route.query,'this.$route')
|
|
|
+ this.carMessage = this.$route.query;
|
|
|
+ this.handleQuery();
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+
|
|
|
+</style>
|
002390