应急空间位置更新

shuishen

2025-01-15 548dcb58164aaeb7ec8a4f3425953bcd25d83c65

 src/views/pd/index.vue

@@ -9,62 +9,15 @@
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<script setup>
import EventBus from 'utils/bus'
import dynamicPanel from './components/dynamicPanel.vue'
import { CaretLeft, CaretRight } from '@element-plus/icons-vue'
import { nextTick, onUnmounted } from 'vue'

const showPanel = ref(true)

const showPanelChange = () => {
  showPanel.value = !showPanel.value
}

nextTick(() => {
  EventBus.emit('restHandleCheckChange', `3-3-4`)
  // EventBus.emit('restHandleCheckChange', `3-3-4`)
})

onUnmounted(() => {
  EventBus.emit('restHandleDelChange', `3-3-4`)
  // EventBus.emit('restHandleDelChange', `3-3-4`)
})
</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>

    <dynamic-panel v-show="showPanel" @closePanel="showPanelChange"></dynamic-panel>
  </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;
  }
}
</style>
  <div></div>
</template>