<template>
<div id="ZHHM">
<div
:class="[
'LeftBox',
'animate__animated',
showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft',
]"
>
<div class="ComBox LeftBox1_1">
<div class="Box_header">
空间格局 <span class="Box_header_miniFont">(一心三轴多组团)</span>
</div>
<div class="Box_Body">
<div class="KJGJ_List1">
<div class="KJGJ_List1_List">
<span class="KJGJ_List1_List_yuan color_yellow"></span>
<span class="KJGJ_List1_List_name">平均海拔</span>
<span class="KJGJ_List1_List_value">1200</span>
<span class="KJGJ_List1_List_unit">m</span>
</div>
<div class="KJGJ_List1_List">
<span class="KJGJ_List1_List_yuan color_lime"></span>
<span class="KJGJ_List1_List_name">最高海拔</span>
<span class="KJGJ_List1_List_value">1809</span>
<span class="KJGJ_List1_List_unit">m</span>
</div>
</div>
<div class="KJGJ_List1">
<div class="KJGJ_List1_List">
<span class="KJGJ_List1_List_yuan color_yellow"></span>
<span class="KJGJ_List1_List_name">最低海拔</span>
<span class="KJGJ_List1_List_value">388</span>
<span class="KJGJ_List1_List_unit">m</span>
</div>
<div class="KJGJ_List1_List">
<span class="KJGJ_List1_List_yuan color_lime"></span>
<span class="KJGJ_List1_List_name">西南高东北低</span>
</div>
</div>
<div class="KJGJ_List2">
<div class="KJGJ_List2_XH">01</div>
<div class="KJGJ_List2_WFont">一心</div>
<div class="KJGJ_List2_Font">以山体公园形成的自然生态中心</div>
</div>
<div class="KJGJ_List2">
<div class="KJGJ_List2_XH">02</div>
<div class="KJGJ_List2_WFont">三轴</div>
<div class="KJGJ_List2_Font">以东川、南川、西北川为发展轴</div>
</div>
<div class="KJGJ_List2">
<div class="KJGJ_List2_XH">03</div>
<div class="KJGJ_List2_WFont">一环</div>
<div class="KJGJ_List2_Font">由山体公园形成的海绵生态发展环</div>
</div>
<div class="KJGJ_List2">
<div class="KJGJ_List2_XH">04</div>
<div class="KJGJ_List2_WFont">三廊</div>
<div class="KJGJ_List2_Font">北川、沿河和南川组成Y型走廊</div>
</div>
<div class="KJGJ_List2">
<div class="KJGJ_List2_XH">05</div>
<div class="KJGJ_List2_WFont">绿楔</div>
<div class="KJGJ_List2_Font">以山体林地为骨架的生态绿楔</div>
</div>
</div>
</div>
<div class="ComBox LeftBox1_2">
<div class="Box_header">
降雨特征
<div class="head-right" style="">
<div
class="head-item"
v-for="(item, index) in yearList"
:key="item"
:class="activedname == item.name ? 'activedright' : ''"
@click="yearclick(item, index)"
>
{{ item.name }}
</div>
</div>
</div>
<div class="Box_Body">
<div class="HeadContent" v-if="activedname == '年际降雨变化'">
丰、枯年交替出现，且降雨量变化幅度大
</div>
<div class="HeadContent" v-else>年内降雨量分配不均匀，冬季干旱，雨雪稀少</div>
<div class="box-body">
<div style="height: 100%">
<RainfallEcharts
:data="chartData2"
:refresh="chartData2.refresh"
v-if="activedname == '年际降雨变化'"
></RainfallEcharts>
<RainfallLegend
:data="chartData3"
:refresh1="chartData3.refresh1"
v-else
></RainfallLegend>
</div>
</div>
</div>
</div>
<div class="ComBox LeftBox1_3">
<div class="Box_header">
问题识别
<img
class="Box_headerIcon"
src="@/assets/images/Sponge_screen/HaiMian/HaiMian_FangAn.png"
alt=""
@click="AllData.WTShow = !AllData.WTShow"
/>
</div>
<div class="Box_Body">
<div class="WTSBList" v-for="item in AllData.WTSBData">
<div class="WTSBList_num">{{ item.num }}</div>
<div class="WTSBList_font">{{ item.font }}</div>
</div>
</div>
</div>
</div>
<div
:class="[
'RightBox',
'animate__animated',
showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
]"
>
<div class="ComBox RightBox1_1">
<div class="Box_header">城市排涝体系提升</div>
<div class="Box_Body">
<div class="SCPLTX_changeBox">
<div
class="SCPLTX_changeBox_List"
:class="AllData.SCPLTX_changeId == item.id ? 'SCPLTX_changeBox_Check' : ''"
v-for="item in AllData.SCPLTX_changeData"
@click="AllData.SCPLTX_changeId = item.id"
>
{{ item.name }}
</div>
</div>
<img
class="SCPLTXImg"
src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu2.png"
alt=""
/>
</div>
</div>
<div class="ComBox RightBox1_2">
<div class="Box_header">城市排涝保障提升</div>
<div class="Box_Body">
<div class="SCPLBZ_changeBox">
<div
class="SCPLBZ_changeBox_List"
:class="AllData.SCPLBZ_changeId == item.id ? 'SCPLBZ_changeBox_Check' : ''"
v-for="item in AllData.SCPLBZ_changeData"
@click="AllData.SCPLBZ_changeId = item.id"
>
{{ item.name }}
</div>
</div>
<img
class="SCPBZXImg"
src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu1.png"
alt=""
/>
</div>
</div>
<div class="ComBox RightBox1_3">
<div class="Box_header">水环境改善提升</div>
<div class="Box_Body SHJGS">
<img
class="SHJGSImg"
src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu5.png"
alt=""
/>
<img
class="SHJGSImg"
src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu6.png"
alt=""
/>
<img
class="SHJGSImg"
src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu4.png"
alt=""
/>
</div>
</div>
</div>
<Transition name="slideWT">
<div class="XFK" v-show="AllData.WTShow">
<img
class="XFKImg"
src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu3.png"
alt=""
/>
</div>
</Transition>
</div>
</template>
<script setup name="ZHHM">
import { ref, reactive, toRefs, onMounted } from "vue";
const AllData = reactive({
// 问题识别
WTSBData: [
{
num: "01",
font: "新区雨水入老城，雨季内涝积水频发",
},
{
num: "02",
font: "水资源严重短缺，雨水资源利用难度大",
},
{
num: "03",
font: "排水系统不完善，雨季延河水质不稳定",
},
{
num: "04",
font: "山体沟道人居环境较差，局部存在安全隐患",
},
// {
// num: '05',
// font: '湖泊面积萎缩，城市海绵体受损',
// },
],
// 城市排涝体系提升
SCPLTX_changeData: [
{
id: 1,
name: "源头减排",
},
{
id: 2,
name: "过程控制",
},
{
id: 3,
name: "系统治理",
},
],
SCPLTX_changeId: 1,
// 城市排涝保障提升
SCPLBZ_changeData: [
{
id: 1,
name: "上栏",
},
{
id: 2,
name: "中滞",
},
{
id: 3,
name: "下排",
},
],
SCPLBZ_changeId: 1,
// 问题识别弹窗
WTShow: false,
});
const showPanel = ref(true); //面板展开收起
const chartData2 = ref({
xAxis: [1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020, 2021],
yAxis: [650, 800, 502, 630, 820, 800, 510, 805, 1203],
refresh: 1,
});
const chartData3 = ref({
XName: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
data1: [8, 15, 24, 36, 58, 63, 165, 125, 72, 30, 23, 10],
data: [
{
coords: [
["1", 8],
["2", 15],
["3", 24],
["4", 36],
["5", 58],
["6", 63],
["7", 165],
["8", 125],
["9", 72],
["10", 30],
["11", 23],
["12", 10],
],
},
],
refresh1: 1,
});
const activedname = ref("年际降雨变化");
const weatherTimer = ref(null);
const yearList = ref([
{ name: "年际降雨变化", value: 1 },
{ name: "年内降雨量", value: 2 },
]);
import RainfallEcharts from "@/views/oneMap/Echarts/RainfallEcharts.vue"; //年际降雨变化
import RainfallLegend from "@/views/oneMap/Echarts/RainfallLegend.vue"; //年内降雨量
import { onBeforeUnmount } from "vue";
import bus from "@/bus";
import yanAnProjection from "@/assets/yanAnProjection.json";
import mapBoxVectorLayer from "@/utils/GISdocument/mapboxVectorLayer.js";
// 面板内容展开收起控制
const props = defineProps({
showPanel: {
type: Boolean,
},
});
watch(
() => props.showPanel,
() => {
showPanel.value = props.showPanel;
},
{ immediate: true }
);
//添加海绵项目
const addProjectionLayer = () => {
let projectionList = [
{
layername: "HMJZYSQ",
data: turf.featureCollection(
yanAnProjection.features.filter((i) =>
i.properties.projectionType.includes("建筑")
)
),
},
{
layername: "HMXGYLD",
data: turf.featureCollection(
yanAnProjection.features.filter((i) =>
i.properties.projectionType.includes("公园")
)
),
},
{
layername: "HMXDLGC",
data: turf.featureCollection(
yanAnProjection.features.filter((i) =>
i.properties.projectionType.includes("道路")
)
),
},
{
layername: "HMXSX",
data: turf.featureCollection(
yanAnProjection.features.filter((i) =>
i.properties.projectionType.includes("水系")
)
),
},
{
layername: "GWPCYXF",
data: turf.featureCollection(
yanAnProjection.features.filter((i) =>
i.properties.projectionType.includes("管网")
)
),
},
// 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS', 'other'
];
console.log("projectionList---", projectionList);
bus.emit("setLegendData", projectionList);
bus.emit("setLayerVisible", { layername: "HMJZYSQ", isCheck: true }); //建筑
// bus.emit('setLayerVisible', { layername: 'HMXGYLD', isCheck: true });//公园
// bus.emit('setLayerVisible', { layername: 'HMXDLGC', isCheck: true });//道路
// bus.emit('setLayerVisible', { layername: 'HMXSX', isCheck: true }); //水系
// bus.emit('setLayerVisible', { layername: 'GWPCYXF', isCheck: true });//管网
};
onMounted(() => {
addProjectionLayer();
//mapBoxVectorLayer.addGeojsonPolygonWithLabel('yanAnPaiShuiArea', yanAnPaiShuiArea);
});
function yearclick(val) {
activedname.value = val.name;
bus.emit("checkRainL", val.value);
// bus.emit("checkLandXDM", false);
}
onBeforeUnmount(() => {
clearInterval(weatherTimer.value);
weatherTimer.value = null;
// mapBoxVectorLayer.removeByIds(['yanAnPaiShuiArea', 'yanAnPaiShuiArea__label']);
});
</script>
<style lang="scss" scoped>
#ZHHM {
.LeftBox {
width: 450px;
height: calc(100% - 98px);
position: absolute;
left: 10px;
top: 70px;
background: linear-gradient(
0deg,
rgba(0, 43, 67, 0.8) 0%,
rgba(0, 69, 108, 0.8) 100%
);
border-radius: 6px;
border: 1px solid #47eef3;
box-sizing: border-box;
padding: 10px;
box-shadow: inset 0 0 5px 5px #47eef38a;
.LeftBox1_1 {
height: 348px;
.KJGJ_List1 {
width: 100%;
height: 36px;
background: linear-gradient(
0deg,
rgba(0, 180, 255, 0.2) 0%,
rgba(0, 180, 255, 0) 100%
);
margin-top: 10px;
display: flex;
.KJGJ_List1_List {
width: 50%;
height: 36px;
position: relative;
.KJGJ_List1_List_yuan {
float: left;
width: 7px;
height: 7px;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
transition: 1s clip-path;
margin: 16px 13px;
}
.KJGJ_List1_List_name {
float: left;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 16px;
color: #b8ecff;
height: 36px;
line-height: 36px;
}
.KJGJ_List1_List_value {
float: left;
font-family: Myriad Pro;
font-weight: 400;
font-size: 18px;
color: #ffed52;
height: 36px;
line-height: 36px;
margin-left: 10px;
}
.KJGJ_List1_List_unit {
float: left;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 12px;
color: #b8ecff;
height: 36px;
line-height: 36px;
margin-left: 10px;
}
}
}
.KJGJ_List2 {
width: 100%;
height: 30px;
margin-top: 10px;
background: rgba(35, 173, 245, 0.16);
.KJGJ_List2_XH {
width: 30px;
height: 30px;
line-height: 28px;
border: 2px solid #33d1ff;
font-family: DIN;
font-weight: 500;
font-size: 18px;
color: #d1dff7;
text-align: center;
float: left;
box-sizing: border-box;
background: url("@/assets/images/Sponge_screen/HaiMian/HaiMian_hezi.png")
no-repeat center;
}
.KJGJ_List2_WFont {
float: left;
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 16px;
color: #42e2ff;
height: 30px;
line-height: 30px;
margin: 0 10px;
}
.KJGJ_List2_Font {
float: left;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #b8ecff;
height: 30px;
line-height: 30px;
}
}
}
.LeftBox1_2 {
height: calc(100% - 348px - 310px);
.HeadContent {
width: 100%;
height: 30px;
background: rgba(34, 112, 255, 0.4);
text-align: center;
line-height: 30px;
color: #ffffff;
}
.box-body {
height: calc(100% - 30px);
padding-left: 5px;
position: relative;
overflow: auto;
}
.head-right {
cursor: pointer;
position: relative;
font-size: 14px;
left: 200px;
top: -32px;
color: #ffffff;
display: flex;
max-width: 200px;
overflow: hidden;
overflow-x: auto;
line-height: 18px;
.head-item {
margin-left: 10px;
padding: 2px 3px;
border: 1px solid transparent;
background: #013a73;
height: 23px;
text-align: center;
min-width: 42px;
border: 1px solid #2270ff;
}
.activedright {
border: 1px solid #2cfce9;
color: #e4f5ff;
background: #166f84;
}
}
}
.LeftBox1_3 {
height: 310px;
.Box_headerIcon {
width: 24px;
height: 26px;
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
}
.WTSBList {
width: 100%;
height: 44px;
background: url("@/assets/images/Sponge_screen/HaiMian/HaiMian_ListBack.png");
margin-top: 9px;
.WTSBList_num {
width: 44px;
height: 44px;
line-height: 44px;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 20px;
color: #00f2ff;
text-align: center;
float: left;
}
.WTSBList_font {
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 16px;
color: #a5d2ff;
height: 44px;
line-height: 44px;
float: left;
margin-left: 30px;
}
}
}
}
.RightBox {
width: 450px;
height: calc(100% - 98px);
position: absolute;
right: 10px;
top: 70px;
background: linear-gradient(
0deg,
rgba(0, 43, 67, 0.8) 0%,
rgba(0, 69, 108, 0.8) 100%
);
border-radius: 6px;
border: 1px solid #47eef3;
box-sizing: border-box;
padding: 10px;
box-shadow: inset 0 0 5px 5px #47eef38a;
.RightBox1_1 {
height: 302px;
.SCPLTX_changeBox {
width: 100%;
height: 26px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
margin: 10px 0;
.SCPLTX_changeBox_List {
width: 136px;
height: 26px;
line-height: 26px;
text-align: center;
background: #00344f;
border-radius: 2px;
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 14px;
color: #c1d3d4;
cursor: pointer;
}
.SCPLTX_changeBox_Check {
background: #002d44;
border-radius: 2px;
border: 1px solid #1cf5fc;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 14px;
color: #ebfeff;
}
}
.SCPLTXImg {
width: 100%;
height: calc(100% - 70px);
margin-top: 5px;
}
}
.RightBox1_2 {
height: calc(100% - 632px);
.SCPLBZ_changeBox {
width: 100%;
height: 26px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
margin: 10px 0;
.SCPLBZ_changeBox_List {
width: 136px;
height: 26px;
line-height: 26px;
text-align: center;
background: #00344f;
border-radius: 2px;
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 14px;
color: #c1d3d4;
cursor: pointer;
}
.SCPLBZ_changeBox_Check {
background: #002d44;
border-radius: 2px;
border: 1px solid #1cf5fc;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 14px;
color: #ebfeff;
}
}
.SCPBZXImg {
width: 100%;
height: calc(100% - 70px);
margin-top: 5px;
}
}
.RightBox1_3 {
height: 330px;
.SHJGS {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
/* align-content: center; */
justify-content: space-around;
align-items: center;
.SHJGSImg {
width: 136px;
height: 266px;
cursor: pointer;
}
}
}
}
.XFK {
width: 885px;
height: 125px;
position: absolute;
left: 460px;
bottom: 225px;
.XFKImg {
width: 100%;
height: 100%;
}
}
// 左右两侧展示板块公共样式
.ComBox {
width: 100%;
box-sizing: border-box;
.Box_header {
width: 100%;
height: 43px;
background: url("@/assets/images/Sponge_screen/Box_HeaderBackground.png") no-repeat
center;
background-size: cover;
font-family: PangMenZhengDao;
font-weight: 400;
font-size: 23px;
color: #ebfeff;
line-height: 43px;
box-sizing: border-box;
padding-left: 35px;
position: relative;
.Box_header_miniFont {
font-size: 16px;
}
}
.Box_Body {
width: 100%;
height: calc(100% - 43px);
box-sizing: border-box;
position: relative;
overflow: auto;
}
}
.color_red {
color: #ff3f3f !important;
}
.color_yellow {
background: #ffed52 !important;
}
.color_lime {
background: #18e87a !important;
}
// 动画
/*
进入和离开动画可以使用不同
持续时间和速度曲线。
*/
.slideWT-enter-active,
.slideWT-leave-active {
transition: all 0.3s ease-out;
}
.slideWT-enter-from,
.slideWT-leave-to {
transform: translateX(-900px);
opacity: 0;
}
}
</style>
