首页显示与隐藏按钮完善

guanqb

2023-04-07 88ecb47aa7ce189f27d2fbfd3a00bd7234ae3b49

首页显示与隐藏按钮完善

 src/components/map/index.vue

@@ -10,20 +10,24 @@
-->
<template>
    <div class="viewer-box" id="viewer-container">
        <slot ref="mainContent" name="mainContent"></slot>
        <slot name="showButton"></slot>
    <slot ref="mainContent" name="mainContent"></slot>
    <slot name="showButton"></slot>
        <div class="over-look-btn">
            <el-tooltip content="一键俯视" placement="top" effect="dark">
                <i class="fa fa-eye" style="vertical-align: middle; cursor: pointer" @click="overLookClick"></i>
            </el-tooltip>
            <i class="fa fa-eye" style="vertical-align: middle; cursor: pointer" @click="overLookClick"></i>
        </el-tooltip>
        </div>
        <!-- 全屏控制按钮 -->
        <div class="screen-full-btn">
            <el-tooltip v-if="isFullscreen" content="缩放" placement="top" effect="dark">
                <i class="fa fa-compress" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
            </el-tooltip>
            <el-tooltip v-if="!isFullscreen" content="全屏" placement="top" effect="dark">
                <i class="fa fa-expand" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
            <!-- <el-tooltip v-if="isFullscreen" content="缩放" placement="top" effect="dark">
                                                                                <i class="fa fa-compress" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
                                                                            </el-tooltip> -->

            <!-- <el-tooltip v-if="!isFullscreen" content="全屏" placement="top" effect="dark">
                                                                                    <i class="fa fa-expand" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
                                                                                </el-tooltip> -->
            <el-tooltip content="显示/隐藏" placement="top" effect="dark">
                <i class="fa fa-expand" style="vertical-align: middle; cursor: pointer" @click="switchShowHomeContent"></i>
            </el-tooltip>
        </div>
        <!-- 切换矢量图按钮 -->
@@ -733,6 +737,26 @@
            }
        },

        // 切换首页显示隐藏
        switchShowHomeContent () {
            this.$store.commit('SET_ISSHOWHOMECONTENT', !this.$store.state.popupParams.isShowHomeContent)

            if (this.$store.state.popupParams.isShowHomeContent) {
                if (document.querySelector('.dc-container .dc-zoom-controller').classList.contains('homebottom')) return
                document.querySelector('.dc-container .dc-zoom-controller').classList.add('homebottom')
                document.querySelector('.screen-full-btn').classList.add('homebottom')
                document.querySelector('.over-look-btn').classList.add('homebottom')
                document.querySelector('.image-switch-icon-btn').classList.add('iconbottom')
            } else {
                if (!document.querySelector('.dc-container .dc-zoom-controller').classList.contains('homebottom')) return
                document.querySelector('.dc-container .dc-zoom-controller').classList.remove('homebottom')
                document.querySelector('.screen-full-btn').classList.remove('homebottom')
                document.querySelector('.over-look-btn').classList.remove('homebottom')
                document.querySelector('.image-switch-icon-btn').classList.remove('iconbottom')
            }

        },

        /**
         * 在图层中添加实体(点)
         * @param {*} item 图标

 src/store/getters.js

@@ -21,6 +21,7 @@
    houseDeepDataPopupData: (state) => state.popupParams.houseDeepDataPopupData,
    videoRowClickPopup: (state) => state.popupParams.videoRowClickPopup,
    videoRowClickPopupData: (state) => state.popupParams.videoRowClickPopupData,
    isShowHomeContent: (state) => state.popupParams.isShowHomeContent,
}

export default getters

 src/store/modules/popupParams.js

@@ -30,7 +30,9 @@
        videoRowClickPopupData: {},

        houseDeepDataPopup: false,
        houseDeepDataPopupData: {}
        houseDeepDataPopupData: {},

        isShowHomeContent: true,
    },

    mutations: {
@@ -81,7 +83,11 @@

        SET_VIDEOROWCLICKPOPUPDATA (state, videoRowClickPopupData) {
            state.videoRowClickPopupData = videoRowClickPopupData
        }
        },

        SET_ISSHOWHOMECONTENT (state, isShowHomeContent) {
            state.isShowHomeContent = isShowHomeContent
        },
    },

    actions: {

 src/styles/dc/index.scss

@@ -61,7 +61,7 @@
    justify-content: center;
    position: absolute;
    left: 10px;
    bottom: 10px;
    bottom: 244px;
    width: 36px;
    height: 36px;
    font-size: 20px;

 src/styles/media/index.scss

@@ -2634,7 +2634,14 @@
                }

                // 地图，控制按钮
                .over-look-btn,
                .over-look-btn {
                    left: countSizeVh(10);
                    bottom: countSizeVh(224);
                    width: countSizeVh(36);
                    height: countSizeVh(36);
                    font-size: countSizeVh(20);
                }

                .screen-full-btn {
                    left: countSizeVh(10);
                    bottom: countSizeVh(10);

 src/views/home/index.vue

@@ -10,7 +10,7 @@
-->

<template>
    <div class="home-page container">
    <div class="home-page container" v-show="isShowHomeContent">
        <left-container class="left-container" @showpeopledetail="showpeopledetail"
            @showkeypersondetail="showkeypersondetail" ref="leftContainer"
            @showlanddetail="showlanddetail"></left-container>
@@ -311,6 +311,8 @@
let DataSourcesArray = []
let loading = null

import { mapGetters } from 'vuex'


let treeData = [
    {
@@ -524,6 +526,10 @@
    components: { leftContainer, rightContainer, bottomContainer, schedulingList, landDetailsBox, areaDetailsBox, keyPersonBox },

    computed: {
        ...mapGetters([
            'isShowHomeContent'
        ]),

        positionColor () {
            return (row) => {
                if (row.X && row.X != 0
@@ -1911,6 +1917,15 @@
    destroyed () {
        this.$store.commit('SET_MAPSEARCHPOPUP', false)

        if (!this.$store.state.popupParams.isShowHomeContent) {
            this.$store.commit('SET_ISSHOWHOMECONTENT', true)
            if (document.querySelector('.dc-container .dc-zoom-controller').classList.contains('homebottom')) return
            document.querySelector('.dc-container .dc-zoom-controller').classList.add('homebottom')
            document.querySelector('.screen-full-btn').classList.add('homebottom')
            document.querySelector('.over-look-btn').classList.add('homebottom')
            document.querySelector('.image-switch-icon-btn').classList.add('iconbottom')
        }

        loading && loading.close()

        this.clearPolygonLayer()