提交

src/api/WMS/historical-route.js

@@ -0,0 +1,16 @@
+// 历史轨迹
+import request from "@/utils/request";
+
+// 查询地址
+const queryAddress = (data) => {
+    return request({
+      url: `/geocode/repo`,
+      method: "post",
+      data,
+    });
+  }
+
+  export default {
+    queryAddress,
+    
+  }

src/views/WMS/historical-route/index.vue

@@ -1,34 +1,196 @@
 <template>
-<!-- 页面 -->
-<div>
-<div>
-    111
-</div>
-<p>123</p>
-</div>
+    <!-- 页面 -->
+    <div class="block">
+        <br>
+        <el-timeline>
+            <h1>表单</h1>
+            <el-table
+            :data="tableData"
+            height="250"
+            border
+            style="width: 95%">
+            <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{
-            // 定义变量
-            a:'1',
-        }
+    data() {
+        return {
+            myChart: {},
+            xData: [], //横坐标
+            temperatureData: [], //温度数据
+            humidityData: [], //湿度数据
+            myChartStyle: { float: "left", width: "100%", height: "400px" }, //图表样式
+            position: [],
+            url: '',
+            tableData:[],
+            resData:[],
+            resX:[],
+            resYTemperature:[],
+            resYHumidity:[]
+        };
     },
-    methods:{
-        // 方法
-        handleSubmit(){
-            console.log(this.a);
-        }
+    mounted() {
+        //渲染
+        this.initEcharts();
     },
-    created(){
-// 页面创建完成钩子函数
-this.handleSubmit();
+    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();
+           
+        },
+        handleGeocodeRepo() {
+
+            let data = {
+                billCode: "CS01",
+                plateNumber: "湘A79D2R",
+                startTime: "2023-02-06",
+                endTime: "2023-02-08"
+            }
+
+            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) {
+                    this.xData = res.data.temperature;
+                    for (let i = 1; i < data.length; i = i + Math.trunc((data.length / 9))) {
+                        // console.log("i",i)
+                        text += `&via[${count}][lnglat]=${data[i].gpsLongitude},${data[i].gpsLatitude}` ;
+                        this.resData[i] = res.data[i];
+                        this.resX[count] = res.data[i].hisDate;
+                        this.resYTemperature[count] = res.data[i].temperature;
+                        this.resYHumidity[count] = res.data[i].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[1].gpsLongitude},${data[1].gpsLatitude}&from[name]=startpoint&from[id]=0-from&to[lnglat]=${data[data.length-1].gpsLongitude},${data[data.length-1].gpsLatitude}&to[name]=endpoint&to[id]=1-to&${text}&src=mypage&callnative=0&innersrc=uriapi`
+                    console.log(url, 'url---------------------');
+                    this.url = url;
+                    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();
+                }
+            })
+
+            // queryAddress({})
+        }
     },
-}
+    created() {
+        this.handleQuery();
+    }
+};
 </script>
 
 <style>