界面优化

src/components/nginxVideo.vue

@@ -0,0 +1,128 @@
+<template>
+  <!-- @dblclick="fullscreen" -->
+  <div id="myVideo" style="width: 100%; height: 576px;" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      hkvInfo: {
+        'username': 'admin',
+        'password': 'Hn123456.108',
+        'ip': '192.168.108.248',
+        'port': '554'
+      },
+      dom: {
+        width: 0,
+        height: 576,
+        wndIndex: 0,
+        streamType: 1,
+        channelID: 1
+      },
+      visible: false,
+      status: ''
+    }
+  },
+  computed: {
+    hkId() {
+      return this.hkvInfo.ip + '_' + this.hkvInfo.port
+    }
+  },
+  mounted() {
+    // this.dom.width = document.body.clientWidth
+    // this.dom.height = document.body.clientHeight
+    // console.log('dom:', this.dom)
+
+    if (this.isOk()) {
+      console.log('浏览器支持无插件模式')
+      // this.initDom()
+      this.login()
+    } else {
+      console.error('此浏览器暂不支持··')
+    }
+  },
+  beforeDestroy() {
+    WebVideoCtrl.I_Logout(this.hkId)
+  },
+  methods: {
+    fullscreen() {
+      WebVideoCtrl.I_FullScreen(true)
+    },
+    initDom() {
+      WebVideoCtrl.I_InitPlugin(this.dom.width, this.dom.height, {
+        bWndFull: true,
+        iPackageType: 2,
+        iWndowType: 1,
+        bNoPlugin: true,
+        cbDoubleClickWnd: function(iWndIndex, bFullScreen) {
+          let szInfo = '当前放大的窗口编号：' + iWndIndex
+          if (!bFullScreen) {
+            szInfo = '当前还原的窗口编号：' + iWndIndex
+          }
+          console.log(szInfo)
+        },
+        cbSelWnd: function(xmlDoc) {
+          this.dom.wndIndex = parseInt($(xmlDoc).find('SelectWnd').eq(0).text(), 10)
+          const szInfo = '当前选择的窗口编号：' + this.dom.wndIndex
+          console.log(szInfo)
+        }.bind(this),
+        cbInitPluginComplete: function() {
+          WebVideoCtrl.I_InsertOBJECTPlugin('myVideo')
+        }
+      })
+    },
+    isOk() {
+      console.log('1111')
+      return WebVideoCtrl.I_SupportNoPlugin()
+    },
+    login() {
+      console.log('222')
+      WebVideoCtrl.I_Login(this.hkvInfo.ip, 1, this.hkvInfo.port, this.hkvInfo.username, this.hkvInfo.password, {
+        async: false,
+        success: function(xmlDoc) {
+          console.log('设备: ' + this.hkId + ' 登录成功！')
+          this.play()
+        }.bind(this),
+        error: function(status, xmlDoc) {
+          console.error('设备: ' + this.hkId + '登录失败，状态码: ' + status, xmlDoc)
+        }.bind(this)
+      })
+    },
+    play() {
+      WebVideoCtrl.I_StartRealPlay(this.hkId, {
+        iWndIndex: this.dom.wndIndex,
+        iStreamType: this.dom.streamType,
+        iChannelID: this.dom.channelID,
+        bZeroChannel: false,
+        success: function(xmlDoc) {
+          console.log('预览成功！')
+        },
+        error: function(status, xmlDoc) {
+          if (status === 403) {
+            console.warn('设备不支持Websocket取流！')
+          } else {
+            console.error('预览失败！')
+          }
+        }
+      })
+    },
+    ptzControl(index, isOk, val) {
+      WebVideoCtrl.I_PTZControl(index, isOk, {
+        iPTZSpeed: 4,
+        success: function(xmlDoc) {
+          console.log(val + (isOk ? '结束' : '开始') + '成功！', xmlDoc)
+        },
+        error: function(status, xmlDoc) {
+          console.log(val + (isOk ? '结束' : '开始') + ' 失败！', status, xmlDoc)
+        }
+      })
+    },
+    newTime() {
+      const date = new Date()
+      return date.getFullYear() + '-' + (parseInt(date.getMonth()) + 1) + '-' + date.getDate() + ' ' +
+             date.getHours() + '：' + date.getMinutes() + '：' + date.getSeconds()
+    }
+  }
+}
+</script>

src/views/pageBasement/index.vue

@@ -11,7 +11,7 @@
         </ul>
       </div>
       <div class="content-item">
-        <div class="content-item-title">氢气气体弄懂</div>
+        <div class="content-item-title">氢气气体浓度</div>
         <ul class="content-state state-01">
           <li><p>电池间</p><span class="leakage-state-tip">9%</span></li>
         </ul>