yjhtgl-web/src/views/routineCommandMap/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 name="routineCommandMap">
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: 1920,
      dh: 1080,
      el: '#dashboard-container',
      // resize: process.env.NODE_ENV === 'production',
      resize: true,
      ignore: ['#aMap', '#YztMap', '#positionMap']
    },
    false
  );
  scale.value = getTransformScale(containerRef.value);
});

onUnmounted(() => {
  if (location.hostname != 'localhost___') {
    autofit.off();
  }
});
</script>

<style lang="scss" scoped>
.dashboard-container {
  width: 1920px;
  height: 1080px;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  .bg {
    width: 100%;
    background: url('@/assets/images/bg.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .dashboard-content {
    padding: 0 15px;
    display: flex;
    width: 100%;
    height: calc(1080px - 70px);
    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: 228px;
  left: 0;
  z-index: 9;
  width: 55px;
  height: 57px;
  cursor: pointer;
}

.arrow-icon2 {
  position: absolute;
  bottom: 228px;
  right: 0;
  z-index: 9;
  width: 55px;
  height: 57px;
  cursor: pointer;
}
::-webkit-scrollbar-thumb {
  background-color: #227dfe !important;
}

::-webkit-scrollbar-track {
  background-color: transparent !important;
}
</style>