Skip to content

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

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

parent edfd140a
Show 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>
<div
class="main situation"
v-loading.fullscreen.lock="loading"
element-loading-text="数据加载中..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
>
<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"/>
<div class="main situation" v-loading.fullscreen.lock="loading" element-loading-text="数据加载中..."
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
<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
@delWarningPopup="delWarningPopup"
@addWarningPopup="addWarningPopup"
:show="boxesShow"
/>
<message-boxes @delWarningPopup="delWarningPopup" @addWarningPopup="addWarningPopup" :show="boxesShow" />
<!--图层切换按钮-->
<layers-switch
ref="switch"
:show="boxesShow"
@changeCheck="changeCheck"
@visibleChange="visibleChange"
:class="boxesShow ? 'generalSwitch' : 'rightSwitch'"
/>
<layers-switch ref="switch" :show="boxesShow" @changeCheck="changeCheck" @visibleChange="visibleChange"
:class="boxesShow ? 'generalSwitch' : 'rightSwitch'" />
<!--视频播放组件-->
<video-list
ref="videoList"
v-if="showCameras.length"
@updateCamera="updateCameraCPB"
@resetCamera="resetCamera"
@delVideo="deleteVideo"
:showCameras="showCameras"
/>
<video-list ref="videoList" v-if="showCameras.length" @updateCamera="updateCameraCPB" @resetCamera="resetCamera"
@delVideo="deleteVideo" :showCameras="showCameras" />
<!--路口详情-->
<cross-detail
v-if="dialogVisible.crossDetail"
@actionFinished="actionFinished"
dialogId="crossDetail"
:crossDetailData="crossDetailData"
/>
<cross-detail v-if="dialogVisible.crossDetail" @actionFinished="actionFinished" dialogId="crossDetail"
:crossDetailData="crossDetailData" />
<!--底部交通事件趋势分析-->
<traffic-events-tend
@updateHeatMap="refreshEventLayer"
v-if="currentCheck === 'third'"
/>
<traffic-events-tend @updateHeatMap="refreshEventLayer" v-if="currentCheck === 'third'" />
<!--设备图例控制-->
<equipment-switch
@equipmentChange="equipmentChange"
v-if="currentCheck === 'fourth'"
/>
<equipment-switch @equipmentChange="equipmentChange" v-if="currentCheck === 'fourth'" />
</div>
</template>
......@@ -71,7 +31,7 @@ import MessageBoxes from "./floatData/messageBoxes.vue";
import CrossDetail from "./crossDetail.vue";
import VideoList from "./floatData/videoList.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 mapAssets from "../../config/holo/mapAssets";
import * as mapTools from "../../utils/mapboxTools";
......@@ -92,7 +52,7 @@ import {
equip_radar,
getDetetors,
} from "../../dao/situation";
import {convertPointsToGeo, convertPointsWktToGeo, convertToLineWithWkt} from "../../utils/mapboxTools";
import { convertPointsToGeo, convertPointsWktToGeo, convertToLineWithWkt } from "../../utils/mapboxTools";
const VehiclePopup = Vue.extend(vehicleDetail);
const EquipmentPopup = Vue.extend(equipmentPopup);
......@@ -101,11 +61,11 @@ const AlarmPopup = Vue.extend(alarmPopup)
let pulsingDots = [];
const canvasImages = [
{size: 250, color: "252, 1, 26"},
{size: 400, color: "255,235,59"},
{size: 400, color: "255, 141, 26"},
{size: 400, color: "227, 5, 5"},
{size: 400, color: "24, 144, 255"},
{ size: 250, color: "252, 1, 26" },
{ size: 400, color: "255,235,59" },
{ size: 400, color: "255, 141, 26" },
{ size: 400, color: "227, 5, 5" },
{ size: 400, color: "24, 144, 255" },
];
for (let i = 0; i < canvasImages.length; i++) {
let size = canvasImages[i].size;
......@@ -275,6 +235,9 @@ export default {
}
Promise.all(queue).then(() => {
this.pageInit();
if (this.$store.state.mapInit.center) {
this.boxesShow = false
}
});
},
methods: {
......@@ -287,7 +250,7 @@ export default {
// 重度拥堵: 3,
// 疑似事故: 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);
// 上报产生的告警 弹窗提醒 定时销毁
let popup = new mapboxgl.Popup({
......@@ -423,7 +386,7 @@ export default {
this.cLocation,
offsetLength, // 相机向前偏移距离
this.cBearing,
{units: "meters"}
{ units: "meters" }
).geometry.coordinates;
map.flyTo({
center: translatedPoint,
......@@ -451,8 +414,8 @@ export default {
map = this.$refs.wMap.initMap();
window.map = map;
map.on("style.load", () => {
map.on('dblclick',()=>{
console.log('center '+map.getCenter()+' pitch '+map.getPitch()+' bearing '+map.getBearing()+' zoom '+map.getZoom())
map.on('dblclick', () => {
console.log('center ' + map.getCenter() + ' pitch ' + map.getPitch() + ' bearing ' + map.getBearing() + ' zoom ' + map.getZoom())
})
map.setFog({
color: "#1d3244", // Lower atmosphere
......@@ -476,13 +439,13 @@ export default {
}
for (let i = 0; i < pulsingDots.length; 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
this.loading = false;
this.mixDraw(map);
map.addControl(
new mapboxgl.NavigationControl({showZoom: false}),
new mapboxgl.NavigationControl({ showZoom: false }),
"bottom-right"
);
this.refreshBounds();
......@@ -593,7 +556,7 @@ export default {
type: "gltf",
units: "meters",
scale: 0.8,
adjustment: {x: 0.5, y: 1, z: -0.5},
adjustment: { x: 0.5, y: 1, z: -0.5 },
bbox: true,
};
window.tb.loadObj(options, (model) => {
......@@ -607,7 +570,7 @@ export default {
type: "gltf",
units: "meters",
scale: 10,
adjustment: {x: 0.5, y: 1, z: -0.5},
adjustment: { x: 0.5, y: 1, z: -0.5 },
bbox: false,
},
(model) => {
......@@ -637,14 +600,16 @@ export default {
solveRadarDatas() {
let milliFeatures = [];
console.log("radars...", this.radarDatas);
let timer = setInterval(() => {
if (radarModelTypes[1] && radarModelTypes[2]) {
clearInterval(timer)
for (let i = 0; i < this.radarDatas.length; i++) {
//2 毫米波 other 激光雷达
let model =
radarModelTypes[this.radarDatas[i].sourceEquipType]?.duplicate();
if (model) {
radarModelTypes[this.radarDatas[i].sourceEquipType].duplicate();
model.setCoords(this.radarDatas[i].wkt.split(","));
model.userData.data = this.radarDatas[i];
model.setRotation({x: 90, y: 360 - 90, z: 0});
model.setRotation({ x: 90, y: 360 - 90, z: 0 });
window.tb.add(
model,
`radar${i}${this.radarDatas[i].sourceEquipType}`
......@@ -664,9 +629,11 @@ export default {
milliFeatures.push(turf.polygon(arcScope, this.radarDatas[i]));
}
}
}
let milliGeo = turf.featureCollection(milliFeatures);
mapTools.addOrUpdateMilliScope(map, milliGeo);
}
}, 1000)
},
loadRadars() {
if (this.radarDatas.length) {
......@@ -770,7 +737,7 @@ export default {
} else {
clearInterval(timer);
}
}, 45-map.getZoom()*2);
}, 45 - map.getZoom() * 2);
radarTimers.push(timer);
},
convertPxToMeter(meter, zoom, latitude) {
......@@ -824,7 +791,7 @@ export default {
//----------------------------------------
if (!this.detetorsStatus) {
// let wsUrl= ws_config.BASE_URL
let wsUrl= `ws://${window.wsHost}/holows/subscribe`
let wsUrl = `ws://${window.wsHost}/holows/subscribe`
let ws1 = initWs({
name: "callDetetorA",
url: wsUrl,
......@@ -943,11 +910,19 @@ export default {
}, 100);
this.layerShowRenders = true;
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
})
this.crossGeo = convertPointsToGeo(arr)
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
let socket = initWs({
name: "callCar",
......@@ -972,7 +947,7 @@ export default {
if (!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();
});
......@@ -1023,7 +998,7 @@ export default {
// 交通事件热力图 & 点
refreshEventLayer(type) {
eventInfo({dayType: type}).then((res) => {
eventInfo({ dayType: type }).then((res) => {
// 热力图 - 如果还未创建 先创建图层 赋值
if (this.currentCheck === "third") {
mapTools.addOrUpdateEventHeat(map, res.content);
......@@ -1085,12 +1060,6 @@ export default {
layers: ["camera", "milli", "radar", "signal", "weather"],
});
if (features.length) {
console.log(
"fff",
features,
features[0].properties,
features[0].layer.id
);
let prop = features[0].properties;
let type = features[0].layer.id;
if (prop.status == "1") {
......@@ -1102,9 +1071,9 @@ export default {
//信号机popup窗口高度过高 加大偏移防止超出屏幕
distance = 80;
}
var bearing = map.getBearing(); // 平移方向，0 表示正北方向
var options = {units: "meters"};
var translatedPoint = turf.destination(
let bearing = map.getBearing(); // 平移方向，0 表示正北方向
let options = { units: "meters" };
let translatedPoint = turf.destination(
prop.wkt.split(","),
distance,
bearing,
......@@ -1127,7 +1096,7 @@ export default {
.addClassName("equipmentPopup");
popupInstance = new EquipmentPopup({
propsData: {
model: {equip_type: type, ...prop},
model: { equip_type: type, ...prop },
},
});
popupInstance.$mount("#equipment_popup");
......@@ -1196,7 +1165,7 @@ export default {
}
model.setCoords([options.longitude, options.latitude]);
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 并更新轨迹图层
......@@ -1492,8 +1461,7 @@ export default {
let ele = document.createElement("div");
ele.style.color = "white";
ele.innerText = option.picLicense;
ele.style.backgroundImage = `url('${
mapAssets.mapIcons[`license${option.licenseColor}`]
ele.style.backgroundImage = `url('${mapAssets.mapIcons[`license${option.licenseColor}`]
}')`;
ele.style.backgroundSize = "100% 100%";
ele.style.fontSize = "8px";
......@@ -1505,7 +1473,7 @@ export default {
topMargin: 2,
});
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}`);
licenseLabel[`license${option.id}`] = license;
}
......@@ -1557,7 +1525,6 @@ export default {
let stopLineAngle = stopLine.angle;
// 停止线对应的转向数组 只有属于此数组的才视为合法转向灯
let stopLineTurns = stopLine.turntype.replace(",3", "").split(",");
console.log("stopLineTurns", stopLineTurns);
// 根据停止线 turntype 筛选合法灯组
let newSingleDirTurnLightList = [];
for (let i = 0; i < singleDirLight.turnList.length; i++) {
......@@ -1577,7 +1544,6 @@ export default {
});
}
}
console.log("w", lightResults);
let targetWait = waitGeo.features.find((wait) => {
return (
wait.properties.lkid == crossLight.crossId &&
......@@ -1590,7 +1556,7 @@ export default {
});
let color = currentWaiting?.color.replace("Flash", "") || "white";
waitResultFeatures.push(
turf.polygon(targetWait.geometry.coordinates, {state: color})
turf.polygon(targetWait.geometry.coordinates, { state: color })
);
}
}
......@@ -1748,7 +1714,7 @@ export default {
box-shadow: none !important;
}
.mapboxgl-ctrl-group button + button {
.mapboxgl-ctrl-group button+button {
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