qjkankan_v1.1.1/packages/qjkankan-editor/src/views/hotspot/Toolbar.vue

<template>
  <div class="app-view-toolbar" :class="{unable:!canEdit}" app-border dir-top>
    <div class="room-label" >
      <ul>
        <li
          :class="{ active: item.id === type }"
          @click="type = item.id"
          v-for="(item, i) in [$panoType[0],$panoType[1]]"
          :key="i"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="clip-center">
      <div class="pano-con clip-scroller">
        <ul ref="clip">
          <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 iconedit_type_3d" :class="{'iconedit_type_panorama':item.type!=='house'}"></i>
            </div>
            <div class="img">
              <img :src="item.icon" alt="">
            </div>
            <div class="ui-title">
              <span>{{item.fileName}}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { getPanoList } from "@/api";
let $scroll = null;
export default {
  data() {
    return {
      type: "building",
      list:[],
      activeItem:'',
      canEdit:true
    };
  },
  activated() {
    this.$nextTick(() => {
          if ($scroll == null) {
              $scroll = $(".clip-scroller")[0];

              var options = {
                horizontal: 1,
                itemNav: 'basic',
                speed: 300,
                mouseDragging: 1,
                touchDragging: 1
              };

              $scroll .sly(options);
              // var frame = new Sly('#frame', options).init();
              // new PerfectScrollbar($scroll, {
              //     useBothWheelAxes: true,
              //     suppressScrollY: true,
              // });
          }
      });
  },
  methods:{
    getPanoList(isFirst){
      getPanoList({
        pageNum: 0,
        pageSize: 0,
        searchKey: "",
        type: this.type,
        status:3
      },data=>{
        this.list = data.data.list
        isFirst&&(this.activeItem = this.list[0])
      })
    },
  },
  created() {
    this.getPanoList(true)
  },
  watch:{
    activeItem(newVal){
     newVal && this.$bus.emit('currentPcode',newVal)
    },
    type(){
      this.getPanoList()
    }
  },
  mounted(){
    this.$bus.on('canEdit',data=>{
      this.canEdit = data
    })
  }
};
</script>
<style lang="less" scoped>
.app-view-toolbar {
  overflow: visible;
  a {
    color: #fff;
    text-decoration: none;
  }
 
  .room-label {
    top: -32px;
    left: 10px;
    right: 0px;
    position: absolute;
    overflow: hidden;
    ul {
      display: flex;
    }
    li {
      cursor: pointer;
      width: 100px;
      height: 32px;
      line-height: 32px;
      padding: 0 5px;
      text-align: center;
      border-top: solid 1px #5d5d5d;
      border-right: solid 1px #5d5d5d;
      overflow: hidden;
      text-overflow: ellipsis;
      &:first-child {
        border-left: solid 1px #5d5d5d;
      }
      &.active {
        background-color: @color;
      }
    }
  }



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

    }
  }
}
  .unable{
    &::before{
      content: '';
      z-index: 22;
      position: absolute;
      width: 100%;
      top: -32px;
      height: calc(100% + 32px );
      background: rgba(0, 0, 0, 0.4);
    }
  }
</style>