Skip to content

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

展示版本基本完成

parent 22eab69a
Show whitespace changes
Inline Side-by-side
Showing with 886 additions and 473 deletions
wj-data-vision/public/config.js
View file @ 0c7fe56c
......@@ -2,33 +2,12 @@ const map_config = {
SYS_ID: 'CAFC20296895433784C193457A870DFD',
MAP_CENTER: [112.96284186666799, 28.187102143508625],
MAP_ZOOM: 17.048587811931856,
MAX_ZOOM: 20,
MAP_PITCH: 0,
MAP_ROTATE: 90,
MAP_STYLE: 'http://192.168.2.78:9000/style-changsha.json', // 高精
}
const ws_config = {
// BASE_URL: 'ws://192.168.2.156:17021/holows/subscribe',
BASE_URL: 'ws://192.168.2.78:17021/holows/subscribe',
CROSS_CONTROL: 'ws://192.168.2.78:9000/utc/signalStatus/',
}
\ No newline at end of file
const api_config = {
CROSS_STOP_LINE: '/develop/sgw/dbInterface/zh_changsha_18q3_0303/hd_506_rxhdzxx/multiTable/A443EF992884', // 获取停止线接口
}
const video_config = {
intersectionGroupsVideoUrl: 'http://192.168.2.80/live?app=demo&stream=cloudpoint-1',
//2023-04-11 10:29:36_2023-04-11 10:34:36
groupViewStartTime: '2023-04-11 10:29:36',
//2023-04-10 00:47:20_2023-04-10 00:49:46
accidentViewStartTime: '2023-04-10 00:47:20',
//2023-04-09 01:28:10_2023-04-09 01:28:40
dangerViewStartTime: '2023-04-09 01:28:10',
dronesViewStartTime: '2023-04-09 01:28:10',
mobileViewStartTime: '2023-04-11 20:58:45',
phaseViewStartTime: '2023-04-10 17:21:04',
slowViewStartTime: '2023-04-10 01:22:12',
SLConflictViewStartTime: '2023-04-08 17:28:31',
}
\ No newline at end of file
wj-data-vision/src/config/holo/mapAssets.js
View file @ 0c7fe56c
......@@ -8,6 +8,7 @@ export default {
camera: require('../../assets/images/holo/spxj.png'),
sign: require('../../assets/images/holo/xhj.png'),
homeCamera: require('../../assets/images/sc/crossCamera.png'),
mobileEquip: require('../../assets/images/sc/mobileEquip.png'),
// light11: require('../../assets/images/sc/leftRed.png'),
// light12: require('../../assets/images/sc/leftYellow.png'),
......
wj-data-vision/src/dao/api.js
View file @ 0c7fe56c
import fetch from '@/utils/fetch'
// 路口停止线获取
export const getLinesByCross = (params) => fetch(api_config.CROSS_STOP_LINE, params, 'POST', {})
// export const getLinesByCross = (params) => fetch(api_config.CROSS_STOP_LINE, params, 'POST', {})
// 根据不同场景请求左侧cameraList
export const getCameraListByType = (data) => fetch('/holo/event-camera/list', data, 'GET')
......
wj-data-vision/src/utils/l7Tools.js
View file @ 0c7fe56c
......@@ -321,7 +321,7 @@ export function addVehicleLayer(scene, msg) {
return pointLayer
}
// 车辆圆点图层
// 设备
export function addMobilePoint(scene, msg) {
const pointLayer = new PointLayer({zIndex: 2})
.source(msg, {
......@@ -329,12 +329,12 @@ export function addMobilePoint(scene, msg) {
type: 'json', x: 'longitude', y: 'latitude',
},
})
.shape('circle')
.style({
blur: 1,
})
.size(24)
.color('#e21918')
.shape('mobileEquip')
// .style({
// blur: 1,
// })
.size(28)
// .color('#e21918')
scene.addLayer(pointLayer)
return pointLayer
}
wj-data-vision/src/views/accidentScene/index.vue
View file @ 0c7fe56c
......@@ -110,7 +110,7 @@ export default {
input.select()
document.execCommand('copy')
document.body.removeChild(input)
ELEMENT.Message(e.detail.userData.data.id)
// ELEMENT.Message(e.detail.userData.data.id)
},
init() {
[map, scene] = this.$refs.wMap.initMap();
......@@ -159,7 +159,7 @@ export default {
type: "gltf",
units: "meters",
adjustment: {x: 0.5, y: 1, z: -0.6},
bbox: true,
bbox: false,
}, (model) => {
vehicleModelTypes[`car${key}`] = model;
this.vehicleModelsNum += 1
......@@ -355,7 +355,7 @@ export default {
// console.log('count...', window.tb.world.children.length)
},
callCar(msg) {
if (this.lastMsg.length && Math.abs(new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000 > 5) {
if (this.lastMsg.length && ((new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000) > 5) {
// if (this.lastMsg.length && new Date(this.lastMsg[0].dateTime).getTime() > new Date(msg[0].dateTime).getTime()) {
this.$refs.refVideo.startVideo()
this.$refs.right.startVideo()
......@@ -364,11 +364,8 @@ export default {
if (scene && this.vehicleModelsNum === 8) {
this.$store.commit('setCurrentTime', msg[0].dateTime)
if (this.msgStart) {
let realTimeStart = new Date(video_config.accidentViewStartTime).getTime()
let getTimeStart = new Date(msg[0].dateTime).getTime()
let videoTime = (getTimeStart - realTimeStart) / 1000
this.$refs.refVideo.startVideo(videoTime)
this.$refs.right.startVideo(videoTime)
this.$refs.refVideo.startVideo()
this.$refs.right.startVideo()
this.msgStart = false
}
let start = performance.now();
......
wj-data-vision/src/views/dangerousDriving/index.vue
View file @ 0c7fe56c
......@@ -102,7 +102,7 @@ export default {
input.select()
document.execCommand('copy')
document.body.removeChild(input)
ELEMENT.Message(e.detail.userData.data.id)
// ELEMENT.Message(e.detail.userData.data.id)
},
init() {
[map, scene] = this.$refs.wMap.initMap();
......@@ -148,7 +148,7 @@ export default {
type: "gltf",
units: "meters",
adjustment: {x: 0.5, y: 1, z: -0.6},
bbox: true,
bbox: false,
}, (model) => {
vehicleModelTypes[`car${key}`] = model;
this.vehicleModelsNum += 1;
......@@ -301,7 +301,7 @@ export default {
// }
},
callCar(msg) {
if (this.lastMsg.length && Math.abs(new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000 > 5) {
if (this.lastMsg.length && ((new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000) > 5) {
// if (this.lastMsg.length && new Date(this.lastMsg[0].dateTime).getTime() > new Date(msg[0].dateTime).getTime()) {
this.$refs.refVideo.startVideo()
this.$refs.rightDangerVideo.startVideo()
......@@ -310,11 +310,8 @@ export default {
if (scene && this.vehicleModelsNum === 8) {
this.$store.commit('setCurrentTime', msg[0].dateTime)
if (this.msgStart) {
let realTimeStart = new Date(video_config.dangerViewStartTime).getTime()
let getTimeStart = new Date(msg[0].dateTime).getTime()
let videoTime = (getTimeStart - realTimeStart) / 1000
this.$refs.refVideo.startVideo(videoTime)
this.$refs.rightDangerVideo.startVideo(videoTime)
this.$refs.refVideo.startVideo()
this.$refs.rightDangerVideo.startVideo()
this.msgStart = false
}
......
wj-data-vision/src/views/drones/index.vue
View file @ 0c7fe56c
......@@ -91,7 +91,7 @@ export default {
input.select()
document.execCommand('copy')
document.body.removeChild(input)
ELEMENT.Message(e.detail.userData.data.id)
// ELEMENT.Message(e.detail.userData.data.id)
},
init() {
[map, scene] = this.$refs.wMap.initMap();
......@@ -135,7 +135,7 @@ export default {
type: "gltf",
units: "meters",
adjustment: {x: 0.5, y: 1, z: -0.6},
bbox: true,
bbox: false,
}, (model) => {
vehicleModelTypes[`car${key}`] = model;
this.vehicleModelsNum += 1;
......@@ -271,7 +271,7 @@ export default {
}
},
callCar(msg) {
if (this.lastMsg.length && Math.abs(new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000 > 5) {
if (this.lastMsg.length && ((new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000) > 5) {
// if (this.lastMsg.length && new Date(this.lastMsg[0].dateTime).getTime() > new Date(msg[0].dateTime).getTime()) {
this.$refs.refVideo.startVideo()
}
......@@ -279,10 +279,7 @@ export default {
if (scene && this.vehicleModelsNum === 8) {
this.$store.commit('setCurrentTime', msg[0].dateTime)
if (this.msgStart) {
let realTimeStart = new Date(video_config.dronesViewStartTime).getTime()
let getTimeStart = new Date(msg[0].dateTime).getTime()
let videoTime = (getTimeStart - realTimeStart) / 1000
this.$refs.refVideo.startVideo(videoTime)
this.$refs.refVideo.startVideo()
// this.$refs.refVideo1.startVideo(videoTime)
this.msgStart = false
}
......
wj-data-vision/src/views/intersectionGroups/index.vue
View file @ 0c7fe56c
......@@ -101,7 +101,7 @@ export default {
lastMsg: [],
timeout: null,
msgStart: true,
dianyunUrl: video_config.intersectionGroupsVideoUrl,
types: [],
haveVideo: false,
timers: [],
......@@ -166,7 +166,7 @@ export default {
units: "meters",
scale: 0.8,
adjustment: {x: 0.5, y: 1, z: -0.6},
bbox: true,
bbox: false,
};
window.tb.loadObj(options, (model) => {
vehicleModelTypes[`car${key}`] = model;
......@@ -454,7 +454,7 @@ export default {
input.select()
document.execCommand('copy')
document.body.removeChild(input)
ELEMENT.Message(e.detail.userData.data.id)
// ELEMENT.Message(e.detail.userData.data.id)
this.changeVehicleDetail(this.selectVehicle)
},
// 根据处理后的数组新增-删除-更新模型
......@@ -510,7 +510,7 @@ export default {
// }
},
callCar(msg) {
if (this.lastMsg.length && Math.abs(new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000 > 5) {
if (this.lastMsg.length && ((new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000) > 5) {
console.log('index 重置 ',)
console.log('last 重置', this.lastMsg[0].dateTime)
console.log('current 重置', msg[0].dateTime)
......@@ -524,13 +524,10 @@ export default {
this.$store.commit('setCurrentTime', msg[0].dateTime)
// console.log('msg.length',msg.length)
if (this.msgStart) {
let realTimeStart = new Date(video_config.groupViewStartTime).getTime()
let getTimeStart = new Date(msg[0].dateTime).getTime()
let videoTime = (getTimeStart - realTimeStart) / 1000
for (let item of popups) {
item.$children[0].setTime(videoTime)
item.$children[0].setTime()
}
this.$refs.groupViewPointCamera.setTime(videoTime)
this.$refs.groupViewPointCamera.setTime()
this.msgStart = false
}
let start = performance.now();
......
wj-data-vision/src/views/intersectionGroups/messageBoxes.vue
View file @ 0c7fe56c
......@@ -171,6 +171,7 @@ export default {
components: {msgCard},
data() {
return {
flag: 0,
eventTypeUnitMap: {
11: '人',
16: '辆',
......@@ -291,7 +292,7 @@ export default {
this.getFiveIndexes()
let timer = setInterval(() => {
this.getFiveIndexes()
}, 1000 * 60)
}, 1000)
this.timers.push(timer)
// 冲突点监测
// pedNonAnalysis().then((res) => {
......@@ -339,6 +340,20 @@ export default {
getOverDatas().then(res => {
console.log('5指标', res.content)
this.overDatas = res.content
// if (this.flag === 360) {
// this.flag = 0
// }
// if (this.flag % 60 !== 1) {
// delete res.content.maxQueueLength
// delete res.content.maxStopNumber
// delete res.content.maxTravelTime
// }
// console.log('ressss', this.flag, res.content)
// for (let key in res.content) {
// this.overDatas[key] = res.content[key]
// }
// this.flag += 1
})
},
tabsHandleClick(tab) {
......
wj-data-vision/src/views/mobileBaseStation/index.vue
View file @ 0c7fe56c
......@@ -93,7 +93,7 @@ export default {
input.select()
document.execCommand('copy')
document.body.removeChild(input)
ELEMENT.Message(e.detail.userData.data.id)
// ELEMENT.Message(e.detail.userData.data.id)
},
init() {
[map, scene] = this.$refs.wMap.initMap();
......@@ -161,7 +161,7 @@ export default {
type: "gltf",
units: "meters",
adjustment: {x: 0.5, y: 1, z: -0.6},
bbox: true,
bbox: false,
}, (model) => {
vehicleModelTypes[`car${key}`] = model;
this.vehicleModelsNum += 1;
......@@ -298,7 +298,7 @@ export default {
}
},
callCar(msg) {
if (this.lastMsg.length && Math.abs(new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000 > 5) {
if (this.lastMsg.length && ((new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000) > 5) {
// if (this.lastMsg.length && new Date(this.lastMsg[0].dateTime).getTime() > new Date(msg[0].dateTime).getTime()) {
this.$refs.refVideoL.startVideo()
this.$refs.refVideoR.startVideo()
......@@ -307,11 +307,8 @@ export default {
if (scene && this.vehicleModelsNum === 8) {
this.$store.commit('setCurrentTime', msg[0].dateTime)
if (this.msgStart) {
let realTimeStart = new Date(video_config.mobileViewStartTime).getTime()
let getTimeStart = new Date(msg[0].dateTime).getTime()
let videoTime = (getTimeStart - realTimeStart) / 1000
this.$refs.refVideoL.startVideo(videoTime)
this.$refs.refVideoR.startVideo(videoTime)
this.$refs.refVideoL.startVideo()
this.$refs.refVideoR.startVideo()
this.msgStart = false
}
let start = performance.now();
......
wj-data-vision/src/views/phaseAirPlay/index.vue
View file @ 0c7fe56c
......@@ -35,7 +35,7 @@ import dict from "../../config/holo/dictionary";
import wsSource from "../../config/holo/wsSource";
import {initWs} from "../../config/holo/websocket";
import * as l7Tools from "../../utils/l7Tools";
import {getLinesByCross} from "../../dao/api";
// import {getLinesByCross} from "../../dao/api";
let map,
scene,
......@@ -78,7 +78,7 @@ export default {
bounds: '',
crossLineInfo: false,
licenseState: false,
lastMsg:[],
lastMsg: [],
};
},
watch: {},
......@@ -100,7 +100,7 @@ export default {
input.select()
document.execCommand('copy')
document.body.removeChild(input)
ELEMENT.Message(e.detail.userData.data.id)
// ELEMENT.Message(e.detail.userData.data.id)
},
init() {
[map, scene] = this.$refs.wMap.initMap();
......@@ -149,7 +149,7 @@ export default {
type: "gltf",
units: "meters",
adjustment: {x: 0.5, y: 1, z: -0.6},
bbox: true,
bbox: false,
}, (model) => {
vehicleModelTypes[`car${key}`] = model;
this.vehicleModelsNum += 1;
......@@ -453,7 +453,7 @@ export default {
// }
},
callCar(msg) {
if (this.lastMsg.length && Math.abs(new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000 > 5) {
if (this.lastMsg.length && ((new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000) > 5) {
// if (this.lastMsg.length && new Date(this.lastMsg[0].dateTime).getTime() > new Date(msg[0].dateTime).getTime()) {
this.$refs.refVideo.startVideo()
}
......@@ -461,10 +461,10 @@ export default {
if (scene && this.vehicleModelsNum === 8) {
this.$store.commit('setCurrentTime', msg[0].dateTime)
if (this.msgStart) {
let realTimeStart = new Date(video_config.phaseViewStartTime).getTime()
let getTimeStart = new Date(msg[0].dateTime).getTime()
let videoTime = (getTimeStart - realTimeStart) / 1000
this.$refs.refVideo.startVideo(videoTime)
// let realTimeStart = new Date(video_config.phaseViewStartTime).getTime()
// let getTimeStart = new Date(msg[0].dateTime).getTime()
// let videoTime = (getTimeStart - realTimeStart) / 1000
this.$refs.refVideo.startVideo()
this.msgStart = false
}
let start = performance.now();
......
wj-data-vision/src/views/phaseAirPlay/left/index.vue
View file @ 0c7fe56c
......@@ -299,7 +299,7 @@ export default {
.value-image {
width: 491px;
height: 373px;
background-image: url("../../../assets/images/sc/kfpic.png");
background-image: url("../../../assets/images/sc/kf.png");
background-size: 100% 100%;
border: 1px solid #0d7fd7;
}
......
wj-data-vision/src/views/phaseAirPlay/right/index.vue
View file @ 0c7fe56c
......@@ -4,6 +4,7 @@
<div class="cardInner">
<div class="comp">
<cross-control crossId="12F6L08J630"/>
<!-- <cross-control crossId="12F6S08J7P0"/>-->
</div>
<!-- :span-method="objectSpanMethod"-->
<el-table
......
wj-data-vision/src/views/slowTraffic/index.vue
View file @ 0c7fe56c
......@@ -102,7 +102,7 @@ export default {
input.select()
document.execCommand('copy')
document.body.removeChild(input)
ELEMENT.Message(e.detail.userData.data.id)
// ELEMENT.Message(e.detail.userData.data.id)
},
getCrossCamerasAndPolygons() {
getPasserbyPolygon().then(res => {
......@@ -150,10 +150,10 @@ export default {
this.timeout = setTimeout(() => {
this.initWebS()
}, 5000)
this.getCrossCamerasAndPolygons()
setInterval(() => {
this.getCrossCamerasAndPolygons()
}, 1000)
// this.getCrossCamerasAndPolygons()
// setInterval(() => {
// this.getCrossCamerasAndPolygons()
// }, 1000)
map.addControl(new mapboxgl.NavigationControl({showZoom: false}), 'top-right');
});
scene.on("zoomend", (e) => {
......@@ -184,7 +184,7 @@ export default {
type: "gltf",
units: "meters",
adjustment: {x: 0.5, y: 1, z: -0.6},
bbox: true,
bbox: false,
}, (model) => {
vehicleModelTypes[`car${key}`] = model;
this.vehicleModelsNum += 1;
......@@ -329,7 +329,7 @@ export default {
// }
},
callCar(msg) {
if (this.lastMsg.length && Math.abs(new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000 > 5) {
if (this.lastMsg.length && ((new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000) > 5) {
// if (this.lastMsg.length && new Date(this.lastMsg[0].dateTime).getTime() > new Date(msg[0].dateTime).getTime()) {
this.$refs.refVideo.startVideo()
}
......@@ -337,10 +337,10 @@ export default {
if (scene && this.vehicleModelsNum === 8) {
this.$store.commit('setCurrentTime', msg[0].dateTime)
if (this.msgStart) {
let realTimeStart = new Date(video_config.slowViewStartTime).getTime()
let getTimeStart = new Date(msg[0].dateTime).getTime()
let videoTime = (getTimeStart - realTimeStart) / 1000
this.$refs.refVideo.startVideo(videoTime)
// let realTimeStart = new Date(video_config.slowViewStartTime).getTime()
// let getTimeStart = new Date(msg[0].dateTime).getTime()
// let videoTime = (getTimeStart - realTimeStart) / 1000
this.$refs.refVideo.startVideo()
this.msgStart = false
}
let start = performance.now();
......
wj-data-vision/src/views/straightLeftConflict/index.vue
View file @ 0c7fe56c
......@@ -36,7 +36,7 @@ import wsSource from "../../config/holo/wsSource";
import {initWs} from "../../config/holo/websocket";
import * as l7Tools from "../../utils/l7Tools";
import conflictDetail from "./mapPopup/conflictDetail.vue";
import {getLinesByCross} from "../../dao/api";
// import {getLinesByCross} from "../../dao/api";
const ConflictDetail = Vue.extend(conflictDetail)
......@@ -98,7 +98,7 @@ export default {
input.select()
document.execCommand('copy')
document.body.removeChild(input)
ELEMENT.Message(e.detail.userData.data.id)
// ELEMENT.Message(e.detail.userData.data.id)
},
init() {
[map, scene] = this.$refs.wMap.initMap();
......@@ -145,7 +145,7 @@ export default {
type: "gltf",
units: "meters",
adjustment: {x: 0.5, y: 1, z: -0.6},
bbox: true,
bbox: false,
}, (model) => {
vehicleModelTypes[`car${key}`] = model;
this.vehicleModelsNum += 1;
......@@ -437,7 +437,7 @@ export default {
this.licenseState = !this.licenseState
},
callCar(msg) {
if (this.lastMsg.length && Math.abs(new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000 > 5) {
if (this.lastMsg.length && ((new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000) > 5) {
// if (this.lastMsg.length && new Date(this.lastMsg[0].dateTime).getTime() > new Date(msg[0].dateTime).getTime()) {
this.$refs.refVideo.startVideo()
}
......@@ -445,10 +445,10 @@ export default {
if (scene && this.vehicleModelsNum === 8) {
this.$store.commit('setCurrentTime', msg[0].dateTime)
if (this.msgStart) {
let realTimeStart = new Date(video_config.SLConflictViewStartTime).getTime()
let getTimeStart = new Date(msg[0].dateTime).getTime()
let videoTime = (getTimeStart - realTimeStart) / 1000
this.$refs.refVideo.startVideo(videoTime)
// let realTimeStart = new Date(video_config.SLConflictViewStartTime).getTime()
// let getTimeStart = new Date(msg[0].dateTime).getTime()
// let videoTime = (getTimeStart - realTimeStart) / 1000
this.$refs.refVideo.startVideo()
this.msgStart = false
}
let start = performance.now();
......
wj-data-vision/src/views/straightLeftConflict/left/index.vue
View file @ 0c7fe56c
......@@ -314,7 +314,7 @@ export default {
.value-image {
width: 491px;
height: 373px;
background-image: url("../../../assets/images/sc/ctpic.png");
background-image: url("../../../assets/images/sc/zz.png");
background-size: 100% 100%;
border: 1px solid #0d7fd7;
}
......
wj-data-vision/src/views/straightLeftConflict/right/index.vue
View file @ 0c7fe56c
......@@ -4,6 +4,8 @@
<div class="cardInner">
<div class="comp">
<cross-control crossId="12F6S08J8T0"/>
<!-- <cross-control crossId="12F6S08J7P0"/>-->
</div>
<el-table
:header-cell-style="{backgroundColor:'rgba(1, 43, 83, 1)',color:'rgba(217, 237, 255, 1)'}"
......
wj-manage-web/public/config.js
View file @ 0c7fe56c
......@@ -9,9 +9,7 @@ const map_config = {
MAP_STYLE_XL: 'http://192.168.2.78:9000/style-changsha.json', // 高精带路口箭头
RASTER_ROAD: 'http://192.168.2.78:9000/tile?lid=traffic&get=map&cache=off&x={x}&y={y}&z={z}' // 路况
}
const api_config = {
CROSS_STOP_LINE: '/develop/sgw/dbInterface/zh_suzhou_18q3/hd_506_rxhdzxx/multiTable/50FA40F152FF', // 获取停止线接口
}
const ws_config = {
BASE_URL: 'ws://192.168.2.78:17021/holows/subscribe', // 实时轨迹
CROSS_CONTROL: 'ws://192.168.2.78:9000/utc/signalStatus/' // 路口详情 - 灯态相位推送
......@@ -19,9 +17,11 @@ const ws_config = {
const cesium_config = {
center: [112.96364, 28.18825], // cesium中心点
zoomHeight: 1800, // cesium相机默认高度
baseMap: 'http://192.168.2.78:9000/styles/OSM%20OpenMapTiles/{z}/{x}/{y}@2x.png', // cesium标清底图
tile3dURL: 'http://192.168.2.78:9090/cs_3dtiles/tileset.json', // 3D tile 三维路口模型
}
const video_config = {
homeTimeStart:'2023-04-16 23:10:27:267',
}
......
wj-manage-web/src/components/Standard/cesiumMap.vue
View file @ 0c7fe56c
......@@ -44,6 +44,9 @@ export default {
// }),
terrainProvider: new Cesium.EllipsoidTerrainProvider({}), // 地形
});
viewer.scene.light = new Cesium.DirectionalLight({
direction: new Cesium.Cartesian3(0.354925, -0.890918, -0.283358)
})
// tileset三维场景
const tileset = new Cesium.Cesium3DTileset({
url: cesium_config.tile3dURL,
......
wj-manage-web/src/config/holo/websocket.js
View file @ 0c7fe56c
//
// let socket
// // readyState: 0-正在连接 1-已经连接 2-连接正在关闭 3-已关闭或没连接成功
// function onOpen(e, data) {
// console.log(e,data)
// console.log('open && send ...', data.name)
// socket.send(data.sendData)
// }
//
// function onError(e, data) {
// console.log('ws error...', e, data)
// }
//
// function onClose(e, data) {
// console.log('ws close...', e, data)
// // setTimeout(() => {
// // initWs(data)
// // }, 5000)
// }
//
// export function initWs(data) {
// if (typeof WebSocket === undefined) {
// console.error('您的浏览器不支持socket')
// } else {
// // socket = new WebSocket(data.url)
// socket = new ReconnectingWebSocket(data.url)
// // 监听socket连接open
// socket.onopen = (e) => onOpen(e, data)
// // 监听socket错误信息
// socket.onerror = (e) => onError(e, data)
// // 断开连接
// socket.onclose = (e) => onClose(e, data)
// return {
// name: data.name,
// url: data.url,
// status: data.status,
// ws: socket,
// }
// }
// }
let sockets = []
let socket
// readyState: 0-正在连接 1-已经连接 2-连接正在关闭 3-已关闭或没连接成功
function onOpen(e, data) {
console.log(e,data)
console.log('open && send ...', data.name)
socket.send(data.sendData)
for (let it of sockets) {
if (it.name === data.name && it.ws.readyState === 1) {
it.ws.send(data.sendData)
}
}
}
function onError(e, data) {
......@@ -13,28 +58,25 @@ function onError(e, data) {
function onClose(e, data) {
console.log('ws close...', e, data)
// setTimeout(() => {
// initWs(data)
// }, 5000)
}
export function initWs(data) {
if (typeof WebSocket === undefined) {
console.error('您的浏览器不支持socket')
} else {
// socket = new WebSocket(data.url)
socket = new ReconnectingWebSocket(data.url)
let currentSocket = new ReconnectingWebSocket(data.url)
// 监听socket连接open
socket.onopen = (e) => onOpen(e, data)
currentSocket.onopen = (e) => onOpen(e, data)
// 监听socket错误信息
socket.onerror = (e) => onError(e, data)
currentSocket.onerror = (e) => onError(e, data)
// 断开连接
socket.onclose = (e) => onClose(e, data)
currentSocket.onclose = (e) => onClose(e, data)
sockets.push({
name: data.name, ws: currentSocket,
})
return {
name: data.name,
url: data.url,
status: data.status,
ws: socket,
name: data.name, url: data.url, status: data.status, ws: currentSocket,
}
}
}
wj-manage-web/src/dao/situation.js
View file @ 0c7fe56c
......@@ -2,6 +2,8 @@ import fetch from '@/utils/fetch'
export const crossInfo = () => fetch('/holo/base-cross-info/list', {}, 'GET')
// 顶部轮询5指标
export const getOverDatas = () => fetch('/holo/area-index-analysis/realtime', {}, 'GET')
export const eventInfo = (data) => fetch('/holo/event-info/list', data, 'GET')
......@@ -59,4 +61,4 @@ export const equip_signal = () => fetch('/holo/device-signal/list', {}, 'GET')
export const equip_weather = () => fetch('/holo/device-weather/list', {}, 'GET')
// 路口停止线获取
export const getLinesByCross = (params) => fetch(api_config.CROSS_STOP_LINE, params, 'POST', {})
\ No newline at end of file
// export const getLinesByCross = (params) => fetch(api_config.CROSS_STOP_LINE, params, 'POST', {})
\ No newline at end of file
wj-manage-web/src/views/analysis/reportCross.vue
View file @ 0c7fe56c
......@@ -47,7 +47,7 @@
</el-form-item>
</el-form>
<div class="analysis-detail">
<wMap :mapId="'crossReport-map'" ref="wMap" />
<wMap :mapId="'crossReport-map'" ref="wMap"/>
<div class="detail-options">
<div class="check-all">
<div class="check-all-title-icon"></div>
......@@ -60,10 +60,12 @@
></el-checkbox>
<div class="buttons">
<el-button type="primary" @click="showPreview = true"
>报告预览</el-button
>报告预览
</el-button
>
<el-button type="success" @click="downloadFile"
>报告生成</el-button
>报告生成
</el-button
>
</div>
</div>
......@@ -90,7 +92,8 @@
交通运行分析
<el-form-item>
<el-checkbox v-model="specialCheck.lk" style="margin-right: 5px"
>路口状态</el-checkbox
>路口状态
</el-checkbox
>
<el-select
multiple
......@@ -108,7 +111,8 @@
</el-option>
</el-select>
<el-checkbox v-model="specialCheck.jt" style="margin-right: 5px"
>交通流量</el-checkbox
>交通流量
</el-checkbox
>
<el-select
multiple
......@@ -215,7 +219,8 @@
style="width: 200px"
type="primary"
@click="downloadFile"
>批量下载</el-button
>批量下载
</el-button
>
</div>
<!-- <pigination
......@@ -234,13 +239,14 @@
<div class="header">
报告预览
<el-button class="back" type="primary" @click="showPreview = false"
>返回</el-button
>返回
</el-button
>
</div>
<div class="content">
<img
class="pdf-image"
v-for="item of 6"
v-for="item of [1,2,3,4,5,6]"
:key="item"
:src="require(`../../assets/images/holo/pdf/${item}.jpg`)"
/>
......@@ -249,7 +255,8 @@
style="margin-top: 15px"
type="primary"
@click="downloadFile"
>下载报告</el-button
>下载报告
</el-button
>
</div>
</div>
......@@ -262,25 +269,30 @@ import mapAssets from "../../config/holo/mapAssets";
let crossLayer = null,
crossDetailLayer = null;
function hide(layer) {
let arr = Array.isArray(layer) ? layer : [layer];
for (let item of arr) {
item && item.hide();
}
}
function show(layer) {
let arr = Array.isArray(layer) ? layer : [layer];
for (let item of arr) {
item && !item.isVisible() && item.show();
}
}
import wMap from "../../components/Standard/map/index.vue";
let map, scene, mapMethods;
import * as l7Tools from "../situation/l7Tools";
import { crossInfo, eventInfo } from "../../dao/situation";
import { Scene, PointLayer, RasterLayer, Popup } from "@antv/l7";
import { Mapbox } from "@antv/l7-maps";
import {crossInfo, eventInfo} from "../../dao/situation";
import {Scene, PointLayer, RasterLayer, Popup} from "@antv/l7";
import {Mapbox} from "@antv/l7-maps";
import Pigination from "../../components/Standard/pigination.vue";
export default {
name: "reportCross",
components: {
......@@ -338,7 +350,7 @@ export default {
total: 1,
pageNum: 1,
pageSize: 10,
list: [{ name: "路口交通分析报告-0211.pdf", type: "pdf" }],
list: [{name: "路口交通分析报告-样例数据20230417.pdf", type: "pdf"}],
},
{
type: "月报",
......@@ -368,7 +380,7 @@ export default {
analysisTime: "",
compareTime: "",
timeType: "",
formInline: { user: "", region: "" },
formInline: {user: "", region: ""},
analysisForm: {
road: [],
run: [],
......@@ -422,11 +434,11 @@ export default {
},
methods: {
selectCrossChange(e) {
map.flyTo({ center: [e.split(",")[0], e.split(",")[1]] });
map.flyTo({center: [e.split(",")[0], e.split(",")[1]]});
for (let item of this.allCrossData) {
console.log(item, e);
if (item.location == e) {
this.crossClick({ feature: item });
this.crossClick({feature: item});
}
}
console.log(e, 1);
......@@ -434,8 +446,10 @@ export default {
downloadFile() {
let a = document.createElement("a");
a.style = "display: none"; // 创建一个隐藏的a标签
a.download = "路口交通分析报告-0211.pdf";
a.href = "pdf/路口交通分析报告-0211.pdf";
// a.download = "路口交通分析报告-0211.pdf";
// a.href = "pdf/路口交通分析报告-0211.pdf";
a.download = "路口交通分析报告-样例数据20230417.pdf";
a.href = "pdf/路口交通分析报告-样例数据20230417.pdf";
document.body.appendChild(a);
a.click(); // 触发a标签的click事件
document.body.removeChild(a);
......@@ -461,7 +475,8 @@ export default {
}
}
},
getList() {},
getList() {
},
initMap() {
crossLayer = null;
crossDetailLayer = null;
......@@ -525,10 +540,11 @@ export default {
</script>
<style lang='less' scoped>
.pdf-image{
.pdf-image {
width: 100%;
}
.form-item-icon{
.form-item-icon {
display: inline-block;
width: 10px;
height: 10px;
......@@ -536,62 +552,73 @@ export default {
rotate: 45deg;
margin-right: 5px;
}
.nodata{
.nodata {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
::v-deep .sp1{
width:250px
::v-deep .sp1 {
width: 250px
}
::v-deep .sp2{
width:250px
::v-deep .sp2 {
width: 250px
}
::v-deep .jtSelect{
::v-deep .jtSelect {
// position: absolute;
// top: 0;
// left: 12%;
margin-right: 25px;
width: 180px;
}
::v-deep .lkSelect{
::v-deep .lkSelect {
margin-right: 25px;
// position: absolute;
// top: 0;
// left: 38%;
width: 180px;
}
.reports-cont{
.reports-cont {
width: 100%;
height: 100%;
background-color: #04122d;
border: 1px solid #0f1a31;
padding: 12px;
.files-inner{
.files-inner {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
overflow-y: auto;
}
.files-cont{
.files-cont {
width: 114px;
height: 80px;
cursor:pointer;
cursor: pointer;
// border: 1px solid red;
margin: 4px 8px;
.icon{
.icon {
height: 50px;
display: flex;
align-items: center;
justify-content: center;
img{
img {
// width: 100%;
height: 70%;
}
}
.name{
.name {
text-align: center;
padding-top: 5px;
white-space: nowrap;
......@@ -599,15 +626,18 @@ export default {
text-overflow: ellipsis;
}
}
.files-cont:hover{
.files-cont:hover {
background: #042d5a;
}
}
::v-deep .el-button{
::v-deep .el-button {
height: 30px;
line-height: 5px;
}
.header{
.header {
height: 40px;
line-height: 40px;
background: url('../../assets/images/holo/title.png');
......@@ -617,26 +647,30 @@ export default {
font-weight: bold;
padding-left: 16px;
position: relative;
.back{
.back {
position: absolute;
right: 80px;
top: 4px;
}
}
.content{
.content {
height: calc(100% - 40px);
// height: calc(100% - 40px);
padding: 16px 16px 0 16px;
}
.main{
.main {
z-index: 4;
color: white;
background: linear-gradient(#041432, #04040e,#041028,#040817);
background: linear-gradient(#041432, #04040e, #041028, #040817);
// padding: 16px;
height: 100%;
width:100%;
width: 100%;
position: relative;
.preview{
.preview {
position: absolute;
width: 100%;
height: 100%;
......@@ -644,41 +678,49 @@ export default {
top: 0;
z-index: 8;
background: #040d1c;
.content{
.content {
overflow-y: scroll;
padding: 50px 300px;
}
}
.report-config{
.report-config {
padding: 8px 16px 0 16px;
height: 60%;
.content{
.analysis-detail{
.content {
.analysis-detail {
padding-top: 5px;
display: flex;
height: 86%;
overflow: hidden;
.map_main{
.map_main {
width: 35%;
height: 100%;
}
.detail-options{
.detail-options {
width: 65%;
padding: 16px ;
padding: 16px;
overflow-y: auto;
.check-all{
.check-all {
height: 30px;
padding-left: 15px;
background: linear-gradient(90deg, #021e3c,#02172f,transparent);
background: linear-gradient(90deg, #021e3c, #02172f, transparent);
line-height: 30px;
display: flex;
align-items: center;
margin-bottom: 8px;
position: relative;
.buttons{
.buttons {
position: absolute;
right: 0;
.download{
.download {
display: inline-block;
background: greenyellow;
height: 30px;
......@@ -690,18 +732,21 @@ export default {
margin-left: 15px;
border-radius: 4px;
}
.download:hover{
background: rgba(173, 255, 47,0.8);
.download:hover {
background: rgba(173, 255, 47, 0.8);
}
}
.check-all-title-icon{
.check-all-title-icon {
width: 12px;
height: 12px;
background: #0752f9;
rotate: 45deg;
margin-right: -3px;
}
.check-all-title-icon1{
.check-all-title-icon1 {
width: 6px;
height: 6px;
background: #95b6ff;
......@@ -713,13 +758,16 @@ export default {
}
}
}
.his-report{
.his-report {
padding: 8px 16px 0 16px;
height: 40%;
.content{
.content {
width: 100%;
}
.download{
.download {
position: absolute;
text-align: center;
left: 50%;
......@@ -728,102 +776,127 @@ export default {
}
}
}
.mypigination{
.mypigination {
position: absolute;
bottom: 16px;
right:16px;
::v-deep .btn-prev{
background:#113e72
right: 16px;
::v-deep .btn-prev {
background: #113e72
}
::v-deep .btn-next{
background:#113e72
::v-deep .btn-next {
background: #113e72
}
::v-deep .el-pager li.active{
::v-deep .el-pager li.active {
background-color: #093f6d !important;
}
}
::v-deep .el-form-item__label{
color: white;
::v-deep .el-form-item__label {
color: white;
}
::v-deep .el-checkbox{
::v-deep .el-checkbox {
color: white;
margin-bottom: 0;
}
::v-deep .el-checkbox__inner{
::v-deep .el-checkbox__inner {
background-color: #000e27;
border: 1px solid #BDCDE0;
}
.demo-form-inline{
.demo-form-inline {
height: 12%;
::v-deep .el-form-item {
::v-deep .el-form-item {
margin-bottom: 6px;
}
::v-deep .el-range-input{
}
::v-deep .el-range-input {
background-color: transparent;
}
}
::v-deep .el-input__inner{
background-color:#010c22;
::v-deep .el-input__inner {
background-color: #010c22;
border: 1px solid #08325C
}
::v-deep .el-form-item__label{
}
::v-deep .el-form-item__label {
padding: 0 0 0 0;
line-height: 30px;
margin-right: 15px;
}
::v-deep .el-radio__label{
}
::v-deep .el-radio__label {
color: white;
}
}
}
.detail-form{
::v-deep .el-input__inner{
.detail-form {
::v-deep .el-input__inner {
background-color: transparent;
}
padding-left: 20px;
::v-deep .el-form-item{
::v-deep .el-form-item {
margin-bottom: 0;
}
::v-deep .el-form-item__label{
::v-deep .el-form-item__label {
line-height: 20px;
padding: 0 0 0 0;
margin-bottom: 0;
}
::v-deep .el-form-item__content{
::v-deep .el-form-item__content {
padding-left: 20px;
}
}
.mypigination{
.mypigination {
background: transparent;
color: white;
::v-deep .el-pagination__total{
::v-deep .el-pagination__total {
color: white;
}
}
.mytab{
::v-deep .el-tabs__item{
.mytab {
::v-deep .el-tabs__item {
height: 28px;
line-height: 28px;
padding: 0 40px !important;
color: #c0c4cc;
}
::v-deep .el-tabs__active-bar{
::v-deep .el-tabs__active-bar {
background-color: transparent;
}
::v-deep .el-tabs__item.is-active{
::v-deep .el-tabs__item.is-active {
background-color: #044375;
color: white;
border-bottom: transparent;
}
::v-deep .el-tabs--card>.el-tabs__header{
::v-deep .el-tabs--card > .el-tabs__header {
border-bottom: 1px solid #033262;
}
::v-deep .el-tabs__nav{
::v-deep .el-tabs__nav {
border: 1px solid #033262;
}
::v-deep .el-tabs__nav-wrap::after {
position: static !important;
}
......
wj-manage-web/src/views/efficiency/index.vue
View file @ 0c7fe56c
......@@ -799,7 +799,7 @@ export default {
border: 1px solid #04396f;
z-index: 2;
height: calc(100% - 45px);
position: absolute;
position: absolute !important;
left: 0;
top: 42px;
width: 40%;
......
wj-manage-web/src/views/situation/MapPopup/equipmentPopup.vue
View file @ 0c7fe56c
......@@ -3,7 +3,9 @@
<div v-if="model.equip_type === 'camera'" class="equip_camera">
<div class="header">{{ model.installLocation || '暂无安装地址信息' }}</div>
<div class="main">
<camera-video :auto-play="true" style="height: 100%" :video-data="model.videoUrl"/>
<!-- <camera-video :auto-play="true" style="height: 100%" :video-data="model.videoUrl"/>-->
<local-camera1 style="height: 100%; width: 100%" :border="false" :showClose="false" v-if="videoURL" ref="videoItem"
class="videoItem" :video-data="videoURL"/>
</div>
</div>
<div v-else-if="model.equip_type === 'weather'" class="equip_weather">
......@@ -40,18 +42,37 @@
<script>
import dict from '../../../config/holo/dictionary'
import CameraVideo from "../../../components/Standard/cameraVideo.vue";
import LocalCamera1 from "../localCamera1.vue";
export default {
name: "passerbyPopup",
props: ["model"],
components: {CameraVideo},
components: {LocalCamera1, CameraVideo},
data() {
return {
dict
dict,
videoURL: null,
};
},
mounted() {
console.log('equp', this.model)
if (this.model.equip_type === 'camera') {
if (this.model.crossId === '12F6S08J7P0') {
this.videoURL = 'lkqz_2'
}
if (this.model.crossId === '12F6S08J8T0') {
this.videoURL = 'lkqz_1'
}
if (this.model.crossId === '12F6L08J630') {
this.videoURL = 'lkqz_3'
}
this.$nextTick(() => {
this.$refs.videoItem.setTime()
})
} else {
this.videoURL = null
}
},
methods: {},
computed: {},
......@@ -128,7 +149,7 @@ export default {
.equip_camera {
width: 448px;
height: 328px;
height: 300px;
background-image: url("../../../assets/images/holo/videobackgorund.png");
background-repeat: no-repeat;
background-size: 100% 100%;
......
wj-manage-web/src/views/situation/index.vue
View file @ 0c7fe56c
......@@ -15,11 +15,14 @@
:class="[{ generalSwitch: boxesShow }, { rightSwitch: !boxesShow }]"
/>
<!--视频播放组件-->
<video-list ref="videoList"
v-if="videoListData && videoListData.length"
@delVideo="deleteVideo"
:videoListData="videoListData"
/>
<!-- <video-list ref="videoList"-->
<!-- v-if="videoListData && videoListData.length"-->
<!-- @delVideo="deleteVideo"-->
<!-- :videoListData="videoListData"-->
<!-- />-->
<local-camera1 :showClose="true" :border="true" @closeM="localVideoShow = false" v-if="localVideoShow"
ref="videoItem"
class="videoItem" :video-data="crossVideoData"/>
<!--路口详情-->
<cross-detail
v-if="dialogVisible.crossDetail"
......@@ -62,7 +65,6 @@ import {
equip_weather,
equip_camera,
equip_radar,
getLinesByCross
} from "../../dao/situation";
import * as l7Tools from "./l7Tools";
......@@ -71,6 +73,7 @@ import SituationTime from "./situationTime.vue";
import equipmentPopup from "./MapPopup/equipmentPopup.vue";
import eventPopup from './MapPopup/eventPopup.vue'
import vehicleDetail from "./MapPopup/vehicleDetail.vue";
import LocalCamera1 from "./localCamera1.vue";
const VehiclePopup = Vue.extend(vehicleDetail)
const EquipmentPopup = Vue.extend(equipmentPopup);
......@@ -93,6 +96,7 @@ function show(layer) {
let {keys, values, entries} = Object;
let map,
scenePopup = null,
popups = [],
vehicleDetailPopup = null,
scene,
......@@ -124,6 +128,7 @@ let map,
};
export default {
components: {
LocalCamera1,
SituationTime,
wMap,
MessageBoxes,
......@@ -137,6 +142,9 @@ export default {
computed: {},
data() {
return {
currentWsTime: null,
localVideoShow: false,
crossVideoData: '',
bounds: '',
situationTimeVal: '',
rr: require('../../assets/images/holo/rr.png'),
......@@ -166,6 +174,7 @@ export default {
waitingShow: false,
lightShow: false,
crossData: '',
lastMsg: []
};
},
watch: {
......@@ -205,21 +214,54 @@ export default {
// 路口点击 - zoomin - 展示视频流
firstCrossClick(e) {
this.$refs.videoList?.destroyAll()
this.localVideoShow = false
this.loading = true
setTimeout(() => {
this.loading = false
console.log('e.feature.name', e.feature.name)
this.videoListData = []
this.boxesShow = false;
map.flyTo({zoom: 19, center: e.lngLat});
setTimeout(() => {
let timeout = 500;
if (e.feature.cameraList) {
for (let item of e.feature.cameraList) {
setTimeout(() => {
!this.videoListData.includes(item) && this.videoListData.push(item);
}, timeout);
timeout += 1500;
}
}
let flag = false
map.flyTo({
zoom: 19, center: e.feature.coordinates
});
console.log('cross click', e)
if (e.feature.name === '湘江中路与人民西路交叉口') {
this.crossVideoData = 'lkqz_1'
flag = true
this.localVideoShow = true
}
if (e.feature.name === '湘江中路与西湖路交叉口') {
this.crossVideoData = 'lkqz_2'
this.localVideoShow = true
flag = true
}
if (e.feature.name === '湘江中路与劳动西路交叉口') {
this.crossVideoData = 'lkqz_3'
this.localVideoShow = true
flag = true
}
console.log(this.currentWsTime)
if (flag) {
let chazhi = new Date(this.currentWsTime).getTime() - new Date(video_config.homeTimeStart).getTime()
this.$nextTick(() => {
this.$refs.videoItem.setTime(chazhi / 1000)
})
}
}, 800)
// setTimeout(() => {
// let timeout = 500;
// if (e.feature.cameraList) {
// for (let item of e.feature.cameraList) {
// setTimeout(() => {
// !this.videoListData.includes(item) && this.videoListData.push(item);
// }, timeout);
// timeout += 1500;
// }
// }
// })
},
refreshBounds() {
let bounds = map.getBounds();
......@@ -332,6 +374,9 @@ export default {
// console.log(map.getZoom())
this.refreshMap();
this.refreshBounds()
if (scene.getZoom() < 17) {
this.localVideoShow = false
}
});
scene.on('moveend', () => {
this.refreshBounds()
......@@ -551,16 +596,16 @@ export default {
popups = []
this.$nextTick(() => {
// console.log(type)
const popup = new Popup({offsets: [0, 30], closeButtonOffsets: [5, 7]})
scenePopup = new Popup({offsets: [0, 30], closeButtonOffsets: [5, 7]})
.setLngLat(e.feature.coordinates)
.setHTML('<div id="equipment_popup"></div>')
popup.on('close', () => {
scenePopup.on('close', () => {
for (let item of popups) {
item.$destroy()
}
popups = []
})
scene.addPopup(popup);
scene.addPopup(scenePopup);
let aa = new EquipmentPopup({
propsData: {
model: {equip_type: type, ...e.feature},
......@@ -619,6 +664,9 @@ export default {
map.setLayoutProperty('raster_road', 'visibility', 'none')
}
}
if (item.label !== 'fourth') {
if(scenePopup){scene.removePopup(scenePopup)}
}
// hide other layer
for (let key in layers) {
if (key !== item.label) {
......@@ -692,39 +740,26 @@ export default {
this.selectVehicle = e.detail.userData.data;
this.changeVehicleDetail(this.selectVehicle)
},
// 根据处理后的数组新增-删除-更新模型
addDelUpdateVehicleModels(allData) {
if (this.vehicleModelsNum === 21) {
for (let item of allData) {
// 新增
if (item.dill === "add") {
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
window.tb.add(model, item.id);
} else {
for (let i = 0; i < window.tb.world.children.length; i++) {
if (window.tb.world.children[i].userData.data.id === item.id) {
if (item.dill === 'del') {
window.tb.clear(item.id, true)
}
if (item.dill === 'com') {
this.setModel(window.tb.world.children[i], item, false);
}
}
}
}
callCar(msg) {
this.currentWsTime = msg[0].dateTime
// if (this.begin === 0) {
// this.$refs.videoItem.setTime()
// this.begin += 1
// if (this.begin > 1000) {
// this.begin = 1
// }
// }
if (this.lastMsg.length && ((new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000) > 5) {
console.log('index 重置 ',)
console.log('last 重置', this.lastMsg[0].dateTime)
console.log('current 重置', msg[0].dateTime)
if (this.$refs.videoItem) {
this.$refs.videoItem.setTime()
}
console.log('count...', window.tb.world.children.length)
}
},
callCar(msg) {
let start = performance.now();
this.lastMsg = msg
// 筛选可见区域
for (let i = 0; i < msg.length; i++) {
if (!msg[i].picLicense) {
......@@ -754,12 +789,7 @@ export default {
if (this.selectVehicle) {
this.selectVehicle = null;
}
if (window.tb) {
window.tb.clear()
this.lightShow = false
this.waitingShow = false
window.tb.world.visible = false;
}
this.hideTb()
let zoom = scene.getZoom()
if (zoom > 17) {
hide([layers.first.vehicle])
......@@ -773,8 +803,14 @@ export default {
}
}
}
let end = performance.now();
// console.log('cost is', `${end - start}ms`)
},
hideTb() {
if (window.tb) {
window.tb.clear()
this.lightShow = false
this.waitingShow = false
window.tb.world.visible = false;
}
},
addOrUpdateLicense(msg) {
if (!layers.first.license) {
......@@ -831,12 +867,57 @@ export default {
show(layers.first.vehiclePic)
}
},
// 比较websocket车辆前后两次数据差异
addDelUpdateVehicleModels(allData) {
if (this.vehicleModelsNum === 21) {
for (let item of allData) {
// 新增
if (item.dill === "add") {
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
this.setModel(model, item, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
window.tb.add(model, item.id);
} else {
for (let i = 0; i < window.tb.world.children.length; i++) {
if (window.tb.world.children[i].userData.data.id === item.id) {
if (item.dill === 'del') {
window.tb.clear(item.id, true)
}
if (item.dill === 'com') {
//车型变化
// if (window.tb.world.children[i].userData.data.originalType === item.originalType) {
// this.setModel(window.tb.world.children[i], item, true);
// } else {
// window.tb.clear(item.id, true)
// let model =
// vehicleModelTypes[`car${item.originalType}`].duplicate();
// this.setModel(model, item, true);
// model.addEventListener(
// "SelectedChange",
// this.onSelectedChangeVehicle,
// false
// );
// window.tb.add(model, item.id);
// }
this.setModel(window.tb.world.children[i], item, true);
}
}
}
}
}
// console.log('count...', window.tb.world.children.length)
}
},
diff(oldData, newData) {
// id 只在 newData 中存在且不在 oldData 中存在的即为 add
const add = newData.filter((e) => !oldData.find((c) => c.id === e.id));
// id 只在 oldData 中存在且不在 newData 中存在的即为 dele
const del = oldData.filter((e) => !newData.find((c) => c.id === e.id));
// common...
const com = newData.filter((e) => oldData.find((c) => c.id === e.id));
add.forEach((a) => (a.dill = "add"));
del.forEach((d) => (d.dill = "del"));
......@@ -1236,6 +1317,16 @@ export default {
</script>
<style lang='less' scoped>
.videoItem {
width: 320px;
height: 184px;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 8px;
z-index: 99;
}
#map {
position: absolute;
width: 100%;
......
wj-manage-web/src/views/situation/l7Tools.js
View file @ 0c7fe56c
......@@ -12,6 +12,7 @@ export function addVehiclePic(scene, msg) {
return `carColor${val}`
})
// .shape('carPic')
.size(3.5)
.style({
unit: 'meter', rotation: 0,
......
wj-manage-web/src/views/situation/localCamera1.vue 0 → 100644
View file @ 0c7fe56c
<template>
<div :class="['cameraVideo',border?'cameraVideoBorder':'']">
<div class="vCloseButton" v-show="showClose" @click="closeM">
<div class="el-icon-close"></div>
</div>
<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 v-if="videoData" muted width="100%" loop :class="[reverse?'reverse':'']"
class="videoControl" :id="videoData">
<source :src="url" type="video/mp4">
您的浏览器不支持 video 属性。
</video>
</div>
</template>
<script>
export default {
name: "localCamera1",
props: ["videoData", 'border', 'reverse','showClose'],
watch: {},
data() {
return {};
},
methods: {
setTime(time) {
this.$nextTick(() => {
let el = document.getElementById(this.videoData)
console.log('bofang...', time || 0)
if (time) {
el.currentTime = time
el.play()
} else {
console.log('视频重置。。。', new Date().getTime() / 1000)
el.currentTime = 0
el.play()
}
})
},
closeM() {
this.$emit('closeM')
}
},
computed: {
url() {
return `/cdn/video/${this.videoData}.mp4`
}
},
mounted() {
this.$nextTick(() => {
})
},
beforeDestroy() {
console.log("video beforeDestroy");
},
};
</script>
<style lang="less" scoped>
.reverse {
rotate: 180deg;
}
.cameraVideo {
position: relative;
.videoControl {
position: absolute;
width: 100%;
height: 100%;
//width: calc(100% - 5px);
//height: calc(100% - 5px);
padding: 1px;
}
}
.cameraVideoBorder {
border: 1px solid #022950;
}
.top-left {
position: absolute;
left: -2px;
top: -2px;
padding: 6px;
border-style: solid;
border-color: #1889f1;
border-width: 2px 0 0 2px;
}
.top-right {
position: absolute;
right: -2px;
top: -2px;
padding: 6px;
border-style: solid;
border-color: #1889f1;
border-width: 2px 2px 0 0;
}
.bottom-left {
position: absolute;
right: -2px;
bottom: -2px;
padding: 6px;
border-style: solid;
border-color: #1889f1;
border-width: 0 2px 2px 0;
}
.bottom-right {
position: absolute;
left: -2px;
bottom: -2px;
padding: 6px;
border-style: solid;
border-color: #1889f1;
border-width: 0 0 2px 2px;
}
.vCloseButton {
z-index: 9999;
background-color: rgba(13, 127, 215, 0.7);
position: absolute;
right: 4px;
top: 4px;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
cursor: pointer;
}
.vCloseButton:hover {
background-color: rgba(13, 127, 215, 0.9);
}
</style>
wj-manage-web/src/views/situation/messageBoxes.vue
View file @ 0c7fe56c
......@@ -13,12 +13,12 @@
<div class="title comm">实时车辆</div>
</div>
<div class="over_item">
<div class="number comm">{{ speed }} km/h</div>
<div class="number comm">{{ speed }}km/h</div>
<div class="title comm">平均速度</div>
</div>
<div class="over_item">
<div class="number comm">{{ crowd / 1000 }} km</div>
<div class="title comm">拥堵里程</div>
<div class="number comm">{{ maxTravelTime }}min</div>
<div class="title comm">最大行程时间</div>
</div>
</div>
<div class="left_box aside" :class="[{ hide_left: !show }]">
......@@ -166,7 +166,7 @@ import {
eventAnalysis,
areaRecent,
pedNonAnalysis,
eventAlarm,
eventAlarm, getOverDatas,
} from "../../dao/situation";
import {getFontSize} from "../../config/holo/fontSize.js";
import {Chart} from "highcharts-vue";
......@@ -216,7 +216,7 @@ export default {
fontSize: 12,
charts: {},
speed: "",
crowd: "",
maxTravelTime: "",
trafIndex: "",
realTimeNum: "",
timers: []
......@@ -289,6 +289,11 @@ export default {
},
mounted() {
// 区域指数 && 上侧指标
this.getOverDataTop()
let timer1 = setInterval(() => {
this.getOverDataTop()
}, 1000 * 60)
this.getIndexes()
let timer = setInterval(() => {
this.getIndexes()
......@@ -355,17 +360,26 @@ export default {
});
},
methods: {
getOverDataTop(){
getOverDatas().then((res) => {
console.log('111111111',res)
this.speed = res.content.avgTravelSpeed
this.trafIndex = res.content.trafficIndex
this.realTimeNum = res.content.inWayVehicleNum
this.maxTravelTime = res.content.maxTravelTime
})
},
getIndexes() {
areaList().then((res) => {
// console.log("区域指数", res);
this.speed =
res.content.timeList[res.content.timeList.length - 1].valList[2];
this.crowd =
res.content.timeList[res.content.timeList.length - 1].valList[4];
this.trafIndex =
res.content.timeList[res.content.timeList.length - 1].valList[0];
this.realTimeNum =
res.content.timeList[res.content.timeList.length - 1].valList[3];
// this.speed =
// res.content.timeList[res.content.timeList.length - 1].valList[2];
// this.crowd =
// res.content.timeList[res.content.timeList.length - 1].valList[4];
// this.trafIndex =
// res.content.timeList[res.content.timeList.length - 1].valList[0];
// this.realTimeNum =
// res.content.timeList[res.content.timeList.length - 1].valList[3];
this.$nextTick(() => {
this.regionalIndex(res.content);
for (let key in this.regionalIndexData) {
......
wj-manage-web/src/views/track/index.vue
View file @ 0c7fe56c
......@@ -319,6 +319,18 @@ export default {
// this.videoURL = 'http://10.102.1.180:80/live?app=demo&stream=mp4-133';
// this.$refs.cameraVideo.loadVideo()
this.playMultiVehicle(cars)
// 劳动西路
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(
112.962981,
28.182855
, 350),
orientation: {
heading: Cesium.Math.toRadians(0), // 旋转角度
pitch: Cesium.Math.toRadians(-90.0), // 相机方向
},
duration: 0.5
});
},
// 交通拥堵轨迹回溯
playFullTrack(data) {
......@@ -360,7 +372,7 @@ export default {
tArray.push({start: thisCarStart, stop: thisCarStop}) // 最后一段
}
}
console.log('tarray', tArray)
// console.log('tarray', tArray)
this.addEntityProperty({
viewer: viewer,
data: path,
......@@ -405,7 +417,7 @@ export default {
// 循环执行,即为2，到达终止时间，重新从起点时间开始
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
viewer.flyTo(viewer.entities, {duration: 0.5})
// viewer.flyTo(viewer.entities, {duration: 0.5})
this.switchTimeLine(true)
this.showProgress = true
},
......@@ -507,6 +519,7 @@ export default {
if (viewer.trackedEntity) {
let position = this.currentEntity.position.getValue(viewer.clock.currentTime)
let angle = this.currentEntity.angleProperty.getValue(viewer.clock.currentTime)
if (position && angle) {
let ellipsoid = viewer.scene.globe.ellipsoid
let cartographic = ellipsoid.cartesianToCartographic(position); // 笛卡尔坐标 => 经纬度 （弧度表示）
let lat = Cesium.Math.toDegrees(cartographic.latitude);
......@@ -520,6 +533,7 @@ export default {
}
});
}
}
// let position = this.currentEntity.position.getValue(viewer.clock.currentTime)
// let orientation = this.currentEntity.orientation.getValue(viewer.clock.currentTime)
// let hpr = Cesium.HeadingPitchRoll.fromQuaternion(orientation) // 四元组转 h p r
......@@ -753,8 +767,8 @@ export default {
// 车辆详情弹窗及更新
viewer.clock.onTick.addEventListener(() => {
if (viewer.clock.shouldAnimate) {
let position = this.currentEntity.position.getValue(viewer.clock.currentTime)
if (position) {
let ellipsoid = viewer.scene.globe.ellipsoid
let cartographic = ellipsoid.cartesianToCartographic(position); // 笛卡尔坐标 => 经纬度 （弧度表示）
let lat = Cesium.Math.toDegrees(cartographic.latitude);
......@@ -777,6 +791,7 @@ export default {
popup?.setOffset([-100, -180])
popup.setPosition(Cesium.Cartesian3.fromDegrees(lng, lat, 1.5))
}
}
} else {
this.playStatus = false
}
......
wj-manage-web/src/views/track/menuTrafficCrowd.vue
View file @ 0c7fe56c
<template>
<div element-loading-text="获取数据中，请稍后..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)" v-loading.fullscreen.lock="fullscreenLoading" class="track_tree" :class="[show?'l_show':'l_hidden']">
element-loading-background="rgba(0, 0, 0, 0.8)" v-loading.fullscreen.lock="fullscreenLoading" class="track_tree"
:class="[show?'l_show':'l_hidden']">
<msg-card class="msgCard" title="交通拥堵轨迹回溯">
<div class="top">
<div class="title-text">
......@@ -10,16 +11,16 @@
</div>
<el-form :rules="rules" ref="searchForm" class="search-form" label-position="right" label-width="90px"
:model="searchForm">
<!-- <el-form-item label="查询时段:" prop="name1">-->
<!-- <el-date-picker-->
<!-- value-format="yyyy-MM-dd hh:mm:ss"-->
<!-- v-model="searchForm.name1"-->
<!-- type="datetimerange"-->
<!-- range-separator="→"-->
<!-- start-placeholder="开始日期"-->
<!-- end-placeholder="结束日期">-->
<!-- </el-date-picker>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="查询时段:" prop="name1">-->
<!-- <el-date-picker-->
<!-- value-format="yyyy-MM-dd hh:mm:ss"-->
<!-- v-model="searchForm.name1"-->
<!-- type="datetimerange"-->
<!-- range-separator="→"-->
<!-- start-placeholder="开始日期"-->
<!-- end-placeholder="结束日期">-->
<!-- </el-date-picker>-->
<!-- </el-form-item>-->
<el-form-item label="开始时间:" prop="startTime">
<el-date-picker
v-model="searchForm.startTime"
......@@ -46,7 +47,9 @@
</el-form-item>
<el-form-item label="拥堵程度:" prop="xxx">
<el-select placeholder="请选择拥堵程度" class="select-speed" clearable v-model="searchForm.type">
<el-option v-for="item of dict.EventTypeOptions" v-if="item.name.includes('拥堵') || item.name.includes('全部')" :key="item.code" :label="item.name"
<el-option v-for="item of dict.EventTypeOptions"
v-if="item.name.includes('拥堵') || item.name.includes('全部')" :key="item.code"
:label="item.name"
:value="item.code"></el-option>
</el-select>
</el-form-item>
......@@ -81,11 +84,11 @@
header-row-class-name="tab-table-header"
header-cell-class-name="tab-table-header-cell"
>
<!-- <el-table-column-->
<!-- type="selection"-->
<!-- width="35">-->
<!-- @selection-change="showTrack"-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- type="selection"-->
<!-- width="35">-->
<!-- @selection-change="showTrack"-->
<!-- </el-table-column>-->
<el-table-column
min-width="50"
type="index"
......@@ -101,25 +104,25 @@
<el-table-column :show-overflow-tooltip="true"
min-width="60" prop="placeDesc"
label="拥堵地点">
<!-- <template slot-scope="scope">-->
<!-- {{ getNameByCode(scope.row.crossId, dict.CrossInfoOptions) }}-->
<!-- </template>-->
<!-- <template slot-scope="scope">-->
<!-- {{ getNameByCode(scope.row.crossId, dict.CrossInfoOptions) }}-->
<!-- </template>-->
</el-table-column>
<el-table-column :show-overflow-tooltip="true"
min-width="60"
prop="startTime"
label="发生时间">
<!-- <template slot-scope="scope">-->
<!-- {{ getNameByCode(scope.row.color, dict.CarColorOptions) }}-->
<!-- </template>-->
<!-- <template slot-scope="scope">-->
<!-- {{ getNameByCode(scope.row.color, dict.CarColorOptions) }}-->
<!-- </template>-->
</el-table-column>
<el-table-column :show-overflow-tooltip="true"
min-width="60"
prop="duration"
label="拥堵时长">
<!-- <template slot-scope="scope">-->
<!-- {{ getNameByCode(scope.row.color, dict.CarColorOptions) }}-->
<!-- </template>-->
<!-- <template slot-scope="scope">-->
<!-- {{ getNameByCode(scope.row.color, dict.CarColorOptions) }}-->
<!-- </template>-->
</el-table-column>
<el-table-column
min-width="60" fixed="right"
......@@ -151,14 +154,13 @@ export default {
watch: {},
name: "menuTrafficCrowd",
components: {MsgCard, Pagination},
computed: {
},
computed: {},
props: ["show", 'dict'],
data() {
let endTimeValidator = (rule, value, callback) =>{
let endTimeValidator = (rule, value, callback) => {
if (!value) {
callback(new Error('请选择结束时间'));
} else if(new Date(value).getTime() - new Date(this.searchForm.startTime).getTime() > 30*24*60 * 60 * 1000){
} else if (new Date(value).getTime() - new Date(this.searchForm.startTime).getTime() > 30 * 24 * 60 * 60 * 1000) {
callback(new Error('查询时段必须小于30天'));
} else {
callback();
......@@ -182,13 +184,13 @@ export default {
},
},
tableLoading: false,
fullscreenLoading:false,
fullscreenLoading: false,
options: [],
rules: {
startTime: [
{required: true, trigger:'blur', message:'请选择开始时间'}
{required: true, trigger: 'blur', message: '请选择开始时间'}
],
endTime:[
endTime: [
{required: true, trigger: 'blur', message: '请选择结束时间'},
{validator: endTimeValidator, trigger: 'change'}
],
......@@ -198,9 +200,13 @@ export default {
pageSize: 5,
showMore: false,
searchForm: {
startTime: '2023-04-07 14:00:00',
endTime: '2023-04-07 15:00:00',
type:'',
//
// startTime: '2023-04-07 14:00:00',
// endTime: '2023-04-07 15:00:00',
startTime: '2023-04-11 18:00:00',
endTime: '2023-04-11 19:30:00',
type: '',
crossId: '',
},
tableTotal: 0,
......@@ -261,7 +267,7 @@ export default {
return '未定义'
},
getTableData() {
for(let key in this.searchForm){
for (let key in this.searchForm) {
if (this.searchForm[key] === 'all') {
this.searchForm[key] = ''
}
......@@ -293,15 +299,14 @@ export default {
// 播放选中轨迹
playTrack(rowData) {
this.fullscreenLoading = true
console.log('row',rowData)
multiVehicleTrackDetail({startTime:rowData.startTime, endTime: rowData.endTime}).then(res=>{
console.log('row', rowData)
multiVehicleTrackDetail({startTime: rowData.startTime, endTime: rowData.endTime}).then(res => {
// multiVehicleTrackDetail({startTime: '2023-03-06 13:30:00', endTime: '2023-03-06 13:31:00'}).then(res => {
console.log('多车详情',res)
console.log('多车详情', res)
this.fullscreenLoading = false
if(res.content.length){
if (res.content.length) {
this.$emit('playFullTrack', res.content)
}
else {
} else {
this.$message.warning('该段时间无轨迹数据...')
}
})
......@@ -331,7 +336,7 @@ export default {
};
</script>
<style>
label{
label {
margin-bottom: 0 !important;
}
</style>
......@@ -587,9 +592,11 @@ label{
::-webkit-scrollbar-track {
background-color: #0f2645;
}
::v-deep .el-table__fixed-right::before {
height: 0;
}
/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
......@@ -600,6 +607,7 @@ label{
::-webkit-scrollbar-button {
height: 0;
}
::v-deep .row-deep.hover-row {
td {
background-color: #171f34;
......@@ -613,6 +621,7 @@ label{
}
}
.mypigination {
background: transparent;
......@@ -664,9 +673,11 @@ label{
::v-deep .el-date-editor {
width: auto;
}
::v-deep .el-form-item__error{
::v-deep .el-form-item__error {
padding-top: 2px;
}
::v-deep .el-date-editor {
width: auto;
}
......@@ -678,33 +689,42 @@ label{
::v-deep .el-table__fixed-right::before {
height: 0;
}
::v-deep .el-input__inner{
::v-deep .el-input__inner {
height: 30px;
line-height: 32px;
}
::v-deep .el-form-item__label{
::v-deep .el-form-item__label {
height: 30px;
line-height: 30px;
font-size: 14px;
}
::v-deep .el-input__icon{
::v-deep .el-input__icon {
line-height: 24px;
}
::v-deep .el-range__icon{
::v-deep .el-range__icon {
line-height: 24px;
}
::v-deep .el-range-separator{
::v-deep .el-range-separator {
line-height: 24px;
}
::v-deep .el-icon-arrow-up{
::v-deep .el-icon-arrow-up {
line-height: 24px;
}
::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
background-color: transparent;
}
::v-deep .el-date-editor{
::v-deep .el-date-editor {
width: 100%;
}
::v-deep .el-range-input {
background-color: transparent;
}
......
wj-manage-web/src/views/track/menuTrafficEvent.vue
View file @ 0c7fe56c
......@@ -201,8 +201,9 @@ export default {
searchForm: {
//startTime: '2023-04-07 14:00:00',
//endTime: '2023-04-07 15:00:00',
startTime:'2023-04-10 00:46:20',
endTime:'2023-04-10 00:49:46',
//
startTime:'2023-04-09 01:28:01',
endTime:'2023-04-09 01:28:40',
eventCategory: '',
crossId: '',
objectType: '',
......
wj-manage-web/src/views/track/menuVehicleTrack.vue
View file @ 0c7fe56c
......@@ -255,6 +255,8 @@ export default {
function: '',
// startTime: '2023-03-14 08:00:00',
// endTime: '2023-03-14 08:10:00',
// 2023-04-08 23:00:00
//2023-04-08 23:30:00
startTime: '2023-04-08 23:11:51',
endTime: '2023-04-08 23:12:14',
},
......@@ -270,13 +272,13 @@ export default {
// this.getDict()
},
mounted() {
this.$nextTick(() => {
let date = new Date() // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
this.searchForm.endTime = this.convertToString(date)
let start = date.getTime() - 1000 * 60 * 10
let st = new Date(start)
this.searchForm.startTime = this.convertToString(st)
})
// this.$nextTick(() => {
// let date = new Date() // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
// this.searchForm.endTime = this.convertToString(date)
// let start = date.getTime() - 1000 * 60 * 10
// let st = new Date(start)
// this.searchForm.startTime = this.convertToString(st)
// })
},
methods: {
convertToString(date) {
......
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