qjkankan_shibadongcun/packages/code/src/framework/Toolbar.vue

<template>
  <div
    class="app-view-toolbar"
    :class="{ unable: !canEdit }"
    app-border
    dir-top
  >
    <div class="clip-center">
      <tabList :list="info.catalogRoot" @clickItem="item=>{taboneActive = item}" :hiddenHover="true" :active="taboneActive" :id="'rand11'" :subId="'rand111'">
      </tabList>
       <tabList v-if="childTab.length > 1" :list="childTab" :hiddenHover="true" @clickItem="item=>{tabtowActive = item}"
           :active="tabtowActive" :id="'subrand11'" :subId="'subrand111'">
        </tabList>
      <div class="pano-con clip-scroller">
        <ul ref="clip" v-if="scenes.length>0">
          <li
            v-for="(item, i) in scenes"
            @click="activeItem = item"
            :class="{ 'li-active': item.sceneCode == activeItem.sceneCode }"
            :key="i"
          >
            <div class="typeli">
              <i
                class="iconfont iconedit_type_3d"
                :class="{ iconedit_type_panorama: item.type !== 'house' }"
              ></i>
            </div>
            <div class="img">
              <img v-if="item.icon" :src="item.icon+`?${Math.random()}`" 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 { mapGetters } from "vuex";
import tabList from "@/components/tablist";

let frame;
let $scroll = null;
export default {
  name: 'whatisthis',
  components: {tabList},
  data() {
    return {
      taboneActive: { children: [] },
      tabtowActive: "",
      type: "building",
      activeItem: "",
      canEdit: true,
      hasCheck: false,
      loadList:true,
      childTab:[],
      scenes:[],
    };
  },
  computed: {
    ...mapGetters({
      info: "info",
      backupInfo: "backupInfo"
    })
  },
  methods: {
    undateScroll(){
      this.$nextTick(() => {
        if ($scroll == null) {
          $scroll = $(".clip-scroller")[0];
          frame = new PerfectScrollbar($scroll, {
            useBothWheelAxes: true,
            suppressScrollY: true,
            wheelSpeed: 0.8,
          });
          $($scroll).data("scrollbar", frame);
        }
      });
    },
    updateInfo(){
      let iidx = this.info.scenes.findIndex(item=>this.activeItem.sceneCode == item.sceneCode)
      if (iidx>-1) {
        this.info.scenes[iidx] = {
          ...this.activeItem
        }
      }
      this.$store.commit("SetInfo", this.info);
    }
  },
  created() {},
  watch: {
    taboneActive: {
      deep:true,
      handler: function (newVal,oldVal) {
        let temp = []
        newVal.children && newVal.children.forEach(item=>{
          this.info.catalogs.forEach(sub=>{
            if (item==sub.id) {
              temp.push(sub)
            }
          })
        })
        this.childTab = temp
        if (this.childTab.length == 1 || newVal!=oldVal) {
          this.tabtowActive = this.childTab[0]
        }
      },
    },
    tabtowActive: {
      immediate:true,
      handler: function (newVal) {
        if (!newVal) {
          this.tabtowActive = this.childTab[0]
        } else{

          let arr = this.info.scenes.filter(item=>{
            return newVal.id == item.category && item.type!='4dkk'
          })
          this.scenes = arr.sort((a,b)=>a.weight-b.weight)
          this.activeItem = this.scenes[0]
        }
      }
    },
    '$route.meta.loadScene':{
      deep: true,
      immediate: true,
      handler: function (newVal) {
        if (newVal) {
          if (this.loadList) {
              this.taboneActive = { children: [] };
              setTimeout(() => {
                this.taboneActive = this.info.catalogRoot[0] || { children: [] };
                this.loadList = false 
              });
          }
        }
      }
    },

    activeItem: {
      handler: function(newVal) {
        this.$bus.emit("currentPcode", newVal);
        this.$store.commit("SetActiveItem", newVal || "");
        this.updateInfo()
        if (newVal) {
          this.$bus.emit("initView", newVal.icon||'');
        }
      },
    },
    type() {
      this.hasCheck = true;
    },
  },
  mounted() {
    this.undateScroll()
    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;
    });

    this.$bus.on("scenesChange", ()=> {
      this.loadList = true;
      this.undateScroll()
    });
  },
};
</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>