增加分屏播放的全屏功能

web_src/package.json

@@ -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",

web_src/src/components/common/GroupTree.vue

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

web_src/src/components/common/RegionTree.vue

@@ -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`,

web_src/src/components/live.vue

@@ -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-1fenpingshi btn" :class="{active:spiltIndex === 0}" @click="spiltIndex=0"/>
-          <i class="iconfont icon-a-mti-6fenpingshi btn" :class="{active: spiltIndex === 2}" @click="spiltIndex=2"/>
+            <i class="iconfont icon-a-mti-4fenpingshi btn" :class="{active: spiltIndex === 1}" @click="spiltIndex=1"/>
-          <i class="iconfont icon-a-mti-9fenpingshi btn" :class="{active: spiltIndex === 3}" @click="spiltIndex=3"/>
+            <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;

web_src/src/components/map.vue

@@ -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)

web_src/src/layout/UiHeader.vue

@@ -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>