sg-cloud/src/layout/components/MultifunctionalBar.vue

<script setup>
    import { onMounted, ref, watchEffect } from 'vue';
    import commonRefs from '@/utils/commonRefs';
    import { useGlobalSettings } from '@/views/common/useGlobalSettings';
    import mapConfig from '@/config/map';
    import eventBus from '@/utils/eventBus';
    // import { useGlobalFarm } from '@/views/common/useGlobalFarm';
    // import { useGlobalFields } from '@/views/common/useGlobalFields';
    // import eventBus from '@/utils/eventBus';

    const isReady = ref(false);
    const showNoFlyZone = ref(true);
    // const showFieldFill = ref(true);
    // const showFieldName = ref(true);

    watchEffect(() => {
        const settings = useGlobalSettings().valueOf();
        showNoFlyZone.value = settings.showNoFlyZone;
        // showFieldFill.value = settings.showFieldFill;
        // showFieldName.value = settings.showFieldName;
    });

    // function init() {
    //     eventBus.emit('show-map-hd-layer', showMapHd.value);
    // }

    // function onToggleNoFlyZone() {
    //     // const result = !showMapHd.value;
    //     // eventBus.emit('show-map-hd-layer', result);
    //     // useGlobalSettings().set('showMapHd', result);
    // }

    function onToggleNoFlyZone(val) {
        // useGlobalFields().toggleFill(val);
        useGlobalSettings().set('showNoFlyZone', val);
    }

    // function onToggleName(val) {
    //     // useGlobalFields().toggleName(val);
    //     useGlobalSettings().set('showFieldName', val);
    // }

    let map;

    onMounted(async () => {
        map = await commonRefs.getRef('map');
        isReady.value = true;
        // init();
    });

    function onResetZoom() {
        map.setZoom(mapConfig.zoom);
        map.setCenter(mapConfig.center);
        // map.setPitch(0);
        // map.setBearing(0);
        eventBus.emit('hide-all-panels');
    }
</script>

<template>
    <div :class="s.root" v-if="isReady">
        <t-tooltip content="视角回归" placement="left">
            <div class="cell" @click="onResetZoom">
                <t-icon name="earth" />
            </div>
        </t-tooltip>
        <t-popup placement="left-bottom" show-arrow :overlay-class-name="s.popup_single_col">
            <div class="cell">
                <t-icon name="setting" />
            </div>
            <template #content>
                <t-space size="small" align="center">
                    <t-switch :label="['显示', '隐藏']" :value="showNoFlyZone" @change="onToggleNoFlyZone" />
                    <span>禁飞区</span>
                </t-space>
            </template>
        </t-popup>
    </div>
</template>

<style lang="less" module="s">
    .popup_single_col {
        :global {
            .t-popup__content {
                padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l);
                display: grid;
                grid-template-columns: 1fr;
                gap: var(--td-comp-margin-m);
            }
        }
    }

    .popup_free {
        :global {
            .t-popup__content {
                padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l);
            }

            .top {
                display: grid;
                grid-template-columns: repeat(5fr);
                gap: var(--td-comp-margin-m);

                .t-space {
                    opacity: 0.6;
                    transition: opacity .2s ease;

                    .icon {
                        border: 2px solid transparent;
                        border-radius: 100%;
                        padding: 1px;
                        transition: border .2s ease;
                        cursor: pointer;

                        img {
                            vertical-align: top;
                            transition: opacity .2s ease;
                        }
                    }

                    &.active {
                        opacity: 1;

                        .icon {
                            border-color: var(--td-brand-color);
                        }
                    }
                }
            }
        }
    }

    .root {
        position: absolute;
        bottom: 40px;
        right: 10px;
        background-color: fade(black, 35%);
        backdrop-filter: blur(6px);
        border-radius: 100px;
        border: 1px solid white;
        padding: 10px;
        color: white;
        pointer-events: auto;

        :global {
            .cell {
                padding: 10px 0;
                font-size: 12px;
                text-align: center;
                border-top: 1px solid fade(white, 50%);
                cursor: pointer;

                &:first-child {
                    border-top: none;
                }

                .t-icon {
                    font-size: 18px;
                }
            }
        }
    }
</style>