FD_Pano/src/framework/Toolbar.vue

<template>
  <div
    class="app-view-toolbar"
    :class="{ unable: !canEdit }"
    app-border
    dir-top
  >
    <div class="clip-center">
      <tabList :list='tablist' @clickItem="item=>{taboneActive = item}" :hiddenHover="true" :active="taboneActive" :id="'rand11'" :subId="'rand111'">
      </tabList>
       <tabList  v-if="taboneActive.children.length > 0"  :hiddenHover="true" :list='taboneActive.children' @clickItem="item=>{tabtowActive = item}"
           :active="tabtowActive" :id="'subrand111'" :subId="'subrand111'">
        </tabList>
      <div class="pano-con clip-scroller">
        <ul ref="clip" v-if="list.length>0">
          <li
            v-for="(item, i) in list"
            @click="activeItem = item"
            :class="{ 'li-active': item.sceneCode == activeItem.sceneCode }"
            :key="i"
          >
            <div class="typeli">
              <i
                class="iconfont iconscene_map_3d"
                :class="{ iconjump: item.type !== 'house' }"
              ></i>
            </div>
            <div class="img">
              <img :src="item.icon" alt="" />
            </div>
            <div class="ui-title">
              <span>{{ item.sceneTitle }}</span>
            </div>
          </li>
        </ul>
        <div class="no-record" v-else>
          当前分组下暂无全景图
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getTabSceneList } from "@/api";
import { mapGetters } from "vuex";
import tabList from "@/components/tablist";

let frame;
let $scroll = null;
export default {
  components: {tabList},
  data() {
    return {
      taboneActive: { children: [] },
      tabtowActive: "",
      type: "building",
      activeItem: "",
      canEdit: true,
      hasCheck: false,
      loadList:true
    };
  },
  computed: {
    ...mapGetters({
      vrlist: "vrlist",
      tablist:'tablist'
    }),
    list(){
      return this.vrlist.filter(item=>item.type!='4dkk')
    }
  },
  methods: {
    getTabSceneList(catalogId=null){
      if (!catalogId) {
        catalogId = this.taboneActive.children.length<=0 ? this.taboneActive.id : this.tabtowActive.id
      }
      getTabSceneList({catalogId},(data)=>{
          this.$store.commit("SetVrList", data.data||[]);
      })
    },
    handleType(item) {
      if (item.id == "house") {
        return this.$alert({
          content: "请在VR模型设置",
        });
      }
      this.type = item.id;
    }
  },
  created() {},
  watch: {
    taboneActive: {
      deep: true,
      handler: function (newVal) {
        if (newVal.children.length>0) {
          this.tabtowActive = newVal.children[0]
        }
        if (this.tabtowActive) {
          this.tabtowActive =
            newVal.children.find((item) => {
              return item.id == this.tabtowActive.id;
            }) || "";
        }
        if (newVal.id) {
          this.$emit("catalog", {
            level:1,
            data:newVal
          });
          if (newVal.children.length<=0) {
            this.getTabSceneList(newVal.id)
          }
        }
      }
    },
    tabtowActive: {
      deep: true,
      handler: function (newVal) {
          this.$emit("catalog", {
            level:2,
            data:newVal
          });
          if (newVal) {
            this.getTabSceneList(newVal.id)
          }
      },
    },
    '$route.meta.loadScene':{
      deep: true,
      immediate: true,
      handler: function (newVal) {
        if (newVal) {
          if (this.loadList) {
              this.taboneActive = this.tablist[0] || { children: [] };
              this.loadList = false
          }
        }
      }
    },

    list: {
      immediate: true,
      handler: function(newVal) {
        this.$nextTick(() => {
          if (!frame) {
            return;
          }
          frame.update();
        });
        this.activeItem = newVal[0]||''
      },
    },
    activeItem: {
      immediate: true,
      handler: function(newVal) {
        this.$bus.emit("currentPcode", newVal);
        this.$store.commit("SetActiveItem", newVal || "");
        if (newVal) {
          this.$bus.emit("initView", newVal.icon);
        }
      },
    },
    type() {
      this.hasCheck = true;
    },
  },
  mounted() {
    this.$nextTick(() => {
      if ($scroll == null) {
        $scroll = $(".clip-scroller")[0];
        frame = new PerfectScrollbar($scroll, {
          useBothWheelAxes: true,
          suppressScrollY: true,
          wheelSpeed: 0.8,
        });
        $($scroll).data("scrollbar", frame);
      }
    });
    this.$bus.on("setListThumb", (data) => {
      this.activeItem.icon = data.icon;
      this.activeItem.initVisual = JSON.stringify(data.initVisual);
    });

    this.$bus.on("canEdit", (data) => {
      this.canEdit = data;
    });
  },
};
</script>
<style lang="less" scoped>
.app-view-toolbar {
  overflow: visible;
  a {
    color: #fff;
    text-decoration: none;
  }

  .clip-center {
    flex: 1;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    padding-top: 10px;
    margin: 0 10px;
    .pano-con {
      width: 100%;
      padding: 0;
      background: none;
      > ul {
        flex-wrap: unset;
        display: inline-block;
        white-space: nowrap;
        > li {
          display: inline-block;
          height: 128px;
          width: 128px;
          margin-top: 0;
          margin-right: 0;
          cursor: pointer;
          &:first-of-type {
            margin-left: 0;
          }
        }
      }
    }
    .clip-scroller {
      width: 100%;
      height: 100%;
      position: relative;
      padding-right: 20px;
    }
  }

  .no-record{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.unable {
  &::before {
    content: "";
    z-index: 22;
    position: absolute;
    width: 100%;
    top: -10px;
    height: calc(100% + 10px);
    background: rgba(0, 0, 0, 0.4);
  }
}
</style>