diff --git a/config/routes.js b/config/routes.js index ed6422a..486a1d8 100644 --- a/config/routes.js +++ b/config/routes.js @@ -139,6 +139,18 @@ export default [ name: 'inspectionTemplate', component: './inspection_inspectionTemplate/InspectionTemplate', }, + // 巡检任务 + { + path: '/topnavbar00/business/inspection/inspectionTasks', + name: 'inspectionTasks', + component: './inspection_inspectionTasks/InspectionTasks', + }, + // 巡检记录 + { + path: '/topnavbar00/business/inspection/inspectionRecords', + name: 'inspectionRecords', + component: './inspection_inspectionRecords/InspectionRecords', + }, ] } ], diff --git a/src/assets/img/img.png b/src/assets/img/img.png new file mode 100644 index 0000000..c41b5e1 Binary files /dev/null and b/src/assets/img/img.png differ diff --git a/src/pages/inspection_inspectionRecords/InspectionRecords.js b/src/pages/inspection_inspectionRecords/InspectionRecords.js new file mode 100644 index 0000000..9e765d3 --- /dev/null +++ b/src/pages/inspection_inspectionRecords/InspectionRecords.js @@ -0,0 +1,9 @@ +const InspectionRecords = () => { + return ( +
+

InspectionRecords

+ +
+ ); +}; +export default InspectionRecords; diff --git a/src/pages/inspection_inspectionTasks/InspectionTasks.js b/src/pages/inspection_inspectionTasks/InspectionTasks.js new file mode 100644 index 0000000..aa26c78 --- /dev/null +++ b/src/pages/inspection_inspectionTasks/InspectionTasks.js @@ -0,0 +1,8 @@ +const InspectionTasks = () => { + return ( +
+

InspectionTasks

+
+ ); +}; +export default InspectionTasks; diff --git a/src/pages/inspection_inspectionTemplate/InspectionTemplate.js b/src/pages/inspection_inspectionTemplate/InspectionTemplate.js index 1e807bc..d005073 100644 --- a/src/pages/inspection_inspectionTemplate/InspectionTemplate.js +++ b/src/pages/inspection_inspectionTemplate/InspectionTemplate.js @@ -1,7 +1,278 @@ +import {Button, Col, Row, Select, Space} from "antd"; +import Title from '../homepage/compontent/title' +import styles from './InspectionTemplate.less' +import {PlusOutlined, SearchOutlined, SyncOutlined} from "@ant-design/icons"; +import TableWithPagination from "@/components/assetmangement/table"; const InspectionTemplate = () => { + const columns = [ + { + title: '模板 ID', + dataIndex: 'id', + key: 'id', + }, + { + title: '模板名称', + dataIndex: 'name', + key: 'name', + }, + { + title: '类型', + dataIndex: 'type', + key: 'type', + filters: [ + { text: '设备巡检', value: '设备巡检' }, + { text: '环境巡检', value: '环境巡检' }, + { text: '综合巡检', value: '综合巡检' }, + ], + onFilter: (value, record) => record.type === value, + }, + { + title: '巡检周期', + dataIndex: 'cycle', + key: 'cycle', + sorter: (a, b) => { + const order = { '实时触发': 0, '天': 1, '周': 2, '月': 3 }; + return order[a.cycle] - order[b.cycle]; + }, + }, + { + title: '触发逻辑', + dataIndex: 'triggerLogic', + key: 'triggerLogic', + ellipsis: true, + }, + { + title: '地点范围', + dataIndex: 'location', + key: 'location', + }, + { + title: 'AI推荐度', + dataIndex: 'aiRecommendation', + key: 'aiRecommendation', + render: (text) => { + const colorMap = { + '高': 'red', + '中': 'orange', + '次': 'green' + }; + return ( + + {text} + + ); + }, + // sorter: (a, b) => { + // const order = { '高': 0, '中': 1, '次': 2 }; + // return order[a.aiRecommendation] - order[b.aiRecommendation]; + // }, + }, + { + title: '操作', + key: 'action', + render: (_, record) => ( + + handleEdit(record)} style={{color:'#2C9E9D'}}>编辑 + handleDelete(record)} style={{ color: '#ff4d4f' }}>删除 + handleCopy(record)} style={{color: '#006665'}}>复制 + + ), + align: 'center', + }, + ]; + const dataSource = [ + { + key: '1', + id: 'TPL-001', + name: '核心设备日检', + type: '设备巡检', + cycle: '天', + triggerLogic: '设备在线时触发参数全检', + location: '机房 A', + aiRecommendation: '高', + }, + { + key: '2', + id: 'TPL-002', + name: '车间环境周检', + type: '环境巡检', + cycle: '周', + triggerLogic: '温湿度超阈值时触发专项巡检', + location: '车间 B', + aiRecommendation: '次', + }, + { + key: '3', + id: 'TPL-003', + name: '传感器月检', + type: '设备巡检', + cycle: '月', + triggerLogic: '设备离线时触发故障排查流程', + location: '园区传感器组', + aiRecommendation: '高', + }, + { + key: '4', + id: 'TPL-004', + name: '网关异常巡检', + type: '设备巡检', + cycle: '实时触发', + triggerLogic: '网关离线时自动触发巡检', + location: '全网关设备', + aiRecommendation: '高', + }, + { + key: '5', + id: 'TPL-005', + name: '仓库温湿度检', + type: '环境巡检', + cycle: '天', + triggerLogic: '温湿度波动>5% 时触发巡检', + location: '仓库 C', + aiRecommendation: '中', + }, + { + key: '6', + id: 'TPL-006', + name: '综合设备巡检', + type: '综合巡检', + cycle: '周', + triggerLogic: '设备状态异常时触发分级巡检', + location: '办公楼设备组', + aiRecommendation: '中', + }, + { + key: '7', + id: 'TPL-007', + name: '边缘节点巡检', + type: '设备巡检', + cycle: '天', + triggerLogic: '负载>80% 时触发性能巡检', + location: '边缘计算区', + aiRecommendation: '高', + }, + ]; + +// 操作函数示例 + const handleEdit = (record) => { + console.log('编辑:', record); + // 打开编辑弹窗 + }; + + const handleDelete = (record) => { + console.log('删除:', record); + // 确认删除逻辑 + }; + + const handleCopy = (record) => { + console.log('复制:', record); + // 复制逻辑 + }; return ( -
- 巡检模板 +
+ + +
+
+ + + + </Col> + <Col> + <Button icon={<SearchOutlined />} className={styles['search-button']} style={{marginRight:'30px'}}>查询</Button> + <Button icon={<SyncOutlined />} className={styles['reset-button']}>重置</Button> + </Col> + </Row> + <Row gutter={20} style={{marginTop:'20px'}}> + <Col> + <label htmlFor="">模板类型:</label> + <Select options={[{ + label:'全部', + value:'1' + },{ + label:'巡检模板', + value:'2' + }]} + style={{width:132}} + ></Select> + </Col> + <Col> + <label htmlFor="">AI推荐度:</label> + <Select + options={ + [ + {label:'全部', value:'1'}, + {label:'高', value:'2'}, + {label:'中', value:'3'}, + {label:'低', value:'4'} + ] + } + style={{width:132}} + ></Select> + </Col> + </Row> + </div> + <div style={{marginTop:'20px'}}> + <Title title='模板列表'/> + <Row style={{margin:'20px 0'}} justify={"space-between"}> + <Col> + <Button className={styles['search-button']} style={{marginRight:'30px'}}>模版导入</Button> + <Button className={styles['reset-button']}>模板导出</Button> + </Col> + <Col> + <Button className={styles['reset-button']} style={{marginRight:'30px'}}>AI推荐模板</Button> + <Button icon={<PlusOutlined/>} className={styles['search-button']}>新增模板</Button> + </Col> + </Row> + <TableWithPagination columns={columns} dataSource={dataSource} rowSelection={true}> + </TableWithPagination> + </div> + </div> + </Col> + <Col span={9}> + <div style={{backgroundColor:'#fff',borderRadius:'6px',padding:'20px'}}> + <Title title='逻辑配置面板'/> + <img src={require('@/assets/img/img.png')} alt="" style={{width:'100%',height:'100%'}}/> + </div> + <div style={{backgroundColor: '#fff', borderRadius: '6px', padding: 20, marginTop: 20 ,marginBottom:'50px'}}> + <Title title='AI 推荐辅助面板'/> + <div className={styles['ai-recommend-panel']}> + <div style={{display: 'flex', alignItems: 'center', marginBottom: 10, fontSize: 16}}> + <span style={{ + width: 5, + height: 5, + backgroundColor: '#006665', + borderRadius: '50%', + marginRight: 10 + }}></span><span>推荐项 1:</span> + </div> + <p>在‘核心设备日检’中增加‘硬盘使用率≥90% 时自动触发巡检’</p> + <p style={{color: '#006665'}}>理由 “历史数据中硬盘满导致的故障占比 15%”</p> + <div style={{textAlign:'right'}}> + <Button className={styles['search-button']} style={{marginRight:'30px'}}>采纳</Button> + <Button className={styles['reset-button']}>忽略</Button> + </div> + </div> + <div className={styles['ai-recommend-panel']}> + <div style={{display: 'flex', alignItems: 'center', marginBottom: 10, fontSize: 16}}> + <span style={{ + width: 5, + height: 5, + backgroundColor: '#006665', + borderRadius: '50%', + marginRight: 10 + }}></span><span>推荐项 2:</span> + </div> + <p>将‘车间环境周检’的触发条件调整为‘温湿度波动>3% 时触发</p> + <p style={{color: '#006665'}}>理由 “该条件下环境异常的识别率提升 20%”</p> + <div style={{textAlign: 'right'}}> + <Button className={styles['search-button']} style={{marginRight: '30px'}}>采纳</Button> + <Button className={styles['reset-button']}>忽略</Button> + </div> + </div> + </div> + </Col> + </Row> </div> ) } diff --git a/src/pages/inspection_inspectionTemplate/InspectionTemplate.less b/src/pages/inspection_inspectionTemplate/InspectionTemplate.less new file mode 100644 index 0000000..507cfd6 --- /dev/null +++ b/src/pages/inspection_inspectionTemplate/InspectionTemplate.less @@ -0,0 +1,73 @@ +.search-button { + background-image: url('../../assets/img/assetmangement1.png'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + color: #fff; + border-radius: 4px; + height: 36px; + border-color: #d9d9d9; + background-color: #045F5E80; +} + +.reset-button { + background-image: url('../../assets/img/assetmangement2.png'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + color: rgba(0, 102, 101, 1); + border-radius: 4px; + height: 36px; + border-color: #d9d9d9; + background-color: #B7E5D533; +} + +.del-button { + background-image: url('../../assets/img/assetmangement3.png'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + color: #000; + border-radius: 4px; + height: 36px; + width: 88px; + border-color: #d9d9d9; + background-color: #E5B7B733; +} +.ai-recommend-panel{ + /* 毛玻璃效果 - 核心! */ + backdrop-filter: blur(15px); + -webkit-backdrop-filter: blur(15px); + + /* 多层阴影 */ + box-shadow: + -2px 4px 10px 0px rgba(145, 145, 145, 0.05), + -7px 17px 18px 0px rgba(145, 145, 145, 0.04), + -15px 37px 24px 0px rgba(145, 145, 145, 0.03); + /* 渐变边框 */ + border: 1px solid; + border-image: conic-gradient( + from 102.21deg at 52.75% 38.75%, + rgba(249, 249, 249, 0.5) -32.95deg, + rgba(64, 64, 64, 0.5) 10.52deg, + rgba(64, 64, 64, 0.35) 32.12deg, + #FFFFFF 60.28deg, + rgba(255, 255, 255, 0.5) 107.79deg, + rgba(64, 64, 64, 0.35) 187.59deg, + #F9F9F9 207.58deg, + #FFFFFF 287.31deg, + rgba(249, 249, 249, 0.5) 327.05deg, + rgba(64, 64, 64, 0.5) 370.52deg + ) 1; + /* 内部背景(创建UI的渐变感) */ + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.3), + rgba(255, 255, 255, 0.1) + ); + padding:20px; + margin-top: 20px; + p{ + font-size: 14px; + } +} diff --git a/src/pages/nav_system_content/SystemContentList.js b/src/pages/nav_system_content/SystemContentList.js index 5877823..6fa5bf9 100644 --- a/src/pages/nav_system_content/SystemContentList.js +++ b/src/pages/nav_system_content/SystemContentList.js @@ -250,6 +250,18 @@ const SystemContentList = (props) => { key: "/topnavbar00/business/inspection/inspectionTemplate", "label": "巡检模板" }, + // 巡检任务 + { + path: '/topnavbar00/business/inspection/inspectionTasks', + key: "/topnavbar00/business/inspection/inspectionTasks", + "label": "巡检任务" + }, + // 巡检记录 + { + path: '/topnavbar00/business/inspection/inspectionRecords', + key: "/topnavbar00/business/inspection/inspectionRecords", + "label": "巡检记录" + }, ] } ] diff --git a/src/pages/serviceticket_analysis/Analysis.css b/src/pages/serviceticket_analysis/Analysis.css new file mode 100644 index 0000000..f5008f0 --- /dev/null +++ b/src/pages/serviceticket_analysis/Analysis.css @@ -0,0 +1,96 @@ +.container { + padding: 20px; + background-color: #f0f2f5; + min-height: calc(100vh - 64px); +} +.header { + margin-bottom: 20px; +} +.querySection { + background: #fff; + padding: 16px 20px; + border-radius: 6px; + margin-bottom: 20px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} +.queryForm { + display: flex; + align-items: center; +} +.queryForm .ant-form-item { + margin-bottom: 0; + margin-right: 16px; +} +.statsSection { + margin-bottom: 20px; +} +.statCard { + background: #fff; + padding: 20px; + border-radius: 6px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; +} +.statCard:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} +.chartsSection { + margin-bottom: 20px; +} +.chartContainer { + background: #fff; + padding: 20px; + border-radius: 6px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + height: 350px; + display: flex; + flex-direction: column; +} +.chartTitle { + font-size: 16px; + font-weight: 500; + color: #333; + margin-bottom: 16px; + text-align: center; +} +.chart { + flex: 1; + width: 100%; +} +.tableSection { + background: #fff; + padding: 20px; + border-radius: 6px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} +.tableTitle { + font-size: 16px; + font-weight: 500; + color: #333; + margin-bottom: 16px; +} +/* 响应式调整 */ +@media (max-width: 768px) { + .container { + padding: 12px; + } + .queryForm { + flex-direction: column; + align-items: flex-start; + } + .queryForm .ant-form-item { + margin-right: 0; + margin-bottom: 16px; + width: 100%; + } + .queryForm .ant-form-item:last-child { + margin-bottom: 0; + } + .chartContainer { + height: 300px; + padding: 16px; + } + .statCard { + padding: 16px; + } +} diff --git a/src/pages/topnavbar/TopNavBar.js b/src/pages/topnavbar/TopNavBar.js index fdaa9b4..ce118a3 100644 --- a/src/pages/topnavbar/TopNavBar.js +++ b/src/pages/topnavbar/TopNavBar.js @@ -79,6 +79,16 @@ const menuItem = [ label: '智能巡检', key: '/topnavbar00/business/inspection/inspectionTemplate', }, + // 巡检任务 + { + label: '巡检任务', + key: '/topnavbar00/business/inspection/inspectionTasks', + }, + // 巡检记录 + { + label: '巡检记录', + key: '/topnavbar00/business/inspection/inspectionRecords', + }, ] const TopNavBar = (props) => {