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

src/app.ts

@@ -78,7 +78,7 @@ const tokenExpiredHandle = (code: number) => {
     }, 50000);
     message.error('token失效，请重新登录');
 
-    history.push('/login');
+    // history.push('/login');
     return true;
   } else {
     return false;

src/components/ManagementPage/chartModule.js

@@ -178,8 +178,10 @@ const ChartModule = (props) => {
 };
 export default ChartModule;
 const colors = [
-  '#5470c6',
+  '#F5A623',
+  '#4B9FEC',
   '#91cc75',
+  '#5470c6',
   '#fac858',
   '#ee6666',
   '#73c0de',
@@ -202,7 +204,12 @@ const defaultOption = {
     type: 'category',
     boundaryGap: false,
     axisTick: { show: false },
-
+    nameTextStyle: {
+      fontSize: 18,
+    },
+    axisLabel: {
+      fontSize: 18,
+    },
     data: [
       '00:00',
       '01:15',
@@ -220,10 +227,13 @@ const defaultOption = {
       name: '000',
       top: 20,
       nameTextStyle: {
-        fontSize: 16,
+        fontSize: 18,
         // align: 'left',
         padding: [0, 0, 20, 0],
       },
+      axisLabel: {
+        fontSize: 18,
+      },
       axisLine: {
         show: false,
         // lineStyle: {
@@ -242,7 +252,7 @@ const defaultOption = {
       top: 20,
       position: 'right',
       nameTextStyle: {
-        fontSize: 16,
+        fontSize: 18,
         // align: 'left',
         padding: [0, 0, 20, 0],
       },
@@ -265,7 +275,7 @@ const defaultOption = {
       position: 'right',
       offset: 80,
       nameTextStyle: {
-        fontSize: 16,
+        fontSize: 18,
         // align: 'left',
         padding: [0, 0, 20, 0],
       },
@@ -406,6 +416,9 @@ const defaultOption = {
     // right: '10%',
     data: ['进水水量', '预测出水量', '实际出水量'],
     lineStyle: {},
+    textStyle: {
+      fontSize: 18,
+    },
   },
   // toolbox: {
   //   show: true,

src/components/PageContent/index.less

@@ -1,5 +1,5 @@
 .page {
-  background-color: #a0bcda54;
+  // background: #fff;
   padding: 20px;
   min-height: 100vh;
   position: relative;

src/components/PageTitle/index.less

@@ -3,12 +3,14 @@
   align-items: center;
 }
 .titleBar {
-  width: 8px;
-  height: 30px;
-  background-color: #366cda;
+  width: 5px;
+  height: 26px;
+  background: #4a90e2;
   float: left;
 }
 .title {
-  font-size: 22px;
-  padding-left: 12px;
+  font-size: 26px;
+  font-weight: 400;
+  color: #000000;
+  padding-left: 14px;
 }

src/components/TabsContent/index.js

@@ -5,7 +5,7 @@ const TabsContent = (props) => {
   const { defaultActiveKey = '1', center = true, items = {}, onChange } = props;
   const [active, setActive] = useState(defaultActiveKey);
   const renderContent = useMemo(() => {
-    return items.find((item) => item.key == active).children;
+    return items.find((item) => item.key == active)?.children;
   }, [active, items]);
   return (
     <div>

src/components/TabsContent/index.less

@@ -1,18 +1,20 @@
 .tabsTitle {
   display: flex;
   align-items: center;
-  height: 24px;
+  height: 116px;
   margin-bottom: 10px;
-  :nth-child(1) {
-    border-right: 1px solid black;
+  > .tabsItem {
+    border-right: 1px solid #979797;
   }
   :last-child {
     border-right: none;
   }
 }
 .tabsItem {
-  padding: 0 20px;
+  padding: 0 40px;
+  color: #4a4a4a;
+  font-size: 36px;
 }
 .active {
-  color: #5093e3;
+  color: #4a90e2;
 }

src/global.less

@@ -107,7 +107,7 @@ input[type='reset'] {
 
 .card-box {
   border-radius: 8px;
-  box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 0px 8px 2px rgba(191, 191, 191, 0.2);
   border: 1px solid #eee;
   background: rgba(255, 255, 255, 0.6);
 }
@@ -115,7 +115,7 @@ input[type='reset'] {
 .password-eye {
   display: inline-block;
   vertical-align: middle;
-  width: 40px;
+  width: 22px;
   height: 15px;
   background: url('@/assets/icon-eye1.png') no-repeat center;
   background-size: contain;
@@ -123,6 +123,47 @@ input[type='reset'] {
     background-image: url('@/assets/icon-eye2.png');
   }
 }
+
+.tabs {
+  display: flex;
+  width: 100%;
+  overflow-x: auto;
+  border: 1px solid #979797;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  .tabs-item {
+    flex: 1;
+    padding: 12px 20px;
+    font-size: 18px;
+    font-weight: 400;
+    color: #4a4a4a;
+    border-right: 1px solid #979797;
+    white-space: nowrap;
+    &:last-child {
+      border-right: none;
+    }
+    &.active {
+      color: #ffffff;
+      background: #4a90e2;
+    }
+  }
+}
+.section-title {
+  display: flex;
+  align-items: center;
+  font-size: 22px;
+  font-weight: 400;
+  color: #4a4a4a;
+  line-height: 30px;
+  .section-line {
+    width: 3px;
+    height: 23px;
+    background: #4a90e2;
+    margin-right: 6px;
+  }
+}
+
 *::-webkit-scrollbar {
   width: 6px;
   height: 6px;
@@ -139,3 +180,30 @@ input[type='reset'] {
 *::-webkit-scrollbar-track {
   background-color: #eee;
 }
+
+:where(.css-dev-only-do-not-override-byeoj0).ant-btn-primary {
+  background: #4a90e2;
+  font-size: 16px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.ant-table,
+.ant-table-cell,
+.ant-table-placeholder {
+  background: transparent !important;
+}
+.ant-table-cell::before {
+  display: none;
+}
+.ant-table-thead {
+  background: #cbe0f6;
+}
+.ant-table-thead > tr > th,
+.ant-table-tbody > tr > td {
+  padding: 8px 25px !important;
+  font-size: 20px !important;
+  color: #4a4a4a !important;
+  line-height: 28px !important;
+  font-weight: normal !important;
+  vertical-align: middle;
+}

src/pages/DeviceManager/index.js

@@ -8,15 +8,14 @@ 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();
-  const [type, setType] = useState(0); //0 全部  1维修  2保养
   const year = dayjs().format('YYYY');
   const params = {
     project_id: Number(projectId),
@@ -35,7 +34,7 @@ const DeviceManager = () => {
     }
   };
   return (
-    <PageContent style={{ backgroundColor: 'gray' }}>
+    <PageContent>
       <TabsContent
         defaultActiveKey="1"
         onChange={onChange}
@@ -59,6 +58,7 @@ const DeviceManager = () => {
 };
 const Device = ({ projectId }) => {
   const [type, setType] = useState(0); //0 全部  1维修  2保养
+  const [activeCode, setActiveCode] = useState();
 
   const columnsRepair = [
     {
@@ -136,45 +136,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 + 1}`,
+        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 +214,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,32 +260,36 @@ 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
-          defaultActiveKey={['1']}
-          bordered={false}
-          onChange={onChange}
-          items={allData?.items}
-        />
+        <Collapse bordered={false} onChange={onChange} items={allData?.items} />
       )}
       {type == 1 && (
         <Table
@@ -263,14 +302,14 @@ const Device = ({ projectId }) => {
       )}
       {type == 2 && (
         <Table
-          loading={repairLoading}
+          loading={maintaiLoading}
           style={{ marginTop: '10px' }}
-          dataSource={repairData?.filter((item) => item.DeviceCode)}
+          dataSource={maintainData?.filter((item) => item.DeviceCode)}
           columns={columns}
           pagination={false}
         />
       )}
-    </Space>
+    </div>
   );
 };
 const SparePart = ({ data, loading, projectId }) => {
@@ -312,7 +351,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/Home/ChemCostComparison.js

@@ -6,6 +6,7 @@ import {
   getChemicalAgents,
   getComparisonData,
 } from '@/services/OperationManagement';
+import { UnityAction } from '@/utils/utils';
 import { useParams } from '@umijs/max';
 import { Tabs, message } from 'antd';
 import dayjs from 'dayjs';
@@ -251,16 +252,31 @@ const CostComparison = (props) => {
     <PageContent closeable={false}>
       <PageTitle onReturn={() => UnityAction.sendMsg('menuItem', '首页')}>
         能耗数据
-      </PageTitle>
-
-      <div className="card-box" style={{ padding: 20, marginTop: 40 }}>
         <div
           onClick={(e) => {
             e.stopPropagation();
             setOpen(!open);
           }}
+          style={{ marginLeft: 10 }}
           className={`password-eye ${open ? 'open' : ''}`}
         ></div>
+      </PageTitle>
+
+      <div className="card-box" style={{ padding: 20, marginTop: 40 }}>
+        {/* 使用Tabs来展示所有药的标签 */}
+        <div className="tabs">
+          {chemList?.map((item) => (
+            <div
+              onClick={() => {
+                setCurrentChem(item);
+                handleChemChange(item);
+              }}
+              className={`tabs-item ${currentChem == item ? 'active' : ''}`}
+            >
+              {item}
+            </div>
+          ))}
+        </div>
         <div className={styles.curEnergyCost}>
           <div className={styles.item}>
             <div className={styles.value}>
@@ -293,22 +309,6 @@ const CostComparison = (props) => {
             <div style={{ height: '300px' }}>
               <ChartModule {...chartData[1]} />
             </div>
-            {/* 使用Tabs来展示所有药的标签 */}
-            {chemList.length > 0 && (
-              <div className={styles.content}>
-                <Tabs
-                  activeKey={currentChem || chemList[0]}
-                  onChange={(type) => {
-                    setCurrentChem(type);
-                    handleChemChange(type);
-                  }}
-                >
-                  {chemList.map((item) => (
-                    <TabPane tab={item} key={item} />
-                  ))}
-                </Tabs>
-              </div>
-            )}
           </div>
         )}
       </div>

src/pages/Home/EnergyCostComparison.js

@@ -8,6 +8,7 @@ import { message } from 'antd';
 import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
 import styles from './manage.less';
+import { UnityAction } from '@/utils/utils';
 
 const typeParams = [
   {
@@ -224,16 +225,18 @@ const CostComparison = () => {
     <PageContent closeable={false}>
       <PageTitle onReturn={() => UnityAction.sendMsg('menuItem', '首页')}>
         能耗数据
-      </PageTitle>
-
-      <div className="card-box" style={{ padding: 20, marginTop: 40 }}>
         <div
           onClick={(e) => {
             e.stopPropagation();
             setOpen(!open);
           }}
+          style={{ marginLeft: 10 }}
           className={`password-eye ${open ? 'open' : ''}`}
         ></div>
+      </PageTitle>
+
+      <div className="card-box" style={{ padding: 20, marginTop: 40 }}>
+  
         <div className={styles.curEnergyCost}>
           <div className={styles.item}>
             <div className={styles.value}>

src/pages/Home/QualityMng.js

@@ -49,7 +49,8 @@ function Quality() {
           start_time: timerRef.current.s_time,
           end_time: timerRef.current.e_time,
         },
-        codeList?.map((item) => item.metric_code),
+        // codeList?.map((item) => item.metric_code),
+        [currentCode.metric_code],
       );
     },
     {
@@ -57,16 +58,15 @@ function Quality() {
     },
   );
   const column = useMemo(() => {
-    const col = { title: '时间', dataIndex: 'time', width: '250px' };
-    let other = codeList?.map((item) => {
-      return {
-        title: item.metric,
-        dataIndex: item.metric_code,
-        width: '200px',
-      };
-    });
-    return other && other.length > 0 ? [col, ...other] : [];
-  }, [codeList]);
+    if (!currentCode) return [];
+    return [
+      { title: '时间', dataIndex: 'time', width: '40%' },
+      {
+        title: currentCode.metric,
+        dataIndex: currentCode.metric_code,
+      },
+    ];
+  }, [currentCode]);
 
   //图表配置
   const chartProps = useMemo(() => {
@@ -76,18 +76,8 @@ function Quality() {
     let yName = currentCode.metric;
     let data = [...mainRes.data].reverse();
     xData = data.map((item) => item.time);
-    // dataList.push({
-    //   type: 0,
-    //   name: '出水水量',
-    //   data: data.map((item) => item.permeate),
-    // });
-    // dataList.push({
-    //   type: 1,
-    //   name: '进水水量',
-    //   data: data.map((item) => item.feed),
-    // });
     dataList.push({
-      type: 2,
+      type: 0,
       name: currentCode.metric,
       data: data.map((item) => item[currentCode.metric_code]),
     });
@@ -95,16 +85,16 @@ function Quality() {
       yName,
       xData,
       dataList,
-      typeList: codeList?.map((item) => item.metric),
-      currentType: currentCode.metric,
+      // typeList: codeList?.map((item) => item.metric),
+      // currentType: currentCode.metric,
     };
   }, [mainRes.data, currentCode]);
 
   useEffect(() => {
-    if (codeList) {
+    if (currentCode) {
       mainRes.run();
     }
-  }, [codeList]);
+  }, [currentCode]);
 
   const onChange = (name) => {
     const code = codeList.find((item) => item.metric == name);
@@ -116,8 +106,24 @@ function Quality() {
       <PageTitle onReturn={() => UnityAction.sendMsg('menuItem', '首页')}>
         水质监测
       </PageTitle>
-      <div className="card-box" style={{ padding: 20, marginTop: 40 }}>
-        <PageTitle>数据曲线</PageTitle>
+
+      <div className="card-box" style={{ padding: 20, marginTop: 26 }}>
+        <div className="tabs" style={{ marginBottom: 20 }}>
+          {codeList?.map((item) => (
+            <div
+              onClick={() => {
+                setCode(item);
+              }}
+              className={`tabs-item ${item == currentCode ? 'active' : ''}`}
+            >
+              {item.metric}
+            </div>
+          ))}
+        </div>
+        <div className="section-title">
+          <div className="section-line"></div>
+          数据曲线
+        </div>
         <Spin spinning={mainRes.loading}>
           <div style={{ height: 500, marginTop: 20 }}>
             {mainRes?.data ? (
@@ -128,12 +134,14 @@ function Quality() {
           </div>
         </Spin>
         <div style={{ marginTop: 30 }}>
-          <PageTitle>数据列表</PageTitle>
+          <div className="section-title">
+            <div className="section-line"></div>
+            数据列表
+          </div>
           <Table
             columns={column}
             style={{ marginTop: 20 }}
             dataSource={mainRes?.data}
-            scroll={{ x: 2500 }}
           />
         </div>
       </div>

src/pages/Home/WaterAmtMng.js

@@ -4,16 +4,15 @@ import ChartModule from '@/components/ManagementPage/chartModule';
 import PageContent from '@/components/PageContent';
 import PageTitle from '@/components/PageTitle';
 import { queryChartListByCode } from '@/services/OperationManagement';
+import { UnityAction } from '@/utils/utils';
 import { useParams, useRequest } from '@umijs/max';
 import { Spin, Table } from 'antd';
 import dayjs from 'dayjs';
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 
 const WaterAmtMng = () => {
   const { projectId } = useParams();
 
-  const [currentPage, setPage] = useState(1);
-
   const { data, loading, run } = useRequest(
     (date) =>
       queryChartListByCode(
@@ -66,7 +65,7 @@ const WaterAmtMng = () => {
         data: data.map((item) => item.plant_permeate_flow),
       });
       dataList.push({
-        type: 1,
+        type: 0,
         name: '进水水量',
         data: data.map((item) => item.plant_feed_flow),
       });
@@ -74,13 +73,8 @@ const WaterAmtMng = () => {
     return { dataList, xData };
   }, [data]);
 
-  const onChangePage = (pagination) => {
-    setPage(pagination.current);
-  };
-
   const onSearch = (date) => {
     run(date);
-    setPage(1);
   };
 
   return (
@@ -88,21 +82,26 @@ const WaterAmtMng = () => {
       <PageTitle onReturn={() => UnityAction.sendMsg('menuItem', '首页')}>
         水量监测
       </PageTitle>
-      <div className="card-box" style={{ padding: 20, marginTop: 40 }}>
-        <PageTitle>数据曲线</PageTitle>
+      <div className="card-box" style={{ padding: 20, marginTop: 26 }}>
+        <div className="section-title">
+          <div className="section-line"></div>
+          数据曲线
+        </div>
         <Spin spinning={loading}>
           <div style={{ height: '300px', marginTop: 20 }}>
             <ChartModule yName="水量(t)" xData={xData} dataList={dataList} />
           </div>
         </Spin>
         <div style={{ marginTop: 30 }}>
-          <PageTitle>数据列表</PageTitle>
+          <div className="section-title">
+            <div className="section-line"></div>
+            数据列表
+          </div>
           <Table
             loading={loading}
             columns={columns}
             style={{ marginTop: 20 }}
-            pagination={{ current: currentPage }}
-            onChange={onChangePage}
+            pagination={false}
             dataSource={data?.sort((a, b) => b?.time?.localeCompare(a?.time))}
           />
         </div>

src/pages/Home/index.js

@@ -2,7 +2,7 @@ import { getComparisonData } from '@/services/OperationManagement';
 import { queryConditionSnapshot } from '@/services/SmartOps';
 import { UnityAction } from '@/utils/utils';
 import { LoadingOutlined } from '@ant-design/icons';
-import { connect, history, useParams, useRequest } from '@umijs/max';
+import { connect, useParams, useRequest } from '@umijs/max';
 import dayjs from 'dayjs';
 import { useEffect } from 'react';
 import CircleScore from '../Smart/components/CircleScore';
@@ -45,7 +45,6 @@ const RightContent = (props) => {
 
 // 水厂工况
 const SmartWork = (props) => {
-  const { projectId } = useParams();
   const { data } = props;
   return (
     <Box
@@ -123,13 +122,7 @@ const SelfInspection = connect(({ eqSelfInspection, loading }) => ({
   const renderStatus = () => {
     if (loading) return <LoadingOutlined />;
     if (autoReport.warningTotalNum) {
-      return (
-        <>
-          系统自检发现
-          <span style={{ color: '#FE5850' }}>{autoReport.warningTotalNum}</span>
-          项异常
-        </>
-      );
+      return <span style={{ color: '#FE5850' }}>异常</span>;
     }
     return <span style={{ color: '#F5A623' }}>正常</span>;
   };
@@ -151,7 +144,9 @@ const SelfInspection = connect(({ eqSelfInspection, loading }) => ({
       <div className={styles.insTag}>自检中</div>
 
       <div className={styles.insStatus}>{renderStatus()}</div>
-      <div className={styles.time}>{autoReport.CreatedTime}</div>
+      <div className={styles.time} style={{ marginBottom: 30 }}>
+        {autoReport.CreatedTime}
+      </div>
     </Box>
   );
 });

src/pages/Home/index.less

@@ -8,8 +8,8 @@
 .box {
   background: url('@/assets/home-box-bg.png') no-repeat center;
   background-size: 100% 100%;
-  width: 400px;
-  padding: 20px;
+  width: 520px;
+  padding: 24px;
   position: relative;
   margin-bottom: 40px;
   cursor: pointer;
@@ -20,9 +20,12 @@
   }
 
   .boxTitle {
-    font-size: 24px;
-    padding-left: 46px;
+    padding-left: 68px;
     margin-bottom: 20px;
+    font-size: 24px;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 34px;
   }
   > ul {
     display: flex;
@@ -32,14 +35,18 @@
     }
   }
   .name {
-    margin-top: 20px;
-    font-size: 18px;
+    font-size: 20px;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 28px;
     text-align: center;
+    margin-top: 18px;
   }
   .value {
-    padding-top: 14px;
-    color: #3198fa;
-    font-size: 24px;
+    font-size: 32px;
+    font-weight: 600;
+    color: #329bfe;
+    line-height: 50px;
     text-align: center;
   }
 }
@@ -50,7 +57,7 @@
   align-items: center;
 
   .scoreTitle {
-    font-size: 20px;
+    font-size: 22px;
     margin-top: 10px;
     margin-bottom: 14px;
   }
@@ -67,16 +74,26 @@
 }
 .insTag {
   position: absolute;
-  right: 30px;
-  top: 30px;
+  right: 54px;
+  top: 44px;
+  width: 114px;
+  height: 50px;
   background: #4a90e2;
-  border-radius: 8px;
-  padding: 10px 20px;
+  border-radius: 5px;
+  text-align: center;
+  line-height: 50px;
+
+  font-size: 24px;
+  font-weight: 400;
+  color: #ffffff;
 }
 
 .insStatus {
   text-align: center;
-  font-size: 34px;
-  margin-bottom: 30px;
-  margin-top: 60px;
+  font-size: 40px;
+  font-weight: 500;
+  color: #f5a623;
+  line-height: 56px;
+  margin-top: 50px;
+  margin-bottom: 22px;
 }

src/pages/Home/manage.less

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

src/pages/MessageCenter/index.js

@@ -7,7 +7,8 @@ import { Button } from 'antd';
 import dayjs from 'dayjs';
 import { useState } from 'react';
 import styles from './index.less';
-const icon = require('@/assets/air-conditioner.png');
+const icon1 = require('@/assets/message/work.png');
+const icon2 = require('@/assets/message/check.png');
 
 const MessageCenter = () => {
   const { projectId } = useParams();
@@ -37,16 +38,20 @@ const MessageCenter = () => {
       : '';
     return (
       <div className={`card-box ${styles.itemContent}`}>
-        <img style={{ width: '30px', height: '30px' }} src={icon} />
+        <img className={styles.img} src={tab == '1' ? icon1 : icon2} />
         <div>
-          <div style={{ marginBottom: '30px' }}>{item.MsgBady}</div>
+          <div className={styles.text}>{item.MsgBady}</div>
           <div>{time}</div>
         </div>
         <div className={styles.right}>
           <div
             className={item?.ReadStatus ? styles.redPoint : styles.nonePoint}
           />
-          <Button type="primary" onClick={handlerSeeClick}>
+          <Button
+            className={styles.btn}
+            type="primary"
+            onClick={handlerSeeClick}
+          >
             查看
           </Button>
         </div>

src/pages/MessageCenter/index.less

@@ -1,5 +1,5 @@
 .itemContent {
-  padding: 10px;
+  padding: 38px 40px 26px;
   display: flex;
   justify-content: space-between;
   .right {
@@ -9,20 +9,43 @@
     align-items: end;
     .redPoint {
       background-color: red;
-      width: 10px;
-      height: 10px;
-      border-radius: 5px;
+      width: 18px;
+      height: 18px;
+      border-radius: 9px;
     }
     .nonePoint {
       width: 10px;
       height: 10px;
     }
   }
+  .img {
+    width: 42px;
+    height: 44px;
+  }
+  .text {
+    font-size: 38px;
+    color: #000000;
+    line-height: 54px;
+    margin-bottom: 28px;
+  }
+  .time {
+    font-size: 30px;
+    color: #4a4a4a;
+    line-height: 40px;
+  }
+  .btn {
+    width: 140px;
+    height: 60px;
+    font-size: 30px;
+    color: #ffffff;
+    line-height: 40px;
+  }
 }
 .allRead {
   position: absolute;
-  top: 20px;
+  top: 68px;
   line-height: 24px;
-  right: 60px;
+  right: 104px;
+  font-size: 32px;
   cursor: pointer;
 }

src/pages/SafetyManagement/index.js

@@ -45,9 +45,10 @@ const DeviceManager = () => {
   } = useRequest(() => queryMonitorOnlineCount(projectId));
 
   useEffect(() => {
-    if (data?.list && tab == '2') UnityAction.sendMsg('doorData', data?.list);
+    if (data?.list && tab == '2')
+      UnityAction.sendMsg('doorData', JSON.stringify(data?.list));
     if (dataVList?.list && tab == '1')
-      UnityAction.sendMsg('camData', dataVList?.list);
+      UnityAction.sendMsg('camData', JSON.stringify(dataVList?.list));
   }, [data, dataVList]);
 
   const handleTabChange = (tab) => {
@@ -98,73 +99,43 @@ const DeviceManager = () => {
 const Video = ({ projectId, data, dataOnline, loading }) => {
   const renderRed = (item) => {
     return (
-      <div style={{ display: 'flex', alignItems: 'center' }}>
+      <div className={styles.cardItem}>
         <div
-          style={{
-            backgroundColor: item.Online ? '#12ceb3' : 'red',
-            width: '10px',
-            height: '10px',
-            borderRadius: '5px',
-            marginRight: '10px',
-          }}
+          className={item.Online ? styles.onlinePoint : styles.outlinePoint}
         />
-        <span>{item.Name}</span>
+        <span className={styles.name}>{item.Name}</span>
       </div>
     );
   };
   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>
-          <div className={styles.num}>{dataOnline?.total || 0}</div>
-          <div>在库数量（个）</div>
+        <div className={styles.titleLeft}>
+          <img className={styles.img} src={img} />
+          <div className={styles.textCon}>
+            <div className={styles.num}>{dataOnline?.total || 0}</div>
+            <div className={styles.text}>在库数量（个）</div>
+          </div>
         </div>
         <div>
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              marginBottom: '20px',
-            }}
-          >
-            <div
-              style={{
-                backgroundColor: '#12ceb3',
-                width: '10px',
-                height: '10px',
-                borderRadius: '5px',
-                marginRight: '10px',
-              }}
-            />
-            <span>在线：{dataOnline?.online || 0}</span>
+          <div className={styles.lTextCon1}>
+            <div className={styles.onlinePoint} />
+            <span className={styles.text}>在线：{dataOnline?.online || 0}</span>
           </div>
-          <div style={{ display: 'flex', alignItems: 'center' }}>
-            <div
-              style={{
-                backgroundColor: 'gray',
-                width: '10px',
-                height: '10px',
-                borderRadius: '5px',
-                marginRight: '10px',
-              }}
-            />
-            <span>离线：{dataOnline?.offline || 0}</span>
+          <div className={styles.lTextCon2}>
+            <div className={styles.outlinePoint} />
+            <span className={styles.text}>
+              离线：{dataOnline?.offline || 0}
+            </span>
           </div>
         </div>
       </div>
 
-      <Space direction="vertical" className={styles.sparePart}>
-        {data?.map((item, idx) => (
-          <div
-            key={`video_${idx}`}
-            className="card-box"
-            style={{ padding: '10px' }}
-          >
-            {renderRed(item)}
-          </div>
-        ))}
-      </Space>
+      {data?.map((item, idx) => (
+        <div key={`video_${idx}`} className="card-box">
+          {renderRed(item)}
+        </div>
+      ))}
     </Space>
   );
 };
@@ -177,126 +148,56 @@ const Door = ({ data, dataOver, loading, projectId }) => {
 
   const renderRed = (item) => {
     return (
-      <div style={{ display: 'flex', alignItems: 'center' }}>
+      <div className={styles.cardItem}>
         <div
-          style={{
-            backgroundColor: item?.status ? '#12ceb3' : 'red',
-            width: '10px',
-            height: '10px',
-            borderRadius: '5px',
-            marginRight: '10px',
-          }}
+          className={item?.status ? styles.onlinePoint : styles.outlinePoint}
         />
-        <span>{item?.name}</span>
+        <span className={styles.name}>{item?.name}</span>
       </div>
     );
   };
   return (
-    <div>
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          marginBottom: '10px',
-        }}
-      >
-        <div className="card-box" style={{ width: '49%', padding: '10px' }}>
-          <div
-            className={styles.titleTwoContent}
-            style={{ width: '100%', marginBottom: '10px' }}
-          >
+    <Space direction="vertical" size={16} className={styles.doorPart}>
+      <div className={styles.titleContent}>
+        <div className={`card-box ${styles.cardLeft}`}>
+          <div className={styles.up}>
             <img className={styles.img} src={img} />
-            <div>
+            <div className={styles.textCon}>
               <div className={styles.num}>{dataOver?.total}</div>
-              <div>在库数量（个）</div>
+              <div className={styles.text}>门禁数量（个）</div>
             </div>
           </div>
-          <div style={{ display: 'flex', justifyContent: 'space-around' }}>
-            <div style={{ display: 'flex', alignItems: 'center' }}>
-              <div
-                style={{
-                  backgroundColor: '#12ceb3',
-                  width: '10px',
-                  height: '10px',
-                  borderRadius: '5px',
-                  marginRight: '10px',
-                }}
-              />
-              <span>在线：{dataOver?.online}</span>
+          <div className={styles.bottom}>
+            <div className={styles.lTextCon2}>
+              <div className={styles.onlinePoint} />
+              <span className={styles.text}>在线：{dataOver?.online}</span>
             </div>
-            <div style={{ display: 'flex', alignItems: 'center' }}>
-              <div
-                style={{
-                  backgroundColor: 'gray',
-                  width: '10px',
-                  height: '10px',
-                  borderRadius: '5px',
-                  marginRight: '10px',
-                }}
-              />
-              <span>离线：{dataOver?.offline}</span>
+            <div className={styles.lTextCon2}>
+              <div className={styles.outlinePoint} />
+              <span className={styles.text}>离线：{dataOver?.offline}</span>
             </div>
           </div>
         </div>
-        <div className={`card-box ${styles.titleTwoContent}`}>
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              height: '100%',
-              justifyContent: 'space-around',
-            }}
-          >
-            <div
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-              }}
-            >
-              <div
-                style={{
-                  backgroundColor: '#4a90e2',
-                  width: '10px',
-                  height: '10px',
-                  borderRadius: '5px',
-                  marginRight: '10px',
-                }}
-              />
-              <span>今日进厂人数：{2}</span>
-            </div>
-            <div
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-              }}
-            >
-              <div
-                style={{
-                  backgroundColor: '#f5a623',
-                  width: '10px',
-                  height: '10px',
-                  borderRadius: '5px',
-                  marginRight: '10px',
-                }}
-              />
-              <span>今日出厂人数：{2}</span>
-            </div>
-            <Button onClick={handleClick}>门禁日志</Button>
+        <div className={`card-box ${styles.cardRight}`}>
+          <div className={styles.textContent}>
+            <div className={styles.in} />
+            <span className={styles.text}>今日进厂人数：{2}</span>
+          </div>
+          <div className={styles.textContent}>
+            <div className={styles.out} />
+            <span className={styles.text}>今日出厂人数：{2}</span>
           </div>
+          <Button className={styles.btn} onClick={handleClick}>
+            门禁日志
+          </Button>
         </div>
       </div>
-      <Space direction="vertical" className={styles.sparePart}>
-        {data?.map((item, idx) => (
-          <div
-            key={`door_${idx}`}
-            className="card-box"
-            style={{ padding: '10px' }}
-          >
-            {renderRed(item)}
-          </div>
-        ))}
-      </Space>
-    </div>
+      {data?.map((item, idx) => (
+        <div key={`door_${idx}`} className="card-box">
+          {renderRed(item)}
+        </div>
+      ))}
+    </Space>
   );
 };
 

src/pages/SafetyManagement/index.less

@@ -2,38 +2,133 @@
   position: absolute;
   right: 0;
 }
-.titleContent {
-  position: relative;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-}
-.titleTwoContent {
-  position: relative;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  width: 49%;
-}
+
 .img {
-  width: 30%;
+  width: 154px;
+  margin-right: 20px;
 }
 .num {
-  color: #ffc400;
-  font-size: 36px;
-  margin-bottom: 20px;
+  font-size: 80px;
+  font-weight: bold;
+  font-family: DINAlternate-Bold, DINAlternate;
+  line-height: 94px;
+  margin-bottom: 16px;
+  color: #4a90e2;
+}
+.point {
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  margin-right: 12px;
+}
+.onlinePoint {
+  .point;
+  background-color: #12ceb3;
+}
+.outlinePoint {
+  .point;
+  background-color: #9b9b9b;
 }
 .rightIcon {
   position: absolute;
   right: 20px;
   top: 20px;
 }
+.cardItem {
+  display: flex;
+  padding: 40px 44px 32px;
+  align-items: center;
+  .name {
+    font-size: 36px;
+    color: #000000;
+  }
+}
+.lTextCon2 {
+  display: flex;
+  align-items: center;
+}
+.text {
+  font-size: 28px;
+  color: #4a4a4a;
+  line-height: 38px;
+}
 .sparePart {
   width: 100%;
-  .cardItem {
+  .titleContent {
+    position: relative;
     display: flex;
-    padding: 10px;
     justify-content: space-between;
     align-items: center;
+    padding: 48px 212px 28px 104px;
+    .titleLeft {
+      display: flex;
+      .textCon {
+        text-align: center;
+        margin: auto;
+      }
+    }
+    .lTextCon1 {
+      .lTextCon2;
+      margin-bottom: 32px;
+    }
+  }
+}
+.doorPart {
+  width: 100%;
+  .titleContent {
+    display: flex;
+    justify-content: space-between;
+    .cardLeft {
+      width: 49%;
+      .up {
+        display: flex;
+        align-items: center;
+        margin-top: 32px;
+        margin-left: 48px;
+        .img {
+          width: 154px;
+          // height: 130px;
+          margin-right: 40px;
+        }
+        .textCon {
+          text-align: center;
+        }
+      }
+      .bottom {
+        display: flex;
+        margin: 28px 0 6px;
+        justify-content: space-around;
+      }
+    }
+    .cardRight {
+      width: 49%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      padding: 28px 0 32px 0;
+      .btn {
+        width: 157px;
+        height: 55px;
+        background: rgba(222, 237, 255, 0.91);
+        border-radius: 6px;
+        padding: 8px 26px;
+        font-size: 28px;
+        color: #329bfe;
+        line-height: 38px;
+      }
+      .in {
+        .point;
+        background-color: #4a90e2;
+      }
+      .out {
+        .point;
+        background-color: #f5a623;
+      }
+      .textContent {
+        display: flex;
+        align-items: center;
+      }
+    }
   }
 }

src/pages/Smart/ConditionDetection.js

@@ -1,9 +1,5 @@
 // 优化任务
-import {
-  queryProcessSection,
-  queryRealEstimate,
-  queryRealEstimateChart,
-} from '@/services/SmartOps';
+import { queryRealEstimate, queryRealEstimateChart } from '@/services/SmartOps';
 import { useParams, useRequest } from '@umijs/max';
 import { Col, Row } from 'antd';
 import * as echarts from 'echarts';
@@ -18,11 +14,6 @@ const ConditionDetection = (props) => {
   const { projectId } = useParams();
   let pid = Number(projectId);
 
-  // 查询工艺段列表
-  const { data: processList } = useRequest(queryProcessSection, {
-    defaultParams: [pid],
-  });
-
   // 查询工况
   const { data } = useRequest(queryRealEstimate, {
     defaultParams: [pid],
@@ -64,56 +55,60 @@ const ConditionDetection = (props) => {
         {/* <p>{desc}</p> */}
         <p>膜车间当前运行状态{grade}</p>
       </div>
-      <Row gutter={16}>
-        <Col span={12}>
-          <div className={`${styles.card} card-box`}>
-            <h3>
-              实时工况 <span>{real.score}分</span>
-            </h3>
-            <ul>
-              <li>
-                <i></i>水质达标率评分：{real.water}
-              </li>
-              <li>
-                <i></i>能耗评分：{real.energy}
-              </li>
-              <li>
-                <i></i>药耗评分：{real.medicine}
-              </li>
-              <li>
-                <i></i>设施设备利用率评分：{real.device_rate}
-              </li>
-              <li>
-                <i></i>设施设备完好率评分：{real.device_intact}
-              </li>
-            </ul>
-          </div>
-        </Col>
-        <Col span={12}>
-          <div className={`${styles.card2} card-box`}>
-            <h3>
-              目标工况 <span>{best.score}分</span>
-            </h3>
-            <ul>
-              <li>
-                <i></i>水质达标率评分：{best.water}
-              </li>
-              <li>
-                <i></i>能耗评分：{best.energy}
-              </li>
-              <li>
-                <i></i>药耗评分：{best.medicine}
-              </li>
-              <li>
-                <i></i>设施设备利用率评分：{best.device_rate}
-              </li>
-              <li>
-                <i></i>设施设备完好率评分：{best.device_intact}
-              </li>
-            </ul>
-          </div>
-        </Col>
-      </Row>
+      <div className={styles.content}>
+        <Row gutter={16}>
+          <Col span={12} style={{ padding: 10 }}>
+            <div className={`${styles.card} card-box`}>
+              <h3>
+                实时工况 <span>{real.score}分</span>
+              </h3>
+              <ul>
+                <li>
+                  <i></i>水质达标率评分：{real.water}
+                </li>
+                <li>
+                  <i></i>能耗评分：{real.energy}
+                </li>
+                <li>
+                  <i></i>药耗评分：{real.medicine}
+                </li>
+                <li>
+                  <i></i>设施设备利用率评分：{real.device_rate}
+                </li>
+                <li>
+                  <i></i>设施设备完好率评分：{real.device_intact}
+                </li>
+              </ul>
+            </div>
+          </Col>
+          <Col span={12} style={{ padding: 10 }}>
+            <div className={`${styles.card2} card-box`}>
+              <h3>
+                目标工况 <span>{best.score}分</span>
+              </h3>
+              <ul>
+                <li>
+                  <i></i>水质达标率评分：{best.water}
+                </li>
+                <li>
+                  <i></i>能耗评分：{best.energy}
+                </li>
+                <li>
+                  <i></i>药耗评分：{best.medicine}
+                </li>
+                <li>
+                  <i></i>设施设备利用率评分：{best.device_rate}
+                </li>
+                <li>
+                  <i></i>设施设备完好率评分：{best.device_intact}
+                </li>
+              </ul>
+            </div>
+          </Col>
+        </Row>
+        <div className={styles.img}></div>
+      </div>
+
       <ChartContent projectId={pid} />
     </PageContent>
   );
@@ -139,7 +134,19 @@ const ChartContent = ({ projectId }) => {
 
   function getOption(data = []) {
     const option = {
-      color: ['#FFC800', '#30EDFD', '#4096ff', '#ff4d4f', '#ffa940'],
+      color: [
+        '#F5A623',
+        '#4B9FEC',
+        '#91cc75',
+        '#5470c6',
+        '#fac858',
+        '#ee6666',
+        '#73c0de',
+        '#3ba272',
+        '#fc8452',
+        '#9a60b4',
+        '#ea7ccc',
+      ],
       tooltip: {
         trigger: 'axis',
       },
@@ -195,9 +202,6 @@ const ChartContent = ({ projectId }) => {
         name: item.name,
         type: 'line',
         showSymbol: false,
-        areaStyle: {
-          opacity: 0.1,
-        },
         type: 'line',
         smooth: true,
         data: item?.list.map((v) => v.value),

src/pages/Smart/ConditionDetection.less

@@ -1,26 +1,27 @@
 .card {
-  // background: url('@/assets/newUI/tabsBg.png') no-repeat center;
   background-size: 100% 100%;
-  // color: #fff;
   border-radius: 8px;
   padding: 10px 20px;
   margin: 10px 0;
+  box-shadow: 0px 0px 8px 2px rgba(191, 191, 191, 0.2);
   h3 {
-    // color: #fff;
-    font-size: 24px;
     margin-bottom: 10px;
-    letter-spacing: 2px;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    font-size: 20px;
+    font-weight: 500;
+    color: #4a4a4a;
+    line-height: 28px;
     span {
       font-size: 24px;
-      color: #30EDFD;
+      color: #4a90e2;
     }
   }
   ul {
     margin: 0px;
     padding: 0;
+    padding-left: 40px;
     li {
       margin-bottom: 10px;
       font-size: 20px;
@@ -34,7 +35,7 @@
     display: inline-block;
     width: 10px;
     height: 10px;
-    background-color: #30EDFD;
+    background-color: #4a90e2;
     border-radius: 50%;
     margin-right: 8px;
   }
@@ -43,13 +44,24 @@
 .card2 {
   .card;
   i {
-    background-color: #FFC800;
+    background-color: #f5a623;
   }
   h3 span {
-    color: #FFC800;
+    color: #f5a623;
+  }
+}
+.content {
+  position: relative;
+  .img {
+    width: 58px;
+    height: 103px;
+    background: url('~@/assets/vs.png') no-repeat;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
   }
 }
-
 .circle {
   display: flex;
   flex-direction: column;
@@ -58,7 +70,10 @@
   font-size: 24px;
   p {
     margin-top: 10px;
-    letter-spacing: 2px;
+    font-size: 22px;
+    font-weight: 400;
+    color: #4a4a4a;
+    line-height: 30px;
   }
 }
 .circleText {

src/pages/Smart/OptimizationTasks.js

@@ -8,7 +8,7 @@ import {
   queryUserList,
 } from '@/services/SmartOps';
 import { history, useLocation, useParams, useRequest } from '@umijs/max';
-import { Button, Col, Row, Table } from 'antd';
+import { Col, Row, Table } from 'antd';
 import dayjs from 'dayjs';
 import { useMemo } from 'react';
 import styles from './OptimizationTasks.less';
@@ -178,27 +178,38 @@ const Cost = ({ projectId }) => {
     ],
   });
   return (
-    <div style={{ marginBottom: 20 }}>
+    <div>
       <h3 className={styles.title}>
         <i style={{ background: '#F5A623' }} />
         成本节约类
-        <Button
-          style={{ float: 'right' }}
-          type="primary"
+        <div
+          className={styles.btn}
           onClick={() => history.push(`/smart/simulate/${projectId}`)}
         >
           模拟评估
-        </Button>
+        </div>
       </h3>
       {data?.length > 0 && (
-        <div className={styles.content} style={{ backgroundColor: '#FBDEAE' }}>
-          <h3 className={styles.left}>任务总结</h3>
-          <div className={styles.desc}>
-            通过能耗/药耗数据模拟仿真预计未来一日可节省
-            <span>{profit || '-'}</span>元
+        <>
+          <div
+            className={styles.content}
+            style={{ backgroundColor: '#FBDEAE' }}
+          >
+            <h3 className={styles.left}>任务总结</h3>
+            <div className={styles.desc}>
+              通过能耗/药耗数据模拟仿真预计未来一日可节省
+              <span>{profit || '-'}</span>元
+            </div>
           </div>
-          <Table columns={columns} dataSource={data} />
-        </div>
+          <div
+            className={styles.content}
+            style={{ backgroundColor: 'rgba(245,166,35,0.04);' }}
+          >
+            <h3 className={styles.left}>任务内容</h3>
+
+            <Table className="table2" columns={columns} dataSource={data} />
+          </div>
+        </>
       )}
       {!data?.length && (
         <div className={styles.content} style={{ backgroundColor: '#FBDEAE' }}>

src/pages/Smart/OptimizationTasks.less

@@ -1,7 +1,8 @@
 .title {
   font-size: 24px;
-  margin-bottom: 20px;
+  margin-bottom: 14px;
   font-weight: bold;
+  line-height: 40px;
   i {
     display: inline-block;
     vertical-align: middle;
@@ -14,6 +15,8 @@
 }
 .desc {
   font-size: 22px;
+  font-weight: 400;
+  color: #4a4a4a;
 }
 
 .content {
@@ -21,10 +24,11 @@
   padding: 20px;
   align-items: center;
   .left {
-    width: 120px;
-    font-size: 22px;
+    width: 90px;
     margin: 0;
     font-size: 18px;
+    font-weight: 400;
+    color: #3b3b3b;
   }
   .right {
     flex: 1;
@@ -52,30 +56,31 @@
   background: rgba(255, 255, 255, 0.6);
 }
 .bottom {
-  border-top: 1px solid #333;
-  padding: 24px;
+  border-top: 1px solid #c0c0c0;
+  padding: 28px;
   height: 100%;
   .bottomText {
-    font-size: 22px;
+    font-size: 18px;
+    font-weight: 400;
+    color: #4a4a4a;
+    line-height: 24px;
     text-align: center;
   }
 }
+.btn {
+  width: 90px;
+  height: 40px;
+  background: rgba(245, 166, 35, 0.75);
+  border-radius: 4px;
+  font-size: 18px;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 40px;
+  text-align: center;
+  float: right;
+}
 :global {
-  .ant-table,
-  .ant-table-cell,
-  .ant-table-placeholder {
-    background: transparent !important;
-  }
-  .ant-table-cell::before {
-    display: none;
-  }
-  .ant-table-thead {
-    background: #cbe0f6;
-  }
-  .ant-table-thead > tr > th,
-  .ant-table-tbody > tr > td {
-    padding: 8px !important;
-    font-size: 22px;
-    vertical-align: middle;
+  .table2 .ant-table-thead {
+    background: rgba(245, 166, 35, 0.14);
   }
 }

src/pages/Smart/components/CircleScore.less

@@ -1,6 +1,6 @@
 .circleScore {
-  width: 160px;
-  height: 160px;
+  width: 174px;
+  height: 174px;
   position: relative;
 }
 
@@ -10,7 +10,7 @@
   border-radius: 50%;
   animation: rotation 4s linear infinite;
   background: linear-gradient(60deg, #36a5ed 0%, #6eee96 100%);
-  mask: radial-gradient(transparent, transparent 66px, #000 67px);
+  mask: radial-gradient(transparent, transparent 75px, #000 77px)
 }
 
 .text {
@@ -18,7 +18,7 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  font-size: 34px;
+  font-size: 44px;
   font-weight: bold;
   // color: #fff;
   text-align: center;

src/pages/Smart/components/SimulateDetail.js

@@ -1,3 +1,4 @@
+import TabsContent from '@/components/TabsContent';
 import {
   queryBackwash,
   queryBackwashList,
@@ -17,7 +18,7 @@ import { useRequest } from '@umijs/max';
 import { DatePicker, Modal, Select, Spin } from 'antd';
 import dayjs from 'dayjs';
 import * as echarts from 'echarts';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import styles from './SimulateDetail.less';
 
 const { RangePicker } = DatePicker;
@@ -86,36 +87,23 @@ const SimulateDetail = (props) => {
     },
   });
 
-  const onLeftClick = () => {
-    document.getElementById('content').scrollLeft -= 150;
-  };
-
-  const onRightClick = () => {
-    document.getElementById('content').scrollLeft += 150;
-  };
-
   return (
     <div>
-      <div className={styles.tabs}>
-        <div className={styles.left} onClick={onLeftClick}></div>
-        <div id="content" className={styles.content}>
-          {data?.map((item) => (
-            <div
-              key={item}
-              className={`${styles.item} ${
-                active == item ? styles.active : ''
-              }`}
-              onClick={() => {
-                setActive(item);
-                setCurrent(null);
-              }}
-            >
-              {TYPE[item]?.name}
-            </div>
-          ))}
-        </div>
-        <div className={styles.right} onClick={onRightClick}></div>
-      </div>
+      {data && (
+        <TabsContent
+          defaultActiveKey={data[0]}
+          items={data.map((item) => ({
+            label: TYPE[item]?.name,
+            key: item,
+            children: <div></div>,
+          }))}
+          onChange={(value) => {
+            setActive(value);
+            setCurrent(null);
+          }}
+        ></TabsContent>
+      )}
+
       <div className={`${styles.box} card-box`}>
         <ChartContent
           active={active}
@@ -155,7 +143,7 @@ const ChartContent = (props) => {
   const domRef = useRef(null);
   const chartRef = useRef(null);
 
-  const { data, run } = useRequest(
+  const { data, run, loading } = useRequest(
     () => {
       let params = {
         device_code: current.device_code,
@@ -178,19 +166,6 @@ const ChartContent = (props) => {
     },
   );
 
-  const optimization = useMemo(() => {
-    const result = data?.list?.filter((item) => item.optimization);
-    if (result?.length > 0) {
-      const lastItem = result[result.length - 1].optimization;
-      const valueList = Object.values(lastItem).map((item) => item.remark);
-      return valueList.join('，');
-    }
-    // if (data?.list?.[0]?.optimization?.peb_interval) {
-    //   return data.list[0].optimization.peb_interval.remark;
-    // }
-    return '';
-  }, [data]);
-
   const searchTime = (type) => {
     setDateActive(type);
     let time = [dayjs().startOf(type), dayjs()];
@@ -257,28 +232,10 @@ const ChartContent = (props) => {
           )}
         </div>
       </div>
-
-      {/* <Spin spinning={loading} wrapperClassName={styles.loadingBox}>
-        {!loading && !data?.list && <Empty style={{ height: 195 }} />}
-      </Spin> */}
-      <div
-        ref={domRef}
-        style={{ height: '100%', display: !data?.list ? 'none' : 'block' }}
-      />
-      {optimization && (
-        <div
-          style={{
-            fontSize: 22,
-            // color: '#fff',
-            textIndent: 30,
-            padding: '10px 0',
-            flexShrink: 1,
-          }}
-        >
-          优化建议：{optimization}
-        </div>
-      )}
-
+      <Spin spinning={loading}>
+        <div ref={domRef} style={{ height: '30vh' }} />
+      </Spin>
+      <Optimization data={data?.list?.[0]} />
       <MembraneModal
         visible={visible}
         onCancel={() => setVisible(false)}
@@ -663,7 +620,7 @@ const MembraneModal = (props) => {
     <Modal
       forceRender
       title="渗透率图表"
-      visible={visible}
+      open={visible}
       onCancel={onCancel}
       footer={null}
     >
@@ -746,4 +703,21 @@ function getMembraneOption(data = []) {
   return option;
 }
 
+const Optimization = ({ data }) => {
+  if (!data?.optimization) return '';
+  return (
+    <div className={styles.optimization}>
+      <div className={styles.title1}>
+        {dayjs(data.c_time).format('YYYY-MM-DD HH:mm')}
+      </div>
+      <div className={styles.title2}>调整内容</div>
+      {Object.entries(data.optimization).map(([key, item]) => (
+        <div className={styles.content}>
+          {key}:{item.remark}
+        </div>
+      ))}
+    </div>
+  );
+};
+
 export default SimulateDetail;

src/pages/Smart/components/SimulateDetail.less

@@ -1,6 +1,6 @@
 .box {
   display: flex;
-  height: 54.2vh;
+  min-height: 54.2vh;
 }
 
 .title {
@@ -57,7 +57,6 @@
     border: 1px solid #02a7f0;
     border-left: none;
     font-size: 20px;
-    // color: #fff;
     cursor: pointer;
     max-height: 40px;
     width: 100%;
@@ -97,30 +96,73 @@
 .chartBox {
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
+  padding: 20px;
+  :global {
+    .ant-select-selection-item {
+      line-height: 42px !important;
+      font-size: 22px !important;
+    }
+    .ant-select-selector {
+      height: 44px !important;
+    }
+  }
 }
 
 .chartBoxTop {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 20px;
+  margin-bottom: 20px;
 }
 
 .dateTabs {
   display: flex;
-  border: 1px solid #999;
+  border: 1px solid #d5d5d5;
   border-radius: 5px;
+  height: 44px;
   .dateTabsItem {
-    padding: 14px 0;
-    width: 140px;
+    width: 94px;
     text-align: center;
-    font-size: 22px;
     cursor: pointer;
+    border-right: 1px solid #d5d5d5;
+    line-height: 44px;
+    font-size: 18px;
+    font-weight: 400;
+    color: #4a4a4a;
+    &:last-child {
+      border-right: none;
+    }
     &.active {
       background: #4a90e2;
       color: #fff;
     }
   }
 }
+.optimization {
+  background-color: rgba(245, 166, 35, 0.08);
+  padding: 16px 24px;
+  margin-top: 20px;
+  .title1 {
+    font-size: 20px;
+    font-weight: 400;
+    color: #4a4a4a;
+    line-height: 28px;
+    margin-bottom: 15px;
+  }
+  .title2 {
+    padding: 4px 15px;
+    background: rgba(245, 166, 35, 0.35);
+    font-size: 20px;
+    font-weight: 400;
+    color: #4a4a4a;
+    line-height: 28px;
+    margin-bottom: 10px;
+  }
+  .content {
+    font-size: 20px;
+    font-weight: 400;
+    color: #4a4a4a;
+    line-height: 34px;
+    padding-left: 15px;
+  }
+}

src/pages/Smart/components/SimulatePie.js

@@ -46,9 +46,9 @@ const SimulatePie = (props) => {
 
   return (
     <div className="card-box" style={{ padding: 20, marginTop: 20 }}>
-      <h2 style={{ textAlign: 'center', fontSize: 24 }}>
+      <h2 style={{ textAlign: 'center', fontSize: 22, color: '#4A4A4A' }}>
         通过模拟仿真预计未来一日可省 &nbsp;
-        <span style={{ fontSize: 28, color: '#F5A623' }}>{getProfit()}元</span>
+        <span style={{ color: '#F5A623' }}>{getProfit()}元</span>
       </h2>
       <div ref={domRef} style={{ height: '25vh' }}></div>
     </div>
@@ -79,7 +79,19 @@ function getOption(data) {
     }
   });
   let option = {
-    color: ['#30EDFD', '#FFC800'],
+    color: [
+      '#4B9FEC',
+      '#F5A623',
+      '#91cc75',
+      '#5470c6',
+      '#fac858',
+      '#ee6666',
+      '#73c0de',
+      '#3ba272',
+      '#fc8452',
+      '#9a60b4',
+      '#ea7ccc',
+    ],
     tooltip: {
       trigger: 'item',
     },

src/pages/Smart/index.js

@@ -16,8 +16,6 @@ const Work = (props) => {
     initialData: {},
   });
 
-  console.log(data);
-
   return (
     <PageContent>
       <PageTitle>水厂工况</PageTitle>
@@ -31,7 +29,7 @@ const Work = (props) => {
           <div className={styles.time}>{data?.clac_time}</div>
           {data?.score && (
             <Button
-              style={{ marginRight: 20 }}
+              style={{ marginRight: 20, height: 50 }}
               type="primary"
               onClick={() =>
                 history.push(
@@ -44,7 +42,7 @@ const Work = (props) => {
           )}
 
           <Button
-            style={{ marginRight: 20 }}
+            style={{ height: 50 }}
             type="primary"
             onClick={() =>
               history.push('/smart/condition-detection/' + projectId)
@@ -118,6 +116,7 @@ const Work = (props) => {
             <h3>
               成本数据
               <div
+                style={{ marginLeft: 14 }}
                 onClick={() => setOpen(!open)}
                 className={`password-eye ${open ? 'open' : ''}`}
               ></div>

src/pages/Smart/index.less

@@ -11,13 +11,19 @@
   margin-left: 30px;
 
   h3 {
-    font-size: 24px;
-    margin-bottom: 14px;
+    font-size: 22px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: #4a4a4a;
+    line-height: 30px;
+    margin-bottom: 6px;
   }
 
   .time {
-    margin-bottom: 14px;
-    color: #666;
+    margin-bottom: 12px;
+    font-size: 18px;
+    font-weight: 400;
+    color: #6e6e6e;
+    line-height: 24px;
   }
 }
 
@@ -25,15 +31,17 @@
   border-radius: 8px;
   box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.3);
   padding: 20px;
-  padding-left: 30px;
+  padding-top: 10px;
   border: 1px solid #eee;
   margin: 10px 0;
   background: rgba(255, 255, 255, 0.6);
 
   h3 {
-    // color: #fff;
-    font-size: 24px;
-    margin-bottom: 20px;
+    font-size: 20px;
+    color: #4a4a4a;
+    line-height: 28px;
+    margin-bottom: 14px;
+    font-weight: bold;
   }
 
   ul {
@@ -41,9 +49,11 @@
     padding: 0;
 
     li {
-      font-size: 20px;
       margin-bottom: 16px;
-
+      font-size: 18px;
+      font-weight: 400;
+      color: #4a4a4a;
+      line-height: 24px;
       &:last-child {
         margin-bottom: 0;
       }
@@ -54,7 +64,7 @@
     display: inline-block;
     width: 10px;
     height: 10px;
-    background-color: #30edfd;
+    background-color: #4a90e2;
     border-radius: 50%;
     margin-right: 8px;
   }