首页以及工况样式修改

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/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/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/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;
   }