qjkankan_v1.1.1/packages/qjkankan-editor/src/views/screen/Setting.vue

<template>
  <div class="view-setting" app-border dir-left>
    <div class="title">
      {{ $i18n.t("screen.init_screen") }}
      <i
        class="iconfont icon-help_i tool-tip-for-editor"
        v-tooltip="$i18n.t('screen.screen_tips')"
      />
    </div>
    <template v-if="currentScene.type !== '4dkk'">
      <img
        class="preview"
        v-if="initImg"
        :src="`${initImg}?${Math.random()}`"
        alt=""
      />
      <img
        class="placeholder"
        v-else
        src="@/assets/images/pano-image-placeholder.png"
        alt=""
      />
      <div class="item">
        <div class="">垂直视角限制</div>
        <slider
          v-model="vlookat"
          range
          show-stops
          :marks="marks"
          :min="-90"
          :max="90"
        >
        </slider>
      </div>

      <div class="col">
        <span>应用到全部全景图</span>
        <Switcher :value="applyToAll" @change="onSwitcherChange"></Switcher>
      </div>
    </template>

    <div class="goto-4dkk-tip" v-if="currentScene.type === '4dkk'">
      <div class="img-wrap">
        <img
          class=""
          src="@/assets/images/default/goto-4dage.png"
          alt=""
          draggable="false"
        />
        <div class="tip-text">
          {{ $i18n.t("screen.goto_4dkk_edit_tips") }}
        </div>
      </div>
      <button class="ui-button submit" @click="onClickGo4dkk">
        {{ $i18n.t("navigation.go_scene_editor") }}
      </button>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { Slider } from "element-ui";
import Switcher from "@/components/shared/Switcher";
export default {
  components: {
    Slider,
    Switcher,
  },
  computed: {
    ...mapGetters({
      currentScene: "scene/currentScene",
    }),
  },
  data() {
    return {
      marks: {
        "-90": "-90°",
        90: "90°",
      },
      initImg: "",
      vlookat: null,
      applyToAll: false,
    };
  },
  watch: {
    "$route.name": {
      handler() {
        this.handleHiddenAllMasks();
      },
      immediate: true,
    },
    "currentScene.id": {
      handler(val, oldVal) {
        if (val && val !== oldVal) {
          this.applyToAll = false;
          this.handleHiddenAllMasks();
        }
      },
      immediate: true,
    },

    "currentScene.initVisual": {
      handler(val) {
        if (val) {
          const { vlookatmin, vlookatmax } = val;
          if (vlookatmin && vlookatmax) {
            this.vlookat = [vlookatmin, vlookatmax];
          }
        }
      },
      deep: true,
      immediate: true,
    },
    vlookat: {
      handler: function (val) {
        this.handleVlootAt(val);
      },
    },
    applyToAll: {
      handler: function (val) {
        if (val) {
          const kr = this.$getKrpano();
          const vlookat =kr.get("view.vlookat");
          const hlookat = kr.get("view.hlookat");
          console.log("当前视野", vlookat, hlookat);
          this.$confirm({
            content: "是否应用到全部全景图？",
            ok: () => {
              this.$store.dispatch("scene/applyInitVisualToAll", {
                vlookat,
                hlookat,
              });
            },
            no: () => {
              this.applyToAll = false;
            },
          });
        }
      },
      immediate: true,
    },
  },
  methods: {
    onClickGo4dkk() {
      window.open("/#/scene");
    },
    onSwitcherChange(value) {
      this.applyToAll = value;
    },
    handleVlootAt(val) {
      if (val) {
        const min = Math.min(...val);
        const max = Math.max(...val);
        if (this.currentScene.initVisual) {
          this.currentScene.initVisual.vlookatmin = min;
          this.currentScene.initVisual.vlookatmax = max;
          this.handleKrAction(min, max);
        }
      }
    },
    handleKrAction(min, max) {
      const kr = this.$getKrpano();
      if (kr) {
        kr.set("view.limitview", "lookat");
        const mid = min + max;
        kr.set("view.vlookat", mid);
        kr.set("view.vlookatmin", String(min));
        kr.set("view.vlookatmax", String(max));
      }
    },
    handleHiddenAllMasks() {
      if (this.$getKrpano()) {
        if (this.$route.name === "screen") {
          setTimeout(() => {
            this.$getKrpano().set("hotspot[peaklogo].visible", false);
            this.$getKrpano().set("hotspot[nadirlogo].visible", false);
          }, 100);
        }
      }
    },
  },
  mounted() {
    this.$bus.on("initView", (data) => {
      this.initImg = data;
    });

    if (!this.initImg) {
      this.initImg = this.currentScene.icon;
    }
  },
};
</script>

<style lang="less" scoped>
.view-setting {
  padding: 20px;
  > .title {
    font-size: 18px;
    color: #fff;
    margin-bottom: 16px;
    > i {
      font-size: 12px;
      position: relative;
      top: -2px;
    }
  }
  .preview {
    width: 100%;
    height: 132px;
    border-radius: 4px;
    margin-bottom: 16px;
    object-fit: cover;
    image-rendering: smooth;
  }
  .placeholder {
    width: 100%;
    height: 132px;
    margin-bottom: 16px;
  }
  .item {
    .el-slider {
      padding: 0 5px;
      margin-bottom: 10px;
    }
  }
  .col {
    width: 100%;
    margin: 15px 0;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
  }

  .goto-4dkk-tip {
    > .img-wrap {
      position: relative;
      width: 100%;
      > .img {
        width: 100%;
      }
      > .tip-text {
        position: absolute;
        left: 50%;
        bottom: 32px;
        transform: translateX(-50%);
        font-size: 14px;
        color: #fff;
        opacity: 0.6;
        white-space: pre;
      }
    }
    > button {
      margin-top: 16px;
      width: 100%;
    }
  }
}
</style>