前端 大屏 缩放方案1

<template>
  <div class="largescreen-pc">
    <div
      class="scaleDiv"
      style="position: absolute;margin-top:165px"
      :style="{
        width: width + 'px',
        height: height + 'px',
        transform: 'scale(' + zoomX + ',' + zoomY + ')'
      }"
    >
      <div class="gis-div-class">
        <!-- 解决使用transform scale 之后，地图点位错位的问题 -->
        <iframe
          style="visibility:hidden;overflow-x:auto;overflow-y:hidden"  onload="this.style.visibility='visible'"
          className="map_iframe"
          :src="curSrc"
          frameborder="0"
          width="100%"
          height="100%"
          scrolling="no"
        ></iframe>
        <!--<dataV></dataV>-->
      </div>
    </div>
  </div>
</template>

<script>
import dataV from "./dataV.vue";
export default {
  name: "largescreen",
  components: {
    dataV
  },
  data() {
    return {
      curSrc: `./dataV`,
      page: {
        width: 4320,
        height: 1620
      },
      zoomX: 1,
      zoomY: 1,
      width: 4320,
      height: 1620,
      curData: "",
      curNewDate: "",
      clockTimer: null,
      dataTimer: null
    };
  },
  watch: {},
  created() {
    window.addEventListener("resize", this.handleResize);
    this.handleResize();
  },
  mounted() {
    console.log('window.location.pathname', window.location.pathname)
    console.log('window.location.origin', window.location.origin)
    this.dataTimer = setInterval(() => {
      this.curData = this.dateStrForma();
    }, 1000 * 60 * 30);
    this.curData = this.dateStrForma();
    this.clock();
    this.clockTimer = setInterval(() => {
      this.clock();
    }, 1000);
  },

  methods: {
    dateStrForma() {
      var nowDate = new Date();
      var year = nowDate.getFullYear();
      var month =
        nowDate.getMonth() + 1 < 10
          ? "0" + (nowDate.getMonth() + 1)
          : nowDate.getMonth() + 1;
      var day =
        nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
      var dateStr = year + "." + month + "." + day;
      return dateStr;
    },
    clock() {
      var oDate = new Date(); //创建日期对象
      this.curNewDate =
        oDate.getHours() +
        ":" +
        (oDate.getMinutes() > 9
          ? oDate.getMinutes()
          : `0${oDate.getMinutes()}`) +
        ":" +
        (oDate.getSeconds() > 9
          ? oDate.getSeconds()
          : `0${oDate.getSeconds()}`);
    },
    handleResize(event) {
      if (!this.page.width) {
        return;
      }
      let fullWidth = document.documentElement.clientWidth;
      let fullHeight = document.documentElement.clientHeight;
      let rateWidth = fullWidth / this.width;
      let rateHeight = fullHeight / this.height;
      let useRate = rateWidth;
      if (rateWidth > rateHeight) {
        useRate = rateHeight;
      }
      this.zoomX = useRate;
      this.zoomY = useRate;
    }
  },
  destroyed() {
    window.removeEventListener("resize", this.handleResize);
    if (this.clockTimer) {
      clearInterval(this.clockTimer);
    }
    if (this.dataTimer) {
      clearInterval(this.dataTimer);
    }
  }
};
</script>

<style lang="scss" scoped>
.img-bottom-class {
  background: url("./largeImg/imgbottom.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0px;
  height: 81px;
  width: 972px;
  z-index: 9;
}
.largescreen-pc {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  user-select: none;
  background: #060606;
  .gis-div-class {
    height: calc(100% - 1px);
    position: relative;
  }

  .top-div {
    text-align: center;
    background: url("./largeImg/imgtitlebig.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 162px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 100px 70px #071531;
    .top-span {
      font-size: 64px;
      font-family: PangMenZhengDao;
      font-weight: 400;
      color: #ccf3ff;
    }
  }
}
.ring-top-text {
    position: absolute;
    right: 60px;
    color: #72bbff;
    width: 500px;
  }
  .top-text-col {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;

    .el-col:nth-child(2) {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #72bbff;
    }
    .el-col:first-child {
      font-family: PangMenZhengDao;
      font-weight: 400;
      color: #72bbff;
      font-size: 24px;
    }
    .el-col {
      //   text-align: right;
    }
    .el-col:last-child {
      font-size: 48px;
      font-family: PangMenZhengDao;
      font-weight: 400;
      color: #ffffff;
    }
  }
.scaleDiv {
  // background-image: url('../../assets/images/bg.png');
  width: 1920px;
  height: 1080px;
  background-size: 100% 100%;
  position: relative;
  transform-origin: center center;
  // transform-origin: 0 0;

  background: #060606;

  // position: fixed;
}
</style>

// 常用字体适应
option && this.myChartBaoj.setOption(option);
window.addEventListener("resize", () => {
  this.refreshChart();
});
refreshChart() {
  // if (!this.myChart) return;=
  this.myChartBaoj.resize();=
  this.setFontOption();
},
setFontOption() {
 console.log("重绘了");
 let obj = {
   tooltip: {
     textStyle: {
       fontSize: fontSize(18),
     },
   },
   xAxis: [
     {
       axisLabel: {
         fontSize: fontSize(11),
         fontStyle: "normal",
         fontWeight: "bold",
       },
     },
   ],
   yAxis: [
     {
       axisLabel: {
         fontSize: fontSize(12),
         fontStyle: "normal",
       },
     },
   ],
 }
 this.myChartBaoj.setOption(obj);
},