<template>
<div id="ZHHM">
<div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
<div class="ComBox LeftBox1_1">
<div class="Box_header" style="cursor: pointer" @click="TuChengMoRenClick('00')">
空间格局 <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" style="cursor: pointer" @click="AllData.WTShow = !AllData.WTShow">
问题识别
<!-- <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" @click="TuChengMoRenClick(item.num)">
<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="SCPLTX_change(item)"
>
{{ item.name }}
</div>
</div>
<div class="CSPLTXBox" id="CSPLTXBox1" v-if="AllData.SCPLTX_changeId == 1">
<img class="SCPLTXImg" src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu2.png" alt="" />
<div class="ClickDiv ClickDiv1" @click="ClickDiv(1)"></div>
<div class="ClickDiv ClickDiv2" @click="ClickDiv(2)"></div>
<div class="ClickDiv ClickDiv3" @click="ClickDiv(3)"></div>
<div class="ClickDiv ClickDiv4" @click="ClickDiv(4)"></div>
<div class="ClickDiv ClickDiv5" @click="ClickDiv(5)"></div>
</div>
<div class="CSPLTXBox" id="CSPLTXBox2" v-if="AllData.SCPLTX_changeId == 2"></div>
<div class="CSPLTXBox" v-if="AllData.SCPLTX_changeId == 3">
<div id="CSPLTXBox3"></div>
<div id="lengedBox">
<div class="LengedList" v-for="(item, index) in AllData.Echarts3Data">
<span class="LengedListSK" :class="`LengedListSK` + index"></span>
<div class="LengedListName">{{ item.name }}</div>
<div class="LengedListValue">{{ item.value }}%</div>
</div>
</div>
</div>
</div>
</div>
<div class="ComBox RightBox1_2">
<div class="Box_header">城市防洪保障提升</div>
<div class="Box_Body">
<div id="CSPLBZTS"></div>
<!-- <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> -->
</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, nextTick } from 'vue';
import * as echarts from 'echarts';
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,
Charts1: null,
Charts2: null,
Charts3: null,
Echarts3Data: [
{ value: 48, name: '沿河' },
{ value: 22, name: '西川河' },
{ value: 13, name: '王瑶水库' },
{ value: 10, name: '杜甫川河' },
{ value: 7, name: '南川河' },
],
// 城市排涝保障提升
SCPLBZ_changeData: [
{
id: 1,
name: '上栏',
},
{
id: 2,
name: '中滞',
},
{
id: 3,
name: '下排',
},
],
SCPLBZ_changeId: 1,
Charts4: null,
// 问题识别弹窗
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);
projectionList.forEach(item => {
bus.emit('setGeoJSON', { json: item.data, key: item.layername });
});
//bus.emit('setLegendData', projectionList);
};
const yearclick = val => {
activedname.value = val.name;
bus.emit('checkRainL', val.value);
// bus.emit("checkLandXDM", false);
};
const TuChengMoRenClick = num => {
newfiberMapbox.map.easeTo({
center: [109.488, 36.596],
zoom: 12,
pitch: 55,
});
// 先清空
bus.emit('clearAllLayer');
let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
removedLayer.forEach(layer => {
bus.emit('setLayerVisible', { layername: layer, isCheck: false });
});
switch (num) {
case '00':
// 再显示
bus.emit('SetLayerShow', ['空间格局']);
break;
case '01':
// 再显示
bus.emit('SetLayerShow', ['雨水分区', '中心城区']);
break;
case '02':
// 再显示
bus.emit('SetLayerShow', ['河流水系']);
break;
case '03':
// 再显示
bus.emit('SetLayerShow', ['河流水系', '排水分区']);
break;
case '04':
// 再显示
bus.emit('SetLayerShow', ['山体修复']);
break;
}
};
const ClickDiv = num => {
newfiberMapbox.map.easeTo({
center: [109.488, 36.596],
zoom: 12,
pitch: 55,
});
// 先清空
bus.emit('clearAllLayer');
let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
removedLayer.forEach(layer => {
bus.emit('setLayerVisible', { layername: layer, isCheck: false });
});
switch (num) {
case 1:
bus.emit('setLayerVisible', { layername: 'HMJZYSQ', isCheck: true }); //建筑
bus.emit('setLayerVisible', { layername: 'HMXDLGC', isCheck: false }); //道路
bus.emit('setLayerVisible', { layername: 'HMXGYLD', isCheck: false }); //公园
bus.emit('setLayerVisible', { layername: 'GWPCYXF', isCheck: false }); //管网
bus.emit('setLayerVisible', { layername: 'HMXSX', isCheck: false }); //水系
break;
case 2:
bus.emit('setLayerVisible', { layername: 'HMJZYSQ', isCheck: false }); //建筑
bus.emit('setLayerVisible', { layername: 'HMXDLGC', isCheck: true }); //道路
bus.emit('setLayerVisible', { layername: 'HMXGYLD', isCheck: false }); //公园
bus.emit('setLayerVisible', { layername: 'GWPCYXF', isCheck: false }); //管网
bus.emit('setLayerVisible', { layername: 'HMXSX', isCheck: false }); //水系
break;
case 3:
bus.emit('setLayerVisible', { layername: 'HMJZYSQ', isCheck: false }); //建筑
bus.emit('setLayerVisible', { layername: 'HMXDLGC', isCheck: false }); //道路
bus.emit('setLayerVisible', { layername: 'HMXGYLD', isCheck: true }); //公园
bus.emit('setLayerVisible', { layername: 'GWPCYXF', isCheck: false }); //管网
bus.emit('setLayerVisible', { layername: 'HMXSX', isCheck: false }); //水系
break;
case 4:
bus.emit('setLayerVisible', { layername: 'HMJZYSQ', isCheck: false }); //建筑
bus.emit('setLayerVisible', { layername: 'HMXDLGC', isCheck: false }); //道路
bus.emit('setLayerVisible', { layername: 'HMXGYLD', isCheck: false }); //公园
bus.emit('setLayerVisible', { layername: 'GWPCYXF', isCheck: true }); //管网
bus.emit('setLayerVisible', { layername: 'HMXSX', isCheck: false }); //水系
break;
case 5:
bus.emit('setLayerVisible', { layername: 'HMJZYSQ', isCheck: false }); //建筑
bus.emit('setLayerVisible', { layername: 'HMXDLGC', isCheck: false }); //道路
bus.emit('setLayerVisible', { layername: 'HMXGYLD', isCheck: false }); //公园
bus.emit('setLayerVisible', { layername: 'GWPCYXF', isCheck: false }); //管网
bus.emit('setLayerVisible', { layername: 'HMXSX', isCheck: true }); //水系
break;
case 21:
bus.emit('SetLayerShow', ['防洪河道']);
break;
case 22:
bus.emit('SetLayerShow', ['河堤加固']);
break;
case 23:
bus.emit('SetLayerShow', ['河堤治理']);
break;
case 24:
bus.emit('SetLayerShow', ['河堤疏浚']);
break;
case 25:
break;
}
};
const SCPLTX_change = item => {
AllData.SCPLTX_changeId = item.id;
if (AllData.SCPLTX_changeId == 1) {
bus.emit('clearAllLayer');
let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
removedLayer.forEach(layer => {
bus.emit('setLayerVisible', { layername: layer, isCheck: true });
});
} else if (AllData.SCPLTX_changeId == 2) {
ClearAllProjectMap();
nextTick(() => {
initEcharts2();
});
newfiberMapbox.map.easeTo({
center: [109.488, 36.596],
zoom: 12,
pitch: 55,
});
// 先清空
bus.emit('clearAllLayer');
let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
removedLayer.forEach(layer => {
bus.emit('setLayerVisible', { layername: layer, isCheck: false });
});
bus.emit('SetLayerShow', ['雨水管网', '污水管网', '雨水分区']);
} else {
newfiberMapbox.map.easeTo({
center: [109.488, 36.596],
zoom: 12,
pitch: 55,
});
// 先清空
bus.emit('clearAllLayer');
let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
removedLayer.forEach(layer => {
bus.emit('setLayerVisible', { layername: layer, isCheck: false });
});
bus.emit('SetLayerShow', ['河流水系']);
ClearAllProjectMap();
nextTick(() => {
initEcharts3();
});
}
};
const initEcharts2 = () => {
if (!!AllData.Charts2) {
AllData.Charts2.dispose();
}
AllData.Charts2 = echarts.init(document.getElementById('CSPLTXBox2'));
// AllData.Charts2.value.off("click");
AllData.Charts2.setOption({
color: ['#00F2FF'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '5%',
containLabel: true,
},
xAxis: {
type: 'value',
max: 120,
axisPointer: {
type: 'shadow',
},
textStyle: {
color: 'aqua',
},
axisLine: {
lineStyle: {
color: 'aqua',
type: 'dashed',
},
},
},
yAxis: {
type: 'category',
data: ['沿河北岸', '沿河南岸', '水库水面', '南川河西岸', '杜甫川河', '李渠-姚店'],
axisLabel: {
formatter: '{value}',
},
axisLine: {
lineStyle: {
color: 'white',
},
},
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['#184E5A'],
},
},
},
series: [
{
type: 'bar',
data: [90, 78, 50, 42, 68, 61],
barWidth: '12px',
showBackground: true,
itemStyle: {
// borderRadius: 10, // 统一设置四个角的圆角大小
borderRadius: [10, 10, 10, 10], //（顺时针左上，右上，右下，左下）
},
},
],
});
// AllData.Charts2.on("click", (param) => {
// console.log(param);
// let data = {
// title: "风险监测",
// comIDs: ["RQ_FengXianJianCe"],
// };
// bus.emit("publicDialog", data);
// });
};
const initEcharts3 = () => {
if (!!AllData.Charts3) {
AllData.Charts3.dispose();
}
AllData.Charts3 = echarts.init(document.getElementById('CSPLTXBox3'));
// AllData.Charts3.value.off("click");
AllData.Charts3.setOption({
color: ['#159AFF', '#34FFBD', '#68BEFF', '#BC6DFF', '#F17777'],
// tooltip: {
// trigger: "item",
// },
legend: {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
textStyle: {
color: '#fffd', // 图例文字颜色
},
show: false,
},
series: [
{
type: 'pie',
radius: ['70%', '90%'],
center: ['30%', '50%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 0,
},
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: AllData.Echarts3Data,
},
],
});
// AllData.Charts3.on("click", (param) => {
// console.log(param);
// let data = {
// title: "风险监测",
// comIDs: ["RQ_FengXianJianCe"],
// };
// bus.emit("publicDialog", data);
// });
};
const initEcharts4 = () => {
if (!!AllData.Charts4) {
AllData.Charts4.dispose();
}
AllData.Charts4 = echarts.init(document.getElementById('CSPLBZTS'));
var Data = {};
Data.yAxis = [141.49, 58.3, 14, 33, 39];
var barTopColor = ['#fe7285FF', '#1f93ffFF', '#31e1adFF', '#e4cd61FF', '#12f9ffFF'];
var barBottomColor = [
'RGBA(154, 102, 125, 0.6)',
'RGBA(17, 109, 182, 0.6)',
'RGBA(27, 152, 136, 0.6)',
'RGBA(126, 138, 92, 0.6)',
'RGBA(10, 162, 178, 0.6)',
];
var barWidth = 20;
AllData.Charts4.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: 30,
containLabel: true,
},
xAxis: {
type: 'category',
data: ['防洪河道', '河堤加固', '河堤治理', '河堤疏浚', '截洪渠'],
axisLine: {
lineStyle: {
color: 'white',
},
},
},
yAxis: [
{
name: '长度(Km)',
type: 'value',
axisLabel: {
color: '#ffffff',
show: true,
},
nameTextStyle: {
color: '#ffffff',
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#ffffff',
},
},
alignTicks: true,
},
],
series: [
{
name: '数量',
type: 'pictorialBar',
symbolSize: [barWidth, 10],
symbolOffset: [0, -6],
symbolPosition: 'end',
z: 12,
itemStyle: {
normal: {
color: function (params) {
return barTopColor[params.dataIndex];
},
},
},
data: Data.yAxis,
},
// {
// name: "",
// type: "pictorialBar",
// symbolSize: [barWidth + 10, 15],
// symbolOffset: [0, 8],
// z: 10,
// itemStyle: {
// normal: {
// color: "transparent",
// borderColor: barTopColor,
// borderType: "solid",
// borderWidth: 10,
// },
// },
// data: Data.yAxis,
// },
// {
// name: "",
// type: "pictorialBar",
// symbolSize: [barWidth + 20, 20],
// symbolOffset: [0, 12],
// z: 12,
// itemStyle: {
// normal: {
// color: "transparent",
// borderColor: barTopColor,
// borderType: "solid",
// borderWidth: 10,
// },
// },
// data: Data.yAxis,
// stack: "check",
// },
// {
// name: "",
// type: "pictorialBar",
// symbolSize: [barWidth + 25, 20],
// symbolOffset: [0, 12],
// z: 12,
// itemStyle: {
// normal: {
// color: "transparent",
// borderColor: "#3ACDC5",
// borderType: "solid",
// borderWidth: 10,
// },
// },
// data: Data.yAxis,
// stack: "check",
// },
{
name: '',
type: 'bar',
barWidth: barWidth,
barGap: '10%', // Make series be overlap
barCateGoryGap: '10%',
itemStyle: {
normal: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: barTopColor[params.dataIndex],
},
{
offset: 0,
color: barBottomColor[params.dataIndex],
},
]);
},
opacity: 0.8,
},
},
data: Data.yAxis,
},
// {
// // smooth: true, //变为曲线 默认false折线
// name: "个数",
// type: "line",
// data: props.data.yAxis2,
// color: "#FFF21C",
// },
],
});
AllData.Charts4.on('click', param => {
console.log(param);
let data = [
{
name: '防洪河道',
num: 21,
},
{
name: '河堤加固',
num: 22,
},
{
name: '河堤治理',
num: 23,
},
{
name: '河堤疏浚',
num: 24,
},
];
data.forEach(element => {
if (element.name == param.name) {
ClickDiv(element.num);
}
});
});
};
// 清除地图上所有的海绵项目
const ClearAllProjectMap = () => {
bus.emit('setLayerVisible', { layername: 'HMJZYSQ', isCheck: false }); //建筑
bus.emit('setLayerVisible', { layername: 'HMXDLGC', isCheck: false }); //道路
bus.emit('setLayerVisible', { layername: 'HMXGYLD', isCheck: false }); //公园
bus.emit('setLayerVisible', { layername: 'GWPCYXF', isCheck: false }); //管网
bus.emit('setLayerVisible', { layername: 'HMXSX', isCheck: false }); //水系
};
onMounted(() => {
initEcharts4();
window.addEventListener('resize', initEcharts4);
//mapBoxVectorLayer.addGeojsonPolygonWithLabel('yanAnPaiShuiArea', yanAnPaiShuiArea);
let initeGLTimer = setInterval(() => {
if (!newfiberMapbox) return;
addProjectionLayer();
newfiberMapbox.map.easeTo({
center: [109.488, 36.596],
zoom: 13,
pitch: 55,
});
clearInterval(initeGLTimer);
}, 100);
});
onBeforeUnmount(() => {
// clearInterval(weatherTimer.value);
// weatherTimer.value = null;
ClearAllProjectMap();
newfiberMapbox.map.easeTo({
center: [109.488, 36.596],
zoom: 12,
pitch: 55,
});
bus.emit('SetLayerShow', ['蓝色地图']);
mapBoxVectorLayer.removeByIds(['clickPoint']);
bus.emit('closeCesiumPopup');
// 先清空
// bus.emit("clearAllLayer");
// let removedLayer = ["HMJZYSQ", "HMXGYLD", "HMXDLGC", "HMXSX", "GWPCYXF"];
// removedLayer.forEach((layer) => {
// bus.emit("setLayerVisible", { layername: layer, isCheck: false });
// });
// 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;
z-index: 120;
.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;
cursor: pointer;
.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;
}
}
.CSPLTXBox {
width: 100%;
height: calc(100% - 70px);
margin-top: 5px;
position: relative;
#CSPLTXBox3 {
width: 100%;
height: 100%;
}
#lengedBox {
width: 180px;
height: 100%;
position: absolute;
right: 0;
top: 0;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-evenly;
align-items: center;
.LengedList {
width: 180px;
height: 24px;
line-height: 24px;
background: #ffffff33;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
.LengedListSK {
display: inline-block;
width: 12px;
height: 12px;
margin-left: 10px;
}
.LengedListSK0 {
background: #159aff;
}
.LengedListSK1 {
background: #34ffbd;
}
.LengedListSK2 {
background: #68beff;
}
.LengedListSK3 {
background: #bc6dff;
}
.LengedListSK4 {
background: #f17777;
}
.LengedListName {
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 12px;
color: #f4f4f4;
display: inline-block;
width: 100px;
text-align: left;
box-sizing: border-box;
padding-left: 10px;
}
.LengedListValue {
font-family: TeXGyreAdventor;
font-weight: normal;
font-size: 16px;
color: #f4f4f4;
}
}
}
.ClickDiv {
// background: #4f20004d;
width: 100%;
height: 34px;
position: absolute;
cursor: pointer;
}
.ClickDiv1 {
left: 0;
top: 0;
}
.ClickDiv2 {
left: 0;
top: 34px;
}
.ClickDiv3 {
left: 0;
top: 68px;
}
.ClickDiv4 {
left: 0;
top: 102px;
}
.ClickDiv5 {
left: 0;
top: 136px;
}
}
.SCPLTXImg {
width: 100%;
height: 100%;
}
}
.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;
// }
// }
#CSPLBZTS {
width: 100%;
height: 100%;
}
.SCPBZXImg {
width: 100%;
height: calc(100% - 10px);
margin-top: 5px;
}
.ClickDiv_2 {
width: 60px;
height: 100%;
position: absolute;
cursor: pointer;
}
.ClickDiv_21 {
top: 0;
left: 50px;
}
.ClickDiv_22 {
top: 0;
left: 120px;
}
.ClickDiv_23 {
top: 0;
left: 195px;
}
.ClickDiv_24 {
top: 0;
left: 270px;
}
.ClickDiv_25 {
top: 0;
left: 345px;
}
}
.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: 50%;
margin-left: -442px;
bottom: 170px;
.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: translateY(200px);
opacity: 0;
}
}
</style>
