Commit f8e1c837 authored by ninglx's avatar ninglx

展示版本基本完成

parent 0c7fe56c
......@@ -5,9 +5,9 @@ const map_config = {
MAX_ZOOM: 20,
MAP_PITCH: 0,
MAP_ROTATE: 90,
MAP_STYLE: 'http://192.168.2.78:9000/style-changsha.json', // 高精
MAP_STYLE: 'http://10.102.1.181:9000/style-changsha.json', // 高精
}
const ws_config = {
BASE_URL: 'ws://192.168.2.78:17021/holows/subscribe',
CROSS_CONTROL: 'ws://192.168.2.78:9000/utc/signalStatus/',
BASE_URL: 'ws://10.102.1.181:17021/holows/subscribe',
CROSS_CONTROL: 'ws://10.102.1.181:9000/utc/signalStatus/',
}
\ No newline at end of file
......@@ -102,19 +102,19 @@ export default {
computed: {},
mounted() {
this.$nextTick(() => {
if (flvjs.isSupported()) {
if (this.autoPlay) {
this.loadVideo()
let interval = setInterval(() => {
if (this.loading) {
this.destroyWithReload(true)
}
}, 20000)
}
}
})
// this.$nextTick(() => {
// if (flvjs.isSupported()) {
// if (this.autoPlay) {
// this.loadVideo()
// let interval = setInterval(() => {
// if (this.loading) {
// this.destroyWithReload(true)
// }
// }, 20000)
// }
//
// }
// })
},
beforeDestroy() {
console.log("video beforeDestroy");
......
<template>
<div :class="['cameraVideo',border?'cameraVideoBorder':'']">
<div class="lkqz_0" v-show="videoData==='lkqz_0'">组群路口2<br/>激光雷达点云</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>
......@@ -57,8 +58,10 @@ export default {
.videoControl {
position: absolute;
//width: 100%;
width: calc(100% - 5px);
height: calc(100% - 5px);
width: 100%;
height: 100%;
//width: calc(100% - 5px);
//height: calc(100% - 5px);
padding: 1px;
}
}
......@@ -106,4 +109,13 @@ export default {
border-color: #1889f1;
border-width: 0 0 2px 2px;
}
.lkqz_0{
z-index: 2;
position: absolute;
font-size: 16px;
color: white;
font-weight: 700;
left: 12px;
top: 8px;
}
</style>
......@@ -20,10 +20,13 @@ function onClose(e, data) {
}
export function initWs(data) {
console.log('开始连接........', data)
if (typeof WebSocket === undefined) {
console.error('您的浏览器不支持socket')
} else {
console.log('xinlianjie........', ReconnectingWebSocket, data.url)
let currentSocket = new ReconnectingWebSocket(data.url)
console.log('ws实例', currentSocket)
// 监听socket连接open
currentSocket.onopen = (e) => onOpen(e, data)
// 监听socket错误信息
......
......@@ -334,7 +334,7 @@ export function addMobilePoint(scene, msg) {
// blur: 1,
// })
.size(28)
// .color('#e21918')
// .color('#e21918')
scene.addLayer(pointLayer)
return pointLayer
}
......@@ -101,8 +101,8 @@ export default {
this.currentView = 'intersectionGroups'
this.index = 0
this.$nextTick(() => {
this.$refs.intersectionGroups.setMsgState(false)
this.$refs.intersectionGroups.setBigView()
})
}
//Alt+2 ,3个路口群组(带指标)
......@@ -111,6 +111,8 @@ export default {
this.index = 1
this.$nextTick(() => {
this.$refs.intersectionGroups.setMsgState(true)
this.$refs.intersectionGroups.setSmallView()
})
}
//Alt+3,全域感知场景
......@@ -203,7 +205,7 @@ export default {
height: 75px;
line-height: 43px;
cursor: pointer;
background-size: auto 100%;
background-position-x: left;
background-repeat: no-repeat;
......@@ -219,6 +221,7 @@ export default {
.next {
background-image: url("../../assets/images/sc/rightpage.png");
background-position-x: right;
}
......
......@@ -7,7 +7,8 @@
<!-- :border="true"-->
<!-- :video-data="dianyunUrl" :auto-play="true"/>-->
<local-camera :border="true" ref="groupViewPointCamera" video-data="lkqz_0" class="main-cameraVideo"
:class="!boxesShow ? 'main-cameraVideoHidden':''"/>
:class="!boxesShow ? 'main-cameraVideoHidden':''">
</local-camera>
<!-- <situation-time class="timeCenter" :time="this.situationTimeVal"/>-->
<wMap :mapId="'situation-map'" ref="wMap"/>
<!--左右图表组件-->
......@@ -137,6 +138,32 @@ export default {
});
},
methods: {
setBigView() {
// {lng: } 90 0
map.flyTo({
// 112.96343790614856, 28.187395332758285} 17.700927931131545 90 0
center: [112.96343790614856, 28.187395332758285],
zoom: 17.700927931131545,
bearing: 90,
pitch: 0
})
},
setSmallView() {
//{lng: } 90 0
//Ol {lng: } 90 0
let viewTimer = setInterval(() => {
if (map) {
map.flyTo({
center: [112.96292140142532, 28.187205419868988],
zoom: 17.14795376640135,
bearing: 90,
pitch: 0
})
clearInterval(viewTimer)
}
},10)
},
changeState() {
this.licenseState = !this.licenseState
},
......@@ -192,6 +219,7 @@ export default {
// this.getCrossCamerasAndPolygons()
// }, 1000)
// this.timers.push(timer)
this.setBigView()
this.timeout = setTimeout(() => {
this.initWebS()
}, 5000)
......@@ -204,9 +232,11 @@ export default {
});
scene.on("zoomend", () => {
this.refreshBounds()
console.log(map.getZoom())
console.log(map.getCenter())
console.log('zzz', map.getCenter(), map.getZoom(), map.getBearing(), map.getPitch())
// console.log(map.getZoom())
// console.log(map.getCenter())
});
scene.on('moveend', () => {
this.refreshBounds()
})
......@@ -302,38 +332,40 @@ export default {
})
},
homeCameraClick(e) {
let data = e.feature
console.log('aaaaaaaaaaaaaaaaaaaaaa', e)
if (e.feature.crossName.includes('人民')) {
data.videoUrl = 'lkqz_1'
data.cName = '组群路口1'
}
if (e.feature.crossName.includes('西湖')) {
data.videoUrl = 'lkqz_2'
data.cName = '组群路口2'
}
if (e.feature.crossName.includes('劳动')) {
data.videoUrl = 'lkqz_3'
data.cName = '组群路口3'
if (["湘江中路与人民西路交叉口", "湘江中路与西湖路交叉口", "湘江中路与劳动西路交叉口"].includes(e.feature.crossName)) {
let data = e.feature
console.log('aaaaaaaaaaaaaaaaaaaaaa', e)
if (e.feature.crossName.includes("湘江中路与人民西路交叉口")) {
data.videoUrl = 'lkqz_1'
data.cName = '组群路口1'
}
if (e.feature.crossName.includes("湘江中路与西湖路交叉口")) {
data.videoUrl = 'lkqz_2'
data.cName = '组群路口2'
}
if (e.feature.crossName.includes("湘江中路与劳动西路交叉口")) {
data.videoUrl = 'lkqz_3'
data.cName = '组群路口3'
}
let index = data.longitude[0].split('.')[1]
let popup = new Popup({
offsets: [0, -120], // x+右 y-下
closeButton: true,
autoClose: false,
anchor: 'top-left',
closeButtonOffsets: [7, 7]
})
.setLngLat([data.longitude, data.latitude])
.setHTML(`<div id="home_camera_popup${index}"></div>`)
scene.addPopup(popup);
let aa = new CameraPopup({
propsData: {
model: data,
},
})
aa.$mount(`#home_camera_popup${index}`);
popups.push(aa)
}
let index = data.longitude[0].split('.')[1]
let popup = new Popup({
offsets: [0, -120], // x+右 y-下
closeButton: true,
autoClose: false,
anchor: 'top-left',
closeButtonOffsets: [7, 7]
})
.setLngLat([data.longitude, data.latitude])
.setHTML(`<div id="home_camera_popup${index}"></div>`)
scene.addPopup(popup);
let aa = new CameraPopup({
propsData: {
model: data,
},
})
aa.$mount(`#home_camera_popup${index}`);
popups.push(aa)
},
// 更新经纬度-角度-详细信息-弹窗信息
......
......@@ -5,19 +5,19 @@ const map_config = {
MAP_ZOOM: 14.39, // 默认地图层级
MAX_ZOOM: 20, // 地图最大层级
MAP_PITCH: 60, // 视角倾斜角度
MAP_STYLE: 'http://192.168.2.78:9000/style-changsha.json', // 高精
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}' // 路况
MAP_STYLE: 'http://10.102.1.181:9000/style-changsha.json', // 高精
MAP_STYLE_XL: 'http://10.102.1.181:9000/style-changsha.json', // 高精带路口箭头
RASTER_ROAD: 'http://10.102.1.181:9000/tile?lid=traffic&get=map&cache=off&x={x}&y={y}&z={z}' // 路况
}
const ws_config = {
BASE_URL: 'ws://192.168.2.78:17021/holows/subscribe', // 实时轨迹
CROSS_CONTROL: 'ws://192.168.2.78:9000/utc/signalStatus/' // 路口详情 - 灯态相位推送
BASE_URL: 'ws://10.102.1.181:17021/holows/subscribe', // 实时轨迹
CROSS_CONTROL: 'ws://10.102.1.181:9000/utc/signalStatus/' // 路口详情 - 灯态相位推送
}
const cesium_config = {
center: [112.96364, 28.18825], // cesium中心点
zoomHeight: 1800, // cesium相机默认高度
tile3dURL: 'http://192.168.2.78:9090/cs_3dtiles/tileset.json', // 3D tile 三维路口模型
tile3dURL: 'http://10.102.1.181:9090/cs_3dtiles/tileset.json', // 3D tile 三维路口模型
}
const video_config = {
homeTimeStart:'2023-04-16 23:10:27:267',
......
......@@ -164,6 +164,7 @@ export default {
},
init() {
map = new mapboxgl.Map({
container: this.mapId,
style: map_config.MAP_STYLE,
......@@ -185,8 +186,13 @@ export default {
map.setMinZoom(17.5);
scene.on('loaded', () => {
this.sceneLoaded = true;
})
map.on("style.load", () => {
this.regisAndSendWs("callCar", {
dataType: "1",
...this.getBoundsLnglat(),
});
map.addLayer({
id: "vehicle3D",
type: "custom",
......@@ -216,20 +222,18 @@ export default {
for (let key in mapAssets.mapIcons) {
scene.addImage(key, mapAssets.mapIcons[key]);
}
setTimeout(() => {
this.switchfirst();
}, 3000)
if (this.loading) this.loading = false
// setTimeout(() => {
// this.switchfirst();
// }, 3000)
});
return map
},
switchfirst() {
if (this.loading) this.loading = false
// 注册车辆实时ws
this.regisAndSendWs("callCar", {
dataType: "1",
...this.getBoundsLnglat(),
});
},
// 更新经纬度-角度-详细信息-弹窗信息
......@@ -286,21 +290,21 @@ export default {
},
// websocket 回调
callCar(msgg) {
// 处理无车牌情况
for (let i = 0; i < msgg.length; i++) {
if (!msgg[i].picLicense) {
msgg[i].picLicense = ''
if (scene && this.vehicleModelsNum === 21) {
// 处理无车牌情况
for (let i = 0; i < msgg.length; i++) {
if (!msgg[i].picLicense) {
msgg[i].picLicense = ''
}
}
}
// 按类型筛选车
let msg = msgg.filter(item => {
return this.toFilter.includes(this.typeDict[item.originalType])
})
if (this.sceneLoaded) {
this.currentLocation = msg;
let allData = this.diff(this.lastLocation, this.currentLocation);
this.lastLocation = msg;
if (this.vehicleModelsNum === 21) {
// 按类型筛选车
let msg = msgg.filter(item => {
return this.toFilter.includes(this.typeDict[item.originalType])
})
if (this.sceneLoaded) {
this.currentLocation = msg;
let allData = this.diff(this.lastLocation, this.currentLocation);
this.lastLocation = msg;
this.addDelUpdateVehicleModels(allData);
// 添加车牌号图层
// if (!layers.first.license) {
......@@ -310,6 +314,7 @@ export default {
// }
}
}
},
// 比较websocket车辆前后两次数据差异
diff(oldData, newData) {
......
......@@ -85,7 +85,7 @@ export default {
down:require('../../assets/images/efficiency/down.png'),
tableData: [
{indexName:'路口饱和度',current:'70%',compare:'80%',to:'10%',raise:false},
{indexName:'交通流量',current:'2888辆/h',compare:'2888辆/h',to:'1000',raise:true},
{indexName:'交通流量',current:'3888/h',compare:'2888/h',to:'1000',raise:true},
{indexName:'平均延误时间',current:'2.3s',compare:'3.3s',to:'1s',raise:false},
{indexName:'不停车通过率',current:'30%',compare:'25%',to:'5%',raise:true},
{indexName:'一次停车通过率',current:'40%',compare:'60%',to:'20%',raise:false},
......
......@@ -161,7 +161,7 @@ export default {
return {
map1Loading: true,
pathData: [],
rightLoading: true,
rightLoading: false,
currentSelectCross: '',
tableLoading: false,
tableData: [
......
......@@ -294,8 +294,9 @@ export default {
}
if (event.altKey && (event.keyCode === 50 || event.keyCode === 98)) {
map.flyTo({
zoom: 17.17,
center: [120.62601176446981, 31.422352253327617]
//112.96345260029534, lat: 28.185756542707225} 16.573391841784925
zoom: 16.573391841784925,
center: [112.96345260029534, 28.185756542707225]
})
}
if (event.altKey && (event.keyCode === 51 || event.keyCode === 99)) {
......@@ -372,6 +373,7 @@ export default {
});
scene.on("zoomend", (e) => {
// console.log(map.getZoom())
console.log(map.getCenter(), map.getZoom(), map.getBearing(), map.getPitch())
this.refreshMap();
this.refreshBounds()
if (scene.getZoom() < 17) {
......@@ -380,6 +382,7 @@ export default {
});
scene.on('moveend', () => {
this.refreshBounds()
console.log(map.getCenter(), map.getZoom(), map.getBearing(), map.getPitch())
})
},
......
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