|
|
@@ -3,130 +3,130 @@
|
|
|
<div class="ui-title-big">场景导航
|
|
|
<i class="iconfont icon-material_prompt tool-tip-for-editor" v-tool-tip-wrapper>
|
|
|
<TooltipInEditor
|
|
|
- :text="'1、请自定义分组并添加全景素材或四维看看相机拍摄的场景素材；\n2、全景图可进行编辑，四维看看场景仅支持导航展示和热点关联。'"
|
|
|
+ :text="'场景素材包括全景图和三维场景，您可自定义分组及场景的排列顺序。'"
|
|
|
:frameCenterPos="'172px'"
|
|
|
- :arrowCenterPos="'20px'"
|
|
|
- ></TooltipInEditor>
|
|
|
+ :arrowCenterPos="'29px'"
|
|
|
+ />
|
|
|
</i>
|
|
|
</div>
|
|
|
- <div class="tips">
|
|
|
- <div class="ui-remark">
|
|
|
- 1、请自定义分组并添加全景素材或四维看看相机拍摄的场景素材；
|
|
|
- </div>
|
|
|
- <div class="ui-remark">
|
|
|
- 2、全景图可进行编辑，四维看看场景仅支持导航展示和热点关联。
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="pano-label">
|
|
|
- <div class="pano-con">
|
|
|
- <tabList
|
|
|
- :deviation="-35"
|
|
|
- :list="info.catalogRoot"
|
|
|
- @clickItem="
|
|
|
- (item) => {
|
|
|
- taboneActive = item;
|
|
|
- }
|
|
|
- "
|
|
|
- :active="taboneActive"
|
|
|
- :id="'rand'"
|
|
|
- @addGroup="hadnleAddGroup"
|
|
|
- :subId="'rand1'"
|
|
|
- >
|
|
|
- <template slot="hover" slot-scope="{ item }">
|
|
|
- <ul>
|
|
|
- <li @click="$emit('addGroup', { type: 1, oper: 'edit', item })">
|
|
|
- 重命名
|
|
|
- </li>
|
|
|
- <li
|
|
|
- @click="
|
|
|
- $emit('addGroup', {
|
|
|
- type: 2,
|
|
|
- oper: 'add',
|
|
|
- item: { parentId: item.id },
|
|
|
- })
|
|
|
- "
|
|
|
- >
|
|
|
- 创建二级分组
|
|
|
- </li>
|
|
|
- <li @click="del(item, 'one')">删除</li>
|
|
|
- </ul>
|
|
|
- </template>
|
|
|
- </tabList>
|
|
|
+ <button class="ui-button create-group-btn">
|
|
|
+ <i class="iconfont icon-editor_add"></i>
|
|
|
+ 新增分组
|
|
|
+ </button>
|
|
|
|
|
|
- <tabList
|
|
|
- :deviation="-35"
|
|
|
- v-if="childTab.length > 1"
|
|
|
- :list="childTab"
|
|
|
- @clickItem="
|
|
|
- (item) => {
|
|
|
- tabtowActive = item;
|
|
|
- }
|
|
|
- "
|
|
|
- :active="tabtowActive"
|
|
|
- :id="'subrand'"
|
|
|
- @addGroup="
|
|
|
- $emit('addGroup', {
|
|
|
- type: 2,
|
|
|
- oper: 'add',
|
|
|
- item: { parentId: taboneActive.id },
|
|
|
- })
|
|
|
- "
|
|
|
- :subId="'subrand1'"
|
|
|
- >
|
|
|
- <template slot="hover" slot-scope="{ item }">
|
|
|
- <ul @mouseover.prevent @mouseleave.prevent>
|
|
|
- <li @click="$emit('addGroup', { type: 2, oper: 'edit', item })">
|
|
|
- 重命名
|
|
|
- </li>
|
|
|
- <li @click="del(item, 'two')">删除</li>
|
|
|
- </ul>
|
|
|
- </template>
|
|
|
- </tabList>
|
|
|
+ <SceneGroupInEditor
|
|
|
+ id="testId"
|
|
|
+ name="testName testName testName testName"
|
|
|
+ />
|
|
|
+
|
|
|
+ <div class="pano-con">
|
|
|
+ <tabList
|
|
|
+ :deviation="-35"
|
|
|
+ :list="info.catalogRoot"
|
|
|
+ @clickItem="
|
|
|
+ (item) => {
|
|
|
+ taboneActive = item;
|
|
|
+ }
|
|
|
+ "
|
|
|
+ :active="taboneActive"
|
|
|
+ :id="'rand'"
|
|
|
+ @addGroup="hadnleAddGroup"
|
|
|
+ :subId="'rand1'"
|
|
|
+ >
|
|
|
+ <template slot="hover" slot-scope="{ item }">
|
|
|
+ <ul>
|
|
|
+ <li @click="$emit('addGroup', { type: 1, oper: 'edit', item })">
|
|
|
+ 重命名
|
|
|
+ </li>
|
|
|
+ <li
|
|
|
+ @click="
|
|
|
+ $emit('addGroup', {
|
|
|
+ type: 2,
|
|
|
+ oper: 'add',
|
|
|
+ item: { parentId: item.id },
|
|
|
+ })
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 创建二级分组
|
|
|
+ </li>
|
|
|
+ <li @click="del(item, 'one')">删除</li>
|
|
|
+ </ul>
|
|
|
+ </template>
|
|
|
+ </tabList>
|
|
|
|
|
|
- <template v-if="scenes.length > 0">
|
|
|
- <draggable
|
|
|
- tag="ul"
|
|
|
- v-model="scenes"
|
|
|
- animation="300"
|
|
|
- @sort="uploadListSort"
|
|
|
- >
|
|
|
- <li v-for="(item, i) in scenes" :key="i">
|
|
|
- <div class="typeli">
|
|
|
- <i
|
|
|
- class="iconfont iconedit_type_3d"
|
|
|
- :class="{iconedit_type_panorama: item.type !== '4dkk' }"
|
|
|
- ></i>
|
|
|
- </div>
|
|
|
- <div class="img">
|
|
|
- <img :src="item.icon+`?${Math.random()}`" alt="" />
|
|
|
- </div>
|
|
|
- <div class="oper">
|
|
|
- <i class="iconfont iconmore"></i>
|
|
|
- <ul>
|
|
|
- <li @click="$emit('rename', item)">重命名</li>
|
|
|
- <li @click="delPano(item)">删除</li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div class="ui-title">
|
|
|
- <span>{{
|
|
|
- item.type == "house" ? item.roomName : item.sceneTitle
|
|
|
- }}</span>
|
|
|
- </div>
|
|
|
+ <tabList
|
|
|
+ :deviation="-35"
|
|
|
+ v-if="childTab.length > 1"
|
|
|
+ :list="childTab"
|
|
|
+ @clickItem="
|
|
|
+ (item) => {
|
|
|
+ tabtowActive = item;
|
|
|
+ }
|
|
|
+ "
|
|
|
+ :active="tabtowActive"
|
|
|
+ :id="'subrand'"
|
|
|
+ @addGroup="
|
|
|
+ $emit('addGroup', {
|
|
|
+ type: 2,
|
|
|
+ oper: 'add',
|
|
|
+ item: { parentId: taboneActive.id },
|
|
|
+ })
|
|
|
+ "
|
|
|
+ :subId="'subrand1'"
|
|
|
+ >
|
|
|
+ <template slot="hover" slot-scope="{ item }">
|
|
|
+ <ul @mouseover.prevent @mouseleave.prevent>
|
|
|
+ <li @click="$emit('addGroup', { type: 2, oper: 'edit', item })">
|
|
|
+ 重命名
|
|
|
</li>
|
|
|
- </draggable>
|
|
|
+ <li @click="del(item, 'two')">删除</li>
|
|
|
+ </ul>
|
|
|
</template>
|
|
|
- <div class="no-record" v-else>
|
|
|
- <i class="iconfont iconedit_list_default"></i>
|
|
|
- <p>暂无全景图或三维场景，可点击下方按钮进行添加</p>
|
|
|
- </div>
|
|
|
- <div class="add-btn">
|
|
|
- <button class="ui-button submit" @click="$emit('addPano')">
|
|
|
- 选择全景图
|
|
|
- </button>
|
|
|
- <button class="ui-button submit" @click="$emit('addScene')">
|
|
|
- 选择三维场景
|
|
|
- </button>
|
|
|
- </div>
|
|
|
+ </tabList>
|
|
|
+
|
|
|
+ <template v-if="scenes.length > 0">
|
|
|
+ <draggable
|
|
|
+ tag="ul"
|
|
|
+ v-model="scenes"
|
|
|
+ animation="300"
|
|
|
+ @sort="uploadListSort"
|
|
|
+ >
|
|
|
+ <li v-for="(item, i) in scenes" :key="i">
|
|
|
+ <div class="typeli">
|
|
|
+ <i
|
|
|
+ class="iconfont iconedit_type_3d"
|
|
|
+ :class="{iconedit_type_panorama: item.type !== '4dkk' }"
|
|
|
+ ></i>
|
|
|
+ </div>
|
|
|
+ <div class="img">
|
|
|
+ <img :src="item.icon+`?${Math.random()}`" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="oper">
|
|
|
+ <i class="iconfont iconmore"></i>
|
|
|
+ <ul>
|
|
|
+ <li @click="$emit('rename', item)">重命名</li>
|
|
|
+ <li @click="delPano(item)">删除</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="ui-title">
|
|
|
+ <span>{{
|
|
|
+ item.type == "house" ? item.roomName : item.sceneTitle
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </draggable>
|
|
|
+ </template>
|
|
|
+ <div class="no-record" v-else>
|
|
|
+ <i class="iconfont iconedit_list_default"></i>
|
|
|
+ <p>暂无全景图或三维场景，可点击下方按钮进行添加</p>
|
|
|
+ </div>
|
|
|
+ <div class="add-btn">
|
|
|
+ <button class="ui-button submit" @click="$emit('addPano')">
|
|
|
+ 选择全景图
|
|
|
+ </button>
|
|
|
+ <button class="ui-button submit" @click="$emit('addScene')">
|
|
|
+ 选择三维场景
|
|
|
+ </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -134,10 +134,10 @@
|
|
|
|
|
|
<script>
|
|
|
import TooltipInEditor from '@/components/TooltipInEditor.vue'
|
|
|
-import tabList from "@/components/tablist";
|
|
|
+import tabList from "@/components/tablist/index.vue";
|
|
|
import browser from "@/utils/browser";
|
|
|
-
|
|
|
import draggable from "vuedraggable";
|
|
|
+import SceneGroupInEditor from "@/components/sceneGroupInEditor.vue";
|
|
|
import { mapGetters } from "vuex";
|
|
|
|
|
|
export default {
|
|
|
@@ -145,6 +145,7 @@ export default {
|
|
|
TooltipInEditor,
|
|
|
draggable,
|
|
|
tabList,
|
|
|
+ SceneGroupInEditor,
|
|
|
},
|
|
|
computed: {
|
|
|
...mapGetters({
|
|
|
@@ -366,6 +367,7 @@ export default {
|
|
|
.group-settings {
|
|
|
padding: 24px 20px;
|
|
|
> .ui-title-big {
|
|
|
+ margin-bottom: 0;
|
|
|
> .tool-tip-for-editor {
|
|
|
font-size: 12px;
|
|
|
cursor: default;
|
|
|
@@ -374,88 +376,87 @@ export default {
|
|
|
font-weight: normal;
|
|
|
}
|
|
|
}
|
|
|
- .tips {
|
|
|
+ > .create-group-btn {
|
|
|
width: 100%;
|
|
|
- .ui-remark {
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- .no-record {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- text-align: center;
|
|
|
- color: rgba(255, 255, 255, 0.5);
|
|
|
+ margin-top: 24px;
|
|
|
> i {
|
|
|
- font-size: 40px;
|
|
|
- }
|
|
|
- > p {
|
|
|
- margin-top: 10px;
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
}
|
|
|
- .pano-label {
|
|
|
- .pano-con {
|
|
|
- padding: 20px 30px;
|
|
|
- height: calc(100vh - 250px);
|
|
|
- .menu-con {
|
|
|
+ .pano-con {
|
|
|
+ padding: 20px 30px;
|
|
|
+ height: calc(100vh - 250px);
|
|
|
+ .menu-con {
|
|
|
+ position: relative;
|
|
|
+ > .iconfont {
|
|
|
+ left: -20px;
|
|
|
+ top: 8px;
|
|
|
+ position: absolute;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ > .icon_forward {
|
|
|
+ right: 40px;
|
|
|
+ left: auto;
|
|
|
+ }
|
|
|
+ .sub-menu {
|
|
|
+ max-width: calc(100% - 70px);
|
|
|
position: relative;
|
|
|
- > .iconfont {
|
|
|
- left: -20px;
|
|
|
- top: 8px;
|
|
|
- position: absolute;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- > .icon_forward {
|
|
|
- right: 40px;
|
|
|
- left: auto;
|
|
|
- }
|
|
|
- .sub-menu {
|
|
|
- max-width: calc(100% - 70px);
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- height: 40px;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 40px;
|
|
|
|
|
|
- > ul {
|
|
|
- max-width: unset;
|
|
|
- overflow: unset;
|
|
|
+ > ul {
|
|
|
+ max-width: unset;
|
|
|
+ overflow: unset;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ transition: 0.3s ease all;
|
|
|
+ .fixed {
|
|
|
position: absolute;
|
|
|
- left: 0;
|
|
|
- transition: 0.3s ease all;
|
|
|
- .fixed {
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- }
|
|
|
- // &::before{
|
|
|
- // width: calc(100% - 70px);
|
|
|
- // height: calc(100% - 10px);
|
|
|
- // pointer-events: none;
|
|
|
- // content: '';
|
|
|
- // background: linear-gradient(to right,rgba(#fff,0) 0%,rgba(#fff,0) 98%,rgba(#000,1) 100%);
|
|
|
- // position: absolute;
|
|
|
- // top: 0;
|
|
|
- // left: 0;
|
|
|
- // z-index: 999;
|
|
|
- // display: inline-block;
|
|
|
- // }
|
|
|
+ right: 0;
|
|
|
}
|
|
|
+ // &::before{
|
|
|
+ // width: calc(100% - 70px);
|
|
|
+ // height: calc(100% - 10px);
|
|
|
+ // pointer-events: none;
|
|
|
+ // content: '';
|
|
|
+ // background: linear-gradient(to right,rgba(#fff,0) 0%,rgba(#fff,0) 98%,rgba(#000,1) 100%);
|
|
|
+ // position: absolute;
|
|
|
+ // top: 0;
|
|
|
+ // left: 0;
|
|
|
+ // z-index: 999;
|
|
|
+ // display: inline-block;
|
|
|
+ // }
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- > ul {
|
|
|
- max-height: calc(100% - 82px);
|
|
|
- overflow-y: auto;
|
|
|
- position: relative;
|
|
|
- left: -2px;
|
|
|
- > li {
|
|
|
- margin: 10px 20px 30px 0;
|
|
|
- }
|
|
|
+ > ul {
|
|
|
+ max-height: calc(100% - 82px);
|
|
|
+ overflow-y: auto;
|
|
|
+ position: relative;
|
|
|
+ left: -2px;
|
|
|
+ > li {
|
|
|
+ margin: 10px 20px 30px 0;
|
|
|
}
|
|
|
- .add-btn {
|
|
|
- z-index: 20;
|
|
|
- .ui-button {
|
|
|
- margin: 0 5px;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .add-btn {
|
|
|
+ z-index: 20;
|
|
|
+ .ui-button {
|
|
|
+ margin: 0 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .no-record {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ text-align: center;
|
|
|
+ color: rgba(255, 255, 255, 0.5);
|
|
|
+ > i {
|
|
|
+ font-size: 40px;
|
|
|
+ }
|
|
|
+ > p {
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
任一存