监控视频播放

This commit is contained in:
lxz 2024-01-06 14:18:13 +08:00
parent 5e240474e0
commit 3218995797
3 changed files with 72 additions and 28 deletions

BIN
admin/src/views/device.zip Normal file

Binary file not shown.

View File

@ -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">
<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
small
background
layout="prev, pager, next"
:page-size="queryMonitorData.page_size"
:total="queryMonitorData.total"
class="mt-4"
@current-change="handleCurrentChange"
/>
</el-dialog>
<el-pagination small background 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>

View File

@ -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>