refactor(realtime): 优化实时统计页面的环比数据展示

- 将环比数据的类型从 number 改为 string，以支持更灵活的展示 - 抽离 ComparisonIcon 组件用于统一展示环比数据图标和数值 - 优化环比数据的显示逻辑，根据数值正负显示不同颜色和图标 - 统一环比数据的展示
aide-family · Jan 20, 2025 · 35b5d98 · 35b5d98
1 parent 26aebe8
commit 35b5d98
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 27 deletions.
diff --git a/src/api/realtime/statistics.ts b/src/api/realtime/statistics.ts
@@ -66,13 +66,13 @@ export interface AlarmStatisticsResponse {
   /** 图表数据 */
   chartData: number[]
   // 总数环比
-  totalComparison: number
+  totalComparison: string
   // 正在告警环比
-  ongoingComparison: number
+  ongoingComparison: string
   // 已恢复环比
-  recoveredComparison: number
+  recoveredComparison: string
   // 最高优先级告警环比
-  highestPriorityComparison: number
+  highestPriorityComparison: string
 }
 
 /** 通知统计请求 */
@@ -106,9 +106,9 @@ export interface NotificationStatisticsResponse {
   // 通知类型
   notifyTypes: NotifyTypeItem[]
   // 总数环比
-  totalComparison: number
+  totalComparison: string
   // 通知失败总数环比
-  failedComparison: number
+  failedComparison: string
 }
 
 /** 最新告警事件请求 */

diff --git a/src/pages/realtime/dashboard/index.tsx b/src/pages/realtime/dashboard/index.tsx
@@ -44,6 +44,20 @@ const { useToken } = antTheme
 
 const gap = 10000
 
+const ComparisonIcon = ({ value = '0', title = '比前日' }: { value?: string; title?: string }) => {
+  if (+value > 0)
+    return (
+      <div className='text-red-400'>
+        <ArrowUpOutlined /> {value} {title}
+      </div>
+    )
+  return (
+    <div className='text-green-400'>
+      <ArrowDownOutlined /> {value} {title}
+    </div>
+  )
+}
+
 const Dashboard: React.FC = () => {
   const { token } = useToken()
 
@@ -302,9 +316,7 @@ const Dashboard: React.FC = () => {
                 <Row align='middle' gutter={16}>
                   <Col span={24}>
                     <div style={{ fontSize: 28, fontWeight: 'bold' }}>{alarmStatistics?.total}</div>
-                    <div className='text-red-400'>
-                      <ArrowUpOutlined /> {alarmStatistics?.totalComparison} 比前日
-                    </div>
+                    <ComparisonIcon value={alarmStatistics?.totalComparison} />
                   </Col>
                 </Row>
               </div>
@@ -315,9 +327,7 @@ const Dashboard: React.FC = () => {
                 <Row align='middle' gutter={16}>
                   <Col span={24}>
                     <div style={{ fontSize: 28, fontWeight: 'bold' }}>{alarmStatistics?.ongoing}</div>
-                    <div className='text-red-400'>
-                      <ArrowUpOutlined /> {alarmStatistics?.ongoingComparison} 比前日
-                    </div>
+                    <ComparisonIcon value={alarmStatistics?.ongoingComparison} />
                   </Col>
                 </Row>
               </div>
@@ -328,9 +338,7 @@ const Dashboard: React.FC = () => {
                 <Row align='middle' gutter={16}>
                   <Col span={24}>
                     <div style={{ fontSize: 28, fontWeight: 'bold' }}>{alarmStatistics?.highestPriority}</div>
-                    <div className='text-green-400'>
-                      <ArrowDownOutlined /> {alarmStatistics?.highestPriorityComparison} 比前日
-                    </div>
+                    <ComparisonIcon value={alarmStatistics?.highestPriorityComparison} />
                   </Col>
                 </Row>
               </div>
@@ -348,9 +356,7 @@ const Dashboard: React.FC = () => {
                 <Row align='middle' gutter={16}>
                   <Col span={24}>
                     <div style={{ fontSize: 28, fontWeight: 'bold' }}>{notificationStatistics?.total}</div>
-                    <div className='text-green-400'>
-                      <ArrowDownOutlined /> {notificationStatistics?.totalComparison} 比前日
-                    </div>
+                    <ComparisonIcon value={notificationStatistics?.totalComparison} />
                   </Col>
                 </Row>
               </div>
@@ -361,9 +367,7 @@ const Dashboard: React.FC = () => {
                 <Row align='middle' gutter={16}>
                   <Col span={24}>
                     <div style={{ fontSize: 28, fontWeight: 'bold' }}>{notificationStatistics?.failed}</div>
-                    <div className='text-red-400'>
-                      <ArrowUpOutlined /> {notificationStatistics?.failedComparison} 比前日
-                    </div>
+                    <ComparisonIcon value={notificationStatistics?.failedComparison} />
                   </Col>
                 </Row>
               </div>
@@ -382,9 +386,7 @@ const Dashboard: React.FC = () => {
                   <Col span={24} className='flex flex-col justify-between'>
                     <div>
                       <div style={{ fontSize: 28, fontWeight: 'bold' }}>{todayStatistics?.total}</div>
-                      <div className='text-red-400'>
-                        <ArrowUpOutlined /> {todayStatistics?.totalComparison} 比前日
-                      </div>
+                      <ComparisonIcon value={todayStatistics?.totalComparison} />
                     </div>
                   </Col>
                 </Row>
@@ -397,9 +399,7 @@ const Dashboard: React.FC = () => {
                   <Col span={24} className='flex flex-col justify-between'>
                     <div>
                       <div style={{ fontSize: 28, fontWeight: 'bold' }}>{todayStatistics?.failed}</div>
-                      <div className='text-green-400'>
-                        <ArrowDownOutlined /> {todayStatistics?.failedComparison} 比前日
-                      </div>
+                      <ComparisonIcon value={todayStatistics?.failedComparison} />
                     </div>
                   </Col>
                 </Row>