-
-
-
-
-
-
- setOpen(false)} row={row}>
-
-
-
-
+ return (
+
+ {/* 顶部进度条 */}
+
+
+ {/* 主体内容区域 */}
+
- )
-}
-const items = [
- {
- label:
}>,
- key:'巡检记录',
- children:[
- {label:'巡检记录首页',key:'巡检记录首页'},
- {label:'接班班组签到',key:'接班班组签到'},
- {label:'当班值长交班日志',key:'当班值长交班日志'},
- {label:'历史日值记录查询',key:'历史日值记录查询'},
- ]
- },
- {
- label:
}>,
- key:'巡检状态管理',
- children:[
- ]
- },
- {
- label:
}>,
- key:'设备台账数据',
- children:[
+ {/* 右侧表格和操作区域 */}
+
+ {/* 顶部按钮区域 */}
+
+
+
+
- ]
- },
- {
- label:
}>,
- key:'缺陷管理',
- children:[
+ {/* 搜索区域 */}
+
- ]
- },
-]
-const tabList={
- '巡检记录首页':
,
- '接班班组签到':
,
- '当班值长交班日志':
,
- '历史日值记录查询':
-}
-const InspectionRecords=()=>{
- const [current,setCurrent]=useState('巡检记录首页')
- const onClick=(e)=>{
- setCurrent(e.key)
- }
- return(
- <>
-
-
- 当前： {current}
-
-
+ {/* 分页 */}
+
+
共 {total} 条
+
`共 ${total} 条`}
+ />
+
+
- {tabList[current]}
-
- )
-}
-export default InspectionRecords
+
+ );
+};
+
+export default InspectionRecords;
\ No newline at end of file
diff --git a/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.less b/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.less
index 1d7306c..757f7ec 100644
--- a/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.less
+++ b/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.less
@@ -1,134 +1,320 @@
-.header{
- display: flex;
- backdrop-filter: blur(3.4000000953674316px);
- box-shadow: 1px 2px 5px 0 rgba(0, 102, 101, 0.25);
- border: 1px solid;
-
- border-image-source: linear-gradient(96.54deg, #FFFFFF -0.94%, rgba(255, 255, 255, 0) 25.28%, rgba(167, 229, 228, 0) 59.69%, #A7E5E4 79.76%);
- border-top-left-radius: 20px;
- background-color: #fff;
+/* 巡检点管理组件样式 */
+.container {
+ padding: 20px;
+ background-color: #ffffff;
+ min-height: 100vh;
+ border-radius: 10px;
}
-.logo{
- width: 298px;
- background-position: -56px -6px;
+
+/* 进度条容器 */
+.progressContainer {
+ margin-bottom: 20px;
+ width: 810px;
+ height: 48px;
+ background-image: url('~@/assets/img/progress1.svg');
+ background-position: left top;
background-repeat: no-repeat;
- height: 54px;
- font-size: 20px;
- font-weight: 400;
- color: #fff;
+ overflow: hidden;
+}
+
+/* 主体内容容器 */
+.contentContainer {
display: flex;
- align-items: center;
- justify-content: center;
- }
-.menu{
- :global(.ant-menu-title-content){
- color: rgba(0, 102, 101, 1);
- font-size:16px;
- }
- :global(.parallelogram-container___Lxkxf){
- height:30px;
- margin-top: 12px;
- }
+ gap: 20px;
}
-.state1{
- color:#4E5856
+
+/* 主体内容容器 */
+.contentContainer {
+ display: flex;
+ gap: 20px;
}
-.state2{
- color:#2C9E9D
+
+/* 左侧树形结构区域 */
+.leftSide {
+ flex: 0 0 300px;
+ background: #e8f1ec;
+ padding: 20px;
+ max-height: calc(100vh - 150px);
+ overflow-y: auto;
+ border-radius: 4px;
+ border: 1px solid;
+ border-image-source: linear-gradient(96.54deg, #FFFFFF -0.94%, rgba(255, 255, 255, 0) 25.28%, rgba(0, 143, 142, 0) 59.69%, #008F8E 79.76%);
+ box-shadow: 1px 2px 5px 0px rgba(0, 102, 101, 0.25);
+
+ box-shadow: -2px 4px 10px 0px rgba(145, 145, 145, 0.05);
+
+ box-shadow: -7px 17px 18px 0px rgba(145, 145, 145, 0.04);
+
+ box-shadow: -15px 37px 24px 0px rgba(145, 145, 145, 0.03);
+
+ box-shadow: -27px 66px 29px 0px rgba(145, 145, 145, 0.01);
+
+ box-shadow: -42px 103px 31px 0px rgba(145, 145, 145, 0);
+
+ backdrop-filter: blur(3.4000000953674316px)
+}
+
+.leftSide .ant-tree-list {
+ background: #e8f1ec;
}
-.state3{
- color:#999999
+
+.tree {
+ background: #e8f1ec;
}
-.state1,.state2,.state3{
+
+/* 树形结构标题 */
+.treeTitle {
font-size: 16px;
+ font-weight: 500;
+ margin-bottom: 16px;
+ color: #333;
+ padding-bottom: 8px;
+ border-bottom: 1px solid #f0f0f0;
}
-.inspection-table{
- :global(.ant-table-cell){
- background-color:#F0F7F7;
- padding:16px 1px !important;
- border-bottom: 0.5px solid #DBE8E5 !important;
+
+/* 树形结构样式 */
+.tree {
+ .ant-tree-treenode {
+ margin-bottom: 4px;
}
-}
-.inspection-table1{
- :global(.ant-table-cell){
- background-color:#F0F7F7;
- padding:12px 1px !important;
- border-bottom: 0.5px solid #DBE8E5 !important;
+
+ .ant-tree-node-content-wrapper {
+ padding: 4px 8px;
+ border-radius: 4px;
+ transition: all 0.2s;
+
+ &:hover {
+ background-color: #f0f7f7;
+ }
+ }
+
+ .ant-tree-checkbox-checked .ant-tree-checkbox-inner {
+ background-color: #006665;
+ border-color: #006665;
+ }
+
+ .ant-tree-checkbox:hover .ant-tree-checkbox-inner {
+ border-color: #006665;
+ }
+
+ .ant-tree-selected .ant-tree-node-content-wrapper {
+ background-color: #f0f7f7;
+ color: #006665;
+ font-weight: 500;
}
}
-.paiBanState{
- border: 1px solid;
- border-image-source: conic-gradient(from 102.75deg at 50% 52.91%, rgba(249, 249, 249, 0.5) -32.95deg, rgba(140, 160, 156, 0.5) 10.52deg, rgba(140, 160, 156, 0.35) 32.12deg, rgba(255, 255, 255, 0.5) 60.28deg, rgba(255, 255, 255, 0.5) 107.79deg, rgba(140, 160, 156, 0.35) 187.59deg, #F9F9F9 207.58deg, rgba(255, 255, 255, 0.5) 287.31deg, rgba(249, 249, 249, 0.5) 327.05deg, rgba(140, 160, 156, 0.5) 370.52deg);
- background: #828C8833;
- backdrop-filter: blur(8px);
- box-shadow: -2px 4px 10px 0 #9191910D;
- border-radius: 4px;
- opacity: 1;
- padding:6px 8px;
- margin-top: 10px;
- font-size: 12px;
- }
-.paiBanState1{
- border: 1px solid;
- border-image-source: conic-gradient(from 102.75deg at 50% 52.91%, rgba(249, 249, 249, 0.5) -32.95deg, rgba(140, 160, 156, 0.5) 10.52deg, rgba(140, 160, 156, 0.35) 32.12deg, rgba(255, 255, 255, 0.5) 60.28deg, rgba(255, 255, 255, 0.5) 107.79deg, rgba(140, 160, 156, 0.35) 187.59deg, #F9F9F9 207.58deg, rgba(255, 255, 255, 0.5) 287.31deg, rgba(249, 249, 249, 0.5) 327.05deg, rgba(140, 160, 156, 0.5) 370.52deg);
- background: #05454480;
- backdrop-filter: blur(8px);
- box-shadow: -2px 4px 10px 0 #9191910D;
- border-radius: 4px;
- opacity: 1;
- padding:6px 8px;
- margin-top: 10px;
- color:#fff;
- font-size: 12px;
-}
-.addBtn{
- background-size:cover;
- background-position:center;
- color:#fff;
- opacity:0.7;
- border-radius:4px;
- height: 36px;
+
+/* 右侧表格区域 */
+.rightSide {
+ flex: 1;
+ background: white;
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+}
+
+/* 顶部按钮区域 */
+.topButtons {
+ display: flex;
+ margin-bottom: 20px;
}
-.delBtn{
- background-size:cover;
- background-position:center;
- color:#000;
+
+.delBtn {
+ background-size: cover;
+ background-position: center;
+ color: #000;
//opacity:0.7;
- border-radius:4px;
+ border-radius: 4px;
width: 88px;
height: 36px;
}
-.exportBtn{
- background-size:cover;
- background-position:center;
- color:#fff;
- opacity:0.7;
- border-radius:4px;
- width: 88px;
+
+/* 按钮样式 */
+.button {
+ border: none;
+ // background-color: transparent;
+ padding: 6px 16px;
+ font-size: 14px;
+ color: #fff;
+ transition: all 0.3s;
+ background-position: center;
+ background-size: cover;
height: 36px;
+
+ &:hover {
+ opacity: 0.9;
+ }
+
+ &.ant-btn-danger {
+ color: #fff;
+ }
}
-.resetBtn{
- background-size:cover;
- background-position:center;
- color:#006665;
- //opacity:0.7;
- border-radius:4px;
- width: 88px;
+
+/* 搜索区域 */
+.searchContainer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+}
+
+/* 搜索框样式 */
+.searchBox {
+ display: flex;
+ align-items: center;
+ border: 1px solid #d9d9d9;
+ border-radius: 4px;
+ padding: 0 12px;
+ width: 300px;
height: 36px;
+ transition: all 0.3s;
+
+ &:focus-within {
+ border-color: #006665;
+ box-shadow: 0 0 0 2px rgba(0, 102, 101, 0.1);
+ }
+
+ .anticon {
+ color: #999;
+ margin-right: 8px;
+ }
+
+ .searchInput {
+ border: none;
+ outline: none;
+ flex: 1;
+ height: 100%;
+ font-size: 14px;
+
+ &::placeholder {
+ color: #bfbfbf;
+ }
+ }
}
-.customDrawer{
- :global(.ant-drawer-header){
- background-color:#B8E0D833 !important;
+
+/* 新增按钮 */
+.addButton {
+ background-color: #006665;
+ border-color: #006665;
+ border-radius: 4px;
+ padding: 6px 20px;
+ font-size: 14px;
+ transition: all 0.3s;
+ height: 36px;
+
+ &:hover {
+ background-color: #00876e;
+ border-color: #00876e;
+ transform: translateY(-1px);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
}
-.drawerRow{
- margin: 10px 0 20px 0;
- :global(.ant-col){
- margin-top: 10px;
- color: #000;
- span{
- color: #999999;
- font-size:14px;
+
+/* 表格样式 */
+.table {
+ margin-bottom: 20px;
+
+ .ant-table-thead>tr>th {
+ background-color: #f0f7f7;
+ color: #333;
+ font-weight: 500;
+ border-bottom: 1px solid #e8e8e8;
+ padding: 12px 16px;
+ }
+
+ .ant-table-tbody>tr>td {
+ padding: 12px 16px;
+ border-bottom: 1px solid #f0f0f0;
+
+ &:last-child {
+ padding-right: 24px;
}
}
+
+ .ant-table-tbody>tr:hover {
+ background-color: #fafafa;
+ }
+
+ /* 自定义序号列宽度 */
+ .ant-table-column-has-actions {
+ width: 80px;
+ }
}
+
+/* 分页区域 */
+.pagination {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ margin-top: auto;
+ padding-top: 20px;
+ border-top: 1px solid #f0f0f0;
+
+ >span {
+ margin-right: 20px;
+ color: #666;
+ font-size: 14px;
+ }
+
+ .ant-pagination {
+ display: flex;
+ align-items: center;
+
+ .ant-pagination-item-active {
+ border-color: #006665;
+
+ a {
+ color: #006665;
+ font-weight: 500;
+ }
+ }
+
+ .ant-pagination-item:hover {
+ border-color: #006665;
+
+ a {
+ color: #006665;
+ }
+ }
+
+ .ant-pagination-prev:hover .ant-pagination-item-link,
+ .ant-pagination-next:hover .ant-pagination-item-link {
+ color: #006665;
+ border-color: #006665;
+ }
+ }
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+ .contentContainer {
+ flex-direction: column;
+ }
+
+ .leftSide {
+ flex: none;
+ max-height: 400px;
+ }
+}
+
+@media (max-width: 768px) {
+ .container {
+ padding: 10px;
+ }
+
+ .searchContainer {
+ flex-direction: column;
+ gap: 12px;
+ align-items: stretch;
+ }
+
+ .searchBox {
+ width: 100%;
+ }
+
+ .pagination {
+ flex-direction: column;
+ align-items: center;
+ gap: 12px;
+ }
+}
\ No newline at end of file