增加班次地图查询。

.env.development

@@ -1,7 +1,7 @@
 OUT_PUT_DIR=dist/smart-bus-portal
 
-VUE_APP_BACKEND_URL=http://127.0.0.1:8086/smart-bus-server
-#VUE_APP_BACKEND_URL=https://ykt-test.xiaoxinda.com/smart-bus-server
+#VUE_APP_BACKEND_URL=http://127.0.0.1:8086/smart-bus-server
+VUE_APP_BACKEND_URL=https://ykt-test.xiaoxinda.com/smart-bus-server
 #VUE_APP_BACKEND_URL=http://qylhhapi.xiaoxinda.com/enterprise-server
 
 #手机企业版

src/assets/icons/bus.svg

@@ -0,0 +1 @@
+<svg t="1619592316797" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2378" width="32" height="32"><path d="M959.992 703.988H64.008c-35.282 0-64-28.688-64-64V277.324c0-35.282 28.718-63.998 64-63.998h895.984c35.31 0 63.998 28.716 63.998 63.998v362.664c0 35.312-28.688 64-63.998 64z" fill="#FFCE54" p-id="2379"></path><path d="M0.01 639.988c0 35.312 28.718 64 64 64h95.826v-85.312H0.01v21.312z" fill="#E6E9ED" p-id="2380"></path><path d="M1023.99 298.668H106.68c-11.782 0-21.344 9.546-21.344 21.328v170.668c0 11.782 9.562 21.312 21.344 21.312h917.31V298.668z" fill="#4FC2E9" p-id="2381"></path><path d="M192.006 597.302c-58.812 0-106.67 47.874-106.67 106.686 0 58.81 47.858 106.686 106.67 106.686s106.67-47.876 106.67-106.686c0-58.812-47.858-106.686-106.67-106.686zM789.306 597.302c-58.81 0-106.624 47.874-106.624 106.686 0 58.81 47.812 106.686 106.624 106.686 58.842 0 106.686-47.876 106.686-106.686 0-58.812-47.844-106.686-106.686-106.686z" fill="#434A54" p-id="2382"></path><path d="M207.1 688.926c8.328 8.312 8.328 21.812 0 30.124-8.344 8.376-21.844 8.376-30.17 0-8.344-8.312-8.344-21.812 0-30.124 8.326-8.376 21.826-8.376 30.17 0z" fill="#F5F7FA" p-id="2383"></path><path d="M362.674 512.07h256.01v191.918H362.674z" fill="#E6E9ED" p-id="2384"></path><path d="M804.432 688.926c8.312 8.312 8.312 21.812 0 30.124-8.344 8.376-21.874 8.376-30.186 0-8.312-8.312-8.312-21.812 0-30.124 8.312-8.376 21.842-8.376 30.186 0z" fill="#F5F7FA" p-id="2385"></path><path d="M480 298.668h21.328v405.32H480z" fill="#E6E9ED" p-id="2386"></path><path d="M190.616 512.07l-0.658-213.402 42.672-0.126 0.656 213.372zM768.308 512.07l-0.624-213.402 42.622-0.126 0.688 213.372z" fill="#3BAFDA" p-id="2387"></path><path d="M362.674 298.668h256.012v405.32h21.31V277.324H341.332v426.664h21.342zM1023.99 554.678h-63.998c-11.782 0-21.312 9.5-21.312 21.312s9.532 21.312 21.312 21.312h63.998v-42.624z" fill="#E6E9ED" p-id="2388"></path></svg>

src/assets/icons/station.svg

@@ -0,0 +1 @@
+<svg t="1619592775334" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5220" width="32" height="32"><path d="M512 1024c-56.096-89.344-97.184-137.728-123.296-145.184C201.216 825.248 64 652.672 64 448 64 200.576 264.576 0 512 0s448 200.576 448 448c0 203.168-135.232 374.72-320.608 429.632-26.88 7.968-69.376 56.768-127.392 146.368z m344.224-396.8c21.952 0 39.776-17.184 39.776-38.4v-202.464L793.216 224H199.776C177.824 224 160 241.184 160 262.4v326.4c0 21.216 17.824 38.4 39.776 38.4h20.896c-0.352-3.2-0.992-6.304-0.992-9.6 0-47.712 40.064-86.4 89.504-86.4 49.44 0 89.504 38.688 89.504 86.4 0 3.296-0.64 6.4-0.96 9.6h240.576c4.64-53.76 46.72-96 98.56-96s93.92 42.24 98.56 96h20.8zM398.688 300.8V416c0 10.592-8.896 19.2-19.872 19.2H239.552a19.552 19.552 0 0 1-19.872-19.2V300.8c0-10.592 8.896-19.2 19.872-19.2h139.264a19.52 19.52 0 0 1 19.872 19.2z m218.816 0V416c0 10.592-8.896 19.2-19.872 19.2h-139.264a19.552 19.552 0 0 1-19.872-19.2V300.8c0-10.592 8.896-19.2 19.872-19.2h139.264c10.976 0 19.872 8.608 19.872 19.2z m198.944 57.6V416c0 10.592-8.928 19.2-19.904 19.2H677.184a19.552 19.552 0 0 1-19.872-19.2V300.8c0-10.592 8.896-19.2 19.872-19.2h99.456l32.16 62.048c2.048 3.52 3.296 6.88 7.648 14.72zM309.184 569.6c-38.464 0-69.632 30.08-69.632 67.2 0 37.12 31.168 67.2 69.632 67.2 38.464 0 69.632-30.08 69.632-67.2 0-37.12-31.168-67.2-69.632-67.2z m437.632 0c-38.464 0-69.632 30.08-69.632 67.2 0 37.12 31.168 67.2 69.632 67.2 38.464 0 69.632-30.08 69.632-67.2 0-37.12-31.168-67.2-69.632-67.2z" p-id="5221" fill="#1296db"></path></svg>

src/views/bus/shiftInfo-list.vue

@@ -127,8 +127,10 @@
       <el-table-column label="操作" width="150" fixed="right">
         <template slot-scope="{ row }">
           <el-link type="primary" :underline="false" @click="handleOpenPassenger(row)"
-            >查看乘客</el-link
-          >
+            >查看乘客</el-link>
+          -
+          <el-link type="primary" :underline="false" @click="handleOpenMap(row)"
+            >查看地图</el-link>
         </template>
       </el-table-column>
     </el-table>
@@ -146,12 +148,27 @@
       :title="modalTitle"
       @close="onDetailModalClose"
     ></shiftInfo-passenger>
+    <el-dialog
+      width="80%"
+      :visible.sync="showMap"
+      title="地图"
+      :modal-append-to-body="true"
+      :append-to-body="true"
+      style="text-align: left"
+      :close-on-click-modal="false"
+    >
+      <shiftInfo-map
+        v-if="showMap"
+        :shift="selectedShift"
+      ></shiftInfo-map>
+      </el-dialog>
   </div>
 </template>
 <script>
 import Constant from "@/constant";
 import shiftInfoApi from "@/api/bus/shiftInfo";
 import ShiftInfoPassenger from "./shiftInfo-passenger";
+import ShiftInfoMap from './shiftInfo-map';
 
 import NProgress from "nprogress"; // progress bar
 import "nprogress/nprogress.css"; // progress bar style
@@ -178,9 +195,15 @@ export default {
       showModal: false,
       modalTitle: "",
       businessKey: "",
+      selectedShift: null,
+      showMap: false
     };
   },
   methods: {
+    handleOpenMap(item) {
+      this.selectedShift = item;
+      this.showMap  = true;
+    },
     indexMethod(index) {
       return (this.pageIndex - 1) * this.pageSize + (index + 1);
     },
@@ -312,6 +335,7 @@ export default {
 
   components: {
     "shiftInfo-passenger": ShiftInfoPassenger,
+    "shiftInfo-map": ShiftInfoMap
   },
 };
 </script>

src/views/bus/shiftInfo-map.vue

@@ -0,0 +1,164 @@
+<template>
+    <div>
+      <el-amap
+        ref="shiftMap"
+        vid="shiftMap"
+        :plugin="plugin"
+        :center="centerPoint"
+        :zoom="15"
+        style="width: 100%; height: 400px"
+      >
+        <!--车辆当前位置-->
+        <el-amap-marker
+          :zIndex="2"
+          :position="vehiclePos"
+          :title="vehicle.licensePlateNumber"
+          :icon="busIcon"
+        ></el-amap-marker>
+
+        <!--站点-->
+        <el-amap-marker
+          :zIndex="1"
+          v-for="station in stationList"
+          :key="station.id"
+          :position="station.position"
+          :title="station.title"
+          :icon="stationIcon"
+        ></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'"
+          :editable="false"
+        ></el-amap-polyline>
+      </el-amap>
+    </div>
+</template>
+<script>
+import routeInfoApi from "@/api/bus/routeInfo";
+import vehicleInfoApi from "@/api/bus/vehicleInfo";
+import busIcon from "@/assets/icons/bus.svg";
+import stationIcon from "@/assets/icons/station.svg";
+
+export default {
+    props :{
+        shift : {
+            type: Object,
+            default: null
+        }
+    },
+    data() {
+        return {
+            busIcon: busIcon,
+            stationIcon: stationIcon,
+            showMapDialog: true,
+            loading: false,
+            centerPoint: [112.276585, 30.306401],
+            stationList: [],
+            mapPath: [],
+            vehicle: {},
+            vehiclePos: [112.276585, 30.306401],
+            plugin: [
+                {
+                    pName: "ToolBar",
+                    events: {
+                        init(instance) {
+                            console.log(instance);
+                        }
+                    }
+                }
+            ]
+        }
+    },
+    methods: {
+        loadVehicle(vehicleId) {
+            vehicleInfoApi.edit(vehicleId).then(response=>{
+                var jsonData = response.data;
+                this.vehicle = jsonData.data;
+                this.vehiclePos = [this.vehicle.longitude,this.vehicle.latitude];
+                this.centerPoint = this.vehiclePos;
+
+                console.log(this.centerPoint);
+
+                setTimeout(()=>{
+                    this.loadVehicle(vehicleId);
+                },60000);
+            });
+        },
+        loadRouteMap(routeId) {
+            //读取当前路线的站点
+            this.loading = true;
+
+            routeInfoApi.edit(routeId).then((response) => {
+                this.loading = false;
+
+                var jsonData = response.data;
+                var model = jsonData.data;
+
+                var _stationList = model.stationList;
+
+                if (model.pathList != null) {
+                    this.mapPath = model.pathList.map((item) => {
+                        return item.split(",");
+                    });
+
+                    //this.centerPoint = this.mapPath[0];
+                } else {
+                    this.mapPath = [];
+                }
+
+                if (_stationList.length <= 1) {
+                    this.$message.warning("请先至少设置2个站点!");
+                } else {
+                    this.stationList = [];
+
+                    var initMapPath = this.mapPath.length == 0;
+
+                    _stationList.forEach((item) => {
+                        if (item.location != null && item.location.length > 0) {
+                            var station = {
+                                id: item.id,
+                                title: item.name,
+                                position: item.location.split(","),
+                            };
+
+                            this.stationList.push(station);
+
+                            if (initMapPath) {
+                                this.mapPath.push(station.position);
+                            }
+                        }
+                    });
+
+                    // if (this.mapPath.length > 0) {
+                    //     this.centerPoint = this.mapPath[0];
+                    // }
+                }
+            });
+        }
+    },
+    mounted: function () {
+        console.log("mounted");
+        console.log(this.shift);
+
+        if(this.shift!=null) {
+            this.loadVehicle(this.shift.vehicleId);
+            this.loadRouteMap(this.shift.routeId);
+        }
+    }
+}
+</script>
+<style>
+
+</style>