wy
/
xf-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
xf-web/src/views/Zhsy/index.tsx

501 lines
20 KiB
TypeScript
Raw Normal View History

咸丰县农村安全饮水智慧平台
2023-12-20 17:29:11 +08:00
import {Modal, Tabs, Switch} from 'antd'
11111
2023-12-20 21:31:18 +08:00
import React, {useEffect, useMemo, useState} from 'react';
咸丰县农村安全饮水智慧平台
2023-12-20 17:29:11 +08:00
import "./index.less"
11111
2023-12-20 21:31:18 +08:00
import ReactEcharts from "echarts-for-react";
咸丰县农村安全饮水智慧平台
2023-12-20 17:29:11 +08:00
const SyglPage: React.FC = () => {
11111
2023-12-20 21:31:18 +08:00
const [echartsOption, setEchartsOption] = useState({});
咸丰县农村安全饮水智慧平台
2023-12-20 17:29:11 +08:00
11111
2023-12-20 21:31:18 +08:00
// @ts-ignore
const getOption = () => {
const data0 = [1, 1, 1, 1, 1];
const option = {
111111
2023-12-20 23:36:02 +08:00
tooltip: {
// 在鼠标悬停时触发显示
trigger: 'axis',
},
11111
2023-12-20 21:31:18 +08:00
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: [
111111
2023-12-20 23:20:42 +08:00
"2015",
"2016",
"2017",
11111
2023-12-20 21:31:18 +08:00
"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: "(万元)",
111111
2023-12-20 23:20:42 +08:00
max: 12000,
11111
2023-12-20 21:31:18 +08:00
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",
111111
2023-12-20 23:20:42 +08:00
data: [1796, 717, 2500, 9445, 11345],
11111
2023-12-20 21:31:18 +08:00
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,
111111
2023-12-21 14:39:13 +08:00
tooltip: {
show: false // 不显示数据2的tooltip
}
11111
2023-12-20 21:31:18 +08:00
},
{//一蓝盖
111111
2023-12-20 23:20:42 +08:00
data: [1796, 717, 2500, 9445, 11345],
11111
2023-12-20 21:31:18 +08:00
type: "pictorialBar",
barMaxWidth: "20",
symbol: "diamond",
symbolPosition: "end",
color: "#77C9FF",
symbolOffset: ['0', "-45%"],
symbolSize: [30, 10],
zlevel: 2,
111111
2023-12-21 14:39:13 +08:00
tooltip: {
show: false // 不显示数据2的tooltip
}
11111
2023-12-20 21:31:18 +08:00
},
],
markArea: {
silent: true,
}
};
setEchartsOption(option);
};
useEffect(() => {
getOption();
}, []);
咸丰县农村安全饮水智慧平台
2023-12-20 17:29:11 +08:00
return (
11
2023-12-20 18:51:10 +08:00
<div className='content'>
<div className='left-box'>
<div className='box'>
<div className='box-title'>
11111
2023-12-20 22:20:45 +08:00
<div className='title-items items-active'>工程概况</div>
11111
2023-12-20 22:17:27 +08:00
<div className='title-items'>大事记</div>
<div className='title-items'>美丽水厂</div>
11
2023-12-20 18:51:10 +08:00
</div>
11111
2023-12-20 21:31:18 +08:00
<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>
11
2023-12-20 18:51:10 +08:00
</div>
<div className='box'>
<div className='box-title'>
<div className='title-item'>工程投资</div>
</div>
11111
2023-12-20 21:31:18 +08:00
<div className='box2'>
<ReactEcharts
option={echartsOption}
style={{width: "100%", height: 'calc( 100% - 10px )'}}
/>
</div>
11
2023-12-20 18:51:10 +08:00
</div>
<div className='box'>
<div className='box-title'>
<div className='title-item'>工程成效</div>
</div>
11111
2023-12-20 21:31:18 +08:00
<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'>
111111
2023-12-20 23:20:42 +08:00
<div className='box3-item-data-top'>85.24%</div>
<div className='box3-item-data-btm'>2015年</div>
11111
2023-12-20 21:31:18 +08:00
</div>
<div className='box3-item-arrow'>
111111
2023-12-20 23:20:42 +08:00
<div className='box3-item-arrow-top'>14.26%</div>
11111
2023-12-20 21:31:18 +08:00
<div className='box3-item-arrow-btm'>
<img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
</div>
</div>
<div className='box3-item-data'>
111111
2023-12-20 23:20:42 +08:00
<div className='box3-item-data-top'>99.50%</div>
<div className='box3-item-data-btm'>2023年</div>
11111
2023-12-20 21:31:18 +08:00
</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'>
111111
2023-12-20 23:20:42 +08:00
<div className='box3-item-data-top'>75.64%</div>
<div className='box3-item-data-btm'>2015年</div>
11111
2023-12-20 21:31:18 +08:00
</div>
<div className='box3-item-arrow'>
111111
2023-12-20 23:20:42 +08:00
<div className='box3-item-arrow-top'>18.86%</div>
11111
2023-12-20 21:31:18 +08:00
<div className='box3-item-arrow-btm'>
<img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
</div>
</div>
<div className='box3-item-data'>
111111
2023-12-20 23:20:42 +08:00
<div className='box3-item-data-top'>94.50%</div>
<div className='box3-item-data-btm'>2023年</div>
11111
2023-12-20 21:31:18 +08:00
</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'>
111111
2023-12-20 23:20:42 +08:00
<div className='box3-item-data-top'>89.34%</div>
<div className='box3-item-data-btm'>2015年</div>
11111
2023-12-20 21:31:18 +08:00
</div>
<div className='box3-item-arrow'>
111111
2023-12-20 23:20:42 +08:00
<div className='box3-item-arrow-top'>10.56%</div>
11111
2023-12-20 21:31:18 +08:00
<div className='box3-item-arrow-btm'>
<img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
</div>
</div>
<div className='box3-item-data'>
111111
2023-12-20 23:20:42 +08:00
<div className='box3-item-data-top'>99.90%</div>
<div className='box3-item-data-btm'>2023年</div>
11111
2023-12-20 21:31:18 +08:00
</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'>
111111
2023-12-20 23:20:42 +08:00
<div className='box3-item-data-top'>90.25%</div>
<div className='box3-item-data-btm'>2015年</div>
11111
2023-12-20 21:31:18 +08:00
</div>
<div className='box3-item-arrow'>
111111
2023-12-20 23:20:42 +08:00
<div className='box3-item-arrow-top'>9.65%</div>
11111
2023-12-20 21:31:18 +08:00
<div className='box3-item-arrow-btm'>
<img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
</div>
</div>
<div className='box3-item-data'>
111111
2023-12-20 23:20:42 +08:00
<div className='box3-item-data-top'>99.90%</div>
<div className='box3-item-data-btm'>2023年</div>
11111
2023-12-20 21:31:18 +08:00
</div>
</div>
</div>
</div>
</div>
11
2023-12-20 18:51:10 +08:00
</div>
</div>
<div className='right-box'>
<div className='box'>
<div className='box-title'>
<div className='title-item'>洪水简报</div>
</div>
11111
2023-12-20 21:31:18 +08:00
<div className='box4'>
<img className='box4-bian' src={`${process.env.PUBLIC_URL}/assets/bian.png`} alt=""/>
<div className='box4-content'>
111111
2023-12-20 23:20:42 +08:00
<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>
11111
2023-12-20 21:31:18 +08:00
</div>
<img className='box4-bian' src={`${process.env.PUBLIC_URL}/assets/bian.png`} alt=""/>
</div>
11
2023-12-20 18:51:10 +08:00
</div>
<div className='box'>
<div className='box-title'>
<div className='title-item'>在建工程</div>
</div>
11111
2023-12-20 21:31:18 +08:00
<div className='box5'>
<div className='box5-title'>
<div className='box5-title-item width-10'>序号</div>
111111
2023-12-20 23:20:42 +08:00
<div className='box5-title-item width-30'>工程名称</div>
11111
2023-12-20 21:31:18 +08:00
<div className='box5-title-item width-20'>投资金额</div>
111111
2023-12-20 23:20:42 +08:00
<div className='box5-title-item width-20'>项目类别</div>
11111
2023-12-20 21:31:18 +08:00
<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>
111111
2023-12-20 23:20:42 +08:00
<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>
11111
2023-12-20 21:31:18 +08:00
</div>
<div className='box5-list'>
<div className='box5-li width-10'>
<div className='box5-li-num '>2</div>
</div>
111111
2023-12-20 23:20:42 +08:00
<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>
11111
2023-12-20 21:31:18 +08:00
</div>
<div className='box5-list'>
<div className='box5-li width-10'>
<div className='box5-li-num '>3</div>
</div>
111111
2023-12-20 23:20:42 +08:00
<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>
11111
2023-12-20 21:31:18 +08:00
</div>
<div className='box5-list'>
<div className='box5-li width-10'>
<div className='box5-li-num '>4</div>
</div>
111111
2023-12-20 23:20:42 +08:00
<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>
11111
2023-12-20 22:02:55 +08:00
</div>
<div className='box5-list'>
<div className='box5-li width-10'>
<div className='box5-li-num '>5</div>
</div>
111111
2023-12-20 23:20:42 +08:00
<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>
11111
2023-12-20 21:31:18 +08:00
</div>
</div>
11
2023-12-20 18:51:10 +08:00
</div>
<div className='box'>
<div className='box-title'>
<div className='title-item'>智慧化成效</div>
</div>
11111
2023-12-20 21:31:18 +08:00
<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'>
111111
2023-12-20 23:20:42 +08:00
<div className='box3-item-data-top'>75.24%</div>
<div className='box3-item-data-btm'>2015年</div>
11111
2023-12-20 21:31:18 +08:00
</div>
<div className='box3-item-arrow'>
111111
2023-12-20 23:20:42 +08:00
<div className='box3-item-arrow-top'>16.26%</div>
11111
2023-12-20 21:31:18 +08:00
<div className='box3-item-arrow-btm'>
<img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
</div>
</div>
<div className='box3-item-data'>
111111
2023-12-20 23:20:42 +08:00
<div className='box3-item-data-top'>91.50%</div>
<div className='box3-item-data-btm'>2023年</div>
11111
2023-12-20 21:31:18 +08:00
</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'>
111111
2023-12-20 23:20:42 +08:00
<div className='box3-item-data-top'>35.64%</div>
<div className='box3-item-data-btm'>2015年</div>
11111
2023-12-20 21:31:18 +08:00
</div>
<div className='box3-item-arrow'>
111111
2023-12-20 23:20:42 +08:00
<div className='box3-item-arrow-top'>12.14%</div>
11111
2023-12-20 21:31:18 +08:00
<div className='box3-item-arrow-btm'>
<img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
</div>
</div>
<div className='box3-item-data'>
111111
2023-12-20 23:20:42 +08:00
<div className='box3-item-data-top'>23.50%</div>
<div className='box3-item-data-btm'>2023年</div>
11111
2023-12-20 21:31:18 +08:00
</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'>
111111
2023-12-20 23:20:42 +08:00
<div className='box3-item-data-top'>79.34%</div>
<div className='box3-item-data-btm'>2015年</div>
11111
2023-12-20 21:31:18 +08:00
</div>
<div className='box3-item-arrow'>
111111
2023-12-20 23:20:42 +08:00
<div className='box3-item-arrow-top'>20.56%</div>
11111
2023-12-20 21:31:18 +08:00
<div className='box3-item-arrow-btm'>
<img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
</div>
</div>
<div className='box3-item-data'>
111111
2023-12-20 23:20:42 +08:00
<div className='box3-item-data-top'>99.90%</div>
<div className='box3-item-data-btm'>2023年</div>
11111
2023-12-20 21:31:18 +08:00
</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'>
111111
2023-12-20 23:20:42 +08:00
<div className='box3-item-data-top'>65.25%</div>
<div className='box3-item-data-btm'>2015年</div>
11111
2023-12-20 21:31:18 +08:00
</div>
<div className='box3-item-arrow'>
111111
2023-12-20 23:20:42 +08:00
<div className='box3-item-arrow-top'>33.25%</div>
11111
2023-12-20 21:31:18 +08:00
<div className='box3-item-arrow-btm'>
<img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
</div>
</div>
<div className='box3-item-data'>
111111
2023-12-20 23:20:42 +08:00
<div className='box3-item-data-top'>98.50%</div>
<div className='box3-item-data-btm'>2023年</div>
11111
2023-12-20 21:31:18 +08:00
</div>
</div>
</div>
</div>
</div>
11
2023-12-20 18:51:10 +08:00
</div>
</div>
11111
2023-12-20 22:02:55 +08:00
111111
2023-12-20 23:20:42 +08:00
<div className='map'>
页面调整
2023-12-21 16:31:50 +08:00
<img style={{width:"100%",transform:"scale(2.6)",marginTop:"60px"}} src={`${process.env.PUBLIC_URL}/assets/zhsy-map.png`} alt=""/>
111111
2023-12-20 23:20:42 +08:00
</div>
11111
2023-12-20 22:17:27 +08:00
咸丰县农村安全饮水智慧平台
2023-12-20 17:29:11 +08:00
</div>
)
}
export default SyglPage