Skip to content

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

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

parent 975d57f3
Show 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> <template>
<div class="cameraVideo"> <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 <video
style="width: 100%; height: 100%;object-fit: fill;" style="width: 100%; height: 100%;object-fit: fill;"
@loadstart="loadstart($event)" @loadstart="loadstart($event)"
...@@ -23,11 +27,14 @@ export default { ...@@ -23,11 +27,14 @@ export default {
data() { data() {
return { return {
player: null, player: null,
ownVideoData: {} ownVideoData: {},
canplayStatus: false
}; };
}, },
methods: { methods: {
canplay() { canplay() {
console.log('canplay...')
this.canplayStatus = true
this.$emit("vidCanplay", this.ownVideoData); this.$emit("vidCanplay", this.ownVideoData);
}, },
loadstart() { loadstart() {
...@@ -160,8 +167,20 @@ video { ...@@ -160,8 +167,20 @@ video {
justify-content: center; justify-content: center;
color: #fcfcfc; color: #fcfcfc;
} }
.rotateI{
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.cameraVideo { .cameraVideo {
position: relative;
.videoControl { .videoControl {
object-fit: fill; 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 ...@@ -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 = () => 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_camera_wuhan = (params) => fetch('/operation/open/api/deviceList2', params, 'GET')
export const equip_radar = () => fetch('/holo/device-radar/list', {}, 'GET') export const equip_radar = () => fetch('/holo/device-radar/list', {}, 'GET')
......
wj-manage-web/src/utils/mapboxTools.js
View file @ bee2e45e
...@@ -348,8 +348,10 @@ export function addOrUpdateWave(map, geo) { ...@@ -348,8 +348,10 @@ export function addOrUpdateWave(map, geo) {
export function convertPointsToGeo(arr) { export function convertPointsToGeo(arr) {
let features = [] let features = []
for (let item of arr) { for (let item of arr) {
if(item.longitude && item.latitude){
features.push(turf.point([item.longitude, item.latitude], item)) features.push(turf.point([item.longitude, item.latitude], item))
} }
}
return turf.featureCollection(features) return turf.featureCollection(features)
} }
export function convertPointsLocationToGeo(arr) { export function convertPointsLocationToGeo(arr) {
...@@ -653,9 +655,10 @@ export function addOrUpdateEquipCamera(map, geo, callback) { ...@@ -653,9 +655,10 @@ export function addOrUpdateEquipCamera(map, geo, callback) {
type: "symbol", type: "symbol",
source: "camera", source: "camera",
layout: { layout: {
"icon-anchor":"bottom",
"icon-image": [ "icon-image": [
"match", "match",
["get", "status"], // 属性字段名称 ["get", "customStatus"], // 属性字段名称
'0', '0',
"cameraFalse", "cameraFalse",
'1', '1',
...@@ -688,9 +691,10 @@ export function addOrUpdateEquipMilli(map, geo, callback) { ...@@ -688,9 +691,10 @@ export function addOrUpdateEquipMilli(map, geo, callback) {
type: "symbol", type: "symbol",
source: "milli", source: "milli",
layout: { layout: {
"icon-anchor":"bottom",
"icon-image": [ "icon-image": [
"match", "match",
["get", "status"], // 属性字段名称 ["get", "active"], // 属性字段名称
'0', '0',
"milliFalse", "milliFalse",
'1', '1',
...@@ -721,9 +725,10 @@ export function addOrUpdateEquipRadar(map, geo, callback) { ...@@ -721,9 +725,10 @@ export function addOrUpdateEquipRadar(map, geo, callback) {
type: "symbol", type: "symbol",
source: "radar", source: "radar",
layout: { layout: {
"icon-anchor":"bottom",
"icon-image": [ "icon-image": [
"match", "match",
["get", "status"], // 属性字段名称 ["get", "active"], // 属性字段名称
'0', '0',
"radarFalse", "radarFalse",
'1', '1',
......
wj-manage-web/src/views/situation/index.vue
View file @ bee2e45e
...@@ -59,7 +59,7 @@ import { ...@@ -59,7 +59,7 @@ import {
equip_weather, equip_weather,
equip_camera, equip_camera,
equip_radar, equip_radar,
getDetetors, equip_camera_wuhan, equip_camera_wuhan1, getDetetors, equip_camera_wuhan, equip_camera_wuhan1, equips_new,
} from "../../dao/situation"; } from "../../dao/situation";
import {convertPointsToGeo, convertPointsWktToGeo, convertToLineWithWkt} from "../../utils/mapboxTools"; import {convertPointsToGeo, convertPointsWktToGeo, convertToLineWithWkt} from "../../utils/mapboxTools";
...@@ -793,34 +793,83 @@ export default { ...@@ -793,34 +793,83 @@ export default {
// this.refreshEventLayer(1); // this.refreshEventLayer(1);
}, },
switchfourth() { switchfourth() {
Promise.all([ equips_new({
equip_radar(), uuid: '6B785B7B09',
equip_signal(), pageNum: 1,
equip_camera(), pageSize: 9999,
equip_weather(), condition: {
]).then(([radar, signal, camera, weather]) => { parentTypeCode: 'D'
// console.log("设备。。。", radar, signal, camera, weather); }
let milliArray = []; }).then(res => {
let radarArray = []; console.log('equips camera', res)
for (let i = 0; i < radar.content.length; i++) { res.content = res.content.map(item => {
if (radar.content[i].sourceEquipType === "2") { item.customStatus = item.active ? '1' : '0'
milliArray.push(radar.content[i]); return item
} else { })
radarArray.push(radar.content[i]); let geo = convertPointsToGeo(res.content)
} mapTools.addOrUpdateEquipCamera(map, geo);
} })
let milliGeo = convertPointsWktToGeo(milliArray); equips_new({
let radarGeo = convertPointsWktToGeo(radarArray); uuid: '6B785B7B09',
let signalGeo = convertPointsWktToGeo(signal.content); pageNum: 1,
let cameraGeo = convertPointsWktToGeo(camera.content); pageSize: 9999,
let weatherGeo = convertPointsWktToGeo(weather.content); condition: {
mapTools.addOrUpdateEquipMilli(map, milliGeo); parentTypeCode: 'S'
mapTools.addOrUpdateEquipRadar(map, radarGeo); }
mapTools.addOrUpdateEquipSignal(map, signalGeo); }).then(res => {
mapTools.addOrUpdateEquipCamera(map, cameraGeo); console.log('equips hmbLd', res)
mapTools.addOrUpdateEquipWeather(map, weatherGeo); 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); 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) { crossClick(e) {
...@@ -833,12 +882,13 @@ export default { ...@@ -833,12 +882,13 @@ export default {
popupInstance = null; popupInstance = null;
equipPopup = null; equipPopup = null;
const features = map.queryRenderedFeatures(e.point, { const features = map.queryRenderedFeatures(e.point, {
layers: ["camera", "milli", "radar", "signal", "weather"], // "signal", "weather"
layers: ["camera", "milli", "radar"],
}); });
if (features.length) { if (features.length) {
let prop = features[0].properties; let prop = features[0].properties;
let type = features[0].layer.id; let type = features[0].layer.id;
if (prop.status == "1") { if (prop.customStatus === "1") {
setTimeout(() => { setTimeout(() => {
// 创建新 popup 绑定事件（关闭时清除掉里面的video 防止占用资源） // 创建新 popup 绑定事件（关闭时清除掉里面的video 防止占用资源）
// 使用 Turf.js 进行平移计算 // 使用 Turf.js 进行平移计算
...@@ -849,8 +899,9 @@ export default { ...@@ -849,8 +899,9 @@ export default {
} }
let bearing = map.getBearing(); // 平移方向，0 表示正北方向 let bearing = map.getBearing(); // 平移方向，0 表示正北方向
let options = {units: "meters"}; let options = {units: "meters"};
let equipLocation = [prop.longitude,prop.latitude]
let translatedPoint = turf.destination( let translatedPoint = turf.destination(
prop.wkt.split(","), equipLocation,
distance, distance,
bearing, bearing,
options options
...@@ -865,7 +916,7 @@ export default { ...@@ -865,7 +916,7 @@ export default {
offset: [0, -20], offset: [0, -20],
}); });
equipPopup equipPopup
.setLngLat(prop.wkt.split(",")) .setLngLat(equipLocation)
.setHTML('<div id="equipment_popup"></div>') .setHTML('<div id="equipment_popup"></div>')
.addTo(map) .addTo(map)
.setMaxWidth("500") .setMaxWidth("500")
......
wj-manage-web/src/views/situation/mapPopup/equipmentPopup.vue
View file @ bee2e45e
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
class="equip_camera full-h full-w" class="equip_camera full-h full-w"
> >
<div class="camera_header"> <div class="camera_header">
{{ model.equipAddr || "暂无安装地址信息" }} 相机-{{ model.parentPoint || "暂无安装地址信息" }}
</div> </div>
<div class="camera_main"> <div class="camera_main">
<camera-video <camera-video
...@@ -14,68 +14,68 @@ ...@@ -14,68 +14,68 @@
/> />
</div> </div>
</div> </div>
<div v-if="model.equip_type === 'weather'" <!-- <div v-if="model.equip_type === 'weather'"-->
class="equip_weather full-h full-w" <!-- class="equip_weather full-h full-w"-->
> <!-- >-->
<div class="e_header">气象检测仪</div> <!-- <div class="e_header">气象检测仪</div>-->
<div class="e_main"> <!-- <div class="e_main">-->
<div class="left-image"> <!-- <div class="left-image">-->
<img <!-- <img-->
style="height: 100%; width: 100%" <!-- style="height: 100%; width: 100%"-->
alt="气象检测仪" <!-- alt="气象检测仪"-->
:src="model.equipImgUrl" <!-- :src="model.equipImgUrl"-->
/> <!-- />-->
</div> <!-- </div>-->
<div class="right"> <!-- <div class="right">-->
<div class="equip-type"> <!-- <div class="equip-type">-->
<div class="detail-item"><span>设备名称</span>气象检测仪</div> <!-- <div class="detail-item"><span>设备名称</span>气象检测仪</div>-->
<div class="detail-item"> <!-- <div class="detail-item">-->
<span>气压</span>{{ model.pressure }} Kpa <!-- <span>气压</span>{{ model.pressure }} Kpa-->
</div> <!-- </div>-->
<div class="detail-item"> <!-- <div class="detail-item">-->
<span>设备地址</span>{{ model.equipIp||'暂无 IP 地址' }} <!-- <span>设备地址</span>{{ model.baseIp||'暂无 IP 地址' }}-->
</div> <!-- </div>-->
<div class="detail-item"> <!-- <div class="detail-item">-->
<span>PM 2.5</span>{{ model.pm2dot5 }} ug/m² <!-- <span>PM 2.5</span>{{ model.pm2dot5 }} ug/m²-->
</div> <!-- </div>-->
<div class="detail-item"> <!-- <div class="detail-item">-->
<span>在线情况</span <!-- <span>在线情况</span-->
>{{ <!-- >{{-->
model.status === "0" <!-- model.status === "0"-->
? "离线" <!-- ? "离线"-->
: model.status === "1" <!-- : model.status === "1"-->
? "在线" <!-- ? "在线"-->
: "未知" <!-- : "未知"-->
}} <!-- }}-->
</div> <!-- </div>-->
<div class="detail-item"> <!-- <div class="detail-item">-->
<span>PM 10</span>{{ model.pm10 }} ug/m² <!-- <span>PM 10</span>{{ model.pm10 }} ug/m²-->
</div> <!-- </div>-->
<div class="detail-item"> <!-- <div class="detail-item">-->
<span>风速</span>{{ model.windSpeed }} m/s <!-- <span>风速</span>{{ model.windSpeed }} m/s-->
</div> <!-- </div>-->
<div class="detail-item"> <!-- <div class="detail-item">-->
<span>空气温度</span>{{ model.temperature }} ℃ <!-- <span>空气温度</span>{{ model.temperature }} ℃-->
</div> <!-- </div>-->
<div class="detail-item"> <!-- <div class="detail-item">-->
<span>风向</span <!-- <span>风向</span-->
>{{ getNameByCode(model.windDirection, "Direction") }}风 <!-- >{{ getNameByCode(model.windDirection, "Direction") }}风-->
</div> <!-- </div>-->
<div <!-- <div-->
class="detail-item" <!-- class="detail-item"-->
:title="getNameByCode(model.visibility, 'Visibility')" <!-- :title="getNameByCode(model.visibility, 'Visibility')"-->
> <!-- >-->
<span>大气能见度</span <!-- <span>大气能见度</span-->
>{{ getNameByCode(model.visibility, "Visibility") }} <!-- >{{ getNameByCode(model.visibility, "Visibility") }}-->
</div> <!-- </div>-->
<div class="detail-item"> <!-- <div class="detail-item">-->
<span>空气湿度</span>{{ model.humidity }} RH <!-- <span>空气湿度</span>{{ model.humidity }} RH-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<div v-if="model.equip_type === 'milli'" class="equip_milli full-h full-w"> <div v-if="model.equip_type === 'milli'" class="equip_milli full-h full-w">
<div class="milli_header">毫米波雷达</div> <div class="milli_header">毫米波雷达</div>
<div class="milli_main"> <div class="milli_main">
...@@ -90,32 +90,31 @@ ...@@ -90,32 +90,31 @@
<div class="equip-type"> <div class="equip-type">
<div class="detail-item"><span>设备名称</span>毫米波雷达</div> <div class="detail-item"><span>设备名称</span>毫米波雷达</div>
<div class="detail-item"> <div class="detail-item">
<span>设备IP</span>{{ model.equipIp }} <span>设备IP</span>{{ model.baseIp }}
</div> </div>
<div class="detail-item"> <div class="detail-item">
<span>设备厂商</span>{{ model.manufacturer }} <span>设备厂商</span>{{ model.parentSupplier }}
</div> </div>
<div class="detail-item"> <div class="detail-item">
<span>设备状态</span>{{ model.status === "0" ? "离线" : "在线" }} <span>设备状态</span>{{ model.customStatus === "0" ? "离线" : "在线" }}
</div> </div>
<div class="detail-item"> <div class="detail-item">
<span>数据传输</span <span>数据传输</span>{{ model.baseStatus ? "正常" : "异常" }}
>{{ model.dataTransferStatus === "0" ? "异常" : "正常" }}
</div> </div>
<div class="detail-item" :title="model.equipAddr"> <div class="detail-item" :title="model.parentPoint">
<span>设备点位</span>{{ model.equipAddr }} <span>设备点位</span>{{ model.parentPoint }}
</div> </div>
<div <div
class="detail-item" class="detail-item"
:title=" :title="
decToDms(model.wkt.split(',')[0], 'E') + decToDms(model.longitude, 'E') +
'，' + '，' +
decToDms(model.wkt.split(',')[1], 'N') decToDms(model.latitude, 'N')
" "
> >
<span>位置坐标</span <span>位置坐标</span
>{{ decToDms(model.wkt.split(",")[0], "E") }}，{{ >{{ decToDms(model.longitude, "E") }}，{{
decToDms(model.wkt.split(",")[1], "N") decToDms(model.latitude, "N")
}} }}
</div> </div>
</div> </div>
...@@ -136,53 +135,54 @@ ...@@ -136,53 +135,54 @@
<div class="equip-type"> <div class="equip-type">
<div class="detail-item"><span>设备名称</span>激光雷达</div> <div class="detail-item"><span>设备名称</span>激光雷达</div>
<div class="detail-item"> <div class="detail-item">
<span>设备IP</span>{{ model.equipIp }} <span>设备IP</span>{{ model.baseIp }}
</div> </div>
<div class="detail-item"> <div class="detail-item">
<span>设备厂商</span>{{ model.manufacturer }} <span>设备厂商</span>{{ model.parentSupplier }}
</div> </div>
<div class="detail-item"> <div class="detail-item">
<span>设备状态</span>{{ model.status === "0" ? "离线" : "在线" }} <span>设备状态</span>{{ model.customStatus === "0" ? "离线" : "在线" }}
</div> </div>
<div class="detail-item"> <div class="detail-item">
<span>数据传输</span <span>数据传输</span
>{{ model.dataTransferStatus === "0" ? "异常" : "正常" }} >{{ model.baseStatus ? "正常" : "异常" }}
</div> </div>
<div class="detail-item" :title="model.equipAddr"> <div class="detail-item" :title="model.parentPoint">
<span>设备点位</span>{{ model.equipAddr }} <span>设备点位</span>{{ model.parentPoint }}
</div> </div>
<div <div
class="detail-item" class="detail-item"
:title=" :title="
decToDms(model.wkt.split(',')[0], 'E') + decToDms(model.longitude, 'E') +
'，' + '，' +
decToDms(model.wkt.split(',')[1], 'N') decToDms(model.latitude, 'N')
" "
> >
<span>位置坐标</span <span>位置坐标</span
>{{ decToDms(model.wkt.split(",")[0], "E") }}，{{ >{{ decToDms(model.longitude, "E") }}，{{
decToDms(model.wkt.split(",")[1], "N") decToDms(model.latitude, "N")
}} }}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div v-if="model.equip_type === 'signal'" class="equip_sign full-h full-w"> <!-- <div v-if="model.equip_type === 'signal'" class="equip_sign full-h full-w">-->
<div class="sign_header">信号机</div> <!-- <div class="sign_header">信号机</div>-->
<div class="sign_main"> <!-- <div class="sign_main">-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> </div>
</template> </template>
<script> <script>
import CameraVideo from "../../../components/Standard/cameraVideo.vue"; import CameraVideo from "../../../components/Standard/cameraVideo.vue";
import store from "../../../store"; import store from "../../../store";
export default { export default {
name: "passerbyPopup", name: "passerbyPopup",
props: ["model"], props: ["model"],
components: { CameraVideo }, components: {CameraVideo},
data() { data() {
return { return {
dictVisbility: [], dictVisbility: [],
......
wj-manage-web/vue.config.js
View file @ bee2e45e
...@@ -12,6 +12,14 @@ const proxy = { ...@@ -12,6 +12,14 @@ const proxy = {
// target: 'http://192.168.208.43:9000', // 武汉环境 // target: 'http://192.168.208.43:9000', // 武汉环境
changeOrigin: true, changeOrigin: true,
}, },
'/apiOp': {
// target: 'http://192.168.208.43:19355', // 武汉环境
target: 'http://192.168.208.41:19529/api/op',
changeOrigin: true,
pathRewrite : {
'^/apiOp' : ''
}
},
'/cdn': { '/cdn': {
target: 'http://127.0.0.1:3000', 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