制品车间设备运行总览优化

src/locales/zh-CN.ts

@@ -179,8 +179,8 @@ export default {
   },
   Dashboard3: {
     Header: {
-      title: '设备运行总览大屏标题',
+      title: '制品车间设备运行总览',
-      subTitle: 'IOT 实时监控中心副标题',
+      subTitle: 'IOT 实时监控中心',
       currentTime: '当前时间：',
       lastUpdate: '最后更新：',
       refreshRate: '刷新频率：',

src/views/report/dashboardPage/dashboard1/dashboard3/index.vue

@@ -5,7 +5,8 @@
     <header class="dashboard-header">
       <div class="brand">
         <div class="brand-icon">
-          <Icon icon="ep:cpu" />
+<!--          <Icon icon="ep:cpu" />-->
+          <img alt="" class="mr-10px h-40px w-40px" src="@/assets/imgs/logo.png" />
         </div>
         <div class="brand-text">{{ t('Header.subTitle') }}</div>
       </div>
@@ -189,30 +190,25 @@ const getMetricValue = (keys: string[]) => {
   return foundKey ? metricValueMap.value[foundKey] : undefined
 }
 
-const summaryMap = computed(() => {
+const calcDeviceRate = (count: number, total: number) => {
-  return overviewData.value.summary.reduce<Record<string, number>>((acc, item) => {
+  if (!total) return 0
-    acc[item.status] = Number(item.percent) || 0
+  return Number(((count / total) * 100).toFixed(1))
-    return acc
+}
-  }, {})
-})
 
 const statusCards = computed(() => [
   {
     key: 'total',
     label: t('Metrics.total'),
     icon: 'ep:connection',
-    value:
+    value: totalDeviceCount.value,
-      overviewData.value.totalDevices ||
-      getMetricValue(['total', 'deviceTotal', 'totalDevices']) ||
-      overviewData.value.timelineRows.length,
     tone: 'total'
   },
   {
     key: 'online',
     label: t('Metrics.online'),
     icon: 'ep:cpu',
-    value: Math.max(0, totalDeviceCount.value - offlineDeviceCount.value),
+    value: onlineDeviceCount.value,
-    percent: 100 - (summaryMap.value.offline || 0),
+    percent: calcDeviceRate(onlineDeviceCount.value, totalDeviceCount.value),
     tone: 'online'
   },
   {
@@ -220,31 +216,31 @@ const statusCards = computed(() => [
     label: t('Metrics.offline'),
     icon: 'ep:link',
     value: offlineDeviceCount.value,
-    percent: summaryMap.value.offline || 0,
+    percent: calcDeviceRate(offlineDeviceCount.value, totalDeviceCount.value),
     tone: 'offline'
   },
   {
     key: 'running',
     label: t('Metrics.running'),
     icon: 'ep:video-play',
-    value: getMetricValue(['running', 'run', 'runningDevices']) ?? getRowsByStatus('running').length,
+    value: runningDeviceCount.value,
-    percent: summaryMap.value.running || 0,
+    percent: calcDeviceRate(runningDeviceCount.value, totalDeviceCount.value),
     tone: 'running'
   },
   {
     key: 'standby',
     label: t('Metrics.standby'),
     icon: 'ep:video-pause',
-    value: getMetricValue(['standby', 'idle', 'standbyDevices']) ?? getRowsByStatus('standby').length,
+    value: standbyDeviceCount.value,
-    percent: summaryMap.value.standby || 0,
+    percent: calcDeviceRate(standbyDeviceCount.value, totalDeviceCount.value),
     tone: 'standby'
   },
   {
     key: 'fault',
     label: t('Metrics.fault'),
     icon: 'ep:bell',
-    value: getMetricValue(['fault', 'alarm', 'faultDevices']) ?? getRowsByStatus('fault').length,
+    value: faultDeviceCount.value,
-    percent: summaryMap.value.fault || 0,
+    percent: calcDeviceRate(faultDeviceCount.value, totalDeviceCount.value),
     tone: 'fault'
   }
 ])
@@ -267,15 +263,22 @@ const detailRows = computed<DetailRow[]>(() => {
 })
 
 const totalDetailPages = computed(() => Math.max(1, Math.ceil(detailRows.value.length / detailPageSize)))
-const totalDeviceCount = computed(
+const runningDeviceCount = computed(
-  () =>
+  () => getMetricValue(['running', 'run', 'runningDevices']) ?? getRowsByStatus('running').length
-    overviewData.value.totalDevices ||
+)
-    getMetricValue(['total', 'deviceTotal', 'totalDevices']) ||
+const standbyDeviceCount = computed(
-    detailRows.value.length
+  () => getMetricValue(['standby', 'idle', 'standbyDevices']) ?? getRowsByStatus('standby').length
+)
+const faultDeviceCount = computed(
+  () => getMetricValue(['fault', 'alarm', 'faultDevices']) ?? getRowsByStatus('fault').length
 )
 const offlineDeviceCount = computed(
   () => getMetricValue(['offline', 'offlineDevices']) ?? getRowsByStatus('offline').length
 )
+const onlineDeviceCount = computed(
+  () => runningDeviceCount.value + standbyDeviceCount.value + faultDeviceCount.value
+)
+const totalDeviceCount = computed(() => onlineDeviceCount.value + offlineDeviceCount.value)
 const pagedRows = computed(() => {
   const start = (detailPage.value - 1) * detailPageSize
   return detailRows.value.slice(start, start + detailPageSize)
@@ -575,8 +578,8 @@ onUnmounted(() => {
 
 .brand-icon {
   display: grid;
-  width: 34px;
+  width: 40px;
-  height: 34px;
+  height: 40px;
   color: #8cd3ff;
   background: rgb(78 157 255 / 16%);
   border: 1px solid rgb(93 177 255 / 40%);