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

src/components/ManagementPage/index.less

@@ -1,16 +1,19 @@
 .icon {
   float: left;
-  width: 0.07rem;
-  height: 0.32rem;
-  margin: 0.04rem 0;
+  width: 0.1rem;
+  height: 0.1rem;
+  // margin: 0.04rem 0;
+  margin-top: 0.1rem;
   background-color: #366cda;
 }
+
 .title {
   padding-left: 0.12rem;
-  font-size: 0.3rem;
-  font-weight: 400;
-  color: #4a4a4a;
-  line-height: 0.4rem;
+  line-height: 1;
+
+  font-size: 0.28rem;
+  font-family: Source Han Sans, Source Han Sans;
+  color: #615d5d;
 }
 .right {
   color: #366cda;

src/components/TabsContent/index.less

@@ -32,7 +32,8 @@
 
 .small {
   height: inherit;
-  padding: 0.2rem 0;
+  width: 100%;
+  border-bottom: none;
   .tabsItem {
     font-size: 0.28rem;
     padding: 0 0.3rem;

src/global.less

@@ -46,6 +46,19 @@ button {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+@font-face {
+  font-family: 'PangMenZhengDao-3';
+  src: url('@/assets/fonts/PangMenZhengDao-3.ttf');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'PangMenZhengDao';
+  src: url('@/assets/fonts/PangMenZhengDao.ttf');
+  font-weight: normal;
+  font-style: normal;
+}
 body {
   color: #333;
   .ant-collapse-header {
@@ -132,7 +145,15 @@ input[type='reset'] {
 .card-box {
   border-radius: 0.4rem 0 0.4rem 0;
   background: #ffffff;
-  box-shadow: 0.01rem 0.06rem 0.1rem 0rem rgba(0, 0, 0, 0.1);
+  // box-shadow: 0.01rem 0.06rem 0.1rem 0rem rgba(0, 0, 0, 0.1);
+}
+.value-number {
+  font-size: 0.8rem;
+  font-family: PangMenZhengDao-3, PangMenZhengDao-3;
+  font-weight: 400;
+  color: #3b3b3b;
+  line-height: 0.62rem;
+  letter-spacing: 0.06rem;
 }
 
 .content-tab {
@@ -146,7 +167,7 @@ input[type='reset'] {
 .content-title {
   padding-left: 0.05rem;
   padding-right: 0.05rem;
-  height: calc(100vh - 1.1rem);
+  height: calc(100vh - 1.15rem);
   overflow-x: hidden;
   overflow-y: auto;
 }
@@ -226,8 +247,9 @@ input[type='reset'] {
   padding-top: 0;
   padding-bottom: 0;
 }
+
 .ant-table {
-  background-color: white !important;
+  background: #fff;
 }
 .ant-table-cell,
 .ant-table-placeholder {
@@ -246,21 +268,34 @@ input[type='reset'] {
   display: none;
 }
 .ant-table-thead {
-  background: #cbe0f6;
+  background: rgba(23, 85, 255, 0.5);
 }
-.ant-table-thead > tr > th,
-.ant-table-tbody > tr > td {
-  border-radius: 0 !important;
-  padding: 0.16rem 0.18rem !important;
-  font-size: 0.24rem !important;
-  color: #4a4a4a !important;
-  line-height: 0.32rem !important;
-  font-weight: normal !important;
+.ant-table-wrapper .ant-table-thead > tr > th,
+.ant-table-wrapper .ant-table-tbody > tr > td {
+  border-radius: 0;
+  padding: 0.12rem 0.18rem;
+  font-size: 0.28rem;
+  color: rgba(97, 93, 93, 1);
+  line-height: 0.32rem;
+  font-weight: normal;
   vertical-align: middle;
-  border: none !important;
+  border-radius: 0 !important;
+}
+
+.ant-table-wrapper .ant-table-thead > tr > th {
+  border: 0 none !important;
+  color: #fff;
+}
+.ant-table-wrapper .ant-table-tbody > tr > td {
+  border-bottom: 1px solid rgba(188, 186, 186, 1);
 }
-.ant-table-tbody > tr:nth-child(even) {
-  background: rgba(145, 192, 238, 0.16);
+
+// .ant-table-tbody > tr:nth-child(even) {
+//   background: rgba(145, 192, 238, 0.16);
+// }
+
+.ant-table-cell::before {
+  display: none;
 }
 
 .ant-picker {
@@ -277,12 +312,12 @@ input[type='reset'] {
   font-size: 0.26rem;
 }
 .ant-select-selector {
-  height: 0.4rem;
+  // height: 0.4rem;
   padding: 0.04rem 0.11rem;
 }
 
 .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
-  height: 0.4rem;
+  // height: 0.4rem;
   padding: 0.04rem 0.11rem;
 }
 .ant-select-single .ant-select-selector {

src/pages/Controller/Device.js

@@ -34,7 +34,7 @@ function Hardware() {
 
     return `${styles.icon} ${statusClassName}`;
   });
-  const onHandleClick = item => {
+  const onHandleClick = (item) => {
     UnityAction.sendMsg('SingleDevLocate', JSON.stringify([item]));
   };
   useEffect(() => {
@@ -56,7 +56,7 @@ function Hardware() {
       {data?.list?.map((item) => (
         <div
           key={item.id}
-          className={`card-box ${styles.item}`}
+          className={`card-box ${styles.itemLong}`}
           style={{ justifyContent: 'space-between' }}
           onClick={() => onHandleClick(item)}
         >

src/pages/Controller/components/AirConditioner.js

@@ -22,34 +22,36 @@ const Work = (props) => {
 
   return (
     <div>
-      <div className={`card-box ${styles.top}`}>
+      <div className={styles.top}>
         <div className={styles.left}>
           <img
             className={styles.img}
             src={require('@/assets/air-conditioner.png')}
           />
           <div>
-            <div className={styles.number}>{data?.pagination?.total}</div>
+            <div className="value-number">{data?.pagination?.total}</div>
             空调数量
           </div>
         </div>
         <div className={styles.right}>
-          <div className={styles.row}>
+          <div>
             <i className={styles.icon}></i> 在线：{data?.online_count}
           </div>
-          <div className={styles.row}>
+          <div>
             <i className={`${styles.icon} ${styles.offline}`}></i> 离线：
             {data?.offline_count}
           </div>
         </div>
       </div>
       <Spin spinning={loading}>
-        {data?.list?.map((item) => (
-          <div key={item.id} className={`card-box ${styles.item}`}>
-            <i className={`${styles.icon} ${getIconStatus(item.status)}`}></i>{' '}
-            {item.name}
-          </div>
-        ))}
+        <div className={styles.listContent}>
+          {data?.list?.map((item) => (
+            <div key={item.id} className={`card-box ${styles.item}`}>
+              <i className={`${styles.icon} ${getIconStatus(item.status)}`}></i>
+              {item.name}
+            </div>
+          ))}
+        </div>
       </Spin>
     </div>
   );

src/pages/Controller/components/Light.js

@@ -22,14 +22,14 @@ const Work = (props) => {
 
   return (
     <div>
-      <div className={`card-box ${styles.top}`}>
+      <div className={styles.top}>
         <div className={styles.left}>
           <img
             className={styles.img}
             src={require('@/assets/air-conditioner.png')}
           />
           <div>
-            <div className={styles.number}>{data?.pagination?.total}</div>
+            <div className="value-number">{data?.pagination?.total}</div>
             照明数量
           </div>
         </div>
@@ -44,12 +44,14 @@ const Work = (props) => {
         </div>
       </div>
       <Spin spinning={loading}>
-        {data?.list?.map((item) => (
-          <div key={item.id} className={`card-box ${styles.item}`}>
-            <i className={`${styles.icon} ${getIconStatus(item.status)}`}></i>{' '}
-            {item.name}
-          </div>
-        ))}
+        <div className={styles.listContent}>
+          {data?.list?.map((item) => (
+            <div key={item.id} className={`card-box ${styles.item}`}>
+              <i className={`${styles.icon} ${getIconStatus(item.status)}`}></i>{' '}
+              {item.name}
+            </div>
+          ))}
+        </div>
       </Spin>
     </div>
   );

src/pages/Controller/index.js

@@ -12,22 +12,25 @@ const HardwareController = (props) => {
       <PageTitle>智能管控</PageTitle>
 
       <div
-        className={`card-box ${styles.item}`}
+        className={`card-box ${styles.itemLong}`}
         onClick={() => UnityAction.sendMsg('innerItem', 'scada')}
       >
         工艺监控
+        <div className={styles.arr}></div>
       </div>
       <div
-        className={`card-box ${styles.item}`}
+        className={`card-box ${styles.itemLong}`}
         onClick={() => UnityAction.sendMsg('innerItem', 'sensor')}
       >
         感知监控
+        <div className={styles.arr}></div>
       </div>
       <div
-        className={`card-box ${styles.item}`}
+        className={`card-box ${styles.itemLong}`}
         onClick={() => UnityAction.sendMsg('innerItem', 'locate')}
       >
         室内定位
+        <div className={styles.arr}></div>
       </div>
     </PageContent>
   );

src/pages/Controller/index.less

@@ -1,9 +1,13 @@
 .top {
   display: flex;
-  padding: 0.48rem 0.6rem 0.25rem;
+  padding: 0.48rem 1.8rem 0.25rem 0;
+  font-family: Source Han Sans, Source Han Sans;
+  font-weight: 500;
+  color: #615d5d;
+  font-size: 0.32rem;
+  justify-content: space-around;
   .left {
-    width: 50%;
-    font-size: 0.28rem;
+    // width: 50%;
     display: flex;
     align-items: center;
   }
@@ -11,33 +15,49 @@
     width: 1.52rem;
     margin-right: 0.45rem;
   }
-  .number {
-    font-size: 0.8rem;
-    font-weight: bold;
-    margin-bottom: 0.1rem;
-    color: #4A90E2;
-  }
   .right {
     display: flex;
     flex-direction: column;
     justify-content: space-around;
   }
-  .row {
-    font-size: 0.32rem;
+}
+
+.listContent {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.itemLong {
+  padding: 0.6rem 0.4rem 0.6rem 1rem;
+  font-size: 0.32rem;
+  margin-top: 0.28rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-family: Source Han Sans, Source Han Sans;
+  color: #615d5d;
+  line-height: 32px;
+  letter-spacing: 0.04rem;
+  box-shadow: 0.01rem 0.06rem 0.1rem 0rem rgba(0, 0, 0, 0.1);
+  .arr {
+    width: 0.14rem;
+    height: 0.22rem;
+    background: url('@/assets/arr-right2.png') no-repeat center;
+    background-size: 100% 100%;
   }
 }
 .item {
   padding: 0.4rem 0.6rem;
-  
   font-size: 0.32rem;
   margin-top: 0.28rem;
   display: flex;
   align-items: center;
+  width: 48%;
 }
 .icon {
   width: 0.2rem;
   height: 0.2rem;
-  border-radius: 50%;
+  // border-radius: 50%;
   display: inline-block;
   background-color: #12ceb3;
   margin-right: 0.44rem;

src/pages/DeviceManager/index.js

@@ -239,10 +239,10 @@ const Device = ({ projectId }) => {
   return (
     <div className={`content-tab ${styles.sparePart}`}>
       <Spin spinning={loadingDevice}>
-        <div className={`card-box ${styles.titleContent}`}>
+        <div className={styles.titleContent}>
           <img className={styles.img} src={deviceIcon} />
           <div>
-            <div className={styles.num}>{allData?.total}</div>
+            <div className="value-number">{allData?.total}</div>
             <div className={styles.text}>设备总数（个）</div>
           </div>
         </div>
@@ -346,10 +346,10 @@ const SparePart = ({ projectId }) => {
     <Spin spinning={loading}>
       <div className="content-tab">
         <Space direction="vertical" size={16} className={styles.sparePart}>
-          <div className={`card-box ${styles.titleContent}`}>
+          <div className={styles.titleContent}>
             <img className={styles.img} src={spareIcon} />
             <div>
-              <div className={styles.num}>{data?.on_amount || 0}</div>
+              <div className="value-number">{data?.on_amount || 0}</div>
               <div className={styles.text}>在库数量（个）</div>
             </div>
             <div

src/pages/DeviceManager/index.less

@@ -108,10 +108,13 @@
     }
     .ant-collapse-item {
       margin-bottom: 0.16rem;
-      border-radius: 0.08rem;
-      box-shadow: 0rem 0rem 0.08rem 0.02rem rgba(191, 191, 191, 0.2);
-      border: 0.01rem solid #eee;
-      background: rgb(255, 255, 255);
+      // border-radius: 0.08rem;
+      // box-shadow: 0rem 0rem 0.08rem 0.02rem rgba(191, 191, 191, 0.2);
+      // border: 0.01rem solid #eee;
+      // background: rgb(255, 255, 255);
+      border-radius: 0.4rem 0 0.4rem 0 !important;
+      background: #ffffff;
+      box-shadow: 0.01rem 0.06rem 0.1rem 0rem rgba(0, 0, 0, 0.1);
     }
     .ant-collapse
       > .ant-collapse-item

src/pages/EqSelfInspection/components/Detail.js

@@ -33,18 +33,7 @@ function Detail(props) {
       window.HightlightEquipment(data);
     }
   };
-  const getTextColor = (status) => {
-    switch (status) {
-      case '警告':
-        return '#FFE26D';
-      case '异常':
-        return '#FE5850';
-      case '正常':
-        return '#12CEB3';
-      default:
-        return '#12CEB3';
-    }
-  };
+
   const { run: detailRun } = useRequest(getDumuDetail, {
     manual: true,
     fetchKey: (id) => id,
@@ -60,6 +49,26 @@ function Detail(props) {
     var resultArr = [];
     var tempResult = data?.PatrolResult;
     var tempArr = tempResult?.split(';');
+    const getTextColor = (status) => {
+      switch (status) {
+        case '警告':
+          return {
+            color: '#FFE26D',
+            className: styles.warn,
+          };
+        case '异常':
+          return {
+            color: '#FE5850',
+            className: styles.error,
+          };
+
+        default:
+          return {
+            color: '#12CEB3',
+            className: '',
+          };
+      }
+    };
     if (tempArr?.length > 0) {
       tempArr?.forEach((item, index) => {
         var tempItem = item;
@@ -74,9 +83,9 @@ function Detail(props) {
             value = data?.secureStatus === 0 ? '正常' : '异常';
           }
           resultArr.push({
+            ...getTextColor(value),
             label,
             value,
-            color: getTextColor(value),
           });
         }
       });
@@ -103,11 +112,6 @@ function Detail(props) {
   return (
     <Spin spinning={loading} wrapperClassName="card-box">
       <div className={styles.card}>
-        {data.Status == 0 ? (
-          <div className={`${styles.orderIcon}`}>正常</div>
-        ) : (
-          <div className={`${styles.orderIcon} ${styles.error}`}>异常</div>
-        )}
         <Row>
           <Col span={24} className={styles.cardText}>
             自检时间：{data?.CreatedTime}
@@ -125,16 +129,19 @@ function Detail(props) {
           {result?.map((item) => {
             return (
               <Col span={8} className={styles.cardText}>
-                {item?.label}：
-                <span style={{ color: item.color, fontWeight: 'bold' }}>
-                  {item?.value}
-                </span>
+                <div className={styles.statusBox}>
+                  <div className={`${styles.orderIcon} ${item.className}`}>
+                    {item.value}
+                  </div>
+                  {item?.label}
+                </div>
               </Col>
             );
           })}
         </Row>
       </div>
       <div style={{ padding: 20, background: '#fff' }}>
+        <ModuleTitle title="设备自检" />
         {/* 设备自检报告 */}
         <ReportCom
           sendMessageToUnity={sendMessageToUnity}
@@ -144,7 +151,7 @@ function Detail(props) {
           key="extend"
           type={'extend'}
           userList={userList}
-          title={<ModuleTitle title="设备自检报告" />}
+          title={'设备自检报告'}
         ></ReportCom>
 
         {/* 液位异常 */}
@@ -155,7 +162,7 @@ function Detail(props) {
           key="liquid"
           type={'liquid'}
           userList={userList}
-          title={<ModuleTitle title="液位异常" />}
+          title={'液位异常'}
         />
         {/* 加药流量校验 */}
         {/* <FlowCom
@@ -179,6 +186,7 @@ function Detail(props) {
         </div>
         {/* 安全隐患自检报告"> */}
         <div className={styles.content}>
+          <ModuleTitle title="安全隐患自检报告" />
           {/* 环境异常 */}
           <ReportCom
             sendMessageToUnity={sendMessageToUnity}
@@ -189,7 +197,7 @@ function Detail(props) {
             key="sensor"
             type={'sensor'}
             userList={userList}
-            title={<ModuleTitle title="环境异常" />}
+            title={'环境异常'}
           ></ReportCom>
           {/* 液位异常 */}
           {/* <LiquidLevelCom
@@ -203,10 +211,7 @@ function Detail(props) {
           /> */}
 
           {/* 安防检测异常 */}
-          <ReportDumCom
-            data={dumuList}
-            title={<ModuleTitle title="安防检测异常" />}
-          />
+          <ReportDumCom data={dumuList} title={'安防检测异常'} />
 
           {/* 电器检测异常 */}
           <ReportCom
@@ -217,7 +222,7 @@ function Detail(props) {
             key="extend"
             type={'extend'}
             userList={userList}
-            title={<ModuleTitle title="电气检测异常" />}
+            title={'电气检测异常'}
           ></ReportCom>
 
           {/* 密闭空间检测异常 */}
@@ -229,7 +234,7 @@ function Detail(props) {
             key="extend"
             type={'extend'}
             userList={userList}
-            title={<ModuleTitle title="密闭空间检测异常" />}
+            title={'密闭空间检测异常'}
           ></ReportCom>
         </div>
       </div>
@@ -1169,7 +1174,7 @@ function ReportDumCom(props) {
     },
   ];
   return (
-    <div>
+    <div style={{ marginBottom: '0.3rem' }}>
       <div className={styles.tabBarExtraContent}>
         <div className={styles.text} style={{ width: '60%' }}>
           {title}

src/pages/EqSelfInspection/components/PatrolReportDetail.less

@@ -23,12 +23,13 @@
   display: inline-block;
 }
 .detailCard {
-  margin: 0.1rem 0 0.1rem 0;
+  // margin: 0.2rem 0;
+  margin-bottom: 0.3rem;
 }
 .text {
-  .tabBarExtraContent;
   font-size: 0.26rem;
-  text-align: center;
+  text-align: left;
+  color: #1755ff;
 }
 .abnormal {
   // margin: 0.1rem 0 0.1rem 0;
@@ -45,6 +46,7 @@
   align-items: center;
   height: 100%;
   position: relative;
+  margin-bottom: 0.1rem;
 }
 .tableTop {
   position: relative;
@@ -52,27 +54,57 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  font-size: 0.28rem;
+  font-family: Source Han Sans, Source Han Sans;
+  color: #1755ff;
+  line-height: 0.3rem;
 }
 .card {
-  background: #eff5fc;
-  padding: 0.1rem 0.2rem;
+  background: #fff;
+  // padding: 0.1rem 0.2rem;
+  padding-top: 0.28rem;
+  padding-bottom: 0.4rem;
+  padding-left: 0.6rem;
   position: relative;
   overflow: hidden;
+  border-bottom: 2px solid #4577ff;
+  .cardText {
+    font-size: 0.32rem;
+    font-family: Source Han Sans, Source Han Sans;
+    color: #615d5d;
+    line-height: 1;
+  }
   .orderIcon {
-    background: #4a90e2;
-    width: 3rem;
-    position: absolute;
-    top: 0.4rem;
-    right: -0.92rem;
-    text-align: center;
-    font-size: 0.24rem;
-    transform: rotate(45deg);
-    padding: 0.1rem 0;
-    color: #fff;
+    width: 0.92rem;
+    height: 0.92rem;
+    border-radius: 50%;
+    margin-right: 0.16rem;
+    color: #12ceb3;
+    border: 0.06rem solid #12ceb3;
+    font-size: 0.32rem;
+    font-family: Source Han Sans, Source Han Sans;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     &.error {
-      background: #fe5850;
+      color: #fe5850;
+      border-color: #fe5850;
+    }
+    &.warn {
+      color: #ffe26d;
+      border-color: #ffe26d;
     }
   }
+  .statusBox {
+    display: flex;
+    align-items: center;
+
+    font-size: 0.32rem;
+    font-family: Source Han Sans, Source Han Sans;
+    font-weight: 400;
+    color: #9b9797;
+    line-height: 1;
+  }
 }
 .cardText {
   padding: 0.2rem;
@@ -91,30 +123,14 @@
   margin-bottom: 0.1rem;
 }
 .tableStatus {
-  color: #4a90e2;
+  color: #1755ff;
   font-size: 0.28rem;
   position: absolute;
   right: 0.1rem;
+  top: 0;
+  line-height: 1;
 }
 .content {
   margin-top: 0.5rem;
   position: relative;
 }
-:global {
-  .ant-table,
-  .ant-table-cell,
-  .ant-table-placeholder {
-    background: transparent !important;
-  }
-  .ant-table-cell::before {
-    display: none;
-  }
-  .ant-table-thead {
-    background: #cbe0f6;
-  }
-  .ant-table-thead > tr > th,
-  .ant-table-tbody > tr > td {
-    padding: 0.16rem 0.12rem !important;
-    font-size: 0.24rem;
-  }
-}

src/pages/EqSelfInspection/index.js

@@ -126,9 +126,9 @@ const EqSelfInspection = (props) => {
         <div className="content-title">
           <div
             className={`${styles.itemMain} card-box`}
-            style={{ padding: '0.15rem 0.24rem', position: 'relative' }}
+            style={{ padding: '0.2rem 0.24rem', position: 'relative' }}
           >
-            <div style={{ fontSize: 28, color: 'rgb(110, 110, 110)' }}>
+            <div style={{ fontSize: "0.28rem", color: 'rgb(110, 110, 110)' }}>
               自检间隔：{autoReport?.RouteInfo?.PlanDur}分钟
             </div>
 
@@ -284,7 +284,7 @@ const Item = (props) => {
   };
   return (
     <div className={`${styles.itemMain} card-box`}>
-      <div className={styles.item} style={{ height: children ? 80 : '' }}>
+      <div className={styles.item} style={{ height: children ? "0.8rem" : '' }}>
         <span className={styles.itemName}>{name}</span>
         {/* <span className={styles.warningText}>{warningText}</span> */}
         {renderRight(status)}

src/pages/EqSelfInspection/index.less

@@ -9,6 +9,7 @@
     height: 0.41rem;
     cursor: pointer;
     background: url('@/assets/iconDiffFilled.png') no-repeat;
+    background-size: 100% 100%;
   }
   .iconFundFilled {
     margin-left: 0.28rem;
@@ -70,7 +71,6 @@
   :global {
     .ant-btn-primary {
       font-size: 0.24rem;
-      width: 1.4rem;
       height: 0.46rem;
       cursor: pointer;
     }
@@ -145,10 +145,10 @@
 .itemMain {
   background-size: 100% 100%;
   border: 0.01rem;
-  border-radius: 0.12rem;
   margin-bottom: 0.2rem;
   margin-top: 0.2rem;
   padding: 0 0.1rem;
+  box-shadow: 0.01rem 0.06rem 0.1rem 0rem rgba(0, 0, 0, 0.1);
 }
 .itemMain2 {
   .itemMain;

src/pages/Menu/index.less

@@ -1,17 +1,18 @@
 .main {
-  margin-top: calc(100vh - 15.2rem);
+  // margin-top: calc(100vh - 15.2rem);
   float: right;
-  width: 3.2rem;
-  height: 15.2rem;
+  width: 2.29rem;
+  height: 13.2rem;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  background: url('@/assets/menu/menu_bg.png') no-repeat center;
-  background-size: 100% 100%;
+  // background-color: #aaacae;
+  // background: url('@/assets/menu/menu_bg.png') no-repeat center;
+  // background-size: 100% 100%;
 }
 .menu {
-  margin-top: 0.6rem;
-  width: 2rem;
+  // margin-top: 0.6rem;
+  width: 100%;
   height: 11.8rem;
   display: flex;
   flex-direction: column;

src/pages/SafetyManagement/index.js

@@ -8,7 +8,7 @@ import {
 } from '@/services/safety';
 import { UnityAction } from '@/utils/utils';
 import { useNavigate, useParams, useRequest } from '@umijs/max';
-import { Button, Space, Spin } from 'antd';
+import { Button, Spin } from 'antd';
 import { useEffect, useState } from 'react';
 import styles from './index.less';
 const doorIcon = require('@/assets/deviceManager/doorIcon.png');
@@ -119,12 +119,12 @@ const Video = ({ data, dataOnline, loading }) => {
   return (
     <Spin spinning={loading}>
       <div className="content-tab">
-        <Space direction="vertical" size={16} className={styles.sparePart}>
-          <div className={`card-box ${styles.titleContent}`}>
+        <div className={styles.sparePart}>
+          <div className={styles.titleContent}>
             <div className={styles.titleLeft}>
               <img className={styles.img} src={videoIcon} />
               <div className={styles.textCon}>
-                <div className={styles.num}>{dataOnline?.total || 0}</div>
+                <div className="value-number">{dataOnline?.total || 0}</div>
                 <div className={styles.text}>在库数量（个）</div>
               </div>
             </div>
@@ -143,13 +143,17 @@ const Video = ({ data, dataOnline, loading }) => {
               </div>
             </div>
           </div>
-
-          {data?.map((item, idx) => (
-            <div key={`video_${idx}`} className="card-box">
-              {renderRed(item)}
-            </div>
-          ))}
-        </Space>
+          <div className={styles.listContent}>
+            {data?.map((item, idx) => (
+              <div
+                key={`video_${idx}`}
+                className={`card-box ${styles.listItem}`}
+              >
+                {renderRed(item)}
+              </div>
+            ))}
+          </div>
+        </div>
       </div>
     </Spin>
   );
@@ -175,13 +179,13 @@ const Door = ({ data, dataOver, loading, projectId }) => {
   return (
     <Spin spinning={loading}>
       <div className="content-tab">
-        <Space direction="vertical" size={16} className={styles.doorPart}>
+        <div className={styles.doorPart}>
           <div className={styles.titleContent}>
-            <div className={`card-box ${styles.cardLeft}`}>
+            <div className={styles.cardLeft}>
               <div className={styles.up}>
                 <img className={styles.img} src={doorIcon} />
                 <div className={styles.textCon}>
-                  <div className={styles.num}>{dataOver?.total}</div>
+                  <div className="value-number">{dataOver?.total}</div>
                   <div className={styles.text}>门禁数量（个）</div>
                 </div>
               </div>
@@ -196,7 +200,7 @@ const Door = ({ data, dataOver, loading, projectId }) => {
                 </div>
               </div>
             </div>
-            <div className={`card-box ${styles.cardRight}`}>
+            <div className={styles.cardRight}>
               <div className={styles.textContent}>
                 <div className={styles.in} />
                 <span className={styles.text}>
@@ -214,12 +218,17 @@ const Door = ({ data, dataOver, loading, projectId }) => {
               </Button>
             </div>
           </div>
-          {data?.map((item, idx) => (
-            <div key={`door_${idx}`} className="card-box">
-              {renderRed(item)}
-            </div>
-          ))}
-        </Space>
+          <div className={styles.listContent}>
+            {data?.map((item, idx) => (
+              <div
+                key={`door_${idx}`}
+                className={`card-box ${styles.listItem}`}
+              >
+                {renderRed(item)}
+              </div>
+            ))}
+          </div>
+        </div>
       </div>
     </Spin>
   );

src/pages/SafetyManagement/index.less

@@ -9,16 +9,15 @@
 }
 .num {
   font-size: 0.8rem;
-  font-weight: bold;
-  font-family: DINAlternate-Bold, DINAlternate;
-  line-height: 0.94rem;
-  margin-bottom: 0.16rem;
-  color: #4a90e2;
+  font-family: PangMenZhengDao-3, PangMenZhengDao-3;
+  font-weight: 400;
+  color: #3b3b3b;
+  line-height: 0.62rem;
+  letter-spacing: 0.06rem;
 }
 .point {
   width: 0.2rem;
   height: 0.2rem;
-  border-radius: 0.1rem;
   margin-right: 0.12rem;
 }
 .onlinePoint {
@@ -34,6 +33,15 @@
   right: 0.2rem;
   top: 0.2rem;
 }
+.listContent {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.listItem {
+  width: 48%;
+  margin-bottom: 0.29rem;
+}
 .cardItem {
   display: flex;
   padding: 0.4rem 0.44rem 0.32rem;
@@ -57,9 +65,9 @@
   .titleContent {
     position: relative;
     display: flex;
-    // justify-content: space-between;
+    justify-content: space-around;
     align-items: center;
-    padding: 0.48rem 0 0.28rem 1.04rem;
+    padding: 0.48rem 1.8rem 0.28rem 0;
     .titleLeft {
       display: flex;
       margin-right: 0.96rem;
@@ -79,6 +87,10 @@
   .titleContent {
     display: flex;
     justify-content: space-between;
+    font-family: Source Han Sans, Source Han Sans;
+    font-weight: 500;
+    color: #615d5d;
+    font-size: 0.32rem;
     .cardLeft {
       width: 49%;
       .up {

src/pages/SmartReport/index.less

@@ -31,6 +31,8 @@
   line-height: 0.48rem;
 }
 .photo {
+  margin-left: 0.5rem;
+  margin-top: 0.16rem;
   font-size: 0.27rem;
   font-family: Helvetica;
   color: #615d5d;
@@ -127,6 +129,7 @@
   }
   .longWhiteBox {
     width: 48%;
+    white-space: nowrap;
     padding: 0.02rem;
     height: 1.05rem;
     box-shadow: 0 0.05rem 0.14rem 0 rgba(141, 141, 141, 0.2);

src/pages/SystemDaily/index.js

@@ -40,46 +40,76 @@ const SystemDaily = (props) => {
   const handleOnClick = () => {
     history.back();
   };
+  const renderItem = (value, unit) => {
+    return (
+      <>
+        <span className={styles.value}>{value || 0}</span>
+        <span className={styles.unit}>{unit}</span>
+      </>
+    );
+  };
   return (
     <PageContent closeable={false}>
       <Spin spinning={loading}>
-        <div className={styles.titleContent}>
-          <PageTitle children="系统工作日报" returnable />
-          {/* <div className={styles.title}>
-            <LeftOutlined
-              onClick={handleOnClick}
-              style={{ fontSize: 36, cursor: 'pointer', marginRight: '0.2rem' }}
-            />
-            系统工作日报
-          </div> */}
-          <div className={styles.time}>{dayjs().format('MM月DD日')}</div>
-        </div>
-        <div className={styles.content}>
-          <div className={styles.text}>
-            执行自控指令次数：{automatic_task || 0}次
-          </div>
-          <div className={styles.text}>
-            推送优化建议：{push_optimize_task}条
-          </div>
-          <div className={styles.text}>
-            系统自检次数：{self_inspection_task}条
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;正常次数：
-            {self_inspection_normal_task}条
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;异常次数：
-            {self_inspection_abnormal_task}条
-          </div>
-          <div className={styles.text}>
-            推送任务：{push_task}条&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-            任务完成率：{task_percent}%
-          </div>
-          <div className={styles.text}>
-            工单数量：{work_order_task}条
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;工单完成率：
-            {work_percent}%
-          </div>
-          <div className={styles.text}>
-            工单完成人员第一名：
-            {user_name ? `${user_name}完成${user_name_count}个工单` : '暂无'}
+        {/* <div> */}
+        <PageTitle children="系统工作日报" returnable />
+        <div className={styles.time}>{dayjs().format('MM月DD日')}</div>
+        {/* </div> */}
+        <div className={styles.box}>
+          <div className={styles.main_in}>
+            <div className={styles.titleContent}>日报</div>
+            <div className={styles.content}>
+              <div className={styles.text}>
+                执行自控指令次数：{renderItem(automatic_task, '次')}
+              </div>
+              <div className={styles.text}>
+                推送优化建议：{renderItem(push_optimize_task, '条')}
+              </div>
+              <div className={styles.text}>
+                系统自检次数：
+                {renderItem(self_inspection_task, '条')}
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <br />
+                <div className={styles.textFlex}>
+                  <div className={styles.textItem}>
+                    正常次数：
+                    {renderItem(self_inspection_normal_task, '条')}
+                  </div>
+                  <div className={styles.textItem}>
+                    异常次数：
+                    {renderItem(self_inspection_abnormal_task, '条')}
+                  </div>
+                </div>
+              </div>
+              <div className={styles.textTwo}>
+                <div className={styles.textItem}>
+                  推送任务：
+                  {renderItem(push_task, '条')}
+                </div>
+                <div className={styles.textItem}>
+                  任务完成率：
+                  {renderItem(task_percent, '%')}
+                </div>
+              </div>
+              <div className={styles.textTwo}>
+                <div className={styles.textItem}>
+                  工单数量：
+                  {renderItem(work_order_task, '条')}
+                </div>{' '}
+                <div className={styles.textItem}>
+                  工单完成率：
+                  {renderItem(work_percent, '%')}
+                </div>
+              </div>
+              <div className={styles.text}>
+                工单完成人员第一名：
+                {/* <span className={styles.value}> */}
+                {user_name
+                  ? `${user_name}完成${user_name_count}个工单`
+                  : '暂无'}
+                {/* </span> */}
+              </div>
+            </div>
           </div>
         </div>
       </Spin>

src/pages/SystemDaily/index.less

@@ -7,32 +7,83 @@
   box-shadow: 0rem 0rem 0.08rem 0.04rem rgba(212, 212, 212, 0.5);
   border-radius: 0.2rem;
 }
+.time {
+  margin-left: 0.5rem;
+  margin-top: 0.16rem;
+  font-size: 0.27rem;
+  font-family: Helvetica;
+  color: #615d5d;
+  line-height: 0.28rem;
+}
 .titleContent {
-  width: 100%;
-  // text-align: center;
-  font-family: PingFangSC, PingFang SC;
-  color: #4a4a4a;
-  margin: auto;
+  padding: 0.14rem 0.4rem;
+  position: absolute;
+  top: -0.27rem;
+  left: 0.4rem;
+  background-color: #1755ff;
+  border-radius: 0.43rem;
+  font-size: 0.27rem;
+  font-family: Helvetica;
+  color: #ffffff;
+  letter-spacing: 0.04rem;
   .title {
     font-size: 0.34rem;
     line-height: 0.48rem;
   }
-  .time {
-    margin-left: 0.6rem;
-    font-size: 0.22rem;
-    line-height: 0.3rem;
-  }
 }
 .content {
   padding: 0.6rem 0.3rem;
-  margin: 0.2rem auto;
-  box-shadow: 0rem 0rem 0.08rem 0.04rem rgba(212, 212, 212, 0.5);
-  border-radius: 0.2rem;
-  background: #e7f1fe;
+  font-size: 0.32rem;
+  font-family: Source Han Sans, Source Han Sans;
+  font-weight: 500;
+  color: #9b9797;
+  .item {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 0.01rem solid #9b9797;
+  }
   .text {
-    margin-bottom: 0.34rem;
-    font-family: PingFangSC, PingFang SC;
-    color: #4a4a4a;
-    font-size: 0.3rem;
+    padding: 0.3rem 0;
+    border-bottom: 1px solid #9b9797;
+  }
+  text:last-child {
+    border-bottom: none;
+  }
+  .textTwo {
+    .text;
+    display: flex;
+    // justify-content: space-between;
+  }
+  .textFlex {
+    display: flex;
+  }
+  .textItem {
+    width: 50%;
+  }
+  .value {
+    font-size: 0.6rem;
+    font-family: PangMenZhengDao-3, PangMenZhengDao-3;
+    font-weight: 400;
+    color: #3b3b3b;
+    letter-spacing: 0.05rem;
+  }
+  .unit {
+    .value;
+    font-size: 0.36rem;
+  }
+}
+.box {
+  position: relative;
+  margin: 0.6rem 0 1rem 0;
+  box-sizing: border-box;
+  padding: 0.04rem;
+  border-radius: 0.4rem 0.1rem 0.4rem 0.1rem;
+  background-image: -webkit-linear-gradient(#1755ff 0%, #ffffff 80%);
+  box-shadow: 0.01rem 0.08rem 0.14rem 0rem rgba(0, 0, 0, 0.1);
+  .main_in {
+    width: 100%;
+    height: 100%;
+    border-radius: 0.4rem 0.1rem 0.4rem 0.1rem;
+    background: linear-gradient(180deg, #ddf4ff 0%, #ffffff 100%);
   }
 }