优化视频连接cgi逻辑

package.json

@@ -24,6 +24,8 @@
     "js-cookie": "^3.0.0-rc.1",
     "mockjs": "^1.1.0",
     "remixicon": "^2.5.0",
+    "video.js": "^7.17.0",
+    "videojs-contrib-hls": "^5.15.0",
     "vue": "^3.2.18",
     "vue-router": "^4.0.3",
     "vuex": "^4.0.0"

src/main.js

@@ -19,6 +19,8 @@ import * as echarts from 'echarts';
 import '@/icons'
 import SvgIcon from "@/components/SvgIcon"
 
+import 'video.js/dist/video-js.css'
+
 /**
  * @author chuzhixin 1204505056@qq.com
  * @description 正式环境默认使用mock，正式项目记得注释后再打包
@@ -33,22 +35,22 @@ var app = createApp(App)
 app.config.globalProperties.$echarts = echarts
 
 app
-  .component("svg-icon", SvgIcon)
-  .use(store)
-  .use(router)
-  .use(ElementPlus, { locale: zhCn, size: 'small' })
-  .use(Antd)
-  .mount('#app')
+    .component("svg-icon", SvgIcon)
+    .use(store)
+    .use(router)
+    .use(ElementPlus, { locale: zhCn, size: 'small' })
+    .use(Antd)
+    .mount('#app')
 
 
 /**
-* @需添加路由拦截 --登录后执行
-*/
+ * @需添加路由拦截 --登录后执行
+ */
 
 
 router.beforeEach((to) => {
-  if (to.path != '/login') {
-    store.commit("publicSiteList");
-    store.commit('publicDeviceList')
-  }
+    if (to.path != '/login') {
+        store.commit("publicSiteList");
+        store.commit('publicDeviceList')
+    }
 })

src/store/index.js

@@ -47,6 +47,7 @@ export default createStore({
         basicInfoConst: 1, // 站点弹窗
 
         siteManageLabelCom: '', //站点管理，树结构label传值
+        siteCameraTimer: '', //站点管理,摄像头定时器
 
 
         /**评估报告指标趋势**/

src/views/dataManage/chainAnalysis/index.vue

@@ -339,6 +339,7 @@ export default defineComponent({
     margin-right: 25px;
     padding: 20px;
     min-width: 200px;
+        overflow-y: auto;
     .chainSwitch {
       margin-top: 20px;
       width: 100%;

src/views/dataManage/demandAnalysis/index.vue

@@ -303,6 +303,7 @@ export default defineComponent({
     margin-right: 25px;
     padding: 20px;
     min-width: 200px;
+        overflow-y: auto;
     .demSwitch {
       margin-top: 20px;
       width: 100%;

src/views/dataManage/energyReport/index.vue

@@ -335,6 +335,7 @@ export default defineComponent({
     margin-right: 25px;
     padding: 20px;
     min-width: 200px;
+        overflow-y: auto;
     .energSwitch {
       margin-top: 20px;
       width: 100%;

src/views/dataManage/sameAnalysis/index.vue

@@ -255,6 +255,7 @@ export default defineComponent({
     margin-right: 25px;
     padding: 20px;
     min-width: 200px;
+        overflow-y: auto;
     .sameSwitch {
       margin-top: 20px;
       width: 100%;

src/views/siteManage/camera/checkVideo.vue

@@ -1,26 +1,61 @@
 <template>
+  <el-dialog
+    :title="dialogTitle"
+    v-model="dialogVisible"
+    width="600px"
+    @close="closeDialog(0)"
+    @open="open"
+  >
+    <div>{{ deviceCode }}</div>
+    <!-- <div style="background: #000">
+      <video
+        id="myVideo"
+        :src="videoUrl"
+        style="width: 100%; height: 400px"
+        poster
+        loop="loop"
+        autoplay="autoplay"
+      ></video>
+    </div> -->
 
-    <el-dialog
-      :title="dialogTitle"
-      v-model="dialogVisible"
-      width="600px"
-  
-      @close="closeDialog(0)"
-       @open="open"
+    <video
+      id="my-video"
+      class="video-js vjs-default-skin"
+      controls
+      preload="auto"
+      style="width: 100%; height: 400px"
+       poster
+        loop="loop"
+        autoplay="autoplay"
     >
-    <div style="width:100%;
-    height:400px;background:#aaa   "></div>
-     
-    </el-dialog>
+      <!-- <source
+        src="http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8"
+        type="application/x-mpegURL"
+      /> -->
 
+      <source
+        src="http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8"
+        type="application/x-mpegURL"
+      />
+
+
+      <!-- <source
+        src='http://47.103.74.123/hls/C59360332.m3u8'
+        type="application/x-mpegURL"
+      /> -->
+    </video>
+  </el-dialog>
 </template>
 
 <script>
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { defineComponent, ref, watchEffect } from 'vue'
 // import * as api from '@/api/siteManage/watchDog.js'
 // import { ElMessage } from 'element-plus'
 
+import videojs from 'video.js'
+import 'videojs-contrib-hls'
+
 export default defineComponent({
   name: 'CheckVideo',
   emits: ['closeDialog'],
@@ -28,24 +63,47 @@ export default defineComponent({
     flag: Boolean,
     dialogTitle: String,
     itemInfo: Object,
+    deviceCode: String,
   },
   setup(props, context) {
     context
-    const store = useStore()
+    // const store = useStore()
     const dialogVisible = ref(false)
     const formInfo = ref(null)
 
     const form = ref([])
 
-     const siteList = ref([])
+    const siteList = ref([])
+    const videoUrl = ref('')
 
     // open(): Dialog弹窗打开之前做的事
     const open = () => {
-      form.value = props.itemInfo.value;
-      siteList.value = store.state.siteList
-      console.log('siteList.value')
-      console.log(siteList.value)
-      console.log('siteList.value')
+      form.value = props.itemInfo.value
+
+      window.setTimeout(function () {
+        videojs(
+          'my-video',
+          {
+            bigPlayButton: false,
+            textTrackDisplay: false,
+            posterImage: true,
+            errorDisplay: false,
+            controlBar: true,
+          },
+          function () {
+            // alert(1);
+            console.log(this)
+            
+            this.play()
+          }
+        )
+      }, 5000)
+
+      // videoUrl.value = 'http://47.103.74.123/hls/'+props.deviceCode+'.m3u8';
+      videoUrl.value =
+        'http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8'
+
+      // alert(props.deviceCode)
     }
 
     const options = [
@@ -91,7 +149,6 @@ export default defineComponent({
       }
     }
 
-
     return {
       closeDialog,
       dialogVisible,
@@ -101,7 +158,7 @@ export default defineComponent({
       siteList,
       form,
       open,
-    
+      videoUrl,
     }
   },
 })
@@ -115,9 +172,9 @@ export default defineComponent({
 
 // label样式
 .el-form-item__label {
-    width: 150px
+  width: 150px;
 }
 .el-form-item__content {
-    margin-left: 150px
+  margin-left: 150px;
 }
 </style>

src/views/siteManage/camera/index.vue

@@ -36,9 +36,18 @@
 
     <!-- 表格start -->
 
-    <view v-if="loadingStatus" class="loadingMask">Loading...</view>
-
-    <el-table :data="deviceData" border stripe :header-cell-style="headClass">
+    <!-- <view v-if="loadingStatus" class="loadingMask">Loading...</view> -->
+    <div></div>
+
+    <el-table
+      :data="deviceData"
+      border
+      stripe
+      :header-cell-style="headClass"
+      v-loading="loadingStatus"
+      element-loading-text="摄像头打开中...."
+      element-loading-background="rgba(255, 255, 255, 0.6)"
+    >
       <el-table-column prop="status" align="center" label="状态" width="50">
         <template #default="scope">
           <el-avatar
@@ -126,7 +135,10 @@
 
       <el-table-column fixed="right" label="视频画面" width="100">
         <template #default="scope">
-          <a @click="open_video(scope.row)">查看</a>
+          <a v-if="scope.row.ALIVEVALUE == 3" @click="open_video(scope.row)">
+            查看
+          </a>
+          <span v-else style="color: #aaa">--</span>
         </template>
       </el-table-column>
     </el-table>
@@ -162,6 +174,7 @@
       :itemInfo="tableItem"
       @closeDialog="closeDialog"
       :flag="showDialog2"
+      :deviceCode="deviceCode"
     ></check-video>
     <!--视频弹框组件结束-----------------------end-->
 
@@ -171,7 +184,14 @@
 
 <script>
 import { useStore } from 'vuex'
-import { defineComponent, ref, reactive, onMounted, watch } from 'vue'
+import {
+  defineComponent,
+  ref,
+  reactive,
+  onMounted,
+  watch,
+  onUnmounted,
+} from 'vue'
 import DialogComponent from './dialogComponent'
 import checkVideo from './checkVideo'
 import * as api from '@/api/siteManage/camera.js'
@@ -210,6 +230,8 @@ export default defineComponent({
     const reCount = ref(0)
     const count = ref(0)
     const loadingStatus = ref(false)
+    const timer = ref('')
+    const deviceCode=ref('')
 
     // 表头样式设置
     const headClass = () => {
@@ -298,7 +320,9 @@ export default defineComponent({
     // 关闭操作
     const closeDialog = () => {
       ;(showDialog.value = false), (showDialog2.value = false)
+      count.value=0
       videoMonitoringDeviceList()
+      chk_video()
     }
 
     //删除 是否删除  ---- 是
@@ -385,6 +409,7 @@ export default defineComponent({
         .then((response) => {
           console.log('response cgi')
           console.log(response.data.RESULT.LIST)
+          console.log(openId.value)
           onLineVideoList.value = response.data.RESULT.LIST
 
           if (openId.value.length > 0) {
@@ -392,16 +417,20 @@ export default defineComponent({
             console.log('doododododododo')
             for (var n = 0; n < onLineVideoList.value.length; n++) {
               if (openId.value == onLineVideoList.value[n].DEVICE) {
-               
+                console.log('再次打开摄像头')
+                console.log(openId.value)
+                console.log(onLineVideoList.value[n].DEVICE)
+                console.log(onLineVideoList.value[n].ONAIR)
                 reCount.value++
-                console.log( reCount.value)
+                console.log(reCount.value)
                 if (onLineVideoList.value[n].ONAIR) {
-                  if (count.value > 2) {
+                  if (++count.value > 2) {
                     // var mask = document.getElementById('videomask');
                     // if (mask != undefined) {
                     // 	removeDIV('videomask');
                     // }
                     loadingStatus.value = false
+
                     alert('可以打开视频详情并传参')
                     // uni.navigateTo({
                     // 	url: '/pages/videoDetail/videoDetail?deviceType=2&companyCode=' +
@@ -409,22 +438,42 @@ export default defineComponent({
                     // 		onLineVideoList.value[n].DEVICE +
                     // 		'',
                     // });
+
+                    tableItem.value = {
+                      id: '',
+                      stationName: '',
+                      watchName: '',
+                      watchCode: '',
+                      siteList: [],
+                      done: '',
+                      guaZai: '',
+                      checked: true,
+                      resource: '',
+                    }
+                    dialogTitle.value = '查看视频'
+                    showDialog2.value = true;
                   } else {
-                    setTimeout(chk_video(), 5000)
+                    store.state.siteCameraTimer = setTimeout(chk_video, 5000)
                   }
                 } else {
-                  if (reCount.value > 7) {
+                  if (reCount.value > 20) {
                     // var mask = document.getElementById('videomask');
                     // if (mask != undefined) {
                     // 	removeDIV('videomask');
                     // }
                     loadingStatus.value = false
-                    // alert('远程摄像头链接超时，请稍后再试')
+                    alert('远程摄像头链接超时，请稍后再试')
+                    // ElMessage({
+                    //   duration: 5000,
+                    //   showClose: true,
+                    //   message: '远程摄像头链接超时，请稍后再试.',
+                    //   type: 'warning',
+                    // })
 
                     // $("#myPopup").popup("open");
                     break
                   }
-                  setTimeout(chk_video(), 5000)
+                  store.state.siteCameraTimer = setTimeout(chk_video, 5000)
                 }
               }
             }
@@ -452,25 +501,20 @@ export default defineComponent({
 
     // 查看视频
     const open_video = (item) => {
-      console.log(item)
-      // start
-
+      deviceCode.value=item.deviceCode
+      // alert(deviceCode.value)
+      // console.log(item)
       if (openId.value != item.deviceCode) {
         openId.value = item.deviceCode
       }
-      console.log(onLineVideoList.value)
+      // console.log(onLineVideoList.value)
       for (var n = 0; n < onLineVideoList.value.length; n++) {
-      
         if (onLineVideoList.value[n].DEVICE == openId.value) {
+          console.log('第一次打开时设备及其状态')
+          console.log(onLineVideoList.value[n].DEVICE)
+          console.log(openId.value)
+          console.log(onLineVideoList.value[n].ONAIR)
           if (onLineVideoList.value[n].ONAIR) {
-            // uni.navigateTo({
-            //   url:
-            //     '/pages/videoDetail/videoDetail?deviceType=2&companyCode=' +
-            //     this.companyCode +
-            //     '&deviceCode=' +
-            //     item.DEVICE +
-            //     '',
-            // })
             alert('打开详情页并传参')
             tableItem.value = {
               id: '',
@@ -492,9 +536,6 @@ export default defineComponent({
       count.value = 0
       reCount.value = 0
       loadingStatus.value = true
-      // alert('一些loading操作')
-      alert('操作打开')
-
       axios
         .post(
           'https://fire.usky.cn:8443/YtIoT/cgi-bin/demo2.cgi',
@@ -515,11 +556,8 @@ export default defineComponent({
         )
         .then((response) => {
           response
-         
-          setTimeout(function () {
-             alert('再次打开摄像头')
+          store.state.siteCameraTimer = window.setTimeout(function () {
             chk_video()
-            // console.log('打印')
           }, 5000)
         })
 
@@ -538,12 +576,14 @@ export default defineComponent({
       (newVal) => {
         console.log('newVal')
         console.log(newVal)
+
         labelCom.value = store.state.siteManageLabelCom
         if (props.activeName == 'five') {
+          // window.clearTimeOut() //关闭定时器
+          reCount.value = 0
+          openId.value = ''
+          loadingStatus.value = false
           videoMonitoringDeviceList()
-          // setTimeout(function () {
-            
-          // }, 100)
           chk_video()
         }
       }
@@ -552,16 +592,23 @@ export default defineComponent({
       () => props.activeName,
       (newVal) => {
         if (newVal == 'five') {
+          //  clearTimeOut(timer.value)
+          // window.clearTimeOut() //关闭定时器// alert('关闭定时器?')
+          reCount.value = 0
+          openId.value = ''
+          loadingStatus.value = false
+
           videoMonitoringDeviceList()
-          // setTimeout(function () {
-            
-          // }, 100)
           chk_video()
         }
       }
     )
 
     onMounted(() => {})
+    onUnmounted(() => {
+      // alert('摧毁')
+      // clearTimeOut(timer.value)
+    })
 
     return {
       deviceData,
@@ -608,6 +655,8 @@ export default defineComponent({
       count,
       loadingStatus,
       open_video,
+      timer,
+      deviceCode
     }
   },
 })

src/views/siteManage/index.vue

@@ -322,6 +322,17 @@ export default defineComponent({
       // watch 刚被创建的时候不执行
       { lazy: true }
     )
+     watch(
+      activeName,
+      (newCount, old, clear) => {
+        newCount,old,clear
+        // 清除定时器
+        clear(() => clearTimeout(store.state.siteCameraTimer))
+      },
+      // watch 刚被创建的时候不执行
+      { lazy: true }
+    )
+
 
     // 新建分组关闭操作
     const closeDialog = (res) => {