优化

hejianhao

2025-03-26 80740fa2d68fb14149282d64df4d51f62807dd06

优化

 src/components/datascreen/map.vue

@@ -313,7 +313,7 @@
                                align-items: center;
                            ">
                                <div style="color: #fff; font-size: 16px; margin-bottom: 16px; font-weight: bold;">${name}</div>
                                <div style="display: flex; justify-content: space-around; width: 100%; padding: 0 20px;">
                                <div style="display: flex; justify-content: space-around; width: 100%; padding: 0 21px;">
                                    <div style="text-align: center;">
                                        <div style="color: #66ffff; font-size: 20px; font-family: 'pangmenzhengdao'; margin-bottom: 8px;">${data.householdCount}</div>
                                        <div style="color: #fff; font-size: 12px;">安置户数(户)</div>

 src/views/DataScreen.vue

@@ -1,5 +1,11 @@
<template>
  <div class="data-screen" :style="screenStyle">
    <div v-if="!isFullscreen" class="fullscreen-mask" @click="enterFullScreen">
      <div class="fullscreen-tip">
        <i class="el-icon-full-screen"></i>
        <p>点击进入全屏模式</p>
      </div>
    </div>
    <header-panel />
    <left-panel v-if="!loading" :data="data" />
    <center-panel v-if="!loading" :data="data" />
@@ -31,7 +37,8 @@
        transformOrigin: 'left top'
      },
      data: {},
      loading: true
      loading: true,
      isFullscreen: false
    };
  },
  created() {
@@ -43,9 +50,18 @@
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
    document.addEventListener('fullscreenchange', this.handleFullscreenChange);
    document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange);
    document.addEventListener('mozfullscreenchange', this.handleFullscreenChange);
    document.addEventListener('MSFullscreenChange', this.handleFullscreenChange);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
    document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange);
    document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange);
    document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange);
    this.exitFullScreen();
  },
  methods: {
    handleResize() {
@@ -53,6 +69,44 @@
      const heightScale = window.innerHeight / 1080;
      const scale = Math.min(widthScale, heightScale);
      this.screenStyle.transform = `scale(${scale})`;
    },
    handleFullscreenChange() {
      this.isFullscreen = document.fullscreenElement || 
                         document.webkitFullscreenElement || 
                         document.mozFullScreenElement || 
                         document.msFullscreenElement;
    },
    enterFullScreen() {
      const element = document.documentElement;
      try {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
      } catch (error) {
        console.error('全屏请求失败:', error);
      }
    },
    exitFullScreen() {
      const element = document;
      try {
        if (element.exitFullscreen) {
          element.exitFullscreen();
        } else if (element.webkitExitFullscreen) {
          element.webkitExitFullscreen();
        } else if (element.mozCancelFullScreen) {
          element.mozCancelFullScreen();
        } else if (element.msExitFullscreen) {
          element.msExitFullscreen();
        }
      } catch (error) {
        console.error('退出全屏失败:', error);
      }
    }
  }
};
@@ -66,5 +120,33 @@
  overflow: hidden;
  background: url('@/assets/背景色.png') no-repeat center center;
  background-size: 100% 100%;

  .fullscreen-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    .fullscreen-tip {
      text-align: center;
      color: #fff;
      
      i {
        font-size: 48px;
        margin-bottom: 16px;
      }
      
      p {
        font-size: 24px;
      }
    }
  }
}
</style>