|
|
@@ -37,14 +37,17 @@
|
|
|
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"
|
|
|
+ <el-amap-marker :zIndex="5"
|
|
|
v-for="(item,index) in itemList"
|
|
|
:key="index"
|
|
|
:position="item.position"
|
|
|
:title="item.title"
|
|
|
+ :icon="busIcon"
|
|
|
>
|
|
|
</el-amap-marker>
|
|
|
<!--轨迹-->
|
|
|
@@ -61,6 +64,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 +82,7 @@
|
|
|
v-loading="loading"
|
|
|
element-loading-text="拼命加载中"
|
|
|
stripe
|
|
|
- height="400"
|
|
|
+ height="600"
|
|
|
@row-click="rowClick"
|
|
|
>
|
|
|
<el-table-column label="经纬度" width="200px">
|
|
|
@@ -95,13 +107,19 @@
|
|
|
</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";
|
|
|
+import busIcon from "@/assets/icons/bus.svg";
|
|
|
|
|
|
export default {
|
|
|
name:"busVehicleList",
|
|
|
- props: ["deviceNo"],
|
|
|
+ props: ["deviceNo","routeId"],
|
|
|
data(){
|
|
|
return{
|
|
|
+ busIcon: busIcon,
|
|
|
queryModel: {
|
|
|
timeRange: null
|
|
|
},
|
|
|
@@ -109,13 +127,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 +234,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 +278,7 @@ export default {
|
|
|
},
|
|
|
mounted() {
|
|
|
//this.changePage(1);
|
|
|
+ //this.loadRouteMap(this.routeId);
|
|
|
},
|
|
|
created() {
|
|
|
|
yanliming