|
|
@@ -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>
|
