<template>
|
<div class="monitor-page">
|
<!-- 左侧树形 -->
|
<div class="left-tree">
|
<site-tree @select="handleTreeSelect" />
|
</div>
|
|
<!-- 右侧监控区域 -->
|
<div class="right-player">
|
<el-empty v-if="deviceList.length === 0" description="请左侧选择站点加载监控设备" />
|
<div v-else class="player-grid" :style="gridStyle">
|
<div v-for="dev in deviceList" :key="dev.id" class="player-card">
|
<!-- <div class="title">{{ dev.iotName }}</div> -->
|
<ezuikit-player 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`"
|
:pauseAfterFirstFrame="true" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
defineOptions({
|
name: 'monitor-device',
|
});
|
|
import { ref, computed, 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('');
|
|
// ✅ 根据设备数量自动计算网格列数
|
const gridCols = computed(() => {
|
const n = deviceList.value.length;
|
if (n <= 1) return 1;
|
if (n <= 4) return 2; // 2~4 个 → 2 列
|
if (n <= 6) return 3; // 5~6 个 → 3 列
|
if (n <= 8) return 4; // 7~8 个 → 4 列
|
return 4;
|
});
|
|
const gridStyle = computed(() => ({
|
gridTemplateColumns: `repeat(${gridCols.value}, 1fr)`,
|
}));
|
|
/** 拿萤石 token */
|
async function fetchYsToken() {
|
if (ysToken.value) return; // 已有就不再重复拿
|
try {
|
const res = await service.base.sys.param.stringbykey({ key: 'ys7.accessToken' });
|
ysToken.value = res as string; // ✅ 修正：赋值给 .value
|
} catch (e: any) {
|
console.error('萤石 Token 获取失败', e?.response?.data?.message || e.message);
|
}
|
}
|
|
onMounted(fetchYsToken); // ✅ 修正：onMounted
|
|
/** 树节点点击 */
|
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 || []) as any[];
|
} catch {
|
deviceList.value = [];
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.monitor-page {
|
height: 100%;
|
display: flex;
|
gap: 12px;
|
}
|
|
.left-tree {
|
width: 280px;
|
height: 100%;
|
border: 1px solid var(--el-border-color);
|
border-radius: 6px;
|
}
|
|
.right-player {
|
flex: 1;
|
height: 100%;
|
border: 1px solid var(--el-border-color);
|
border-radius: 6px;
|
padding: 12px;
|
overflow: auto;
|
}
|
|
.player-grid {
|
display: grid;
|
gap: 16px;
|
}
|
|
.player-card {
|
.title {
|
padding: 6px 0;
|
font-weight: 500;
|
}
|
}
|
|
@media (max-width: 768px) {
|
.monitor-page {
|
flex-direction: column;
|
overflow: auto;
|
}
|
|
.left-tree {
|
width: 100%;
|
height: 220px;
|
flex-shrink: 0;
|
}
|
|
.right-player {
|
height: auto;
|
min-height: 360px;
|
}
|
|
.player-grid {
|
grid-template-columns: 1fr !important;
|
}
|
}
|
</style>
|
