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

<template>
  <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" stretch="true">
    <el-tab-pane label="温湿度信息" name="first">
      <div id="body" :style="{width: width - 300 + 'px'}">
        <!-- 单据信息 -->
        <el-timeline>
          <el-timeline>
            <el-descriptions>
              <el-descriptions-item label="订单编号">{{this.basicData.billCode}}</el-descriptions-item>
              <el-descriptions-item label="车牌号">{{this.basicData.plateNumber}}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions>
              <el-descriptions-item label="开始时间">{{this.basicData.startTime}}</el-descriptions-item>
              <el-descriptions-item label="结束时间">{{this.basicData.endTime}}</el-descriptions-item>
            </el-descriptions>
          </el-timeline>
        </el-timeline>
        <el-timeline>
         	<!--导出按钮-->
           <el-button class="OutCss" v-print="'#body'" type="primary">导出</el-button>  
          <!-- 数据表 -->
          <h2>订单温湿度列表</h2>
          <el-table
            :data="tableData2"
            stripe
            border
            style="width: 97%">
            <el-table-column
            prop="temperature"
            label="温度"
            align="center"
            min-width="300">
            </el-table-column>
            <el-table-column
            prop="hisDate"
            label="时间点"
            align="center"
            min-width="400">
            </el-table-column>
            <el-table-column
            prop="address"
            label="地址"
            min-width="500">
            </el-table-column>
          </el-table>
        </el-timeline>
      </div>
      <br>
      <div id="body" :style="{width: width - 300 + 'px'}">
        <el-timeline>
          <h2>订单温度折线图</h2>
          <div class="echart" id="mychart" :style="myChartStyle"></div>
        </el-timeline>
      </div>
    </el-tab-pane>
    <el-tab-pane label="运输信息" name="second">
      <div id="body" :style="{width: width - 300 + 'px'}">
        <!-- 单据信息 -->
        <el-timeline>
          <el-timeline>
            <el-descriptions>
              <el-descriptions-item label="订单编号">{{this.basicData.billCode}}</el-descriptions-item>
              <el-descriptions-item label="车牌号">{{this.basicData.plateNumber}}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions>
              <el-descriptions-item label="开始时间">{{this.basicData.startTime}}</el-descriptions-item>
              <el-descriptions-item label="结束时间">{{this.basicData.endTime}}</el-descriptions-item>
            </el-descriptions>
          </el-timeline>
        </el-timeline>
      
        <!-- 地图 -->
        <div id="container"></div>

        <!-- 订单温湿度列表 -->
        <el-timeline>
          <br>
          <h2>订单温湿度列表</h2>
          <el-table
          :data="tableData1"
          height="200"
          style="width: 97%">
          <el-table-column
          prop="maxTemperature"
          label="温度最大值"
          align="center"
          min-width="100">
          </el-table-column>
          <el-table-column
          prop="avgTemperature"
          label="温度平均值"
          align="center"
          min-width="100">
          </el-table-column>
          <el-table-column
          prop="minTemperature"
          label="温度最小值"
          align="center"
          min-width="100">
          </el-table-column>
          <el-table-column
          prop="maxHumidity"
          label="湿度最大值"
          align="center"
          min-width="100">
          </el-table-column>
          <el-table-column
          prop="avgHumidity"
          label="湿度平均值"
          align="center"
          min-width="100">
          </el-table-column>
          <el-table-column
          prop="minHumidity"
          label="湿度最小值"
          align="center"
          min-width="100">
          </el-table-column>
          <el-table-column
          prop="startTime"
          label="开始时间"
          align="center"
          min-width="250">
          </el-table-column>
          <el-table-column
          prop="endTime"
          align="center"
          label="结束时间"
          min-width="250">
          </el-table-column>
          </el-table>
        </el-timeline>
     </div>
    </el-tab-pane>

  </el-tabs>

</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";

export default {
  data() {
    return {
      width: document.documentElement.clientWidth - 10,
      param: this.$route.query,
      basicData:{
        billCode: "",
        plateNumber: "",
        startTime: "",
        endTime: ""
      },
      //标签页
      activeName: 'first',
      //地图对象
      map: null,
      //图表
      myChart: {},
      xData: [], //横坐标
      temperatureData: [], //温度数据
      humidityData: [], //湿度数据
      myChartStyle: { float: "left", width: "100%", height: "400px" }, //图表样式
      position: [],
      //运输信息表单数据
      tableData1:[],
      //运输信息表单数据准备
      modelData1:[{
        maxTemperature:"",
        avgTemperature:"",
        minTemperature:"",
        maxHumidity:"",
        avgHumidity:"",
        minHumidity:"",
        startTime:"",
        endTime:""
      }],
      tableData2:[],
      resData:[],
      resX:[],
      resYTemperature:[],
      resYHumidity:[],
      carMessage:{
        billCode: "",
        plateNumber: "",
        startTime: "",
        endTime: ""
      },
      option:{}
    };
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
    // this.initEcharts();
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      this.handleGeocodeRepo(this.carMessage);
    },
    //地图初始化
    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() {
      this.option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '5%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        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.windowSize();
    },
     //随着屏幕大小调节图表
    windowSize() {
      this.myChart = echarts.init(document.getElementById("mychart"));
      this.myChart.setOption(this.option);
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },

    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) / 14);
                  //途径点数据
                  for (let z = i + increment; z < j; z = z + increment) {
                  // for (let z = i; z < j; z++) {
                    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.xData = res.data.temperature;
                  this.tableData2 = this.resData;
                  this.xData = this.resX;
                  this.temperatureData = this.resYTemperature;
                  this.humidityData = this.resYHumidity;
                  //计算订单温湿度列表值
                  let maxT = data[i].temperature;
                  let maxH = data[i].humidity;
                  let minT = data[i].temperature;
                  let minH = data[i].humidity;
                  let aggT = 0;
                  let aggH = 0;
                  // let test1 = 0;
                  // let test2 = 0;
                  for (let x = i; x < j; x++) {
                    //温度最大值
                    if (res.data[x].temperature > maxT) {
                      maxT = res.data[x].temperature;
                    }
                    //湿度最大值
                    if (res.data[x].humidity > maxH) {
                      maxH = res.data[x].humidity;
                    }
                    //温度最小值
                    if (res.data[x].temperature < minT) {
                      minT = res.data[x].temperature
                    }
                    //湿度最小值
                    if (res.data[x].humidity < minH) {
                      minH = res.data[x].humidity
                    }
                    // test1 += res.data[x].temperature + ", "
                    // test2 += res.data[x].humidity + ", "
                    aggT += parseFloat(res.data[x].temperature);
                    aggH += parseFloat(res.data[x].humidity);
                  }
                  // console.log(aggT, 'aggt');
                  // console.log(aggH, 'aggh');
                  // console.log(test1, 'test');
                  // console.log(test2, 'test2');
                  // console.log(i, 'i')
                  // console.log(j, 'j')
                  let avgT = aggT / (j - i);
                  let avgH = aggH / (j - i);
                  //对订单温湿度列表进行赋值
                  this.modelData1[0].maxTemperature = maxT;
                  this.modelData1[0].maxHumidity = maxH;
                  this.modelData1[0].minTemperature = minT;
                  this.modelData1[0].minHumidity = minH;
                  this.modelData1[0].avgTemperature = avgT.toFixed(2);
                  this.modelData1[0].avgHumidity = avgH.toFixed(1);
                  this.modelData1[0].startTime = res.data[i].hisDate;
                  this.modelData1[0].endTime = res.data[j].hisDate;
                  this.tableData1 = this.modelData1;
                  //对基础数据进行赋值
                  this.basicData.billCode = this.resData[i].billCode;
                  this.basicData.plateNumber = this.resData[i].measuringPointName;
                  this.basicData.startTime = this.modelData1[0].startTime
                  this.basicData.endTime = this.modelData1[0].endTime
                  //渲染图表
                  this.initEcharts();
                  return;
                }
              }
            }
          }
        }
      })
      // queryAddress({})
    }
  },
  created() {
    console.log(this.$route.query,'this.$route')
    this.carMessage = this.$route.query;
    this.handleGeocodeRepo(this.carMessage);
  }
};
</script>

<style scoped>
#container {
  padding: 100px;
  margin: 10px;
  width: 1000;
  height: 800px;
}
.Button {
padding-top:3px; 
padding-left:1000px;
padding-right:3px;
padding-bottom:100px;
}
.OutCss {
float: right; 
}

#body {
  /* padding: 0px 200px 0px 200px; */
  margin: 0 auto;

}
@media print {
  @page {
    margin: 0;
    size: portrait;
    /* size: A4 landscape; size: landscape横向，size: portrait;纵向，如果不设置，则页面有横向和纵向的选择框 */
  }

  #body {
    /* margin: 20cm; */
    margin: 0 auto;
    /* 打印时缩放，防止页面溢出 */
    zoom: 0.6;
  }
}
</style>