样式修改

src/components/ManagementPage/index.less

@@ -1,12 +1,12 @@
 .icon {
   float: left;
-  width: 4px;
-  height: 30px;
-  margin: 7px 0;
+  width: 7px;
+  height: 32px;
+  margin: 4px 0;
   background-color: #366cda;
 }
 .title {
-  padding-left: 8px;
+  padding-left: 12px;
   font-size: 30px;
   font-weight: 400;
   color: #4a4a4a;

src/components/PageTitle/index.js

@@ -14,12 +14,10 @@ export default (props) => {
   };
 
   return (
-    <div
-      className={`${styles.titleBox} ${tabs ? styles.tabs : ''}`}
-      onClick={handleOnClick}
-    >
+    <div className={`${styles.titleBox} ${tabs ? styles.tabs : ''}`}>
       {returnable || onReturn ? (
         <LeftOutlined
+          onClick={handleOnClick}
           style={{ fontSize: 36, cursor: 'pointer', marginRight: '40px' }}
         />
       ) : (

src/components/TabsContent/index.js

@@ -2,7 +2,13 @@ import { useMemo, useState } from 'react';
 import styles from './index.less';
 
 const TabsContent = (props) => {
-  const { defaultActiveKey = '1', center = true, items = {}, onChange } = props;
+  const {
+    defaultActiveKey = '1',
+    center = true,
+    small = false,
+    items = {},
+    onChange,
+  } = props;
   const [active, setActive] = useState(defaultActiveKey);
   const renderContent = useMemo(() => {
     return items.find((item) => item.key == active)?.children;
@@ -10,7 +16,7 @@ const TabsContent = (props) => {
   return (
     <div>
       <div
-        className={styles.tabsTitle}
+        className={`${styles.tabsTitle} ${small ? styles.small : ''}`}
         style={center ? { justifyContent: 'center' } : {}}
       >
         {items.map((item) => (

src/components/TabsContent/index.less

@@ -26,3 +26,14 @@
 .active {
   color: #4a90e2;
 }
+
+.small {
+  height: inherit;
+  .tabsItem {
+    font-size: 28px;
+    padding: 0 30px; 
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+}

src/components/ThresholdDetail/index.less

@@ -4,7 +4,7 @@
 }
 
 .success {
-  background-color: #60FE76;
+  background-color: #12CEB3;
   width: 300%;
   height: 100%;
   position: absolute;
@@ -15,9 +15,9 @@
 
 .box {
   width: 100%;
-  height: 6px;
+  height: 8px;
   position: relative;
-  background-color: #60FE76;
+  background-color: #12CEB3;
 
   .exception,
   .breakdown {
@@ -27,12 +27,12 @@
 
   .breakdown {
     z-index: 2;
-    background-color: #D45C41;
+    background-color: #FE5850;
   }
 
   .exception {
     z-index: 1;
-    background-color: #FFE26D;
+    background-color: #F5A623;
   }
 
   
@@ -61,7 +61,7 @@
   position: absolute;
   top: 18px;
   line-height: 1.2;
-  font-size: 16px;
+  font-size: 24px;
   word-break: keep-all;
   transform: translateX(-50%);
 

src/models/eqSelfInspection.js

@@ -14,7 +14,9 @@ import {
 export default {
   namespace: 'eqSelfInspection',
   state: {
-    autoReport: {},
+    autoReport: {
+      warningTotalNum: 0,
+    },
     patrolList: [],
     mandateInfo: [],
   },

src/pages/Controller/Device.js

@@ -27,28 +27,21 @@ function Hardware() {
 
       <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
+            key={item.id}
+            className={`card-box ${styles.item}`}
+            style={{ justifyContent: 'space-between' }}
+          >
+            <div>
+              <i className={`${styles.icon} `}></i>
+              {item.name}
+            </div>
+
             <div>
               <div>定位</div>
-              {/* <div>历史轨迹</div> */}
             </div>
           </div>
         ))}
-
-        <div
-          className={`card-box ${styles.item}`}
-          style={{ justifyContent: 'space-between' }}
-        >
-          <div>
-            <i className={`${styles.icon}`}></i>
-            设备1
-          </div>
-          <div>
-            <div>定位</div>
-          </div>
-        </div>
       </Spin>
     </PageContent>
   );

src/pages/EqSelfInspection/components/Detail.js

@@ -1,3 +1,5 @@
+import ModuleTitle from '@/components/ManagementPage/moduleTitle';
+import TabsContent from '@/components/TabsContent';
 import ThresholdDetail from '@/components/ThresholdDetail';
 import ThresholdModal from '@/components/ThresholdDetail/ThresholdModal';
 import { changeRecordStatus, getDumuDetail } from '@/services/eqSelfInspection';
@@ -13,7 +15,6 @@ import {
   Select,
   Spin,
   Table,
-  Tabs,
   message,
 } from 'antd';
 import dayjs from 'dayjs';
@@ -102,6 +103,13 @@ function Detail(props) {
   return (
     <Spin spinning={loading} wrapperClassName="card-box">
       <div className={styles.card}>
+        <div
+          className={`${styles.orderIcon} ${
+            data.warningTotalNum ? styles.error : ''
+          }`}
+        >
+          {data.warningTotalNum == 0 ? '正常' : '异常'}
+        </div>
         <Row>
           <Col span={24} className={styles.cardText}>
             自检时间：{data?.CreatedTime}
@@ -138,11 +146,7 @@ function Detail(props) {
           key="extend"
           type={'extend'}
           userList={userList}
-          title={
-            <div>
-              <div className={styles.tableTitle}>设备自检报告</div>
-            </div>
-          }
+          title={<ModuleTitle title="设备自检报告" />}
         ></ReportCom>
 
         {/* 工艺自检报告"> */}
@@ -150,7 +154,7 @@ function Detail(props) {
           <div className={styles.tableStatus}>
             异常({data?.FaultAnalysis?.length || 0})
           </div>
-          <div className={styles.tableTitle2}>工艺自检报告</div>
+          <ModuleTitle title="工艺自检报告" />
 
           <AalysisTable
             onClickItem={sendMessageToUnity}
@@ -160,7 +164,6 @@ function Detail(props) {
         </div>
         {/* 安全隐患自检报告"> */}
         <div className={styles.content}>
-          <div className={styles.tableTitle2}>安全隐患自检报告</div>
           {/* 环境异常 */}
           <ReportCom
             sendMessageToUnity={sendMessageToUnity}
@@ -171,17 +174,13 @@ function Detail(props) {
             key="sensor"
             type={'sensor'}
             userList={userList}
-            title={
-              <div style={{ color: '#1677ff', fontSize: 22 }}>环境异常</div>
-            }
+            title={<ModuleTitle title="环境异常" />}
           ></ReportCom>
 
           {/* 安防检测异常 */}
           <ReportDumCom
             data={dumuList}
-            title={
-              <div style={{ color: '#1677ff', fontSize: 22 }}>安防检测异常</div>
-            }
+            title={<ModuleTitle title="安防检测异常" />}
           />
 
           {/* 电器检测异常 */}
@@ -193,9 +192,7 @@ function Detail(props) {
             key="extend"
             type={'extend'}
             userList={userList}
-            title={
-              <div style={{ color: '#1677ff', fontSize: 22 }}>电气检测异常</div>
-            }
+            title={<ModuleTitle title="电气检测异常" />}
           ></ReportCom>
 
           {/* 密闭空间检测异常 */}
@@ -207,11 +204,7 @@ function Detail(props) {
             key="extend"
             type={'extend'}
             userList={userList}
-            title={
-              <div style={{ color: '#1677ff', fontSize: 22 }}>
-                密闭空间检测异常
-              </div>
-            }
+            title={<ModuleTitle title="密闭空间检测异常" />}
           ></ReportCom>
         </div>
       </div>
@@ -358,7 +351,7 @@ export function DeviceTable(props) {
       width: '12%',
       render: (record) =>
         record.Status == 1 && (
-          <a style={{ color: '#7BFFFB' }} onClick={() => onClickError(record)}>
+          <a style={{ color: '#FE5850' }} onClick={() => onClickError(record)}>
             异常处理
           </a>
         ),
@@ -668,7 +661,7 @@ export function WarningTable(props) {
       width: '12%',
       render: (record) =>
         record.Status == 1 && (
-          <a style={{ color: '#7BFFFB' }} onClick={() => onClickError(record)}>
+          <a style={{ color: '#FE5850' }} onClick={() => onClickError(record)}>
             异常处理
           </a>
         ),
@@ -689,7 +682,6 @@ export function WarningTable(props) {
         locale={{
           emptyText: <Empty />,
         }}
-     
       />
       <ThresholdModal
         open={visible}
@@ -725,20 +717,23 @@ function ReportCom(props) {
     <div className={styles.detailCard}>
       <div className={styles.tableTop}>
         {title}
-        <Tabs
-          style={{ float: 'right' }}
+        <TabsContent
           defaultActiveKey="1"
           onChange={handleTabsChange}
-        >
-          <Tabs.TabPane
-            tab={`异常/警告(${waringData.length || 0})`}
-            key="1"
-          ></Tabs.TabPane>
-          <Tabs.TabPane
-            tab={`全部(${allData.length || 0})`}
-            key="2"
-          ></Tabs.TabPane>
-        </Tabs>
+          small={true}
+          items={[
+            {
+              key: '1',
+              label: `异常/警告(${waringData.length || 0})`,
+              children: <div></div>,
+            },
+            {
+              key: '2',
+              label: `全部(${allData.length || 0})`,
+              children: <div></div>,
+            },
+          ]}
+        ></TabsContent>
       </div>
 
       {activeKey == '1' && (
@@ -812,10 +807,8 @@ function ReportDumCom(props) {
   return (
     <div>
       <div className={styles.tabBarExtraContent}>
-        <div className={styles.text} style={{ height: 52, width: '60%' }}>
-          <>
-            <div>{title}</div>
-          </>
+        <div className={styles.text} style={{ width: '60%' }}>
+          {title}
         </div>
         <div className={styles.abnormal}>
           <div className={styles.text} style={{ float: 'right' }}>

src/pages/EqSelfInspection/components/PatrolReportDetail.less

@@ -36,7 +36,7 @@
   width: 50%;
   .text {
     color: #1677ff;
-    font-size: 18px;
+    font-size: 28px;
   }
 }
 .tabBarExtraContent {
@@ -55,10 +55,28 @@
 }
 .card {
   background: #eff5fc;
+  padding: 10px 20px;
+  position: relative;
+  overflow: hidden;
+  .orderIcon {
+    background: #4a90e2;
+    width: 300px;
+    position: absolute;
+    top: 40px;
+    right: -92px;
+    text-align: center;
+    font-size: 24px;
+    transform: rotate(45deg);
+    padding: 10px 0;
+    color: #fff;
+    &.error {
+      background: #fe5850;
+    }
+  }
 }
 .cardText {
   padding: 20px;
-  font-size: 20px;
+  font-size: 28px;
 }
 .tableTitle {
   position: absolute;
@@ -73,8 +91,8 @@
   margin-bottom: 10px;
 }
 .tableStatus {
-  color: #1677ff;
-  font-size: 18px;
+  color: #4a90e2;
+  font-size: 28px;
   position: absolute;
   right: 10px;
 }
@@ -96,7 +114,7 @@
   }
   .ant-table-thead > tr > th,
   .ant-table-tbody > tr > td {
-    padding: 8px !important;
-    font-size: 22px;
+    padding: 16px 12px !important;
+    font-size: 24px;
   }
-}
+}

src/pages/EqSelfInspection/index.js

@@ -142,13 +142,13 @@ const EqSelfInspection = (props) => {
               <div
                 style={{
                   color:
-                    autoReport?.warningTotalNum === 0
+                    autoReport?.warningTotalNum == 0
                       ? '#333'
                       : 'rgba(254, 88, 80, 1)',
                   margin: '0 6px',
                 }}
               >
-                {autoReport?.warningTotalNum === 0
+                {autoReport?.warningTotalNum == 0
                   ? '暂无'
                   : autoReport?.warningTotalNum + '项异常'}
               </div>

src/services/controller.js

@@ -11,7 +11,7 @@ export async function queryLightList(project_id) {
   });
 }
 export async function queryDevice(project_id) {
-  return request(`/api/iot/v1/lamp/list`, {
+  return request(`/api/iot/v1/lbs/mobile_device/list`, {
     params: { project_id },
   });
 }