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

111111

main
hhr 2023-12-20 23:20:42 +08:00
parent 025282716f
commit 2a16ed54ec
4 changed files with 115 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/map.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 819 KiB

After

Width:  |  Height:  |  Size: 1.2 MiB

2
src/components/DashboardLayout/index.tsx
View File

@ -62,7 +62,7 @@ const DashboardLayout: React.FC = () => {
/*useEffect(() => { /*useEffect(() => {
if (leafMenu) { if (leafMenu) {
document.title = '小玉潭水库 · ' + leafMenu.title document.title = leafMenu.title
} }
}, [leafMenu]);*/ }, [leafMenu]);*/

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

@ -40,20 +40,16 @@
.title-items { .title-items {
margin-right: 20px; margin-right: 20px;
color:#999; color: #999;
} }
.items-active{ .items-active {
color:#fff; color: #fff;
border-bottom: 2px solid yellow; border-bottom: 2px solid yellow;
} }
.box1, .box4 {
.box1,.box4{
height: 85%; height: 85%;
padding: 10px; padding: 10px;
background: url("../../../public/assets/box_bg3.png") 0 0 no-repeat; background: url("../../../public/assets/box_bg3.png") 0 0 no-repeat;
@ -62,11 +58,11 @@
align-items: center; align-items: center;
} }
.box1-bian,.box4-bian { .box1-bian, .box4-bian {
height: 100%; height: 100%;
} }
.box1-content,.box4-content { .box1-content, .box4-content {
margin: 0 10px; margin: 0 10px;
} }
@ -170,52 +166,55 @@
width: 15px; width: 15px;
} }
.box4-content-item{ .box4-content-item {
text-indent: 2em; text-indent: 2em;
margin: 20px 0; margin: 20px 0;
} }
.box4-content-item span{ .box4-content-item span {
color: yellow; color: yellow;
} }
.box5{ .box5 {
height: 90%; height: 90%;
padding: 10px; padding: 10px;
overflow: auto; overflow: auto;
} }
.box5-title{ .box5-title {
display: flex; display: flex;
background: url("../../../public/assets/box5_title.png") 0 0 no-repeat; background: url("../../../public/assets/box5_title.png") 0 0 no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
padding: 6px 10px; padding: 6px 10px;
} }
.box5-title-item{ .box5-title-item {
text-align: center; text-align: center;
} }
.color-green{ .color-green {
color:#00FFAA; color: #00FFAA;
} }
.box5-list {
.box5-list{
display: flex; display: flex;
padding: 6px 10px; padding: 6px 10px;
} }
.box5-li{ .box5-li {
text-align: center; text-align: center;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 30%;
} }
.box5-li-num{ .box5-li-num {
width: 12px; width: 12px;
height: 12px; height: 12px;
line-height: 12px; line-height: 12px;
@ -224,22 +223,34 @@
background-size: 100% 100%; background-size: 100% 100%;
} }
.width-10{ .width-10 {
width: 10%; width: 10%;
} }
.width-20{ .width-20 {
width: 20%; width: 20%;
} }
.width-30{ .width-30 {
width: 30%; width: 30%;
} }
.box5 .box5-list:nth-child(even){ .box5 .box5-list:nth-child(even) {
background: rgba(0,88,188,0.2); background: rgba(0, 88, 188, 0.2);
} }
.box5 .box5-list:nth-child(odd){ .box5 .box5-list:nth-child(odd) {
background: rgba(0,88,188,0.6); background: rgba(0, 88, 188, 0.6);
} }
.map{
position: absolute;
top: 10vh;
left: 27vw;
width: 40vw;
height: 30vw;
img{
width: 100%;
}
}

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

@ -34,11 +34,11 @@ const SyglPage: React.FC = () => {
xAxis: { xAxis: {
type: "category", type: "category",
data: [ data: [
"2015",
"2016",
"2017",
"2018", "2018",
"2019", "2019",
"2020",
"2021",
"2022",
], ],
axisLine: { axisLine: {
show: true, show: true,
@ -62,7 +62,7 @@ const SyglPage: React.FC = () => {
}, },
yAxis: { yAxis: {
name: "(万元)", name: "(万元)",
max: 600, max: 12000,
min: 0, min: 0,
nameTextStyle: { nameTextStyle: {
color: '#fff', color: '#fff',
@ -93,7 +93,7 @@ const SyglPage: React.FC = () => {
series: [ series: [
{ {
type: "bar", type: "bar",
data: [360, 340, 300, 360, 500], data: [1796, 717, 2500, 9445, 11345],
barMaxWidth: "auto", barMaxWidth: "auto",
barWidth: 30, barWidth: 30,
itemStyle: { itemStyle: {
@ -128,7 +128,7 @@ const SyglPage: React.FC = () => {
zlevel: 2, zlevel: 2,
}, },
{//一蓝盖 {//一蓝盖
data: [360, 340, 300, 360, 500], data: [1796, 717, 2500, 9445, 11345],
type: "pictorialBar", type: "pictorialBar",
barMaxWidth: "20", barMaxWidth: "20",
symbol: "diamond", symbol: "diamond",
@ -205,18 +205,18 @@ const SyglPage: React.FC = () => {
<img src={`${process.env.PUBLIC_URL}/assets/box3_1.png`} alt=""/> <img src={`${process.env.PUBLIC_URL}/assets/box3_1.png`} alt=""/>
</div> </div>
<div className='box3-item-data'> <div className='box3-item-data'>
<div className='box3-item-data-top'>91.23%</div> <div className='box3-item-data-top'>85.24%</div>
<div className='box3-item-data-btm'>2018年</div> <div className='box3-item-data-btm'>2015年</div>
</div> </div>
<div className='box3-item-arrow'> <div className='box3-item-arrow'>
<div className='box3-item-arrow-top'>5.2%</div> <div className='box3-item-arrow-top'>14.26%</div>
<div className='box3-item-arrow-btm'> <div className='box3-item-arrow-btm'>
<img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/> <img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
</div> </div>
</div> </div>
<div className='box3-item-data'> <div className='box3-item-data'>
<div className='box3-item-data-top'>91.23%</div> <div className='box3-item-data-top'>99.50%</div>
<div className='box3-item-data-btm'>2021年</div> <div className='box3-item-data-btm'>2023年</div>
</div> </div>
</div> </div>
</div> </div>
@ -229,18 +229,18 @@ const SyglPage: React.FC = () => {
<img src={`${process.env.PUBLIC_URL}/assets/box3_2.png`} alt=""/> <img src={`${process.env.PUBLIC_URL}/assets/box3_2.png`} alt=""/>
</div> </div>
<div className='box3-item-data'> <div className='box3-item-data'>
<div className='box3-item-data-top'>91.23%</div> <div className='box3-item-data-top'>75.64%</div>
<div className='box3-item-data-btm'>2018年</div> <div className='box3-item-data-btm'>2015年</div>
</div> </div>
<div className='box3-item-arrow'> <div className='box3-item-arrow'>
<div className='box3-item-arrow-top'>5.2%</div> <div className='box3-item-arrow-top'>18.86%</div>
<div className='box3-item-arrow-btm'> <div className='box3-item-arrow-btm'>
<img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/> <img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
</div> </div>
</div> </div>
<div className='box3-item-data'> <div className='box3-item-data'>
<div className='box3-item-data-top'>91.23%</div> <div className='box3-item-data-top'>94.50%</div>
<div className='box3-item-data-btm'>2021年</div> <div className='box3-item-data-btm'>2023年</div>
</div> </div>
</div> </div>
</div> </div>
@ -253,18 +253,18 @@ const SyglPage: React.FC = () => {
<img src={`${process.env.PUBLIC_URL}/assets/box3_3.png`} alt=""/> <img src={`${process.env.PUBLIC_URL}/assets/box3_3.png`} alt=""/>
</div> </div>
<div className='box3-item-data'> <div className='box3-item-data'>
<div className='box3-item-data-top'>91.23%</div> <div className='box3-item-data-top'>89.34%</div>
<div className='box3-item-data-btm'>2018年</div> <div className='box3-item-data-btm'>2015年</div>
</div> </div>
<div className='box3-item-arrow'> <div className='box3-item-arrow'>
<div className='box3-item-arrow-top'>5.2%</div> <div className='box3-item-arrow-top'>10.56%</div>
<div className='box3-item-arrow-btm'> <div className='box3-item-arrow-btm'>
<img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/> <img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
</div> </div>
</div> </div>
<div className='box3-item-data'> <div className='box3-item-data'>
<div className='box3-item-data-top'>91.23%</div> <div className='box3-item-data-top'>99.90%</div>
<div className='box3-item-data-btm'>2021年</div> <div className='box3-item-data-btm'>2023年</div>
</div> </div>
</div> </div>
</div> </div>
@ -277,18 +277,18 @@ const SyglPage: React.FC = () => {
<img src={`${process.env.PUBLIC_URL}/assets/box3_4.png`} alt=""/> <img src={`${process.env.PUBLIC_URL}/assets/box3_4.png`} alt=""/>
</div> </div>
<div className='box3-item-data'> <div className='box3-item-data'>
<div className='box3-item-data-top'>91.23%</div> <div className='box3-item-data-top'>90.25%</div>
<div className='box3-item-data-btm'>2018年</div> <div className='box3-item-data-btm'>2015年</div>
</div> </div>
<div className='box3-item-arrow'> <div className='box3-item-arrow'>
<div className='box3-item-arrow-top'>5.2%</div> <div className='box3-item-arrow-top'>9.65%</div>
<div className='box3-item-arrow-btm'> <div className='box3-item-arrow-btm'>
<img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/> <img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
</div> </div>
</div> </div>
<div className='box3-item-data'> <div className='box3-item-data'>
<div className='box3-item-data-top'>91.23%</div> <div className='box3-item-data-top'>99.90%</div>
<div className='box3-item-data-btm'>2021年</div> <div className='box3-item-data-btm'>2023年</div>
</div> </div>
</div> </div>
</div> </div>
@ -305,9 +305,9 @@ const SyglPage: React.FC = () => {
<div className='box4'> <div className='box4'>
<img className='box4-bian' src={`${process.env.PUBLIC_URL}/assets/bian.png`} alt=""/> <img className='box4-bian' src={`${process.env.PUBLIC_URL}/assets/bian.png`} alt=""/>
<div className='box4-content'> <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'>12月供水总量<span>85</span>万立方米，环比增长<span>4.5</span>%，其中水量供应排名前三是活龙乡、清坪镇、坪坝营镇</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'>全县12月累计运维工单<span>270</span>件，管网巡检<span>178</span>次，水厂维修<span>30</span>次、用户维修服务<span>70</span>次，工单完成率<span>85</span>%;</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 className='box4-content-item'>全县12月累计受理<span>13</span>个群众投诉件，已办结<span>11</span>个，其中完成整改<span>9</span>个，持续整改<span>0</span>个，办结率<span>95</span>%</div>
</div> </div>
<img className='box4-bian' src={`${process.env.PUBLIC_URL}/assets/bian.png`} alt=""/> <img className='box4-bian' src={`${process.env.PUBLIC_URL}/assets/bian.png`} alt=""/>
</div> </div>
@ -319,57 +319,56 @@ const SyglPage: React.FC = () => {
<div className='box5'> <div className='box5'>
<div className='box5-title'> <div className='box5-title'>
<div className='box5-title-item width-10'>序号</div> <div className='box5-title-item width-10'>序号</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 className='box5-title-item width-20'>投资金额</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>
<div className='box5-list'> <div className='box5-list'>
<div className='box5-li width-10'> <div className='box5-li width-10'>
<div className='box5-li-num '>1</div> <div className='box5-li-num '>1</div>
</div> </div>
<div className='box5-li width-20'>XXX工程</div> <div className='box5-li width-30'>水质提升EPC工程</div>
<div className='box5-li width-20'>200万</div> <div className='box5-li width-20'>3900万</div>
<div className='box5-li width-30'>建设内容文字占位</div> <div className='box5-li width-20'>水质提升</div>
<div className='box5-li width-20 color-green'>89%</div> <div className='box5-li width-20 color-green'>80%</div>
</div> </div>
<div className='box5-list'> <div className='box5-list'>
<div className='box5-li width-10'> <div className='box5-li width-10'>
<div className='box5-li-num '>2</div> <div className='box5-li-num '>2</div>
</div> </div>
<div className='box5-li width-20'>XXX工程</div> <div className='box5-li width-30'>黑山水库供水灌溉工程项目</div>
<div className='box5-li width-20'>200万</div> <div className='box5-li width-20'>3332万</div>
<div className='box5-li width-30'>建设内容文字占位</div> <div className='box5-li width-20'>水源建设</div>
<div className='box5-li width-20 color-green'>89%</div> <div className='box5-li width-20 color-green'>90%</div>
</div> </div>
<div className='box5-list'> <div className='box5-list'>
<div className='box5-li width-10'> <div className='box5-li width-10'>
<div className='box5-li-num '>3</div> <div className='box5-li-num '>3</div>
</div> </div>
<div className='box5-li width-20'>XXX工程</div> <div className='box5-li width-30'>水质提升EPC工程</div>
<div className='box5-li width-20'>200万</div> <div className='box5-li width-20'>3900万</div>
<div className='box5-li width-30'>建设内容文字占位</div> <div className='box5-li width-20'>水质提升</div>
<div className='box5-li width-20 color-green'>89%</div> <div className='box5-li width-20 color-green'>80%</div>
</div> </div>
<div className='box5-list'> <div className='box5-list'>
<div className='box5-li width-10'> <div className='box5-li width-10'>
<div className='box5-li-num '>4</div> <div className='box5-li-num '>4</div>
</div> </div>
<div className='box5-li width-20'>XXX工程</div> <div className='box5-li width-30'>黑山水库供水灌溉工程项目</div>
<div className='box5-li width-20'>200万</div> <div className='box5-li width-20'>3332万</div>
<div className='box5-li width-30'>建设内容文字占位</div> <div className='box5-li width-20'>水源建设</div>
<div className='box5-li width-20 color-green'>89%</div> <div className='box5-li width-20 color-green'>90%</div>
</div> </div>
<div className='box5-list'> <div className='box5-list'>
<div className='box5-li width-10'> <div className='box5-li width-10'>
<div className='box5-li-num '>5</div> <div className='box5-li-num '>5</div>
</div> </div>
<div className='box5-li width-20'>XXX工程</div> <div className='box5-li width-30'>水质提升EPC工程</div>
<div className='box5-li width-20'>200万</div> <div className='box5-li width-20'>3900万</div>
<div className='box5-li width-30'>建设内容文字占位</div> <div className='box5-li width-20'>水质提升</div>
<div className='box5-li width-20 color-green'>89%</div> <div className='box5-li width-20 color-green'>80%</div>
</div> </div>
</div> </div>
</div> </div>
<div className='box'> <div className='box'>
@ -387,18 +386,18 @@ const SyglPage: React.FC = () => {
<img src={`${process.env.PUBLIC_URL}/assets/box6_1.png`} alt=""/> <img src={`${process.env.PUBLIC_URL}/assets/box6_1.png`} alt=""/>
</div> </div>
<div className='box3-item-data'> <div className='box3-item-data'>
<div className='box3-item-data-top'>91.23%</div> <div className='box3-item-data-top'>75.24%</div>
<div className='box3-item-data-btm'>2018年</div> <div className='box3-item-data-btm'>2015年</div>
</div> </div>
<div className='box3-item-arrow'> <div className='box3-item-arrow'>
<div className='box3-item-arrow-top'>5.2%</div> <div className='box3-item-arrow-top'>16.26%</div>
<div className='box3-item-arrow-btm'> <div className='box3-item-arrow-btm'>
<img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/> <img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
</div> </div>
</div> </div>
<div className='box3-item-data'> <div className='box3-item-data'>
<div className='box3-item-data-top'>91.23%</div> <div className='box3-item-data-top'>91.50%</div>
<div className='box3-item-data-btm'>2021年</div> <div className='box3-item-data-btm'>2023年</div>
</div> </div>
</div> </div>
</div> </div>
@ -411,18 +410,18 @@ const SyglPage: React.FC = () => {
<img src={`${process.env.PUBLIC_URL}/assets/box6_2.png`} alt=""/> <img src={`${process.env.PUBLIC_URL}/assets/box6_2.png`} alt=""/>
</div> </div>
<div className='box3-item-data'> <div className='box3-item-data'>
<div className='box3-item-data-top'>91.23%</div> <div className='box3-item-data-top'>35.64%</div>
<div className='box3-item-data-btm'>2018年</div> <div className='box3-item-data-btm'>2015年</div>
</div> </div>
<div className='box3-item-arrow'> <div className='box3-item-arrow'>
<div className='box3-item-arrow-top'>5.2%</div> <div className='box3-item-arrow-top'>12.14%</div>
<div className='box3-item-arrow-btm'> <div className='box3-item-arrow-btm'>
<img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/> <img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
</div> </div>
</div> </div>
<div className='box3-item-data'> <div className='box3-item-data'>
<div className='box3-item-data-top'>91.23%</div> <div className='box3-item-data-top'>23.50%</div>
<div className='box3-item-data-btm'>2021年</div> <div className='box3-item-data-btm'>2023年</div>
</div> </div>
</div> </div>
</div> </div>
@ -435,18 +434,18 @@ const SyglPage: React.FC = () => {
<img src={`${process.env.PUBLIC_URL}/assets/box6_3.png`} alt=""/> <img src={`${process.env.PUBLIC_URL}/assets/box6_3.png`} alt=""/>
</div> </div>
<div className='box3-item-data'> <div className='box3-item-data'>
<div className='box3-item-data-top'>91.23%</div> <div className='box3-item-data-top'>79.34%</div>
<div className='box3-item-data-btm'>2018年</div> <div className='box3-item-data-btm'>2015年</div>
</div> </div>
<div className='box3-item-arrow'> <div className='box3-item-arrow'>
<div className='box3-item-arrow-top'>5.2%</div> <div className='box3-item-arrow-top'>20.56%</div>
<div className='box3-item-arrow-btm'> <div className='box3-item-arrow-btm'>
<img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/> <img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
</div> </div>
</div> </div>
<div className='box3-item-data'> <div className='box3-item-data'>
<div className='box3-item-data-top'>91.23%</div> <div className='box3-item-data-top'>99.90%</div>
<div className='box3-item-data-btm'>2021年</div> <div className='box3-item-data-btm'>2023年</div>
</div> </div>
</div> </div>
</div> </div>
@ -459,18 +458,18 @@ const SyglPage: React.FC = () => {
<img src={`${process.env.PUBLIC_URL}/assets/box6_4.png`} alt=""/> <img src={`${process.env.PUBLIC_URL}/assets/box6_4.png`} alt=""/>
</div> </div>
<div className='box3-item-data'> <div className='box3-item-data'>
<div className='box3-item-data-top'>91.23%</div> <div className='box3-item-data-top'>65.25%</div>
<div className='box3-item-data-btm'>2018年</div> <div className='box3-item-data-btm'>2015年</div>
</div> </div>
<div className='box3-item-arrow'> <div className='box3-item-arrow'>
<div className='box3-item-arrow-top'>5.2%</div> <div className='box3-item-arrow-top'>33.25%</div>
<div className='box3-item-arrow-btm'> <div className='box3-item-arrow-btm'>
<img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/> <img src={`${process.env.PUBLIC_URL}/assets/box3_arrow.png`} alt=""/>
</div> </div>
</div> </div>
<div className='box3-item-data'> <div className='box3-item-data'>
<div className='box3-item-data-top'>91.23%</div> <div className='box3-item-data-top'>98.50%</div>
<div className='box3-item-data-btm'>2021年</div> <div className='box3-item-data-btm'>2023年</div>
</div> </div>
</div> </div>
</div> </div>
@ -481,6 +480,9 @@ const SyglPage: React.FC = () => {
</div> </div>
</div> </div>
<div className='map'>
<img src={`${process.env.PUBLIC_URL}/assets/map.png`} alt=""/>
</div>
</div> </div>
) )