页面添加（知识图谱，数据统计，数据分析，站点管理）

suerprisePlus

2024-07-30 e5e65bb50cbfb973f98191993ab559767eff7a53

 src/views/visual/mapView/layerManager.vue

@@ -1,23 +1,42 @@
<template>
    <Popup ref="pop" top="20px" left="calc(100% - 600px)"  :title="title" @close="close(true)" width="300px"   @cancel="close(false)">
        <el-tree></el-tree>
    <Popup ref="pop" top="20px" left="calc(100% - 600px)" :title="title" @close="close(true)" width="300px"
        @cancel="close(false)">

        <div class="layerBox">
            <el-tree show-checkbox :data="treeData" ref="tree" node-key="id" :default-checked-keys="defaultLayer"
                @check-change="handleCheckChange" :props="defaultProps"></el-tree>
        </div>
    </Popup>
</template>

<script>
import Popup from '@/components/Tool/Popup.vue';
import store from "@/store";
import mapServer from '@/assets/js/mapSdk/mapServe';

export default {
    name: 'layerManager',
    components: { Popup },
    computed: {
        getlayerTree() {
            return store.getters.getlayerTree
        }
    },
    data() {
        return {
            title: '图层管理',
            defaultProps: {
                children: 'children',
                label: 'cnName'
            },
            treeData: [],
            defaultLayer: [],
            ids: [],
        };
    },
    methods: {
        // 关闭弹窗
        close(isCloseBtn, removeLayer = true) {
            //   removeLayer && this.removeImageLayer();
            // 重置data值
            Object.assign(this.$data, this.$options.data());
            !isCloseBtn && this.$refs.pop.close();
@@ -26,9 +45,87 @@
        open() {
            this.close(true);
            this.$refs.pop.open();
            this.$nextTick(() => {
                this.setLayerStart();
            })
        },
        setLayerStart() {
            if (store.getters && store.getters.layerTree) {
                this.defaultLayer = store.getters.defaultLayer;
                this.ids = this.defaultLayer;
                this.treeData = store.getters.layerTree
            }

        },
        handleCheckChange(data, checked, indeterminate) {
            const checkIds = this.$refs.tree.getCheckedKeys()
            if (this.ids === checkIds) return
            this.ids.map(o => {
                if (checkIds.indexOf(o) < 0) {
                    const obj = this.$refs.tree.getNode(o);
                    console.log(obj.checked);
                    if (obj.checked) {
                        mapServer.addLayer(obj.data)
                    } else {
                        mapServer.removeLayer(obj.data)
                    }
                }
            })

            checkIds.map(n => {
                if (this.ids.indexOf(n) < 0) {
                    const obj = this.$refs.tree.getNode(n);
                    if (obj.checked) {
                        mapServer.addLayer(obj.data)
                    } else {
                        mapServer.removeLayer(obj.data)
                    }
                }
            })



            this.$store.dispatch('mapLayers/changeLayerTree', this.treeData)
            const ids = this.$refs.tree.getCheckedKeys()
            this.ids = ids;
            this.$store.dispatch('mapLayers/changeDefaultLayer', ids)
        },
        setServerLayerChange(data, checked) {
            if (checked) {
                mapServer.addLayer(data)
            } else {
                mapServer.removeLayer(data)
            }

        },
        getNodeList(list, checked) {
            list.map(item => {
                if (item.type == 1) {
                    if (item.children && item.children.length > 0) {
                        this.getNodeList(item.children)
                    }
                } else {
                    this.setServerLayerChange(item, checked)
                }
            })
        },
    },


};
</script>

<style></style>
<style lang="scss" scoped>
.layerBox {
    height: 680px;

    ::v-deep.el-tree {
        background: transparent !important;

        .el-tree-node__content:hover {
            color: #409EFF;
        }
    }

}
</style>