From c893e1dc464bb6eb880566b55ba1e38966780527 Mon Sep 17 00:00:00 2001
From: songshankun <songshankun@foxmail.com>
Date: 星期二, 07 十一月 2023 10:26:27 +0800
Subject: [PATCH] feat: 展示设备id改为展示设备名,云端设备编码添加超出截断
---
src/views/dashboard/components/DeviceCheckList.vue | 16 ++++++++--------
src/views/dashboard/components/DeviceNumberInfo.vue | 8 ++++++--
src/api/device.ts | 7 ++++++-
src/views/dashboard/components/DashboardTitle.vue | 15 ++++++++-------
4 files changed, 28 insertions(+), 18 deletions(-)
diff --git a/src/api/device.ts b/src/api/device.ts
index 83a9c45..f102b7b 100644
--- a/src/api/device.ts
+++ b/src/api/device.ts
@@ -1,3 +1,8 @@
+export interface DeviceMap {
+ deviceID: string
+ deviceName: string
+}
+
export interface Devices {
/** 鏈満璁惧缂栫爜 */
systemDeviceID: string
@@ -7,5 +12,5 @@
clusterStatus: 'master' | 'slave' | ''
clusterNodeQuantity: number
systemDeviceRunSince: number
- deviceIDList: string[]
+ deviceList: DeviceMap[]
}
diff --git a/src/views/dashboard/components/DashboardTitle.vue b/src/views/dashboard/components/DashboardTitle.vue
index 015694a..49d3323 100644
--- a/src/views/dashboard/components/DashboardTitle.vue
+++ b/src/views/dashboard/components/DashboardTitle.vue
@@ -2,14 +2,9 @@
<div class="dashboard-title">
<div class="title-text">
鏅鸿兘宸ヤ綔鍙� 鈥�
- <el-popover
- placement="bottom"
- :width="200"
- trigger="click"
- :content="deviceStore?.deviceInfo?.currentDeviceID ?? ''"
- >
+ <el-popover placement="bottom" :width="200" trigger="click" :content="currentDeviceName">
<template #reference>
- <el-text truncated class="device-name">{{ deviceStore?.deviceInfo?.currentDeviceID ?? '' }}</el-text>
+ <el-text truncated class="device-name">{{ currentDeviceName }}</el-text>
</template>
</el-popover>
<el-icon size="32" color="#0db7f5" style="margin-left: 20px; cursor: pointer" @click="openDevicesModal">
@@ -73,6 +68,12 @@
// 鑾峰彇褰撳墠璁惧鍚�
const deviceStore = useDevicesStore()
+const currentDeviceName = computed(() => {
+ return (
+ deviceStore?.deviceInfo?.deviceList?.find((ele) => ele?.deviceID === deviceStore?.deviceInfo?.currentDeviceID)
+ ?.deviceName ?? ''
+ )
+})
// 闂璇婃柇鍒楄〃
const problemList = computed(() => {
diff --git a/src/views/dashboard/components/DeviceCheckList.vue b/src/views/dashboard/components/DeviceCheckList.vue
index b63dfe5..f8e7ada 100644
--- a/src/views/dashboard/components/DeviceCheckList.vue
+++ b/src/views/dashboard/components/DeviceCheckList.vue
@@ -4,18 +4,18 @@
<template #title>璁惧閫夋嫨</template>
<div class="device-box">
<el-scrollbar always class="scroller">
- <template v-if="deviceInfo?.deviceIDList?.length">
+ <template v-if="deviceInfo?.deviceList?.length">
<div
- v-for="(item, index) in deviceInfo?.deviceIDList"
- :key="index"
- :class="selectedDevice === item ? 'device-item check-item' : 'device-item'"
- @click="deviceClick(item)"
+ v-for="item in deviceInfo?.deviceList"
+ :key="item.deviceID"
+ :class="selectedDevice === item.deviceID ? 'device-item check-item' : 'device-item'"
+ @click="deviceClick(item.deviceID)"
>
<div class="item-l">
- <span>{{ item }}</span>
- <!-- {{ item }}-->
+ <span>{{ item.deviceID }}</span>
+ {{ item.deviceName }}
</div>
- <div v-if="selectedDevice === item" class="item-r">
+ <div v-if="selectedDevice === item.deviceID" class="item-r">
<el-icon class="item-icon" size="22" color="#00ff00"><CircleCheckFilled /></el-icon>
</div>
</div>
diff --git a/src/views/dashboard/components/DeviceNumberInfo.vue b/src/views/dashboard/components/DeviceNumberInfo.vue
index 839a73c..6182433 100644
--- a/src/views/dashboard/components/DeviceNumberInfo.vue
+++ b/src/views/dashboard/components/DeviceNumberInfo.vue
@@ -12,8 +12,12 @@
<el-scrollbar always class="scroller">
<div class="device-t">浜戠璁惧缂栫爜</div>
<div class="device-b">
- <div v-for="(item, index) in deviceInfo?.deviceIDList" :key="index" class="device-info">
- {{ item }}
+ <div v-for="item in deviceInfo?.deviceList" :key="item.deviceID" class="device-info">
+ <el-popover placement="top" :width="200" trigger="click" :content="item.deviceID">
+ <template #reference>
+ <el-text truncated style="color: #fff; max-width: 100px">{{ item.deviceID }}</el-text>
+ </template>
+ </el-popover>
</div>
</div>
</el-scrollbar>
--
Gitblit v1.8.0