Merge branch 'develop' of http://120.55.44.4:10080/xujunjie/gt_client_pad into develop

.umirc.ts

@@ -83,20 +83,30 @@ export default defineConfig({
       component: './Smart/Simulate',
     },
     {
-      name: '智能监控',
-      path: '/hardware-controller/:projectId',
-      component: './HardwareController',
+      name: '智能管控',
+      path: '/controller/:projectId',
+      component: './Controller',
     },
     {
-      name: '空调监控',
-      path: '/hardware-controller/air-conditioner/:projectId',
-      component: './HardwareController/AirConditioner',
+      name: '感知监控',
+      path: '/controller/hardware/:projectId',
+      component: './Controller/Hardware',
     },
     {
-      name: '灯光监控',
-      path: '/hardware-controller/light/:projectId',
-      component: './HardwareController/Light',
+      name: '设备定位',
+      path: '/controller/device/:projectId',
+      component: './Controller/Device',
     },
+    // {
+    //   name: '空调监控',
+    //   path: '/hardware-controller/air-conditioner/:projectId',
+    //   component: './Controller/AirConditioner',
+    // },
+    // {
+    //   name: '灯光监控',
+    //   path: '/hardware-controller/light/:projectId',
+    //   component: './Controller/Light',
+    // },
     {
       name: '系统自检',
       path: '/self-inspection/:projectId',
@@ -148,10 +158,15 @@ export default defineConfig({
       component: './DeviceManager',
     },
     {
-      name: '设备管理详情',
+      name: '出入库管理详情',
       path: '/device/detail/:projectId/:type',
       component: './DeviceManager/detail',
     },
+    {
+      name: '备品管理总览',
+      path: '/device/storage/:projectId',
+      component: './DeviceManager/storage',
+    },
     {
       name: '安全管理',
       path: '/safety/:projectId', ///safety management

src/components/ManagementPage/BarChartModule.js

@@ -11,14 +11,13 @@ props：{
 }
 */
 
-import { useEffect, useRef, useState } from 'react';
-import echarts from 'echarts';
-import styles from './index.less';
-import dayjs from 'dayjs';
 import { Empty } from 'antd';
+import * as echarts from 'echarts';
+import { useEffect, useRef } from 'react';
+import styles from './index.less';
 
 //图表模块
-const BarChartModule = props => {
+const BarChartModule = (props) => {
   const chartDomRef = useRef();
   const chartRef = useRef();
   const { xData, dataList } = props;
@@ -48,7 +47,8 @@ const BarChartModule = props => {
   };
 
   const getStyle = () => {
-    if (dataList && dataList.length != 0) return { width: '100%', height: '100%' };
+    if (dataList && dataList.length != 0)
+      return { width: '100%', height: '100%' };
     else return { width: '100%', height: '100%', display: 'none' };
   };
 
@@ -99,12 +99,10 @@ const defaultOption = {
     axisLine: {
       show: false,
     },
-
   },
   legend: {
     icon: 'circle',
     right: '20%',
-   
   },
   series: [
     {

src/components/ManagementPage/PieChartModule.js

@@ -8,14 +8,13 @@ data: [
       ],
 */
 
-import { useEffect, useRef, useState } from 'react';
-import echarts from 'echarts';
-import styles from './index.less';
-import dayjs from 'dayjs';
 import { Empty } from 'antd';
+import * as echarts from 'echarts';
+import { useEffect, useRef } from 'react';
+import styles from './index.less';
 
 //图表模块
-const PieChartModule = props => {
+const PieChartModule = (props) => {
   const chartDomRef = useRef();
   const chartRef = useRef();
   const { data } = props;
@@ -68,7 +67,7 @@ const defaultOption = {
     trigger: 'item',
     formatter: '{b} : {d}% ({c})',
   },
- 
+
   series: [
     {
       type: 'pie',

src/components/ManagementPage/RadarChartModule.js

@@ -17,14 +17,13 @@ props：{
 }
 */
 
-import { useEffect, useRef, useState } from 'react';
-import echarts from 'echarts';
-import styles from './index.less';
-import dayjs from 'dayjs';
 import { Empty } from 'antd';
+import * as echarts from 'echarts';
+import { useEffect, useRef } from 'react';
+import styles from './index.less';
 
 //图表模块
-const RadarChartModule = props => {
+const RadarChartModule = (props) => {
   const chartDomRef = useRef();
   const chartRef = useRef();
   const { indicator, data, name = '' } = props;

src/components/ManagementPage/chartModule.js

@@ -205,10 +205,10 @@ const defaultOption = {
     boundaryGap: false,
     axisTick: { show: false },
     nameTextStyle: {
-      fontSize: 18,
+      fontSize: 24,
     },
     axisLabel: {
-      fontSize: 18,
+      fontSize: 24,
     },
     data: [
       '00:00',
@@ -227,12 +227,12 @@ const defaultOption = {
       name: '000',
       top: 20,
       nameTextStyle: {
-        fontSize: 18,
+        fontSize: 24,
         // align: 'left',
         padding: [0, 0, 20, 0],
       },
       axisLabel: {
-        fontSize: 18,
+        fontSize: 24,
       },
       axisLine: {
         show: false,
@@ -252,7 +252,7 @@ const defaultOption = {
       top: 20,
       position: 'right',
       nameTextStyle: {
-        fontSize: 18,
+        fontSize: 24,
         // align: 'left',
         padding: [0, 0, 20, 0],
       },
@@ -275,7 +275,7 @@ const defaultOption = {
       position: 'right',
       offset: 80,
       nameTextStyle: {
-        fontSize: 18,
+        fontSize: 24,
         // align: 'left',
         padding: [0, 0, 20, 0],
       },
@@ -401,7 +401,7 @@ const defaultOption = {
       },
       title: {
         offsetCenter: [0, '25%'],
-        fontSize: 18,
+        fontSize: 24,
       },
       detail: {
         show: false,
@@ -417,7 +417,7 @@ const defaultOption = {
     data: ['进水水量', '预测出水量', '实际出水量'],
     lineStyle: {},
     textStyle: {
-      fontSize: 18,
+      fontSize: 24,
     },
   },
   // toolbox: {

src/components/ManagementPage/index.less

@@ -1,13 +1,16 @@
 .icon {
   float: left;
-  width: 8px;
+  width: 4px;
   height: 30px;
+  margin: 7px 0;
   background-color: #366cda;
 }
 .title {
-  color: #c9d2d2;
-  font-size: 22px;
-  padding-left: 14px;
+  padding-left: 8px;
+  font-size: 30px;
+  font-weight: 400;
+  color: #4a4a4a;
+  line-height: 40px;
 }
 .right {
   color: #366cda;

src/components/PageContent/index.js

@@ -3,7 +3,7 @@ import { CloseOutlined } from '@ant-design/icons';
 import styles from './index.less';
 
 export default (props) => {
-  const { children, style, closeable = true } = props;
+  const { children, style, closeable = true, tabs = false } = props;
 
   const handleClose = () => {
     UnityAction.sendMsg('closePage');
@@ -12,7 +12,11 @@ export default (props) => {
   return (
     <div className={styles.page} style={style}>
       {closeable && (
-        <CloseOutlined onClick={handleClose} className={styles.close} />
+        <CloseOutlined
+          onClick={handleClose}
+          className={styles.close}
+          style={{ top: tabs ? 65 : '' }}
+        />
       )}
 
       {children}

src/components/PageContent/index.less

@@ -6,9 +6,11 @@
 
   .close {
     position: absolute;
-    top: 20px;
+    top: 26px;
     right: 20px;
-    font-size: 24px;
+    font-size: 38px;
+
+    color: #4a4a4a;
     cursor: pointer;
   }
 }

src/components/PageTitle/index.js

@@ -3,7 +3,7 @@ import { history } from '@umijs/max';
 import styles from './index.less';
 
 export default (props) => {
-  const { children, returnable = false, onReturn } = props;
+  const { tabs = false, children, returnable = false, onReturn } = props;
 
   const handleOnClick = () => {
     if (onReturn) {
@@ -14,9 +14,14 @@ export default (props) => {
   };
 
   return (
-    <div className={styles.titleBox} onClick={handleOnClick}>
+    <div
+      className={`${styles.titleBox} ${tabs ? styles.tabs : ''}`}
+      onClick={handleOnClick}
+    >
       {returnable || onReturn ? (
-        <LeftOutlined style={{ fontSize: 22, cursor: 'pointer' }} />
+        <LeftOutlined
+          style={{ fontSize: 36, cursor: 'pointer', marginRight: '40px' }}
+        />
       ) : (
         <span className={styles.titleBar} />
       )}

src/components/PageTitle/index.less

@@ -3,14 +3,19 @@
   align-items: center;
 }
 .titleBar {
-  width: 5px;
-  height: 26px;
+  width: 7px;
+  height: 35px;
   background: #4a90e2;
   float: left;
+  margin-right: 18px;
 }
 .title {
-  font-size: 26px;
+  font-size: 36px;
   font-weight: 400;
   color: #000000;
-  padding-left: 14px;
+  line-height: 50px;
+}
+.tabs {
+  position: absolute;
+  top: 52px;
 }

src/components/TabsContent/index.less

@@ -3,6 +3,13 @@
   align-items: center;
   height: 116px;
   margin-bottom: 10px;
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
   > .tabsItem {
     border-right: 1px solid #979797;
   }
@@ -14,6 +21,7 @@
   padding: 0 40px;
   color: #4a4a4a;
   font-size: 36px;
+  white-space: nowrap;
 }
 .active {
   color: #4a90e2;

src/global.less

@@ -109,7 +109,7 @@ input[type='reset'] {
   border-radius: 8px;
   box-shadow: 0px 0px 8px 2px rgba(191, 191, 191, 0.2);
   border: 1px solid #eee;
-  background: rgba(255, 255, 255, 0.6);
+  background: rgba(255, 255, 255);
 }
 
 .password-eye {
@@ -134,8 +134,8 @@ input[type='reset'] {
   }
   .tabs-item {
     flex: 1;
-    padding: 12px 20px;
-    font-size: 18px;
+    padding: 16px 24px;
+    font-size: 24px;
     font-weight: 400;
     color: #4a4a4a;
     border-right: 1px solid #979797;
@@ -152,15 +152,15 @@ input[type='reset'] {
 .section-title {
   display: flex;
   align-items: center;
-  font-size: 22px;
+  font-size: 28px;
   font-weight: 400;
   color: #4a4a4a;
-  line-height: 30px;
+  line-height: 40px;
   .section-line {
-    width: 3px;
-    height: 23px;
+    width: 4px;
+    height: 30px;
     background: #4a90e2;
-    margin-right: 6px;
+    margin-right: 8px;
   }
 }
 
@@ -192,6 +192,14 @@ input[type='reset'] {
 .ant-table-placeholder {
   background: transparent !important;
 }
+.ant-table,
+.ant-table-container,
+.ant-table-wrapper table {
+  border-radius: 0 !important;
+}
+.ant-table-container {
+  border: none !important;
+}
 .ant-table-cell::before {
   display: none;
 }
@@ -200,10 +208,15 @@ input[type='reset'] {
 }
 .ant-table-thead > tr > th,
 .ant-table-tbody > tr > td {
-  padding: 8px 25px !important;
-  font-size: 20px !important;
+  border-radius: 0 !important;
+  padding: 16px 18px !important;
+  font-size: 24px !important;
   color: #4a4a4a !important;
-  line-height: 28px !important;
+  line-height: 32px !important;
   font-weight: normal !important;
   vertical-align: middle;
+  border: none !important;
+}
+.ant-table-tbody > tr:nth-child(even) {
+  background: rgba(145, 192, 238, 0.16);
 }

src/pages/Controller/Device.js

@@ -0,0 +1,57 @@
+import PageContent from '@/components/PageContent';
+import PageTitle from '@/components/PageTitle';
+import { queryDevice } from '@/services/controller';
+import { UnityAction } from '@/utils/utils';
+import { useParams, useRequest } from '@umijs/max';
+import { Spin } from 'antd';
+import styles from './index.less';
+
+function Hardware() {
+  const { projectId } = useParams();
+
+  const { data, loading } = useRequest(queryDevice, {
+    defaultParams: [projectId],
+  });
+
+  const getIconStatus = (status) => {
+    if (status == 1) return '';
+    if (status == 2) return styles.offline;
+    if (status == 3) return styles.error;
+  };
+
+  return (
+    <PageContent closeable={false}>
+      <PageTitle onReturn={() => UnityAction.sendMsg('menuItem', '智能管控')}>
+        设备定位
+      </PageTitle>
+
+      <Spin spinning={loading}>
+        {data?.list?.map((item) => (
+          <div key={item.id} className={`card-box ${styles.item}`}>
+            <i className={`${styles.icon} ${getIconStatus(item.status)}`}></i>
+            {item.name}
+            <div>
+              <div>定位</div>
+              {/* <div>历史轨迹</div> */}
+            </div>
+          </div>
+        ))}
+
+        <div
+          className={`card-box ${styles.item}`}
+          style={{ justifyContent: 'space-between' }}
+        >
+          <div>
+            <i className={`${styles.icon}`}></i>
+            设备1
+          </div>
+          <div>
+            <div>定位</div>
+          </div>
+        </div>
+      </Spin>
+    </PageContent>
+  );
+}
+
+export default Hardware;

src/pages/Controller/Hardware.js

@@ -0,0 +1,37 @@
+import PageContent from '@/components/PageContent';
+import PageTitle from '@/components/PageTitle';
+import TabsContent from '@/components/TabsContent';
+import { UnityAction } from '@/utils/utils';
+import AirConditioner from './components/AirConditioner';
+import Light from './components/Light';
+
+function Hardware() {
+  const handleTabsChange = (tab) => {};
+  return (
+    <PageContent closeable={false}>
+      <PageTitle
+        tabs
+        onReturn={() => UnityAction.sendMsg('menuItem', '智能管控')}
+      ></PageTitle>
+      <TabsContent
+        defaultActiveKey="1"
+        onChange={handleTabsChange}
+        center={true}
+        items={[
+          {
+            label: `空调控制`,
+            key: '1',
+            children: <AirConditioner />,
+          },
+          {
+            label: `照明控制`,
+            key: '2',
+            children: <Light />,
+          },
+        ]}
+      />
+    </PageContent>
+  );
+}
+
+export default Hardware;

src/pages/HardwareController/AirConditioner.js → src/pages/Controller/components/AirConditioner.js

@@ -1,9 +1,7 @@
-import PageContent from '@/components/PageContent';
-import PageTitle from '@/components/PageTitle';
-import { queryIotList } from '@/services/HardwareController';
+import { queryIotList } from '@/services/controller';
 import { useParams, useRequest } from '@umijs/max';
 import { Spin } from 'antd';
-import styles from './index.less';
+import styles from '../index.less';
 
 const Work = (props) => {
   const { projectId } = useParams();
@@ -19,8 +17,7 @@ const Work = (props) => {
   };
 
   return (
-    <PageContent>
-      <PageTitle>空调控制</PageTitle>
+    <div>
       <div className={`card-box ${styles.top}`}>
         <div className={styles.left}>
           <img
@@ -37,10 +34,8 @@ const Work = (props) => {
             <i className={styles.icon}></i> 在线：{data?.online_count}
           </div>
           <div className={styles.row}>
-            <i className={`${styles.icon} ${styles.error}`}></i> 故障：{data?.fault_count}
-          </div>
-          <div className={styles.row}>
-            <i className={`${styles.icon} ${styles.offline}`}></i> 离线：{data?.offline_count}
+            <i className={`${styles.icon} ${styles.offline}`}></i> 离线：
+            {data?.offline_count}
           </div>
         </div>
       </div>
@@ -52,7 +47,7 @@ const Work = (props) => {
           </div>
         ))}
       </Spin>
-    </PageContent>
+    </div>
   );
 };
 

src/pages/HardwareController/Light.js → src/pages/Controller/components/Light.js

@@ -1,9 +1,7 @@
-import PageContent from '@/components/PageContent';
-import PageTitle from '@/components/PageTitle';
-import { queryLightList } from '@/services/HardwareController';
+import { queryLightList } from '@/services/controller';
 import { useParams, useRequest } from '@umijs/max';
 import { Spin } from 'antd';
-import styles from './index.less';
+import styles from '../index.less';
 
 const Work = (props) => {
   const { projectId } = useParams();
@@ -19,8 +17,7 @@ const Work = (props) => {
   };
 
   return (
-    <PageContent>
-      <PageTitle>照明控制</PageTitle>
+    <div>
       <div className={`card-box ${styles.top}`}>
         <div className={styles.left}>
           <img
@@ -37,10 +34,8 @@ const Work = (props) => {
             <i className={styles.icon}></i> 在线：{data?.online_count}
           </div>
           <div className={styles.row}>
-            <i className={`${styles.icon} ${styles.error}`}></i> 故障：{data?.fault_count}
-          </div>
-          <div className={styles.row}>
-            <i className={`${styles.icon} ${styles.offline}`}></i> 离线：{data?.offline_count}
+            <i className={`${styles.icon} ${styles.offline}`}></i> 离线：
+            {data?.offline_count}
           </div>
         </div>
       </div>
@@ -52,7 +47,7 @@ const Work = (props) => {
           </div>
         ))}
       </Spin>
-    </PageContent>
+    </div>
   );
 };
 

src/pages/HardwareController/index.js → src/pages/Controller/index.js

@@ -1,5 +1,6 @@
 import PageContent from '@/components/PageContent';
 import PageTitle from '@/components/PageTitle';
+import { UnityAction } from '@/utils/utils';
 import { history, useParams } from '@umijs/max';
 import styles from './index.less';
 
@@ -10,22 +11,24 @@ const HardwareController = (props) => {
     <PageContent>
       <PageTitle>智能管控</PageTitle>
 
-      <div className={`card-box ${styles.item}`}>工艺监控</div>
       <div
         className={`card-box ${styles.item}`}
-        onClick={() =>
-          history.push(`/hardware-controller/air-conditioner/${projectId}`)
-        }
+        onClick={() => UnityAction.sendMsg('innerItem', 'scada')}
       >
-        空调监控
+        工艺监控
       </div>
       <div
         className={`card-box ${styles.item}`}
-        onClick={() => history.push(`/hardware-controller/light/${projectId}`)}
+        onClick={() => UnityAction.sendMsg('innerItem', 'sensor')}
       >
-        照明监控
+        感知监控
+      </div>
+      <div
+        className={`card-box ${styles.item}`}
+        onClick={() => UnityAction.sendMsg('innerItem', 'locate')}
+      >
+        室内定位
       </div>
-      <div className={`card-box ${styles.item}`}>室内定位</div>
     </PageContent>
   );
 };

src/pages/HardwareController/index.less → src/pages/Controller/index.less

@@ -1,29 +1,21 @@
-.desc {
-  position: absolute;
-  top: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  font-size: 22px;
-}
 .top {
   display: flex;
-  margin-top: 40px;
-  padding: 20px;
+  padding: 48px 60px 25px;
   .left {
     width: 50%;
-    font-size: 24px;
+    font-size: 28px;
     display: flex;
     align-items: center;
   }
   .img {
-    width: 200px;
-    margin-right: 30px;
+    width: 152px;
+    margin-right: 45px;
   }
   .number {
-    font-size: 48px;
+    font-size: 80px;
     font-weight: bold;
     margin-bottom: 10px;
-    color: #4a90e2;
+    color: #4A90E2;
   }
   .right {
     display: flex;
@@ -31,22 +23,24 @@
     justify-content: space-around;
   }
   .row {
-    font-size: 24px;
+    font-size: 32px;
   }
 }
 .item {
-  padding: 20px;
-  font-size: 28px;
-  margin-top: 30px;
-  vertical-align: middle;
+  padding: 40px 60px;
+  
+  font-size: 36px;
+  margin-top: 28px;
+  display: flex;
+  align-items: center;
 }
 .icon {
-  width: 12px;
-  height: 12px;
+  width: 20px;
+  height: 20px;
   border-radius: 50%;
   display: inline-block;
   background-color: #12ceb3;
-  margin-right: 10px;
+  margin-right: 44px;
   vertical-align: middle;
   &.error {
     background-color: #fe5850;
@@ -55,3 +49,6 @@
     background-color: #9b9b9b;
   }
 }
+.btns {
+  flex: right;
+}

src/pages/DeviceManager/index.js

@@ -12,7 +12,8 @@ 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/air-conditioner.png');
+const deviceIcon = require('@/assets/deviceManager/deviceIcon.png');
+const spareIcon = require('@/assets/deviceManager/spareIcon.png');
 const chartIcon = require('@/assets/deviceManager/chartIcon.png');
 const DeviceManager = () => {
   const { projectId } = useParams();
@@ -34,7 +35,7 @@ const DeviceManager = () => {
     }
   };
   return (
-    <PageContent>
+    <PageContent tabs>
       <TabsContent
         defaultActiveKey="1"
         onChange={onChange}
@@ -262,7 +263,7 @@ const Device = ({ projectId }) => {
   return (
     <div className={styles.sparePart}>
       <div className={`card-box ${styles.titleContent}`}>
-        <img className={styles.img} src={img} />
+        <img className={styles.img} src={deviceIcon} />
         <div>
           <div className={styles.num}>{allData?.total}</div>
           <div className={styles.text}>设备总数</div>
@@ -353,22 +354,23 @@ const SparePart = ({ data, loading, projectId }) => {
   return (
     <Space direction="vertical" size={16} className={styles.sparePart}>
       <div className={`card-box ${styles.titleContent}`}>
-        <img className={styles.img} src={img} />
+        <img className={styles.img} src={spareIcon} />
         <div>
           <div className={styles.num}>{data?.on_amount || 0}</div>
-          <div>在库数量（个）</div>
+          <div className={styles.text}>在库数量（个）</div>
         </div>
         <img className={styles.rightIcon} src={chartIcon} />
       </div>
       {list.map((item) => (
-        <div className="card-box" onClick={() => changePage(item.type)}>
-          <div className={styles.cardItem}>
-            <span>{item.title}</span>
-            <Space>
-              <span>{item.num}个</span>
-              <RightOutlined />
-            </Space>
-          </div>
+        <div
+          className={`card-box ${styles.cardItem}`}
+          onClick={() => changePage(item.type)}
+        >
+          <span className={styles.spareText}>{item.title}</span>
+          <Space size={30}>
+            <span className={styles.spareText}>{item.num}个</span>
+            <RightOutlined style={{ fontSize: '28px' }} />
+          </Space>
         </div>
       ))}
     </Space>

src/pages/DeviceManager/index.less

@@ -2,6 +2,19 @@
   position: absolute;
   right: 0;
 }
+.li {
+  height: 50px;
+  display: flex;
+  align-items: center;
+  color: #000000;
+  font-size: 24px;
+}
+.line {
+  margin: 0 20px;
+  height: 24px;
+  border-radius: 12px;
+  background: linear-gradient(to right, #4279e5, #372cc9);
+}
 .titleContent {
   position: relative;
   display: flex;
@@ -26,6 +39,7 @@
     line-height: 38px;
   }
   .rightIcon {
+    width: 44px;
     position: absolute;
     right: 20px;
     top: 20px;
@@ -45,7 +59,7 @@
   text-align: center;
   .cardItem {
     display: flex;
-    padding: 10px;
+    padding: 36px;
     justify-content: space-between;
     align-items: center;
   }
@@ -78,6 +92,13 @@
     color: #4a90e2;
   }
 
+  .spareText {
+    font-size: 28px;
+    font-weight: 500;
+    color: #4a4a4a;
+    line-height: 38px;
+  }
+
   :global {
     .ant-collapse > .ant-collapse-item > .ant-collapse-header {
       padding: 36px;

src/pages/DeviceManager/storage.js

@@ -0,0 +1,276 @@
+import BarChartModule from '@/components/ManagementPage/BarChartModule';
+import PieChartModule from '@/components/ManagementPage/PieChartModule';
+import RadarChartModule from '@/components/ManagementPage/RadarChartModule';
+import ModuleTitle from '@/components/ManagementPage/moduleTitle';
+import PageContent from '@/components/PageContent';
+import PageTitle from '@/components/PageTitle';
+import { queryMainChartList } from '@/services/StorageManagement';
+import { useParams, useRequest } from '@umijs/max';
+import { Empty, Select, Spin } from 'antd';
+import moment from 'moment';
+import { useRef } from 'react';
+import styles from './index.less';
+const { Option } = Select;
+
+const StorageOverview = () => {
+  const { projectId } = useParams();
+  const yearRef = useRef(Number(moment().format('YYYY')));
+  const monthRef = useRef(0);
+  const statistics = [
+    {
+      title: '在库数量（个）',
+      key: 'on_amount',
+    },
+    {
+      title: '入库数量（个）',
+      key: 'in_amount',
+    },
+    {
+      title: '出库数量（个）',
+      key: 'out_amount',
+    },
+    {
+      title: '报废数量（个）',
+      key: 'scrap_amount',
+    },
+    {
+      title: '报警数量（个）',
+      key: 'warning_stat',
+    },
+  ];
+  const colors = ['#E1943A', '#5BE46D', '#FF976F', '#6589FC', '#9863F9'];
+
+  const topTen = [
+    {
+      name: '你好',
+      value: '100',
+    },
+    {
+      name: '进水阀',
+      value: '73',
+    },
+    {
+      name: 'hahah',
+      value: '70',
+    },
+    {
+      name: 'hahah',
+      value: '65',
+    },
+    {
+      name: 'hahah',
+      value: '60',
+    },
+    {
+      name: 'hahah',
+      value: '50',
+    },
+    {
+      name: 'hahah',
+      value: '45',
+    },
+    {
+      name: 'hahah',
+      value: '40',
+    },
+    {
+      name: 'hahah',
+      value: '38',
+    },
+    {
+      name: 'hahah',
+      value: '33',
+    },
+  ];
+
+  const props1 = {
+    yName: '水量（t）',
+    xData: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30'],
+    dataList: [
+      {
+        type: 0,
+        name: '进水水量',
+        data: [820, 932, 901, 934, 1290, 1330, 1320],
+      },
+      {
+        type: 0,
+        name: '进水水量111',
+        data: [420, 932, 601, 934, 1990, 1330, 1520],
+      },
+      {
+        type: 1,
+        name: '预测出水量',
+        data: [720, 832, 601, 834, 1190, 1230, 1220],
+      },
+      {
+        type: 2,
+        name: '实际出水量',
+        data: [820, 632, 501, 534, 1190, 1130, 1120],
+      },
+    ],
+  };
+
+  const { data, run, loading } = useRequest(
+    () =>
+      queryMainChartList({
+        project_id: Number(projectId),
+        year: yearRef.current,
+        month: monthRef.current,
+      }),
+    {
+      formatResult: (res) => {
+        const data = res.data;
+        console.log('--------------------', data);
+        const values =
+          data?.scrap?.length > 0
+            ? data?.scrap?.map((item) => item.value)
+            : [0];
+        const radarMax = Math.max(...values);
+        return {
+          maxKind:
+            data?.kind?.length > 0
+              ? data?.kind?.sort((a, b) => b.value - a.value)[0].value
+              : 1,
+          kind: data.kind,
+          statistics: statistics.map((item) => {
+            return { ...item, value: data[item.key] };
+          }),
+          barData:
+            data?.in?.length > 0 && data?.out?.length > 0
+              ? {
+                  xData: data.in?.map((cur) => cur.item),
+                  dataList: [
+                    {
+                      name: '入库',
+                      data: data.in?.map((cur) => cur.value),
+                    },
+                    {
+                      name: '出库',
+                      data: data.out?.map((cur) => cur.value),
+                    },
+                  ],
+                }
+              : {},
+          pieData: data?.rank?.map((cur) => {
+            return { name: cur.item, value: cur.value };
+          }),
+          radarData:
+            data?.scrap?.length > 0
+              ? {
+                  indicator: data?.scrap?.map((item) => {
+                    return { name: item.item, max: radarMax };
+                  }),
+                  data: [
+                    {
+                      value: data?.scrap?.map((item) => {
+                        return item.value;
+                      }),
+                    },
+                  ],
+                }
+              : {},
+          lineData:
+            data?.on?.length > 0 && data.check?.length > 0
+              ? {
+                  closeTime: true,
+                  yName: '数量',
+                  xData: data.on?.map((item) => item.item),
+                  dataList: [
+                    {
+                      type: 2,
+                      name: '库存',
+                      data: data.on?.map((item) => item.value),
+                    },
+                    {
+                      type: 1,
+                      name: '盘点',
+                      data: data.check?.map((item) => item.value),
+                    },
+                  ],
+                }
+              : null,
+        };
+      },
+    },
+  );
+
+  const ItemContent = ({ idx, title, value }) => {
+    return (
+      <div className={styles.item} style={{ backgroundColor: colors[idx] }}>
+        <div className={styles.item_title}>{title}</div>
+        <div className={styles.item_num}>{value}</div>
+      </div>
+    );
+  };
+  return (
+    <PageContent>
+      <PageTitle children="备品统计" returnable />
+      <div className={styles.main}>
+        <Spin spinning={loading}>
+          <ModuleTitle title="物料种类库存占比" />
+          <div style={{ height: '330px' }}>
+            {data?.pieData && <PieChartModule data={data.pieData} />}
+          </div>
+          <div className={styles.thereItem}>
+            <ModuleTitle title="物料库存排名前十统计" />
+            <ul
+              style={{
+                height: '330px',
+                display: 'flex',
+                flexDirection: 'column',
+              }}
+            >
+              {data?.kind && data.kind.length != 0 ? (
+                data.kind
+                  ?.sort((a, b) => b.value - a.value)
+                  .map((item) => {
+                    return (
+                      <li
+                        className={styles.li}
+                        key={`kind_${item.item}`}
+                        style={{ flexGrow: 1 }}
+                      >
+                        <div
+                          style={{
+                            width: '80px',
+                            textAlign: 'right',
+                            fontSize: '18px',
+                            whiteSpace: 'nowrap',
+                          }}
+                        >
+                          {item.item}
+                        </div>
+                        <div
+                          className={styles.line}
+                          style={{
+                            width: `${(70 * item.value) / data?.maxKind}%`,
+                          }}
+                        ></div>
+                        {item.value}
+                      </li>
+                    );
+                  })
+              ) : (
+                <Empty />
+              )}
+            </ul>
+          </div>
+          <div className={styles.thereItem}>
+            <ModuleTitle title="物料报废统计" />
+            <div style={{ height: '330px' }}>
+              {data?.radarData && <RadarChartModule {...data.radarData} />}
+            </div>
+          </div>
+          <div className={styles.twoItem}>
+            <ModuleTitle title="出入库统计" />
+            <div style={{ height: '330px' }}>
+              {data?.barData && <BarChartModule {...data.barData} />}
+            </div>
+          </div>
+        </Spin>
+      </div>
+    </PageContent>
+  );
+};
+
+export default StorageOverview;

src/pages/EqSelfInspection/List/index.js

@@ -2,225 +2,66 @@ import PageContent from '@/components/PageContent';
 import PageTitle from '@/components/PageTitle';
 import { GetTokenFromUrl, UnityAction } from '@/utils/utils';
 import { connect, history, useParams } from '@umijs/max';
-import { Button, Col, DatePicker, Form, Row, Select, Table } from 'antd';
 import dayjs from 'dayjs';
-import { Fragment, useEffect, useState } from 'react';
-
-const FormItem = Form.Item;
-const { Option } = Select;
-const statusList = [
-  { key: 1, value: '0', label: '正常' },
-  { key: 2, value: '1', label: '异常' },
-];
+import { Fragment, useEffect } from 'react';
+import styles from './index.less';
 
 function List(props) {
   const { loading, list, processList = [], dispatch } = props;
 
   const { projectId } = useParams();
-  const [form] = Form.useForm();
-  const [pagination, setPagination] = useState({ pageSize: 10, current: 1 });
-  const [groupId, setGroupId] = useState('');
-
-  const getColumns = () => {
-    return [
-      {
-        title: '自检时间',
-        dataIndex: 'CreatedTime',
-        width: '26%',
-        render: (text) => {
-          return text ? dayjs(text).format('YYYY-MM-DD HH:mm') : null;
-        },
-      },
-      {
-        title: '工艺段',
-        width: '24%',
-        render: (record) => {
-          const name = processList?.find(
-            (item) => item.group_id == record?.RouteInfo?.GroupID,
-          )?.name;
-          return name || '-';
-        },
-      },
-      {
-        title: '状态',
-        width: '10%',
-        dataIndex: 'Status',
-        render: (text) => {
-          return text == 0 ? (
-            '正常'
-          ) : (
-            <div style={{ color: '#FF8600' }}>异常</div>
-          );
-        },
-      },
-      {
-        title: '操作',
-        width: '16%',
-        render: (text, record) => {
-          return (
-            <Fragment>
-              {
-                <>
-                  <a
-                    onClick={(e) => {
-                      goToDetail(record, e);
-                    }}
-                  >
-                    详情
-                  </a>
-                </>
-              }
-            </Fragment>
-          );
-        },
-      },
-    ];
-  };
-
-  const getRecord = async (pagination) => {
-    form.validateFields().then((fieldsValue) => {
-      fieldsValue.projectId = projectId;
-      fieldsValue.auto = 1;
-      fieldsValue.startDate = dayjs(fieldsValue.startDate).format('YYYY-MM-DD');
-      fieldsValue.endDate = dayjs(fieldsValue.endDate).format('YYYY-MM-DD');
-      fieldsValue.pageSize = pagination.pageSize;
-      fieldsValue.currentPage = pagination.current;
-      dispatch({
-        type: 'patrolArtificialRecord/queryPatrol',
-        payload: { ...fieldsValue },
-        callback: (data) => {
-          setPagination(data.pagination);
-        },
-      });
-    });
-  };
 
-  const handleSearch = (e) => {
-    e?.preventDefault();
-    getRecord(pagination);
-  };
-  const TableOnChange = (tempPagination) => {
-    getRecord(tempPagination);
-  };
-  const goToDetail = (record, e) => {
-    e.stopPropagation();
+  const goToDetail = (record) => {
     UnityAction.sendMsg('reportDetail', '');
     history.push(
-      `/self-inspection/detail/${projectId}/${record.Id}?JWT-TOKEN=${GetTokenFromUrl()}`,
+      `/self-inspection/detail/${projectId}/${
+        record.Id
+      }?JWT-TOKEN=${GetTokenFromUrl()}`,
     );
   };
 
   useEffect(() => {
-    UnityAction.sendMsg('type', 2);
-    handleSearch();
-
-    dispatch({
-      type: 'patrolArtificialRecord/queryRouteInfoList',
-      payload: { ProjectId: projectId },
-    });
+    let params = {};
+    params.projectId = projectId;
+    params.auto = 1;
+    params.startDate = dayjs().subtract(1).format('YYYY-MM-DD');
+    params.endDate = dayjs().format('YYYY-MM-DD');
+    params.pageSize = 100;
+    params.currentPage = 1;
     dispatch({
-      type: 'patrolArtificialRecord/queryProcessSection',
-      payload: projectId,
+      type: 'patrolArtificialRecord/queryPatrol',
+      payload: params,
     });
-
-    UnityAction.addEventListener('group_id', (e) => {
-      setGroupId(e);
-    });
-
-    return () => {
-      UnityAction.off('group_id');
-    };
   }, []);
   return (
     <PageContent closeable={false}>
       <PageTitle returnable>自检记录</PageTitle>
-      <Form
-        layout="vertical"
-        labelAlign="left"
-        labelCol={{ span: 8 }}
-        wrapperCol={{ span: 16 }}
-        onSubmit={handleSearch}
-        form={form}
-      >
-        <Row gutter={16}>
-          <Col span={12}>
-            <FormItem
-              label="开始时间"
-              name="startDate"
-              initialValue={dayjs().subtract(1, 'M')}
-            >
-              <div style={{ width: '95%' }}>
-                <DatePicker allowClear={false} placeholder="选择开始日期" />
+
+      <div className={styles.list}>
+        {list.map((item) => (
+          <div className={styles.item} onClick={() => goToDetail(item)}>
+            {item.Status == 0 ? (
+              <div className={`${styles.status}`}>正常</div>
+            ) : (
+              <div className={`${styles.status} ${styles.statusError}`}>
+                异常
               </div>
-            </FormItem>
-          </Col>
-          <Col span={12}>
-            <FormItem label="结束时间" name="endDate" initialValue={dayjs()}>
-              <div style={{ width: '95%' }}>
-                <DatePicker allowClear={false} placeholder="选择结束日期" />
+            )}
+            <div className={styles.info}>
+              <div className={styles.time}>
+                <i></i>自检时间：{dayjs(item.CreatedTime).format('MM-DD HH:mm')}
               </div>
-            </FormItem>
-          </Col>
-        </Row>
-        <Row gutter={16}>
-          <Col span={12}>
-            <FormItem label="状态" name="status">
-              <Select
-                placeholder="选择状态"
-                allowClear
-                style={{ width: '95%' }}
-              >
-                {statusList.map((item) => {
-                  return (
-                    <Option key={item.key} value={item.value}>
-                      {item.label}
-                    </Option>
-                  );
-                })}
-              </Select>
-            </FormItem>
-          </Col>
-          <Col span={12}>
-            <FormItem label="工艺段" name="groupId">
-              <Select
-                placeholder="选择工艺段"
-                allowClear
-                style={{ width: '95%' }}
-              >
-                {processList?.map((item) => {
-                  return (
-                    <Option key={item.id} value={item.group_id}>
-                      {item.name}
-                    </Option>
-                  );
-                })}
-              </Select>
-            </FormItem>
-          </Col>
-        </Row>
-        <div style={{ overflow: 'hidden' }}>
-          <Button
-            type="primary"
-            htmlType="submit"
-            style={{ float: 'right', marginBottom: 10 }}
-          >
-            查询
-          </Button>
-        </div>
-      </Form>
-      <div className="table-total">当前列表总数 {pagination?.total || 0}</div>
-      <Table
-        bordered
-        loading={loading}
-        columns={getColumns()}
-        dataSource={list.filter((item) => {
-          if (!groupId) return true;
-          if (groupId == item.RouteInfo.GroupID) return true;
-          return false;
-        })}
-        pagination={pagination}
-        onChange={TableOnChange}
-      />
+              {/* <div className={styles.desc}>
+                <i></i>
+                发现异常
+                <span className={styles.number}>4</span>
+                <span>项</span>
+              </div> */}
+            </div>
+            <div className={styles.btn}></div>
+          </div>
+        ))}
+      </div>
     </PageContent>
   );
 }

src/pages/EqSelfInspection/List/index.less

@@ -1,6 +1,70 @@
-.clickRow {
-  background-color: #225ea8;
-}
-.ant-table-tbody > .clickRow:hover > td {
-  background-color: #225ea8;
+.list {
+  margin-top: 40px;
+  .item {
+    padding: 28px 75px 28px 124px;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 18px;
+    background: #ffffff;
+    box-shadow: 0px 0px 8px 14px rgba(0, 0, 0, 0.03);
+    border-radius: 12px;
+    align-items: center;
+  }
+  .status {
+    width: 134px;
+    height: 134px;
+    font-size: 36px;
+    font-weight: 400;
+    color: #000000;
+    text-align: center;
+    line-height: 134px;
+    background: url('@/assets/circle-success.png') no-repeat center;
+    background-size: 100% 100%;
+  }
+  .statusError {
+    background-image: url('@/assets/circle-error.png');
+  }
+  .info {
+    flex: 1;
+    padding-left: 100px;
+    i {
+      width: 14px;
+      height: 14px;
+      display: inline-block;
+      vertical-align: middle;
+      border-radius: 50%;
+      margin-right: 14px;
+      background-color: rgba(74, 144, 226, 1);
+    }
+  }
+  .time {
+    font-size: 24px;
+    font-weight: 400;
+    color: #4a4a4a;
+    line-height: 34px;
+  }
+  .desc {
+    font-size: 32px;
+    font-weight: 400;
+    color: #4a4a4a;
+    line-height: 44px;
+    .number {
+      font-size: 54px;
+      font-weight: 500;
+      color: #f5a623;
+      line-height: 76px;
+      margin-left: 12px;
+    }
+
+    span {
+      font-size: 28px;
+      color: #000000;
+    }
+  }
+  .btn {
+    width: 23px;
+    height: 35px;
+    background: url('@/assets/arr-right.png') no-repeat center;
+    background-size: 100% 100%;
+  }
 }

src/pages/EqSelfInspection/Statistics.js

@@ -140,7 +140,7 @@ const Statistics = (props) => {
   return (
     <PageContent closeable={false}>
       <PageTitle returnable>系统自检统计</PageTitle>
-      <div className={`${styles.itemMain2} card-box`} style={{padding: '40px 0'}}>
+      <div className={`${styles.itemMain2} card-box`} style={{padding: '44px 0'}}>
         <div style={{ display: 'flex' }}>
           {overviewData?.map((item) => (
             <Text num={item.num} label={item.label} />

src/pages/EqSelfInspection/index.js

@@ -1,7 +1,6 @@
 import PageContent from '@/components/PageContent';
 import PageTitle from '@/components/PageTitle';
 import { GetTokenFromUrl, UnityAction } from '@/utils/utils';
-import { DiffFilled, FundFilled } from '@ant-design/icons';
 import { connect, history, useLocation, useParams } from '@umijs/max';
 import { Button, Form, Modal, Select, Spin, message } from 'antd';
 import dayjs from 'dayjs';
@@ -112,46 +111,49 @@ const EqSelfInspection = (props) => {
     <PageContent>
       <PageTitle>系统自检</PageTitle>
       <Spin spinning={loading} tip="正在自检中...">
-        <div className={`${styles.itemMain} card-box`} style={{ padding: 20 }}>
-          <div style={{ position: 'relative', display: 'flex' }}>
-            <div style={{ fontSize: 24 }}>
-              自检间隔：{autoReport?.RouteInfo?.PlanDur}h
-            </div>
-            <div className={styles.icon}>
-              <DiffFilled
-                style={{ cursor: 'pointer', marginRight: 20 }}
-                onClick={() => {
-                  history.push(
-                    `/self-inspection/list/${projectId}`,
-                  );
-                }}
-              />
-              <FundFilled
-                onClick={() => {
-                  history.push(
-                    `/self-inspection/statistics/${projectId}?JWT-TOKEN=${GetTokenFromUrl()}`,
-                  );
-                }}
-              />
-            </div>
+        <div
+          className={`${styles.itemMain} card-box`}
+          style={{ padding: '15px 24px' }}
+        >
+          <div style={{ fontSize: 28, color: 'rgb(110, 110, 110)' }}>
+            自检间隔：{autoReport?.RouteInfo?.PlanDur}h
+          </div>
+
+          <div className={styles.icon}>
+            <div
+              className={styles.iconDiffFilled}
+              onClick={() => {
+                history.push(`/self-inspection/list/${projectId}`);
+              }}
+            ></div>
+            <div
+              className={styles.iconFundFilled}
+              onClick={() => {
+                history.push(
+                  `/self-inspection/statistics/${projectId}?JWT-TOKEN=${GetTokenFromUrl()}`,
+                );
+              }}
+            ></div>
           </div>
           <div className={styles.logoInfo}>
             <div className={styles.logo} />
-            <div style={{ display: 'flex', fontSize: 20 }}>
+            <div className={styles.logoTitle}>
               <div>系统自检发现</div>
               <div
                 style={{
-                  color: autoReport?.warningTotalNum === 0 ? '#333' : '#FE5850',
-                  margin: '0 6px 0 6px',
+                  color:
+                    autoReport?.warningTotalNum === 0
+                      ? '#333'
+                      : 'rgba(254, 88, 80, 1)',
+                  margin: '0 6px',
                 }}
               >
                 {autoReport?.warningTotalNum === 0
                   ? '暂无'
-                  : autoReport?.warningTotalNum || 0}
+                  : autoReport?.warningTotalNum + '项异常'}
               </div>
-              <div>项异常</div>
             </div>
-            <div style={{ fontSize: 20 }}>
+            <div className={styles.logoTime}>
               {autoReport?.CreatedTime
                 ? dayjs(autoReport?.CreatedTime).format('YYYY-MM-DD HH:mm')
                 : ''}
@@ -160,52 +162,33 @@ const EqSelfInspection = (props) => {
               <Button type="primary" onClick={HandleInspection}>
                 一键自检
               </Button>
-              <div
-                style={{
-                  position: 'absolute',
-                  display: 'flex',
-                  alignItems: 'flex-end',
-                  right: 0,
-                  height: '100%',
-                }}
-              >
-                <div>系统自检中</div>
-              </div>
+            </div>
+            <div className={styles.logoFont}>
+              系统自检中
+              <div className={styles.iconSetting}></div>
             </div>
           </div>
         </div>
         <Item name="设备自检" status={patrolStatus}></Item>
         <Item name="工艺自检" status={faultAnalysisStatus}></Item>
-        <Item
-          name="安全自检"
-          warningText={
-            secureStatus === 1
-              ? `共发现${
-                  secureChildren?.filter((item) => item.status === 1)?.length ||
-                  0
-                }项异常`
-              : ''
-          }
-          status={secureStatus}
-        >
+        <Item name="安全自检" status={secureStatus}>
           {secureChildren?.map((item) => (
             <WarningItem label={item.label} status={item.status} />
           ))}
         </Item>
-        <div className={styles.reportBtn}>
-          <Button
-            type="primary"
-            onClick={() => {
-              history.push(
-                `/self-inspection/detail/${projectId}/${
-                  autoReport?.Id
-                }?JWT-TOKEN=${GetTokenFromUrl()}`,
-              );
-            }}
-          >
-            查看自检报告
-          </Button>
-        </div>
+        <Button
+          className={styles.reportBtn}
+          type="primary"
+          onClick={() => {
+            history.push(
+              `/self-inspection/detail/${projectId}/${
+                autoReport?.Id
+              }?JWT-TOKEN=${GetTokenFromUrl()}`,
+            );
+          }}
+        >
+          查看自检报告
+        </Button>
 
         <Modal
           title="选择巡检路线"
@@ -253,11 +236,7 @@ const Item = (props) => {
   const renderRight = (status) => {
     switch (status) {
       case 0:
-        return (
-          <div className={styles.right} style={{ color: '#52c41a' }}>
-            正常
-          </div>
-        );
+        return <div className={`${styles.iconSuccess} ${styles.right}`}></div>;
       case 1:
         return (
           <div className={styles.right} style={{ color: '#FE5850' }}>
@@ -268,23 +247,14 @@ const Item = (props) => {
         return;
       // return <SyncOutlined className={styles.right} spin />;
       default:
-        return (
-          <div className={styles.right} style={{ color: '#52c41a' }}>
-            正常
-          </div>
-        );
+        return <div className={`${styles.iconSuccess} ${styles.right}`}></div>;
     }
   };
   return (
-    <div
-      className={`${styles.itemMain} card-box`}
-      style={{
-        paddingBottom: children ? 20 : 0,
-      }}
-    >
-      <div className={styles.item}>
-        <span>{name}</span>
-        <span className={styles.warningText}>{warningText}</span>
+    <div className={`${styles.itemMain} card-box`}>
+      <div className={styles.item} style={{ height: children ? 80 : '' }}>
+        <span className={styles.itemName}>{name}</span>
+        {/* <span className={styles.warningText}>{warningText}</span> */}
         {renderRight(status)}
       </div>
       {children}
@@ -297,16 +267,18 @@ const WarningItem = (props) => {
   return (
     <div className={styles.warningItem}>
       <span>{label}</span>
-      <div
-        style={{
-          color: status === 1 ? '#FE5850' : '#52c41a',
-          fontSize: 20,
-          position: 'absolute',
-          right: 20,
-        }}
-      >
-        {status === 0 ? '正常' : '异常'}
-      </div>
+
+      {status === 0 ? (
+        <div className={styles.iconSuccess}></div>
+      ) : (
+        <span
+          style={{
+            color: '#FE5850',
+          }}
+        >
+          异常
+        </span>
+      )}
     </div>
   );
 };

src/pages/EqSelfInspection/index.less

@@ -1,10 +1,18 @@
 .icon {
   position: absolute;
-  right: 0;
-  font-size: 24px;
-  color: #40a9ff;
-  i {
-    margin-left: 10px;
+  top: 15px;
+  right: 18px;
+  display: flex;
+  .iconDiffFilled,
+  .iconFundFilled {
+    width: 37px;
+    height: 41px;
+    cursor: pointer;
+    background: url('@/assets/iconDiffFilled.png') no-repeat;
+  }
+  .iconFundFilled {
+    margin-left: 28px;
+    background-image: url('@/assets/iconFundFilled.png');
   }
 }
 .logoInfo {
@@ -12,11 +20,45 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  position: relative;
   .logo {
     background: url('@/assets/defense.png') no-repeat center;
     background-size: 100% 100%;
     width: 144px;
     height: 159px;
+    margin-bottom: 6px;
+  }
+  .logoTitle {
+    font-size: 28px;
+    font-weight: 400;
+    color: #6e6e6e;
+    line-height: 38px;
+    display: flex;
+  }
+  .logoTime {
+    font-size: 22px;
+    font-weight: 400;
+    color: #6e6e6e;
+    line-height: 28px;
+    margin-top: 10px;
+  }
+  .logoFont {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    right: 0;
+    bottom: 0;
+    font-size: 28px;
+    font-weight: 400;
+    color: #6e6e6e;
+    line-height: 38px;
+    .iconSetting {
+      margin-left: 10px;
+      width: 28px;
+      height: 28px;
+      background: url('@/assets/icon-setting.png') no-repeat;
+      background-size: 100% 100%;
+    }
   }
 }
 .insbtn {
@@ -27,50 +69,72 @@
   margin-top: 20px;
   :global {
     .ant-btn-primary {
-      font-size: 20px;
-      width: 158px;
-      height: 40px;
+      font-size: 24px;
+      width: 140px;
+      height: 46px;
       cursor: pointer;
     }
   }
 }
 .item {
-  // border: 2px;
-  // border-radius: 12px;
-  // background-color: rgba(240, 248, 255, 0.549);
-  min-height: 60px;
+  height: 108px;
   display: flex;
   align-items: center;
   position: relative;
-  span:first-child {
-    margin-left: 10px;
-    font-size: 22px;
-  }
+  padding: 0 30px;
   .right {
     position: absolute;
     right: 0;
-    margin-right: 10px;
-    font-size: 24px;
+    margin-right: 30px;
+    font-size: 28px;
   }
   .warningText {
-    font-size: 20px;
-    color: #fe5850;
     margin-left: 40px;
+    font-size: 28px;
+    font-weight: 400;
+    color: #fe5850;
+    line-height: 38px;
   }
+  .itemName {
+    font-size: 28px;
+    font-weight: 500;
+    color: #4a4a4a;
+    line-height: 38px;
+    font-weight: bold;
+  }
+}
+.btns {
+  float: right;
 }
 .warningItem {
   // border-bottom: 2px solid #555;
-  height: 60px;
+  height: 90px;
   display: flex;
   align-items: center;
-  margin: 0 60px 0 60px;
+  justify-content: space-between;
+  padding: 0 30px;
+  border-bottom: 1px solid rgba(219, 219, 219, 1);
+  &:last-child {
+    border-bottom: none;
+  }
   span {
-    font-size: 20px;
+    font-size: 28px;
   }
 }
+.iconSuccess {
+  width: 38px;
+  height: 30px;
+  background: url('@/assets/icon-success.png') no-repeat;
+  background-size: 100% 100%;
+}
 .reportBtn {
-  display: flex;
-  justify-content: center;
+  margin-top: 40px;
+  width: 100%;
+  height: 86px;
+  display: block;
+  font-size: 30px;
+  font-weight: 400;
+  color: #ffffff;
 }
 .itemMain {
   background-size: 100% 100%;
@@ -90,16 +154,17 @@
   justify-content: center;
   align-items: center;
   flex: 1;
-  font-size: 26px;
   .num {
-    color: #F5AF3A;
-    font-size: 30px;
-    margin-bottom: 14px;
+    color: #f5af3a;
+    font-size: 40px;
+    margin-bottom: 8px;
     font-weight: bold;
     letter-spacing: 2px;
+    line-height: 56px;
   }
   .label {
     color: #555;
+    font-size: 24px;
   }
 }
 .dialogBtns {

src/pages/Home/ChemCostComparison.js

@@ -229,6 +229,7 @@ const CostComparison = (props) => {
       message.error('获取数据失败');
     });
     setChemList([...list]);
+    setCurrentChem(list[0])
     typeParams.forEach((item) => {
       item.chemical_agents = list[0];
     });
@@ -251,7 +252,7 @@ const CostComparison = (props) => {
   return (
     <PageContent closeable={false}>
       <PageTitle onReturn={() => UnityAction.sendMsg('menuItem', '首页')}>
-        能耗数据
+        药耗监测
         <div
           onClick={(e) => {
             e.stopPropagation();
@@ -262,7 +263,7 @@ const CostComparison = (props) => {
         ></div>
       </PageTitle>
 
-      <div className="card-box" style={{ padding: 20, marginTop: 40 }}>
+      <div className="card-box" style={{ padding: 20, marginTop: 10 }}>
         {/* 使用Tabs来展示所有药的标签 */}
         <div className="tabs">
           {chemList?.map((item) => (

src/pages/Home/QualityMng.js

@@ -107,7 +107,7 @@ function Quality() {
         水质监测
       </PageTitle>
 
-      <div className="card-box" style={{ padding: 20, marginTop: 26 }}>
+      <div className="card-box" style={{ padding: 20, marginTop: 10 }}>
         <div className="tabs" style={{ marginBottom: 20 }}>
           {codeList?.map((item) => (
             <div

src/pages/Home/index.less

@@ -62,13 +62,13 @@
     margin-bottom: 14px;
   }
   .grade {
-    font-size: 18px;
+    font-size: 20px;
     margin-top: 10px;
   }
 }
 
 .time {
-  font-size: 18px;
+  font-size: 20px;
   margin-bottom: 20px;
   text-align: center;
 }

src/pages/Home/manage.less

@@ -73,18 +73,18 @@
       justify-content: center;
       align-items: flex-end;
       line-height: 1;
-      margin-bottom: 6px;
+      margin-bottom: 8px;
 
-      font-size: 30px;
+      font-size: 40px;
       font-weight: 500;
       color: #f5a623;
-      line-height: 42px;
+      line-height: 56px;
     }
     .name {
       margin-bottom: 4px;
       max-width: 80%;
 
-      font-size: 18px;
+      font-size: 24px;
       color: #4a4a4a;
       line-height: 26px;
     }

src/pages/Menu/index.js

@@ -38,13 +38,10 @@ const menuList = [
 ];
 
 function Menu() {
-  const { projectId } = useParams();
   const [active, setActive] = useState('首页');
   const handleClick = (item) => {
     setActive(item.name);
-    const path = item?.path(projectId);
-    // history.push(path);
-    console.log(path);
+    
     UnityAction.sendMsg("menuItem", item.name)
   };
 

src/pages/MessageCenter/index.js

@@ -59,7 +59,7 @@ const MessageCenter = () => {
     );
   };
   return (
-    <PageContent>
+    <PageContent tabs>
       <TabsContent
         center={false}
         defaultActiveKey="1"

src/pages/SafetyManagement/doorDetail.js

@@ -9,7 +9,6 @@ const DoorDetail = () => {
   const { data, loading, run } = useRequest(queryGateOpList, {
     defaultParams: [{ project_id: projectId }],
   });
-  console.log(data);
   const columns = [
     {
       title: '时间',

src/pages/SafetyManagement/index.js

@@ -11,7 +11,8 @@ import { useNavigate, useParams, useRequest } from '@umijs/max';
 import { Button, Space } from 'antd';
 import { useEffect, useState } from 'react';
 import styles from './index.less';
-const img = require('@/assets/air-conditioner.png');
+const doorIcon = require('@/assets/deviceManager/doorIcon.png');
+const videoIcon = require('@/assets/air-conditioner.png');
 const chartIcon = require('@/assets/deviceManager/chartIcon.png');
 const DeviceManager = () => {
   const { projectId } = useParams();
@@ -62,7 +63,7 @@ const DeviceManager = () => {
     }
   };
   return (
-    <PageContent>
+    <PageContent tabs>
       <TabsContent
         defaultActiveKey="1"
         onChange={handleTabChange}
@@ -111,7 +112,7 @@ const Video = ({ projectId, data, dataOnline, loading }) => {
     <Space direction="vertical" size={16} className={styles.sparePart}>
       <div className={`card-box ${styles.titleContent}`}>
         <div className={styles.titleLeft}>
-          <img className={styles.img} src={img} />
+          <img className={styles.img} src={videoIcon} />
           <div className={styles.textCon}>
             <div className={styles.num}>{dataOnline?.total || 0}</div>
             <div className={styles.text}>在库数量（个）</div>
@@ -161,7 +162,7 @@ const Door = ({ data, dataOver, loading, projectId }) => {
       <div className={styles.titleContent}>
         <div className={`card-box ${styles.cardLeft}`}>
           <div className={styles.up}>
-            <img className={styles.img} src={img} />
+            <img className={styles.img} src={doorIcon} />
             <div className={styles.textCon}>
               <div className={styles.num}>{dataOver?.total}</div>
               <div className={styles.text}>门禁数量（个）</div>

src/pages/SafetyManagement/index.less

@@ -57,11 +57,12 @@
   .titleContent {
     position: relative;
     display: flex;
-    justify-content: space-between;
+    // justify-content: space-between;
     align-items: center;
-    padding: 48px 212px 28px 104px;
+    padding: 48px 0 28px 104px;
     .titleLeft {
       display: flex;
+      margin-right: 96px;
       .textCon {
         text-align: center;
         margin: auto;
@@ -84,11 +85,11 @@
         display: flex;
         align-items: center;
         margin-top: 32px;
-        margin-left: 48px;
+        margin-left: 30px;
         .img {
           width: 154px;
           // height: 130px;
-          margin-right: 40px;
+          margin-right: 20px;
         }
         .textCon {
           text-align: center;

src/pages/Smart/ConditionDetection.js

@@ -49,7 +49,7 @@ const ConditionDetection = (props) => {
     <PageContent closeable={false}>
       <PageTitle returnable>工况检测</PageTitle>
       <div className={styles.circle}>
-        <CircleScore>
+        <CircleScore big>
           <span className={styles.circleText}>{score}</span>
         </CircleScore>
         {/* <p>{desc}</p> */}
@@ -57,7 +57,7 @@ const ConditionDetection = (props) => {
       </div>
       <div className={styles.content}>
         <Row gutter={16}>
-          <Col span={12} style={{ padding: 10 }}>
+          <Col span={12} style={{ padding: 22 }}>
             <div className={`${styles.card} card-box`}>
               <h3>
                 实时工况 <span>{real.score}分</span>
@@ -81,7 +81,7 @@ const ConditionDetection = (props) => {
               </ul>
             </div>
           </Col>
-          <Col span={12} style={{ padding: 10 }}>
+          <Col span={12} style={{ padding: 22 }}>
             <div className={`${styles.card2} card-box`}>
               <h3>
                 目标工况 <span>{best.score}分</span>

src/pages/Smart/ConditionDetection.less

@@ -1,30 +1,31 @@
 .card {
   background-size: 100% 100%;
-  border-radius: 8px;
-  padding: 10px 20px;
+  border-radius: 14px;
+  padding: 14px 20px;
   margin: 10px 0;
   box-shadow: 0px 0px 8px 2px rgba(191, 191, 191, 0.2);
   h3 {
-    margin-bottom: 10px;
+    margin-bottom: 30px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    font-size: 20px;
+    font-size: 28px;
     font-weight: 500;
     color: #4a4a4a;
-    line-height: 28px;
+    line-height: 40px;
     span {
-      font-size: 24px;
+      font-size: 32px;
       color: #4a90e2;
     }
   }
   ul {
     margin: 0px;
+    margin-bottom: 10px;
     padding: 0;
-    padding-left: 40px;
+    padding-left: 30px;
     li {
-      margin-bottom: 10px;
-      font-size: 20px;
+      margin-bottom: 14px;
+      font-size: 23px;
       &:last-child {
         margin-bottom: 0;
       }
@@ -33,11 +34,11 @@
 
   i {
     display: inline-block;
-    width: 10px;
-    height: 10px;
+    width: 14px;
+    height: 14px;
     background-color: #4a90e2;
     border-radius: 50%;
-    margin-right: 8px;
+    margin-right: 12px;
   }
 }
 
@@ -53,9 +54,10 @@
 .content {
   position: relative;
   .img {
-    width: 58px;
-    height: 103px;
+    width: 78px;
+    height: 138px;
     background: url('~@/assets/vs.png') no-repeat;
+    background-size: 100% 100%;
     position: absolute;
     top: 50%;
     left: 50%;
@@ -69,11 +71,11 @@
   // color: #fff;
   font-size: 24px;
   p {
-    margin-top: 10px;
-    font-size: 22px;
+    margin-top: 14px;
+    font-size: 30px;
     font-weight: 400;
     color: #4a4a4a;
-    line-height: 30px;
+    line-height: 40px;
   }
 }
 .circleText {

src/pages/Smart/OptimizationTasks.js

@@ -99,7 +99,7 @@ const Produce = ({ projectId, queryMandate }) => {
   });
 
   return (
-    <div style={{ marginBottom: 20 }}>
+    <div style={{ marginBottom: 30 }}>
       <h3 className={styles.title}>
         <i />
         生产调度类
@@ -125,6 +125,7 @@ const Produce = ({ projectId, queryMandate }) => {
               style={{ width: '100%' }}
               columns={columns}
               dataSource={data}
+              pagination={false}
             />
           </div>
         </>
@@ -179,9 +180,11 @@ const Cost = ({ projectId }) => {
   });
   return (
     <div>
-      <h3 className={styles.title}>
-        <i style={{ background: '#F5A623' }} />
-        成本节约类
+      <h3 className={styles.title} style={{ justifyContent: 'space-between' }}>
+        <div>
+          <i style={{ background: '#F5A623' }} />
+          成本节约类
+        </div>
         <div
           className={styles.btn}
           onClick={() => history.push(`/smart/simulate/${projectId}`)}
@@ -207,7 +210,12 @@ const Cost = ({ projectId }) => {
           >
             <h3 className={styles.left}>任务内容</h3>
 
-            <Table className="table2" columns={columns} dataSource={data} />
+            <Table
+              className="table2"
+              columns={columns}
+              dataSource={data}
+              pagination={false}
+            />
           </div>
         </>
       )}

src/pages/Smart/OptimizationTasks.less

@@ -1,20 +1,22 @@
 .title {
-  font-size: 24px;
-  margin-bottom: 14px;
+  font-size: 32px;
+  margin-bottom: 16px;
   font-weight: bold;
-  line-height: 40px;
+  line-height: 44px;
+  display: flex;
+  align-items: center;
   i {
     display: inline-block;
     vertical-align: middle;
-    width: 12px;
-    height: 12px;
+    width: 14px;
+    height: 14px;
     border-radius: 50%;
     background-color: #4a90e2;
     margin-right: 10px;
   }
 }
 .desc {
-  font-size: 22px;
+  font-size: 30px;
   font-weight: 400;
   color: #4a4a4a;
 }
@@ -24,9 +26,9 @@
   padding: 20px;
   align-items: center;
   .left {
-    width: 90px;
+    width: 150px;
     margin: 0;
-    font-size: 18px;
+    font-size: 24px;
     font-weight: 400;
     color: #3b3b3b;
   }
@@ -36,20 +38,20 @@
 }
 .orderIcon {
   background: #12ceb3;
-  width: 200px;
+  width: 300px;
   position: absolute;
-  top: 30px;
-  right: -55px;
+  top: 40px;
+  right: -92px;
   text-align: center;
-  font-size: 18px;
+  font-size: 24px;
   transform: rotate(45deg);
-  padding: 8px 0;
+  padding: 10px 0;
   color: #fff;
 }
 .pageCard {
   margin-top: 30px;
   overflow: hidden;
-  border-radius: 8px;
+  border-radius: 26px;
   box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.3);
   border: 1px solid #eee;
   position: relative;
@@ -57,30 +59,31 @@
 }
 .bottom {
   border-top: 1px solid #c0c0c0;
-  padding: 28px;
+  padding: 38px;
   height: 100%;
   .bottomText {
-    font-size: 18px;
+    font-size: 24px;
     font-weight: 400;
     color: #4a4a4a;
-    line-height: 24px;
+    line-height: 34px;
     text-align: center;
   }
 }
 .btn {
-  width: 90px;
-  height: 40px;
+  width: 120px;
+  height: 56px;
   background: rgba(245, 166, 35, 0.75);
-  border-radius: 4px;
-  font-size: 18px;
+  border-radius: 5px;
+  font-size: 24px;
   font-weight: 400;
   color: #ffffff;
-  line-height: 40px;
+  line-height: 56px;
   text-align: center;
-  float: right;
 }
-:global {
-  .table2 .ant-table-thead {
-    background: rgba(245, 166, 35, 0.14);
+.table2 {
+  :global {
+    .ant-table-thead {
+      background: rgba(245, 166, 35, 0.14);
+    }
   }
 }

src/pages/Smart/components/CircleScore.js

@@ -1,10 +1,10 @@
 import styles from './CircleScore.less';
 
-const CircleScore = ({ score, children }) => {
+const CircleScore = ({ score, children, big = false }) => {
   const normalizedScore = Math.min(Math.max(score, 0), 100);
 
   return (
-    <div className={styles.circleScore}>
+    <div className={`${styles.circleScore} ${big ? styles.big : ''}`}>
       <div className={styles.circle}></div>
       <div className={styles.text}>{children}</div>
     </div>

src/pages/Smart/components/CircleScore.less

@@ -3,6 +3,13 @@
   height: 174px;
   position: relative;
 }
+.big {
+  width: 194px;
+  height: 194px;
+  .circle {
+    mask: radial-gradient(transparent, transparent 78px, #000 78px);
+  }
+}
 
 .circle {
   width: 100%;
@@ -10,7 +17,7 @@
   border-radius: 50%;
   animation: rotation 4s linear infinite;
   background: linear-gradient(60deg, #36a5ed 0%, #6eee96 100%);
-  mask: radial-gradient(transparent, transparent 75px, #000 77px)
+  mask: radial-gradient(transparent, transparent 75px, #000 77px);
 }
 
 .text {

src/pages/Smart/components/SimulateDetail.js

@@ -91,6 +91,7 @@ const SimulateDetail = (props) => {
     <div>
       {data && (
         <TabsContent
+          center={false}
           defaultActiveKey={data[0]}
           items={data.map((item) => ({
             label: TYPE[item]?.name,
@@ -543,7 +544,7 @@ function getOption(data = [], active) {
     legend: {
       textStyle: {
         // color: '#fff',
-        fontSize: 18,
+        fontSize: 24,
       },
     },
     grid: {
@@ -555,36 +556,22 @@ function getOption(data = [], active) {
     xAxis: {
       type: 'category',
       data: xAxis,
-      axisLine: {
-        lineStyle: {
-          // color: '#fff',
-        },
-      },
-      splitLine: {
-        lineStyle: {
-          // color: '#fff',
-        },
+      nameTextStyle: {
+        fontSize: 24,
       },
       axisLabel: {
-        // color: '#fff',
+        fontSize: 24,
       },
     },
     yAxis: {
       name: yAxisName,
       type: 'value',
       boundaryGap: [0, 0.01],
-      axisLine: {
-        lineStyle: {
-          // color: '#fff',
-        },
-      },
-      splitLine: {
-        lineStyle: {
-          // color: '#fff',
-        },
+      nameTextStyle: {
+        fontSize: 24,
       },
       axisLabel: {
-        // color: '#fff',
+        fontSize: 24,
       },
     },
     series,
@@ -705,6 +692,21 @@ function getMembraneOption(data = []) {
 
 const Optimization = ({ data }) => {
   if (!data?.optimization) return '';
+
+  const NAME_MAP = {
+    peb_interval: '反冲洗周期调整',
+    pac_fr: '絮凝剂投加建议',
+    ceb_residue_count: '超滤微滤, 剩余药洗次数',
+    ceb_permeability: '超滤微滤, 渗透率低于阈值, 药洗提醒',
+    ceb_time_expire: '超滤微滤药洗提醒',
+    ro_pressure_1st: 'ro一段运行状况',
+    ro_pressure_2nd: 'ro二段运行状况',
+    ro_pressure_3th: 'ro三段运行状况',
+    ro_nob_interval: 'ro非氧化杀菌调整',
+    ro_wash_interval: 'ro冲洗调整',
+    ro_residue_count: 'ro化学清洗后,剩余的可清洗次数',
+  };
+
   return (
     <div className={styles.optimization}>
       <div className={styles.title1}>
@@ -713,7 +715,7 @@ const Optimization = ({ data }) => {
       <div className={styles.title2}>调整内容</div>
       {Object.entries(data.optimization).map(([key, item]) => (
         <div className={styles.content}>
-          {key}:{item.remark}
+          【{NAME_MAP[key]}】{item.remark}
         </div>
       ))}
     </div>

src/pages/Smart/components/SimulateDetail.less

@@ -1,6 +1,5 @@
 .box {
   display: flex;
-  min-height: 54.2vh;
 }
 
 .title {
@@ -96,14 +95,14 @@
 .chartBox {
   width: 100%;
   height: 100%;
-  padding: 20px;
+  padding: 28px 32px;
   :global {
     .ant-select-selection-item {
-      line-height: 42px !important;
-      font-size: 22px !important;
+      line-height: 60px !important;
+      font-size: 30px !important;
     }
     .ant-select-selector {
-      height: 44px !important;
+      height: 60px !important;
     }
   }
 }
@@ -112,21 +111,20 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 30px;
 }
 
 .dateTabs {
   display: flex;
   border: 1px solid #d5d5d5;
-  border-radius: 5px;
-  height: 44px;
+  height: 60px;
   .dateTabsItem {
-    width: 94px;
+    width: 128px;
     text-align: center;
     cursor: pointer;
     border-right: 1px solid #d5d5d5;
-    line-height: 44px;
-    font-size: 18px;
+    line-height: 60px;
+    font-size: 24px;
     font-weight: 400;
     color: #4a4a4a;
     &:last-child {
@@ -140,29 +138,30 @@
 }
 .optimization {
   background-color: rgba(245, 166, 35, 0.08);
-  padding: 16px 24px;
-  margin-top: 20px;
+  padding: 20px 30px;
+  margin-top: 24px;
   .title1 {
-    font-size: 20px;
+    font-size: 28px;
     font-weight: 400;
     color: #4a4a4a;
-    line-height: 28px;
-    margin-bottom: 15px;
+    line-height: 38px;
+    margin-bottom: 20px;
   }
   .title2 {
-    padding: 4px 15px;
+    padding: 6px 20px;
     background: rgba(245, 166, 35, 0.35);
-    font-size: 20px;
+    font-size: 28px;
     font-weight: 400;
     color: #4a4a4a;
-    line-height: 28px;
-    margin-bottom: 10px;
+    line-height: 38px;
+    margin-bottom: 12px;
   }
   .content {
-    font-size: 20px;
+    font-size: 28px;
     font-weight: 400;
     color: #4a4a4a;
-    line-height: 34px;
-    padding-left: 15px;
+    line-height: 38px;
+    padding-left: 20px;
+    margin-bottom: 10px;
   }
 }

src/pages/Smart/components/SimulatePie.js

@@ -45,8 +45,8 @@ const SimulatePie = (props) => {
   }, []);
 
   return (
-    <div className="card-box" style={{ padding: 20, marginTop: 20 }}>
-      <h2 style={{ textAlign: 'center', fontSize: 22, color: '#4A4A4A' }}>
+    <div className="card-box" style={{ padding: 26, marginTop: 30 }}>
+      <h2 style={{ textAlign: 'center', fontSize: 30, color: '#4A4A4A' }}>
         通过模拟仿真预计未来一日可省 &nbsp;
         <span style={{ color: '#F5A623' }}>{getProfit()}元</span>
       </h2>

src/pages/Smart/index.js

@@ -20,16 +20,17 @@ const Work = (props) => {
     <PageContent>
       <PageTitle>水厂工况</PageTitle>
       <div className={styles.score}>
-        <CircleScore>
+        <CircleScore big>
           {data?.score}
-          <div style={{ fontSize: 18 }}>{data?.grade}</div>
+          <div style={{ fontSize: 24 }}>{data?.grade}</div>
         </CircleScore>
         <div className={styles.scoreRight}>
           <h3>当前运行{data?.grade}，可继续优化</h3>
           <div className={styles.time}>{data?.clac_time}</div>
           {data?.score && (
             <Button
-              style={{ marginRight: 20, height: 50 }}
+              style={{ marginRight: 20}}
+              className={styles.btn}
               type="primary"
               onClick={() =>
                 history.push(
@@ -42,7 +43,7 @@ const Work = (props) => {
           )}
 
           <Button
-            style={{ height: 50 }}
+            className={styles.btn}
             type="primary"
             onClick={() =>
               history.push('/smart/condition-detection/' + projectId)

src/pages/Smart/index.less

@@ -4,56 +4,61 @@
   display: flex;
   align-items: center;
   padding-left: 60px;
-  margin-bottom: 20px;
+  margin-bottom: 52px;
 }
 
 .scoreRight {
-  margin-left: 30px;
+  margin-left: 56px;
 
   h3 {
-    font-size: 22px;
+    font-size: 28px;
     font-family: PingFangSC-Regular, PingFang SC;
     color: #4a4a4a;
-    line-height: 30px;
-    margin-bottom: 6px;
+    line-height: 40px;
+    margin-bottom: 9px;
   }
 
   .time {
-    margin-bottom: 12px;
-    font-size: 18px;
+    margin-bottom: 16px;
+    font-size: 24px;
     font-weight: 400;
     color: #6e6e6e;
-    line-height: 24px;
+    line-height: 32px;
+  }
+  .btn {
+    height: 66px;
+    width: 134px;
+    font-size: 22px;
   }
 }
 
 .card {
   border-radius: 8px;
   box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.3);
-  padding: 20px;
-  padding-top: 10px;
+  padding: 16px;
   border: 1px solid #eee;
   margin: 10px 0;
   background: rgba(255, 255, 255, 0.6);
 
   h3 {
-    font-size: 20px;
+    font-size: 28px;
     color: #4a4a4a;
-    line-height: 28px;
-    margin-bottom: 14px;
+    line-height: 38px;
+    margin-bottom: 12px;
     font-weight: bold;
   }
 
   ul {
     margin: 0;
     padding: 0;
+    padding-bottom: 10px;
 
     li {
       margin-bottom: 16px;
-      font-size: 18px;
+      font-size: 24px;
       font-weight: 400;
       color: #4a4a4a;
-      line-height: 24px;
+      line-height: 30px;
       &:last-child {
         margin-bottom: 0;
       }
@@ -62,8 +67,8 @@
 
   i {
     display: inline-block;
-    width: 10px;
-    height: 10px;
+    width: 14px;
+    height: 14px;
     background-color: #4a90e2;
     border-radius: 50%;
     margin-right: 8px;

src/services/HardwareController.js → src/services/controller.js

@@ -10,3 +10,8 @@ export async function queryLightList(project_id) {
     params: { project_id },
   });
 }
+export async function queryDevice(project_id) {
+  return request(`/api/iot/v1/lamp/list`, {
+    params: { project_id },
+  });
+}