Skip to content

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

首页设备图层换接口(配置读取 联调字段展示内容 实时视频组件添加loading

parent 975d57f3
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 214 additions and 129 deletions
wj-manage-web/src/components/Standard/cameraVideo.vue
View file @ bee2e45e
<template>
<div class="cameraVideo">
<div v-show="!canplayStatus" style="color:rgba(255,255,255,.8);font-size:16px;width:100%;height:100%;position: absolute;z-index: 10;display: flex;justify-content: center;align-items: center;flex-direction: column">
<div style="width: 50px;height: 50px;border-radius: 25px;border-top: 2px solid #d2d2d3;border-left: 2px solid #d2d2d3;margin-bottom: 10px" class="rotateI"></div>
加载中...
</div>
<video
style="width: 100%; height: 100%;object-fit: fill;"
@loadstart="loadstart($event)"
......@@ -23,11 +27,14 @@ export default {
data() {
return {
player: null,
ownVideoData: {}
ownVideoData: {},
canplayStatus: false
};
},
methods: {
canplay() {
console.log('canplay...')
this.canplayStatus = true
this.$emit("vidCanplay", this.ownVideoData);
},
loadstart() {
......@@ -160,8 +167,20 @@ video {
justify-content: center;
color: #fcfcfc;
}
.rotateI{
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.cameraVideo {
position: relative;
.videoControl {
object-fit: fill;
}
......
wj-manage-web/src/dao/situation.js
View file @ bee2e45e
......@@ -68,7 +68,9 @@ export const api_phaseByTimeList = (data) => fetch('/web/planSend/phaseListByTim
// 设备图层接口
export const equip_camera = () => fetch('/holo/device-camera/list', {}, 'GET')
// export const equip_camera_wuhan = (params) => fetch('http://106.120.201.126:14944/operation/open/api/deviceList2', params, 'GET')
// export const equips_new = (data) => fetch('/apiOp/serviceAccess/queryData',data,'POST')
export const equips_new = (data) => fetch(data_platform_config.api_getEquips || '/apiOp/serviceAccess/queryData', data, 'POST')
export const equip_camera_wuhan = (params) => fetch('/operation/open/api/deviceList2', params, 'GET')
export const equip_radar = () => fetch('/holo/device-radar/list', {}, 'GET')
......
wj-manage-web/src/utils/mapboxTools.js
View file @ bee2e45e
......@@ -348,7 +348,9 @@ export function addOrUpdateWave(map, geo) {
export function convertPointsToGeo(arr) {
let features = []
for (let item of arr) {
features.push(turf.point([item.longitude, item.latitude], item))
if(item.longitude && item.latitude){
features.push(turf.point([item.longitude, item.latitude], item))
}
}
return turf.featureCollection(features)
}
......@@ -653,9 +655,10 @@ export function addOrUpdateEquipCamera(map, geo, callback) {
type: "symbol",
source: "camera",
layout: {
"icon-anchor":"bottom",
"icon-image": [
"match",
["get", "status"], // 属性字段名称
["get", "customStatus"], // 属性字段名称
'0',
"cameraFalse",
'1',
......@@ -688,9 +691,10 @@ export function addOrUpdateEquipMilli(map, geo, callback) {
type: "symbol",
source: "milli",
layout: {
"icon-anchor":"bottom",
"icon-image": [
"match",
["get", "status"], // 属性字段名称
["get", "active"], // 属性字段名称
'0',
"milliFalse",
'1',
......@@ -721,9 +725,10 @@ export function addOrUpdateEquipRadar(map, geo, callback) {
type: "symbol",
source: "radar",
layout: {
"icon-anchor":"bottom",
"icon-image": [
"match",
["get", "status"], // 属性字段名称
["get", "active"], // 属性字段名称
'0',
"radarFalse",
'1',
......
wj-manage-web/src/views/situation/index.vue
View file @ bee2e45e
......@@ -59,7 +59,7 @@ import {
equip_weather,
equip_camera,
equip_radar,
getDetetors, equip_camera_wuhan, equip_camera_wuhan1,
getDetetors, equip_camera_wuhan, equip_camera_wuhan1, equips_new,
} from "../../dao/situation";
import {convertPointsToGeo, convertPointsWktToGeo, convertToLineWithWkt} from "../../utils/mapboxTools";
......@@ -793,34 +793,83 @@ export default {
// this.refreshEventLayer(1);
},
switchfourth() {
Promise.all([
equip_radar(),
equip_signal(),
equip_camera(),
equip_weather(),
]).then(([radar, signal, camera, weather]) => {
// console.log("设备。。。", radar, signal, camera, weather);
let milliArray = [];
let radarArray = [];
for (let i = 0; i < radar.content.length; i++) {
if (radar.content[i].sourceEquipType === "2") {
milliArray.push(radar.content[i]);
} else {
radarArray.push(radar.content[i]);
}
equips_new({
uuid: '6B785B7B09',
pageNum: 1,
pageSize: 9999,
condition: {
parentTypeCode: 'D'
}
let milliGeo = convertPointsWktToGeo(milliArray);
let radarGeo = convertPointsWktToGeo(radarArray);
let signalGeo = convertPointsWktToGeo(signal.content);
let cameraGeo = convertPointsWktToGeo(camera.content);
let weatherGeo = convertPointsWktToGeo(weather.content);
mapTools.addOrUpdateEquipMilli(map, milliGeo);
mapTools.addOrUpdateEquipRadar(map, radarGeo);
mapTools.addOrUpdateEquipSignal(map, signalGeo);
mapTools.addOrUpdateEquipCamera(map, cameraGeo);
mapTools.addOrUpdateEquipWeather(map, weatherGeo);
map.on("click", this.equipmentsClick);
});
}).then(res => {
console.log('equips camera', res)
res.content = res.content.map(item => {
item.customStatus = item.active ? '1' : '0'
return item
})
let geo = convertPointsToGeo(res.content)
mapTools.addOrUpdateEquipCamera(map, geo);
})
equips_new({
uuid: '6B785B7B09',
pageNum: 1,
pageSize: 9999,
condition: {
parentTypeCode: 'S'
}
}).then(res => {
console.log('equips hmbLd', res)
res.content = res.content.map(item => {
item.customStatus = item.active ? '1' : '0'
return item
})
let geo = convertPointsToGeo(res.content)
mapTools.addOrUpdateEquipMilli(map, geo);
})
equips_new({
uuid: '6B785B7B09',
pageNum: 1,
pageSize: 9999,
condition: {
parentTypeCode: 'L'
}
}).then(res => {
console.log('equips jgLd', res)
res.content = res.content.map(item => {
item.customStatus = item.active ? '1' : '0'
return item
})
let geo = convertPointsToGeo(res.content)
mapTools.addOrUpdateEquipRadar(map, geo);
})
map.on("click", this.equipmentsClick);
// Promise.all([
// equip_radar(),
// equip_signal(),
// equip_camera(),
// equip_weather(),
// ]).then(([radar, signal, camera, weather]) => {
// // console.log("设备。。。", radar, signal, camera, weather);
// let milliArray = [];
// let radarArray = [];
// for (let i = 0; i < radar.content.length; i++) {
// if (radar.content[i].sourceEquipType === "2") {
// milliArray.push(radar.content[i]);
// } else {
// radarArray.push(radar.content[i]);
// }
// }
// let milliGeo = convertPointsWktToGeo(milliArray);
// let radarGeo = convertPointsWktToGeo(radarArray);
// let signalGeo = convertPointsWktToGeo(signal.content);
// let cameraGeo = convertPointsWktToGeo(camera.content);
// let weatherGeo = convertPointsWktToGeo(weather.content);
// mapTools.addOrUpdateEquipMilli(map, milliGeo);
// mapTools.addOrUpdateEquipRadar(map, radarGeo);
// mapTools.addOrUpdateEquipSignal(map, signalGeo);
// mapTools.addOrUpdateEquipCamera(map, cameraGeo);
// mapTools.addOrUpdateEquipWeather(map, weatherGeo);
// map.on("click", this.equipmentsClick);
// });
},
// 路口图层点击
crossClick(e) {
......@@ -833,12 +882,13 @@ export default {
popupInstance = null;
equipPopup = null;
const features = map.queryRenderedFeatures(e.point, {
layers: ["camera", "milli", "radar", "signal", "weather"],
// "signal", "weather"
layers: ["camera", "milli", "radar"],
});
if (features.length) {
let prop = features[0].properties;
let type = features[0].layer.id;
if (prop.status == "1") {
if (prop.customStatus === "1") {
setTimeout(() => {
// 创建新 popup 绑定事件（关闭时清除掉里面的video 防止占用资源）
// 使用 Turf.js 进行平移计算
......@@ -849,8 +899,9 @@ export default {
}
let bearing = map.getBearing(); // 平移方向，0 表示正北方向
let options = {units: "meters"};
let equipLocation = [prop.longitude,prop.latitude]
let translatedPoint = turf.destination(
prop.wkt.split(","),
equipLocation,
distance,
bearing,
options
......@@ -865,7 +916,7 @@ export default {
offset: [0, -20],
});
equipPopup
.setLngLat(prop.wkt.split(","))
.setLngLat(equipLocation)
.setHTML('<div id="equipment_popup"></div>')
.addTo(map)
.setMaxWidth("500")
......
wj-manage-web/vue.config.js
View file @ bee2e45e
......@@ -12,6 +12,14 @@ const proxy = {
// target: 'http://192.168.208.43:9000', // 武汉环境
changeOrigin: true,
},
'/apiOp': {
// target: 'http://192.168.208.43:19355', // 武汉环境
target: 'http://192.168.208.41:19529/api/op',
changeOrigin: true,
pathRewrite : {
'^/apiOp' : ''
}
},
'/cdn': {
target: 'http://127.0.0.1:3000',
},
......
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