feat: 过长文本截断,调整日期组件防止换行

songshankun

2023-11-06 61dedbff9e9965eda9c91be5cc0e64f0db7db22e

feat: 过长文本截断,调整日期组件防止换行

 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']
  }

 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
  })


 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>

 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>

 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%;