12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076 |
- <template>
- <div v-if="info">
- <!-- <div v-if="isRenaming">
- <input ref="rename" type="text" @blur="onInputNewNameComplete" v-model="inputData.name" />
- </div> -->
- <!-- <button @click="addNode(null)">Add Node</button> -->
- <el-tree
- :highlight-current="true"
- ref="sceneTree"
- :data="info?.navigationTrees"
- :expand-on-click-node="false"
- node-key="id"
- class="custom-tree"
- :default-expand-all="false"
- @node-drag-start="handleDragStart"
- @node-drag-enter="handleDragEnter"
- @node-drag-leave="handleDragLeave"
- @node-drag-over="handleDragOver"
- @node-drag-end="handleDragEnd"
- @node-drop="handleDrop"
- @node-click="handlerGroup"
- @node-expand="handleNodeExpand"
- @node-collapse="handleNodeCollapse"
- draggable
- :allow-drop="allowDrop"
- :allow-drag="allowDrag"
- >
- <template slot-scope="{ node, data }">
- <div class="tree-msg" :class="data.type == 'group' ? 'group-item' : 'image-item'">
- <!-- <div class="line"></div> -->
- <div class="tree-info">
- <div v-if="data.type == 'group'" class="group-info">
- <i v-if="data.type == 'group' && !expandedNodes.includes(data.id)" class="iconfont icon-editor_folder_off folder_collapsed"></i>
- <!-- 拖拽图标 -->
- <i ref="drag-group" class="drag-icon iconfont icon-editor_folder_off folder_collapsed"></i>
- <i v-if="data.type == 'group' && expandedNodes.includes(data.id)" class="iconfont icon-editor_folder_on folder_expanded"></i>
- <span v-if="reNameId != data.id"> {{ fixTitle(data.name) }}</span>
- <input
- ref="reNameInput"
- v-model.trim="data.name"
- @blur="onInputNewNameComplete(data)"
- v-if="reNameId == data.id"
- maxlength="50"
- :placeholder="$i18n.t('navigation.enter_name')"
- class="group-title-input"
- />
- <div v-if="reNameId != data.id && deleteId == null" class="controls-btn">
- <i v-if="data.type == 'group' && data.level == 0" class="iconfont icon-editor_list_add icon-add" @click.stop="addNode(data)" v-tooltip="$i18n.t('navigation.add_two_group')"> </i>
- <i
- v-if="(data.type == 'group' && data.children.length && data.children[0].type != 'group') || (data.type == 'group' && !data.children.length)"
- class="iconfont icon-editor_list_image icon-image"
- @click.stop="onRequestForAddScene(data)"
- v-tooltip="$i18n.t('navigation.add_pano_or_scene')"
- >
- </i>
- <i @click="onClickForRename(data)" class="iconfont icon-editor_list_edit icon-edit" v-tooltip="$i18n.t('navigation.rename')"> </i>
- <i class="iconfont icon-editor_list_delete icon-delete" v-tooltip="$i18n.t('navigation.delete')" @click.stop="onDel(node, data)"> </i>
- </div>
- </div>
- <div class="image-info" v-else>
- <div class="cover-image" ref="drag-image">
- <img :id="`drag_image_${data.id}`" :src="data.icon + ossImagePreviewUrlSuffix()" alt="" />
- </div>
- <div class="image-name">
- <div class="name-top">
- <span v-if="reNameId != data.id">{{ data.name }}</span>
- <input
- ref="reNameInput"
- v-if="reNameId == data.id"
- v-model.trim="inputData.name"
- @blur="onInputNewNameComplete(data)"
- maxlength="50"
- :placeholder="$i18n.t('navigation.enter_name')"
- class="group-title-input"
- />
- </div>
- <span class="name-bottom">
- {{ data.type === "pano" ? $i18n.t("navigation.pano") : $i18n.t("navigation.scene") }}
- </span>
- </div>
- <div v-if="reNameId != data.id && deleteId == null" class="controls-btn">
- <i @click="onClickForRename(data)" class="iconfont icon-editor_list_edit icon-edit" v-tooltip="$i18n.t('navigation.rename')"> </i>
- <i class="iconfont icon-editor_list_delete icon-delete" v-tooltip="$i18n.t('navigation.delete')" @click.stop="onDel(node, data)"> </i>
- </div>
- </div>
- </div>
- <div class="deletion-confirm-wrap">
- <div class="deletion-confirm" :class="deleteId == data.id ? 'show' : 'hide'" v-clickoutside="onRequestForCancelDelete" @click.stop="onConfirmDelete(node, data)">
- {{ $i18n.t("navigation.delete") }}
- </div>
- </div>
- <!-- <div class="controls-btn">
- <i v-if="data.type == 'group' && data.level == 0" class="iconfont icon-editor_list_add icon-add" @click.stop="addNode(data)" v-tooltip="$i18n.t('navigation.add_two_group')"> </i>
- <i
- v-if="(data.type == 'group' && data.children.length && data.children[0].type != 'group') || (data.type == 'group' && !data.children.length)"
- class="iconfont icon-editor_list_image icon-image"
- @click.stop="onRequestForAddScene(data)"
- v-tooltip="$i18n.t('navigation.add_pano_or_scene')"
- >
- </i>
- <i @click="onClickForRename(data)" class="iconfont icon-editor_list_edit icon-edit" v-tooltip="$i18n.t('navigation.rename')"> </i>
- <i class="iconfont icon-editor_list_delete icon-delete" v-tooltip="$i18n.t('navigation.delete')" @click.stop="() => remove(node, data)"> </i>
- </div> -->
- </div>
- </template>
- </el-tree>
- <!-- 选择全景图 or 场景 组件 -->
- <div class="dialog" style="z-index: 2000" v-if="isShowSelectionWindow">
- <MaterialSelector
- :title="$i18n.t('gather.select_material')"
- @cancel="isShowSelectionWindow = false"
- @submit="onSubmitFromMaterialSelector"
- :selectableType="['pano', '3D']"
- :initialMaterialType="'pano'"
- :isMultiSelection="true"
- />
- </div>
- </div>
- </template>
- <script>
- // import { VueTreeList, Tree, TreeNode } from "vue-tree-list";
- import { mapGetters, mapMutations } from "vuex";
- import SceneInGroup from "@/components/sceneInGroupInEditor.vue";
- import MaterialSelector from "@/components/materialSelector.vue";
- import { isUpgradeAdapter } from "@/utils/fixVersion";
- import { ossImagePreviewUrlSuffix, getRandomSid } from "@/utils/other.js";
- export default {
- components: {
- // VueTreeList,
- MaterialSelector,
- },
- computed: {
- ...mapGetters({
- info: "base/baseInfo",
- sceneList: "base/sceneList",
- currentScene: "scene/currentScene",
- currentSecondId: "navigation/currentSecondId",
- currentRootId: "navigation/currentRootId",
- }),
- rootTabIndex() {
- return this.info.navigationTrees.findIndex((item) => item.id == this.currentRootId) == -1 ? 0 : this.info.navigationTrees.findIndex((item) => item.id == this.currentRootId);
- },
- secondTabIndex() {
- return this.info.navigationTrees[this.rootTabIndex].children.findIndex((item) => item.id == this.currentSecondId) == -1
- ? 0
- : this.info.navigationTrees[this.rootTabIndex].children.findIndex((item) => item.id == this.currentSecondId);
- },
- },
- watch: {
- "info.navigationTrees": {
- // immediate: true,
- handler: function (newVal, oldVal) {
- if (newVal) {
- //赋值新数据后保存展开状态
- // this.$nextTick(() => {
- // this.newNodesMap = [];
- // for (let key in this.$refs.sceneTree.store.nodesMap) {
- // this.newNodesMap.push(this.$refs.sceneTree.store.nodesMap[key]);
- // }
- // this.nodesMap.forEach((item, index) => {
- // this.newNodesMap.forEach((new_item, new_index) => {
- // if (index == new_index) {
- // new_item.expanded = item.expanded;
- // }
- // });
- // });
- // this.nodesMap = this.newNodesMap;
- // });
- this.$nextTick(() => {
- if (Object.keys(this.nodesMap).length) {
- for (let n_key in this.$refs.sceneTree.store.nodesMap) {
- let has = false;
- for (let key in this.nodesMap) {
- if (key == n_key) {
- has = true;
- this.$refs.sceneTree.store.nodesMap[n_key].expanded = !!this.nodesMap[key].expanded;
- }
- }
- if (!has) {
- this.$refs.sceneTree.store.nodesMap[n_key].expanded = true;
- }
- }
- }
- });
- }
- },
- deep: true,
- },
- sceneList: {
- // immediate: true,
- handler: function (newVal, oldVal) {
- if (newVal) {
- if (this.info.firstScene) {
- if (!newVal.some((item) => item.id == this.info.firstScene.id || (item.sid && item.sid == this.info.firstScene.sid)) && this.currentScene.id == this.info.firstScene.id) {
- //如果选择的当前场景,设置了初始场景,被删除后则需要更新初始场景
- this.$store.commit("base/setData", { firstScene: null });
- }
- }
- //监听数变化更新当前列表
- this.$nextTick(() => {
- if (this.currentRootId || this.currentSecondId) {
- if (this.currentRootId && this.currentSecondId) {
- if (this.info.navigationTrees[this.rootTabIndex].children[this.secondTabIndex]) {
- this.$store.commit("scene/setCurrentScenesList", this.info.navigationTrees[this.rootTabIndex].children[this.secondTabIndex].children);
- }
- } else if (this.currentRootId && !this.currentSecondId) {
- if (this.info.navigationTrees[this.rootTabIndex]?.children.length && this.info.navigationTrees[this.rootTabIndex]?.children[0].type == "group") {
- this.$store.commit("navigation/setData", { currentSecondId: this.info.navigationTrees[this.rootTabIndex].children[0].id });
- this.$store.commit("scene/setCurrentScenesList", this.info.navigationTrees[this.rootTabIndex].children[this.secondTabIndex].children);
- } else {
- this.$store.commit("scene/setCurrentScenesList", this.info.navigationTrees[this.rootTabIndex].children);
- }
- }
- }
- });
- }
- },
- deep: true,
- },
- "info.firstScene": {
- // immediate: true,
- handler: function (newVal, oldVal) {
- if (!newVal && oldVal) {
- if (oldVal.id == this.currentScene.id) {
- console.log("设置空", oldVal, this.currentScene);
- this.$store.commit("scene/setCurrentScene", null);
- }
- }
- },
- deep: true,
- },
- },
- data() {
- return {
- inputData: null,
- insertTag: null,
- isShowSelectionWindow: false,
- expandedNodes: [], // 用于存储已展开节点的数组
- nodesMap: {},
- newNodesMap: [],
- reNameId: null,
- backUpName: "",
- deleteId: null,
- timer: null,
- };
- },
- methods: {
- ossImagePreviewUrlSuffix,
- fixTitle(name) {
- if (name == "默认二级分组") {
- name = this.$i18n.t("navigation.default_group_two");
- } else if (name == "一级分组") {
- name = this.$i18n.t("navigation.group_one");
- } else if (name == "二级分组") {
- name = this.$i18n.t("navigation.group_two");
- } else {
- // eslint-disable-next-line no-self-assign
- name = name;
- }
- return name;
- },
- handleNodeExpand(data, node, instance) {
- console.log("节点展开", data);
- // 当节点展开时,将其id添加到数组中
- this.expandedNodes.push(data.id);
- this.nodesMap = {};
- for (let key in this.$refs.sceneTree.store.nodesMap) {
- this.nodesMap[key] = this.$refs.sceneTree.store.nodesMap[key];
- }
- },
- handleNodeCollapse(data, node, instance) {
- console.log("节点折叠", data);
- // 当节点折叠时,从数组中移除其id
- const index = this.expandedNodes.indexOf(data.id);
- if (index !== -1) {
- this.expandedNodes.splice(index, 1);
- }
- this.nodesMap = {};
- for (let key in this.$refs.sceneTree.store.nodesMap) {
- this.nodesMap[key] = this.$refs.sceneTree.store.nodesMap[key];
- }
- },
- handleDragStart(node, ev) {
- console.log("drag start", node);
- if (node.data.type == "group") {
- ev.dataTransfer.setDragImage(this.$refs["drag-group"], -10, -18);
- } else {
- // ev.dataTransfer.setDragImage(this.$refs["drag-image"], -10, -18);
- let dom = document.getElementById(`drag_image_${node.data.id}`);
- ev.dataTransfer.setDragImage(dom, -10, -18);
- }
- },
- handleDragEnter(draggingNode, dropNode, ev) {
- console.log("tree drag enter: ", dropNode);
- if (!this.timer) {
- if (dropNode.data.type == "group" && dropNode.data.children.length && !dropNode.expanded) {
- this.timer = setTimeout(() => {
- // console.error("可以展开");
- dropNode.expanded = true;
- this.clearTimer();
- }, 1000);
- }
- }
- },
- clearTimer() {
- clearTimeout(this.timer);
- this.timer = null;
- },
- handleDragLeave(draggingNode, dropNode, ev) {
- this.clearTimer();
- // if (dropNode.expanded) {
- // dropNode.expanded = false;
- // }
- // console.log("tree drag leave: ", dropNode.data.type);
- },
- handleDragOver(draggingNode, dropNode, ev) {
- // console.log("tree drag over: ", dropNode.data.type);
- },
- handleDragEnd(draggingNode, dropNode, dropType, ev) {
- // console.log("tree drag end: ", dropNode && dropNode.data.type, dropType);
- this.clearTimer();
- this.processTreeData("drag");
- },
- handleDrop(draggingNode, dropNode, dropType, ev) {
- // console.log("tree drop: ", dropNode.data.type, dropType);
- return false;
- },
- allowDrop(draggingNode, dropNode, type) {
- if (draggingNode.data.type != "group") {
- //拖拽场景
- if (dropNode.level == 1) {
- //不允许拖拽到第一层级
- if (!dropNode.data.children.length || (dropNode.data.children.length && dropNode.data.children[0].type != "group")) {
- return type == "inner";
- } else {
- return false;
- }
- } else if (dropNode.level == 2) {
- //不允许拖拽到和目录同级
- if (dropNode.data.type == "group") {
- return type == "inner";
- }
- }
- return type == "prev" || type == "next";
- } else {
- //拖拽组
- if (draggingNode.level == 2 || draggingNode.level == 1) {
- //当拖拽的是第一第二级目录的时候,只能拖拽到第二级目录的前后,不能拖拽到2级目录的里面
- if (dropNode.level == 3) {
- return false;
- }
- if (dropNode.level == 2) {
- if (dropNode.data.type != "group") {
- if (dropNode.parent.data.children.length && dropNode.parent.data.children[0].type != "group") {
- return type == "prev" || type == "next";
- } else {
- return false;
- }
- } else {
- if (draggingNode.level == 1 && draggingNode.data.children.length && draggingNode.data.children[0].type == "group") {
- //禁止含有二级目录的一级目录,拖拽到其他一级目录
- return false;
- }
- return type == "prev" || type == "next";
- }
- } else if (dropNode.level == 1) {
- //禁止含有二级目录的一级目录,拖拽到其他一级目录
- if (draggingNode.level == 1 && draggingNode.data.children.length && draggingNode.data.children[0].type == "group") {
- return false;
- }
- return type == "prev" || type == "next" || type == "inner";
- }
- }
- }
- },
- allowDrag(draggingNode) {
- // console.error(draggingNode.data.name)
- // return draggingNode.data.name.indexOf("三级 3-2-2") === -1;
- return true;
- },
- handlerGroup(data, note, e) {
- if (data.type == "group") {
- // if (data.children.length) {
- this.$refs.sceneTree.store.nodesMap[data.id].expanded = this.insertTag ? true : !!!this.$refs.sceneTree.store.nodesMap[data.id].expanded;
- if (this.$refs.sceneTree.store.nodesMap[data.id].expanded) {
- this.handleNodeExpand(data);
- } else {
- this.handleNodeCollapse(data);
- }
- this.insertTag = null;
- // }
- }
- },
- onRequestForAddScene(item) {
- this.insertTag = item;
- this.isShowSelectionWindow = true;
- },
- onSubmitFromMaterialSelector(selected) {
- let changeListLength = this.insertTag.children.length || 0;
- let newScenes = [];
- let roundId = new Date().getTime();
- for (const item of selected) {
- roundId += 1;
- if (item.materialType === "pano") {
- newScenes.push({
- children: [],
- fodderId: item.id,
- icon: item.icon,
- sceneCode: item.sceneCode,
- name: item.name,
- // category: this.level === 1 ? this.groupNode.children[0].id : this.groupNode.id,
- type: "pano",
- sort: changeListLength,
- parentId: null,
- level: this.insertTag.level + 1,
- id: "add_" + roundId,
- sid: "sid_" + getRandomSid(), //用于修改导航之后的标识
- // id: "s_" + this.$randomWord(true, 8, 8),
- });
- } else if (item.materialType === "3D") {
- console.log("item.num", item.num);
- newScenes.push({
- children: [],
- icon: item.thumb,
- sceneCode: item.num,
- name: item.sceneName,
- sort: changeListLength,
- // category: this.level === 1 ? this.groupNode.children[0].id : this.groupNode.id,
- type: "4dkk",
- level: this.insertTag.level + 1,
- version: isUpgradeAdapter(item.isUpgrade), // 'V3' OR 'V4'. 全景看看v1.3新增
- id: "add_" + roundId,
- sid: "sid_" + getRandomSid(), //用于修改导航之后的标识
- // id: "s_" + this.$randomWord(true, 8, 8),
- // fodderId: item.id,
- });
- }
- changeListLength++;
- }
- let allSuccess = true;
- newScenes.forEach((item, i) => {
- // let temp = this.info.scenes.find((eachScene) => {
- let temp = this.sceneList.find((eachScene) => {
- return eachScene.sceneCode === item.sceneCode;
- });
- if (temp) {
- setTimeout(() => {
- this.$msg.message(
- `${item.type == "4dkk" ? this.$i18n.t("navigation.scene_name") : this.$i18n.t("navigation.pano")}${this.$i18n.t("navigation.already_exists", {
- msg: item.sceneTitle,
- })}`
- );
- }, i * 100);
- allSuccess = false;
- return;
- }
- // this.info.scenes.push(item);
- this.insertTag.children.push(item);
- });
- this.isShowSelectionWindow = false;
- if (allSuccess) {
- this.handlerGroup(this.insertTag);
- this.$msg.success(this.$i18n.t("gather.success"));
- }
- },
- onClickForRename(data) {
- // this.isRenaming = true;
- this.inputData = data;
- this.backUpName = data.name;
- this.reNameId = data.id;
- if (this.inputData.name == "默认二级分组") {
- this.inputData.name = this.$i18n.t("navigation.default_group_two");
- } else if (this.inputData.name == "一级分组") {
- this.inputData.name = this.$i18n.t("navigation.group_one");
- } else if (this.inputData.name == "二级分组") {
- this.inputData.name = this.$i18n.t("navigation.group_two");
- } else {
- // this.inputData .name = data.name;
- }
- this.$nextTick(() => {
- this.$refs.reNameInput.focus();
- });
- // this.$nextTick(() => {
- // // this.$refs['input-for-rename'].focus()
- // this.$refs["input-for-rename"].select();
- // this.$refs["input-for-rename"].scrollIntoView({
- // behavior: "smooth",
- // });
- // });
- },
- onInputNewNameComplete(data) {
- if (this.inputData.name.trim() == "") {
- // data.name = this.backUpName;
- // data.name = data.name;
- this.reNameId = null;
- return;
- }
- let name = "";
- if (this.inputData.name == this.$i18n.t("navigation.default_group_two")) {
- name = "默认二级分组";
- } else if (this.inputData.name == this.$i18n.t("navigation.group_one")) {
- this.inputData.name = this.$i18n.t("navigation.group_one");
- name = "一级分组";
- } else if (this.inputData.name == this.$i18n.t("navigation.group_two")) {
- this.inputData.name = this.$i18n.t("navigation.group_two");
- name = "二级分组";
- } else {
- name = this.inputData.name;
- }
- data.name = name;
- this.reNameId = null;
- // this.isRenaming = false;
- // if (!this.inputData.name.trim()) {
- // return;
- // }
- // if (this.inputData.name !== this.groupNode.name) {
- // // this.$emit("renameGroup", this.groupNode.id, this.level, this.newName);
- // }
- // this.inputData = null;
- },
- onDel(node, data) {
- this.deleteId = data.id;
- },
- onRequestForCancelDelete() {
- this.deleteId = null;
- },
- onConfirmDelete(node, data) {
- // this.$emit("delete", this.sceneInfo.id);
- // this.isConfirmingDeletion = false;
- this.onRequestForCancelDelete();
- if (this.sceneList.length == 1 && data.type != "group") {
- this.$alert({
- title: this.$i18n.t("navigation.delete_init_scene"),
- content: this.$i18n.t("navigation.keep_one_scene"),
- });
- return;
- }
- if (this.info.navigationTrees.length == 1 && node.level == 1) {
- this.$alert({
- content: this.$i18n.t("navigation.keep_one_group"),
- });
- return;
- }
- if ((node.level == 1 || node.level == 2) && data.type == "group") {
- let delScenes = [];
- this.info.navigationTrees.forEach((item) => {
- item.children.forEach((s_item) => {
- if (s_item.type != "group" && (item.id == node.data.id || s_item.id == node.data.id)) {
- delScenes.push(s_item);
- }
- s_item.children.forEach((t_item) => {
- if (t_item.type != "group" && (item.id == node.data.id || s_item.id == node.data.id)) {
- delScenes.push(t_item);
- }
- });
- });
- });
- if (delScenes.length >= this.sceneList.length) {
- //如果要删除的场景大于等于 当前场景数量,则弹出提示 至少保留一个
- this.$alert({
- title: this.$i18n.t("navigation.delete_init_scene"),
- content: this.$i18n.t("navigation.keep_one_scene"),
- });
- return;
- }
- }
- const parent = node.parent;
- const children = parent.data.children || parent.data;
- const index = children.findIndex((d) => d.id === data.id);
- children.splice(index, 1);
- this.processTreeData("del");
- //如果删除当前选择的分组
- if (data.id == this.currentRootId || data.id == this.currentSecondId) {
- // console.error("如果删除当前选择的分组");
- this.$store.commit("navigation/setData", { currentRootId: null, currentSecondId: null });
- let firstScene = null;
- if (this.info.firstScene) {
- firstScene = this.info.firstScene;
- } else {
- // firstScene = this.info.navigationTrees[0].children[0];
- firstScene = this.sceneList[0];
- }
- if (!this.currentRootId && !this.currentSecondId) {
- // console.error("初始化");
- // this.$store.commit("scene/setCurrentScene", firstScene);
- let activeScene = null;
- this.info.navigationTrees.forEach((item, index) => {
- activeScene = item.children.find((pano) => pano.id == firstScene.id);
- if (activeScene) {
- this.$store.commit("scene/setCurrentScenesList", item.children);
- this.$store.commit("navigation/setData", { currentSecondId: null, currentRootId: item.id });
- // throw new Error("LoopTerminated");
- }
- item = item.children.forEach((s_item, s_index) => {
- activeScene = s_item.children.find((pano) => pano.id == firstScene.id);
- if (activeScene) {
- this.$store.commit("scene/setCurrentScenesList", s_item.children);
- this.$store.commit("navigation/setData", { currentSecondId: s_item.id, currentRootId: item.id });
- // throw new Error("LoopTerminated");
- }
- s_item = s_item.children.forEach((t_item, t_index) => {
- activeScene = t_item.children.find((pano) => pano.id == firstScene.id);
- if (activeScene) {
- this.$store.commit("scene/setCurrentScenesList", s_item.children);
- this.$store.commit("navigation/setData", { currentSecondId: s_item.id, currentRootId: item.id });
- // throw new Error("LoopTerminated");
- }
- });
- });
- });
- }
- }
- // if (parent.data.children.length == 1 && parent.data.children[0].type == "group") {
- // let newChild = children[0].children;
- // parent.data.children = newChild;
- // }
- // console.error(this.info.navigationTrees);
- },
- addNode(data) {
- let roundId = new Date().getTime();
- let group = {
- id: "add_" + roundId,
- sid: "sid_" + getRandomSid(), //用于修改导航之后的标识
- name: data ? "二级分组" : "一级分组",
- type: "group",
- level: data ? 1 : 0,
- children: [],
- };
- if (data) {
- // if (data.children.length && data.children[0].type != "group") {
- // //新增子目录的时候,如果目录里面没有子目录,新增一个默认目录包含旧数据
- // let list = JSON.parse(JSON.stringify(data.children));
- // data.children = [];
- // let defaultDir = {
- // id: "add_" + (roundId + 1),
- // sort: 0,
- // name: this.$i18n.t("navigation.default_group_two"),
- // type: "group",
- // children: list,
- // };
- // data.children.push(defaultDir);
- // }
- data.children.push(group);
- this.$refs.sceneTree.store.nodesMap[data.id].expanded = true;
- } else {
- this.info.navigationTrees.push(group);
- }
- this.processTreeData("add");
- this.$nextTick(() => {
- this.onClickForRename(group);
- });
- },
- getRoundId() {
- return new Date().getTime();
- },
- processTreeData(type) {
- this.info.navigationTrees.forEach((item) => {
- //一级目录
- let panoList = item.children.filter((pano) => pano.type != "group");
- let groupList = item.children.filter((pano) => pano.type == "group");
- switch (type) {
- case "add":
- if (panoList.length && groupList.length) {
- //新增目录到二级目录。且二级目录只有场景的时候
- let list = [];
- let defaultDir = {
- id: "add_" + (this.getRoundId() + 1),
- sid: "sid_" + getRandomSid(), //用于修改导航之后的标识
- sort: 0,
- name: "默认二级分组",
- type: "group",
- children: panoList,
- };
- list.push(defaultDir);
- list = list.concat(groupList);
- item.children = list;
- }
- if (item.children.length == 1 && item.type == "group" && !item.children[0].children.length && item.children[0].type != "pano") {
- //新增二级目录的时候,如果新增完只有一个二级目录,且二级目录为空,创建多一个目录,且第一个为默认二级目录
- let list = [];
- let defaultDir = {
- id: "add_" + (this.getRoundId() + 1),
- sid: "sid_" + getRandomSid(), //用于修改导航之后的标识
- sort: 0,
- name: "默认二级分组",
- type: "group",
- children: [],
- };
- list.push(defaultDir);
- list = list.concat(groupList);
- item.children = list;
- }
- break;
- case "del":
- if (groupList.length == 1 && !panoList.length && groupList[0].children.length && groupList[0].name == "默认二级分组") {
- //当只有一个二级目录,二级目录有场景
- item.children = groupList[0].children;
- }
- if (groupList.length == 1 && !groupList[0].children.length) {
- //当只有一个二级目录,二级目录没有场景
- item.children = [];
- }
- break;
- case "drag":
- if (panoList.length && groupList.length) {
- //拖拽目录到二级目录。且二级目录只有场景的时候
- let list = [];
- let defaultDir = {
- id: "add_" + (this.getRoundId() + 1),
- sid: "sid_" + getRandomSid(), //用于修改导航之后的标识
- sort: 0,
- name: "默认二级分组",
- type: "group",
- children: panoList,
- };
- list.push(defaultDir);
- list = list.concat(groupList);
- item.children = list;
- }
- // if (groupList.length == 1 && !groupList[0].children.length) {
- // //当只有一个二级目录,二级目录没有场景
- // item.children = [];
- // }
- if (groupList.length == 1 && !panoList.length && groupList[0].children.length) {
- //当只有一个二级目录,二级目录有场景
- item.children = groupList[0].children;
- }
- break;
- }
- // if (item.id == this.currentRootId) {
- // console.error(groupList);
- // if (groupList.length) {
- // let index = groupList.findIndex((pano) => pano.children.length);
- // this.$store.commit("navigation/setData", { currentSecondId: groupList[index].id });
- // } else {
- // this.$store.commit("navigation/setData", { currentSecondId: null });
- // }
- // // let currentSecondId = item.children.find((group) => group.id == this.currentSecondId);
- // // console.error("currentSecondId", currentSecondId);
- // }
- });
- },
- },
- created() {},
- };
- </script>
- <style lang="less" rel="stylesheet/less" scoped>
- .vtl {
- // .vtl-drag-disabled {
- // background-color: #d0cfcf;
- // &:hover {
- // background-color: #d0cfcf;
- // }
- // }
- // .vtl-disabled {
- // background-color: #d0cfcf;
- // }
- }
- </style>
- <style lang="less" rel="stylesheet/less" scoped>
- .icon {
- &:hover {
- cursor: pointer;
- }
- }
- .el-tree {
- background: none !important;
- color: hsla(0, 0%, 100%, 0.6);
- // .folder_expanded {
- // display: none;
- // }
- // .is-expanded {
- // .folder_collapsed {
- // display: none;
- // }
- // .folder_expanded {
- // display: inline-block;
- // }
- // }
- .tree-msg {
- width: calc(100% - 24px);
- // min-height: 40px;
- color: hsla(0, 0%, 100%, 0.6);
- // display: flex;
- // align-items: center;
- // justify-content: space-between;
- padding-right: 10px;
- .tree-info {
- // display: flex;
- // align-items: center;
- // justify-content: flex-start;
- height: 100%;
- // height: 40px;
- // flex: 1;
- .group-info {
- display: flex;
- align-items: center;
- justify-content: flex-start;
- flex: 1;
- height: 100%;
- position: relative;
- .drag-icon {
- position: absolute;
- width: 40px;
- height: 40px;
- background: #313131;
- box-shadow: 0 0 4px 0 rgb(0 0 0 / 50%);
- border-radius: 4px;
- display: flex;
- justify-content: center;
- align-items: center;
- z-index: -1;
- }
- span {
- margin-left: 6px;
- display: inline-block;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- flex: 1 1 auto;
- }
- }
- }
- .image-info {
- display: flex;
- align-items: center;
- // padding: 10px 0;
- height: 64px;
- // flex: 1;
- width: 100%;
- .cover-image {
- flex: 0 0 auto;
- width: 64px;
- height: 64px;
- background: #b0b0b0;
- border-radius: 2px;
- background-size: cover;
- img {
- width: 100%;
- height: 100%;
- pointer-events: none;
- object-fit: cover;
- }
- }
- .image-name {
- margin-left: 10px;
- width: calc(100% - 74px);
- flex: 1 1 auto;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- height: 100%;
- flex: 1;
- .name-top {
- width: 100%;
- span {
- width: 100%;
- word-break: break-all;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- overflow: hidden;
- font-size: 14px;
- color: hsla(0, 0%, 100%, 0.6);
- white-space: normal;
- }
- }
- .name-bottom {
- color: #0076f6;
- }
- }
- .group-title-input {
- width: 100%;
- margin-left: 0;
- }
- }
- .group-title-input {
- margin-left: 6px;
- flex: 1 1 auto;
- width: 1px;
- height: 30px;
- background: #1a1b1d;
- border-radius: 2px;
- border: 1px solid #404040;
- color: #fff;
- font-size: 14px;
- padding: 0 10px 0 16px;
- &:focus {
- border-color: #0076f6;
- }
- }
- .deletion-confirm-wrap {
- position: absolute;
- top: 0;
- bottom: 0;
- right: 0;
- width: 44px;
- overflow: hidden;
- pointer-events: none;
- border-top-right-radius: 4px;
- border-bottom-right-radius: 4px;
- > .deletion-confirm {
- position: absolute;
- top: 0;
- bottom: 0;
- width: 100%;
- background: #fa5555;
- transition: right 0.3s;
- cursor: pointer;
- text-align: center;
- font-size: 12px;
- color: #fff;
- pointer-events: auto;
- &::after {
- content: "";
- height: 100%;
- vertical-align: middle;
- display: inline-block;
- }
- &.show {
- right: 0;
- }
- &.hide {
- right: -44px;
- }
- }
- }
- .controls-btn {
- display: none;
- > i {
- margin-left: 12px;
- cursor: pointer;
- &.iconfont {
- &:hover {
- color: #0076f6;
- }
- }
- }
- }
- &.image-item {
- .controls-btn {
- position: absolute;
- right: 10px;
- bottom: 8px;
- }
- .tree-info {
- display: flex;
- align-items: center;
- justify-content: flex-start;
- width: 100%;
- }
- }
- }
- }
- </style>
- <style lang="less">
- .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
- background: none !important;
- }
- .el-tree-node:focus > .el-tree-node__content {
- background: none !important;
- }
- .el-tree-node:focus > .el-tree-node__content:hover {
- background: #313131 !important;
- }
- .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content:hover {
- background: #313131 !important;
- }
- .el-tree-node__content:hover,
- .el-upload-list__item:hover {
- background: #313131;
- }
- .el-tree-node > .el-tree-node__children {
- overflow: inherit;
- }
- .el-tree-node__content {
- // height: 60px;
- height: auto;
- // padding: 10px 0;
- border-radius: 4px;
- cursor: default;
- }
- .el-tree-node__content {
- // padding-left: 30px !important;
- position: relative;
- &::before {
- content: "";
- width: 24px;
- height: 24px;
- display: inline-block;
- }
- &:hover {
- .controls-btn {
- display: block !important;
- }
- }
- }
- .custom-tree .el-tree__drop-indicator {
- // display: none
- // margin-top: -25px; /* 修改间距为10px */
- // margin-bottom: 10px; /* 修改间距为10px */
- }
- .el-tree-node__expand-icon {
- // height: 44px;
- display: flex;
- align-items: center;
- margin-right: 5px;
- }
- // .el-tree-node__expand-icon:hover {
- // background: red;
- // }
- // .el-tree-node__content{
- // background: red;
- // }
- .el-tree-node__content .el-tree-node__expand-icon {
- position: absolute;
- height: 100%;
- // left: 6px;
- }
- .el-tree-node__content .el-tree-node__expand-icon:first-child + .group-item {
- height: 44px;
- }
- .el-tree-node__content .el-tree-node__expand-icon:first-child + .image-item {
- height: 80px;
- }
- </style>
|