连cgi动态渲染视频状态

src/views/siteManage/camera/index.vue

@@ -35,15 +35,15 @@
     <!-- 筛选end -->
 
     <!-- 表格start -->
-    <el-table :data="tableData" border stripe :header-cell-style="headClass">
+    <el-table :data="deviceData" border stripe :header-cell-style="headClass">
       <el-table-column prop="status" align="center" label="状态" width="50">
         <template #default="scope">
           <el-avatar
             class="status"
             :style="
-              scope.row.status == 0
-                ? 'background-color:red'
-                : 'background-color:#04F21C'
+              scope.row.ALIVEVALUE == 3
+                ? 'background-color:#04F21C'
+                : 'background-color:red'
             "
           ></el-avatar>
         </template>
@@ -121,11 +121,11 @@
         </template>
       </el-table-column>
 
-      <!-- <el-table-column fixed="right" label="视频画面" width="100">
+      <el-table-column fixed="right" label="视频画面" width="100">
         <template #default="scope">
           <a @click="checkVideo(scope.row)">查看</a>
         </template>
-      </el-table-column> -->
+      </el-table-column>
     </el-table>
     <!-- 表格end -->
 
@@ -161,19 +161,18 @@
       :flag="showDialog2"
     ></check-video>
     <!--视频弹框组件结束-----------------------end-->
+
+    <input type="hidden" v-model="openId" style="opacity: 0" />
   </div>
 </template>
 
 <script>
 import { useStore } from 'vuex'
 import { defineComponent, ref, reactive, onMounted, watch } from 'vue'
-// import * as api from '@/api/siteManage/watchDog.js'
-import * as api from '@/api/siteManage/camera.js'
-import { ElMessage } from 'element-plus'
-
 import DialogComponent from './dialogComponent'
 import checkVideo from './checkVideo'
-
+import * as api from '@/api/siteManage/camera.js'
+import { ElMessage } from 'element-plus'
 import axios from 'axios'
 
 export default defineComponent({
@@ -182,7 +181,7 @@ export default defineComponent({
     siteId: Number,
     activeName: String,
   },
-  setup(props, { emit }) {
+  setup(props) {
     const store = useStore()
     store
     const total = ref(0)
@@ -191,18 +190,9 @@ export default defineComponent({
     const goSiteListParam = ref('')
     const platformAreaName = ref('')
     const pageShow = ref(false)
-
     const showDialog = ref(false)
     const showDialog2 = ref(false)
-    const tableData = ref([])
-
-    function goSiteList(params) {
-      goSiteListParam.value = params.id
-      pageShow.value = !pageShow.value
-    }
-    const getMsgFormSon = () => {
-      pageShow.value = !pageShow.value
-    }
+    const deviceData = ref([])
 
     const tableItem = reactive([])
     const dialogTitle = ref('')
@@ -212,6 +202,22 @@ export default defineComponent({
     const accessToken = ref(store.state.user.accessToken)
     const labelCom = ref(store.state.siteManageLabelCom)
 
+    const onLineVideoList = ref([])
+    const openId = ref('')
+
+    // 表头样式设置
+    const headClass = () => {
+      return 'background:#FAFAFA;'
+    }
+    //分页操作
+    const handleSizeChange = (val) => {
+      pageSize.value = val
+      videoMonitoringDeviceList()
+    }
+    const handleCurrentChange = (val) => {
+      currentPage.value = val
+      videoMonitoringDeviceList()
+    }
     //监控设备列表
     function videoMonitoringDeviceList() {
       api
@@ -223,8 +229,10 @@ export default defineComponent({
         })
         .then((requset) => {
           if (requset.status === 'SUCCESS') {
-            tableData.value = requset.data.records
+            deviceData.value = requset.data.records
             total.value = requset.data.total
+            console.log('response 接口请求数据')
+            console.log(deviceData.value)
           } else {
             ElMessage.error(requset.msg)
           }
@@ -305,53 +313,7 @@ export default defineComponent({
     const cancelEvent = () => {
       console.log('cancel!')
     }
-
-    function goVariableList() {
-      emit('func')
-    }
-
-    // 表头样式设置
-    const headClass = () => {
-      return 'background:#FAFAFA;'
-    }
-    const handleSizeChange = (val) => {
-      pageSize.value = val
-      videoMonitoringDeviceList()
-    }
-    const handleCurrentChange = (val) => {
-      currentPage.value = val
-      videoMonitoringDeviceList()
-    }
-
-    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')
-          console.log(response.data.RESULT.LIST)
-        })
-        .catch((error) => {
-          console.log(error)
-        })
-    }
-
-    window.setInterval(() => {
-      setTimeout(() => {
-        chk_video()
-      }, 0)
-    }, 10000000)
-
+    //导入
     const handleProgress = (file, fileList) => {
       file
       if (
@@ -370,7 +332,6 @@ export default defineComponent({
         return true
       }
     }
-
     const handleUpAvatar = (res, file) => {
       console.log(res, file)
       fileList.value = []
@@ -380,7 +341,6 @@ export default defineComponent({
       })
       videoMonitoringDeviceList()
     }
-
     //导出
     const DataReportExport = () => {
       api
@@ -400,6 +360,55 @@ export default defineComponent({
         })
     }
 
+    //请求视频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)
+          onLineVideoList.value = response.data.RESULT.LIST
+
+          if (openId.value.length > 0) {
+            alert(1)
+          } else {
+            for (var i = 0; i < onLineVideoList.value.length; i++) {
+              for (var j = 0; j < deviceData.value.length; j++) {
+                if (
+                  onLineVideoList.value[i].DEVICE ==
+                  deviceData.value[j].deviceCode
+                ) {
+                  deviceData.value[j].ALIVEVALUE =
+                    onLineVideoList.value[i].ALIVEVALUE
+                }
+              }
+            }
+            console.log('处理后的，deviceData.value')
+            console.log(deviceData.value)
+          }
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    }
+
+    // window.setInterval(() => {
+    //   setTimeout(() => {
+    //     chk_video()
+    //   }, 0)
+    // }, 100000)
+
     //监听变化
     watch(
       () => props.siteId,
@@ -408,7 +417,8 @@ export default defineComponent({
         console.log(newVal)
         labelCom.value = store.state.siteManageLabelCom
         if (props.activeName == 'five') {
-           videoMonitoringDeviceList()
+          videoMonitoringDeviceList()
+          chk_video()
         }
       }
     )
@@ -417,16 +427,15 @@ export default defineComponent({
       (newVal) => {
         if (newVal == 'five') {
           videoMonitoringDeviceList()
+          chk_video()
         }
       }
     )
 
-    onMounted(() => {
-     
-    })
+    onMounted(() => {})
 
     return {
-      tableData,
+      deviceData,
       showDialog,
       showDialog2,
 
@@ -443,11 +452,7 @@ export default defineComponent({
       currentPage,
       chk_video,
 
-      goVariableList,
-
       videoMonitoringDeviceList,
-      goSiteList,
-      getMsgFormSon,
       headClass,
       addItem,
 
@@ -468,6 +473,9 @@ export default defineComponent({
       handleUpAvatar,
 
       labelCom,
+
+      openId,
+      onLineVideoList,
     }
   },
 })