修改布局

src/components/TabsContent/index.js

@@ -5,7 +5,7 @@ import styles from './index.less';
 const TabsContent = (props) => {
   const {
     defaultActiveKey = '1',
-    center = false,
+    center = true,
     small = false,
     items = {},
     onChange,

src/components/TabsContent/index.less

@@ -1,11 +1,10 @@
 .tabsTitle {
   display: flex;
-  justify-content: space-evenly;
   align-items: center;
   height: 0.8rem;
   margin-bottom: 0.1rem;
-  padding-left: 0.4rem;
-  width: calc(100% - 0.4rem);
+  // padding-left: 0.4rem;
+  // width: calc(100% - 0.4rem);
   overflow-x: auto;
   overflow-y: hidden;
   border-bottom: 0.015rem solid #bcbaba;

src/global.less

@@ -243,7 +243,7 @@ input[type='reset'] {
 
 .ant-btn-primary {
   background: #4a90e2;
-  font-size: 0.16rem;
+  font-size: 0.22rem;
   padding-top: 0;
   padding-bottom: 0;
 }

src/pages/Menu/index.less

@@ -1,8 +1,8 @@
 .main {
   // margin-top: calc(100vh - 15.2rem);
   float: right;
-  width: 2.29rem;
-  height: 13.2rem;
+  width: 100%;
+  height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
@@ -13,7 +13,7 @@
 .menu {
   // margin-top: 0.6rem;
   width: 100%;
-  height: 11.8rem;
+  height: calc(100vh - 1.6rem);
   display: flex;
   flex-direction: column;
   overflow-y: auto;
@@ -40,7 +40,7 @@ icon:first-child {
   margin-top: 0;
 }
 .arrowCon {
-  width: 2rem;
+  width: 100%;
   height: 1.6rem;
   // text-align: center;
   display: flex;

src/pages/MessageCenter/index.js

@@ -13,15 +13,22 @@ const icon2 = require('@/assets/message/check.png');
 const MessageCenter = () => {
   const { projectId } = useParams();
   const [tab, setTab] = useState('1');
-  const { data, run, loading } = useRequest(getNotificationList, {
-    defaultParams: [{ projectId, msgType: 11 }], //, msgType: 工况：11， 自检：12
+  //, msgType: 工况：11， 自检：12
+  const { data, run, loading } = useRequest(() =>
+    getNotificationList({ projectId, msgType: 11 }),
+  );
+
+  const {
+    data: dataSelf,
+    run: runSelf,
+    loading: loadingSelf,
+  } = useRequest(() => getNotificationList({ projectId, msgType: 12 }), {
+    manual: true,
   });
 
   const handleTabsChange = (tab) => {
     setTab(tab);
-    tab == '1'
-      ? run({ projectId, msgType: 11 })
-      : run({ projectId, msgType: 12 });
+    tab == '1' ? run() : runSelf();
   };
 
   const handleReadClick = () => {
@@ -78,8 +85,8 @@ const MessageCenter = () => {
             label: `系统自检`,
             key: '2',
             children: (
-              <Spin spinning={loading}>
-                {data?.list?.map((item) => renderItem(item))}
+              <Spin spinning={loadingSelf}>
+                {dataSelf?.list?.map((item) => renderItem(item))}
               </Spin>
             ),
           },

src/pages/SmartReport/index.js

@@ -291,211 +291,220 @@ const SmartReport = () => {
         <div className={styles.title}>无锡锡山水厂</div>
 
         <Spin spinning={loading}>
-          <Box title="概览">
-            <div className={styles.content}>
-              <TwoBoxItem label="累计进水：" value={in_water} />
-              <TwoBoxItem label="累计出水：" value={out_water} />
+          <div className={styles.scrollContent}>
+            <Box title="概览">
+              <div className={styles.content}>
+                <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: '次',
+                    },
+                  ]}
+                />
 
-              <ThreeBoxContent
+                <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="水量">
+              <CircleContent
                 data={[
-                  { label: '吨水能耗', value: water_electricity, unit: 'kwh' },
-                  { label: '吨水药耗', value: water_medicine, unit: 'kg/m³' },
-                  {
-                    label: '系统自检次数',
-                    value: self_inspection_task,
-                    unit: '次',
-                  },
+                  { label: '累计进水', value: in_water },
+                  { label: '累计出水', value: out_water },
                 ]}
               />
+            </Box>
 
-              <TwoBoxItem
-                label="优化建议："
-                value={push_optimize_task}
-                unit="条"
-              />
-              <TwoBoxItem
-                label="任务完成："
-                value={push_complete_task}
-                unit="个"
-              />
-
-              <ThreeBoxContent
+            <Box title="能耗">
+              <CircleContent
                 data={[
-                  {
-                    label: '工单完成',
-                    value: work_order_complete_task,
-                    unit: '个',
-                  },
-                  { label: '设备维修', value: repair_record, unit: '个' },
-                  {
-                    label: '设备保养',
-                    value: maintain_record,
-                    unit: '个',
-                  },
+                  { label: '吨水能耗', value: water_electricity, unit: '' },
+                  { label: '累计耗电量', value: electricity, unit: 'kwh' },
                 ]}
               />
-            </div>
-          </Box>
-          <Box title="水量">
-            <CircleContent
-              data={[
-                { label: '累计进水', value: in_water },
-                { label: '累计出水', value: out_water },
-              ]}
-            />
-          </Box>
-
-          <Box title="能耗">
-            <CircleContent
-              data={[
-                { label: '吨水能耗', value: water_electricity, unit: '' },
-                { label: '累计耗电量', value: electricity, unit: 'kwh' },
-              ]}
-            />
-          </Box>
-
-          <Box title="药耗">
-            <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>
-              <CircleThreeContent
+            </Box>
+
+            <Box title="药耗">
+              <CircleContent
                 data={[
-                  { label: '自检次数', value: self_inspection_task },
-                  { label: '异常次数', value: self_inspection_abnormal_task },
-                  { label: '正常次数', value: self_inspection_normal_task },
+                  { label: '吨水药耗', value: water_medicine, unit: 'kg/m³' },
+                  { label: '累计用药量', value: medicine },
                 ]}
               />
-              <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: '6rem',
-                    width: 'calc(100% - 1.2rem)',
-                    margin: '0 0 0 0.8rem',
-                  }}
+            </Box>
+
+            <div className={styles.box}>
+              <div className={styles.main_in}>
+                <div className={styles.titleContent}>系统自检</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: '6rem',
+                      margin: '0 0 0 0.8rem',
+                    }}
+                  />
+                </div>
               </div>
             </div>
-          </div>
 
-          <div className={styles.box}>
-            <div className={styles.main_in}>
-              <div className={styles.titleContent}>智慧运营</div>
-              <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: '6rem',
-                    width: 'calc(100% - 1.2rem)',
-                    margin: '0 0 0 0.8rem',
-                  }}
+            <div className={styles.box}>
+              <div className={styles.main_in}>
+                <div className={styles.titleContent}>智慧运营</div>
+                <CircleThreeContent
+                  data={[
+                    {
+                      label: '优化条数',
+                      value: push_optimize_task,
+                      unit: '条',
+                    },
+                    { label: '超滤能耗', value: ele_65 },
+                    { label: '反渗透能耗', value: ele_66 },
+                  ]}
                 />
-              </div>
-              {/* <div style={{ padding: '0.2rem 0.2rem 0 0.2rem' }}>
+                <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: '6rem',
+                      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
                 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>
-              <CircleContent
-                data={[
-                  { label: '任务数量', value: push_task },
-                  { label: '工单数量', value: work_order_task },
-                ]}
-              />
-              <CircleContent
-                data={[
-                  { label: '任务完成数量', value: push_complete_task },
-                  { label: '工单完成数量', value: work_order_complete_task },
-                ]}
-              />
+            <div className={styles.box}>
+              <div className={styles.main_in}>
+                <div className={styles.titleContent}>任务工单</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 className={styles.unit}>任务类型统计：</div>
+                    <div
+                      ref={taskDomRef}
+                      style={{
+                        height: '6rem',
+                        width: '100%',
+                        marginTop: '0.2rem',
+                      }}
+                    ></div>
+                  </div>
+                  <div className={styles.item}>
+                    <div className={styles.unit}>工单类型统计：</div>
+                    <div
+                      ref={workDomRef}
+                      style={{
+                        height: '6rem',
+                        width: '100%',
+                        marginTop: '0.2rem',
+                      }}
+                    ></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <Box title="设备维修保养">
               <CircleContent
                 data={[
                   {
-                    label: '任务完成率',
-                    value: push_complete_task_per,
-                    unit: '%',
+                    label: '维修数量',
+                    value: repair_record,
                   },
                   {
-                    label: '工单完成率',
-                    value: work_order_complete_task_per,
-                    unit: '%',
+                    label: '保养数量',
+                    value: maintain_record,
                   },
                 ]}
               />
-              <div style={{ display: 'flex', padding: '0 0.4rem' }}>
-                <div className={styles.item}>
-                  <div className={styles.unit}>任务类型统计：</div>
-                  <div
-                    ref={taskDomRef}
-                    style={{
-                      height: '6rem',
-                      width: '100%',
-                      marginTop: '0.2rem',
-                    }}
-                  ></div>
-                </div>
-                <div className={styles.item}>
-                  <div className={styles.unit}>工单类型统计：</div>
-                  <div
-                    ref={workDomRef}
-                    style={{
-                      height: '6rem',
-                      width: '100%',
-                      marginTop: '0.2rem',
-                    }}
-                  ></div>
-                </div>
-              </div>
-            </div>
+            </Box>
           </div>
-          <Box title="设备维修保养">
-            <CircleContent
-              data={[
-                {
-                  label: '维修数量',
-                  value: repair_record,
-                },
-                {
-                  label: '保养数量',
-                  value: maintain_record,
-                },
-              ]}
-            />
-          </Box>
         </Spin>
       </ConfigProvider>
     </PageContent>
@@ -542,6 +551,7 @@ const getPieOption = (chartData, isLeft = false) => {
         type: 'pie',
         top: isLeft ? 0 : '20%',
         radius: isLeft ? '60%' : '40%',
+        left: isLeft ? '20%' : 0,
         label: isLeft ? {} : { fontSize: 10 },
         data: chartData,
         emphasis: {

src/pages/SmartReport/index.less

@@ -63,7 +63,7 @@
   }
 }
 .title {
-  margin: 0.82rem 0.4rem;
+  margin: 0.4rem 0.4rem 0.2rem 0.4rem;
   font-size: 0.54rem;
   font-family: Helvetica;
   color: #3b3b3b;
@@ -82,6 +82,11 @@
   color: #ffffff;
   letter-spacing: 0.04rem;
 }
+.scrollContent {
+  height: calc(100vh - 2.2rem);
+  overflow: auto;
+  padding-top: 0.4rem;
+}
 
 .box {
   position: relative;
@@ -112,7 +117,7 @@
   .content {
     display: flex;
     justify-content: space-between;
-    padding: 0.8rem 0.9rem 0.64rem;
+    padding: 0.4rem 0.6rem 0.2rem;
     flex-wrap: wrap;
   }
   .item {