|
|
@@ -101,6 +101,10 @@
|
|
|
corpType="CD"
|
|
|
></crop-select>
|
|
|
</template>
|
|
|
+ <template slot-scope="{row}" slot="plateNo">
|
|
|
+ <span class="el-button--text" style="cursor: pointer"
|
|
|
+ @click="openTrack(row)">{{ row.plateNo }}</span>
|
|
|
+ </template>
|
|
|
<template slot-scope="{row,index}" slot="menu">
|
|
|
<el-button
|
|
|
type="text"
|
|
|
@@ -192,6 +196,15 @@
|
|
|
</span>
|
|
|
</el-dialog>
|
|
|
</basic-container>
|
|
|
+ <el-dialog
|
|
|
+ title="车辆轨迹"
|
|
|
+ append-to-body
|
|
|
+ custom-class="dialog_two"
|
|
|
+ :visible.sync="dialogVisibleTwo"
|
|
|
+ lock-scroll
|
|
|
+ width="80%">
|
|
|
+ <div id="container"></div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -204,6 +217,7 @@ import {
|
|
|
motorcadeDriver,
|
|
|
fleetDriverSave, telephone, getAttachment, saveAttached, recordingDetails, changeVehicle
|
|
|
} from "@/api/landTransportation";
|
|
|
+import {location} from "@/api/gaude";
|
|
|
|
|
|
export default {
|
|
|
name: "index",
|
|
|
@@ -211,6 +225,10 @@ export default {
|
|
|
return {
|
|
|
key: 0,
|
|
|
query:{},
|
|
|
+ dialogVisibleTwo:false,
|
|
|
+ map: null,
|
|
|
+ infoWindow: null,
|
|
|
+ marker: null,
|
|
|
formDataList:{},
|
|
|
optionData: {
|
|
|
span: 12,
|
|
|
@@ -751,6 +769,7 @@ export default {
|
|
|
},5000)
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
+ this.map && this.map.destroy();
|
|
|
clearInterval(this.dispatchACarTimer); //关闭
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -957,12 +976,81 @@ export default {
|
|
|
},
|
|
|
ToBreak(val) {
|
|
|
if (val)return val.replace(/\n/g, '<br/>')
|
|
|
- }
|
|
|
+ },
|
|
|
+ markerClick(e) {
|
|
|
+ this.infoWindow.setContent(e.target.content);
|
|
|
+ this.infoWindow.open(this.map, e.target.getPosition());
|
|
|
+ },
|
|
|
+ openTrack(row){
|
|
|
+ location({itemId: row.itemId, plateNo: row.plateNo, tenantId: '234557', color: '2'}).then(res => {
|
|
|
+ this.dialogVisibleTwo = true
|
|
|
+ let this_ = this
|
|
|
+ setTimeout(function () {
|
|
|
+ this_.initMap(res.data.data, row.plateNo);
|
|
|
+ }, 1000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initMap(data, plateNo) {
|
|
|
+ this.map = new AMap.Map("container", {resizeEnable: true});
|
|
|
+ this.infoWindow = new AMap.InfoWindow({
|
|
|
+ ffset: new AMap.Pixel(0, -30),
|
|
|
+ offset: new AMap.Pixel(0, -30)
|
|
|
+ });
|
|
|
+ let icon = new AMap.Icon({
|
|
|
+ size: new AMap.Size(52, 26), // 图标尺寸
|
|
|
+ image: 'https://trade.tubaosoft.com/file/bladex/000000/1123598821738675201/che.png',
|
|
|
+ imageSize: new AMap.Size(52, 26), // 根据所设置的大小拉伸或压缩图片
|
|
|
+ });
|
|
|
+ this.marker = new AMap.Marker({
|
|
|
+ position: data.location,
|
|
|
+ map: this.map,
|
|
|
+ icon: icon,
|
|
|
+ markerMeta: new AMap.Size(28, 28),
|
|
|
+ offset: new AMap.Pixel(-26, -15),
|
|
|
+ autoRotation: true,
|
|
|
+ angle: -15
|
|
|
+ });
|
|
|
+ this.marker.content = '<div style="width: 300px;">'
|
|
|
+ + '<p style="font-size: 22px;font-weight: bold;background-color: #2d8cf0;color: #fff;">' + plateNo + '</p>'
|
|
|
+ + '<p style="padding: 5px 0"><span style="color: #a0a0a0">最后上报时间:</span>' + new Date(Number(data.time) + 8 * 60 * 60 * 1000).toJSON().split('T').join(' ').substr(0, 19) + '</p>'
|
|
|
+ + '<div style="width: 150px;float: left;">'
|
|
|
+ + '<p style="padding: 5px 0"><span style="color: #a0a0a0">车辆状态:</span>' + (data.speed > 0 ? '行驶中' : '停车') + '</p>'
|
|
|
+ + '</div>'
|
|
|
+ + '<div style="width: 150px;float: right;">'
|
|
|
+ + '<p style="padding: 5px 0"><span style="color: #a0a0a0">速度:</span>' + data.speed + 'km/h</p>'
|
|
|
+ + '</div>'
|
|
|
+ + '<p><span style="color: #a0a0a0">当前位置:</span>' + data.address + '</p>'
|
|
|
+ + '<p style="padding: 5px 0"><span style="color: #a0a0a0">经纬度:</span>' + data.location.join(',') + '</p>'
|
|
|
+ + '</div>'
|
|
|
+ this.infoWindow.open(this.map, this.map.getCenter());
|
|
|
+ this.marker.on('click', this.markerClick);
|
|
|
+ this.marker.emit('click', {target: this.marker});
|
|
|
+ this.map.setFitView();
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+#container {
|
|
|
+ height: 80vh;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+::v-deep .el-dialog {
|
|
|
+ margin-top: 5vh !important;
|
|
|
+ margin-bottom: 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-dialog__body {
|
|
|
+ padding: 0 20px 10px 20px !important;
|
|
|
+}
|
|
|
+::v-deep .amap-info-content {
|
|
|
+ padding: 5px 5px 5px 5px !important;
|
|
|
+}
|
|
|
+::v-deep .amap-info-close {
|
|
|
+ right: 10px !important;
|
|
|
+ top: 12px !important;
|
|
|
+}
|
|
|
.selected{
|
|
|
color: #1e9fff !important;
|
|
|
}
|
caojunjie