车辆管理增加历史轨迹

src/api/bus/vehicleInfo.js

@@ -42,7 +42,11 @@ function batchRemove(idList) {
   });
 }
 
+function gpsHistoryList(formData){
+  return request.post(constant.serverUrl + "/bus/vehicleInfo/gpsHistoryList", formData);
+}
+
 
 export default {
-  create, edit, add, update, remove, batchRemove, pageList
+  create, edit, add, update, remove, batchRemove, pageList,gpsHistoryList
 }

src/views/bus/vehicleHistory-list.vue

@@ -0,0 +1,248 @@
+<template>
+    <div>
+        <el-form ref="queryForm" :model="queryModel" inline class="demo-form-inline">
+            <el-form-item label="查询时间段" prop="timeRange">
+                <el-date-picker
+                    type="datetimerange"
+                    v-model="queryModel.timeRange"
+                    start-placeholder="开始时间"
+                    end-placeholder="结束时间"
+                    placeholder="选择时间范围"
+                    format='yyyy-MM-dd HH:mm:ss'
+                    value-format="yyyy-MM-dd HH:mm:ss"           
+                    >
+                </el-date-picker>
+            </el-form-item>
+            <el-form-item>
+                <el-button
+                type="primary"
+                size="mini"
+                icon="ios-search"
+                @click="changePage(1)"
+                :loading="loading"
+                >查询</el-button>&nbsp;
+                <el-button
+                    type="info"
+                    size="mini"
+                    style="margin-left: 8px"
+                    @click="handleReset('queryForm')"
+                >重置</el-button>
+            </el-form-item>
+        </el-form>
+        <el-divider></el-divider>
+        <div class="custom-layout">
+            <div class="custom-center">                
+                <el-amap
+                    ref="vehicleHistoryMap"
+                    vid="vehicleHistoryMap"
+                    :center="pointPosition"
+                    :zoom="15"
+                    style="width:100%;height:400px;"
+                >
+                    <!--数据点-->
+                    <el-amap-marker :zIndex="1"
+                        v-for="(item,index) in itemList"
+                        :key="index"
+                        :position="item.position"
+                        :title="item.title"
+                        >
+                    </el-amap-marker>
+                    <!--轨迹-->
+                    <el-amap-polyline :path="mapPath"
+                                    :zIndex="2"
+                                    :isOutline="true"
+                                    :outlineColor="'#ffeeff'"
+                                    :borderWeight="3"
+                                    :strokeColor="'#3366FF'"
+                                    :strokeOpacity="1"
+                                    :strokeWeight="6"
+                                    :strokeStyle="'solid'"
+                                    :strokeDasharray="[10, 5]"
+                                    :lineJoin="'round'"
+                                    :lineCap="'round'"
+                    ></el-amap-polyline>
+                </el-amap>                
+            </div>
+            <div class="custom-right">
+                <el-table
+                    ref="formTable"
+                    :data="tableData"
+                    v-loading="loading"
+                    element-loading-text="拼命加载中"
+                    stripe
+                    height="400"
+                    @row-click="rowClick"
+                >
+                    <el-table-column label="经纬度" width="200px">
+                        <template slot-scope="{row}">
+                            <span style="cursor:pointer;">{{row.longitude}},{{row.latitude}}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="createTime" width="160px" label="记录时间"></el-table-column>
+                </el-table>
+            </div>
+        </div>
+        <div style="text-align:right;">
+            <el-pagination
+                :current-page.sync="pageIndex"
+                :total="totalElements"
+                :page-sizes="pageSizeList"
+                @current-change="changePage"
+                @size-change="pageSizeChange"
+                layout="total, sizes, prev, pager, next"
+            ></el-pagination>
+        </div>
+    </div>
+</template>
+<script>
+import vehicleApi from "@/api/bus/vehicleInfo";
+
+export default {
+    name:"busVehicleList",
+    props: ["deviceNo"],
+    data(){
+        return{
+            queryModel: {
+                timeRange: null
+            },
+            loading: false,
+            tableData: [],
+            statusData:[],
+            multipleSelection: [],
+            pageIndex: 1,
+            pageSize: 20,
+            totalElements: 0,
+            pageSizeList: [20,50,100],
+            pointPosition: [112.240222, 30.337053],
+            mapPath: [],
+            itemList: []
+        }
+    },
+    methods: {
+        handleReset(name) {
+            this.$refs[name].resetFields();
+        },
+        changePage(pageIndex) {
+            this.loading = true;
+            var formData = new FormData();
+
+            formData.append("pageIndex", this.pageIndex);
+            formData.append("pageSize", this.pageSize);
+            formData.append("deviceNo", this.deviceNo);
+
+            if(this.queryModel.timeRange!=null){
+                formData.append("startTime", this.queryModel.timeRange[0]);
+                formData.append("endTime", this.queryModel.timeRange[1]);
+            }
+
+            vehicleApi.gpsHistoryList(formData).then((response)=>{
+                this.loading = false;
+                var jsonData = response.data;
+
+                this.tableData = jsonData.data.data;
+                this.totalElements = jsonData.data.recordsTotal;
+                this.mapPath = [];
+
+                if(this.tableData.length>0){
+                    var lngSum = this.tableData.reduce((acc,cur)=>{
+                        return acc + parseFloat(cur.longitude);
+                    },0);
+                    
+                    var lngAvg = lngSum / this.tableData.length;
+
+                    console.log(lngAvg);
+
+                    this.tableData.forEach(item=>{
+                        var pos = [parseFloat(item.longitude),parseFloat(item.latitude)];
+                        
+                        //如果有数据点精度与平均值偏差0.5，则不显示该点
+                        if(Math.abs(lngAvg - pos[0])<0.5){
+                            this.mapPath.push(pos);
+                        }
+                    });
+
+                    var firstRow = this.tableData[0];
+                    this.rowClick(firstRow);
+                }
+
+                this.pageIndex = pageIndex;
+            })
+        },
+        pageSizeChange(pageSize) {
+            this.pageSize = pageSize;
+            this.changePage(1);
+        },
+        rowClick(row, column, event) {
+            this.itemList = [];
+            
+            this.pointPosition = [parseFloat(row.longitude),parseFloat(row.latitude)];
+
+            this.itemList.push({
+                position: [row.longitude,row.latitude],
+                title: row.createTime
+            });
+        },
+        //初始化日期
+        getCurrentMonthFirst() {
+            var self = this;
+            var date = new Date();
+            var startDate = new Date();
+            var month = parseInt(date.getMonth() + 1);
+
+            //当前测温记录
+
+            var startMonth = month;
+            // if (startDate.getDate() < 7) {
+            //   startMonth = startDate.getMonth();
+            //   startDate.setDate(0);
+            // }
+
+            // startDate = startDate.getDate() - 7;
+
+            var startTime =
+                date.getFullYear() + "-" + startMonth + "-" + startDate.getDate() + " 00:00:00";
+
+            var endTime =
+                date.getFullYear() + "-" + month + "-" + date.getDate() + " 23:59:59";
+
+            self.queryModel.timeRange = [startTime, endTime];
+        }
+    },
+    components: {
+
+    },
+    mounted() {
+        //this.changePage(1);
+    },
+    created() {
+
+    }
+}
+</script>
+<style lang="scss" scoped>
+.el-divider {
+  margin: 5px 0;
+}
+
+.route-list{
+    text-align: left;
+}
+
+.demo-form-inline {
+  margin-left: 10px;
+  text-align: left;
+}
+
+.custom-layout{
+    display: flex;
+    flex-direction: row;
+}
+
+.custom-center{
+    flex:1;
+}
+
+.custom-right{
+    width: 400px;
+}
+</style>

src/views/bus/vehicleInfo-list.vue

@@ -166,7 +166,7 @@
         label="最后所在位置"
         width="150"
       ></el-table-column>
-      <el-table-column label="操作" fixed="right" width="220">
+      <el-table-column label="操作" fixed="right" width="280">
         <template slot-scope="{ row }">
           <el-link
                   type="primary"
@@ -191,6 +191,13 @@
                 >
               </el-popover>
               -
+                <el-link
+                  type="primary"
+                  :underline="false"
+                  @click="showHistoryList(row)"
+                  >历史轨迹</el-link
+                >
+              -
             <el-link
                   type="danger"
                   :underline="false"
@@ -214,6 +221,7 @@
       :title="modalTitle"
       @close="onDetailModalClose"
     ></vehicleInfo-detail>
+    
     <el-dialog
       title="导入"
       :visible.sync="batchImportVisible"
@@ -264,6 +272,20 @@
       </div>
     </el-dialog>
     <!--批量导入E-->
+    <el-dialog
+        :visible.sync="showHistoryDialog"
+        title="车辆轨迹"
+        :modal-append-to-body="true"
+        :append-to-body="true"
+        width="1000px"
+        style="text-align:left;"
+        :close-on-click-modal="false"
+    >
+        <vehicle-history-list
+            ref="vehicleHistoryList"
+            :deviceNo="selectedRow.gpsDeviceNo"
+        ></vehicle-history-list>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -272,6 +294,7 @@ import vehicleInfoDetail from "./vehicleInfo-detail";
 import vehicleInfoApi from "@/api/bus/vehicleInfo";
 import SelectTree from "@/components/SelectTree";
 import companyInfoApi from "@/api/bus/companyInfo";
+import VehicleHistoryList from './vehicleHistory-list';
 
 import QRCode from "qrcodejs2";
 
@@ -326,7 +349,13 @@ export default {
       },
       xlsLoading: false,
       sceneData: [],
-      typeData:[]
+      typeData:[],
+      showHistoryDialog: false,
+      selectedRow: {
+          licensePlateNumber : "",
+          deviceNo: ""
+      },
+      
     };
   },
   created() {
@@ -382,6 +411,15 @@ export default {
           // self.$message.error(error + "");
         });
     },
+    showHistoryList(row) {
+        this.selectedRow = row;
+        this.showHistoryDialog = true;
+        
+        this.$nextTick(()=>{
+            this.$refs.vehicleHistoryList.getCurrentMonthFirst();
+            this.$refs.vehicleHistoryList.changePage(1);
+        });            
+    },
     pageSizeChange(pageSize) {
       this.pageSize = pageSize;
     },
@@ -551,6 +589,7 @@ export default {
   components: {
     "vehicleInfo-detail": vehicleInfoDetail,
     "el-select-tree": SelectTree,
+    "vehicle-history-list" : VehicleHistoryList
   },
 };
 </script>