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

<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="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>
    <!-- <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 {
      //地图对象
      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)
      })
    },
    //渲染图表
    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) {
                  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();
  }
};
</script>

<style scoped>
#container {
  padding: 100px;
  margin: 10px;
  width: 1000;
  height: 800px;
}
</style>