设备管理，视频监测cgi连接

src/views/deviceManage/powerEquip/communicateEquip/index.vue

@@ -201,7 +201,7 @@
 </template>
 <script>
 import { useStore } from 'vuex'
-import { defineComponent, onMounted, ref } from 'vue'
+import { defineComponent, onMounted, ref,watch } from 'vue'
 import insertUpdate from './dialog/insert_update.vue'
 import cloneDialog from './dialog/cloneDialog.vue'
 
@@ -216,8 +216,9 @@ export default defineComponent({
   },
   props: {
     Height: String,
+    activeName:String
   },
-  setup() {
+  setup(props) {
     const store = useStore()
     store
     const pageSize = ref(15)
@@ -225,7 +226,6 @@ export default defineComponent({
     const total = ref(0)
     const filterText = ref('')
     const tableData = ref([])
-    const activeName = ref('powerEquip')
     const dialogBool = ref(false)
     const dialogTitle = ref('')
     const dataList = ref({})
@@ -391,8 +391,19 @@ export default defineComponent({
       return 'background:#FAFAFA !important;color: black;'
     }
 
+    watch(
+      () => props.activeName,
+      (newVal) => {
+        // alert(newVal)
+        if (newVal == 'communicateEquip') {
+          Select()
+        }
+      }
+    )
+
+
     onMounted(() => {
-      Select()
+      
     })
     return {
       headClass,
@@ -415,7 +426,6 @@ export default defineComponent({
       total,
       filterText,
       tableData,
-      activeName,
 
       DialogArray,
       cloneDialogBool,

src/views/deviceManage/powerEquip/index.vue

@@ -144,10 +144,10 @@
         </div>
       </el-tab-pane>
       <el-tab-pane label="视频监测设备" name="videoEquip">
-        <video-Equip :Height="Height"></video-Equip>
+        <video-Equip :Height="Height" :activeName="activeName"></video-Equip>
       </el-tab-pane>
-      <el-tab-pane label="通信设备" name="communicateEquip">
-        <communicate-Equip :Height="Height"></communicate-Equip>
+      <el-tab-pane label="通信设备"  name="communicateEquip">
+        <communicate-Equip :Height="Height" :activeName="activeName"></communicate-Equip>
       </el-tab-pane>
       <!-- <el-tab-pane label="通道列表" name="channelList">
         <channel-List :Height="Height"></channel-List>

src/views/deviceManage/powerEquip/videoEquip/checkVideo.vue

@@ -8,18 +8,20 @@
       @close="closeDialog(0)"
        @open="open"
     >
-    <div style="width:100%;
-    height:400px;background:#aaa   "></div>
+    <div
+      v-html="randerHtml"
+      style="width: 100%; height: 400px; background: #000"
+    ></div>
      
     </el-dialog>
 
 </template>
 
 <script>
-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',
@@ -28,51 +30,58 @@ export default defineComponent({
     flag: Boolean,
     dialogTitle: String,
     itemInfo: Object,
+    deviceCode: String,
   },
   setup(props, context) {
     context
-    const store = useStore()
     const dialogVisible = ref(false)
-    const formInfo = ref(null)
-
-    const form = ref([])
 
-     const siteList = ref([])
+    const videoUrl = ref('')
+    const options = []
+    const player = ref('')
+    const randerHtml = 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')
+
+      // videoUrl.value = 'http://47.103.74.123/hls/'+props.deviceCode+'.m3u8';
+      videoUrl.value ='http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8'
+
+      window.setTimeout(getVideo, 100)
+
     }
+    function getVideo() {
+      randerHtml.value =
+        '<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" style="width: 100%; height: 400px" poster loop="loop" autoplay="autoplay" ></video>'
+
+      let options = {
+        bigPlayButton: false,
+        textTrackDisplay: false,
+        posterImage: true,
+        errorDisplay: false,
+        controlBar: true,
+        autoplay: true,
+        controls: true,
+        sources: [
+          {
+            src: videoUrl.value,
+            type: 'application/x-mpegURL',
+          },
+        ],
+      }
 
-    const options = [
-      {
-        value: '选项1',
-        label: '站点一',
-      },
-      {
-        value: '选项2',
-        label: '站点二',
-      },
-      {
-        value: '选项3',
-        label: '站点三',
-      },
-      {
-        value: '选项4',
-        label: '站点四',
-      },
-      {
-        value: '选项5',
-        label: '站点五',
-      },
-    ]
+      window.setTimeout(function () {
+        player.value = videojs('my-video', options)
+      }, 100)
+    }
 
     // 关闭弹框
     const closeDialog = () => {
+      if (player.value) {
+        player.value.dispose()
+        randerHtml.value = ''
+      }
+
       context.emit('closeDialog', false)
       dialogVisible.value = false
     }
@@ -82,26 +91,16 @@ export default defineComponent({
       dialogVisible.value = props.flag
     })
 
-    const roleValid = (rule, value, callback) => {
-      rule
-      if (value.length === 0) {
-        callback(new Error('角色不能为空'))
-      } else {
-        callback()
-      }
-    }
-
-
     return {
       closeDialog,
       dialogVisible,
       options,
-      roleValid,
-      formInfo,
-      siteList,
-      form,
       open,
-    
+      videoUrl,
+
+      getVideo,
+      player,
+      randerHtml,
     }
   },
 })

src/views/deviceManage/powerEquip/videoEquip/index.vue

@@ -4,10 +4,10 @@
       <div class="videoTopLeft">
         选择站点:
         <el-select
-        filterable
+          filterable
           v-model="store.state.siteId"
           placeholder="请选择"
-          style="width: 150px; margin-right: 20px"
+          style="width: 250px; margin-right: 20px"
         >
           <el-option
             v-for="site in store.state.siteList"
@@ -57,6 +57,11 @@
         stripe
         :header-cell-style="headClass"
         :height="Height"
+
+         v-loading="loadingStatus"
+      element-loading-text="摄像头打开中...."
+      element-loading-background="rgba(255, 255, 255, 0.6)"
+      
       >
         <el-table-column
           prop="stationStatus"
@@ -68,9 +73,9 @@
             <el-avatar
               class="status"
               :style="
-                scope.row.stationStatus == 0
-                  ? 'background-color:red'
-                  : 'background-color:#04F21C'
+                scope.row.ALIVEVALUE == 3
+                  ? 'background-color:#04F21C'
+                  : 'background-color:red'
               "
             ></el-avatar>
           </template>
@@ -121,18 +126,14 @@
           label="sim卡号"
           align="center"
         ></el-table-column>
-        <!-- <el-table-column label="视频画面" align="center" width="150">
+        <el-table-column label="视频画面" align="center" width="150">
           <template #default="scope" style="text-align: center">
-            <el-button
-              type="text"
-              size="small"
-              style="color: #409eff"
-              @click.prevent="LookUp(scope.$index, scope.row)"
-            >
-              查看
-            </el-button>
+           <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-column>
       </el-table>
       <div class="listPagination">
         <el-pagination
@@ -161,18 +162,20 @@
 </template>
 <script>
 import { useStore } from 'vuex'
-import { defineComponent, ref, onMounted } from 'vue'
+import { defineComponent, ref, onMounted,watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import * as api from '@/api/deviceManage/videoEquip.js'
 import checkVideo from './checkVideo'
+import axios from 'axios'
 
 export default defineComponent({
   name: 'powerEquip',
   components: { checkVideo },
   props: {
     Height: String,
+    activeName: String,
   },
-  setup() {
+  setup(props) {
     const store = useStore()
 
     const dialogTitle = ref('')
@@ -182,9 +185,17 @@ export default defineComponent({
     const pageSize = ref(15)
     const currentPage = ref(1)
     const filterText = ref('')
-    const activeName = 'powerEquip'
+    // const activeName = 'powerEquip'
     const tableData = ref([])
 
+    const onLineVideoList = ref([])
+    const openId = ref('')
+    const reCount = ref(0)
+    const count = ref(0)
+    const loadingStatus = ref(false)
+    const timer = ref('')
+    const deviceCode = ref('')
+
     //查看视频画面
     const LookUp = (ind, row) => {
       // alert(2)
@@ -230,9 +241,149 @@ export default defineComponent({
           }
         })
     }
-    onMounted(() => {
-      videoMonitoringDeviceList()
-    })
+    //请求视频cgi数据
+    const chk_video = () => {
+      axios
+        .post(
+          'https://fire.usky.cn:8443/YtIoT/cgi-bin/demo2.cgi',
+          'queryJson:' +
+            JSON.stringify({
+              CMD: 1,
+            }),
+          {
+            headers: {
+              'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+            },
+          }
+        )
+        .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) {
+            // start
+            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)
+                if (onLineVideoList.value[n].ONAIR) {
+                  if (++count.value > 2) {
+                    loadingStatus.value = false
+
+                    dialogTitle.value = '查看视频'
+                    showDialog.value = true
+                  } else {
+                    store.state.siteCameraTimer = setTimeout(chk_video, 5000)
+                  }
+                } else {
+                  if (reCount.value > 7) {
+                    loadingStatus.value = false
+                    alert('远程摄像头链接超时，请稍后再试')
+
+                    break
+                  }
+                  store.state.siteCameraTimer = setTimeout(chk_video, 5000)
+                }
+              }
+            }
+            // end
+          } else {
+            for (var i = 0; i < onLineVideoList.value.length; i++) {
+              for (var j = 0; j < tableData.value.length; j++) {
+                if (
+                  onLineVideoList.value[i].DEVICE ==
+                  tableData.value[j].deviceCode
+                ) {
+                  // alert(1)
+                  tableData.value[j].ALIVEVALUE =
+                    onLineVideoList.value[i].ALIVEVALUE
+                }
+              }
+            }
+            console.log('处理后的，tableData.value')
+            console.log(tableData.value)
+          }
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    }
+
+    // 查看视频
+    const open_video = (item) => {
+      deviceCode.value = item.deviceCode
+      if (openId.value != item.deviceCode) {
+        openId.value = item.deviceCode
+      }
+      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) {
+            dialogTitle.value = '查看视频'
+            showDialog.value = true
+            return
+          }
+        }
+      }
+      count.value = 0
+      reCount.value = 0
+      loadingStatus.value = true
+      axios
+        .post(
+          'https://fire.usky.cn:8443/YtIoT/cgi-bin/demo2.cgi',
+          'queryJson:' +
+            JSON.stringify({
+              CMD: 3,
+              BODY: {
+                DEVICE: item.deviceCode,
+                ACTION: 1,
+                IDX: 7,
+              },
+            }),
+          {
+            headers: {
+              'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+            },
+          }
+        )
+        .then((response) => {
+          response
+          store.state.siteCameraTimer = window.setTimeout(function () {
+            chk_video()
+          }, 5000)
+        })
+
+      // end
+    }
+
+    watch(
+      () => props.activeName,
+      (newVal) => {
+        // alert(newVal)
+        if (newVal == 'videoEquip') {
+          //  clearTimeOut(timer.value)
+          // window.clearTimeOut() //关闭定时器// alert('关闭定时器?')
+          reCount.value = 0
+          openId.value = ''
+          loadingStatus.value = false
+
+          videoMonitoringDeviceList()
+          chk_video()
+        }
+      }
+    )
+
+    onMounted(() => {})
 
     return {
       headClass,
@@ -243,12 +394,22 @@ export default defineComponent({
 
       filterText,
       tableData,
-      activeName,
+      // activeName,
       currentPage,
       closeDialog,
       dialogTitle,
       showDialog,
       store,
+      chk_video,
+
+      openId,
+      onLineVideoList,
+      reCount,
+      count,
+      loadingStatus,
+      open_video,
+      timer,
+      deviceCode,
     }
   },
 })