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

src/pages/Home/index.js

@@ -20,8 +20,8 @@ const HomePage = (props) => {
   // }, []);
   return (
     <div className={styles.content}>
+      <CenterContent data={data} />
       <LeftContent data={data} />
-      <CenterContent />
       <RightContent data={data} />
     </div>
   );
@@ -31,18 +31,22 @@ const LeftContent = (props) => {
   const { data } = props;
   return (
     <div className={styles.left}>
-      <SmartWork data={data} />
+      {/* <SmartWork data={data} /> */}
       <WaterAmt data={data} />
       <WaterQuality data={data} />
+      <Backlog />
       {/* <Backlog /> */}
     </div>
   );
 };
-const CenterContent = () => {
+const CenterContent = (props) => {
+  const { data } = props;
   return (
     <div className={styles.centerBox}>
-      <Backlog />
-      <Scada />
+      <SmartWork data={data} />
+      <SelfInspection />
+      {/* <Backlog />
+      <Scada /> */}
     </div>
   );
 };
@@ -50,9 +54,10 @@ const RightContent = (props) => {
   const { data } = props;
   return (
     <div className={styles.right}>
-      <SelfInspection />
+      {/* <SelfInspection /> */}
       <Electric data={data} />
       <Medicine />
+      <Scada />
       {/* <Scada /> */}
     </div>
   );
@@ -62,11 +67,11 @@ const RightContent = (props) => {
 const SmartWork = (props) => {
   const { data } = props;
   return (
-    <Box
-      small={true}
-      title="水厂工况"
+    <div
+      className={styles.smartWork}
       onClick={() => UnityAction.sendMsg('menuItem', '工况管理')}
     >
+      <Title title="水厂工况" />
       <div className={styles.scoreBox}>
         <div className={styles.circle}>
           <div className={styles.score}>{data?.score}</div>
@@ -80,7 +85,7 @@ const SmartWork = (props) => {
       <div className={styles.time}>
         {dayjs(data?.clac_time).format('YYYY-MM-DD HH:mm')}
       </div>
-    </Box>
+    </div>
   );
 };
 
@@ -89,10 +94,11 @@ const WaterAmt = (props) => {
   const { data } = props;
   const { projectId } = useParams();
   return (
-    <Box
-      title="水量监测"
+    <div
+      className={styles.waterAmt}
       onClick={() => UnityAction.sendMsg('menuItem', '水量监测')}
     >
+      <Title title="水量监测" />
       <ul>
         <li>
           <div className={styles.value}>{data?.fwa}</div>
@@ -103,7 +109,7 @@ const WaterAmt = (props) => {
           <div className={styles.btn2}>产水量</div>
         </li>
       </ul>
-    </Box>
+    </div>
   );
 };
 
@@ -112,21 +118,22 @@ const WaterQuality = (props) => {
   const { data } = props;
   const { projectId } = useParams();
   return (
-    <Box
-      title="水质监测"
+    <div
+      className={styles.waterQuality}
       onClick={() => UnityAction.sendMsg('menuItem', '水质监测')}
     >
+      <Title title="水质监测" />
       <ul>
         <li>
-          <div className={styles.value}>{data?.dsan || 0}</div>
+          <div className={styles.valueLong}>{data?.dsan || 0}</div>
           <div className={styles.btn1}>出水余氯</div>
         </li>
         <li>
-          <div className={styles.value}>{data?.dtur || 0}</div>
+          <div className={styles.valueLong}>{data?.dtur || 0}</div>
           <div className={styles.btn2}>出水浊度</div>
         </li>
       </ul>
-    </Box>
+    </div>
   );
 };
 
@@ -164,11 +171,11 @@ const SelfInspection = connect(({ eqSelfInspection, loading }) => ({
   }, []);
 
   return (
-    <Box
-      small={true}
-      title="系统自检"
+    <div
+      className={styles.selfInspection}
       onClick={() => UnityAction.sendMsg('menuItem', '系统自检')}
     >
+      <Title title="系统自检" />
       <div className={styles.selfCon}>
         <div className={styles.circle}>{renderStatus()}</div>
         <div className={styles.texting}>自检中</div>
@@ -182,7 +189,7 @@ const SelfInspection = connect(({ eqSelfInspection, loading }) => ({
       <div className={styles.time} style={{ marginBottom: 30 }}>
         {dayjs(autoReport.CreatedTime).format('YYYY-MM-DD HH:mm')}
       </div> */}
-    </Box>
+    </div>
   );
 });
 
@@ -191,17 +198,18 @@ const Electric = (props) => {
   const { data } = props;
   const { projectId } = useParams();
   return (
-    <Box
-      title="能耗监测"
+    <div
+      className={styles.electric}
       onClick={() => UnityAction.sendMsg('menuItem', '能耗监测')}
     >
+      <Title title="能耗监测" />
       <ul>
         <li>
           <div className={styles.value}>{data?.elec}</div>
           <div className={styles.btn1}>用电量</div>
         </li>
       </ul>
-    </Box>
+    </div>
   );
 };
 // 药耗监测
@@ -225,17 +233,20 @@ const Medicine = () => {
   });
 
   return (
-    <Box
-      title="药耗监测"
+    <div
+      className={styles.medicine}
       onClick={() => UnityAction.sendMsg('menuItem', '药耗监测')}
     >
+      <Title title="药耗监测" />
       <ul>
         <li>
-          <div className={styles.value}>{data?.value?.toFixed(2) || '-'}元</div>
+          <div className={styles.valueLong}>
+            {data?.value?.toFixed(2) || '-'}元
+          </div>
           <div className={styles.btn1}>当月吨水药成本</div>
         </li>
       </ul>
-    </Box>
+    </div>
   );
 };
 
@@ -260,21 +271,26 @@ const Scada = () => {
   });
 
   return (
-    <Box
-      title="工艺监控"
+    <div
+      className={styles.scadaMain}
       onClick={() => UnityAction.sendMsg('menuItem', '工艺监控')}
     >
-      <div className={styles.scada} style={{ width: '540px', height: '270px' }}>
+      <Title title="工艺监控" />
+      <div style={{ width: '707px', height: '279px' }}>
         {data?.map((url) => (
           <iframe
             key={url}
-            style={{ width: '540px', height: '270px' }}
+            style={{
+              width: '707px',
+              height: '279px',
+              borderRadius: '0 0 42px 0',
+            }}
             src={url}
           />
         ))}
         <div className={styles.mask}></div>
       </div>
-    </Box>
+    </div>
   );
 };
 
@@ -298,15 +314,12 @@ const Backlog = (props) => {
     }
   };
   return (
-    <Box
-      title={
-        <div style={{ display: 'flex' }}>
-          待办事项
-          {/* <div className={styles.count}>{data?.length || 0}</div> */}
-        </div>
-      }
+    <div
+      className={styles.backlogMain}
       onClick={() => UnityAction.sendMsg('menuItem', '待办事项')}
     >
+      <Title title={<div style={{ display: 'flex' }}>待办事项</div>} />
+
       <div className={styles.backlog}>
         <div>
           {data?.map((item) => (
@@ -331,7 +344,15 @@ const Backlog = (props) => {
           ))}
         </div>
       </div>
-    </Box>
+    </div>
+  );
+};
+const Title = ({ title }) => {
+  return (
+    <div className={styles.titleContent}>
+      <div className={styles.line} />
+      <div className={styles.boxTitle}>{title}</div>
+    </div>
   );
 };
 

src/pages/Home/index.less

@@ -1,15 +1,14 @@
 .content {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  justify-content: right;
+  align-items: flex-end;
   height: 100vh;
   width: 100%;
-  padding-top: 80px;
+  padding-bottom: 40px;
   color: #3b3b3b;
 }
 .left {
   text-align: center;
-  width: 25%;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -19,44 +18,13 @@
   .left;
 }
 .box {
-  width: 610px;
-  padding: 24px;
+  margin: 28px 28px 0 0;
   text-align: left;
   position: relative;
   display: inline-block;
   cursor: pointer;
-  background: url('@/assets/home-box-bg.png') no-repeat center;
-  background-size: 100% 100%;
-
-  // &:last-child {
-  //   margin-bottom: 0;
-  // }
-
-  .titleContent {
-    margin: 20px 38px;
-    display: inline-block;
-    position: relative;
-  }
-
-  .boxTitle {
-    padding: 0 10px;
-    position: relative;
-    // z-index: 99;
-    font-size: 32px;
-    font-weight: 600;
-    color: #0139f1;
-    line-height: 34px;
-    z-index: 1;
-  }
-  .line {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 14px;
-    background: url('@/assets/home-box-line.png') no-repeat center;
-    background-size: 100% 100%;
-    z-index: 0;
-  }
+  border-radius: 40px 0 43px 0;
+  box-shadow: 2px 13px 18px 0 rgba(9, 64, 115, 0.49);
   > ul {
     display: flex;
     justify-content: center;
@@ -65,40 +33,124 @@
       width: 50%;
     }
   }
-  .name {
-    font-size: 22px;
-    font-weight: 400;
-    color: #ffffff;
-    line-height: 28px;
-    text-align: center;
-    margin-top: 18px;
-  }
-  .value {
-    margin: 60px 0;
-    font-size: 40px;
-    font-weight: 600;
-    color: #3b3b3b;
-    line-height: 50px;
-    text-align: center;
-    letter-spacing: 4px;
-    font-family: PangMenZhengDao-3, PangMenZhengDao-3;
-  }
 }
-.boxH {
+.smartWork {
   .box;
-  height: 420px;
+  width: 604px;
+  height: 357px;
+  background: url('@/assets/home/bg5.png') no-repeat center;
+  background-size: 100% 100%;
 }
-.scada {
-  margin-bottom: 20px;
+
+.selfInspection {
+  .box;
+  width: 403px;
+  height: 357px;
+  background: url('@/assets/home/bg6.png') no-repeat center;
+  background-size: 100% 100%;
+}
+
+.waterAmt {
+  .box;
+  width: 604px;
+  height: 340px;
+  background: url('@/assets/home/bg1.png') no-repeat center;
+  background-size: 100% 100%;
+}
+.waterQuality {
+  .box;
+  width: 604px;
+  height: 399px;
+  background: url('@/assets/home/bg2.png') no-repeat center;
+  background-size: 100% 100%;
+}
+.backlogMain {
+  .box;
+  width: 604px;
+  height: 357px;
+  background: url('@/assets/home/bg7.png') no-repeat center;
+  background-size: 100% 100%;
+}
+.electric {
+  .box;
+  width: 707px;
+  height: 335px;
+  background: url('@/assets/home/bg3.png') no-repeat center;
+  background-size: 100% 100%;
+}
+.medicine {
+  .box;
+  width: 707px;
+  height: 399px;
+  background: url('@/assets/home/bg4.png') no-repeat center;
+  background-size: 100% 100%;
+}
+.scadaMain {
+  .box;
+  width: 707px;
+  height: 357px;
+  background: url('@/assets/home/bg8.png') no-repeat center;
+  background-size: 100% 100%;
+}
+
+.titleContent {
+  margin: 20px 36px;
+  display: inline-block;
+  position: relative;
+}
+
+.boxTitle {
   padding: 0 10px;
   position: relative;
-  .mask {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
+  // z-index: 99;
+  font-size: 32px;
+  font-weight: 600;
+  color: #0139f1;
+  line-height: 34px;
+  z-index: 1;
+}
+.line {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 14px;
+  background: url('@/assets/home-box-line.png') no-repeat center;
+  background-size: 100% 100%;
+  z-index: 0;
+}
+
+.name {
+  font-size: 22px;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 28px;
+  text-align: center;
+  margin-top: 18px;
+}
+.value {
+  margin: 50px 0;
+  font-size: 40px;
+  font-weight: 600;
+  color: #3b3b3b;
+  line-height: 50px;
+  text-align: center;
+  letter-spacing: 4px;
+  font-family: PangMenZhengDao-3, PangMenZhengDao-3;
+}
+.valueLong {
+  .value;
+  margin: 80px 0;
+}
+.boxH {
+  .box;
+  height: 420px;
+}
+.mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 .scadaContent {
   padding: 20px;
@@ -115,6 +167,7 @@
 }
 
 .scoreBox {
+  margin-top: 10px;
   display: flex;
   justify-content: space-around;
   .score {
@@ -150,9 +203,10 @@
 
 .time {
   font-size: 22px;
-  margin-bottom: 20px;
   text-align: right;
-  margin-right: 30px;
+  position: absolute;
+  right: 49px;
+  bottom: 14px;
 }
 .insTag {
   position: absolute;
@@ -180,7 +234,6 @@
   margin-bottom: 22px;
 }
 .centerBox {
-  width: 50%;
   display: flex;
   justify-content: space-around;
   height: calc(100vh - 80px);
@@ -216,12 +269,14 @@
   .titleText {
     font-size: 24px;
     margin: 0 20px;
+    font-family: Source Han Sans, Source Han Sans;
   }
   .bottomCon {
     margin-left: 24px;
     font-size: 20px;
     line-height: 36px;
     word-wrap: break-word;
+    font-family: Source Han Sans, Source Han Sans;
   }
 }
 .count {
@@ -247,6 +302,7 @@
   background-color: #1d83ff;
 }
 .selfCon {
+  margin-top: 10px;
   display: flex;
   justify-content: space-around;
   align-items: center;
@@ -266,7 +322,7 @@
     font-weight: 500;
   }
   .texting {
-    width: 200px;
+    width: 128px;
     font-size: 40px;
     margin-top: 20px;
     font-family: Source Han Sans, Source Han Sans;

src/pages/Menu/index.js

@@ -64,13 +64,16 @@ function Menu() {
   return (
     <div className={styles.main}>
       <div className={styles.menu}>
-        {menuList.map((item) => (
+        {menuList.map((item, idx) => (
           <div
             key={item.name}
             className={styles.text}
             onClick={() => handleClick(item)}
           >
-            <img className={styles.icon} src={item.icon} />
+            <img
+              className={idx ? styles.iconHome : styles.icon}
+              src={item.icon}
+            />
             {item.name}
           </div>
         ))}

src/pages/Menu/index.less

@@ -12,8 +12,9 @@
   box-shadow: 0.03rem 0.49rem 1rem 0rem rgba(60, 93, 133, 0.72);
 }
 .menu {
+  margin-top: 0.2rem;
   width: 100%;
-  height: calc(100vh - 1.6rem);
+  // height: calc(100vh - 1.6rem);
   display: flex;
   flex-direction: column;
   overflow-y: auto;
@@ -36,8 +37,9 @@
   height: 0.7rem;
   display: block;
 }
-icon:first-child {
-  margin-top: 0;
+.iconHome {
+  .icon;
+  margin: 0.24rem auto 0.1rem;
 }
 .arrowCon {
   width: 100%;

src/pages/Projects/index.js

@@ -14,6 +14,8 @@ const Projects = () => {
       // return res?.data?.list?.filter((item) => item?.Stage == 3);
       var list = [];
       res.data.forEach((item) => {
+        // 使用水厂名替代项目名
+        item.List.forEach(item => item.Name = item.WaterName)
         list = list.concat(item.List);
       });
       return list;

src/pages/Smart/index.js

@@ -5,7 +5,6 @@ import { history, useParams, useRequest } from '@umijs/max';
 import { Button, Col, Row } from 'antd';
 import dayjs from 'dayjs';
 import { useState } from 'react';
-import CircleScore from './components/CircleScore';
 import styles from './index.less';
 
 const Work = (props) => {
@@ -22,10 +21,12 @@ const Work = (props) => {
       <PageTitle>水厂工况</PageTitle>
       {/* <div className="content-title"> */}
       <div className={styles.score}>
-        <CircleScore big>
+        {/* <CircleScore big> */}
+        <div className={styles.circle}>
           {data?.score?.toFixed(2)}
           <div style={{ fontSize: '0.24rem' }}>{data?.grade}</div>
-        </CircleScore>
+        </div>
+        {/* </CircleScore> */}
         <div className={styles.scoreRight}>
           <h3>当前运行{data?.grade}，可继续优化</h3>
           <div className={styles.time}>
@@ -57,7 +58,7 @@ const Work = (props) => {
           </Button>
         </div>
       </div>
-      <Row gutter={10}>
+      <Row gutter={30}>
         <Col span={12}>
           <div className={styles.card}>
             <h3>进水数据</h3>

src/pages/Smart/index.less

@@ -29,11 +29,23 @@
     font-size: 0.22rem;
   }
 }
+.circle {
+  width: 1.94rem;
+  height: 1.94rem;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background: url('@/assets/home-circle.png') no-repeat center;
+  background-size: 100% 100%;
+  font-size: 0.34rem;
+  font-weight: bold;
+}
 
 .card {
   border-radius: 0.08rem;
   box-shadow: 0rem 0rem 0.08rem 0.02rem rgba(191, 191, 191, 0.2);
-  padding: 0.3rem ;
+  padding: 0.3rem;
   border: 0.01rem solid #eee;
   background: rgb(255, 255, 255);
   margin-bottom: 0.4rem;