Merge branch 'master' of http://10.0.41.100:3000/lishenfeng/ss-dp
commit
cdd8b67a18
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 740 B |
Binary file not shown.
|
After Width: | Height: | Size: 186 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 740 B |
|
|
@ -2,3 +2,13 @@
|
||||||
font-family: 'youshe';
|
font-family: 'youshe';
|
||||||
src: url("../fonts/优设标题黑.ttf");
|
src: url("../fonts/优设标题黑.ttf");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'douyu';
|
||||||
|
src: url("../fonts/douyuFont-2.otf");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'huxiaopo';
|
||||||
|
src: url("../fonts/HuXiaoBoNanShenTi-2.otf");
|
||||||
|
}
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
import { reservoirlist } from "./station"
|
||||||
|
|
||||||
const service = '/gunshiApp/ss'
|
const service = '/gunshiApp/ss'
|
||||||
const apiurl = {
|
const apiurl = {
|
||||||
|
|
@ -167,6 +168,34 @@ const apiurl = {
|
||||||
floodPerson: service + '/screen/responsibility/getFxPerson',
|
floodPerson: service + '/screen/responsibility/getFxPerson',
|
||||||
train:service + '/screen/responsibility/getTraining'
|
train:service + '/screen/responsibility/getTraining'
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
sy: {
|
||||||
|
sssyq: {
|
||||||
|
rain: service + '/screen/monitoring/rain',
|
||||||
|
reservoir: service + '/screen/monitoring/rsvr',
|
||||||
|
flow:service + '/screen/monitoring/flow'
|
||||||
|
},
|
||||||
|
ya: {
|
||||||
|
rota: service + '/screen/plan/rota',
|
||||||
|
document:service + '/screen/plan/doc'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
sg: {
|
||||||
|
aqjd: {
|
||||||
|
info:service + '/wholeCycle/security',
|
||||||
|
},
|
||||||
|
aqyh:{
|
||||||
|
info:service + '/screen/hidden/get/',
|
||||||
|
},
|
||||||
|
skhj:{
|
||||||
|
info:service + '/screen/reservoirDemarcationInfo/get',
|
||||||
|
},
|
||||||
|
byjc:{
|
||||||
|
info:service + '/screen/byfz/get/',
|
||||||
|
},
|
||||||
|
wxyh:{
|
||||||
|
info:service + '/screen/mfr/get/',
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,200 @@
|
||||||
|
import React, { useEffect, useRef, useState } from 'react';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import './index.less';
|
||||||
|
import apiurl from '@/service/apiurl';
|
||||||
|
import { httpget } from '@/utils/request';
|
||||||
|
|
||||||
|
const Maintenance = ({ year }) => {
|
||||||
|
const chartRef = useRef(null);
|
||||||
|
const chartInstance = useRef(null);
|
||||||
|
const [activeIndex, setActiveIndex] = useState(0);
|
||||||
|
const [selectedPieItem, setSelectedPieItem] = useState(null);
|
||||||
|
const [startAngle, setStartAngle] = useState(90);
|
||||||
|
const [chartData, setChartData] = useState([]);
|
||||||
|
|
||||||
|
// Color mapping configuration
|
||||||
|
const colorMap = {
|
||||||
|
'溢洪道清障': '#0090FF',
|
||||||
|
'除草除杂': '#00FFFF',
|
||||||
|
'设备养护': '#3355FB',
|
||||||
|
'环境清洁': '#BCEBF7',
|
||||||
|
'危险提示': '#00D085',
|
||||||
|
'其他': '#1890FF'
|
||||||
|
};
|
||||||
|
|
||||||
|
const defaultColors = ['#0090FF', '#00FFFF', '#3355FB', '#BCEBF7', '#00D085', '#1890FF'];
|
||||||
|
|
||||||
|
const getInfo = async (year) => {
|
||||||
|
try {
|
||||||
|
const result = await httpget(apiurl.sg.wxyh.info + year);
|
||||||
|
if (result.code === 200 && result.data) {
|
||||||
|
// Transform object to array format
|
||||||
|
const transformedData = Object.entries(result.data).map(([name, value], index) => ({
|
||||||
|
name,
|
||||||
|
value,
|
||||||
|
color: colorMap[name] || defaultColors[index % defaultColors.length]
|
||||||
|
}));
|
||||||
|
setChartData(transformedData);
|
||||||
|
} else {
|
||||||
|
setChartData([]);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
setChartData([]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const total = chartData.reduce((sum, item) => sum + item.value, 0);
|
||||||
|
|
||||||
|
const setSelectionByIndex = (index) => {
|
||||||
|
if (!chartData || chartData.length === 0 || index >= chartData.length) return;
|
||||||
|
|
||||||
|
const item = chartData[index];
|
||||||
|
let sumBefore = 0;
|
||||||
|
for (let i = 0; i < index; i++) {
|
||||||
|
sumBefore += chartData[i].value;
|
||||||
|
}
|
||||||
|
const offset = total > 0 ? (sumBefore + item.value / 2) / total * 360 : 0;
|
||||||
|
const newStartAngle = 90 + offset;
|
||||||
|
setStartAngle(newStartAngle);
|
||||||
|
setSelectedPieItem({
|
||||||
|
name: item.name,
|
||||||
|
value: item.value,
|
||||||
|
percent: total > 0 ? ((item.value / total) * 100).toFixed(0) + '%' : '0%'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (year) {
|
||||||
|
getInfo(year);
|
||||||
|
}
|
||||||
|
}, [year]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (chartData && chartData.length > 0) {
|
||||||
|
setSelectionByIndex(0);
|
||||||
|
setActiveIndex(0);
|
||||||
|
} else {
|
||||||
|
setSelectedPieItem(null);
|
||||||
|
setStartAngle(90);
|
||||||
|
}
|
||||||
|
}, [chartData]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!chartRef.current) return;
|
||||||
|
|
||||||
|
if (!chartInstance.current) {
|
||||||
|
chartInstance.current = echarts.init(chartRef.current);
|
||||||
|
chartInstance.current.on('click', (params) => {
|
||||||
|
if (params.dataIndex !== undefined) {
|
||||||
|
setActiveIndex(params.dataIndex);
|
||||||
|
setSelectionByIndex(params.dataIndex);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (chartData.length === 0) {
|
||||||
|
chartInstance.current.clear();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const centerName = selectedPieItem ? selectedPieItem.name : (chartData.length === 1 ? chartData[0].name : '维修养护');
|
||||||
|
const centerValue = selectedPieItem ? selectedPieItem.value : total;
|
||||||
|
const centerPercent = selectedPieItem ? selectedPieItem.percent : '100%';
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{b}: {c} ({d}%)'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '维修养护-外圈',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['52%', '94%'],
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
startAngle: startAngle,
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'inside',
|
||||||
|
formatter: '{b}',
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 10
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
opacity: 0.4
|
||||||
|
},
|
||||||
|
labelLine: { show: false },
|
||||||
|
data: chartData.map(item => ({
|
||||||
|
value: item.value,
|
||||||
|
name: item.name,
|
||||||
|
itemStyle: { color: item.color }
|
||||||
|
}))
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '维修养护-内圈',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['60%', '70%'],
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
startAngle: startAngle,
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'center',
|
||||||
|
formatter: () => `{name|${centerName}}\n{value|${centerValue}}\n{percent|${centerPercent}}`,
|
||||||
|
rich: {
|
||||||
|
name: { fontSize: 12, color: 'rgba(255,255,255,0.6)', lineHeight: 16 },
|
||||||
|
value: { fontSize: 14, color: '#fff', fontWeight: 'bold', lineHeight: 20 },
|
||||||
|
percent: { fontSize: 12, color: '#fff', lineHeight: 16 }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: { show: true, fontSize: 14, fontWeight: 'bold' }
|
||||||
|
},
|
||||||
|
labelLine: { show: false },
|
||||||
|
data: chartData.map(item => ({
|
||||||
|
value: item.value,
|
||||||
|
name: item.name,
|
||||||
|
itemStyle: { color: item.color }
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
chartInstance.current.setOption(option);
|
||||||
|
|
||||||
|
const handleResize = () => {
|
||||||
|
chartInstance.current?.resize();
|
||||||
|
};
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('resize', handleResize);
|
||||||
|
};
|
||||||
|
}, [activeIndex, selectedPieItem, startAngle, chartData]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="maintenance-container">
|
||||||
|
<div className="chart-wrapper" ref={chartRef}></div>
|
||||||
|
<div className="legend-wrapper">
|
||||||
|
{chartData.map((item, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className={`legend-item ${index === activeIndex ? 'active' : ''}`}
|
||||||
|
onMouseEnter={() => {
|
||||||
|
setActiveIndex(index);
|
||||||
|
setSelectionByIndex(index);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="legend-color" style={{ backgroundColor: item.color }}></div>
|
||||||
|
<div className="legend-name">{item.name}</div>
|
||||||
|
<div className="legend-value">{item.value}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Maintenance;
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
.maintenance-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.chart-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
padding-left: 10px;
|
||||||
|
|
||||||
|
.legend-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: rgba(255, 255, 255, 0.85);
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
|
||||||
|
&.active, &:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-color {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-name {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-value {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,187 @@
|
||||||
|
import React, { useEffect, useRef,useState } from 'react';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import arrowIcon from '@/assets/images/card/arrow.png';
|
||||||
|
import glfwBg from '@/assets/images/business/glfw.png';
|
||||||
|
import bhfwBg from '@/assets/images/business/bhfw.png';
|
||||||
|
import smallCard from '@/assets/images/card/smallCard.png';
|
||||||
|
import apiurl from '@/service/apiurl';
|
||||||
|
import { httpget } from '@/utils/request';
|
||||||
|
import './index.less';
|
||||||
|
|
||||||
|
const ReservoirDemarcation = () => {
|
||||||
|
const chartRef = useRef(null);
|
||||||
|
const chartInstance = useRef(null);
|
||||||
|
const [info, setInfo] = useState({
|
||||||
|
managementScopeArea: 0,
|
||||||
|
protectionScopeArea: 0,
|
||||||
|
propertyCertificateArea: 0,
|
||||||
|
totalUseArea: 0
|
||||||
|
});
|
||||||
|
|
||||||
|
const getInfo = async () => {
|
||||||
|
try {
|
||||||
|
const result = await httpget(apiurl.sg.skhj.info);
|
||||||
|
if (result.code === 200) {
|
||||||
|
setInfo(result.data);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!chartRef.current) return;
|
||||||
|
|
||||||
|
if (!chartInstance.current) {
|
||||||
|
chartInstance.current = echarts.init(chartRef.current);
|
||||||
|
}
|
||||||
|
|
||||||
|
const total = Number(info.totalUseArea) || 0;
|
||||||
|
const property = Number(info.propertyCertificateArea) || 0;
|
||||||
|
const maxVal = total > 0 ? total : 1;
|
||||||
|
const rate = total > 0 ? Math.min(Math.max(property / total, 0), 1) : 0;
|
||||||
|
const option = {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'gauge',
|
||||||
|
startAngle: 210,
|
||||||
|
endAngle: -30,
|
||||||
|
min: 0,
|
||||||
|
max: maxVal,
|
||||||
|
splitNumber: 40,
|
||||||
|
radius: '125%',
|
||||||
|
center: ['50%', '65%'],
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 10,
|
||||||
|
opacity: 0,
|
||||||
|
color: [
|
||||||
|
[rate, '#0bbafe'],
|
||||||
|
[1, 'rgba(255, 255, 255, 0.1)']
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: true,
|
||||||
|
length: 12,
|
||||||
|
distance: -12,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'auto',
|
||||||
|
width: 3
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
show: true,
|
||||||
|
offsetCenter: [0, '30%'],
|
||||||
|
fontSize: 14,
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
valueAnimation: true,
|
||||||
|
formatter: '{value}万亩',
|
||||||
|
color: '#00D8FF',
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
offsetCenter: [0, '-15%']
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: property,
|
||||||
|
name: '不动产权'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
chartInstance.current.setOption(option);
|
||||||
|
|
||||||
|
const handleResize = () => {
|
||||||
|
chartInstance.current && chartInstance.current.resize();
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('resize', handleResize);
|
||||||
|
};
|
||||||
|
}, [info]);
|
||||||
|
|
||||||
|
// Clean up chart instance on unmount
|
||||||
|
useEffect(() => {
|
||||||
|
getInfo()
|
||||||
|
return () => {
|
||||||
|
if (chartInstance.current) {
|
||||||
|
chartInstance.current.dispose();
|
||||||
|
chartInstance.current = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="reservoir-demarcation">
|
||||||
|
{/* Section 1: Management and Protection Scope */}
|
||||||
|
<div className="section-header">
|
||||||
|
<div className="title-wrapper">
|
||||||
|
<img src={arrowIcon} alt="arrow" className="arrow-icon" />
|
||||||
|
<span className="section-title">管理和保护范围</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="scope-area">
|
||||||
|
<div className="scope-card" style={{ backgroundImage: `url(${glfwBg})` }}>
|
||||||
|
<div className="scope-content">
|
||||||
|
<div className="value-wrapper" style={{borderBottom:"1px solid #00a0e9"}}>
|
||||||
|
<span className="value">{info.managementScopeArea}</span>
|
||||||
|
<span className="unit">km²</span>
|
||||||
|
</div>
|
||||||
|
<div className="label">管理范围</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="scope-card" style={{ backgroundImage: `url(${bhfwBg})` }}>
|
||||||
|
<div className="scope-content">
|
||||||
|
<div className="value-wrapper">
|
||||||
|
<span className="value">{info.protectionScopeArea}</span>
|
||||||
|
<span className="unit">km²</span>
|
||||||
|
</div>
|
||||||
|
<div className="label">保护范围</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Section 2: Clear Property Rights */}
|
||||||
|
<div className="section-header">
|
||||||
|
<div className="title-wrapper">
|
||||||
|
<img src={arrowIcon} alt="arrow" className="arrow-icon" />
|
||||||
|
<span className="section-title">产权清晰</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="property-area">
|
||||||
|
<div className="chart-wrapper" ref={chartRef}></div>
|
||||||
|
<div className="info-list">
|
||||||
|
<div className="info-item" style={{ backgroundImage: `url(${smallCard})` }}>
|
||||||
|
<span className="label">已取得不动产权证书面积：</span>
|
||||||
|
<span className="value">{info.propertyCertificateArea}万亩</span>
|
||||||
|
</div>
|
||||||
|
<div className="info-item" style={{ backgroundImage: `url(${smallCard})` }}>
|
||||||
|
<span className="label">用地总面积：</span>
|
||||||
|
<span className="value">{info.totalUseArea}万亩</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ReservoirDemarcation;
|
||||||
|
|
@ -0,0 +1,94 @@
|
||||||
|
.reservoir-demarcation {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.scope-area {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
.scope-card {
|
||||||
|
width: 48%;
|
||||||
|
height: 60px;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 80px; // Make space for the icon in the bg image
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.scope-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.value-wrapper {
|
||||||
|
margin-bottom: 2px;
|
||||||
|
.value {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #00D8FF;
|
||||||
|
font-family: 'huxiaopo', sans-serif;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
.unit {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #00D8FF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(255, 255, 255);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.property-area {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 0;
|
||||||
|
|
||||||
|
.chart-wrapper {
|
||||||
|
width: 36%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-list {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding-left: 10px;
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
width: 100%;
|
||||||
|
height: 32px;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #00D8FF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
import React from 'react';
|
||||||
|
import xcrIcon from '@/assets/images/business/xcr.png';
|
||||||
|
import wrjIcon from '@/assets/images/business/wrj.png';
|
||||||
|
import './index.less';
|
||||||
|
|
||||||
|
const ReservoirInspection = () => {
|
||||||
|
// Mock data matching the design
|
||||||
|
const data = {
|
||||||
|
annualCount: 78,
|
||||||
|
droneCount: 156
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="reservoir-inspection">
|
||||||
|
<div className="inspection-item">
|
||||||
|
<div className="icon-wrapper">
|
||||||
|
<img src={xcrIcon} alt="年度巡查" />
|
||||||
|
</div>
|
||||||
|
<div className="info">
|
||||||
|
<div className="count-row">
|
||||||
|
<span className="count">{data.annualCount}</span>
|
||||||
|
<span className="unit">次</span>
|
||||||
|
</div>
|
||||||
|
<div className="label">年度巡查</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="inspection-item">
|
||||||
|
<div className="icon-wrapper" style={{marginRight:30}}>
|
||||||
|
<img src={wrjIcon} alt="无人机巡查" />
|
||||||
|
</div>
|
||||||
|
<div className="info">
|
||||||
|
<div className="count-row">
|
||||||
|
<span className="count">{data.droneCount}</span>
|
||||||
|
<span className="unit">次</span>
|
||||||
|
</div>
|
||||||
|
<div className="label">无人机巡查</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ReservoirInspection;
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
.reservoir-inspection {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20px;
|
||||||
|
|
||||||
|
.inspection-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
|
||||||
|
.icon-wrapper {
|
||||||
|
width: 50px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 60px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.count-row {
|
||||||
|
.count {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #00D8FF;
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unit {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #00D8FF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
margin-top: 2px;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,82 @@
|
||||||
|
import React,{useEffect,useState} from 'react';
|
||||||
|
import smallCard from '@/assets/images/card/smallCard.png';
|
||||||
|
import barTypeIcon from '@/assets/images/business/barType.png';
|
||||||
|
import apiurl from '@/service/apiurl';
|
||||||
|
import { httpget } from '@/utils/request';
|
||||||
|
import './index.less';
|
||||||
|
|
||||||
|
const SafetyAppraisal = () => {
|
||||||
|
const [info, setInfo] = useState({})
|
||||||
|
const topCards = [
|
||||||
|
{ label: '', value: '双石水库', isTitle: true },
|
||||||
|
{ label: '', value: '赤壁市/\n官塘驿镇', isLocation: true },
|
||||||
|
{ label: '', value: '中型', isType: true },
|
||||||
|
];
|
||||||
|
const getInfo = async () => {
|
||||||
|
try {
|
||||||
|
const result = await httpget(apiurl.sg.aqjd.info);
|
||||||
|
if (result.code === 200) {
|
||||||
|
setInfo(result.data);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getInfo()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="safety-appraisal">
|
||||||
|
{/* Top Section: Cards */}
|
||||||
|
<div className="top-cards">
|
||||||
|
{topCards.map((item, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="info-card"
|
||||||
|
style={{ backgroundImage: `url(${smallCard})` }}
|
||||||
|
>
|
||||||
|
<div className={`sg-card-content ${item.isTitle ? 'title-style' : ''} ${item.isType ? 'type-style' : ''}`}>
|
||||||
|
{item.isLocation ? (
|
||||||
|
<div className="location-text">
|
||||||
|
<div>赤壁市/</div>
|
||||||
|
<div>官塘驿镇</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
item.value
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bottom Section: Timeline */}
|
||||||
|
<div className="timeline-section">
|
||||||
|
<div className="timeline-line"></div>
|
||||||
|
|
||||||
|
<div className="timeline-item left">
|
||||||
|
<div className="dot"></div>
|
||||||
|
<div className="label">鉴定时间</div>
|
||||||
|
<div className="date">{info?.identifyDate ??'-'}年</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="timeline-item center">
|
||||||
|
<div className="icon-wrapper">
|
||||||
|
<img src={barTypeIcon} alt="Type" />
|
||||||
|
</div>
|
||||||
|
<div className="label type-label">{info?.identifyType ??'-'}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="timeline-item right">
|
||||||
|
<div className="dot"></div>
|
||||||
|
<div className="label">下次鉴定时间</div>
|
||||||
|
<div className="date">{info?.nextVerifyDate ??'-'}年</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SafetyAppraisal;
|
||||||
|
|
@ -0,0 +1,124 @@
|
||||||
|
.safety-appraisal {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.top-cards {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 70px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
.info-card {
|
||||||
|
width: 32%;
|
||||||
|
height: 100%;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.sg-card-content {
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
&.title-style {
|
||||||
|
font-size: 18px;
|
||||||
|
font-family: douyu;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.type-style {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #00D8FF;
|
||||||
|
font-family: douyu;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-text {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-section {
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20px;
|
||||||
|
|
||||||
|
.timeline-line {
|
||||||
|
position: absolute;
|
||||||
|
top: 30%;
|
||||||
|
left: 20px;
|
||||||
|
right: 20px;
|
||||||
|
height: 2px;
|
||||||
|
background: #007acc;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-item {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: 100px;
|
||||||
|
|
||||||
|
&.left, &.right {
|
||||||
|
margin-top:20px;
|
||||||
|
.dot {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
background: #00D8FF;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
box-shadow: 0 0 5px #00D8FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
color: #00D8FF;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.center {
|
||||||
|
margin-top: -40px; // Adjust to lift the icon above the line slightly if needed, or rely on flex alignment
|
||||||
|
.icon-wrapper {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
img {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.label.type-label {
|
||||||
|
color: #00D8FF;
|
||||||
|
font-size: 18px;
|
||||||
|
font-family: douyu;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,165 @@
|
||||||
|
import React, { useEffect, useRef, useState } from 'react';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import zglIcon from '@/assets/images/business/zgl.png';
|
||||||
|
import apiurl from '@/service/apiurl';
|
||||||
|
import { httpget } from '@/utils/request';
|
||||||
|
import './index.less';
|
||||||
|
|
||||||
|
const SafetyHazard = ({ year }) => {
|
||||||
|
const chartRef = useRef(null);
|
||||||
|
const chartInstance = useRef(null);
|
||||||
|
const [info, setInfo] = useState({
|
||||||
|
totalCount: 0,
|
||||||
|
finishCount: 0,
|
||||||
|
finishPercent: 0,
|
||||||
|
months: {}
|
||||||
|
});
|
||||||
|
|
||||||
|
const getInfo = async (params) => {
|
||||||
|
try {
|
||||||
|
const result = await httpget(apiurl.sg.aqyh.info + params);
|
||||||
|
if (result.code === 200) {
|
||||||
|
setInfo(result.data);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (year) {
|
||||||
|
getInfo(year);
|
||||||
|
}
|
||||||
|
}, [year]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!chartRef.current) return;
|
||||||
|
|
||||||
|
if (!chartInstance.current) {
|
||||||
|
chartInstance.current = echarts.init(chartRef.current);
|
||||||
|
}
|
||||||
|
|
||||||
|
const monthlyData = Array.from({ length: 12 }, (_, i) => info.months?.[i + 1] || 0);
|
||||||
|
console.log(monthlyData);
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
grid: {
|
||||||
|
top: '15%',
|
||||||
|
left: '5%',
|
||||||
|
right: '5%',
|
||||||
|
bottom: '5%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12 月'],
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255, 255, 255, 0.5)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 12,
|
||||||
|
interval: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255, 255, 255, 0.1)',
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '30%',
|
||||||
|
data: monthlyData,
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: '#00D8FF' },
|
||||||
|
{ offset: 1, color: 'rgba(0, 216, 255, 0.1)' }
|
||||||
|
]),
|
||||||
|
borderRadius: [2, 2, 0, 0]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
chartInstance.current.setOption(option);
|
||||||
|
|
||||||
|
const handleResize = () => {
|
||||||
|
chartInstance.current && chartInstance.current.resize();
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('resize', handleResize);
|
||||||
|
};
|
||||||
|
}, [info]);
|
||||||
|
|
||||||
|
// Clean up chart instance on unmount
|
||||||
|
useEffect(() => {
|
||||||
|
return () => {
|
||||||
|
if (chartInstance.current) {
|
||||||
|
chartInstance.current.dispose();
|
||||||
|
chartInstance.current = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="safety-hazard">
|
||||||
|
{/* Top Section */}
|
||||||
|
<div className="top-section">
|
||||||
|
<div className="progress-area">
|
||||||
|
<div className="labels">
|
||||||
|
<div className="total-label">
|
||||||
|
<span className="text">隐患总数</span>
|
||||||
|
<span className="num">{info.totalCount}</span>
|
||||||
|
</div>
|
||||||
|
<div className="rectified-label">
|
||||||
|
<span className="text">已整改</span>
|
||||||
|
<span className="num">{info.finishCount}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="progress-bar-bg">
|
||||||
|
<div
|
||||||
|
className="progress-bar-fill"
|
||||||
|
style={{ width: `${info.totalCount > 0 ? (info.finishCount / info.totalCount) * 100 : 0}%` }}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="rate-box">
|
||||||
|
<div className="icon-wrapper">
|
||||||
|
<img src={zglIcon} alt="Rate" />
|
||||||
|
</div>
|
||||||
|
<div className="rate-info">
|
||||||
|
<div className="rate-num">
|
||||||
|
{info.finishPercent}
|
||||||
|
<span className="percent">%</span>
|
||||||
|
</div>
|
||||||
|
<div className="rate-text">整改率</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Chart Section */}
|
||||||
|
<div className="chart-container" ref={chartRef}></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SafetyHazard;
|
||||||
|
|
@ -0,0 +1,123 @@
|
||||||
|
.safety-hazard {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.top-section {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
height: 60px;
|
||||||
|
|
||||||
|
.progress-area {
|
||||||
|
flex: 1;
|
||||||
|
margin-right: 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.labels {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.total-label, .rectified-label {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(255, 255, 255);
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.num {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rectified-label {
|
||||||
|
align-items: flex-end;
|
||||||
|
.text {
|
||||||
|
color: #00D8FF;
|
||||||
|
}
|
||||||
|
.num {
|
||||||
|
color: #00D8FF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-bg {
|
||||||
|
width: 100%;
|
||||||
|
height: 18px;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 6px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.progress-bar-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: #f59e0b; // Orange color matching the design
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rate-box {
|
||||||
|
width: 130px;
|
||||||
|
border: 1px solid #00a0e9;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 5px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
// Add corner markers if needed, or simple border
|
||||||
|
|
||||||
|
.icon-wrapper {
|
||||||
|
width: 40px;
|
||||||
|
margin-right: 5px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 30px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rate-info {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding-right: 5px;
|
||||||
|
|
||||||
|
.rate-num {
|
||||||
|
font-family: 'huxiaopo', sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #00D8FF;
|
||||||
|
// line-height: 1;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
|
||||||
|
.percent {
|
||||||
|
font-size: 14px;
|
||||||
|
margin-left: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rate-text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 0; // Important for flex child to shrink
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
import React from 'react';
|
||||||
|
import zmIcon from '@/assets/images/business/zm.png';
|
||||||
|
import './index.less';
|
||||||
|
|
||||||
|
const SluiceMonitor = () => {
|
||||||
|
// Mock data based on the UI image
|
||||||
|
const gateData = [
|
||||||
|
{ id: 1, name: 'XXXX闸门1', opening: 0.3, time: '12-25 09:32' },
|
||||||
|
{ id: 2, name: 'XXXX闸门2', opening: 0.0, time: '12-25 09:32' },
|
||||||
|
{ id: 3, name: 'XXXX闸门3', opening: 0.0, time: '12-25 09:32' },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="sluice-monitor">
|
||||||
|
{gateData.map((item) => (
|
||||||
|
<div key={item.id} className="gate-item">
|
||||||
|
<div className="icon-wrapper">
|
||||||
|
<img src={zmIcon} alt="gate" />
|
||||||
|
</div>
|
||||||
|
<div className="gate-info">
|
||||||
|
<span className="gate-name">{item.name}</span>
|
||||||
|
<div className="status-wrapper">
|
||||||
|
<span className="label">开度：</span>
|
||||||
|
<span className="value">{item.opening.toFixed(1)}</span>
|
||||||
|
<span className="unit">m</span>
|
||||||
|
</div>
|
||||||
|
<span className="time">{item.time}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SluiceMonitor;
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
.sluice-monitor {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 0 10px;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gate-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 6px 0;
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wrapper {
|
||||||
|
margin-right: 15px;
|
||||||
|
img {
|
||||||
|
width: 32px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.gate-info {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
.gate-name {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
margin: 0 20px;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #00D8FF;
|
||||||
|
font-family: huxiaopo;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unit {
|
||||||
|
color: #00D8FF;
|
||||||
|
font-family: huxiaopo;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
color: rgba(255, 255, 255);
|
||||||
|
font-size: 14px;
|
||||||
|
min-width: 90px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,103 @@
|
||||||
|
import React, { useState,useEffect } from 'react';
|
||||||
|
import moment from 'moment';
|
||||||
|
import YearSelect from '../../../../UI/YearSelect';
|
||||||
|
import smallCard from '@/assets/images/card/smallCard.png';
|
||||||
|
import arrowIcon from '@/assets/images/card/arrow.png';
|
||||||
|
import apiurl from '@/service/apiurl';
|
||||||
|
import { httpget } from '@/utils/request';
|
||||||
|
import './index.less';
|
||||||
|
|
||||||
|
const TermiteControl = () => {
|
||||||
|
const [year, setYear] = useState(moment().format('YYYY'));
|
||||||
|
const [info, setInfo] = useState({
|
||||||
|
searchCount: 0,
|
||||||
|
hasByCount: 0,
|
||||||
|
hasByCount: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const getInfo = async (year) => {
|
||||||
|
try {
|
||||||
|
const result = await httpget(apiurl.sg.byjc.info+year);
|
||||||
|
if (result.code === 200) {
|
||||||
|
setInfo(result.data);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const data = {
|
||||||
|
monitorRange: 13600,
|
||||||
|
monitorDevices: 89,
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (year) {
|
||||||
|
getInfo(year)
|
||||||
|
}
|
||||||
|
}, [year])
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="termite-control">
|
||||||
|
{/* Section 1: Termite Monitoring Devices */}
|
||||||
|
<div className="section-header">
|
||||||
|
<div className="title-wrapper">
|
||||||
|
<img src={arrowIcon} alt="arrow" className="arrow-icon" />
|
||||||
|
<span className="section-title">白蚁监控装置</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="monitor-grid">
|
||||||
|
<div className="info-card" style={{ backgroundImage: `url(${smallCard})` }}>
|
||||||
|
<div className="value-wrapper">
|
||||||
|
<span className="value">{data.monitorRange}</span>
|
||||||
|
<span className="unit">m²</span>
|
||||||
|
</div>
|
||||||
|
<div className="label">白蚁监控范围</div>
|
||||||
|
</div>
|
||||||
|
<div className="info-card" style={{ backgroundImage: `url(${smallCard})` }}>
|
||||||
|
<div className="value-wrapper">
|
||||||
|
<span className="value">{data.monitorDevices}</span>
|
||||||
|
<span className="unit">处</span>
|
||||||
|
</div>
|
||||||
|
<div className="label">监控装置数量</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Section 2: Census and Prevention Results */}
|
||||||
|
<div className="section-header with-action">
|
||||||
|
<div className="title-wrapper">
|
||||||
|
<img src={arrowIcon} alt="arrow" className="arrow-icon" />
|
||||||
|
<span className="section-title">普查及防治结果</span>
|
||||||
|
</div>
|
||||||
|
<YearSelect value={year} onChange={setYear} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="census-grid">
|
||||||
|
<div className="info-card" style={{ backgroundImage: `url(${smallCard})` }}>
|
||||||
|
<div className="value-wrapper">
|
||||||
|
<span className="value text-blue">{info.searchCount}</span>
|
||||||
|
<span className="unit text-blue">次</span>
|
||||||
|
</div>
|
||||||
|
<div className="label">白蚁普查</div>
|
||||||
|
</div>
|
||||||
|
<div className="info-card" style={{ backgroundImage: `url(${smallCard})` }}>
|
||||||
|
<div className="value-wrapper">
|
||||||
|
<span className="value text-red">{info.hasByCount}</span>
|
||||||
|
<span className="unit text-blue">处</span>
|
||||||
|
</div>
|
||||||
|
<div className="label">有白蚁危害</div>
|
||||||
|
</div>
|
||||||
|
<div className="info-card" style={{ backgroundImage: `url(${smallCard})` }}>
|
||||||
|
<div className="value-wrapper">
|
||||||
|
<span className="value text-green">{info.hasByCount}</span>
|
||||||
|
<span className="unit text-green">处</span>
|
||||||
|
</div>
|
||||||
|
<div className="label">已处置</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TermiteControl;
|
||||||
|
|
@ -0,0 +1,94 @@
|
||||||
|
.termite-control {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
&.with-action {
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.monitor-grid {
|
||||||
|
display: flex;
|
||||||
|
gap: 25px;
|
||||||
|
min-height: 0;
|
||||||
|
justify-content: center;
|
||||||
|
.info-card {
|
||||||
|
width: 45%;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px 0;
|
||||||
|
|
||||||
|
.value-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #00D8FF;
|
||||||
|
}
|
||||||
|
.unit {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #00D8FF;
|
||||||
|
margin-left: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(255, 255, 255);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.census-grid {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
|
||||||
|
.info-card {
|
||||||
|
// flex: 1;
|
||||||
|
width: 33%;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px 0;
|
||||||
|
.value-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
&.text-blue { color: #00D8FF; }
|
||||||
|
&.text-red { color: #FF4D4F; }
|
||||||
|
&.text-green { color: #52C41A; }
|
||||||
|
}
|
||||||
|
.unit {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #00D8FF; // Always blue
|
||||||
|
margin-left: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,39 +1,62 @@
|
||||||
import React from 'react';
|
import React, { useState } from 'react';
|
||||||
|
import { useSelector } from 'react-redux';
|
||||||
|
import moment from 'moment';
|
||||||
import CommonCard from '../../UI/CommonCard';
|
import CommonCard from '../../UI/CommonCard';
|
||||||
import YearSelect from '../../UI/YearSelect';
|
import YearSelect from '../../UI/YearSelect';
|
||||||
|
import SafetyAppraisal from './components/SafetyAppraisal';
|
||||||
|
import ReservoirInspection from './components/ReservoirInspection';
|
||||||
|
import SafetyHazard from './components/SafetyHazard';
|
||||||
|
import SluiceMonitor from './components/SluiceMonitor';
|
||||||
|
import ReservoirDemarcation from './components/ReservoirDemarcation';
|
||||||
|
import TermiteControl from './components/TermiteControl';
|
||||||
|
import Maintenance from './components/Maintenance';
|
||||||
import './index.less';
|
import './index.less';
|
||||||
|
|
||||||
const SiGuan = () => {
|
const SiGuan = () => {
|
||||||
|
const showPanels = useSelector(s => s.runtime.showPanels);
|
||||||
|
const [inspectionYear, setInspectionYear] = useState(moment().format('YYYY'));
|
||||||
|
const [hazardYear, setHazardYear] = useState(moment().format('YYYY'));
|
||||||
|
const [wxYear, setWxYear] = useState(moment().format('YYYY'));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="siguan-view">
|
<div className="siguan-view">
|
||||||
<div className="side-panel left">
|
<div className={`side-panel left ${!showPanels ? 'hidden' : ''}`}>
|
||||||
<CommonCard title="安全鉴定" className="panel-card card-1" >
|
<CommonCard title="安全鉴定" className="panel-card card-1" >
|
||||||
<div className="placeholder-content">内容填充区域</div>
|
<SafetyAppraisal />
|
||||||
</CommonCard>
|
</CommonCard>
|
||||||
<CommonCard title="库区巡查" className="panel-card card-2" style={{minHeight:120}}>
|
<CommonCard
|
||||||
<div className="placeholder-content">内容填充区域</div>
|
title="库区巡查"
|
||||||
|
className="panel-card card-2"
|
||||||
|
headerExtra={<YearSelect value={inspectionYear} onChange={setInspectionYear} />}
|
||||||
|
style={{minHeight:120}}
|
||||||
|
>
|
||||||
|
<ReservoirInspection />
|
||||||
</CommonCard>
|
</CommonCard>
|
||||||
<CommonCard title="闸门监控" className="panel-card card-3">
|
<CommonCard title="闸门监控" className="panel-card card-3">
|
||||||
<div className="placeholder-content">内容填充区域</div>
|
<SluiceMonitor />
|
||||||
</CommonCard>
|
</CommonCard>
|
||||||
<CommonCard
|
<CommonCard
|
||||||
title="安全隐患"
|
title="安全隐患"
|
||||||
className="panel-card card-4"
|
className="panel-card card-4"
|
||||||
headerExtra={<YearSelect />}
|
headerExtra={<YearSelect value={hazardYear} onChange={setHazardYear} />}
|
||||||
>
|
>
|
||||||
<div className="placeholder-content">内容填充区域</div>
|
<SafetyHazard year={hazardYear} />
|
||||||
</CommonCard>
|
</CommonCard>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="side-panel right">
|
<div className={`side-panel right ${!showPanels ? 'hidden' : ''}`}>
|
||||||
<CommonCard title="水库划界" className="panel-card card-1">
|
<CommonCard title="水库划界" className="panel-card card-1">
|
||||||
<div className="placeholder-content">内容填充区域</div>
|
<ReservoirDemarcation />
|
||||||
</CommonCard>
|
</CommonCard>
|
||||||
<CommonCard title="白蚁防治" className="panel-card card-2">
|
<CommonCard title="白蚁防治" className="panel-card card-2">
|
||||||
<div className="placeholder-content">内容填充区域</div>
|
<TermiteControl />
|
||||||
</CommonCard>
|
</CommonCard>
|
||||||
<CommonCard title="维修养护" className="panel-card card-3">
|
<CommonCard
|
||||||
<div className="placeholder-content">内容填充区域</div>
|
title="维修养护"
|
||||||
|
className="panel-card card-3"
|
||||||
|
headerExtra={<YearSelect value={wxYear} onChange={setWxYear} />}
|
||||||
|
>
|
||||||
|
<Maintenance year={wxYear} />
|
||||||
</CommonCard>
|
</CommonCard>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -6,10 +6,10 @@
|
||||||
@import "../common.less";
|
@import "../common.less";
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
.card-1 { flex: 6; }
|
.card-1 { flex: 1; }
|
||||||
.card-2 { flex: 3; }
|
.card-2 { flex: 2; }
|
||||||
.card-3 { flex: 4; }
|
.card-3 { flex: 3; }
|
||||||
.card-4 { flex: 6; }
|
.card-4 { flex: 5; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import { SearchOutlined, ReloadOutlined, DownloadOutlined, FilePdfOutlined, File
|
||||||
import apiurl from '@/service/apiurl';
|
import apiurl from '@/service/apiurl';
|
||||||
import usePageTable from '@/components/crud/usePageTable';
|
import usePageTable from '@/components/crud/usePageTable';
|
||||||
import { createCrudService } from '@/components/crud/_';
|
import { createCrudService } from '@/components/crud/_';
|
||||||
import { exportFile } from '@/utils/tools'
|
import { download, exportFile } from '@/utils/tools'
|
||||||
import { httppost } from '@/utils/request';
|
import { httppost } from '@/utils/request';
|
||||||
import { config } from '@/config';
|
import { config } from '@/config';
|
||||||
import PdfView from '@/views/Home/components/UI/PdfView';
|
import PdfView from '@/views/Home/components/UI/PdfView';
|
||||||
|
|
@ -61,6 +61,7 @@ const CycleArchive = () => {
|
||||||
|
|
||||||
const handleFileClick = (file) => {
|
const handleFileClick = (file) => {
|
||||||
const fileType = file.fileName?.split('.').pop()?.toLowerCase();
|
const fileType = file.fileName?.split('.').pop()?.toLowerCase();
|
||||||
|
const downloadUrl = `/gunshiApp/ss/projectEvents/file/download/${file.fileId}`;
|
||||||
if (fileType === 'pdf') {
|
if (fileType === 'pdf') {
|
||||||
setPdfInfo({
|
setPdfInfo({
|
||||||
visible: true,
|
visible: true,
|
||||||
|
|
@ -68,8 +69,7 @@ const CycleArchive = () => {
|
||||||
fileId: file.fileId
|
fileId: file.fileId
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
// Download for non-pdf files
|
download(downloadUrl)
|
||||||
window.open(config.minioIp + file.filePath, '_blank');
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { useSelector } from 'react-redux';
|
||||||
import CommonCard from '../../UI/CommonCard';
|
import CommonCard from '../../UI/CommonCard';
|
||||||
import ThreeDots from '../../UI/ThreeDots';
|
import ThreeDots from '../../UI/ThreeDots';
|
||||||
import SupervisionCoverage from './components/SupervisionCoverage';
|
import SupervisionCoverage from './components/SupervisionCoverage';
|
||||||
|
|
@ -17,6 +18,7 @@ import './index.less';
|
||||||
|
|
||||||
|
|
||||||
const SiQuan = () => {
|
const SiQuan = () => {
|
||||||
|
const showPanels = useSelector(s => s.runtime.showPanels);
|
||||||
const [modalVisible, setModalVisible] = useState(false);
|
const [modalVisible, setModalVisible] = useState(false);
|
||||||
const [modalType, setModalType] = useState('monitor'); // 'monitor' | 'cycle' | 'allweather'
|
const [modalType, setModalType] = useState('monitor'); // 'monitor' | 'cycle' | 'allweather'
|
||||||
const [infos, setInfos] = useState({});
|
const [infos, setInfos] = useState({});
|
||||||
|
|
@ -77,7 +79,7 @@ const SiQuan = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="siquan-view">
|
<div className="siquan-view">
|
||||||
<div className="side-panel left">
|
<div className={`side-panel left ${!showPanels ? 'hidden' : ''}`}>
|
||||||
<div className="left-part">
|
<div className="left-part">
|
||||||
<CommonCard title="监管全覆盖" className="panel-card card-1">
|
<CommonCard title="监管全覆盖" className="panel-card card-1">
|
||||||
<SupervisionCoverage data={infos} />
|
<SupervisionCoverage data={infos} />
|
||||||
|
|
@ -91,7 +93,7 @@ const SiQuan = () => {
|
||||||
</CommonCard>
|
</CommonCard>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="side-panel right">
|
<div className={`side-panel right ${!showPanels ? 'hidden' : ''}`}>
|
||||||
<div className="right-part">
|
<div className="right-part">
|
||||||
<CommonCard
|
<CommonCard
|
||||||
title="管控全天候"
|
title="管控全天候"
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,186 @@
|
||||||
|
import React, { useState,useEffect } from 'react';
|
||||||
|
import moment from 'moment';
|
||||||
|
import { Image } from 'antd';
|
||||||
|
import arrowIcon from '@/assets/images/card/arrow.png';
|
||||||
|
import smallCard from '@/assets/images/card/smallCard.png';
|
||||||
|
import resperson from '@/assets/images/card/resperson.png';
|
||||||
|
import { download } from '@/utils/tools';
|
||||||
|
import apiurl from '@/service/apiurl';
|
||||||
|
import { httpget } from '@/utils/request';
|
||||||
|
import PdfView from '@/views/Home/components/UI/PdfView';
|
||||||
|
import './index.less';
|
||||||
|
|
||||||
|
const PlanSection = () => {
|
||||||
|
const [pdfInfo, setPdfInfo] = useState({ visible: false, title: '', fileId: '' });
|
||||||
|
const [imagePreview, setImagePreview] = useState({ visible: false, src: '' });
|
||||||
|
const [rotaInfo, setRotaInfo] = useState({});
|
||||||
|
const [docList, setDocList] = useState([]);
|
||||||
|
// 获取值班信息
|
||||||
|
const getRotaInfo = async () => {
|
||||||
|
try {
|
||||||
|
const result = await httpget(apiurl.sy.ya.rota);
|
||||||
|
if (result.code === 200) {
|
||||||
|
setRotaInfo(result.data);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取预案列表
|
||||||
|
const getDocInfo = async () => {
|
||||||
|
try {
|
||||||
|
const result = await httpget(apiurl.sy.ya.document);
|
||||||
|
if (result.code === 200) {
|
||||||
|
setDocList(result.data);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getDutyList = () => {
|
||||||
|
const todayList = rotaInfo.today || [];
|
||||||
|
const nextDayList = rotaInfo.nextDay || [];
|
||||||
|
|
||||||
|
const formatDuty = (list, defaultDate) => {
|
||||||
|
const dateStr = list.length > 0 ? list[0].rotaDate : defaultDate;
|
||||||
|
const date = moment(dateStr).format('MM-DD');
|
||||||
|
const leader = list.find(item => item.rotaType === 1)?.userName || '无';
|
||||||
|
const staff = list.filter(item => item.rotaType === 2).map(i => i.userName).join('、') || '无';
|
||||||
|
return { date, leader, staff };
|
||||||
|
};
|
||||||
|
|
||||||
|
return [
|
||||||
|
formatDuty(todayList, moment().format('YYYY-MM-DD')),
|
||||||
|
formatDuty(nextDayList, moment().add(1, 'days').format('YYYY-MM-DD'))
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
||||||
|
const dutyData = getDutyList();
|
||||||
|
|
||||||
|
const handlePreview = (item) => {
|
||||||
|
const file = item?.files?.[0];
|
||||||
|
if (!file || !item.fileName) return;
|
||||||
|
const fileName = file.fileName;
|
||||||
|
const fileId = file.fileId;
|
||||||
|
const extension = fileName.split('.').pop().toLowerCase();
|
||||||
|
const downloadUrl = `/gunshiApp/ss/resPlanB/file/download/${fileId}`;
|
||||||
|
if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(extension)) {
|
||||||
|
setImagePreview({
|
||||||
|
visible: true,
|
||||||
|
src: downloadUrl
|
||||||
|
});
|
||||||
|
} else if (extension === 'pdf') {
|
||||||
|
setPdfInfo({
|
||||||
|
visible: true,
|
||||||
|
title: fileName,
|
||||||
|
fileId: fileId
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
download(downloadUrl)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getRotaInfo()
|
||||||
|
getDocInfo()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="plan-section">
|
||||||
|
{/* Section 1: Duty Info */}
|
||||||
|
<div className="section-header">
|
||||||
|
<div className="title-wrapper">
|
||||||
|
<img src={arrowIcon} alt="arrow" className="arrow-icon" />
|
||||||
|
<span className="section-title">值班信息</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="duty-info">
|
||||||
|
{dutyData.map((item, index) => (
|
||||||
|
<div key={index} className="duty-card">
|
||||||
|
<div className="date-box" style={{ backgroundImage: `url(${smallCard})` }}>
|
||||||
|
{item.date}
|
||||||
|
</div>
|
||||||
|
<div className="staff-info">
|
||||||
|
<div className="staff-item">
|
||||||
|
<img src={resperson} alt="leader" className="avatar" />
|
||||||
|
<div className="info-text">
|
||||||
|
<span className="role">值班领导</span>
|
||||||
|
<span className="name">{item.leader}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="staff-item">
|
||||||
|
<img src={resperson} alt="staff" className="avatar" />
|
||||||
|
<div className="info-text">
|
||||||
|
<span className="role">值班人员</span>
|
||||||
|
<span className="name">{item.staff}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Section 2: Scheme Materials */}
|
||||||
|
<div className="section-header">
|
||||||
|
<div className="title-wrapper">
|
||||||
|
<img src={arrowIcon} alt="arrow" className="arrow-icon" />
|
||||||
|
<span className="section-title">方案资料</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="scheme-list">
|
||||||
|
{docList.map((item, index) => {
|
||||||
|
const isPlan = item.type === 1;
|
||||||
|
const typeText = isPlan ? '防汛预案' : '调度规程';
|
||||||
|
const colorClass = isPlan ? 'orange' : 'blue';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={item.id || index} className="scheme-item">
|
||||||
|
<div className={`tag ${colorClass}`}>
|
||||||
|
{typeText}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="doc-name"
|
||||||
|
onClick={() => handlePreview(item)}
|
||||||
|
title={item.planName}
|
||||||
|
>
|
||||||
|
{item.planName}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* PDF Viewer */}
|
||||||
|
{pdfInfo.visible && (
|
||||||
|
<PdfView
|
||||||
|
visible={pdfInfo.visible}
|
||||||
|
onClose={() => setPdfInfo({ ...pdfInfo, visible: false })}
|
||||||
|
title={pdfInfo.title}
|
||||||
|
fileId={pdfInfo.fileId}
|
||||||
|
url="/gunshiApp/ss/resPlanB/file/download/"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Image Preview */}
|
||||||
|
<div style={{ display: 'none' }}>
|
||||||
|
<Image
|
||||||
|
src={imagePreview.src}
|
||||||
|
preview={{
|
||||||
|
visible: imagePreview.visible,
|
||||||
|
src: imagePreview.src,
|
||||||
|
onVisibleChange: (value) => {
|
||||||
|
setImagePreview({ ...imagePreview, visible: value });
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PlanSection;
|
||||||
|
|
@ -0,0 +1,145 @@
|
||||||
|
.plan-section {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
.title-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.arrow-icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 18px;
|
||||||
|
margin-right: 8px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 0 5px rgba(0, 160, 233, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.duty-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
.duty-card {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 48%;
|
||||||
|
|
||||||
|
.date-box {
|
||||||
|
width: 60px;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
margin-right: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
// font-weight: bold;
|
||||||
|
padding: 0 5px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staff-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 5px;
|
||||||
|
// height: 80px;
|
||||||
|
|
||||||
|
.staff-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
margin-right: 8px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.role {
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(255, 255, 255);
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #00eaff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scheme-list {
|
||||||
|
overflow-y: auto;
|
||||||
|
max-height: 120px;
|
||||||
|
.scheme-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
width: 80px;
|
||||||
|
height: 28px;
|
||||||
|
line-height: 28px;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 13px;
|
||||||
|
margin-right: 15px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
&.blue {
|
||||||
|
background: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.orange {
|
||||||
|
background: #fa8c16;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-name {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #00eaff;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -15,14 +15,14 @@
|
||||||
.tab-item {
|
.tab-item {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 5px 0;
|
padding: 3px 0;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: rgba(255, 255, 255, 0.6);
|
color: rgba(255, 255, 255, 0.6);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
margin: 0 5px;
|
// margin: 0 5px;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,256 @@
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Table } from 'antd';
|
||||||
|
import selectedBg from '@/assets/images/modal/selected.png';
|
||||||
|
import apiurl from '@/service/apiurl';
|
||||||
|
import { httpget } from '@/utils/request';
|
||||||
|
import CommonModal from '@/views/Home/components/UI/CommonModal';
|
||||||
|
import RightPanel from '../../../SiQuan/components/ModalComponents/AllWeatherModal/RainMonitor/RightPanel';
|
||||||
|
import ReservoirPanel from '../../../SiQuan/components/ModalComponents/AllWeatherModal/ReservoirPanel';
|
||||||
|
import FlowPanel from '../../../SiQuan/components/ModalComponents/AllWeatherModal/FlowPanel';
|
||||||
|
import './index.less';
|
||||||
|
|
||||||
|
const WaterRainSection = () => {
|
||||||
|
const [activeTab, setActiveTab] = useState('rain');
|
||||||
|
const [dataList, setDataList] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
// Detail Modal State
|
||||||
|
const [detailVisible, setDetailVisible] = useState(false);
|
||||||
|
const [selectedItem, setSelectedItem] = useState(null);
|
||||||
|
|
||||||
|
const tabs = [
|
||||||
|
{ key: 'rain', label: '实时雨情' },
|
||||||
|
{ key: 'reservoir', label: '实时水库水情' },
|
||||||
|
{ key: 'flow', label: '出入库流量' }
|
||||||
|
];
|
||||||
|
|
||||||
|
// Fetch Data Functions
|
||||||
|
const getRainList = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const result = await httpget(apiurl.sy.sssyq.reservoir);
|
||||||
|
if (result.code === 200) {
|
||||||
|
setDataList(result.data);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getReservoirList = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const result = await httpget(apiurl.sy.sssyq.rain);
|
||||||
|
if (result.code === 200) {
|
||||||
|
setDataList(result.data);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getFlowList = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const result = await httpget(apiurl.sy.sssyq.flow);
|
||||||
|
if (result.code === 200) {
|
||||||
|
setDataList(result.data);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setDataList([]);
|
||||||
|
if (activeTab === 'rain') {
|
||||||
|
getRainList();
|
||||||
|
} else if (activeTab === 'reservoir') {
|
||||||
|
getReservoirList();
|
||||||
|
} else if (activeTab === 'flow') {
|
||||||
|
getFlowList();
|
||||||
|
}
|
||||||
|
}, [activeTab]);
|
||||||
|
|
||||||
|
// Columns Definitions
|
||||||
|
const rainColumns = [
|
||||||
|
{
|
||||||
|
title: '站点名称',
|
||||||
|
dataIndex: 'stnm',
|
||||||
|
key: 'stnm',
|
||||||
|
align: 'center',
|
||||||
|
width: 120,
|
||||||
|
ellipsis: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '今日',
|
||||||
|
dataIndex: 'todayDrp',
|
||||||
|
key: 'todayDrp',
|
||||||
|
align: 'center',
|
||||||
|
render: (text) => text ?? '-'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '昨日',
|
||||||
|
dataIndex: 'yesterdayDrp',
|
||||||
|
key: 'yesterdayDrp',
|
||||||
|
align: 'center',
|
||||||
|
render: (text) => text ?? '-'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '24h',
|
||||||
|
dataIndex: 'drp24',
|
||||||
|
key: 'drp24',
|
||||||
|
align: 'center',
|
||||||
|
render: (text) => text ?? '-'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '48h',
|
||||||
|
dataIndex: 'drp48', // Assuming API has this, otherwise mock/calc
|
||||||
|
key: 'drp48',
|
||||||
|
align: 'center',
|
||||||
|
render: (text) => text ?? '-'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '72h',
|
||||||
|
dataIndex: 'drp72', // Assuming API has this
|
||||||
|
key: 'drp72',
|
||||||
|
align: 'center',
|
||||||
|
render: (text) => text ?? '-'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const reservoirColumns = [
|
||||||
|
{
|
||||||
|
title: '站点名称',
|
||||||
|
dataIndex: 'stnm',
|
||||||
|
key: 'stnm',
|
||||||
|
align: 'center',
|
||||||
|
width: 120,
|
||||||
|
ellipsis: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '实时水位(m)',
|
||||||
|
dataIndex: 'rz',
|
||||||
|
key: 'rz',
|
||||||
|
align: 'center',
|
||||||
|
render: (text) => text ?? '-'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '监测时间',
|
||||||
|
dataIndex: 'tm',
|
||||||
|
key: 'tm',
|
||||||
|
align: 'center',
|
||||||
|
width: 140,
|
||||||
|
render: (text) => text ? text.substring(5, 16) : '-' // Format: MM-DD HH:mm
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const flowColumns = [
|
||||||
|
{
|
||||||
|
title: '站点名称',
|
||||||
|
dataIndex: 'stnm',
|
||||||
|
key: 'stnm',
|
||||||
|
align: 'center',
|
||||||
|
width: 120,
|
||||||
|
ellipsis: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '实时流量(m³/s)',
|
||||||
|
dataIndex: 'q',
|
||||||
|
key: 'q',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '监测时间',
|
||||||
|
dataIndex: 'tm',
|
||||||
|
key: 'tm',
|
||||||
|
align: 'center',
|
||||||
|
width: 140,
|
||||||
|
render: (text) => text ? text.substring(5, 16) : '-' // Format: MM-DD HH:mm
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const getColumns = () => {
|
||||||
|
switch (activeTab) {
|
||||||
|
case 'rain': return rainColumns;
|
||||||
|
case 'reservoir': return reservoirColumns;
|
||||||
|
case 'flow': return flowColumns;
|
||||||
|
default: return [];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRowClick = (record) => {
|
||||||
|
setSelectedItem(record);
|
||||||
|
setDetailVisible(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderModalContent = () => {
|
||||||
|
if (!selectedItem) return null;
|
||||||
|
|
||||||
|
if (activeTab === 'rain') {
|
||||||
|
return <RightPanel stcd={selectedItem.stcd} cleanMode={true} />;
|
||||||
|
} else if (activeTab === 'reservoir') {
|
||||||
|
return <ReservoirPanel stcd={selectedItem.stcd} cleanMode={true} />;
|
||||||
|
} else if (activeTab === 'flow') {
|
||||||
|
return <FlowPanel stcd={selectedItem.stcd} cleanMode={true} />;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getModalTitle = () => {
|
||||||
|
if(activeTab === 'rain') return selectedItem?.stnm || '雨情详情';
|
||||||
|
if(activeTab === 'reservoir') return selectedItem?.stnm || '水库详情';
|
||||||
|
if(activeTab === 'flow') return selectedItem?.stnm || '流量详情';
|
||||||
|
return '详情';
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="water-rain-section">
|
||||||
|
<div className="tabs-container">
|
||||||
|
{tabs.map(tab => (
|
||||||
|
<div
|
||||||
|
key={tab.key}
|
||||||
|
className={`tab-item ${activeTab === tab.key ? 'active' : ''}`}
|
||||||
|
onClick={() => setActiveTab(tab.key)}
|
||||||
|
style={activeTab === tab.key ? { backgroundImage: `url(${selectedBg})` } : {}}
|
||||||
|
>
|
||||||
|
{tab.label}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="content-list">
|
||||||
|
{activeTab === 'rain' && <div className="unit-label">单位：mm</div>}
|
||||||
|
<Table
|
||||||
|
columns={getColumns()}
|
||||||
|
dataSource={dataList}
|
||||||
|
pagination={false}
|
||||||
|
size="small"
|
||||||
|
rowKey="stcd"
|
||||||
|
loading={loading}
|
||||||
|
scroll={{ y: 200 }}
|
||||||
|
onRow={(record) => ({
|
||||||
|
onClick: () => handleRowClick(record)
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<CommonModal
|
||||||
|
title={getModalTitle()}
|
||||||
|
visible={detailVisible}
|
||||||
|
onClose={() => setDetailVisible(false)}
|
||||||
|
width={"80%"}
|
||||||
|
>
|
||||||
|
{renderModalContent()}
|
||||||
|
</CommonModal>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WaterRainSection;
|
||||||
|
|
@ -0,0 +1,96 @@
|
||||||
|
.water-rain-section {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.tabs-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 0 10px;
|
||||||
|
|
||||||
|
.tab-item {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
padding: 3px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
cursor: pointer;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
transition: all 0.3s;
|
||||||
|
margin: 0 5px;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 0 10px #00a0e9;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-list {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 0 5px;
|
||||||
|
|
||||||
|
// Scrollbar styling
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 4px;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(0, 160, 233, 0.5);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unit-label {
|
||||||
|
text-align: right;
|
||||||
|
color: rgba(255,255,255,0.7);
|
||||||
|
font-size: 12px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-wrapper {
|
||||||
|
.ant-table {
|
||||||
|
background: transparent;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
.ant-table-thead > tr > th {
|
||||||
|
background: rgba(0, 70, 110, 0.6);
|
||||||
|
color: #fff;
|
||||||
|
border-bottom: none;
|
||||||
|
padding: 8px 4px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-tbody > tr > td {
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
color: #fff;
|
||||||
|
padding: 8px 4px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-tbody > tr:hover > td {
|
||||||
|
background: rgba(0, 160, 233, 0.1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-empty-normal {
|
||||||
|
color: rgba(255,255,255,0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,7 +1,12 @@
|
||||||
import React from 'react';
|
import React,{useState} from 'react';
|
||||||
|
import { useSelector } from 'react-redux';
|
||||||
import CommonCard from '../../UI/CommonCard';
|
import CommonCard from '../../UI/CommonCard';
|
||||||
import ThreeDots from '../../UI/ThreeDots';
|
import ThreeDots from '../../UI/ThreeDots';
|
||||||
|
import CommonModal from '../../UI/CommonModal';
|
||||||
import WarningSection from './components/WarningSection';
|
import WarningSection from './components/WarningSection';
|
||||||
|
import WaterRainSection from './components/WaterRainSection';
|
||||||
|
import PlanSection from './components/PlanSection';
|
||||||
|
import AllWeatherModal from '../SiQuan/components/ModalComponents/AllWeatherModal';
|
||||||
import './index.less';
|
import './index.less';
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -27,11 +32,26 @@ const WarningToggles = ({ activeType, onToggle }) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const SiYu = () => {
|
const SiYu = () => {
|
||||||
const [warningType, setWarningType] = React.useState('monitor');
|
const showPanels = useSelector(s => s.runtime.showPanels);
|
||||||
|
const [warningType, setWarningType] = useState('monitor');
|
||||||
|
const [modalVisible, setModalVisible] = useState(false);
|
||||||
|
const [activeTab, setActiveTab] = useState('rain');
|
||||||
|
|
||||||
|
const tabsAllWeather = [
|
||||||
|
{ label: '雨情监测', value: 'rain' },
|
||||||
|
{ label: '水库水情', value: 'reservoir' },
|
||||||
|
{ label: '出入库流量', value: 'flow' },
|
||||||
|
{ label: '安全监测', value: 'safety' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleOpenModal = () => {
|
||||||
|
setActiveTab('rain');
|
||||||
|
setModalVisible(true);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="siyu-view">
|
<div className="siyu-view">
|
||||||
<div className="side-panel left">
|
<div className={`side-panel left ${!showPanels ? 'hidden' : ''}`}>
|
||||||
<CommonCard title="预报" className="panel-card card-1">
|
<CommonCard title="预报" className="panel-card card-1">
|
||||||
<div className="placeholder-content">内容填充区域</div>
|
<div className="placeholder-content">内容填充区域</div>
|
||||||
</CommonCard>
|
</CommonCard>
|
||||||
|
|
@ -40,7 +60,7 @@ const SiYu = () => {
|
||||||
</CommonCard>
|
</CommonCard>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="side-panel right">
|
<div className={`side-panel right ${!showPanels ? 'hidden' : ''}`}>
|
||||||
<CommonCard
|
<CommonCard
|
||||||
title="预警"
|
title="预警"
|
||||||
className="panel-card card-1"
|
className="panel-card card-1"
|
||||||
|
|
@ -51,15 +71,29 @@ const SiYu = () => {
|
||||||
<CommonCard
|
<CommonCard
|
||||||
title="实时水雨情"
|
title="实时水雨情"
|
||||||
className="panel-card card-2"
|
className="panel-card card-2"
|
||||||
headerExtra={<ThreeDots onClick={() => console.log('实时水雨情 clicked')} />}
|
headerExtra={<ThreeDots onClick={handleOpenModal} />}
|
||||||
>
|
>
|
||||||
<div className="placeholder-content">内容填充区域</div>
|
<WaterRainSection />
|
||||||
</CommonCard>
|
</CommonCard>
|
||||||
|
|
||||||
<CommonCard title="预案" className="panel-card card-3">
|
<CommonCard title="预案" className="panel-card card-3">
|
||||||
<div className="placeholder-content">内容填充区域</div>
|
<PlanSection />
|
||||||
</CommonCard>
|
</CommonCard>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<CommonModal
|
||||||
|
visible={modalVisible}
|
||||||
|
onClose={() => setModalVisible(false)}
|
||||||
|
title="实时水雨情"
|
||||||
|
tabs={tabsAllWeather}
|
||||||
|
activeTab={activeTab}
|
||||||
|
onTabChange={setActiveTab}
|
||||||
|
width={'90%'}
|
||||||
|
>
|
||||||
|
<div style={{ color: '#fff', height: '100%' }}>
|
||||||
|
<AllWeatherModal active={activeTab} />
|
||||||
|
</div>
|
||||||
|
</CommonModal>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -120,8 +120,8 @@ const StrengthenRuleOfLaw = () => {
|
||||||
{
|
{
|
||||||
name: '水政执法-外圈',
|
name: '水政执法-外圈',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
radius: ['48%', '82%'],
|
radius: ['52%', '94%'],
|
||||||
center: ['34%', '50%'],
|
center: ['50%', '50%'],
|
||||||
startAngle: startAngle,
|
startAngle: startAngle,
|
||||||
avoidLabelOverlap: false,
|
avoidLabelOverlap: false,
|
||||||
label: {
|
label: {
|
||||||
|
|
@ -143,8 +143,8 @@ const StrengthenRuleOfLaw = () => {
|
||||||
{
|
{
|
||||||
name: '水政执法-内圈',
|
name: '水政执法-内圈',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
radius: ['50%', '56%'],
|
radius: ['60%', '70%'],
|
||||||
center: ['34%', '50%'],
|
center: ['50%', '50%'],
|
||||||
startAngle: startAngle,
|
startAngle: startAngle,
|
||||||
avoidLabelOverlap: false,
|
avoidLabelOverlap: false,
|
||||||
label: {
|
label: {
|
||||||
|
|
@ -305,43 +305,50 @@ const StrengthenRuleOfLaw = () => {
|
||||||
<div className="section-header">
|
<div className="section-header">
|
||||||
<div className="title-wrapper">
|
<div className="title-wrapper">
|
||||||
<img src={arrowIcon} alt="arrow" className="arrow-icon" />
|
<img src={arrowIcon} alt="arrow" className="arrow-icon" />
|
||||||
<span>水政执法</span>
|
<span className="section-title">水政执法</span>
|
||||||
</div>
|
</div>
|
||||||
<YearSelect
|
<YearSelect value={year} onChange={setYear} />
|
||||||
value={year}
|
|
||||||
onChange={setYear}
|
|
||||||
style={{ width: 100 }}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="chart-legend-container">
|
<div className="chart-container">
|
||||||
{chartData.length > 0 ? (
|
<div className="chart-wrapper">
|
||||||
<>
|
{chartData.length > 0 ? (
|
||||||
<div className="chart-wrapper">
|
|
||||||
<ReactEcharts
|
<ReactEcharts
|
||||||
option={getOption()}
|
option={getOption()}
|
||||||
style={{ height: '100%', width: '100%' }}
|
style={{ height: '100%', width: '100%' }}
|
||||||
notMerge={true}
|
onEvents={{
|
||||||
onEvents={{
|
click: onChartClick
|
||||||
'click': onChartClick
|
}}
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
) : (
|
||||||
<div className="legend-wrapper">
|
<div style={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||||
{chartData.map((item, index) => (
|
|
||||||
<div key={index} className="legend-item">
|
|
||||||
<span className="color-dot" style={{ backgroundColor: item.color }}></span>
|
|
||||||
<span className="name">{item.name}</span>
|
|
||||||
<span className="value">{item.value}</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<div style={{ width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
|
||||||
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={<span style={{color:'#fff'}}>暂无数据</span>} />
|
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={<span style={{color:'#fff'}}>暂无数据</span>} />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="legend-wrapper">
|
||||||
|
{chartData.map((item, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="legend-item"
|
||||||
|
onMouseEnter={() => {
|
||||||
|
// Logic to highlight item if needed, currently main interaction is click on chart
|
||||||
|
const fakeParams = {
|
||||||
|
componentType: 'series',
|
||||||
|
name: item.name,
|
||||||
|
value: item.value,
|
||||||
|
dataIndex: index
|
||||||
|
};
|
||||||
|
// Optional: trigger hover effect or selection
|
||||||
|
// onChartClick(fakeParams); // This might be too aggressive on hover
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="legend-color" style={{ backgroundColor: item.color }}></div>
|
||||||
|
<div className="legend-name">{item.name}</div>
|
||||||
|
<div className="legend-value">{item.value}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -75,12 +75,14 @@
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
min-height: 0; /* Add this to allow flex container to shrink properly */
|
||||||
|
|
||||||
.section-header {
|
.section-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
.title-wrapper {
|
.title-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -93,53 +95,64 @@
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #fff;
|
|
||||||
text-shadow: 0 0 5px rgba(0, 160, 233, 0.5);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-legend-container {
|
.chart-container {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
min-height: 0; /* Critical for nested flex scrolling/sizing */
|
||||||
|
|
||||||
.chart-wrapper {
|
.chart-wrapper {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-height: 140px;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.legend-wrapper {
|
.legend-wrapper {
|
||||||
width: 140px;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
.legend-item {
|
.legend-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 6px;
|
color: rgba(255, 255, 255, 0.85);
|
||||||
font-size: 12px;
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
|
||||||
.color-dot {
|
&.active, &:hover {
|
||||||
width: 8px;
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
height: 8px;
|
}
|
||||||
margin-right: 8px;
|
|
||||||
|
.legend-color {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.legend-name {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
color: rgba(255, 255, 255, 0.8);
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.value {
|
.legend-value {
|
||||||
|
font-size: 14px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: bold;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { useSelector } from 'react-redux';
|
||||||
import CommonCard from '../../UI/CommonCard';
|
import CommonCard from '../../UI/CommonCard';
|
||||||
import PerfectSystem from './components/PerfectSystem';
|
import PerfectSystem from './components/PerfectSystem';
|
||||||
import SoundMechanism from './components/SoundMechanism';
|
import SoundMechanism from './components/SoundMechanism';
|
||||||
|
|
@ -9,6 +10,7 @@ import apiurl from '@/service/apiurl';
|
||||||
import './index.less';
|
import './index.less';
|
||||||
|
|
||||||
const SiZhi = () => {
|
const SiZhi = () => {
|
||||||
|
const showPanels = useSelector(s => s.runtime.showPanels);
|
||||||
const [infos, setInfos] = useState({});
|
const [infos, setInfos] = useState({});
|
||||||
|
|
||||||
const getInfo = async () => {
|
const getInfo = async () => {
|
||||||
|
|
@ -27,7 +29,7 @@ const SiZhi = () => {
|
||||||
}, []);
|
}, []);
|
||||||
return (
|
return (
|
||||||
<div className="sizhi-view">
|
<div className="sizhi-view">
|
||||||
<div className="side-panel left">
|
<div className={`side-panel left ${!showPanels ? 'hidden' : ''}`}>
|
||||||
<CommonCard title="完善体系" className="panel-card card-1">
|
<CommonCard title="完善体系" className="panel-card card-1">
|
||||||
<PerfectSystem data={infos}/>
|
<PerfectSystem data={infos}/>
|
||||||
</CommonCard>
|
</CommonCard>
|
||||||
|
|
@ -36,7 +38,7 @@ const SiZhi = () => {
|
||||||
</CommonCard>
|
</CommonCard>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="side-panel right">
|
<div className={`side-panel right ${!showPanels ? 'hidden' : ''}`}>
|
||||||
<CommonCard title="强化法治" className="panel-card card-1">
|
<CommonCard title="强化法治" className="panel-card card-1">
|
||||||
<StrengthenRuleOfLaw />
|
<StrengthenRuleOfLaw />
|
||||||
</CommonCard>
|
</CommonCard>
|
||||||
|
|
|
||||||
|
|
@ -12,10 +12,16 @@
|
||||||
|
|
||||||
&.left {
|
&.left {
|
||||||
left: 20px;
|
left: 20px;
|
||||||
|
&.hidden {
|
||||||
|
transform: translateX(-120%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.right {
|
&.right {
|
||||||
right: 20px;
|
right: 20px;
|
||||||
|
&.hidden {
|
||||||
|
transform: translateX(120%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
|
|
@ -38,3 +44,28 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
color: rgba(255, 255, 255, 0.5);
|
color: rgba(255, 255, 255, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
.title-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.arrow-icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 18px;
|
||||||
|
margin-right: 8px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 0 5px rgba(0, 160, 233, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -66,15 +66,15 @@ const HomePage = () => {
|
||||||
// style={{position:"relative"}} 这段以后写在.home-page里
|
// style={{position:"relative"}} 这段以后写在.home-page里
|
||||||
<div className="home-page" style={{position:"relative"}}>
|
<div className="home-page" style={{position:"relative"}}>
|
||||||
<Header activeMenu={activeMenu} onMenuChange={setActiveMenu} userName={userInfo.userName} />
|
<Header activeMenu={activeMenu} onMenuChange={setActiveMenu} userName={userInfo.userName} />
|
||||||
<div className="main-content-wrapper">
|
<div className="main-content-wrapper" style={{ pointerEvents: 'none' }}>
|
||||||
<div className="content-overlay">
|
<div className="content-overlay" style={{ pointerEvents: 'none' }}>
|
||||||
{renderContent()}
|
{renderContent()}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
{/* 地图相关 */}
|
{/* 地图相关 */}
|
||||||
<div style={{ height: '100%',width:'100%', position: 'absolute',overflow:'hidden'}}>
|
<div style={{ height: '100%', width: '100%', position: 'absolute', top: 0, left: 0, overflow: 'hidden', zIndex: 0, pointerEvents: 'auto' }}>
|
||||||
{/* 地图 */}
|
{/* 地图 */}
|
||||||
<MapCtrl/>
|
<MapCtrl/>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,11 +10,19 @@
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-family: "Microsoft YaHei", sans-serif;
|
font-family: "Microsoft YaHei", sans-serif;
|
||||||
|
|
||||||
|
.dashboard-header {
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.main-content-wrapper {
|
.main-content-wrapper {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 5;
|
||||||
|
|
||||||
.content-overlay {
|
.content-overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -24,31 +32,8 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 5; // Content sits above the map
|
z-index: 5; // Content sits above the map
|
||||||
pointer-events: none; // Let clicks pass through to map by default
|
pointer-events: none; // Let clicks pass through to map by default
|
||||||
|
|
||||||
// Re-enable pointer events for actual interactive children
|
|
||||||
> * {
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.content-layer {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 10; // Above map
|
|
||||||
pointer-events: none; // Let clicks pass through to map by default
|
|
||||||
|
|
||||||
// But children (cards) must be clickable.
|
|
||||||
// This will be handled in child components or we can set it here if all children are full-screen overlays
|
|
||||||
// It's safer to handle in children, but for now, since SiQuan is the child:
|
|
||||||
> * {
|
|
||||||
pointer-events: none;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue