替换ui

public/rem.js

@@ -9,7 +9,7 @@
     var width = docEl.getBoundingClientRect().width;
 
     //与淘宝做法不同，直接采用简单的rem换算方法1rem=100px
-    var rem = (2560 * 100) / 2560;
+    var rem = (width * 100) / 2560;
     //兼容UC开始
     rootStyle = 'html{font-size:' + rem + 'px !important}';
     rootItem =

src/pages/SmartReport/index.js

@@ -1,7 +1,6 @@
-import ModuleTitle from '@/components/ManagementPage/moduleTitle';
 import PageContent from '@/components/PageContent';
+import PageTitle from '@/components/PageTitle';
 import { queryWorkReport } from '@/services/smartReport';
-import { LeftOutlined } from '@ant-design/icons';
 import { useNavigate, useParams, useRequest } from '@umijs/max';
 import { ConfigProvider, DatePicker, Select, Spin } from 'antd';
 import zhCN from 'antd/es/locale/zh_CN';
@@ -35,73 +34,6 @@ const SmartReport = () => {
   const workScoreDomRef = useRef(null);
   const workScoreChartRef = useRef(null);
 
-  // const defaultData = {
-  //   electricity: '1111',
-  //   in_water: '22222',
-  //   maintain_record: '333',
-  //   medicine: '444',
-  //   out_water: '666',
-  //   push_complete_task: '777',
-  //   push_complete_task_per: '888',
-  //   push_task: '555',
-  //   repair_record: '999',
-  //   self_inspection_abnormal_task: '1212',
-  //   self_inspection_normal_task: '13123',
-  //   self_inspection_task: '1414',
-  //   water_electricity: '1515',
-  //   water_medicine: '1616',
-  //   work_order_complete_task: '1717',
-  //   work_order_complete_task_per: '80',
-  //   work_order_task: '123',
-  //   patrol_safe: 2,
-  //   patrol_section: 3,
-  //   push_optimize_task: 6,
-  //   push_complete_task: 4,
-  //   eqData: [
-  //     { name: '安全隐患', value: 2 },
-  //     { name: '工艺异常', value: 3 },
-  //     { name: '设备异常', value: 4 },
-  //   ],
-  //   mandate_type_con: 1,
-  //   mandate_type_group: 2,
-  //   mandate_type_pat: 3,
-  //   mandate_type_pro: 4,
-  //   taskData: [
-  //     { name: '工况任务', value: 2 },
-  //     { name: '集团任务', value: 3 },
-  //     { name: '系统自检', value: 4 },
-  //     { name: '生产任务', value: 5 },
-  //   ],
-  //   chart_check: 1,
-  //   chart_part: 2,
-  //   chart_section: 3,
-  //   repair_record: 4,
-  //   maintain_record: 5,
-  //   patrol_mandate_record: 6,
-  //   reagent_record: 7,
-  //   workOrderData: [
-  //     { name: '盘点', value: 2 },
-  //     { name: '备品备件', value: 3 },
-  //     { name: '工艺工单', value: 4 },
-  //     { name: '维修工单', value: 5 },
-  //     { name: '保养工单', value: 5 },
-  //     { name: '巡检工单', value: 5 },
-  //     { name: '加药工单', value: 5 },
-  //   ],
-  //   con_level_five: 6, //较差
-  //   con_level_four: 1, //一般
-  //   con_level_one: 2, //优秀
-  //   con_level_three: 3, //较好
-  //   con_level_two: 4, //良好
-  //   workScoreData: [
-  //     { name: '较差', value: 2 },
-  //     { name: '一般', value: 3 },
-  //     { name: '优秀', value: 4 },
-  //     { name: '较好', value: 5 },
-  //     { name: '良好', value: 4 },
-  //   ],
-  // };
-
   const {
     data = {},
     run,
@@ -242,22 +174,26 @@ const SmartReport = () => {
     history.back();
   };
 
+  const Box = ({ title, children }) => {
+    return (
+      <div className={styles.box}>
+        <div className={styles.main_in}>
+          <div className={styles.titleContent}>{title}</div>
+          {children}
+        </div>
+      </div>
+    );
+  };
+
   return (
     <PageContent closeable={false}>
       <ConfigProvider locale={zhCN}>
+        <PageTitle children="智慧运营报告" returnable />
         <div className={styles.head}>
-          <div className={styles.nameContainer}>
-            <LeftOutlined
-              onClick={handleOnClick}
-              style={{ fontSize: 36, cursor: 'pointer', marginRight: '20px' }}
-            />
-            <div>
-              <div className={styles.name}>智慧运营报告</div>
-              <div className={styles.photo}>
-                {dayjs(date.stime).format('MM月DD日')}-
-                {dayjs(date.etime).format('MM月DD日')}
-              </div>
-            </div>
+          {/* <div className={styles.name}>智慧运营报告</div> */}
+          <div className={styles.photo}>
+            {dayjs(date.stime).format('MM月DD日')}-
+            {dayjs(date.etime).format('MM月DD日')}
           </div>
           <div className={styles.headRight}>
             <div>
@@ -289,13 +225,12 @@ const SmartReport = () => {
             </div>
           </div>
         </div>
+
+        <div className={styles.title}>无锡锡山水厂</div>
+
         <Spin spinning={loading}>
-          <div className={styles.box}>
-            <div className={styles.left}>概览</div>
-            <div className={styles.title}>无锡锡山水厂</div>
+          <Box title="概览">
             <div className={styles.content}>
-              {/* <div className={styles.item}>智慧运营天数：{}天</div>
-          <div className={styles.item}>智慧运营节省金额：{}元</div> */}
               <div className={styles.item}>累计进水：{in_water}</div>
               <div className={styles.item}>累计出水：{out_water}</div>
               <div className={styles.item}>吨水能耗：{water_electricity}</div>
@@ -315,30 +250,29 @@ const SmartReport = () => {
               <div className={styles.item}>设备维修：{repair_record}个</div>
               <div className={styles.item}>设备保养：{maintain_record}个</div>
             </div>
-          </div>
-          <div className={styles.box}>
-            <ModuleTitle title="水量" />
+          </Box>
+          <Box title="水量">
             <div className={styles.content}>
               <div className={styles.item}>累计进水：{in_water}</div>
               <div className={styles.item}>累计出水：{out_water}</div>
             </div>
-          </div>
-          <div className={styles.box}>
-            <ModuleTitle title="能耗" />
+          </Box>
+
+          <Box title="能耗">
             <div className={styles.content}>
               <div className={styles.item}>吨水能耗：{water_electricity}</div>
               <div className={styles.item}>累计耗电量：{electricity}kwh</div>
             </div>
-          </div>
-          <div className={styles.box}>
-            <ModuleTitle title="药耗" />
+          </Box>
+
+          <Box title="药耗">
             <div className={styles.content}>
               <div className={styles.item}>吨水药耗：{water_medicine}kg/m³</div>
               <div className={styles.item}>累计用药量：{medicine}</div>
             </div>
-          </div>
-          <div className={styles.box}>
-            <ModuleTitle title="系统自检" />
+          </Box>
+
+          <Box title="系统自检">
             <div className={styles.threeContent}>
               <div className={styles.numItem}>
                 <div>{self_inspection_task}</div>
@@ -358,9 +292,8 @@ const SmartReport = () => {
               style={{ height: '340px', margin: '10px 0 10px 0' }}
             ></div>
             {/* <div>异常类型统计（设备异常、工艺异常、安全隐患异常）</div> */}
-          </div>
-          <div className={styles.box}>
-            <ModuleTitle title="智慧运营" />
+          </Box>
+          <Box title="智慧运营">
             <div style={{ padding: '20px 20px 0 20px' }}>
               <div className={styles.smartText}>
                 优化条数:{push_optimize_task}条
@@ -372,9 +305,8 @@ const SmartReport = () => {
               ref={workScoreDomRef}
               style={{ height: '340px', margin: '10px 0 10px 0' }}
             ></div>
-          </div>
-          <div className={styles.box}>
-            <ModuleTitle title="任务工单" />
+          </Box>
+          <Box title="任务工单">
             <div className={styles.content}>
               <div className={styles.item}>任务数量：{push_task}</div>
               <div className={styles.item}>工单数量：{work_order_task}</div>
@@ -397,14 +329,13 @@ const SmartReport = () => {
                 <div ref={workDomRef} style={{ height: '400px' }}></div>
               </div>
             </div>
-          </div>
-          <div className={styles.box}>
-            <ModuleTitle title="设备维修保养" />
+          </Box>
+          <Box title="设备维修保养">
             <div className={styles.content}>
               <div className={styles.item}>维修数量：{repair_record}</div>
               <div className={styles.item}>保养数量：{maintain_record}</div>
             </div>
-          </div>
+          </Box>
         </Spin>
       </ConfigProvider>
     </PageContent>

src/pages/SmartReport/index.less

@@ -1,13 +1,21 @@
 .page {
   margin: auto;
-  padding: 0 100px 100px;
+  padding: 0 1rem 1rem;
   width: 80%;
   background: rgba(255, 255, 255, 0.78);
   box-shadow: 0px 0px 8px 4px rgba(212, 212, 212, 0.5);
   border-radius: 20px;
-  font-size: 30px;
+  font-size: 0.43rem;
   font-weight: 400;
   color: #4a4a4a;
+  background: linear-gradient(
+    193deg,
+    rgba(226, 241, 250, 0.99) 0%,
+    rgba(226, 241, 250, 0.99) 0%,
+    rgba(255, 255, 255, 0.97) 100%
+  );
+  box-shadow: -4px 66 135px 0px rgba(60, 93, 133, 0.72);
+  border: 4px solid rgba(255, 255, 255, 0.96);
 }
 
 .nameContainer {
@@ -23,7 +31,10 @@
   line-height: 48px;
 }
 .photo {
-  font-size: 24px;
+  font-size: 0.43rem;
+  font-family: Helvetica;
+  color: #615d5d;
+  line-height: 0.45rem;
 }
 
 .head {
@@ -40,22 +51,53 @@
     line-height: 40px;
   }
   .headRight {
-    font-size: 26px;
+    font-size: 0.43rem;
+    font-family: Helvetica;
+    color: #615d5d;
+    line-height: 0.45rem;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
   }
 }
+.title {
+  margin: 1.6rem 0.4rem;
+  font-size: 0.86rem;
+  font-family: Helvetica;
+  color: #3b3b3b;
+  line-height: 0.45rem;
+  letter-spacing: 0.09rem;
+}
+.titleContent {
+  padding: 0 0.4rem;
+  float: left;
+  position: relative;
+  top: -0.43rem;
+  left: 0.4rem;
+  height: 0.86rem;
+  line-height: 0.86rem;
+  background-color: #1755ff;
+  border-radius: 0.43rem;
+  font-size: 0.43rem;
+  font-family: Helvetica;
+  color: #ffffff;
+  letter-spacing: 0.04rem;
+}
 
 .box {
-  margin: 24px 0;
-  padding: 38px 30px;
-  background-color: #e7f1fe;
-  .title {
-    .name;
+  margin-bottom: 1rem;
+  box-sizing: border-box;
+  padding: 4px;
+  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);
+  .main_in {
     width: 100%;
-    text-align: center;
+    height: 100%;
+    border-radius: 0.4rem 0.1rem 0.4rem 0.1rem;
+    background: linear-gradient(180deg, #ddf4ff 0%, #ffffff 100%);
   }
+
   .left {
     position: relative;
     left: 20px;