<template>
|
<van-floating-panel :v-model:height="height" :anchors="anchors" :content-draggable="false">
|
<div class="popCount">
|
<div class="popTitle">
|
<div class="titleLabel">图层</div>
|
|
<div class="popClose" @click="setPopClose">
|
<img src="../assets/img/close.png" />
|
</div>
|
</div>
|
|
<div class="itemContent">
|
<!-- <van-swipe :width="width">
|
<van-swipe-item v-for="(item, index) in baselayerOption" :key="index" @click="setBaseLayerChange(item)">
|
<div class="itemBox" :class="{ itemBoxActive: store.state.setBaseLayerFlag == item.name }">
|
<img :src="item.img">
|
<div class="boxbottom">{{ item.name }}</div>
|
</div>
|
</van-swipe-item>
|
</van-swipe> -->
|
<div class="boxSwip">
|
<div class="swipMenu" v-for="(item, index) in baselayerOption" :key="index" @click="setBaseLayerChange(item)">
|
<div class="itemBox" :class="{ itemBoxActive: store.state.setBaseLayerFlag == item.name }">
|
<img :src="item.img" />
|
<div class="boxbottom">{{ item.name }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="itemMenuBox" style="padding-right: 16px">
|
<label class="titleLabel"> 存量资产库 ({{ count }})</label>
|
<van-switch v-model="modelChecked" size="20px" @change="setItemSwitchChange('fs000')" />
|
</div>
|
<div class="itemMmenu">
|
<van-collapse v-model="activeName">
|
<van-collapse-item v-for="(res, key) in manageLayerOption" :key="key" :title="setTitleChange(res)"
|
:name="res.name">
|
<ul>
|
<li v-for="(item, index) in res.content" :key="index">
|
<div class="itemMenuTitle">
|
<img v-show="item.name" class="itemimg" :src="item.icon" />
|
<label> {{ item.name }} ( {{ item.count }} ) </label>
|
</div>
|
<van-switch v-model="item.checked" :disabled="item.disable" size="20px"
|
@change="setItemSwitchChange(item)" />
|
</li>
|
</ul>
|
</van-collapse-item>
|
</van-collapse>
|
</div>
|
</div>
|
</van-floating-panel>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted, computed, shallowRef } from 'vue';
|
import { useStore } from 'vuex';
|
import mapData from '../assets/js/mapData';
|
import { getJsonData } from '../api/api';
|
import mapMenu from '../assets/js/mapMenu';
|
import mapLayer from '../assets/js/mapLayer';
|
import mapBaseLayer from '../assets/js/mapBaseLayer';
|
const anchors = [Math.round(0.35 * window.innerHeight), Math.round(0.7 * window.innerHeight), Math.round(0.8 * window.innerHeight)];
|
const width = 0.5 * window.innerWidth - 10;
|
const height = ref(anchors[0]);
|
const baselayerOption = ref([]);
|
const manageLayerOption = ref([]);
|
const count = ref(0)
|
const activeName = ref([]);
|
const store = useStore();
|
const setPopClose = () => {
|
mapMenu.setMenuChange();
|
};
|
const modelChecked = ref(true);
|
const setTitleChange = res => {
|
return res.name + '(' + res.count + ')';
|
};
|
const setBaseLayerChange = res => {
|
store.state.setBaseLayerFlag = res.name;
|
mapBaseLayer.setBaseLayerChange(res)
|
// if (res.name == '矢量图层') {
|
// Viewer.imageryLayers._layers[1].show = true;
|
// Viewer.imageryLayers._layers[2].show = false;
|
// } else if (res.name == '影像图层') {
|
// Viewer.imageryLayers._layers[1].show = false;
|
// Viewer.imageryLayers._layers[2].show = true;
|
// }
|
};
|
const setItemSwitchChange = res => {
|
if (res === 'fs000') {
|
for (var i in manageLayerOption.value) {
|
const obj = manageLayerOption.value[i].content;
|
for (var j in obj) {
|
if (!obj[j].disable) {
|
obj[j].checked = modelChecked.value;
|
mapData.setBaseLayerChange(obj[j]);
|
}
|
}
|
}
|
} else {
|
mapData.setBaseLayerChange(res);
|
}
|
};
|
const setBaseLayerManagerStart = async () => {
|
if (mapData.baseLayer) {
|
baselayerOption.value = mapData.baseLayer;
|
}
|
};
|
const setManageLayerStart = async () => {
|
if (mapData.manageLayer) {
|
// = mapData.manageLayer;
|
const obj = mapData.manageLayer;
|
const std = [];
|
obj.filter(res => {
|
if (std.length == 0) {
|
std.push({
|
name: res.type,
|
content: []
|
});
|
} else {
|
const val = std.filter(item => {
|
if (res.type === item.name) {
|
return item;
|
}
|
});
|
if (val.length <= 0) {
|
std.push({
|
name: res.type,
|
content: []
|
});
|
}
|
}
|
});
|
var obj_count = 0;
|
std.filter(res => {
|
if (res.name == '土地') {
|
res.count = mapData.dlList.td;
|
} else if (res.name == '房产') {
|
res.count = mapData.dlList.fc;
|
} else if (res.name == '无形类资产') {
|
res.count = mapData.dlList.wxzc;
|
}
|
console.log(res.count);
|
obj_count = obj_count + parseFloat(res.count);
|
obj.filter(item => {
|
if (res.name == item.type) {
|
res.content.push(item);
|
}
|
});
|
});
|
manageLayerOption.value = std;
|
count.value = obj_count;
|
}
|
};
|
const setLayerStart = () => {
|
setBaseLayerManagerStart();
|
setManageLayerStart();
|
};
|
onMounted(() => {
|
setLayerStart();
|
});
|
</script>
|
|
<style lang="less" scoped>
|
.popCount {
|
padding: 0px 15px;
|
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
|
.popTitle {
|
margin-top: 10px;
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.titleLabel {
|
font-size: 18px;
|
color: rgba(0, 0, 0, 1);
|
font-weight: 700;
|
}
|
|
.popClose {
|
width: 24px;
|
height: 24px;
|
background: rgba(222, 222, 222, 1);
|
border-radius: 50%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.itemBox {
|
width: calc(22vh - 15px);
|
height: 107px;
|
border-radius: 12px;
|
border: 1px solid rgba(159, 166, 171, 1);
|
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
|
background-size: 100% 100%;
|
background: no-repeat;
|
margin-right: 1vh;
|
position: relative;
|
|
img {
|
border-radius: 12px;
|
width: 100%;
|
height: 100%;
|
z-index: 39;
|
}
|
|
.boxbottom {
|
width: calc(100% - 12px);
|
height: 24px;
|
border-radius:
|
0px 0px,
|
11px,
|
11px;
|
background: rgba(255, 255, 255, 0.7);
|
border-radius: 0px 0px 11px 11px;
|
z-index: 40;
|
bottom: 0px;
|
position: absolute;
|
display: flex;
|
align-items: center;
|
/** 文本1 */
|
font-size: 12px;
|
margin-left: 1px;
|
margin-bottom: 2px;
|
color: rgba(0, 0, 0, 1);
|
padding-left: 10px;
|
}
|
}
|
|
.itemBoxActive {
|
border: 2px solid rgba(79, 161, 255, 1);
|
}
|
|
.itemContent {
|
width: 100%;
|
margin-top: 10px;
|
|
.boxSwip {
|
display: flex;
|
}
|
|
.swipMenu {
|
display: flex;
|
overflow-x: auto;
|
}
|
}
|
|
.itemMenuBox {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-top: 15px;
|
}
|
|
.itemMmenu {
|
margin: 5px 0px;
|
flex: 1;
|
overflow: auto;
|
|
li {
|
list-style: none;
|
margin-top: 10px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
line-height: 30px;
|
font-size: 16px;
|
font-weight: 400;
|
|
color: rgba(0, 0, 0, 1);
|
}
|
|
.itemMenuTitle {
|
display: flex;
|
align-items: center;
|
|
label {
|
margin-left: 10px;
|
}
|
|
.itemimg {
|
width: 30px;
|
height: 30px;
|
}
|
}
|
}
|
|
::-webkit-scrollbar {
|
display: none;
|
}
|
|
/deep/ .van-swipe__indicators {
|
display: none !important;
|
}
|
}
|
</style>
|
