From 61dedbff9e9965eda9c91be5cc0e64f0db7db22e Mon Sep 17 00:00:00 2001
From: songshankun <songshankun@foxmail.com>
Date: 星期一, 06 十一月 2023 17:46:30 +0800
Subject: [PATCH] feat: 过长文本截断,调整日期组件防止换行

---
 src/views/dashboard/components/CurrentDateTime.vue |    3 +--
 src/views/dashboard/index.vue                      |    2 +-
 src/stores/devices.ts                              |    9 +++++----
 src/components.d.ts                                |    1 +
 src/views/dashboard/components/DashboardTitle.vue  |   25 ++++++++++++++++++++-----
 5 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index 5683fb2..a257981 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -24,6 +24,7 @@
     ElSteps: typeof import('element-plus/es')['ElSteps']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElText: typeof import('element-plus/es')['ElText']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/src/stores/devices.ts b/src/stores/devices.ts
index 36362b0..a23d468 100644
--- a/src/stores/devices.ts
+++ b/src/stores/devices.ts
@@ -1,14 +1,15 @@
-import { computed, onUnmounted, ref } from 'vue'
+import { computed } from 'vue'
 import { defineStore } from 'pinia'
-import { apiSetCurrentDevice, getDeviceList } from '@/api'
-import type { SetCurrentDeviceParams } from '@/api'
+import { getDeviceList } from '@/api'
 import { useRequest } from 'vue-hooks-plus'
 import type { Devices } from '@/api/device'
 import { DEVICE_INFO_POLLING_DURATION } from '@/common/constants'
-import { ElMessage } from 'element-plus'
 
 export const useDevicesStore = defineStore('device', () => {
   const deviceInfo = computed(() => {
+    if (deviceInfo?.value) {
+      deviceRes.value.data.currentDeviceID = 'wwwwwwww222222'
+    }
     return deviceRes?.value?.data as Devices
   })
 
diff --git a/src/views/dashboard/components/CurrentDateTime.vue b/src/views/dashboard/components/CurrentDateTime.vue
index 3097eab..2a41bcd 100644
--- a/src/views/dashboard/components/CurrentDateTime.vue
+++ b/src/views/dashboard/components/CurrentDateTime.vue
@@ -13,9 +13,8 @@
 $color: #30decd;
 
 .current-date-time {
-  width: 370px;
   color: $color;
-  font-size: 24px;
+  font-size: 20px;
   font-weight: 600;
 }
 </style>
diff --git a/src/views/dashboard/components/DashboardTitle.vue b/src/views/dashboard/components/DashboardTitle.vue
index 981972f..015694a 100644
--- a/src/views/dashboard/components/DashboardTitle.vue
+++ b/src/views/dashboard/components/DashboardTitle.vue
@@ -1,23 +1,33 @@
 <template>
   <div class="dashboard-title">
     <div class="title-text">
-      鏅鸿兘宸ヤ綔鍙� 鈥� {{ deviceStore?.deviceInfo?.currentDeviceID ?? '' }}
+      鏅鸿兘宸ヤ綔鍙� 鈥�
+      <el-popover
+        placement="bottom"
+        :width="200"
+        trigger="click"
+        :content="deviceStore?.deviceInfo?.currentDeviceID ?? ''"
+      >
+        <template #reference>
+          <el-text truncated class="device-name">{{ deviceStore?.deviceInfo?.currentDeviceID ?? '' }}</el-text>
+        </template>
+      </el-popover>
       <el-icon size="32" color="#0db7f5" style="margin-left: 20px; cursor: pointer" @click="openDevicesModal">
         <IconSlider></IconSlider>
       </el-icon>
     </div>
     <div class="title-status">
       <div class="connection-info" @click="openProblemsModal">
-        <el-icon size="30" :color="problemsIconStatus ? '#00ff00' : '#ff0000'">
+        <el-icon size="26" :color="problemsIconStatus ? '#00ff00' : '#ff0000'">
           <AlertLightIcon></AlertLightIcon>
         </el-icon>
       </div>
       <div class="cloud-connection-status">
-        <el-icon v-if="cloudConnectionIconStatus" size="45" color="#00ff00">
+        <el-icon v-if="cloudConnectionIconStatus" size="38" color="#00ff00">
           <IconCloudDone></IconCloudDone>
         </el-icon>
 
-        <el-icon v-else size="45" color="#ff0000">
+        <el-icon v-else size="38" color="#ff0000">
           <IconCloudOff></IconCloudOff>
         </el-icon>
       </div>
@@ -121,10 +131,15 @@
   align-items: center;
   position: absolute;
   top: 16px;
-  right: 40px;
+  right: 6px;
 }
 .connection-info {
   margin-right: 10px;
   cursor: pointer;
 }
+.device-name {
+  max-width: 340px;
+  font-size: 40px;
+  color: #fff;
+}
 </style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 5f99ae8..49b5c8e 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -196,7 +196,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-top: 12px;
+  padding-top: 22px;
 }
 :deep(.el-tabs) {
   height: 100%;

--
Gitblit v1.8.0