替换首页UI、修改为rem

.umirc.ts

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

public/rem.js

@@ -0,0 +1,67 @@
+(function () {
+  var doc = document,
+    win = window;
+  var docEl = doc.documentElement;
+  var tid;
+  var rootItem, rootStyle;
+
+  function refreshRem() {
+    var width = docEl.getBoundingClientRect().width;
+
+    //与淘宝做法不同，直接采用简单的rem换算方法1rem=100px
+    var rem = (width * 100) / 2560;
+    //兼容UC开始
+    rootStyle = 'html{font-size:' + rem + 'px !important}';
+    rootItem =
+      document.getElementById('rootsize') || document.createElement('style');
+    if (!document.getElementById('rootsize')) {
+      document.getElementsByTagName('head')[0].appendChild(rootItem);
+      rootItem.id = 'rootsize';
+    }
+    if (rootItem.styleSheet) {
+      rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle);
+    } else {
+      try {
+        rootItem.innerHTML = rootStyle;
+      } catch (f) {
+        rootItem.innerText = rootStyle;
+      }
+    }
+    //兼容UC结束
+    docEl.style.fontSize = rem + 'px';
+  }
+  refreshRem();
+
+  win.addEventListener(
+    'resize',
+    function () {
+      clearTimeout(tid); //防止执行两次
+      tid = setTimeout(refreshRem, 300);
+    },
+    false,
+  );
+
+  win.addEventListener(
+    'pageshow',
+    function (e) {
+      if (e.persisted) {
+        // 浏览器后退的时候重新计算
+        clearTimeout(tid);
+        tid = setTimeout(refreshRem, 300);
+      }
+    },
+    false,
+  );
+
+  if (doc.readyState === 'complete') {
+    doc.body.style.fontSize = '16px';
+  } else {
+    doc.addEventListener(
+      'DOMContentLoaded',
+      function (e) {
+        doc.body.style.fontSize = '16px';
+      },
+      false,
+    );
+  }
+})();

src/pages/Home/index.js

@@ -7,7 +7,6 @@ import { connect, useParams, useRequest } from '@umijs/max';
 import dayjs from 'dayjs';
 import { useEffect } from 'react';
 import { getScadaPage } from '../../services/OperationManagement';
-import CircleScore from '../Smart/components/CircleScore';
 import styles from './index.less';
 
 const HomePage = (props) => {
@@ -19,7 +18,7 @@ const HomePage = (props) => {
   return (
     <div className={styles.content}>
       <LeftContent data={data} />
-      {/* <CenterContent /> */}
+      <CenterContent />
       <RightContent data={data} />
     </div>
   );
@@ -32,13 +31,14 @@ const LeftContent = (props) => {
       <SmartWork data={data} />
       <WaterAmt data={data} />
       <WaterQuality data={data} />
-      <Backlog />
+      {/* <Backlog /> */}
     </div>
   );
 };
 const CenterContent = () => {
   return (
     <div className={styles.centerBox}>
+      <Backlog />
       <Scada />
     </div>
   );
@@ -50,7 +50,7 @@ const RightContent = (props) => {
       <SelfInspection />
       <Electric data={data} />
       <Medicine />
-      <Scada />
+      {/* <Scada /> */}
     </div>
   );
 };
@@ -64,16 +64,17 @@ const SmartWork = (props) => {
       onClick={() => UnityAction.sendMsg('menuItem', '工况管理')}
     >
       <div className={styles.scoreBox}>
-        <CircleScore>
-          {data?.score}
+        <div className={styles.circle}>
+          <div className={styles.score}>{data?.score}</div>
           <div className={styles.grade}>{data?.grade}</div>
-        </CircleScore>
+        </div>
         <div className={styles.scoreTitle}>
           当前运行{data?.grade}，可继续优化
         </div>
-        <div className={styles.time}>
-          {dayjs(data?.clac_time).format('YYYY-MM-DD HH:mm')}
-        </div>
+      </div>
+
+      <div className={styles.time}>
+        {dayjs(data?.clac_time).format('YYYY-MM-DD HH:mm')}
       </div>
     </Box>
   );
@@ -91,11 +92,11 @@ const WaterAmt = (props) => {
       <ul>
         <li>
           <div className={styles.value}>{data?.fwa}</div>
-          <div className={styles.name}>进水量</div>
+          <div className={styles.btn1}>进水量</div>
         </li>
         <li>
           <div className={styles.value}>{data?.dwa}</div>
-          <div className={styles.name}>产水量</div>
+          <div className={styles.btn2}>产水量</div>
         </li>
       </ul>
     </Box>
@@ -114,11 +115,11 @@ const WaterQuality = (props) => {
       <ul>
         <li>
           <div className={styles.value}>{data?.dsan}</div>
-          <div className={styles.name}>出水余氯</div>
+          <div className={styles.btn1}>出水余氯</div>
         </li>
         <li>
           <div className={styles.value}>{data?.dtur}</div>
-          <div className={styles.name}>出水浊度</div>
+          <div className={styles.btn2}>出水浊度</div>
         </li>
       </ul>
     </Box>
@@ -136,9 +137,17 @@ const SelfInspection = connect(({ eqSelfInspection, loading }) => ({
   const renderStatus = () => {
     if (loading) return <LoadingOutlined />;
     if (autoReport.Status > 0) {
-      return <span style={{ color: '#FE5850' }}>异常</span>;
+      return (
+        <span className={styles.text} style={{ color: '#FE5850' }}>
+          异常
+        </span>
+      );
     }
-    return <span style={{ color: '#F5A623' }}>正常</span>;
+    return (
+      <span className={styles.text} style={{ color: '' }}>
+        正常
+      </span>
+    );
   };
 
   useEffect(() => {
@@ -155,12 +164,19 @@ const SelfInspection = connect(({ eqSelfInspection, loading }) => ({
       title="系统自检"
       onClick={() => UnityAction.sendMsg('menuItem', '系统自检')}
     >
-      <div className={styles.insTag}>自检中</div>
+      <div className={styles.selfCon}>
+        <div className={styles.circle}>{renderStatus()}</div>
+        <div className={styles.texting}>自检中</div>
+      </div>
+      <div className={styles.time}>
+        {dayjs(autoReport.CreatedTime).format('YYYY-MM-DD HH:mm')}
+      </div>
+      {/* <div className={styles.insTag}>自检中</div> */}
 
-      <div className={styles.insStatus}>{renderStatus()}</div>
+      {/* <div className={styles.insStatus}>{renderStatus()}</div>
       <div className={styles.time} style={{ marginBottom: 30 }}>
         {dayjs(autoReport.CreatedTime).format('YYYY-MM-DD HH:mm')}
-      </div>
+      </div> */}
     </Box>
   );
 });
@@ -177,7 +193,7 @@ const Electric = (props) => {
       <ul>
         <li>
           <div className={styles.value}>{data?.elec}</div>
-          <div className={styles.name}>用电量</div>
+          <div className={styles.btn1}>用电量</div>
         </li>
       </ul>
     </Box>
@@ -210,7 +226,7 @@ const Medicine = () => {
       <ul>
         <li>
           <div className={styles.value}>{data?.value?.toFixed(2) || '-'}元</div>
-          <div className={styles.name}>当月吨水药成本</div>
+          <div className={styles.btn1}>当月吨水药成本</div>
         </li>
       </ul>
     </Box>
@@ -243,7 +259,7 @@ const Scada = () => {
     >
       <div className={styles.scada}>
         {data?.map((url) => (
-          <iframe style={{ width: '450px', height: '270px' }} src={url} />
+          <iframe style={{ width: '320px', height: '196px' }} src={url} />
         ))}
         <div className={styles.mask}></div>
       </div>
@@ -284,20 +300,21 @@ const Backlog = (props) => {
       <div className={styles.backlog}>
         <div>
           {data?.map((item) => (
-            <>
+            <div
+              className={styles.item}
+              onClick={(e) => {
+                e.stopPropagation();
+                handleClick(item);
+              }}
+            >
               <div className={styles.createTime}>{item.time}</div>
-              <div
-                className={styles.item}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handleClick(item);
-                }}
-              >
+              <div className={styles.titleCon}>
                 <div className={styles.point} />
                 <div className={styles.titleText}>{item.title}</div>
-                <div className={styles.bottomCon}>{item.content}</div>
               </div>
-            </>
+
+              <div className={styles.bottomCon}>{item.content}</div>
+            </div>
           ))}
         </div>
       </div>
@@ -311,7 +328,14 @@ const Box = ({ title, children, onClick, big }) => {
       className={`${styles.box} ${big ? styles.boxBig : ''}`}
       onClick={onClick}
     >
-      <div className={styles.boxTitle}>{title}</div>
+      <div className={styles.titleContent}>
+        <div className={styles.line} />
+        <div className={styles.boxTitle}>{title}</div>
+      </div>
+      {/* <span className={styles.boxTitle}>
+        <div className={styles.line}></div>
+        {title}
+      </span> */}
       {children}
     </div>
   );

src/pages/Home/index.less

@@ -4,51 +4,73 @@
   align-items: center;
   height: 100vh;
   width: 100%;
-  padding-top: 90px;
+  padding-top: 0.9rem;
+  color: #3b3b3b;
 }
 .box {
-  background: url('@/assets/home-box-bg.png') no-repeat center;
-  background-size: 100% 100%;
-  width: 520px;
-  padding: 24px;
+  width: 6.4rem;
+  padding: 0.24rem;
   position: relative;
-  margin-bottom: 20px;
+  margin-bottom: 0.1rem;
+  display: inline-block;
   cursor: pointer;
-  color: #fff;
+  background: url('@/assets/home-box-bg.png') no-repeat center;
+  background-size: 100% 100%;
+
+  // &:last-child {
+  //   margin-bottom: 0;
+  // }
 
-  &:last-child {
-    margin-bottom: 0;
+  .titleContent {
+    margin: 0.2rem 0.38rem;
+    display: inline-block;
+    position: relative;
   }
 
   .boxTitle {
-    padding-left: 46px;
-    margin-bottom: 20px;
-    font-size: 26px;
-    font-weight: 400;
-    color: #ffffff;
-    line-height: 34px;
+    padding: 0 0.1rem;
+    position: relative;
+    // z-index: 99;
+    font-size: 0.32rem;
+    font-weight: 600;
+    color: #0139f1;
+    line-height: 0.34rem;
+    z-index: 1;
+  }
+  .line {
+    position: absolute;
+    // left: 0.38rem;
+    bottom: 0;
+    width: 100%;
+    height: 0.14rem;
+    background: url('@/assets/home-box-line.png') no-repeat center;
+    background-size: 100% 100%;
+    z-index: 0;
   }
   > ul {
     display: flex;
     justify-content: center;
     > li {
+      text-align: center;
       width: 50%;
     }
   }
   .name {
-    font-size: 22px;
+    font-size: 0.22rem;
     font-weight: 400;
     color: #ffffff;
-    line-height: 28px;
+    line-height: 0.28rem;
     text-align: center;
-    margin-top: 18px;
+    margin-top: 0.18rem;
   }
   .value {
-    font-size: 32px;
+    margin: 0.6rem 0;
+    font-size: 0.4rem;
     font-weight: 600;
-    color: #329bfe;
-    line-height: 50px;
+    color: #3b3b3b;
+    line-height: 0.5rem;
     text-align: center;
+    font-family: PangMenZhengDao-3, PangMenZhengDao-3;
   }
 }
 .boxBig {
@@ -56,7 +78,8 @@
   background-image: url('@/assets/home-box-bg2.png');
 }
 .scada {
-  padding: 0 10px;
+  margin-bottom: 0.2rem;
+  padding: 0 0.1rem;
   position: relative;
   .mask {
     position: absolute;
@@ -67,111 +90,170 @@
   }
 }
 .scadaContent {
-  padding: 20px;
-  height: 300px;
-  width: 1000px;
+  padding: 0.2rem;
+  height: 3rem;
+  width: 10rem;
   display: flex;
   justify-content: space-between;
   iframe {
     height: 100%;
-    width: calc(50% - 10px);
+    width: calc(50% - 0.1rem);
     border: none;
     pointer-events: none;
   }
 }
+
 .scoreBox {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-
+  justify-content: space-around;
+  .score {
+    font-size: 0.5rem;
+    font-weight: 600;
+    font-family: PangMenZhengDao-3, PangMenZhengDao-3;
+    color: #615d5d;
+  }
   .scoreTitle {
-    font-size: 24px;
-    margin-top: 10px;
-    margin-bottom: 14px;
+    width: 3rem;
+    font-size: 0.4rem;
+    margin-top: 0.2rem;
+    font-family: Source Han Sans, Source Han Sans;
+    color: #3b3b3b;
   }
+
   .grade {
-    font-size: 22px;
-    margin-top: 10px;
+    font-size: 0.22rem;
+    margin-top: 0.1rem;
+  }
+  .circle {
+    width: 1.78rem;
+    height: 1.78rem;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    // border-image: linear-gradient(49deg, rgba(255, 123.24999645352364, 0, 1), rgba(255, 242.24999696016312, 0, 1)) 25 25;
+    background: url('@/assets/home-circle.png') no-repeat center;
+    background-size: 100% 100%;
   }
 }
 
 .time {
-  font-size: 22px;
-  margin-bottom: 20px;
-  text-align: center;
+  font-size: 0.22rem;
+  margin-bottom: 0.2rem;
+  text-align: right;
+  margin-right: 30px;
 }
 .insTag {
   position: absolute;
-  right: 54px;
-  top: 44px;
-  width: 114px;
-  height: 50px;
+  right: 0.54rem;
+  top: 0.44rem;
+  width: 1.14rem;
+  height: 0.5rem;
   background: #4a90e2;
-  border-radius: 5px;
+  border-radius: 0.05rem;
   text-align: center;
-  line-height: 50px;
+  line-height: 0.5rem;
 
-  font-size: 26px;
+  font-size: 0.26rem;
   font-weight: 400;
   color: #ffffff;
 }
 
 .insStatus {
   text-align: center;
-  font-size: 42px;
+  font-size: 0.42rem;
   font-weight: 500;
   color: #f5a623;
-  line-height: 56px;
-  margin-top: 50px;
-  margin-bottom: 22px;
+  line-height: 0.56rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0.22rem;
 }
 .centerBox {
   display: flex;
-  height: 880px;
+  height: calc(100vh - 0.9rem);
   align-items: flex-end;
-  .box {
-    width: 100%;
-  }
 }
 .backlog {
-  padding: 0 10px;
+  margin-bottom: 0.4rem;
+  padding: 0 0.2rem;
   overflow-y: auto;
-  height: 200px;
-
-  .createTime {
-  }
+  height: 3.2rem;
+  color: #3b3b3b;
   .item {
-    margin: 8px 0 20px;
+    padding: 0.08rem 0 0.2rem;
     width: 100%;
-    font-size: 22px;
-    // height: 50px;
-    background-color: #346194;
-    line-height: 50px;
+    font-size: 0.22rem;
+    line-height: 0.5rem;
+    border-bottom: 1px solid #ffffff;
+  }
+  .titleCon {
+    display: flex;
+    align-items: center;
   }
   .point {
-    position: relative;
-    float: left;
-    top: 20px;
-    margin: 0 10px;
     display: inline-block;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background-color: yellow;
+    width: 0.12rem;
+    height: 0.24rem;
+    background-color: #ff8400;
+  }
+  .createTime {
+    float: right;
   }
   .titleText {
-    margin: 0 20px;
-    border-bottom: 1px solid #eeeeee;
+    font-size: 0.22rem;
+    margin: 0 0.2rem;
   }
   .bottomCon {
-    padding: 0 20px;
-    font-size: 20px;
+    font-size: 0.18rem;
     word-wrap: break-word;
   }
 }
 .count {
   background: #f69040;
-  border-radius: 4px;
-  margin-left: 10px;
-  padding: 0 6px;
+  border-radius: 0.04rem;
+  margin-left: 0.1rem;
+  padding: 0 0.06rem;
+}
+
+.btn1 {
+  margin-bottom: 0.2rem;
+  padding: 0.14rem 0.3rem;
+  font-size: 0.32rem;
+  font-family: Source Han Sans, Source Han Sans;
+  font-weight: 500;
+  color: #ffffff;
+  display: inline-block;
+  border-radius: 1rem;
+  background-color: #1755ff;
+}
+.btn2 {
+  .btn1;
+  background-color: #1d83ff;
+}
+.selfCon {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  .circle {
+    width: 1.78rem;
+    height: 1.78rem;
+    text-align: center;
+    line-height: 1.78rem;
+    background: url('@/assets/home-self-circle.png') no-repeat center;
+    background-size: 100% 100%;
+  }
+  .text {
+    width: 1.19rem;
+    height: 0.5rem;
+    font-size: 0.5rem;
+    font-family: Source Han Sans, Source Han Sans;
+    font-weight: 500;
+  }
+  .texting {
+    width: 2rem;
+    font-size: 0.4rem;
+    margin-top: 0.2rem;
+    font-family: Source Han Sans, Source Han Sans;
+    color: #3b3b3b;
+  }
 }