diff --git a/public/assets/box3_1.png b/public/assets/box3_1.png new file mode 100644 index 0000000..f74aca1 Binary files /dev/null and b/public/assets/box3_1.png differ diff --git a/public/assets/box3_2.png b/public/assets/box3_2.png new file mode 100644 index 0000000..3df8854 Binary files /dev/null and b/public/assets/box3_2.png differ diff --git a/public/assets/box3_3.png b/public/assets/box3_3.png new file mode 100644 index 0000000..8996d47 Binary files /dev/null and b/public/assets/box3_3.png differ diff --git a/public/assets/box3_4.png b/public/assets/box3_4.png new file mode 100644 index 0000000..894bad2 Binary files /dev/null and b/public/assets/box3_4.png differ diff --git a/public/assets/box3_arrow.png b/public/assets/box3_arrow.png new file mode 100644 index 0000000..39158e4 Binary files /dev/null and b/public/assets/box3_arrow.png differ diff --git a/public/assets/box3_time.png b/public/assets/box3_time.png new file mode 100644 index 0000000..72ae46e Binary files /dev/null and b/public/assets/box3_time.png differ diff --git a/public/assets/box3_title.png b/public/assets/box3_title.png new file mode 100644 index 0000000..64ba6e0 Binary files /dev/null and b/public/assets/box3_title.png differ diff --git a/public/assets/box5_num.png b/public/assets/box5_num.png new file mode 100644 index 0000000..e48bf32 Binary files /dev/null and b/public/assets/box5_num.png differ diff --git a/public/assets/box5_title.png b/public/assets/box5_title.png new file mode 100644 index 0000000..c49fecd Binary files /dev/null and b/public/assets/box5_title.png differ diff --git a/public/assets/box6_1.png b/public/assets/box6_1.png new file mode 100644 index 0000000..bfa70ad Binary files /dev/null and b/public/assets/box6_1.png differ diff --git a/public/assets/box6_2.png b/public/assets/box6_2.png new file mode 100644 index 0000000..7072453 Binary files /dev/null and b/public/assets/box6_2.png differ diff --git a/public/assets/box6_3.png b/public/assets/box6_3.png new file mode 100644 index 0000000..00b9dbe Binary files /dev/null and b/public/assets/box6_3.png differ diff --git a/public/assets/box6_4.png b/public/assets/box6_4.png new file mode 100644 index 0000000..56ab36d Binary files /dev/null and b/public/assets/box6_4.png differ diff --git a/public/assets/box_bg3.png b/public/assets/box_bg3.png new file mode 100644 index 0000000..3c951c6 Binary files /dev/null and b/public/assets/box_bg3.png differ diff --git a/public/assets/img2.png b/public/assets/img2.png new file mode 100644 index 0000000..08f98c7 Binary files /dev/null and b/public/assets/img2.png differ diff --git a/src/views/Zhsy/index.less b/src/views/Zhsy/index.less index 943f3c1..fadf5af 100644 --- a/src/views/Zhsy/index.less +++ b/src/views/Zhsy/index.less @@ -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); +} diff --git a/src/views/Zhsy/index.tsx b/src/views/Zhsy/index.tsx index ac719ed..531fcbc 100644 --- a/src/views/Zhsy/index.tsx +++ b/src/views/Zhsy/index.tsx @@ -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 (
@@ -13,16 +161,140 @@ const SyglPage: React.FC = () => {
大事记
美丽水厂
+
+ +
+
+
+ +
+
+ 咸丰县水利局坚持把抓好农村饮水安全、助力脱贫攻坚放在中心位置，切实履行行业扶贫责任，扎实抓好精准扶贫农村饮水安全工程建设，全面解决建档立卡贫困人口“饮水难”问题，我县共投入25804.04万元推进实施6批次精准扶贫农村饮水安全工程。 +
+
+
+ 新建或改造农村供水工程369个（处），改善或提高24.46万农村居民的饮水条件（包括14.99万建档立卡贫困人口），同步建设高效智慧的农村供水管理平台，实现从源头到龙头全过程精细化管理。 +
+
+ +
工程投资
+
+ +
工程成效
+
+
+
+
+ 自来水普及率 +
+
+
+ +
+
+
91.23%
+
2018年
+
+
+
5.2%
+
+ +
+
+
+
91.23%
+
2021年
+
+
+
+
+
+ 集中供水率 +
+
+
+ +
+
+
91.23%
+
2018年
+
+
+
5.2%
+
+ +
+
+
+
91.23%
+
2021年
+
+
+
+
+
+ 供水保证率 +
+
+
+ +
+
+
91.23%
+
2018年
+
+
+
5.2%
+
+ +
+
+
+
91.23%
+
2021年
+
+
+
+
+
+ 水质达标率 +
+
+
+ +
+
+
91.23%
+
2018年
+
+
+
5.2%
+
+ +
+
+
+
91.23%
+
2021年
+
+
+
+
+
+
@@ -30,16 +302,173 @@ const SyglPage: React.FC = () => {
洪水简报
+
+ +
+
全省3月供水指数83.2，环比增长1.23%，其中清坪镇、小乡村排名前三；XXX、XXX、XXX排名倒三；
+
全省3月城乡供水水量4.3亿m³，环比增长-0.09%，水质自检率68.2%，自检合格率97.9%;
+
全省3月累计受理13个群众投诉件，已办结11个，其中完成整改9个，持续整改0个，办结率84.6%;
+
+ +
在建工程
+
+
+
序号
+
工程名称
+
投资金额
+
建设内容
+
工程进度
+
+
+
+
1
+
+
XXX工程
+
200万
+
建设内容文字占位
+
89%
+
+
+
+
2
+
+
XXX工程
+
200万
+
建设内容文字占位
+
89%
+
+
+
+
3
+
+
XXX工程
+
200万
+
建设内容文字占位
+
89%
+
+
+
+
4
+
+
XXX工程
+
200万
+
建设内容文字占位
+
89%
+
+ +
智慧化成效
+
+
+
+
+ 运营成本率 +
+
+
+ +
+
+
91.23%
+
2018年
+
+
+
5.2%
+
+ +
+
+
+
91.23%
+
2021年
+
+
+
+
+
+ 供水漏损率 +
+
+
+ +
+
+
91.23%
+
2018年
+
+
+
5.2%
+
+ +
+
+
+
91.23%
+
2021年
+
+
+
+
+
+ 巡检养护率 +
+
+
+ +
+
+
91.23%
+
2018年
+
+
+
5.2%
+
+ +
+
+
+
91.23%
+
2021年
+
+
+
+
+
+ 便民服务率 +
+
+
+ +
+
+
91.23%
+
2018年
+
+
+
5.2%
+
+ +
+
+
+
91.23%
+
2021年
+
+
+
+
+
+ +