qjkankan_v1.1.1/packages/qjkankan-editor/src/framework/play/pano/index.vue

<template>
  <div class="panocon" :class="[routerName]">
    <div v-show="currentScene.type !== '4dkk'" id="pano"></div>
    <!-- 调试信息： {{ currentScene }} -->
    <iframe
      id="iframe-4dkk"
      :class="currentSceneVersion"
      width=""
      v-if="currentScene.type === '4dkk'"
      :src="`${locationOrigin}/sp${
        currentSceneVersion === 'V3'
          ? 'c'
          : currentSceneVersion === 'V4'
          ? 'g'
          : 'g'
      }.html?m=${currentScene.sceneCode}&lang=${lang}`"
      frameborder="0"
    />

    <div
      class="showexplanation"
      v-if="
        showExplanation &&
        currentScene.explanation &&
        currentScene.explanation.audioId
      "
    >
      <img :src="require(`@/assets/images/commentary@2x.png`)" alt="" />
    </div>
    <list></list>

    <template
      v-if="showSnapshot && currentScene && currentScene.type !== '4dkk'"
    >
      <snapshot :showFlash="showFlash"></snapshot>
      <button
        class="ui-button submit set-initial-view"
        :class="{ disable: currentScene.type === '4dkk' }"
        @click="onClick"
      >
        {{ $i18n.t("screen.setting_screen") }}
      </button>
    </template>
  </div>
</template>

<script>
import list from "./components/list";
import { mapGetters } from "vuex";
import * as krfn from "@/core/index.js";
import { $waiting } from "@/components/shared/loading";
import Snapshot from "@/components/Snapshot";
import { uploadCover, searchInAll3DScenes } from "@/api";
import config from "@/config";
import { isUpgradeAdapter } from "@/utils/fixVersion";

let __krfn = krfn.default;

export default {
  components: { list, Snapshot },
  data() {
    return {
      showFlash: false,
      inter: null,
      lang: config.lang || "zh",
      locationOrigin: process.env.VUE_APP_PROXY_URL_ROOT,
      currentSceneVersion: "V4",
    };
  },
  computed: {
    routerName() {
      return this.$route.name;
    },
    ...mapGetters({
      currentScene: "scene/currentScene",
      info: "info",
      isConfirmingPosi: "tags/isConfirmingPosi",
    }),

    showSnapshot() {
      return this.$route.name == "screen";
    },
    showExplanation() {
      return this.$route.name == "explanation";
    },
  },
  watch: {
    "$route.name": function (newVal) {
      __krfn.utils.toggleHotspot(this.$getKrpano(), newVal == "hotspot");
      this.handleRouterCoverForCap();
    },
    currentScene(newVal) {
      if (newVal) {
        this.$nextTick(() => {
          this.$bus.emit("initView", newVal.icon);
        });
      }
      if (newVal.type == "4dkk") {
        $("#pano").empty();
        if (!newVal.version) {
          // v1.3之前在作品中新增的三维场景，没有version这个值，需要查询。
          searchInAll3DScenes(
            {
              searchKey: newVal.sceneTitle,
            },
            (res) => {
              const originItem = res.data.list.find((item) => {
                return item.num === newVal.sceneCode;
              });
              const isVersion = isUpgradeAdapter(originItem.isUpgrade);
              newVal.version = isVersion;
              this.currentSceneVersion = isVersion;
            }
          );
        } else {
          this.currentSceneVersion = newVal.version;
        }
        this.handleIFrameCss();
      } else {
        $("#pano").empty();
        window.vrInitFn = () => {
          $waiting.hide();
          __krfn.utils.initHotspot(
            this.$getKrpano(),
            newVal && newVal.someData,
            true
          );
          __krfn.utils.toggleHotspot(
            this.$getKrpano(),
            this.$route.name == "hotspot"
          );
        };
        window.vrViewFn = () => {
          try {
            let visual = newVal.initVisual;
            const { sky, earth } = newVal.customMask;
            this.handleVisual(visual);
            this.handleSkyCover(sky);
            this.handleEarthCover(earth);
          } catch (error) {
            console.error(error);
          }
        };

        var settings = {
          "events[skin_events].onxmlcomplete": "js(window.vrViewFn());",
          "events[skin_events].onloadcomplete": "js(window.vrInitFn());",
        };
        if (newVal) {
          removepano("#pano");
          $waiting.show();

          embedpano({
            // http://oss-xiaoan.oss-cn-shenzhen.aliyuncs.com/720yun_fd_manage/fd720_Va0LrkXW3/vtour/tour.xml
            // xml: "%HTMLPATH%/static/template/tour.xml",
            xml: `${this.$cdn}/720yun_fd_manage/${newVal.sceneCode}/vtour/tour.xml`,
            swf: "%HTMLPATH%/static/template/tour.swf",
            target: "pano",
            html5: "auto",
            mobilescale: 1,
            vars: settings,
            webglsettings: { preserveDrawingBuffer: true },
            passQueryParameters: true,
          });
        }
      }
    },
    isConfirmingPosi(newVal) {
      this.inter && clearInterval(this.inter);
      this.inter = null;
      console.log("isConfirmingPosi", newVal);
      if (newVal) {
        this.inter = setInterval(() => {
          __krfn.utils.getCurrentMousePosition(this.$getKrpano(), newVal);
        }, 20);
      } else {
        this.$bus.emit("resethotspotTitle", "");
      }
    },
  },
  methods: {
    updateInfo() {
      let iidx = this.info.scenes.findIndex(
        (item) => this.currentScene.sceneCode == item.sceneCode
      );
      if (iidx > -1) {
        this.info.scenes[iidx] = {
          ...this.currentScene,
        };
      }
      this.$store.commit("SetInfo", this.info);
    },
    onClick() {
      this.$bus.emit("toggleFlash", true);
      let canvas = $("#krpanoSWFObject canvas")[0];
      let data = __krfn.utils.setInitView(this.$getKrpano(), canvas);
      uploadCover({ file: data.url, filename: "initCover.jpg" }, (res) => {
        if (res.code == 0) {
          this.currentScene.icon = res.data;
          this.currentScene.initVisual = {
            hlookat: data.hlookat,
            vlookat: data.vlookat,
          };
          this.$bus.emit("toggleFlash", false);
          this.$bus.emit("initView", res.data);
          this.updateInfo();
          this.$msg.success(this.$i18n.t("gather.setting_success"));
          this.$store.commit("SetInfo", this.info);
        }
      });
    },
    addhotspot(param) {
      __krfn.utils.addhotspot(this.$getKrpano(), param, true);
      this.$store.commit("tags/setIsConfirmingPosi", param.name);
    },

    handleVisual(visual) {
      this.$getKrpano().set(
        "view.vlookat",
        "vlookat" in visual ? visual.vlookat : ""
      );
      this.$getKrpano().set(
        "view.hlookat",
        "hlookat" in visual ? visual.hlookat : ""
      );
      this.$getKrpano().set("view.limitview", "lookat");
      this.$getKrpano().set(
        "view.vlookatmin",
        "vlookatmin" in visual ? visual.vlookatmin : "-90"
      );
      this.$getKrpano().set(
        "view.vlookatmax",
        "vlookatmax" in visual ? visual.vlookatmax : "90"
      );
    },
    /**
     * 1.6 处理遮罩层
     * @param {*} sky
     */
    handleSkyCover(sky) {
      if (sky) {
        if (sky.isShow) {
          this.$getKrpano().set("hotspot[peaklogo].visible", true);
          sky.icon && this.$getKrpano().set("hotspot[peaklogo].url", sky.icon);
          sky.scale &&
            this.$getKrpano().set("hotspot[peaklogo].scale", sky.scale);
        } else {
          this.$getKrpano().set("hotspot[peaklogo].visible", false);
        }
      }
    },
    /**
     * 1.6 处理遮罩层
     * @param {*} sky
     */
    handleEarthCover(earth) {
      if (earth) {
        if (earth.isShow) {
          this.$getKrpano().set("hotspot[nadirlogo].visible", true);
          earth.icon &&
            this.$getKrpano().set("hotspot[nadirlogo].url", earth.icon);
          earth.scale &&
            this.$getKrpano().set("hotspot[nadirlogo].scale", earth.scale);
        } else {
          this.$getKrpano().set("hotspot[nadirlogo].visible", false);
        }
      }
    },
    handleRouterCoverForCap() {
      const { sky, earth } = this.currentScene.customMask;
      sky.isShow &&
        this.$getKrpano() &&
        this.$getKrpano().set("hotspot[peaklogo].visible", true);
      earth.isShow &&
        this.$getKrpano() &&
        this.$getKrpano().set("hotspot[nadirlogo].visible", true);
    },
    handleIFrameCss() {
      setTimeout(() => {
        //   const css = `
        // <style type="text/css">
        // .controls-right-buttons{display:none !important};
        // .controls-left-buttons .play-control {display: none !important;}
        // </style>
        // `;
        const iframe = document.getElementById("iframe-4dkk");
        const doc = iframe.contentWindow.document;
        if (doc) {
          console.log("存在-doc");
          var css =
            ".controls-right-buttons{display:none !important} " +
            ".controls-left-buttons .play-control{display:none !important} " +
            ".link-btn{display:none !important} " +
            ".clear-box{display:none !important} " +
            ".camera-btn{display:none !important} ";
          var head = doc.head || doc.getElementsByTagName("head")[0];
          var style = doc.createElement("style");
          style.type = "text/css";
          if (style.styleSheet) {
            style.styleSheet.cssText = css;
          } else {
            style.appendChild(doc.createTextNode(css));
          }

          head.appendChild(style);
        }
      }, 1000);
    },
  },
  mounted() {
    window.__krfn = __krfn;

    this.$bus.on("addhotspot", (data) => {
      this.addhotspot(data);
    });

    this.$bus.on("openHotspot", (data) => {
      if (this.isConfirmingPosi) {
        this.$store.commit("tags/setIsConfirmingPosi", false);
      }
    });
  },
};
</script>

<style lang="less" scoped>
.panocon {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  #pano {
    width: 100%;
    height: 100%;
  }

  #iframe-4dkk {
    width: 100%;
    height: 100%;
  }

  .showexplanation {
    position: absolute;
    top: 20px;
    z-index: 999;
    right: 20px;
    width: 35px;
    height: 35px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);

    > img {
      width: 100%;
      height: 100%;
    }
  }

  button.set-initial-view {
    position: absolute;
    bottom: 260px;
    min-width: 200px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
  }
}
</style>