feat: 软件锁排行榜

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

@@ -0,0 +1,101 @@
+import ProTable from '@ant-design/pro-table'
+import { Select, Card } from 'antd'
+import Iconfont from '@/components/SvgIcon'
+import React, { useState, useMemo } from 'react'
+
+const { Option } = Select
+
+const opMap = {
+  soft: '软件锁'
+}
+const colorMap = {
+  1: 'text-hex-ffc241',
+  2: 'text-hex-1dc9b7',
+  3: 'text-hex-868e96'
+}
+const SoftLeaderboard = ({ loading = false, productLeaderBoard = [] }) => {
+  const [activeOp, setActiveOp] = useState('soft')
+  const columns = useMemo(() => {
+    const oColumns = [
+      {
+        title: '排名',
+        dataIndex: 'index',
+        valueType: 'indexBorder',
+        align: 'center',
+        width: '20%',
+        render: (_, record, index) =>
+          index + 1 <= 3 ? <Iconfont type="icon-trophy" className={colorMap[index + 1]} /> : ''
+      },
+      {
+        title: '姓名',
+        dataIndex: `${activeOp}Name`,
+        align: 'center',
+        width: '20%'
+      },
+      {
+        title: '销售',
+        dataIndex: 'softSales',
+        align: 'center',
+        width: '20%'
+      },
+      {
+        title: '借出',
+        dataIndex: 'softLend',
+        align: 'center',
+        width: '20%'
+      },
+      {
+        title: '赠送',
+        dataIndex: 'softGift',
+        align: 'center',
+        width: '20%'
+      }
+    ]
+
+    let stop = false
+    const bColumns = oColumns.reduce((prev, curr, idx) => {
+      if (idx < 4) {
+        prev.push(curr)
+        return prev
+      }
+
+      if (!stop && curr.dataIndex.startsWith(activeOp)) {
+        stop = true
+        prev.push(curr)
+        return prev
+      }
+      return prev
+    }, [])
+    return bColumns
+  }, [activeOp])
+
+  return (
+    <Card
+      loading={loading}
+      bodyStyle={{ padding: loading ? '24px' : 0 }}
+      title={
+        <div className="px-4 pt-2 pb-0 flex items-center justify-between">
+          <span>产品排行榜</span>
+          <Select defaultValue="soft" onChange={e => setActiveOp(e)}>
+            <Option value="soft">软件锁</Option>
+          </Select>
+        </div>
+      }>
+      <div className="text-center border border-x-0 p-2">{opMap[activeOp]}排行榜</div>
+      <div className="">
+        <ProTable
+          border={true}
+          rowKey={record => record.rank}
+          columns={columns}
+          dataSource={productLeaderBoard}
+          search={false}
+          size="small"
+          toolBarRender={false}
+          pagination={false}
+        />
+      </div>
+    </Card>
+  )
+}
+
+export default SoftLeaderboard

src/pages/workbench/Dashboard/index.jsx

@@ -8,6 +8,7 @@ import { useModal } from '@/components/Modal'
 import { queryDashboard } from '@/services/dashboard'
 import ReminderList from './components/ReminderList'
 import LeaderBoard from './components/LeaderBoard'
+import SoftLeaderboard from './components/SoftLeaderboard'
 import { cyclicalOp } from './consts'
 import BusinessChar from './components/BusinessChar'
 
@@ -20,6 +21,7 @@ const Dashboard = () => {
     visible: false,
     reminderData: [],
     leaderboard: [],
+    productLeaderBoard: [],
     clientChainRatio: {},
     customerChainRatio: {},
     businessChainRatio: {},
@@ -45,7 +47,8 @@ const Dashboard = () => {
       data: {
         reminderData = [],
         leaderboard = [],
-        clientChainRatio = {},
+        productLeaderBoard = {},
+        clientChainRatio = [],
         customerChainRatio = {},
         businessChainRatio = {},
         serviceLogChainRatio = {},
@@ -61,6 +64,7 @@ const Dashboard = () => {
           immediate: false,
           reminderData,
           leaderboard,
+          productLeaderBoard,
           clientChainRatio,
           customerChainRatio,
           businessChainRatio,
@@ -75,6 +79,7 @@ const Dashboard = () => {
             loading: false,
             reminderData,
             leaderboard,
+            productLeaderBoard,
             clientChainRatio,
             customerChainRatio,
             businessChainRatio,
@@ -395,6 +400,12 @@ const Dashboard = () => {
           <Col className="gutter-row" span={12}>
             <LeaderBoard dataList={state.leaderboard} loading={state.loading} />
           </Col>
+          <Col className="gutter-row" span={12}>
+            <SoftLeaderboard
+              productLeaderBoard={state.productLeaderBoard}
+              loading={state.loading}
+            />
+          </Col>
         </Row>
       </div>
     </div>