jiangxucong
/
dq-osi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增页面——温湿度检测

Browse Source
main
yupeng 1 month ago
parent 620dafdd31
commit da73716f07
2 changed files with 459 additions and 3 deletions
Show Stats Download Patch File Download Diff File

32
src/pages/smartinspection/components/Inspectiontaskplan/InspectionTaskPlan.less
Unescape Escape View File

@ -162,3 +162,35 @@
background-color:#B8E0D833 !important; background-color:#B8E0D833 !important;
} }
} }
// 仪表盘容器样式 - 复杂边框和阴影效果
.dashboardContainer{
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);
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);
}
// 阈值配置区样式 - 带背景、边框和阴影效果
.thresholdConfigContainer {
background: rgba(255, 255, 255, 0.3);
border: 1px solid;
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);
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);
}
.chartContainer {
background: rgba(255, 255, 255, 0.3);
border: 1px solid;
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);
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);
}

430
src/pages/smartinspection/components/Inspectiontaskplan/SmartInspectionPlan.js
Unescape Escape View File

@ -1628,7 +1628,7 @@ const SmartInspectionContent = () => {
</div> </div>
</div> </div>
<div style={{ width: '65%' }}> <div style={{ width: '65%', padding: 16 }}>
<div style={{ <div style={{
border: '1px solid #f0f0f0', border: '1px solid #f0f0f0',
borderRadius: 8, borderRadius: 8,
@ -1796,6 +1796,430 @@ const SmartInspectionContent = () => {
</div> </div>
); );
case '温湿度检测': case '温湿度检测':
// 创建一个React兼容的ECharts组件
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 }}
/>
);
};
// 温度仪表盘配置
const temperatureOption = {
series: [
{
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
splitNumber: 10,
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: {
backgroundColor: 'rgba(4, 95, 94, 0.2)',
borderColor: 'rgba(4, 95, 94, 0.5)',
borderWidth: 2,
width: '60%',
lineHeight: 40,
height: 40,
borderRadius: 8,
offsetCenter: [0, '35%'],
valueAnimation: true,
formatter: function (value) {
return '{value|' + value.toFixed(0) + '}{unit|°C}';
},
rich: {
value: {
fontSize: 20,
fontWeight: 'bolder',
color: 'rgba(4, 95, 94, 1)'
},
unit: {
fontSize: 20,
color: 'rgba(4, 95, 94, 0.8)',
padding: [0, 0, -20, 10]
}
}
},
data: [
{
value: 28,
name: '温度'
}
]
}
]
};
// 湿度仪表盘配置
const humidityOption = {
series: [
{
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
splitNumber: 10,
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: {
backgroundColor: 'rgba(4, 95, 94, 0.2)',
borderColor: 'rgba(4, 95, 94, 0.5)',
borderWidth: 2,
width: '60%',
lineHeight: 40,
height: 40,
borderRadius: 8,
offsetCenter: [0, '35%'],
valueAnimation: true,
formatter: function (value) {
return '{value|' + value.toFixed(0) + '}{unit|%}';
},
rich: {
value: {
fontSize: 20,
fontWeight: 'bolder',
color: 'rgba(4, 95, 94, 1)'
},
unit: {
fontSize: 20,
color: 'rgba(4, 95, 94, 0.8)',
padding: [0, 0, -20, 10]
}
}
},
data: [
{
value: 55,
name: '湿度'
}
]
}
]
};
return (
<div style={{ padding: 20 }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
<h2 style={{ margin: 0, color: 'black' }}>| 温湿度检测</h2>
</div>
<div style={{ display: 'flex', gap: 20 }}>
<div style={{
// border: '1px solid #f0f0f0',
// borderRadius: 8,
// padding: 16,
width: '40%',
// backgroundColor: '#fafafa'
gap: 20
}}>
<div className={styles.dashboardContainer} style={{ width: '100%', height: 700 }}>
<h3 style={{ margin: '16px', fontSize: 16 }}>实时仪表盘</h3>
{/* 温度仪表盘 - 使用React兼容的ECharts组件 */}
<div style={{ marginBottom: 0 }}>
<EChartsGauge id="temperatureGauge" option={temperatureOption} width={450} height={350} />
</div>
{/* 湿度仪表盘 - 使用React兼容的ECharts组件 */}
<div>
<EChartsGauge id="humidityGauge" option={humidityOption} width={450} height={350} />
</div>
</div>
<div className={styles.thresholdConfigContainer} style={{ marginTop: 20, padding: 16 }}>
<h3 style={{ margin: '0 0 16px 0', fontSize: 16 }}>阈值配置区</h3>
<Button className={styles['resetBtn']} style={{ backgroundImage: `url(${btnImg3})`, margin: '0 0px', width: 120 }}>保存配置</Button>
<div style={{ backgroundColor: 'white', padding: 16, borderRadius: 4 }}>
<div style={{ marginBottom: 12 }}>
<label style={{ display: 'inline-block', width: 120, fontSize: 14 }}>低温预警阈值:</label>
<input
type="text"
value="5°C"
style={{
padding: '4px 8px',
border: '1px solid #d9d9d9',
borderRadius: 4,
width: 120
}}
/>
</div>
<div style={{ marginBottom: 12 }}>
<label style={{ display: 'inline-block', width: 120, fontSize: 14 }}>高温预警阈值:</label>
<input
type="text"
value="30°C"
style={{
padding: '4px 8px',
border: '1px solid #d9d9d9',
borderRadius: 4,
width: 120
}}
/>
</div>
<div style={{ marginBottom: 12 }}>
<label style={{ display: 'inline-block', width: 120, fontSize: 14 }}>湿度预警阈值:</label>
<input
type="text"
value="90%RH"
style={{
padding: '4px 8px',
border: '1px solid #d9d9d9',
borderRadius: 4,
width: 120
}}
/>
</div>
</div>
</div>
</div>
<div className={styles.chartContainer} style={{ width: '65%' }}>
<div style={{
border: '1px solid #f0f0f0',
borderRadius: 8,
padding: 16,
backgroundColor: '#fafafa',
height: '100%'
}}>
<h3 style={{ margin: '0 0 16px 0', fontSize: 16 }}>历史趋势图</h3>
<div style={{ backgroundColor: 'white', padding: 16, borderRadius: 4 }}>
<div style={{ display: 'flex', gap: 20, marginBottom: 16 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<span style={{ display: 'inline-block', width: 16, height: 3, backgroundColor: '#1890ff' }}></span>
<span style={{ fontSize: 14, color: '#333' }}>温度(°C)</span>
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<span style={{ display: 'inline-block', width: 16, height: 3, backgroundColor: '#52c41a' }}></span>
<span style={{ fontSize: 14, color: '#333' }}>湿度(%RH)</span>
</div>
</div>
<div style={{ height: 400, position: 'relative' }}>
{/* 模拟趋势图 */}
<svg width="100%" height="100%" viewBox="0 0 800 400">
{/* 网格线 */}
{[0, 25, 50, 75, 100].map((val, index) => (
<g key={index}>
<line
x1="50"
y1={400 - val * 4}
x2="750"
y2={400 - val * 4}
stroke="#f0f0f0"
strokeWidth="1"
/>
<text x="30" y={400 - val * 4 + 5} fontSize="12" fill="#666" textAnchor="end">
{val}
</text>
</g>
))}
{/* 时间标签 */}
{['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00'].map((time, index) => (
<text
key={index}
x={50 + index * 90}
y={390}
fontSize="12"
fill="#666"
textAnchor="middle"
>
{time}
</text>
))}
{/* 温度曲线 */}
<path
d="M50,200 L140,160 L230,180 L320,120 L410,160 L500,140 L590,120 L680,140 L750,100"
stroke="#1890ff"
strokeWidth="2"
fill="none"
/>
{/* 温度数据点 */}
{[50, 140, 230, 320, 410, 500, 590, 680, 750].map((x, index) => (
<circle
key={`temp-${index}`}
cx={x}
cy={[200, 160, 180, 120, 160, 140, 120, 140, 100][index]}
r="4"
fill="#1890ff"
/>
))}
{/* 湿度曲线 */}
<path
d="M50,100 L140,140 L230,120 L320,160 L410,150 L500,180 L590,170 L680,140 L750,130"
stroke="#52c41a"
strokeWidth="2"
fill="none"
/>
{/* 湿度数据点 */}
{[50, 140, 230, 320, 410, 500, 590, 680, 750].map((x, index) => (
<circle
key={`humi-${index}`}
cx={x}
cy={[100, 140, 120, 160, 150, 180, 170, 140, 130][index]}
r="4"
fill="#52c41a"
/>
))}
</svg>
</div>
</div>
</div>
</div>
</div>
</div >
);
case '跑冒滴漏检测': case '跑冒滴漏检测':
case '仪器仪表采集': case '仪器仪表采集':
case '环境监测': case '环境监测':
@ -1841,7 +2265,7 @@ const SmartInspectionContent = () => {
<nav> <nav>
<ul style={{ listStyle: 'none', padding: 0, margin: 0 }}> <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
{['温度异常检测', '温湿度检测', '跑冒滴漏检测', '仪器仪表采集', '环境监测'].map((tab) => ( {['温度异常检测', '温湿度检测', '跑冒滴漏检测', '仪器仪表采集', '环境监测'].map((tab) => (
<li key={tab} style={{ marginBottom: 8 }}> <li key={tab} style={{ marginBottom: 22 }}>
<button <button
onClick={() => handleTabClick(tab)} onClick={() => handleTabClick(tab)}
style={{ style={{
@ -1857,7 +2281,7 @@ const SmartInspectionContent = () => {
cursor: 'pointer', cursor: 'pointer',
borderRadius: 4, borderRadius: 4,
fontSize: 24, fontSize: 24,
fontWeight:400, fontWeight: 400,
transition: 'all 0.3s', transition: 'all 0.3s',
backgroundImage: activeTab === tab ? `url(${activeBgImage})` : `url(${menuInactiveBg})`, backgroundImage: activeTab === tab ? `url(${activeBgImage})` : `url(${menuInactiveBg})`,
backgroundSize: 'cover', backgroundSize: 'cover',

Write Preview
Loading…
Cancel
Save