新增页面：巡检管理——实时监控
parent
99443b6d1e
commit
d4848ea0b3
@ -0,0 +1,291 @@
|
|||||||
|
import React, { useRef, useEffect } from 'react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ECharts仪表盘组件 - 支持动态大小
|
||||||
|
*/
|
||||||
|
export const EChartsGauge = ({ id, option, height, width }) => {
|
||||||
|
const chartRef = useRef(null);
|
||||||
|
const chartInstanceRef = useRef(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// 确保在浏览器环境中运行
|
||||||
|
if (typeof window !== 'undefined' && chartRef.current) {
|
||||||
|
const echarts = require('echarts');
|
||||||
|
|
||||||
|
// 初始化图表
|
||||||
|
if (!chartInstanceRef.current) {
|
||||||
|
chartInstanceRef.current = echarts.init(chartRef.current);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置配置
|
||||||
|
chartInstanceRef.current.setOption(option);
|
||||||
|
|
||||||
|
// 响应窗口大小变化
|
||||||
|
const handleResize = () => {
|
||||||
|
if (chartInstanceRef.current) {
|
||||||
|
chartInstanceRef.current.resize();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
|
||||||
|
// 清理函数
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('resize', handleResize);
|
||||||
|
if (chartInstanceRef.current) {
|
||||||
|
chartInstanceRef.current.dispose();
|
||||||
|
chartInstanceRef.current = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}, [option]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={chartRef}
|
||||||
|
id={id}
|
||||||
|
style={{ width, height }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 温度仪表盘配置生成函数
|
||||||
|
* @param {number} value - 温度值
|
||||||
|
* @returns {object} ECharts配置选项
|
||||||
|
*/
|
||||||
|
export const getTemperatureGaugeOption = (value = 28) => {
|
||||||
|
return {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'gauge',
|
||||||
|
startAngle: 180,
|
||||||
|
endAngle: 0,
|
||||||
|
min: 0,
|
||||||
|
max: 120,
|
||||||
|
splitNumber: 6,
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(4, 95, 94, 0.5)',
|
||||||
|
shadowColor: 'rgba(4, 95, 94, 0.7)',
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 2,
|
||||||
|
shadowOffsetY: 2
|
||||||
|
},
|
||||||
|
progress: {
|
||||||
|
show: true,
|
||||||
|
roundCap: true,
|
||||||
|
width: 18,
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(4, 95, 94, 0.5)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
|
||||||
|
length: '75%',
|
||||||
|
width: 16,
|
||||||
|
offsetCenter: [0, '5%'],
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(4, 95, 94, 1)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
roundCap: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 18,
|
||||||
|
color: [
|
||||||
|
[1, 'rgba(4, 95, 94, 0.5)']
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
splitNumber: 2,
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: '#999'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
length: 12,
|
||||||
|
lineStyle: {
|
||||||
|
width: 3,
|
||||||
|
color: 'rgba(4, 95, 94, 0.8)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
distance: 30,
|
||||||
|
color: 'rgba(4, 95, 94, 0.8)',
|
||||||
|
fontSize: 20
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
show: true,
|
||||||
|
offsetCenter: [0, '10%'],
|
||||||
|
fontSize: 18,
|
||||||
|
color: 'rgba(4, 95, 94, 0.8)'
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
width: '60%',
|
||||||
|
lineHeight: 40,
|
||||||
|
height: 40,
|
||||||
|
borderRadius: 8,
|
||||||
|
offsetCenter: [0, '35%'],
|
||||||
|
valueAnimation: true,
|
||||||
|
formatter: function (value) {
|
||||||
|
return '{value|温度：' + value.toFixed(0) + '℃}';
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
value: {
|
||||||
|
fontSize: 20,
|
||||||
|
fontWeight: '400',
|
||||||
|
color: 'rgba(4, 95, 94, 1)'
|
||||||
|
},
|
||||||
|
unit: {
|
||||||
|
fontSize: 20,
|
||||||
|
color: 'rgba(4, 95, 94, 0.8)',
|
||||||
|
padding: [0, 0, -20, 10]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: value,
|
||||||
|
name: ''
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 湿度仪表盘配置生成函数
|
||||||
|
* @param {number} value - 湿度值
|
||||||
|
* @returns {object} ECharts配置选项
|
||||||
|
*/
|
||||||
|
export const getHumidityGaugeOption = (value = 55) => {
|
||||||
|
return {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'gauge',
|
||||||
|
startAngle: 180,
|
||||||
|
endAngle: 0,
|
||||||
|
min: 0,
|
||||||
|
max: 120,
|
||||||
|
splitNumber: 6,
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(4, 95, 94, 0.5)',
|
||||||
|
shadowColor: 'rgba(4, 95, 94, 0.7)',
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 2,
|
||||||
|
shadowOffsetY: 2
|
||||||
|
},
|
||||||
|
progress: {
|
||||||
|
show: true,
|
||||||
|
roundCap: true,
|
||||||
|
width: 18,
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(4, 95, 94, 0.5)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
|
||||||
|
length: '75%',
|
||||||
|
width: 16,
|
||||||
|
offsetCenter: [0, '5%'],
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(4, 95, 94, 1)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
roundCap: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 18,
|
||||||
|
color: [
|
||||||
|
[1, 'rgba(4, 95, 94, 0.5)']
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
splitNumber: 2,
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: '#999'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
length: 12,
|
||||||
|
lineStyle: {
|
||||||
|
width: 3,
|
||||||
|
color: 'rgba(4, 95, 94, 0.8)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
distance: 30,
|
||||||
|
color: 'rgba(4, 95, 94, 0.8)',
|
||||||
|
fontSize: 20
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
show: true,
|
||||||
|
offsetCenter: [0, '10%'],
|
||||||
|
fontSize: 18,
|
||||||
|
color: 'rgba(4, 95, 94, 0.8)'
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
width: '60%',
|
||||||
|
lineHeight: 40,
|
||||||
|
height: 40,
|
||||||
|
borderRadius: 8,
|
||||||
|
offsetCenter: [0, '35%'],
|
||||||
|
valueAnimation: true,
|
||||||
|
formatter: function (value) {
|
||||||
|
return '{value|湿度：' + value.toFixed(0) + '%}';
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
value: {
|
||||||
|
fontSize: 20,
|
||||||
|
fontWeight: '400',
|
||||||
|
color: 'rgba(4, 95, 94, 1)'
|
||||||
|
},
|
||||||
|
unit: {
|
||||||
|
fontSize: 20,
|
||||||
|
color: 'rgba(4, 95, 94, 0.8)',
|
||||||
|
padding: [0, 0, -20, 10]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: value,
|
||||||
|
name: ''
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 温湿度仪表盘组合组件
|
||||||
|
* @param {object} props - 组件属性
|
||||||
|
* @param {number} props.temperature - 温度值
|
||||||
|
* @param {number} props.humidity - 湿度值
|
||||||
|
* @param {number} props.width - 单个仪表盘宽度
|
||||||
|
* @param {number} props.height - 单个仪表盘高度
|
||||||
|
*/
|
||||||
|
const TemperatureHumidityGauges = ({ temperature = 28, humidity = 55, width = 600, height = 600 }) => {
|
||||||
|
const temperatureOption = getTemperatureGaugeOption(temperature);
|
||||||
|
const humidityOption = getHumidityGaugeOption(humidity);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
|
||||||
|
<div style={{ marginBottom: 0 }}>
|
||||||
|
<EChartsGauge id="temperatureGauge" option={temperatureOption} width={width} height={height} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<EChartsGauge id="humidityGauge" option={humidityOption} width={width} height={height} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TemperatureHumidityGauges;
|
||||||
Loading…
Reference in New Issue