feat: 111

src/pages/workbench/Dashboard/components/LeaderBoard.jsx

@@ -1,6 +1,5 @@
 import ProTable from '@ant-design/pro-table'
 import { Select } from 'antd'
-import { Trophy } from '@icon-park/react'
 import Iconfont from '@/components/SvgIcon'
 import React, { useState, useMemo } from 'react'
 
@@ -15,15 +14,9 @@ const opMap = {
   businessService: '商机服务'
 }
 const colorMap = {
-  1: {
-    color: '#fbbf24'
-  },
-  2: {
-    color: '#22c55e'
-  },
-  3: {
-    color: '#333'
-  }
+  1: 'text-hex-ffc241',
+  2: 'text-hex-1dc9b7',
+  3: 'text-hex-868e96'
 }
 const LeaderBoard = ({ dataList = [] }) => {
   const [activeOp, setActiveOp] = useState('customer')
@@ -35,16 +28,7 @@ const LeaderBoard = ({ dataList = [] }) => {
         valueType: 'indexBorder',
         align: 'center',
         width: '30%',
-        render: (_, record) => {
-          if (record.rank === 1) {
-            return <Iconfont type="icon-trophy" style={{ color: '#fbbf24' }} />
-            // <Trophy fill={colorMap[1].color} />
-          }
-          if (record.rank === 2) {
-            return <Trophy fill={colorMap[2].color} />
-          }
-          return <Trophy fill={colorMap[3].color} />
-        }
+        render: (_, record) => <Iconfont type="icon-trophy" className={colorMap[record.rank]} />
       },
       {
         title: '姓名',

src/pages/workbench/Dashboard/consts.js

@@ -1,42 +1,52 @@
 export const cyclicalOp = [
   {
     label: '今天',
-    value: 'today'
+    value: 'today',
+    title: '较昨天'
   },
   {
     label: '昨天',
-    value: 'yesterday'
+    value: 'yesterday',
+    title: '较前天'
   },
   {
     label: '本周',
-    value: 'week'
+    value: 'week',
+    title: '较上周'
   },
   {
     label: '上周',
-    value: 'lastWeek'
+    value: 'lastWeek',
+    title: '较前周'
   },
   {
     label: '本月',
-    value: 'month'
+    value: 'month',
+    title: '较上月'
   },
   {
     label: '上月',
-    value: 'lastMonth'
+    value: 'lastMonth',
+    title: '较上上月'
   },
   {
     label: '本季度',
-    value: 'quarter'
+    value: 'quarter',
+    title: '较上季度'
   },
   {
     label: '上季度',
-    value: 'lastQuarter'
+    value: 'lastQuarter',
+    title: '教上上季度'
   },
   {
     label: '本年',
-    value: 'year'
+    value: 'year',
+    title: '较去年'
   },
   {
     label: '去年',
-    value: 'lastYear'
+    value: 'lastYear',
+    title: '较前年'
   }
 ]

src/pages/workbench/Dashboard/index.jsx

@@ -155,6 +155,18 @@ const Dashboard = ({ dispatch, permData = {}, groupList = [] }) => {
     height: 230,
     xField: 'time',
     yField: ['value', 'increment'],
+    yAxis: {
+      value: {
+        label: {
+          formatter: text => `${text}个`
+        }
+      },
+      increment: {
+        label: {
+          formatter: text => `${text}%`
+        }
+      }
+    },
     meta: {
       increment: {
         alias: '增幅'
@@ -170,7 +182,16 @@ const Dashboard = ({ dispatch, permData = {}, groupList = [] }) => {
       {
         geometry: 'line',
         lineStyle: { lineWidth: 2 },
-        color: '#FEB51A'
+        smooth: true,
+        color: '#FEB51A',
+        point: {
+          size: 3,
+          style: {
+            fill: 'white',
+            stroke: '#5B8FF9',
+            lineWidth: 2
+          }
+        }
       }
     ]
   }
@@ -224,7 +245,9 @@ const Dashboard = ({ dispatch, permData = {}, groupList = [] }) => {
                     <h3 className="text-xl text-green-500">
                       {state.customerChainRatio.percentage}
                     </h3>
-                    <span>较上月</span>
+                    <span>
+                      {cyclicalOp.find(item => item.value === state.params.cyclical)?.title}
+                    </span>
                   </Col>
                 </Row>
               </div>
@@ -243,7 +266,9 @@ const Dashboard = ({ dispatch, permData = {}, groupList = [] }) => {
                   </Col>
                   <Col span={9} className="text-right">
                     <h3 className="text-xl text-red-500">{state.clientChainRatio.percentage}</h3>
-                    <span>较上月</span>
+                    <span>
+                      {cyclicalOp.find(item => item.value === state.params.cyclical)?.title}
+                    </span>
                   </Col>
                 </Row>
               </div>
@@ -264,7 +289,9 @@ const Dashboard = ({ dispatch, permData = {}, groupList = [] }) => {
                     <h3 className="text-xl text-green-500">
                       {state.businessChainRatio.percentage}
                     </h3>
-                    <span>较上月</span>
+                    <span>
+                      {cyclicalOp.find(item => item.value === state.params.cyclical)?.title}
+                    </span>
                   </Col>
                 </Row>
               </div>
@@ -285,7 +312,9 @@ const Dashboard = ({ dispatch, permData = {}, groupList = [] }) => {
                     <h3 className="text-xl text-green-500">
                       {state.serviceLogChainRatio.percentage}
                     </h3>
-                    <span>较上月</span>
+                    <span>
+                      {cyclicalOp.find(item => item.value === state.params.cyclical)?.title}
+                    </span>
                   </Col>
                 </Row>
               </div>