501 lines
20 KiB
TypeScript
501 lines
20 KiB
TypeScript
import {Modal, Tabs, Switch} from 'antd'
|
||
import React, {useEffect, useMemo, useState} from 'react';
|
||
import "./index.less"
|
||
import ReactEcharts from "echarts-for-react";
|
||
|
||
const SyglPage: React.FC = () => {
|
||
const [echartsOption, setEchartsOption] = useState({});
|
||
|
||
// @ts-ignore
|
||
const getOption = () => {
|
||
const data0 = [1, 1, 1, 1, 1];
|
||
const option = {
|
||
tooltip: {
|
||
// 在鼠标悬停时触发显示
|
||
trigger: 'axis',
|
||
},
|
||
textStyle: {
|
||
color: "#C9C9C9",
|
||
},
|
||
legend: {
|
||
type: "scroll",
|
||
orient: 'vertical',
|
||
selectedMode: false,
|
||
right: "40%",
|
||
top: "15%",
|
||
textStyle: {
|
||
color: "#ffffff",
|
||
fontSize: 14,
|
||
},
|
||
},
|
||
grid: {
|
||
containLabel: true,
|
||
left: "3%",
|
||
top: "20%",
|
||
bottom: "0%",
|
||
right: "0%",
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: [
|
||
"2015",
|
||
"2016",
|
||
"2017",
|
||
"2018",
|
||
"2019",
|
||
],
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#ffffff",
|
||
opacity: 0.9,
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
margin: 20, //刻度标签与轴线之间的距离。
|
||
textStyle: {
|
||
fontFamily: "Microsoft YaHei",
|
||
color: "#FFF",
|
||
},
|
||
fontSize: 12,
|
||
fontStyle: "bold"
|
||
},
|
||
},
|
||
yAxis: {
|
||
name: "(万元)",
|
||
max: 12000,
|
||
min: 0,
|
||
nameTextStyle: {
|
||
color: '#fff',
|
||
opacity: 0.9
|
||
},
|
||
type: "value",
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#ffffff",
|
||
opacity: 0.9,
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,0.3)',
|
||
}
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
fontFamily: "Microsoft YaHei",
|
||
color: "#FFF",
|
||
},
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
type: "bar",
|
||
data: [1796, 717, 2500, 9445, 11345],
|
||
barMaxWidth: "auto",
|
||
barWidth: 30,
|
||
itemStyle: {
|
||
color: {
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
type: "linear",
|
||
global: false,
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: "#00A9FF",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#66DDFF",
|
||
},
|
||
],
|
||
},
|
||
},
|
||
},
|
||
// color: [, "#018bc1", "#96e092", "#DE9FB1", "#f06e90", "#f89e92",],
|
||
{//一蓝底
|
||
data: data0,
|
||
type: "pictorialBar",
|
||
barMaxWidth: "20",
|
||
symbol: "diamond",
|
||
color: "#66DDFF",
|
||
symbolOffset: ['0', "50%"],
|
||
symbolSize: [30, 10],
|
||
zlevel: 2,
|
||
tooltip: {
|
||
show: false // 不显示数据2的tooltip
|
||
}
|
||
},
|
||
{//一蓝盖
|
||
data: [1796, 717, 2500, 9445, 11345],
|
||
type: "pictorialBar",
|
||
barMaxWidth: "20",
|
||
symbol: "diamond",
|
||
symbolPosition: "end",
|
||
color: "#77C9FF",
|
||
symbolOffset: ['0', "-45%"],
|
||
symbolSize: [30, 10],
|
||
zlevel: 2,
|
||
tooltip: {
|
||
show: false // 不显示数据2的tooltip
|
||
}
|
||
},
|
||
|
||
],
|
||
|
||
markArea: {
|
||
silent: true,
|
||
|
||
}
|
||
};
|
||
setEchartsOption(option);
|
||
};
|
||
|
||
useEffect(() => {
|
||
getOption();
|
||
}, []);
|
||
return (
|
||
<div className='content'>
|
||
<div className='left-box'>
|
||
<div className='box'>
|
||
<div className='box-title'>
|
||
<div className='title-items items-active'>工程概况</div>
|
||
<div className='title-items'>大事记</div>
|
||
<div className='title-items'>美丽水厂</div>
|
||
</div>
|
||
<div className='box1'>
|
||
<img className='box1-bian' src={`${process.env.PUBLIC_URL}/assets/bian.png`} alt=""/>
|
||
<div className='box1-content'>
|
||
<div className='box1-content-top'>
|
||
<div className='box1-content-top-img'>
|
||
<img className='box1-bian' src={`${process.env.PUBLIC_URL}/assets/img2.png`} alt=""/>
|
||
</div>
|
||
<div className='box1-content-top-text'>
|
||
咸丰县水利局坚持把抓好农村饮水安全、助力脱贫攻坚放在中心位置，切实履行行业扶贫责任，扎实抓好精准扶贫农村饮水安全工程建设，全面解决建档立卡贫困人口“饮水难”问题，我县共投入<span>25804.04</span>万元推进实施6批次精准扶贫农村饮水安全工程。
|
||
</div>
|
||
</div>
|
||
<div className='box1-content-bottom'>
|
||
新建或改造农村供水工程369个（处），改善或提高<span>24.46</span>万农村居民的饮水条件（包括<span>14.99</span>万建档立卡贫困人口），同步建设高效智慧的农村供水管理平台，实现从源头到龙头全过程精细化管理。
|
||
</div>
|
||
</div>
|
||
<img className='box1-bian' src={`${process.env.PUBLIC_URL}/assets/bian.png`} alt=""/>
|
||
</div>
|
||
</div>
|
||
<div className='box'>
|
||
<div className='box-title'>
|
||
<div className='title-item'>工程投资</div>
|
||
</div>
|
||
<div className='box2'>
|
||
<ReactEcharts
|
||
option={echartsOption}
|
||
style={{width: "100%", height: 'calc( 100% - 10px )'}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className='box'>
|
||
<div className='box-title'>
|
||
<div className='title-item'>工程成效</div>
|
||
</div>
|
||
<div className='box3'>
|
||
<div className='box3-content'>
|
||
<div className='box3-item'>
|
||
<div className='box3-item-title'>
|
||
自来水普及率
|
||
</div>
|
||
<div className='box3-content-bottom'>
|
||
<div className='box3-item-img'>
|
||
<img src={`${process.env.PUBLIC_URL}/assets/box3_1.png`} alt=""/>
|
||
</div>
|
||
<div className='box3-item-data'>
|
||
<div className='box3-item-data-top'>85.24%</div>
|
||
<div className='box3-item-data-btm'>2015年</div>
|
||
</div>
|
||
<div className='box3-item-arrow'>
|
||
<div className='box3-item-arrow-top'>14.26%</div>
|
||
<div className='box3-item-arrow-btm'>
|
||
<img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
|
||
</div>
|
||
</div>
|
||
<div className='box3-item-data'>
|
||
<div className='box3-item-data-top'>99.50%</div>
|
||
<div className='box3-item-data-btm'>2023年</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className='box3-item'>
|
||
<div className='box3-item-title'>
|
||
集中供水率
|
||
</div>
|
||
<div className='box3-content-bottom'>
|
||
<div className='box3-item-img'>
|
||
<img src={`${process.env.PUBLIC_URL}/assets/box3_2.png`} alt=""/>
|
||
</div>
|
||
<div className='box3-item-data'>
|
||
<div className='box3-item-data-top'>75.64%</div>
|
||
<div className='box3-item-data-btm'>2015年</div>
|
||
</div>
|
||
<div className='box3-item-arrow'>
|
||
<div className='box3-item-arrow-top'>18.86%</div>
|
||
<div className='box3-item-arrow-btm'>
|
||
<img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
|
||
</div>
|
||
</div>
|
||
<div className='box3-item-data'>
|
||
<div className='box3-item-data-top'>94.50%</div>
|
||
<div className='box3-item-data-btm'>2023年</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className='box3-item'>
|
||
<div className='box3-item-title'>
|
||
供水保证率
|
||
</div>
|
||
<div className='box3-content-bottom'>
|
||
<div className='box3-item-img'>
|
||
<img src={`${process.env.PUBLIC_URL}/assets/box3_3.png`} alt=""/>
|
||
</div>
|
||
<div className='box3-item-data'>
|
||
<div className='box3-item-data-top'>89.34%</div>
|
||
<div className='box3-item-data-btm'>2015年</div>
|
||
</div>
|
||
<div className='box3-item-arrow'>
|
||
<div className='box3-item-arrow-top'>10.56%</div>
|
||
<div className='box3-item-arrow-btm'>
|
||
<img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
|
||
</div>
|
||
</div>
|
||
<div className='box3-item-data'>
|
||
<div className='box3-item-data-top'>99.90%</div>
|
||
<div className='box3-item-data-btm'>2023年</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className='box3-item'>
|
||
<div className='box3-item-title'>
|
||
水质达标率
|
||
</div>
|
||
<div className='box3-content-bottom'>
|
||
<div className='box3-item-img'>
|
||
<img src={`${process.env.PUBLIC_URL}/assets/box3_4.png`} alt=""/>
|
||
</div>
|
||
<div className='box3-item-data'>
|
||
<div className='box3-item-data-top'>90.25%</div>
|
||
<div className='box3-item-data-btm'>2015年</div>
|
||
</div>
|
||
<div className='box3-item-arrow'>
|
||
<div className='box3-item-arrow-top'>9.65%</div>
|
||
<div className='box3-item-arrow-btm'>
|
||
<img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
|
||
</div>
|
||
</div>
|
||
<div className='box3-item-data'>
|
||
<div className='box3-item-data-top'>99.90%</div>
|
||
<div className='box3-item-data-btm'>2023年</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div className='right-box'>
|
||
<div className='box'>
|
||
<div className='box-title'>
|
||
<div className='title-item'>洪水简报</div>
|
||
</div>
|
||
<div className='box4'>
|
||
<img className='box4-bian' src={`${process.env.PUBLIC_URL}/assets/bian.png`} alt=""/>
|
||
<div className='box4-content'>
|
||
<div className='box4-content-item'>12月供水总量<span>85</span>万立方米，环比增长<span>4.5</span>%，其中水量供应排名前三是活龙乡、清坪镇、坪坝营镇</div>
|
||
<div className='box4-content-item'>全县12月累计运维工单<span>270</span>件，管网巡检<span>178</span>次，水厂维修<span>30</span>次、用户维修服务<span>70</span>次，工单完成率<span>85</span>%;</div>
|
||
<div className='box4-content-item'>全县12月累计受理<span>13</span>个群众投诉件，已办结<span>11</span>个，其中完成整改<span>9</span>个，持续整改<span>0</span>个，办结率<span>95</span>%</div>
|
||
</div>
|
||
<img className='box4-bian' src={`${process.env.PUBLIC_URL}/assets/bian.png`} alt=""/>
|
||
</div>
|
||
</div>
|
||
<div className='box'>
|
||
<div className='box-title'>
|
||
<div className='title-item'>在建工程</div>
|
||
</div>
|
||
<div className='box5'>
|
||
<div className='box5-title'>
|
||
<div className='box5-title-item width-10'>序号</div>
|
||
<div className='box5-title-item width-30'>工程名称</div>
|
||
<div className='box5-title-item width-20'>投资金额</div>
|
||
<div className='box5-title-item width-20'>项目类别</div>
|
||
<div className='box5-title-item width-20'>工程进度</div>
|
||
</div>
|
||
<div className='box5-list'>
|
||
<div className='box5-li width-10'>
|
||
<div className='box5-li-num '>1</div>
|
||
</div>
|
||
<div className='box5-li width-30'>水质提升EPC工程</div>
|
||
<div className='box5-li width-20'>3900万</div>
|
||
<div className='box5-li width-20'>水质提升</div>
|
||
<div className='box5-li width-20 color-green'>80%</div>
|
||
</div>
|
||
<div className='box5-list'>
|
||
<div className='box5-li width-10'>
|
||
<div className='box5-li-num '>2</div>
|
||
</div>
|
||
<div className='box5-li width-30'>黑山水库供水灌溉工程项目</div>
|
||
<div className='box5-li width-20'>3332万</div>
|
||
<div className='box5-li width-20'>水源建设</div>
|
||
<div className='box5-li width-20 color-green'>90%</div>
|
||
</div>
|
||
<div className='box5-list'>
|
||
<div className='box5-li width-10'>
|
||
<div className='box5-li-num '>3</div>
|
||
</div>
|
||
<div className='box5-li width-30'>水质提升EPC工程</div>
|
||
<div className='box5-li width-20'>3900万</div>
|
||
<div className='box5-li width-20'>水质提升</div>
|
||
<div className='box5-li width-20 color-green'>80%</div>
|
||
</div>
|
||
<div className='box5-list'>
|
||
<div className='box5-li width-10'>
|
||
<div className='box5-li-num '>4</div>
|
||
</div>
|
||
<div className='box5-li width-30'>黑山水库供水灌溉工程项目</div>
|
||
<div className='box5-li width-20'>3332万</div>
|
||
<div className='box5-li width-20'>水源建设</div>
|
||
<div className='box5-li width-20 color-green'>90%</div>
|
||
</div>
|
||
<div className='box5-list'>
|
||
<div className='box5-li width-10'>
|
||
<div className='box5-li-num '>5</div>
|
||
</div>
|
||
<div className='box5-li width-30'>水质提升EPC工程</div>
|
||
<div className='box5-li width-20'>3900万</div>
|
||
<div className='box5-li width-20'>水质提升</div>
|
||
<div className='box5-li width-20 color-green'>80%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className='box'>
|
||
<div className='box-title'>
|
||
<div className='title-item'>智慧化成效</div>
|
||
</div>
|
||
<div className='box3'>
|
||
<div className='box3-content'>
|
||
<div className='box3-item'>
|
||
<div className='box3-item-title'>
|
||
运营成本率
|
||
</div>
|
||
<div className='box3-content-bottom'>
|
||
<div className='box3-item-img'>
|
||
<img src={`${process.env.PUBLIC_URL}/assets/box6_1.png`} alt=""/>
|
||
</div>
|
||
<div className='box3-item-data'>
|
||
<div className='box3-item-data-top'>75.24%</div>
|
||
<div className='box3-item-data-btm'>2015年</div>
|
||
</div>
|
||
<div className='box3-item-arrow'>
|
||
<div className='box3-item-arrow-top'>16.26%</div>
|
||
<div className='box3-item-arrow-btm'>
|
||
<img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
|
||
</div>
|
||
</div>
|
||
<div className='box3-item-data'>
|
||
<div className='box3-item-data-top'>91.50%</div>
|
||
<div className='box3-item-data-btm'>2023年</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className='box3-item'>
|
||
<div className='box3-item-title'>
|
||
供水漏损率
|
||
</div>
|
||
<div className='box3-content-bottom'>
|
||
<div className='box3-item-img'>
|
||
<img src={`${process.env.PUBLIC_URL}/assets/box6_2.png`} alt=""/>
|
||
</div>
|
||
<div className='box3-item-data'>
|
||
<div className='box3-item-data-top'>35.64%</div>
|
||
<div className='box3-item-data-btm'>2015年</div>
|
||
</div>
|
||
<div className='box3-item-arrow'>
|
||
<div className='box3-item-arrow-top'>12.14%</div>
|
||
<div className='box3-item-arrow-btm'>
|
||
<img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
|
||
</div>
|
||
</div>
|
||
<div className='box3-item-data'>
|
||
<div className='box3-item-data-top'>23.50%</div>
|
||
<div className='box3-item-data-btm'>2023年</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className='box3-item'>
|
||
<div className='box3-item-title'>
|
||
巡检养护率
|
||
</div>
|
||
<div className='box3-content-bottom'>
|
||
<div className='box3-item-img'>
|
||
<img src={`${process.env.PUBLIC_URL}/assets/box6_3.png`} alt=""/>
|
||
</div>
|
||
<div className='box3-item-data'>
|
||
<div className='box3-item-data-top'>79.34%</div>
|
||
<div className='box3-item-data-btm'>2015年</div>
|
||
</div>
|
||
<div className='box3-item-arrow'>
|
||
<div className='box3-item-arrow-top'>20.56%</div>
|
||
<div className='box3-item-arrow-btm'>
|
||
<img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
|
||
</div>
|
||
</div>
|
||
<div className='box3-item-data'>
|
||
<div className='box3-item-data-top'>99.90%</div>
|
||
<div className='box3-item-data-btm'>2023年</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className='box3-item'>
|
||
<div className='box3-item-title'>
|
||
便民服务率
|
||
</div>
|
||
<div className='box3-content-bottom'>
|
||
<div className='box3-item-img'>
|
||
<img src={`${process.env.PUBLIC_URL}/assets/box6_4.png`} alt=""/>
|
||
</div>
|
||
<div className='box3-item-data'>
|
||
<div className='box3-item-data-top'>65.25%</div>
|
||
<div className='box3-item-data-btm'>2015年</div>
|
||
</div>
|
||
<div className='box3-item-arrow'>
|
||
<div className='box3-item-arrow-top'>33.25%</div>
|
||
<div className='box3-item-arrow-btm'>
|
||
<img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
|
||
</div>
|
||
</div>
|
||
<div className='box3-item-data'>
|
||
<div className='box3-item-data-top'>98.50%</div>
|
||
<div className='box3-item-data-btm'>2023年</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div className='map'>
|
||
<img style={{width:"100%",transform:"scale(2.6)",marginTop:"60px"}} src={`${process.env.PUBLIC_URL}/assets/zhsy-map.png`} alt=""/>
|
||
</div>
|
||
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default SyglPage |