接口对接

.eslintrc.js

@@ -1,6 +1,7 @@
 {
   "globals": {
     "EffectScope": true,
+    "ElMessage": true,
     "_mqttMessageCallback": true,
     "acceptHMRUpdate": true,
     "computed": true,

src/api/bigScreen/index.ts

@@ -99,7 +99,23 @@ export const getDeviceAreaMapData = (params: any) => request.get('api/services/a
 
 // ----------------------------综合显示END------------------------------------
 
-
+/**
+ * 所有采集信息
+ * @param params 
+ * @returns 
+ */
 export const getRealtime = (params: any) => request.get('api/services/app/SingleDeviceDashboard/GetRealtimeData', { params })
 
+/**
+ * 报警信息
+ * @param params 
+ * @returns 
+ */
 export const getAlertRecordsByDevice = (params: any) => request.get('api/services/app/SingleDeviceDashboard/GetAlertRecordsByDevice', { params })
+
+/**
+ * 获取设备视频监控列表
+ * @param params
+ * @returns
+ */
+export const getDeviceMonitors = (params: any) => request.get('api/services/app/Monitors/GetDeviceMonitors', { params })

src/views/big-screen/single.vue

@@ -4,8 +4,8 @@
       <div class="device-name">豫中云 - {{ deviceCode }}</div>
     </div>
     <div class="left">
-      <div class="left_top">
-        <img src="../../assets/img/img.jpg" style="width: 100%;height: 100%;">  
+      <div class="left_top" v-loading="loading">
+        <div class="video" ref="myVideoRef" id="video-container"></div>
       </div>
       <div class="left_bottom">
         <span style="margin-left: 45px;color: #C8DEFE;font-size: 18px;font-weight: normal;font-family: Alibaba-PuHuiTi-R;">
@@ -357,10 +357,15 @@
   </div>
 </template>
 <script setup lang="ts">
-  import {getRealtime, getAlertRecordsByDevice} from '@/api/bigScreen';
-  import { filterTime } from '@/utils/dateUtil'
-  import { onSubscribe, onUnsubscribe, formatGears, formatValue, isTrue,parseGear} from '@/utils/tools';
+  import EZUIKit from 'ezuikit-js'
+  import {getRealtime, getAlertRecordsByDevice,getDeviceMonitors} from '@/api/bigScreen';
+  import { onSubscribe, onUnsubscribe, formatGears, formatValue, parseGear} from '@/utils/tools';
   import router from '@/router';
+  const myVideoRef = ref(null)
+  let videoUrl = ref('')
+  let channelNo = ref('')
+  let loading = ref(false)
+  let myVideo: any = ref(null)
   const deviceId = ref(0)
   const deviceCode = ref('')
   const deviceData: any = ref({})
@@ -400,13 +405,42 @@
   onMounted(async () => {
     deviceId.value = parseInt(useQuery('id'))
     deviceCode.value = useQuery('code')
+    init()
     getData()
   })
 
   onUnmounted(() => {
 
   })
-
+  const init = async () => {
+    loading.value = true
+    try {
+      await videoData.getData()
+      channelNo.value = videoData.data.cameras[0].channelNo
+      videoUrl.value = videoData.data.cameras[0].url
+      myVideo.value = new EZUIKit.EZUIKitPlayer({
+        id: 'video-container', // 视频容器ID
+        width: 402,
+        height: 236,
+        accessToken: videoData.data.token,
+        url: videoData.data.cameras[0].url,
+        template: 'security',
+        audio: 0,
+        footer: ['hd', 'fullScreen'],
+        handleSuccess: () => {
+          ElMessage.success('连接成功!')
+          loading.value = false
+        },
+        handleError: () => {
+          ElMessage.error('连接失败')
+          loading.value = false
+        }
+      })
+    } finally {
+      loading.value = false
+    }
+  }
+  const videoData = useRequest(() => getDeviceMonitors({ deviceId:deviceId.value }), false)
   const getData = async () => {
     const res: any = await getRealtime({ deviceId: deviceId.value })
     deviceData.value = res
@@ -562,7 +596,7 @@
                   return
               }
           }
-          //小车车行程
+          //小车行程
           const trolleyStroke = trolleyStrokeData.value
           if(trolleyStroke) {
             if (trolleyStroke.code == Code) {