Skip to content

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

大屏完善...

parent 7aaf35af
Hide whitespace changes
Inline Side-by-side
Showing with 535 additions and 249 deletions
wj-data-vision/src/components/Standard/localCamera.vue 0 → 100644
View file @ e1114c7a
<template>
<div :class="['cameraVideo',border?'cameraVideoBorder':'']">
<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 width="100%" autoplay :class="[reverse?'reverse':'']"
class="videoControl">
<source :src=`../../assets/videos/video${videoData}.mp4` type="video/mp4">
您的浏览器不支持 video 属性。
</video>
</div>
</template>
<script>
export default {
name: "localCamera",
props: ["videoData", 'border', 'reverse'],
watch: {},
data() {
return {};
},
methods: {},
computed: {},
mounted() {
this.$nextTick(() => {
})
},
beforeDestroy() {
console.log("video beforeDestroy");
},
};
</script>
<style lang="less" scoped>
.reverse {
rotate: 180deg;
}
.cameraVideo {
position: relative;
.videoControl {
position: absolute;
height: 100%;
width: 100%;
padding: 1px;
}
}
.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>
wj-data-vision/src/main.js
View file @ e1114c7a
......@@ -2,7 +2,6 @@ import store from './store'
import router from './router'
import './directive'
import App from './App'
// import './assets/less/component.less'
// import './assets/font/font.css'
// import './assets/icon/iconfont.css'
......
wj-data-vision/src/utils/l7Tools.js
View file @ e1114c7a
import {PointLayer, RasterLayer, LineLayer, HeatmapLayer, PolygonLayer} from '@antv/l7'
export function addSlowFullTrackLine(scene, msg){
export function addTrackLineLayer(scene, msg) {
const line = new LineLayer({zIndex: 1})
.source(msg)
.shape('line')
.size(1.5)
.color('#ffc800')
.style({
lineType: 'dash',
dashArray: [2, 2]
})
scene.addLayer(line)
return line
}
export function addSlowFullTrackLine(scene, msg) {
const line = new LineLayer({zIndex: 0})
.source(msg)
.shape('line')
......
wj-data-vision/src/views/accidentScene/index.vue
View file @ e1114c7a
......@@ -118,7 +118,6 @@ export default {
bbox: false,
}, (model) => {
vehicleModelTypes[`car${key}`] = model;
this.vehicleModelsNum += 1;
});
}
},
......@@ -171,51 +170,54 @@ export default {
},
// 根据处理后的数组新增-删除-更新模型
addDelUpdateVehicleModels(allData) {
if (this.vehicleModelsNum === 21) {
for (let item of allData) {
// 交通事故车辆popup标注&更新
if (item.eventType?.length) { // 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])
}
for (let item of allData) {
// 交通事故车辆popup标注&更新
// if (item.eventType?.length) { // todo: 参与交通事件的车辆 特殊字段
// if (item.originalType === 6) { // todo: 参与交通事件的车辆 特殊字段
// 349987
if (1 === 2) {
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}`);
}
// 新增
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);
}
}
// 更新
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);
}
}
}
}
// console.log('count...', window.tb.world.children.length)
}
// console.log('count...', window.tb.world.children.length)
},
callCar(msg) {
let start = performance.now();
......@@ -242,7 +244,7 @@ export default {
let allData = this.diff(this.lastLocation, msg);
this.lastLocation = msg;
this.addDelUpdateVehicleModels(allData);
this.addOrUpdateLicense(msg)
// this.addOrUpdateLicense(msg)
} else {
this.lastLocation = [];
if (this.selectVehicle) {
......@@ -254,7 +256,7 @@ export default {
this.waitingShow = false
window.tb.world.visible = false;
}
hide([layers.first.license])
// hide([layers.first.license])
this.addOrUpdateVehicle(msg)
}
}
......
wj-data-vision/src/views/dangerousDriving/index.vue
View file @ e1114c7a
......@@ -43,9 +43,12 @@ let map,
first: {
vehicle: null,
license: null,
trackLineLayer: null,
}
},
popups = {}
popups = {},
popupDanger = null
export default {
name: 'home5',
......@@ -66,6 +69,8 @@ export default {
currentLocation: [],
lastLocation: [],
bounds: '',
trackLine: [],
dangerVehicleDetail: null,
};
},
watch: {},
......@@ -86,8 +91,11 @@ export default {
this.initWebS()
}, 5000)
map.addControl(new mapboxgl.NavigationControl({showZoom: false}), 'top-right');
});
scene.on("zoomend", (e) => {
this.refreshBounds()
});
scene.on('moveend', () => {
......@@ -123,39 +131,15 @@ export default {
},
initWebS() {
if (this.loading) this.loading = false
// map.flyTo({
// zoom: 18.981829865122897,
// center: [112.96311321550195, 28.18374632714672]
// })
map.setZoom(18.981829865122897)
map.setCenter([112.96311321550195, 28.18374632714672])
map.rotateTo(95);
this.regisAndSendWs("callCar", {dataType: "BIG_SCREEN_WXJS_DATA"});
this.regisAndSendWs("callLight", {dataType: "4"});
this.initDangerFullTrack()
},
// todo
initDangerFullTrack() {
let res = {
content: []
}
let geoEdge = {
type: 'FeatureCollection',
features: []
}
for (let cross of res.content) {
// for (let passerby of cross.waitingState) {
// let wktarr = passerby.wkt.split(';')
// for (let i = 0; i < wktarr.length; i++) {
// wktarr[i] = wktarr[i].split(',')
// for (let j = 0; j < wktarr[i].length; j++) {
// wktarr[i][j] = Number(wktarr[i][j])
// }
// }
// geoEdge.features.push({
// type: 'Feature',
// properties: passerby,
// geometry: {
// type: 'LineString',
// coordinates: wktarr
// }
// })
// }
}
// l7Tools.addDangerFullTrackLine(scene, geoEdge)
},
callLight(msg) {
let lightArr = [];
......@@ -288,14 +272,22 @@ export default {
// 更新经纬度-角度-详细信息-弹窗信息
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]
// );
// }
// });
// if(options.picLicense === '鄂A51998'){
model.traverse((child) => {
if (child.isMesh && child.name.includes("_19")) {
child.material = child.material.clone();
child.material.color.set(
dict.vehicleRealColors[options.originalColor]
);
child.material.color.set(options.picLicense === '鄂A51998' ? '#f00' : '#fff');
}
});
// }
}
model.userData.data = !model.userData.data
? options
......@@ -322,26 +314,32 @@ export default {
if (this.vehicleModelsNum === 21) {
for (let item of allData) {
// 危险驾驶popup标注&更新
if (item.eventType?.length) { // 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.eventType?.length) {
if (item.picLicense === '鄂A51998') { // todo: 参与危险驾驶的车辆 特殊字段
this.trackLine.push([item.longitude, item.latitude])
if (this.trackLine.length > 1) {
let g = turf.lineString(this.trackLine)
let geo = turf.featureCollection([g])
if (!layers.first.trackLineLayer) {
layers.first.trackLineLayer = l7Tools.addTrackLineLayer(scene, geo)
} else {
layers.first.trackLineLayer.setData(geo)
}
}
popupDanger = new Popup({
offsets: [-100, 280],
closeButton: false,
closeButtonOffsets: [-200, 17],
// autoPan: true,
})
.setLngLat([item.longitude, item.latitude])
.setHTML(`<div id="vehicle_popup${item.id}"></div>`)
scene.addPopup(popupDanger);
new VehiclePopup({
propsData: {
model: item,
},
}).$mount(`#vehicle_popup${item.id}`);
}
// 新增
if (item.dill === "add") {
......@@ -354,6 +352,9 @@ export default {
if (window.tb.world.children[i].userData.data.id === item.id) {
if (item.dill === 'del') {
window.tb.clear(item.id, true)
if (item.picLicense === '鄂A51998') {
popupDanger.hide()
}
}
if (item.dill === 'com') {
this.setModel(window.tb.world.children[i], item, false);
......@@ -381,16 +382,23 @@ export default {
}
if (msg.length > 0) {
// 第一帧 || 时间戳不相同 => 放行
if (this.lastLocation.length === 0 || this.lastLocation[0].dateTime !== msg[0].dateTime) {
if (this.lastLocation.length === 0) {
// if (this.lastLocation.length === 0 || this.lastLocation[0].dateTime !== msg[0].dateTime) {
this.situationTimeVal = msg[0].dateTime
// 层级最大 展示3D & 车牌号
if (scene.getZoom() > 17) {
hide([layers.first.vehicle])
window.tb.world.visible = true;
let allData = this.diff(this.lastLocation, msg);
if (this.lastLocation[0] && new Date(msg[0].dateTime).getTime() < new Date(this.lastLocation[0].dateTime).getTime()) {
layers.first.trackLineLayer && scene.removeLayer(layers.first.trackLineLayer)
layers.first.trackLineLayer = null
popupDanger.hide()
this.trackLine = []
}
this.lastLocation = msg;
this.addDelUpdateVehicleModels(allData);
this.addOrUpdateLicense(msg)
// this.addOrUpdateLicense(msg)
} else {
this.lastLocation = [];
if (this.selectVehicle) {
......
wj-data-vision/src/views/dangerousDriving/mapPopup/vehicleDetail.vue
View file @ e1114c7a
......@@ -6,11 +6,19 @@
<div class="content">
<div class="detailItem">
<span class="left">危险类型：</span
>{{ model.picLicense||'无数据' }}
>{{ 'S型驾驶' }}
</div>
<div class="detailItem">
<span class="left">检测时间：</span
>{{ model.speed }}
>{{ model.dateTime }}
</div>
<div class="detailItem">
<span class="left">行驶速度：</span
>{{ model.speed }}km/h
</div>
<div class="detailItem">
<span class="left">航向角：</span
>{{ model.courseAngle }}
</div>
</div>
</div>
......@@ -18,13 +26,14 @@
<script>
import dict from "../../../config/holo/dictionary";
export default {
name: "vehicleDetail",
data() {
return {};
},
props: ["model"],
watch:{
watch: {
model: {
handler(val) {
// console.log('dataObj deep change', val)
......@@ -47,7 +56,8 @@ export default {
},
},
computed: {},
beforeDestroy() {},
beforeDestroy() {
},
};
</script>
......@@ -57,58 +67,66 @@ export default {
position: absolute;
//bottom: 16px;
//right: 16px;
width: 216px;
width: 260px;
//height: 207px;
padding: 2px 16px 6px 16px;
background-image: url("../../../assets/images/holo/vehicle_popup_back.png");
background-image: url("../../../assets/images/acci/detail-back-red.png");
background-size: 100% 100%;
background-repeat: no-repeat;
.head {
height: 25px;
height: 30px;
color: white;
display: flex;
align-items: center;
span {
display: inline-block;
}
.titleBefore {
width: 18px;
height: 18px;
width: 25px;
height: 30px;
margin-right: 5px;
line-height: 25px;
background-image:url('../../../assets/images/holo/vehicle_popup_icon.png');
line-height: 30px;
background-image: url('../../../assets/images/acci/carIcon-red.png');
background-position: center;
background-repeat: no-repeat;
}
}
.content {
height: calc(100% - 25px);
display: flex;
padding-top: 12px;
padding-top: 8px;
//flex-flow: row wrap;
flex-direction: column;
.detailItem {
height: 30px;
line-height: 30px;
white-space: nowrap;
color: white;
//width: 50%;
max-width: 200px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
span {
display: inline-block;
}
span.left {
text-align: left;
padding-left: 20px;
//width: 50%;
background-image: url("../../../assets/images/holo/vehicle_popup_arrow.png");
background-image: url("../../../assets/images/acci/arrow-red.png");
background-size: auto;
background-repeat: no-repeat;
background-position: left;
color: rgba(207, 238, 255, 0.9);
}
span.right {
text-align: left;
......
wj-data-vision/src/views/drones/index.vue
View file @ e1114c7a
......@@ -121,7 +121,7 @@ export default {
initWebS() {
if (this.loading) this.loading = false
this.regisAndSendWs("callCar", {dataType: "1"});
this.regisAndSendWs("callCar", {dataType: "BIG_SCREEN_WRJ_DATA"});
},
// 注册 websocket 并绑定回调事件
regisAndSendWs(name, sendData) {
......
wj-data-vision/src/views/intersectionGroups/index.vue
View file @ e1114c7a
......@@ -5,6 +5,7 @@
<camera-video :reverse="true" class="main-cameraVideo" :class="!boxesShow ? 'main-cameraVideoHidden':''"
:border="true"
:video-data="dianyunUrl" :auto-play="true"/>
<!-- <local-camera class="main-cameraVideo" :class="!boxesShow ? 'main-cameraVideoHidden':''"/>-->
<situation-time class="timeCenter" :time="this.situationTimeVal"/>
<wMap :mapId="'situation-map'" ref="wMap"/>
<!--左右图表组件-->
......@@ -42,6 +43,7 @@ import SituationTime from "./situationTime.vue";
import cameraPopup from "./mapPopup/cameraPopup.vue";
import vehicleDetail from "./mapPopup/vehicleDetail.vue";
import CameraVideo from "../../components/Standard/cameraVideo.vue";
import LocalCamera from "../../components/Standard/localCamera.vue";
const VehiclePopup = Vue.extend(vehicleDetail)
const CameraPopup = Vue.extend(cameraPopup)
......@@ -77,6 +79,7 @@ let map,
export default {
name: 'home1',
components: {
LocalCamera,
CameraVideo,
SituationTime,
wMap,
......@@ -415,7 +418,6 @@ export default {
// 根据处理后的数组新增-删除-更新模型
addDelUpdateVehicleModels(allData) {
if (this.vehicleModelsNum === 21) {
for (let item of allData) {
// 新增
if (item.dill === "add") {
......@@ -583,9 +585,6 @@ export default {
item.sendData = JSON.stringify(sendData);
let current = initWs(item);
current.ws.onmessage = (e) => this[item.name](JSON.parse(e.data));
// current.ws.onerror = (e) => {
// console.log('websocket onError', e)
// }
this.sockets.push(current);
}
}
......
wj-data-vision/src/views/intersectionGroups/messageBoxes.vue
View file @ e1114c7a
......@@ -125,7 +125,7 @@
>发生时间： {{ item.happenTime }}</span
>
<span :title="`时长:` + item.duration"
>时长： {{ item.duration }}</span
>时长： {{ item.duration }}min</span
>
<span :title="`事件来源:` + item.source"
>事件来源： {{ item.source }}</span
......
wj-data-vision/src/views/phaseAirPlay/left/index.vue
View file @ e1114c7a
......@@ -15,8 +15,10 @@
<msg-card class="m-b-10" title="相位监测">
<div class="messages">
<div class="message-title">
<span>检测时间段：{{time}}</span>
<span>是否有空放：是</span>
<!-- <span>检测时间段：{{ content.timeBetween }}</span>-->
<!-- <span>是否有空放：{{ content.ifPhase ? '是' : '否' }}</span>-->
<div class="option">检测时间段：<span>{{ content.timeBetween }}</span></div>
<div class="option">是否有空放：<span>{{ content.ifPhase ? '是' : '否' }}</span></div>
</div>
<div class="message-describe">
<div class="label">空放方向：</div>
......@@ -39,14 +41,18 @@ export default {
computed: {},
data() {
return {
time:'09:10:00 - 09:12:30',
cameras:[],
time: '09:10:00 - 09:12:30',
cameras: [],
content: {
timeBetween: '2023.4.9 17:21:09 ~ 17:27:09',
ifPhase: true
}
};
},
mounted() {
// 1事故场景 2相位空放 3直左冲突 4慢行交通 5危险驾驶
getCameraListByType({type:2}).then(res => {
console.log('cameraList',res)
getCameraListByType({type: 2}).then(res => {
console.log('cameraList', res)
this.cameras = res.content
})
},
......@@ -231,30 +237,44 @@ export default {
.bottomI {
flex: 1;
.messages{
.messages {
font-size: 18px;
display: flex;
height: 100%;
flex-direction: column;
padding: 15px;
justify-content: space-around;
.message-title{
.message-title {
display: flex;
justify-content: space-between;
span{
.option {
width: 50%;
overflow:hidden;
display: flex;
span {
display: inline-block;
width: 60%;
}
}
span {
width: 50%;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
text-align: left;
}
}
.message-describe{
.message-describe {
display: flex;
.label{
.label {
width: 100px;
}
.value-image{
.value-image {
width: 491px;
height: 373px;
background-image: url("../../../assets/images/xwPic.png");
......
wj-data-vision/src/views/phaseAirPlay/right/index.vue
View file @ e1114c7a
......@@ -5,11 +5,11 @@
<div class="comp">
<cross-control crossId="12F6S08J7P0"/>
</div>
<!-- :span-method="objectSpanMethod"-->
<el-table
:header-cell-style="{backgroundColor:'rgba(46, 119, 255, 0.15)',color:'rgba(217, 229, 255, 1)'}"
:row-class-name="userTab"
:data="tableData"
:span-method="objectSpanMethod"
border
style="background-color: transparent; width: 100%;">
<el-table-column
......@@ -37,6 +37,9 @@
prop="time"
align="center"
label="空放时间">
<template slot-scope="scope">
{{scope.row.time}}秒
</template>
</el-table-column>
</el-table>
</div>
......@@ -59,71 +62,132 @@ export default {
data() {
return {
tableData: [
{ xy: 'A', type: '机动车', direction: '234', sat: '3.2', time: 10 },
{ xy: 'A', type: '机动车', direction: '234', sat: '3.2', time: 10 },
{ xy: 'A', type: '非机动车', direction: '234', sat: '3.2', time: 10 },
{ xy: 'A', type: '非机动车', direction: '234', sat: '3.2', time: 10 },
{ xy: 'A', type: '行人', direction: '234', sat: '3.2', time: 10 },
{ xy: 'A', type: '行人', direction: '234', sat: '3.2', time: 10 },
{ xy: 'B', type: '机动车', direction: '234', sat: '3.2', time: 10 },
{ xy: 'B', type: '机动车', direction: '234', sat: '3.2', time: 10 },
{ xy: 'B', type: '非机动车', direction: '234', sat: '3.2', time: 10 },
{ xy: 'B', type: '非机动车', direction: '234', sat: '3.2', time: 10 },
{ xy: 'B', type: '行人', direction: '234', sat: '3.2', time: 10 },
{ xy: 'B', type: '行人', direction: '234', sat: '3.2', time: 10 },
{ xy: 'C', type: '机动车', direction: '234', sat: '3.2', time: 10 },
{ xy: 'C', type: '机动车', direction: '234', sat: '3.2', time: 10 },
{ xy: 'C', type: '非机动车', direction: '234', sat: '3.2', time: 10 },
{ xy: 'C', type: '非机动车', direction: '234', sat: '3.2', time: 10 },
{ xy: 'C', type: '行人', direction: '234', sat: '3.2', time: 10 },
{ xy: 'C', type: '行人', direction: '234', sat: '3.2', time: 10 },
{ xy: 'D', type: '机动车', direction: '234', sat: '3.2', time: 10 },
{ xy: 'D', type: '机动车', direction: '234', sat: '3.2', time: 10 },
{ xy: 'D', type: '非机动车', direction: '234', sat: '3.2', time: 10 },
{ xy: 'D', type: '非机动车', direction: '234', sat: '3.2', time: 10 },
{ xy: 'D', type: '行人', direction: '234', sat: '3.2', time: 10 },
{ xy: 'D', type: '行人', direction: '234', sat: '3.2', time: 10 },
{xy: 'A', type: '机动车', direction: '北左', sat: '100%', time: 0},
{xy: 'A', type: '机动车', direction: '东右', sat: '90%', time: 2},
// { xy: 'A', type: '非机动车', direction: '234', sat: '3.2', time: 10 },
// { xy: 'A', type: '非机动车', direction: '234', sat: '3.2', time: 10 },
// { xy: 'A', type: '行人', direction: '234', sat: '3.2', time: 10 },
// { xy: 'A', type: '行人', direction: '234', sat: '3.2', time: 10 },
{xy: 'B', type: '机动车', direction: '北直', sat: '100%', time: 0},
{xy: 'B', type: '机动车', direction: '北左', sat: '51%', time: 19},
{xy: 'B', type: '机动车', direction: '东右', sat: '5%', time: 35},
// { xy: 'B', type: '非机动车', direction: '234', sat: '3.2', time: 10 },
// { xy: 'B', type: '行人', direction: '234', sat: '3.2', time: 10 },
// { xy: 'B', type: '行人', direction: '234', sat: '3.2', time: 10 },
{xy: 'C', type: '机动车', direction: '北直', sat: '90%', time: 13},
{xy: 'C', type: '机动车', direction: '北直', sat: '78%', time: 30},
// { xy: 'C', type: '非机动车', direction: '234', sat: '3.2', time: 10 },
// { xy: 'C', type: '非机动车', direction: '234', sat: '3.2', time: 10 },
{xy: 'C', type: '行人', direction: '东口', sat: '5%', time: 75},
// { xy: 'C', type: '行人', direction: '234', sat: '3.2', time: 10 },
{xy: 'D', type: '机动车', direction: '东左', sat: '28%', time: 23},
// { xy: 'D', type: '机动车', direction: '234', sat: '3.2', time: 10 },
// { xy: 'D', type: '非机动车', direction: '234', sat: '3.2', time: 10 },
// { xy: 'D', type: '非机动车', direction: '234', sat: '3.2', time: 10 },
// { xy: 'D', type: '行人', direction: '234', sat: '3.2', time: 10 },
{xy: 'D', type: '行人', direction: '北口', sat: '80%', time: 7},
]
};
},
mounted() {
},
methods: {
userTab({ row, rowIndex }) {
userTab({row, rowIndex}) {
if (rowIndex % 2 === 0) {
return 'warning-row'
} else if (rowIndex % 2 !== 0) {
return 'pager-row'
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
objectSpanMethod({row, column, rowIndex, columnIndex}) {
if (columnIndex === 0) {
if (rowIndex % 6 === 0) {
if (rowIndex >= 0 && rowIndex <= 1) {
return {
rowspan: 6,
rowspan: 2,
colspan: 1
}
} else if (rowIndex >= 2 && rowIndex <= 4) {
return {
rowspan: 3,
colspan: 1
}
} else if (rowIndex >= 5 && rowIndex <= 7) {
return {
rowspan: 3,
colspan: 1
};
}
} else if (rowIndex >= 8 && rowIndex <= 9) {
return {
rowspan: 2,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
if (columnIndex === 1) {
if (rowIndex % 2 === 0) {
if (rowIndex >= 0 && rowIndex <= 1) {
return {
rowspan: 2,
colspan: 1
};
}
}
if (rowIndex >= 2 && rowIndex <= 4) {
return {
rowspan: 3,
colspan: 1,
}
}
if (rowIndex >= 5 && rowIndex <= 6) {
return {
rowspan: 2,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
},
// 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() {
......@@ -132,9 +196,10 @@ export default {
</script>
<style lang='less' scoped>
.full-h{
.full-h {
height: 100%;
}
::v-deep .content {
margin: 0
}
......@@ -195,62 +260,78 @@ export default {
background-image: linear-gradient(90deg, rgba(8, 20, 31, 0) 0%, rgba(6, 16, 26, 1) 100%);
.cardInner {
.comp{
.comp {
height: 15%;
padding: 10px 0;
}
::v-deep .el-table{
::v-deep .el-table {
height: 85%;
overflow-y: auto;
}
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
::v-deep .el-table--small td, .el-table--small th{
padding: 2px 0;
::v-deep .el-table--small td, .el-table--small th {
padding: 10px 0;
}
::v-deep .el-table th{
padding: 3px 0;
::v-deep .el-table th {
padding: 12px 0;
}
::v-deep .el-table {
width: 440px;
color: rgba(217, 229, 255, 1);
font-size: 16px;
}
::v-deep .el-table tr{
::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: transparent;
}
::v-deep .el-table .cell .el-table th div {
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-bottom: 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);
}
::v-deep .el-table--border{
::v-deep .el-table--border {
border: none;
}
::v-deep .el-table--border::after{
::v-deep .el-table--border::after {
width: 0;
}
::v-deep .el-table--border::before{
::v-deep .el-table--border::before {
height: 0;
}
}
......
wj-data-vision/src/views/slowTraffic/index.vue
View file @ e1114c7a
......@@ -194,7 +194,7 @@ export default {
},
initWebS() {
if (this.loading) this.loading = false
this.regisAndSendWs("callCar", {dataType: "1"});
this.regisAndSendWs("callCar", {dataType: "BIG_SCREEN_MXJT_DATA"});
},
// 注册 websocket 并绑定回调事件
regisAndSendWs(name, sendData) {
......@@ -297,7 +297,7 @@ export default {
let allData = this.diff(this.lastLocation, msg);
this.lastLocation = msg;
this.addDelUpdateVehicleModels(allData);
this.addOrUpdateLicense(msg)
// this.addOrUpdateLicense(msg)
} else {
this.lastLocation = [];
if (this.selectVehicle) {
......@@ -309,7 +309,7 @@ export default {
this.waitingShow = false
window.tb.world.visible = false;
}
hide([layers.first.license])
// hide([layers.first.license])
this.addOrUpdateVehicle(msg)
}
}
......
wj-data-vision/src/views/straightLeftConflict/left/index.vue
View file @ e1114c7a
......@@ -49,9 +49,9 @@ export default {
return {
cameras: [],
content: {
timeBetween: '2023.4.8 17:40:00 ~ 17:42:30',
timeBetween: '2023.4.8 17:18:36 ~ 17:23:36',
ifConflict: true,
duration: 18,
duration: 27,
reason: '南进口直行车辆未清空，导致北进口左转车辆与南进口直行车辆冲突',
direction: '北口左转与南口直行'
},
......
wj-data-vision/src/views/straightLeftConflict/right/index.vue
View file @ e1114c7a
......@@ -57,23 +57,23 @@ export default {
data() {
return {
tableData: [
{ type: '冲突延误', A: '0s', B: '10s', C: '0s', D: '8s' },
{ type: '绿灯启亮未清空车辆', A: '6辆', B: '0辆', C: '4辆', D: '0辆' },
{ type: '红灯结束排队长度', A: '10m', B: '12m', C: '0m', D: '6m' },
{type: '冲突延误', A: '0秒', B: '27秒', C: '0秒', D: '0秒'},
{type: '绿灯启亮未清空车辆', A: '0辆', B: '19辆', C: '3辆', D: '0辆'},
{type: '红灯结束排队长度', A: '112米', B: '0米', C: '0米', D: '10米'},
]
};
},
mounted() {
},
methods: {
userTab({ row, rowIndex }) {
userTab({row, rowIndex}) {
if (rowIndex % 2 === 0) {
return 'warning-row'
} else if (rowIndex % 2 !== 0) {
return 'pager-row'
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
objectSpanMethod({row, column, rowIndex, columnIndex}) {
if (columnIndex === 0) {
if (rowIndex % 6 === 0) {
return {
......@@ -109,9 +109,10 @@ export default {
</script>
<style lang='less' scoped>
.full-h{
.full-h {
height: 100%;
}
::v-deep .content {
margin: 0
}
......@@ -172,7 +173,7 @@ export default {
background-image: linear-gradient(90deg, rgba(8, 20, 31, 0) 0%, rgba(6, 16, 26, 1) 100%);
.cardInner {
.comp{
.comp {
height: 15%;
padding: 10px 0;
}
......@@ -181,60 +182,77 @@ export default {
flex-direction: column;
justify-content: space-between;
height: 100%;
::v-deep .el-table{
::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;
}
::v-deep .el-table th{
::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{
::v-deep .el-table td, .el-table th.is-leaf {
border-bottom: none;
}
::v-deep .el-table th.is-leaf{
::v-deep .el-table th.is-leaf {
border-bottom: none;
}
::v-deep .el-table tr{
::v-deep .el-table tr {
background-color: unset;
}
::v-deep .el-table .warning-row {
background-color: #050f19;
}
::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: #091627;
}
::v-deep .el-table .cell .el-table th div {
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-bottom: 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);
}
::v-deep .el-table--border{
::v-deep .el-table--border {
border: none;
}
::v-deep .el-table--border::after{
::v-deep .el-table--border::after {
width: 0;
}
::v-deep .el-table--border::before{
::v-deep .el-table--border::before {
height: 0;
}
}
......
wj-manage-web/src/components/Standard/cameraVideo.vue
View file @ e1114c7a
<template>
<div class="cameraVideo" v-loading="loading" element-loading-text="视频加载中.."
<div class="cameraVideo" v-loading="cameraLoading" element-loading-text="视频加载中.."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)">
<video
......@@ -10,16 +10,17 @@
</template>
<script>
export default {
name: "cameraVideo",
props: ["videoData", 'autoPlay'],
watch: {},
methods: {
canplay() {
this.loading = false
this.cameraLoading = false
},
loadstart() {
this.loading = true;
this.cameraLoading = true;
},
loadVideo() {
console.log("video url data", this.videoData);
......@@ -101,7 +102,7 @@ export default {
data() {
return {
cleanBuff: null,
loading: true,
cameraLoading: true,
supported: false,
player: null,
};
......@@ -116,7 +117,7 @@ export default {
})
}
let interval = setInterval(() => {
if (this.loading) {
if (this.cameraLoading) {
this.handleErr()
} else {
clearInterval(interval)
......
wj-manage-web/src/main.js
View file @ e1114c7a
......@@ -11,7 +11,6 @@ import './assets/icon/iconfont.css'
// import axios from 'axios'
// Vue.prototype.$axios = axios
// import VueClipboard from 'vue-clipboard2'
Vue.use(ELEMENT, {
size: 'small',
})
......
wj-manage-web/src/views/situation/MapPopup/equipmentPopup.vue
View file @ e1114c7a
<template>
<div id="e_popup">
<div v-if="model.equip_type === 'camera'" class="equip_camera">
<div class="header">{{model.installLocation}}</div>
<div class="header">{{ model.installLocation || '暂无安装地址信息' }}</div>
<div class="main">
<camera-video :auto-play="true" style="height: 100%" :video-data="model.videoUrl"/>
</div>
......@@ -12,25 +12,26 @@
<div class="left-image"></div>
<div class="right">
<div class="equip-type">
<div class="detail-item"><span>设备名称：</span>{{model.equipName}}</div>
<div class="detail-item"><span>设备名称：</span>{{ model.equipName }}</div>
<!-- <div class="detail-item"><span>设备名称：</span>气象环境监测</div> -->
<div class="detail-item"><span>设备地址：</span></div>
<div class="detail-item"><span>气压：</span></div>
<div class="detail-item"><span>在线情况：</span></div>
<div class="detail-item"><span>PM 2.5：</span>{{model.pm2dot5}}</div>
<div class="detail-item"><span>风速：</span>{{model.windSpeed}}</div>
<div class="detail-item"><span>PM 10：</span>{{model.pm10}}</div>
<div class="detail-item"><span>风向：</span>{{dict.equip_weather.windDir[model.windDirection]}}</div>
<div class="detail-item"><span>PM 2.5：</span>{{ model.pm2dot5 }}</div>
<div class="detail-item"><span>风速：</span>{{ model.windSpeed }}</div>
<div class="detail-item"><span>PM 10：</span>{{ model.pm10 }}</div>
<div class="detail-item"><span>风向：</span>{{ dict.equip_weather.windDir[model.windDirection] }}</div>
<div class="detail-item"><span>空气温度：</span>{{ model.temperature }}</div>
<div class="detail-item"><span>空气湿度：</span>{{model.humidity}}</div>
<div class="detail-item"><span>大气能见度：</span>{{dict.equip_weather.vis[model.visibility]}}</div>
<div class="detail-item"><span>空气湿度：</span>{{ model.humidity }}</div>
<div class="detail-item"><span>大气能见度：</span>{{ dict.equip_weather.vis[model.visibility] }}</div>
</div>
</div>
</div>
</div>
<div v-else class="equip_weather">
<div class="header">radar</div>
<div class="header">No Data</div>
<div class="main">
No Data ...
</div>
</div>
</div>
......@@ -50,50 +51,58 @@ export default {
};
},
mounted() {
console.log('equp',this.model)
console.log('equp', this.model)
},
methods: {},
computed: {},
beforeDestroy() {},
beforeDestroy() {
console.log('equipment popup destroy...')
},
};
</script>
<style lang='less' scoped>
#e_popup{
background: rgba(15, 38, 69, 1)
#e_popup {
background: rgba(15, 38, 69, 1)
}
.equip_weather{
.equip_weather {
width: 540px;
height: 240px;
.header{
height:43px;
.header {
height: 43px;
font-size: 18px;
font-weight: 700;
line-height: 55px;
padding-left: 12px;
color: white;
background:url('../../../assets/images/holo/popupTop.png');
background: url('../../../assets/images/holo/popupTop.png');
background-size: 100%;
}
.main{
.main {
height: calc(100% - 43px);
border: 1px solid #037bb2;
padding: 18px;
display: flex;
.left-image{
.left-image {
margin-right: 18px;
width:130px;
width: 130px;
min-width: 130px;
background-image:url('../../../assets/images/holo/qietu/qietu4.png');
background-image: url('../../../assets/images/holo/qietu/qietu4.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.right{
.equip-type{
.right {
.equip-type {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.detail-item{
.detail-item {
flex: 0 0 48%;
height: 26px;
line-height: 30px;
......@@ -103,7 +112,8 @@ export default {
white-space: nowrap;
max-height: 100%;
font-size: 14px;
span{
span {
display: inline-block;
color: rgba(155, 177, 212, 1);
//width:80px;
......@@ -115,13 +125,15 @@ export default {
}
}
}
.equip_camera{
.equip_camera {
width: 448px;
height: 328px;
background-image: url("../../../assets/images/holo/videobackgorund.png");
background-repeat: no-repeat;
background-size: 100% 100%;
.header{
.header {
height: 43px;
line-height: 58px;
padding-left: 10px;
......@@ -129,11 +141,13 @@ export default {
font-size: 18px;
font-weight: 700;
}
.main{
.main {
padding: 2px;
height: calc(100% - 43px);
}
}
//video448 328
</style>
wj-manage-web/src/views/situation/index.vue
View file @ e1114c7a
......@@ -93,6 +93,7 @@ function show(layer) {
let {keys, values, entries} = Object;
let map,
popups = [],
vehicleDetailPopup = null,
scene,
mapMethods,
......@@ -490,7 +491,7 @@ export default {
Promise.all([
equip_radar(), equip_signal(), equip_camera(), equip_weather()
]).then(([radar, signal, camera, weather]) => {
console.log('设备。。。',radar, signal, camera, weather)
console.log('设备。。。', radar, signal, camera, weather)
if (!layers.fourth.weather) {
// layers.fourth.milli = l7Tools.addEquipmentMilli(
// scene,
......@@ -544,16 +545,31 @@ export default {
// 设备点击
equipmentsClick(e, type) {
// console.log(type)
const popup = new Popup({offsets: [0, 30], closeButtonOffsets: [5, 7]})
.setLngLat(e.feature.coordinates)
.setHTML('<div id="equipment_popup"></div>');
scene.addPopup(popup);
new EquipmentPopup({
propsData: {
model: {equip_type: type, ...e.feature},
},
}).$mount("#equipment_popup");
for (let item of popups) {
item.$destroy()
}
popups = []
this.$nextTick(() => {
// console.log(type)
const popup = new Popup({offsets: [0, 30], closeButtonOffsets: [5, 7]})
.setLngLat(e.feature.coordinates)
.setHTML('<div id="equipment_popup"></div>')
popup.on('close', () => {
for (let item of popups) {
item.$destroy()
}
popups = []
})
scene.addPopup(popup);
let aa = new EquipmentPopup({
propsData: {
model: {equip_type: type, ...e.feature},
},
})
aa.$mount("#equipment_popup");
popups.push(aa)
})
},
// map 可视范围发生变化
refreshMap() {
......
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