From 1c3ae7bcad167c9a593f4634968a6e142d9b08f9 Mon Sep 17 00:00:00 2001
From: wangzhibo <wangzhibo@shsening.com>
Date: 星期四, 13 八月 2026 12:18:30 +0800
Subject: [PATCH] add 预约和回收订单
---
src/modules/monitor/views/device.vue | 108 ++++++++++++++++++++++++++++++++----------------------
1 files changed, 64 insertions(+), 44 deletions(-)
diff --git a/src/modules/monitor/views/device.vue b/src/modules/monitor/views/device.vue
index 75bd43c..99ef647 100644
--- a/src/modules/monitor/views/device.vue
+++ b/src/modules/monitor/views/device.vue
@@ -1,27 +1,23 @@
<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="monitor-page">
+ <!-- 宸︿晶鏍戝舰 -->
+ <div class="left-tree">
+ <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>
+ <!-- 鍙充晶鐩戞帶鍖哄煙 -->
+ <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`"
+ :pause-at-first-frame="true" />
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script lang="ts" setup>
@@ -29,7 +25,7 @@
name: 'monitor-device',
});
-import { ref, onMounted } from 'vue';
+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';
@@ -37,22 +33,34 @@
const { service } = useCool();
const deviceList = ref<any[]>([]);
-const ysToken = ref<string>('');
+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.monitor.ys7.getToken();
- ysToken.value = res.accessToken;
- } catch (e) {
- console.error('钀ょ煶 Token 鑾峰彇澶辫触', e);
+ 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(fetchYsToken); // 鉁� 淇锛歰nMounted
/** 鏍戣妭鐐圭偣鍑� */
async function handleTreeSelect(businessId: string | number | null) {
@@ -68,9 +76,8 @@
try {
const res = await service.basicdata.iot.getYsDevices({ businessId });
- deviceList.value = res || [];
- } catch (err) {
- console.error('鑾峰彇钀ょ煶璁惧鍒楄〃澶辫触', err);
+ deviceList.value = (res || []) as any[];
+ } catch {
deviceList.value = [];
}
}
@@ -78,23 +85,36 @@
<style lang="scss" scoped>
.monitor-page {
- height: 100%;
+ height: 100%;
+ display: flex;
+ gap: 12px;
}
+
.left-tree {
- height: 100%;
+ width: 280px;
+ height: 100%;
+ border: 1px solid var(--el-border-color);
+ border-radius: 6px;
}
+
.right-player {
- height: 100%;
+ flex: 1;
+ height: 100%;
+ border: 1px solid var(--el-border-color);
+ border-radius: 6px;
+ padding: 12px;
+ overflow: auto;
}
+
.player-grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
- gap: 16px;
+ display: grid;
+ gap: 16px;
}
+
.player-card {
- .title {
- padding: 6px 0;
- font-weight: 500;
- }
+ .title {
+ padding: 6px 0;
+ font-weight: 500;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.1