Skip to content

H
holo-web
Commit 75aae19c authored by ninglx's avatar ninglx
Browse files
Options

大屏页面逻辑完善，系统逻辑优化，模型加载逻辑修改

parent 5c162f1e
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1438 additions and 1281 deletions
wj-data-vision/public/config.js
View file @ 75aae19c
const map_config = { const map_config = {
SYS_ID: 'CAFC20296895433784C193457A870DFD', SYS_ID: 'CAFC20296895433784C193457A870DFD',
MAP_CENTER: [112.96428650617997, 28.1871212850601], MAP_CENTER: [112.96340509661252, 28.187408862647146],
MAP_ZOOM: 17.2, MAP_ZOOM: 17.2,
......
wj-data-vision/src/App.vue
View file @ 75aae19c
...@@ -95,3 +95,8 @@ export default { ...@@ -95,3 +95,8 @@ export default {
width: 100%; width: 100%;
} }
</style> </style>
<style>
.l7-popup .l7-popup-content{
background: transparent !important;
}
</style>
wj-data-vision/src/components/Standard/cameraVideo.vue
View file @ 75aae19c
...@@ -119,7 +119,7 @@ export default { ...@@ -119,7 +119,7 @@ export default {
right: 1px; right: 1px;
} }
.cameraVideo { .cameraVideo {
//position: relative; position: relative;
.videoControl { .videoControl {
position: absolute; position: absolute;
height: 100%; height: 100%;
......
wj-data-vision/src/config/holo/mapAssets.js
View file @ 75aae19c
...@@ -7,5 +7,6 @@ export default { ...@@ -7,5 +7,6 @@ export default {
weather: require('../../assets/images/holo/qxjcy.png'), weather: require('../../assets/images/holo/qxjcy.png'),
camera: require('../../assets/images/holo/spxj.png'), camera: require('../../assets/images/holo/spxj.png'),
sign: require('../../assets/images/holo/xhj.png'), sign: require('../../assets/images/holo/xhj.png'),
homeCamera: require('../../assets/images/sc/crossCamera.png')
}, },
} }
wj-data-vision/src/views/accidentScene/index.vue
View file @ 75aae19c
...@@ -131,16 +131,18 @@ export default { ...@@ -131,16 +131,18 @@ export default {
}) })
}, },
initPageData(){ initPageData() {
}, },
initWebS() { initWebS() {
if (this.loading) this.loading = false if (this.loading) this.loading = false
// 注册车辆实时ws // 注册车辆实时ws
this.regisAndSendWs("callCar", {dataType: "6"}); this.regisAndSendWs("callCar", {dataType: "1"});
}, },
// 更新经纬度-角度-详细信息
// 更新经纬度-角度-详细信息-弹窗信息
setModel(model, options, setColor) { setModel(model, options, setColor) {
if (setColor) { if (setColor) {
model.traverse((child) => { model.traverse((child) => {
...@@ -177,7 +179,7 @@ export default { ...@@ -177,7 +179,7 @@ export default {
if (this.vehicleModelsNum === 21) { if (this.vehicleModelsNum === 21) {
for (let item of allData) { for (let item of allData) {
// 交通事故车辆popup标注&更新 // 交通事故车辆popup标注&更新
if (item.eventType.length) { // todo: 参与交通事件的车辆 特殊字段 if (item.eventType?.length) { // todo: 参与交通事件的车辆 特殊字段
if (!popups[`${item.id}`]) { if (!popups[`${item.id}`]) {
popups[`${item.id}`] = new Popup({ popups[`${item.id}`] = new Popup({
offsets: [-100, 280], offsets: [-100, 280],
...@@ -217,22 +219,12 @@ export default { ...@@ -217,22 +219,12 @@ export default {
} }
} }
} }
// console.log('count...', window.tb.world.children.length)
} }
}, },
// 比较websocket车辆前后两次数据差异
diff(oldData, newData) {
// id 只在 newData 中存在且不在 oldData 中存在的即为 add
const add = newData.filter((e) => !oldData.find((c) => c.id === e.id));
// id 只在 oldData 中存在且不在 newData 中存在的即为 dele
const del = oldData.filter((e) => !newData.find((c) => c.id === e.id));
const com = newData.filter((e) => oldData.find((c) => c.id === e.id));
add.forEach((a) => (a.dill = "add"));
del.forEach((d) => (d.dill = "del"));
com.forEach((c) => (c.dill = "com"));
return [...add, ...del, ...com];
},
callCar(msg) { callCar(msg) {
let start = performance.now(); let start = performance.now();
// 筛选可见区域
for (let i = 0; i < msg.length; i++) { for (let i = 0; i < msg.length; i++) {
if (!msg[i].picLicense) { if (!msg[i].picLicense) {
msg[i].picLicense = '' msg[i].picLicense = ''
...@@ -245,39 +237,81 @@ export default { ...@@ -245,39 +237,81 @@ export default {
} }
} }
if (msg.length > 0) { if (msg.length > 0) {
// 第一帧 || 时间戳不相同则放行 // 第一帧 || 时间戳不相同 => 放行
if (this.lastLocation.length === 0 || this.lastLocation[0].dateTime !== msg[0].dateTime) { if (this.lastLocation.length === 0 || this.lastLocation[0].dateTime !== msg[0].dateTime) {
this.situationTimeVal = msg[0].dateTime
// 层级最大 展示3D & 车牌号
if (scene.getZoom() > 17) { if (scene.getZoom() > 17) {
hide([layers.first.vehicle])
window.tb.world.visible = true; window.tb.world.visible = true;
this.currentLocation = msg; let allData = this.diff(this.lastLocation, msg);
let allData = this.diff(this.lastLocation, this.currentLocation);
this.lastLocation = msg; this.lastLocation = msg;
this.addDelUpdateVehicleModels(allData); this.addDelUpdateVehicleModels(allData);
// 添加车牌号图层 this.addOrUpdateLicense(msg)
if (!layers.first.license) {
layers.first.license = l7Tools.addLicenseLayer(scene, msg);
} else { } else {
layers.first.license.setData(msg); this.lastLocation = [];
show(layers.first.license) if (this.selectVehicle) {
this.selectVehicle = null;
} }
} else {
if (window.tb) { if (window.tb) {
window.tb.clear() window.tb.clear()
this.lightShow = false
this.waitingShow = false
window.tb.world.visible = false; window.tb.world.visible = false;
} }
hide(layers.first.license); hide([layers.first.license])
if (!layers.first.vehicle) { this.addOrUpdateVehicle(msg)
layers.first.vehicle = l7Tools.addVehicleLayer(scene, msg);
} else {
layers.first.vehicle && layers.first.vehicle.setData(msg);
}
this.lastLocation = [];
} }
} }
} }
let end = performance.now(); let end = performance.now();
// console.log('cost is', `${end - start}ms`) // console.log('cost is', `${end - start}ms`)
}, },
addOrUpdateLicense(msg) {
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];
}
}
}
layers.first.license.setData(msg);
show(layers.first.license);
}
},
addOrUpdateVehicle(msg) {
if (!layers.first.vehicle) {
layers.first.vehicle = l7Tools.addVehicleLayer(scene, msg);
} else {
layers.first.vehicle && layers.first.vehicle.setData(msg);
show(layers.first.vehicle);
}
},
// 比较websocket车辆前后两次数据差异
diff(oldData, newData) {
// id 只在 newData 中存在且不在 oldData 中存在的即为 add
const add = newData.filter((e) => !oldData.find((c) => c.id === e.id));
// id 只在 oldData 中存在且不在 newData 中存在的即为 dele
const del = oldData.filter((e) => !newData.find((c) => c.id === e.id));
const com = newData.filter((e) => oldData.find((c) => c.id === e.id));
add.forEach((a) => (a.dill = "add"));
del.forEach((d) => (d.dill = "del"));
com.forEach((c) => (c.dill = "com"));
return [...add, ...del, ...com];
},
// 根据 name 关闭 websocket 不传参则全部关闭 // 根据 name 关闭 websocket 不传参则全部关闭
closeWs(name) { closeWs(name) {
if (name) { if (name) {
......
wj-data-vision/src/views/accidentScene/left/index.vue
View file @ 75aae19c
...@@ -262,6 +262,7 @@ export default { ...@@ -262,6 +262,7 @@ export default {
} }
.home-left { .home-left {
z-index: 11;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
......
wj-data-vision/src/views/accidentScene/right/index.vue
View file @ 75aae19c
<template> <template>
<div class="home-right"> <div class="home-right">
<msg-card title="事故现场监控"> <msg-card title="涉事车辆车内视角">
<div class="cardInner"> <div class="cardInner">
<div class="top"> <div class="top">
<span class="top-left"></span> <span class="top-left"></span>
...@@ -106,6 +106,7 @@ export default { ...@@ -106,6 +106,7 @@ export default {
} }
.home-right { .home-right {
z-index: 11;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
......
wj-data-vision/src/views/dangerousDriving/index.vue
View file @ 75aae19c
...@@ -306,7 +306,7 @@ export default { ...@@ -306,7 +306,7 @@ export default {
} }
} }
}, },
// 更新经纬度-角度-详细信息 // 更新经纬度-角度-详细信息-弹窗信息
setModel(model, options, setColor) { setModel(model, options, setColor) {
if (setColor) { if (setColor) {
model.traverse((child) => { model.traverse((child) => {
...@@ -342,6 +342,7 @@ export default { ...@@ -342,6 +342,7 @@ export default {
addDelUpdateVehicleModels(allData) { addDelUpdateVehicleModels(allData) {
if (this.vehicleModelsNum === 21) { if (this.vehicleModelsNum === 21) {
for (let item of allData) { for (let item of allData) {
// 新增
if (item.dill === "add") { if (item.dill === "add") {
let model = let model =
vehicleModelTypes[`car${item.originalType}`].duplicate(); vehicleModelTypes[`car${item.originalType}`].duplicate();
...@@ -360,22 +361,12 @@ export default { ...@@ -360,22 +361,12 @@ export default {
} }
} }
} }
// console.log('count...', window.tb.world.children.length)
} }
}, },
// 比较websocket车辆前后两次数据差异
diff(oldData, newData) {
// id 只在 newData 中存在且不在 oldData 中存在的即为 add
const add = newData.filter((e) => !oldData.find((c) => c.id === e.id));
// id 只在 oldData 中存在且不在 newData 中存在的即为 dele
const del = oldData.filter((e) => !newData.find((c) => c.id === e.id));
const com = newData.filter((e) => oldData.find((c) => c.id === e.id));
add.forEach((a) => (a.dill = "add"));
del.forEach((d) => (d.dill = "del"));
com.forEach((c) => (c.dill = "com"));
return [...add, ...del, ...com];
},
callCar(msg) { callCar(msg) {
let start = performance.now(); let start = performance.now();
// 筛选可见区域
for (let i = 0; i < msg.length; i++) { for (let i = 0; i < msg.length; i++) {
if (!msg[i].picLicense) { if (!msg[i].picLicense) {
msg[i].picLicense = '' msg[i].picLicense = ''
...@@ -388,39 +379,80 @@ export default { ...@@ -388,39 +379,80 @@ export default {
} }
} }
if (msg.length > 0) { if (msg.length > 0) {
// 第一帧 || 时间戳不相同则放行 // 第一帧 || 时间戳不相同 => 放行
if (this.lastLocation.length === 0 || this.lastLocation[0].dateTime !== msg[0].dateTime) { if (this.lastLocation.length === 0 || this.lastLocation[0].dateTime !== msg[0].dateTime) {
this.situationTimeVal = msg[0].dateTime
// 层级最大 展示3D & 车牌号
if (scene.getZoom() > 17) { if (scene.getZoom() > 17) {
hide([layers.first.vehicle])
window.tb.world.visible = true; window.tb.world.visible = true;
this.currentLocation = msg; let allData = this.diff(this.lastLocation, msg);
let allData = this.diff(this.lastLocation, this.currentLocation);
this.lastLocation = msg; this.lastLocation = msg;
this.addDelUpdateVehicleModels(allData); this.addDelUpdateVehicleModels(allData);
// 添加车牌号图层 this.addOrUpdateLicense(msg)
if (!layers.first.license) {
layers.first.license = l7Tools.addLicenseLayer(scene, msg);
} else { } else {
layers.first.license.setData(msg); this.lastLocation = [];
show(layers.first.license) if (this.selectVehicle) {
this.selectVehicle = null;
} }
} else {
if (window.tb) { if (window.tb) {
window.tb.clear() window.tb.clear()
this.lightShow = false
this.waitingShow = false
window.tb.world.visible = false; window.tb.world.visible = false;
} }
hide(layers.first.license); hide([layers.first.license])
if (!layers.first.vehicle) { this.addOrUpdateVehicle(msg)
layers.first.vehicle = l7Tools.addVehicleLayer(scene, msg);
} else {
layers.first.vehicle && layers.first.vehicle.setData(msg);
}
this.lastLocation = [];
} }
} }
} }
let end = performance.now(); let end = performance.now();
// console.log('cost is', `${end - start}ms`) // console.log('cost is', `${end - start}ms`)
}, },
addOrUpdateLicense(msg) {
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];
}
}
}
layers.first.license.setData(msg);
show(layers.first.license);
}
},
addOrUpdateVehicle(msg) {
if (!layers.first.vehicle) {
layers.first.vehicle = l7Tools.addVehicleLayer(scene, msg);
} else {
layers.first.vehicle && layers.first.vehicle.setData(msg);
show(layers.first.vehicle);
}
},
// 比较websocket车辆前后两次数据差异
diff(oldData, newData) {
// id 只在 newData 中存在且不在 oldData 中存在的即为 add
const add = newData.filter((e) => !oldData.find((c) => c.id === e.id));
// id 只在 oldData 中存在且不在 newData 中存在的即为 dele
const del = oldData.filter((e) => !newData.find((c) => c.id === e.id));
const com = newData.filter((e) => oldData.find((c) => c.id === e.id));
add.forEach((a) => (a.dill = "add"));
del.forEach((d) => (d.dill = "del"));
com.forEach((c) => (c.dill = "com"));
return [...add, ...del, ...com];
},
refreshBounds() { refreshBounds() {
let bounds = map.getBounds(); let bounds = map.getBounds();
let leftDownXy = [bounds._sw.lng, bounds._sw.lat]; let leftDownXy = [bounds._sw.lng, bounds._sw.lat];
......
wj-data-vision/src/views/dangerousDriving/left/index.vue
View file @ 75aae19c
<template> <template>
<div class="home-left"> <div class="home-left">
<div class="topI"> <div class="topI">
<msg-card title="事故现场监控"> <msg-card title="危险驾驶监控">
<div class="videos"> <div class="videos">
<camera-video class="videoItem" v-for="item of cameras" :video-data="item.videoUrl"/> <camera-video class="videoItem" v-for="item of cameras" :video-data="item.videoUrl"/>
<span class="top-left"></span> <span class="top-left"></span>
...@@ -13,7 +13,23 @@ ...@@ -13,7 +13,23 @@
</div> </div>
<div class="bottomI"> <div class="bottomI">
<msg-card class="m-b-10" title="危险驾驶报警"> <msg-card class="m-b-10" title="危险驾驶报警">
<div class="cardInner">
<div class="optionItem" v-for="item of dangerOptions">
<div class="leftIcon" :class="`danger${item.type}`"></div>
<div class="rightDetail">
<div class="rightInner">
<div class="license">车牌号：{{ item.picLicense }}</div>
<div>
<span>检测时间段：{{ item.timeBetween }}</span> 持续时长：{{ item.duration }}
</div>
<div>
地点：{{ item.location }}
</div>
</div>
</div>
</div>
</div>
</msg-card> </msg-card>
</div> </div>
</div> </div>
...@@ -30,14 +46,37 @@ export default { ...@@ -30,14 +46,37 @@ export default {
computed: {}, computed: {},
data() { data() {
return { return {
time:'09:10:00 - 09:12:30', time: '09:10:00 - 09:12:30',
cameras:[], cameras: [],
dangerOptions: [
{
type: 1,
picLicense: '湘A5740R',
timeBetween: '10:23:00 ~ 10:27:00',
duration: '4min',
location: '湘江中路与劳动西路交叉口南进口'
},
{
type: 2,
picLicense: '湘A5740R',
timeBetween: '10:23:00 ~ 10:27:00',
duration: '4min',
location: '湘江中路与劳动西路交叉口南进口'
},
{
type: 3,
picLicense: '湘A5740R',
timeBetween: '10:23:00 ~ 10:27:00',
duration: '4min',
location: '湘江中路与劳动西路交叉口南进口'
},
],
}; };
}, },
mounted() { mounted() {
// 1事故场景 2相位空放 3直左冲突 4慢行交通 5危险驾驶 // 1事故场景 2 相位空放 3直左冲突 4慢行交通 5危险驾驶
getCameraListByType({type:5}).then(res => { getCameraListByType({type: 5}).then(res => {
console.log('cameraList',res) console.log('cameraList', res)
this.cameras = res.content this.cameras = res.content
}) })
}, },
...@@ -186,6 +225,7 @@ export default { ...@@ -186,6 +225,7 @@ export default {
} }
.home-left { .home-left {
z-index: 11;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
...@@ -222,36 +262,58 @@ export default { ...@@ -222,36 +262,58 @@ export default {
.bottomI { .bottomI {
flex: 1; flex: 1;
.messages{
font-size: 18px; .cardInner {
display: flex; display: flex;
height: 100%;
flex-direction: column; flex-direction: column;
padding: 15px; padding: 10px;
justify-content: space-around;
.message-title{ .optionItem {
display: flex; display: flex;
justify-content: space-between; justify-content: space-around;
span{ margin-bottom: 20px;
width: 40% align-items: center;
/* 四个角 */
.leftIcon {
width: 83px;
height: 84px;
background-size: 100% 100%;
} }
span:first-child{
display: inline-block; .danger1 {
width: 60%; background-image: url("../../../assets/images/sc/danger_s.png");
text-align: left;
} }
.danger2 {
background-image: url("../../../assets/images/sc/danger_speedup.png");
} }
.message-describe{
display: flex; .danger3 {
.label{ background-image: url("../../../assets/images/sc/danger_track.png");
width: 100px;
} }
.value-image{
width: 491px;
height: 373px; .rightInner {
background-image: url("../../../assets/images/xwPic.png"); padding: 8px 23px;
font-size: 16px;
color: rgba(222, 234, 255, 1);
background-image: url("../../../assets/images/sc/textBorderBack.png");
background-size: 100% 100%; background-size: 100% 100%;
border: 1px solid #0d7fd7; }
span {
display: inline-block;
margin-right: 25px;
}
.license {
color: white;
font-size: 18px;
font-weight: 500;
margin-bottom: 8px;
} }
} }
} }
......
wj-data-vision/src/views/dangerousDriving/right/index.vue
View file @ 75aae19c
<template> <template>
<div class="home-right"> <div class="home-right">
<msg-card title="当前方案"> <div class="home-right-inner">
<msg-card style="flex:0 0 50%" class="m-b-10" title="涉事车辆车内视角">
<div class="cardInner"> <div class="cardInner">
<div class="comp"> <span class="top-left"></span>
<cross-control/> <span class="top-right"></span>
<span class="bottom-left"></span>
<span class="bottom-right"></span>
<camera-video :video-data="''"/>
</div> </div>
</msg-card>
<msg-card class="m-b-10" title="车辆跟踪记录">
<el-table <el-table
:header-cell-style="{backgroundColor:'rgba(46, 119, 255, 0.15)',color:'rgba(217, 229, 255, 1)'}" :header-cell-style="{backgroundColor:'rgba(1, 43, 83, 1)',color:'rgba(217, 237, 255, 1)'}"
:row-class-name="userTab" :row-class-name="userTab"
:data="tableData" :data="tableData"
border style="background-color: transparent; width: 100%;margin-top: 10px">
style="background-color: transparent; width: 100%;">
<el-table-column <el-table-column
align="center" align="center"
prop="xy" prop="time"
label="指标" label="时间">
width="100">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="type" prop="location"
align="center" align="center"
label="A"> label="位置">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="direction" prop="behavior"
align="center" align="center"
label="B"> label="行为">
</el-table-column> </el-table-column>
</el-table>
</msg-card>
<msg-card class="m-b-10" title="车辆历史危险驾驶行为">
<el-table
:header-cell-style="{backgroundColor:'rgba(1, 43, 83, 1)',color:'rgba(217, 237, 255, 1)'}"
:row-class-name="userTab"
:data="tableData1"
style="background-color: transparent; width: 100%;margin-top: 10px">
<el-table-column <el-table-column
prop="sat"
align="center" align="center"
label="C"> prop="time"
label="日期时间">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="time" prop="startTime"
align="center" align="center"
label="D"> label="开始时间">
</el-table-column>
<el-table-column
prop="endTime"
align="center"
label="结束时间">
</el-table-column>
<el-table-column
prop="behavior"
align="center"
label="危险驾驶行为">
</el-table-column> </el-table-column>
</el-table> </el-table>
</div>
</msg-card> </msg-card>
</div> </div>
</div>
</template> </template>
<script> <script>
...@@ -58,24 +81,28 @@ export default { ...@@ -58,24 +81,28 @@ export default {
data() { data() {
return { return {
tableData: [ tableData: [
{ xy: 'A', type: '机动车', direction: '234', sat: '3.2', time: 10 }, {time: '09:00:12', location: '东进口车道1', behavior: '加速跑'},
{ xy: 'A', type: '机动车', direction: '234', sat: '3.2', time: 10 }, {time: '09:00:12', location: '东进口车道2', behavior: '不走斑马线'},
{ xy: 'A', type: '非机动车', direction: '234', sat: '3.2', time: 10 }, {time: '09:00:12', location: '路口内部', behavior: '不走斑马线'},
{ xy: 'A', type: '非机动车', direction: '234', sat: '3.2', time: 10 }, ],
] tableData1:[
{time: '2023-03-26', startTime: '09:00:12', endTime: '09:20:12', behavior: 'S形驾驶'},
{time: '2023-03-26', startTime: '09:00:12', endTime: '09:20:12', behavior: 'S形驾驶'},
{time: '2023-03-26', startTime: '09:00:12', endTime: '09:20:12', behavior: 'S形驾驶'},
],
}; };
}, },
mounted() { mounted() {
}, },
methods: { methods: {
userTab({ row, rowIndex }) { userTab({row, rowIndex}) {
if (rowIndex % 2 === 0) { if (rowIndex % 2 === 0) {
return 'warning-row' return 'warning-row'
} else if (rowIndex % 2 !== 0) { } else if (rowIndex % 2 !== 0) {
return 'pager-row' return 'pager-row'
} }
}, },
objectSpanMethod({ row, column, rowIndex, columnIndex }) { objectSpanMethod({row, column, rowIndex, columnIndex}) {
if (columnIndex === 0) { if (columnIndex === 0) {
if (rowIndex % 6 === 0) { if (rowIndex % 6 === 0) {
return { return {
...@@ -111,9 +138,15 @@ export default { ...@@ -111,9 +138,15 @@ export default {
</script> </script>
<style lang='less' scoped> <style lang='less' scoped>
.full-h{ .cardInner{
height: 100%;
position: relative;
padding: 10px;
}
.full-h {
height: 100%; height: 100%;
} }
::v-deep .content { ::v-deep .content {
margin: 0 margin: 0
} }
...@@ -173,65 +206,77 @@ export default { ...@@ -173,65 +206,77 @@ export default {
background-color: rgba(3, 11, 25, 0.45); background-color: rgba(3, 11, 25, 0.45);
background-image: linear-gradient(90deg, rgba(8, 20, 31, 0) 0%, rgba(6, 16, 26, 1) 100%); background-image: linear-gradient(90deg, rgba(8, 20, 31, 0) 0%, rgba(6, 16, 26, 1) 100%);
.cardInner { .home-right-inner {
.comp{ position: relative;
height: 15%;
padding: 10px 0;
}
::v-deep .el-table{
height: 85%;
overflow-y: auto;
}
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between;
height: 100%; height: 100%;
::v-deep .el-table--small td, .el-table--small th{
padding: 4px 0;
} }
::v-deep .el-table th{ }
.m-b-10 {
margin-bottom: 10px;
}
::v-deep .cameraVideo{
height: 100%;
}
::v-deep .el-table{
height: 85%;
overflow-y: auto;
}
::v-deep .el-table--small td, .el-table--small th{
padding: 4px 0; padding: 4px 0;
} }
::v-deep .el-table { ::v-deep .el-table th{
padding: 4px 0;
}
::v-deep .el-table {
width: 440px; width: 440px;
color: rgba(217, 229, 255, 1); color: rgba(217, 229, 255, 1);
font-size: 16px; font-size: 16px;
} }
::v-deep .el-table tr{ ::v-deep .el-table td, .el-table th.is-leaf{
border-bottom: none;
}
::v-deep .el-table th.is-leaf{
border-bottom: none;
}
::v-deep .el-table tr{
background-color: unset; background-color: unset;
} }
::v-deep .el-table .warning-row { ::v-deep .el-table .warning-row {
background-color: transparent; background-color: transparent;
} }
::v-deep .el-table tbody tr:hover > td { ::v-deep .el-table tbody tr:hover > td {
background-color: transparent; background-color: transparent;
} }
::v-deep .el-table__body tr.current-row > td { ::v-deep .el-table__body tr.current-row > td {
background: transparent !important; background: transparent !important;
} }
::v-deep .el-table .pager-row { ::v-deep .el-table .pager-row {
background-color: transparent; background-color: rgba(53, 92, 166, 0.15);
} }
::v-deep .el-table .cell .el-table th div { ::v-deep .el-table .cell .el-table th div {
padding-right: 0; padding-right: 0;
} }
::v-deep .el-table--border td{ ::v-deep .el-table--border td{
border-right: 1px solid rgba(62, 108, 150, 1); border-right: 1px solid rgba(62, 108, 150, 1);
border-bottom: 1px solid rgba(62, 108, 150, 1); border-bottom: 1px solid rgba(62, 108, 150, 1);
border-left: 1px solid rgba(62, 108, 150, 1); border-left: 1px solid rgba(62, 108, 150, 1);
} }
::v-deep .el-table--border th{ ::v-deep .el-table--border th{
border: 1px solid rgba(62, 108, 150, 1); border: 1px solid rgba(62, 108, 150, 1);
} }
::v-deep .el-table--border{ ::v-deep .el-table--border{
border: none; border: none;
} }
::v-deep .el-table--border::after{ ::v-deep .el-table--border::after{
width: 0; width: 0;
} }
::v-deep .el-table--border::before{ ::v-deep .el-table--border::before{
height: 0;
}
::v-deep .el-table::before{
height: 0; height: 0;
}
}
} }
</style> </style>
\ No newline at end of file
wj-data-vision/src/views/home/index.vue
View file @ 75aae19c
...@@ -72,3 +72,11 @@ export default { ...@@ -72,3 +72,11 @@ export default {
width: 100%; width: 100%;
} }
</style> </style>
<style>
.home-left{
z-index: 11;
}
.home-right{
z-index: 11;
}
</style>
\ No newline at end of file
wj-data-vision/src/views/intersectionGroups/l7Tools.js
View file @ 75aae19c
...@@ -2,12 +2,6 @@ import {PointLayer, RasterLayer, LineLayer, HeatmapLayer, PolygonLayer} from '@a ...@@ -2,12 +2,6 @@ import {PointLayer, RasterLayer, LineLayer, HeatmapLayer, PolygonLayer} from '@a
// home - camera图层 // home - camera图层
export function addCameraPoints(scene, msg, offset, callback) { export function addCameraPoints(scene, msg, offset, callback) {
// for (let i = 0; i < msg.length; i++) {
// if (msg[i].isSignal === 0) continue;
// if (!msg[i].isSignal) {
// msg[i].isSignal = 1
// }
// }
const pointLayer = new PointLayer({zIndex: 2}) const pointLayer = new PointLayer({zIndex: 2})
.source(msg, { .source(msg, {
parser: { parser: {
...@@ -20,20 +14,12 @@ export function addCameraPoints(scene, msg, offset, callback) { ...@@ -20,20 +14,12 @@ export function addCameraPoints(scene, msg, offset, callback) {
offsets: offset, offsets: offset,
}) })
.shape('homeCamera') .shape('homeCamera')
// .shape('isSignal', function (level) { .size(20)
// if (level === 1) {
// return 'cross'
// }
// if (level === 0) {
// return 'crossFalse'
// }
// })
.size(16)
.active({ .active({
color: '#ffffff', color: '#ffffff',
mix: 0.6, mix: 0.6,
}) })
.on('click', (e) => { pointLayer.on('click', (e) => {
callback(e) callback(e)
}) })
scene.addLayer(pointLayer) scene.addLayer(pointLayer)
...@@ -90,7 +76,7 @@ export function addLicenseLayer(scene, msg) { ...@@ -90,7 +76,7 @@ export function addLicenseLayer(scene, msg) {
halo: 1, halo: 1,
}) })
.color('#ffffff') .color('#ffffff')
.on('contextmenu', (e) => { pointLayer.on('contextmenu', (e) => {
const input = document.createElement('input') const input = document.createElement('input')
input.setAttribute('readonly', 'readonly') input.setAttribute('readonly', 'readonly')
input.setAttribute('value', e.feature.id) input.setAttribute('value', e.feature.id)
......
wj-data-vision/src/views/intersectionGroups/mapPopup/cameraPopup.vue
View file @ 75aae19c
<template> <template>
<div id="e_popup"> <div id="e_popup">
<div class="equip_camera"> <div class="equip_camera">
<div class="header">{{ 11111 }}</div> <div class="header">{{ model.crossName }}</div>
<div class="main"> <div class="main">
<camera-video style="height: 100%" :video-data="''"/> <camera-video :auto-play="true" style="height: 100%" :video-data="model.videoUrl"/>
</div> </div>
</div> </div>
</div> </div>
...@@ -31,13 +31,13 @@ export default { ...@@ -31,13 +31,13 @@ export default {
<style lang='less' scoped> <style lang='less' scoped>
#e_popup { #e_popup {
background: rgba(15, 38, 69, 1) background: transparent;
} }
.equip_camera { .equip_camera {
width: 448px; width: 314px;
height: 328px; height: 300px;
background-image: url("../../../assets/images/holo/videobackgorund.png"); background-image: url("../../../assets/images/sc/cameraPopup.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
...@@ -51,6 +51,7 @@ export default { ...@@ -51,6 +51,7 @@ export default {
} }
.main { .main {
position: relative;
padding: 2px; padding: 2px;
height: calc(100% - 43px); height: calc(100% - 43px);
} }
......
wj-data-vision/src/views/mapComponents/mapLegends.vue 0 → 100644
View file @ 75aae19c
<template>
<div class="mepLegends"></div>
</template>
<script>
export default {
name: "mepLegends",
components: {},
computed: {},
data() {
return {};
},
mounted() {},
methods: {},
beforeDestroy() {},
};
</script>
<style lang='less' scoped>
.mepLegends{
height: 100px;
width: 400px;
background-color: rgba(13, 127, 215,0.7);
border-radius: 20px;
}
</style>
\ No newline at end of file
wj-data-vision/src/views/phaseAirPlay/index.vue
View file @ 75aae19c
...@@ -22,6 +22,7 @@ function show(layer) { ...@@ -22,6 +22,7 @@ function show(layer) {
item && !item.isVisible() && item.show(); item && !item.isVisible() && item.show();
} }
} }
import {getPhasePolygons} from "../../dao/api"; import {getPhasePolygons} from "../../dao/api";
import {Popup} from "@antv/l7"; import {Popup} from "@antv/l7";
import mapAssets from "../../config/holo/mapAssets"; import mapAssets from "../../config/holo/mapAssets";
...@@ -82,48 +83,32 @@ export default { ...@@ -82,48 +83,32 @@ export default {
setTimeout(() => { setTimeout(() => {
this.initWebS() this.initWebS()
}, 2000) }, 2000)
// todo
let timer = setInterval(() => { let timer = setInterval(() => {
getPhasePolygons().then(res => {
let geo = { let geo = {
type: 'FeatureCollection', type: 'FeatureCollection',
features: [ features: []
{ }
type: 'Feature', console.log('phase polygons', res.content)
properties: { for (let item of res.content) {
color: '#f00' let wktarr = item.wkt.split(';')
}, for (let i = 0; i < wktarr.length; i++) {
geometry: { wktarr[i] = wktarr[i].split(',')
type: 'Polygon', for (let j = 0; j < wktarr[i].length; j++) {
coordinates: [ wktarr[i][j] = Number(wktarr[i][j])
[ }
[104.4140625, 35.460669951495305], }
[98.7890625, 24.206889622398023], geo.features.push({
[111.796875, 27.371767300523047],
[104.4140625, 35.460669951495305],
],
],
},
},
{
type: 'Feature', type: 'Feature',
properties: { properties: item,
color: '#f00'
},
geometry: { geometry: {
type: 'Polygon', type: 'Polygon',
coordinates: [ coordinates: [wktarr]
[ }
[104.4140625, 35.460669951495305], })
[99.7890625, 22.206889622398023],
[111.796875, 26.371767300523047],
[104.4140625, 35.460669951495305],
],
],
},
},
],
} }
this.refreshGreenPolygon(geo) this.refreshGreenPolygon(geo)
})
}, 5000) }, 5000)
this.timers.push(timer) this.timers.push(timer)
// map.addControl(new mapboxgl.NavigationControl(), 'bottom-right'); // map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
...@@ -164,9 +149,6 @@ export default { ...@@ -164,9 +149,6 @@ export default {
}) })
}, },
refreshGreenPolygon(geo) { refreshGreenPolygon(geo) {
getPhasePolygons().then(res => {
console.log('phase polygons',res.content)
})
// 更新 // 更新
if (greenPolygonLayer) { if (greenPolygonLayer) {
greenPolygonLayer.setData(geo) greenPolygonLayer.setData(geo)
...@@ -309,7 +291,9 @@ export default { ...@@ -309,7 +291,9 @@ export default {
} }
} }
}, },
// 更新经纬度-角度-详细信息
// 更新经纬度-角度-详细信息-弹窗信息
setModel(model, options, setColor) { setModel(model, options, setColor) {
if (setColor) { if (setColor) {
model.traverse((child) => { model.traverse((child) => {
...@@ -345,6 +329,7 @@ export default { ...@@ -345,6 +329,7 @@ export default {
addDelUpdateVehicleModels(allData) { addDelUpdateVehicleModels(allData) {
if (this.vehicleModelsNum === 21) { if (this.vehicleModelsNum === 21) {
for (let item of allData) { for (let item of allData) {
// 新增
if (item.dill === "add") { if (item.dill === "add") {
let model = let model =
vehicleModelTypes[`car${item.originalType}`].duplicate(); vehicleModelTypes[`car${item.originalType}`].duplicate();
...@@ -363,22 +348,12 @@ export default { ...@@ -363,22 +348,12 @@ export default {
} }
} }
} }
// console.log('count...', window.tb.world.children.length)
} }
}, },
// 比较websocket车辆前后两次数据差异
diff(oldData, newData) {
// id 只在 newData 中存在且不在 oldData 中存在的即为 add
const add = newData.filter((e) => !oldData.find((c) => c.id === e.id));
// id 只在 oldData 中存在且不在 newData 中存在的即为 dele
const del = oldData.filter((e) => !newData.find((c) => c.id === e.id));
const com = newData.filter((e) => oldData.find((c) => c.id === e.id));
add.forEach((a) => (a.dill = "add"));
del.forEach((d) => (d.dill = "del"));
com.forEach((c) => (c.dill = "com"));
return [...add, ...del, ...com];
},
callCar(msg) { callCar(msg) {
let start = performance.now(); let start = performance.now();
// 筛选可见区域
for (let i = 0; i < msg.length; i++) { for (let i = 0; i < msg.length; i++) {
if (!msg[i].picLicense) { if (!msg[i].picLicense) {
msg[i].picLicense = '' msg[i].picLicense = ''
...@@ -391,39 +366,80 @@ export default { ...@@ -391,39 +366,80 @@ export default {
} }
} }
if (msg.length > 0) { if (msg.length > 0) {
// 第一帧 || 时间戳不相同则放行 // 第一帧 || 时间戳不相同 => 放行
if (this.lastLocation.length === 0 || this.lastLocation[0].dateTime !== msg[0].dateTime) { if (this.lastLocation.length === 0 || this.lastLocation[0].dateTime !== msg[0].dateTime) {
this.situationTimeVal = msg[0].dateTime
// 层级最大 展示3D & 车牌号
if (scene.getZoom() > 17) { if (scene.getZoom() > 17) {
hide([layers.first.vehicle])
window.tb.world.visible = true; window.tb.world.visible = true;
this.currentLocation = msg; let allData = this.diff(this.lastLocation, msg);
let allData = this.diff(this.lastLocation, this.currentLocation);
this.lastLocation = msg; this.lastLocation = msg;
this.addDelUpdateVehicleModels(allData); this.addDelUpdateVehicleModels(allData);
// 添加车牌号图层 this.addOrUpdateLicense(msg)
if (!layers.first.license) {
layers.first.license = l7Tools.addLicenseLayer(scene, msg);
} else { } else {
layers.first.license.setData(msg); this.lastLocation = [];
show(layers.first.license) if (this.selectVehicle) {
this.selectVehicle = null;
} }
} else {
if (window.tb) { if (window.tb) {
window.tb.clear() window.tb.clear()
this.lightShow = false
this.waitingShow = false
window.tb.world.visible = false; window.tb.world.visible = false;
} }
hide(layers.first.license); hide([layers.first.license])
if (!layers.first.vehicle) { this.addOrUpdateVehicle(msg)
layers.first.vehicle = l7Tools.addVehicleLayer(scene, msg);
} else {
layers.first.vehicle && layers.first.vehicle.setData(msg);
}
this.lastLocation = [];
} }
} }
} }
let end = performance.now(); let end = performance.now();
// console.log('cost is', `${end - start}ms`) // console.log('cost is', `${end - start}ms`)
}, },
addOrUpdateLicense(msg) {
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];
}
}
}
layers.first.license.setData(msg);
show(layers.first.license);
}
},
addOrUpdateVehicle(msg) {
if (!layers.first.vehicle) {
layers.first.vehicle = l7Tools.addVehicleLayer(scene, msg);
} else {
layers.first.vehicle && layers.first.vehicle.setData(msg);
show(layers.first.vehicle);
}
},
// 比较websocket车辆前后两次数据差异
diff(oldData, newData) {
// id 只在 newData 中存在且不在 oldData 中存在的即为 add
const add = newData.filter((e) => !oldData.find((c) => c.id === e.id));
// id 只在 oldData 中存在且不在 newData 中存在的即为 dele
const del = oldData.filter((e) => !newData.find((c) => c.id === e.id));
const com = newData.filter((e) => oldData.find((c) => c.id === e.id));
add.forEach((a) => (a.dill = "add"));
del.forEach((d) => (d.dill = "del"));
com.forEach((c) => (c.dill = "com"));
return [...add, ...del, ...com];
},
refreshBounds() { refreshBounds() {
let bounds = map.getBounds(); let bounds = map.getBounds();
let leftDownXy = [bounds._sw.lng, bounds._sw.lat]; let leftDownXy = [bounds._sw.lng, bounds._sw.lat];
......
wj-data-vision/src/views/phaseAirPlay/l7Tools.js
View file @ 75aae19c
...@@ -2,18 +2,14 @@ import {PointLayer, RasterLayer, LineLayer, HeatmapLayer, PolygonLayer} from '@a ...@@ -2,18 +2,14 @@ import {PointLayer, RasterLayer, LineLayer, HeatmapLayer, PolygonLayer} from '@a
// home3 - 绿灯空放polygon图层 // home3 - 绿灯空放polygon图层
export function addGreenPolygon(scene, msg){ export function addGreenPolygon(scene, msg) {
const polygonLayer = new PolygonLayer({zIndex: 2}) const polygonLayer = new PolygonLayer({zIndex: 2})
.source(msg) .source(msg)
.shape('fill') .shape('fill')
// .color('color字段',(value) => { .color('rgba(0, 255, 60, 0.54)')
// if(value === '') return 'red' // .style({
// if(value === '') return 'origin' // opacity: 0.6
// }) // })
.color('#f00')
.style({
opacity: 0.6
})
scene.addLayer(polygonLayer) scene.addLayer(polygonLayer)
return polygonLayer return polygonLayer
} }
......
wj-data-vision/src/views/phaseAirPlay/left/index.vue
View file @ 75aae19c
<template> <template>
<div class="home-left"> <div class="home-left">
<div class="topI"> <div class="topI">
<msg-card title="事故现场监控"> <msg-card title="路口现场监控">
<div class="videos"> <div class="videos">
<camera-video class="videoItem" v-for="item of cameras" :video-data="item.videoUrl"/> <camera-video class="videoItem" v-for="item of cameras" :video-data="item.videoUrl"/>
<span class="top-left"></span> <span class="top-left"></span>
......
wj-data-vision/src/views/slowTraffic/left/index.vue
View file @ 75aae19c
<template> <template>
<div class="home-left"> <div class="home-left">
<div class="topI"> <div class="topI">
<msg-card title="事故现场监控"> <msg-card title="慢行交通现场监控">
<div class="videos"> <div class="videos">
<camera-video :auto-play="true" class="videoItem" v-for="item of cameras" :video-data="item.videoUrl"/> <camera-video class="videoItem" v-for="item of cameras" :video-data="item.videoUrl"/>
<span class="top-left"></span> <span class="top-left"></span>
<span class="top-right"></span> <span class="top-right"></span>
<span class="bottom-left"></span> <span class="bottom-left"></span>
...@@ -12,8 +12,24 @@ ...@@ -12,8 +12,24 @@
</msg-card> </msg-card>
</div> </div>
<div class="bottomI"> <div class="bottomI">
<msg-card class="m-b-10" title="事件辅助定责"> <msg-card class="m-b-10" title="慢行交通报警">
<div class="cardInner">
<div class="optionItem" v-for="item of dangerOptions">
<div class="leftIcon" :class="`danger${item.type}`"></div>
<div class="rightDetail">
<div class="rightInner">
<div class="license">{{ item.behavior }}</div>
<div>
<span>检测时间段：{{ item.timeBetween }}</span> 持续时长：{{ item.duration }}
</div>
<div>
地点：{{ item.location }}
</div>
</div>
</div>
</div>
</div>
</msg-card> </msg-card>
</div> </div>
</div> </div>
...@@ -30,31 +46,37 @@ export default { ...@@ -30,31 +46,37 @@ export default {
computed: {}, computed: {},
data() { data() {
return { return {
cameras:[], time: '09:10:00 - 09:12:30',
location: ['路口', '路段', '高架桥'], cameras: [],
locationVal: 1, dangerOptions: [
isMulti: ['单车', '多车'], {
isMultiVal: 1, type: 1,
timeType: ['早高峰', '平峰', '晚高峰', '夜间'], behavior: '不走斑马线',
timeTypeVal: 1, timeBetween: '10:23:00 ~ 10:27:00',
haveWalker: ['有', '无'], duration: '4min',
haveWalkerVal: 1, location: '湘江中路与劳动西路交叉口南进口'
haveNoVehicle: ['有', '无'], },
haveNoVehicleVal: 1, {
arrowIndex: 2, type: 2,
rows: [ behavior: '随意穿越路口',
{label: '事故时间', value: '2022-09-18 05:26:46'}, timeBetween: '10:23:00 ~ 10:27:00',
{label: '事故地点', value: '港东大街与迎春大街路口东向 直行车道'}, duration: '4min',
{label: '事故描述', value: '疑似多车事故：鲁YBZ796与鲁KF1F97，从不同方向进入路口，行驶路线发生冲突，导致事故。'}, location: '湘江中路与劳动西路交叉口南进口'
{label: '定责建议', value: '港东大街与迎春大街路口东向 直行车道'}, },
{label: '辅助信息', value: '鲁YBZ796 疑似侧碰鲁 鲁KC1F97'}, {
type: 1,
behavior: '信号配时不合理',
timeBetween: '10:23:00 ~ 10:27:00',
duration: '4min',
location: '湘江中路与劳动西路交叉口南进口'
},
], ],
}; };
}, },
mounted() { mounted() {
// 1事故场景 2相位空放 3直左冲突 4慢行交通 5危险驾驶 // 1事故场景 2相位空放 3直左冲突 4慢行交通 5危险驾驶
getCameraListByType({type:4}).then(res => { getCameraListByType({type: 6}).then(res => {
console.log('cameraList',res) console.log('cameraList', res)
this.cameras = res.content this.cameras = res.content
}) })
}, },
...@@ -70,7 +92,7 @@ export default { ...@@ -70,7 +92,7 @@ export default {
font-size: 16px; font-size: 16px;
border-top: 1px solid rgba(62, 108, 150, 1); border-top: 1px solid rgba(62, 108, 150, 1);
border-left: 1px solid rgba(62, 108, 150, 1); border-left: 1px solid rgba(62, 108, 150, 1);
margin-bottom: 20px; margin-bottom: 7px;
.row1 { .row1 {
height: 30px; height: 30px;
...@@ -240,95 +262,57 @@ export default { ...@@ -240,95 +262,57 @@ export default {
.bottomI { .bottomI {
flex: 1; flex: 1;
.analysis { .cardInner {
height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; padding: 10px;
.timeMsg { .optionItem {
height: 30px;
line-height: 30px;
width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: space-around;
margin-bottom: 20px;
align-items: center; align-items: center;
margin-bottom: 7px; /* 四个角 */
font-size: 18px;
span {
font-weight: 700;
}
.el-icon-time {
margin-right: 5px;
}
}
.gradiantPoint { .leftIcon {
display: flex; width: 83px;
margin-top: 30px; height: 84px;
padding: 0 20px; background-size: 100% 100%;
justify-content: space-between;
overflow: visible;
.pointItem {
width: 10px;
height: 18px;
position: relative;
border-radius: 4px;
.arrow-down {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -28px;
width: 31px;
height: 33px;
background-image: url("../../../assets/images/acci/arrow-down.png");
background-position: center;
}
} }
.point1 { .danger1 {
background-color: #1afd9c; background-image: url("../../../assets/images/sc/danger_bicycle.png");
} }
.point2 { .danger2 {
background-color: #28fd28; background-image: url("../../../assets/images/sc/danger_passerby.png");
} }
.point3 {
background-color: #f4fa01;
}
.point4 {
background-color: #fdc616;
}
.point5 {
background-color: #ff972a;
}
.point6 { .rightInner {
background-color: #ef7923; padding: 8px 23px;
font-size: 16px;
color: rgba(222, 234, 255, 1);
background-image: url("../../../assets/images/sc/textBorderBack.png");
background-size: 100% 100%;
} }
.point7 { span {
background-color: #de5a1a; display: inline-block;
margin-right: 25px;
} }
.point8 { .license {
background-color: #cd3d12; color: white;
} font-size: 18px;
font-weight: 500;
margin-bottom: 8px;
.point9 {
background-color: #bd2009;
} }
.point10 {
background-color: #ac0100;
}
} }
} }
} }
......
wj-data-vision/src/views/slowTraffic/right/index.vue
View file @ 75aae19c
<template> <template>
<div class="home-right"> <div class="home-right">
<msg-card title="事故现场监控"> <div class="home-right-inner">
<div class="cardInner"> <msg-card class="m-b-10" :title="`行人轨迹异常历史(${tableData.length}起)`">
<div class="top"> <el-table
<span class="top-left"></span> :header-cell-style="{backgroundColor:'rgba(1, 43, 83, 1)',color:'rgba(217, 237, 255, 1)'}"
<span class="top-right"></span> :row-class-name="userTab"
<span class="bottom-left"></span> :data="tableData"
<span class="bottom-right"></span> style="background-color: transparent; width: 100%;margin-top: 10px">
<!-- <cesium-map class="cesium-map" ref="homeRightTop" c-id="home-right-top"/>--> <el-table-column
<camera-video class="full-h" :video-data="''"/> align="center"
</div> prop="time"
<div class="bottom"> label="时间">
<span class="top-left"></span> </el-table-column>
<span class="top-right"></span> <el-table-column
<span class="bottom-left"></span> prop="location"
<span class="bottom-right"></span> align="center"
<camera-video class="full-h" :video-data="''"/> label="位置">
<!-- <cesium-map class="cesium-map" ref="homeRightBottom" c-id="home-right-bottom"/>--> </el-table-column>
</div> <el-table-column
</div> prop="behavior"
align="center"
label="行为">
</el-table-column>
</el-table>
</msg-card>
<msg-card class="m-b-10" title="非机动车危险驾驶行为">
<el-table
:header-cell-style="{backgroundColor:'rgba(1, 43, 83, 1)',color:'rgba(217, 237, 255, 1)'}"
:row-class-name="userTab"
:data="tableData1"
style="background-color: transparent; width: 100%;margin-top: 10px">
<el-table-column
align="center"
prop="time"
label="日期时间">
</el-table-column>
<el-table-column
prop="startTime"
align="center"
label="开始时间">
</el-table-column>
<el-table-column
prop="endTime"
align="center"
label="结束时间">
</el-table-column>
<el-table-column
prop="behavior"
align="center"
label="危险驾驶行为">
</el-table-column>
</el-table>
</msg-card> </msg-card>
</div>
</div> </div>
</template> </template>
...@@ -29,23 +61,66 @@ ...@@ -29,23 +61,66 @@
import CesiumMap from "../../../components/Standard/cesiumMap.vue"; import CesiumMap from "../../../components/Standard/cesiumMap.vue";
import MsgCard from "../../../components/Standard/msg-card.vue"; import MsgCard from "../../../components/Standard/msg-card.vue";
import CameraVideo from "../../../components/Standard/cameraVideo.vue"; import CameraVideo from "../../../components/Standard/cameraVideo.vue";
import CrossControl from "../../../components/CrossControl/crossControl.vue";
let topViewer, bottomViewer; let topViewer, bottomViewer;
export default { export default {
name: "homeRight", name: "homeRight",
components: {CameraVideo, MsgCard, CesiumMap}, components: {CrossControl, CameraVideo, MsgCard, CesiumMap},
computed: {}, computed: {},
data() { data() {
return {}; return {
tableData: [
{time: '09:00:12', location: '东进口车道1', behavior: '加速跑'},
{time: '09:00:12', location: '东进口车道2', behavior: '不走斑马线'},
{time: '09:00:12', location: '路口内部', behavior: '不走斑马线'},
],
tableData1:[
{time: '2023-03-26', startTime: '09:00:12', endTime: '09:20:12', behavior: 'S形驾驶'},
{time: '2023-03-26', startTime: '09:00:12', endTime: '09:20:12', behavior: 'S形驾驶'},
{time: '2023-03-26', startTime: '09:00:12', endTime: '09:20:12', behavior: 'S形驾驶'},
],
};
}, },
mounted() { mounted() {
// topViewer = this.$refs.homeRightTop.loadMap()
// bottomViewer = this.$refs.homeRightBottom.loadMap()
// topViewer.timeline.container.style.visibility = 'hidden'
// bottomViewer.timeline.container.style.visibility = 'hidden'
}, },
methods: { methods: {
userTab({row, rowIndex}) {
if (rowIndex % 2 === 0) {
return 'warning-row'
} else if (rowIndex % 2 !== 0) {
return 'pager-row'
}
},
objectSpanMethod({row, column, rowIndex, columnIndex}) {
if (columnIndex === 0) {
if (rowIndex % 6 === 0) {
return {
rowspan: 6,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
if (columnIndex === 1) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
}, },
beforeDestroy() { beforeDestroy() {
...@@ -54,9 +129,15 @@ export default { ...@@ -54,9 +129,15 @@ export default {
</script> </script>
<style lang='less' scoped> <style lang='less' scoped>
.full-h{ .cardInner{
height: 100%;
position: relative;
padding: 10px;
}
.full-h {
height: 100%; height: 100%;
} }
::v-deep .content { ::v-deep .content {
margin: 0 margin: 0
} }
...@@ -116,30 +197,77 @@ export default { ...@@ -116,30 +197,77 @@ export default {
background-color: rgba(3, 11, 25, 0.45); background-color: rgba(3, 11, 25, 0.45);
background-image: linear-gradient(90deg, rgba(8, 20, 31, 0) 0%, rgba(6, 16, 26, 1) 100%); background-image: linear-gradient(90deg, rgba(8, 20, 31, 0) 0%, rgba(6, 16, 26, 1) 100%);
.cardInner { .home-right-inner {
position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; height: 100%;
height: 100%
}
.top {
height: 49%;
padding: 13px;
position: relative;
border: 1px solid rgba(24, 144, 255, 0.4);
}
.bottom {
height: 49%;
padding: 13px;
border: 1px solid rgba(24, 144, 255, 0.4);
position: relative;
} }
}
.cesium-map { .m-b-10 {
margin-bottom: 10px;
}
::v-deep .cameraVideo{
height: 100%; height: 100%;
} }
::v-deep .el-table{
height: 85%;
overflow-y: auto;
}
::v-deep .el-table--small td, .el-table--small th{
padding: 4px 0;
}
::v-deep .el-table th{
padding: 4px 0;
}
::v-deep .el-table {
width: 440px;
color: rgba(217, 229, 255, 1);
font-size: 16px;
}
::v-deep .el-table td, .el-table th.is-leaf{
border-bottom: none;
}
::v-deep .el-table th.is-leaf{
border-bottom: none;
}
::v-deep .el-table tr{
background-color: unset;
}
::v-deep .el-table .warning-row {
background-color: transparent;
}
::v-deep .el-table tbody tr:hover > td {
background-color: transparent;
}
::v-deep .el-table__body tr.current-row > td {
background: transparent !important;
}
::v-deep .el-table .pager-row {
background-color: rgba(53, 92, 166, 0.15);
}
::v-deep .el-table .cell .el-table th div {
padding-right: 0;
}
::v-deep .el-table--border td{
border-right: 1px solid rgba(62, 108, 150, 1);
border-bottom: 1px solid rgba(62, 108, 150, 1);
border-left: 1px solid rgba(62, 108, 150, 1);
}
::v-deep .el-table--border th{
border: 1px solid rgba(62, 108, 150, 1);
}
::v-deep .el-table--border{
border: none;
}
::v-deep .el-table--border::after{
width: 0;
}
::v-deep .el-table--border::before{
height: 0;
}
::v-deep .el-table::before{
height: 0;
} }
</style> </style>
\ No newline at end of file
wj-data-vision/src/views/straightLeftConflict/index.vue
View file @ 75aae19c
...@@ -9,6 +9,8 @@ ...@@ -9,6 +9,8 @@
</template> </template>
<script> <script>
import {addConflictPoint} from "./l7Tools";
function hide(layer) { function hide(layer) {
let arr = Array.isArray(layer) ? layer : [layer]; let arr = Array.isArray(layer) ? layer : [layer];
for (let item of arr) { for (let item of arr) {
...@@ -32,6 +34,10 @@ import dict from "../../config/holo/dictionary"; ...@@ -32,6 +34,10 @@ import dict from "../../config/holo/dictionary";
import wsSource from "../../config/holo/wsSource"; import wsSource from "../../config/holo/wsSource";
import {initWs} from "../../config/holo/websocket"; import {initWs} from "../../config/holo/websocket";
import * as l7Tools from "./l7Tools"; import * as l7Tools from "./l7Tools";
import conflictDetail from "./mapPopup/conflictDetail.vue";
// import ConflictDetail from "./mapPopup/conflictDetail.vue";
const ConflictDetail = Vue.extend(conflictDetail)
let map, let map,
scene, scene,
...@@ -41,12 +47,12 @@ let map, ...@@ -41,12 +47,12 @@ let map,
vehicle: null, vehicle: null,
license: null, license: null,
} }
}, }
greenPolygonLayer = null;
export default { export default {
name: 'home4', name: 'home4',
components: { components: {
ConflictDetail,
HomeRight, HomeRight,
HomeLeft, HomeLeft,
WMap WMap
...@@ -82,50 +88,6 @@ export default { ...@@ -82,50 +88,6 @@ export default {
setTimeout(() => { setTimeout(() => {
this.initWebS() this.initWebS()
}, 2000) }, 2000)
// todo
let timer = setInterval(() => {
let geo = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
color: '#f00'
},
geometry: {
type: 'Polygon',
coordinates: [
[
[104.4140625, 35.460669951495305],
[98.7890625, 24.206889622398023],
[111.796875, 27.371767300523047],
[104.4140625, 35.460669951495305],
],
],
},
},
{
type: 'Feature',
properties: {
color: '#f00'
},
geometry: {
type: 'Polygon',
coordinates: [
[
[104.4140625, 35.460669951495305],
[99.7890625, 22.206889622398023],
[111.796875, 26.371767300523047],
[104.4140625, 35.460669951495305],
],
],
},
},
],
}
this.refreshGreenPolygon(geo)
}, 5000)
this.timers.push(timer)
// map.addControl(new mapboxgl.NavigationControl(), 'bottom-right'); // map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
}); });
scene.on("zoomend", (e) => { scene.on("zoomend", (e) => {
...@@ -163,20 +125,35 @@ export default { ...@@ -163,20 +125,35 @@ export default {
}); });
}) })
}, },
refreshGreenPolygon(geo) {
// 更新
if (greenPolygonLayer) {
greenPolygonLayer.setData(geo)
}
// 添加
else {
greenPolygonLayer = l7Tools.addGreenPolygon(scene, geo)
}
},
initWebS() { initWebS() {
if (this.loading) this.loading = false if (this.loading) this.loading = false
this.regisAndSendWs("callCar", {dataType: "1"}); this.regisAndSendWs("callCar", {dataType: "1"});
this.regisAndSendWs("callLight", {dataType: "4"}); this.regisAndSendWs("callLight", {dataType: "4"});
this.getConflictPoint()
},
// 直左冲突点 & popup
getConflictPoint() {
let res = [{
longitude: 112.96290276,
latitude: 28.18286408,
type: '机动车冲突',
detail: '东口左转与南口直行冲突',
}]
l7Tools.addConflictPoint(scene, res)
let pop = new Popup({
// offsets: [-100, 280],
closeButton: false,
anchor:'bottom-left',
closeButtonOffsets: [-200, 17]
})
.setLngLat([112.96290276, 28.18286408])
.setHTML(`<div id="conflictPoint"></div>`)
scene.addPopup(pop);
new ConflictDetail({
propsData: {
model: res[0],
},
}).$mount(`#conflictPoint`);
}, },
callLight(msg) { callLight(msg) {
let lightArr = []; let lightArr = [];
...@@ -306,7 +283,9 @@ export default { ...@@ -306,7 +283,9 @@ export default {
} }
} }
}, },
// 更新经纬度-角度-详细信息
// 更新经纬度-角度-详细信息-弹窗信息
setModel(model, options, setColor) { setModel(model, options, setColor) {
if (setColor) { if (setColor) {
model.traverse((child) => { model.traverse((child) => {
...@@ -342,6 +321,7 @@ export default { ...@@ -342,6 +321,7 @@ export default {
addDelUpdateVehicleModels(allData) { addDelUpdateVehicleModels(allData) {
if (this.vehicleModelsNum === 21) { if (this.vehicleModelsNum === 21) {
for (let item of allData) { for (let item of allData) {
// 新增
if (item.dill === "add") { if (item.dill === "add") {
let model = let model =
vehicleModelTypes[`car${item.originalType}`].duplicate(); vehicleModelTypes[`car${item.originalType}`].duplicate();
...@@ -360,22 +340,12 @@ export default { ...@@ -360,22 +340,12 @@ export default {
} }
} }
} }
// console.log('count...', window.tb.world.children.length)
} }
}, },
// 比较websocket车辆前后两次数据差异
diff(oldData, newData) {
// id 只在 newData 中存在且不在 oldData 中存在的即为 add
const add = newData.filter((e) => !oldData.find((c) => c.id === e.id));
// id 只在 oldData 中存在且不在 newData 中存在的即为 dele
const del = oldData.filter((e) => !newData.find((c) => c.id === e.id));
const com = newData.filter((e) => oldData.find((c) => c.id === e.id));
add.forEach((a) => (a.dill = "add"));
del.forEach((d) => (d.dill = "del"));
com.forEach((c) => (c.dill = "com"));
return [...add, ...del, ...com];
},
callCar(msg) { callCar(msg) {
let start = performance.now(); let start = performance.now();
// 筛选可见区域
for (let i = 0; i < msg.length; i++) { for (let i = 0; i < msg.length; i++) {
if (!msg[i].picLicense) { if (!msg[i].picLicense) {
msg[i].picLicense = '' msg[i].picLicense = ''
...@@ -388,39 +358,81 @@ export default { ...@@ -388,39 +358,81 @@ export default {
} }
} }
if (msg.length > 0) { if (msg.length > 0) {
// 第一帧 || 时间戳不相同则放行 // 第一帧 || 时间戳不相同 => 放行
if (this.lastLocation.length === 0 || this.lastLocation[0].dateTime !== msg[0].dateTime) { if (this.lastLocation.length === 0 || this.lastLocation[0].dateTime !== msg[0].dateTime) {
this.situationTimeVal = msg[0].dateTime
// 层级最大 展示3D & 车牌号
if (scene.getZoom() > 17) { if (scene.getZoom() > 17) {
hide([layers.first.vehicle])
window.tb.world.visible = true; window.tb.world.visible = true;
this.currentLocation = msg; let allData = this.diff(this.lastLocation, msg);
let allData = this.diff(this.lastLocation, this.currentLocation);
this.lastLocation = msg; this.lastLocation = msg;
this.addDelUpdateVehicleModels(allData); this.addDelUpdateVehicleModels(allData);
// 添加车牌号图层 this.addOrUpdateLicense(msg)
if (!layers.first.license) {
layers.first.license = l7Tools.addLicenseLayer(scene, msg);
} else { } else {
layers.first.license.setData(msg); this.lastLocation = [];
show(layers.first.license) if (this.selectVehicle) {
this.selectVehicle = null;
} }
} else {
if (window.tb) { if (window.tb) {
window.tb.clear() window.tb.clear()
this.lightShow = false
this.waitingShow = false
window.tb.world.visible = false; window.tb.world.visible = false;
} }
hide(layers.first.license); hide([layers.first.license])
if (!layers.first.vehicle) { this.addOrUpdateVehicle(msg)
layers.first.vehicle = l7Tools.addVehicleLayer(scene, msg);
} else {
layers.first.vehicle && layers.first.vehicle.setData(msg);
}
this.lastLocation = [];
} }
} }
} }
let end = performance.now(); let end = performance.now();
// console.log('cost is', `${end - start}ms`) // console.log('cost is', `${end - start}ms`)
}, },
addOrUpdateLicense(msg) {
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];
}
}
}
layers.first.license.setData(msg);
show(layers.first.license);
}
},
addOrUpdateVehicle(msg) {
if (!layers.first.vehicle) {
layers.first.vehicle = l7Tools.addVehicleLayer(scene, msg);
} else {
layers.first.vehicle && layers.first.vehicle.setData(msg);
show(layers.first.vehicle);
}
},
// 比较websocket车辆前后两次数据差异
diff(oldData, newData) {
// id 只在 newData 中存在且不在 oldData 中存在的即为 add
const add = newData.filter((e) => !oldData.find((c) => c.id === e.id));
// id 只在 oldData 中存在且不在 newData 中存在的即为 dele
const del = oldData.filter((e) => !newData.find((c) => c.id === e.id));
const com = newData.filter((e) => oldData.find((c) => c.id === e.id));
add.forEach((a) => (a.dill = "add"));
del.forEach((d) => (d.dill = "del"));
com.forEach((c) => (c.dill = "com"));
return [...add, ...del, ...com];
},
refreshBounds() { refreshBounds() {
let bounds = map.getBounds(); let bounds = map.getBounds();
let leftDownXy = [bounds._sw.lng, bounds._sw.lat]; let leftDownXy = [bounds._sw.lng, bounds._sw.lat];
...@@ -464,7 +476,8 @@ export default { ...@@ -464,7 +476,8 @@ export default {
height: 100%; height: 100%;
position: relative; position: relative;
} }
::v-deep .el-table::before{
::v-deep .el-table::before {
height: 0; height: 0;
} }
</style> </style>
......
wj-data-vision/src/views/straightLeftConflict/l7Tools.js
View file @ 75aae19c
...@@ -2,20 +2,23 @@ import {PointLayer, RasterLayer, LineLayer, HeatmapLayer, PolygonLayer} from '@a ...@@ -2,20 +2,23 @@ import {PointLayer, RasterLayer, LineLayer, HeatmapLayer, PolygonLayer} from '@a
// home3 - 绿灯空放polygon图层 // home3 - 绿灯空放polygon图层
export function addGreenPolygon(scene, msg){ export function addConflictPoint(scene, msg){
const polygonLayer = new PolygonLayer({zIndex: 2}) const pointLayer = new PointLayer()
.source(msg) .source(msg, {
.shape('fill') parser: {
// .color('color字段',(value) => { type: 'json',
// if(value === '') return 'red' x: 'longitude',
// if(value === '') return 'origin' y: 'latitude',
// }) },
.color('#f00') })
.shape('circle')
.style({ .style({
opacity: 0.6 blur: 1,
}) })
scene.addLayer(polygonLayer) .size(20)
return polygonLayer .color('#efba0a')
scene.addLayer(pointLayer)
return pointLayer
} }
// 车辆圆点图层 // 车辆圆点图层
......
wj-data-vision/src/views/straightLeftConflict/left/index.vue
View file @ 75aae19c
<template> <template>
<div class="home-left"> <div class="home-left">
<div class="topI"> <div class="topI">
<msg-card title="事故现场监控"> <msg-card title="路口监控">
<div class="videos"> <div class="videos">
<camera-video class="videoItem" v-for="item of cameras" :video-data="item.videoUrl"/> <camera-video class="videoItem" v-for="item of cameras" :video-data="item.videoUrl"/>
<span class="top-left"></span> <span class="top-left"></span>
......
wj-data-vision/src/views/straightLeftConflict/mapPopup/conflictDetail.vue 0 → 100644
View file @ 75aae19c
<template>
<div class="conflictDetail">
<div class="conflictDetail_head">
<span></span>机动车冲突
</div>
<div class="content">
<div class="detailItem">
<span>东口左转与南口直行冲突</span
>
</div>
</div>
</div>
</template>
<script>
export default {
name: "conflictDetail",
data() {
return {};
},
props: ["model"],
watch: {
model: {
handler(val) {
},
deep: true, // 深度监听
immediate: true, // 初次监听即执行
}
},
mounted() {
},
methods: {},
computed: {},
beforeDestroy() {
},
};
</script>
<style lang="less" scoped>
.conflictDetail {
font-size: 16px;
position: relative;
width: 291px;
height: 235px;
background-image: url("../../../assets/images/sc/popup_redback.png");
background-size: 100% 100%;
background-repeat: no-repeat;
.conflictDetail_head {
position: absolute;
top: -18px;
width: 50%;
background-image: linear-gradient(90deg, rgba(233, 75, 76, 1) 0%, rgba(233, 75, 76, 0) 100%);
height: 35px;
color: white;
display: flex;
align-items: center;
font-size: 20px;
font-weight: 700;
span {
display: inline-block;
width: 18px;
height: 18px;
margin: 0 5px;
line-height: 25px;
background-image: url('../../../assets/images/holo/vehicle_popup_icon.png');
background-position: center;
background-repeat: no-repeat;
}
}
.content {
height: calc(100% - 15px);
display: flex;
padding: 18px 24px;
flex-direction: column;
.detailItem {
height: 30px;
line-height: 30px;
white-space: nowrap;
color: white;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
span {
display: inline-block;
}
span.left {
text-align: left;
padding-left: 20px;
background-image: url("../../../assets/images/acci/arrow-origin.png");
background-size: auto;
background-repeat: no-repeat;
background-position: left;
color: rgba(207, 238, 255, 0.9);
}
span.right {
text-align: left;
color: white;
}
}
}
}
</style>
wj-data-vision/src/views/straightLeftConflict/right/index.vue
View file @ 75aae19c
...@@ -176,14 +176,15 @@ export default { ...@@ -176,14 +176,15 @@ export default {
height: 15%; height: 15%;
padding: 10px 0; padding: 10px 0;
} }
::v-deep .el-table{
height: 85%;
overflow-y: auto;
}
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
height: 100%; height: 100%;
::v-deep .el-table{
height: 85%;
overflow-y: auto;
}
::v-deep .el-table--small td, .el-table--small th{ ::v-deep .el-table--small td, .el-table--small th{
padding: 4px 0; padding: 4px 0;
} }
......
wj-manage-web/public/config.js
View file @ 75aae19c
...@@ -31,8 +31,11 @@ const cesium_config = { ...@@ -31,8 +31,11 @@ const cesium_config = {
tile3dCenter: [112.929960602617,28.2186568459113], // Cesium 3D tile 三维路口模型坐标 tile3dCenter: [112.929960602617,28.2186568459113], // Cesium 3D tile 三维路口模型坐标
tile3dURL: 'http://10.102.1.180:9090/1111/tileset.json', // 3D tile 三维路口模型 // tile3dURL: 'http://10.102.1.180:9090/1111/tileset.json', // 3D tile 三维路口模型
// tile3dURL: 'http://10.102.1.180:9090/cccc/tileset.json', // 3D tile 三维路口模型
// tile3dURL: 'http://192.168.2.78:9090/changsha2023/tileset.json', // 3D tile 三维路口模型
// tile3dURL: 'http://localhost:9003/model/scOjFHld/tileset.json', //李老八路径/
tile3dURL:'http://192.168.2.78:9090/changsha123/tileset.json',
zoomHeight: 1800, // 3D map 默认视角高度 zoomHeight: 1800, // 3D map 默认视角高度
baseMap: 'http://106.120.201.126:14722/styles/OSM%20OpenMapTiles/{z}/{x}/{y}@2x.png', // 3D map 标清底图 baseMap: 'http://106.120.201.126:14722/styles/OSM%20OpenMapTiles/{z}/{x}/{y}@2x.png', // 3D map 标清底图
......
wj-manage-web/src/components/Standard/cesiumMap.vue
View file @ 75aae19c
...@@ -15,7 +15,7 @@ export default { ...@@ -15,7 +15,7 @@ export default {
computed: {}, computed: {},
methods: { methods: {
loadMap() { loadMap() {
// Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkZWVjYmI0Mi0wMzk2LTQ2YjMtYjYwOC04MmMyNzEyYjJiOTMiLCJpZCI6MTA0MTAyLCJpYXQiOjE2NjAwMDQ5MjR9.YwCrjFrZrgYYxxxqAXlDWB_eQdmPh8kgj8ZRfLcEOT4'; Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkZWVjYmI0Mi0wMzk2LTQ2YjMtYjYwOC04MmMyNzEyYjJiOTMiLCJpZCI6MTA0MTAyLCJpYXQiOjE2NjAwMDQ5MjR9.YwCrjFrZrgYYxxxqAXlDWB_eQdmPh8kgj8ZRfLcEOT4';
viewer = new Cesium.Viewer(this.cId, { viewer = new Cesium.Viewer(this.cId, {
animation: false, // 隐藏动画控件 animation: false, // 隐藏动画控件
baseLayerPicker: false, // 隐藏图层选择控件 baseLayerPicker: false, // 隐藏图层选择控件
...@@ -35,12 +35,9 @@ export default { ...@@ -35,12 +35,9 @@ export default {
// 如场景中的元素没有随仿真时间变化，请考虑将设置maximumRenderTimeChange为较高的值，例如Infinity // 如场景中的元素没有随仿真时间变化，请考虑将设置maximumRenderTimeChange为较高的值，例如Infinity
// maximumRenderTimeChange: Infinity, // maximumRenderTimeChange: Infinity,
shadows: false, shadows: false,
imageryProvider: new Cesium.UrlTemplateImageryProvider({ // imageryProvider: new Cesium.UrlTemplateImageryProvider({
url: cesium_config.baseMap, // url: cesium_config.baseMap,
fileExtension: "png" // fileExtension: "png"
}),
// imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
// url: "https://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/",
// }), // }),
// terrainProvider: Cesium.createWorldTerrain(), // 地形 // terrainProvider: Cesium.createWorldTerrain(), // 地形
}); });
...@@ -49,22 +46,13 @@ export default { ...@@ -49,22 +46,13 @@ export default {
const tileset = new Cesium.Cesium3DTileset({ const tileset = new Cesium.Cesium3DTileset({
url: cesium_config.tile3dURL url: cesium_config.tile3dURL
}); });
tileset.readyPromise.then(function (tileset) { // tileset.readyPromise.then(() => {
var boundingSphere = tileset.boundingSphere; // const position = Cesium.Cartesian3.fromDegrees(cesium_config.tile3dCenter[0], cesium_config.tile3dCenter[1], 0)
var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center); // tileset.root.transform = Cesium.Transforms.eastNorthUpToFixedFrame(position);
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); // })
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 10.0);
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
});
tileset.readyPromise.then(() => {
const position = Cesium.Cartesian3.fromDegrees(cesium_config.tile3dCenter[0], cesium_config.tile3dCenter[1], -60)
tileset.root.transform = Cesium.Transforms.eastNorthUpToFixedFrame(position);
}
)
viewer.scene.primitives.add(tileset) viewer.scene.primitives.add(tileset)
// viewer.zoomTo(tileset); viewer.zoomTo(tileset);
viewer.cesiumWidget.creditContainer.style.display = "none" viewer.cesiumWidget.creditContainer.style.display = "none"
...@@ -86,14 +74,14 @@ export default { ...@@ -86,14 +74,14 @@ export default {
Cesium.CameraEventType.LEFT_DRAG, Cesium.CameraEventType.LEFT_DRAG,
]; ];
viewer.scene.globe.enableLighting = true viewer.scene.globe.enableLighting = true
viewer.camera.flyTo({ // viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(...cesium_config.center, cesium_config.zoomHeight), // destination: Cesium.Cartesian3.fromDegrees(...cesium_config.center, cesium_config.zoomHeight),
orientation: { // orientation: {
heading: Cesium.Math.toRadians(0), // 旋转角度 // heading: Cesium.Math.toRadians(0), // 旋转角度
pitch: Cesium.Math.toRadians(-90.0), // 相机方向 // pitch: Cesium.Math.toRadians(-90.0), // 相机方向
}, // },
duration: 0.5 // duration: 0.5
}); // });
return viewer return viewer
}, },
}, },
......
wj-manage-web/src/views/situation/index.vue
View file @ 75aae19c
...@@ -556,36 +556,33 @@ export default { ...@@ -556,36 +556,33 @@ export default {
}, },
}).$mount("#equipment_popup"); }).$mount("#equipment_popup");
}, },
// map 可视范围发生变化 // map 可视范围发生变化
refreshMap() { refreshMap() {
if (this.$refs.switch) { if (this.$refs.switch) {
for (let item of this.$refs.switch.getOptions()) { for (let item of this.$refs.switch.getOptions()) {
if (item.check) { if (item.check) {
this[`switch${item.label}`](); this[`switch${item.label}`]();
let zoom = scene.getZoom() // let zoom = scene.getZoom()
// 处理图层显隐 // // 处理图层显隐
if (item.label === 'first') { // if (item.label === 'first') {
if (zoom > 18) { // if (zoom > 18) {
show(layers.first.license) // show(layers.first.license)
hide([layers.first.vehiclePic]) // hide([layers.first.vehiclePic])
} // }
if (zoom > 17 && zoom <= 18) { // if (zoom > 17 && zoom <= 18) {
show([layers.first.vehiclePic, layers.first.license]) // show([layers.first.vehiclePic, layers.first.license])
hide([layers.first.vehicle]) // hide([layers.first.vehicle])
} // }
if (zoom <= 17) { // if (zoom <= 17) {
show([layers.first.vehicle]) // show([layers.first.vehicle])
hide([layers.first.vehiclePic, layers.first.license]) // hide([layers.first.vehiclePic, layers.first.license])
} // }
//
} // }
} }
} }
} }
}, },
// 切换业务图层 // 切换业务图层
changeCheck(item) { changeCheck(item) {
if (item.check) { if (item.check) {
...@@ -620,6 +617,9 @@ export default { ...@@ -620,6 +617,9 @@ export default {
} }
}, },
// 更新经纬度-角度-详细信息-弹窗信息 // 更新经纬度-角度-详细信息-弹窗信息
setModel(model, options, setColor) { setModel(model, options, setColor) {
if (setColor) { if (setColor) {
...@@ -657,7 +657,6 @@ export default { ...@@ -657,7 +657,6 @@ export default {
model.setRotation({x: 90, y: 360 - options.courseAngle - 90, z: 0}); model.setRotation({x: 90, y: 360 - options.courseAngle - 90, z: 0});
} }
}, },
// 改变车辆详情弹窗内容 // 改变车辆详情弹窗内容
changeVehicleDetail(data) { changeVehicleDetail(data) {
vehicleDetailPopup = new Popup({ vehicleDetailPopup = new Popup({
...@@ -674,14 +673,12 @@ export default { ...@@ -674,14 +673,12 @@ export default {
}, },
}).$mount("#vehicle_popup"); }).$mount("#vehicle_popup");
}, },
// 选中模型改变 // 选中模型改变
onSelectedChangeVehicle(e) { onSelectedChangeVehicle(e) {
this.vehiclePopupVisible = true this.vehiclePopupVisible = true
this.selectVehicle = e.detail.userData.data; this.selectVehicle = e.detail.userData.data;
this.changeVehicleDetail(this.selectVehicle) this.changeVehicleDetail(this.selectVehicle)
}, },
// 根据处理后的数组新增-删除-更新模型 // 根据处理后的数组新增-删除-更新模型
addDelUpdateVehicleModels(allData) { addDelUpdateVehicleModels(allData) {
if (this.vehicleModelsNum === 21) { if (this.vehicleModelsNum === 21) {
...@@ -713,34 +710,9 @@ export default { ...@@ -713,34 +710,9 @@ export default {
console.log('count...', window.tb.world.children.length) console.log('count...', window.tb.world.children.length)
} }
}, },
// 添加车牌号图层
addOrUpdateLicense(msg){
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];
}
}
}
layers.first.license.setData(msg);
show(layers.first.license);
}
},
// websocket 回调
callCar(msg) { callCar(msg) {
let start = performance.now(); let start = performance.now();
// 筛选可见区域
for (let i = 0; i < msg.length; i++) { for (let i = 0; i < msg.length; i++) {
if (!msg[i].picLicense) { if (!msg[i].picLicense) {
msg[i].picLicense = '' msg[i].picLicense = ''
...@@ -753,19 +725,19 @@ export default { ...@@ -753,19 +725,19 @@ export default {
} }
} }
if (this.sceneLoaded && msg.length > 0) { if (this.sceneLoaded && msg.length > 0) {
// 第一帧 || 时间戳不相同则放行 // 第一帧 || 时间戳不相同 => 放行
if (this.lastLocation.length === 0 || this.lastLocation[0].dateTime !== msg[0].dateTime) { if (this.lastLocation.length === 0 || this.lastLocation[0].dateTime !== msg[0].dateTime) {
this.situationTimeVal = msg[0].dateTime this.situationTimeVal = msg[0].dateTime
// 层级最大 展示3D & 车牌号 // 层级最大 展示3D & 车牌号
if (scene.getZoom() > 18) { if (scene.getZoom() > 18) {
hide([layers.first.vehicle, layers.first.vehiclePic])
window.tb.world.visible = true; window.tb.world.visible = true;
this.currentLocation = msg; this.currentLocation = msg;
let allData = this.diff(this.lastLocation, this.currentLocation); let allData = this.diff(this.lastLocation, this.currentLocation);
this.lastLocation = msg; this.lastLocation = msg;
this.addDelUpdateVehicleModels(allData); this.addDelUpdateVehicleModels(allData);
this.addOrUpdateLicense(msg) this.addOrUpdateLicense(msg)
} } else {
else {
this.lastLocation = []; this.lastLocation = [];
if (this.selectVehicle) { if (this.selectVehicle) {
this.selectVehicle = null; this.selectVehicle = null;
...@@ -778,15 +750,28 @@ export default { ...@@ -778,15 +750,28 @@ export default {
} }
let zoom = scene.getZoom() let zoom = scene.getZoom()
if (zoom > 17) { if (zoom > 17) {
// 层级中等 展示车牌号 & 图片 hide([layers.first.vehicle])
this.addOrUpdateVehiclePic(msg)
this.addOrUpdateLicense(msg) this.addOrUpdateLicense(msg)
if (!layers.first.vehiclePic) { }
layers.first.vehiclePic = l7Tools.addVehiclePic(scene, msg); if (zoom <= 17) {
hide([layers.first.license,layers.first.vehiclePic])
this.addOrUpdateVehicle(msg)
}
}
}
}
let end = performance.now();
// console.log('cost is', `${end - start}ms`)
},
addOrUpdateLicense(msg) {
if (!layers.first.license) {
layers.first.license = l7Tools.addLicenseLayer(scene, msg);
} else { } else {
for (let msgItem of msg) { for (let msgItem of msg) {
for (let old of layers.first.vehiclePic.encodedData) { for (let old of layers.first.license.encodedData) {
if ( if (
msgItem.originalType === old.shape && msgItem.picLicense === old.shape &&
turf.distance( turf.distance(
[msgItem.longitude, msgItem.latitude], [msgItem.longitude, msgItem.latitude],
old.coordinates, old.coordinates,
...@@ -798,27 +783,56 @@ export default { ...@@ -798,27 +783,56 @@ export default {
} }
} }
} }
layers.first.vehiclePic.setData(msg); layers.first.license.setData(msg);
} show(layers.first.license);
} }
if (zoom <= 17) { },
addOrUpdateVehicle(msg) {
if (!layers.first.vehicle) { if (!layers.first.vehicle) {
layers.first.vehicle = l7Tools.addVehicleLayer(scene, msg); layers.first.vehicle = l7Tools.addVehicleLayer(scene, msg);
} else { } else {
show(layers.first.vehicle);
layers.first.vehicle && layers.first.vehicle.setData(msg); layers.first.vehicle && layers.first.vehicle.setData(msg);
show(layers.first.vehicle);
} }
},
addOrUpdateVehiclePic(msg) {
if (!layers.first.vehiclePic) {
layers.first.vehiclePic = l7Tools.addVehiclePic(scene, msg);
} else {
for (let msgItem of msg) {
for (let old of layers.first.vehiclePic.encodedData) {
if (
msgItem.originalType === 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.vehiclePic.setData(msg);
show(layers.first.vehiclePic)
} }
let end = performance.now(); },
// console.log('cost is', `${end - start}ms`) // 比较websocket车辆前后两次数据差异
diff(oldData, newData) {
// id 只在 newData 中存在且不在 oldData 中存在的即为 add
const add = newData.filter((e) => !oldData.find((c) => c.id === e.id));
// id 只在 oldData 中存在且不在 newData 中存在的即为 dele
const del = oldData.filter((e) => !newData.find((c) => c.id === e.id));
const com = newData.filter((e) => oldData.find((c) => c.id === e.id));
add.forEach((a) => (a.dill = "add"));
del.forEach((d) => (d.dill = "del"));
com.forEach((c) => (c.dill = "com"));
return [...add, ...del, ...com];
}, },
callPasserby(msg) { callPasserby(msg) {
let arr = []; let arr = [];
for (let cross of msg) { for (let cross of msg) {
...@@ -1139,18 +1153,7 @@ export default { ...@@ -1139,18 +1153,7 @@ export default {
if (success) { if (success) {
} }
}, },
// 比较websocket车辆前后两次数据差异
diff(oldData, newData) {
// id 只在 newData 中存在且不在 oldData 中存在的即为 add
const add = newData.filter((e) => !oldData.find((c) => c.id === e.id));
// id 只在 oldData 中存在且不在 newData 中存在的即为 dele
const del = oldData.filter((e) => !newData.find((c) => c.id === e.id));
const com = newData.filter((e) => oldData.find((c) => c.id === e.id));
add.forEach((a) => (a.dill = "add"));
del.forEach((d) => (d.dill = "del"));
com.forEach((c) => (c.dill = "com"));
return [...add, ...del, ...com];
},
// videoList 删除单个 video // videoList 删除单个 video
deleteVideo(item) { deleteVideo(item) {
let index = this.videoListData.indexOf(item); let index = this.videoListData.indexOf(item);
......
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