车辆轨迹中增加显示路线中的站点。

src/views/bus/vehicleHistory-list.vue

@@ -37,7 +37,9 @@
                     vid="vehicleHistoryMap"
                     :center="pointPosition"
                     :zoom="15"
-                    style="width:100%;height:400px;"
+                    style="width:100%;height:600px;"
+                    :plugin="plugin"
+                    :events="events"
                 >
                     <!--数据点-->
                     <el-amap-marker :zIndex="1"
@@ -61,6 +63,15 @@
                                     :lineJoin="'round'"
                                     :lineCap="'round'"
                     ></el-amap-polyline>
+                    <!--站点-->
+                    <el-amap-marker
+                    :zIndex="1"
+                    v-for="station in stationList"
+                    :key="station.id"
+                    :position="station.position"
+                    :title="station.title"
+                    :icon="station.icon"
+                    ></el-amap-marker>
                 </el-amap>                
             </div>
             <div class="custom-right">
@@ -70,7 +81,7 @@
                     v-loading="loading"
                     element-loading-text="拼命加载中"
                     stripe
-                    height="400"
+                    height="600"
                     @row-click="rowClick"
                 >
                     <el-table-column label="经纬度" width="200px">
@@ -95,11 +106,15 @@
     </div>
 </template>
 <script>
+import routeInfoApi from "@/api/bus/routeInfo";
 import vehicleApi from "@/api/bus/vehicleInfo";
+import stationIcon from "@/assets/icons/station.svg";
+import greenIcon from "@/assets/icons/green.svg";
+import redIcon from "@/assets/icons/red.svg";
 
 export default {
     name:"busVehicleList",
-    props: ["deviceNo"],
+    props: ["deviceNo","routeId"],
     data(){
         return{
             queryModel: {
@@ -109,13 +124,23 @@ export default {
             tableData: [],
             statusData:[],
             multipleSelection: [],
+            stationList: [],
             pageIndex: 1,
             pageSize: 20,
             totalElements: 0,
             pageSizeList: [20,50,100],
             pointPosition: [112.240222, 30.337053],
             mapPath: [],
-            itemList: []
+            itemList: [],
+            plugin: ["AMap.Scale", "AMap.OverView", "AMap.ToolBar", "AMap.MapType","AMap.RangingTool"],
+            mapRuler: {},
+            ranging: false,
+            events: {
+                init: (map)=>{
+                    const ruler = new window.AMap.RangingTool(map);
+                    this.mapRuler = ruler
+                }
+            }
         }
     },
     methods: {
@@ -206,6 +231,43 @@ export default {
                 date.getFullYear() + "-" + month + "-" + date.getDate() + " 23:59:59";
 
             self.queryModel.timeRange = [startTime, endTime];
+        },
+        loadRouteMap(routeId) {            
+            //读取当前路线的站点
+            routeInfoApi.edit(routeId).then((response) => {
+                var jsonData = response.data;
+                var model = jsonData.data;
+
+                var _stationList = model.stationList;
+
+                this.stationList = [];
+
+                _stationList.forEach((item) => {
+                    if (item.location != null && item.location.length > 0) {
+                        var station = {
+                            id: item.id,
+                            title: item.name,
+                            position: item.location.split(","),
+                            icon: stationIcon
+                        };
+
+                        this.stationList.push(station);
+
+                        if(item.stationSubInfoList!=null){
+                            item.stationSubInfoList.forEach(subItem=>{
+                                var startToEnd = subItem.startStationId == this.stationList[0].id;
+
+                                this.stationList.push({
+                                    id: subItem.id,
+                                    title: item.name + "入口" + (startToEnd ? "(起)" : "(终)"),
+                                    position: [subItem.longitude,subItem.latitude],
+                                    icon: startToEnd ? greenIcon : redIcon
+                                });
+                            });
+                        }
+                    }
+                });
+            });
         }
     },
     components: {
@@ -213,6 +275,7 @@ export default {
     },
     mounted() {
         //this.changePage(1);
+        this.loadRouteMap(this.routeId);
     },
     created() {
 

src/views/bus/vehicleInfo-list.vue

@@ -277,13 +277,15 @@
         title="车辆轨迹"
         :modal-append-to-body="true"
         :append-to-body="true"
-        width="1000px"
+        width="1100px"
+        top="5vh"
         style="text-align:left;"
         :close-on-click-modal="false"
     >
         <vehicle-history-list
             ref="vehicleHistoryList"
             :deviceNo="selectedRow.gpsDeviceNo"
+            :routeId="selectedRow.routeId"
         ></vehicle-history-list>
     </el-dialog>
   </div>