diff --git a/src/pages/inspection_inspectionRecords/InspectionRecords.js b/src/pages/inspection_inspectionRecords/InspectionRecords.js index 9e765d3..239dffb 100644 --- a/src/pages/inspection_inspectionRecords/InspectionRecords.js +++ b/src/pages/inspection_inspectionRecords/InspectionRecords.js @@ -1,9 +1,502 @@ +import {Button, Col, Form, Row, Select, DatePicker, Input} from "antd"; +import Title from "@/pages/homepage/compontent/title"; +import {PlusOutlined, SearchOutlined, SyncOutlined} from "@ant-design/icons"; +import styles from "./InspectionRecords.less"; +import TableWithPagination from "@/components/assetmangement/table"; +import {useRef,useEffect} from "react"; +import * as echarts from "echarts"; +const {RangePicker} = DatePicker; +const Search = Input; const InspectionRecords = () => { + const lineChartRef=useRef(null) + const barChartRef=useRef(null) + const zhuChartRef=useRef(null) + + useEffect(()=>{ + if(lineChartRef.current){ + const lineChart =echarts.init(lineChartRef.current) + const options={ + grid:{ + top: '10%', + bottom: '10%', + left: '10%', + right: '10%', + }, + xAxis: { + type: 'category', + data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'], + boundaryGap: false, + splitLine:{ + show: true, + type:'dashed', + lineStyle:{ + color:'#CCCCCC', + } + }, + axisTick: { + show: false, + }, + }, + yAxis: { + type: 'value', + splitLine:{ + show:false, + } + }, + series: [{ + data: [150, 230, 224, 218, 135, 147, 260], + type: 'line', + lineStyle: { + color: '#2C9E9D', + width: 2, + }, + itemStyle:{ + color: '#2C9E9D', + }, + areaStyle: { + color: '#E0ECE8', + + }, + }], + } + lineChart.setOption(options) + window.addEventListener('resize',()=>{ + lineChart.resize() + }) + return ()=>{ + lineChart.dispose() + } + } + },[]) + useEffect(()=>{ + if(barChartRef.current){ + const barChart =echarts.init(barChartRef.current) + const data = [ + { value: 40, name: '传感器' ,itemStyle:{color: '#006665',}}, + { value: 30, name: '网关' ,itemStyle:{color: '#999999',}}, + { value: 20, name: '摄像头' ,itemStyle:{color: '#FF826D',}}, + { value: 10, name: '其他' ,itemStyle:{color: '#FFBC00',}} + ]; + const total = data.reduce((sum, item) => sum + item.value, 0); + const option = { + legend: { + orient: 'vertical', // 水平排列 + top: 10, + left:0, + // icon:'none' + itemGap:20, + itemWidth: 0, + // useHTML: true, + // 关键2：清空富文本，避免冲突 + + formatter: function (name) { + const item = data.find(d => d.name === name); + if (item) { + const percent = ((item.value / total) * 100).toFixed(1); + // 使用对应的 rich 标签 + return `${name} ${percent}%`; + } + return name; + } + }, + grid:{ + top: '10%', + bottom: '10%', + left: 0, + right: '10%', + }, + series: [ + { + name: '销售额', + type: 'pie', + radius: ['0%', '45%'], // 环形图 + center: ['70%', '40%'], + avoidLabelOverlap: true, // 防止标签重叠 + labelLine: { + show: false // 设置为 false 即可 + }, + label:{ + show:false + }, + data:data, + } + ] + }; + barChart.setOption(option) + window.addEventListener('resize',()=>{ + barChart.resize() + }) + return ()=>{ + barChart.dispose() + } + } + },[]) + useEffect(()=>{ + if(zhuChartRef.current){ + const Chart =echarts.init(zhuChartRef.current) + const option = { + + // 提示框配置 + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' // 阴影指示器 + } + }, + + // 网格配置 + grid: { + left: '3%', + right: '4%', + bottom: '3%', + top: '20%', + containLabel: true + }, + + // X轴配置 + xAxis: { + type: 'category', + data: ['硬件故障', '软件故障', '网络故障', '环境异常'], + axisLine: { + show: true + }, + axisTick: { + show: true + }, + axisLabel:{ + interval:0, + width: 40, + overflow:'break', + + }, + splitLine:{ + show: true, + type: 'dashed' // 虚线网格 + } + }, + + // Y轴配置 + yAxis: { + type: 'value', + axisLine: { + show: true + }, + axisTick: { + show: true + }, + splitLine: { + lineStyle: { + type: 'dashed' // 虚线网格 + } + } + }, + + // 系列配置 + series: [ + { + name: '销售量', + type: 'bar', + data: [{value:120,itemStyle:{color: '#92C2DD'}}, {value:200,itemStyle:{color: '#BAD4DB'}}, {value:150,itemStyle:{color: '#5E949B'}}, {value:80,itemStyle:{color: '#10758E'}}], + barWidth: '40%' ,// 柱条宽度 + label:{ + show: true, + position: 'top', + }, + + }, + + ] + }; + Chart.setOption(option) + window.addEventListener('resize',()=>{ + Chart.resize() + }) + return ()=>{ + Chart.dispose() + } + } + },[]) + + const columns = [ + { + title: '记录 ID', + dataIndex: 'recordId', + key: 'recordId', + }, + { + title: '任务名称', + dataIndex: 'taskName', + key: 'taskName', + }, + { + title: '关联模板', + dataIndex: 'template', + key: 'template', + }, + { + title: '巡检时间', + dataIndex: 'inspectionTime', + key: 'inspectionTime', + }, + { + title: '涉及设备数', + dataIndex: 'deviceCount', + key: 'deviceCount', + }, + { + title: '异常设备数', + dataIndex: 'abnormalCount', + key: 'abnormalCount', + }, + { + title: '巡检结果', + dataIndex: 'result', + key: 'result', + // render: (text) => { + // const color = text === '正常' ? 'green' : 'red'; + // return {text}; + // }, + }, + { + title: '操作', + key: 'actions', + render: () => ( +
+ + +
+ ), + align: 'center', + }, + ]; + const dataSource = [ + { + key: '1', + recordId: 'REC-001', + taskName: '核心设备日检任务', + template: '核心设备日检', + inspectionTime: '2025-10-30', + deviceCount: 10, + abnormalCount: 0, + result: '异常', + }, + { + key: '2', + recordId: 'REC-002', + taskName: '车间环境周检任务', + template: '车间环境周检', + inspectionTime: '2025-10-29', + deviceCount: 20, + abnormalCount: 0, + result: '正常', + }, + { + key: '3', + recordId: 'REC-003', + taskName: '传感器月检任务', + template: '传感器月检', + inspectionTime: '2025-10-28', + deviceCount: 8, + abnormalCount: 0, + result: '异常', + }, + { + key: '4', + recordId: 'REC-004', + taskName: '网关异常巡检任务', + template: '网关异常巡检', + inspectionTime: '2025-10-27', + deviceCount: 3, + abnormalCount: 0, + result: '异常', + }, + { + key: '5', + recordId: 'REC-005', + taskName: '仓库温湿度检任务', + template: '仓库温湿度检', + inspectionTime: '2025-10-26', + deviceCount: 15, + abnormalCount: 0, + result: '正常', + }, + { + key: '6', + recordId: 'REC-006', + taskName: '综合设备巡检任务', + template: '综合设备巡检', + inspectionTime: '2025-10-25', + deviceCount: 6, + abnormalCount: 0, + result: '异常', + }, + { + key: '7', + recordId: 'REC-007', + taskName: '边缘节点巡检任务', + template: '边缘节点巡检', + inspectionTime: '2025-10-24', + deviceCount: 2, + abnormalCount: 0, + result: '正常', + }, + ]; + return ( -
-

InspectionRecords

+
+
+ + + + + + + + + +
+ + + + + + + + + + + + + +