Skip to content

H
holo-web
Commit 42b252d8 authored by ninglx's avatar ninglx
Browse files
Options

1

parent 631e3a2e
Show whitespace changes
Inline Side-by-side
Showing with 108 additions and 106 deletions
wj-manage-web/src/views/situation/index.vue
View file @ 42b252d8
......@@ -3,27 +3,27 @@
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"/>
<situation-time v-show="currentCheck === 'first' && timeState" class="situationTime" :time="situationTimeVal" />
<wMap :mapId="'situation-map'" ref="wMap" />
<!--左右图表组件-->
<message-boxes @playOverHistoryTrace="playOverHistoryTrace" @delWarningPopup="delWarningPopup"
@addWarningPopup="addWarningPopup" :show="boxesShow"/>
@addWarningPopup="addWarningPopup" :show="boxesShow" />
<!--图层切换按钮-->
<layers-switch ref="switch" :show="boxesShow" @changeCheck="changeCheck" @visibleChange="visibleChange"
:class="boxesShow ? 'generalSwitch' : 'rightSwitch'"/>
:class="boxesShow ? 'generalSwitch' : 'rightSwitch'" />
<!--视频播放组件-->
<video-list ref="videoList" v-if="showCameras.length" @updateCamera="updateCameraCPB" @resetCamera="resetCamera"
@delVideo="deleteVideo" :showCameras="showCameras"/>
@delVideo="deleteVideo" :showCameras="showCameras" />
<!--路口详情-->
<cross-detail v-if="dialogVisible.crossDetail" @actionFinished="actionFinished" dialogId="crossDetail"
:crossDetailData="crossDetailData"/>
: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'" />
<!--单车超限历史轨迹视频-->
<sigalTraceVideos @isReady="singalHistoryVideoReady" :urls="hisUrls" :key="sigalKey"
v-if="showHisVid"></sigalTraceVideos>
<sigalTraceVideos @isReady="singalHistoryVideoReady" :urls="hisUrls" :key="sigalKey" v-if="showHisVid">
</sigalTraceVideos>
</div>
</template>
......@@ -35,7 +35,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";
......@@ -60,7 +60,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);
......@@ -69,7 +69,7 @@ const AlarmPopup = Vue.extend(alarmPopup)
let pulsingDots = [];
const canvasImages = [
{size: 250, color: "252, 1, 26"},
{ size: 250, color: "252, 1, 26" },
// {size: 400, color: "255,235,59"},
// {size: 400, color: "255, 141, 26"},
// {size: 400, color: "227, 5, 5"},
......@@ -228,7 +228,7 @@ export default {
created() {
},
mounted() {
this.$EventBus.$on("emitPopupClose", ({id, overRun}) => {
this.$EventBus.$on("emitPopupClose", ({ id, overRun }) => {
console.log('eventbus event received...', id)
vehiclePopups[`popup${id}`]?.remove();
delete vehiclePopups[`popup${id}`];
......@@ -296,7 +296,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({
......@@ -370,12 +370,12 @@ export default {
this.closeWs('callCar1').then(() => {
this.removeVehiclePopup()
this.overCarsPoints = {}
this.highLightCarTracks = {}
this.openRealTime()
})
this.backToRealTimer = null
}, 1000 * 20)
if (socket.ws.readyState === 1) {
this.showHisVid = true
this.sockets.push(socket);
delete this.historyWsToSend.urls
let msg = JSON.stringify(this.historyWsToSend)
......@@ -404,6 +404,8 @@ export default {
// 开始请求视频
this.sigalKey = sendMsg.globalId
this.hisUrls = sendMsg.urls || []
// this.hisUrls = ['videos/1.mp4']
this.showHisVid = true
this.$nextTick(() => {
if (this.hisUrls.length) {
this.loading = true
......@@ -485,7 +487,7 @@ export default {
this.cLocation,
offsetLength, // 相机向前偏移距离
this.cBearing,
{units: "meters"}
{ units: "meters" }
).geometry.coordinates;
map.flyTo({
center: translatedPoint,
......@@ -537,13 +539,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();
......@@ -654,7 +656,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) => {
......@@ -751,7 +753,7 @@ export default {
let centerP = turf.point([map.getCenter().lng, map.getCenter().lat]);
// 取最近点的crossId
let nearest = turf.nearestPoint(centerP, this.crossGeo);
this.firstCrossClick({features: [nearest]})
this.firstCrossClick({ features: [nearest] })
}
//--------------------------------------------------------------------
// 注册车辆实时ws
......@@ -794,7 +796,7 @@ export default {
},
// 交通事件热力图 & 点
refreshEventLayer(type) {
eventInfo({dayType: type}).then((res) => {
eventInfo({ dayType: type }).then((res) => {
// 热力图 - 如果还未创建 先创建图层 赋值
if (this.currentCheck === "third") {
mapTools.addOrUpdateEventHeat(map, res.content);
......@@ -866,7 +868,7 @@ export default {
distance = 80;
}
let bearing = map.getBearing(); // 平移方向，0 表示正北方向
let options = {units: "meters"};
let options = { units: "meters" };
let translatedPoint = turf.destination(
prop.wkt.split(","),
distance,
......@@ -890,7 +892,7 @@ export default {
.addClassName("equipmentPopup");
popupInstance = new EquipmentPopup({
propsData: {
model: {equip_type: type, ...prop},
model: { equip_type: type, ...prop },
},
});
popupInstance.$mount("#equipment_popup");
......@@ -956,7 +958,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 });
},
// 更新超限车辆高亮波纹底盘
updateOverCarLnglat() {
......@@ -1000,14 +1002,13 @@ export default {
// 车辆详情弹窗内容
addCheckDetail(data) {
console.log('添加弹窗...');
if (vehiclePopups[`popup${data.id}`]) {
if (popupVises[`popup${data.id}`]) {
vehiclePopups[`popup${data.id}`].setLngLat([
data.longitude,
data.latitude,
]);
vehiclePopupInstances[`popup${data.id}`].$props.model = data;
vehiclePopupInstances[`popup${data.id}`] && (vehiclePopupInstances[`popup${data.id}`].$props.model = data)
}
// 更新选中车辆的轨迹数据
if (this.highLightCarTracks[data.id]) {
......@@ -1119,6 +1120,7 @@ export default {
}
} else {
vehiclePopups[`popup${item.id}`]?.remove();
delete this.highLightCarTracks[item.id]
delete this.selectVehicles[item.id]
}
}
......@@ -1302,7 +1304,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;
}
......@@ -1475,7 +1477,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