智慧园区前端大屏
shuishen
2025-09-15 17a81d641608545682e3f79f7c6090cac48fe81a
src/views/pd/index.vue
@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-10 15:27:59
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-25 20:33:22
 * @LastEditTime: 2025-09-07 15:26:12
 * @FilePath: \bigScreen\src\views\pd\index.vue
 * @Description: 综合设计
 * 
@@ -13,58 +13,64 @@
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
    showPanel.value = !showPanel.value
}
nextTick(() => {
  EventBus.emit('restHandleCheckChange', `3-3-4`)
    EventBus.emit('restHandleCheckChange', `3-9`)
})
onUnmounted(() => {
  EventBus.emit('restHandleDelChange', `3-3-4`)
    EventBus.emit('restHandleDelChange', `3-9`)
})
</script>
<template>
  <div class="container page-container">
    <div class="telescopic-panel" @click="showPanelChange">
      <el-icon v-show="showPanel">
        <CaretLeft />
      </el-icon>
      <el-icon v-show="!showPanel">
        <CaretRight />
      </el-icon>
    </div>
    <div class="container page-container">
        <div class="telescopic-panel" @click="showPanelChange">
            <el-icon v-show="showPanel">
                <CaretLeft />
            </el-icon>
            <el-icon v-show="!showPanel">
                <CaretRight />
            </el-icon>
        </div>
    <dynamic-panel v-show="showPanel" @closePanel="showPanelChange"></dynamic-panel>
  </div>
        <dynamic-panel v-model:showPanel="showPanel" @closePanel="showPanelChange"></dynamic-panel>
        <right-container v-show="mapStore.showPreLevel"></right-container>
    </div>
</template>
<style lang="scss" scoped>
.container {
  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;
  }
    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>