wy
/
xf-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

11111

main
hhr 2023-12-20 21:31:18 +08:00
parent 2e62008066
commit cb1075baf1
17 changed files with 625 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/box3_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
public/assets/box3_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
public/assets/box3_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/assets/box3_4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/assets/box3_arrow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 933 B

BIN
public/assets/box3_time.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
public/assets/box3_title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 445 B

BIN
public/assets/box5_num.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 504 B

BIN
public/assets/box5_title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
public/assets/box6_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/assets/box6_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
public/assets/box6_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
public/assets/box6_4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/assets/box_bg3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
public/assets/img2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 103 KiB

204
src/views/Zhsy/index.less
View File

@ -1,37 +1,223 @@
.content{
position:relative;
.content {
position: relative;
}
.left-box{
.left-box {
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
.right-box{
.right-box {
position: absolute;
top: 0;
right: 0;
z-index: 100;
}
.box{
.box {
width: 30vw;
height: 28vh;
min-height: 200px;
margin-bottom: 10px;
}
.box-title{
.box-title {
display: flex;
align-items: center;
padding: 5px 30px;
height: 10%;
padding: 0 30px;
background: url("../../../public/assets/title.png") 0 0 no-repeat;
background-size: contain;
background-size: 100% 100%;
}
.title-item{
.title-item {
margin-right: 20px;
}
.box1,.box4{
height: 90%;
padding: 10px;
background: url("../../../public/assets/box_bg3.png") 0 0 no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
}
.box1-bian,.box4-bian {
height: 100%;
}
.box1-content,.box4-content {
margin: 0 10px;
}
.box1-content-top {
display: flex;
align-items: center;
}
.box1-content-top-img {
}
.box1-content-top-img img {
width: 100px;
height: 100px;
}
.box1-content-top-text {
text-indent: 2em;
font-size: 0.8em;
margin-left: 10px;
}
.box1-content-bottom {
margin-top: 10px;
text-indent: 2em;
font-size: 0.8em;
}
.box1-content-top-text span, .box1-content-bottom span {
color: yellow;
}
.box2 {
height: 90%;
background: url("../../../public/assets/box_bg3.png") 0 0 no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
}
.box3 {
height: 90%;
width: 100%;
padding: 10px;
background: url("../../../public/assets/box_bg3.png") 0 0 no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
}
.box3-content {
margin-top: 4px;
width: 100%;
display: flex;
flex-wrap: wrap;
}
.box3-item {
margin-top: 4px;
width: 50%;
font-size: 12px;
}
.box3-item-title {
background: url("../../../public/assets/box3_title.png") 0 bottom no-repeat;
background-size: 50% 60%;
}
.box3-content-bottom {
margin-top: 10px;
display: flex;
align-items: center;
}
.box3-item-img img {
width: 50px;
margin-right: 10px;
}
.box3-item-data-top {
color: #1FE6A4;
font-size: 14px;
}
.box3-item-data-btm {
padding: 1px 4px;
margin-top: 10px;
background: url("../../../public/assets/box3_time.png") 0 0 no-repeat;
background-size: 100% 100%;
}
.box3-item-arrow {
text-align: center;
margin: 0 10px;
}
.box3-item-arrow-btm img {
width: 15px;
}
.box4-content-item{
text-indent: 2em;
margin: 20px 0;
}
.box4-content-item span{
color: yellow;
}
.box5{
height: 90%;
padding: 10px;
}
.box5-title{
display: flex;
background: url("../../../public/assets/box5_title.png") 0 0 no-repeat;
background-size: 100% 100%;
padding: 6px 10px;
}
.box5-title-item{
text-align: center;
}
.box5-list{
display: flex;
padding: 6px 10px;
}
.box5-li{
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.box5-li-num{
width: 12px;
height: 12px;
line-height: 12px;
text-align: center;
background: url("../../../public/assets/box5_num.png") 0 0 no-repeat;
background-size: 100% 100%;
}
.width-10{
width: 10%;
}
.width-20{
width: 20%;
}
.width-30{
width: 30%;
}
.box5 .box5-list:nth-child(even){
background: rgba(0,88,188,0.2);
}
.box5 .box5-list:nth-child(odd){
background: rgba(0,88,188,0.6);
}

431
src/views/Zhsy/index.tsx
View File

@ -1,9 +1,157 @@
import {Modal, Tabs, Switch} from 'antd'
import React, {useMemo, useState} from 'react';
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 = {
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: [
"2018",
"2019",
"2020",
"2021",
"2022",
],
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: 600,
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: [360, 340, 300, 360, 500],
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,
},
{//一蓝盖
data: [360, 340, 300, 360, 500],
type: "pictorialBar",
barMaxWidth: "20",
symbol: "diamond",
symbolPosition: "end",
color: "#77C9FF",
symbolOffset: ['0', "-45%"],
symbolSize: [30, 10],
zlevel: 2,
},
],
markArea: {
silent: true,
}
};
setEchartsOption(option);
};
useEffect(() => {
getOption();
}, []);
return (
<div className='content'>
<div className='left-box'>
@ -13,16 +161,140 @@ const SyglPage: React.FC = () => {
<div className='title-item'>大事记</div>
<div className='title-item'>美丽水厂</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'>91.23%</div>
<div className='box3-item-data-btm'>2018年</div>
</div>
<div className='box3-item-arrow'>
<div className='box3-item-arrow-top'>5.2%</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.23%</div>
<div className='box3-item-data-btm'>2021年</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'>91.23%</div>
<div className='box3-item-data-btm'>2018年</div>
</div>
<div className='box3-item-arrow'>
<div className='box3-item-arrow-top'>5.2%</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.23%</div>
<div className='box3-item-data-btm'>2021年</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'>91.23%</div>
<div className='box3-item-data-btm'>2018年</div>
</div>
<div className='box3-item-arrow'>
<div className='box3-item-arrow-top'>5.2%</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.23%</div>
<div className='box3-item-data-btm'>2021年</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'>91.23%</div>
<div className='box3-item-data-btm'>2018年</div>
</div>
<div className='box3-item-arrow'>
<div className='box3-item-arrow-top'>5.2%</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.23%</div>
<div className='box3-item-data-btm'>2021年</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className='right-box'>
@ -30,16 +302,173 @@ const SyglPage: React.FC = () => {
<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'>全省3月供水指数<span>83.2</span>，环比增长<span>1.23</span>%，其中清坪镇、小乡村排名前三；XXX、XXX、XXX排名倒三；</div>
<div className='box4-content-item'>全省3月城乡供水水量<span>4.3</span>亿m³，环比增长-<span>0.09%</span>，水质自检率68.2%，自检合格率97.9%;</div>
<div className='box4-content-item'>全省3月累计受理<span>13</span>个群众投诉件，已办结<span>11</span>个，其中完成整改<span>9</span>个，持续整改<span>0</span>个，办结率<span>84.6%</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-20'>工程名称</div>
<div className='box5-title-item width-20'>投资金额</div>
<div className='box5-title-item width-30'>建设内容</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-20'>XXX工程</div>
<div className='box5-li width-20'>200万</div>
<div className='box5-li width-30'>建设内容文字占位</div>
<div className='box5-li width-20'>89%</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-20'>XXX工程</div>
<div className='box5-li width-20'>200万</div>
<div className='box5-li width-30'>建设内容文字占位</div>
<div className='box5-li width-20'>89%</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-20'>XXX工程</div>
<div className='box5-li width-20'>200万</div>
<div className='box5-li width-30'>建设内容文字占位</div>
<div className='box5-li width-20'>89%</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-20'>XXX工程</div>
<div className='box5-li width-20'>200万</div>
<div className='box5-li width-30'>建设内容文字占位</div>
<div className='box5-li width-20'>89%</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'>91.23%</div>
<div className='box3-item-data-btm'>2018年</div>
</div>
<div className='box3-item-arrow'>
<div className='box3-item-arrow-top'>5.2%</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.23%</div>
<div className='box3-item-data-btm'>2021年</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'>91.23%</div>
<div className='box3-item-data-btm'>2018年</div>
</div>
<div className='box3-item-arrow'>
<div className='box3-item-arrow-top'>5.2%</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.23%</div>
<div className='box3-item-data-btm'>2021年</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'>91.23%</div>
<div className='box3-item-data-btm'>2018年</div>
</div>
<div className='box3-item-arrow'>
<div className='box3-item-arrow-top'>5.2%</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.23%</div>
<div className='box3-item-data-btm'>2021年</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'>91.23%</div>
<div className='box3-item-data-btm'>2018年</div>
</div>
<div className='box3-item-arrow'>
<div className='box3-item-arrow-top'>5.2%</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.23%</div>
<div className='box3-item-data-btm'>2021年</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>