北京经济技术开发区经开区虚拟城市项目-【前端】-Web
lixuliang
2024-05-08 10ecfd0b60442d209d1ab4b749580ffb638d1992
src/components/index.vue
@@ -42,6 +42,29 @@
      :style="viewerStyle"
      @mousemove.native="viewerMouseMove"
    />
    <div v-if="isShowDigitalPerson" class="digital_Box">
      <div
        class="textBtn"
        @click="showTextArea"
        :class="{ active: isShowTextArea }"
      >
        <img class="legendImg" src="@/assets/img/new/文本输入.png" />
      </div>
      <iframe
        id="digital_page"
        allow="microphone;"
        :src="digitalHuman"
        :height="digitalSize.height"
        :width="digitalSize.width"
        frameborder="no"
        border="0"
        marginwidth="0"
        marginheight="0"
        scrolling="no"
        allowtransparency="yes"
      ></iframe>
    </div>
    <div
      class="controlPanel"
      :style="{
@@ -90,6 +113,7 @@
import { mapState, mapMutations } from "vuex";
import vueEvents from "@/utils/vueEvent.js";
import leftMenu from "@/components/menu/leftMenu.vue";
import mapMsg from "@/assets/js/mapMsg";
export default {
  name: "index",
@@ -122,11 +146,15 @@
      tooltipShow: false,
      signallingShow: false,
      switchKey: 0,
      isShowTA: false,
      digitalHuman: null,
      digitalSize: {},
      // viewer1Show: false,
    };
  },
  mounted() {
    this.digitalHuman = window.digitalHumanURL;
    this.digitalSize = window.digitalSize;
    let size = this.detectZoom();
    this.scale = (100 / size).toFixed(2);
    this.offset = "-" + ((size - 100) / 2).toFixed(2) + "%";
@@ -142,6 +170,16 @@
    },
    isShowHistory() {
      return this.$store.state.isShowHistory;
      F;
    },
    isShowDigitalPerson() {
      return this.$store.state.isShowDigitalPerson;
    },
    isShowTextArea() {
      if (this.$store.state.isShowTextArea) {
        this.input = "";
      }
      return this.$store.state.isShowTextArea;
    },
  },
  watch: {
@@ -159,6 +197,10 @@
  },
  methods: {
    ...mapMutations(["setLayerTreeTwoScreen"]),
    showTextArea() {
      this.$store.commit("showTextArea", !this.$store.state.isShowTextArea);
    },
    setMessgae(show, msg) {
      this.tooltipShow = show;
      this.tooltipInfo = msg ? msg : "";
@@ -304,6 +346,43 @@
  bottom: 0;
  transform: translate(-50%, 0);
}
.digital_Box {
  position: absolute;
  left: 0;
  bottom: 120px;
  z-index: 10;
}
.textBtn {
  background-image: url("~@/assets/img/new/leftCircle.png");
  background-size: 100%;
  background-color: transparent;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 20px;
  cursor: pointer;
}
.textBtn:hover {
  background-image: url("~@/assets/img/new/leftCircle-y.png");
}
.active {
  background-image: url("~@/assets/img/new/leftCircle-y.png");
}
.textBtn img {
  /* margin-top: 14px;
  margin-left: 14px; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
}
#digital_page {
  /* position: absolute;
  left: 0;
  bottom: 120px;
  z-index: 10; */
}
.trigger {
  pointer-events: all;