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

src/components/PageContent/index.js

@@ -1,32 +1,14 @@
-import { CloseOutlined, LeftOutlined } from '@ant-design/icons';
+import { CloseOutlined } from '@ant-design/icons';
 import styles from './index.less';
 
 export default (props) => {
-  const {
-    title,
-    children,
-    center,
-    style,
-    closeable = true,
-    returnable = false,
-  } = props;
+  const { children, style, closeable = true } = props;
 
   return (
     <div className={styles.page} style={style}>
-      <div className={styles.pageTitle}>
-        <div>
-          {returnable ? <LeftOutlined /> : <span className={styles.titleBar} />}
-
-          <span
-            className={styles.title}
-            style={{ fontSize: 22, paddingLeft: 12 }}
-          >
-            {title}
-          </span>
-        </div>
-        <div className={styles.center}>{center}</div>
-        <div>{closeable && <CloseOutlined style={{ fontSize: 24 }} />}</div>
-      </div>
+      {closeable && (
+          <CloseOutlined className={styles.close} />
+      )}
 
       {children}
     </div>

src/components/PageContent/index.less

@@ -2,30 +2,13 @@
   background-color: #a0bcda54;
   padding: 20px;
   min-height: 100vh;
+  position: relative;
 
-  .pageTitle {
-    display: flex;
-    padding: 0 10px;
-    margin-bottom: 10px;
-    height: 40px;
-    align-items: center;
-    position: relative;
-    justify-content: space-between;
-  }
-  .titleBar {
-    width: 8px;
-    height: 30px;
-    background-color: #366cda;
-    float: left;
-  }
-  .title {
-    font-size: 22px;
-    padding-left: 12px;
-  }
-  .center {
+  .close {
     position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
+    top: 20px;
+    right: 20px;
+    font-size: 24px;
+    cursor: pointer;
   }
 }

src/components/PageTitle/index.js

@@ -0,0 +1,21 @@
+import { LeftOutlined } from '@ant-design/icons';
+import { history } from '@umijs/max';
+import styles from './index.less';
+
+export default (props) => {
+  const { children, returnable = false } = props;
+
+  return (
+    <div className={styles.titleBox}>
+      {returnable ? (
+        <LeftOutlined style={{ fontSize: 22 }} onClick={() => history.back()} />
+      ) : (
+        <span className={styles.titleBar} />
+      )}
+
+      <span className={styles.title} style={{ fontSize: 22, paddingLeft: 12 }}>
+        {children}
+      </span>
+    </div>
+  );
+};

src/components/PageTitle/index.less

@@ -0,0 +1,14 @@
+.titleBox {
+  display: flex;
+  align-items: center;
+}
+.titleBar {
+  width: 8px;
+  height: 30px;
+  background-color: #366cda;
+  float: left;
+}
+.title {
+  font-size: 22px;
+  padding-left: 12px;
+}

src/pages/Smart/OptimizationTasks.js

@@ -1,9 +1,11 @@
 // 优化任务
+import PageContent from '@/components/PageContent';
+import PageTitle from '@/components/PageTitle';
 import {
   queryMandate,
   queryMandateChildList,
   querySimulationProfit,
-  queryUserList
+  queryUserList,
 } from '@/services/SmartOps';
 import { history, useLocation, useParams, useRequest } from '@umijs/max';
 import { Button, Col, Row, Table } from 'antd';
@@ -32,14 +34,8 @@ const OptimizationTasks = (props) => {
   const status = { 0: '未处理', 2: '已完成', 4: '已忽略', 5: '已派遣' };
 
   return (
-    <div>
-      <Button
-        type="primary"
-        style={{ marginBottom: 20 }}
-        onClick={() => history.go(-1)}
-      >
-        返回
-      </Button>
+    <PageContent closeable={false}>
+      <PageTitle returnable>优化任务</PageTitle>
       <Produce
         projectId={projectId}
         score={score}
@@ -73,7 +69,7 @@ const OptimizationTasks = (props) => {
           </Row>
         </div>
       )}
-    </div>
+    </PageContent>
   );
 };
 
@@ -106,10 +102,11 @@ const Produce = ({ projectId, queryMandate }) => {
   });
 
   return (
-    <Panel
-      title="生产调度类"
-      style={{ marginBottom: 20, overflow: 'hidden', position: 'relative' }}
-    >
+    <div style={{ marginBottom: 20, overflow: 'hidden', position: 'relative' }}>
+      <h3 className={styles.title}>
+        <i />
+        生产调度类
+      </h3>
       {data?.length > 0 && (
         <>
           <div
@@ -120,7 +117,6 @@ const Produce = ({ projectId, queryMandate }) => {
               top: 30,
               right: -55,
               textAlign: 'center',
-              // color: '#fff',
               fontSize: 18,
               transform: 'rotate(45deg)',
               padding: '4px 0',
@@ -136,14 +132,14 @@ const Produce = ({ projectId, queryMandate }) => {
         </>
       )}
       {!data?.length && (
-        <>
-          <h3 className={styles.title}>任务总结</h3>
+        <div className={styles.content}>
+          <h3 className={styles.left}>任务总结</h3>
           <div className={styles.desc}>
             当前进水数据稳定，产水数据稳定，暂无需调节任务，继续保持哦~
           </div>
-        </>
+        </div>
       )}
-    </Panel>
+    </div>
   );
 };
 

src/pages/Smart/OptimizationTasks.less

@@ -1,15 +1,12 @@
 .title {
-  color: #eee;
   font-size: 24px;
   margin-bottom: 10px;
 }
 .desc {
-  color: #eee;
   font-size: 22px;
   margin-bottom: 20px;
 }
 .detail {
-  color: #eee;
   font-size: 20px;
   margin-bottom: 10px;
 }

src/pages/Smart/components/CircleScore.less

@@ -8,9 +8,9 @@
   width: 100%;
   height: 100%;
   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 66px, #000 67px);
 }
 
 .text {
@@ -23,3 +23,12 @@
   // color: #fff;
   text-align: center;
 }
+
+@keyframes rotation {
+  from {
+    transform: rotate(0deg); /* 起始旋转角度 */
+  }
+  to {
+    transform: rotate(360deg); /* 结束旋转角度 */
+  }
+}

src/pages/Smart/index.js

@@ -1,3 +1,5 @@
+import PageContent from '@/components/PageContent';
+import PageTitle from '@/components/PageTitle';
 import { queryConditionSnapshot } from '@/services/SmartOps';
 import { history, useParams, useRequest } from '@umijs/max';
 import { Button, Col, Row } from 'antd';
@@ -14,17 +16,17 @@ const Work = (props) => {
     initialData: {},
   });
 
-  console.log(data)
+  console.log(data);
 
   return (
-    <div>
+    <PageContent>
+      <PageTitle>水厂工况</PageTitle>
       <div className={styles.score}>
         <CircleScore>
           {data?.score}
           <div style={{ fontSize: 18 }}>{data?.grade}</div>
         </CircleScore>
         <div className={styles.scoreRight}>
-          {/* <h3>新水岛当前运行良好，可继续优化</h3> */}
           <h3>当前运行{data?.grade}，可继续优化</h3>
           <div className={styles.time}>{data?.clac_time}</div>
           {data?.score && (
@@ -50,14 +52,6 @@ const Work = (props) => {
           >
             工况检测
           </Button>
-          {/* <Button
-            type="primary"
-            onClick={() =>
-              history.push(`/smart/params/${projectId}`)
-            }
-          >
-            工况模拟
-          </Button> */}
         </div>
       </div>
       <Row gutter={16}>
@@ -119,55 +113,55 @@ const Work = (props) => {
             </ul>
           </div>
         </Col>
-      </Row>
-      <Row gutter={16}>
         <Col span={12}>
           <div className={styles.card2}>
-            <h3>能耗数据</h3>
+            <h3>
+              成本数据
+              <div
+                onClick={() => setOpen(!open)}
+                className={`password-eye ${open ? 'open' : ''}`}
+              ></div>
+            </h3>
             <ul>
               <li>
-                <i></i>吨水电耗：{data?.elec_unit}
+                <i></i>吨水药成本：{open ? data?.otc_cost_unit : '*******'}
               </li>
               <li>
-                <i></i>用电量：{data?.elec}
+                <i></i>吨水电成本：{open ? data?.elec_cost_unit : '*******'}
               </li>
             </ul>
           </div>
         </Col>
+      </Row>
+      <Row gutter={16}>
         <Col span={12}>
           <div className={styles.card2}>
-            <h3>药耗数据</h3>
+            <h3>能耗数据</h3>
             <ul>
               <li>
-                <i></i>吨水药耗：{data?.otc_unit}
+                <i></i>吨水电耗：{data?.elec_unit}
               </li>
               <li>
-                <i></i>药量：{data?.otc}
+                <i></i>用电量：{data?.elec}
               </li>
             </ul>
           </div>
         </Col>
         <Col span={12}>
           <div className={styles.card2}>
-            <h3>
-              成本数据
-              <div
-                onClick={() => setOpen(!open)}
-                className={`eye ${open ? 'open' : ''}`}
-              ></div>
-            </h3>
+            <h3>药耗数据</h3>
             <ul>
               <li>
-                <i></i>吨水药成本：{open ? data?.otc_cost_unit : '*******'}
+                <i></i>吨水药耗：{data?.otc_unit}
               </li>
               <li>
-                <i></i>吨水电成本：{open ? data?.elec_cost_unit : '*******'}
+                <i></i>药量：{data?.otc}
               </li>
             </ul>
           </div>
         </Col>
       </Row>
-    </div>
+    </PageContent>
   );
 };
 

src/pages/Smart/index.less

@@ -11,27 +11,24 @@
   margin-left: 30px;
 
   h3 {
-    // color: #fff;
     font-size: 24px;
     margin-bottom: 14px;
   }
 
   .time {
     margin-bottom: 14px;
-    color: #e2dbdb;
+    color: #666;
   }
 }
 
 .card {
-  // color: #fff;
   border-radius: 8px;
-  // box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.8);
+  box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.3);
   padding: 20px;
   padding-left: 30px;
-  // border: 1px solid #575757;
+  border: 1px solid #eee;
   margin: 10px 0;
-  // background: url('@/assets/newUI/tabsBg.png') no-repeat center;
-  background-size: 100% 100%;
+  background: rgba(255, 255, 255, 0.6);
 
   h3 {
     // color: #fff;