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 {
'棕色': '#804000',
'灰色': '#77787b',
},
overCarType:{
'105':'超高',
'106':'超宽',
},
carTypeGlbMap:{
1:'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')
export const areaRecent = () => fetch('/holo/area-index-analysis/recently', {}, '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')
//路口配置列表
......
wj-manage-web/src/utils/mapboxTools.js
View file @ 56b6a5df
......@@ -101,7 +101,7 @@ export function addOrUpdateLightLayers(map, geo) {
"vehicle3D"
);
}
if (!map.getLayer("lightLayerText")) {
map.addLayer(
{
......@@ -141,7 +141,7 @@ export function addOrUpdateLightLayers(map, geo) {
}
// 更新等待行人区域灯态
export function addOrUpdateWaitingPolygons(map, geo){
export function addOrUpdateWaitingPolygons(map, geo) {
if (!map.getSource("waitingLayer")) {
map.addSource("waitingLayer", {
type: "geojson",
......@@ -316,6 +316,7 @@ export function addOrUpdateRoadVector(map) {
export function addOrUpdateWave(map, geo) {
if (map.getSource("dot-point")) {
map.getSource("dot-point").setData(geo);
} else {
map.addSource("dot-point", {
type: "geojson",
......@@ -331,32 +332,38 @@ export function addOrUpdateWave(map, geo) {
"icon-image": "pulsingDot0",
"icon-pitch-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 = []
for(let item of arr){
features.push(turf.point([item.longitude,item.latitude],item))
for (let item of arr) {
features.push(turf.point([item.longitude, item.latitude], item))
}
return turf.featureCollection(features)
}
export function convertPointsLocationToGeo(arr){
export function convertPointsLocationToGeo(arr) {
let features = []
for(let item of arr){
features.push(turf.point(item.location.split(','),item))
for (let item of arr) {
features.push(turf.point(item.location.split(','), item))
}
return turf.featureCollection(features)
}
export function convertPointsLngLatToGeo(arr){
export function convertPointsLngLatToGeo(arr) {
let features = []
for(let item of arr){
features.push(turf.point([item.lng,item.lat],item))
for (let item of arr) {
features.push(turf.point([item.lng, item.lat], item))
}
return turf.featureCollection(features)
}
export function convertPointsWktToGeo(arr){
export function convertPointsWktToGeo(arr) {
let features = [];
for (let item of arr) {
if (item.wkt) {
......@@ -402,8 +409,8 @@ export function addOrUpdateWarningWave(map, arr, id) {
type: "symbol",
source: id,
layout: {
'icon-allow-overlap':true,
'icon-ignore-placement':true,
'icon-allow-overlap': true,
'icon-ignore-placement': true,
"icon-image": [
"match",
["get", "type"],
......
wj-manage-web/src/views/situation/floatData/messageBoxes.vue
View file @ 56b6a5df
......@@ -105,14 +105,14 @@
</div>
</template>
<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">
<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><span>车牌：</span>{{ item.picLicense }}</div>
<div><span>行驶方向：</span>{{ item.driveDirection }}</div>
<div><span>超限类型：</span>{{ item.overType }}</div>
<div><span>车牌：</span>{{ item.plateNo }}</div>
<div :title='item.inDirName'><span>行驶方向：</span>{{ item.inDirName }}</div>
<div><span>超限类型：</span>{{ item.type }}</div>
</div>
</li>
</vue-seamless-scroll>
......@@ -130,9 +130,10 @@
</template>
<script>
import dict from "@/config/holo/dictionary";
import msgCard from "../../../components/Standard/msg-card.vue";
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 RegionalIndex from "./msgLeft/regionalIndex.vue";
import TrafficFlow from "./msgLeft/trafficFlow.vue";
......@@ -153,9 +154,16 @@ export default {
},
data() {
return {
activeName: '22',
overData: [],
dict,
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,
overLoading: true,
init: true,
// 告警信息
warningData: [],
......@@ -179,23 +187,21 @@ export default {
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() {
},
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();
// 区域指数 && 上侧指标
......@@ -215,8 +221,23 @@ export default {
this.getEventAlarm();
}, 1000 * 10);
this.timers.push(timer3);
// 右下超限列表
this.getOverData();
let timer4 = setInterval(() => {
this.getOverData();
}, 1000 * 10);
this.timers.push(timer4);
},
methods: {
// 获取超限列表
getOverData() {
getAlarmOverDatas().then(res => {
this.overLoading = false
console.log("超限列表", res.content);
// todo
this.overData = res.content;
})
},
tabClick(e) {
this.$refs[e.name].reset()
},
......@@ -616,10 +637,20 @@ export default {
width: 100%;
div {
width: 33.3%;
white-space: nowrap;
overflow: hidden;
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++) {
const t = (performance.now() % duration) / duration; // 当前帧相对于动画周期的时间比例
const outerRadius = (size / 2) * 0.7 * t;
const context = this.context;
context.canvas.willReadFrequently = true;
context.clearRect(0, 0, this.width, this.height);
context.beginPath();
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++) {
context.lineWidth = 2 + 4 * (1 - t);
context.fill();
this.data = context.getImageData(0, 0, this.width, this.height).data;
map.triggerRepaint();
map?.triggerRepaint();
return true;
},
};
......@@ -185,7 +186,7 @@ export default {
cameraData: [],
cBearing: "",
cLocation: "",
overCars: [] // 储存超限车辆ids
overCarsPoints: {}, // 储存超限车辆动态经纬度
};
},
watch: {
......@@ -805,7 +806,7 @@ export default {
this.clearTrackTimer();
this.removeAllRadars();
this.removeVehiclePopup()
this.overCars = []
this.overCarsPoints = {}
this.$refs.videoList?.destroyAll();
this.hideTb();
this.closeAllWs()
......@@ -850,19 +851,17 @@ export default {
model.userData.data = options;
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 并更新轨迹图层
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 = []
for (let key in this.highLightCarTracks) {
if (this.highLightCarTracks[key].lnglat.length > 1) {
......@@ -875,8 +874,6 @@ export default {
// 选中模型改变
onSelectedChangeVehicle(e) {
if (e.detail.selected) {
// this.removeVehiclePopup();
// this.clearSelectVehicle();
setTimeout(() => {
popupVises[e.detail.userData.data.id] = true
this.selectVehicle = e.detail.userData.data;
......@@ -885,7 +882,6 @@ export default {
}
},
removeVehiclePopup() {
console.log("do delete all Popups...");
for (let key in vehiclePopups) {
vehiclePopups[key]?.remove();
}
......@@ -893,11 +889,6 @@ export default {
popupVises = {};
vehiclePopupInstances = {};
},
// 清理选中车辆数据及其对应的轨迹
clearSelectVehicle() {
// this.selectVehicleTrackData = null;
// this.removeLayers("selectVehicleTrack");
},
// 车辆详情弹窗内容
addCheckDetail(data) {
if (vehiclePopups[`popup${data.id}`]) {
......@@ -936,8 +927,8 @@ export default {
vehiclePopups[`popup${data.id}`] = null;
delete vehiclePopups[`popup${data.id}`];
delete this.highLightCarTracks[data.id]
delete delete this.overCarsPoints[data.id]
popupVises[`popup${data.id}`] = false;
this.clearSelectVehicle();
});
popupVises[`popup${data.id}`] = true;
vehiclePopupInstances[`popup${data.id}`] = new VehiclePopup({
......@@ -975,6 +966,10 @@ export default {
if (!msg[i].picLicense || dict.noVehicleTypes.includes(msg[i].originalType)) {
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 poly = turf.polygon(this.bounds);
if (!turf.booleanPointInPolygon(pt, poly)) {
......@@ -1011,7 +1006,6 @@ export default {
}
}
let allData = this.diff(this.lastLocation, msg);
// debugger
for (let item of allData) {
// 如果选中车辆存在 则弹窗更新 否则删除弹窗
if (this.selectVehicle && item.id === this.selectVehicle.id) {
......@@ -1020,26 +1014,41 @@ export default {
this.addCheckDetail(item);
}
} else {
this.removeLayers("vehicleSelectWave");
// this.removeVehiclePopup();
vehiclePopups[`popup${item.id}`]?.remove();
this.clearSelectVehicle();
}
}
// 超限车辆弹窗判断
if (item.picLicense.includes('万A7')) {
// 超限车辆弹窗判断 todo
if (item.overType) {
// 如果超限车辆第一次添加 则设置 popupVises[`popup${item.id}`] 为 true
if (!this.overCars.includes(item.id)) {
this.overCars.push(item.id)
if (item.dill === 'add') {
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 (popupVises[`popup${item.id}`]) {
this.overCarsPoints[item.id] = [item.longitude, item.latitude]
this.addCheckDetail(item)
}
} else {
// debugger
delete this.overCarsPoints[item.id]
vehiclePopups[`popup${item.id}`]?.remove();
}
}
......@@ -1113,6 +1122,7 @@ export default {
}
}
this.updateSelectVehcleTrack()
this.updateOverCarLnglat()
this.lastLocation = msg;
}
}
......@@ -1132,8 +1142,6 @@ export default {
},
layerClick(features) {
let prop = features[0].properties;
// this.removeVehiclePopup();
this.clearSelectVehicle();
this.selectVehicle = prop;
},
hideTb() {
......@@ -1193,10 +1201,9 @@ export default {
const del = oldData.filter((e) => !newData.find((c) => c.id === e.id));
// common...
const com = newData.filter((e) => oldData.find((c) => c.id === e.id));
debugger
add.forEach((a) => (a.dill = "add"));
del.forEach((d) => (d.dill = "del"));
com.forEach((c) => (c.dill = "com"));
add.map((a) => (a.dill = "add"));
del.map((d) => (d.dill = "del"));
com.map((c) => (c.dill = "com"));
return [...add, ...del, ...com];
},
actionFinished(id) {
......@@ -1296,6 +1303,20 @@ export default {
</style>
<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 {
top: 65px !important;
}
......
wj-manage-web/src/views/situation/mapPopup/vehicleDetail.vue
View file @ 56b6a5df
......@@ -3,49 +3,43 @@
<!-- <div class="closeButton" @click="closeVehicleDetail">x</div> -->
<div class="vehicleDetailInner">
<div class="head">
<span class="titleBefore"></span
><span>{{ model.picLicense || "暂无车牌号信息" }}</span>
<span class="titleBefore"></span><span>{{ model.picLicense || "暂无车牌号信息" }}</span>
</div>
<div class="content">
<div class="detailItem">
<span class="left">车辆号牌：</span>{{ model.picLicense || "无数据" }}
</div>
<div class="detailItem">
<span class="left">号牌颜色：</span
>{{ convertDict("PlateColor", model.licenseColor) }}
<div class="detailItem" v-show="notExceed">
<span class="left">号牌颜色：</span>{{ convertDict("PlateColor", model.licenseColor) }}
</div>
<div class="detailItem">
<span class="left">行驶速度：</span>{{ model.speed || 0 }} km/h
</div>
<div class="detailItem">
<span class="left">车身颜色：</span
>{{ convertDict("CarColor", model.originalColor) }}
<div class="detailItem" v-show="notExceed">
<span class="left">车身颜色：</span>{{ convertDict("CarColor", model.originalColor) }}
</div>
<div class="detailItem">
<div class="detailItem" v-show="notExceed">
<span class="left">航向角：</span>{{ model.courseAngle || 0 }}
</div>
<div class="detailItem">
<span class="left">车辆类型：</span
>{{ convertDict("CarType", model.originalType) }}
<span class="left">车辆类型：</span>{{ 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 class="detailItem">
<span class="left">ID ：</span>{{ model.id }}
</div>
<div
class="detailItem"
:title="`经度：${Number(model.longitude).toFixed(6)}`"
>
<span class="left">经度：</span
>{{ Number(model.longitude).toFixed(6) }}
<div class="detailItem" v-show="notExceed" :title="`经度：${Number(model.longitude).toFixed(6)}`">
<span class="left">经度：</span>{{ Number(model.longitude).toFixed(6) }}
</div>
<div
class="detailItem"
:title="`纬度：${Number(
model.latitude
).toFixed(6)}`"
>
<span class="left">纬度：</span
>{{
<div class="detailItem" v-show="notExceed" :title="`纬度：${Number(
model.latitude
).toFixed(6)}`">
<span class="left">纬度：</span>{{
Number(model.latitude).toFixed(6)
}}
</div>
......@@ -58,6 +52,7 @@
<script>
import store from "../../../store";
import dict from "../../../config/holo/dictionary";
export default {
name: "vehicleDetail",
data() {
......@@ -67,7 +62,7 @@ export default {
watch: {
},
mounted() {
console.log("model", this.model);
// console.log("model", this.model);
},
methods: {
convertDict(type, value) {
......@@ -82,8 +77,25 @@ export default {
this.$emit("actionFinished", this.dialogId, false);
},
},
computed: {},
beforeDestroy() {},
computed: {
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>
......@@ -92,6 +104,7 @@ export default {
font-size: 12PX;
position: relative;
width: 216PX;
.closeButton {
position: absolute;
right: 20PX;
......@@ -100,6 +113,7 @@ export default {
font-size: 22PX;
cursor: pointer;
}
.closeButton:hover {
color: #019bf5;
}
......@@ -111,6 +125,7 @@ export default {
background-image: url("../../../assets/images/holo/vehicle_popup_back.png");
background-size: 100% 100%;
background-repeat: no-repeat;
.head {
height: 30PX;
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