From e2b2a1c973e725c0829e0862dcdea895ebd0b336 Mon Sep 17 00:00:00 2001
From: JINGYJ <1458671527@qq.com>
Date: Tue, 5 Dec 2023 17:35:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E9=A2=9C=E8=89=B2?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Welcome/components/BannerInfoCard.tsx     | 24 +++++++++++++++--
 src/pages/Welcome/components/FootInfoCard.tsx |  3 ++-
 .../Welcome/components/NavInfoCardList.tsx    | 27 ++++++++++---------
 src/pages/Welcome/styles/bannerInfoCard.less  | 15 ++++++++++-
 4 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/src/pages/Welcome/components/BannerInfoCard.tsx b/src/pages/Welcome/components/BannerInfoCard.tsx
index 7ee9106..d36694f 100644
--- a/src/pages/Welcome/components/BannerInfoCard.tsx
+++ b/src/pages/Welcome/components/BannerInfoCard.tsx
@@ -28,6 +28,24 @@ const offendingTabData: Record<string, any>[] = [
 ];
 // const topItemStyle = { marginBottom: 24, height: 190 }; // 每个卡片独立样式
 
+// 前三排名颜色样式
+const handleRanking = (value: number) => {
+  switch (value) {
+    case 0:
+      return styles.rankFirst
+      break;
+    case 1:
+      return styles.rankSecond
+      break;
+    case 2:
+      return styles.rankThird
+      break;
+    default:
+      return ''
+      break;
+  }
+};
+
 /**子组件 childComp */
 const RankListCard: React.FC = ({
   rankingListData,
@@ -38,7 +56,8 @@ const RankListCard: React.FC = ({
     <ul className={styles.rankingList}>
       {rankingListData.map((item, i) => (
         <li key={item.title}>
-          <span className={`${styles.rankingItemNumber} ${i < 3 ? styles.active : ''}`}>
+          {/* <span className={`${styles.rankingItemNumber} ${i < 3 ? styles.active : ''}`}> */}
+          <span className={`${styles.rankingItemNumber} ${handleRanking(i)}`}>
             {i + 1}
           </span>
           <span className={styles.rankingItemTitle} title={item.title}>
@@ -67,7 +86,7 @@ const BannerInfoCard: React.FC = ({
   // const { initialState } = useModel('@@initialState');
   return (
     <div className="bannerInfoCard_wrap">
-      <ProCard key="resize-observer" bordered wrap gutter={24} style={{marginTop: 24}}>
+      <ProCard key="resize-observer" bordered wrap gutter={24} style={{marginTop: 24, marginBottom: 24}}>
         <Tabs
           tabBarExtraContent={
             <div className={styles.salesExtraWrap}>
@@ -103,6 +122,7 @@ const BannerInfoCard: React.FC = ({
                     <div className={styles.salesBar}>
                       {/* TODO 替换使用reactEchart */}
                       <Column
+                        color="rgba(4, 99, 242, 1)"
                         height={300}
                         forceFit
                         data={offendingData as any}
diff --git a/src/pages/Welcome/components/FootInfoCard.tsx b/src/pages/Welcome/components/FootInfoCard.tsx
index 5a73b86..8c1f777 100644
--- a/src/pages/Welcome/components/FootInfoCard.tsx
+++ b/src/pages/Welcome/components/FootInfoCard.tsx
@@ -143,6 +143,7 @@ const DonutChart: React.FC = () => {
           name: '类别名称',
           type: 'pie',
           radius: ['50%', '80%'], // 控制环形图大小
+          color: ["#FF8110", "#FFB404", "#3250FF"],
           avoidLabelOverlap: false,
           label: {
             show: false,
@@ -159,7 +160,7 @@ const DonutChart: React.FC = () => {
             show: false,
           },
           data: [
-            { value: 235, name: '玩手机' },
+            { value: 235, name: '玩手机'},
             { value: 510, name: '打瞌睡' },
             { value: 134, name: '离岗' },
           ],
diff --git a/src/pages/Welcome/components/NavInfoCardList.tsx b/src/pages/Welcome/components/NavInfoCardList.tsx
index 8778b71..00d5bc0 100644
--- a/src/pages/Welcome/components/NavInfoCardList.tsx
+++ b/src/pages/Welcome/components/NavInfoCardList.tsx
@@ -17,7 +17,10 @@ const { Statistic } = StatisticCard;
 
 /**styles 组件样式配置 */
 const topColSpanProps = { sm: 24, md: 12, lg: 6 }; // 每个卡片项栅格配置
-const topItemStyle = { marginBottom: 24, height: 190 }; // 每个卡片独立样式
+const topItemStyle = { marginBottom: 24, height: 190, backgroundColor: 'rgba(255, 233, 214, 1)' }; // 每个卡片独立样式
+const topItemStyle1 = { marginBottom: 24, height: 190, backgroundColor: 'rgba(214, 225, 255, 1)' }; // 每个卡片独立样式
+const topItemStyle2 = { marginBottom: 24, height: 190, backgroundColor: 'rgba(221, 213, 253, 1)' }; // 每个卡片独立样式
+const topItemStyle3 = { marginBottom: 24, height: 190, backgroundColor: 'rgba(214, 239, 255, 1)' }; // 每个卡片独立样式
 const topItemHeadStyle = { padding: 15 };
 const chartsStyle = {
   height: 84
@@ -49,7 +52,7 @@ const NavInfoCardList: React.FC = () => {
           boxShadow
         >
           <StatisticCard
-            bodyStyle={{ padding: 0 }}
+            bodyStyle={{ padding: 0, backgroundColor: 'rgba(255, 233, 214, 1)' }}
             statistic={{
               value: 1102893,
               style: chartsStyle,
@@ -64,7 +67,7 @@ const NavInfoCardList: React.FC = () => {
               <>
                 <Divider style={{ margin: 5 }} />
                 <Space>
-                  <StatisticCard bodyStyle={{ padding: 0 }}>
+                  <StatisticCard bodyStyle={{ padding: 0, backgroundColor: 'rgba(255, 233, 214, 1)' }}>
                     <Statistic title="日异常量" value="0.00%" />
                   </StatisticCard>
                 </Space>
@@ -87,11 +90,11 @@ const NavInfoCardList: React.FC = () => {
             </>
           }
           colSpan={topColSpanProps}
-          style={topItemStyle}
+          style={topItemStyle1}
           boxShadow
         >
           <StatisticCard
-            bodyStyle={{ padding: 0 }}
+            bodyStyle={{ padding: 0, backgroundColor: 'rgba(214, 225, 255, 1)' }}
             statistic={{
               value: 467,
               style: chartsStyle,
@@ -114,7 +117,7 @@ const NavInfoCardList: React.FC = () => {
               <>
                 <Divider style={{ margin: 5 }} />
                 <Space>
-                  <StatisticCard bodyStyle={{ padding: 0 }}>
+                  <StatisticCard bodyStyle={{ padding: 0, backgroundColor: 'rgba(214, 225, 255, 1)' }}>
                     <Statistic title="设备量" value="0.00%" />
                   </StatisticCard>
                 </Space>
@@ -137,11 +140,11 @@ const NavInfoCardList: React.FC = () => {
             </>
           }
           colSpan={topColSpanProps}
-          style={topItemStyle}
+          style={topItemStyle2}
           boxShadow
         >
           <StatisticCard
-            bodyStyle={{ padding: 0 }}
+            bodyStyle={{ padding: 0, backgroundColor: 'rgba(221, 213, 253, 1)' }}
             statistic={{
               value: 3048,
               style:chartsStyle,
@@ -162,7 +165,7 @@ const NavInfoCardList: React.FC = () => {
               <>
                 <Divider style={{ margin: 5 }} />
                 <Space>
-                  <StatisticCard bodyStyle={{ padding: 0 }}>
+                  <StatisticCard bodyStyle={{ padding: 0, backgroundColor: 'rgba(221, 213, 253, 1)' }}>
                     <Statistic title="覆盖网点率" value="0.00%" />
                   </StatisticCard>
                 </Space>
@@ -185,11 +188,11 @@ const NavInfoCardList: React.FC = () => {
             </>
           }
           colSpan={topColSpanProps}
-          style={topItemStyle}
+          style={topItemStyle3}
           boxShadow
         >
           <StatisticCard
-            bodyStyle={{ padding: 0 }}
+            bodyStyle={{ padding: 0, backgroundColor: 'rgba(214, 239, 255, 1)' }}
             statistic={{
               value: 893,
               style:chartsStyle,
@@ -218,7 +221,7 @@ const NavInfoCardList: React.FC = () => {
             chart={
               <>
                 <Divider style={{ margin: 5 }} />
-                <Space style={{ marginTop: 0 }}>
+                <Space style={{ marginTop: 0, backgroundColor: 'rgba(214, 239, 255, 1)' }}>
                   <Statistic title="周同比" value="12%" trend="up" />
                   <Statistic title="日同比" value="11%" trend="down" />
                 </Space>
diff --git a/src/pages/Welcome/styles/bannerInfoCard.less b/src/pages/Welcome/styles/bannerInfoCard.less
index 21c9d4f..0b5647f 100644
--- a/src/pages/Welcome/styles/bannerInfoCard.less
+++ b/src/pages/Welcome/styles/bannerInfoCard.less
@@ -47,11 +47,24 @@
       line-height: 20px;
       text-align: center;
       background-color: @tag-default-bg;
-      border-radius: 20px;
+      // border-radius: 20px;
+      border-radius: 2px;
       &.active {
         color: #fff;
         background-color: #314659;
       }
+      &.rankFirst {
+        color: #fff;
+        background-color: rgba(224, 40, 40, 1);
+      }
+      &.rankSecond {
+        color: #fff;
+        background-color: rgba(255, 172, 64, 1);
+      } 
+      &.rankThird {
+        color: #fff;
+        background-color: rgba(250, 219, 20, 1);
+      }  
     }
     .rankingItemTitle {
       flex: 1;