监控视频播放

admin/src/views/device/detail.vue

@@ -10,37 +10,39 @@
                 </div>
             </template>
             <div class="flex flex-wrap">
-                <div v-if="deviceData.device.land_id != ''" class="w-1/2 md:w-1/3 mb-4">
+                <div v-if="deviceData.device.land_id != ''" class="w-1/2 mb-4 md:w-1/3">
                     <div class="leading-10">所属土地：</div>
-                    <div class="text-3xl text-tx-gray">ID：{{ deviceData.device.land_id }} / 名称：{{ deviceData.device.land_title }}</div>
+                    <div class="text-3xl text-tx-gray">ID：{{ deviceData.device.land_id }} / 名称：{{
+                        deviceData.device.land_title }}</div>
                 </div>
-                <div v-if="deviceData.device.product_id != ''" class="w-1/2 md:w-1/3 mb-4">
+                <div v-if="deviceData.device.product_id != ''" class="w-1/2 mb-4 md:w-1/3">
                     <div class="leading-10">所属产品：</div>
-                    <div class="text-3xl text-tx-gray">ID：{{ deviceData.device.product_id }} / 名称：{{ deviceData.device.product_name }}</div>
+                    <div class="text-3xl text-tx-gray">ID：{{ deviceData.device.product_id }} / 名称：{{
+                        deviceData.device.product_name }}</div>
                 </div>
             </div>
             <div class="flex flex-wrap">
-                <div class="w-1/2 md:w-1/6 mb-4">
+                <div class="w-1/2 mb-4 md:w-1/6">
                     <div class="leading-10">设备名称：</div>
                     <div class="text-3xl text-tx-gray">{{ deviceData.device.name }}</div>
                 </div>
-                <div class="w-1/2 md:w-1/6 mb-4">
+                <div class="w-1/2 mb-4 md:w-1/6">
                     <div class="leading-10">设备编码：</div>
                     <div class="text-3xl text-tx-gray">{{ deviceData.device.code }}</div>
                 </div>
-                <div class="w-1/2 md:w-1/6 mb-4">
+                <div class="w-1/2 mb-4 md:w-1/6">
                     <div class="leading-10">设备类型：</div>
                     <div class="text-3xl text-tx-gray">
                         <dict-value :options="dictData.device_type" :value="deviceData.device.type" />
                     </div>
                 </div>
-                <div class="w-1/2 md:w-1/6 mb-4">
+                <div class="w-1/2 mb-4 md:w-1/6">
                     <div class="leading-10">设备状态：</div>
                     <div class="text-3xl text-tx-gray">
                         <dict-value :options="dictData.device_status" :value="deviceData.device.status" />
                     </div>
                 </div>
-                <div class="w-1/2 md:w-1/6 mb-4">
+                <div class="w-1/2 mb-4 md:w-1/6">
                     <div class="leading-10">是否在线：</div>
                     <div class="text-3xl text-tx-gray">
                         <dict-value :options="dictData.device_online_status" :value="deviceData.device.is_online" />
@@ -51,26 +53,35 @@
 
         <el-card class="!border-none mt-4 flex-1" shadow="never">
             <el-tabs v-model="activeName" class="">
+                <!-- <el-tab-pane v-if="deviceData.device.type==3" label="监控视频" name="monitor_video"> -->
+                <el-tab-pane label="监控视频" name="monitor_video" style="width:100vw;padding-left: 15vw;">
+                    <Jessibuca v-if="deviceData.device.video_url != '' && showVideo " :video_url="deviceData.device.video_url"></Jessibuca>
+                    <!-- <Jessibuca
+                        :video_url="'http://rtsp.lihaink.cn/live/lihai_lot_walnutpi_dev_6.live.flv?secret=ywdtp2llj80ha19jhmxl4po99nsmaynt'">
+                    </Jessibuca> -->
+
+                </el-tab-pane>
+
                 <el-tab-pane label="监控数据" name="monitor_item">
                     <el-row :gutter="12">
                         <el-col :span="6" v-for="item in deviceData.monitor_item" :key="item">
                             <el-card shadow="always" class="mb-4">
                                 <div class="flex justify-between mb-2">
                                     <div class="mt-2 text-sm text-tx-secondary">{{ item.name }}</div>
-                                    <div class="mt-2 text-sm text-tx-secondary" style="cursor: pointer;" @click="handleClick(item.device_id, item.value)">
+                                    <div class="mt-2 text-sm text-tx-secondary" style="cursor: pointer;"
+                                        @click="handleClick(item.device_id, item.value)">
                                         历史数据
                                     </div>
                                 </div>
 
                                 <div class="my-6 text-3xl">{{ item.monitor_value }}</div>
-                                <div class="mt-2 text-sm text-tx-secondary"><el-tag class="mr-2" type="info">只读</el-tag>{{ item.last_time }}</div>
+                                <div class="mt-2 text-sm text-tx-secondary"><el-tag class="mr-2" type="info">只读</el-tag>{{
+                                    item.last_time }}</div>
                             </el-card>
                         </el-col>
                     </el-row>
                 </el-tab-pane>
-                <el-tab-pane v-if="deviceData.device.type==3" label="监控视频" name="monitor_video">
+
-                    <Jessibuca v-if="deviceData.device.video_url != ''" :video_url="deviceData.device.video_url"></Jessibuca>
-                </el-tab-pane>
             </el-tabs>
         </el-card>
     </div>
@@ -81,16 +92,9 @@
             <el-table-column property="date" label="时间" width="250" />
             <el-table-column property="value" label="数据" />
         </el-table>
-        <el-pagination
+        <el-pagination small background layout="prev, pager, next" :page-size="queryMonitorData.page_size"
-            small
+            :total="queryMonitorData.total" class="mt-4" @current-change="handleCurrentChange" />
-            background
+    </el-dialog>
-            layout="prev, pager, next"
-            :page-size="queryMonitorData.page_size"
-            :total="queryMonitorData.total"
-            class="mt-4"
-            @current-change="handleCurrentChange"
-        />
-  </el-dialog>
 </template>
 
 <script lang="ts" setup name="deviceDetail">
@@ -99,8 +103,10 @@ import Jessibuca from '@/components/jessibuca/Jessibuca.vue'
 import { useDictData } from '@/hooks/useDictOptions'
 import { apiDeviceDetail, apiDeviceMonitorData } from '@/api/device'
 import { timeFormat } from '@/utils/util'
+import {useRoute} from "vue-router"
 
-const activeName = ref('monitor_item')
+
+const activeName = ref('monitor_video')
 const deviceData: any = reactive({
     device: {},
     monitor_item: []
@@ -122,6 +128,9 @@ const getDetails = async () => {
         id: route.query.device_id
     })
         .then((res: any) => {
+            scoketData.username = res.account
+            scoketData.device = res.id
+            // pullStream(scoketData)
             deviceData.device.name = res.name
             deviceData.device.code = res.code
             deviceData.device.type = res.type
@@ -201,4 +210,38 @@ const handleCurrentChange = (val: number) => {
             console.log('err', err)
         })
 }
+
+// scoket拉流地址
+const scoketData = reactive({
+    username: '',
+    device: '',
+    scence: 2,
+
+})
+const showVideo=ref(false)
+const socket = new WebSocket('wss://iot.lihaink.cn/test');
+const pullStream = (data: object) => {
+    const onSocketOpen = (event: any) => {
+        console.log("scoket打开")
+        socket.send(JSON.stringify(data));
+        showVideo.value=true
+    }
+    const onSocketClose = (event: any) => {
+        console.log('WebSocket连接已关闭');
+    }
+    const onSocketError = (event: any) => {
+        console.error('WebSocket连接发生错误');
+    }
+    socket.addEventListener('open', onSocketOpen);
+    socket.addEventListener('close', onSocketClose);
+    socket.addEventListener('error', onSocketError);
+}
+pullStream( {
+    username:route.query.userName,
+    device: 'lihai_lot_walnutpi_dev_' + route.query.device_id,
+    scence:2
+})
+onBeforeUnmount(() => {
+    socket.close()
+})
 </script>

admin/src/views/device/index.vue

@@ -198,7 +198,8 @@
                                     :to="{
                                         path: getRoutePath('device.device/detail'),
                                         query: {
-                                            device_id: row.id
+                                            device_id: row.id,
+                                            userName:row.account
                                         }
                                     }"
                                 >
@@ -229,7 +230,7 @@
                     </el-table-column>
                 </el-table>
             </div>
-            <div class="flex mt-4 justify-end">
+            <div class="flex justify-end mt-4">
                 <pagination v-model="pager" @change="getLists" />
             </div>
         </el-card>