Skip to content

H
holo-web
Commit 56b6a5df authored by ninglx's avatar ninglx
Browse files
Options

添加超限功能

parent 1e36f0db
Hide whitespace changes
Inline Side-by-side
Showing with 186 additions and 104 deletions
wj-manage-web/src/config/holo/dictionary.js
View file @ 56b6a5df
...@@ -12,6 +12,10 @@ export default { ...@@ -12,6 +12,10 @@ export default {
'棕色': '#804000', '棕色': '#804000',
'灰色': '#77787b', '灰色': '#77787b',
}, },
overCarType:{
'105':'超高',
'106':'超宽',
},
carTypeGlbMap:{ carTypeGlbMap:{
1:'0', 1:'0',
9:'0', 9:'0',
......
wj-manage-web/src/dao/situation.js
View file @ 56b6a5df
...@@ -42,8 +42,12 @@ export const eventAnalysis = () => fetch('/holo/event-analysis/list', {}, 'GET') ...@@ -42,8 +42,12 @@ export const eventAnalysis = () => fetch('/holo/event-analysis/list', {}, 'GET')
export const areaRecent = () => fetch('/holo/area-index-analysis/recently', {}, 'GET') export const areaRecent = () => fetch('/holo/area-index-analysis/recently', {}, 'GET')
// 右下 告警列表
export const eventAlarm = () => fetch('/holo/event-info/alarm', {}, 'GET') export const eventAlarm = () => fetch('/holo/event-info/alarm', {}, 'GET')
// 右下 超限列表
export const getAlarmOverDatas = () => fetch('/holo/event-info/transfiniteList', {}, 'GET')
export const pedNonAnalysis = () => fetch('/holo/ped-nonmotor-analysis/list', {}, 'GET') export const pedNonAnalysis = () => fetch('/holo/ped-nonmotor-analysis/list', {}, 'GET')
//路口配置列表 //路口配置列表
......
wj-manage-web/src/utils/mapboxTools.js
View file @ 56b6a5df
...@@ -101,7 +101,7 @@ export function addOrUpdateLightLayers(map, geo) { ...@@ -101,7 +101,7 @@ export function addOrUpdateLightLayers(map, geo) {
"vehicle3D" "vehicle3D"
); );
} }
if (!map.getLayer("lightLayerText")) { if (!map.getLayer("lightLayerText")) {
map.addLayer( map.addLayer(
{ {
...@@ -141,7 +141,7 @@ export function addOrUpdateLightLayers(map, geo) { ...@@ -141,7 +141,7 @@ export function addOrUpdateLightLayers(map, geo) {
} }
// 更新等待行人区域灯态 // 更新等待行人区域灯态
export function addOrUpdateWaitingPolygons(map, geo){ export function addOrUpdateWaitingPolygons(map, geo) {
if (!map.getSource("waitingLayer")) { if (!map.getSource("waitingLayer")) {
map.addSource("waitingLayer", { map.addSource("waitingLayer", {
type: "geojson", type: "geojson",
...@@ -316,6 +316,7 @@ export function addOrUpdateRoadVector(map) { ...@@ -316,6 +316,7 @@ export function addOrUpdateRoadVector(map) {
export function addOrUpdateWave(map, geo) { export function addOrUpdateWave(map, geo) {
if (map.getSource("dot-point")) { if (map.getSource("dot-point")) {
map.getSource("dot-point").setData(geo); map.getSource("dot-point").setData(geo);
} else { } else {
map.addSource("dot-point", { map.addSource("dot-point", {
type: "geojson", type: "geojson",
...@@ -331,32 +332,38 @@ export function addOrUpdateWave(map, geo) { ...@@ -331,32 +332,38 @@ export function addOrUpdateWave(map, geo) {
"icon-image": "pulsingDot0", "icon-image": "pulsingDot0",
"icon-pitch-alignment": "map", "icon-pitch-alignment": "map",
"icon-rotation-alignment": "map", "icon-rotation-alignment": "map",
'icon-allow-overlap': true,
'icon-ignore-placement': true,
}, },
}); }, 'vehicle3D');
if (map.getLayer("vehiclePic")) {
map.moveLayer("vehicleSelectWave", "vehiclePic");
}
} }
} }
export function convertPointsToGeo(arr){ export function convertPointsToGeo(arr) {
let features = [] let features = []
for(let item of arr){ for (let item of arr) {
features.push(turf.point([item.longitude,item.latitude],item)) features.push(turf.point([item.longitude, item.latitude], item))
} }
return turf.featureCollection(features) return turf.featureCollection(features)
} }
export function convertPointsLocationToGeo(arr){ export function convertPointsLocationToGeo(arr) {
let features = [] let features = []
for(let item of arr){ for (let item of arr) {
features.push(turf.point(item.location.split(','),item)) features.push(turf.point(item.location.split(','), item))
} }
return turf.featureCollection(features) return turf.featureCollection(features)
} }
export function convertPointsLngLatToGeo(arr){ export function convertPointsLngLatToGeo(arr) {
let features = [] let features = []
for(let item of arr){ for (let item of arr) {
features.push(turf.point([item.lng,item.lat],item)) features.push(turf.point([item.lng, item.lat], item))
} }
return turf.featureCollection(features) return turf.featureCollection(features)
} }
export function convertPointsWktToGeo(arr){ export function convertPointsWktToGeo(arr) {
let features = []; let features = [];
for (let item of arr) { for (let item of arr) {
if (item.wkt) { if (item.wkt) {
...@@ -402,8 +409,8 @@ export function addOrUpdateWarningWave(map, arr, id) { ...@@ -402,8 +409,8 @@ export function addOrUpdateWarningWave(map, arr, id) {
type: "symbol", type: "symbol",
source: id, source: id,
layout: { layout: {
'icon-allow-overlap':true, 'icon-allow-overlap': true,
'icon-ignore-placement':true, 'icon-ignore-placement': true,
"icon-image": [ "icon-image": [
"match", "match",
["get", "type"], ["get", "type"],
......
wj-manage-web/src/views/situation/floatData/messageBoxes.vue
View file @ 56b6a5df
...@@ -105,14 +105,14 @@ ...@@ -105,14 +105,14 @@
</div> </div>
</template> </template>
<div class="traffics"> <div class="traffics">
<vue-seamless-scroll ref='22' class="warningMsg" :data="overData" :class-option="optionSetting" <vue-seamless-scroll ref='22' class="warningMsg" :data="overData" :class-option="optionSetting1"
v-show="overData.length"> v-show="overData.length">
<li v-for="(item, index) of overData" class="overItem" :key="index"> <li v-for="(item, index) of overData" class="overItem" :key="index">
<div class='topLicense'> <span>预警时间：</span>{{ item.warningTime }}</div> <div class='topLicense'> <span>预警时间：</span>{{ item.timeStamp }}</div>
<div class='detailMsg'> <div class='detailMsg'>
<div><span>车牌：</span>{{ item.picLicense }}</div> <div><span>车牌：</span>{{ item.plateNo }}</div>
<div><span>行驶方向：</span>{{ item.driveDirection }}</div> <div :title='item.inDirName'><span>行驶方向：</span>{{ item.inDirName }}</div>
<div><span>超限类型：</span>{{ item.overType }}</div> <div><span>超限类型：</span>{{ item.type }}</div>
</div> </div>
</li> </li>
</vue-seamless-scroll> </vue-seamless-scroll>
...@@ -130,9 +130,10 @@ ...@@ -130,9 +130,10 @@
</template> </template>
<script> <script>
import dict from "@/config/holo/dictionary";
import msgCard from "../../../components/Standard/msg-card.vue"; import msgCard from "../../../components/Standard/msg-card.vue";
import vueSeamlessScroll from 'vue-seamless-scroll' import vueSeamlessScroll from 'vue-seamless-scroll'
import { eventAlarm, getOverDatas } from "../../../dao/situation"; import { eventAlarm, getAlarmOverDatas, getOverDatas } from "../../../dao/situation";
import { initWs } from "../../../config/holo/websocket"; import { initWs } from "../../../config/holo/websocket";
import RegionalIndex from "./msgLeft/regionalIndex.vue"; import RegionalIndex from "./msgLeft/regionalIndex.vue";
import TrafficFlow from "./msgLeft/trafficFlow.vue"; import TrafficFlow from "./msgLeft/trafficFlow.vue";
...@@ -153,9 +154,16 @@ export default { ...@@ -153,9 +154,16 @@ export default {
}, },
data() { data() {
return { return {
activeName: '22', dict,
overData: [], activeName: '11',
overData: [
// { "plateNo": "京A895413", "inDirName": "东向西", "type": "201", "timeStamp": "2024-08-27 15:39:18" },
// { "plateNo": "京A895413", "inDirName": "东向西", "type": "504", "timeStamp": "2024-08-27 15:39:18" },
// { "plateNo": "京A895413", "inDirName": "东向西", "type": "504", "timeStamp": "2024-08-27 15:39:18" },
// { "plateNo": "京A895413", "inDirName": "东向西", "type": "504", "timeStamp": "2024-08-27 15:39:18" },
],
alarmLoading: true, alarmLoading: true,
overLoading: true,
init: true, init: true,
// 告警信息 // 告警信息
warningData: [], warningData: [],
...@@ -179,23 +187,21 @@ export default { ...@@ -179,23 +187,21 @@ export default {
waitTime: 1000, // 单步运动停止的时间(默认值1000ms) waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
}; };
}, },
optionSetting1() {
return {
step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 默认值0是无缝不停止的滚动
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
};
},
}, },
created() { created() {
}, },
mounted() { mounted() {
this.overData = [
// '超限111111111111111'
{ picLicense: '京A12334', driveDirection: '方向方向', overType: '超宽超限', warningTime: '2022-02-02 02:02:02' },
{ picLicense: '京A12334', driveDirection: '方向方向', overType: '超宽超限', warningTime: '2022-02-02 02:02:02' },
{ picLicense: '京A12334', driveDirection: '方向方向', overType: '超宽超限', warningTime: '2022-02-02 02:02:02' },
{ picLicense: '京A12334', driveDirection: '方向方向', overType: '超宽超限', warningTime: '2022-02-02 02:02:02' },
{ picLicense: '京A12334', driveDirection: '方向方向', overType: '超宽超限', warningTime: '2022-02-02 02:02:02' },
{ picLicense: '京A12334', driveDirection: '方向方向', overType: '超宽超限', warningTime: '2022-02-02 02:02:02' },
{ picLicense: '京A12334', driveDirection: '方向方向', overType: '超宽超限', warningTime: '2022-02-02 02:02:02' },
{ picLicense: '京A12334', driveDirection: '方向方向', overType: '超宽超限', warningTime: '2022-02-02 02:02:02' },
{ picLicense: '京A12334', driveDirection: '方向方向', overType: '超宽超限', warningTime: '2022-02-02 02:02:02' },
{ picLicense: '京A12334', driveDirection: '方向方向', overType: '超宽超限', warningTime: '2022-02-02 02:02:02' },
]
// 头盔率推送 // 头盔率推送
this.initHelMetSocket(); this.initHelMetSocket();
// 区域指数 && 上侧指标 // 区域指数 && 上侧指标
...@@ -215,8 +221,23 @@ export default { ...@@ -215,8 +221,23 @@ export default {
this.getEventAlarm(); this.getEventAlarm();
}, 1000 * 10); }, 1000 * 10);
this.timers.push(timer3); this.timers.push(timer3);
// 右下超限列表
this.getOverData();
let timer4 = setInterval(() => {
this.getOverData();
}, 1000 * 10);
this.timers.push(timer4);
}, },
methods: { methods: {
// 获取超限列表
getOverData() {
getAlarmOverDatas().then(res => {
this.overLoading = false
console.log("超限列表", res.content);
// todo
this.overData = res.content;
})
},
tabClick(e) { tabClick(e) {
this.$refs[e.name].reset() this.$refs[e.name].reset()
}, },
...@@ -616,10 +637,20 @@ export default { ...@@ -616,10 +637,20 @@ export default {
width: 100%; width: 100%;
div { div {
width: 33.3%;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
margin-right: 5px;
}
div:nth-child(1) {
width: 25%;
}
div:nth-child(2) {
width: calc(50% - 10px);
}
div:nth-child(3) {
width: 25%;
margin-right:0
} }
} }
} }
......
wj-manage-web/src/views/situation/index.vue
View file @ 56b6a5df
...@@ -89,6 +89,7 @@ for (let i = 0; i < canvasImages.length; i++) { ...@@ -89,6 +89,7 @@ for (let i = 0; i < canvasImages.length; i++) {
const t = (performance.now() % duration) / duration; // 当前帧相对于动画周期的时间比例 const t = (performance.now() % duration) / duration; // 当前帧相对于动画周期的时间比例
const outerRadius = (size / 2) * 0.7 * t; const outerRadius = (size / 2) * 0.7 * t;
const context = this.context; const context = this.context;
context.canvas.willReadFrequently = true;
context.clearRect(0, 0, this.width, this.height); context.clearRect(0, 0, this.width, this.height);
context.beginPath(); context.beginPath();
context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2); context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2);
...@@ -96,7 +97,7 @@ for (let i = 0; i < canvasImages.length; i++) { ...@@ -96,7 +97,7 @@ for (let i = 0; i < canvasImages.length; i++) {
context.lineWidth = 2 + 4 * (1 - t); context.lineWidth = 2 + 4 * (1 - t);
context.fill(); context.fill();
this.data = context.getImageData(0, 0, this.width, this.height).data; this.data = context.getImageData(0, 0, this.width, this.height).data;
map.triggerRepaint(); map?.triggerRepaint();
return true; return true;
}, },
}; };
...@@ -185,7 +186,7 @@ export default { ...@@ -185,7 +186,7 @@ export default {
cameraData: [], cameraData: [],
cBearing: "", cBearing: "",
cLocation: "", cLocation: "",
overCars: [] // 储存超限车辆ids overCarsPoints: {}, // 储存超限车辆动态经纬度
}; };
}, },
watch: { watch: {
...@@ -805,7 +806,7 @@ export default { ...@@ -805,7 +806,7 @@ export default {
this.clearTrackTimer(); this.clearTrackTimer();
this.removeAllRadars(); this.removeAllRadars();
this.removeVehiclePopup() this.removeVehiclePopup()
this.overCars = [] this.overCarsPoints = {}
this.$refs.videoList?.destroyAll(); this.$refs.videoList?.destroyAll();
this.hideTb(); this.hideTb();
this.closeAllWs() this.closeAllWs()
...@@ -850,19 +851,17 @@ export default { ...@@ -850,19 +851,17 @@ export default {
model.userData.data = options; model.userData.data = options;
model.setRotation({ x: 90, y: 360 - options.courseAngle - 90, z: 0 }); model.setRotation({ x: 90, y: 360 - options.courseAngle - 90, z: 0 });
}, },
// 更新超限车辆高亮波纹底盘
updateOverCarLnglat() {
let features = []
for (let key in this.overCarsPoints) {
let feature = turf.point(this.overCarsPoints[key])
features.push(feature)
}
mapTools.addOrUpdateWave(map, turf.featureCollection(features));
},
// 转换轨迹数据为geo 并更新轨迹图层 // 转换轨迹数据为geo 并更新轨迹图层
updateSelectVehcleTrack() { updateSelectVehcleTrack() {
// if (
// this.selectVehicleTrackData &&
// this.selectVehicleTrackData.lnglat.length > 1
// ) {
// let feature = turf.lineString(
// this.selectVehicleTrackData.lnglat,
// this.selectVehicleTrackData.properties
// );
// let geo = turf.featureCollection([feature]);
// mapTools.addOrUpdateSelectVehicleTrack(map, geo);
// }
let trackFeatures = [] let trackFeatures = []
for (let key in this.highLightCarTracks) { for (let key in this.highLightCarTracks) {
if (this.highLightCarTracks[key].lnglat.length > 1) { if (this.highLightCarTracks[key].lnglat.length > 1) {
...@@ -875,8 +874,6 @@ export default { ...@@ -875,8 +874,6 @@ export default {
// 选中模型改变 // 选中模型改变
onSelectedChangeVehicle(e) { onSelectedChangeVehicle(e) {
if (e.detail.selected) { if (e.detail.selected) {
// this.removeVehiclePopup();
// this.clearSelectVehicle();
setTimeout(() => { setTimeout(() => {
popupVises[e.detail.userData.data.id] = true popupVises[e.detail.userData.data.id] = true
this.selectVehicle = e.detail.userData.data; this.selectVehicle = e.detail.userData.data;
...@@ -885,7 +882,6 @@ export default { ...@@ -885,7 +882,6 @@ export default {
} }
}, },
removeVehiclePopup() { removeVehiclePopup() {
console.log("do delete all Popups...");
for (let key in vehiclePopups) { for (let key in vehiclePopups) {
vehiclePopups[key]?.remove(); vehiclePopups[key]?.remove();
} }
...@@ -893,11 +889,6 @@ export default { ...@@ -893,11 +889,6 @@ export default {
popupVises = {}; popupVises = {};
vehiclePopupInstances = {}; vehiclePopupInstances = {};
}, },
// 清理选中车辆数据及其对应的轨迹
clearSelectVehicle() {
// this.selectVehicleTrackData = null;
// this.removeLayers("selectVehicleTrack");
},
// 车辆详情弹窗内容 // 车辆详情弹窗内容
addCheckDetail(data) { addCheckDetail(data) {
if (vehiclePopups[`popup${data.id}`]) { if (vehiclePopups[`popup${data.id}`]) {
...@@ -936,8 +927,8 @@ export default { ...@@ -936,8 +927,8 @@ export default {
vehiclePopups[`popup${data.id}`] = null; vehiclePopups[`popup${data.id}`] = null;
delete vehiclePopups[`popup${data.id}`]; delete vehiclePopups[`popup${data.id}`];
delete this.highLightCarTracks[data.id] delete this.highLightCarTracks[data.id]
delete delete this.overCarsPoints[data.id]
popupVises[`popup${data.id}`] = false; popupVises[`popup${data.id}`] = false;
this.clearSelectVehicle();
}); });
popupVises[`popup${data.id}`] = true; popupVises[`popup${data.id}`] = true;
vehiclePopupInstances[`popup${data.id}`] = new VehiclePopup({ vehiclePopupInstances[`popup${data.id}`] = new VehiclePopup({
...@@ -975,6 +966,10 @@ export default { ...@@ -975,6 +966,10 @@ export default {
if (!msg[i].picLicense || dict.noVehicleTypes.includes(msg[i].originalType)) { if (!msg[i].picLicense || dict.noVehicleTypes.includes(msg[i].originalType)) {
msg[i].picLicense = ""; msg[i].picLicense = "";
} }
// if (msg[i].id.toString().includes('120327')) {
// msg[i].overType = '201,202'
// msg[i].timeStamp = '2021'
// }
let pt = turf.point([msg[i].longitude, msg[i].latitude]); let pt = turf.point([msg[i].longitude, msg[i].latitude]);
let poly = turf.polygon(this.bounds); let poly = turf.polygon(this.bounds);
if (!turf.booleanPointInPolygon(pt, poly)) { if (!turf.booleanPointInPolygon(pt, poly)) {
...@@ -1011,7 +1006,6 @@ export default { ...@@ -1011,7 +1006,6 @@ export default {
} }
} }
let allData = this.diff(this.lastLocation, msg); let allData = this.diff(this.lastLocation, msg);
// debugger
for (let item of allData) { for (let item of allData) {
// 如果选中车辆存在 则弹窗更新 否则删除弹窗 // 如果选中车辆存在 则弹窗更新 否则删除弹窗
if (this.selectVehicle && item.id === this.selectVehicle.id) { if (this.selectVehicle && item.id === this.selectVehicle.id) {
...@@ -1020,26 +1014,41 @@ export default { ...@@ -1020,26 +1014,41 @@ export default {
this.addCheckDetail(item); this.addCheckDetail(item);
} }
} else { } else {
this.removeLayers("vehicleSelectWave");
// this.removeVehiclePopup();
vehiclePopups[`popup${item.id}`]?.remove(); vehiclePopups[`popup${item.id}`]?.remove();
this.clearSelectVehicle();
} }
} }
// 超限车辆弹窗判断 // 超限车辆弹窗判断 todo
if (item.picLicense.includes('万A7')) { if (item.overType) {
// 如果超限车辆第一次添加 则设置 popupVises[`popup${item.id}`] 为 true // 如果超限车辆第一次添加 则设置 popupVises[`popup${item.id}`] 为 true
if (!this.overCars.includes(item.id)) { if (item.dill === 'add') {
this.overCars.push(item.id)
popupVises[`popup${item.id}`] = true popupVises[`popup${item.id}`] = true
// 右下角弹出超限警告
let overArr = item.overType.split(',')
let overStr = ''
for (let t of overArr) {
overStr += dict.overCarType[t]
}
this.$notify({
title: '超限车辆',
dangerouslyUseHTMLString: true,
customClass: 'manageWebNotify',
message: `
<div>车牌号：${item.picLicense || '--'}</div>
<div>超限类型：${overStr}</div>
<div>预警时间：${item.timeStamp}</div>
`,
type: 'warning',
position: 'bottom-right',
duration: 5000
});
} }
// debugger
if (['add', 'com'].includes(item.dill)) { if (['add', 'com'].includes(item.dill)) {
if (popupVises[`popup${item.id}`]) { if (popupVises[`popup${item.id}`]) {
this.overCarsPoints[item.id] = [item.longitude, item.latitude]
this.addCheckDetail(item) this.addCheckDetail(item)
} }
} else { } else {
// debugger delete this.overCarsPoints[item.id]
vehiclePopups[`popup${item.id}`]?.remove(); vehiclePopups[`popup${item.id}`]?.remove();
} }
} }
...@@ -1113,6 +1122,7 @@ export default { ...@@ -1113,6 +1122,7 @@ export default {
} }
} }
this.updateSelectVehcleTrack() this.updateSelectVehcleTrack()
this.updateOverCarLnglat()
this.lastLocation = msg; this.lastLocation = msg;
} }
} }
...@@ -1132,8 +1142,6 @@ export default { ...@@ -1132,8 +1142,6 @@ export default {
}, },
layerClick(features) { layerClick(features) {
let prop = features[0].properties; let prop = features[0].properties;
// this.removeVehiclePopup();
this.clearSelectVehicle();
this.selectVehicle = prop; this.selectVehicle = prop;
}, },
hideTb() { hideTb() {
...@@ -1193,10 +1201,9 @@ export default { ...@@ -1193,10 +1201,9 @@ export default {
const del = oldData.filter((e) => !newData.find((c) => c.id === e.id)); const del = oldData.filter((e) => !newData.find((c) => c.id === e.id));
// common... // common...
const com = newData.filter((e) => oldData.find((c) => c.id === e.id)); const com = newData.filter((e) => oldData.find((c) => c.id === e.id));
debugger add.map((a) => (a.dill = "add"));
add.forEach((a) => (a.dill = "add")); del.map((d) => (d.dill = "del"));
del.forEach((d) => (d.dill = "del")); com.map((c) => (c.dill = "com"));
com.forEach((c) => (c.dill = "com"));
return [...add, ...del, ...com]; return [...add, ...del, ...com];
}, },
actionFinished(id) { actionFinished(id) {
...@@ -1296,6 +1303,20 @@ export default { ...@@ -1296,6 +1303,20 @@ export default {
</style> </style>
<style lang="less"> <style lang="less">
.manageWebNotify {
border: 1px solid #339de5;
background-color: #03274e;
.el-notification__title,
.el-notification__closeBtn {
color: white;
}
.el-notification__content {
color: rgba(255, 255, 255, 0.7)
}
}
.noTrackMessageDialog { .noTrackMessageDialog {
top: 65px !important; top: 65px !important;
} }
......
wj-manage-web/src/views/situation/mapPopup/vehicleDetail.vue
View file @ 56b6a5df
...@@ -3,49 +3,43 @@ ...@@ -3,49 +3,43 @@
<!-- <div class="closeButton" @click="closeVehicleDetail">x</div> --> <!-- <div class="closeButton" @click="closeVehicleDetail">x</div> -->
<div class="vehicleDetailInner"> <div class="vehicleDetailInner">
<div class="head"> <div class="head">
<span class="titleBefore"></span <span class="titleBefore"></span><span>{{ model.picLicense || "暂无车牌号信息" }}</span>
><span>{{ model.picLicense || "暂无车牌号信息" }}</span>
</div> </div>
<div class="content"> <div class="content">
<div class="detailItem"> <div class="detailItem">
<span class="left">车辆号牌：</span>{{ model.picLicense || "无数据" }} <span class="left">车辆号牌：</span>{{ model.picLicense || "无数据" }}
</div> </div>
<div class="detailItem"> <div class="detailItem" v-show="notExceed">
<span class="left">号牌颜色：</span <span class="left">号牌颜色：</span>{{ convertDict("PlateColor", model.licenseColor) }}
>{{ convertDict("PlateColor", model.licenseColor) }}
</div> </div>
<div class="detailItem"> <div class="detailItem">
<span class="left">行驶速度：</span>{{ model.speed || 0 }} km/h <span class="left">行驶速度：</span>{{ model.speed || 0 }} km/h
</div> </div>
<div class="detailItem"> <div class="detailItem" v-show="notExceed">
<span class="left">车身颜色：</span <span class="left">车身颜色：</span>{{ convertDict("CarColor", model.originalColor) }}
>{{ convertDict("CarColor", model.originalColor) }}
</div> </div>
<div class="detailItem"> <div class="detailItem" v-show="notExceed">
<span class="left">航向角：</span>{{ model.courseAngle || 0 }} <span class="left">航向角：</span>{{ model.courseAngle || 0 }}
</div> </div>
<div class="detailItem"> <div class="detailItem">
<span class="left">车辆类型：</span <span class="left">车辆类型：</span>{{ convertDict("CarType", model.originalType) }}
>{{ convertDict("CarType", model.originalType) }} </div>
<div class="detailItem" v-show="!notExceed">
<span class="left">预警时间：</span>{{ overTime }}
</div>
<div class="detailItem" v-show="!notExceed">
<span class="left">超限类型：</span>{{ overTypeStr }}
</div> </div>
<div class="detailItem"> <div class="detailItem">
<span class="left">ID ：</span>{{ model.id }} <span class="left">ID ：</span>{{ model.id }}
</div> </div>
<div <div class="detailItem" v-show="notExceed" :title="`经度：${Number(model.longitude).toFixed(6)}`">
class="detailItem" <span class="left">经度：</span>{{ Number(model.longitude).toFixed(6) }}
:title="`经度：${Number(model.longitude).toFixed(6)}`"
>
<span class="left">经度：</span
>{{ Number(model.longitude).toFixed(6) }}
</div> </div>
<div <div class="detailItem" v-show="notExceed" :title="`纬度：${Number(
class="detailItem" model.latitude
:title="`纬度：${Number( ).toFixed(6)}`">
model.latitude <span class="left">纬度：</span>{{
).toFixed(6)}`"
>
<span class="left">纬度：</span
>{{
Number(model.latitude).toFixed(6) Number(model.latitude).toFixed(6)
}} }}
</div> </div>
...@@ -58,6 +52,7 @@ ...@@ -58,6 +52,7 @@
<script> <script>
import store from "../../../store"; import store from "../../../store";
import dict from "../../../config/holo/dictionary";
export default { export default {
name: "vehicleDetail", name: "vehicleDetail",
data() { data() {
...@@ -67,7 +62,7 @@ export default { ...@@ -67,7 +62,7 @@ export default {
watch: { watch: {
}, },
mounted() { mounted() {
console.log("model", this.model); // console.log("model", this.model);
}, },
methods: { methods: {
convertDict(type, value) { convertDict(type, value) {
...@@ -82,8 +77,25 @@ export default { ...@@ -82,8 +77,25 @@ export default {
this.$emit("actionFinished", this.dialogId, false); this.$emit("actionFinished", this.dialogId, false);
}, },
}, },
computed: {}, computed: {
beforeDestroy() {}, notExceed() {
return !this.model.overType
},
overTypeStr() {
if (this.model.overType) {
let overArr = this.model.overType.split(',')
let overStr = ''
for (let t of overArr) {
overStr += dict.overCarType[t]
}
return overStr
}
},
overTime() {
return this.model.timeStamp || '--'
}
},
beforeDestroy() { },
}; };
</script> </script>
...@@ -92,6 +104,7 @@ export default { ...@@ -92,6 +104,7 @@ export default {
font-size: 12PX; font-size: 12PX;
position: relative; position: relative;
width: 216PX; width: 216PX;
.closeButton { .closeButton {
position: absolute; position: absolute;
right: 20PX; right: 20PX;
...@@ -100,6 +113,7 @@ export default { ...@@ -100,6 +113,7 @@ export default {
font-size: 22PX; font-size: 22PX;
cursor: pointer; cursor: pointer;
} }
.closeButton:hover { .closeButton:hover {
color: #019bf5; color: #019bf5;
} }
...@@ -111,6 +125,7 @@ export default { ...@@ -111,6 +125,7 @@ export default {
background-image: url("../../../assets/images/holo/vehicle_popup_back.png"); background-image: url("../../../assets/images/holo/vehicle_popup_back.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
.head { .head {
height: 30PX; height: 30PX;
color: white; color: white;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment