隐患排查结构

config/routes.js

@@ -61,6 +61,12 @@ export default [
 					    name: 'workreport',
 					    component: './hrefficiency_workreport/WorkReport',
 					},
+                    // 隐患排查
+                    {
+                        path:'/topnavbar00/hrefficiency/hiddentrouble',
+                        name: 'hiddentrouble',
+                        component: './hrefficiency_hiddentrouble/HiddenTrouble',
+                    }
                 ],
             },
         ],

src/pages/hrefficiency_hiddentrouble/HiddenTrouble.js

@@ -0,0 +1,30 @@
+import MyCard from "@/pages/hrefficiency_hiddentrouble/component/MyCard";
+import {Col, Row, Tabs} from "antd";
+import HiddenDangerInspection
+    from "@/pages/hrefficiency_hiddentrouble/component/hiddenDangerInspection/hiddenDangerInspection";
+
+const items = [
+    {
+        key: '1',
+        label: '隐患检查',
+        children: <HiddenDangerInspection/>,
+    },
+    {
+        key: '2',
+        label: '隐患整改',
+        children: 'Content of Tab Pane 2',
+    },
+    {
+        key: '3',
+        label: '隐患统计',
+        children: 'Content of Tab Pane 3',
+    },
+];
+const HiddenTrouble = () => {
+    return (
+        <>
+            <Tabs defaultActiveKey="1" items={items}  />
+        </>
+    )
+}
+export default HiddenTrouble

src/pages/hrefficiency_hiddentrouble/component/MyCard.js

@@ -0,0 +1,49 @@
+import Icon from "antd/es/icon";
+
+const HourglassSvg=()=>{
+    return (
+        <svg width="21px" height="33px" fill="currentColor" viewBox="0 0 1024 1024">
+            <title>hourglass icon</title>
+            <path
+                d="M768 832h-512c-17.6 0-32-14.4-32-32s14.4-32 32-32h64v-192c0-52.8 33.6-99.2 84-116.8-50.4-17.6-84-64-84-116.8v-192h-64c-17.6 0-32-14.4-32-32s14.4-32 32-32h512c17.6 0 32 14.4 32 32s-14.4 32-32 32h-64v192c0 52.8-33.6 99.2-84 116.8 50.4 17.6 84 64 84 116.8v192h64c17.6 0 32 14.4 32 32s-14.4 32-32 32zM320 192v192c0 70.4 57.6 128 128 128s128-57.6 128-128v-192h-256zM448 768c-70.4 0-128-57.6-128-128v-192h256v192c0 70.4-57.6 128-128 128z"/>
+        </svg>
+    )
+}
+const HourglassIcon=(props)=>{
+    return(
+        <Icon component={HourglassSvg} {...props}></Icon>
+    )
+}
+
+const MyCard = (props) => {
+    return (
+        <div style={{
+            // width: '100%',
+            // height: '134px',
+            borderRadius: '5px',
+            backgroundColor: 'white',
+            padding: '20px 20px',
+            boxSizing: 'border-box',
+            display:'flex',
+            justifyContent:'space-between'
+        }}>
+            <div>
+                <div>{props.title}</div>
+                <div style={{fontWeight: '600', fontSize: '18px', }}>{props.num}</div>
+                {props.flag === 1 && <div style={{color: '#44BB5F', fontSize: '14px'}}>
+                    {props.grow === 1 ? <>⬆</> : <>⬇</>}&nbsp;{props.data}%&nbsp;较上周
+                </div>}
+                {props.flag===2 && <div style={{color: 'orange',fontSize:'14px'}}>
+                    {props.grow===1 ? <>⬆</>:<>⬇</>}&nbsp;{props.data}%&nbsp;较上周
+                </div>}
+                {props.flag===3 && <div style={{color: 'red',fontSize:'14px'}}>
+                    {props.grow===1 ? <>⬆</>:<>⬇</>}&nbsp;{props.data}%&nbsp;较上周
+                </div>}
+            </div>
+            <div style={{color:props.color,height:'53px',width:'53px',backgroundColor:props.backgroundColor,borderRadius:'10px',display:'flex',justifyContent:'center',alignItems: 'center'}}>
+                <HourglassSvg ></HourglassSvg>
+            </div>
+        </div>
+    )
+}
+export default MyCard;

src/pages/hrefficiency_hiddentrouble/component/hiddenDangerInspection/hiddenDangerInspection.js

@@ -0,0 +1,54 @@
+import {Col, Row} from "antd";
+import MyCard from "@/pages/hrefficiency_hiddentrouble/component/MyCard";
+const dataList=[
+    {
+        title:'隐患总数',
+        num:'169',
+        data:'12',
+        flag:1,
+        grow:1,
+        backgroundColor:'#E5EEFE',
+        color:'#1269FF',
+    },
+    {
+        title:'已整改隐患',
+        num:'169',
+        data:'12',
+        flag:1,
+        grow:1,
+        backgroundColor:'#D9F8E8',
+        color:'#1DCE74',
+    },
+    {
+        title:'整改中隐患',
+        num:'169',
+        data:'8',
+        flag:2,
+        grow:0,
+        backgroundColor:'#FFF3E9',
+        color:'orange',
+    },
+    {
+        title:'超期未整改',
+        num:'169',
+        data:'2',
+        flag:3,
+        grow:0,
+        backgroundColor:'#FFE6E8',
+        color:'#FF3E48',
+    }
+]
+const HiddenDangerInspection=()=>{
+    return(
+        <>
+            <header style={{overflow: 'hidden'}}>
+                <Row gutter={10}>
+                    {dataList.map((item) => {
+                        return <Col span={6}><MyCard {...item}> </MyCard></Col>
+                    })}
+                </Row>
+            </header>
+        </>
+    )
+}
+export default HiddenDangerInspection

src/pages/nav_system_content/SystemContentList.less

@@ -105,10 +105,10 @@
 
 	.rightContentMain {
 		width: 100%;
-		background-color: #ffffff;
+		//background-color: #ffffff;
 		// border-radius: 6px;
 		overflow-y: auto;
 		// height: 100%;
 		overflow: auto;
 	}
-}
+}

src/pages/topnavbar/TopNavBar.js

@@ -38,6 +38,11 @@ const menuItem = [
         key: '/topnavbar00/hrefficiency/allstaffuph',
         // icon: <SettingOutlined />,
       },
+      {
+        label: '隐患排查',
+        key: '/topnavbar00/hrefficiency/hiddentrouble',
+        // icon: <SettingOutlined />,
+      },
     ]
   },
 ]

src/pages/topnavbar/TopNavBar.less

@@ -53,4 +53,4 @@
     height: calc(100% - 46px);
     overflow-y: hidden;
   }
-}
+}