Skip to content

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

大屏引入cesium&快捷键配置&事故场景布局&样式完善

parent d593d3f7
Hide whitespace changes
Inline Side-by-side
Showing with 2809 additions and 196 deletions
wj-data-vision/public/index.html
View file @ bc5d17ab
...@@ -21,6 +21,8 @@ ...@@ -21,6 +21,8 @@
<link href="/cdn/libs/mapbox-gl/mapbox-gl.css" rel="stylesheet"/> <link href="/cdn/libs/mapbox-gl/mapbox-gl.css" rel="stylesheet"/>
<script src="/cdn/libs/threebox/threebox.min.js" type="text/javascript"></script> <script src="/cdn/libs/threebox/threebox.min.js" type="text/javascript"></script>
<link href="/cdn/libs/threebox/threebox.css" rel="stylesheet"/> <link href="/cdn/libs/threebox/threebox.css" rel="stylesheet"/>
<link rel="stylesheet" href="/cdn/libs/Cesium/Widgets/widgets.css">
<script type="text/javascript" src="/cdn/libs/Cesium/Cesium.js"></script>
<script src="/cdn/libs/turf/turf.min.js" type="text/javascript"></script> <script src="/cdn/libs/turf/turf.min.js" type="text/javascript"></script>
<script src="/cdn/libs/flvjs/flv.min.js" type="text/javascript"></script> <script src="/cdn/libs/flvjs/flv.min.js" type="text/javascript"></script>
<script src='/cdn/libs/mapUtil/mapUtilsV3.js' type="text/javascript"></script> <script src='/cdn/libs/mapUtil/mapUtilsV3.js' type="text/javascript"></script>
......
wj-data-vision/src/components/Standard/cameraVideo.vue
View file @ bc5d17ab
<template> <template>
<div class="cameraVideo" v-loading="loading" element-loading-text="视频加载中.." <div :class="['cameraVideo',border?'cameraVideoBorder':'']" v-loading="loading" element-loading-text="视频加载中.."
element-loading-spinner="el-icon-loading" element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"> element-loading-background="rgba(0, 0, 0, 0.8)">
<span v-show="border" class="top-left"></span>
<span v-show="border" class="top-right"></span>
<span v-show="border" class="bottom-left"></span>
<span v-show="border" class="bottom-right"></span>
<video <video
@loadstart="loadstart($event)" @loadstart="loadstart($event)"
@canplay="canplay($event)" @canplay="canplay($event)"
...@@ -12,7 +16,7 @@ ...@@ -12,7 +16,7 @@
<script> <script>
export default { export default {
name: "cameraVideo", name: "cameraVideo",
props: ["videoData", 'autoPlay'], props: ["videoData", 'autoPlay','border'],
watch: {}, watch: {},
methods: { methods: {
canplay() { canplay() {
...@@ -108,13 +112,57 @@ export default { ...@@ -108,13 +112,57 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
::v-deep .el-loading-mask{
top: 1px;
bottom: 1px;
left: 1px;
right: 1px;
}
.cameraVideo { .cameraVideo {
position: relative; //position: relative;
.videoControl { .videoControl {
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
} }
.cameraVideoBorder{
border: 1px solid #022950;
}
.top-left{
position: absolute;
left: -1px;
top: -1px;
padding: 6px;
border-style: solid;
border-color: #1889f1;
border-width: 2px 0 0 2px;
}
.top-right{
position: absolute;
right: -1px;
top: -1px;
padding: 6px;
border-style: solid;
border-color: #1889f1;
border-width: 2px 2px 0 0;
}
.bottom-left{
position: absolute;
right: -1px;
bottom: -1px;
padding: 6px;
border-style: solid;
border-color: #1889f1;
border-width: 0 2px 2px 0;
}
.bottom-right{
position: absolute;
left: -1px;
bottom: -1px;
padding: 6px;
border-style: solid;
border-color: #1889f1;
border-width: 0 0 2px 2px;
}
</style> </style>
wj-data-vision/src/components/Standard/cesiumMap.vue
View file @ bc5d17ab
...@@ -47,28 +47,28 @@ export default { ...@@ -47,28 +47,28 @@ export default {
}); });
// tileset三维场景 // tileset三维场景
const tileset = new Cesium.Cesium3DTileset({ // const tileset = new Cesium.Cesium3DTileset({
// url:'http://121.36.99.212:35002/ABCEarth/examples/examples/assets/model/crossroad/dl/tileset.json', // // url:'http://121.36.99.212:35002/ABCEarth/examples/examples/assets/model/crossroad/dl/tileset.json',
url: 'http://10.102.1.180:9090/1111/tileset.json' // url: 'http://10.102.1.180:9090/1111/tileset.json'
}); // });
tileset.readyPromise.then((a) => { // tileset.readyPromise.then((a) => {
console.log('a', a) // console.log('a', a)
const position = Cesium.Cartesian3.fromDegrees(112.968200, 28.189658, 0)// 给的坐标 位置不对 需要转换？ // const position = Cesium.Cartesian3.fromDegrees(112.968200, 28.189658, 0)// 给的坐标 位置不对 需要转换？
// const position = Cesium.Cartesian3.fromDegrees(112.929960602617,28.2186568459113, 0) // // const position = Cesium.Cartesian3.fromDegrees(112.929960602617,28.2186568459113, 0)
//
//
/* // /*
const heading = 45 // 绕X轴角度 // const heading = 45 // 绕X轴角度
const A = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(heading)) // const A = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(heading))
const rotationX = Cesium.Matrix4.fromRotationTranslation(A); // const rotationX = Cesium.Matrix4.fromRotationTranslation(A);
Cesium.Matrix4.multiply(mat, rotationX, mat) // Cesium.Matrix4.multiply(mat, rotationX, mat)
*/ // */
tileset.root.transform = Cesium.Transforms.eastNorthUpToFixedFrame(position); // 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"
...@@ -111,53 +111,53 @@ export default { ...@@ -111,53 +111,53 @@ export default {
} }
</script> </script>
<style> <style>
.cesium-viewer-timelineContainer { /*.cesium-viewer-timelineContainer {*/
z-index: 15; /* z-index: 15;*/
left: 625px !important; /* left: 625px !important;*/
width: 1025px !important; /* width: 1025px !important;*/
/*right: 260px !important;*/ /* !*right: 260px !important;*!*/
bottom: 35px !important; /* bottom: 35px !important;*/
height: 40px !important; /* height: 40px !important;*/
} /*}*/
.cesium-timeline-bar { /*.cesium-timeline-bar {*/
height: 30px; /* height: 30px;*/
} /*}*/
.cesium-timeline-main { /*.cesium-timeline-main {*/
height: inherit; /* height: inherit;*/
} /*}*/
.cesium-timeline-trackContainer { /*.cesium-timeline-trackContainer {*/
height: unset !important; /* height: unset !important;*/
} /*}*/
/* pop框css*/ /*!* pop框css*!*/
.cesium-popup-panel { /*.cesium-popup-panel {*/
opacity: 0.8; /* opacity: 0.8;*/
/*width: 312px;*/ /* !*width: 312px;*!*/
position: absolute; /* position: absolute;*/
z-index: 0; /* z-index: 0;*/
/*color: #00fcf9;*/ /* !*color: #00fcf9;*!*/
/*background: rgba(23, 50, 108, 0.6);*/ /* !*background: rgba(23, 50, 108, 0.6);*!*/
/*border: 1px solid #4674d6;*/ /* !*border: 1px solid #4674d6;*!*/
} /*}*/
.cesium-popup-close-btn > svg:hover { /*.cesium-popup-close-btn > svg:hover {*/
color: #00fcf9 !important; /* color: #00fcf9 !important;*/
} /*}*/
.cesium-popup-close-btn > svg { /*.cesium-popup-close-btn > svg {*/
display: none; /* display: none;*/
user-select: auto; /* user-select: auto;*/
color: #4674d6; /* color: #4674d6;*/
cursor: pointer; /* cursor: pointer;*/
width: 15px; /* width: 15px;*/
/* height: 15px; */ /* !* height: 15px; *!*/
} /*}*/
.cesium-viewer { /*.cesium-viewer {*/
position: unset; /* position: unset;*/
} /*}*/
</style> </style>
wj-data-vision/src/components/Standard/map/index.vue
View file @ bc5d17ab
...@@ -21,6 +21,7 @@ export default { ...@@ -21,6 +21,7 @@ export default {
}, },
methods: { methods: {
initMap() { initMap() {
mapboxgl.accessToken = 'pk.eyJ1IjoibmluZ2x4IiwiYSI6ImNsYnlnM2s2ODBnNmIzcHBpbzY5aDh3bHAifQ.hQL4zLjBss5i4x-zuFp9tg'
map = new mapboxgl.Map({ map = new mapboxgl.Map({
container: this.mapId, container: this.mapId,
style: map_config.MAP_STYLE, style: map_config.MAP_STYLE,
......
wj-data-vision/src/components/Standard/msg-card.vue
View file @ bc5d17ab
...@@ -90,10 +90,10 @@ export default { ...@@ -90,10 +90,10 @@ export default {
padding: 6px; padding: 6px;
//background-image: url('../../assets/images/holo/border.png'); //background-image: url('../../assets/images/holo/border.png');
background-size: 100% 100%; background-size: 100% 100%;
margin: 10px 0 15px 0; //margin: 10px 0 15px 0;
} }
.msg-card-content { .msg-card-content {
height: calc(100% - 60px); height: calc(100% - 45px);
} }
.msg-card-content-noHeader { .msg-card-content-noHeader {
height: 100%; height: 100%;
......
wj-data-vision/src/components/Standard/timeKeeper.vue
View file @ bc5d17ab
...@@ -47,7 +47,7 @@ export default { ...@@ -47,7 +47,7 @@ export default {
}, },
}, },
computed: {}, computed: {},
beforeDestory() { beforeDestroy() {
clearInterval(this.timer); clearInterval(this.timer);
}, },
}; };
......
wj-data-vision/src/config/routes.js
View file @ bc5d17ab
...@@ -12,7 +12,8 @@ export default [ ...@@ -12,7 +12,8 @@ export default [
}, },
{ {
path: '/home', path: '/home',
component: (resolve) => require(['@/views/situation/index'], resolve), // component: (resolve) => require(['@/views/home/index'], resolve),
component: (resolve) => require(['@/views/home/index'], resolve),
}, },
] ]
wj-data-vision/src/views/home/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="home-main">
<home1 v-if="currentView === 1"/>
<home2 v-if="currentView === 2"/>
<home3 v-if="currentView === 3"/>
<home4 v-if="currentView === 4"/>
<home5 v-if="currentView === 5"/>
<home6 v-if="currentView === 6"/>
</div>
</template>
<script>
import Home1 from "../home1/index.vue";
import Home2 from "../home2/index.vue";
import Home3 from "../home3/index.vue";
import Home4 from "../home4/index.vue";
import Home5 from "../home5/index.vue";
import Home6 from "../home6/index.vue";
export default {
name: "home",
components: {Home6, Home5, Home4, Home3, Home2, Home1},
computed: {},
data() {
return {
currentView: 1,
};
},
mounted() {
// 快捷键
window.onkeydown = () => {
console.log('event.keyCode',event.keyCode)
if (event.altKey && (event.keyCode === 49 || event.keyCode === 97)) {
this.currentView = 1
}
if (event.altKey && (event.keyCode === 50 || event.keyCode === 98)) {
this.currentView = 2
}
if (event.altKey && (event.keyCode === 51 || event.keyCode === 99)) {
this.currentView = 3
}
if (event.altKey && (event.keyCode === 52 || event.keyCode === 100)) {
this.currentView = 4
}
if (event.altKey && (event.keyCode === 53 || event.keyCode === 101)) {
this.currentView = 5
}
if (event.altKey && (event.keyCode === 54 || event.keyCode === 102)) {
this.currentView = 6
}
}
},
methods: {},
beforeDestroy() {},
};
</script>
<style lang='less' scoped>
.home-main{
position: relative;
height: 100%;
width: 100%;
}
</style>
\ No newline at end of file
wj-data-vision/src/views/situation/crossDetail.vue → wj-data-vision/src/views/home1/crossDetail.vue
View file @ bc5d17ab
...@@ -1550,7 +1550,7 @@ export default { ...@@ -1550,7 +1550,7 @@ export default {
}, },
}, },
computed: {}, computed: {},
beforeDestory() { beforeDestroy() {
}, },
}; };
</script> </script>
......
wj-data-vision/src/views/situation/equipmentSwitch.vue → wj-data-vision/src/views/home1/equipmentSwitch.vue
View file @ bc5d17ab
...@@ -63,7 +63,7 @@ export default { ...@@ -63,7 +63,7 @@ export default {
}, },
}, },
computed: {}, computed: {},
beforeDestory() {}, beforeDestroy() {},
}; };
</script> </script>
......
wj-data-vision/src/views/situation/index.vue → wj-data-vision/src/views/home1/index.vue
View file @ bc5d17ab
...@@ -2,41 +2,44 @@ ...@@ -2,41 +2,44 @@
<div class="main" v-loading.fullscreen.lock="loading" element-loading-text="数据加载中.." <div class="main" v-loading.fullscreen.lock="loading" element-loading-text="数据加载中.."
element-loading-spinner="el-icon-loading" element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"> element-loading-background="rgba(0, 0, 0, 0.8)">
<situation-time v-if='currentCheck === "first"' class="right500" :time="this.situationTimeVal"/> <div class="main_first_view main_item">
<wMap :mapId="'situation-map'" ref="wMap"/> <!-- <camera-video :border="true" class="main-cameraVideo" :video-data="'1'"/>-->
<!--左右图表组件--> <situation-time v-if='currentCheck === "first"' class="right500" :time="this.situationTimeVal"/>
<message-boxes v-show="showCard" :show="boxesShow"/> <wMap :mapId="'situation-map'" ref="wMap"/>
<!--图层切换按钮--> <!--左右图表组件-->
<layers-switch <message-boxes v-show="showCard" :show="boxesShow"/>
ref="switch" <!--图层切换按钮-->
:show="boxesShow" <layers-switch
@changeCheck="changeCheck" ref="switch"
@visibleChange="visibleChange" :show="boxesShow"
:class="[{ generalSwitch: boxesShow }, { rightSwitch: !boxesShow }]" @changeCheck="changeCheck"
/> @visibleChange="visibleChange"
<!--视频播放组件--> :class="[{ generalSwitch: boxesShow }, { rightSwitch: !boxesShow }]"
<video-list ref="videoList" />
v-if="videoListData && videoListData.length" <!--视频播放组件-->
@delVideo="deleteVideo" <video-list ref="videoList"
:videoListData="videoListData" v-if="videoListData && videoListData.length"
/> @delVideo="deleteVideo"
<!--路口详情--> :videoListData="videoListData"
<cross-detail />
v-if="dialogVisible.crossDetail" <!--路口详情-->
@actionFinished="actionFinished" <cross-detail
dialogId="crossDetail" v-if="dialogVisible.crossDetail"
:crossDetailData="crossDetailData" @actionFinished="actionFinished"
/> dialogId="crossDetail"
<!--底部交通事件趋势分析--> :crossDetailData="crossDetailData"
<traffic-events-tend />
@updateHeatMap="updateHeatMap" <!--底部交通事件趋势分析-->
v-if="currentCheck === 'third'" <traffic-events-tend
/> @updateHeatMap="updateHeatMap"
<!--设备图例控制--> v-if="currentCheck === 'third'"
<equipment-switch />
@equipmentChange="equipmentChange" <!--设备图例控制-->
v-if="currentCheck === 'fourth'" <equipment-switch
/> @equipmentChange="equipmentChange"
v-if="currentCheck === 'fourth'"
/>
</div>
</div> </div>
</template> </template>
...@@ -68,9 +71,10 @@ import { ...@@ -68,9 +71,10 @@ import {
import * as l7Tools from "./l7Tools"; import * as l7Tools from "./l7Tools";
import EquipmentSwitch from "./equipmentSwitch.vue"; import EquipmentSwitch from "./equipmentSwitch.vue";
import SituationTime from "./situationTime.vue"; import SituationTime from "./situationTime.vue";
import equipmentPopup from "./equipmentPopup.vue"; import equipmentPopup from "./mapPopup/equipmentPopup.vue";
import eventPopup from './eventPopup.vue' import eventPopup from './mapPopup/eventPopup.vue'
import vehicleDetail from "./vehicleDetail.vue"; import vehicleDetail from "./mapPopup/vehicleDetail.vue";
import CameraVideo from "../../components/Standard/cameraVideo.vue";
const EquipmentPopup = Vue.extend(equipmentPopup); const EquipmentPopup = Vue.extend(equipmentPopup);
const VehiclePopup = Vue.extend(vehicleDetail) const VehiclePopup = Vue.extend(vehicleDetail)
...@@ -120,7 +124,10 @@ let map, ...@@ -120,7 +124,10 @@ let map,
}, },
}; };
export default { export default {
name:'home1',
components: { components: {
// SecondView,
CameraVideo,
SituationTime, SituationTime,
wMap, wMap,
MessageBoxes, MessageBoxes,
...@@ -175,6 +182,7 @@ export default { ...@@ -175,6 +182,7 @@ export default {
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.init(); this.init();
}); });
}, },
methods: { methods: {
...@@ -229,28 +237,7 @@ export default { ...@@ -229,28 +237,7 @@ export default {
console.log(e.lnglat) console.log(e.lnglat)
}) })
map.on("style.load", () => { map.on("style.load", () => {
// 快捷键
window.onkeydown = function () {
let center = map_config.MAP_CENTER
if (event.altKey && (event.keyCode === 49 || event.keyCode === 97)) {
map.flyTo({
zoom: map_config.MAP_ZOOM,
center: center
})
}
if (event.altKey && (event.keyCode === 50 || event.keyCode === 98)) {
map.flyTo({
zoom: 17.17,
center: [120.62601176446981, 31.422352253327617]
})
}
if (event.altKey && (event.keyCode === 51 || event.keyCode === 99)) {
map.flyTo({
zoom: 19.26,
center: center
})
}
}
map.addLayer({ map.addLayer({
id: "vehicle3D", id: "vehicle3D",
type: "custom", type: "custom",
...@@ -317,13 +304,20 @@ export default { ...@@ -317,13 +304,20 @@ export default {
vehicleDetailPopup.hide() vehicleDetailPopup.hide()
} }
}); });
scene.on("zoomend", (e) => { scene.on("zoomend", () => {
console.log(map.getZoom()) console.log(map.getZoom())
this.refreshMap(); this.refreshMap();
}); });
}, },
switchfirst() { switchfirst() {
// setTimeout(() => {
// // 112.96321506287563 28.187868419294446
// let model =
// vehicleModelTypes[`car0`].duplicate();
// model.setCoords([112.96321506287563, 28.187868419294446])
// window.tb.add(model);
// }, 2000)
if (this.loading) this.loading = false if (this.loading) this.loading = false
if (!layers.first.cross) { if (!layers.first.cross) {
layers.first.cross = l7Tools.addCrossPoint( layers.first.cross = l7Tools.addCrossPoint(
...@@ -382,7 +376,6 @@ export default { ...@@ -382,7 +376,6 @@ export default {
dataType: "1", dataType: "1",
...this.getBoundsLnglat(), ...this.getBoundsLnglat(),
}); });
}, },
switchsecond() { switchsecond() {
...@@ -667,10 +660,9 @@ export default { ...@@ -667,10 +660,9 @@ export default {
); );
window.tb.add(model); window.tb.add(model);
} }
// 删除 for (let i = 0; i < window.tb.world.children.length; i++) {
if (item.dill === 'del') { if (window.tb.world.children[i].userData.data.id === item.id) {
for (let i = 0; i < window.tb.world.children.length; i++) { if (item.dill === 'del') {
if (window.tb.world.children[i].userData.data.id === item.id) {
window.tb.world.children[i].traverse((child) => { window.tb.world.children[i].traverse((child) => {
if (child.type === "Mesh") { if (child.type === "Mesh") {
child.geometry.dispose(); child.geometry.dispose();
...@@ -679,22 +671,42 @@ export default { ...@@ -679,22 +671,42 @@ export default {
}); });
window.tb.remove(window.tb.world.children[i]); window.tb.remove(window.tb.world.children[i]);
} }
} if (item.dill === 'com') {
}
// 更新
if (item.dill === 'com') {
for (let i = 0; i < window.tb.world.children.length; i++) {
if (window.tb.world.children[i].userData.data.id === item.id) {
this.setModel(window.tb.world.children[i], item, false); this.setModel(window.tb.world.children[i], item, false);
} }
} }
} }
// // 删除
// if (item.dill === 'del') {
// for (let i = 0; i < window.tb.world.children.length; i++) {
// if (window.tb.world.children[i].userData.data.id === item.id) {
// window.tb.world.children[i].traverse((child) => {
// if (child.type === "Mesh") {
// child.geometry.dispose();
// child.material.dispose();
// }
// });
// window.tb.remove(window.tb.world.children[i]);
// }
// }
// }
// // 更新
// if (item.dill === 'com') {
// for (let i = 0; i < window.tb.world.children.length; i++) {
// if (window.tb.world.children[i].userData.data.id === item.id) {
// this.setModel(window.tb.world.children[i], item, false);
// }
// }
// }
} }
} }
}, },
// websocket 回调 // websocket 回调
callCar(msg) { callCar(msg) {
// call your function
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 = ''
...@@ -744,6 +756,7 @@ export default { ...@@ -744,6 +756,7 @@ export default {
} }
} }
} }
}, },
callPasserby(msg) { callPasserby(msg) {
...@@ -832,102 +845,102 @@ export default { ...@@ -832,102 +845,102 @@ export default {
switch (`${arr.type}${arr.state}`) { switch (`${arr.type}${arr.state}`) {
case "10": // 左转不亮 case "10": // 左转不亮
if ( if (
child.name == "mesh_12" || child.name === "mesh_12" ||
child.name == "mesh_11" || child.name === "mesh_11" ||
child.name == "mesh_13" child.name === "mesh_13"
) { ) {
child.material.color.set("black"); child.material.color.set("black");
} }
break; break;
case "11": // 左转红灯 case "11": // 左转红灯
if (child.name == "mesh_11") { if (child.name === "mesh_11") {
child.material.color.set("red"); child.material.color.set("red");
} }
if (child.name == "mesh_12" || child.name == "mesh_13") { if (child.name === "mesh_12" || child.name === "mesh_13") {
child.material.color.set("black"); child.material.color.set("black");
} }
break; break;
case "12": // 左转黄灯 case "12": // 左转黄灯
if (child.name == "mesh_13") { if (child.name === "mesh_13") {
child.material.color.set("yellow"); child.material.color.set("yellow");
} }
if (child.name == "mesh_12" || child.name == "mesh_11") { if (child.name === "mesh_12" || child.name === "mesh_11") {
child.material.color.set("black"); child.material.color.set("black");
} }
break; break;
case "13": // 左转绿灯 case "13": // 左转绿灯
if (child.name == "mesh_12") { if (child.name === "mesh_12") {
child.material.color.set("green"); child.material.color.set("green");
} }
if (child.name == "mesh_11" || child.name == "mesh_13") { if (child.name === "mesh_11" || child.name === "mesh_13") {
child.material.color.set("black"); child.material.color.set("black");
} }
break; break;
case "20": // 直行不亮 case "20": // 直行不亮
if ( if (
child.name == "mesh_8" || child.name === "mesh_8" ||
child.name == "mesh_9" || child.name === "mesh_9" ||
child.name == "mesh_10" child.name === "mesh_10"
) { ) {
child.material.color.set("black"); child.material.color.set("black");
} }
break; break;
case "21": // 直行红灯 case "21": // 直行红灯
if (child.name == "mesh_8") { if (child.name === "mesh_8") {
child.material.color.set("red"); child.material.color.set("red");
} }
if (child.name == "mesh_9" || child.name == "mesh_10") { if (child.name === "mesh_9" || child.name === "mesh_10") {
child.material.color.set("black"); child.material.color.set("black");
} }
break; break;
case "22": // 直行黄灯 case "22": // 直行黄灯
if (child.name == "mesh_10") { if (child.name === "mesh_10") {
child.material.color.set("yellow"); child.material.color.set("yellow");
} }
if (child.name == "mesh_8" || child.name == "mesh_9") { if (child.name === "mesh_8" || child.name === "mesh_9") {
child.material.color.set("black"); child.material.color.set("black");
} }
break; break;
case "23": // 直行绿灯 case "23": // 直行绿灯
if (child.name == "mesh_9") { if (child.name === "mesh_9") {
child.material.color.set("green"); child.material.color.set("green");
} }
if (child.name == "mesh_8" || child.name == "mesh_10") { if (child.name === "mesh_8" || child.name === "mesh_10") {
child.material.color.set("black"); child.material.color.set("black");
} }
break; break;
case "30": // 右转不亮 case "30": // 右转不亮
if ( if (
child.name == "mesh_2" || child.name === "mesh_2" ||
child.name == "mesh_3" || child.name === "mesh_3" ||
child.name == "mesh_4" child.name === "mesh_4"
) { ) {
child.material.color.set("black"); child.material.color.set("black");
} }
break; break;
case "31": // 右转红灯 case "31": // 右转红灯
if (child.name == "mesh_2") { if (child.name === "mesh_2") {
child.material.color.set("red"); child.material.color.set("red");
} }
if (child.name == "mesh_3" || child.name == "mesh_4") { if (child.name === "mesh_3" || child.name === "mesh_4") {
child.material.color.set("black"); child.material.color.set("black");
} }
break; break;
case "32": // 右转黄灯 case "32": // 右转黄灯
if (child.name == "mesh_3") { if (child.name === "mesh_3") {
child.material.color.set("yellow"); child.material.color.set("yellow");
} }
if (child.name == "mesh_2" || child.name == "mesh_4") { if (child.name === "mesh_2" || child.name === "mesh_4") {
child.material.color.set("black"); child.material.color.set("black");
} }
break; break;
case "33": // 右转绿灯 case "33": // 右转绿灯
if (child.name == "mesh_4") { if (child.name === "mesh_4") {
child.material.color.set("green"); child.material.color.set("green");
} }
if (child.name == "mesh_3" || child.name == "mesh_2") { if (child.name === "mesh_3" || child.name === "mesh_2") {
child.material.color.set("black"); child.material.color.set("black");
} }
break; break;
...@@ -1097,8 +1110,9 @@ export default { ...@@ -1097,8 +1110,9 @@ export default {
// 注册 websocket 并绑定回调事件 // 注册 websocket 并绑定回调事件
regisAndSendWs(name, sendData) { regisAndSendWs(name, sendData) {
for (let socket of this.sockets) { for (let socket of this.sockets) {
console.log('socket', socket)
if (socket.name === name) { if (socket.name === name) {
if (socket.ws.readyState == 1) { if (socket.ws.readyState === 1) {
return; // 已注册 return; // 已注册
} }
} }
...@@ -1169,6 +1183,9 @@ export default { ...@@ -1169,6 +1183,9 @@ export default {
.main { .main {
height: 100%; height: 100%;
position: relative; position: relative;
.main_item{
height: 100%;
}
} }
</style> </style>
<style lang="less"> <style lang="less">
...@@ -1200,7 +1217,7 @@ export default { ...@@ -1200,7 +1217,7 @@ export default {
.mapboxgl-ctrl-bottom-right { .mapboxgl-ctrl-bottom-right {
bottom: 6px; bottom: 6px;
right: 480px; right: 521px;
z-index: 11; z-index: 11;
transition: 0.5s all ease; transition: 0.5s all ease;
} }
...@@ -1254,4 +1271,13 @@ export default { ...@@ -1254,4 +1271,13 @@ export default {
right: 20px; right: 20px;
top: 20px; top: 20px;
} }
.main-cameraVideo {
position: absolute;
width: 400px;
height: 300px;
left: 800px;
top: 40px;
z-index: 11;
}
</style> </style>
\ No newline at end of file
wj-data-vision/src/views/situation/layersSwitch.vue → wj-data-vision/src/views/home1/layersSwitch.vue
View file @ bc5d17ab
<template> <template>
<div class="layersSwitch" :style="{ left: right }"> <div class="layersSwitch" :style="{ left: right }">
<div v-show="true" class="layerIcons"> <div v-show="false" class="layerIcons">
<div <div
class="item" class="item"
v-for="item of switchOptions" v-for="item of switchOptions"
...@@ -59,7 +59,7 @@ export default { ...@@ -59,7 +59,7 @@ export default {
}, },
}, },
computed: {}, computed: {},
beforeDestory() {}, beforeDestroy() {},
}; };
</script> </script>
......
wj-data-vision/src/views/situation/equipmentPopup.vue → wj-data-vision/src/views/home1/mapPopup/equipmentPopup.vue
View file @ bc5d17ab
...@@ -37,8 +37,8 @@ ...@@ -37,8 +37,8 @@
</template> </template>
<script> <script>
import dict from '../../config/holo/dictionary' import dict from '../../../config/holo/dictionary'
import CameraVideo from "../../components/Standard/cameraVideo.vue"; import CameraVideo from "../../../components/Standard/cameraVideo.vue";
export default { export default {
name: "passerbyPopup", name: "passerbyPopup",
...@@ -54,7 +54,7 @@ export default { ...@@ -54,7 +54,7 @@ export default {
}, },
methods: {}, methods: {},
computed: {}, computed: {},
beforeDestory() {}, beforeDestroy() {},
}; };
</script> </script>
...@@ -72,7 +72,7 @@ export default { ...@@ -72,7 +72,7 @@ export default {
line-height: 55px; line-height: 55px;
padding-left: 12px; padding-left: 12px;
color: white; color: white;
background:url('../../assets/images/holo/popupTop.png'); background:url('../../../assets/images/holo/popupTop.png');
background-size: 100%; background-size: 100%;
} }
.main{ .main{
...@@ -84,7 +84,7 @@ export default { ...@@ -84,7 +84,7 @@ export default {
margin-right: 18px; margin-right: 18px;
width:130px; width:130px;
min-width: 130px; min-width: 130px;
background:url('../../assets/images/holo/qietu/qietu4.png'); background:url('../../../assets/images/holo/qietu/qietu4.png');
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
...@@ -118,7 +118,7 @@ export default { ...@@ -118,7 +118,7 @@ export default {
.equip_camera{ .equip_camera{
width: 448px; width: 448px;
height: 328px; height: 328px;
background-image: url("../../assets/images/holo/videobackgorund.png"); background-image: url("../../../assets/images/holo/videobackgorund.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.header{ .header{
......
wj-data-vision/src/views/situation/eventPopup.vue → wj-data-vision/src/views/home1/mapPopup/eventPopup.vue
View file @ bc5d17ab
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
</template> </template>
<script> <script>
import dict from '../../config/holo/dictionary' import dict from '../../../config/holo/dictionary'
export default { export default {
name: "eventPopup", name: "eventPopup",
props: ["model"], props: ["model"],
...@@ -38,7 +38,7 @@ export default { ...@@ -38,7 +38,7 @@ export default {
} }
}, },
beforeDestory() { beforeDestroy() {
}, },
}; };
</script> </script>
...@@ -49,7 +49,7 @@ export default { ...@@ -49,7 +49,7 @@ export default {
width: 281px; width: 281px;
height: 233px; height: 233px;
background-color: #0f2645; background-color: #0f2645;
background-image: url('../../assets/images/holo/eventbackground.png'); background-image: url('../../../assets/images/holo/eventbackground.png');
background-size: 100% 100%; background-size: 100% 100%;
} }
...@@ -77,7 +77,7 @@ export default { ...@@ -77,7 +77,7 @@ export default {
height: 30px; height: 30px;
display: flex; display: flex;
align-items: center; align-items: center;
background-image: url("../../assets/images/holo/vehicle_popup_arrow.png"); background-image: url("../../../assets/images/holo/vehicle_popup_arrow.png");
background-position-x: left; background-position-x: left;
background-position-y: center; background-position-y: center;
background-repeat: no-repeat; background-repeat: no-repeat;
......
wj-data-vision/src/views/situation/vehicleDetail.vue → wj-data-vision/src/views/home1/mapPopup/vehicleDetail.vue
View file @ bc5d17ab
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
</template> </template>
<script> <script>
import dict from "../../config/holo/dictionary"; import dict from "../../../config/holo/dictionary";
export default { export default {
name: "vehicleDetail", name: "vehicleDetail",
data() { data() {
...@@ -73,7 +73,7 @@ export default { ...@@ -73,7 +73,7 @@ export default {
}, },
}, },
computed: {}, computed: {},
beforeDestory() {}, beforeDestroy() {},
}; };
</script> </script>
...@@ -86,7 +86,7 @@ export default { ...@@ -86,7 +86,7 @@ export default {
width: 216px; width: 216px;
//height: 207px; //height: 207px;
padding: 2px 16px 6px 16px; padding: 2px 16px 6px 16px;
background: url("../../assets/images/holo/vehicle_popup_back.png"); background: url("../../../assets/images/holo/vehicle_popup_back.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
.head { .head {
...@@ -102,7 +102,7 @@ export default { ...@@ -102,7 +102,7 @@ export default {
height: 18px; height: 18px;
margin-right: 5px; margin-right: 5px;
line-height: 25px; line-height: 25px;
background-image:url('../../assets/images/holo/vehicle_popup_icon.png'); background-image:url('../../../assets/images/holo/vehicle_popup_icon.png');
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
...@@ -129,7 +129,7 @@ export default { ...@@ -129,7 +129,7 @@ export default {
text-align: left; text-align: left;
padding-left: 20px; padding-left: 20px;
//width: 50%; //width: 50%;
background-image: url("../../assets/images/holo/vehicle_popup_arrow.png"); background-image: url("../../../assets/images/holo/vehicle_popup_arrow.png");
background-size: auto; background-size: auto;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: left; background-position: left;
......
wj-data-vision/src/views/situation/messageBoxes.vue → wj-data-vision/src/views/home1/messageBoxes.vue
View file @ bc5d17ab
...@@ -684,10 +684,10 @@ export default { ...@@ -684,10 +684,10 @@ export default {
top: 0; top: 0;
height: 100%; height: 100%;
display: flex; display: flex;
width: 480px; width: 521px;
flex-direction: column; flex-direction: column;
justify-content: space-evenly; justify-content: space-evenly;
background-color: #030b19; background-color: rgba(3, 11, 25,1);
.item { .item {
flex: 0 0 32%; flex: 0 0 32%;
...@@ -1177,8 +1177,8 @@ export default { ...@@ -1177,8 +1177,8 @@ export default {
} }
.map-mask { .map-mask {
width: calc(100% - 960px); width: calc(100% - 1042px);
left: 480px; left: 521px;
height: 100%; height: 100%;
position: absolute; position: absolute;
//transition: 1s all ease; //transition: 1s all ease;
......
wj-data-vision/src/views/situation/trafficEventsTend.vue → wj-data-vision/src/views/home1/trafficEventsTend.vue
View file @ bc5d17ab
...@@ -215,7 +215,7 @@ export default { ...@@ -215,7 +215,7 @@ export default {
dom.setOption(option); dom.setOption(option);
}, },
}, },
beforeDestory() {}, beforeDestroy() {},
}; };
</script> </script>
......
wj-data-vision/src/views/home2/MapPopup/vehicleDetail.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="vehicleDetail">
<div class="head">
<span></span>{{ model.picLicense }}
</div>
<div class="content">
<div class="detailItem">
<span class="left">速度：</span
>{{ model.speed }}
</div>
<div class="detailItem">
<span class="left">角度：</span
>{{ model.courseAngle }}
</div>
<div class="detailItem">
<span class="left">行为：</span
>{{ model.courseAngle }}
</div>
</div>
</div>
</template>
<script>
export default {
name: "vehicleDetail",
data() {
return {};
},
props: ["model"],
watch: {
model: {
handler(val) {
},
deep: true, // 深度监听
immediate: true, // 初次监听即执行
}
},
mounted() {
},
methods: {
},
computed: {},
beforeDestroy() {
},
};
</script>
<style lang="less" scoped>
.vehicleDetail {
font-size: 12px;
position: absolute;
width: 242px;
padding: 2px 16px 6px 16px;
background-image: url("../../../assets/images/acci/detail-back-origin.png");
background-size: 100% 100%;
background-repeat: no-repeat;
.head {
height: 25px;
color: white;
display: flex;
align-items: center;
span {
display: inline-block;
width: 18px;
height: 18px;
margin-right: 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% - 25px);
display: flex;
padding-top: 12px;
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/home2/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<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)">
<WMap :mapId="'situation-map'" ref="wMap"/>
<home-left/>
<home-right/>
</div>
</template>
<script>
import Vue from "vue";
import {Popup} from "@antv/l7";
import mapAssets from "../../config/holo/mapAssets";
import WMap from "../../components/Standard/map/index.vue";
import HomeLeft from "./left/index.vue";
import HomeRight from "./right/index.vue";
import dict from "../../config/holo/dictionary";
import wsSource from "../../config/holo/wsSource";
import {initWs} from "../../config/holo/websocket";
import * as l7Tools from "./l7Tools";
import vehicleDetail from "./MapPopup/vehicleDetail.vue";
const VehiclePopup = Vue.extend(vehicleDetail)
let map,
scene,
vehicleModelTypes = [],
layers = {
vehicle: null,
license: null,
},
popups = {};
export default {
name: 'home2',
components: {
HomeRight,
HomeLeft,
WMap
},
props: {},
computed: {},
data() {
return {
loading: true,
vehicleModelsNum: 0,
wsSources: wsSource.source,
sockets: [],
currentLocation: [],
lastLocation: [],
bounds: '',
};
},
watch: {},
mounted() {
this.$nextTick(() => {
this.init();
});
},
methods: {
init() {
[map, scene] = this.$refs.wMap.initMap();
scene.on("loaded", () => {
this.loading = false
this.sceneLoaded = true;
for (let key in mapAssets.mapIcons) {
scene.addImage(key, mapAssets.mapIcons[key]);
}
// map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
});
scene.on('click', e => {
console.log(e)
})
scene.on("zoomend", (e) => {
this.refreshBounds()
});
scene.on('mapmove', () => {
this.refreshBounds()
})
scene.on('zoomchange', () => {
this.refreshBounds()
})
map.on('style.load', () => {
map.addLayer({
id: "vehicle3D",
type: "custom",
renderingMode: "3d",
onAdd: (map, mbxContext) => {
window.tb = new Threebox(map, mbxContext, {
defaultLights: true,
});
for (let key in dict.vehicleTypes) {
window.tb.loadObj({
obj: `gltf/car${key}.gltf`,
type: "gltf",
units: "meters",
adjustment: {x: 0.5, y: 1, z: -0.6},
cloned: true,
bbox: false,
}, (model) => {
vehicleModelTypes[`car${key}`] = model;
this.vehicleModelsNum += 1;
});
}
},
render: function (gl, matrix) {
window.tb.update();
},
});
setTimeout(() => {
this.initWebS();
}, 1500)
})
},
initWebS() {
this.refreshBounds()
if (this.loading) this.loading = false
// 注册车辆实时ws
this.regisAndSendWs("callCar", {
dataType: "1"
});
},
// 注册 websocket 并绑定回调事件
regisAndSendWs(name, sendData) {
for (let socket of this.sockets) {
if (socket.name === name) {
if (socket.ws.readyState === 1) {
return; // 已注册
}
}
}
for (let item of this.wsSources) {
if (item.name === name) {
item.sendData = JSON.stringify(sendData);
let current = initWs(item);
current.ws.onmessage = (e) => this[item.name](JSON.parse(e.data));
this.sockets.push(current);
}
}
},
// 更新经纬度-角度-详细信息
setModel(model, options, setColor) {
if (setColor) {
model.traverse((child) => {
if (child.isMesh && child.name.includes("_19")) {
child.material = child.material.clone();
child.material.color.set(
dict.vehicleRealColors[options.originalColor]
);
}
});
}
model.userData.data = !model.userData.data
? options
: Object.assign({}, options, {
longitude: model.userData.data.longitude,
latitude: model.userData.data.latitude,
});
// 加判断防止距离过近模型抖动
if (
turf.distance(
[model.userData.data.longitude, model.userData.data.latitude],
[options.longitude, options.latitude],
{units: "kilometers"}
) > 0.0005 ||
options.dill === "add"
) {
model.setCoords([options.longitude, options.latitude]);
model.userData.data = options;
model.setRotation({x: 90, y: 360 - options.courseAngle - 90, z: 0});
}
},
// 根据处理后的数组新增-删除-更新模型 新增-更新详情弹窗
addDelUpdateVehicleModels(allData) {
if (this.vehicleModelsNum === 21) {
for (let item of allData) {
// 交通事故车辆popup标注&更新
if (item.isAccident) { // todo: 参与交通事件的车辆特殊字段
// 新建
if (!popups[`${item.id}`]) {
popups[`${item.id}`] = new Popup({
offsets: [-100, 280],
closeButton: false,
closeButtonOffsets: [-200, 17]
})
.setLngLat([item.longitude, item.latitude])
.setHTML(`<div id="vehicle_popup${item.id}"></div>`)
scene.addPopup(popups[`${item.id}`]);
new VehiclePopup({
propsData: {
model: item,
},
}).$mount(`#vehicle_popup${item.id}`);
}
// 更新
else {
popups[`${item.id}`].setLngLat([item.longitude, item.latitude])
}
}
// 新增
if (item.dill === "add") {
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
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') {
this.setModel(window.tb.world.children[i], item, false);
}
}
}
}
}
}
},
refreshBounds() {
let bounds = map.getBounds();
let leftDownXy = [bounds._sw.lng, bounds._sw.lat];
let rightUpXy = [bounds._ne.lng, bounds._ne.lat];
let mid1 = [bounds._sw.lng, bounds._ne.lat]
let mid2 = [bounds._ne.lng, bounds._sw.lat]
this.bounds = [[[leftDownXy, mid1, rightUpXy, mid2, leftDownXy]]];
},
callCar(msg) {
let start = performance.now();
for (let i = 0; i < msg.length; i++) {
if (!msg[i].picLicense) {
msg[i].picLicense = ''
}
let pt = turf.point([msg[i].longitude, msg[i].latitude]);
let poly = turf.polygon(this.bounds[0]);
if (!turf.booleanPointInPolygon(pt, poly)) {
msg.splice(i, 1)
i = i - 1
}
}
if (this.sceneLoaded && msg.length > 0) {
// 第一帧 || 时间戳不相同则放行
if (this.lastLocation.length === 0 || this.lastLocation[0].dateTime !== msg[0].dateTime) {
// 显示3D车辆
this.currentLocation = msg;
let allData = this.diff(this.lastLocation, this.currentLocation);
this.lastLocation = msg;
this.addDelUpdateVehicleModels(allData);
// 添加车牌号图层
if (!layers.license) {
layers.license = l7Tools.addLicenseLayer(scene, msg);
} else {
layers.license.setData(msg);
}
}
}
let end = performance.now();
// console.log('cost is', `${end - start}ms`)
},
// 根据 name 关闭 websocket 不传参则全部关闭
closeWs(name) {
if (name) {
for (let key in this.sockets) {
if (this.sockets[key].name === name) {
this.sockets[key].ws.close();
this.sockets.splice(key, 1);
}
}
} else {
for (let socket of this.sockets) {
socket.ws && socket.ws.close();
}
this.sockets = [];
}
},
},
beforeDestroy() {
this.closeWs();
scene = null;
map = null
},
};
</script>
<style lang='less' scoped>
.main {
height: 100%;
position: relative;
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home2/l7Tools.js 0 → 100644
View file @ bc5d17ab
import {PointLayer, RasterLayer, LineLayer, HeatmapLayer, PolygonLayer} from '@antv/l7'
// 停止线
export function addCrossLine(scene, msg) {
let layer = new LineLayer()
.source(msg)
.size(4)
.shape('line')
.color('#f00')
scene.addLayer(layer)
return layer
}
// 车牌号图层
export function addLicenseLayer(scene, msg) {
const pointLayer = new PointLayer()
.source(msg, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude',
},
})
.shape('picLicense', 'text')
// .shape('originalType', 'text')
.size(9)
.style({
textAllowOverlap: true,
raisingHeight: 10,
stroke: '#01309b',
strokeWidth: 2,
halo: 1,
})
.color('#ffffff')
.on('contextmenu', (e) => {
const input = document.createElement('input')
input.setAttribute('readonly', 'readonly')
input.setAttribute('value', e.feature.id)
document.body.appendChild(input)
input.setSelectionRange(0, 9999)
input.select()
document.execCommand('copy')
document.body.removeChild(input)
ELEMENT.Message('复制ID成功！')
})
scene.addLayer(pointLayer)
return pointLayer
}
// 车辆圆点图层
export function addVehicleLayer(scene, msg) {
const pointLayer = new PointLayer()
.source(msg, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude',
},
})
.shape('circle')
.style({
blur: 1,
})
.size(6)
.color('#06f4fe')
scene.addLayer(pointLayer)
return pointLayer
}
// 路况栅格图层
export function addRoadRasterLayer(scene, url) {
const layer = new RasterLayer().source(url, {
parser: {
type: 'rasterTile',
tileSize: 256,
},
})
scene.addLayer(layer)
return layer
}
// 等待行人数量文本图层
export function addPasserbyText(scene, msg) {
const pointLayer = new PointLayer()
.source(msg, {
parser: {
type: 'json',
x: 'x',
y: 'y',
},
})
.shape('text', 'text')
.size(10)
.style({
raisingHeight: 32,
textAllowOverlap: true,
stroke: 'red',
strokeWidth: 1,
})
.color('white')
scene.addLayer(pointLayer)
return pointLayer
}
// 路口图层
export function addCrossPoint(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})
.source(msg, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude',
},
})
.style({
offsets: offset,
})
.shape('isSignal', function (level) {
if (level === 1) {
return 'cross'
}
if (level === 0) {
return 'crossFalse'
}
})
.size(16)
.active({
color: '#ffffff',
mix: 0.6,
})
.on('click', (e) => {
callback(e)
})
scene.addLayer(pointLayer)
return pointLayer
}
// 路口名称图层
export function addCrossDetailPoint(scene, msg) {
const pointLayer = new PointLayer({zIndex: 3})
.source(msg, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude',
},
})
.style({
textAllowOverlap: true,
raisingHeight: 0,
stroke: '#01309b',
strokeWidth: 2,
halo: 1,
})
.color('#ffffff')
.shape('name', 'text')
.size(12)
// .active(true)
scene.addLayer(pointLayer)
return pointLayer
}
// 天交通事件点图 && 热力图
export function addTrafficEventPoint1(scene, msg, callback) {
const pointLayer = new PointLayer()
.source(msg, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.style({
offsets: [0, 0], raisingHeight: 10,
})
.shape('event')
.size(12)
.on('click', (e) => {
callback(e)
})
scene.addLayer(pointLayer)
return pointLayer
}
export function addTrafficEventPoint1Heat(scene, msg) {
const layer = new HeatmapLayer({})
.source(msg, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('heatmap')
.style({
intensity: 2,
radius: 20,
rampColors: {
colors: [
'rgba(253, 108, 3,1)',
'rgba(252, 145, 3,0.9)',
'rgba(190, 236, 68,0.9)',
'rgba(83, 231, 169,0.8)',
'rgba(36, 239, 219,0.7)',
'rgba(38, 233, 251,0.2)',
].reverse(),
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
},
})
scene.addLayer(layer)
return layer
}
// 周交通事件热力图
export function addTrafficEventPoint2(scene, msg) {
const layer = new HeatmapLayer({})
.source(msg, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('heatmap')
.style({
intensity: 2,
radius: 20,
rampColors: {
colors: [
'rgba(253, 108, 3,1)',
'rgba(252, 145, 3,0.9)',
'rgba(190, 236, 68,0.9)',
'rgba(83, 231, 169,0.8)',
'rgba(36, 239, 219,0.7)',
'rgba(38, 233, 251,0.2)',
].reverse(),
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
},
})
scene.addLayer(layer)
return layer
}
// 月交通事件热力图
export function addTrafficEventPoint3(scene, msg) {
const layer = new HeatmapLayer({})
.source(msg, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('heatmap')
.style({
intensity: 2,
radius: 20,
rampColors: {
colors: [
'rgba(253, 108, 3,1)',
'rgba(252, 145, 3,0.9)',
'rgba(190, 236, 68,0.9)',
'rgba(83, 231, 169,0.8)',
'rgba(36, 239, 219,0.7)',
'rgba(38, 233, 251,0.2)',
].reverse(),
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
},
})
scene.addLayer(layer)
return layer
}
// 设备图层 ---
export function addEquipmentMilli(scene, msg, callback) {
msg.map(item => {
item.x = item.wkt.split(',')[0]
item.y = item.wkt.split(',')[1]
})
const pointLayer = new PointLayer()
.source(msg, {
parser: {
type: 'json',
x: 'x',
y: 'y',
},
})
.style({
offsets: [0, 20],
})
.shape('milli')
.size(20)
.on('click', (e) => {
callback(e)
})
scene.addLayer(pointLayer)
return pointLayer
}
export function addEquipmentLaser(scene, msg, callback) {
msg.map(item => {
item.x = item.wkt.split(',')[0]
item.y = item.wkt.split(',')[1]
})
const pointLayer = new PointLayer()
.source(msg, {
parser: {
type: 'json',
x: 'x',
y: 'y',
},
})
.style({
offsets: [0, 20],
})
.shape('laser')
.size(20)
.on('click', (e) => {
callback(e)
})
scene.addLayer(pointLayer)
return pointLayer
}
export function addEquipmentWeather(scene, msg, callback) {
msg.map(item => {
item.x = item.wkt.split(',')[0]
item.y = item.wkt.split(',')[1]
})
const pointLayer = new PointLayer()
.source(msg, {
parser: {
type: 'json',
x: 'x',
y: 'y',
},
})
.style({
offsets: [0, 20],
})
.shape('weather')
.size(20)
.on('click', (e) => {
callback(e)
})
scene.addLayer(pointLayer)
return pointLayer
}
export function addEquipmentCamera(scene, msg, callback) {
msg.map(item => {
item.x = item.wkt.split(',')[0]
item.y = item.wkt.split(',')[1]
})
const pointLayer = new PointLayer()
.source(msg, {
parser: {
type: 'json',
x: 'x',
y: 'y',
},
})
.style({
offsets: [0, 20],
})
.shape('camera')
.size(20)
.on('click', (e) => {
callback(e)
})
scene.addLayer(pointLayer)
return pointLayer
}
export function addEquipmentSign(scene, msg, callback) {
msg.map(item => {
item.x = item.wkt.split(',')[0]
item.y = item.wkt.split(',')[1]
})
const pointLayer = new PointLayer()
.source(msg, {
parser: {
type: 'json',
x: 'x',
y: 'y',
},
})
.style({
offsets: [0, 20],
})
.shape('sign')
.size(20)
.on('click', (e) => {
callback(e)
})
scene.addLayer(pointLayer)
return pointLayer
}
// ------------
export function addSignalCross(scene, msg, callback) {
const pointLayer = new PointLayer({zIndex: 2})
.source(msg, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.style({
offsets: [0, 0],
})
.shape('cross')
.size(12)
.active(true)
.on('click', callback)
scene.addLayer(pointLayer)
return pointLayer
}
export function addSignalRoad(scene, msg, callback) {
console.log('msg', msg)
const lineLayer = new PolygonLayer({zIndex: 1})
.source(msg)
.style({
opacity: 0.4,
})
.active(true)
.shape('fill')
.size(2)
.color('#F39800')
.on('click', callback)
scene.addLayer(lineLayer)
return lineLayer
}
wj-data-vision/src/views/home2/left/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="home-left">
<div class="topI">
<msg-card title="事故现场监控">
<div class="videos">
<camera-video class="videoItem" v-for="item of 4" :video-data="item"/>
<span class="top-left"></span>
<span class="top-right"></span>
<span class="bottom-left"></span>
<span class="bottom-right"></span>
</div>
</msg-card>
</div>
<div class="bottomI">
<div class="analysis">
<msg-card class="m-b-10" title="事件辅助定责">
<div class="msgTitle">
<span></span> 实时分析
</div>
<div class="timeMsg">
<i class="el-icon-time"/>疑似事故检测时长：<span>38.16s</span>
</div>
<div class="customTable">
<div class="row" v-for="item of rows">
<div class="col col-label" :class="[item.value.length>25?'longT':'']">{{ item.label }}</div>
<div class="col col-value" :class="[item.value.length>25?'longT':'']">{{ item.value }}</div>
</div>
</div>
</msg-card>
<msg-card title="交通影响报告">
<div class="msgTitle">
<span></span> 影响评估
</div>
<div class="cTable">
<el-row class="row1">
<el-col class="col deep" :span="5">涉事地点</el-col>
<el-col class="col" :span="9">
<span :class="[index === locationVal ? 'span-check':'']"
v-for="(item, index) of location">{{ item }}</span>
</el-col>
<el-col class="col deep" :span="4">涉事车辆</el-col>
<el-col class="col" :span="6">
<span :class="[index === isMultiVal ? 'span-check':'']"
v-for="(item, index) of isMulti">{{ item }}</span>
</el-col>
</el-row>
<el-row class="row1">
<el-col class="col deep" :span="5">涉事时段</el-col>
<el-col class="col" :span="9">
<span :class="[index === timeTypeVal ? 'span-check':'']"
v-for="(item, index) of timeType">{{ item }}</span>
</el-col>
<el-col class="col deep" :span="4">涉事行人</el-col>
<el-col class="col" :span="6">
<span :class="[index === haveWalkerVal ? 'span-check':'']"
v-for="(item, index) of haveWalker">{{ item }}</span>
</el-col>
</el-row>
<el-row class="row1">
<el-col class="col deep" :span="5">涉事非机动车</el-col>
<el-col class="col" :span="19">
<span :class="[index === haveNoVehicleVal ? 'span-check':'']"
v-for="(item, index) of haveNoVehicle">{{ item }}</span>
</el-col>
</el-row>
</div>
<div class="msgTitle">
<span></span> 影响程度
</div>
<div class="gradiantPoint">
<div v-for="item of 10" :class="[`point${item}`]" class="pointItem">
<div v-show="item===arrowIndex" class="arrow-down"></div>
</div>
</div>
</msg-card>
</div>
</div>
</div>
</template>
<script>
import CameraVideo from "../../../components/Standard/cameraVideo.vue";
import MsgCard from "../../../components/Standard/msg-card.vue";
export default {
name: "homeLeft",
components: {MsgCard, CameraVideo},
computed: {},
data() {
return {
location: ['路口', '路段', '高架桥'],
locationVal: 1,
isMulti: ['单车', '多车'],
isMultiVal: 1,
timeType: ['早高峰', '平峰', '晚高峰', '夜间'],
timeTypeVal: 1,
haveWalker: ['有', '无'],
haveWalkerVal: 1,
haveNoVehicle: ['有', '无'],
haveNoVehicleVal: 1,
arrowIndex: 2,
rows: [
{label: '事故时间', value: '2022-09-18 05:26:46'},
{label: '事故地点', value: '港东大街与迎春大街路口东向 直行车道'},
{label: '事故描述', value: '疑似多车事故：鲁YBZ796与鲁KF1F97，从不同方向进入路口，行驶路线发生冲突，导致事故。'},
{label: '定责建议', value: '港东大街与迎春大街路口东向 直行车道'},
{label: '辅助信息', value: '鲁YBZ796 疑似侧碰鲁 鲁KC1F97'},
],
};
},
mounted() {
},
methods: {},
beforeDestroy() {
},
};
</script>
<style lang='less' scoped>
.cTable {
font-size: 16px;
border-top: 1px solid rgba(62, 108, 150, 1);
border-left: 1px solid rgba(62, 108, 150, 1);
margin-bottom: 7px;
.row1 {
height: 30px;
width: 100%;
.col {
display: flex;
align-items: center;
height: 100%;
border-bottom: 1px solid rgba(62, 108, 150, 1);
border-right: 1px solid rgba(62, 108, 150, 1);
span {
display: inline-block;
height: 20px;
padding: 0 3px;
line-height: 20px;
font-size: 14px;
margin-left: 3px;
border: 1px solid rgba(5, 122, 255, 0);
border-radius: 8px;
}
.span-check {
border: 1px solid rgba(5, 122, 255, 1);
}
}
.deep {
justify-content: center;
background-color: rgba(46, 119, 255, 0.15);
}
}
}
.customTable {
color: white;
width: 100%;
font-size: 16px;
border-top: 1px solid rgba(62, 108, 150, 1);
border-left: 1px solid rgba(62, 108, 150, 1);
.row {
display: flex;
width: 100%;
.col {
border-bottom: 1px solid rgba(62, 108, 150, 1);
border-right: 1px solid rgba(62, 108, 150, 1);
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.longT {
height: 45px;
}
.col-label {
width: 20%;
background-color: rgba(46, 119, 255, 0.15);
}
.col-value {
width: 80%;
padding: 0 20px;
justify-content: flex-start;
background-color: transparent;
}
}
}
.top-left {
position: absolute;
left: -1px;
top: -1px;
padding: 10px;
border-style: solid;
border-color: rgba(24, 144, 255, 1);
border-width: 2px 0 0 2px;
}
.top-right {
position: absolute;
right: -1px;
top: -1px;
padding: 10px;
border-style: solid;
border-color: rgba(24, 144, 255, 1);
border-width: 2px 2px 0 0;
}
.bottom-left {
position: absolute;
right: -1px;
bottom: -1px;
padding: 10px;
border-style: solid;
border-color: rgba(24, 144, 255, 1);
border-width: 0 2px 2px 0;
}
.bottom-right {
position: absolute;
left: -1px;
bottom: -1px;
padding: 10px;
border-style: solid;
border-color: rgba(24, 144, 255, 1);
border-width: 0 0 2px 2px;
}
.msgTitle {
font-size: 18px;
font-weight: 700;
color: white;
display: flex;
align-items: center;
margin-bottom: 5px;
span {
display: inline-block;
width: 12px;
height: 12px;
border: 3px solid #0d7fd7;
rotate: 45deg;
margin-right: 8px;
}
}
.home-left {
position: absolute;
left: 0;
top: 0;
color: white;
height: 100%;
width: 668px;
background-color: rgba(3, 11, 25, 0.45);
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.57) 0%, rgba(0, 0, 0, 0.01) 26.39%);
padding: 15px 25px;
display: flex;
flex-direction: column;
justify-content: space-between;
.topI {
height: 385px;
margin-bottom: 15px;
.videos {
display: flex;
justify-content: space-between;
align-content: space-between;
align-items: stretch;
position: relative;
flex-flow: row wrap;
height: 100%;
.videoItem {
width: 49%;
height: 49%;
position: relative;
}
}
}
.bottomI {
flex: 1;
.analysis {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.timeMsg {
height: 30px;
line-height: 30px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 7px;
font-size: 18px;
span {
font-weight: 700;
}
.el-icon-time {
margin-right: 5px;
}
}
.gradiantPoint {
display: flex;
margin-top: 30px;
padding: 0 20px;
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 {
background-color: #1afd9c;
}
.point2 {
background-color: #28fd28;
}
.point3 {
background-color: #f4fa01;
}
.point4 {
background-color: #fdc616;
}
.point5 {
background-color: #ff972a;
}
.point6 {
background-color: #ef7923;
}
.point7 {
background-color: #de5a1a;
}
.point8 {
background-color: #cd3d12;
}
.point9 {
background-color: #bd2009;
}
.point10 {
background-color: #ac0100;
}
}
}
}
}
.m-b-10 {
margin-bottom: 10px;
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home2/right/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="home-right">
<msg-card title="事故现场监控">
<div class="cardInner">
<div class="top">
<span class="top-left"></span>
<span class="top-right"></span>
<span class="bottom-left"></span>
<span class="bottom-right"></span>
<!-- <cesium-map class="cesium-map" ref="homeRightTop" c-id="home-right-top"/>-->
<camera-video class="full-h" :video-data="''"/>
</div>
<div class="bottom">
<span class="top-left"></span>
<span class="top-right"></span>
<span class="bottom-left"></span>
<span class="bottom-right"></span>
<camera-video class="full-h" :video-data="''"/>
<!-- <cesium-map class="cesium-map" ref="homeRightBottom" c-id="home-right-bottom"/>-->
</div>
</div>
</msg-card>
</div>
</template>
<script>
import CesiumMap from "../../../components/Standard/cesiumMap.vue";
import MsgCard from "../../../components/Standard/msg-card.vue";
import CameraVideo from "../../../components/Standard/cameraVideo.vue";
let topViewer, bottomViewer;
export default {
name: "homeRight",
components: {CameraVideo, MsgCard, CesiumMap},
computed: {},
data() {
return {};
},
mounted() {
// topViewer = this.$refs.homeRightTop.loadMap()
// bottomViewer = this.$refs.homeRightBottom.loadMap()
// topViewer.timeline.container.style.visibility = 'hidden'
// bottomViewer.timeline.container.style.visibility = 'hidden'
},
methods: {
},
beforeDestroy() {
},
};
</script>
<style lang='less' scoped>
.full-h{
height: 100%;
}
::v-deep .content {
margin: 0
}
::v-deep .msg-card-content {
}
.top-left {
position: absolute;
left: -1px;
top: -1px;
padding: 10px;
border-style: solid;
border-color: rgba(24, 144, 255, 1);
border-width: 3px 0 0 3px;
}
.top-right {
position: absolute;
right: -1px;
top: -1px;
padding: 10px;
border-style: solid;
border-color: rgba(24, 144, 255, 1);
border-width: 3px 3px 0 0;
}
.bottom-left {
position: absolute;
right: -1px;
bottom: -1px;
padding: 10px;
border-style: solid;
border-color: rgba(24, 144, 255, 1);
border-width: 0 3px 3px 0;
}
.bottom-right {
position: absolute;
left: -1px;
bottom: -1px;
padding: 10px;
border-style: solid;
border-color: rgba(24, 144, 255, 1);
border-width: 0 0 3px 3px;
}
.home-right {
position: absolute;
right: 0;
top: 0;
padding: 15px 25px;
height: 100%;
width: 668px;
background-color: rgba(3, 11, 25, 0.45);
background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.57) 0%, rgba(0, 0, 0, 0.01) 26.39%);
.cardInner {
display: flex;
flex-direction: column;
justify-content: space-between;
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 {
height: 100%;
}
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home2/right/indexbak.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="home-right">
<msg-card title="事故现场监控">
<div class="cardInner">
<div class="top">
<span class="top-left"></span>
<span class="top-right"></span>
<span class="bottom-left"></span>
<span class="bottom-right"></span>
<cesium-map class="cesium-map" ref="homeRightTop" c-id="home-right-top"/>
</div>
<div class="bottom">
<span class="top-left"></span>
<span class="top-right"></span>
<span class="bottom-left"></span>
<span class="bottom-right"></span>
<cesium-map class="cesium-map" ref="homeRightBottom" c-id="home-right-bottom"/>
</div>
</div>
</msg-card>
</div>
</template>
<script>
import CesiumMap from "../../../components/Standard/cesiumMap.vue";
import MsgCard from "../../../components/Standard/msg-card.vue";
let topViewer, bottomViewer;
export default {
name: "homeRight",
components: {MsgCard, CesiumMap},
computed: {},
data() {
return {};
},
mounted() {
topViewer = this.$refs.homeRightTop.loadMap()
bottomViewer = this.$refs.homeRightBottom.loadMap()
topViewer.timeline.container.style.visibility = 'hidden'
bottomViewer.timeline.container.style.visibility = 'hidden'
this.$nextTick(() => {
this.playTracks()
})
},
methods: {
playTracks(){
topViewer.entities.removeAll()
let msg = []
// 起始时间
let start = Cesium.JulianDate.fromDate(new Date(msg[0].timeStamp));
// 结束时间
let stop = Cesium.JulianDate.fromDate(new Date(msg[msg.length - 1].timeStamp));
// 设置始时钟始时间
topViewer.timeline.zoomTo(start, stop);
topViewer.clock.startTime = start.clone();
// 设置时钟当前时间
topViewer.clock.currentTime = start.clone();
// 设置始终停止时间
topViewer.clock.stopTime = stop.clone();
// 时间速率，数字越大时间过的越快
topViewer.clock.multiplier = 1;
topViewer.clock.shouldAnimate = true
// 循环执行,即为2，到达终止时间，重新从起点时间开始
topViewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
this.currentEntity = this.addEntityProperty({
topViewer: topViewer,
data: msg,
type: rowData.type,
color: rowData.color,
lineColor: rowData.color,
start: start,
stop: stop,
pos: true,
ori: true,
speed: true,
angle: true,
path: true
})
}
},
beforeDestroy() {
},
};
</script>
<style lang='less' scoped>
::v-deep .content {
margin: 0
}
::v-deep .msg-card-content {
}
.top-left {
position: absolute;
left: -1px;
top: -1px;
padding: 10px;
border-style: solid;
border-color: rgba(24, 144, 255, 1);
border-width: 3px 0 0 3px;
}
.top-right {
position: absolute;
right: -1px;
top: -1px;
padding: 10px;
border-style: solid;
border-color: rgba(24, 144, 255, 1);
border-width: 3px 3px 0 0;
}
.bottom-left {
position: absolute;
right: -1px;
bottom: -1px;
padding: 10px;
border-style: solid;
border-color: rgba(24, 144, 255, 1);
border-width: 0 3px 3px 0;
}
.bottom-right {
position: absolute;
left: -1px;
bottom: -1px;
padding: 10px;
border-style: solid;
border-color: rgba(24, 144, 255, 1);
border-width: 0 0 3px 3px;
}
.home-right {
position: absolute;
right: 0;
top: 0;
padding: 15px 25px;
height: 100%;
width: 668px;
background-color: rgba(3, 11, 25, 0.45);
background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.57) 0%, rgba(0, 0, 0, 0.01) 26.39%);
.cardInner {
display: flex;
flex-direction: column;
justify-content: space-between;
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 {
height: 100%;
}
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home3/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<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)">
<WMap :mapId="'situation-map'" ref="wMap"/>
<home-left/>
<home-right/>
</div>
</template>
<script>
import mapAssets from "../../config/holo/mapAssets";
import WMap from "../../components/Standard/map/index.vue";
import HomeLeft from "./left/index.vue";
import HomeRight from "./right/index.vue";
let map,
scene;
export default {
name:'home3',
components: {
HomeRight,
HomeLeft,
WMap
},
props: {},
computed: {},
data() {
return {
loading:true,
};
},
watch: {
},
mounted() {
this.$nextTick(() => {
this.init();
});
},
methods: {
init() {
[map, scene] = this.$refs.wMap.initMap();
scene.on("loaded", () => {
// window.onkeydown = function () {
// let center = map_config.MAP_CENTER
// if (event.altKey && (event.keyCode === 49 || event.keyCode === 97)) {
// map.flyTo({
// zoom: map_config.MAP_ZOOM,
// center: center
// })
// }
// if (event.altKey && (event.keyCode === 50 || event.keyCode === 98)) {
// map.flyTo({
// zoom: 17.17,
// center: [120.62601176446981, 31.422352253327617]
// })
// }
// if (event.altKey && (event.keyCode === 51 || event.keyCode === 99)) {
// map.flyTo({
// zoom: 19.26,
// center: center
// })
// }
// }
this.loading = false
this.sceneLoaded = true;
for (let key in mapAssets.mapIcons) {
scene.addImage(key, mapAssets.mapIcons[key]);
}
// map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
});
scene.on('click', e => {
console.log(e)
})
},
},
beforeDestroy() {
scene = null;
map = null
},
};
</script>
<style lang='less' scoped>
.main{
height: 100%;
position: relative;
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home3/left/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="home-left">
<div class="topI">
<div class="videos">
<camera-video class="videoItem" v-for="item of 4" :video-data="item" :border="true"/>
</div>
</div>
<div class="bottomI">
<div class="analysis">
<div class="analysisItem"></div>
<div class="analysisItem"></div>
</div>
</div>
</div>
</template>
<script>
import CameraVideo from "../../../components/Standard/cameraVideo.vue";
export default {
name: "homeLeft",
components: {CameraVideo},
computed: {},
data() {
return {};
},
mounted() {},
methods: {},
beforeDestroy() {},
};
</script>
<style lang='less' scoped>
.home-left{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 521px;
background-color: #0d7fd7;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
.topI{
flex: 0 0 48%;
background-color: #0a5b85;
.videos{
display: flex;
flex-flow: row wrap;
height: 100%;
.videoItem{
width: 50%;
height: 50%;
position: relative;
}
}
}
.bottomI{
flex: 0 0 48%;
background-color: #1dce92;
.analysis{
height: 100%;
display: flex;
justify-content: space-between;
.analysisItem{
background-color: #0a5b85;
width: 48%;
height: 100%;
}
}
}
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home3/right/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="home-right">
<div class="top">
<cesium-map class="cesium-map" ref="homeRightTop" c-id="home-right-top"/>
</div>
<div class="bottom">
<cesium-map class="cesium-map" ref="homeRightBottom" c-id="home-right-bottom"/>
</div>
</div>
</template>
<script>
import CesiumMap from "../../../components/Standard/cesiumMap.vue";
let topViewer, bottomViewer;
export default {
name: "homeRight",
components: {CesiumMap},
computed: {},
data() {
return {};
},
mounted() {
topViewer = this.$refs.homeRightTop.loadMap()
bottomViewer = this.$refs.homeRightBottom.loadMap()
},
methods: {},
beforeDestroy() {
},
};
</script>
<style lang='less' scoped>
.home-right {
position: absolute;
right: 0;
top: 0;
padding: 30px;
height: 100%;
width: 521px;
background-color: #0d7fd7;
display: flex;
flex-direction: column;
justify-content: space-between;
.top {
height: 48%;
background-color: #0a5b85;
}
.bottom {
height: 48%;
background-color: #1dce92;
}
.cesium-map{
height: 100%;
}
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home4/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<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)">
<WMap :mapId="'situation-map'" ref="wMap"/>
<home-left/>
<home-right/>
</div>
</template>
<script>
import mapAssets from "../../config/holo/mapAssets";
import WMap from "../../components/Standard/map/index.vue";
import HomeLeft from "./left/index.vue";
import HomeRight from "./right/index.vue";
let map,
scene;
export default {
name:'home4',
components: {
HomeRight,
HomeLeft,
WMap
},
props: {},
computed: {},
data() {
return {
loading:true,
};
},
watch: {
},
mounted() {
this.$nextTick(() => {
this.init();
});
},
methods: {
init() {
[map, scene] = this.$refs.wMap.initMap();
scene.on("loaded", () => {
// window.onkeydown = function () {
// let center = map_config.MAP_CENTER
// if (event.altKey && (event.keyCode === 49 || event.keyCode === 97)) {
// map.flyTo({
// zoom: map_config.MAP_ZOOM,
// center: center
// })
// }
// if (event.altKey && (event.keyCode === 50 || event.keyCode === 98)) {
// map.flyTo({
// zoom: 17.17,
// center: [120.62601176446981, 31.422352253327617]
// })
// }
// if (event.altKey && (event.keyCode === 51 || event.keyCode === 99)) {
// map.flyTo({
// zoom: 19.26,
// center: center
// })
// }
// }
this.loading = false
this.sceneLoaded = true;
for (let key in mapAssets.mapIcons) {
scene.addImage(key, mapAssets.mapIcons[key]);
}
// map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
});
scene.on('click', e => {
console.log(e)
})
},
},
beforeDestroy() {
scene = null;
map = null
},
};
</script>
<style lang='less' scoped>
.main{
height: 100%;
position: relative;
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home4/left/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="home-left">
<div class="topI">
<div class="videos">
<camera-video class="videoItem" v-for="item of 4" :video-data="item" :border="true"/>
</div>
</div>
<div class="bottomI">
<div class="analysis">
<div class="analysisItem"></div>
<div class="analysisItem"></div>
</div>
</div>
</div>
</template>
<script>
import CameraVideo from "../../../components/Standard/cameraVideo.vue";
export default {
name: "homeLeft",
components: {CameraVideo},
computed: {},
data() {
return {};
},
mounted() {},
methods: {},
beforeDestroy() {},
};
</script>
<style lang='less' scoped>
.home-left{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 521px;
background-color: #0d7fd7;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
.topI{
flex: 0 0 48%;
background-color: #0a5b85;
.videos{
display: flex;
flex-flow: row wrap;
height: 100%;
.videoItem{
width: 50%;
height: 50%;
position: relative;
}
}
}
.bottomI{
flex: 0 0 48%;
background-color: #1dce92;
.analysis{
height: 100%;
display: flex;
justify-content: space-between;
.analysisItem{
background-color: #0a5b85;
width: 48%;
height: 100%;
}
}
}
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home4/right/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="home-right">
<div class="top">
<cesium-map class="cesium-map" ref="homeRightTop" c-id="home-right-top"/>
</div>
<div class="bottom">
<cesium-map class="cesium-map" ref="homeRightBottom" c-id="home-right-bottom"/>
</div>
</div>
</template>
<script>
import CesiumMap from "../../../components/Standard/cesiumMap.vue";
let topViewer, bottomViewer;
export default {
name: "homeRight",
components: {CesiumMap},
computed: {},
data() {
return {};
},
mounted() {
topViewer = this.$refs.homeRightTop.loadMap()
bottomViewer = this.$refs.homeRightBottom.loadMap()
},
methods: {},
beforeDestroy() {
},
};
</script>
<style lang='less' scoped>
.home-right {
position: absolute;
right: 0;
top: 0;
padding: 30px;
height: 100%;
width: 521px;
background-color: #0d7fd7;
display: flex;
flex-direction: column;
justify-content: space-between;
.top {
height: 48%;
background-color: #0a5b85;
}
.bottom {
height: 48%;
background-color: #1dce92;
}
.cesium-map{
height: 100%;
}
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home5/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<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)">
<WMap :mapId="'situation-map'" ref="wMap"/>
<home-left/>
<home-right/>
</div>
</template>
<script>
import mapAssets from "../../config/holo/mapAssets";
import WMap from "../../components/Standard/map/index.vue";
import HomeLeft from "./left/index.vue";
import HomeRight from "./right/index.vue";
let map,
scene;
export default {
name:'home5',
components: {
HomeRight,
HomeLeft,
WMap
},
props: {},
computed: {},
data() {
return {
loading:true,
};
},
watch: {
},
mounted() {
this.$nextTick(() => {
this.init();
});
},
methods: {
init() {
[map, scene] = this.$refs.wMap.initMap();
scene.on("loaded", () => {
// window.onkeydown = function () {
// let center = map_config.MAP_CENTER
// if (event.altKey && (event.keyCode === 49 || event.keyCode === 97)) {
// map.flyTo({
// zoom: map_config.MAP_ZOOM,
// center: center
// })
// }
// if (event.altKey && (event.keyCode === 50 || event.keyCode === 98)) {
// map.flyTo({
// zoom: 17.17,
// center: [120.62601176446981, 31.422352253327617]
// })
// }
// if (event.altKey && (event.keyCode === 51 || event.keyCode === 99)) {
// map.flyTo({
// zoom: 19.26,
// center: center
// })
// }
// }
this.loading = false
this.sceneLoaded = true;
for (let key in mapAssets.mapIcons) {
scene.addImage(key, mapAssets.mapIcons[key]);
}
// map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
});
scene.on('click', e => {
console.log(e)
})
},
},
beforeDestroy() {
scene = null;
map = null
},
};
</script>
<style lang='less' scoped>
.main{
height: 100%;
position: relative;
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home5/left/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="home-left">
<div class="topI">
<div class="videos">
<camera-video class="videoItem" v-for="item of 4" :video-data="item" :border="true"/>
</div>
</div>
<div class="bottomI">
<div class="analysis">
<div class="analysisItem"></div>
<div class="analysisItem"></div>
</div>
</div>
</div>
</template>
<script>
import CameraVideo from "../../../components/Standard/cameraVideo.vue";
export default {
name: "homeLeft",
components: {CameraVideo},
computed: {},
data() {
return {};
},
mounted() {},
methods: {},
beforeDestroy() {},
};
</script>
<style lang='less' scoped>
.home-left{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 521px;
background-color: #0d7fd7;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
.topI{
flex: 0 0 48%;
background-color: #0a5b85;
.videos{
display: flex;
flex-flow: row wrap;
height: 100%;
.videoItem{
width: 50%;
height: 50%;
position: relative;
}
}
}
.bottomI{
flex: 0 0 48%;
background-color: #1dce92;
.analysis{
height: 100%;
display: flex;
justify-content: space-between;
.analysisItem{
background-color: #0a5b85;
width: 48%;
height: 100%;
}
}
}
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home5/right/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="home-right">
<div class="top">
<cesium-map class="cesium-map" ref="homeRightTop" c-id="home-right-top"/>
</div>
<div class="bottom">
<cesium-map class="cesium-map" ref="homeRightBottom" c-id="home-right-bottom"/>
</div>
</div>
</template>
<script>
import CesiumMap from "../../../components/Standard/cesiumMap.vue";
let topViewer, bottomViewer;
export default {
name: "homeRight",
components: {CesiumMap},
computed: {},
data() {
return {};
},
mounted() {
topViewer = this.$refs.homeRightTop.loadMap()
bottomViewer = this.$refs.homeRightBottom.loadMap()
},
methods: {},
beforeDestroy() {
},
};
</script>
<style lang='less' scoped>
.home-right {
position: absolute;
right: 0;
top: 0;
padding: 30px;
height: 100%;
width: 521px;
background-color: #0d7fd7;
display: flex;
flex-direction: column;
justify-content: space-between;
.top {
height: 48%;
background-color: #0a5b85;
}
.bottom {
height: 48%;
background-color: #1dce92;
}
.cesium-map{
height: 100%;
}
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home6/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<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)">
<WMap :mapId="'situation-map'" ref="wMap"/>
<home-left/>
<home-right/>
</div>
</template>
<script>
import mapAssets from "../../config/holo/mapAssets";
import WMap from "../../components/Standard/map/index.vue";
import HomeLeft from "./left/index.vue";
import HomeRight from "./right/index.vue";
let map,
scene;
export default {
name:'home6',
components: {
HomeRight,
HomeLeft,
WMap
},
props: {},
computed: {},
data() {
return {
loading:true,
};
},
watch: {
},
mounted() {
this.$nextTick(() => {
this.init();
});
},
methods: {
init() {
[map, scene] = this.$refs.wMap.initMap();
scene.on("loaded", () => {
// window.onkeydown = function () {
// let center = map_config.MAP_CENTER
// if (event.altKey && (event.keyCode === 49 || event.keyCode === 97)) {
// map.flyTo({
// zoom: map_config.MAP_ZOOM,
// center: center
// })
// }
// if (event.altKey && (event.keyCode === 50 || event.keyCode === 98)) {
// map.flyTo({
// zoom: 17.17,
// center: [120.62601176446981, 31.422352253327617]
// })
// }
// if (event.altKey && (event.keyCode === 51 || event.keyCode === 99)) {
// map.flyTo({
// zoom: 19.26,
// center: center
// })
// }
// }
this.loading = false
this.sceneLoaded = true;
for (let key in mapAssets.mapIcons) {
scene.addImage(key, mapAssets.mapIcons[key]);
}
// map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
});
scene.on('click', e => {
console.log(e)
})
},
},
beforeDestroy() {
scene = null;
map = null
},
};
</script>
<style lang='less' scoped>
.main{
height: 100%;
position: relative;
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home6/left/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="home-left">
<div class="topI">
<div class="videos">
<camera-video class="videoItem" v-for="item of 4" :video-data="item" :border="true"/>
</div>
</div>
<div class="bottomI">
<div class="analysis">
<div class="analysisItem"></div>
<div class="analysisItem"></div>
</div>
</div>
</div>
</template>
<script>
import CameraVideo from "../../../components/Standard/cameraVideo.vue";
export default {
name: "homeLeft",
components: {CameraVideo},
computed: {},
data() {
return {};
},
mounted() {},
methods: {},
beforeDestroy() {},
};
</script>
<style lang='less' scoped>
.home-left{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 521px;
background-color: #0d7fd7;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
.topI{
flex: 0 0 48%;
background-color: #0a5b85;
.videos{
display: flex;
flex-flow: row wrap;
height: 100%;
.videoItem{
width: 50%;
height: 50%;
position: relative;
}
}
}
.bottomI{
flex: 0 0 48%;
background-color: #1dce92;
.analysis{
height: 100%;
display: flex;
justify-content: space-between;
.analysisItem{
background-color: #0a5b85;
width: 48%;
height: 100%;
}
}
}
}
</style>
\ No newline at end of file
wj-data-vision/src/views/home6/right/index.vue 0 → 100644
View file @ bc5d17ab
<template>
<div class="home-right">
<div class="top">
<cesium-map class="cesium-map" ref="homeRightTop" c-id="home-right-top"/>
</div>
<div class="bottom">
<cesium-map class="cesium-map" ref="homeRightBottom" c-id="home-right-bottom"/>
</div>
</div>
</template>
<script>
import CesiumMap from "../../../components/Standard/cesiumMap.vue";
let topViewer, bottomViewer;
export default {
name: "homeRight",
components: {CesiumMap},
computed: {},
data() {
return {};
},
mounted() {
topViewer = this.$refs.homeRightTop.loadMap()
bottomViewer = this.$refs.homeRightBottom.loadMap()
},
methods: {},
beforeDestroy() {
},
};
</script>
<style lang='less' scoped>
.home-right {
position: absolute;
right: 0;
top: 0;
padding: 30px;
height: 100%;
width: 521px;
background-color: #0d7fd7;
display: flex;
flex-direction: column;
justify-content: space-between;
.top {
height: 48%;
background-color: #0a5b85;
}
.bottom {
height: 48%;
background-color: #1dce92;
}
.cesium-map{
height: 100%;
}
}
</style>
\ No newline at end of file
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