监控视频播放
This commit is contained in:
parent
5e240474e0
commit
3218995797
Binary file not shown.
|
|
@ -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
|
||||
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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue