|
@@ -1,156 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="app-view-toolbar" 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+`?${Math.random()}`" 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:''
|
|
|
- };
|
|
|
- },
|
|
|
- activated() {
|
|
|
- this.$nextTick(() => {
|
|
|
- if ($scroll == null) {
|
|
|
- $scroll = $(".clip-scroller")[0];
|
|
|
- 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)
|
|
|
- this.$bus.on('initView',()=>{
|
|
|
- this.getPanoList()
|
|
|
- })
|
|
|
- },
|
|
|
- watch:{
|
|
|
- activeItem(newVal){
|
|
|
- newVal && this.$bus.emit('currentPcode',newVal)
|
|
|
- newVal && this.$bus.emit('initView',newVal&&newVal.icon)
|
|
|
- },
|
|
|
- type(){
|
|
|
- this.getPanoList()
|
|
|
- }
|
|
|
- },
|
|
|
- mounted(){
|
|
|
-
|
|
|
- }
|
|
|
-};
|
|
|
-</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;
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|