1. 监控列表样式改动

2. 全局样式改动paddingRight
3. 增加评估报告组件

src/components/PageContent/index.less

@@ -1,7 +1,7 @@
 .page {
   // background: #fff;
   padding: 0.2rem 0.5rem;
-  padding-right: 0;
+  // padding-right: 0;
   min-height: 100vh;
   position: relative;
 

src/components/PageTitle/index.less

@@ -4,7 +4,7 @@
   display: flex;
   align-items: center;
   padding-bottom: 0.2rem;
-  border-bottom: 1px solid rgba(188, 186, 186, 1);
+  // border-bottom: 1px solid rgba(188, 186, 186, 1);
 }
 .subPage {
   border-bottom: 0 none;

src/global.less

@@ -324,7 +324,7 @@ input[type='reset'] {
 .ant-table-wrapper .ant-table-thead > tr > th,
 .ant-table-wrapper .ant-table-tbody > tr > td {
   border-radius: 0;
-  padding: 0.12rem 0.18rem;
+  padding: 0.16rem 0.18rem;
   font-size: 0.28rem;
   color: rgba(97, 93, 93, 1);
   line-height: 0.32rem;

src/pages/Home/WaterAmtMng.js

@@ -4,6 +4,7 @@ import ChartModule from '@/components/ManagementPage/chartModule';
 import PageContent from '@/components/PageContent';
 import PageTitle from '@/components/PageTitle';
 import { queryChartListByCode } from '@/services/OperationManagement';
+import { queryConditionSnapshot } from '@/services/SmartOps';
 import { UnityAction } from '@/utils/utils';
 import { useParams, useRequest } from '@umijs/max';
 import { Button, DatePicker, Spin, Table } from 'antd';
@@ -14,11 +15,39 @@ import styles from './index.less';
 const { RangePicker } = DatePicker;
 
 const WaterAmtMng = () => {
+  const { projectId } = useParams();
+
+  const { data } = useRequest(queryConditionSnapshot, {
+    defaultParams: [{ project_id: projectId }],
+    pollingInterval: 10 * 1000,
+  });
+
+  const status = useMemo(() => {
+    switch (data?.dwa_status) {
+      case 1:
+        return '当前处于外供水高峰期';
+      case 2:
+        return '当前处于外供水平时期';
+      case 3:
+        return '当前处于外供水低峰期';
+    }
+  }, [data?.dwa_status]);
   return (
     <PageContent closeable={false}>
       <PageTitle onReturn={() => UnityAction.sendMsg('menuItem', '首页')}>
         水量监测
       </PageTitle>
+      <div className={styles.pageTip}>{status}</div>
+      <ul className={styles.pageTop}>
+        <li>
+          <div className={styles.pageTopValue}>{getValue(data?.fwa)}</div>
+          <div>进水量(m³/h)</div>
+        </li>
+        <li>
+          <div className={styles.pageTopValue}>{getValue(data?.dwa)}</div>
+          <div>产水量(m³/h)</div>
+        </li>
+      </ul>
       <WaterAmt />
     </PageContent>
   );
@@ -26,6 +55,11 @@ const WaterAmtMng = () => {
 
 export default WaterAmtMng;
 
+const getValue = (str) => {
+  const result = str?.match(/.*?(\d+(?:\.\d+)?)\D*$/);
+  if (result && result[1]) return result[1];
+  return 0;
+};
 export const WaterAmt = () => {
   const { projectId } = useParams();
 

src/pages/Home/index.less

@@ -382,3 +382,26 @@
     }
   }
 }
+.pageTip {
+  position: absolute;
+  top: 0.3rem;
+  right: 0.5rem;
+  font-size: 0.24rem;
+}
+.pageTop {
+  display: flex;
+  padding-top: 0.4rem;
+  padding-bottom: 0.4rem;
+  margin-bottom: 0.4rem;
+  border-bottom: 1px solid #e8e8e8;
+  li {
+    width: 50%;
+    text-align: center;
+    font-size: 0.22rem;
+    .pageTopValue {
+      color: #f5a623;
+      font-size: 0.48rem;
+      margin-bottom: 0.1rem;
+    }
+  }
+}

src/pages/SafetyManagement/index.less

@@ -55,8 +55,8 @@
     position: absolute;
     top: 0.2rem;
     right: 0.2rem;
-    width: 0.5rem;
-    height: 0.5rem;
+    width: 0.34rem;
+    height: 0.34rem;
     background: url('@/assets/deviceManager/redLight.png') no-repeat;
     background-size: 100% 100%;
   }

src/pages/Smart/OptimizationTasks.js

@@ -1,7 +1,6 @@
 // 优化任务
 import PageContent from '@/components/PageContent';
 import PageTitle from '@/components/PageTitle';
-import ScrollLoading from './components/ScrollLoading';
 import {
   queryHistory,
   queryMandateChildList,
@@ -13,6 +12,8 @@ import { Table } from 'antd';
 import dayjs from 'dayjs';
 import { useState } from 'react';
 import styles from './OptimizationTasks.less';
+import EvaluationReport from './components/EvaluationReport';
+import ScrollLoading from './components/ScrollLoading';
 
 const OptimizationTasks = (props) => {
   const { projectId } = useParams();
@@ -29,6 +30,18 @@ const OptimizationTasks = (props) => {
         <div>
           <Produce projectId={projectId} />
           <Cost projectId={projectId} />
+          <div className={styles.pageCard}>
+            <h3
+              className={styles.title}
+              style={{ justifyContent: 'space-between' }}
+            >
+              <div>
+                <i />
+                评估报告
+              </div>
+            </h3>
+            <EvaluationReport dataKey="allProject" />
+          </div>
         </div>
       </div>
     </PageContent>

src/pages/Smart/components/EvaluationReport.js

@@ -0,0 +1,154 @@
+import {  Table, Tooltip } from 'antd';
+import { useMemo } from 'react';
+import { current, indicators } from './mock';
+// import styles from './WorkConditionAssessment.less';
+
+/**
+ * 评估报告组件
+ * @param {boolean} isAbnormal - 是否存在异常情况
+ * @param {object} compareData - 同比环比数据
+ * @param {number} compareData.lastPeriod - 上期同比数据（百分比）
+ * @param {number} compareData.lastYear - 去年同期同比数据（百分比）
+ * @param {string} optimizationSuggestions - 优化建议
+ */
+const EvaluationReport = (props) => {
+  const { dataKey } = props;
+
+  const dataSource = useMemo(() => {
+    let data = current[dataKey];
+    let dataSource = indicators[dataKey]
+      .filter((item) => item.delta !== false)
+      .map((item) => {
+        let key = item.value;
+        let realTimeData = data['realTimeData'][key];
+        let forecastData = data['forecastData'][key];
+
+        return {
+          indicator: item.label,
+          delta1: (
+            ((forecastData - realTimeData) / forecastData) *
+            100
+          ).toFixed(2),
+        };
+      });
+    let error = { color: '#f5222d' },
+      success = { color: '#7cb305' };
+    if (dataKey == 'allProject') {
+      dataSource.push({
+        indicator: '总结',
+        delta1: (
+          <div>
+            【2023年4月】 <span style={error}>异常</span>
+            <br />
+            (1)生产安全评估: <span style={success}>正常</span>
+            <br />
+            达标率、产水量实时工况与仿真、最优和标准工况对比皆在偏差范围内，正常
+            <br />
+            <br />
+            (2)经济评估：<span style={error}>异常</span>
+            <br />
+            电耗实时工况与仿真工况对比，偏差为1.89，预计比仿真多消耗21269kWh,系统判断预计下一阶段会持续增加
+          </div>
+        ),
+      });
+      dataSource.push({
+        indicator: '优化建议',
+        delta1: <div>根据上述结论，为减少电耗，建议检查膜车间工艺段</div>,
+      });
+    } else {
+      dataSource.push({
+        indicator: '总结',
+        delta1: (
+          <div>
+            (1)生产安全评估: <span style={error}>异常</span>
+            <br />
+            膜阻力、TMP实时工况与标准工况对比偏差偏大；与最优工况对比膜阻力有偏离；与预测工况对比，膜阻力、TMP会持续增加
+            <br />
+            <br />
+            (2)经济评估：<span style={success}>正常</span>
+            <br />
+            处理水量此时为正常，系统判断下一阶段随着膜阻力、TMP增加会影响产水量
+          </div>
+        ),
+      });
+      dataSource.push({
+        indicator: '优化建议',
+        delta1: (
+          <div>
+            根据上述结论，为保证产水量，需要增加膜的反冲洗频次和清洗强度。
+          </div>
+        ),
+      });
+    }
+
+    return dataSource;
+  }, []);
+
+  const columns = [
+    {
+      title: '指标',
+      dataIndex: 'indicator',
+      key: 'indicator',
+      width: 200,
+    },
+    {
+      title: (
+        <Tooltip
+          title="(预测 - 实际) / 预测 * 100"
+          // overlayClassName={styles.toolTip}
+        >
+          Δ1
+          {/* <Icon type="info-circle" /> */}
+        </Tooltip>
+      ),
+      dataIndex: 'delta1',
+      key: 'delta1',
+      render: (text, row, index) => {
+        if (index < dataSource.length - 2) {
+          return text;
+        }
+        return {
+          children: text,
+          props: {
+            colSpan: 3,
+          },
+        };
+      },
+    },
+  
+  ];
+  // return null
+  return (
+    <div style={{ fontSize: 18, color: '#fff' }}>
+      <Table
+        columns={columns}
+        dataSource={dataSource}
+        pagination={false}
+        // footer={() => (
+        //   <>
+        //     <Table.Row>
+        //       <Table.Cell>总结</Table.Cell>
+        //       <Table.Cell colSpan={3}>
+        //         【2023年4月】异常 <br />
+        //         (1)生产安全评估:正常
+        //         <br />
+        //         实时工况与仿真、最优和标准工况对比皆在偏差范围内，正常
+        //         <br />
+        //         (2)经济评估：异常
+        //         <br />
+        //         实时工况电耗同比增长/下降 ，环比增长/下降 ； 与仿真、最优和标准工况对比
+        //         实施工况药耗同比增长/下降 ，环比增长/下降 ； 与仿真、最优和标准工况对比
+        //       </Table.Cell>
+        //     </Table.Row>
+        //     <Table.Row>
+        //       <Table.Cell>优化建议</Table.Cell>
+        //       <Table.Cell colSpan={3}>根据评估结果，我们建议检查...工艺段</Table.Cell>
+        //     </Table.Row>
+        //   </>
+        // )}
+      />
+    </div>
+  );
+};
+
+export default EvaluationReport;

src/pages/Smart/components/mock.js

@@ -0,0 +1,167 @@
+export const indicators = {
+  allProject: [
+    { label: '产水量', value: 'waterProduction', max: 20 },
+    { label: '达标率', value: 'complianceRate', max: 100 },
+    { label: '电耗', value: 'electricityConsumption', max: 610000 },
+    { label: '维修保养完成率', value: 'maintenanceCompletionRate', max: 100, delta: false },
+    { label: '设备故障率', value: 'equipmentFailureRate', max: 0, delta: false },
+    { label: '药耗', value: 'chemicalConsumption', max: 40 },
+  ],
+};
+export const MockData = [
+  {
+    time: '1月',
+    allProject: {
+      realTimeData: {
+        complianceRate: 100,
+        waterProduction: 16,
+        electricityConsumption: 606360,
+        chemicalConsumption: 37.51,
+
+        equipmentFailureRate: 0,
+        maintenanceCompletionRate: 100,
+      },
+      forecastData: {
+        complianceRate: 100,
+        waterProduction: 16,
+        electricityConsumption: 595091,
+        chemicalConsumption: 37.44,
+        equipmentFailureRate: 0,
+        maintenanceCompletionRate: 100,
+      },
+      optimalData: {
+        complianceRate: 100,
+        waterProduction: 18,
+        electricityConsumption: 595267,
+        chemicalConsumption: 35.58,
+        equipmentFailureRate: 0,
+        maintenanceCompletionRate: 100,
+      },
+      standardData: {
+        complianceRate: 100,
+        waterProduction: 20,
+        electricityConsumption: 610000,
+        chemicalConsumption: 40,
+        equipmentFailureRate: 0,
+        maintenanceCompletionRate: 100,
+      },
+    },
+  },
+  {
+    time: '2月',
+    allProject: {
+      realTimeData: {
+        complianceRate: 100,
+        waterProduction: 16,
+        electricityConsumption: 617346,
+        chemicalConsumption: 37.51,
+
+        equipmentFailureRate: 0,
+        maintenanceCompletionRate: 100,
+      },
+      forecastData: {
+        complianceRate: 100,
+        waterProduction: 17,
+        electricityConsumption: 605346,
+        chemicalConsumption: 37.44,
+        equipmentFailureRate: 0,
+        maintenanceCompletionRate: 100,
+      },
+      optimalData: {
+        complianceRate: 100,
+        waterProduction: 18,
+        electricityConsumption: 604782,
+        chemicalConsumption: 35.58,
+        equipmentFailureRate: 0,
+        maintenanceCompletionRate: 100,
+      },
+      standardData: {
+        complianceRate: 100,
+        waterProduction: 20,
+        electricityConsumption: 610000,
+        chemicalConsumption: 40,
+        equipmentFailureRate: 0,
+        maintenanceCompletionRate: 100,
+      },
+    },
+  },
+  {
+    time: '3月',
+    allProject: {
+      realTimeData: {
+        complianceRate: 100,
+        waterProduction: 16,
+        electricityConsumption: 605785,
+        chemicalConsumption: 37.69,
+
+        equipmentFailureRate: 0,
+        maintenanceCompletionRate: 100,
+      },
+      forecastData: {
+        complianceRate: 100,
+        waterProduction: 16,
+        electricityConsumption: 604471,
+        chemicalConsumption: 37.72,
+        equipmentFailureRate: 0,
+        maintenanceCompletionRate: 100,
+      },
+      optimalData: {
+        complianceRate: 100,
+        waterProduction: 20,
+        electricityConsumption: 603782,
+        chemicalConsumption: 36.66,
+        equipmentFailureRate: 0,
+        maintenanceCompletionRate: 100,
+      },
+      standardData: {
+        complianceRate: 100,
+        waterProduction: 20,
+        electricityConsumption: 610000,
+        chemicalConsumption: 40,
+        equipmentFailureRate: 0,
+        maintenanceCompletionRate: 100,
+      },
+    },
+  },
+  {
+    time: '4月',
+    allProject: {
+      realTimeData: {
+        complianceRate: 100,
+        waterProduction: 16,
+        electricityConsumption: 606360,
+        chemicalConsumption: 37.51,
+
+        equipmentFailureRate: 0,
+        maintenanceCompletionRate: 100,
+      },
+      forecastData: {
+        complianceRate: 100,
+        waterProduction: 16,
+        electricityConsumption: 595091,
+        chemicalConsumption: 37.44,
+        equipmentFailureRate: 0,
+        maintenanceCompletionRate: 100,
+      },
+      optimalData: {
+        complianceRate: 100,
+        waterProduction: 20,
+        electricityConsumption: 595267,
+        chemicalConsumption: 35.58,
+        equipmentFailureRate: 0,
+        maintenanceCompletionRate: 100,
+      },
+      standardData: {
+        complianceRate: 100,
+        waterProduction: 20,
+        electricityConsumption: 610000,
+        chemicalConsumption: 40,
+        equipmentFailureRate: 0,
+        maintenanceCompletionRate: 100,
+      },
+    },
+  },
+];
+
+// 工况评估
+export const current = MockData[3];