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