<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[]>([]);
|
const ysToken = ref<string>('');
|
|
/** 拿萤石 token */
|
async function fetchYsToken() {
|
if (ysToken.value) return; // 已有就不再重复拿
|
try {
|
const res = await service.monitor.ys7.getToken();
|
ysToken.value = res.accessToken;
|
} catch (e) {
|
console.error('萤石 Token 获取失败', e);
|
}
|
}
|
|
onMounted(() => {
|
fetchYsToken();
|
});
|
|
/** 树节点点击 */
|
async function handleTreeSelect(businessId: string | number | null) {
|
if (!businessId) {
|
deviceList.value = [];
|
return;
|
}
|
|
// 保险：token 万一慢于树点击
|
if (!ysToken.value) {
|
await fetchYsToken();
|
}
|
|
try {
|
const res = await service.basicdata.iot.getYsDevices({ businessId });
|
deviceList.value = res || [];
|
} catch (err) {
|
console.error('获取萤石设备列表失败', err);
|
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>
|
