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

<template>
  <div v-if="currentScene" 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="">
          {{ $i18n.t("modules.screen.v_angle_re") }}
        </div>

        <vue-slider
          v-model="vlookat"
          :min="-90"
          :max="90"
          :height="6"
          :width="`95%`"
          :marks="marks"
          direction="rtl"
          tooltip="active"
          @change="handleChange"
          :tooltip-formatter="formatterMarks"
          :processStyle="{
            backgroundColor: '#409eff',
          }"
          :enable-cross="false"
          :minRange="30"
        />

        <!-- <slider
          v-model="vlookat"
          range
          show-stops
          :marks="marks"
          :min="-90"
          :max="90"
        >
        </slider> -->
      </div>

      <div class="col">
        <!-- <span>{{ $i18n.t("mask.apply_to_all_pano") }}</span>
        <Switcher :value="applyToAll" @change="onSwitcherChange"></Switcher> -->
        <div class="apply-all-btn" @click="applyToAll = true">{{ $i18n.t("mask.apply_to_all_pano") }}</div>
      </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 VueSlider from "vue-slider-component";
import "vue-slider-component/theme/antd.css";

import Switcher from "@/components/shared/Switcher";
export default {
  components: {
    // Slider,
    Switcher,
    VueSlider,
  },
  computed: {
    ...mapGetters({
      currentScene: "scene/currentScene",
      workVisualAngleList: "screen/workVisualAngleList",
      baseInfo: "base/baseInfo",
      sceneList: "base/sceneList",
    }),
  },
  data() {
    return {
      formatterMarks: (v) => `${v * -1}`,
      marks: {
        "-90": this.$i18n.t("modules.model.attr_top"),
        90: this.$i18n.t("modules.model.attr_bottom"),
      },
      initImg: "",
      vlookat: [-90, 90],
      applyToAll: false,
      changeScene: 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) {
    //     console.error(val)
    //     if (val) {
    //       const { vlookatmin, vlookatmax } = val;
    //       if (vlookatmin && vlookatmax) {
    //         this.vlookat = [vlookatmin, vlookatmax];
    //       }
    //     }
    //   },
    //   deep: true,
    //   immediate: true,
    // },
    currentScene: {
      handler(val) {
        if (val) {
          // console.error("currentScene change", val);
          // let vlookatmin, vlookatmax;
          let item = this.workVisualAngleList.find((item) => item.navigationId == this.currentScene.id || item.navigationId == this.currentScene.sid);

          if (item) {
            this.changeScene = true;
            const { vlookatmin, vlookatmax } = item;
            if (vlookatmin && vlookatmax) {
              this.vlookat = [vlookatmin, vlookatmax];
            }
          }

          let scene = this.sceneList.find((scene) => scene.id == val.id);
          if (scene) {
            scene.icon = val.icon;
          }
          // const { vlookatmin, vlookatmax } = this.baseInfo.workVisualAngleList;
          // if (vlookatmin && vlookatmax) {
          //   this.vlookat = [vlookatmin, vlookatmax];
          // }
        }
      },
      deep: true,
      immediate: true,
    },
    vlookat: {
      handler: function (val) {
        this.handleVlootAt(val);
        if (val && this.$route.name == "screen" && this.changeScene == false) {
          this.$store.commit("scene/setSaveApiList", "screen");
        }
        this.changeScene = false;
      },
    },
    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: this.$i18n.t("mask.is_apply_to_all_pano"),
            ok: () => {
              this.$store.dispatch("screen/applyInitVisualToAll", this.vlookat);
              // this.$store.dispatch("scene/applyInitVisualToAll", {
              //   vlookat,
              //   hlookat,
              // });
              // this.updateCurrentScene();
              this.$msg.success(this.$i18n.t("gather.edit_success"));
              setTimeout(() => (this.applyToAll = false), 1000);
              this.$store.commit("scene/setSaveApiList", "screen");
            },
            no: () => {
              this.applyToAll = false;
            },
          });
        }
      },
      immediate: true,
    },
  },
  methods: {
    handleChange(value, index) {
      this.workVisualAngleList.forEach((item, index) => {
        if (item.navigationId == this.currentScene.id || item.navigationId == this.currentScene.sid) {
          item.vlookatmin = this.vlookat[0];
          item.vlookatmax = this.vlookat[1];
        }
      });
      // 拖动结束时的处理逻辑
    },
    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;
        // console.log("mid", min, max);
        // kr.set("view.vlookat", min);
        kr.set("view.vlookatmin", String(min));
        kr.set("view.vlookatmax", String(max));
      }
    },
    handleHiddenAllMasks() {
      if (this.$getKrpano()) {
        if (this.$route.name === "screen") {
          // console.log('handleHiddenAllMasks')
          setTimeout(() => {
            this.$getKrpano().set("hotspot[peaklogo].visible", false);
            this.$getKrpano().set("hotspot[nadirlogo].visible", false);
          }, 500);
        }
      }
    },
    updateCurrentScene() {
      this.$store.dispatch("scene/syncCurrentSceneToStore");
    },
  },
  mounted() {
    this.$bus.on("initView", (data) => {
      this.initImg = data;
    });

    if (!this.initImg) {
      this.initImg = this.currentScene?.icon || "";
    }
  },
};
</script>
<style>
/* .vue-slider-dot-tooltip {
  display: none !important;
} */
</style>

<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;
    }
    .vue-slider {
      margin: 15px auto;
    }
  }
  .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%;
    }
  }
}
.apply-all-btn {
  width: 100%;
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #313131;
  padding: 9px;
  cursor: pointer;
  border-radius: 2px;
}
</style>