Merge branch 'develop' of http://120.55.44.4:10080/xujunjie/gt_client_pad into develop

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/Center/MyTask/Detail/TaskDetail.js

@@ -39,10 +39,12 @@ function TaskDetail(props) {
       title: '详情',
       dataIndex: 'detail',
       key: 'key',
-      render: (value, record) => {
+      render: (value, _record, index) => {
         return (
           <div style={{ display: 'flex', alignItems: 'center' }}>
-            <div style={{ width: '100%' }}>{value.text}</div>
+            <div style={{ width: '100%' }}>
+              {index + 1}、{value.text}
+            </div>
           </div>
         );
       },

src/pages/Home/index.js

@@ -16,7 +16,7 @@ const HomePage = (props) => {
   });
   // useEffect(() => {
   //   localStorage.width = document.documentElement.getBoundingClientRect().width;
-  //   window.refreshRem();
+  //   window.refreshpx();
   // }, []);
   return (
     <div className={styles.content}>
@@ -63,6 +63,7 @@ const SmartWork = (props) => {
   const { data } = props;
   return (
     <Box
+      small={true}
       title="水厂工况"
       onClick={() => UnityAction.sendMsg('menuItem', '工况管理')}
     >
@@ -117,11 +118,11 @@ const WaterQuality = (props) => {
     >
       <ul>
         <li>
-          <div className={styles.value}>{data?.dsan}</div>
+          <div className={styles.value}>{data?.dsan || 0}</div>
           <div className={styles.btn1}>出水余氯</div>
         </li>
         <li>
-          <div className={styles.value}>{data?.dtur}</div>
+          <div className={styles.value}>{data?.dtur || 0}</div>
           <div className={styles.btn2}>出水浊度</div>
         </li>
       </ul>
@@ -164,6 +165,7 @@ const SelfInspection = connect(({ eqSelfInspection, loading }) => ({
 
   return (
     <Box
+      small={true}
       title="系统自检"
       onClick={() => UnityAction.sendMsg('menuItem', '系统自检')}
     >
@@ -261,12 +263,9 @@ const Scada = () => {
       title="工艺监控"
       onClick={() => UnityAction.sendMsg('menuItem', '工艺监控')}
     >
-      <div
-        className={styles.scada}
-        style={{ width: '5.7rem', height: '2.8rem' }}
-      >
+      <div className={styles.scada} style={{ width: '540px', height: '270px' }}>
         {data?.map((url) => (
-          <iframe style={{ width: '5.7rem', height: '2.8rem' }} src={url} />
+          <iframe style={{ width: '540px', height: '270px' }} src={url} />
         ))}
         <div className={styles.mask}></div>
       </div>
@@ -328,10 +327,10 @@ const Backlog = (props) => {
   );
 };
 
-const Box = ({ title, children, onClick, big }) => {
+const Box = ({ title, children, onClick, small }) => {
   return (
     <div
-      className={`${styles.box} ${big ? styles.boxBig : ''}`}
+      className={`${styles.box} ${small ? '' : styles.boxH}`}
       onClick={onClick}
     >
       <div className={styles.titleContent}>

src/pages/Home/index.less

@@ -4,14 +4,25 @@
   align-items: center;
   height: 100vh;
   width: 100%;
-  padding-top: 0.9rem;
+  padding-top: 80px;
   color: #3b3b3b;
 }
+.left {
+  text-align: center;
+  width: 25%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+.right {
+  .left;
+}
 .box {
-  width: 6.4rem;
-  padding: 0.24rem;
+  width: 610px;
+  padding: 24px;
+  text-align: left;
   position: relative;
-  margin-bottom: 0.1rem;
   display: inline-block;
   cursor: pointer;
   background: url('@/assets/home-box-bg.png') no-repeat center;
@@ -22,27 +33,26 @@
   // }
 
   .titleContent {
-    margin: 0.2rem 0.38rem;
+    margin: 20px 38px;
     display: inline-block;
     position: relative;
   }
 
   .boxTitle {
-    padding: 0 0.1rem;
+    padding: 0 10px;
     position: relative;
     // z-index: 99;
-    font-size: 0.32rem;
+    font-size: 32px;
     font-weight: 600;
     color: #0139f1;
-    line-height: 0.34rem;
+    line-height: 34px;
     z-index: 1;
   }
   .line {
     position: absolute;
-    // left: 0.38rem;
     bottom: 0;
     width: 100%;
-    height: 0.14rem;
+    height: 14px;
     background: url('@/assets/home-box-line.png') no-repeat center;
     background-size: 100% 100%;
     z-index: 0;
@@ -56,31 +66,31 @@
     }
   }
   .name {
-    font-size: 0.22rem;
+    font-size: 22px;
     font-weight: 400;
     color: #ffffff;
-    line-height: 0.28rem;
+    line-height: 28px;
     text-align: center;
-    margin-top: 0.18rem;
+    margin-top: 18px;
   }
   .value {
-    margin: 0.6rem 0;
-    font-size: 0.4rem;
+    margin: 60px 0;
+    font-size: 40px;
     font-weight: 600;
     color: #3b3b3b;
-    line-height: 0.5rem;
+    line-height: 50px;
     text-align: center;
-    letter-spacing: 0.04rem;
+    letter-spacing: 4px;
     font-family: PangMenZhengDao-3, PangMenZhengDao-3;
   }
 }
-.boxBig {
+.boxH {
   .box;
-  background-image: url('@/assets/home-box-bg2.png');
+  height: 420px;
 }
 .scada {
-  margin-bottom: 0.2rem;
-  padding: 0 0.1rem;
+  margin-bottom: 20px;
+  padding: 0 10px;
   position: relative;
   .mask {
     position: absolute;
@@ -91,14 +101,14 @@
   }
 }
 .scadaContent {
-  padding: 0.2rem;
-  height: 3rem;
-  width: 10rem;
+  padding: 20px;
+  height: 30px;
+  width: 1000px;
   display: flex;
   justify-content: space-between;
   iframe {
     height: 100%;
-    width: calc(50% - 0.1rem);
+    width: calc(50% - 10px);
     border: none;
     pointer-events: none;
   }
@@ -108,26 +118,26 @@
   display: flex;
   justify-content: space-around;
   .score {
-    font-size: 0.5rem;
+    font-size: 50px;
     font-weight: 600;
     font-family: PangMenZhengDao-3, PangMenZhengDao-3;
     color: #615d5d;
   }
   .scoreTitle {
-    width: 3rem;
-    font-size: 0.4rem;
-    margin-top: 0.2rem;
+    width: 300px;
+    font-size: 40px;
+    margin-top: 20px;
     font-family: Source Han Sans, Source Han Sans;
     color: #3b3b3b;
   }
 
   .grade {
-    font-size: 0.22rem;
-    margin-top: 0.1rem;
+    font-size: 22px;
+    margin-top: 10px;
   }
   .circle {
-    width: 1.78rem;
-    height: 1.78rem;
+    width: 178px;
+    height: 178px;
     text-align: center;
     display: flex;
     flex-direction: column;
@@ -139,53 +149,55 @@
 }
 
 .time {
-  font-size: 0.22rem;
-  margin-bottom: 0.2rem;
+  font-size: 22px;
+  margin-bottom: 20px;
   text-align: right;
-  margin-right: 0.3rem;
+  margin-right: 30px;
 }
 .insTag {
   position: absolute;
-  right: 0.54rem;
-  top: 0.44rem;
-  width: 1.14rem;
-  height: 0.5rem;
+  right: 54px;
+  top: 44px;
+  width: 114px;
+  height: 50px;
   background: #4a90e2;
-  border-radius: 0.05rem;
+  border-radius: 5px;
   text-align: center;
-  line-height: 0.5rem;
+  line-height: 50px;
 
-  font-size: 0.26rem;
+  font-size: 26px;
   font-weight: 400;
   color: #ffffff;
 }
 
 .insStatus {
   text-align: center;
-  font-size: 0.42rem;
+  font-size: 42px;
   font-weight: 500;
   color: #f5a623;
-  line-height: 0.56rem;
-  margin-top: 0.5rem;
-  margin-bottom: 0.22rem;
+  line-height: 56px;
+  margin-top: 50px;
+  margin-bottom: 22px;
 }
 .centerBox {
+  width: 50%;
   display: flex;
-  height: calc(100vh - 0.9rem);
+  justify-content: space-around;
+  height: calc(100vh - 80px);
   align-items: flex-end;
 }
 .backlog {
-  margin-bottom: 0.4rem;
-  padding: 0 0.2rem;
+  margin-bottom: 40px;
+  padding: 0 20px;
   overflow-y: auto;
-  height: 2.6rem;
+  height: 260px;
   color: #3b3b3b;
   .item {
-    padding: 0.08rem 0 0.2rem;
+    padding: 8px 0 20px;
     width: 100%;
-    font-size: 0.22rem;
-    line-height: 0.5rem;
-    border-bottom: 0.01rem solid #ffffff;
+    font-size: 22px;
+    line-height: 50px;
+    border-bottom: 1px solid #ffffff;
   }
   .titleCon {
     display: flex;
@@ -193,38 +205,38 @@
   }
   .point {
     display: inline-block;
-    width: 0.12rem;
-    height: 0.24rem;
+    width: 12px;
+    height: 24px;
     background-color: #ff8400;
   }
   .createTime {
     float: right;
   }
   .titleText {
-    font-size: 0.22rem;
-    margin: 0 0.2rem;
+    font-size: 22px;
+    margin: 0 20px;
   }
   .bottomCon {
-    font-size: 0.18rem;
+    font-size: 18px;
     word-wrap: break-word;
   }
 }
 .count {
   background: #f69040;
-  border-radius: 0.04rem;
-  margin-left: 0.1rem;
-  padding: 0 0.06rem;
+  border-radius: 4px;
+  margin-left: 10px;
+  padding: 0 6px;
 }
 
 .btn1 {
-  margin-bottom: 0.2rem;
-  padding: 0.14rem 0.3rem;
-  font-size: 0.32rem;
+  margin-bottom: 20px;
+  padding: 14px 28px;
+  font-size: 32px;
   font-family: Source Han Sans, Source Han Sans;
   font-weight: 500;
   color: #ffffff;
   display: inline-block;
-  border-radius: 1rem;
+  border-radius: 100px;
   background-color: #1755ff;
 }
 .btn2 {
@@ -236,24 +248,24 @@
   justify-content: space-around;
   align-items: center;
   .circle {
-    width: 1.78rem;
-    height: 1.78rem;
+    width: 178px;
+    height: 178px;
     text-align: center;
-    line-height: 1.78rem;
+    line-height: 178px;
     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;
+    width: 119px;
+    height: 50px;
+    font-size: 50px;
     font-family: Source Han Sans, Source Han Sans;
     font-weight: 500;
   }
   .texting {
-    width: 2rem;
-    font-size: 0.4rem;
-    margin-top: 0.2rem;
+    width: 200px;
+    font-size: 40px;
+    margin-top: 20px;
     font-family: Source Han Sans, Source Han Sans;
     color: #3b3b3b;
   }

src/pages/Menu/index.less

@@ -1,19 +1,16 @@
 .main {
-  // margin-top: calc(100vh - 15.2rem);
   float: right;
-  width: 2.29rem;
-  height: 13.2rem;
+  width: 1.98rem;
+  height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  // background-color: #aaacae;
-  // background: url('@/assets/menu/menu_bg.png') no-repeat center;
-  // background-size: 100% 100%;
+  background: url('@/assets/menu/right_bg.png') no-repeat center;
+  background-size: 100% 100%;
 }
 .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 +37,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/Projects/index.less

@@ -1,8 +1,8 @@
 .main {
   width: 100%;
   height: 100vh;
-  // background: url('@/assets/projects/bg.png') no-repeat center;
-  // background-size: 100% 100%;
+  background: url('@/assets/projects/bg.png') no-repeat center;
+  background-size: 100% 100%;
   .titleCon {
     margin: 0 1.8rem;
     padding: 2.64rem 0 0.4rem;

src/pages/SmartOps/Analysis.js

@@ -104,9 +104,7 @@ const Analysis = (props) => {
     console.log(data);
     // alert(e)
     const itemIndex = data?.findIndex((item) => item.type == tab);
-    const item = data[itemIndex]?.data?.find(
-      (item) => item.DeviceCode == e,
-    );
+    const item = data[itemIndex]?.data?.find((item) => item.DeviceCode == e);
     if (item) {
       const dom = document.querySelector(`tr[data-row-key="${item.index}"]`);
       if (dom) {
@@ -157,7 +155,7 @@ const Analysis = (props) => {
     // selectedList[0] = index;
     setSelectedRowKeys(index);
     UnityAction.sendMsg('SynDev', record.DeviceCode);
-      };
+  };
 
   const setRowClassName = (record, index) => {
     if (!selectedRowKeys && selectedRowKeys !== 0) return;
@@ -168,32 +166,34 @@ const Analysis = (props) => {
 
   return (
     <Spin spinning={loading}>
-      <TabsContent
-        small={true}
-        center={false}
-        defaultActiveKey="1"
-        items={data?.map((item) => {
-          return {
-            label: `${item.name}(${item.data?.length || 0})`,
-            key: item.type,
-            children: (
-              <Table
-                dataSource={item.data}
-                columns={columns}
-                rowKey={'index'}
-                // rowSelection={rowSelection}
-                rowClassName={setRowClassName}
-                onRow={(record, index) => ({
-                  onClick: () => onSelectRow(record, index),
-                })}
-                pagination={false}
-                scroll={{ y: document.body.clientHeight - 730 }}
-              />
-            ),
-          };
-        })}
-        onChange={onTabChange}
-      />
+      <div style={{ height: 'calc(100vh - 5.6rem)', overflow: 'auto' }}>
+        <TabsContent
+          small={true}
+          center={false}
+          defaultActiveKey="1"
+          items={data?.map((item) => {
+            return {
+              label: `${item.name}(${item.data?.length || 0})`,
+              key: item.type,
+              children: (
+                <Table
+                  dataSource={item.data}
+                  columns={columns}
+                  rowKey={'index'}
+                  // rowSelection={rowSelection}
+                  rowClassName={setRowClassName}
+                  onRow={(record, index) => ({
+                    onClick: () => onSelectRow(record, index),
+                  })}
+                  pagination={false}
+                  scroll={{ y: document.body.clientHeight - 730 }}
+                />
+              ),
+            };
+          })}
+          onChange={onTabChange}
+        />
+      </div>
     </Spin>
   );
 };

src/pages/SmartOps/components/DeviceAnalysis.js

@@ -168,7 +168,7 @@ const DeviceAnalysis = (props) => {
 
   return (
     <Spin spinning={loading}>
-      <div>
+      <div style={{ height: 'calc(100vh - 5.6rem)', overflow: 'auto' }}>
         <TabsContent
           small={true}
           center={false}

src/pages/SmartOps/components/VideoAnalysis.js

@@ -72,36 +72,38 @@ function VideoAnalysis(props) {
 
   return (
     <Spin spinning={loading}>
-      <TabsContent
-        small={true}
-        center={false}
-        defaultActiveKey="1"
-        items={[
-          {
-            label: `异常(${videoNum})`,
-            key: '1',
-            children: (
-              <AnalysisContent
-                errorData={errorData}
-                selectedName={selectedName}
-                setSelectedName={setSelectedName}
-              />
-            ),
-          },
-          {
-            label: `全部(${allCount})`,
-            key: '2',
-            children: (
-              <AllContent
-                videoData={videoData}
-                selectedName={selectedName}
-                setSelectedName={setSelectedName}
-              />
-            ),
-          },
-        ]}
-        onChange={onTabChange}
-      />
+      <div style={{ height: 'calc(100vh - 5.6rem)', overflow: 'auto' }}>
+        <TabsContent
+          small={true}
+          center={false}
+          defaultActiveKey="1"
+          items={[
+            {
+              label: `异常(${videoNum})`,
+              key: '1',
+              children: (
+                <AnalysisContent
+                  errorData={errorData}
+                  selectedName={selectedName}
+                  setSelectedName={setSelectedName}
+                />
+              ),
+            },
+            {
+              label: `全部(${allCount})`,
+              key: '2',
+              children: (
+                <AllContent
+                  videoData={videoData}
+                  selectedName={selectedName}
+                  setSelectedName={setSelectedName}
+                />
+              ),
+            },
+          ]}
+          onChange={onTabChange}
+        />
+      </div>
     </Spin>
   );
 }

src/pages/SmartOps/index.js

@@ -171,7 +171,7 @@ function SmartOps(props) {
           data.environment_list?.filter((item) => item.status)?.length || 0;
         // const count3 =
         //   data.fluid_level_list?.filter((item) => item.status)?.length || 0;
-        setVideoNum(count1 + count2 + count3);
+        setVideoNum(count1 + count2);
         const Cam =
           data.dumu_list?.map((item) => {
             item.key = `dumu_${item.id}`;

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 {

src/pages/TaskManage/Detail/TaskDetail/TaskDetail.tsx

@@ -74,10 +74,12 @@ function TaskDetail(props: IPropsType) {
       title: '详情',
       dataIndex: 'detail',
       key: 'key',
-      render: (value, record) => {
+      render: (value, _record, index) => {
         return (
           <div style={{ display: 'flex', alignItems: 'center' }}>
-            <div style={{ width: '100%' }}>{value.text}</div>
+            <div style={{ width: '100%' }}>
+              {index + 1}、{value.text}
+            </div>
           </div>
         );
       },

src/pages/TaskManage/components/MandateDetail.js

@@ -61,6 +61,13 @@ const MandateDetail = (props) => {
   const [dispatchModalOpen, setDispatchModalOpen] = useState(false);
 
   const columns = [
+    {
+      title: '序号',
+      key: 'index',
+      render: (_text, _record, index) => {
+        return index + 1 + '、';
+      },
+    },
     {
       title: '参数',
       dataIndex: 'Title',