Merge branch 'hi-ucs-dev' of http://192.168.124.50:3000/wuhongjian/hi-ucs into hi-ucs-dev

西海岸添加关闭所有视频
2022-11-22 15:04:51 +08:00 · 2022-11-22 15:04:49 +08:00
4 changed files with 203 additions and 169 deletions
--- a/front/public/static/config/basicConfig.js
+++ b/front/public/static/config/basicConfig.js
@ -1,15 +1,15 @@
 /*
 * @Author: hisense.wuhongjian
 * @Date: 2020-07-07 16:03:23
- * @LastEditors: Light
- * @LastEditTime: 2022-11-14 18:00:12
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-11-22 14:37:59
 * @Description: 系统静态参数配置
 */
 var _global = {}
 var CONFIGITEM = {
  // version: 'qingdao', //青岛
-  // version: 'xihaian', // 西海岸
-  version: 'dev', // 开发
+  version: 'xihaian', // 西海岸
+  // version: 'dev', // 开发
  // version: 'zhanTingDev', // 展厅dev (2022-09-13:姜永超让添加)
  // version: 'qingdao', // 测试
  //version: 'frp', // 内网穿透
@ -68,6 +68,8 @@ var CONFIGITEM = {
        cameraUrl: '192.168.124.236:9537', // 远雄（不挂vpn可直接连）
      },
      backUrl: 'http://10.134.135.9:9797',
+      // apiURL: 'http://10.134.135.92:8888/renren-admin',
+      apiURL: 'http://192.168.124.233:8888/ucs-admin',
      previewUrl: 'http://10.134.135.9:9796/',
      // websocketURL: '10.134.135.9:8888/ucs-admin', // 正式环境
      // websocketURL: '10.134.135.92:8888/ucs-admin', // 测试环境
--- a/front/src/views/home/components/H5Player.vue
+++ b/front/src/views/home/components/H5Player.vue
@ -2,23 +2,23 @@
 海康H5Player
 -->
 <template>
-  <div id='player' style="width:800px;height:600px;z-index:9999"></div>
+  <div id="player" style="width: 800px; height: 600px; z-index: 9999"></div>
 </template>
 <script>
-const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
-const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
-import { message } from 'ant-design-vue'
+  const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
+  const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
+  import { message } from 'ant-design-vue'
  export default {
    name: 'H5Player',
    props: {
-     videoUrl:{
+      videoUrl: {
        type: String,
        default: '',
      },
-     index:{
+      index: {
        type: Number,
        default: 0,
-     }
+      },
    },
    data() {
      return {
@ -30,35 +30,37 @@ import { message } from 'ant-design-vue'
        urls: {
          realplay: 'ws://10.19.147.22:559/EUrl/q2jQie4',
          talk: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S',
-     playback: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S'
+          playback:
+            'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S',
        },
        playback: {
          startTime: '2021-07-26T00:00:00',
          endTime: '2021-07-26T23:59:59',
          valueFormat: '',
          seekStart: '2021-07-26T12:00:00',
-     rate: ''
+          rate: '',
        },
        muted: true,
        volume: 50,
        volumeOnSvg: {
-     template: '<svg t="1624453273744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1421" width="200" height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z" p-id="1422"></path></svg>'
+          template:
+            '<svg t="1624453273744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1421" width="200" height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z" p-id="1422"></path></svg>',
        },
        volumeOffSvg: {
-     template: '<svg t="1624453193279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z" p-id="9148"></path></svg>'
+          template:
+            '<svg t="1624453193279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z" p-id="9148"></path></svg>',
        },
        recordStartState: 0,
-   recordStartText: '录像'
+        recordStartText: '录像',
      }
    },
-    created(){
-    },
+    created() {},
    mounted() {
      this.init()
      this.createPlayer()
      this.arrangeWindow()
      //videoUrl this.realplay(this.videoUrl,0);//循环传过来的数组进行播放，index根据选中的个数
-      this.realplay(this.videoUrl,0);
+      this.realplay(this.videoUrl, 0)
      //this.realplay('wss://10.134.135.44:6014/proxy/10.10.20.14:559/openUrl/y3mFfcA',0);
    },
    watch: {
@ -67,99 +69,120 @@ import { message } from 'ant-design-vue'
        handler(newVal, oldVal) {
          console.log('oldVal:', oldVal)
          console.log('newVal:', newVal)
-                   //this.realplay(newVal,0);   
+          if (newVal) {
+            this.realplay(newVal, 0)
+          }
        },
        // 立即处理 进入页面就触发
-                immediate: true
-            }
+        immediate: true,
+      },
    },
    methods: {
      // 海康视频初始化加载
-     init () {
+      init() {
        // 设置播放容器的宽高并监听窗口大小变化
        window.addEventListener('resize', () => {
          this.player.JS_Resize()
        })
      },
-     createPlayer () {
+      createPlayer() {
        //console.log('this.index',this.index);
        this.player = new window.JSPlugin({
          //szId: 'player'+this.index,
          szId: 'player',
-       szBasePath: "/util/",  //引入静态资源地址，我这里静态资源在public/js文件存放，所以设置为js
+          szBasePath: '/util/', //引入静态资源地址，我这里静态资源在public/js文件存放，所以设置为js
          iMaxSplit: 4,
          iCurrentSplit: 4,
          openDebug: true,
          oStyle: {
            borderSelect: '#FFCC00',
-       }
+          },
        })
        // 事件回调绑定
        this.player.JS_SetWindowControlCallback({
-       windowEventSelect: function (iWndIndex) {  //插件选中窗口回调
-         console.log('windowSelect callback: ', iWndIndex);
+          windowEventSelect: function (iWndIndex) {
+            //插件选中窗口回调
+            console.log('windowSelect callback: ', iWndIndex)
          },
-       pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {  //插件错误回调
-         console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
+          pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
+            //插件错误回调
+            console.log('pluginError callback: ', iWndIndex, iErrorCode, oError)
          },
-       windowEventOver: function (iWndIndex) {  //鼠标移过回调
+          windowEventOver: function (iWndIndex) {
+            //鼠标移过回调
            //console.log(iWndIndex);
          },
-       windowEventOut: function (iWndIndex) {  //鼠标移出回调
+          windowEventOut: function (iWndIndex) {
+            //鼠标移出回调
            //console.log(iWndIndex);
          },
-       windowEventUp: function (iWndIndex) {  //鼠标mouseup事件回调
+          windowEventUp: function (iWndIndex) {
+            //鼠标mouseup事件回调
            //console.log(iWndIndex);
          },
-       windowFullCcreenChange: function (bFull) {  //全屏切换回调
-         console.log('fullScreen callback: ', bFull);
+          windowFullCcreenChange: function (bFull) {
+            //全屏切换回调
+            console.log('fullScreen callback: ', bFull)
          },
-       firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {  //首帧显示回调
-         console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
-       },
-       performanceLack: function () {  //性能不足回调
-         console.log('performanceLack callback: ');
-       }
-     });
-     },
-   arrangeWindow () {
-     const splitNum = this.splitNum
-     this.player.JS_ArrangeWindow(splitNum).then(
-       () => { console.log(`arrangeWindow to ${splitNum}x${splitNum} success`) },
-        e => { console.error(e) }
+          firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {
+            //首帧显示回调
+            console.log(
+              'firstFrame loaded callback: ',
+              iWndIndex,
+              iWidth,
+              iHeight
            )
          },
-// 初始化结束
-// 视频预览
-   realplay (playURL, index1) {
+          performanceLack: function () {
+            //性能不足回调
+            console.log('performanceLack callback: ')
+          },
+        })
+      },
+      arrangeWindow() {
+        const splitNum = this.splitNum
+        this.player.JS_ArrangeWindow(splitNum).then(
+          () => {
+            console.log(`arrangeWindow to ${splitNum}x${splitNum} success`)
+          },
+          (e) => {
+            console.error(e)
+          }
+        )
+      },
+      // 初始化结束
+      // 视频预览
+      realplay(playURL, index1) {
        this.mode = 1 //解码方式：0普通模式 1高级模式
        const { player, mode, urls } = this,
          index = player.currentWindowIndex
        // playURL = this.realplay
-
+        console.log('视频播放地址', playURL)
        player.JS_Play(playURL, { playURL, mode }, index1).then(
          () => {
            console.log('realplay success')
          },
-       e => { 
-        console.error(e);
-        message.error('请联系视频提供方!')
+          (e) => {
+            console.error(e)
+            // message.error('请联系视频提供方!')
          }
        )
      },
      // 关闭所有视频
-   stopAllPlay () {
+      stopAllPlay() {
        this.player.JS_StopRealPlayAll().then(
          () => {
            this.playback.rate = 0
            console.log('stopAllPlay success')
            this.closeVideoTree()
          },
-       e => { console.error(e) }
+          (e) => {
+            console.error(e)
+          }
        )
      },
      // 关闭单个视频
-   stopPlay () {
+      stopPlay() {
        this.player.JS_Stop().then(
          () => {
            this.playback.rate = 0
@ -168,10 +191,16 @@ import { message } from 'ant-design-vue'
            const index = this.player.currentWindowIndex
            this.selectAisle(this.videoList[index], index)
          },
-         e => { console.error(e) }
+          (e) => {
+            console.error(e)
+          }
        )
      },
    },
+    beforeUnmount() {
+      console.log('关闭所有视频')
+      this.stopAllPlay()
+    },
  }
 </script>
 <style lang="less">
--- a/front/src/views/home/infrastructurePageXha.vue
+++ b/front/src/views/home/infrastructurePageXha.vue
@ -619,10 +619,13 @@
        v-model:visible="operationPopupFlag"
        :width="1000"
        :title="'视频监控点选择'"
-        footer={null}
+        destroyOnClose
+        footer="{null}"
      >
        <!--地图上点击之后弹出的操作弹窗-->
-      <camera-popup-on-map :camera-Data-List="cameraDataList"></camera-popup-on-map>
+        <camera-popup-on-map
+          :camera-Data-List="cameraDataList"
+        ></camera-popup-on-map>
      </a-modal>
    </div>
  </div>
@ -964,8 +967,8 @@
    mybus.off('openOperationPopup')
    mybus.on('openOperationPopup', (data) => {
      //console.log('pppppppppppppp',data);
-          cameraDataList.value = data;
-           operationPopupFlag.value = true;
+      cameraDataList.value = data
+      operationPopupFlag.value = true
    })
  })
  const selectedList = ref([])
@ -2243,7 +2246,7 @@
  }

  //地图视频操作弹窗
-  const operationPopupFlag = ref(false)//地图操作弹窗显示标志位
+  const operationPopupFlag = ref(false) //地图操作弹窗显示标志位
 </script>
 <style lang="less" scoped>
  .infrastructrueBox {
@ -2390,7 +2393,7 @@
    .map-contain {
      // width: 9.46rem;
      height: 6.9rem;
-      margin-left:0;
+      margin-left: 0;
      position: relative;
    }
  }
@ -2599,14 +2602,14 @@
      overflow-y: auto;
    }
  }
-  .camera-popup{
+  .camera-popup {
    .ant-modal-body {
      height: 720px !important;
      overflow-y: hidden;
      overflow-x: hidden;
-      padding:14px;
+      padding: 14px;
    }
-    .ant-modal-footer{
+    .ant-modal-footer {
      display: none;
    }
  }
--- a/front/src/views/home/videoSurveillance/components/CameraPopupOnMap.vue
+++ b/front/src/views/home/videoSurveillance/components/CameraPopupOnMap.vue
@ -25,7 +25,7 @@
            </a-carousel>
          <div class="operation-content" style="position:ab">
              <div class="video-content">
-              <h5-player :video-url="videoUrl"></h5-player>
+              <h5-player :video-url="videoUrl" ref="hPlayer"></h5-player>
              </div>
              <div class="text-label">
                <span>{{defaultIndex+1}}</span>/<span>{{cameraDataList.length}}</span>
Author	SHA1	Message	Date
wuhongjian	a24391ff1e	Merge branch 'hi-ucs-dev' of http://192.168.124.50:3000/wuhongjian/hi-ucs into hi-ucs-dev	2022-11-22 15:04:51 +08:00
wuhongjian	851eb37c35	西海岸添加关闭所有视频	2022-11-22 15:04:49 +08:00