新增页面-巡检管理-巡检管理类型

main
yupeng 22 hours ago
parent 24dac35caa
commit 72f2140c64

@ -26,10 +26,15 @@ export default [
routes: [
//巡检任务
{
path: '/topnavbar00/business/inspectiontasks',
name: 'inspectiontasks',
component: './inspectiontasks/InspectionTasks',
},
path: '/topnavbar00/business/inspectiontasks',
name: 'inspectiontasks',
component: './inspectiontasks/InspectionTasks',
},
{
path: '/topnavbar00/business/inspectionmanagement',
name: 'inspectionmanagement',
component: './inspectionmanagement/InspectionManagement',
},
],
},
],

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.51556 8.67022L2.38044 8.75644L1.95911 9.02133L1.86844 9.07911L1.77956 9.13598L1.72178 9.17333L1.60978 9.248L1.52978 9.30311L1.46489 9.34933L1.40267 9.39467L1.37778 9.41244L1.33067 9.44978C0.988438 9.71644 0.775109 9.98311 0.775109 10.3129C0.775109 11.44 2.86933 12.3893 5.72533 12.6782L5.81156 12.6871V11.6764L7.41867 12.9484L7.56178 13.7262L5.81156 15.1111V14.0444C2.48 13.7191 0 12.4773 0 10.9938C0 10.5609 0.312 10.1049 0.936 9.62311L0.998219 9.576C1.08686 9.5103 1.17695 9.44658 1.26844 9.38489L1.35911 9.32444L1.45333 9.264L1.53067 9.21511L1.61067 9.16711L1.69156 9.11822L1.73333 9.09333L1.81778 9.04444L1.90489 8.99467L1.99378 8.94577L2.03822 8.92089L2.12978 8.87111L2.27111 8.79644L2.368 8.74667L2.41689 8.72178L2.51644 8.67111L2.51556 8.67022ZM12.8044 6.48978L12.864 6.51911L14.3991 7.59467C14.5324 7.68711 14.5458 7.90222 14.4409 8.10133L14.3964 8.17422L10.5867 13.7831C10.5287 13.8678 10.4488 13.9351 10.3556 13.9778L10.2871 14.0027L8.97867 14.2222C8.92953 14.2373 8.87785 14.2422 8.82676 14.2366C8.77568 14.231 8.72626 14.2151 8.68152 14.1898C8.63678 14.1645 8.59765 14.1304 8.56652 14.0895C8.53539 14.0486 8.5129 14.0019 8.50044 13.952L8.48888 13.8791L8.256 12.5724C8.25006 12.4789 8.26875 12.3854 8.31022 12.3013L8.36 12.2178L12.32 6.72C12.4533 6.53156 12.6551 6.43911 12.8036 6.48889L12.8044 6.48978ZM14.3653 9.78844L14.4462 9.86222C14.8169 10.208 15.1111 10.6044 15.1111 10.9929C15.1111 12.0729 13.7964 13.0249 11.7956 13.5884L13.032 11.7618C13.8524 11.3555 14.336 10.8551 14.336 10.3129C14.336 10.2267 14.2978 10.1227 14.2204 10.0035L14.3653 9.78844ZM7.528 1.56164e-05C10.1973 1.56164e-05 12.4204 1.86491 12.9013 4.33158L8.39111 10.6009C8.11022 10.6444 7.82222 10.6667 7.528 10.6667C5.57244 10.6667 3.768 9.65066 2.79022 7.99998C2.31051 7.1932 2.05732 6.27195 2.05732 5.33332C2.05732 4.39469 2.31051 3.47344 2.79022 2.66666C3.768 1.016 5.57244 1.56164e-05 7.528 1.56164e-05ZM7.528 2.46223C5.90133 2.46223 4.58311 3.74756 4.58311 5.33334C4.58311 6.91912 5.90133 8.20445 7.528 8.20445C9.15467 8.20445 10.4711 6.91912 10.4711 5.33336C10.4711 3.74759 9.15378 2.46223 7.52889 2.46223H7.528ZM14.3884 4.65778L15.6507 5.54133C15.7582 5.61692 15.8314 5.73213 15.8541 5.86164C15.8767 5.99115 15.8471 6.12436 15.7716 6.232L15.2916 6.91822C15.2544 6.97171 15.2071 7.01733 15.1522 7.05244C15.0974 7.08755 15.0362 7.11145 14.972 7.12277C14.9079 7.1341 14.8422 7.13261 14.7786 7.1184C14.7151 7.1042 14.655 7.07755 14.6018 7.04L13.3396 6.15642C13.2862 6.11913 13.2406 6.07168 13.2056 6.01679C13.1705 5.9619 13.1466 5.90063 13.1352 5.8365C13.1238 5.77237 13.1251 5.70662 13.1392 5.64301C13.1532 5.5794 13.1796 5.51917 13.2169 5.46577L13.6969 4.78042C13.7725 4.67264 13.8878 4.59928 14.0175 4.57645C14.1471 4.55362 14.2806 4.58319 14.3885 4.65866L14.3884 4.65778ZM7.528 4.04887C8.25511 4.04887 8.84534 4.624 8.84534 5.33333C8.84534 6.04266 8.25511 6.61778 7.528 6.61778C6.8 6.61778 6.21066 6.04267 6.21066 5.33333C6.21066 4.62398 6.8 4.04889 7.528 4.04889V4.04887Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 189 KiB

@ -0,0 +1,73 @@
import InspectionTaskPlan from "@/pages/inspectionmanagement/components/Inspectiontaskplan/InspectionTaskPlan";
import { ConfigProvider, Tabs } from "antd";
import styles from './InspectionManagement.less'
import InspectionRecords from "@/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords";
const items = [
{
key: 1,
label: '巡检管理类型',
children: <InspectionTaskPlan></InspectionTaskPlan>
},
// {
// key:2,
// label:'巡检管理执行',
// children: <InspectionTaskPlan></InspectionTaskPlan>
// },
{
key: 3,
label: '巡检点管理',
children: <InspectionRecords></InspectionRecords>
},
]
export const Title = (props) => {
return (
<div style={{ fontSize: '20px', fontWeight: '400' }}>
<span style={{ borderRight: '3px solid rgba(0,102,101,1)', marginRight: '20px' }}></span>
{props.title}
</div>
)
}
const InspectionManagement = () => {
const customTheme = {
token: {
// 核心主题色修改这里Input 等组件的激活态会自动同步)
primaryColor: '#00b42a', // 例如修改为蓝色(默认),可改为 #f50、#00b42a 等
// 可选:补充其他相关变量(如聚焦时的边框色,默认继承 primaryColor
colorPrimaryHover: '#39c574', // hover 时的颜色
colorPrimaryActive: '#008743', // 点击时的颜色
},
components: {
Switch: {
colorPrimary: '#008743', // 开启状态颜色
colorBg: '#333', // 关闭状态颜色(默认灰色)
},
Pagination: {
colorPrimary: '#39c574',
},
Tree: {
colorPrimary: '#006665',
lineColor: '#006665',
checkboxBorderColor: '#006665'
},
Table: {
headerBg: '#F0F7F7',
// bodyBg:'#F0F7F7',
},
Menu: {
activeBarHeight: 0
},
Select: {
activeBorderColor: '#2C9E9D'
}
},
};
const onChange = () => {
}
return <>
<ConfigProvider theme={customTheme}>
<Tabs className={styles['tabs']} defaultActiveKey={'1'} items={items} onChange={onChange}> </Tabs>
</ConfigProvider>
</>
}
export default InspectionManagement;

@ -0,0 +1,20 @@
.tabs{
:global(.ant-tabs-nav){
background-color: #fff;
border-radius: 8px;
padding: 5px 20px;
}
:global(.ant-tabs-tab-btn){
color: #006665 !important;
font-size:18px !important;
}
:global(.ant-tabs-ink-bar) {
background-color: #006665 !important;
}
:global(.ant-table-thead > tr > th){
background-color:#F0F7F7;
}
}
*{
font-size:16px
}

@ -0,0 +1,134 @@
.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;
}
.logo{
width: 298px;
background-position: -56px -6px;
background-repeat: no-repeat;
height: 54px;
font-size: 20px;
font-weight: 400;
color: #fff;
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;
}
}
.state1{
color:#4E5856
}
.state2{
color:#2C9E9D
}
.state3{
color:#999999
}
.state1,.state2,.state3{
font-size: 16px;
}
.inspection-table{
:global(.ant-table-cell){
background-color:#F0F7F7;
padding:16px 1px !important;
border-bottom: 0.5px solid #DBE8E5 !important;
}
}
.inspection-table1{
:global(.ant-table-cell){
background-color:#F0F7F7;
padding:12px 1px !important;
border-bottom: 0.5px solid #DBE8E5 !important;
}
}
.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;
}
.delBtn{
background-size:cover;
background-position:center;
color:#000;
//opacity:0.7;
border-radius:4px;
width: 88px;
height: 36px;
}
.exportBtn{
background-size:cover;
background-position:center;
color:#fff;
opacity:0.7;
border-radius:4px;
width: 88px;
height: 36px;
}
.resetBtn{
background-size:cover;
background-position:center;
color:#006665;
//opacity:0.7;
border-radius:4px;
width: 88px;
height: 36px;
}
.customDrawer{
:global(.ant-drawer-header){
background-color:#B8E0D833 !important;
}
}
.drawerRow{
margin: 10px 0 20px 0;
:global(.ant-col){
margin-top: 10px;
color: #000;
span{
color: #999999;
font-size:14px;
}
}
}

@ -0,0 +1,77 @@
import { Button, Col, Input, Row, Select } from "antd";
import { useState } from "react";
import styles from './InspectionTaskPlan.less';
// 导入图片
import tempImage from '../../../../assets/img/temp1.png';
const { Search } = Input;
const { Option } = Select;
const InspectionTaskPlan = () => {
// 状态管理
const [searchValue, setSearchValue] = useState('');
const [filterStatus, setFilterStatus] = useState('');
// 处理搜索
const handleSearch = (value) => {
setSearchValue(value);
console.log('搜索:', value);
// 这里可以实现搜索逻辑
};
// 处理状态筛选
const handleStatusFilter = (value) => {
setFilterStatus(value);
console.log('筛选状态:', value);
// 这里可以实现筛选逻辑
};
// 处理重置
const handleReset = () => {
setSearchValue('');
setFilterStatus('');
console.log('重置搜索和筛选');
};
return (
<div className={styles.container}>
{/* 搜索和筛选区域 */}
<Row gutter={16} align="middle" style={{ marginBottom: '16px' }}>
<Col span={8}>
<Search
placeholder="搜索节点、负责人"
allowClear
onSearch={handleSearch}
onChange={(e) => setSearchValue(e.target.value)}
value={searchValue}
style={{ width: '100%' }}
/>
</Col>
<Col span={6}>
<Select
placeholder="状态"
allowClear
style={{ width: '100%' }}
onChange={handleStatusFilter}
value={filterStatus}
>
<Option value="normal">正常</Option>
<Option value="warning">警告</Option>
<Option value="error">异常</Option>
</Select>
</Col>
<Col>
<Button onClick={handleReset}>重置</Button>
</Col>
</Row>
{/* 下方留白区域 */}
<div className={styles.emptyArea}>
<img src={tempImage} alt="巡检计划" style={{ width: '100%', height: 'auto' }} />
</div>
</div>
);
}
export default InspectionTaskPlan;

@ -0,0 +1,59 @@
@import '@/global.less';
.container {
padding: 20px;
background: #fff;
min-height: 100vh;
border-radius: 8px;
}
.searchArea {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.emptyArea {
background-color: #fff;
min-height: 400px;
margin: 0;
padding: 0;
}
.searchArea :global {
.ant-input {
background: transparent;
}
.ant-select-selector {
border: 1px solid #d9d9d9;
border-radius: 6px;
height: 40px;
display: flex;
align-items: center;
}
.ant-select-selector:hover {
border-color: #40a9ff;
border-right-width: 1px;
}
.ant-select-focused:not(.ant-select-disabled):not(.ant-select-customize-input) .ant-select-selector {
border-color: #40a9ff;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
}
@media (max-width: 768px) {
.container {
padding: 10px;
}
.searchArea,
.emptyArea {
padding: 15px;
}
}

@ -20,6 +20,7 @@ import license from '@/assets/img/license.svg'
import people from '@/assets/img/people.svg'
import risk from '@/assets/img/risk.svg'
import rl from '@/assets/img/rl.svg'
import InspectionManagement from '@/assets/img/InspectionManagement.svg'
import { CustomBreadcrumb } from '@/components/GlobalComponent'
@ -88,6 +89,12 @@ const SystemContentList = (props) => {
setMenuItems(newList)
const fixedMenuItems = [
{
"path": "/topnavbar00/business/inspectionmanagement",
icon: <img src={InspectionManagement} alt="巡检管理" style={{ width: '16px', height: '16px' }} />,
"key": "/topnavbar00/business/inspectionmanagement",
"label": "巡检管理"
},
{
"path": "/topnavbar00/business/inspectiontasks",
icon: <img src={rl} alt="巡检任务" style={{ width: '16px', height: '16px' }} />,

@ -12,6 +12,10 @@ const menuItem = [
label: '巡检任务',
key: '/topnavbar00/business/inspectiontasks',
},
{
label: '巡检管理',
key: '/topnavbar00/business/inspectionmanagement',
},
]
const TopNavBar = (props) => {

Loading…
Cancel
Save