Skip to content

H
holo-web
Commit 22eab69a authored by ninglx's avatar ninglx
Browse files
Options

大屏完善

parent c525ac18
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1008 additions and 562 deletions
wj-data-vision/public/config.js
View file @ 22eab69a
const map_config = {
SYS_ID: 'CAFC20296895433784C193457A870DFD',
MAP_CENTER: [112.96329354011971, 28.18659738574327],
MAP_CENTER: [112.96284186666799, 28.187102143508625],
MAP_ZOOM: 17.048587811931856,
MAX_ZOOM: 20,
MAP_PITCH: 0,
MAP_ROTATE: 90,
......@@ -18,8 +20,11 @@ const api_config = {
}
const video_config = {
intersectionGroupsVideoUrl: 'http://192.168.2.80/live?app=demo&stream=cloudpoint-1',
//2023-04-11 10:29:36_2023-04-11 10:34:36
groupViewStartTime: '2023-04-11 10:29:36',
//2023-04-10 00:47:20_2023-04-10 00:49:46
accidentViewStartTime: '2023-04-10 00:47:20',
//2023-04-09 01:28:10_2023-04-09 01:28:40
dangerViewStartTime: '2023-04-09 01:28:10',
dronesViewStartTime: '2023-04-09 01:28:10',
mobileViewStartTime: '2023-04-11 20:58:45',
......
wj-data-vision/src/components/Standard/localCamera.vue
View file @ 22eab69a
......@@ -24,9 +24,10 @@ export default {
},
methods: {
setTime(time) {
console.log('视频重置。。。', new Date().getTime() / 1000)
let el = document.getElementById(this.videoData)
console.log('video 差值 setCurrentTime', time)
el.currentTime = time
// console.log('video 差值 setCurrentTime', time)
el.currentTime = 0
el.play()
}
},
......@@ -52,10 +53,12 @@ export default {
.cameraVideo {
position: relative;
.videoControl {
position: absolute;
height: 100%;
width: 100%;
//width: 100%;
width: calc(100% - 5px);
height: calc(100% - 5px);
padding: 1px;
}
}
......@@ -66,8 +69,8 @@ export default {
.top-left {
position: absolute;
left: -1px;
top: -1px;
left: -2px;
top: -2px;
padding: 6px;
border-style: solid;
border-color: #1889f1;
......@@ -76,8 +79,8 @@ export default {
.top-right {
position: absolute;
right: -1px;
top: -1px;
right: -2px;
top: -2px;
padding: 6px;
border-style: solid;
border-color: #1889f1;
......@@ -86,8 +89,8 @@ export default {
.bottom-left {
position: absolute;
right: -1px;
bottom: -1px;
right: -2px;
bottom: -2px;
padding: 6px;
border-style: solid;
border-color: #1889f1;
......@@ -96,8 +99,8 @@ export default {
.bottom-right {
position: absolute;
left: -1px;
bottom: -1px;
left: -2px;
bottom: -2px;
padding: 6px;
border-style: solid;
border-color: #1889f1;
......
wj-data-vision/src/config/holo/dictionary.js
View file @ 22eab69a
......@@ -2,33 +2,33 @@ export default {
vehicleTypes: {
0: '未知',
1: '小客车',
2: '大货车',
// 2: '大货车',
3: '大巴车',
4: '行人',
5: '自行车',
// 5: '自行车',
6: '电动车',
7: '中巴车',
8: '危化车',
// 8: '危化车',
// 9: '以撒物',
10: '小货车',
11: '中货车',
12: '救护车',
// 12: '救护车',
// 13: '消防车',
14: '机动摩托车',
15: '小巴车',
150: '外卖车',
151: '外卖车（美团）',
152: '外卖车（饿了么）',
153: '外卖车（肯德基）',
154: '外卖车（麦当劳）',
160: '快递车',
// 14: '机动摩托车',
// 15: '小巴车',
// 150: '外卖车',
// 151: '外卖车（美团）',
// 152: '外卖车（饿了么）',
// 153: '外卖车（肯德基）',
// 154: '外卖车（麦当劳）',
// 160: '快递车',
// 161: '快递车（京东）',
// 162: '快递车（顺丰）',
// 163: '快递车（申通）',
// 164: '快递车（圆通）',
// 165: '快递车（中通）',
// 166: '快递车（韵达）',
170: '货车-车轴型为11',
// 170: '货车-车轴型为11',
// 171: '货车-车轴型为12',
// 172: '货车-车轴型为15',
// 173: '货车-车轴型为122',
......
wj-data-vision/src/config/holo/mapAssets.js
View file @ 22eab69a
......@@ -9,19 +9,32 @@ export default {
sign: require('../../assets/images/holo/xhj.png'),
homeCamera: require('../../assets/images/sc/crossCamera.png'),
light11: require('../../assets/images/sc/leftRed.png'),
light12: require('../../assets/images/sc/leftYellow.png'),
light13: require('../../assets/images/sc/leftGreen.png'),
// light11: require('../../assets/images/sc/leftRed.png'),
// light12: require('../../assets/images/sc/leftYellow.png'),
// light13: require('../../assets/images/sc/leftGreen.png'),
// light21: require('../../assets/images/sc/sRed.png'),
// light22: require('../../assets/images/sc/sYellow.png'),
// light23: require('../../assets/images/sc/sGreen.png'),
// light31: require('../../assets/images/sc/rightRed.png'),
// light32: require('../../assets/images/sc/rightYellow.png'),
// light33: require('../../assets/images/sc/rightGreen.png'),
// light41: require('../../assets/images/sc/backRed.png'),
// light42: require('../../assets/images/sc/backYellow.png'),
// light43: require('../../assets/images/sc/backGreen.png'),
light11: require('../../assets/images/sc/rightRed.png'),
light12: require('../../assets/images/sc/rightYellow.png'),
light13: require('../../assets/images/sc/rightGreen.png'),
light21: require('../../assets/images/sc/sRed.png'),
light22: require('../../assets/images/sc/sYellow.png'),
light23: require('../../assets/images/sc/sGreen.png'),
light31: require('../../assets/images/sc/rightRed.png'),
light32: require('../../assets/images/sc/rightYellow.png'),
light33: require('../../assets/images/sc/rightGreen.png'),
light31: require('../../assets/images/sc/leftRed.png'),
light32: require('../../assets/images/sc/leftYellow.png'),
light33: require('../../assets/images/sc/leftGreen.png'),
light41: require('../../assets/images/sc/backRed.png'),
light42: require('../../assets/images/sc/backYellow.png'),
light43: require('../../assets/images/sc/backGreen.png'),
// light
light43: require('../../assets/images/sc/backGreen.png'), // light
// 1hong 2huang 3lv
// 1zuo 2zhi 3you
// light11: require(''), // 左转红色
......
wj-data-vision/src/utils/l7Tools.js
View file @ 22eab69a
import {PointLayer, RasterLayer, LineLayer, HeatmapLayer, PolygonLayer} from '@antv/l7'
export function addLightLayer1(scene, msg) {
const pointLayer = new PointLayer({layerType: 'fillImage'})
const pointLayer = new PointLayer({layerType: 'fillImage', zIndex: 9})
.source(msg, {
parser: {
type: 'json', x: 'longitude', y: 'latitude',
......@@ -25,7 +25,7 @@ export function addLightLayer1(scene, msg) {
}
export function addLightTextLayer1(scene, msg) {
const pointLayer = new PointLayer({layerType: 'fillText'})
const pointLayer = new PointLayer({layerType: 'fillText', zIndex: 9})
.source(msg, {
parser: {
type: 'json', x: 'longitude', y: 'latitude',
......@@ -36,6 +36,7 @@ export function addLightTextLayer1(scene, msg) {
})
.shape('remainTime', 'text')
.style({
fontWeight: 600,
blur: 1, rotation: 85, textAllowOverlap: true, textOffset: [0, -5],
})
.size(14)
......@@ -58,7 +59,7 @@ export function addLightTextLayer1(scene, msg) {
}
export function addLightLayer(scene, msg) {
const pointLayer = new PointLayer({layerType: 'fillImage'})
const pointLayer = new PointLayer({layerType: 'fillImage', zIndex: 9})
.source(msg, {
parser: {
type: 'json', x: 'longitude', y: 'latitude',
......@@ -82,7 +83,7 @@ export function addLightLayer(scene, msg) {
}
export function addLightTextLayer(scene, msg) {
const pointLayer = new PointLayer({layerType: 'fillText'})
const pointLayer = new PointLayer({layerType: 'fillText', zIndex: 9})
.source(msg, {
parser: {
type: 'json', x: 'longitude', y: 'latitude',
......@@ -93,6 +94,7 @@ export function addLightTextLayer(scene, msg) {
})
.shape('remainTime', 'text')
.style({
fontWeight: 600,
blur: 1, rotation: 95, textAllowOverlap: true, textOffset: [0, -5],
})
.size(14)
......@@ -181,7 +183,7 @@ export function addConflictPoint(scene, msg) {
.style({
blur: 1,
})
.size(20)
.size(30)
.color('#efba0a')
scene.addLayer(pointLayer)
return pointLayer
......@@ -278,10 +280,10 @@ export function addLicenseLayer(scene, msg) {
type: 'json', x: 'longitude', y: 'latitude',
},
})
// .shape('picLicense', 'text')
.shape('id', 'text')
// .size(10)
.size(14)
.shape('picLicense', 'text')
// .shape('id', 'text')
.size(10)
// .size(14)
.style({
textAllowOverlap: true, raisingHeight: 10, stroke: '#01309b', strokeWidth: 2, halo: 1,
})
......
wj-data-vision/src/views/accidentScene/index.vue
View file @ 22eab69a
......@@ -2,7 +2,7 @@
<div class="main" v-loading.fullscreen.lock="loading" element-loading-text="数据加载中.."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)">
<!-- <close-license @changeState="changeState()"/>-->
<!-- <close-license @changeState="changeState()"/>-->
<WMap :mapId="'situation-map'" ref="wMap"/>
<home-left ref="refVideo"/>
<home-right ref="right"/>
......@@ -40,6 +40,7 @@ import {getCameraListByType} from '../../dao/api'
import * as l7Tools from "../../utils/l7Tools";
import vehicleDetail from "./mapPopup/vehicleDetail.vue";
import vehicleDetail1 from "./mapPopup/vehicleDetailBottom.vue";
import * as myMixin from "../setColor";
const VehiclePopup = Vue.extend(vehicleDetail)
const VehiclePopup1 = Vue.extend(vehicleDetail1)
......@@ -85,7 +86,9 @@ export default {
trackLine: [],
trackLine1: [],
timeout: null,
licenseState: true
licenseState: false,
flag: 0,
lastMsg: [],
};
},
watch: {},
......@@ -159,6 +162,7 @@ export default {
bbox: true,
}, (model) => {
vehicleModelTypes[`car${key}`] = model;
this.vehicleModelsNum += 1
});
}
},
......@@ -178,6 +182,7 @@ export default {
// 更新经纬度-角度-详细信息-弹窗信息
setModel(model, options, setColor) {
if (setColor) {
// myMixin.setPasserbyColor(options, model)
// model.traverse((child) => {
// if (child.isMesh && child.name.includes("_19")) {
// child.material = child.material.clone();
......@@ -224,13 +229,14 @@ export default {
for (let item of allData) {
// 交通事故车辆popup标注&更新
if (item.picLicense === '鄂A51998') { // todo: 参与交通事件的车辆 特殊字段
if (!layers.first.trackLineLayer) {
this.trackLine = []
// if (!layers.first.trackLineLayer) {
// this.trackLine = []
// }
console.log('flag', this.flag)
if (this.flag !== 1) {
this.trackLine.push([item.longitude, item.latitude])
}
if (!layers.first.trackLineLayer1) {
this.trackLine1 = []
}
this.trackLine.push([item.longitude, item.latitude])
// console.log('tttttttttttttttttttttttt', this.trackLine)
if (this.trackLine.length > 1) {
let g = turf.lineString(this.trackLine)
......@@ -265,6 +271,9 @@ export default {
}
}
if (item.picLicense === '湘A03V6Y') { // todo: 参与交通事件的车辆 特殊字段
// if (!layers.first.trackLineLayer1) {
// this.trackLine1 = []
// }
this.trackLine1.push([item.longitude, item.latitude])
if (this.trackLine1.length > 1) {
let g = turf.lineString(this.trackLine1)
......@@ -299,7 +308,7 @@ export default {
}
// 新增
if (item.dill === "add") {
console.log('type', item.originalType)
// console.log('type', item.originalType)
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
......@@ -325,7 +334,7 @@ export default {
if (item.dill === 'com') {
//车型变化
if (window.tb.world.children[i].userData.data.originalType === item.originalType) {
this.setModel(window.tb.world.children[i], item, false);
this.setModel(window.tb.world.children[i], item, true);
} else {
window.tb.clear(item.id, true)
let model =
......@@ -346,8 +355,13 @@ export default {
// console.log('count...', window.tb.world.children.length)
},
callCar(msg) {
if (scene) {
if (this.lastMsg.length && Math.abs(new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000 > 5) {
// if (this.lastMsg.length && new Date(this.lastMsg[0].dateTime).getTime() > new Date(msg[0].dateTime).getTime()) {
this.$refs.refVideo.startVideo()
this.$refs.right.startVideo()
}
this.lastMsg = msg
if (scene && this.vehicleModelsNum === 8) {
this.$store.commit('setCurrentTime', msg[0].dateTime)
if (this.msgStart) {
let realTimeStart = new Date(video_config.accidentViewStartTime).getTime()
......@@ -383,6 +397,7 @@ export default {
window.tb.world.visible = true;
let allData = this.diff(this.lastLocation, msg);
if (this.lastLocation[0] && new Date(msg[0].dateTime).getTime() < new Date(this.lastLocation[0].dateTime).getTime()) {
this.flag = 1
layers.first.trackLineLayer && scene.removeLayer(layers.first.trackLineLayer)
layers.first.trackLineLayer = null
layers.first.trackLineLayer1 && scene.removeLayer(layers.first.trackLineLayer1)
......@@ -392,9 +407,11 @@ export default {
this.trackLine = []
this.trackLine1 = []
}
this.lastLocation = msg;
this.addDelUpdateVehicleModels(allData);
this.licenseState ? this.addOrUpdateLicense(msg) : layers.first.license.hide()
this.licenseState ? this.addOrUpdateLicense(msg) : hide(layers.first.license)
this.flag += 1
// this.addOrUpdateLicense(msg)
// this.lastLocation = [];
......@@ -508,6 +525,10 @@ export default {
,
beforeDestroy() {
layers.first.trackLineLayer = null
layers.first.trackLineLayer1 = null
scene?.removeAllLayer()
layers.first.license = null
console.log('acci destroy')
this.closeWs();
// window.tb.clear()
......
wj-data-vision/src/views/accidentScene/left/index.vue
View file @ 22eab69a
......@@ -3,7 +3,8 @@
<div class="topI">
<msg-card title="事故现场监控">
<div class="videos">
<local-camera ref="videoItem" class="videoItem" v-for="item of 4" :video-data="`sgcj_${item}`"/>
<!-- <local-camera ref="videoItem" class="videoItem" v-for="item of 4" :video-data="`sgcj_${item}`"/>-->
<local-camera ref="videoItem" class="videoItem" v-for="item of [3]" :video-data="`sgcj_${item}`"/>
<!-- <camera-video :auto-play="true" class="videoItem" v-for="item of cameras" :video-data="item.videoUrl"/>-->
<span class="top-left"></span>
<span class="top-right"></span>
......@@ -71,6 +72,7 @@
<div class="gradiantPoint">
<div v-for="item of 10" :class="[`point${item}`]" class="pointItem">
<div v-show="item===arrowIndex" class="arrow-down"></div>
<div class="text-t">{{indexMap[item]}}</div>
</div>
</div>
</msg-card>
......@@ -91,6 +93,13 @@ export default {
computed: {},
data() {
return {
indexMap:{
1:'低',
2:'较低',
3:'中',
5:'高',
10:'较高',
},
cameras: [],
location: ['路口', '路段', '高架桥'],
locationVal: 0,
......@@ -106,12 +115,18 @@ export default {
rows: [
{label: '事故时间', value: '2023-04-10 00:47:37'},
{label: '事故地点', value: '湘江中路与劳动西路交叉口内'},
{label: '事故描述', value: '疑似多车事故：鄂A51998与湘A03V6Y由南进口驶入路口，疑似发生追尾事故。'},
// {label: '事故描述', value: '疑似多车事故：鄂A51998与湘A03V6Y由南进口驶入路口，疑似发生追尾事故。'},
{label: '事故描述', value: '疑似多车事故：北A47659与北A64N95由南进口驶入路口，疑似发生追尾事故。'},
// {
// label: '定责建议',
// value: '湘A03V6Y在正常行驶的道路上停车，导致追尾事故负主要责任，鄂A51998未保持安全车距负次要责任。'
// },
{
label: '定责建议',
value: '湘A03V6Y在正常行驶的道路上停车，导致追尾事故负主要责任，鄂A51998未保持安全车距负次要责任。'
value: '北A47659在正常行驶的道路上停车，导致追尾事故负主要责任，北A64N95未保持安全车距负次要责任。'
},
{label: '辅助信息', value: '鄂A51998 疑似追尾 湘A03V6Y'},
// {label: '辅助信息', value: '鄂A51998 疑似追尾 湘A03V6Y'},
{label: '辅助信息', value: '北A64N95 疑似追尾 北A47659'},
],
};
},
......@@ -314,8 +329,8 @@ export default {
height: 100%;
.videoItem {
width: 49%;
height: 49%;
width: 100%;
height: 100%;
position: relative;
}
}
......@@ -365,7 +380,14 @@ export default {
height: 18px;
position: relative;
border-radius: 4px;
.text-t{
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 28px;
width: 30px;
text-align: center;
}
.arrow-down {
position: absolute;
left: 50%;
......
wj-data-vision/src/views/accidentScene/mapPopup/vehicleDetail.vue
View file @ 22eab69a
<template>
<div class="vehicleDetail">
<div class="head">
<span></span>{{ model.picLicense }}
<!-- <span></span>{{ model.picLicense }}-->
<span></span>北A30G79
</div>
<div class="content">
<div class="detailItem">
<span class="left">速度：</span
>{{ dSpeed }}
>{{ model.speed }}
</div>
<div class="detailItem">
<span class="left">角度：</span
>{{ angle }}
>{{ model.courseAngle }}
</div>
<div class="detailItem">
<span class="left">行为：</span
......
wj-data-vision/src/views/accidentScene/mapPopup/vehicleDetailBottom.vue
View file @ 22eab69a
<template>
<div class="vehicleDetail">
<div class="head">
<span></span>{{ model.picLicense }}
<!-- <span></span>{{ model.picLicense }}-->
<span></span>北A47659
</div>
<div class="content">
<div class="detailItem">
<span class="left">速度：</span
>{{ dSpeed }}
>{{ model.speed }}
</div>
<div class="detailItem">
<span class="left">角度：</span
>{{ angle }}
>{{ model.courseAngle }}
</div>
<div class="detailItem">
<span class="left">行为：</span
......
wj-data-vision/src/views/accidentScene/right/index.vue
View file @ 22eab69a
......@@ -143,14 +143,14 @@ export default {
.top {
height: 49%;
padding: 13px;
//padding: 13px;
position: relative;
border: 1px solid rgba(24, 144, 255, 0.4);
}
.bottom {
height: 49%;
padding: 13px;
//padding: 13px;
border: 1px solid rgba(24, 144, 255, 0.4);
position: relative;
......
wj-data-vision/src/views/dangerousDriving/index.vue
View file @ 22eab69a
......@@ -2,7 +2,7 @@
<div class="main" v-loading.fullscreen.lock="loading" element-loading-text="数据加载中.."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)">
<!-- <close-license @changeState="changeState()"/>-->
<!-- <close-license @changeState="changeState()"/>-->
<WMap :mapId="'situation-map'" ref="wMap"/>
<home-left ref="refVideo"/>
......@@ -37,6 +37,7 @@ import wsSource from "../../config/holo/wsSource";
import {initWs} from "../../config/holo/websocket";
import * as l7Tools from "../../utils/l7Tools";
import vehicleDetail from "./mapPopup/vehicleDetail.vue";
import * as myMixin from "../setColor";
const VehiclePopup = Vue.extend(vehicleDetail)
......@@ -78,7 +79,8 @@ export default {
trackLine: [],
dangerVehicleDetail: null,
msgStart: true,
licenseState:true,
licenseState: false,
lastMsg:[],
};
},
watch: {},
......@@ -117,16 +119,17 @@ export default {
});
scene.on("zoomend", (e) => {
console.log(map.getCenter(), map.getZoom(), map.getBearing(), map.getPitch())
this.refreshBounds()
});
scene.on('moveend', () => {
this.refreshBounds()
})
map.on('style.load', () => {
//{lng: 112.9632374898274, lat: 28.183222051456866} 18.696563684834075 95 0
map.flyTo({
center: [112.96311321550195, 28.18374632714672],
zoom: 18.981829865122897,
center: [112.9632374898274, 28.183222051456866],
zoom: 18.696563684834075,
bearing: 95,
pitch: 0
})
......@@ -183,6 +186,7 @@ export default {
// 更新经纬度-角度-详细信息-弹窗信息
setModel(model, options, setColor) {
if (setColor) {
// myMixin.setPasserbyColor(options, model)
// model.traverse((child) => {
// if (child.isMesh && child.name.includes("_19")) {
// child.material = child.material.clone();
......@@ -222,82 +226,88 @@ export default {
},
// 根据处理后的数组新增-删除-更新模型
addDelUpdateVehicleModels(allData) {
if (this.vehicleModelsNum === 21) {
for (let item of allData) {
// 危险驾驶popup标注&更新
// if (item.eventType?.length) {
if (item.picLicense === '鄂A51998') { // todo: 参与危险驾驶的车辆 特殊字段
this.trackLine.push([item.longitude, item.latitude])
if (this.trackLine.length > 1) {
let g = turf.lineString(this.trackLine)
let geo = turf.featureCollection([g])
if (!layers.first.trackLineLayer) {
layers.first.trackLineLayer = l7Tools.addTrackLineLayer(scene, geo)
} else {
layers.first.trackLineLayer.setData(geo)
}
// if (this.vehicleModelsNum === 21) {
for (let item of allData) {
// 危险驾驶popup标注&更新
// if (item.eventType?.length) {
if (item.picLicense === '鄂A51998') { // todo: 参与危险驾驶的车辆 特殊字段
this.trackLine.push([item.longitude, item.latitude])
if (this.trackLine.length > 1) {
let g = turf.lineString(this.trackLine)
let geo = turf.featureCollection([g])
if (!layers.first.trackLineLayer) {
layers.first.trackLineLayer = l7Tools.addTrackLineLayer(scene, geo)
} else {
layers.first.trackLineLayer.setData(geo)
}
popupDanger = new Popup({
offsets: [-100, 280],
closeButton: false,
closeButtonOffsets: [-200, 17],
// autoPan: true,
})
.setLngLat([item.longitude, item.latitude])
.setHTML(`<div id="vehicle_popup${item.id}"></div>`)
scene.addPopup(popupDanger);
new VehiclePopup({
propsData: {
model: item,
},
}).$mount(`#vehicle_popup${item.id}`);
}
// 新增
if (item.dill === "add") {
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
window.tb.add(model, item.id);
} else {
for (let i = 0; i < window.tb.world.children.length; i++) {
if (window.tb.world.children[i].userData.data.id === item.id) {
if (item.dill === 'del') {
window.tb.clear(item.id, true)
if (item.picLicense === '鄂A51998') {
popupDanger?.hide()
}
popupDanger = new Popup({
offsets: [-100, 280],
closeButton: false,
closeButtonOffsets: [-200, 17],
// autoPan: true,
})
.setLngLat([item.longitude, item.latitude])
.setHTML(`<div id="vehicle_popup${item.id}"></div>`)
scene.addPopup(popupDanger);
new VehiclePopup({
propsData: {
model: item,
},
}).$mount(`#vehicle_popup${item.id}`);
}
// 新增
if (item.dill === "add") {
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
window.tb.add(model, item.id);
} else {
for (let i = 0; i < window.tb.world.children.length; i++) {
if (window.tb.world.children[i].userData.data.id === item.id) {
if (item.dill === 'del') {
window.tb.clear(item.id, true)
if (item.picLicense === '鄂A51998') {
popupDanger?.hide()
}
if (item.dill === 'com') {
//车型变化
if (window.tb.world.children[i].userData.data.originalType === item.originalType) {
this.setModel(window.tb.world.children[i], item, false);
} else {
window.tb.clear(item.id, true)
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
window.tb.add(model, item.id);
}
}
if (item.dill === 'com') {
//车型变化
if (window.tb.world.children[i].userData.data.originalType === item.originalType) {
this.setModel(window.tb.world.children[i], item, true);
} else {
window.tb.clear(item.id, true)
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
window.tb.add(model, item.id);
}
}
}
}
}
// console.log('count...', window.tb.world.children.length)
}
// console.log('count...', window.tb.world.children.length)
// }
},
callCar(msg) {
if (scene) {
if (this.lastMsg.length && Math.abs(new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000 > 5) {
// if (this.lastMsg.length && new Date(this.lastMsg[0].dateTime).getTime() > new Date(msg[0].dateTime).getTime()) {
this.$refs.refVideo.startVideo()
this.$refs.rightDangerVideo.startVideo()
}
this.lastMsg = msg
if (scene && this.vehicleModelsNum === 8) {
this.$store.commit('setCurrentTime', msg[0].dateTime)
if (this.msgStart) {
let realTimeStart = new Date(video_config.dangerViewStartTime).getTime()
......@@ -367,21 +377,21 @@ export default {
if (!layers.first.license) {
layers.first.license = l7Tools.addLicenseLayer(scene, msg);
} else {
for (let msgItem of msg) {
for (let old of layers.first.license.encodedData) {
if (
msgItem.picLicense === old.shape &&
turf.distance(
[msgItem.longitude, msgItem.latitude],
old.coordinates,
{units: "kilometers"}
) < 0.0005
) {
msgItem.longitude = old.coordinates[0];
msgItem.latitude = old.coordinates[1];
}
}
}
// for (let msgItem of msg) {
// for (let old of layers.first.license.encodedData) {
// if (
// msgItem.picLicense === old.shape &&
// turf.distance(
// [msgItem.longitude, msgItem.latitude],
// old.coordinates,
// {units: "kilometers"}
// ) < 0.0005
// ) {
// msgItem.longitude = old.coordinates[0];
// msgItem.latitude = old.coordinates[1];
// }
// }
// }
layers.first.license.setData(msg);
show(layers.first.license);
}
......@@ -433,6 +443,9 @@ export default {
},
},
beforeDestroy() {
layers.first.trackLineLayer = null
scene?.removeAllLayer()
layers.first.license = null
console.log('danger destroy')
this.closeWs();
// window.tb.clear()
......
wj-data-vision/src/views/dangerousDriving/left/index.vue
View file @ 22eab69a
......@@ -4,7 +4,8 @@
<msg-card title="危险驾驶监控">
<div class="videos">
<!-- <camera-video class="videoItem" :auto-play="true" v-for="item of cameras" :video-data="item.videoUrl"/>-->
<local-camera ref="videoItem" class="videoItem" v-for="item of 4" :video-data="`wxjs_${item}`"/>
<!-- <local-camera ref="videoItem" class="videoItem" v-for="item of 4" :video-data="`wxjs_${item}`"/>-->
<local-camera ref="videoItem" class="videoItem" v-for="item of [3]" :video-data="`wxjs_${item}`"/>
<span class="top-left"></span>
<span class="top-right"></span>
<span class="bottom-left"></span>
......@@ -19,9 +20,13 @@
<div class="leftIcon" :class="`danger${item.type}`"></div>
<div class="rightDetail">
<div class="rightInner">
<div class="license">车牌号：{{ item.picLicense }}</div>
<div style="margin-bottom:5px">
<span>检测时间段：{{ item.timeBetween }}</span> 持续时长：{{ item.duration }}
<div class="license">车牌号：{{ item.picLicense1 }}</div>
<!-- <div class="license">车牌号：北A30G79</div>-->
<div>
<span>检测时间段：{{ item.timeBetween }}</span>
</div>
<div>
持续时长：{{ item.duration }}
</div>
<div>
地点：{{ item.location }}
......@@ -53,21 +58,24 @@ export default {
dangerOptions: [
{
type: 1,
picLicense: '鄂A51998',
// picLicense: '鄂A51998',
picLicense1: '北A30G79',
timeBetween: '2023.04.09 01:28:22 ~ 01:28:35',
duration: '13s',
location: '湘江中路与劳动西路交叉口路口区域'
},
{
type: 2,
picLicense: '湘BY2218',
// picLicense: '湘BY2218',
picLicense1: '北A47659',
timeBetween: '2023.04.09 00:45:36 ~ 00:45:41',
duration: '6s',
location: '湘江中路与劳动西路交叉口路口区域'
},
{
type: 3,
picLicense: '湘AIWF51',
// picLicense: '湘AIWF51',
picLicense1: '北A64N95',
timeBetween: '2023.04.09 00:23:57 ~ 00:24:13',
duration: '16s',
location: '湘江中路与劳动西路交叉口路口区域'
......@@ -263,8 +271,8 @@ export default {
height: 100%;
.videoItem {
width: 49%;
height: 49%;
width: 100%;
height: 100%;
position: relative;
}
}
......@@ -279,6 +287,7 @@ export default {
padding: 10px;
.optionItem {
height: 120px;
display: flex;
justify-content: space-around;
margin-bottom: 20px;
......@@ -304,13 +313,20 @@ export default {
background-image: url("../../../assets/images/sc/danger_track.png");
}
.rightDetail{
width: calc(100% - 83px);
height: 100%;
}
.rightInner {
padding: 8px 8px 8px 16px;
font-size: 16px;
color: rgba(222, 234, 255, 1);
background-image: url("../../../assets/images/sc/textBorderBack.png");
background-size: 100% 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
span {
......
wj-data-vision/src/views/dangerousDriving/mapPopup/vehicleDetail.vue
View file @ 22eab69a
<template>
<div class="vehicleDetail">
<div class="head">
<span class="titleBefore"></span><span>{{ model.picLicense }}</span>
<!-- <span class="titleBefore"></span><span>{{ model.picLicense }}</span>-->
<span class="titleBefore"></span><span>北A64N95</span>
</div>
<div class="content">
<div class="detailItem">
......
wj-data-vision/src/views/drones/index.vue
View file @ 22eab69a
......@@ -4,11 +4,13 @@
element-loading-background="rgba(0, 0, 0, 0.8)">
<WMap :mapId="'situation-map'" ref="wMap"/>
<home-left ref="refVideo"/>
<home-right ref="refVideo1"/>
<!-- <home-right ref="refVideo1"/>-->
</div>
</template>
<script>
import * as myMixin from "../setColor";
function hide(layer) {
let arr = Array.isArray(layer) ? layer : [layer];
for (let item of arr) {
......@@ -32,6 +34,7 @@ import dict from "../../config/holo/dictionary";
import wsSource from "../../config/holo/wsSource";
import {initWs} from "../../config/holo/websocket";
import * as l7Tools from "../../utils/l7Tools";
import {setNoVehicle} from "../setColor";
let map,
scene,
......@@ -65,7 +68,8 @@ export default {
lastLocation: [],
bounds: '',
msgStart: true,
licenseState: false,
lastMsg:[],
};
},
watch: {},
......@@ -75,6 +79,9 @@ export default {
});
},
methods: {
changeState() {
this.licenseState = !this.licenseState
},
onSelectedChangeVehicle(e) {
const input = document.createElement('input')
input.setAttribute('readonly', 'readonly')
......@@ -94,6 +101,13 @@ export default {
scene.addImage(key, mapAssets.mapIcons[key]);
}
map.addControl(new mapboxgl.NavigationControl({showZoom: false}), 'top-right');
map.flyTo({
center: [112.96380928474719, 28.19215384192394],
zoom: 19.147538836037292,
bearing: 83.6,
pitch: 0
})
document.getElementsByClassName('mapboxgl-ctrl-top-right')[0].classList.add('mapboxgl-ctrl-top-right-hide-box')
this.timeout = setTimeout(() => {
this.initWebS()
}, 5000)
......@@ -103,6 +117,7 @@ export default {
});
scene.on('moveend', () => {
this.refreshBounds()
console.log(map.getCenter(), map.getZoom(), map.getBearing(), map.getPitch())
})
map.on('style.load', () => {
map.addLayer({
......@@ -136,7 +151,7 @@ export default {
initWebS() {
if (this.loading) this.loading = false
this.regisAndSendWs("callCar", {dataType: "BIG_SCREEN_WRJ_DATA"});
this.regisAndSendWs("callCar", {dataType: "BIG_SCREEN_GROUP_DATA"});
},
// 注册 websocket 并绑定回调事件
regisAndSendWs(name, sendData) {
......@@ -159,6 +174,8 @@ export default {
// 更新经纬度-角度-详细信息
setModel(model, options, setColor) {
if (setColor) {
myMixin.setPasserbyColor(options, model)
model.traverse((child) => {
if (child.isMesh && child.name.includes("_19")) {
child.material = child.material.clone();
......@@ -167,7 +184,9 @@ export default {
);
}
});
myMixin.setNoVehicle(options, model)
}
model.userData.data = !model.userData.data
? options
: Object.assign({}, options, {
......@@ -190,46 +209,46 @@ export default {
},
// 根据处理后的数组新增-删除-更新模型
addDelUpdateVehicleModels(allData) {
if (this.vehicleModelsNum === 21) {
for (let item of allData) {
if (item.dill === "add") {
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
window.tb.add(model, item.id);
} else {
for (let i = 0; i < window.tb.world.children.length; i++) {
if (window.tb.world.children[i].userData.data.id === item.id) {
if (item.dill === 'del') {
// if (this.vehicleModelsNum === 21) {
for (let item of allData) {
if (item.dill === "add") {
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
window.tb.add(model, item.id);
} else {
for (let i = 0; i < window.tb.world.children.length; i++) {
if (window.tb.world.children[i].userData.data.id === item.id) {
if (item.dill === 'del') {
window.tb.clear(item.id, true)
}
if (item.dill === 'com') {
//车型变化
if (window.tb.world.children[i].userData.data.originalType === item.originalType) {
this.setModel(window.tb.world.children[i], item, true);
} else {
window.tb.clear(item.id, true)
}
if (item.dill === 'com') {
//车型变化
if (window.tb.world.children[i].userData.data.originalType === item.originalType) {
this.setModel(window.tb.world.children[i], item, false);
} else {
window.tb.clear(item.id, true)
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
window.tb.add(model, item.id);
}
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
window.tb.add(model, item.id);
}
}
}
}
}
}
// }
},
// 比较websocket车辆前后两次数据差异
diff(oldData, newData) {
......@@ -243,15 +262,28 @@ export default {
com.forEach((c) => (c.dill = "com"));
return [...add, ...del, ...com];
},
addOrUpdateLicense(msg) {
if (!layers.first.license) {
layers.first.license = l7Tools.addLicenseLayer(scene, msg);
} else {
layers.first.license.setData(msg);
show(layers.first.license)
}
},
callCar(msg) {
if (scene) {
if (this.lastMsg.length && Math.abs(new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000 > 5) {
// if (this.lastMsg.length && new Date(this.lastMsg[0].dateTime).getTime() > new Date(msg[0].dateTime).getTime()) {
this.$refs.refVideo.startVideo()
}
this.lastMsg = msg
if (scene && this.vehicleModelsNum === 8) {
this.$store.commit('setCurrentTime', msg[0].dateTime)
if (this.msgStart) {
let realTimeStart = new Date(video_config.dronesViewStartTime).getTime()
let getTimeStart = new Date(msg[0].dateTime).getTime()
let videoTime = (getTimeStart - realTimeStart) / 1000
this.$refs.refVideo.startVideo(videoTime)
this.$refs.refVideo1.startVideo(videoTime)
// this.$refs.refVideo1.startVideo(videoTime)
this.msgStart = false
}
let start = performance.now();
......@@ -278,13 +310,7 @@ export default {
let allData = this.diff(this.lastLocation, this.currentLocation);
this.lastLocation = msg;
this.addDelUpdateVehicleModels(allData);
// 添加车牌号图层
if (!layers.first.license) {
layers.first.license = l7Tools.addLicenseLayer(scene, msg);
} else {
layers.first.license.setData(msg);
show(layers.first.license)
}
this.licenseState ? this.addOrUpdateLicense(msg) : hide(layers.first.license)
} else {
if (window.tb) {
window.tb.clear()
......@@ -331,6 +357,8 @@ export default {
},
},
beforeDestroy() {
scene?.removeAllLayer()
layers.first.license = null
console.log('drones destroy...')
if (this.timeout) {
clearTimeout(this.timeout)
......
wj-data-vision/src/views/drones/left/index.vue
View file @ 22eab69a
<template>
<div class="home-left">
<msg-card title="无人机">
<local-camera ref="videoItem" class="videoItem" video-data="qygz_1"></local-camera>
<msg-card title="全域感知">
<div style="height: 100%; width: 100%; display: flex;flex-direction: column;justify-content: space-between">
<local-camera ref="videoItem" :border="true" class="videoItem" video-data="qygz_1"></local-camera>
<local-camera ref="videoItem1" :border="true" class="videoItem" video-data="qygz_2"></local-camera>
</div>
</msg-card>
</div>
</template>
......@@ -24,6 +28,7 @@ export default {
methods: {
startVideo(time) {
this.$refs.videoItem.setTime(time)
this.$refs.videoItem1.setTime(time)
},
},
......@@ -35,7 +40,7 @@ export default {
<style lang='less' scoped>
.videoItem {
width: 100%;
height: 100%;
height: 49%;
}
.cTable {
......
wj-data-vision/src/views/drones/right/index.vue
View file @ 22eab69a
<template>
<div class="home-right">
<msg-card title="无人机">
<local-camera :video-data="`qygz_${item}`" ref="videoItem" class="videoItem" v-for="item of [2,3]"/>
<div style="height: 100%; width: 100%; display: flex;flex-direction: column;justify-content: space-between">
<local-camera :border="true" :video-data="`qygz_${item}`" ref="videoItem" class="videoItem" v-for="item of [2,3]"/>
</div>
</msg-card>
</div>
</template>
......@@ -41,7 +43,7 @@ export default {
<style lang='less' scoped>
.videoItem {
width: 100%;
height: 50%;
height: 49%;
}
.full-h {
......
wj-data-vision/src/views/home/index.vue
View file @ 22eab69a
<template>
<div class="home-main">
<!-- <div v-show="currentView !== 'intersectionGroups'" class="viewName">{{ viewName[currentView] }}</div>-->
<!-- <div class="viewName">{{ viewName[currentView] }}</div>-->
<div class="changePage">
<div class="pre pageItem" @click="preTo()" v-show="this.index!==0"></div>
<div class="viewName">{{ viewName[currentView] }}</div>
<div class="next pageItem" @click="nextTo()" v-show="this.index!==8"></div>
</div>
<situation-time v-show="timeShow" class="timeCenter" :time="time"/>
<intersectionGroups ref="groupView" v-if="currentView === 'intersectionGroups'"/>
<accidentScene v-if="currentView === 'accidentScene'"/>
<phaseAirPlay v-if="currentView === 'phaseAirPlay'"/>
<straightLeftConflict v-if="currentView === 'straightLeftConflict'"/>
<intersectionGroups ref="intersectionGroups" v-if="currentView === 'intersectionGroups'"/>
<phaseAirPlay ref="phaseAirPlay" v-if="currentView === 'phaseAirPlay'"/>
<straightLeftConflict ref="straightLeftConflict" v-if="currentView === 'straightLeftConflict'"/>
<dangerousDriving v-if="currentView === 'dangerousDriving'"/>
<slowTraffic v-if="currentView === 'slowTraffic'"/>
<drones v-if="currentView === 'drones'"/>
<mobile-base-station v-if="currentView === 'mobile-base-station'"/>
<drones ref="drones" v-if="currentView === 'drones'"/>
<mobileBaseStation ref="mobileBaseStation" v-if="currentView === 'mobileBaseStation'"/>
</div>
</template>
......@@ -39,73 +48,133 @@ export default {
computed: {
time() {
return this.$store.state.dataset.currentTime
}
},
},
data() {
return {
index: 0,
timeShow: false,
currentView: 'intersectionGroups',
viewNameArray: [
"intersectionGroups",
"intersectionGroups",
"drones",
"mobileBaseStation",
"slowTraffic",
"dangerousDriving",
"accidentScene",
"straightLeftConflict",
"phaseAirPlay",
],
viewName: {
accidentScene: '事故场景',
intersectionGroups: '组群场景',
phaseAirPlay: '相位空放',
straightLeftConflict: '直左冲突',
dangerousDriving: '危险驾驶',
slowTraffic: '慢行交通',
drones: '全域感知',
mobileBaseStation: '可移动基站'
}
};
},
mounted() {
console.log('store', this.$store)
// 快捷键
window.onkeydown = () => {
// 显示隐藏时间
// alt + t 显示隐藏时间
if (event.altKey && (event.keyCode === 84)) {
this.timeShow = !this.timeShow
}
// alt + k 改变车牌号显示状态
if (event.altKey && (event.keyCode === 75)) {
if (this.currentView === 'intersectionGroups') {
this.$refs.groupView.changeState()
if (['intersectionGroups', 'phaseAirPlay', 'straightLeftConflict', 'drones', 'mobileBaseStation'].includes(this.currentView)) {
this.$refs[this.currentView].changeState()
}
}
console.log('event.keyCode', event.keyCode)
//Alt+1，3个路口群组（不带指标）
if (event.altKey && (event.keyCode === 49 || event.keyCode === 97)) {
this.currentView = 'intersectionGroups'
this.$refs.groupView.setMsgState(false)
this.index = 0
this.$nextTick(() => {
this.$refs.intersectionGroups.setMsgState(false)
})
}
//Alt+2 ，3个路口群组（带指标）
if (event.altKey && (event.keyCode === 50 || event.keyCode === 98)) {
// if (this.currentView === 'intersectionGroups') {
// this.$refs.groupView.visibleChange()
this.currentView === 'intersectionGroups'
this.$refs.groupView.setMsgState(true)
// }
this.currentView = 'intersectionGroups'
this.index = 1
this.$nextTick(() => {
this.$refs.intersectionGroups.setMsgState(true)
})
}
//Alt+3，全域感知场景
if (event.altKey && (event.keyCode === 51 || event.keyCode === 99)) {
this.currentView = 'drones'
this.index = 2
}
//Alt+4，可移动智慧基站场景
if (event.altKey && (event.keyCode === 52 || event.keyCode === 100)) {
this.currentView = 'mobile-base-station'
this.currentView = 'mobileBaseStation'
this.index = 3
}
//Alt+5，慢行交通场景
if (event.altKey && (event.keyCode === 53 || event.keyCode === 101)) {
this.currentView = 'slowTraffic'
this.index = 4
}
//Alt+6
if (event.altKey && (event.keyCode === 54 || event.keyCode === 102)) {
this.currentView = 'dangerousDriving'
this.index = 5
}
//Alt+7
if (event.altKey && (event.keyCode === 55 || event.keyCode === 103)) {
this.currentView = 'accidentScene'
this.index = 6
}
//Alt+8
if (event.altKey && (event.keyCode === 56 || event.keyCode === 104)) {
this.currentView = 'straightLeftConflict'
this.index = 7
}
//Alt+9
if (event.altKey && (event.keyCode === 57 || event.keyCode === 105)) {
this.currentView = 'phaseAirPlay'
this.index = 8
}
}
},
methods: {
nextTo() {
this.index += 1
this.currentView = this.viewNameArray[this.index]
if (this.index === 1) {
this.$nextTick(() => {
this.$refs.intersectionGroups.setMsgState(true)
})
}
},
preTo() {
this.index -= 1
this.currentView = this.viewNameArray[this.index]
if (this.index === 1) {
this.$nextTick(() => {
this.$refs.intersectionGroups.setMsgState(true)
})
}
if (this.index === 0) {
this.$nextTick(() => {
this.$refs.intersectionGroups.setMsgState(false)
})
}
}
},
methods: {},
beforeDestroy() {
},
};
......@@ -117,6 +186,56 @@ export default {
height: 100%;
width: 100%;
.changePage {
font-size: 20px;
color: white;
position: absolute;
left: 720px;
height: 75px;
display: flex;
align-items: center;
top: 20px;
z-index: 11;
.pageItem {
width: 50px;
height: 75px;
line-height: 43px;
cursor: pointer;
background-position-x: left;
background-repeat: no-repeat;
}
.pageItem:hover {
background-color: rgba(10, 91, 133, 0.01);
}
.pre {
background-image: url("../../assets/images/sc/leftpage.png");
}
.next {
background-image: url("../../assets/images/sc/rightpage.png");
background-position-x: right;
}
.viewName {
display: flex;
align-items: center;
padding-left: 44px;
background-image: url("../../assets/images/sc/nameIcon.png");
width: 144px;
height: 43px;
background-size: 100% 100%;
}
}
.timeCenter {
position: absolute;
left: 50%;
......
wj-data-vision/src/views/intersectionGroups/mapPopup/cameraPopup.vue
View file @ 22eab69a
<template>
<div id="e_popup">
<div class="equip_camera">
<div class="header">{{ model.crossName }}</div>
<div class="header">{{ model.cName }}</div>
<div class="main">
<!-- <camera-video :id="model.videoUrl" :auto-play="true" style="height: 100%"-->
<!-- :video-data="model && model.videoUrl"/>-->
......@@ -54,24 +54,24 @@ export default {
.equip_camera {
width: 314px;
height: 300px;
height: 210px;
background-image: url("../../../assets/images/sc/cameraPopup.png");
background-repeat: no-repeat;
background-size: 100% 100%;
.header {
height: 43px;
line-height: 58px;
height: 30px;
line-height: 40px;
padding-left: 10px;
color: white;
font-size: 18px;
font-size: 16px;
font-weight: 700;
}
.main {
position: relative;
padding: 2px;
height: calc(100% - 43px);
padding: 1px;
height: calc(100% - 30px);
}
}
......
wj-data-vision/src/views/intersectionGroups/mapPopup/vehicleDetail.vue
View file @ 22eab69a
<template>
<div class="vehicleDetail">
<div class="head">
<span class="titleBefore"></span><span>{{ model.picLicense }}</span>
<!-- <span class="titleBefore"></span><span>{{ model.picLicense }}</span>-->
<span class="titleBefore"></span><span>北A64N95</span>
<!-- <span @click="closeDetail()">关闭</span> -->
</div>
<div class="content">
......@@ -11,8 +12,8 @@
</div> -->
<div class="detailItem">
<span class="left">车辆号牌：</span
>{{ model.picLicense||'无数据' }}
<!-- <span class="left">车辆号牌：</span>{{ model.picLicense||'无数据' }}-->
<span class="left">车辆号牌：</span>{{ '北A64N95'||'无数据' }}
</div>
<div class="detailItem">
<span class="left">行驶速度：</span
......
wj-data-vision/src/views/intersectionGroups/messageBoxes.vue
View file @ 22eab69a
......@@ -31,7 +31,8 @@
<div class="trackItem" v-for="item of targetTracks">
<div class="leftType"><span class="circle4"></span>{{ item.aliasName }}</div>
<div class="rightValue">{{ item.eventNumber }}{{ eventTypeUnitMap[item.eventType] }}
{{ item.ratio * 100 + '%' }}
<!-- {{ item.ratio * 100 + '%' }}-->
<!-- {{ item.ratio * 100 + '%' }}-->
</div>
</div>
</div>
......@@ -196,7 +197,7 @@ export default {
'redNoClearRate': '红灯间隔未清空率',
'noStopRate': '路口不停车通过率',
'pedestrianAvgPassTime': '行人平均通过时长',
'greenStartMaxQueue': '绿灯启亮最大排队',
'greenEmptyRate': '绿灯空放率',
'greenUseRate': '绿灯利用率',
'capacity': '路口通行能力',
},
......@@ -206,9 +207,9 @@ export default {
'redNoClearRate': '%',
'noStopRate': '%',
'pedestrianAvgPassTime': 's',
'greenStartMaxQueue': 'm',
'greenEmptyRate': '%',
'greenUseRate': '%',
'capacity': 'pcu',
'capacity': 'pcu/h',
},
signalArr: [
'avgDelay',
......@@ -216,7 +217,7 @@ export default {
'redNoClearRate',
'noStopRate',
'pedestrianAvgPassTime',
'greenStartMaxQueue',
'greenEmptyRate',
'greenUseRate',
'capacity'
],
......@@ -272,7 +273,8 @@ export default {
for (let key in res.content) {
if (this.signalArr.includes(key)) {
let unit = this.signalUnitMap[key]
let value = 0
let value = res.content[key]
// let value = 0
if (unit === '%') {
value = res.content[key] * 100
}
......@@ -289,7 +291,7 @@ export default {
this.getFiveIndexes()
let timer = setInterval(() => {
this.getFiveIndexes()
}, 1000)
}, 1000 * 60)
this.timers.push(timer)
// 冲突点监测
// pedNonAnalysis().then((res) => {
......
wj-data-vision/src/views/mobileBaseStation/index.vue
View file @ 22eab69a
......@@ -36,6 +36,7 @@ import dict from "../../config/holo/dictionary";
import wsSource from "../../config/holo/wsSource";
import {initWs} from "../../config/holo/websocket";
import * as l7Tools from "../../utils/l7Tools";
import * as myMixin from "../setColor";
let map,
scene,
......@@ -60,6 +61,7 @@ export default {
computed: {},
data() {
return {
licenseState: false,
timers: [],
loading: true,
vehicleModelsNum: 0,
......@@ -72,6 +74,7 @@ export default {
angle: 0,
msgStart: true,
timeout: null,
lastMsg: [],
};
},
watch: {},
......@@ -107,19 +110,23 @@ export default {
scene.on("zoomend", (e) => {
this.refreshBounds()
});
map.on('click', (e) => {
console.log(e.lngLat)
})
scene.on('moveend', () => {
this.refreshBounds()
console.log(map.getCenter(), map.getZoom(), map.getBearing(), map.getPitch())
})
map.on('style.load', () => {
l7Tools.addMobilePoint(scene, [{
longitude: 112.96379196308857, latitude: 28.19301195000122
longitude: 112.9632513079888, latitude: 28.1932473510918
}])
map.flyTo({
center: [112.96386705425243, 28.192537775710633],
zoom: 19.563321631643046,
// } 20 83.0632511479555 53.99999999999998
center: [112.96348746829744,28.19325808257645],
zoom: 20.5,
bearing: 83.0632511479555,
pitch: 60
pitch: 53.99999999999998
}
)
map.addLayer({
......@@ -192,6 +199,7 @@ export default {
// 更新经纬度-角度-详细信息
setModel(model, options, setColor) {
if (setColor) {
myMixin.setPasserbyColor(options, model)
model.traverse((child) => {
if (child.isMesh && child.name.includes("_19")) {
child.material = child.material.clone();
......@@ -200,6 +208,7 @@ export default {
);
}
});
myMixin.setNoVehicle(options, model)
}
model.userData.data = !model.userData.data
? options
......@@ -223,46 +232,47 @@ export default {
},
// 根据处理后的数组新增-删除-更新模型
addDelUpdateVehicleModels(allData) {
if (this.vehicleModelsNum === 21) {
for (let item of allData) {
if (item.dill === "add") {
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
window.tb.add(model, item.id);
} else {
for (let i = 0; i < window.tb.world.children.length; i++) {
if (window.tb.world.children[i].userData.data?.id === item.id) {
if (item.dill === 'del') {
// if (this.vehicleModelsNum === 21) {
for (let item of allData) {
// console.log('item.originalType', item.originalType)
if (item.dill === "add") {
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
window.tb.add(model, item.id);
} else {
for (let i = 0; i < window.tb.world.children.length; i++) {
if (window.tb.world.children[i].userData.data?.id === item.id) {
if (item.dill === 'del') {
window.tb.clear(item.id, true)
}
if (item.dill === 'com') {
//车型变化
if (window.tb.world.children[i].userData.data.originalType === item.originalType) {
this.setModel(window.tb.world.children[i], item, true);
} else {
window.tb.clear(item.id, true)
}
if (item.dill === 'com') {
//车型变化
if (window.tb.world.children[i].userData.data.originalType === item.originalType) {
this.setModel(window.tb.world.children[i], item, false);
} else {
window.tb.clear(item.id, true)
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
window.tb.add(model, item.id);
}
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
window.tb.add(model, item.id);
}
}
}
}
}
}
// }
},
// 比较websocket车辆前后两次数据差异
diff(oldData, newData) {
......@@ -276,8 +286,25 @@ export default {
com.forEach((c) => (c.dill = "com"));
return [...add, ...del, ...com];
},
changeState() {
this.licenseState = !this.licenseState
},
addOrUpdateLicense(msg) {
if (!layers.first.license) {
layers.first.license = l7Tools.addLicenseLayer(scene, msg);
} else {
layers.first.license.setData(msg);
show(layers.first.license)
}
},
callCar(msg) {
if (scene) {
if (this.lastMsg.length && Math.abs(new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000 > 5) {
// if (this.lastMsg.length && new Date(this.lastMsg[0].dateTime).getTime() > new Date(msg[0].dateTime).getTime()) {
this.$refs.refVideoL.startVideo()
this.$refs.refVideoR.startVideo()
}
this.lastMsg = msg
if (scene && this.vehicleModelsNum === 8) {
this.$store.commit('setCurrentTime', msg[0].dateTime)
if (this.msgStart) {
let realTimeStart = new Date(video_config.mobileViewStartTime).getTime()
......@@ -312,13 +339,9 @@ export default {
let allData = this.diff(this.lastLocation, this.currentLocation);
this.lastLocation = msg;
this.addDelUpdateVehicleModels(allData);
this.licenseState ? this.addOrUpdateLicense(msg) : hide(layers.first.license)
// 添加车牌号图层
if (!layers.first.license) {
layers.first.license = l7Tools.addLicenseLayer(scene, msg);
} else {
layers.first.license.setData(msg);
show(layers.first.license)
}
} else {
if (window.tb) {
window.tb.clear()
......@@ -366,6 +389,8 @@ export default {
},
},
beforeDestroy() {
scene?.removeAllLayer()
layers.first.license = null
console.log('mobile destroy...')
if (this.timeout) {
......
wj-data-vision/src/views/mobileBaseStation/left/index.vue
View file @ 22eab69a
<template>
<div class="home-left">
<msg-card title="可移动基站">
<local-camera ref="videoItemL" class="videoItem" v-for="item of [1,2]" :video-data="`kydjz_${item}`"/>
<!-- <w-map ref="mobileMap" map-id="mobile"/>-->
<msg-card title="可移动智慧基站">
<div style="height: 100%; width: 100%; display: flex;flex-direction: column;justify-content: space-between">
<local-camera :border="true" ref="videoItemL" class="videoItem" v-for="item of [1,2]" :video-data="`kydjz_${item}`"/>
</div>
<!-- <w-map ref="mobileMap" map-id="mobile"/>-->
<!-- <camera-video class="video-mobile" :auto-play="true" :video-data="'http://192.168.2.80/live?app=demo&stream=car3d-1'"/>-->
</msg-card>
</div>
......
wj-data-vision/src/views/mobileBaseStation/left/modelMap.vue
View file @ 22eab69a
......@@ -35,7 +35,7 @@ export default {
// })
map.on('load', () => {
map.setCenter([41.00025957469552, 20.999984837534015])
map.setZoom(18.9818298651229)
map.setZoom(18.4818298651229)
map.setBearing(93.20000000000005)
map.setPitch(60)
})
......@@ -89,10 +89,10 @@ export default {
<style lang='less' scoped>
.model_map {
position: absolute;
left: 740px;
top: 20px;
height: 400px;
width: 300px;
left: 710px;
top: 80px;
height: 300px;
width: 200px;
background-color: transparent;
}
</style>
\ No newline at end of file
wj-data-vision/src/views/mobileBaseStation/right/index.vue
View file @ 22eab69a
<template>
<div class="home-right">
<msg-card title="可移动基站">
<local-camera ref="videoItemR" class="videoItem" v-for="item of [3,4]" :video-data="`kydjz_${item}`"/>
<div style="height: 100%; width: 100%; display: flex;flex-direction: column;justify-content: space-between">
<local-camera ref="videoItemR" :border="true" class="videoItem" v-for="item of [3,4]" :video-data="`kydjz_${item}`"/>
</div>
</msg-card>
</div>
</template>
......
wj-data-vision/src/views/phaseAirPlay/index.vue
View file @ 22eab69a
......@@ -9,6 +9,8 @@
</template>
<script>
import * as myMixin from "../setColor";
function hide(layer) {
let arr = Array.isArray(layer) ? layer : [layer];
for (let item of arr) {
......@@ -75,6 +77,8 @@ export default {
lastLocation: [],
bounds: '',
crossLineInfo: false,
licenseState: false,
lastMsg:[],
};
},
watch: {},
......@@ -84,6 +88,9 @@ export default {
});
},
methods: {
changeState() {
this.licenseState = !this.licenseState
},
onSelectedChangeVehicle(e) {
const input = document.createElement('input')
input.setAttribute('readonly', 'readonly')
......@@ -102,6 +109,7 @@ export default {
for (let key in mapAssets.mapIcons) {
scene.addImage(key, mapAssets.mapIcons[key]);
}
this.timeout = setTimeout(() => {
this.initWebS()
}, 5000)
......@@ -367,6 +375,7 @@ export default {
// 更新经纬度-角度-详细信息-弹窗信息
setModel(model, options, setColor) {
if (setColor) {
myMixin.setPasserbyColor(options, model)
model.traverse((child) => {
if (child.isMesh && child.name.includes("_19")) {
child.material = child.material.clone();
......@@ -375,6 +384,7 @@ export default {
);
}
});
myMixin.setNoVehicle(options, model)
}
model.userData.data = !model.userData.data
? options
......@@ -398,51 +408,57 @@ export default {
},
// 根据处理后的数组新增-删除-更新模型
addDelUpdateVehicleModels(allData) {
if (this.vehicleModelsNum === 21) {
for (let item of allData) {
// 新增
if (item.dill === "add") {
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
window.tb.add(model, item.id);
} else {
for (let i = 0; i < window.tb.world.children.length; i++) {
if (window.tb.world.children[i].userData.data.id === item.id) {
if (item.dill === 'del') {
// if (this.vehicleModelsNum === 21) {
for (let item of allData) {
// console.log(item.originalType)
// 新增
if (item.dill === "add") {
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
window.tb.add(model, item.id);
} else {
for (let i = 0; i < window.tb.world.children.length; i++) {
if (window.tb.world.children[i].userData.data.id === item.id) {
if (item.dill === 'del') {
window.tb.clear(item.id, true)
}
if (item.dill === 'com') {
//车型变化
if (window.tb.world.children[i].userData.data.originalType === item.originalType) {
this.setModel(window.tb.world.children[i], item, true);
} else {
window.tb.clear(item.id, true)
}
if (item.dill === 'com') {
//车型变化
if (window.tb.world.children[i].userData.data.originalType === item.originalType) {
this.setModel(window.tb.world.children[i], item, false);
} else {
window.tb.clear(item.id, true)
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
window.tb.add(model, item.id);
}
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
window.tb.add(model, item.id);
}
}
}
}
}
// console.log('count...', window.tb.world.children.length)
}
// console.log('count...', window.tb.world.children.length)
// }
},
callCar(msg) {
if (scene) {
if (this.lastMsg.length && Math.abs(new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000 > 5) {
// if (this.lastMsg.length && new Date(this.lastMsg[0].dateTime).getTime() > new Date(msg[0].dateTime).getTime()) {
this.$refs.refVideo.startVideo()
}
this.lastMsg = msg
if (scene && this.vehicleModelsNum === 8) {
this.$store.commit('setCurrentTime', msg[0].dateTime)
if (this.msgStart) {
let realTimeStart = new Date(video_config.phaseViewStartTime).getTime()
......@@ -478,7 +494,8 @@ export default {
let allData = this.diff(this.lastLocation, msg);
this.lastLocation = msg;
this.addDelUpdateVehicleModels(allData);
this.addOrUpdateLicense(msg)
this.licenseState ? this.addOrUpdateLicense(msg) : hide(layers.first.license)
// this.addOrUpdateLicense(msg)
} else {
this.lastLocation = [];
if (this.selectVehicle) {
......@@ -570,10 +587,16 @@ export default {
},
},
beforeDestroy() {
lightLayer = null;
lightTextLayer = null
scene?.removeAllLayer()
layers.first.license = null
console.log('phase destroy...')
// scene.removeAllLayers()
if(this.timeout){clearTimeout(this.timeout)}
if (this.timeout) {
clearTimeout(this.timeout)
}
this.closeWs();
// window.tb.clear()
window.tb.dispose();
......
wj-data-vision/src/views/phaseAirPlay/left/index.vue
View file @ 22eab69a
......@@ -3,7 +3,8 @@
<div class="topI">
<msg-card title="路口现场监控">
<div class="videos">
<local-camera ref="videoItem" class="videoItem" v-for="item of 4" :video-data="`xwkf_${item}`"/>
<!-- <local-camera ref="videoItem" class="videoItem" v-for="item of 4" :video-data="`xwkf_${item}`"/>-->
<local-camera ref="videoItem" class="videoItem" v-for="item of [3]" :video-data="`xwkf_${item}`"/>
<!-- <camera-video class="videoItem" :auto-play="true" v-for="item of cameras" :video-data="item.videoUrl"/>-->
<span class="top-left"></span>
<span class="top-right"></span>
......@@ -15,11 +16,19 @@
<div class="bottomI">
<msg-card class="m-b-10" title="相位监测">
<div class="messages">
<!-- <div class="message-title">-->
<!-- &lt;!&ndash; <span>检测时间段：{{ content.timeBetween }}</span>&ndash;&gt;-->
<!-- &lt;!&ndash; <span>是否有空放：{{ content.ifPhase ? '是' : '否' }}</span>&ndash;&gt;-->
<!-- <div class="option">检测时间段：<span>{{ content.timeBetween }}</span></div>-->
<!-- <div class="option">是否有空放：<span>{{ content.ifPhase ? '是' : '否' }}</span></div>-->
<!-- </div>-->
<div class="message-title">
<!-- <span>检测时间段：{{ content.timeBetween }}</span>-->
<!-- <span>是否有空放：{{ content.ifPhase ? '是' : '否' }}</span>-->
<div class="option">检测时间段：<span>{{ content.timeBetween }}</span></div>
<div class="option">是否有空放：<span>{{ content.ifPhase ? '是' : '否' }}</span></div>
检测时间段：<span>{{ content.timeBetween }}</span>
</div>
<div class="message-title">
是否有空放：<span>{{ content.ifPhase ? '是' : '否' }}</span>
</div>
<div class="message-describe">
<div class="label">空放方向：</div>
......@@ -239,8 +248,8 @@ export default {
height: 100%;
.videoItem {
width: 49%;
height: 49%;
width: 100%;
height: 100%;
position: relative;
}
}
......@@ -265,14 +274,14 @@ export default {
width: 50%;
display: flex;
span {
display: inline-block;
width: 60%;
}
//span {
// display: inline-block;
// width: 60%;
//}
}
span {
width: 50%;
width: 80%;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
......@@ -290,7 +299,7 @@ export default {
.value-image {
width: 491px;
height: 373px;
background-image: url("../../../assets/images/sc/pic22.png");
background-image: url("../../../assets/images/sc/kfpic.png");
background-size: 100% 100%;
border: 1px solid #0d7fd7;
}
......
wj-data-vision/src/views/setColor.js 0 → 100644
View file @ 22eab69a
export function setPasserbyColor(options, model) {
if ([4].includes(options.originalType)) {
model.traverse((child) => {
if (child.isMesh) {
child.material = child.material.clone();
child.material.color.set('#FF3F3F');
}
});
}
if ([6].includes(options.originalType)) {
model.traverse((child) => {
if (child.isMesh) {
child.material = child.material.clone();
child.material.color.set('#FF9900');
}
});
}
}
export function setNoVehicle(options, model) {
if ([6].includes(options.originalType)) {
model.traverse((child) => {
if (child.isMesh) {
child.material = child.material.clone();
child.material.color.set('#FF9900');
}
});
}
}
\ No newline at end of file
wj-data-vision/src/views/slowTraffic/index.vue
View file @ 22eab69a
......@@ -5,7 +5,7 @@
<WMap :mapId="'situation-map'" ref="wMap"/>
<home-left ref="refVideo"/>
<home-right/>
<mep-legends class="legendsGeneral"/>
<!-- <mep-legends class="legendsGeneral"/>-->
</div>
</template>
......@@ -37,6 +37,7 @@ import {initWs} from "../../config/holo/websocket";
import * as l7Tools from "../../utils/l7Tools";
import MepLegends from "../mapComponents/mapLegends.vue";
import {addAcciTrackLineLayer1} from "../../utils/l7Tools";
import * as myMixin from "../setColor";
let {keys, values, entries} = Object;
let map,
......@@ -77,7 +78,9 @@ export default {
bounds: '',
trackLine: [],
trackLine1: [],
slowLines: {}
slowLines: {},
licenseState: false,
lastMsg: [],
};
},
watch: {},
......@@ -87,6 +90,9 @@ export default {
});
},
methods: {
// changeState() {
// this.licenseState = !this.licenseState
// },
onSelectedChangeVehicle(e) {
const input = document.createElement('input')
input.setAttribute('readonly', 'readonly')
......@@ -144,10 +150,10 @@ export default {
this.timeout = setTimeout(() => {
this.initWebS()
}, 5000)
// this.getCrossCamerasAndPolygons()
// setInterval(() => {
// this.getCrossCamerasAndPolygons()
// }, 1000)
this.getCrossCamerasAndPolygons()
setInterval(() => {
this.getCrossCamerasAndPolygons()
}, 1000)
map.addControl(new mapboxgl.NavigationControl({showZoom: false}), 'top-right');
});
scene.on("zoomend", (e) => {
......@@ -216,6 +222,7 @@ export default {
// 更新经纬度-角度-详细信息-弹窗信息
setModel(model, options, setColor) {
if (setColor) {
myMixin.setPasserbyColor(options, model)
model.traverse((child) => {
if (child.isMesh && child.name.includes("_19")) {
child.material = child.material.clone();
......@@ -224,6 +231,7 @@ export default {
);
}
});
myMixin.setNoVehicle(options, model)
}
model.userData.data = !model.userData.data
? options
......@@ -250,78 +258,83 @@ export default {
},
// 根据处理后的数组新增-删除-更新模型
addDelUpdateVehicleModels(allData) {
if (this.vehicleModelsNum === 21) {
let gs = []
for (let item of allData) {
if ([
'457802',
'457803',
'457713',
'457727',
'457694',
'457678',
'457735', '457967', '458094', '458240', '4588458',
'457926', '458079'
].includes(item.id)) {
if (!this.slowLines[item.id]) {
this.slowLines[item.id] = []
}
this.slowLines[item.id].push([item.longitude, item.latitude])
if (this.slowLines[item.id].length > 1) {
let g = turf.lineString(this.slowLines[item.id])
let geo = turf.featureCollection([g])
if (!layers.second[item.id]) {
layers.second[item.id] = l7Tools.addSlowTrackLineLayer(scene, geo, this.slowLineClick)
} else {
layers.second[item.id].setData(geo)
}
// if (this.vehicleModelsNum === 21) {
let gs = []
for (let item of allData) {
if ([
'457802',
'457803',
'457713',
'457727',
'457694',
'457678',
'457735', '457967', '458094', '458240', '4588458',
'457926', '458079'
].includes(item.id)) {
if (!this.slowLines[item.id]) {
this.slowLines[item.id] = []
}
this.slowLines[item.id].push([item.longitude, item.latitude])
if (this.slowLines[item.id].length > 1) {
let g = turf.lineString(this.slowLines[item.id])
let geo = turf.featureCollection([g])
if (!layers.second[item.id]) {
layers.second[item.id] = l7Tools.addSlowTrackLineLayer(scene, geo, this.slowLineClick)
} else {
layers.second[item.id].setData(geo)
}
}
}
// 新增
if (item.dill === "add") {
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
window.tb.add(model, item.id);
} else {
for (let i = 0; i < window.tb.world.children.length; i++) {
if (window.tb.world.children[i].userData.data.id === item.id) {
if (item.dill === 'del') {
// 新增
if (item.dill === "add") {
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
window.tb.add(model, item.id);
} else {
for (let i = 0; i < window.tb.world.children.length; i++) {
if (window.tb.world.children[i].userData.data.id === item.id) {
if (item.dill === 'del') {
window.tb.clear(item.id, true)
}
if (item.dill === 'com') {
//车型变化
if (window.tb.world.children[i].userData.data.originalType === item.originalType) {
this.setModel(window.tb.world.children[i], item, true);
} else {
window.tb.clear(item.id, true)
}
if (item.dill === 'com') {
//车型变化
if (window.tb.world.children[i].userData.data.originalType === item.originalType) {
this.setModel(window.tb.world.children[i], item, false);
} else {
window.tb.clear(item.id, true)
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
window.tb.add(model, item.id);
}
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
window.tb.add(model, item.id);
}
}
}
}
}
// console.log('count...', window.tb.world.children.length)
}
// console.log('count...', window.tb.world.children.length)
// }
},
callCar(msg) {
if (scene) {
if (this.lastMsg.length && Math.abs(new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000 > 5) {
// if (this.lastMsg.length && new Date(this.lastMsg[0].dateTime).getTime() > new Date(msg[0].dateTime).getTime()) {
this.$refs.refVideo.startVideo()
}
this.lastMsg = msg
if (scene && this.vehicleModelsNum === 8) {
this.$store.commit('setCurrentTime', msg[0].dateTime)
if (this.msgStart) {
let realTimeStart = new Date(video_config.slowViewStartTime).getTime()
......@@ -377,7 +390,8 @@ export default {
}
this.lastLocation = msg;
this.addDelUpdateVehicleModels(allData);
this.addOrUpdateLicense(msg)
this.licenseState ? this.addOrUpdateLicense(msg) : hide(layers.first.license)
// this.addOrUpdateLicense(msg)
} else {
this.lastLocation = [];
if (this.selectVehicle) {
......@@ -453,9 +467,14 @@ export default {
},
},
beforeDestroy() {
scene?.removeAllLayer()
layers.first.license = null
layers.second = {}
console.log('slow destroy...')
if(this.timeout){clearTimeout(this.timeout)}
if (this.timeout) {
clearTimeout(this.timeout)
}
this.closeWs();
window.tb.dispose();
for (let timer of this.timers) {
......
wj-data-vision/src/views/slowTraffic/left/index.vue
View file @ 22eab69a
......@@ -3,7 +3,8 @@
<div class="topI">
<msg-card title="慢行交通现场监控">
<div class="videos">
<local-camera ref="videoItem" class="videoItem" v-for="item of 4" :video-data="`mxjt_${item}`"/>
<!-- <local-camera ref="videoItem" class="videoItem" v-for="item of 4" :video-data="`mxjt_${item}`"/>-->
<local-camera ref="videoItem" class="videoItem" v-for="item of [1]" :video-data="`mxjt_${item}`"/>
<!-- <camera-video :auto-play="true" class="videoItem" v-for="item of cameras" :video-data="item.videoUrl"/>-->
<span class="top-left"></span>
<span class="top-right"></span>
......@@ -21,7 +22,10 @@
<div class="rightInner">
<div class="license">{{ item.behavior }}</div>
<div>
<span>检测时间段：{{ item.timeBetween }}</span> 持续时长：{{ item.duration }}
<span>检测时间段：{{ item.timeBetween }}</span>
</div>
<div>
持续时长：{{ item.duration }}
</div>
<div>
地点：{{ item.location }}
......@@ -261,8 +265,8 @@ export default {
height: 100%;
.videoItem {
width: 49%;
height: 49%;
width: 100%;
height: 100%;
position: relative;
}
}
......@@ -280,6 +284,7 @@ export default {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
height: 120px;
align-items: center;
/* 四个角 */
......@@ -289,6 +294,10 @@ export default {
height: 84px;
background-size: 100% 100%;
}
.rightDetail{
width: calc(100% - 83px);
height: 100%;
}
.danger1 {
background-image: url("../../../assets/images/sc/danger_bicycle.png");
......@@ -305,6 +314,10 @@ export default {
color: rgba(222, 234, 255, 1);
background-image: url("../../../assets/images/sc/textBorderBack.png");
background-size: 100% 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
span {
......
wj-data-vision/src/views/slowTraffic/mapPopup/vehicleDetail.vue
View file @ 22eab69a
<template>
<div class="vehicleDetail">
<div class="head">
<span></span>{{ model.picLicense }}
<!-- <span></span>{{ model.picLicense }}-->
<span></span>北A64N95
</div>
<div class="content">
<div class="detailItem">
......
wj-data-vision/src/views/slowTraffic/right/index.vue
View file @ 22eab69a
......@@ -10,6 +10,7 @@
<el-table-column
align="center"
prop="time"
width="270"
label="日期时间">
</el-table-column>
<el-table-column
......@@ -24,7 +25,7 @@
</el-table-column>
</el-table>
</msg-card>
<msg-card class="m-b-10" title="非机动车危险驾驶行为">
<msg-card class="m-b-10" :title="`非机动车危险驾驶行为(${tableData1.length}起)`">
<el-table
:header-cell-style="{backgroundColor:'rgba(1, 43, 83, 1)',color:'rgba(217, 237, 255, 1)'}"
:row-class-name="userTab"
......@@ -33,6 +34,7 @@
<el-table-column
align="center"
prop="time"
width="270"
label="日期时间">
</el-table-column>
<el-table-column
......@@ -71,6 +73,7 @@ export default {
{time: '2023-04-04 20:11:23 ~ 20:12:30', location: '湘江中路与西湖路', behavior: '不走斑马线'},
{time: '2023-04-05 12:11:23 ~ 12:12:30', location: '湘江中路与劳动西路', behavior: '不走斑马线'},
{time: '2023-04-08 14:11:23 ~ 14:15:30', location: '湘江中路与西湖路', behavior: '斜穿路口'},
],
tableData1: [
{time: '2023-04-01 14:11:23 ~ 14:15:30', location: '湘江中路与西湖路', behavior: '斜穿路口'},
......@@ -217,11 +220,11 @@ export default {
}
::v-deep .el-table--small td, .el-table--small th {
padding: 4px 0;
padding: 7px 0;
}
::v-deep .el-table th {
padding: 4px 0;
padding: 7px 0;
}
::v-deep .el-table {
......
wj-data-vision/src/views/straightLeftConflict/index.vue
View file @ 22eab69a
......@@ -10,6 +10,8 @@
<script>
import * as myMixin from "../setColor";
function hide(layer) {
let arr = Array.isArray(layer) ? layer : [layer];
for (let item of arr) {
......@@ -62,6 +64,7 @@ export default {
computed: {},
data() {
return {
lastMsg: [],
timeout: null,
msgStart: true,
rr: require('../../assets/images/holo/rr.png'),
......@@ -76,6 +79,7 @@ export default {
currentLocation: [],
lastLocation: [],
bounds: '',
licenseState: false,
};
},
watch: {},
......@@ -119,10 +123,11 @@ export default {
console.log(e)
})
map.on('style.load', () => {
// {lng: 112.96386363210922, lat: 28.191984490825035} 18.895831120971426 -94 0
map.flyTo({
center: [112.96394176395779, 28.191694158991055],
zoom: 18.744418932903272,
bearing: 83.6,
center: [112.96386363210922, 28.191984490825035],
zoom: 18.894418932903272,
bearing: 85,
pitch: 0
})
map.addLayer({
......@@ -202,7 +207,7 @@ export default {
roadDir: lightI.roadDir,
})
}
console.log('77777777777777777777', l7data)
// console.log('77777777777777777777', l7data)
if (lightLayer) {
lightLayer.setData(l7data)
show(lightLayer)
......@@ -352,6 +357,7 @@ export default {
// 更新经纬度-角度-详细信息-弹窗信息
setModel(model, options, setColor) {
if (setColor) {
myMixin.setPasserbyColor(options, model)
model.traverse((child) => {
if (child.isMesh && child.name.includes("_19")) {
child.material = child.material.clone();
......@@ -360,6 +366,7 @@ export default {
);
}
});
myMixin.setNoVehicle(options, model)
}
model.userData.data = !model.userData.data
? options
......@@ -383,51 +390,59 @@ export default {
},
// 根据处理后的数组新增-删除-更新模型
addDelUpdateVehicleModels(allData) {
if (this.vehicleModelsNum === 21) {
for (let item of allData) {
// 新增
if (item.dill === "add") {
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
window.tb.add(model, item.id);
} else {
for (let i = 0; i < window.tb.world.children.length; i++) {
if (window.tb.world.children[i].userData.data.id === item.id) {
if (item.dill === 'del') {
// if (this.vehicleModelsNum === 21) {
for (let item of allData) {
// 新增
if (item.dill === "add") {
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
window.tb.add(model, item.id);
} else {
for (let i = 0; i < window.tb.world.children.length; i++) {
if (window.tb.world.children[i].userData.data.id === item.id) {
if (item.dill === 'del') {
window.tb.clear(item.id, true)
}
if (item.dill === 'com') {
//车型变化
if (window.tb.world.children[i].userData.data.originalType === item.originalType) {
this.setModel(window.tb.world.children[i], item, true);
} else {
window.tb.clear(item.id, true)
}
if (item.dill === 'com') {
//车型变化
if (window.tb.world.children[i].userData.data.originalType === item.originalType) {
this.setModel(window.tb.world.children[i], item, false);
} else {
window.tb.clear(item.id, true)
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
window.tb.add(model, item.id);
}
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
window.tb.add(model, item.id);
}
}
}
}
}
// console.log('count...', window.tb.world.children.length)
}
// console.log('count...', window.tb.world.children.length)
// }
},
changeState() {
this.licenseState = !this.licenseState
},
callCar(msg) {
if (scene) {
if (this.lastMsg.length && Math.abs(new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000 > 5) {
// if (this.lastMsg.length && new Date(this.lastMsg[0].dateTime).getTime() > new Date(msg[0].dateTime).getTime()) {
this.$refs.refVideo.startVideo()
}
this.lastMsg = msg
if (scene && this.vehicleModelsNum === 8) {
this.$store.commit('setCurrentTime', msg[0].dateTime)
if (this.msgStart) {
let realTimeStart = new Date(video_config.SLConflictViewStartTime).getTime()
......@@ -463,7 +478,8 @@ export default {
let allData = this.diff(this.lastLocation, msg);
this.lastLocation = msg;
this.addDelUpdateVehicleModels(allData);
this.addOrUpdateLicense(msg)
this.licenseState ? this.addOrUpdateLicense(msg) : hide(layers.first.license)
// this.addOrUpdateLicense(msg)
} else {
this.lastLocation = [];
if (this.selectVehicle) {
......@@ -567,6 +583,10 @@ export default {
// map = null
// },
beforeDestroy() {
lightLayer = null;
lightTextLayer = null
scene?.removeAllLayer()
layers.first.license = null
console.log('straight destroy...')
// scene.removeAllLayers()
......
wj-data-vision/src/views/straightLeftConflict/left/index.vue
View file @ 22eab69a
......@@ -4,7 +4,8 @@
<msg-card title="路口监控">
<div class="videos">
<local-camera ref="videoItem" class="videoItem" v-for="item of 4" :video-data="`zzct_${item}`"/>
<!-- <local-camera ref="videoItem" class="videoItem" v-for="item of 4" :video-data="`zzct_${item}`"/>-->
<local-camera ref="videoItem" class="videoItem" v-for="item of [2]" :video-data="`zzct_${item}`"/>
<!-- <camera-video :auto-play="true" class="videoItem" v-for="item of cameras" :video-data="item.videoUrl"/>-->
<span class="top-left"></span>
<span class="top-right"></span>
......@@ -16,18 +17,28 @@
<div class="bottomI">
<msg-card class="m-b-10" title="相位监测">
<div class="messages">
<div class="message-title">
<div class="option">检测时间段：<span>{{ content.timeBetween }}</span></div>
<div class="option">是否有冲突：<span>{{ content.ifConflict ? '有' : '无' }}</span></div>
<!-- <span>检测时间段：{{content.timeBetween}}</span>-->
<!-- <span>是否有空放：{{content.ifConflict?'有':'无'}}</span>-->
</div>
<div class="message-title">
<!-- <span>冲突时长：{{content.duration}}s</span>-->
<!-- <span>冲突成因：{{content.reason}}</span>-->
<div class="option">冲突时长：<span>{{ content.duration }}s</span></div>
<div class="option">冲突成因：<span>{{ content.reason }}</span></div>
<div class="time-title">检测时间段：<span>{{ content.timeBetween }}</span></div>
<div style="display: flex; justify-content: space-between">
<div class="row11" >
<div class="row1top" >是否有冲突：<span>{{ content.ifConflict ? '有' : '无' }}</span></div>
<div>冲突时长：<span>{{ content.duration }}s</span></div>
</div>
<div style="display: flex">
<div style="width: 38%">冲突成因：</div>
<div>{{ content.reason }}</div>
</div>
</div>
<!-- <div class="message-title">-->
<!-- &lt;!&ndash; <span>检测时间段：{{content.timeBetween}}</span>&ndash;&gt;-->
<!-- &lt;!&ndash; <span>是否有空放：{{content.ifConflict?'有':'无'}}</span>&ndash;&gt;-->
<!-- </div>-->
<!-- <div class="message-title">-->
<!-- &lt;!&ndash; <span>冲突时长：{{content.duration}}s</span>&ndash;&gt;-->
<!-- &lt;!&ndash; <span>冲突成因：{{content.reason}}</span>&ndash;&gt;-->
<!-- <div class="option"></div>-->
<!-- <div class="option"></div>-->
<!-- </div>-->
<div class="message-describe">
<div class="label">冲突方向：</div>
<div class="value-image"></div>
......@@ -52,9 +63,9 @@ export default {
return {
cameras: [],
content: {
timeBetween: '2023.4.8 17:18:36 ~ 17:23:36',
timeBetween: '2023.4.11 18:16:31 ~ 18:19:18',
ifConflict: true,
duration: 27,
duration: 28,
reason: '南进口直行车辆未清空，导致北进口左转车辆与南进口直行车辆冲突',
direction: '北口左转与南口直行'
},
......@@ -247,8 +258,8 @@ export default {
height: 100%;
.videoItem {
width: 49%;
height: 49%;
width: 100%;
height: 100%;
position: relative;
}
}
......@@ -264,7 +275,12 @@ export default {
flex-direction: column;
padding: 15px;
justify-content: space-around;
.row11{
.row11top{
margin-bottom: 24px
}
display: flex; flex-direction: column; width: 45%; justify-content: space-around
}
.message-title {
display: flex;
justify-content: space-between;
......@@ -298,7 +314,7 @@ export default {
.value-image {
width: 491px;
height: 373px;
background-image: url("../../../assets/images/sc/pic11.png");
background-image: url("../../../assets/images/sc/ctpic.png");
background-size: 100% 100%;
border: 1px solid #0d7fd7;
}
......
wj-data-vision/src/views/straightLeftConflict/mapPopup/conflictDetail.vue
View file @ 22eab69a
......@@ -5,7 +5,7 @@
</div>
<div class="content">
<div class="detailItem">
<span>东口左转与南口直行冲突</span
<span>北口左转与南口直行冲突</span
>
</div>
</div>
......
wj-data-vision/src/views/straightLeftConflict/right/index.vue
View file @ 22eab69a
......@@ -14,7 +14,7 @@
align="center"
prop="type"
label="指标"
width="100">
width="200">
</el-table-column>
<el-table-column
prop="A"
......@@ -57,8 +57,8 @@ export default {
data() {
return {
tableData: [
{type: '冲突延误', A: '0秒', B: '27秒', C: '0秒', D: '0秒'},
{type: '绿灯启亮未清空车辆', A: '0辆', B: '19辆', C: '3辆', D: '0辆'},
{type: '冲突延误', A: '0秒', B: '28秒', C: '0秒', D: '0秒'},
{type: '绿灯启亮未清空车辆', A: '0辆', B: '23辆', C: '5辆', D: '0辆'},
{type: '绿灯结束排队长度', A: '112米', B: '0米', C: '0米', D: '10米'},
]
};
......@@ -189,11 +189,11 @@ export default {
}
::v-deep .el-table--small td, .el-table--small th {
padding: 4px 0;
padding: 7px 0;
}
::v-deep .el-table th {
padding: 4px 0;
padding: 7px 0;
}
::v-deep .el-table {
......
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