<template>
|
<div class="monitor-page" style="height:100%;display:flex;gap:12px;">
|
<!-- 左侧树形 -->
|
<div class="left-tree" style="width:280px;border:1px solid var(--el-border-color);border-radius:6px;">
|
<site-tree @select="handleTreeSelect" />
|
</div>
|
|
<!-- 右侧监控区域 -->
|
<div class="right-player" style="flex:1;border:1px solid var(--el-border-color);border-radius:6px;padding:12px;overflow:auto;">
|
<el-empty v-if="deviceList.length === 0" description="请左侧选择站点加载监控设备" />
|
<div class="player-grid" v-if="deviceList.length">
|
<div v-for="dev in deviceList" :key="dev.id" class="player-card">
|
<div class="title">{{ dev.iotName }}</div>
|
<EzuikitPlayer
|
v-if="ysToken"
|
:key="'p_' + dev.id + '_' + ysToken"
|
:container-id="'player_' + dev.id"
|
:access-token="ysToken"
|
:url="`ezopen://open.ys7.com/${dev.iotCode}/1.hd.live`"
|
/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
defineOptions({
|
name: 'monitor-device',
|
});
|
|
import { ref, onMounted } from 'vue';
|
import { useCool } from '/@/cool';
|
import SiteTree from '../components/site-tree.vue';
|
import EzuikitPlayer from '../../ezuikit/components/ezuikit-player.vue';
|
|
const { service } = useCool();
|
|
const deviceList = ref<any[]>([]);
|
let ysToken = ref('');
|
|
async function fetchYsToken() {
|
if (ysToken.value) return;
|
try {
|
//const res = await service.monitor.ys7.getToken();
|
const res = await service.base.sys.param.stringbykey({key:"ys7.accessToken"});
|
ysToken = res;
|
} catch (e: any) {
|
console.error('萤石 Token 获取失败', e?.response?.data?.message || e.message);
|
}
|
}
|
|
onMounted(fetchYsToken);
|
|
async function handleTreeSelect(businessId: string | number | null) {
|
if (!businessId) {
|
deviceList.value = [];
|
return;
|
}
|
if (!ysToken.value) await fetchYsToken();
|
try {
|
const res = await service.basicdata.iot.getYsDevices({ businessId });
|
deviceList.value = res || [];
|
} catch {
|
deviceList.value = [];
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.monitor-page {
|
height: 100%;
|
}
|
.left-tree {
|
height: 100%;
|
}
|
.right-player {
|
height: 100%;
|
}
|
.player-grid {
|
display: grid;
|
grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
|
gap: 16px;
|
}
|
.player-card {
|
.title {
|
padding: 6px 0;
|
font-weight: 500;
|
}
|
}
|
</style>
|
