fix: 优化实况UI放大缩小

Gary Gu

4 days ago a3e27f5cab583debe11a9c62d8cc0115783b0791

fix: 优化实况UI放大缩小

 src/Dashboard.vue

@@ -19,7 +19,13 @@
    }"
  >
    <!--头部-->
    <app-header class="absolute z-[100] top-0 left-0 right-0" :selected-id="currentProjectId" @onHomeClick="switchView" @onSelectChange="onSelectChange" />
    <app-header
      class="absolute z-[100] top-0 left-0 right-0"
      :selected-id="currentProjectId"
      @onHomeClick="switchView"
      @onSelectChange="onSelectChange"
      @fullscreenChange="fullscreenChange"
    />

    <!--页面内容-->
    <div class="content-wrapper px-[22px] py-[10px] absolute inset-0 top-[80px] flex gap-[20px]">
@@ -38,7 +44,7 @@
      <div class="w-[1080px]">
        <!-- 右侧模块 -->
        <div class="w-full h-full">
          <Home v-if="isReady" :selected-id="selectedId" />
          <Home v-if="isReady" :selected-id="selectedId" :is-full-screen="isFullScreen" />
        </div>
      </div>
    </div>
@@ -90,6 +96,7 @@
        clickTab: "home",
        iframeSrc: window.ProjectConfig.xieTongIframeSrc,
        selectedId: "",
        isFullScreen: false,
      };
    },
    computed: {
@@ -105,7 +112,9 @@
    methods: {
      onSelectChange(val) {
        this.selectedId = val;
        console.log("onSelectChange", val);
      },
      fullscreenChange(val) {
        this.isFullScreen = val;
      },
      /**
       * 切换视图

 src/components/Header.vue

@@ -102,7 +102,9 @@
      handleFullscreen() {
        if (this.$fullscreen.isFullscreen) {
          this.$fullscreen.exit();
          this.$emit("fullscreenChange", false);
        } else {
          this.$emit("fullscreenChange", true);
          this.$fullscreen.request();
        }
      },

 src/views/Home.vue

@@ -63,6 +63,18 @@
              v-if="currentView === '720'"
            ></iframe>
          </div>
          <!-- 项目 -->
          <div class="w-full h-full" ref="videoWrapper" v-if="currentView === 'project'">
            <video
              controls
              muted
              controlslist="nodownload"
              autoplay
              class="video-box"
              ref="videoElement"
              :style="'width: 100%; height: 450px;background-color: #000'"
            ></video>
          </div>
          <!-- 720全景图版本选择 -->
          <!--<div class="w-full h-[120px] bg-[rgba(19,40,64,0.8)] absolute bottom-0 left-0 right-0 flex items-center py-[10px]" :style="isFullScreen ? 'z-index: 100; height:' : ''" v-if="currentView === '720'">
      <div v-for="item in panoVersionList" :key="item.value" :style="isFullScreen ? 'z-index: 100;' : ''">
@@ -81,18 +93,6 @@
            <img src="../assets/images/backgrounds/zoomin.png" alt="放大" class="w-[16px] h-[16px] mt-[50px] ml-[15px] cursor-pointer" v-if="isFullScreen" />
            <img src="../assets/images/backgrounds/zoomout.png" alt="缩小" class="w-[16px] h-[16px] mt-[50px] ml-[15px] cursor-pointer" v-else />
          </div>
        </div>
        <!-- 项目 -->
        <div class="w-full h-full" v-if="currentView === 'project'">
          <video
            controls
            muted
            controlslist="nodownload"
            autoplay
            class="video-box"
            ref="videoElement"
            style="width: 100%; height: 100%; background-color: #000"
          ></video>
        </div>
      </div>
    </div>
@@ -127,6 +127,10 @@
      selectedId: {
        type: String,
        default: "",
      },
      isFullScreen: {
        type: Boolean,
        default: false,
      },
    },
    data() {
@@ -244,6 +248,19 @@
        deep: true, // 深度监听对象内部变化
        immediate: true, // 立即执行一次
      },
      isFullScreen: {
        handler(newVal) {
          console.log("实况界面接收到的数据:", newVal);
          // 处理数据变化的逻辑
          if (newVal) {
            this.$refs.videoElement.style.height = "100%";
          } else {
            this.$refs.videoElement.style.height = "450px";
          }
        },
        deep: true, // 深度监听对象内部变化
        immediate: true, // 立即执行一次
      },
    },
    mounted() {
      setTimeout(() => {
@@ -269,7 +286,11 @@
        }
      }
    },

    created() {
      window.addEventListener("resize", function () {
        this.$refs.vi;
      });
    },
    methods: {
      getItemImg(item) {
        return `${window.ProjectConfig.panoBaseUrl}/Panorama${this.panoObj.PbUrl}/vtour/panos/${item.PsScenename}.tiles/thumb.jpg`;
@@ -546,7 +567,6 @@
    height: calc(100vh - 100px);
    overflow: hidden;
  }

  .top-nav {
    height: 5vh;
    display: flex;