style: 11

src/pages/Workbench/Dashboard/index.jsx

@@ -29,6 +29,7 @@ const Dashboard = ({ dispatch, departments = [] }) => {
     defaultCyclicalValue = cyclicalAuthCache
   }
   const [state, setState] = useState({
+    selectId: '',
     disabled: true,
     loading: true,
     staffIds: null,
@@ -94,6 +95,7 @@ const Dashboard = ({ dispatch, departments = [] }) => {
   const handleStaffClick = id => {
     setState({
       ...state,
+      selectId: id,
       immediate: true,
       params: { ...state.params, staffIds: [id] }
     })
@@ -177,8 +179,7 @@ const Dashboard = ({ dispatch, departments = [] }) => {
       render: (name, record) => (
         <span
           onClick={() => handleReminderList(record.type, '7day')}
-          className="text-primary cursor-pointer hover:text-[#967bbd]"
-        >
+          className="text-primary cursor-pointer hover:text-[#967bbd]">
           {name}
         </span>
       )
@@ -189,8 +190,7 @@ const Dashboard = ({ dispatch, departments = [] }) => {
       render: (name, record) => (
         <span
           onClick={() => handleReminderList(record.type, '15day')}
-          className="text-primary cursor-pointer hover:text-[#967bbd]"
-        >
+          className="text-primary cursor-pointer hover:text-[#967bbd]">
           {name}
         </span>
       )
@@ -201,8 +201,7 @@ const Dashboard = ({ dispatch, departments = [] }) => {
       render: (name, record) => (
         <span
           onClick={() => handleReminderList(record.type, '30day')}
-          className="text-primary cursor-pointer hover:text-[#967bbd]"
-        >
+          className="text-primary cursor-pointer hover:text-[#967bbd]">
           {name}
         </span>
       )
@@ -213,8 +212,7 @@ const Dashboard = ({ dispatch, departments = [] }) => {
       render: (name, record) => (
         <span
           onClick={() => handleReminderList(record.type, '3month')}
-          className="text-primary cursor-pointer hover:text-[#967bbd]"
-        >
+          className="text-primary cursor-pointer hover:text-[#967bbd]">
           {name}
         </span>
       )
@@ -225,8 +223,7 @@ const Dashboard = ({ dispatch, departments = [] }) => {
       render: (name, record) => (
         <span
           onClick={() => handleReminderList(record.type, '6month')}
-          className="text-primary cursor-pointer hover:text-[#967bbd]"
-        >
+          className="text-primary cursor-pointer hover:text-[#967bbd]">
           {name}
         </span>
       )
@@ -237,8 +234,7 @@ const Dashboard = ({ dispatch, departments = [] }) => {
       render: (name, record) => (
         <span
           onClick={() => handleReminderList(record.type, 'reminder')}
-          className="text-primary cursor-pointer hover:text-[#967bbd]"
-        >
+          className="text-primary cursor-pointer hover:text-[#967bbd]">
           {name}
         </span>
       )
@@ -325,15 +321,29 @@ const Dashboard = ({ dispatch, departments = [] }) => {
         {state.params.dataPermission === 'all' &&
           state.staffList.map(item => (
             <div className="ml-4" key={item.id} onClick={() => handleStaffClick(item.id)}>
-              <div className="relative w-30px h-30px rounded-1/2">
-                <img
-                  src={
-                    (isDevMode() ? 'http://cld2qa.com' : 'http://zhcld.com') +
-                    (item?.avatar ? item.avatar : '/global/img/avtra_2.jpg')
-                  }
-                />
-                <span className={styles.avtraName}>{item.username}</span>
-              </div>
+              {state.selectId === item.id ? (
+                <div className={['relative', 'cursor-pointer', styles.imgBg].join(' ')}>
+                  <img
+                    className="w-full max-w-30px h-30px border rounded-30px"
+                    src={
+                      (isDevMode() ? 'http://cld2qa.com' : 'http://zhcld.com') +
+                      (item?.avatar ? item.avatar : '/global/img/avtra_2.jpg')
+                    }
+                  />
+                  <span className={['absolute', styles.avtraName].join(' ')}>{item.username}</span>
+                </div>
+              ) : (
+                <div className="relative cursor-pointer">
+                  <img
+                    className="w-full max-w-30px h-30px border rounded-30px"
+                    src={
+                      (isDevMode() ? 'http://cld2qa.com' : 'http://zhcld.com') +
+                      (item?.avatar ? item.avatar : '/global/img/avtra_2.jpg')
+                    }
+                  />
+                  <span className={styles.avtraName}>{item.username}</span>
+                </div>
+              )}
             </div>
           ))}
       </div>
@@ -359,8 +369,7 @@ const Dashboard = ({ dispatch, departments = [] }) => {
                           state.clientChainRatio.percentage.startsWith('-')
                             ? 'text-green-500'
                             : 'text-red-500'
-                        ].join(' ')}
-                      >
+                        ].join(' ')}>
                         {state.clientChainRatio.percentage}
                       </span>
                     </div>
@@ -382,8 +391,7 @@ const Dashboard = ({ dispatch, departments = [] }) => {
               ) : (
                 <Row
                   className="cursor-pointer"
-                  onClick={() => handleRatioCard(cardTypeMap.COMPANY)}
-                >
+                  onClick={() => handleRatioCard(cardTypeMap.COMPANY)}>
                   <Col span={6}>
                     <div className="w-full max-w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
                       <City size="26" fill="#fff" />
@@ -398,8 +406,7 @@ const Dashboard = ({ dispatch, departments = [] }) => {
                           state.customerChainRatio.percentage.startsWith('-')
                             ? 'text-green-500'
                             : 'text-red-500'
-                        ].join(' ')}
-                      >
+                        ].join(' ')}>
                         {state.customerChainRatio.percentage}
                       </span>
                     </div>
@@ -422,8 +429,7 @@ const Dashboard = ({ dispatch, departments = [] }) => {
               ) : (
                 <Row
                   className="cursor-pointer"
-                  onClick={() => handleRatioCard(cardTypeMap.BUSINESS)}
-                >
+                  onClick={() => handleRatioCard(cardTypeMap.BUSINESS)}>
                   <Col span={6}>
                     <div className="w-full max-w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
                       <Finance size="26" fill="#fff" />
@@ -438,8 +444,7 @@ const Dashboard = ({ dispatch, departments = [] }) => {
                           state.businessChainRatio.percentage.startsWith('-')
                             ? 'text-green-500'
                             : 'text-red-500'
-                        ].join(' ')}
-                      >
+                        ].join(' ')}>
                         {state.businessChainRatio.percentage}
                       </span>
                     </div>
@@ -462,8 +467,7 @@ const Dashboard = ({ dispatch, departments = [] }) => {
               ) : (
                 <Row
                   onClick={() => handleRatioCard(cardTypeMap.SERVICE)}
-                  className="cursor-pointer"
-                >
+                  className="cursor-pointer">
                   <Col span={6}>
                     <div className="w-full max-w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
                       <Comment size="26" fill="#fff" />
@@ -478,8 +482,7 @@ const Dashboard = ({ dispatch, departments = [] }) => {
                           state.serviceLogChainRatio.percentage.startsWith('-')
                             ? 'text-green-500'
                             : 'text-red-500'
-                        ].join(' ')}
-                      >
+                        ].join(' ')}>
                         {state.serviceLogChainRatio.percentage}
                       </span>
                     </div>
@@ -513,8 +516,7 @@ const Dashboard = ({ dispatch, departments = [] }) => {
               title="数据汇总"
               className="shadow-card"
               bodyStyle={{ padding: state.loading ? '24px' : 0 }}
-              loading={state.loading}
-            >
+              loading={state.loading}>
               <ul>
                 <li className="px-12px py-16px border-b-1">
                   新增客户<b className="px-1">{state.aggregation.clientCount}</b>个，服务

src/pages/Workbench/Dashboard/index.less

@@ -20,3 +20,10 @@
     transform: scale(0.8) translate(-15%, -30%);
   }
 }
+.imgBg {
+  padding: 5px 8px 15px 8px;
+  background: #886ab5;
+  :global(.absolute) {
+    color: #ffffff;
+  }
+}