qjkankan_v1.1.1/packages/qjkankan-editor/src/views/cover/setting.vue

<template>
  <div class="cover-panel">
    <template v-if="currentScene.type !== '4dkk'">
      <div class="title">
        遮罩设置
        <i
          class="iconfont icon-help_i tool-tip-for-editor"
          v-tooltip="$i18n.t('cover.cover_tips')"
        />
      </div>
      <!-- sky start -->
      <div class="swi-col">
        <span> 天空遮罩 </span>
        <switcher
          :value="sky.isShow"
          @change="(value) => (sky.isShow = Boolean(value))"
        ></switcher>
      </div>
      <div class="swi-col update-col">
        <SelectedImage
          :imgSrc="sky.icon"
          :defaultImgSrc="
            require(`@/assets/images/default/mask_bg_${$lang}.png`)
          "
          @cancel="onClickCancelSkyLogo"
        ></SelectedImage>
        <div class="action">
          <button @click="onSelectPic('sky')" class="ui-button submit">
            选择图片
          </button>
          <div
            class="ui-remark"
            v-html="$i18n.t(`edit_settings.mask_size`)"
          ></div>
        </div>
      </div>

      <div class="up-col">
        <span> 缩放比例 </span>

        <slider
          v-model="sky.scale"
          show-stops
          :marks="scaleMarks"
          :step="0.1"
          :min="0.5"
          :max="2"
        />
      </div>
      <div class="swi-col">
        <span> 跟随场景转动 </span>
        <switcher
          :value="sky.antidistorted"
          @change="(sa) => (sky.antidistorted = Boolean(sa))"
        ></switcher>
      </div>
      <div class="swi-col">
        <span> 应用到全部全景图 </span>
        <switcher
          :value="isApplySkyToAll"
          @change="(sat) => (isApplySkyToAll = Boolean(sat))"
        ></switcher>
      </div>
      <!-- sky end -->
      <div style="margin: 30px 0"></div>
      <!-- earth start -->
      <div class="swi-col">
        <span> 地面遮罩 </span>
        <switcher
          :value="earth.isShow"
          @change="(value) => (earth.isShow = Boolean(value))"
        ></switcher>
      </div>
      <div class="swi-col update-col">
        <SelectedImage
          :imgSrc="earth.icon"
          :defaultImgSrc="
            require(`@/assets/images/default/mask_bg_${$lang}.png`)
          "
          @cancel="onClickCancelEarthLogo"
        ></SelectedImage>
        <div class="action">
          <button @click="onSelectPic('earth')" class="ui-button submit">
            选择图片
          </button>
          <div
            class="ui-remark"
            v-html="$i18n.t(`edit_settings.mask_size`)"
          ></div>
        </div>
      </div>

      <div class="up-col">
        <span> 缩放比例 </span>
        <slider
          v-model="earth.scale"
          show-stops
          :marks="scaleMarks"
          :step="0.1"
          :min="0.5"
          :max="2"
        />
      </div>
      <div class="swi-col">
        <span> 跟随场景转动 </span>
        <switcher
          :value="earth.antidistorted"
          @change="(ve) => (earth.antidistorted = Boolean(ve))"
        ></switcher>
      </div>
      <div class="swi-col">
        <span> 应用到全部全景图 </span>
        <switcher
          :value="isApplyEarthToAll"
          @change="(vet) => (isApplyEarthToAll = Boolean(vet))"
        ></switcher>
      </div>
      <!-- earth end -->
    </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 class="dialog" style="z-index: 2000" v-if="isShowSelectionWindow">
      <MaterialSelector
        :title="$i18n.t(`gather.select_material`)"
        @cancel="isShowSelectionWindow = false"
        @submit="handleSubmitFromMaterialSelector"
        :selectableType="['image']"
      />
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import Switcher from "@/components/shared/Switcher";
import { Slider } from "element-ui";
import SelectedImage from "@/components/selectedImageInEditor.vue";
import MaterialSelector from "@/components/materialSelector.vue";
export default {
  name: "cover-setting-panel",
  components: {
    Switcher,
    Slider,
    SelectedImage,
    MaterialSelector,
  },
  computed: {
    ...mapGetters({
      currentScene: "scene/currentScene",
    }),
  },
  data() {
    return {
      isApplySkyToAll: false,
      isApplyEarthToAll: false,
      isShowSelectionWindow: false,
      isSelect: "",
      scaleMarks: {
        0.52: "0.5倍",
        1: "1倍",
        1.99: "2倍",
      },
      sky: {
        isShow: false,
        icon: "",
        scale: 1,
        fodderId: "",
        antidistorted: false,
      },
      earth: {
        isShow: false,
        icon: "",
        scale: 1,
        fodderId: "",
        antidistorted: false,
      },
    };
  },
  watch: {
    sky: {
      handler: function (val) {
        if (this.currentScene.type === "pano" && val) {
          this.currentScene.customMask.sky = val;
          this.updateCurrentScene();
          this.handlePeakStatus(val.isShow);
          this.handlePeakScale(val.scale);
          this.handlePeakURL(val.icon);
          this.handlePeakDistorted(val.antidistorted);
        }
      },
      deep: true,
    },
    earth: {
      handler: function (val) {
        if (this.currentScene.type === "pano" && val) {
          this.currentScene.customMask.earth = val;
          this.updateCurrentScene();
          this.handleNadirStatus(val.isShow);
          this.handleNadirScale(val.scale);
          this.handleNadirURL(val.icon);
          this.handleNadirDistorted(val.antidistorted);
        }
      },
      deep: true,
    },
    isApplySkyToAll: {
      handler: function (val) {
        if (val) {
          this.$confirm({
            content: "是否应用到全部全景图？",
            ok: () => {
              this.$store.dispatch("scene/applycustomMaskToAll", "sky");
            },
            no: () => {
              this.isApplySkyToAll = false;
            },
          });
        }
      },
      immediate: true,
    },
    isApplyEarthToAll: {
      handler: function (val) {
        if (val) {
          this.$confirm({
            content: "是否应用到全部全景图？",
            ok: () => {
              this.$store.dispatch("scene/applycustomMaskToAll", "earth");
            },
            no: () => {
              this.isApplyEarthToAll = false;
            },
          });
        }
      },
      immediate: true,
    },
    "currentScene.customMask": {
      handler: function (newVal, oldVal) {
        if (newVal && newVal !== oldVal) {
          const { sky, earth } = newVal;
          this.isApplyEarthToAll = false;
          this.isApplySkyToAll = false;
          this.sky = { ...sky };
          this.earth = { ...earth };
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    onClickGo4dkk() {
      window.open("/#/scene");
    },
    onClickCancelSkyLogo() {
      this.handlePeakURL("/static/template/skin/masking.png");
      this.sky.fodderId = "";
      this.sky.icon = "";
    },
    onClickCancelEarthLogo() {
      this.handlePeakURL("/static/template/skin/masking.png");
      this.earth.fodderId = "";
      this.earth.icon = "";
    },
    onSelectPic(type) {
      this.isSelect = type;
      this.isShowSelectionWindow = true;
    },
    handleSubmitFromMaterialSelector(selected) {
      this[this.isSelect].icon = selected[0].icon;
      this[this.isSelect].fodderId = selected[0].id;
      this.isShowSelectionWindow = false;
    },
    handlePeakStatus(status) {
      const status_b = !!status;
      const kr = this.$getKrpano();
      if (kr) {
        kr.set("hotspot[peaklogo].visible", status_b);
      }
    },
    handlePeakURL(url) {
      const kr = this.$getKrpano();
      if (kr && url) {
        kr.set("hotspot[peaklogo].url", url);
      }
    },
    handlePeakScale(scale) {
      const kr = this.$getKrpano();
      if (kr) {
        kr.set("hotspot[peaklogo].scale", scale);
      }
    },
    handlePeakDistorted(anti) {
      const kr = this.$getKrpano();
      if (kr) {
        kr.set("hotspot[peaklogo].distorted", anti);
      }
    },
    handleNadirStatus(status) {
      const status_b = !!status;
      const kr = this.$getKrpano();
      if (kr) {
        kr.set("hotspot[nadirlogo].visible", status_b);
      }
    },
    handleNadirURL(url) {
      const kr = this.$getKrpano();
      if (kr && url) {
        kr.set("hotspot[nadirlogo].url", url);
      }
    },
    handleNadirScale(scale) {
      const kr = this.$getKrpano();
      if (kr) {
        kr.set("hotspot[nadirlogo].scale", scale);
      }
    },
    handleNadirDistorted(anti) {
      const kr = this.$getKrpano();
      if (kr) {
        kr.set("hotspot[nadirlogo].distorted", anti);
      }
    },
    updateCurrentScene() {
      this.$store.dispatch("scene/syncCurrentSceneToStore");
    },
  },
};
</script>
<style>
.cover-panel .el-slider__marks-text {
  white-space: nowrap;
}
</style>

<style lang="less" scoped>
.cover-panel {
  padding: 20px;
  height: 100%;
  overflow-y: scroll;
  > .title {
    font-size: 18px;
    color: #fff;
    margin-bottom: 16px;
    > i {
      font-size: 12px;
      position: relative;
      top: -2px;
    }
  }
  .swi-col,
  .up-col {
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    margin: 12px 0;
  }
  .up-col {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    > * {
      flex: 1;
      width: 100%;
    }
  }
  .update-col {
    justify-content: flex-start;
    align-items: flex-start;
  }
  .action {
    .ui-button {
      margin-bottom: 10px;
    }
  }
  .el-slider {
    padding: 0 8px;
    color: #fff;
  }
  .img-wrapper {
    width: 120px;
    height: 120px;
  }
  .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>