修改path

.umirc.ts

@@ -1,7 +1,5 @@
 import { defineConfig } from '@umijs/max';
 
-const publicPath = process.env.NODE_ENV == 'development' ? '/' : '/gt-dig/';
-
 export default defineConfig({
   hash: true,
   antd: {},
@@ -26,7 +24,7 @@ export default defineConfig({
         'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0',
     },
   ],
-  headScripts: [`${publicPath}rem.js`],
+  headScripts: [`/rem.js`],
   proxy: {
     '/api': {
       // target: 'http://47.96.12.136:8888/',

src/pages/SmartReport/index.js

@@ -231,19 +231,63 @@ const SmartReport = () => {
         <Spin spinning={loading}>
           <Box title="概览">
             <div className={styles.content}>
-              <div className={styles.item}>累计进水：{in_water}</div>
-              <div className={styles.item}>累计出水：{out_water}</div>
-              <div className={styles.item}>吨水能耗：{water_electricity}</div>
-              <div className={styles.item}>吨水药耗：{water_medicine}kg/m³</div>
-              <div className={styles.item}>
-                系统自检次数：{self_inspection_task}次
+              <div className={styles.longWhiteBox}>
+                <div className={styles.longWhiteBoxIn}>
+                  累计进水：<span className={styles.value}>{in_water}</span>
+                </div>
               </div>
-              <div className={styles.item}>
-                优化建议： {push_optimize_task}条
+              <div className={styles.longWhiteBox}>
+                <div className={styles.longWhiteBoxIn}>
+                  累计出水：<span className={styles.value}>{out_water}</span>
+                </div>
               </div>
-              <div className={styles.item}>
-                任务完成：{push_complete_task}个
+              <div className={styles.threeContent}>
+                <div className={styles.threeItem}>
+                  <div className={styles.value}>
+                    {water_electricity}
+                    <span className={styles.unit}>kwh</span>
+                  </div>
+                  吨水能耗
+                </div>
+                <div className={styles.threeItem}>
+                  <div className={styles.value}>
+                    {water_medicine}
+                    <span className={styles.unit}>kg/m³</span>
+                  </div>
+                  吨水药耗
+                </div>
+                <div className={styles.threeItem}>
+                  <div className={styles.value}>
+                    {self_inspection_task}
+                    <span className={styles.unit}>次</span>
+                  </div>
+                  系统自检次数
+                </div>
               </div>
+              <div className={styles.longWhiteBox}>
+                <div className={styles.longWhiteBoxIn}>
+                  优化建议：
+                  <span className={styles.value}>
+                    {push_optimize_task}
+                    <span className={styles.unit}>条</span>
+                  </span>
+                </div>
+              </div>
+              <div className={styles.longWhiteBox}>
+                <div className={styles.longWhiteBoxIn}>
+                  任务完成：
+                  <span className={styles.value}>
+                    {push_complete_task}
+                    <span className={styles.unit}>个</span>
+                  </span>
+                </div>
+              </div>
+              {/* <div className={styles.item}>
+                优化建议： {push_optimize_task}条
+              </div> */}
+              {/* <div className={styles.item}>
+                任务完成：{push_complete_task}个
+              </div> */}
               <div className={styles.item}>
                 工单完成：{work_order_complete_task}个
               </div>
@@ -272,64 +316,75 @@ const SmartReport = () => {
             </div>
           </Box>
 
-          <Box title="系统自检">
-            <div className={styles.threeContent}>
-              <div className={styles.numItem}>
-                <div>{self_inspection_task}</div>
-                <div>自检次数</div>
-              </div>
-              <div className={styles.numItem}>
-                <div>{self_inspection_abnormal_task}</div>
-                <div>异常次数</div>
-              </div>
-              <div className={styles.numItem}>
-                <div>{self_inspection_normal_task}</div>
-                <div>正常次数</div>
+          <div className={styles.box}>
+            <div className={styles.main_in}>
+              <div className={styles.titleContent}>系统自检</div>
+
+              <div className={styles.threeContent}>
+                <div className={styles.numItem}>
+                  <div>{self_inspection_task}</div>
+                  <div>自检次数</div>
+                </div>
+                <div className={styles.numItem}>
+                  <div>{self_inspection_abnormal_task}</div>
+                  <div>异常次数</div>
+                </div>
+                <div className={styles.numItem}>
+                  <div>{self_inspection_normal_task}</div>
+                  <div>正常次数</div>
+                </div>
               </div>
+              <div
+                ref={eqDomRef}
+                style={{ height: '340px', margin: '10px 0 10px 0' }}
+              ></div>
+              {/* <div>异常类型统计（设备异常、工艺异常、安全隐患异常）</div> */}
             </div>
-            <div
-              ref={eqDomRef}
-              style={{ height: '340px', margin: '10px 0 10px 0' }}
-            ></div>
-            {/* <div>异常类型统计（设备异常、工艺异常、安全隐患异常）</div> */}
-          </Box>
-          <Box title="智慧运营">
-            <div style={{ padding: '20px 20px 0 20px' }}>
-              <div className={styles.smartText}>
-                优化条数:{push_optimize_task}条
+          </div>
+
+          <div className={styles.box}>
+            <div className={styles.main_in}>
+              <div className={styles.titleContent}>智慧运营</div>
+              <div style={{ padding: '20px 20px 0 20px' }}>
+                <div className={styles.smartText}>
+                  优化条数:{push_optimize_task}条
+                </div>
+                <div className={styles.smartText}>超滤能耗：{ele_65}</div>
+                <div className={styles.smartText}>反渗透能耗：{ele_66}</div>
               </div>
-              <div className={styles.smartText}>超滤能耗：{ele_65}</div>
-              <div className={styles.smartText}>反渗透能耗：{ele_66}</div>
+              <div
+                ref={workScoreDomRef}
+                style={{ height: '340px', margin: '10px 0 10px 0' }}
+              ></div>
             </div>
-            <div
-              ref={workScoreDomRef}
-              style={{ height: '340px', margin: '10px 0 10px 0' }}
-            ></div>
-          </Box>
-          <Box title="任务工单">
-            <div className={styles.content}>
-              <div className={styles.item}>任务数量：{push_task}</div>
-              <div className={styles.item}>工单数量：{work_order_task}</div>
-              <div className={styles.item}>
-                任务完成数量：{push_complete_task}
-              </div>
-              <div className={styles.item}>
-                工单完成数量：{work_order_complete_task}
-              </div>
-              <div className={styles.item}>
-                任务完成率：{Number(push_complete_task_per)}%
-              </div>
-              <div className={styles.item}>
-                工单完成率：{Number(work_order_complete_task_per)}%
-              </div>
-              <div className={styles.item}>
-                <div ref={taskDomRef} style={{ height: '400px' }}></div>
-              </div>
-              <div className={styles.item}>
-                <div ref={workDomRef} style={{ height: '400px' }}></div>
+          </div>
+          <div className={styles.box}>
+            <div className={styles.main_in}>
+              <div className={styles.titleContent}>任务工单</div>
+              <div className={styles.content}>
+                <div className={styles.item}>任务数量：{push_task}</div>
+                <div className={styles.item}>工单数量：{work_order_task}</div>
+                <div className={styles.item}>
+                  任务完成数量：{push_complete_task}
+                </div>
+                <div className={styles.item}>
+                  工单完成数量：{work_order_complete_task}
+                </div>
+                <div className={styles.item}>
+                  任务完成率：{Number(push_complete_task_per)}%
+                </div>
+                <div className={styles.item}>
+                  工单完成率：{Number(work_order_complete_task_per)}%
+                </div>
+                <div className={styles.item}>
+                  <div ref={taskDomRef} style={{ height: '400px' }}></div>
+                </div>
+                <div className={styles.item}>
+                  <div ref={workDomRef} style={{ height: '400px' }}></div>
+                </div>
               </div>
             </div>
-          </Box>
+          </div>
           <Box title="设备维修保养">
             <div className={styles.content}>
               <div className={styles.item}>维修数量：{repair_record}</div>

src/pages/SmartReport/index.less

@@ -70,8 +70,7 @@
 }
 .titleContent {
   padding: 0 0.4rem;
-  float: left;
-  position: relative;
+  position: absolute;
   top: -0.43rem;
   left: 0.4rem;
   height: 0.86rem;
@@ -85,9 +84,10 @@
 }
 
 .box {
+  position: relative;
   margin-bottom: 1rem;
   box-sizing: border-box;
-  padding: 4px;
+  padding: 0.04rem;
   border-radius: 0.4rem 0.1rem 0.4rem 0.1rem;
   background-image: -webkit-linear-gradient(#1755ff 0%, #ffffff 80%);
   box-shadow: 1px 8px 14px 0px rgba(0, 0, 0, 0.1);
@@ -100,39 +100,101 @@
 
   .left {
     position: relative;
-    left: 20px;
+    left: 0.2rem;
     float: left;
-    font-size: 30px;
+    font-size: 0.3rem;
     font-family: PingFangSC, PingFang SC;
     font-weight: 400;
     color: #4a4a4a;
-    line-height: 42px;
+    line-height: 0.42rem;
   }
   .content {
     display: flex;
-    padding: 20px 20px 0 20px;
+    justify-content: space-between;
+    padding: 1.64rem 1.82rem;
     flex-wrap: wrap;
     .item {
       width: 50%;
-      margin-bottom: 18px;
-      font-size: 30px;
+      margin-bottom: 0.18rem;
+      font-size: 0.3rem;
       font-family: PingFangSC, PingFang SC;
       font-weight: 400;
       color: #4a4a4a;
-      line-height: 42px;
+      line-height: 0.42rem;
     }
   }
+  // .threeContent {
+  //   display: flex;
+  //   padding: 0.2rem;
+  //   justify-content: space-around;
+  //   .numItem {
+  //     .left;
+  //     text-align: center;
+  //   }
+  // }
+  .smartText {
+    margin-bottom: 0.18rem;
+    font-size: 0.3rem;
+  }
+  .longWhiteBox {
+    width: 6.48rem;
+    padding: 0.02rem;
+    // padding: 0.46rem 0.64rem;
+    height: 1.69rem;
+    // background: #ffffff;
+    box-shadow: 0 5px 14px 0 rgba(141, 141, 141, 0.2);
+    border-radius: 0.95rem;
+    // border: 1px solid;
+    background-image: linear-gradient(
+      178deg,
+      rgba(0, 166, 255, 1),
+      rgba(255, 255, 255, 0)
+    );
+  }
+  .longWhiteBoxIn {
+    padding: 0 0.64rem;
+    background: #ffffff;
+    border-radius: 1rem;
+    font-size: 0.49rem;
+    font-family: Helvetica;
+    color: #1755ff;
+    line-height: 1.5rem;
+  }
+  .blueText {
+    font-size: 0.49rem;
+    font-family: Helvetica;
+    color: #1755ff;
+    line-height: 0.45rem;
+    text-align: center;
+  }
+  .value {
+    font-size: 0.86rem;
+    font-family: Helvetica;
+    color: #3b3b3b;
+    line-height: 1.5rem;
+    letter-spacing: 0.07rem;
+  }
   .threeContent {
+    margin: 1rem 0;
     display: flex;
-    padding: 20px;
-    justify-content: space-around;
-    .numItem {
-      .left;
-      text-align: center;
-    }
+    width: 100%;
+    height: 2.97rem;
+    background: #ecf8fd;
+    box-shadow: 0px 5px 14px 0px rgba(141, 141, 141, 0.2);
+    border-radius: 4.44rem;
+    border: 1px solid #00a6ff;
+    .blueText;
   }
-  .smartText {
-    margin-bottom: 18px;
-    font-size: 30px;
+  .threeItem {
+    flex: 1;
+    margin: 0.46rem 0;
+    border-right: 3px solid #bcbaba;
+  }
+  .threeItem:last-child {
+    border-right: none;
+  }
+  .unit {
+    .blueText;
+    color: #3b3b3b;
   }
 }