新增页面：巡检管理——实时监控
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