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(() => {
if (leafMenu) {
document.title = '小玉潭水库 · ' + leafMenu.title
document.title = leafMenu.title
}
}, [leafMenu]);*/

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

@ -40,20 +40,16 @@
.title-items {
margin-right: 20px;
color:#999;
color: #999;
}
.items-active{
color:#fff;
.items-active {
color: #fff;
border-bottom: 2px solid yellow;
}
.box1,.box4{
.box1, .box4 {
height: 85%;
padding: 10px;
background: url("../../../public/assets/box_bg3.png") 0 0 no-repeat;
@ -62,11 +58,11 @@
align-items: center;
}
.box1-bian,.box4-bian {
.box1-bian, .box4-bian {
height: 100%;
}
.box1-content,.box4-content {
.box1-content, .box4-content {
margin: 0 10px;
}
@ -170,52 +166,55 @@
width: 15px;
}
.box4-content-item{
.box4-content-item {
text-indent: 2em;
margin: 20px 0;
}
.box4-content-item span{
.box4-content-item span {
color: yellow;
}
.box5{
.box5 {
height: 90%;
padding: 10px;
overflow: auto;
}
.box5-title{
.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{
.box5-title-item {
text-align: center;
}
.color-green{
color:#00FFAA;
.color-green {
color: #00FFAA;
}
.box5-list{
.box5-list {
display: flex;
padding: 6px 10px;
}
.box5-li{
.box5-li {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 30%;
}
.box5-li-num{
.box5-li-num {
width: 12px;
height: 12px;
line-height: 12px;
@ -224,22 +223,34 @@
background-size: 100% 100%;
}
.width-10{
.width-10 {
width: 10%;
}
.width-20{
.width-20 {
width: 20%;
}
.width-30{
.width-30 {
width: 30%;
}
.box5 .box5-list:nth-child(even){
background: rgba(0,88,188,0.2);
.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);
.box5 .box5-list:nth-child(odd) {
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: {
type: "category",
data: [
"2015",
"2016",
"2017",
"2018",
"2019",
"2020",
"2021",
"2022",
],
axisLine: {
show: true,
@ -62,7 +62,7 @@ const SyglPage: React.FC = () => {
},
yAxis: {
name: "(万元)",
max: 600,
max: 12000,
min: 0,
nameTextStyle: {
color: '#fff',
@ -93,7 +93,7 @@ const SyglPage: React.FC = () => {
series: [
{
type: "bar",
data: [360, 340, 300, 360, 500],
data: [1796, 717, 2500, 9445, 11345],
barMaxWidth: "auto",
barWidth: 30,
itemStyle: {
@ -128,7 +128,7 @@ const SyglPage: React.FC = () => {
zlevel: 2,
},
{//一蓝盖
data: [360, 340, 300, 360, 500],
data: [1796, 717, 2500, 9445, 11345],
type: "pictorialBar",
barMaxWidth: "20",
symbol: "diamond",
@ -205,18 +205,18 @@ const SyglPage: React.FC = () => {
<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 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'>5.2%</div>
<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'>91.23%</div>
<div className='box3-item-data-btm'>2021年</div>
<div className='box3-item-data-top'>99.50%</div>
<div className='box3-item-data-btm'>2023年</div>
</div>
</div>
</div>
@ -229,18 +229,18 @@ const SyglPage: React.FC = () => {
<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 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'>5.2%</div>
<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'>91.23%</div>
<div className='box3-item-data-btm'>2021年</div>
<div className='box3-item-data-top'>94.50%</div>
<div className='box3-item-data-btm'>2023年</div>
</div>
</div>
</div>
@ -253,18 +253,18 @@ const SyglPage: React.FC = () => {
<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 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'>5.2%</div>
<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'>91.23%</div>
<div className='box3-item-data-btm'>2021年</div>
<div className='box3-item-data-top'>99.90%</div>
<div className='box3-item-data-btm'>2023年</div>
</div>
</div>
</div>
@ -277,18 +277,18 @@ const SyglPage: React.FC = () => {
<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 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'>5.2%</div>
<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'>91.23%</div>
<div className='box3-item-data-btm'>2021年</div>
<div className='box3-item-data-top'>99.90%</div>
<div className='box3-item-data-btm'>2023年</div>
</div>
</div>
</div>
@ -305,9 +305,9 @@ const SyglPage: React.FC = () => {
<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 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>
@ -319,57 +319,56 @@ const SyglPage: React.FC = () => {
<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-30'>工程名称</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>
<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 color-green'>89%</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-20'>XXX工程</div>
<div className='box5-li width-20'>200万</div>
<div className='box5-li width-30'>建设内容文字占位</div>
<div className='box5-li width-20 color-green'>89%</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-20'>XXX工程</div>
<div className='box5-li width-20'>200万</div>
<div className='box5-li width-30'>建设内容文字占位</div>
<div className='box5-li width-20 color-green'>89%</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-20'>XXX工程</div>
<div className='box5-li width-20'>200万</div>
<div className='box5-li width-30'>建设内容文字占位</div>
<div className='box5-li width-20 color-green'>89%</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-20'>XXX工程</div>
<div className='box5-li width-20'>200万</div>
<div className='box5-li width-30'>建设内容文字占位</div>
<div className='box5-li width-20 color-green'>89%</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'>
@ -387,18 +386,18 @@ const SyglPage: React.FC = () => {
<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 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'>5.2%</div>
<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.23%</div>
<div className='box3-item-data-btm'>2021年</div>
<div className='box3-item-data-top'>91.50%</div>
<div className='box3-item-data-btm'>2023年</div>
</div>
</div>
</div>
@ -411,18 +410,18 @@ const SyglPage: React.FC = () => {
<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 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'>5.2%</div>
<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'>91.23%</div>
<div className='box3-item-data-btm'>2021年</div>
<div className='box3-item-data-top'>23.50%</div>
<div className='box3-item-data-btm'>2023年</div>
</div>
</div>
</div>
@ -435,18 +434,18 @@ const SyglPage: React.FC = () => {
<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 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'>5.2%</div>
<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'>91.23%</div>
<div className='box3-item-data-btm'>2021年</div>
<div className='box3-item-data-top'>99.90%</div>
<div className='box3-item-data-btm'>2023年</div>
</div>
</div>
</div>
@ -459,18 +458,18 @@ const SyglPage: React.FC = () => {
<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 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'>5.2%</div>
<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'>91.23%</div>
<div className='box3-item-data-btm'>2021年</div>
<div className='box3-item-data-top'>98.50%</div>
<div className='box3-item-data-btm'>2023年</div>
</div>
</div>
</div>
@ -481,6 +480,9 @@ const SyglPage: React.FC = () => {
</div>
</div>
<div className='map'>
<img src={`${process.env.PUBLIC_URL}/assets/map.png`} alt=""/>
</div>
</div>
)