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

<template>
  <div id="dashboard-container" ref="containerRef" class="dashboard-container">
    <div class="bg">
      <HeaderSection />
      <div class="dashboard-content">
        <LeftSection v-show="showLeftSection" />
        <MiddleSection>
          <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" />
      </div>
      <FooterSection style="position: absolute; bottom: 0; left: 0" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import LeftSection from './LeftSection/index.vue';
import RightSection from './RightSection/index.vue';
import MiddleSection from './MiddleSection.vue';
import autofit from 'autofit.js';
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);
onMounted(() => {
  autofit.init(
    {
      dw: 8960,
      dh: 2520,
      el: '#dashboard-container',
      resize: process.env.NODE_ENV === 'production',
      ignore: ['#aMap', '#YztMap']
    },
    false
  );
  scale.value = getTransformScale(containerRef.value);
});
onUnmounted(() => {
  if (location.hostname === 'localhost___') {
    autofit.off();
  }
});
</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;
  .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>