智慧园区前端大屏
shuishen
2025-09-15 17a81d641608545682e3f79f7c6090cac48fe81a
src/views/pd/index.vue
@@ -2,22 +2,51 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-10 15:27:59
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-13 16:02:07
 * @FilePath: \forest-fire\src\views\statistics\index.vue
 * @LastEditTime: 2025-09-07 15:26:12
 * @FilePath: \bigScreen\src\views\pd\index.vue
 * @Description: 综合设计
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<script setup>
import leftContainer from './components/leftContainer.vue'
import EventBus from 'utils/bus'
import dynamicPanel from './components/dynamicPanel.vue'
import { CaretLeft, CaretRight } from '@element-plus/icons-vue'
import { nextTick, onUnmounted } from 'vue'
import rightContainer from './components/rightContainer.vue'
import { useMap } from 'store/map'
const mapStore = useMap()
const showPanel = ref(true)
const showPanelChange = () => {
    showPanel.value = !showPanel.value
}
nextTick(() => {
    EventBus.emit('restHandleCheckChange', `3-9`)
})
onUnmounted(() => {
    EventBus.emit('restHandleDelChange', `3-9`)
})
</script>
<template>
    <div class="container page-container">
        <left-container></left-container>
        <div class="telescopic-panel" @click="showPanelChange">
            <el-icon v-show="showPanel">
                <CaretLeft />
            </el-icon>
            <el-icon v-show="!showPanel">
                <CaretRight />
            </el-icon>
        </div>
        <!-- <right-container></right-container> -->
        <dynamic-panel v-model:showPanel="showPanel" @closePanel="showPanelChange"></dynamic-panel>
        <right-container v-show="mapStore.showPreLevel"></right-container>
    </div>
</template>
@@ -26,5 +55,22 @@
    position: absolute;
    width: 100%;
    height: 100%;
    .telescopic-panel {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        left: 0;
        width: 20px;
        height: 60px;
        border-radius: 0 6px 6px 0;
        box-shadow: inset 0 0 40px #409eff;
        pointer-events: all;
        color: #fff;
        transform: translate(0, -50%);
        cursor: pointer;
    }
}
</style>