<template>
<div class="a">
<div class="partTitleHM">城市规划</div>
<div class="partContHM">
<div class="hkns">
<!-- 水安全规划 -->
<div class="rightBox rightBox1">
<div class="ListTitle">水安全规划</div>
<div class="precedence" @click="showFlowTotalQuantity">
<div class="eachinfo">
<div class="headText">年径流总量控制率</div>
<div class="middleext">
<div class="middleextA">
<p class="NumberListMB">目标:</p>
<p class="NumberList"> 70%</p>
</div>
<div class="rightText">以上</div>
</div>
</div>
</div>
<div class="XqDetails">
<div class="DetailsOne">排涝规则</div>
<div class="DetailsTwo">
<span class="DetailsTwoA">新建改造泵站</span>
<span class="DetailsTwoB"> 54</span> 座
</div>
<div class="DetailsTthree">
<span>新建雨水管渠</span>
<span class="DetailsTthreeA"> 723.83</span> 公里
</div>
</div>
</div>
<!-- 水环境规划 -->
<div class="rightBox rightBox2">
<div class="ListTitle">水环境规划</div>
<div class="precedence" v-for="item in policiesList" :key="item">
<div class="eachinfo">
<div class="headText">{{ item.name }}</div>
<div class="middleext">
<div class="middleextA">
<span class="NumberListMB">目标:</span>
<span class="NumberList"> {{ item.NumberA }}</span>
</div>
<div class="rightText">{{ item.content }}</div>
</div>
</div>
</div>
</div>
<!-- 水生态规划 -->
<div class="rightBox rightBox3">
<div class="ListTitle">水生态规划</div>
<div class="XqDetails" v-for="item in policiesListS">
<div class="DetailsAquaticEcology">
<div class="icon"></div>
{{ item.name }}
</div>
<div class="DetailsAquaticEcologyTwo">
<p class="DetailsTwoA">{{ item.NumberA }}</p>
<p class="DetailsTwoB">{{ item.content }}</p>
</div>
</div>
</div>
<!-- 水资源规划 -->
<div class="rightBox rightBox4">
<div class="ListTitle">水资源规划</div>
<div class="ListContent">
<!-- 雨水资源利用 -->
<div class="sewageResources">
<div class="sewageTop">
<div class="YStext">雨水资源利用</div>
</div>
<div>
<RainwaterTakeAdvantage></RainwaterTakeAdvantage>
</div>
</div>
<!-- 污水资源利用 -->
<div class="sewageResources">
<div class="sewageTop">
<div class="wstext">污水资源利用</div>
<div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
</div>
<div>
<SewageEcharts></SewageEcharts>
</div>
</div>
</div>
</div>
<!-- 供水规划 -->
<div class="rightBox rightBox5">
<div class="ListTitle">供水规划</div>
<div class="ListContent">
<div class="waterSupply">
<div class="bottomBgc"></div>
<div class="eachDescribe">
<div class="icon bgcblue"></div>
<div class="text">近期</div>
<div class="sum colorBlue">68.7</div>
<div class="unit">万立方米/日</div>
</div>
<div class="eachDescribe">
<div class="icon bgcYellow"></div>
<div class="text">远期</div>
<div class="sum colorYellow">88.7</div>
<div class="unit">万立方米/日</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import RainwaterTakeAdvantage from '@/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue'; //雨水资源利用图例
import SewageEcharts from '@/views/sponeScreen/Echarts/SewageEcharts.vue'; //污水资源利用图例
import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
import YSFQ2 from '@/assets/geojson/kaifeng/kaifengPSFQ2.json';
import bus from '@/bus/index';
const isShowFlowTotalQuantity = ref(false);
// 水环境规划
const policiesList = ref([
{
name: '径流污染控制 ',
NumberA: '60%',
content: '以上',
},
{
name: '黑臭水体消除比例',
NumberA: '100%',
content: '',
},
{
name: '城市生活污水收集率 ',
NumberA: '82%',
content: '以上',
},
]);
// 水生态规划
const policiesListS = ref([
{
name: '河流生态基流满足程度 ',
NumberA: '2025年≥80%',
content: '2035年≥95%',
},
{
name: '生态岸线比例',
NumberA: '2025年≥60%',
content: '2035年≥80%',
},
]);
const showFlowTotalQuantity = () => {
let YSFQ2_cope;
//移除一心一核
newfiberMapBoxVectorLayer.removeByIds([
'oneCenter',
'oneCenter_label',
'oneCenter1',
'oneCenter1_label',
'oneCenter2',
'oneCenter2_label',
]);
bus.emit('setIniteLayer', [
{
layername: 'topography',
show: true,
},
{
layername: 'builtCity',
show: true,
},
{
layername: 'centerCity',
show: true,
},
]);
YSFQ2_cope = YSFQ2;
YSFQ2_cope.features.forEach(element => {
element.properties.name = element.properties.totalflow;
});
newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('rainAreaLayer', YSFQ2_cope);
newfiberMapbox.map.setLayoutProperty('rainAreaLayer_label', 'text-allow-overlap', true);
newfiberMapbox.map.easeTo({
center: [114.315, 34.782],
zoom: 10.4,
pitch: 10,
});
};
</script>
<style lang="scss" scoped>
.a {
// height: 635px;
// background: red;
.hkns {
height: 580px;
overflow-x: hidden;
overflow-y: auto;
.rightBox {
// background: blue;
.ListTitle {
width: 100%;
height: 32px;
line-height: 32px;
background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
background-size: 100% 100%;
position: relative;
// box-sizing: border-box;
padding-left: 30px;
font-family: SourceHanSansCN-Medium;
font-weight: bold;
font-size: 15px;
color: #e4f5ff;
}
.precedence {
margin-top: 5px;
width: 100%;
height: 32px;
// line-height: 32px;
background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
background-size: 100% 100%;
.eachinfo {
display: flex;
height: 32px;
color: #b8ecff;
// background: red;
.headText {
width: 60%;
padding-left: 20px;
line-height: 32px;
font-size: 16px;
// background: yellow;
}
.middleext {
display: flex;
width: 40%;
text-align: center;
line-height: 32px;
font-size: 16px;
align-items: center;
// background: blue;
.middleextA {
width: 65%;
text-align: center;
// background: red;
display: flex;
.NumberListMB {
// background: #f7c987;
width: 40%;
}
.NumberList {
// background: lawngreen;
width: 60%;
font-size: 18px;
color: #3afff8;
}
}
}
.rightText {
width: 35%;
line-height: 32px;
text-align: center;
// background: lawngreen;
}
}
}
.XqDetails {
margin-top: 8px;
height: 32px;
display: flex;
color: #b8ecff;
font-family: SourceHanSansCN-Medium;
font-weight: bold;
font-size: 15px;
// background: red;
.DetailsOne {
width: 18%;
line-height: 30px;
text-align: center;
// background: yellow;
}
.DetailsTwo {
width: 40%;
line-height: 30px;
text-align: center;
// background: blueviolet;
.DetailsTwoB {
color: #f7c987;
}
}
.DetailsTthree {
width: 45%;
line-height: 30px;
text-align: center;
// background: #3afff8;
.DetailsTthreeA {
color: #3afff8;
}
}
// 水生态规划
.DetailsAquaticEcology {
width: 45%;
line-height: 30px;
.icon {
display: inline-block;
border-color: #3afff8;
border-style: solid;
border-width: 2px;
width: 0;
height: 0;
margin-right: 7px;
position: relative;
top: -3px;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
// background: red;
}
.DetailsAquaticEcologyTwo {
width: 55%;
display: flex;
align-items: center;
// background: yellowgreen;
line-height: 30px;
text-align: center;
.DetailsTwoA {
width: 50%;
color: #3afff8;
// background: red;
}
.DetailsTwoB {
width: 50%;
color: #f7c987;
// background: rgb(205, 50, 50);
}
}
}
.ListContent {
width: 100%;
height: calc(100% - 34px);
overflow: auto;
// background: yellow;
.sewageResources {
// 污水资源利用
.sewageTop {
display: flex;
justify-content: space-between;
align-items: center;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 16px;
padding: 10px 30px 0px 10px;
.wsdescribe {
color: #fff;
}
.wstext {
color: #ffed52;
}
.YStext {
color: #18ffff;
}
}
}
}
// 供水规划
.waterSupply {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
.eachDescribe {
display: flex;
align-items: center;
font-family: Source Han Sans CN;
font-weight: 400;
padding-top: 5px;
.unit {
padding-top: 5px;
color: #ffffff;
}
.icon {
width: 8px;
height: 8px;
border-radius: 50%;
}
.colorYellow {
color: #ffed52;
}
.colorBlue {
color: #18ffff;
}
.bgcYellow {
background: #ffed52;
}
.bgcblue {
background: #18ffff;
}
.text {
padding: 0 10px 0 6px;
font-size: 16px;
}
.sum {
font-size: 20px;
padding-right: 10px;
}
}
.bottomBgc {
width: 100%;
height: 16px;
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
}
}
}
.rightBox1 {
height: 110px;
}
.rightBox2 {
margin-top: 5px;
}
.rightBox3 {
margin-top: 5px;
}
.rightBox4 {
margin-top: 5px;
// height: 200px;
// background: red;
}
.rightBox5 {
margin-top: 5px;
}
}
}
</style>
