Thirdparty
/
wvp-GB28181-pro
mirror of https://github.com/648540858/wvp-GB28181-pro
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

增加分屏播放的全屏功能

pull/1642/head
648540858 2024-09-12 23:15:10 +08:00
parent 42427a2b8c
commit 01179d90e3
6 changed files with 37 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web_src/package.json
View File

@ -20,6 +20,7 @@
"moment": "^2.29.1",
"ol": "^6.14.1",
"postcss-pxtorem": "^5.1.1",
"screenfull": "5.1.0",
"uuid": "^8.3.2",
"v-charts": "^1.19.0",
"vue": "^2.6.11",

4
web_src/src/components/common/GroupTree.vue
View File

@ -80,6 +80,10 @@ export default {
type: 0
}]);
} else {
if (node.data.leaf) {
resolve([]);
return
}
this.$axios({
method: 'get',
url: `/api/group/tree/list`,

4
web_src/src/components/common/RegionTree.vue
View File

@ -80,6 +80,10 @@ export default {
type: 0
}]);
} else if (node.data.deviceId.length <= 8) {
if (node.data.leaf) {
resolve([]);
return
}
this.$axios({
method: 'get',
url: `/api/region/tree/list`,

18
web_src/src/components/live.vue
View File

@ -5,15 +5,20 @@
<DeviceTree :clickEvent="clickEvent" :contextMenuEvent="contextMenuEvent"></DeviceTree>
</el-aside>
<el-container>
<el-header height="5vh" style="text-align: left;font-size: 17px;line-height:5vh">
<el-header height="5vh" style="font-size: 17px;line-height:5vh; display: grid; grid-template-columns: 1fr 1fr">
<div style="text-align: left">
分屏:
<i class="iconfont icon-a-mti-1fenpingshi btn" :class="{active:spiltIndex === 0}" @click="spiltIndex=0"/>
<i class="iconfont icon-a-mti-4fenpingshi btn" :class="{active: spiltIndex === 1}" @click="spiltIndex=1"/>
<i class="iconfont icon-a-mti-6fenpingshi btn" :class="{active: spiltIndex === 2}" @click="spiltIndex=2"/>
<i class="iconfont icon-a-mti-9fenpingshi btn" :class="{active: spiltIndex === 3}" @click="spiltIndex=3"/>
</div>
<div style="text-align: right">
<i class="iconfont icon-quanping1 btn" @click="fullScreen()"/>
</div>
</el-header>
<el-main style="padding: 0; margin: 0 auto; background-color: #a9a8a8" >
<div :style="{width: '151vh', height: '85vh', display: 'grid', gridTemplateColumns: layout[spiltIndex].columns,
<div ref="playBox" :style="{width: '151vh', height: '85vh', display: 'grid', gridTemplateColumns: layout[spiltIndex].columns,
gridTemplateRows: layout[spiltIndex].rows, gap: '4px', backgroundColor: '#a9a8a8'}">
<div v-for="i in layout[spiltIndex].spilt" :key="i" class="play-box" :class="getPlayerClass(spiltIndex, i)"
@click="playerIdx = (i-1)">
@ -32,6 +37,7 @@
import uiHeader from "../layout/UiHeader.vue";
import player from './common/jessibuca.vue'
import DeviceTree from './common/DeviceTree.vue'
import screenfull from "screenfull";
export default {
name: "live",
@ -236,6 +242,11 @@ export default {
console.log(data);
window.localStorage.setItem('playData', JSON.stringify(data))
},
fullScreen: function (){
if (screenfull.isEnabled) {
screenfull.toggle(this.$refs.playBox);
}
}
}
};
</script>
@ -255,12 +266,11 @@ export default {
}
.redborder {
border: 2px solid rgb(64, 158, 255) !important;
border: 4px solid rgb(0, 198, 255) !important;
}
.play-box {
background-color: #000000;
//border: 2px solid #505050;
display: flex;
align-items: center;
justify-content: center;

38
web_src/src/components/map.vue
View File

@ -107,7 +107,10 @@ export default {
}
}).then((res) => {
if (res.data.code === 0) {
if (!res.data.gbLongitude || res.data.gbLatitude) {
console.log(res.data.data)
console.log(res.data.data.gbLongitude)
console.log(res.data.data.gbLatitude)
if (!res.data.data.gbLongitude || !res.data.data.gbLatitude) {
this.$message.error({
showClose: true,
message: "位置信息不存在"
@ -118,45 +121,20 @@ export default {
}
this.closeInfoBox()
this.layer = this.$refs.map.addLayer([{
position: [res.data.gbLongitude, res.data.gbLatitude],
position: [res.data.data.gbLongitude, res.data.data.gbLatitude],
image: {
src: this.getImageByChannel(res.data),
src: this.getImageByChannel(res.data.data),
anchor: [0.5, 1]
},
data: data
data: res.data.data
}], this.featureClickEvent)
this.$refs.map.panTo([data[this.longitudeStr], data[this.latitudeStr]], mapParam.maxZoom)
this.$refs.map.panTo([res.data.data.gbLongitude, res.data.data.gbLatitude], mapParam.maxZoom)
}
}
}).catch(function (error) {
console.log(error);
});
this.device = device;
if (data.channelId && !isCatalog) {
// 点击通道
if (data[this.longitudeStr] * data[this.latitudeStr] === 0) {
this.$message.error({
showClose: true,
message: "未获取到位置信息"
})
} else {
if (this.layer != null) {
this.$refs.map.removeLayer(this.layer);
}
this.closeInfoBox()
this.layer = this.$refs.map.addLayer([{
position: [data[this.longitudeStr], data[this.latitudeStr]],
image: {
src: this.getImageByChannel(data),
anchor: [0.5, 1]
},
data: data
}], this.featureClickEvent)
this.$refs.map.panTo([data[this.longitudeStr], data[this.latitudeStr]], mapParam.maxZoom)
}
}
},
contextmenuEventHandler: function (device, event, data, isCatalog) {
console.log(device)

2
web_src/src/layout/UiHeader.vue
View File

@ -6,7 +6,7 @@
<el-menu-item index="/console">控制台</el-menu-item>
<el-menu-item index="/live">分屏监控</el-menu-item>
<el-menu-item index="/map">电子地图</el-menu-item>
<!-- <el-menu-item index="/map">电子地图</el-menu-item>-->
<el-menu-item index="/deviceList">国标设备</el-menu-item>
<el-menu-item index="/streamPushList">推流列表</el-menu-item>
<el-menu-item index="/streamProxyList">拉流代理</el-menu-item>