修改样式

src/pages/Home/index.js

@@ -255,6 +255,7 @@ const Scada = () => {
       return urls.splice(0, 1);
     },
   });
+
   return (
     <Box
       title="工艺监控"
@@ -262,7 +263,7 @@ const Scada = () => {
     >
       <div className={styles.scada}>
         {data?.map((url) => (
-          <iframe style={{ width: '5.7rem', height: '2.64rem' }} src={url} />
+          <iframe style={{ width: '570px', height: '264px' }} src={url} />
         ))}
         <div className={styles.mask}></div>
       </div>

src/pages/SmartReport/index.js

@@ -147,16 +147,21 @@ const SmartReport = () => {
   }, []);
 
   const initData = () => {
-    const eqOption = getPieOption(data.eqData, '异常类型统计');
+    const legend = {
+      orient: 'vertical',
+      left: 'left',
+      top: 'center',
+    };
+    const eqOption = getPieOption(data.eqData, legend);
     if (eqChartRef.current) eqChartRef.current.setOption(eqOption);
 
-    const taskOption = getPieOption(data.taskData, '任务类型统计');
+    const taskOption = getPieOption(data.taskData);
     if (taskChartRef.current) taskChartRef.current.setOption(taskOption);
 
-    const workOption = getPieOption(data.workOrderData, '工况评估统计');
+    const workOption = getPieOption(data.workOrderData);
     if (workChartRef.current) workChartRef.current.setOption(workOption);
 
-    const workScoreOption = getPieOption(data.workScoreData, '工况评估统计');
+    const workScoreOption = getPieOption(data.workScoreData, legend);
     if (workScoreChartRef.current)
       workScoreChartRef.current.setOption(workScoreOption);
   };
@@ -185,6 +190,68 @@ const SmartReport = () => {
     );
   };
 
+  const TwoBoxItem = ({ label, value, unit }) => {
+    return (
+      <div className={styles.longWhiteBox}>
+        <div className={styles.longWhiteBoxIn}>
+          {label}
+          <span className={styles.value}>
+            {value}
+            {unit && <span className={styles.unit}>{unit}</span>}
+          </span>
+        </div>
+      </div>
+    );
+  };
+  const ThreeBoxContent = ({ data }) => {
+    return (
+      <div className={styles.threeContent}>
+        {data?.map((item) => (
+          <div className={styles.threeItem}>
+            <div className={styles.value}>
+              {item.value}
+              <span className={styles.unit}>{item.unit}</span>
+            </div>
+            {item.label}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const CircleContent = ({ data }) => {
+    return (
+      <div className={styles.circleContent}>
+        {data?.map((item) => (
+          <div className={styles.circle}>
+            <div className={styles.threeItem}>
+              <div className={styles.value}>
+                {item.value}
+                <span className={styles.unit}>{item.unit}</span>
+              </div>
+              {item.label}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const CircleThreeContent = ({ data }) => {
+    return (
+      <div className={styles.circleContent}>
+        {data?.map((item) => (
+          <div>
+            <div className={styles.circleValue}>{item.value}</div>
+            <div style={{ textAlign: 'center' }} className={styles.unit}>
+              {item.label}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
   return (
     <PageContent closeable={false}>
       <ConfigProvider locale={zhCN}>
@@ -231,165 +298,208 @@ const SmartReport = () => {
         <Spin spinning={loading}>
           <Box title="概览">
             <div className={styles.content}>
-              <div className={styles.longWhiteBox}>
-                <div className={styles.longWhiteBoxIn}>
-                  累计进水：<span className={styles.value}>{in_water}</span>
-                </div>
-              </div>
-              <div className={styles.longWhiteBox}>
-                <div className={styles.longWhiteBoxIn}>
-                  累计出水：<span className={styles.value}>{out_water}</span>
-                </div>
-              </div>
-              <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>
-              <div className={styles.item}>设备维修：{repair_record}个</div>
-              <div className={styles.item}>设备保养：{maintain_record}个</div>
+              <TwoBoxItem label="累计进水：" value={in_water} />
+              <TwoBoxItem label="累计出水：" value={out_water} />
+
+              <ThreeBoxContent
+                data={[
+                  { label: '吨水能耗', value: water_electricity, unit: 'kwh' },
+                  { label: '吨水药耗', value: water_medicine, unit: 'kg/m³' },
+                  {
+                    label: '系统自检次数',
+                    value: self_inspection_task,
+                    unit: '次',
+                  },
+                ]}
+              />
+
+              <TwoBoxItem
+                label="优化建议："
+                value={push_optimize_task}
+                unit="条"
+              />
+              <TwoBoxItem
+                label="任务完成："
+                value={push_complete_task}
+                unit="个"
+              />
+
+              <ThreeBoxContent
+                data={[
+                  {
+                    label: '工单完成',
+                    value: work_order_complete_task,
+                    unit: '个',
+                  },
+                  { label: '设备维修', value: repair_record, unit: '个' },
+                  {
+                    label: '设备保养',
+                    value: maintain_record,
+                    unit: '个',
+                  },
+                ]}
+              />
             </div>
           </Box>
           <Box title="水量">
-            <div className={styles.content}>
-              <div className={styles.item}>累计进水：{in_water}</div>
-              <div className={styles.item}>累计出水：{out_water}</div>
-            </div>
+            <CircleContent
+              data={[
+                { label: '累计进水', value: in_water },
+                { label: '累计出水', value: out_water },
+              ]}
+            />
           </Box>
 
           <Box title="能耗">
-            <div className={styles.content}>
-              <div className={styles.item}>吨水能耗：{water_electricity}</div>
-              <div className={styles.item}>累计耗电量：{electricity}kwh</div>
-            </div>
+            <CircleContent
+              data={[
+                { label: '吨水能耗', value: water_electricity, unit: '' },
+                { label: '累计耗电量', value: electricity, unit: 'kwh' },
+              ]}
+            />
           </Box>
 
           <Box title="药耗">
-            <div className={styles.content}>
-              <div className={styles.item}>吨水药耗：{water_medicine}kg/m³</div>
-              <div className={styles.item}>累计用药量：{medicine}</div>
-            </div>
+            <CircleContent
+              data={[
+                { label: '吨水药耗', value: water_medicine, unit: 'kg/m³' },
+                { label: '累计用药量', value: medicine },
+              ]}
+            />
           </Box>
 
           <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>
+              <CircleThreeContent
+                data={[
+                  { label: '自检次数', value: self_inspection_task },
+                  { label: '异常次数', value: self_inspection_abnormal_task },
+                  { label: '正常次数', value: self_inspection_normal_task },
+                ]}
+              />
+              <div className={styles.paddingContent}>
+                <div className={styles.cutLine}></div>
+              </div>
+              <div style={{ padding: '0.43rem 0.4rem 0' }}>
+                <div className={styles.unit}>异常类型统计：</div>
+                <div
+                  ref={eqDomRef}
+                  style={{
+                    height: '4rem',
+                    width: 'calc(100% - 1.2rem)',
+                    margin: '0 0 0 0.8rem',
+                  }}
+                />
               </div>
-              <div
-                ref={eqDomRef}
-                style={{ height: '3.4rem', margin: '0.1rem 0 0.1rem 0' }}
-              ></div>
-              {/* <div>异常类型统计（设备异常、工艺异常、安全隐患异常）</div> */}
             </div>
           </div>
 
           <div className={styles.box}>
             <div className={styles.main_in}>
               <div className={styles.titleContent}>智慧运营</div>
-              <div style={{ padding: '0.2rem 0.2rem 0 0.2rem' }}>
+              <CircleThreeContent
+                data={[
+                  { label: '优化条数', value: push_optimize_task, unit: '条' },
+                  { label: '超滤能耗', value: ele_65 },
+                  { label: '反渗透能耗', value: ele_66 },
+                ]}
+              />
+              <div className={styles.paddingContent}>
+                <div className={styles.cutLine}></div>
+              </div>
+              <div style={{ padding: '0.43rem 0.4rem 0' }}>
+                <div className={styles.unit}>工况评估统计：</div>
+                <div
+                  ref={workScoreDomRef}
+                  style={{
+                    height: '4rem',
+                    width: 'calc(100% - 1.2rem)',
+                    margin: '0 0 0 0.8rem',
+                  }}
+                />
+              </div>
+              {/* <div style={{ padding: '0.2rem 0.2rem 0 0.2rem' }}>
                 <div className={styles.smartText}>
                   优化条数:{push_optimize_task}条
                 </div>
                 <div className={styles.smartText}>超滤能耗：{ele_65}</div>
                 <div className={styles.smartText}>反渗透能耗：{ele_66}</div>
-              </div>
-              <div
+              </div> */}
+              {/* <div
                 ref={workScoreDomRef}
                 style={{ height: '3.4rem', margin: '0.1rem 0 0.1rem 0' }}
-              ></div>
+              ></div> */}
             </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>
+              <CircleContent
+                data={[
+                  { label: '任务数量', value: push_task },
+                  { label: '工单数量', value: work_order_task },
+                ]}
+              />
+              <CircleContent
+                data={[
+                  { label: '任务完成数量', value: push_complete_task },
+                  { label: '工单完成数量', value: work_order_complete_task },
+                ]}
+              />
+              <CircleContent
+                data={[
+                  {
+                    label: '任务完成率',
+                    value: push_complete_task_per,
+                    unit: '%',
+                  },
+                  {
+                    label: '工单完成率',
+                    value: work_order_complete_task_per,
+                    unit: '%',
+                  },
+                ]}
+              />
+              <div style={{ display: 'flex', padding: '0 0.4rem' }}>
                 <div className={styles.item}>
-                  <div ref={taskDomRef} style={{ height: '4rem' }}></div>
+                  <div className={styles.unit}>任务类型统计：</div>
+                  <div
+                    ref={taskDomRef}
+                    style={{
+                      height: '4rem',
+                      width: '100%',
+                      marginTop: '0.2rem',
+                    }}
+                  ></div>
                 </div>
                 <div className={styles.item}>
-                  <div ref={workDomRef} style={{ height: '4rem' }}></div>
+                  <div className={styles.unit}>工单类型统计：</div>
+                  <div
+                    ref={workDomRef}
+                    style={{
+                      height: '4rem',
+                      width: '100%',
+                      marginTop: '0.2rem',
+                    }}
+                  ></div>
                 </div>
               </div>
             </div>
           </div>
           <Box title="设备维修保养">
-            <div className={styles.content}>
-              <div className={styles.item}>维修数量：{repair_record}</div>
-              <div className={styles.item}>保养数量：{maintain_record}</div>
-            </div>
+            <CircleContent
+              data={[
+                {
+                  label: '维修数量',
+                  value: repair_record,
+                },
+                {
+                  label: '保养数量',
+                  value: maintain_record,
+                },
+              ]}
+            />
           </Box>
         </Spin>
       </ConfigProvider>
@@ -397,19 +507,8 @@ const SmartReport = () => {
   );
 };
 export default SmartReport;
-const getPieOption = (chartData, name) => {
+const getPieOption = (chartData, legend = {}) => {
   const option = {
-    title: {
-      text: name,
-      top: '92%',
-      left: '50%',
-      textAlign: 'center',
-      textStyle: {
-        color: '#000000',
-        fontWeight: 'normal',
-        fontSize: 18,
-      },
-    },
     color: [
       '#5470c6',
       '#91cc75',
@@ -431,11 +530,12 @@ const getPieOption = (chartData, name) => {
         color: '#000000',
         fontSize: 18,
       },
+      ...legend,
     },
     series: [
       {
         type: 'pie',
-        radius: '50%',
+        radius: '60%',
         data: chartData,
         emphasis: {
           itemStyle: {

src/pages/SmartReport/index.less

@@ -31,10 +31,10 @@
   line-height: 0.48rem;
 }
 .photo {
-  font-size: 0.43rem;
+  font-size: 0.27rem;
   font-family: Helvetica;
   color: #615d5d;
-  line-height: 0.45rem;
+  line-height: 0.28rem;
 }
 
 .head {
@@ -44,40 +44,38 @@
   align-items: center;
 
   .time {
-    font-size: 0.22rem;
+    font-size: 0.27rem;
     font-family: PingFangSC, PingFang SC;
     font-weight: 400;
     color: #4a4a4a;
-    line-height: 0.4rem;
+    line-height: 0.27rem;
   }
   .headRight {
-    font-size: 0.43rem;
+    font-size: 0.27rem;
     font-family: Helvetica;
     color: #615d5d;
-    line-height: 0.45rem;
+    line-height: 0.27rem;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
   }
 }
 .title {
-  margin: 1.6rem 0.4rem;
-  font-size: 0.86rem;
+  margin: 0.82rem 0.4rem;
+  font-size: 0.54rem;
   font-family: Helvetica;
   color: #3b3b3b;
-  line-height: 0.45rem;
-  letter-spacing: 0.09rem;
+  line-height: 0.54rem;
+  letter-spacing: 0.06rem;
 }
 .titleContent {
-  padding: 0 0.4rem;
+  padding: 0.14rem 0.4rem;
   position: absolute;
-  top: -0.43rem;
+  top: -0.27rem;
   left: 0.4rem;
-  height: 0.86rem;
-  line-height: 0.86rem;
   background-color: #1755ff;
   border-radius: 0.43rem;
-  font-size: 0.43rem;
+  font-size: 0.27rem;
   font-family: Helvetica;
   color: #ffffff;
   letter-spacing: 0.04rem;
@@ -111,40 +109,28 @@
   .content {
     display: flex;
     justify-content: space-between;
-    padding: 1.64rem 1.82rem;
+    padding: 0.8rem 0.9rem 0.64rem;
     flex-wrap: wrap;
-    .item {
-      width: 50%;
-      margin-bottom: 0.18rem;
-      font-size: 0.3rem;
-      font-family: PingFangSC, PingFang SC;
-      font-weight: 400;
-      color: #4a4a4a;
-      line-height: 0.42rem;
-    }
-  }
-  // .threeContent {
-  //   display: flex;
-  //   padding: 0.2rem;
-  //   justify-content: space-around;
-  //   .numItem {
-  //     .left;
-  //     text-align: center;
-  //   }
-  // }
+  }
+  .item {
+    width: 50%;
+    margin-bottom: 0.18rem;
+    font-size: 0.3rem;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    color: #4a4a4a;
+    line-height: 0.42rem;
+  }
   .smartText {
     margin-bottom: 0.18rem;
     font-size: 0.3rem;
   }
   .longWhiteBox {
-    width: 6.48rem;
+    width: 48%;
     padding: 0.02rem;
-    // padding: 0.46rem 0.64rem;
-    height: 1.69rem;
-    // background: #ffffff;
+    height: 1.05rem;
     box-shadow: 0 0.05rem 0.14rem 0 rgba(141, 141, 141, 0.2);
     border-radius: 0.95rem;
-    // border: 0.01rem solid;
     background-image: linear-gradient(
       178deg,
       rgba(0, 166, 255, 1),
@@ -152,42 +138,42 @@
     );
   }
   .longWhiteBoxIn {
-    padding: 0 0.64rem;
+    padding: 0 0.4rem;
     background: #ffffff;
     border-radius: 1rem;
-    font-size: 0.49rem;
+    font-size: 0.3rem;
     font-family: Helvetica;
     color: #1755ff;
-    line-height: 1.5rem;
+    line-height: 0.92rem;
   }
   .blueText {
-    font-size: 0.49rem;
+    font-size: 0.3rem;
     font-family: Helvetica;
     color: #1755ff;
     line-height: 0.45rem;
     text-align: center;
   }
   .value {
-    font-size: 0.86rem;
+    font-size: 0.54rem;
     font-family: Helvetica;
     color: #3b3b3b;
-    line-height: 1.5rem;
+    line-height: 0.92rem;
     letter-spacing: 0.07rem;
   }
   .threeContent {
-    margin: 1rem 0;
+    margin: 0.62rem 0;
     display: flex;
     width: 100%;
-    height: 2.97rem;
+    height: 1.86rem;
     background: #ecf8fd;
     box-shadow: 0rem 0.05rem 0.14rem 0rem rgba(141, 141, 141, 0.2);
-    border-radius: 4.44rem;
+    border-radius: 2.78rem;
     border: 0.01rem solid #00a6ff;
     .blueText;
   }
   .threeItem {
     flex: 1;
-    margin: 0.46rem 0;
+    margin: 0.22rem 0;
     border-right: 0.03rem solid #bcbaba;
   }
   .threeItem:last-child {
@@ -195,6 +181,38 @@
   }
   .unit {
     .blueText;
+    text-align: left;
     color: #3b3b3b;
   }
+  .circleContent {
+    padding: 0.4rem 1rem;
+    display: flex;
+    justify-content: space-around;
+  }
+
+  .circle {
+    padding: 0.3rem;
+    width: 2.54rem;
+    height: 2.54rem;
+    background: url('@/assets/center/circle.png') no-repeat center;
+    background-size: 100% 100%;
+    .blueText;
+  }
+  .circleValue {
+    .value;
+    text-align: center;
+    width: 1.8rem;
+    height: 1.8rem;
+    border-radius: 50%;
+    line-height: 1.8rem;
+    border: 0.04rem solid #1755ff;
+  }
+  .paddingContent {
+    padding: 0 0.9rem;
+  }
+  .cutLine {
+    background-color: #bcbaba;
+    width: 100%;
+    height: 0.01rem;
+  }
 }

src/pages/SystemDaily/index.js

@@ -1,6 +1,6 @@
 import PageContent from '@/components/PageContent';
+import PageTitle from '@/components/PageTitle';
 import { queryDailyWorkReport } from '@/services/user';
-import { LeftOutlined } from '@ant-design/icons';
 import { useParams, useRequest } from '@umijs/max';
 import { Spin } from 'antd';
 import dayjs from 'dayjs';
@@ -44,13 +44,14 @@ const SystemDaily = (props) => {
     <PageContent closeable={false}>
       <Spin spinning={loading}>
         <div className={styles.titleContent}>
-          <div className={styles.title}>
+          <PageTitle children="系统工作日报" returnable />
+          {/* <div className={styles.title}>
             <LeftOutlined
               onClick={handleOnClick}
               style={{ fontSize: 36, cursor: 'pointer', marginRight: '0.2rem' }}
             />
             系统工作日报
-          </div>
+          </div> */}
           <div className={styles.time}>{dayjs().format('MM月DD日')}</div>
         </div>
         <div className={styles.content}>