HC_YFZX
/
CaiYuanYiTiHua
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

merge

dianlixunjian
徐景良 2024-08-08 14:13:04 +08:00
parent b605d191f1
commit 2f76c85a81
5 changed files with 160 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/videosupervision/uav.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

44
src/views/sys/exception/VideoSupervision.vue
View File

@ -22,7 +22,7 @@
<!-- case list -->
<CaseList></CaseList>
<!-- uav -->
<UAV></UAV>
<UAV @toPosition="toPosition" @handlerUpdateUavLayerData="handlerUpdateUavLayerData" @handlerLayerButtonClick="handlerLayerButtonClick"></UAV>
</div>
<Monitor :currentMonitor="monitorInfo" @register="registerModal" />
@ -47,8 +47,8 @@
const { createConfirm } = useMessage();
// layer control
const MapboxComponent = ref();
function handlerLayerButtonClick(item) {
console.log(item);
MapboxComponent.value.handlerChangeLayerVisible(item.value, item.checked);
}
@ -79,10 +79,46 @@
monitorInfo.value = val;
openMonitorModal(true, val);
}
onMounted(() => {
// to positon
function toPosition(lngLat){
MapboxComponent.value.handlerLocation(lngLat,18);
}
// update uav layer data
function handlerUpdateUavLayerData(uavlist){
let uavLayerGeoJson = {
"type": "FeatureCollection",
"features": [
]
}
uavlist?.forEach((item,index)=>{
let feature = {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [parseFloat(item.lng), parseFloat(item.lat)]
},
"properties": {
"account":item.account,
"ip":item.ip,
"model":item.model,
"lng":item.lng,
"lat":item.lat,
}
}
uavLayerGeoJson.features.push(feature)
})
MapboxComponent.value.handlerUpdateUavLayer(uavLayerGeoJson);
}
onMounted(() => {
// getWeather();
getFireUserLoginName();
});
});
</script>
<style type="less" scoped>

6
src/views/sys/exception/VideoSupervision/layercontrol/index.vue
View File

@ -29,12 +29,12 @@ const layerButtons = ref([
checked:false,
},{
lable:"影像图",
value:"",
value:"yingxiang",
checked:false,
},{
lable:"导航图",
value:"",
checked:false,
value:"dianzi",
checked:true,
},
])

70
src/views/sys/exception/VideoSupervision/map/map.vue
View File

@ -63,16 +63,7 @@
},
},
layers: [
{
id: 'dianzi',
type: 'raster',
source: 'dianzi',
minzoom: 0,
maxzoom: 18,
layout: {
visibility: 'none',
},
},
{
id: 'dianzi-biaozhu',
type: 'raster',
@ -80,7 +71,7 @@
minzoom: 0,
maxzoom: 18,
layout: {
visibility: 'none',
visibility: 'visible',
},
},
{
@ -90,7 +81,7 @@
minzoom: 0,
maxzoom: 18,
layout: {
visibility: 'visible',
visibility: 'none',
},
},
{
@ -102,6 +93,15 @@
layout: {
visibility: 'none',
},
},{
id: 'dianzi',
type: 'raster',
source: 'dianzi',
minzoom: 0,
maxzoom: 18,
layout: {
visibility: 'visible',
},
},
],
},
@ -537,6 +537,7 @@
*
* */
function handlerChangeLayerVisible(layerName, checked) {
if(map.getLayer(layerName)){
if (checked) {
map.setLayoutProperty(layerName, 'visibility', 'visible');
} else {
@ -544,6 +545,8 @@
}
}
}
// 切换县区
function handlerChangeCounty(county, type = '') {
handlerDealCountry(county.name);
@ -749,11 +752,54 @@
});
}
// 无人机图层
function handlerUpdateUavLayer(uavLayerGeoJson){
if(map.getSource("uavSource")){
map.getSource("uavSource").setData(uavLayerGeoJson);
}else{
map.loadImage('/videosupervision/uav.png', function (error, image) {
if (error) throw error;
if (!map.hasImage('uavIcon')) {
map.addImage('uavIcon', image);
}
});
map.addSource('uavSource', {
type: 'geojson',
data: uavLayerGeoJson,
});
map.addLayer({
id: 'uavlayer',
type: 'symbol',
source: 'uavSource',
layout: {
'icon-image': 'uavIcon',
'icon-size': 1,
'text-field': ['get', 'account'],
'text-size': 14,
'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
'text-offset': [0, 1.8],
'text-anchor': 'top',
'text-allow-overlap': false,
visibility: 'visible',
},
paint: {
'text-color': '#fff',
'text-halo-color':"#000",
'text-halo-width': 1,
},
});
}
}
// 抛出函数
defineExpose({
handlerChangeCounty, // 切换县区
handlerChangeLayerVisible, // 控制图层显示隐藏
handlerLoadPolygon,
handlerLocation, // 定位
handlerUpdateUavLayer, // 无人机图层
});
</script>
<style type="less" scoped>

61
src/views/sys/exception/VideoSupervision/uav/uav.vue
View File

@ -3,7 +3,7 @@
<div class="title">
航飞实景
<div class="switch-button">
<a-switch v-model:checked="checked" />
<a-switch v-model:checked="uavLayer.checked" @change="handlerLayerButtonClick" />
</div>
</div>
<div class="uav-list-container">
@ -18,17 +18,32 @@
<p>暂无无人机巡航</p>
</div>
</div>
<div class="video-container" v-show="isShowPlayer">
<div class="video-container" v-if="isShowPlayer">
<div class="close-video-button" @click="closePlayer">
<CloseOutlined />
</div>
<video class="video-contain" id="video"></video>
</div>
</div>
</template>
<script lang="ts" setup>
import {PlayCircleOutlined,EnvironmentOutlined} from "@ant-design/icons-vue"
import {PlayCircleOutlined,EnvironmentOutlined,CloseOutlined} from "@ant-design/icons-vue"
import {ref,defineEmits} from 'vue';
const uavLayer = ref({
lable:"航飞区域",
value:"uavlayer",
checked:true,
})
const checked = ref<Boolean>(true);
const emits = defineEmits(["toPosition"])
const emits = defineEmits(["toPosition","handlerUpdateUavLayerData","handlerLayerButtonClick"])
function handlerLayerButtonClick(item){
uavLayer.value.checked = item;
emits("handlerLayerButtonClick",uavLayer.value);
}
function toPosition(item){
emits("toPosition",[item.lng,item.lat]);
@ -180,14 +195,14 @@ if (isJson(evt.detail.data)){
}
const list = ref([
{"account":"13280580815","createtime":"2023-03-23 15:44:38","height":0.5,"ip":"192.168.10.101","lat":24.999998687396594,"lng":113.95890203784971,"model":"Mavic Air 2"},
{"account":"117861857725","createtime":"2023-03-23 15:44:38","height":0.5,"ip":"192.168.10.102","lat":24.999998687396594,"lng":113.95890203784971,"model":"Mavic Air 3"},
{"account":"15069987814","createtime":"2023-03-23 15:44:38","height":0.5,"ip":"192.168.10.103","lat":24.999998687396594,"lng":113.95890203784971,"model":"Mavic Air 4"}
]);
let currentUav = null;
function isUAVHave(ip){
// 如果匹配到IP就删除掉
list.value.forEach((item,index)=>{
@ -197,6 +212,7 @@ function isUAVHave(ip){
})
console.log("uavlist",list.value);
}
function isAddUav(obj){
let idx = null;
let uav = list.value.find((item,index)=>{
@ -210,7 +226,7 @@ function isAddUav(obj){
}else{
list.value[idx] = obj;
}
console.log("uavlist",list.value);
emits("handlerUpdateUavLayerData",list.value);
}
@ -221,20 +237,24 @@ window.addEventListener("onmessageWS", getSocketData);
const isShowPlayer = ref<Boolean>(false);
let player = null;
function closePlayer(){
isShowPlayer.value = false;
player = null;
}
function handlerPlayVideo(item){
let phone = item.account;
if(phone){
isShowPlayer.value = true;
currentUav = phone;
window.websocket.send(phone);
setTimeout(function(){
if (player) {
player.src("http://live.hopetrytech.com/live/" + phone + ".flv");
} else {
player = TCPlayer("video", {});
player.src("http://live.hopetrytech.com/live/" + phone + ".flv");
}
},500);
}else{
alert("no");
}
@ -247,10 +267,6 @@ function handlerPlayVideo(item){
</script>
<style type="less" scoped>
.video-contain {
width: 100%;
height: 100%;
}
.uav-container{
width: 418px;
@ -342,6 +358,23 @@ function handlerPlayVideo(item){
right:0px;
z-index:1000;
background:#041B36;
.video-contain {
width: 100%;
height: 100%;
}
.close-video-button{
position:absolute;
top:0px;
right:0px;
background:rgba(0,0,0,0.4);
z-index:1001;
color:#fff;
padding:10px;
cursor:pointer;
&:hover{
color:#408eff;
}
}
}
}
</style>