Skip to content

H
holo-web
Commit 25afaff4 authored by ninglx's avatar ninglx
Browse files
Options

地址栏token参数进入系统播放最近路口视频流

parent edfd140a
Hide whitespace changes
Inline Side-by-side
Showing with 227 additions and 261 deletions
wj-manage-web/src/views/situation/index.vue
View file @ 25afaff4
<template> <template>
<div <div class="main situation" v-loading.fullscreen.lock="loading" element-loading-text="数据加载中..."
class="main situation" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
v-loading.fullscreen.lock="loading" <track-switcher :detetors="detetorsArray" :boxShow="boxesShow" @timeChange="timeChange" v-show="trackSwitcherVis"
element-loading-text="数据加载中..." @closeRealTime="closeRealTime" @openRealTime="openRealTime"></track-switcher>
element-loading-spinner="el-icon-loading" <situation-time v-show="currentCheck === 'first' && timeState" class="situationTime" :time="situationTimeVal" />
element-loading-background="rgba(0, 0, 0, 0.8)" <wMap :mapId="'situation-map'" ref="wMap" />
>
<track-switcher
:detetors="detetorsArray"
:boxShow="boxesShow"
@timeChange="timeChange"
v-show="trackSwitcherVis"
@closeRealTime="closeRealTime"
@openRealTime="openRealTime"
></track-switcher>
<situation-time
v-show="currentCheck === 'first' && timeState"
class="situationTime"
:time="situationTimeVal"
/>
<wMap :mapId="'situation-map'" ref="wMap"/>
<!--左右图表组件--> <!--左右图表组件-->
<message-boxes <message-boxes @delWarningPopup="delWarningPopup" @addWarningPopup="addWarningPopup" :show="boxesShow" />
@delWarningPopup="delWarningPopup"
@addWarningPopup="addWarningPopup"
:show="boxesShow"
/>
<!--图层切换按钮--> <!--图层切换按钮-->
<layers-switch <layers-switch ref="switch" :show="boxesShow" @changeCheck="changeCheck" @visibleChange="visibleChange"
ref="switch" :class="boxesShow ? 'generalSwitch' : 'rightSwitch'" />
:show="boxesShow"
@changeCheck="changeCheck"
@visibleChange="visibleChange"
:class="boxesShow ? 'generalSwitch' : 'rightSwitch'"
/>
<!--视频播放组件--> <!--视频播放组件-->
<video-list <video-list ref="videoList" v-if="showCameras.length" @updateCamera="updateCameraCPB" @resetCamera="resetCamera"
ref="videoList" @delVideo="deleteVideo" :showCameras="showCameras" />
v-if="showCameras.length"
@updateCamera="updateCameraCPB"
@resetCamera="resetCamera"
@delVideo="deleteVideo"
:showCameras="showCameras"
/>
<!--路口详情--> <!--路口详情-->
<cross-detail <cross-detail v-if="dialogVisible.crossDetail" @actionFinished="actionFinished" dialogId="crossDetail"
v-if="dialogVisible.crossDetail" :crossDetailData="crossDetailData" />
@actionFinished="actionFinished"
dialogId="crossDetail"
:crossDetailData="crossDetailData"
/>
<!--底部交通事件趋势分析--> <!--底部交通事件趋势分析-->
<traffic-events-tend <traffic-events-tend @updateHeatMap="refreshEventLayer" v-if="currentCheck === 'third'" />
@updateHeatMap="refreshEventLayer"
v-if="currentCheck === 'third'"
/>
<!--设备图例控制--> <!--设备图例控制-->
<equipment-switch <equipment-switch @equipmentChange="equipmentChange" v-if="currentCheck === 'fourth'" />
@equipmentChange="equipmentChange"
v-if="currentCheck === 'fourth'"
/>
</div> </div>
</template> </template>
...@@ -71,7 +31,7 @@ import MessageBoxes from "./floatData/messageBoxes.vue"; ...@@ -71,7 +31,7 @@ import MessageBoxes from "./floatData/messageBoxes.vue";
import CrossDetail from "./crossDetail.vue"; import CrossDetail from "./crossDetail.vue";
import VideoList from "./floatData/videoList.vue"; import VideoList from "./floatData/videoList.vue";
import TrafficEventsTend from "./floatData/trafficEventsTend.vue"; import TrafficEventsTend from "./floatData/trafficEventsTend.vue";
import {initWs} from "../../config/holo/websocket"; import { initWs } from "../../config/holo/websocket";
import dict from "../../config/holo/dictionary"; import dict from "../../config/holo/dictionary";
import mapAssets from "../../config/holo/mapAssets"; import mapAssets from "../../config/holo/mapAssets";
import * as mapTools from "../../utils/mapboxTools"; import * as mapTools from "../../utils/mapboxTools";
...@@ -92,7 +52,7 @@ import { ...@@ -92,7 +52,7 @@ import {
equip_radar, equip_radar,
getDetetors, getDetetors,
} from "../../dao/situation"; } from "../../dao/situation";
import {convertPointsToGeo, convertPointsWktToGeo, convertToLineWithWkt} from "../../utils/mapboxTools"; import { convertPointsToGeo, convertPointsWktToGeo, convertToLineWithWkt } from "../../utils/mapboxTools";
const VehiclePopup = Vue.extend(vehicleDetail); const VehiclePopup = Vue.extend(vehicleDetail);
const EquipmentPopup = Vue.extend(equipmentPopup); const EquipmentPopup = Vue.extend(equipmentPopup);
...@@ -101,11 +61,11 @@ const AlarmPopup = Vue.extend(alarmPopup) ...@@ -101,11 +61,11 @@ const AlarmPopup = Vue.extend(alarmPopup)
let pulsingDots = []; let pulsingDots = [];
const canvasImages = [ const canvasImages = [
{size: 250, color: "252, 1, 26"}, { size: 250, color: "252, 1, 26" },
{size: 400, color: "255,235,59"}, { size: 400, color: "255,235,59" },
{size: 400, color: "255, 141, 26"}, { size: 400, color: "255, 141, 26" },
{size: 400, color: "227, 5, 5"}, { size: 400, color: "227, 5, 5" },
{size: 400, color: "24, 144, 255"}, { size: 400, color: "24, 144, 255" },
]; ];
for (let i = 0; i < canvasImages.length; i++) { for (let i = 0; i < canvasImages.length; i++) {
let size = canvasImages[i].size; let size = canvasImages[i].size;
...@@ -140,23 +100,23 @@ for (let i = 0; i < canvasImages.length; i++) { ...@@ -140,23 +100,23 @@ for (let i = 0; i < canvasImages.length; i++) {
pulsingDots.push(pulsingDot); pulsingDots.push(pulsingDot);
} }
let map, let map,
equipPopup = null, // 设备弹窗 equipPopup = null, // 设备弹窗
popupInstance = null, // 设备弹窗组件实例 用来更新数据与销毁 popupInstance = null, // 设备弹窗组件实例 用来更新数据与销毁
vehiclePopups = {}, vehiclePopups = {},
popupVises = {}, popupVises = {},
vehiclePopupInstances = {}, vehiclePopupInstances = {},
licenseLabel = {}, // 车牌号label licenseLabel = {}, // 车牌号label
vehicleModels = {}, // 车辆model vehicleModels = {}, // 车辆model
vehicleModelTypes = {}, vehicleModelTypes = {},
lastFrameTime = null, lastFrameTime = null,
noTrackMsg = null, noTrackMsg = null,
AlarmPopupIns = {}, AlarmPopupIns = {},
stopLineData = [], stopLineData = [],
waitGeo = null, waitGeo = null,
radarModels = {}, radarModels = {},
radarModelTypes = {}, radarModelTypes = {},
radarTimers = [], radarTimers = [],
trackTimer = null; // 轨迹心跳检测 trackTimer = null; // 轨迹心跳检测
export default { export default {
mixins: [draw, mixinLightModel], mixins: [draw, mixinLightModel],
...@@ -231,12 +191,12 @@ export default { ...@@ -231,12 +191,12 @@ export default {
boxesShow(val) { boxesShow(val) {
if (val) { if (val) {
document document
.getElementsByClassName("mapboxgl-ctrl-bottom-right")[0] .getElementsByClassName("mapboxgl-ctrl-bottom-right")[0]
.classList.remove("mapboxgl-ctrl-bottom-right-hide-box"); .classList.remove("mapboxgl-ctrl-bottom-right-hide-box");
} else { } else {
document document
.getElementsByClassName("mapboxgl-ctrl-bottom-right")[0] .getElementsByClassName("mapboxgl-ctrl-bottom-right")[0]
.classList.add("mapboxgl-ctrl-bottom-right-hide-box"); .classList.add("mapboxgl-ctrl-bottom-right-hide-box");
} }
}, },
}, },
...@@ -268,13 +228,16 @@ export default { ...@@ -268,13 +228,16 @@ export default {
]; ];
for (let item of needDicts) { for (let item of needDicts) {
queue.push( queue.push(
this.$store.dispatch("QUERY_DICT", { this.$store.dispatch("QUERY_DICT", {
type: item, type: item,
}) })
); );
} }
Promise.all(queue).then(() => { Promise.all(queue).then(() => {
this.pageInit(); this.pageInit();
if (this.$store.state.mapInit.center) {
this.boxesShow = false
}
}); });
}, },
methods: { methods: {
...@@ -287,7 +250,7 @@ export default { ...@@ -287,7 +250,7 @@ export default {
// 重度拥堵: 3, // 重度拥堵: 3,
// 疑似事故: 4, // 疑似事故: 4,
// }; // };
let resItem = Object.assign({},item,{longitude:item.lng,latitude:item.lat,type:3}) let resItem = Object.assign({}, item, { longitude: item.lng, latitude: item.lat, type: 3 })
mapTools.addOrUpdateWarningWave(map, [resItem], item.eventSerialNumber); mapTools.addOrUpdateWarningWave(map, [resItem], item.eventSerialNumber);
// 上报产生的告警 弹窗提醒 定时销毁 // 上报产生的告警 弹窗提醒 定时销毁
let popup = new mapboxgl.Popup({ let popup = new mapboxgl.Popup({
...@@ -296,10 +259,10 @@ export default { ...@@ -296,10 +259,10 @@ export default {
offset: [0, 0], offset: [0, 0],
}); });
popup popup
.setLngLat(targetLngLat) .setLngLat(targetLngLat)
.setHTML('<div id="alarm_popup"></div>') .setHTML('<div id="alarm_popup"></div>')
.addTo(map) .addTo(map)
.addClassName("alarmPopup"); .addClassName("alarmPopup");
new AlarmPopup({ new AlarmPopup({
propsData: { propsData: {
model: item, model: item,
...@@ -361,9 +324,9 @@ export default { ...@@ -361,9 +324,9 @@ export default {
for (let item of equips) { for (let item of equips) {
if (map.getLayer(item.label)) { if (map.getLayer(item.label)) {
map.setLayoutProperty( map.setLayoutProperty(
item.label, item.label,
"visibility", "visibility",
item.check ? "visible" : "none" item.check ? "visible" : "none"
); );
} }
} }
...@@ -420,10 +383,10 @@ export default { ...@@ -420,10 +383,10 @@ export default {
offsetLength = offsetLength + Number(cameraItem.installHeight); offsetLength = offsetLength + Number(cameraItem.installHeight);
} }
let translatedPoint = turf.destination( let translatedPoint = turf.destination(
this.cLocation, this.cLocation,
offsetLength, // 相机向前偏移距离 offsetLength, // 相机向前偏移距离
this.cBearing, this.cBearing,
{units: "meters"} { units: "meters" }
).geometry.coordinates; ).geometry.coordinates;
map.flyTo({ map.flyTo({
center: translatedPoint, center: translatedPoint,
...@@ -451,8 +414,8 @@ export default { ...@@ -451,8 +414,8 @@ export default {
map = this.$refs.wMap.initMap(); map = this.$refs.wMap.initMap();
window.map = map; window.map = map;
map.on("style.load", () => { map.on("style.load", () => {
map.on('dblclick',()=>{ map.on('dblclick', () => {
console.log('center '+map.getCenter()+' pitch '+map.getPitch()+' bearing '+map.getBearing()+' zoom '+map.getZoom()) console.log('center ' + map.getCenter() + ' pitch ' + map.getPitch() + ' bearing ' + map.getBearing() + ' zoom ' + map.getZoom())
}) })
map.setFog({ map.setFog({
color: "#1d3244", // Lower atmosphere color: "#1d3244", // Lower atmosphere
...@@ -476,14 +439,14 @@ export default { ...@@ -476,14 +439,14 @@ export default {
} }
for (let i = 0; i < pulsingDots.length; i++) { for (let i = 0; i < pulsingDots.length; i++) {
if (map && !map.hasImage(`pulsingDot${i}`)) if (map && !map.hasImage(`pulsingDot${i}`))
map.addImage(`pulsingDot${i}`, pulsingDots[i], {pixelRatio: 2}); map.addImage(`pulsingDot${i}`, pulsingDots[i], { pixelRatio: 2 });
} }
// 添加map icons图片资源 ---end // 添加map icons图片资源 ---end
this.loading = false; this.loading = false;
this.mixDraw(map); this.mixDraw(map);
map.addControl( map.addControl(
new mapboxgl.NavigationControl({showZoom: false}), new mapboxgl.NavigationControl({ showZoom: false }),
"bottom-right" "bottom-right"
); );
this.refreshBounds(); this.refreshBounds();
// 快捷键 // 快捷键
...@@ -493,24 +456,24 @@ export default { ...@@ -493,24 +456,24 @@ export default {
if (event.altKey && event.keyCode === 82) { if (event.altKey && event.keyCode === 82) {
this.rulerStatus = !this.rulerStatus; this.rulerStatus = !this.rulerStatus;
this.rulerStatus this.rulerStatus
? mapTools.addCalibrationTail(map) ? mapTools.addCalibrationTail(map)
: this.removeLayers("calibrationTailLine,chunkSymbol,chunkText"); : this.removeLayers("calibrationTailLine,chunkSymbol,chunkText");
} }
// alt + x 显示隐藏绘制工具 // alt + x 显示隐藏绘制工具
if (event.altKey && event.keyCode === 88) { if (event.altKey && event.keyCode === 88) {
this.boxesShow = false; this.boxesShow = false;
if ( if (
document.getElementsByClassName("mapboxgl-ctrl-top-right")[0] document.getElementsByClassName("mapboxgl-ctrl-top-right")[0]
.style.display === "none" || .style.display === "none" ||
document.getElementsByClassName("mapboxgl-ctrl-top-right")[0] document.getElementsByClassName("mapboxgl-ctrl-top-right")[0]
.style.display === "" .style.display === ""
) { ) {
document.getElementsByClassName( document.getElementsByClassName(
"mapboxgl-ctrl-top-right" "mapboxgl-ctrl-top-right"
)[0].style.display = "unset"; )[0].style.display = "unset";
} else { } else {
document.getElementsByClassName( document.getElementsByClassName(
"mapboxgl-ctrl-top-right" "mapboxgl-ctrl-top-right"
)[0].style.display = "none"; )[0].style.display = "none";
} }
} }
...@@ -593,7 +556,7 @@ export default { ...@@ -593,7 +556,7 @@ export default {
type: "gltf", type: "gltf",
units: "meters", units: "meters",
scale: 0.8, scale: 0.8,
adjustment: {x: 0.5, y: 1, z: -0.5}, adjustment: { x: 0.5, y: 1, z: -0.5 },
bbox: true, bbox: true,
}; };
window.tb.loadObj(options, (model) => { window.tb.loadObj(options, (model) => {
...@@ -602,17 +565,17 @@ export default { ...@@ -602,17 +565,17 @@ export default {
} }
for (let item of [1, 2]) { for (let item of [1, 2]) {
window.tb.loadObj( window.tb.loadObj(
{ {
obj: `gltf/radar${item}.glb`, obj: `gltf/radar${item}.glb`,
type: "gltf", type: "gltf",
units: "meters", units: "meters",
scale: 10, scale: 10,
adjustment: {x: 0.5, y: 1, z: -0.5}, adjustment: { x: 0.5, y: 1, z: -0.5 },
bbox: false, bbox: false,
}, },
(model) => { (model) => {
radarModelTypes[item] = model; radarModelTypes[item] = model;
} }
); );
} }
window.vehicleModelTypes = vehicleModelTypes; window.vehicleModelTypes = vehicleModelTypes;
...@@ -637,36 +600,40 @@ export default { ...@@ -637,36 +600,40 @@ export default {
solveRadarDatas() { solveRadarDatas() {
let milliFeatures = []; let milliFeatures = [];
console.log("radars...", this.radarDatas); console.log("radars...", this.radarDatas);
for (let i = 0; i < this.radarDatas.length; i++) { let timer = setInterval(() => {
//2 毫米波 other 激光雷达 if (radarModelTypes[1] && radarModelTypes[2]) {
let model = clearInterval(timer)
radarModelTypes[this.radarDatas[i].sourceEquipType]?.duplicate(); for (let i = 0; i < this.radarDatas.length; i++) {
if (model) { //2 毫米波 other 激光雷达
model.setCoords(this.radarDatas[i].wkt.split(",")); let model =
model.userData.data = this.radarDatas[i]; radarModelTypes[this.radarDatas[i].sourceEquipType].duplicate();
model.setRotation({x: 90, y: 360 - 90, z: 0}); model.setCoords(this.radarDatas[i].wkt.split(","));
window.tb.add( model.userData.data = this.radarDatas[i];
model.setRotation({ x: 90, y: 360 - 90, z: 0 });
window.tb.add(
model, model,
`radar${i}${this.radarDatas[i].sourceEquipType}` `radar${i}${this.radarDatas[i].sourceEquipType}`
); );
radarModels[`radar${i}${this.radarDatas[i].sourceEquipType}`] = model; radarModels[`radar${i}${this.radarDatas[i].sourceEquipType}`] = model;
if (this.radarDatas[i].sourceEquipType == 1) { if (this.radarDatas[i].sourceEquipType == 1) {
this.addRadarTimers(this.radarDatas[i], i); this.addRadarTimers(this.radarDatas[i], i);
} else { } else {
let lnglat = this.radarDatas[i].wkt.split(","); let lnglat = this.radarDatas[i].wkt.split(",");
let center = turf.point(lnglat); let center = turf.point(lnglat);
let radius = 0.17; // 100米半径 let radius = 0.17; // 100米半径
let direct = Number(this.radarDatas[i].equipmentDirect); let direct = Number(this.radarDatas[i].equipmentDirect);
let arc = turf.lineArc(center, radius, direct - 10, direct + 10, { let arc = turf.lineArc(center, radius, direct - 10, direct + 10, {
unit: "kilometers", unit: "kilometers",
}); });
let arcScope = [[lnglat, ...arc.geometry.coordinates, lnglat]]; let arcScope = [[lnglat, ...arc.geometry.coordinates, lnglat]];
milliFeatures.push(turf.polygon(arcScope, this.radarDatas[i])); milliFeatures.push(turf.polygon(arcScope, this.radarDatas[i]));
}
} }
let milliGeo = turf.featureCollection(milliFeatures);
mapTools.addOrUpdateMilliScope(map, milliGeo);
} }
} }, 1000)
let milliGeo = turf.featureCollection(milliFeatures);
mapTools.addOrUpdateMilliScope(map, milliGeo);
}, },
loadRadars() { loadRadars() {
if (this.radarDatas.length) { if (this.radarDatas.length) {
...@@ -706,20 +673,20 @@ export default { ...@@ -706,20 +673,20 @@ export default {
} }
if (!map.getLayer(`circle-layer-${ii}-${index}`)) { if (!map.getLayer(`circle-layer-${ii}-${index}`)) {
map.addLayer( map.addLayer(
{ {
id: `circle-layer-${ii}-${index}`, id: `circle-layer-${ii}-${index}`,
source: `circle-source-${ii}-${index}`, source: `circle-source-${ii}-${index}`,
type: "circle", type: "circle",
paint: { paint: {
"circle-radius": radius, "circle-radius": radius,
"circle-opacity": 0, "circle-opacity": 0,
"circle-stroke-color": "#f6eee0", "circle-stroke-color": "#f6eee0",
"circle-stroke-opacity": opacity, "circle-stroke-opacity": opacity,
"circle-stroke-width": 2, "circle-stroke-width": 2,
"circle-pitch-alignment": "map", "circle-pitch-alignment": "map",
},
}, },
"vehicle3D" },
"vehicle3D"
); );
this.radarLayers.push(`circle-layer-${ii}-${index}`); this.radarLayers.push(`circle-layer-${ii}-${index}`);
} }
...@@ -727,50 +694,50 @@ export default { ...@@ -727,50 +694,50 @@ export default {
let timer = setInterval(() => { let timer = setInterval(() => {
if (map && this.radarLayers.length) { if (map && this.radarLayers.length) {
let maxPxInterval = this.convertPxToMeter( let maxPxInterval = this.convertPxToMeter(
maxMeters, maxMeters,
map.getZoom(), map.getZoom(),
lnglat[1] lnglat[1]
); );
for (let ii = 0; ii < numRings; ii++) { for (let ii = 0; ii < numRings; ii++) {
let radius = map.getPaintProperty( let radius = map.getPaintProperty(
`circle-layer-${ii}-${index}`, `circle-layer-${ii}-${index}`,
"circle-radius" "circle-radius"
); );
if (radius < maxPxInterval - 1) { if (radius < maxPxInterval - 1) {
map.setPaintProperty( map.setPaintProperty(
`circle-layer-${ii}-${index}`, `circle-layer-${ii}-${index}`,
"circle-radius", "circle-radius",
radius + 3 radius + 3
); );
map.setPaintProperty( map.setPaintProperty(
`circle-layer-${ii}-${index}`, `circle-layer-${ii}-${index}`,
"circle-stroke-opacity", "circle-stroke-opacity",
1 - radius / maxPxInterval < 0 ? 0 : 1 - radius / maxPxInterval 1 - radius / maxPxInterval < 0 ? 0 : 1 - radius / maxPxInterval
); );
} else { } else {
map.removeLayer(`circle-layer-${ii}-${index}`); map.removeLayer(`circle-layer-${ii}-${index}`);
map.addLayer( map.addLayer(
{ {
id: `circle-layer-${ii}-${index}`, id: `circle-layer-${ii}-${index}`,
source: `circle-source-${ii}-${index}`, source: `circle-source-${ii}-${index}`,
type: "circle", type: "circle",
paint: { paint: {
"circle-radius": 0, "circle-radius": 0,
"circle-opacity": 0, "circle-opacity": 0,
"circle-stroke-color": "#f6eee0", "circle-stroke-color": "#f6eee0",
"circle-stroke-opacity": 1, "circle-stroke-opacity": 1,
"circle-stroke-width": 2, "circle-stroke-width": 2,
"circle-pitch-alignment": "map", "circle-pitch-alignment": "map",
},
}, },
"vehicle3D" },
"vehicle3D"
); );
} }
} }
} else { } else {
clearInterval(timer); clearInterval(timer);
} }
}, 45-map.getZoom()*2); }, 45 - map.getZoom() * 2);
radarTimers.push(timer); radarTimers.push(timer);
}, },
convertPxToMeter(meter, zoom, latitude) { convertPxToMeter(meter, zoom, latitude) {
...@@ -824,7 +791,7 @@ export default { ...@@ -824,7 +791,7 @@ export default {
//---------------------------------------- //----------------------------------------
if (!this.detetorsStatus) { if (!this.detetorsStatus) {
// let wsUrl= ws_config.BASE_URL // let wsUrl= ws_config.BASE_URL
let wsUrl= `ws://${window.wsHost}/holows/subscribe` let wsUrl = `ws://${window.wsHost}/holows/subscribe`
let ws1 = initWs({ let ws1 = initWs({
name: "callDetetorA", name: "callDetetorA",
url: wsUrl, url: wsUrl,
...@@ -943,11 +910,19 @@ export default { ...@@ -943,11 +910,19 @@ export default {
}, 100); }, 100);
this.layerShowRenders = true; this.layerShowRenders = true;
let arr = this.$store.state.dicts.CrossInfo.map(item => { let arr = this.$store.state.dicts.CrossInfo.map(item => {
[item.longitude,item.latitude] = item.location.split(",") [item.longitude, item.latitude] = item.location.split(",")
return item return item
}) })
this.crossGeo = convertPointsToGeo(arr) this.crossGeo = convertPointsToGeo(arr)
mapTools.addOrUpdateCross(map, this.crossGeo, this.firstCrossClick); mapTools.addOrUpdateCross(map, this.crossGeo, this.firstCrossClick);
//--------如果从地址token参数进入系统 则加载中心点最近路口的视频流---------
if (this.$store.state.mapInit.center) {
let centerP = turf.point([map.getCenter().lng, map.getCenter().lat]);
// 取最近点的crossId
let nearest = turf.nearestPoint(centerP, this.crossGeo);
this.firstCrossClick({ features: [nearest] })
}
//--------------------------------------------------------------------
// 注册车辆实时ws // 注册车辆实时ws
let socket = initWs({ let socket = initWs({
name: "callCar", name: "callCar",
...@@ -972,7 +947,7 @@ export default { ...@@ -972,7 +947,7 @@ export default {
if (!this.detetors[item.detectorType]) { if (!this.detetors[item.detectorType]) {
this.detetors[item.detectorType] = []; this.detetors[item.detectorType] = [];
} }
this.detetors[item.detectorType].push({...item, state: "0"}); this.detetors[item.detectorType].push({ ...item, state: "0" });
} }
this.mapZoomEnd(); this.mapZoomEnd();
}); });
...@@ -983,7 +958,7 @@ export default { ...@@ -983,7 +958,7 @@ export default {
// id 只在 全量数据 中存在且不在 接收数据 中存在的即为 需要合并的数据 // id 只在 全量数据 中存在且不在 接收数据 中存在的即为 需要合并的数据
if (this.detetors[`DETECTOR_${type}`]) { if (this.detetors[`DETECTOR_${type}`]) {
let del = this.detetors[`DETECTOR_${type}`].filter( let del = this.detetors[`DETECTOR_${type}`].filter(
(e) => !msg.find((c) => c.laneId === e.laneId) (e) => !msg.find((c) => c.laneId === e.laneId)
); );
for (let item of msg) { for (let item of msg) {
let match = this.detetors[`DETECTOR_${type}`].find((de) => { let match = this.detetors[`DETECTOR_${type}`].find((de) => {
...@@ -1010,10 +985,10 @@ export default { ...@@ -1010,10 +985,10 @@ export default {
offset: [0, -30], offset: [0, -30],
}); });
eventPopup eventPopup
.setLngLat([data.lng, data.lat]) .setLngLat([data.lng, data.lat])
.setHTML('<div id="event_popup"></div>') .setHTML('<div id="event_popup"></div>')
.addTo(map) .addTo(map)
.addClassName("eventPopup"); .addClassName("eventPopup");
new EventPopup({ new EventPopup({
propsData: { propsData: {
model: data, model: data,
...@@ -1023,7 +998,7 @@ export default { ...@@ -1023,7 +998,7 @@ export default {
// 交通事件热力图 & 点 // 交通事件热力图 & 点
refreshEventLayer(type) { refreshEventLayer(type) {
eventInfo({dayType: type}).then((res) => { eventInfo({ dayType: type }).then((res) => {
// 热力图 - 如果还未创建 先创建图层 赋值 // 热力图 - 如果还未创建 先创建图层 赋值
if (this.currentCheck === "third") { if (this.currentCheck === "third") {
mapTools.addOrUpdateEventHeat(map, res.content); mapTools.addOrUpdateEventHeat(map, res.content);
...@@ -1085,12 +1060,6 @@ export default { ...@@ -1085,12 +1060,6 @@ export default {
layers: ["camera", "milli", "radar", "signal", "weather"], layers: ["camera", "milli", "radar", "signal", "weather"],
}); });
if (features.length) { if (features.length) {
console.log(
"fff",
features,
features[0].properties,
features[0].layer.id
);
let prop = features[0].properties; let prop = features[0].properties;
let type = features[0].layer.id; let type = features[0].layer.id;
if (prop.status == "1") { if (prop.status == "1") {
...@@ -1102,13 +1071,13 @@ export default { ...@@ -1102,13 +1071,13 @@ export default {
//信号机popup窗口高度过高 加大偏移防止超出屏幕 //信号机popup窗口高度过高 加大偏移防止超出屏幕
distance = 80; distance = 80;
} }
var bearing = map.getBearing(); // 平移方向，0 表示正北方向 let bearing = map.getBearing(); // 平移方向，0 表示正北方向
var options = {units: "meters"}; let options = { units: "meters" };
var translatedPoint = turf.destination( let translatedPoint = turf.destination(
prop.wkt.split(","), prop.wkt.split(","),
distance, distance,
bearing, bearing,
options options
); );
// 将地图中心点设置为平移后的点 // 将地图中心点设置为平移后的点
map.flyTo({ map.flyTo({
...@@ -1120,14 +1089,14 @@ export default { ...@@ -1120,14 +1089,14 @@ export default {
offset: [0, -20], offset: [0, -20],
}); });
equipPopup equipPopup
.setLngLat(prop.wkt.split(",")) .setLngLat(prop.wkt.split(","))
.setHTML('<div id="equipment_popup"></div>') .setHTML('<div id="equipment_popup"></div>')
.addTo(map) .addTo(map)
.setMaxWidth("500") .setMaxWidth("500")
.addClassName("equipmentPopup"); .addClassName("equipmentPopup");
popupInstance = new EquipmentPopup({ popupInstance = new EquipmentPopup({
propsData: { propsData: {
model: {equip_type: type, ...prop}, model: { equip_type: type, ...prop },
}, },
}); });
popupInstance.$mount("#equipment_popup"); popupInstance.$mount("#equipment_popup");
...@@ -1156,12 +1125,12 @@ export default { ...@@ -1156,12 +1125,12 @@ export default {
this.$refs.videoList?.destroyAll(); this.$refs.videoList?.destroyAll();
this.hideTb(); this.hideTb();
this.closeAllWs() this.closeAllWs()
.then(() => { .then(() => {
this.hideTb(); this.hideTb();
this[`switch${checkItem.label}`](); this[`switch${checkItem.label}`]();
}) })
.catch(() => { .catch(() => {
}); });
} else { } else {
if (beforeLabel === "fourth") { if (beforeLabel === "fourth") {
equipPopup?.remove(); equipPopup?.remove();
...@@ -1188,26 +1157,26 @@ export default { ...@@ -1188,26 +1157,26 @@ export default {
return item.code == options.originalColor; return item.code == options.originalColor;
}); });
let realColor = colorDesc let realColor = colorDesc
? dict.colorMatch[colorDesc.name] ? dict.colorMatch[colorDesc.name]
: "#fff"; : "#fff";
child.material.color.set(realColor); child.material.color.set(realColor);
} }
}); });
} }
model.setCoords([options.longitude, options.latitude]); model.setCoords([options.longitude, options.latitude]);
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 });
}, },
// 转换轨迹数据为geo 并更新轨迹图层 // 转换轨迹数据为geo 并更新轨迹图层
updateSelectVehcleTrack() { updateSelectVehcleTrack() {
if ( if (
this.selectVehicleTrackData && this.selectVehicleTrackData &&
this.selectVehicleTrackData.lnglat.length > 1 this.selectVehicleTrackData.lnglat.length > 1
) { ) {
let feature = turf.lineString( let feature = turf.lineString(
this.selectVehicleTrackData.lnglat, this.selectVehicleTrackData.lnglat,
this.selectVehicleTrackData.properties this.selectVehicleTrackData.properties
); );
let geo = turf.featureCollection([feature]); let geo = turf.featureCollection([feature]);
mapTools.addOrUpdateSelectVehicleTrack(map, geo); mapTools.addOrUpdateSelectVehicleTrack(map, geo);
...@@ -1270,10 +1239,10 @@ export default { ...@@ -1270,10 +1239,10 @@ export default {
offset: [0, -20], offset: [0, -20],
}); });
vehiclePopups[`popup${data.id}`] vehiclePopups[`popup${data.id}`]
.setLngLat([data.longitude, data.latitude]) .setLngLat([data.longitude, data.latitude])
.setHTML(`<div id="vehicle_popup${data.id}"></div>`) .setHTML(`<div id="vehicle_popup${data.id}"></div>`)
.addTo(map) .addTo(map)
.addClassName("vehicleDetailPopup"); .addClassName("vehicleDetailPopup");
vehiclePopups[`popup${data.id}`].on("close", () => { vehiclePopups[`popup${data.id}`].on("close", () => {
vehiclePopups[`popup${data.id}`] = null; vehiclePopups[`popup${data.id}`] = null;
delete vehiclePopups[`popup${data.id}`]; delete vehiclePopups[`popup${data.id}`];
...@@ -1288,7 +1257,7 @@ export default { ...@@ -1288,7 +1257,7 @@ export default {
}, },
}); });
vehiclePopupInstances[`popup${data.id}`].$mount( vehiclePopupInstances[`popup${data.id}`].$mount(
`#vehicle_popup${data.id}` `#vehicle_popup${data.id}`
); );
} }
}, },
...@@ -1329,8 +1298,8 @@ export default { ...@@ -1329,8 +1298,8 @@ export default {
// console.log("车辆总数", msg.length); // console.log("车辆总数", msg.length);
// 第一帧 || 时间戳不相同 => 放行 // 第一帧 || 时间戳不相同 => 放行
if ( if (
this.lastLocation.length === 0 || this.lastLocation.length === 0 ||
this.lastLocation[0].dateTime !== msg[0].dateTime this.lastLocation[0].dateTime !== msg[0].dateTime
) { ) {
this.situationTimeVal = msg[0].dateTime; this.situationTimeVal = msg[0].dateTime;
// zoom 大于 18 ： 移除圆点和图片图层 // zoom 大于 18 ： 移除圆点和图片图层
...@@ -1347,7 +1316,7 @@ export default { ...@@ -1347,7 +1316,7 @@ export default {
} else { } else {
this.clearLicense(); this.clearLicense();
this.removeLayers( this.removeLayers(
"lightLayer,lightLayerText,vehicleSelectWave,vehiclePic,waitingLayer" "lightLayer,lightLayerText,vehicleSelectWave,vehiclePic,waitingLayer"
); );
mapTools.addOrUpdateVehicle(map, msg); mapTools.addOrUpdateVehicle(map, msg);
map.on("click", "vehicle", this.vehicleCircleClick); map.on("click", "vehicle", this.vehicleCircleClick);
...@@ -1370,8 +1339,8 @@ export default { ...@@ -1370,8 +1339,8 @@ export default {
if (zoom > 18) { if (zoom > 18) {
// 新增 // 新增
if ( if (
item.dill === "add" || item.dill === "add" ||
(item.dill === "com" && !vehicleModels[item.id]) (item.dill === "com" && !vehicleModels[item.id])
) { ) {
this.addVehicleModels(item); this.addVehicleModels(item);
if (this.licenseState) this.addVehicleLicenses(item); if (this.licenseState) this.addVehicleLicenses(item);
...@@ -1392,8 +1361,8 @@ export default { ...@@ -1392,8 +1361,8 @@ export default {
if (item.dill === "com") { if (item.dill === "com") {
// 车型中途变化 清除并重新创建 // 车型中途变化 清除并重新创建
if ( if (
vehicleModels[key].userData.data.originalType !== vehicleModels[key].userData.data.originalType !==
item.originalType item.originalType
) { ) {
if (vehicleModels[key]) { if (vehicleModels[key]) {
window.tb.clear(item.id, true); window.tb.clear(item.id, true);
...@@ -1409,8 +1378,8 @@ export default { ...@@ -1409,8 +1378,8 @@ export default {
if (licenseLabel[`license${item.id}`]) { if (licenseLabel[`license${item.id}`]) {
// 如果车牌model存在且未改变 则setCoords // 如果车牌model存在且未改变 则setCoords
if ( if (
licenseLabel[`license${item.id}`].userData.data licenseLabel[`license${item.id}`].userData.data
.picLicense == item.picLicense .picLicense == item.picLicense
) { ) {
licenseLabel[`license${item.id}`].setCoords([ licenseLabel[`license${item.id}`].setCoords([
item.longitude, item.longitude,
...@@ -1479,9 +1448,9 @@ export default { ...@@ -1479,9 +1448,9 @@ export default {
let model = vehicleModelTypes[`car${option.originalType}`].duplicate(); let model = vehicleModelTypes[`car${option.originalType}`].duplicate();
this.setModel(model, option, true); this.setModel(model, option, true);
model.addEventListener( model.addEventListener(
"SelectedChange", "SelectedChange",
this.onSelectedChangeVehicle, this.onSelectedChangeVehicle,
false false
); );
vehicleModels[option.id] = model; vehicleModels[option.id] = model;
window.tb.add(model, option.id); window.tb.add(model, option.id);
...@@ -1492,9 +1461,8 @@ export default { ...@@ -1492,9 +1461,8 @@ export default {
let ele = document.createElement("div"); let ele = document.createElement("div");
ele.style.color = "white"; ele.style.color = "white";
ele.innerText = option.picLicense; ele.innerText = option.picLicense;
ele.style.backgroundImage = `url('${ ele.style.backgroundImage = `url('${mapAssets.mapIcons[`license${option.licenseColor}`]
mapAssets.mapIcons[`license${option.licenseColor}`] }')`;
}')`;
ele.style.backgroundSize = "100% 100%"; ele.style.backgroundSize = "100% 100%";
ele.style.fontSize = "8px"; ele.style.fontSize = "8px";
ele.style.textAlign = "center"; ele.style.textAlign = "center";
...@@ -1505,7 +1473,7 @@ export default { ...@@ -1505,7 +1473,7 @@ export default {
topMargin: 2, topMargin: 2,
}); });
license.setCoords([option.longitude, option.latitude, 4]); license.setCoords([option.longitude, option.latitude, 4]);
license.userData.data = {picLicense: option.picLicense}; license.userData.data = { picLicense: option.picLicense };
window.tb.add(license, `license${option.id}`); window.tb.add(license, `license${option.id}`);
licenseLabel[`license${option.id}`] = license; licenseLabel[`license${option.id}`] = license;
} }
...@@ -1531,14 +1499,14 @@ export default { ...@@ -1531,14 +1499,14 @@ export default {
for (let singleDirLight of dirsLights) { for (let singleDirLight of dirsLights) {
let stopLine = stopLineData.find((stop) => { let stopLine = stopLineData.find((stop) => {
return ( return (
stop.lkid == crossLight.crossId && stop.lkid == crossLight.crossId &&
stop.dirtype == singleDirLight.dir stop.dirtype == singleDirLight.dir
); );
}); });
if (stopLine) { if (stopLine) {
// 停止线往路口中心偏移0.8米 // 停止线往路口中心偏移0.8米
let resultStopLine = turf.lineString( let resultStopLine = turf.lineString(
JSON.parse(stopLine.geom).coordinates JSON.parse(stopLine.geom).coordinates
); );
let stopLineGeom = turf.lineOffset(resultStopLine, -0.0008, { let stopLineGeom = turf.lineOffset(resultStopLine, -0.0008, {
units: "kilometers", units: "kilometers",
...@@ -1547,8 +1515,8 @@ export default { ...@@ -1547,8 +1515,8 @@ export default {
splitPoints.left = stopLineGeom[0]; splitPoints.left = stopLineGeom[0];
splitPoints.right = stopLineGeom[stopLineGeom.length - 1]; splitPoints.right = stopLineGeom[stopLineGeom.length - 1];
splitPoints.center = turf.midpoint( splitPoints.center = turf.midpoint(
turf.point(splitPoints.left), turf.point(splitPoints.left),
turf.point(splitPoints.right) turf.point(splitPoints.right)
).geometry.coordinates; ).geometry.coordinates;
let lightNumSplitMap = { let lightNumSplitMap = {
1: ["center"], 1: ["center"],
...@@ -1557,7 +1525,6 @@ export default { ...@@ -1557,7 +1525,6 @@ export default {
let stopLineAngle = stopLine.angle; let stopLineAngle = stopLine.angle;
// 停止线对应的转向数组 只有属于此数组的才视为合法转向灯 // 停止线对应的转向数组 只有属于此数组的才视为合法转向灯
let stopLineTurns = stopLine.turntype.replace(",3", "").split(","); let stopLineTurns = stopLine.turntype.replace(",3", "").split(",");
console.log("stopLineTurns", stopLineTurns);
// 根据停止线 turntype 筛选合法灯组 // 根据停止线 turntype 筛选合法灯组
let newSingleDirTurnLightList = []; let newSingleDirTurnLightList = [];
for (let i = 0; i < singleDirLight.turnList.length; i++) { for (let i = 0; i < singleDirLight.turnList.length; i++) {
...@@ -1571,17 +1538,16 @@ export default { ...@@ -1571,17 +1538,16 @@ export default {
remainTime: newSingleDirTurnLightList[i].countDown || `-`, remainTime: newSingleDirTurnLightList[i].countDown || `-`,
turn: newSingleDirTurnLightList[i].turn, turn: newSingleDirTurnLightList[i].turn,
coordinates: coordinates:
splitPoints[lightNumSplitMap[stopLineTurns.length][i]], splitPoints[lightNumSplitMap[stopLineTurns.length][i]],
ts: `${newSingleDirTurnLightList[i].turn}${newSingleDirTurnLightList[i].color}`, ts: `${newSingleDirTurnLightList[i].turn}${newSingleDirTurnLightList[i].color}`,
lightAngle: stopLineAngle - 90, lightAngle: stopLineAngle - 90,
}); });
} }
} }
console.log("w", lightResults);
let targetWait = waitGeo.features.find((wait) => { let targetWait = waitGeo.features.find((wait) => {
return ( return (
wait.properties.lkid == crossLight.crossId && wait.properties.lkid == crossLight.crossId &&
wait.properties.dirtype == singleDirLight.dir wait.properties.dirtype == singleDirLight.dir
); );
}); });
if (targetWait) { if (targetWait) {
...@@ -1590,7 +1556,7 @@ export default { ...@@ -1590,7 +1556,7 @@ export default {
}); });
let color = currentWaiting?.color.replace("Flash", "") || "white"; let color = currentWaiting?.color.replace("Flash", "") || "white";
waitResultFeatures.push( waitResultFeatures.push(
turf.polygon(targetWait.geometry.coordinates, {state: color}) turf.polygon(targetWait.geometry.coordinates, { state: color })
); );
} }
} }
...@@ -1748,7 +1714,7 @@ export default { ...@@ -1748,7 +1714,7 @@ export default {
box-shadow: none !important; box-shadow: none !important;
} }
.mapboxgl-ctrl-group button + button { .mapboxgl-ctrl-group button+button {
border-top: unset !important; border-top: unset !important;
} }
......
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