feat(状态管理): 新增设备状态管理页面及功能
- 添加状态管理页面路由配置和导航菜单项 - 实现状态管理页面基础布局和功能组件 - 包含设备状态图表展示和列表管理功能 - 删除无用的样式文件untitled-1.txtmain
zjlnb666
3 weeks ago
parent
e4eeefc275
commit
d1ca918075
@ -1,17 +0,0 @@
|
||||
.item{
|
||||
padding: 20px;
|
||||
border: 1px solid;
|
||||
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);
|
||||
background: #FFFFFF4D;
|
||||
backdrop-filter: blur(15px);
|
||||
border-radius: 8px;
|
||||
|
||||
// 合并多个阴影效果，用逗号分隔
|
||||
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;
|
||||
}
|
||||
@ -0,0 +1,533 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Row, Col, Card, Button, Input, Select, DatePicker, Space, Tag, Progress } from 'antd';
|
||||
import { SearchOutlined, InfoCircleOutlined, BellOutlined, DownloadOutlined, ReloadOutlined,PlusOutlined } from '@ant-design/icons';
|
||||
import * as echarts from 'echarts';
|
||||
import TableWithPagination from '@/components/assetmangement/table';
|
||||
import Title from '../homepage/compontent/title';
|
||||
import styles from './StateManagement.less';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
const StateManagement = () => {
|
||||
const pieChartRef = useRef(null);
|
||||
const lineChartRef = useRef(null);
|
||||
const barChartRef = useRef(null);
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [selectedStatus, setSelectedStatus] = useState('all');
|
||||
const [selectedDate, setSelectedDate] = useState(null);
|
||||
|
||||
// 设备状态数据
|
||||
const deviceStatusData = [
|
||||
{ key: '1', deviceId: 'DEV-001', deviceName: '温度传感器A', deviceType: '传感器', status: '在线', ip: '192.168.1.10', protocol: 'MQTT', location: '车间A', uptime: '在线8小时' },
|
||||
{ key: '2', deviceId: 'DEV-002', deviceName: '工业网关B', deviceType: '网关', status: '离线', ip: '192.168.1.11', protocol: 'CoAP', location: '机房B', uptime: '离线2小时' },
|
||||
{ key: '3', deviceId: 'DEV-003', deviceName: '高清摄像头C', deviceType: '摄像头', status: '故障', ip: '192.168.1.12', protocol: 'HTTP', location: '园区C', uptime: '离线1天(故障)' },
|
||||
{ key: '4', deviceId: 'DEV-004', deviceName: '压力传感器D', deviceType: '传感器', status: '在线', ip: '192.168.1.13', protocol: 'Modbus', location: '产线D', uptime: '在线12小时' },
|
||||
{ key: '5', deviceId: 'DEV-005', deviceName: '边缘计算节点E', deviceType: '网关', status: '在线', ip: '192.168.1.14', protocol: 'MQTT', location: '机房A', uptime: '在线24小时' },
|
||||
{ key: '6', deviceId: 'DEV-006', deviceName: '电磁阀F', deviceType: '执行器', status: '离线', ip: '192.168.1.15', protocol: 'Modbus', location: '车间B', uptime: '离线5小时' },
|
||||
];
|
||||
|
||||
// 设备状态占比数据
|
||||
const statusDistributionData = [
|
||||
{ value: 60, name: '在线', itemStyle: { color: '#006665' } },
|
||||
{ value: 25, name: '离线', itemStyle: { color: '#999999' } },
|
||||
{ value: 15, name: '故障', itemStyle: { color: '#FF826D' } },
|
||||
];
|
||||
|
||||
// 在线率趋势数据
|
||||
const onlineRateData = {
|
||||
dates: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
|
||||
rates: [88, 85, 90, 87, 82, 89]
|
||||
};
|
||||
|
||||
// 设备类型分布数据
|
||||
const deviceTypeData = {
|
||||
categories: ['传感器A', '网关A', '摄像头', '传感器B', '网关B', '执行器'],
|
||||
values: [40, 88, 60, 100, 68, 58]
|
||||
};
|
||||
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
{ title: '', dataIndex: 'checkbox', key: 'checkbox', width: 40 },
|
||||
{ title: '设备ID', dataIndex: 'deviceId', key: 'deviceId' },
|
||||
{ title: '设备名称', dataIndex: 'deviceName', key: 'deviceName' },
|
||||
{ title: '设备类型', dataIndex: 'deviceType', key: 'deviceType' },
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
render: (status) => {
|
||||
const colorMap = {
|
||||
'在线': 'green',
|
||||
'离线': 'gray',
|
||||
'故障': 'red'
|
||||
};
|
||||
const statusTextMap = {
|
||||
'在线': '在线(绿色)',
|
||||
'离线': '离线(灰色)',
|
||||
'故障': '故障(红色)'
|
||||
};
|
||||
return <Tag color={colorMap[status]}>{statusTextMap[status]}</Tag>;
|
||||
}
|
||||
},
|
||||
{ title: 'IP地址', dataIndex: 'ip', key: 'ip' },
|
||||
{ title: '协议类型', dataIndex: 'protocol', key: 'protocol' },
|
||||
{ title: '位置信息', dataIndex: 'location', key: 'location' },
|
||||
{ title: '在线时长/离线时间', dataIndex: 'uptime', key: 'uptime' },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
align: 'center',
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<a style={{ color: '#2C9E9D' }}>查看详情</a>
|
||||
<a style={{ color: '#2C9E9D' }}>编辑</a>
|
||||
<a style={{ color: '#ff4d4f' }}>删除</a>
|
||||
{record.status === '在线' && <a style={{ color: '#2C9E9D' }}>巡检</a>}
|
||||
{record.status === '离线' && <a style={{ color: '#2C9E9D' }}>工单</a>}
|
||||
{record.status === '故障' && <a style={{ color: '#2C9E9D' }}>升级</a>}
|
||||
{record.status === '离线' && record.deviceType === '执行器' && <a style={{ color: '#2C9E9D' }}>报修</a>}
|
||||
</Space>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
// 初始化图表
|
||||
useEffect(() => {
|
||||
// 设备状态占比饼图
|
||||
if (pieChartRef.current) {
|
||||
const pieChart = echarts.init(pieChartRef.current);
|
||||
const pieOption = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 10,
|
||||
top: 'center',
|
||||
itemWidth: 14,
|
||||
itemHeight: 14,
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
},
|
||||
itemGap: 30,
|
||||
formatter: function(name) {
|
||||
// 找到对应的数值
|
||||
const item = statusDistributionData.find(item => item.name === name);
|
||||
return `${name} ${item.value}%`;
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: '设备状态',
|
||||
type: 'pie',
|
||||
radius: [0, '70%'],
|
||||
center: ['60%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 0,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
data: statusDistributionData
|
||||
}]
|
||||
};
|
||||
pieChart.setOption(pieOption);
|
||||
}
|
||||
|
||||
// 在线率趋势折线图
|
||||
if (lineChartRef.current) {
|
||||
const lineChart = echarts.init(lineChartRef.current);
|
||||
const lineOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '{b}<br/>{a}: {c}%'
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top:'5%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: onlineRateData.dates,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#d9d9d9',
|
||||
type: 'dashed'
|
||||
},
|
||||
show:true
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666',
|
||||
show:true
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true // 使x轴刻度与标签对齐
|
||||
},
|
||||
boundaryGap: false, // 设置坐标轴两端是否留白
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#CCCCCC',
|
||||
type: 'deshed'
|
||||
},
|
||||
show:true
|
||||
}
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#d9d9d9'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}%',
|
||||
color: '#666'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#f0f0f0',
|
||||
type: 'solid'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: '在线率',
|
||||
type: 'line',
|
||||
data: onlineRateData.rates,
|
||||
smooth: false,
|
||||
lineStyle: {
|
||||
color: '#2C9E9D',
|
||||
width: 3,
|
||||
// type: 'dashed'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#2C9E9D'
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: '#E8F3EFcc'
|
||||
}, {
|
||||
offset: 1, color: '#EAF6F2cc'
|
||||
}]
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: '#E8F3EFcc'
|
||||
}, {
|
||||
offset: 1, color: '#EAF6F2cc'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
lineChart.setOption(lineOption);
|
||||
}
|
||||
|
||||
// 设备类型分布柱状图
|
||||
if (barChartRef.current) {
|
||||
const barChart = echarts.init(barChartRef.current);
|
||||
const barOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top:'10%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: deviceTypeData.categories,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#d9d9d9'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666',
|
||||
interval: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#CCCCCC',
|
||||
type: 'deshed'
|
||||
},
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#d9d9d9'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#f0f0f0',
|
||||
type: 'dashed' // 类目之间的虚线
|
||||
}
|
||||
},
|
||||
max:()=>{
|
||||
return Math.max(...deviceTypeData.values) * 1.2;
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: '设备数量',
|
||||
type: 'bar',
|
||||
data: deviceTypeData.values,
|
||||
itemStyle: {
|
||||
color: function(params) {
|
||||
// 根据数据值设置不同的颜色
|
||||
const colors = ['#86bbd8', '#8884d8', '#006665', '#2e8bc0', '#a0c4e2', '#e8d4b0'];
|
||||
return colors[params.dataIndex % colors.length];
|
||||
}
|
||||
},
|
||||
barWidth: '30%',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
textStyle: {
|
||||
color: '#666'
|
||||
}
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
barChart.setOption(barOption);
|
||||
}
|
||||
|
||||
// 响应式处理
|
||||
const handleResize = () => {
|
||||
if (pieChartRef.current) {
|
||||
const pieChart = echarts.getInstanceByDom(pieChartRef.current);
|
||||
pieChart && pieChart.resize();
|
||||
}
|
||||
if (lineChartRef.current) {
|
||||
const lineChart = echarts.getInstanceByDom(lineChartRef.current);
|
||||
lineChart && lineChart.resize();
|
||||
}
|
||||
if (barChartRef.current) {
|
||||
const barChart = echarts.getInstanceByDom(barChartRef.current);
|
||||
barChart && barChart.resize();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 筛选处理函数
|
||||
const handleSearch = () => {
|
||||
console.log('搜索条件:', { searchValue, selectedStatus, selectedDate });
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setSearchValue('');
|
||||
setSelectedStatus('all');
|
||||
setSelectedDate(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ padding: '20px', backgroundColor: '#fff', minHeight: '100vh' }}>
|
||||
{/* 筛选条件区域 */}
|
||||
<Card
|
||||
style={{
|
||||
border:'none'
|
||||
}}
|
||||
bodyStyle={{ padding: '16px 24px' }}
|
||||
title={
|
||||
<>
|
||||
<Row justify="space-between">
|
||||
<Title title="筛选条件" />
|
||||
<Col span={8} style={{ textAlign: 'right' }}>
|
||||
<Space>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<SearchOutlined />}
|
||||
onClick={handleSearch}
|
||||
style={{ borderRadius: '6px' }}
|
||||
className={styles['search-button']}
|
||||
>
|
||||
查询
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleReset}
|
||||
style={{ borderRadius: '6px' }}
|
||||
className={styles['reset-button']}
|
||||
icon={<ReloadOutlined /> }
|
||||
>
|
||||
重置
|
||||
</Button>
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16} align="middle" style={{margin:'20px 0'}} justify='space-between'>
|
||||
<Col span={6}>
|
||||
<Input
|
||||
placeholder="请输入设备名称或编号"
|
||||
value={searchValue}
|
||||
onChange={(e) => setSearchValue(e.target.value)}
|
||||
style={{ borderRadius: '6px' }}
|
||||
suffix={<SearchOutlined style={{ color: '#bfbfbf' }} />}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<label>设备状态:</label>
|
||||
<Select
|
||||
value={selectedStatus}
|
||||
onChange={setSelectedStatus}
|
||||
style={{ width: '152px', borderRadius: '6px' ,marginLeft:'10px'}}
|
||||
>
|
||||
<Option value="all">全部状态</Option>
|
||||
<Option value="online">在线</Option>
|
||||
<Option value="offline">离线</Option>
|
||||
<Option value="abnormal">异常</Option>
|
||||
</Select>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<label>位置信息:</label>
|
||||
<Select
|
||||
value={selectedStatus}
|
||||
// onChange={setSelectedStatus}
|
||||
style={{ width: '152px', borderRadius: '6px' ,marginLeft:'10px'}}
|
||||
>
|
||||
<Option value="all">全部</Option>
|
||||
</Select>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<label>设备状态:</label>
|
||||
<Select
|
||||
value={selectedStatus}
|
||||
// onChange={setSelectedStatus}
|
||||
style={{ width: '152px', borderRadius: '6px' ,marginLeft:'10px'}}
|
||||
>
|
||||
<Option value="all">全部</Option>
|
||||
</Select>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<label>协议类型:</label>
|
||||
<Select
|
||||
value={selectedStatus}
|
||||
// onChange={setSelectedStatus}
|
||||
style={{ width: '152px', borderRadius: '6px' ,marginLeft:'10px'}}
|
||||
>
|
||||
<Option value="all">全部</Option>
|
||||
</Select>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
}
|
||||
>
|
||||
|
||||
</Card>
|
||||
|
||||
{/* 数据可视化区域 */}
|
||||
<Row gutter={20} style={{ marginBottom: '20px' }}>
|
||||
<Col span={6}>
|
||||
<Card
|
||||
title= {<Title title="设备状态占比饼图"/>}
|
||||
style={{ borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}
|
||||
bodyStyle={{ padding: '16px', height: '200px' }}
|
||||
>
|
||||
<div ref={pieChartRef} style={{ width: '100%', height: '100%' }} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={9}>
|
||||
<Card
|
||||
title={<Title title="设备在线率趋势折线图"/>}
|
||||
style={{ borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}
|
||||
bodyStyle={{ padding: '16px', height: '200px' }}
|
||||
>
|
||||
<div ref={lineChartRef} style={{ width: '100%', height: '100%' }} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={9}>
|
||||
<Card
|
||||
title={<Title title="设备类型分布柱状图"/>}
|
||||
style={{ borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}
|
||||
bodyStyle={{ padding: '16px', height: '200px' }}
|
||||
>
|
||||
<div ref={barChartRef} style={{ width: '100%', height: '100%' }} />
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* 设备列表表格 */}
|
||||
<Card
|
||||
style={{
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
|
||||
}}
|
||||
bodyStyle={{ padding: '0' }}
|
||||
>
|
||||
<div style={{ padding: '20px 24px', borderBottom: '1px solid #f0f0f0' }}>
|
||||
<Row justify="space-between" align="middle">
|
||||
<Title title="设备状态列表"/>
|
||||
</Row>
|
||||
<Row justify="space-between" align="middle" style={{ margin: '20px 0' }}>
|
||||
<Col span={12}>
|
||||
<Button style={{marginRight:30}} className={styles['search-button']}>导入数据</Button>
|
||||
<Button style={{marginRight:30}} className={styles['reset-button']}>导出数据</Button>
|
||||
<Button className={styles['del-button']}>删除</Button>
|
||||
</Col>
|
||||
<Col span={12} style={{ textAlign: 'right' }}>
|
||||
<Button className={styles['search-button']} icon={<PlusOutlined />}>新增设备</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<TableWithPagination
|
||||
columns={columns}
|
||||
dataSource={deviceStatusData}
|
||||
rowSelection={true}
|
||||
style={{ padding: '0 24px' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StateManagement;
|
||||
@ -0,0 +1,34 @@
|
||||
.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;
|
||||
}
|
||||
Loading…
Reference in New Issue