yjdp-web/src/views/emergencyCommandMap/index2.vue

<template>
  <div
    id="dashboard-container"
    ref="containerRef"
    class="dashboard-container"
    :style="{ transform: 'scale(' + scale.scaleX + ', ' + scale.scaleY + ')' }"
  >
    <div class="bg">
      <HeaderSection />
      <div class="dashboard-content">
        <LeftSection v-show="showLeftSection" />
        <MiddleSection :flag="true">
          <i :class="showLeftSection ? 'arrow-icon left-icon' : 'arrow-icon right-icon'" @click="handleTelescoping('left')" />
          <i :class="showRightSection ? 'arrow-icon2 right-icon' : 'arrow-icon2 left-icon'" @click="handleTelescoping('right')" />
        </MiddleSection>
        <RightSection v-show="showRightSection" :flag="true" />
      </div>
      <FooterSection style="position: absolute; bottom: 0; left: 0" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import HeaderSection from '@/components/HeaderSection/index.vue';
import LeftSection from './LeftSection/index.vue';
import RightSection from './RightSection/index.vue';
import MiddleSection from './MiddleSection.vue';
import { getTransformScale } from '@/utils';
import useAppStore from '@/store/modules/app';

const appStore = useAppStore();
const containerRef = ref();
let scale = ref({ scaleX: 1, scaleY: 1 });
let showLeftSection = computed(() => {
  return appStore.showLeftSection;
});
let showRightSection = computed(() => {
  return appStore.showRightSection;
});
const handleTelescoping = (type: string) => {
  if (type === 'left') {
    appStore.toggleLeftSection();
  } else if (type === 'right') {
    appStore.toggleRightSection();
  }
};
provide('containerScale', () => scale.value);
const resizeNumbers = () => {
  const width = 8960;
  const height = 2520;
  const containerWidth = window.innerWidth;
  const containerHeight = window.innerHeight;
  const scaleX = containerWidth / width;
  const scaleY = containerHeight / height;
  scale.value = { scaleX: scaleX, scaleY: scaleY };
};
onMounted(() => {
  scale.value = getTransformScale(containerRef.value);
  resizeNumbers();
  window.addEventListener('resize', resizeNumbers);
});

onUnmounted(() => {
  window.removeEventListener('resize', resizeNumbers);
});
</script>

<style lang="scss" scoped>
.dashboard-container {
  width: 8960px;
  height: 2520px;
  font-size: 36px;
  font-family: 'PingFang SC', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transform-origin: 0 0;
  .bg {
    width: 100%;
    background: url('@/assets/images/bg.jpg') no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .dashboard-content {
    padding: 0 81px;
    display: flex;
    height: calc(2520px - 228px);
    overflow: hidden;
  }
}
.left-icon {
  background: url('@/assets/images/left.png') no-repeat;
  background-size: 100% 100%;
}

.right-icon {
  background: url('@/assets/images/right.png') no-repeat;
  background-size: 100% 100%;
}

.arrow-icon {
  position: absolute;
  bottom: 180px;
  left: 0;
  z-index: 9;
  width: 152px;
  height: 158px;
  cursor: pointer;
}

.arrow-icon2 {
  position: absolute;
  bottom: 180px;
  right: 0;
  z-index: 9;
  width: 152px;
  height: 158px;
  cursor: pointer;
}
</style>