提交
1 parent c4aeb77 commit 16cbf134eff97dc16b1f5835b23bafa531b64a46
@zhangqy zhangqy authored on 14 Oct
Showing 1 changed file
View
731
src/views/oneMap/components/ZHHM.vue
<template>
<div id="ZHHM">
<div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
<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>
</div>
</div>
<div class="Box_Body">
<div class="HeadContent" v-if="activedname == '年际降雨变化'">丰、枯年交替出现,且降雨量变化幅度大</div>
<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>
<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">
<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"
@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"
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="[
'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>
</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="" />
<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"
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">
</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' : ''"
>
{{ item.name }}
</div>
</div> -->
<img class="SCPBZXImg" src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu1.png" alt="" />
<!-- <img
class="SCPBZXImg"
src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu1.png"
alt=""
/>
<div class="ClickDiv_2 ClickDiv_21" @click="ClickDiv(21)"></div>
<div class="ClickDiv_2 ClickDiv_22" @click="ClickDiv(22)"></div>
<div class="ClickDiv_2 ClickDiv_23" @click="ClickDiv(23)"></div>
<div class="ClickDiv_2 ClickDiv_24" @click="ClickDiv(24)"></div>
<div class="ClickDiv_2 ClickDiv_25" @click="ClickDiv(25)"></div>
<div class="ClickDiv_2 ClickDiv_25" @click="ClickDiv(25)"></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="" />
<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="" />
<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';
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: "01",
font: "新区雨水入老城,雨季内涝积水频发",
},
{
num: "02",
font: "水资源严重短缺,雨水资源利用难度大",
},
{
num: "03",
font: "排水系统不完善,雨季延河水质不稳定",
},
{
num: "04",
font: "山体沟道人居环境较差,局部存在安全隐患",
},
// {
// num: '05',
// font: '湖泊面积萎缩,城市海绵体受损',
// 城市排涝体系提升
SCPLTX_changeData: [
{
id: 1,
name: '源头减排',
name: "源头减排",
},
{
id: 2,
name: '过程控制',
name: "过程控制",
},
{
id: 3,
name: '系统治理',
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: '南川河' },
{ value: 48, name: "沿河" },
{ value: 22, name: "西川河" },
{ value: 13, name: "王瑶水库" },
{ value: 10, name: "杜甫川河" },
{ value: 7, name: "南川河" },
],
// 城市排涝保障提升
SCPLBZ_changeData: [
{
id: 1,
name: '上栏',
name: "上栏",
},
{
id: 2,
name: '中滞',
name: "中滞",
},
{
id: 3,
name: '下排',
name: "下排",
},
],
SCPLBZ_changeId: 1,
Charts4: null,
// 问题识别弹窗
WTShow: false,
});
const showPanel = ref(true); //面板展开收起
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'],
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],
["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 activedname = ref("年际降雨变化");
const weatherTimer = ref(null);
const yearList = ref([
{ name: '年际降雨变化', value: 1 },
{ name: '年内降雨量', value: 2 },
{ 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';
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,
//添加海绵项目
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('管网'))),
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 });
console.log("projectionList---", projectionList);
projectionList.forEach((item) => {
bus.emit("setGeoJSON", { json: item.data, key: item.layername });
});
//bus.emit('setLegendData', projectionList);
};
const yearclick = val => {
const yearclick = (val) => {
activedname.value = val.name;
bus.emit('checkRainL', val.value);
bus.emit("checkRainL", val.value);
// bus.emit("checkLandXDM", false);
};
 
const TuChengMoRenClick = num => {
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 });
bus.emit("clearAllLayer");
let removedLayer = ["HMJZYSQ", "HMXGYLD", "HMXDLGC", "HMXSX", "GWPCYXF"];
removedLayer.forEach((layer) => {
bus.emit("setLayerVisible", { layername: layer, isCheck: false });
});
switch (num) {
case '00':
case "00":
// 再显示
bus.emit('SetLayerShow', ['空间格局']);
bus.emit("SetLayerShow", ["空间格局"]);
break;
case '01':
case "01":
// 再显示
bus.emit('SetLayerShow', ['雨水分区', '中心城区']);
bus.emit("SetLayerShow", ["雨水分区", "中心城区"]);
break;
case '02':
case "02":
// 再显示
bus.emit('SetLayerShow', ['河流水系']);
bus.emit("SetLayerShow", ["河流水系"]);
break;
case '03':
case "03":
// 再显示
bus.emit('SetLayerShow', ['河流水系', '排水分区']);
bus.emit("SetLayerShow", ["河流水系", "排水分区"]);
break;
case '04':
case "04":
// 再显示
bus.emit('SetLayerShow', ['山体修复']);
bus.emit("SetLayerShow", ["山体修复"]);
break;
}
};
const ClickDiv = num => {
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 });
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 }); //水系
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 }); //水系
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 }); //水系
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 }); //水系
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 }); //水系
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', ['防洪河道']);
bus.emit("SetLayerShow", ["防洪河道"]);
break;
case 22:
bus.emit('SetLayerShow', ['河堤加固']);
bus.emit("SetLayerShow", ["河堤加固"]);
break;
case 23:
bus.emit('SetLayerShow', ['河堤治理']);
bus.emit("SetLayerShow", ["河堤治理"]);
break;
case 24:
bus.emit('SetLayerShow', ['河堤疏浚']);
bus.emit("SetLayerShow", ["河堤疏浚"]);
break;
case 25:
break;
}
};
const SCPLTX_change = item => {
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();
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("clearAllLayer");
let removedLayer = ["HMJZYSQ", "HMXGYLD", "HMXDLGC", "HMXSX", "GWPCYXF"];
removedLayer.forEach((layer) => {
bus.emit("setLayerVisible", { layername: layer, isCheck: false });
});
bus.emit('SetLayerShow', ['雨水管网', '污水管网', '雨水分区']);
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("clearAllLayer");
let removedLayer = ["HMJZYSQ", "HMXGYLD", "HMXDLGC", "HMXSX", "GWPCYXF"];
removedLayer.forEach((layer) => {
bus.emit("setLayerVisible", { layername: layer, isCheck: false });
});
bus.emit('SetLayerShow', ['河流水系']);
bus.emit("SetLayerShow", ["河流水系"]);
ClearAllProjectMap();
nextTick(() => {
initEcharts3();
});
const initEcharts2 = () => {
if (!!AllData.Charts2) {
AllData.Charts2.dispose();
}
AllData.Charts2 = echarts.init(document.getElementById('CSPLTXBox2'));
AllData.Charts2 = echarts.init(document.getElementById("CSPLTXBox2"));
// AllData.Charts2.value.off("click");
AllData.Charts2.setOption({
color: ['#00F2FF'],
color: ["#00F2FF"],
tooltip: {
trigger: 'axis',
trigger: "axis",
axisPointer: {
type: 'shadow',
type: "shadow",
},
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '5%',
left: "3%",
right: "4%",
bottom: "3%",
top: "5%",
containLabel: true,
},
xAxis: {
type: 'value',
type: "value",
max: 120,
axisPointer: {
type: 'shadow',
type: "shadow",
},
textStyle: {
color: 'aqua',
color: "aqua",
},
axisLine: {
lineStyle: {
color: 'aqua',
type: 'dashed',
color: "aqua",
type: "dashed",
},
},
},
yAxis: {
type: 'category',
data: ['沿河北岸', '沿河南岸', '水库水面', '南川河西岸', '杜甫川河', '李渠-姚店'],
type: "category",
data: ["沿河北岸", "沿河南岸", "水库水面", "南川河西岸", "杜甫川河", "李渠-姚店"],
 
axisLabel: {
formatter: '{value}',
formatter: "{value}",
},
axisLine: {
lineStyle: {
color: 'white',
color: "white",
},
},
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['#184E5A'],
color: ["#184E5A"],
},
},
},
series: [
{
type: 'bar',
type: "bar",
data: [90, 78, 50, 42, 68, 61],
barWidth: '12px',
barWidth: "12px",
showBackground: true,
itemStyle: {
// borderRadius: 10, // 统一设置四个角的圆角大小
borderRadius: [10, 10, 10, 10], //(顺时针左上,右上,右下,左下)
const initEcharts3 = () => {
if (!!AllData.Charts3) {
AllData.Charts3.dispose();
}
AllData.Charts3 = echarts.init(document.getElementById('CSPLTXBox3'));
AllData.Charts3 = echarts.init(document.getElementById("CSPLTXBox3"));
// AllData.Charts3.value.off("click");
AllData.Charts3.setOption({
color: ['#159AFF', '#34FFBD', '#68BEFF', '#BC6DFF', '#F17777'],
color: ["#159AFF", "#34FFBD", "#68BEFF", "#BC6DFF", "#F17777"],
// tooltip: {
// trigger: "item",
// },
legend: {
type: 'scroll',
orient: 'vertical',
type: "scroll",
orient: "vertical",
right: 10,
top: 20,
bottom: 20,
textStyle: {
color: '#fffd', // 图例文字颜色
color: "#fffd", // 图例文字颜色
},
show: false,
},
series: [
{
type: 'pie',
radius: ['70%', '90%'],
center: ['30%', '50%'],
type: "pie",
radius: ["70%", "90%"],
center: ["30%", "50%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderColor: "#fff",
borderWidth: 0,
},
label: {
show: false,
position: 'center',
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold',
fontWeight: "bold",
},
},
labelLine: {
show: false,
// };
// bus.emit("publicDialog", data);
// });
};
const initEcharts4 = () => {
if (!!AllData.Charts4) {
AllData.Charts4.dispose();
}
AllData.Charts4 = echarts.init(document.getElementById("CSPLBZTS"));
AllData.Charts4.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
tooltip: {
trigger: "axis",
formatter: (params) => {
// console.log(params);
var relVal = "" + params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
if (params[i].seriesName) {
let unit = params[i].seriesName == "年降雨量" ? "mm" : "天";
relVal +=
"<br/>" +
params[i].marker +
params[i].seriesName +
" " +
params[i].value +
unit;
}
}
return relVal;
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
top: "10%",
containLabel: true,
},
xAxis: {
type: "category",
data: ["防洪河道", "河堤加固", "河堤治理", "河堤疏浚", "截洪渠"],
 
axisLine: {
lineStyle: {
color: "white",
},
},
},
yAxis: {
type: "value",
axisLabel: {
formatter: "{value}Km",
},
max: 60,
axisPointer: {
type: "shadow",
},
axisLine: {
lineStyle: {
color: "aqua",
type: "dashed",
},
},
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ["#184E5A"],
},
},
},
series: [
{
type: "bar",
showBackground: true,
barWidth: "12px",
itemStyle: {
borderRadius: [10, 10, 0, 0], //(顺时针左上,右上,右下,左下)
},
backgroundStyle: {
// color: "red",
shadowBlur: 10,
borderRadius: [10, 10, 0, 0], //(顺时针左上,右上,右下,左下)
},
data: [
{
value: 22,
itemStyle: {
color: "#FE7285",
shadowColor: "#FE7285",
borderType: "dashed",
},
},
{
value: 33,
itemStyle: {
color: "#1F93FF",
shadowColor: "#1F93FF",
borderType: "dashed",
},
},
{
value: 14,
itemStyle: {
color: "#31E1AD",
shadowColor: "#31E1AD",
borderType: "dashed",
},
},
{
value: 33,
itemStyle: {
color: "#E4CD61",
shadowColor: "#E4CD61",
borderType: "dashed",
},
},
{
value: 39,
itemStyle: {
color: "#12F9FF",
shadowColor: "#12F9FF",
borderType: "dashed",
},
},
],
},
],
});
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 }); //水系
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(() => {
addProjectionLayer();
newfiberMapbox.map.easeTo({
center: [109.488, 36.596],
zoom: 13,
pitch: 55,
});
initEcharts4();
window.addEventListener("resize", initEcharts4);
//mapBoxVectorLayer.addGeojsonPolygonWithLabel('yanAnPaiShuiArea', yanAnPaiShuiArea);
});
 
onBeforeUnmount(() => {
center: [109.488, 36.596],
zoom: 12,
pitch: 55,
});
bus.emit('SetLayerShow', ['蓝色地图']);
bus.emit("SetLayerShow", ["蓝色地图"]);
// 先清空
bus.emit('clearAllLayer');
let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
removedLayer.forEach(layer => {
bus.emit('setLayerVisible', { layername: layer, isCheck: false });
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>
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%);
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;
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%);
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%;
color: #d1dff7;
text-align: center;
float: left;
box-sizing: border-box;
background: url('@/assets/images/Sponge_screen/HaiMian/HaiMian_hezi.png') no-repeat center;
background: url("@/assets/images/Sponge_screen/HaiMian/HaiMian_hezi.png")
no-repeat center;
}
.KJGJ_List2_WFont {
float: left;
font-family: Source Han Sans CN;
 
.WTSBList {
width: 100%;
height: 44px;
background: url('@/assets/images/Sponge_screen/HaiMian/HaiMian_ListBack.png');
background: url("@/assets/images/Sponge_screen/HaiMian/HaiMian_ListBack.png");
margin-top: 9px;
cursor: pointer;
 
.WTSBList_num {
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%);
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;
// font-size: 14px;
// color: #ebfeff;
// }
// }
#CSPLBZTS {
width: 100%;
height: 100%;
}
.SCPBZXImg {
width: 100%;
height: calc(100% - 10px);
margin-top: 5px;
box-sizing: border-box;
.Box_header {
width: 100%;
height: 43px;
background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
background: url("@/assets/images/Sponge_screen/Box_HeaderBackground.png") no-repeat
center;
background-size: cover;
font-family: PangMenZhengDao;
font-weight: 400;
font-size: 23px;