feat: 仪表盘

src/pages/workbench/Dashboard/index.jsx

@@ -1,17 +1,277 @@
 import React from 'react'
-import { PageHeaderWrapper } from '@ant-design/pro-layout'
-import { Card } from 'antd'
+import ProTable from '@ant-design/pro-table'
+import { Row, Col, List, Divider, Select } from 'antd'
+import { DualAxes } from '@ant-design/charts'
 
 const Dashboard = () => {
+  const { Option } = Select
+  const columns = [
+    {
+      title: '超过周期未服务提醒',
+      dataIndex: 'search'
+    },
+    {
+      title: '7天',
+      dataIndex: 'search'
+    },
+    {
+      title: '15天',
+      dataIndex: 'search'
+    },
+    {
+      title: '30天',
+      dataIndex: 'search'
+    },
+    {
+      title: '3个月',
+      dataIndex: 'search'
+    },
+    {
+      title: '6个月',
+      dataIndex: 'search'
+    },
+    {
+      title: '提醒逾期',
+      dataIndex: 'search'
+    }
+  ]
+  const columnsCustomer = [
+    {
+      title: '排名',
+      dataIndex: 'search'
+    },
+    {
+      title: '姓名',
+      dataIndex: 'search'
+    },
+    {
+      title: '新增客户数',
+      dataIndex: 'search'
+    }
+  ]
+  const uvBillData = [
+    {
+      time: '验证阶段',
+      value: 350,
+      type: '上个月'
+    },
+    {
+      time: '开发阶段',
+      value: 900,
+      type: '上个月'
+    },
+    {
+      time: '提案阶段',
+      value: 300,
+      type: '上个月'
+    },
+    {
+      time: '赢单',
+      value: 450,
+      type: '上个月'
+    },
+    {
+      time: '输单',
+      value: 470,
+      type: '上个月'
+    },
+    {
+      time: '验证阶段',
+      value: 220,
+      type: '本月'
+    },
+    {
+      time: '开发阶段',
+      value: 300,
+      type: '本月'
+    },
+    {
+      time: '提案阶段',
+      value: 250,
+      type: '本月'
+    },
+    {
+      time: '赢单',
+      value: 220,
+      type: '本月'
+    },
+    {
+      time: '输单',
+      value: 362,
+      type: '本月'
+    }
+  ]
+  const transformData = [
+    {
+      time: '验证阶段',
+      增幅: 800
+    },
+    {
+      time: '开发阶段',
+      增幅: 600
+    },
+    {
+      time: '提案阶段',
+      增幅: 400
+    },
+    {
+      time: '赢单',
+      增幅: 380
+    },
+    {
+      time: '输单',
+      增幅: 220
+    }
+  ]
+  const data = [
+    '新增客户 0 个，服务 0 条',
+    '新增联系人 0 个，服务 0 条',
+    '新增商机 0 个，金额 0 元，服务 0 条，赢单 0 个',
+    '新增开票 0 张，开票总金额 0 元',
+    '回款 0 条，回款总金额 0 元',
+    '支出 0 元，收入 0 元'
+  ]
+  const config = {
+    data: [uvBillData, transformData],
+    height: 230,
+    xField: 'time',
+    yField: ['value', '增幅'],
+    geometryOptions: [
+      {
+        geometry: 'column',
+        isGroup: true,
+        seriesField: 'type',
+        color: ['#A088C4', '#605B67']
+      },
+      {
+        geometry: 'line',
+        lineStyle: { lineWidth: 2 },
+        color: '#FEB51A'
+      }
+    ]
+  }
   return (
     <div>
-      <PageHeaderWrapper>
-        <Card bordered={false}>fsfes</Card>
-        <div>
-          <h2>工作台首页</h2>
-          <span>副标题</span>
-        </div>
-      </PageHeaderWrapper>
+      <div>
+        <ProTable columns={columns} search={false} toolBarRender={false} />
+      </div>
+      <div className="mt-4">
+        <Row gutter={16}>
+          <Col className="gutter-row" span={6}>
+            <div className="p-4 bg-white border rounded-lg">
+              <Row>
+                <Col span={6}>a</Col>
+                <Col span={9}>
+                  <h3 className="text-2xl">23</h3>
+                  <span>新增客户</span>
+                </Col>
+                <Col span={9} className="text-right">
+                  <h3 className="text-xl text-green-500">+10%</h3>
+                  <span>较上月</span>
+                </Col>
+              </Row>
+            </div>
+          </Col>
+          <Col className="gutter-row" span={6}>
+            <div className="p-4 bg-white border rounded-lg">
+              <Row>
+                <Col span={6}>a</Col>
+                <Col span={9}>
+                  <h3 className="text-2xl">10</h3>
+                  <span>新增联系人</span>
+                </Col>
+                <Col span={9} className="text-right">
+                  <h3 className="text-xl text-red-500">-8%</h3>
+                  <span>较上月</span>
+                </Col>
+              </Row>
+            </div>
+          </Col>
+          <Col className="gutter-row" span={6}>
+            <div className="p-4 bg-white border rounded-lg">
+              <Row>
+                <Col span={6}>a</Col>
+                <Col span={9}>
+                  <h3 className="text-2xl">5</h3>
+                  <span>新增商机</span>
+                </Col>
+                <Col span={9} className="text-right">
+                  <h3 className="text-xl text-green-500">+10%</h3>
+                  <span>较上月</span>
+                </Col>
+              </Row>
+            </div>
+          </Col>
+          <Col className="gutter-row" span={6}>
+            <div className="p-4 bg-white border rounded-lg">
+              <Row>
+                <Col span={6}>a</Col>
+                <Col span={9}>
+                  <h3 className="text-2xl">32</h3>
+                  <span>服务记录</span>
+                </Col>
+                <Col span={9} className="text-right">
+                  <h3 className="text-xl text-green-500">+10%</h3>
+                  <span>较上月</span>
+                </Col>
+              </Row>
+            </div>
+          </Col>
+        </Row>
+      </div>
+      <div className="mt-4">
+        <Row gutter={16}>
+          <Col className="gutter-row" span={16}>
+            <div className="p-4 bg-white border rounded-lg">
+              <div className="relative">
+                <span>销售漏斗</span>
+                <div className="absolute right-1 top-0">
+                  <Select defaultValue="销售漏斗组">
+                    <Option value="销售漏斗组">销售漏斗组</Option>
+                  </Select>
+                </div>
+              </div>
+              <Divider />
+              <DualAxes {...config} />
+            </div>
+          </Col>
+          <Col className="gutter-row" span={8}>
+            <div className="bg-white rounded-lg">
+              <List
+                header={<div>数据汇总</div>}
+                bordered
+                dataSource={data}
+                renderItem={item => <List.Item>{item}</List.Item>}
+              />
+            </div>
+          </Col>
+        </Row>
+      </div>
+      <div className="mt-4">
+        <Row gutter={16}>
+          <Col className="gutter-row" span={12}>
+            <div className="p-4 bg-white border rounded-lg">
+              <div className="relative">
+                <span>排行榜</span>
+                <div className="absolute right-1 top-0">
+                  <Select defaultValue="新增服务">
+                    <Option value="新增服务">新增服务</Option>
+                    <Option value="客户服务">客户服务</Option>
+                    <Option value="新增联系人">新增联系人</Option>
+                    <Option value="联系人服务">联系人服务</Option>
+                    <Option value="新增商机">新增商机</Option>
+                    <Option value="商机服务">商机服务</Option>
+                    <Option value="开票金额">开票金额</Option>
+                    <Option value="回款金额">回款金额</Option>
+                  </Select>
+                </div>
+              </div>
+              <div className="text-center">新增客户排行榜</div>
+              <ProTable columns={columnsCustomer} search={false} toolBarRender={false} />
+            </div>
+          </Col>
+        </Row>
+      </div>
     </div>
   )
 }