修改设备管理样式

src/components/TabsContent/index.less

@@ -3,7 +3,7 @@
   align-items: center;
   height: 116px;
   margin-bottom: 10px;
-  :nth-child(1) {
+  > .tabsItem {
     border-right: 1px solid #979797;
   }
   :last-child {

src/pages/DeviceManager/index.js

@@ -8,11 +8,11 @@ import {
 } from '@/services/device';
 import { RightOutlined } from '@ant-design/icons';
 import { useNavigate, useParams, useRequest } from '@umijs/max';
-import { Button, Collapse, List, Space, Table } from 'antd';
+import { Collapse, List, Space, Table } from 'antd';
 import dayjs from 'dayjs';
 import { useMemo, useState } from 'react';
 import styles from './index.less';
-const img = require('@/assets/deviceManager/device01.png');
+const img = require('@/assets/air-conditioner.png');
 const chartIcon = require('@/assets/deviceManager/chartIcon.png');
 const DeviceManager = () => {
   const { projectId } = useParams();
@@ -58,7 +58,11 @@ const DeviceManager = () => {
   );
 };
 const Device = ({ projectId }) => {
+  const style = {
+    color: '#4a90e2',
+  };
   const [type, setType] = useState(0); //0 全部  1维修  2保养
+  const [activeCode, setActiveCode] = useState();
 
   const columnsRepair = [
     {
@@ -136,45 +140,51 @@ const Device = ({ projectId }) => {
 
   //请求 全部设备列表
   const {
-    data: allData,
+    data,
     run: runDevice,
     loading: loadingDevice,
   } = useRequest(queryDeviceList, {
     defaultParams: [projectId],
-    formatResult: (res) => {
-      const data = res.data;
-      const total = data?.reduce((total, item) => item.Count, 0);
-      const items = data?.map((item, idx) => {
-        const itemLen = item?.List?.length;
-        return {
-          key: idx,
-          label: (
-            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-              <span>{item.Type}</span>
-              <span>{itemLen}个</span>
-            </div>
-          ),
-          children: (
-            <div style={{ position: 'relative' }}>
-              <List
-                header={null}
-                footer={null}
-                dataSource={item.List}
-                renderItem={(cur) => (
-                  <List.Item style={{ justifyContent: 'left' }}>
-                    <span style={{ width: '30%' }}> {cur.Code} </span>
-                    <span> {cur.Name} </span>
-                  </List.Item>
-                )}
-              />
-            </div>
-          ),
-        };
-      });
-      return { total, items };
-    },
   });
 
+  const allData = useMemo(() => {
+    console.log(activeCode);
+    const total = data?.reduce((total, item) => item.Count, 0);
+    const items = data?.map((item, idx) => {
+      const itemLen = item?.List?.length;
+      return {
+        key: idx,
+        label: (
+          <div className={styles.lineContent}>
+            <span>{item.Type}</span>
+            <span>{itemLen}个</span>
+          </div>
+        ),
+        children: (
+          <div style={{ position: 'relative' }}>
+            <List
+              header={null}
+              footer={null}
+              dataSource={item.List}
+              renderItem={(cur) => (
+                <List.Item
+                  className={`${styles.itemText} ${
+                    activeCode == cur.Code ? styles.itemTextActive : ''
+                  }`}
+                  onClick={() => handleItemClick(cur.Code)}
+                >
+                  <span style={{ marginRight: '166px' }}> {cur.Code} </span>
+                  <span> {cur.Name} </span>
+                </List.Item>
+              )}
+            />
+          </div>
+        ),
+      };
+    });
+    return { total, items };
+  }, [data, activeCode]);
+
   //请求维修中设备列表queryRepairRecord
   const {
     data: repairData,
@@ -208,6 +218,35 @@ const Device = ({ projectId }) => {
     },
   );
 
+  const handleItemClick = (code) => {
+    console.log(code);
+    setActiveCode(code);
+  };
+
+  const renderChildlen = (item) => {
+    console.log(activeCode);
+    return (
+      <div style={{ position: 'relative' }}>
+        <List
+          header={null}
+          footer={null}
+          dataSource={item.List}
+          renderItem={(cur) => (
+            <List.Item
+              className={`${styles.listText} ${
+                activeCode == cur.Code ? styles.lineTextActive : ''
+              }`}
+              onClick={() => handleItemClick(cur.Code)}
+            >
+              <span style={{ marginRight: '166px' }}> {cur.Code} </span>
+              <span> {cur.Name} </span>
+            </List.Item>
+          )}
+        />
+      </div>
+    );
+  };
+
   const handleBtnClick = (type) => {
     setType(type);
     switch (type) {
@@ -225,24 +264,33 @@ const Device = ({ projectId }) => {
 
   const onChange = () => {};
   return (
-    <Space direction="vertical" className={styles.sparePart}>
+    <div className={styles.sparePart}>
       <div className={`card-box ${styles.titleContent}`}>
         <img className={styles.img} src={img} />
         <div>
           <div className={styles.num}>{allData?.total}</div>
-          <div>设备总数</div>
+          <div className={styles.text}>设备总数</div>
         </div>
       </div>
-      <Space>
-        <Button shape="round" onClick={() => handleBtnClick(0)}>
+      <Space className={styles.btns} size={28}>
+        <div
+          className={`${styles.btn} ${type == 0 ? styles.active : ''}`}
+          onClick={() => handleBtnClick(0)}
+        >
           全部
-        </Button>
-        <Button shape="round" onClick={() => handleBtnClick(1)}>
+        </div>
+        <div
+          className={`${styles.btn} ${type == 1 ? styles.active : ''}`}
+          onClick={() => handleBtnClick(1)}
+        >
           维修
-        </Button>
-        <Button shape="round" onClick={() => handleBtnClick(2)}>
-          计划保养
-        </Button>
+        </div>
+        <div
+          className={`${styles.btn} ${type == 2 ? styles.active : ''}`}
+          onClick={() => handleBtnClick(2)}
+        >
+          保养
+        </div>
       </Space>
       {type == 0 && (
         <Collapse
@@ -270,7 +318,7 @@ const Device = ({ projectId }) => {
           pagination={false}
         />
       )}
-    </Space>
+    </div>
   );
 };
 const SparePart = ({ data, loading, projectId }) => {
@@ -312,7 +360,7 @@ const SparePart = ({ data, loading, projectId }) => {
     return result;
   }, [data]);
   return (
-    <Space direction="vertical" className={styles.sparePart}>
+    <Space direction="vertical" size={16} className={styles.sparePart}>
       <div className={`card-box ${styles.titleContent}`}>
         <img className={styles.img} src={img} />
         <div>

src/pages/DeviceManager/index.less

@@ -5,15 +5,25 @@
 .titleContent {
   position: relative;
   display: flex;
-  justify-content: space-around;
   align-items: center;
+  justify-content: center;
+  height: 238px;
   .img {
-    width: 30%;
+    width: 150px;
+    margin-right: 46px;
   }
   .num {
-    color: #ffc400;
-    font-size: 36px;
-    margin-bottom: 20px;
+    margin-bottom: 24px;
+    font-size: 80px;
+    font-family: DINAlternate-Bold, DINAlternate;
+    font-weight: bold;
+    color: #f5a623;
+    line-height: 94px;
+  }
+  .text {
+    font-size: 28px;
+    color: #4a4a4a;
+    line-height: 38px;
   }
   .rightIcon {
     position: absolute;
@@ -21,12 +31,70 @@
     top: 20px;
   }
 }
+
+.lineContent {
+  display: flex;
+  justify-content: space-between;
+  font-size: 28px;
+  font-weight: 500;
+  color: #4a4a4a;
+  line-height: 38px;
+}
 .sparePart {
   width: 100%;
+  text-align: center;
   .cardItem {
     display: flex;
     padding: 10px;
     justify-content: space-between;
     align-items: center;
   }
+  .btns {
+    margin: 34px 0;
+    .btn {
+      width: 147px;
+      height: 59px;
+      background: #e8e8e8;
+      border-radius: 35px;
+      font-size: 30px;
+      color: #4a4a4a;
+      line-height: 59px;
+      text-align: center;
+    }
+    .active {
+      color: #4a90e2;
+      background: #cae2ff;
+    }
+  }
+  .itemText {
+    padding-left: 38px;
+    justify-content: flex-start;
+    font-size: 28px;
+    color: #4a4a4a;
+    line-height: 38px;
+    height: 96px;
+  }
+  .itemTextActive {
+    color: #4a90e2;
+  }
+
+  :global {
+    .ant-collapse > .ant-collapse-item > .ant-collapse-header {
+      padding: 36px;
+      align-items: center;
+    }
+    .ant-collapse
+      > .ant-collapse-item
+      > .ant-collapse-header
+      .ant-collapse-expand-icon {
+      > span {
+        font-size: 28px;
+        padding-inline-end: 0;
+        padding-inline-start: 16px;
+      }
+    }
+    .ant-list-split .ant-list-item {
+      border-color: #dbdbdb;
+    }
+  }
 }

src/pages/SafetyManagement/index.less

@@ -10,6 +10,7 @@
 .num {
   font-size: 80px;
   font-weight: bold;
+  font-family: DINAlternate-Bold, DINAlternate;
   line-height: 94px;
   margin-bottom: 16px;
   color: #4a90e2;
@@ -103,8 +104,9 @@
       width: 49%;
       display: flex;
       flex-direction: column;
+      align-items: center;
       justify-content: space-between;
-      padding: 28px 114px 32px 112px;
+      padding: 28px 0 32px 0;
       .btn {
         width: 157px;
         height: 55px;