feat: 仪表盘增加权限及日期选择

src/pages/Customer/Client/index.jsx

@@ -3,7 +3,7 @@ import CompanyDetail from '@/pages/Customer/Company/components/CompanyDetail'
 import AddContact from '@/pages/Customer/Client/components/AddClient'
 import ProTable from '@ant-design/pro-table'
 import { Input, Button, message, Tooltip, Select } from 'antd'
-import { connect } from 'dva'
+import { connect } from 'umi'
 import React, { useEffect, useState, useRef, useMemo } from 'react'
 import consts from '@/consts'
 import LazyCascader from '@/components/LazyCascader'

src/pages/workbench/Dashboard/index.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import ProTable from '@ant-design/pro-table'
+import { connect } from 'umi'
 import { Row, Col, Divider, Select } from 'antd'
 import { AddressBook, City, Finance, Comment } from '@icon-park/react'
 import { DualAxes } from '@ant-design/charts'
@@ -9,7 +10,50 @@ import { queryDashboard } from '@/services/dashboard'
 import ReminderList from './components/ReminderList'
 import LeaderBoard from './components/LeaderBoard'
 
-const Dashboard = () => {
+const cyclicalOp = [
+  {
+    label: '今天',
+    value: 'today'
+  },
+  {
+    label: '昨天',
+    value: 'yesterday'
+  },
+  {
+    label: '本周',
+    value: 'week'
+  },
+  {
+    label: '上周',
+    value: 'lastWeek'
+  },
+  {
+    label: '本月',
+    value: 'month'
+  },
+  {
+    label: '上月',
+    value: 'lastMonth'
+  },
+  {
+    label: '本季度',
+    value: 'quarter'
+  },
+  {
+    label: '上季度',
+    value: 'lastQuarter'
+  },
+  {
+    label: '本年',
+    value: 'year'
+  },
+  {
+    label: '去年',
+    value: 'lastYear'
+  }
+]
+
+const Dashboard = ({ permData }) => {
   const { Option } = Select
   const [state, setState] = useState({
     visible: false,
@@ -21,7 +65,8 @@ const Dashboard = () => {
     serviceLogChainRatio: {},
     aggregation: {},
     char: [],
-    thread: []
+    thread: [],
+    params: {}
   })
   const { toggleModal, setModalProps } = useModal()
   // 展示服务弹窗详情
@@ -64,8 +109,8 @@ const Dashboard = () => {
     }
   }
   useEffect(() => {
-    initData()
-  }, [])
+    initData(state.params)
+  }, [state.params])
   const columns = [
     {
       title: '超过周期未服务提醒',
@@ -240,7 +285,7 @@ const Dashboard = () => {
       <div className="shadow-card">
         <ProTable
           bordered
-          rowKey={record => record.day15 + Date.now()}
+          rowKey={record => record.type + Date.now()}
           columns={columns}
           dataSource={state.reminderData}
           search={false}
@@ -249,16 +294,32 @@ const Dashboard = () => {
         />
       </div>
       <div className="mt-4">
+        <Select
+          options={permData?.workbench || []}
+          dropdownMatchSelectWidth={false}
+          defaultValue="oneself"
+          onChange={e => setState({ ...state, params: { ...state.params, dataPermission: e } })}
+        />
+        <span className="ml-4">
+          <Select
+            options={cyclicalOp}
+            dropdownMatchSelectWidth={false}
+            defaultValue="month"
+            onChange={e => setState({ ...state, params: { ...state.params, cyclical: e } })}
+          />
+        </span>
+      </div>
+      <div className="mt-4">
         <div className="p-4 bg-white border rounded-lg shadow-card">
           <Row gutter={16}>
             <Col className="gutter-row" span={6}>
               <div className="p-4 bg-white border rounded-lg">
                 <Row>
                   <Col span={6}>
-                    <div className="w-48px h-48px border rounded-48px bg-[#0c7cd5] relative">
-                      <span className="absolute top-9px left-9px">
-                        <City size="26" fill="#fff" />
-                      </span>
+                    <div className="w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
+                      {/* <span className="absolute top-9px left-9px"> */}
+                      <City size="26" fill="#fff" />
+                      {/* </span> */}
                     </div>
                   </Col>
                   <Col span={9}>
@@ -278,10 +339,8 @@ const Dashboard = () => {
               <div className="p-4 bg-white border rounded-lg shadow-card">
                 <Row>
                   <Col span={6}>
-                    <div className="w-48px h-48px border rounded-48px bg-[#0c7cd5] relative">
-                      <span className="absolute top-10px left-10px">
-                        <AddressBook size="26" fill="#fff" />
-                      </span>
+                    <div className="w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
+                      <AddressBook size="26" fill="#fff" />
                     </div>
                   </Col>
                   <Col span={9}>
@@ -299,10 +358,8 @@ const Dashboard = () => {
               <div className="p-4 bg-white border rounded-lg">
                 <Row>
                   <Col span={6}>
-                    <div className="w-48px h-48px border rounded-48px bg-[#0c7cd5] relative">
-                      <span className="absolute top-10px left-10px">
-                        <Finance size="26" fill="#fff" />
-                      </span>
+                    <div className="w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
+                      <Finance size="26" fill="#fff" />
                     </div>
                   </Col>
                   <Col span={9}>
@@ -322,10 +379,8 @@ const Dashboard = () => {
               <div className="p-4 bg-white border rounded-lg">
                 <Row>
                   <Col span={6}>
-                    <div className="w-48px h-48px border rounded-48px bg-[#0c7cd5] relative">
-                      <span className="absolute top-10px left-10px">
-                        <Comment size="26" fill="#fff" />
-                      </span>
+                    <div className="w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
+                      <Comment size="26" fill="#fff" />
                     </div>
                   </Col>
                   <Col span={9}>
@@ -396,4 +451,6 @@ const Dashboard = () => {
   )
 }
 
-export default Dashboard
+export default connect(({ global }) => ({
+  permData: global.premData
+}))(Dashboard)