diff --git a/config/routes.js b/config/routes.js index ac98aff..c343da1 100644 --- a/config/routes.js +++ b/config/routes.js @@ -122,6 +122,31 @@ export default [ }, ] }, + //智能巡检 + { + path: '/topnavbar00/business/inspection', + name: 'inspection_inspectionTemplate', + routes: [ + // 巡检模板 + { + path: '/topnavbar00/business/inspection/inspectionTemplate', + 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 new file mode 100644 index 0000000..d005073 --- /dev/null +++ b/src/pages/inspection_inspectionTemplate/InspectionTemplate.js @@ -0,0 +1,279 @@ +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> + ) +} +export default InspectionTemplate 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 91006c4..6d4f12a 100644 --- a/src/pages/nav_system_content/SystemContentList.js +++ b/src/pages/nav_system_content/SystemContentList.js @@ -217,6 +217,39 @@ const SystemContentList = (props) => { }, ] }, + { + path: '/topnavbar00/business/inspection', + icon: <img + src={icon1} + alt="智能巡检" + style={{ + width: '16px', + height: '16px', + opacity: selectedKey.includes('/topnavbar00/business/inspection') ? 1 : 0.6 + }} + />, + key: "/topnavbar00/business/inspection", + "label": "智能巡检", + children: [ + { + path: '/topnavbar00/business/inspection/inspectionTemplate', + 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": "巡检记录" + }, + ] + } ] setMenuItems(fixedMenuItems) // 初始化默认路由 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/serviceticket_analysis/Analysis.js b/src/pages/serviceticket_analysis/Analysis.js index 59b72e4..9e0bb92 100644 --- a/src/pages/serviceticket_analysis/Analysis.js +++ b/src/pages/serviceticket_analysis/Analysis.js @@ -1,9 +1,821 @@ -import Title from '@/pages/homepage/compontent/title' +import React, { useEffect, useRef, useState } from 'react'; +import Title from '@/pages/homepage/compontent/title'; +import { + Row, + Col, + Select, + DatePicker, + Statistic, + Card, + Table, + Tag, + Space, + Form, Button, +} from 'antd'; +import * as echarts from 'echarts'; +import styles from './Analysis.less'; + +const { Option } = Select; +const { RangePicker } = DatePicker; +const Title1=(props)=>{ + return( + <div style={{display:'flex',alignItems:'center',fontSize:20,marginBottom:'20px'}}> + <span style={{background:'#006665',display:'inline-block',height:'6px',width:'6px',borderRadius:'50%',marginRight:'7px'}}></span> + <span>{props.title}</span> + </div> + ) +} + const Analysis = () => { + const [form] = Form.useForm(); + const numberLineChartRef=useRef(null) + const numberLineChartRef1=useRef(null) + const numberLineChartRef2=useRef(null) + const pieChartRef = useRef(null); + const barChartRef = useRef(null); + const lineChartRef = useRef(null); + const barChartRef1 = useRef(null); + const barChartRef2 = useRef(null); + // 初始化图表 + useEffect(() => { + if (numberLineChartRef.current) { + const chart = echarts.init(numberLineChartRef.current); + const numberLineOption = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'line' + } + }, + grid: { + top: '10%', + left: '0%', + right: '6%', + bottom: '10%', + containLabel: true + }, + xAxis: [ + { + type: 'category', + data: ['5月', '6月', '7月', '8月', '9月', '10月', '11月'], + axisTick: { + alignWithLabel: true + }, + boundaryGap: false + } + ], + yAxis: [ + { + type: 'value', + name: '月环比增长15%', + } + ], + series: [ + { + name: '工单数量', + type: 'line', + data: [900, 1000, 950, 1050, 900, 850, 800], + lineStyle: { + color:'#006665' + }, + itemStyle:{ + color:'#006665' + }, + areaStyle:{ + color:'#DFEAE5' + } + } + ] + }; + chart.setOption(numberLineOption); + const handleResize = () => { + chart.resize(); + }; + window.addEventListener('resize', handleResize); + return () => { + window.removeEventListener('resize', handleResize); + chart?.dispose(); + }; + } + }, []); + useEffect(() => { + if (numberLineChartRef1.current) { + const chart = echarts.init(numberLineChartRef1.current); + const numberLineOption1 = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'line' + } + }, + grid: { + top: '10%', + left: '0%', + right: '6%', + bottom: '10%', + containLabel: true + }, + xAxis: [ + { + type: 'category', + data: ['5月', '6月', '7月', '8月', '9月', '10月', '11月'], + axisTick: { + alignWithLabel: true + }, + boundaryGap: false + } + ], + yAxis: [ + { + type: 'value', + name: '月环比增长15%', + } + ], + series: [ + { + name: '工单数量', + type: 'line', + data: [900, 1000, 950, 1050, 900, 850, 800], + lineStyle: { + color:'#FF826D' + }, + itemStyle:{ + color:'#FF826D' + }, + areaStyle:{ + color:'#F4EDED' + } + } + ] + }; + chart.setOption(numberLineOption1); + const handleResize = () => { + chart.resize(); + }; + window.addEventListener('resize', handleResize); + return () => { + window.removeEventListener('resize', handleResize); + chart?.dispose(); + }; + } + }, []); + useEffect(() => { + if (numberLineChartRef2.current) { + const chart = echarts.init(numberLineChartRef2.current); + const numberLineOption1 = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'line' + } + }, + grid: { + top: '10%', + left: '0%', + right: '6%', + bottom: '10%', + containLabel: true + }, + xAxis: [ + { + type: 'category', + data: ['5月', '6月', '7月', '8月', '9月', '10月', '11月'], + axisTick: { + alignWithLabel: true + }, + boundaryGap: false + } + ], + yAxis: [ + { + type: 'value', + name: '月环比增长15%', + } + ], + series: [ + { + name: '工单数量', + type: 'line', + data: [2.5, 3, 5, 2.5, 4, 4.5, 3.5], + lineStyle: { + color:'#006665' + }, + itemStyle:{ + color:'#006665' + }, + areaStyle:{ + color:'#E2EFEA' + } + } + ] + }; + chart.setOption(numberLineOption1); + const handleResize = () => { + chart.resize(); + }; + window.addEventListener('resize', handleResize); + return () => { + window.removeEventListener('resize', handleResize); + chart?.dispose(); + }; + } + }, []); + + useEffect(()=>{ + // 饼图 - 工单分类统计 + if (pieChartRef.current) { + const chart = echarts.init(pieChartRef.current); + const pieOption = { + tooltip: { + trigger: 'item', + formatter: '{b}: {c} ({d}%)' + }, + legend: { + orient: 'vertical', + left: 'left', + textStyle: { + fontSize: 16 + }, + itemGap:30, + itemWidth:0, + formatter:'{name}' + + }, + series: [ + { + name: '工单类型', + type: 'pie', + radius: '70%', + center: ['75%', '40%'], + data: [ + {value: 85, name: '设备维修', itemStyle: {color: '#C1D3D1'}}, + {value: 60, name: '故障报修', itemStyle: {color: '#045F5E80'}}, + {value: 45, name: '软件升级', itemStyle: {color: '#FFBC00'}}, + {value: 30, name: '巡检任务', itemStyle: {color: '#FF826D'}} + ], + labelLine:{ + show:false + }, + label:{ + show:false + } + } + ] + }; + chart.setOption(pieOption); + const handleResize = () => { + chart.resize(); + }; + window.addEventListener('resize', handleResize); + return () => { + window.removeEventListener('resize', handleResize); + chart?.dispose(); + }; + } + + },[]) + useEffect(()=>{ + // 柱状图 - 工单状态统计 + if (barChartRef.current) { + const chart = echarts.init(barChartRef.current); + const barOption = { + tooltip: { + trigger: 'item', + formatter: '{b}: {c} ({d}%)' + }, + legend: { + orient: 'vertical', + left: 'left', + textStyle: { + fontSize: 16 + }, + itemGap:30, + itemWidth:0, + formatter:'{name}' + + }, + series: [ + { + name: '工单类型', + type: 'pie', + radius: '70%', + center: ['75%', '40%'], + data: [ + {value: 85, name: '设备维修', itemStyle: {color: '#C1D3D1'}}, + {value: 60, name: '故障报修', itemStyle: {color: '#045F5E80'}}, + {value: 45, name: '软件升级', itemStyle: {color: '#FFBC00'}}, + {value: 30, name: '巡检任务', itemStyle: {color: '#FF826D'}} + ], + labelLine:{ + show:false + }, + label:{ + show:false + } + } + ] + }; + chart.setOption(barOption); + const handleResize = () => { + chart.resize(); + }; + window.addEventListener('resize', handleResize); + return () => { + window.removeEventListener('resize', handleResize); + chart?.dispose(); + }; + } + + },[]) + useEffect(()=>{ + // 柱状图 - 工单状态统计 + if (barChartRef1.current) { + const chart = echarts.init(barChartRef1 .current); + const barOption = { + // 提示框（鼠标悬浮显示数据） + tooltip: { + trigger: 'axis', + axisPointer: { type: 'shadow' } + }, + // 图例（多系列时开启） + // legend: { + // top: 0, + // right: 10 + // }, + // 网格（调整图表内边距，适配容器） + grid: { + left: '3%', + right: '4%', + bottom: '3%', + top: '10%', + containLabel: true + }, + // X轴（替换为你的实际标签） + xAxis: { + type: 'category', + data: ['传感器', '服务器', '网络设备', '安全设备', '网关','摄像头','执行器','机房环境类','其他'], + axisLabel: { fontSize: 12 } + }, + // Y轴 + yAxis: { + type: 'value', + axisLabel: { fontSize: 12 } + }, + // 系列数据（替换为你的实际数值） + series: [ + { + name: '数据1', + type: 'bar', + data: [{value: 85, itemStyle: {color: '#C1D3D1'}}, {value: 95, itemStyle: {color: '#045F5E80'}}, {value: 96, itemStyle: {color: '#FFBC00'}}, {value: 65, itemStyle: {color: '#FF826D'}}, {value: 47, itemStyle: {color: '#045F5E80'}}, {value: 61, itemStyle: {color: '#FFBC00'}}, {value: 71, itemStyle: {color: '#FF826D'}}, {value: 45, itemStyle: {color: '#045F5E80'}}, {value: 92, itemStyle: {color: '#FFBC00'}}], // 匹配X轴的数值 + // 柱子样式（可选） + // itemStyle: { + // color: '#1890ff', // 阿里云蓝（可自定义） + // borderRadius: 4 // 圆角 + // }, + label:{ + position:'top', + color:'#333333', + show: true + }, + // 柱子宽度 + barWidth: '20%' + }, + // 如需多系列，新增对象即可 + // { + // name: '数据2', + // type: 'bar', + // data: [18, 35, 25, 48, 30], + // itemStyle: { color: '#52c41a' } + // } + ] + }; + chart.setOption(barOption); + const handleResize = () => { + chart.resize(); + }; + window.addEventListener('resize', handleResize); + return () => { + window.removeEventListener('resize', handleResize); + chart?.dispose(); + }; + } + + },[]) + useEffect(()=>{ + // 折线图 - 工单趋势 + if (lineChartRef.current) { + const chart = echarts.init(lineChartRef.current); + const lineOption = { + tooltip: { + trigger: 'axis' + }, + // legend: { + // data: ['申请工单', '完成工单'], + // textStyle: { + // fontSize: 12 + // } + // }, + grid: { + top:'10%', + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] + }, + yAxis: { + type: 'value' + }, + series: [ + + { + name: '完成工单', + type: 'line', + stack: '总量', + data: [25, 27, 27, 29, 22, 26, 21], + lineStyle: { + color: '#52c41a' + }, + + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + {offset: 0, color: 'rgba(82, 196, 26, 0.3)'}, + {offset: 1, color: 'rgba(82, 196, 26, 0.1)'} + ]) + } + } + ] + }; + chart.setOption(lineOption); + const handleResize = () => { + chart.resize(); + }; + window.addEventListener('resize', handleResize); + return () => { + window.removeEventListener('resize', handleResize); + chart?.dispose(); + }; + } + + },[]) + useEffect(()=>{ + // 柱状图 - 工单状态统计 + if (barChartRef2.current) { + const chart = echarts.init(barChartRef2 .current); + const barOption = { + // 提示框（鼠标悬浮显示数据） + tooltip: { + trigger: 'axis', + axisPointer: { type: 'shadow' } + }, + // 图例（多系列时开启） + // legend: { + // top: 0, + // right: 10 + // }, + // 网格（调整图表内边距，适配容器） + grid: { + left: '3%', + right: '4%', + bottom: '3%', + top: '10%', + containLabel: true + }, + // X轴（替换为你的实际标签） + xAxis: { + type: 'category', + data: ['生产部', '研发部', '运维部', '财务部', '人事部'], + axisLabel: { fontSize: 12 } + }, + // Y轴 + yAxis: { + type: 'value', + axisLabel: { fontSize: 12 } + }, + // 系列数据（替换为你的实际数值） + series: [ + { + name: '数据1', + type: 'bar', + data: [{value: 74, itemStyle: {color: '#C1D3D1'}}, {value: 95, itemStyle: {color: '#045F5E80'}}, {value: 96, itemStyle: {color: '#FFBC00'}}, {value: 65, itemStyle: {color: '#FF826D'}}, {value: 47, itemStyle: {color: '#045F5E80'}}], // 匹配X轴的数值 + // 柱子样式（可选） + itemStyle: { + // color: '#1890ff', // 阿里云蓝（可自定义） + borderRadius: 4 // 圆角 + }, + label:{ + position:'top', + color:'#333333', + show: true + }, + // 柱子宽度 + barWidth: '20%' + }, + + ] + }; + chart.setOption(barOption); + const handleResize = () => { + chart.resize(); + }; + window.addEventListener('resize', handleResize); + return () => { + window.removeEventListener('resize', handleResize); + chart?.dispose(); + }; + } + + },[]) + // 表格数据 + const tableColumns = [ + { + title: '部门', + dataIndex: 'department', + key: 'department' + }, + { + title: '申请工单', + dataIndex: 'applied', + key: 'applied' + }, + { + title: '完成工单', + dataIndex: 'completed', + key: 'completed' + }, + { + title: '完成率', + dataIndex: 'completionRate', + key: 'completionRate', + render: (rate) => <Tag color="#52c41a">{rate}</Tag> + }, + { + title: '平均处理时长', + dataIndex: 'avgDuration', + key: 'avgDuration' + } + ]; + + const tableData = [ + { key: '1', department: '生产部', applied: 120, completed: 108, completionRate: '90%', avgDuration: '2.5天' }, + { key: '2', department: '技术部', applied: 85, completed: 82, completionRate: '96.5%', avgDuration: '1.8天' }, + { key: '3', department: '运维部', applied: 156, completed: 148, completionRate: '94.9%', avgDuration: '2.2天' }, + { key: '4', department: '财务部', applied: 45, completed: 45, completionRate: '100%', avgDuration: '1.2天' }, + { key: '5', department: '行政部', applied: 68, completed: 62, completionRate: '91.2%', avgDuration: '1.9天' } + ]; + const pieColumns = [ + { + title: '工单类型', + dataIndex: 'type', + key: 'type', + }, + { + title: '数量', + dataIndex: 'count', + key: 'count', + }, + { + title: '占比', + dataIndex: 'proportion', + key: 'proportion', + }, + { + title: '平均处理时长', + dataIndex: 'avgTime', + key: 'avgTime', + }, + ]; + const pieData = [ + { + key: '1', + type: '设备维修', + count: 540, + proportion: '45%', + avgTime: '5.0小时', + }, + { + key: '2', + type: '软件升级', + count: 300, + proportion: '25%', + avgTime: '3.5小时', + }, + { + key: '3', + type: '故障报修', + count: 240, + proportion: '20%', + avgTime: '6.0小时', + }, + { + key: '4', + type: '巡检任务', + count: 120, + proportion: '10%', + avgTime: '2.0小时', + }, + ]; + + const pieColumns1=[ + { + title: '排名', + dataIndex: 'order', + key: 'order', + }, + { + title: '故障原因', + dataIndex: 'faultReason', + key: 'faultReason', + }, + ] + const pieData1=[ + { + key: '1', + order: 'NO.1', + faultReason: '传感器硬件损坏', + }, + { + key: '2', + order: 'NO.2', + faultReason: '网关软件版本不兼容', + }, + { + key: '3', + order: 'NO.3', + faultReason: '摄像头网络波动', + }, + + ] return ( - <div> - <Title title="统计分析" /> + <div className={styles.container}> + {/* 统计卡片 */} + <Row gutter={[20, 20]} className={styles.statsSection}> + <Col xs={24} sm={12} md={6}> + <div className={styles.statCard}> + <Row style={{width:'100%'}}> + <Col span={8}> + <div style={{height: '100%',margin:'15px 0'}}> + <div className={styles.statValue}>1200</div> + <div className={styles.statTitle}>工单总数</div> + </div> + </Col> + <Col span={16}> + <div style={{color:'#666666'}}>月环比增长 <span>15</span>%</div> + <div ref={numberLineChartRef} style={{width:'100%',height:'100%',marginBottom:'-15px'}}></div> + </Col> + </Row> + </div> + </Col> + <Col xs={24} sm={12} md={6}> + <div className={styles.statCard}> + <Row style={{width: '100%'}}> + <Col span={8}> + <div style={{height: '100%', margin: '15px 0'}}> + <div className={styles.statValue}>85</div> + <div className={styles.statTitle}>故障设备数</div> + </div> + </Col> + <Col span={16}> + <div style={{color: '#666666'}}>月环比下降 <span>15</span>%</div> + <div ref={numberLineChartRef1} style={{width: '100%', height: '100%', marginBottom: '-15px'}}></div> + </Col> + </Row> + </div> + </Col> + <Col xs={24} sm={12} md={6}> + <div className={styles.statCard}> + <Row style={{width: '100%'}}> + <Col span={8}> + <div style={{height: '100%', margin: '15px 0'}}> + <div className={styles.statValue}>92%</div> + <div className={styles.statTitle}>工单处理完成率</div> + </div> + </Col> + <Col span={16} > + <div style={{color: '#666666',lineHeight:'65px'}}>目标 95%，差距 3%</div> + <progress value={92} max={100} style={{height:'28px',padding:0}}>70%</progress> + </Col> + </Row> + </div> + </Col> + <Col xs={24} sm={12} md={6}> + <div className={styles.statCard}> + <Row style={{width: '100%'}}> + <Col span={8}> + <div style={{height: '100%', margin: '15px 0'}}> + <div className={styles.statValue}>4.2小时</div> + <div className={styles.statTitle}>平均处理时长</div> + </div> + </Col> + <Col span={16}> + <div style={{color: '#666666'}}>月环比缩短 <span>0.5</span>小时</div> + <div ref={numberLineChartRef2} style={{width: '100%', height: '100%', marginBottom: '-15px'}}></div> + </Col> + </Row> + </div> + </Col> + </Row> + + {/* 图表区域 */} + <Row gutter={[20, 20]} className={styles.chartsSection}> + {/* 饼图 */} + <Col xs={24} lg={6}> + <div className={styles.chartContainer}> + <Title1 title={'工单类型统计'}></Title1> + <div ref={pieChartRef} style={{height:'200px',width:'100%'}} /> + <div> + <Table columns={pieColumns} dataSource={pieData} style={{width:'100%'}} pagination={false}></Table> + </div> + </div> + </Col> + {/* 柱状图 */} + <Col xs={24} lg={6}> + <div className={styles.chartContainer}> + <Title1 title={'故障类型统计'}></Title1> + <div ref={barChartRef} className={styles.chart}/> + <div> + <Table columns={pieColumns1} dataSource={pieData1} style={{width: '100%'}} pagination={false}></Table> + </div> + </div> + </Col> + {/* 折线图 */} + <Col xs={24} lg={12}> + <Row gutter={[20, 20]} style={{display:'flex',flexDirection:'column'}}> + <Col xs={24} lg={24}> + <div className={styles.chartContainer}> + <Title1 title={'设备类型统计'}></Title1> + <div ref={barChartRef1} className={styles.chart}/> + </div> + </Col> + <Col xs={24} lg={24}> + <div className={styles.chartContainer}> + <Title1 title={'时间趋势统计'}></Title1> + <div ref={lineChartRef} className={styles.chart}/> + </div> + </Col> + </Row> + </Col> + </Row> + + {/* 部门统计表格 */} + <Row gutter={20}> + <Col span={6}> + <div className={styles.chartContainer}> + <Title1 title={'部门分布统计'}></Title1> + <div ref={barChartRef2} className={styles.chart}/> + </div> + </Col> + <Col span={18}> + <div className={styles.chartContainer}> + <Title1 title={'筛选导出'}></Title1> + <Form layout={"vertical"}> + <Row gutter={50} align={'middle'}> + <Col span={8}> + <Form.Item label="工单类型" > + <Select> + <Option value="1">故障工单</Option> + <Option value="2">维护工单</Option> + </Select> + </Form.Item> + </Col> + <Col span={8}> + <Form.Item label="设备类型" > + <Select> + <Option value="1">故障工单</Option> + <Option value="2">维护工单</Option> + </Select> + </Form.Item> + </Col> + <Col span={8}> + <Form.Item label="故障类型" > + <Select> + <Option value="1">故障工单</Option> + <Option value="2">维护工单</Option> + </Select> + </Form.Item> + </Col> + <Col span={8}> + <Form.Item label="时间范围" > + <DatePicker style={{width:'100%'}}></DatePicker> + </Form.Item> + </Col> + <Col span={8} offset={8} style={{textAlign:'right'}}> + <Button className={styles['search-button']} style={{marginRight:30}}>导出图表</Button> + <Button className={styles['reset-button']}>导出数据</Button> + </Col> + </Row> + + </Form> + </div> + </Col> + </Row> + </div> - ) -} -export default Analysis \ No newline at end of file + ); +}; + +export default Analysis; diff --git a/src/pages/serviceticket_analysis/Analysis.less b/src/pages/serviceticket_analysis/Analysis.less index e69de29..082ca19 100644 --- a/src/pages/serviceticket_analysis/Analysis.less +++ b/src/pages/serviceticket_analysis/Analysis.less @@ -0,0 +1,189 @@ +.container { + padding: 20px; + background-color: #fff; + //min-height: calc(100vh - 64px); + margin-bottom:50px; +} + +.statsSection { + margin-bottom: 20px; +} + +.statCard { + width:100%; + padding: 10px 20px; + border-radius: 6px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; + position: relative; + overflow: hidden; + background: + linear-gradient(#fff, #fff) padding-box, + /* 外层渐变背景作为边框 */ + 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 + ) border-box; + + /* 关键：设置透明边框，让渐变背景透出来 */ + border: 2px solid transparent; + + &:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + } + .statValue{ + font-size: 26px; + font-weight: 600; + line-height: 32px; + letter-spacing: 0em; + text-align: left; + color: #333333; + } + .statTitle{ + font-size: 16px; + font-weight: 400; + line-height: 24px; + letter-spacing: 0em; + text-align: left; + margin-top: 20px; + color:#666666; + white-space: nowrap; + } + + + +} + +.chartsSection { + margin-bottom: 20px; +} + +.chartContainer { + background: + linear-gradient(#fff, #fff) padding-box, + /* 外层渐变背景作为边框 */ + 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 + ) border-box; + + /* 关键：设置透明边框，让渐变背景透出来 */ + border: 2px solid transparent; + padding: 20px; + border-radius: 6px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + //height: 350px; + //display: flex; + //flex-direction: column; + width:100%; + height:100%; +} + +.chartTitle { + font-size: 16px; + font-weight: 500; + color: #333; + margin-bottom: 16px; + text-align: center; +} + +.chart { + //flex: 1; + width: 100%; + height:200px; +} + +.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; + } +} +.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; +} diff --git a/src/pages/serviceticket_history/History.css b/src/pages/serviceticket_history/History.css deleted file mode 100644 index 000b787..0000000 --- a/src/pages/serviceticket_history/History.css +++ /dev/null @@ -1,73 +0,0 @@ -.item { - padding: 20px; - background: #FFFFFF4D; - backdrop-filter: blur(15px); - border-radius: 8px; - position: relative; - margin-top: 20px; - box-shadow: -2px 4px 10px 0px #9191910D, -7px 17px 18px 0px #9191910A, -15px 37px 24px 0px #91919108, -27px 66px 29px 0px #91919103, -42px 103px 31px 0px #91919100; -} -.item::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - border: 1px solid transparent; - border-image-slice: 1; - border-image-source: 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); - border-radius: 8px; - pointer-events: none; -} -.item-num { - font-size: 26px; - font-weight: 600; - line-height: 32px; - letter-spacing: 0em; - text-align: left; -} -.item-title { - font-size: 16px; - font-weight: 400; - line-height: 24px; - letter-spacing: 0em; - text-align: left; - margin-top: 20px; - color: #666666; - white-space: nowrap; -} -.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: #006665; - 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; -} diff --git a/src/pages/serviceticket_history/History.js b/src/pages/serviceticket_history/History.js index 4b4090c..cb9e3bd 100644 --- a/src/pages/serviceticket_history/History.js +++ b/src/pages/serviceticket_history/History.js @@ -80,6 +80,12 @@ const History = () => { const chartDom = document.getElementById('ringChart'); const myChart = echarts.init(chartDom); const option = { + grid: { + top: '20%', + left: '20%', + right: '20%', + bottom: '20%', + }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', @@ -138,7 +144,7 @@ const History = () => { </div> <div className={styles['item']}> <div id="ringChart" style={{ height: 240 }}></div> - + </div> </div> </div> diff --git a/src/pages/serviceticket_my/My.js b/src/pages/serviceticket_my/My.js index de64366..ee75045 100644 --- a/src/pages/serviceticket_my/My.js +++ b/src/pages/serviceticket_my/My.js @@ -1,9 +1,151 @@ -import Title from '@/pages/homepage/compontent/title' +import { Button, Col, Progress, Row, Tag, Space, Form, Input, Select, DatePicker, } from "antd"; +import Title from '../homepage/compontent/title' +import styles from './My.less' +import svg1 from '../../assets/img/asset-main1.svg' +import { SearchOutlined } from "@ant-design/icons"; +import TableWithPagination from "@/components/assetmangement/table"; +import {useEffect} from 'react' +import * as echarts from 'echarts'; +const { Option } = Select; + +const { RangePicker } = DatePicker; + const My = () => { - return ( - <div> - <Title title="我的工单" /> - </div> - ) + const [form] = Form.useForm(); + // 表格列配置 + const ruleColumns = [ + { title: '工单ID', dataIndex: 'workOrderId', key: 'workOrderId' }, + { title: '工单类型', dataIndex: 'type', key: 'type' }, + { title: '申请人', dataIndex: 'applicant', key: 'applicant' }, + { title: '申请时间', dataIndex: 'applyTime', key: 'applyTime',align:'center'}, + { + title: '状态', + dataIndex: 'status', + key: 'status', + align: 'center', + render: (status) => { + // 根据图片中状态的颜色更新渲染逻辑 + let color = ''; + switch (status) { + case '已完成': + color = '#52c41a'; // 绿色 + break; + case '已驳回': + color = '#f5222d'; // 红色 + break; + case '处理中': + color = '#1890ff'; // 蓝色 + break; + case '待处理': + color = '#fa8c16'; // 橙色 + break; + default: + color = '#8c8c8c'; + } + return <span style={{color:color}}>{status}</span>; + } + }, + { title: '进度', dataIndex: 'progress', key: 'progress',align:'center' }, + { + title: '操作', + dataIndex: 'action', + key: 'action', + align:'center', + render: (text, record) => { + const actions = []; + if (record.status === '已完成') { + actions.push(<a key="view" style={{ color: '#2C9E9D' }}>查看详情</a>); + actions.push(<a key="evaluate" style={{ color: '#2C9E9D' }}>评价</a>); + actions.push(<a key="delete" style={{ color: '#2C9E9D' }}>删除</a>); + } else if (record.status === '已驳回') { + actions.push(<a key="edit" style={{ color: '#2C9E9D' }}>编辑</a>); + actions.push(<a key="reapply" style={{ color: '#2C9E9D' }}>重新申请</a>); + } else if (record.status === '处理中' || record.status === '待处理') { + actions.push(<a key="view" style={{ color: '#2C9E9D' }}>查看详情</a>); + actions.push(<a key="process" style={{ color: '#2C9E9D' }}>处理</a>); + actions.push(<a key="delete" style={{ color: '#2C9E9D' }}>删除</a>); + } + return <Space>{actions}</Space>; + } + }, + ]; + + // 表格数据 + const reminderRuleData = [ + { key: '1', workOrderId: 'WO-MY01', type: '设备维修', applicant: '李舒萍', applyTime: '2025-10-30', status: '处理中', progress: '50%', priority: '紧急' }, + { key: '2', workOrderId: 'WO-MY02', type: '软件升级', applicant: '吴洁丽', applyTime: '2025-10-29', status: '待处理', progress: '0%', priority: '高' }, + { key: '3', workOrderId: 'WO-MY03', type: '故障报修', applicant: '李姝萍', applyTime: '2025-10-28', status: '已完成', progress: '100%', priority: '中' }, + { key: '4', workOrderId: 'WO-MY04', type: '巡检任务', applicant: '何克金', applyTime: '2025-10-27', status: '处理中', progress: '60%', priority: '中' }, + { key: '5', workOrderId: 'WO-MY05', type: '设备维修', applicant: '李勇', applyTime: '2025-10-26', status: '已驳回', progress: '0%', priority: '中' }, + { key: '6', workOrderId: 'WO-MY06', type: '软件升级', applicant: '周校民', applyTime: '2025-10-25', status: '待处理', progress: '0%', priority: '高' }, + { key: '7', workOrderId: 'WO-MY07', type: '故障报修', applicant: '何艳丽', applyTime: '2025-10-24', status: '已完成', progress: '100%', priority: '中' } + ]; + const conicColors = { + '0%': '#006665', + '50%': '#45FFEC', + '55%': '#006665', + '90%': '#45FFEC', + }; + + return ( + <div style={{ backgroundColor: '#f0f7f7', overflowX: 'hidden' ,padding:'20px',width:'100%'}}> + <Row gutter={20} style={{ height: '100%' ,width:'100%'}}> + + <div style={{ padding: '20px', backgroundColor: '#fff', height: '100%' ,width:'100%'}}> + <Row style={{ marginBottom: '20px', backgroundColor: '#fff' }}> + <Row style={{ width: '100%', marginBottom: '20px' }}> + <Col span={12}> + <Title title="查询条件" /> + </Col> + <Col span={12} style={{ textAlign: 'right' }}> + <Space> + <Button icon={<SearchOutlined />} htmlType="submit" className={styles['search-button']}>查询</Button> + <Button className={styles['reset-button']}>重置</Button> + </Space> + </Col> + </Row> + <Form layout="inline" form={form} style={{ width: '100%', borderBottom: '1px solid #eeeeee', paddingBottom: '20px' }}> + <Row justify="space-between" style={{ width: '100%' }}> + <Form.Item name="applicant" > + <Input placeholder="分组名称、分组 ID" /> + </Form.Item> + <Form.Item name="type" label="工单类型"> + <Select placeholder="请选择工单类型"> + <Option value="设备维修">设备维修</Option> + <Option value="设备安装">设备安装</Option> + <Option value="设备巡检">设备巡检</Option> + <Option value="设备更换">设备更换</Option> + </Select> + </Form.Item> + <Form.Item name="status" label="工单状态"> + <Select placeholder="请选择状态"> + <Option value="待处理">待处理</Option> + <Option value="处理中">处理中</Option> + <Option value="已完成">已完成</Option> + <Option value="已取消">已取消</Option> + </Select> + </Form.Item> + <Form.Item name="applyTime" label="申请时间"> + <RangePicker style={{ width: 240 }} /> + </Form.Item> + </Row> + </Form> + </Row> + <Row style={{ width: '100%', marginTop: '20px', marginBottom: '50px' }}> + <Title title="待办工单" /> + <Row style={{ width: '100%', marginTop: '20px' }}> + + <Button className={styles['search-button']} style={{marginRight:'30px'}}>导出我的工单</Button> + <Button className={styles['del-button']}>删除</Button> + </Row> + <Row style={{ width: '100%', marginTop: '20px' }}> + <TableWithPagination columns={ruleColumns} dataSource={reminderRuleData} rowSelection={true}></TableWithPagination> + </Row> + </Row> + </div> + + </Row> + </div> + ) } -export default My \ No newline at end of file +export default My; diff --git a/src/pages/serviceticket_my/My.less b/src/pages/serviceticket_my/My.less index e69de29..3b0c222 100644 --- a/src/pages/serviceticket_my/My.less +++ b/src/pages/serviceticket_my/My.less @@ -0,0 +1,83 @@ +.item{ + padding: 20px; + background: #FFFFFF4D; + backdrop-filter: blur(15px); + border-radius: 8px; + position: relative; + margin-top: 20px; + + // 使用伪元素创建边框 + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + border-image-slice: 1; + border-image-source: 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); + border-radius: 8px; + pointer-events: none; + } + // 合并多个阴影效果，用逗号分隔 + box-shadow: + -2px 4px 10px 0px #9191910D, + -7px 17px 18px 0px #9191910A, + -15px 37px 24px 0px #91919108, + -27px 66px 29px 0px #91919103, + -42px 103px 31px 0px #91919100; + + +} +.item-num{ + font-size: 26px; + font-weight: 600; + line-height: 32px; + letter-spacing: 0em; + text-align: left; +} +.item-title{ + font-size: 16px; + font-weight: 400; + line-height: 24px; + letter-spacing: 0em; + text-align: left; + margin-top: 20px; + color:#666666; + white-space: nowrap; +} +.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; +} diff --git a/src/pages/topnavbar/TopNavBar.js b/src/pages/topnavbar/TopNavBar.js index c7d334c..99a9fd1 100644 --- a/src/pages/topnavbar/TopNavBar.js +++ b/src/pages/topnavbar/TopNavBar.js @@ -70,6 +70,21 @@ const menuItem = [ label: '统计分析', key: '/topnavbar00/business/serviceticket/analysis', }, + // 智能巡检 + { + label: '智能巡检', + key: '/topnavbar00/business/inspection/inspectionTemplate', + }, + // 巡检任务 + { + label: '巡检任务', + key: '/topnavbar00/business/inspection/inspectionTasks', + }, + // 巡检记录 + { + label: '巡检记录', + key: '/topnavbar00/business/inspection/inspectionRecords', + }, ] const TopNavBar = (props) => { @@ -215,7 +230,7 @@ const TopNavBar = (props) => { itemHoverColor:'#333333', itemSelectedColor:'#333333', }, - + }, } return (