feat: 重构

packages/qjkankan-editor/src/Store/modules/base.js

@@ -43,7 +43,7 @@ export default {
     },
   },
   mutations: {
-    ininDefaultData(state, payload) {
+    initDefaultData(state, payload) {
       let forArr = ["workCustomMaskList", "workVisualAngleList", "workExplanationList"];
       // state.baseInfo.workVisualAngleList.forEach((item, index) => {
       //   if (!state.sceneList.some((j_item) => item.navigationId == j_item.id || item.navigationId == j_item.sid)) {
@@ -315,6 +315,7 @@ export default {
         //   console.error(state.sceneList);
         // }
       }
+      console.error(state.baseInfo.firstScene);
     },
   },
   actions: {

packages/qjkankan-editor/src/Store/modules/hotspot.js

@@ -232,7 +232,6 @@ export default {
           //场景类型 如果场景是新增，则scene的id也需要从服务端取值
           let current = rootState.base.sceneList.find((s_item) => s_item.sid && s_item.sid == item.scene.sid);
           if (current) {
-            console.error('')
             item.scene.id = current.id;
           }
         }
@@ -264,6 +263,18 @@ export default {
           delete item[value];
         }
       });
+      if (rootState.base.sceneList.length != list.length) {
+        //如果场景不存在，则对应的热点不保存
+        list = list.filter((item) => {
+          let hasTag = false;
+          rootState.base.sceneList.forEach((s_item) => {
+            if (s_item.id == item.navigationId) {
+              hasTag = true;
+            }
+          });
+          return hasTag;
+        });
+      }
       console.error(state.hotspotList, list);
       // $waiting.hide();
       // return;

packages/qjkankan-editor/src/Store/modules/navigation.js

@@ -81,15 +81,23 @@ export default {
                     this.commit("scene/setCurrentScene", curreentScene);
                   }
                 }, 0);
+                if (rootState.base.baseInfo.firstScene) {//如果初始场景是新增的，则需要更新id
+                  setTimeout(() => {
+                    let firstScene = rootState.base.sceneList.find((item) => item.sid && item.sid == rootState.base.baseInfo.firstScene.sid);
+                    if (firstScene) {
+                      rootState.base.baseInfo.firstScene.id = firstScene.id;
+                    }
+                  }, 0);
+                }
               }
-              this.commit("base/ininDefaultData");
+              this.commit("base/initDefaultData");
               state.isSave = true;
 
               setTimeout(() => {
                 resolve();
                 if (state.saveFristScene) {
                   let data = {};
-                  // console.error("有当前场景",rootState.base.baseInfo.firstScene);
+                  console.error("有当前场景", rootState.base.baseInfo.firstScene);
                   if (rootState.base.baseInfo.firstScene) {
                     let firstScene = rootState.base.sceneList.find((item) => item.sceneCode == rootState.base.baseInfo.firstScene.sceneCode);
                     if (firstScene) {

packages/qjkankan-editor/src/Store/modules/scene.js

@@ -114,7 +114,6 @@ export default {
 
     // 设置当前场景列表
     setCurrentScenesList(state, payload) {
-      console.error(4);
       state.currentScenesList = payload;
     },
 
@@ -132,7 +131,6 @@ export default {
       //       }
       //     });
       //   });
-      console.error(payload);
       this.commit("scene/setSecondaryList", payload.children);
     },
 

packages/qjkankan-editor/src/Store/modules/screen.js

@@ -106,9 +106,10 @@ export default {
       // } else {
       //   workVisualAngleList = rootState.base.baseInfo.workVisualAngleList;
       // }
-      console.error("save", state.workVisualAngleList);
-      $waiting.hide();
-      // return
+      // console.error("save", state.workVisualAngleList, rootState.base.sceneList);
+
+      // $waiting.hide();
+      // return;
 
       return new Promise((resolve, reject) => {
         visualSave(

packages/qjkankan-editor/src/components/dragTree/index.vue

@@ -143,6 +143,12 @@ export default {
       currentSecondId: "navigation/currentSecondId",
       currentRootId: "navigation/currentRootId",
     }),
+    rootTabIndex() {
+      return this.info.navigationTrees.findIndex((item) => item.id == this.currentRootId);
+    },
+    secondTabIndex() {
+      return this.info.navigationTrees[this.rootTabIndex].children.findIndex((item) => item.id == this.currentSecondId);
+    },
   },
   watch: {
     "info.navigationTrees": {
@@ -150,21 +156,42 @@ export default {
       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(() => {
-            this.newNodesMap = [];
-            for (let key in this.$refs.sceneTree.store.nodesMap) {
-              this.newNodesMap.push(this.$refs.sceneTree.store.nodesMap[key]);
-            }
+            if (Object.keys(this.nodesMap).length) {
+              for (let n_key in this.$refs.sceneTree.store.nodesMap) {
+                let has = false;
 
-            this.nodesMap.forEach((item, index) => {
-              this.newNodesMap.forEach((new_item, new_index) => {
-                if (index == new_index) {
-                  new_item.expanded = item.expanded;
+                for (let key in this.nodesMap) {
+                  if (key == n_key) {
+                    has = true;
+                    this.$refs.sceneTree.store.nodesMap[n_key].expanded = !!this.nodesMap[key].expanded;
+                  }
                 }
-              });
-            });
 
-            this.nodesMap = this.newNodesMap;
+                if (!has) {
+                  this.$refs.sceneTree.store.nodesMap[n_key].expanded = true;
+                }
+              }
+            }
+
+            // console.error("保存后", this.$refs.sceneTree.store.nodesMap);
           });
         }
       },
@@ -175,16 +202,53 @@ export default {
       handler: function (newVal, oldVal) {
         if (newVal) {
           if (this.info.firstScene) {
-            if (!newVal.some((item) => item.id == this.info.firstScene.id) && (this.currentScene.id == this.info.firstScene.id )) {
+            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 });
             }
-     
-            // console.error("设置空");
-            // if (!newVal.some((item) => item.id == this.currentScene.id || item.id == this.currentScene.sid)) {
-            //   console.error("设置空");
-            //   this.$store.commit("scene/setCurrentScene", null);
-            // }
           }
+
+          //监听数变化更新当前列表
+          this.$nextTick(() => {
+            if (this.currentRootId || this.currentSecondId) {
+              if (this.currentRootId && this.currentSecondId) {
+                this.$store.commit("scene/setCurrentScenesList", this.info.navigationTrees[this.rootTabIndex].children[this.secondTabIndex].children);
+              } else if (this.currentRootId && !this.currentSecondId) {
+                this.$store.commit("scene/setCurrentScenesList", this.info.navigationTrees[this.rootTabIndex].children);
+              }
+            }
+
+            // let activeScene = null;
+            // let currentScene = this.currentScene;
+
+            // this.info.navigationTrees.forEach((item, index) => {
+            //   activeScene = item.children.find((pano) => pano.id == currentScene.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 == currentScene.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 == currentScene.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");
+            //       }
+            //     });
+            //   });
+            // });
+          });
         }
       },
       deep: true,
@@ -193,9 +257,11 @@ export default {
     "info.firstScene": {
       // immediate: true,
       handler: function (newVal, oldVal) {
-        if (!newVal&&oldVal ) {
-          console.error("设置空");
-          this.$store.commit("scene/setCurrentScene", null);
+        if (!newVal && oldVal) {
+          if (oldVal.id == this.currentScene.id) {
+            console.log("设置空", oldVal, this.currentScene);
+            this.$store.commit("scene/setCurrentScene", null);
+          }
         }
       },
       deep: true,
@@ -207,7 +273,7 @@ export default {
       insertTag: null,
       isShowSelectionWindow: false,
       expandedNodes: [], // 用于存储已展开节点的数组
-      nodesMap: [],
+      nodesMap: {},
       newNodesMap: [],
       reNameId: null,
       backUpName: "",
@@ -223,6 +289,11 @@ export default {
       // 当节点展开时，将其id添加到数组中
       this.expandedNodes.push(data.id);
       console.error(this.expandedNodes);
+
+      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);
@@ -232,6 +303,10 @@ export default {
         this.expandedNodes.splice(index, 1);
       }
       console.error(this.expandedNodes);
+      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);
@@ -327,7 +402,7 @@ export default {
       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;
+        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 {
@@ -469,6 +544,7 @@ export default {
     onConfirmDelete(node, data) {
       // this.$emit("delete", this.sceneInfo.id);
       // this.isConfirmingDeletion = false;
+
       this.onRequestForCancelDelete();
       if (this.sceneList.length == 1 && data.type != "group") {
         this.$alert({
@@ -516,6 +592,53 @@ export default {
       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;

packages/qjkankan-editor/src/framework/EditorHead.vue

@@ -60,10 +60,9 @@ export default {
           // console.error("sceneList change");
           let currentScene = newVal.find((item) => item.id == this.currentScene.id);
           if (!currentScene) {
+            //如果找不到当前选择的场景，则情况。重新遍历查找
             this.$store.commit("scene/setCurrentScene", null);
           }
-          // this.$store.commit("base/ininDefaultData");
-          // this.$store.commit("screen/setVisualAngleList", state.sceneList);
         }
       },
       deep: true,
@@ -98,49 +97,50 @@ export default {
     }),
 
     info() {
-      console.error(this.currentSecondId);
       if (this.baseInfo) {
-        this.$store.commit("base/ininDefaultData");
+        this.$store.commit("base/initDefaultData");
         //初始化
-        let firstScene = null;
-        if (this.baseInfo.firstScene) {
-          firstScene = this.baseInfo.firstScene;
-        } else {
-          // firstScene = this.baseInfo.navigationTrees[0].children[0];
-          firstScene = this.sceneList[0];
-        }
 
         if (!this.currentScene) {
-          this.$store.commit("scene/setCurrentScene", firstScene);
-        }
-        let activeScene = null;
-        this.baseInfo.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");
+          console.error("初始化");
+          let firstScene = null;
+          if (this.baseInfo.firstScene) {
+            firstScene = this.baseInfo.firstScene;
+          } else {
+            // firstScene = this.baseInfo.navigationTrees[0].children[0];
+            firstScene = this.sceneList[0];
           }
-          item = item.children.forEach((s_item, s_index) => {
-            activeScene = s_item.children.find((pano) => pano.id == firstScene.id);
+          this.$store.commit("scene/setCurrentScene", firstScene);
+          let activeScene = null;
+          this.baseInfo.navigationTrees.forEach((item, index) => {
+            activeScene = 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 });
+              this.$store.commit("scene/setCurrentScenesList", item.children);
+              this.$store.commit("navigation/setData", { currentSecondId: null, 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);
+            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 (data.firstScene) {
         //   firstScene = data.scenes.find((item) => item.sceneCode == data.firstScene.sceneCode);
         // }
@@ -183,47 +183,123 @@ export default {
       }
       const isFixData = this.fixData();
       if (isFixData) {
-        this.info.scenes = this.info.scenes.map((item) => {
-          if (typeof item.someData == "string") {
-            item.someData = item.someData.replace(hhhreg, "");
-          }
-          return item;
-        });
+        // this.info.scenes = this.info.scenes.map((item) => {
+        //   if (typeof item.someData == "string") {
+        //     item.someData = item.someData.replace(hhhreg, "");
+        //   }
+        //   return item;
+        // });
         $waiting.show();
 
-        saveWorks(
-          {
-            password: this.info.work.password,
-            someData: { ...this.info, status: 1 },
-          },
-          () => {
-            this.$msg.success(this.$i18n.t("gather.save_done"));
-            // document.title = this.info.name;
-            document.title = this.info.work.name || this.$i18n.t("gather.no_title");
-            // this.getInfo().then((res) => {
-            //   // getInfo里调用了后端接口，底层用了jquery的网络请求方法，为啥会导致promise嵌套没有展平，res拿到的不是promise 对象的resolve值而是promise对象本身？？？？
-            //   res.then(() => {
-            //     this.$store.commit("UpdateIsShowState", true);
-            //     $waiting.hide()
-            //     setTimeout(() => {
-            //       if (this.info.scenes.length <= 0 && this.isShow) {
-            //         return this.$alert({
-            //           content: this.$i18n.t('gather.at_least_one_scene'),
-            //         });
-            //       }
-            //       this.showPreview = true;
-            //     }, 500);
-            //   })
-            // });
+        let promises = [];
+        if (this.saveApiList.length) {
+          let idx = this.saveApiList.find((item) => item == "navigation");
+          console.error(idx);
+          let length = 0;
+          if (idx) {
+            //优先保存导航树
+            this.$store.dispatch(`navigation/save`).then((res) => {
+              this.saveApiList.forEach((item) => {
+                if (item != "navigation") {
+                  promises.push(this.$store.dispatch(`${item}/save`));
+                }
+              });
+              let currentRouter = this.saveApiList.find((item) => item == this.$route.name);
+              if (!currentRouter) {
+                promises.push(this.$store.dispatch(`${this.$route.name}/save`));
+              }
+              Promise.all(promises)
+                .then((res) => {
+                  console.log("Promise.all success", res);
+                  this.$store.commit(`scene/removeSaveApi`);
+                  this.$msg.success(i18n.t("gather.save_done"));
+                  //成功后查看
+                  $waiting.hide();
+                  if (this.sceneList <= 0 && this.isShow) {
+                    return this.$alert({
+                      content: this.$i18n.t("gather.at_least_one_scene"),
+                    });
+                  }
+                  this.showPreview = true;
+                })
+                .catch((err) => {
+                  console.error("Promise.all failed", err);
+                });
+            });
+          } else {
+            this.saveApiList.forEach((item) => {
+              promises.push(this.$store.dispatch(`${item}/save`));
+            });
+            let currentRouter = this.saveApiList.find((item) => item == this.$route.name);
+            if (!currentRouter) {
+              promises.push(this.$store.dispatch(`${this.$route.name}/save`));
+            }
+            Promise.all(promises)
+              .then((res) => {
+                console.log("Promise.all success", res);
+                this.$store.commit(`scene/removeSaveApi`);
+                this.$msg.success(i18n.t("gather.save_done"));
+                //成功后查看
+                $waiting.hide();
+                if (this.sceneList <= 0 && this.isShow) {
+                  return this.$alert({
+                    content: this.$i18n.t("gather.at_least_one_scene"),
+                  });
+                }
+                this.showPreview = true;
+              })
+              .catch((err) => {
+                console.error("Promise.all failed", err);
+              });
+          }
+        } else {
+          this.$store.dispatch(`${this.$route.name}/save`).then((res) => {
+            this.$store.commit(`scene/removeSaveApi`);
+            this.$msg.success(i18n.t("gather.save_done"));
+            //成功后查看
             $waiting.hide();
-            if (this.info.scenes.length <= 0 && this.isShow) {
+            if (this.sceneList <= 0 && this.isShow) {
               return this.$alert({
                 content: this.$i18n.t("gather.at_least_one_scene"),
               });
             }
             this.showPreview = true;
-          }
-        );
+          });
+        }
+
+        // saveWorks(
+        //   {
+        //     password: this.info.work.password,
+        //     someData: { ...this.info, status: 1 },
+        //   },
+        //   () => {
+        //     this.$msg.success(this.$i18n.t("gather.save_done"));
+        //     // document.title = this.info.name;
+        //     document.title = this.info.work.name || this.$i18n.t("gather.no_title");
+        //     // this.getInfo().then((res) => {
+        //     //   // getInfo里调用了后端接口，底层用了jquery的网络请求方法，为啥会导致promise嵌套没有展平，res拿到的不是promise 对象的resolve值而是promise对象本身？？？？
+        //     //   res.then(() => {
+        //     //     this.$store.commit("UpdateIsShowState", true);
+        //     //     $waiting.hide()
+        //     //     setTimeout(() => {
+        //     //       if (this.info.scenes.length <= 0 && this.isShow) {
+        //     //         return this.$alert({
+        //     //           content: this.$i18n.t('gather.at_least_one_scene'),
+        //     //         });
+        //     //       }
+        //     //       this.showPreview = true;
+        //     //     }, 500);
+        //     //   })
+        //     // });
+        //     $waiting.hide();
+        //     if (this.info.scenes.length <= 0 && this.isShow) {
+        //       return this.$alert({
+        //         content: this.$i18n.t("gather.at_least_one_scene"),
+        //       });
+        //     }
+        //     this.showPreview = true;
+        //   }
+        // );
       }
     },
 

packages/qjkankan-editor/src/framework/play/pano/components/new-list.vue

@@ -127,7 +127,10 @@ export default {
     currentScenesList(val) {
       this.$nextTick(() => {
         this.initSceneSwiper();
-        // this.initRootGroupSwiper();
+        if (this.info.navigationTrees.length > 1) {
+          this.initRootGroupSwiper();
+        }
+
         if (this.info.navigationTrees[this.currentRootId]?.children[this.currentSecondId]?.type == "group") {
           this.initSecondGroupSwiper();
         }
@@ -137,9 +140,16 @@ export default {
       // immediate: true,
       handler: function (newVal, oldVal) {
         if (newVal) {
-          this.$nextTick(() => {
-            // this.changeSceneList();
-          });
+          // //监听数变化更新当前列表
+          // this.$nextTick(() => {
+          //   if (this.currentRootId || this.currentSecondId) {
+          //     if (this.currentRootId && this.currentSecondId) {
+          //       this.$store.commit("scene/setCurrentScenesList", this.info.navigationTrees[this.rootTabIndex].children[this.secondTabIndex].children);
+          //     } else if (this.currentRootId && !this.currentSecondId) {
+          //       this.$store.commit("scene/setCurrentScenesList", this.info.navigationTrees[this.rootTabIndex].children);
+          //     }
+          //   }
+          // });
         }
       },
       deep: true,
@@ -191,13 +201,15 @@ export default {
       }
       return name;
     },
+
     tabRoot(item) {
-      this.$store.commit("navigation/setData", { currentRootId: item.id });
+      this.$store.commit("navigation/setData", { currentRootId: item.id, currentSecondId: null });
       this.changeSceneList();
     },
     tabSecond(item) {
       this.$store.commit("navigation/setData", { currentSecondId: item.id });
       let sceneList = this.info.navigationTrees[this.rootTabIndex].children[this.secondTabIndex].children;
+      // console.error(sceneList.length)
       this.$store.commit("scene/setCurrentScenesList", sceneList);
       // this.changeSceneList();
     },
@@ -217,7 +229,9 @@ export default {
       }
       this.$nextTick(() => {
         this.initSceneSwiper();
-        this.initRootGroupSwiper();
+        if (this.info.navigationTrees.length > 1) {
+          this.initRootGroupSwiper();
+        }
         if (this.info.navigationTrees[this.currentRootId]?.children[this.currentSecondId]?.type == "group") {
           this.initSecondGroupSwiper();
         }

packages/qjkankan-editor/src/framework/play/pano/index.vue

@@ -77,7 +77,7 @@ export default {
       __krfn.utils.toggleHotspot(this.$getKrpano(), newVal == "hotspot");
       this.handleRouterCoverForCap();
     },
-    currentScene(newVal) {
+    currentScene(newVal, oldVal) {
       console.error(newVal);
       if (newVal) {
         this.$nextTick(() => {
@@ -106,10 +106,14 @@ export default {
         }
         this.handleIFrameCss();
       } else {
+        // if (newVal.sid && newVal.sid == oldVal?.sid) {
+        //   //如果是保存则禁止刷新
+        //   return false;
+        // }
         $("#pano").empty();
         window.vrInitFn = () => {
           $waiting.hide();
-          let hotspots = this.hotspotList.filter((item) => item.navigationId == this.currentScene.id);
+          let hotspots = this.hotspotList.filter((item) => item.navigationId == this.currentScene.id || item.navigationId == this.currentScene.sid);
           __krfn.utils.initHotspot(this.$getKrpano(), hotspots, true);
           __krfn.utils.toggleHotspot(this.$getKrpano(), this.$route.name == "hotspot");
         };
@@ -142,7 +146,6 @@ export default {
         if (newVal) {
           removepano("#pano");
           $waiting.show();
-
           embedpano({
             // http://oss-xiaoan.oss-cn-shenzhen.aliyuncs.com/720yun_fd_manage/fd720_Va0LrkXW3/vtour/tour.xml
             // xml: "%HTMLPATH%/static/template/tour.xml",

packages/qjkankan-editor/src/views/base/backgroundMusicSettings.vue

@@ -61,7 +61,8 @@ export default {
       this.isShowSelectionWindow = true
     },
     onClickDeleteMusicBtn() {
-      this.info.workBackgroundMusic.id = null
+      this.info.workBackgroundMusic.id = null 
+      this.info.workBackgroundMusic.fodderId = null
       this.info.workBackgroundMusic.name = null
       this.info.workBackgroundMusic.ossPath = null
     },

packages/qjkankan-view/.env.testdev

@@ -10,4 +10,4 @@ VUE_APP_APIS_URL=https://test.4dkankan.com/
 VUE_APP_DEBBUG_FLAG=0516-03
 VUE_APP_DEBBUG_NOTIFY=0
 VUE_APP_DEBBUG_V4=1
-VUE_APP_DEBBUG_V4_URL="http://192.168.0.37:8081"
+VUE_APP_DEBBUG_V4_URL="http://192.168.0.12:8082"

packages/qjkankan-view/src/components/Pano/index.vue

@@ -31,7 +31,7 @@ const loadScene = async (currentScene) => {
   let app = await getApp();
   // await new Promise((r) => setTimeout(r, 10000));
   console.error("loadScene", unref(currentScene).id);
-  console.error(app.krpanoDom);
+
   if (app.krpanoDom) {
     let { sceneCode, initVisual, someData } = currentScene;
 
@@ -83,7 +83,6 @@ const loadScene = async (currentScene) => {
     // const { earth, sky } = currentScene.customMask;
     let customMask = metadata.value.workCustomMaskList.find((item) => item.navigationId == currentScene.id);
 
-    console.error(customMask);
     if (!customMask) {
       customMask = {
         data: {
@@ -197,24 +196,21 @@ const updateListPosi = () => {
 
 useApp().then((app) => {
   app.Tags.on("clickHotspot", (data) => {
-    console.error("clickHotspot", data);
     let { id } = data;
     // let hotspot = unref(currentScene).someData.hotspots.find((item) => item.name.toLowerCase() === id.toLowerCase());
     let hotspot = hotspots.value.find((item) => item.name.toLowerCase() === id.toLowerCase());
-    console.error("clickHotspot", hotspot);
     if (hotspot) {
       const isNotclickType = ["tag"];
       if (!isNotclickType.includes(hotspot.hotspotType)) {
         console.log("click", hotspot);
         // store.commit("functions/setPauseFrom", "");
         // store.dispatch("audio/pauseBGM");
-        console.error(scenesList.value, hotspot.scene.id);
+
         if (hotspot.hotspotType == "phone" && unref(isMobile)) {
           window.open(`tel:${hotspot.phoneInfo.phone}`, "_self");
           return;
         }
         if (hotspot.hotspotType == "scene") {
-          console.error(scenesList.value.find((item) => item.id == hotspot.scene.id));
           store.commit(
             "scene/setCurrentScene",
             scenesList.value.find((item) => item.id == hotspot.scene.id)

packages/qjkankan-view/src/components/UIGather/list.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bar-list" v-if="metadata?.navigationTrees?.length">
+  <div class="bar-list" v-if="metadata?.navigationTrees?.length" :class="{ barshow: isShowScenesList }">
     <div class="top-con" v-show="currentScenesList.length">
       <div v-if="currentScenesList.length" class="scene-list swiper-container" ref="scene-swiper" :style="`width:${scenesListW > 1150 ? '100%' : scenesListW + 'px'}`">
         <!-- <div class="scene-list swiper-container" ref="scene-swiper"> -->
@@ -48,7 +48,7 @@
             <template v-for="(item, index) in metadata?.navigationTrees[rootTabIndex]?.children">
               <div
                 class="swiper-slide second-group-slide"
-                @click="tabSecond(item)"
+                @click="tabSecond(item, index)"
                 v-if="item.children.length"
                 :class="{ active: currentSecondId == item.id, loopspan: fixTitle(item.name).length > spanlength && currentSecondId == item.id }"
               >
@@ -69,25 +69,27 @@
     <div class="bottom-com">
       <div v-if="metadata?.navigationTrees?.length > 1" :style="`width:${catalogRootW}px;`" class="root-group-list swiper-container" ref="root-group">
         <div class="swiper-wrapper root-group-wrapper">
-          <div
-            class="swiper-slide root-group-slide"
-            :class="{
-              active: currentRootId == item.id,
-
-              loopspan: fixTitle(item.name).length > spanlength && currentRootId.id == item.id,
-            }"
-            v-for="(item, index) in metadata?.navigationTrees"
-            @click="tabRoot(item)"
-          >
-            <div class="root-group-content">
-              <marquee-text :duration="Math.ceil(fixTitle(item.name).length / 10) * 5" :key="item.id" :repeat="1" v-if="fixTitle(item.name).length > spanlength && currentRootId == item.id">
-                {{ fixTitle(item.name) }}
-              </marquee-text>
-              <span v-else>
-                {{ fixTitle(item.name) }}
-              </span>
+          <template v-for="(item, index) in metadata?.navigationTrees">
+            <div
+              v-if="item.children.length"
+              class="swiper-slide root-group-slide"
+              :class="{
+                active: currentRootId == item.id,
+
+                loopspan: fixTitle(item.name).length > spanlength && currentRootId.id == item.id,
+              }"
+              @click="tabRoot(item, index)"
+            >
+              <div class="root-group-content">
+                <marquee-text :duration="Math.ceil(fixTitle(item.name).length / 10) * 5" :key="item.id" :repeat="1" v-if="fixTitle(item.name).length > spanlength && currentRootId == item.id">
+                  {{ fixTitle(item.name) }}
+                </marquee-text>
+                <span v-else>
+                  {{ fixTitle(item.name) }}
+                </span>
+              </div>
             </div>
-          </div>
+          </template>
         </div>
       </div>
     </div>
@@ -124,19 +126,6 @@ const isShowScenesList = computed(() => store.getters["functions/isShowScenesLis
 const currentScenesList = computed(() => store.getters["scene/currentScenesList"]);
 
 const show = ref(false);
-
-watch(
-  () => currentScenesList.value,
-  () => {
-    nextTick(() => {
-      initSceneSwiper();
-      initRootGroupSwiper();
-      if (metadata.value.navigationTrees[currentRootId.value]?.children[currentSecondId.value]?.type == "group") {
-        initSecondGroupSwiper();
-      }
-    });
-  }
-);
 const swidth = ref({
   swcatalogRoot: 104,
   swSecondary: 84,
@@ -148,12 +137,19 @@ const SecondGroupSwiper = ref(null);
 const rootGroupSwiper = ref(null);
 
 const rootTabIndex = computed(() => {
-  console.error(currentRootId.value);
-  return metadata.value && metadata.value?.navigationTrees ? metadata.value?.navigationTrees.findIndex((item) => item.id == currentRootId.value) : 0;
+  let idx = 0;
+  if (metadata.value && metadata.value?.navigationTrees) {
+    idx = metadata.value?.navigationTrees.findIndex((item) => item.id == currentRootId.value);
+  }
+  return idx;
 });
 
 const secondTabIndex = computed(() => {
-  return metadata.value && metadata.value?.navigationTrees ? metadata.value.navigationTrees[rootTabIndex.value]?.children.findIndex((item) => item.id == currentSecondId.value) : 0;
+  let idx = 0;
+  if (metadata.value && metadata.value?.navigationTrees) {
+    idx = metadata.value.navigationTrees[rootTabIndex.value]?.children.findIndex((item) => item.id == currentSecondId.value);
+  }
+  return idx;
 });
 
 const showSecondTab = computed(() => {
@@ -165,6 +161,29 @@ const secondaryW = computed(() => metadata.value.navigationTrees[secondTabIndex.
 const catalogRootW = computed(() => metadata.value.navigationTrees.length * (swidth.value["swcatalogRoot"] + 10));
 
 const innerW = computed(() => 1150);
+watch(
+  () => currentScenesList.value,
+  () => {
+    nextTick(() => {
+      initSceneSwiper();
+      initRootGroupSwiper();
+      // if (metadata.value.navigationTrees[rootTabIndex.value]?.children[secondTabIndex.value]?.type == "group") {
+      //   initSecondGroupSwiper();
+      // }
+    });
+  }
+);
+
+watch(
+  () => rootTabIndex.value,
+  (val) => {
+    nextTick(() => {
+      if (metadata.value.navigationTrees[rootTabIndex.value]?.children[secondTabIndex.value]?.type == "group") {
+        initSecondGroupSwiper();
+      }
+    });
+  }
+);
 
 const fixTitle = (name) => {
   if (name == "默认二级分组") {
@@ -190,15 +209,21 @@ const swiperOptions = {
   },
 };
 
-const tabRoot = (item) => {
+const tabRoot = (item, index) => {
   store.commit("scene/setData", { currentRootId: item.id });
-  // changeSceneList();
+  store.commit("scene/setData", { currentSecondId: null });
+  changeSceneList();
+  setTimeout(() => {
+    rootGroupSwiper.value.slideTo(index);
+  }, 0);
 };
-const tabSecond = (item) => {
+const tabSecond = (item, index) => {
   store.commit("scene/setData", { currentSecondId: item.id });
   let sceneList = metadata.value.navigationTrees[rootTabIndex.value].children[secondTabIndex.value].children;
   store.commit("scene/setCurrentScenesList", sceneList);
-  // this.changeSceneList();
+  setTimeout(() => {
+    SecondGroupSwiper.value.slideTo(index);
+  }, 0);
 };
 const changeSceneList = () => {
   let currentList = null;
@@ -233,6 +258,8 @@ const initSceneSwiper = () => {
 
   nextTick(() => {
     SceneSwiper.value = new Swiper(".scene-list", swiperOptions);
+    let index = currentScenesList.value.findIndex((item) => item.id == currentScene.value.id);
+    SceneSwiper.value.slideTo(index);
   });
 };
 const tabCurrentScene = (data, index) => {
@@ -248,6 +275,7 @@ const initSecondGroupSwiper = () => {
 
   nextTick(() => {
     SecondGroupSwiper.value = new Swiper(".second-group-list", swiperOptions);
+    SecondGroupSwiper.value.slideTo(secondTabIndex.value);
   });
 };
 
@@ -268,6 +296,8 @@ const initRootGroupSwiper = () => {
 
   if (!rootGroupSwiper.value) {
     rootGroupSwiper.value = new Swiper(".root-group-list", swiperOptions);
+    rootGroupSwiper.value.slideTo(rootTabIndex.value);
+    initSecondGroupSwiper();
   }
 };
 
@@ -306,6 +336,10 @@ onMounted(() => {
   max-width: @width;
   overflow: hidden;
   transition: 0.3s all ease;
+  max-height: 0px;
+  &.barshow {
+    max-height: 190px;
+  }
   .top-con {
     display: inline-block;
     margin: 0 auto 10px;

packages/qjkankan-view/src/components/UIGather/mobile/list copy.vue

@@ -0,0 +1,545 @@
+<template>
+  <div
+    class="bar-list"
+    v-if="
+      show &&
+      !(
+        metadata.catalogRoot &&
+        metadata.catalogRoot.length == 1 &&
+        scenes.length == 1 &&
+        secondaryList.length == 1
+      )
+    "
+    :class="{ barshow: isShowScenesList }"
+  >
+    <div class="top-con">
+      <div
+        class="swiper-container"
+        id="swScenes"
+        :style="`width:${Math.min(scenesListW, innerW)}px;
+      padding:${scenesListW > innerW ? '0 15px' : '0'}`"
+        v-if="currentScenesList.length > 0"
+      >
+        <ul class="swiper-wrapper">
+          <li
+            @click="tabCurrentScene(item)"
+            class="swiper-slide"
+            :class="{
+              active: currentScene.sceneCode == item.sceneCode,
+              loopspan:
+                item.sceneTitle.length > spanlength &&
+                currentScene.id == item.id,
+            }"
+            :style="{ backgroundImage: `url(${item.icon})` }"
+            v-for="(item, i) in currentScenesList"
+            :key="i"
+          >
+            <i
+              class="iconfont"
+              :class="
+                item.type == '4dkk' ? 'icon-editor_3d' : 'icon-editor_panoramic'
+              "
+            ></i>
+            <div class="marquee">
+              <marquee-text
+                :repeat="1"
+                :duration="Math.ceil(item.sceneTitle.length / 10) * 5"
+                :key="item.id"
+                v-if="
+                  item.sceneTitle.length > spanlength &&
+                  currentScene.id == item.id
+                "
+              >
+                {{ item.sceneTitle }}
+              </marquee-text>
+              <span v-else>
+                {{ item.sceneTitle }}
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+
+      <div
+        class="swiper-container"
+        id="swSecondary"
+        :style="`width:${Math.min(secondaryW, innerW)}px;
+      padding:${secondaryW > innerW ? '0 15px' : '0'}`"
+        v-if="secondaryList.length > 1"
+      >
+        <ul class="swiper-wrapper">
+          <li
+            class="swiper-slide"
+            @click="tabSecondary(item)"
+            :class="{
+              active: currentSecondary.id == item.id,
+              loopspan:
+                fixTitle(item.name).length > spanlength &&
+                currentSecondary.id == item.id,
+            }"
+            v-for="(item, i) in secondaryList"
+            :key="i"
+          >
+            <marquee-text
+              :duration="Math.ceil(fixTitle(item.name).length / 10) * 5"
+              :key="item.id"
+              :repeat="1"
+              v-if="
+                fixTitle(item.name).length > spanlength &&
+                currentSecondary.id == item.id
+              "
+            >
+              {{ fixTitle(item.name) }}
+            </marquee-text>
+            <span v-else>
+              {{ fixTitle(item.name) }}
+            </span>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div
+      class="swiper-container"
+      id="swcatalogRoot"
+      :style="`width:${Math.min(catalogRootW, innerW)}px;
+    padding:${catalogRootW > innerW ? '0 15px' : '0'}`"
+      v-if="metadata.catalogRoot.length > 0 && metadata.catalogs.length > 1"
+    >
+      <ul class="swiper-wrapper" v-show="metadata.catalogRoot.length > 1">
+        <li
+          class="swiper-slide"
+          :class="{
+            active: currentCatalogRoot.id == item.id,
+            loopspan:
+              fixTitle(item.name).length > spanlength &&
+              currentCatalogRoot.id == item.id,
+          }"
+          @click="tabRoot(item)"
+          v-for="(item, i) in metadata.catalogRoot"
+          :key="i"
+        >
+          <marquee-text
+            :duration="Math.ceil(fixTitle(item.name).length / 10) * 5"
+            :key="item.id"
+            :repeat="1"
+            v-if="
+              fixTitle(item.name).length > spanlength &&
+              currentCatalogRoot.id == item.id
+            "
+          >
+            {{ fixTitle(item.name) }}
+          </marquee-text>
+          <span v-else>
+            {{ fixTitle(item.name) }}
+          </span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  unref,
+  watch,
+  watchEffect,
+  computed,
+  onMounted,
+  nextTick,
+} from "vue";
+import { useStore } from "vuex";
+import { useApp } from "@/app";
+import { useI18n, getLocale } from "@/i18n";
+const { t } = useI18n({ useScope: "global" });
+import MarqueeText from "vue-marquee-text-component";
+
+const store = useStore();
+
+const spanlength = ref(5);
+
+const metadata = computed(() => store.getters["scene/metadata"]);
+const scenes = computed(() => store.getters["scene/list"]);
+const currentScene = computed(() => store.getters["scene/currentScene"]);
+
+const currentCatalogRoot = computed(
+  () => store.getters["scene/currentCatalogRoot"]
+);
+const currentSecondary = computed(
+  () => store.getters["scene/currentSecondary"]
+);
+
+const secondaryList = computed(() => store.getters["scene/secondaryList"]);
+
+const isShowScenesList = computed(
+  () => store.getters["functions/isShowScenesList"]
+);
+
+const currentScenesList = computed(
+  () => store.getters["scene/currentScenesList"]
+);
+
+const swidth = ref({
+  swcatalogRoot: 104,
+  swSecondary: 84,
+  swScenes: 72,
+});
+
+const innerW = computed(() => window.innerWidth);
+
+const scenesListW = computed(
+  () => currentScenesList.value.length * (swidth.value["swScenes"] + 10) - 10
+);
+const secondaryW = computed(
+  () => secondaryList.value.length * (swidth.value["swSecondary"] + 10) - 10
+);
+const catalogRootW = computed(
+  () =>
+    metadata.value.catalogRoot.length * (swidth.value["swcatalogRoot"] + 10) -
+    10
+);
+
+const show = ref(false);
+
+const tabCurrentScene = (data) => {
+  console.log("tabCurrentScene", data.id, currentScene.value.id);
+  if (data.id !== currentScene.value.id) {
+    store.commit("scene/setCurrentScene", data);
+    setTimeout(() => {
+      scenesSwiperFocus();
+    }, 300);
+  } else {
+    console.log("重复点击当前导航");
+    // window.alert("alert-test-->重复点击当前导航");
+  }
+};
+
+const tabSecondary = (data) => {
+  store.commit("scene/setCurrentSecondary", data);
+};
+
+const tabRoot = (data) => {
+  store.commit("scene/setCurrentCatalogRoot", data);
+};
+
+const fixTitle = (name) => {
+  if (name == "默认二级分组") {
+    name = t("navigation.default_group_two");
+  } else if (name == "一级分组") {
+    name = t("navigation.group_one");
+  } else {
+    name = name;
+  }
+  return name;
+};
+
+const swiperOptions = {
+  slidesPerView: "auto",
+  centeredSlides: true,
+  spaceBetween: 10,
+  centerInsufficientSlides: true,
+  centeredSlidesBounds: true,
+  freeMode: {
+    enabled: true,
+    sticky: false,
+  },
+};
+
+// const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+const initMainSwiper = () => {
+  nextTick(() => {
+    if (window.mainNatSwiper) {
+      window.mainNatSwiper.update();
+      window.sencordNatSwiper.slideReset();
+    }
+    window.mainNatSwiper = new Swiper("#swcatalogRoot", swiperOptions);
+  });
+};
+const initsencordNatSwiper = () => {
+  nextTick(() => {
+    if (window.sencordNatSwiper) {
+      window.sencordNatSwiper.update();
+      window.sencordNatSwiper.slideReset();
+    }
+    window.sencordNatSwiper = new Swiper("#swSecondary", swiperOptions);
+  });
+};
+const initScenesSwiper = () => {
+  // console.warn("initScenesSwiper");
+  nextTick(() => {
+    if (window.scenesNatSwiper) {
+      window.scenesNatSwiper.slides.length > 0 &&
+        window.scenesNatSwiper.update();
+      window.scenesNatSwiper.slideReset();
+      // window.scenesNatSwiper = null;
+    } else {
+      window.scenesNatSwiper = new Swiper("#swScenes", {
+        ...swiperOptions,
+      });
+    }
+    scenesSwiperFocus();
+  });
+};
+
+const scenesSwiperFocus = () => {
+  const sceneIndex = Array.from(currentScenesList.value).findIndex(
+    (item) => item.id === currentScene.value.id
+  );
+  if (window.scenesNatSwiper && window.scenesNatSwiper.slides.length > 0) {
+    const index = sceneIndex < 0 ? 0 : sceneIndex;
+    const fIndex = index < 5 ? 0 : index;
+    console.warn("scenesSwiperFocus", fIndex);
+    window.scenesNatSwiper.slideTo(fIndex);
+  }
+};
+
+const sencordNatSwiperFocus = () => {
+  nextTick(() => {
+    const current = Array.from(secondaryList.value).findIndex(
+      (item) => item.id === currentSecondary.value.id
+    );
+    if (window.sencordNatSwiper && window.sencordNatSwiper.slides.length > 0) {
+      console.warn("current-sencordNatSwiper-index", current);
+      window.sencordNatSwiper.slideTo(current);
+    }
+  });
+};
+
+onMounted(() => {
+  useApp().then(async (app) => {
+    show.value = true;
+  });
+  watchEffect(() => {
+    if (
+      metadata.value.catalogRoot &&
+      unref(metadata.value.catalogRoot).length > 0
+    ) {
+      initMainSwiper();
+    }
+  });
+
+  watch(currentSecondary, () => {
+    if (unref(secondaryList).length > 1) {
+      initsencordNatSwiper();
+      sencordNatSwiperFocus();
+    } else {
+      if (window.sencordNatSwiper) {
+        console.warn("destroy-sencordNatSwiper");
+        window.sencordNatSwiper.update();
+        window.sencordNatSwiper.slideReset();
+      }
+    }
+  });
+
+  watch(currentScenesList, () => {
+    initScenesSwiper();
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.bar-list {
+  position: absolute;
+  bottom: 88px;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+  overflow: hidden;
+  max-height: 0;
+  transition: 0.3s all ease;
+  z-index: 9;
+  width: 100%;
+
+  .swiper-container {
+    width: 100%;
+    position: relative;
+    margin: 0 auto;
+
+    > ul {
+      > li {
+        white-space: nowrap;
+
+        > span,
+        > div > span {
+          cursor: pointer;
+          display: inline-block;
+          color: rgba(255, 255, 255, 0.6);
+        }
+
+        &.loopspan {
+          > span,
+          > div > span {
+            animation: 5s wordsLoop linear infinite normal;
+          }
+        }
+
+        &.active {
+          > span,
+          > div > span {
+            color: rgba(255, 255, 255, 1);
+          }
+        }
+      }
+    }
+  }
+
+  .top-con {
+    margin-bottom: 10px;
+    padding: 10px 0;
+    width: 100%;
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  #swcatalogRoot {
+    padding: 0 15px;
+
+    > ul {
+      > li {
+        width: 104px;
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 4px;
+        padding: 4px 10px;
+        border: 1px solid rgba(255, 255, 255, 0.5);
+        box-sizing: border-box;
+        overflow: hidden;
+
+        > span {
+          width: 100%;
+          word-break: keep-all;
+        }
+
+        &.active {
+          border: 1px solid rgba(255, 255, 255, 1);
+        }
+      }
+    }
+  }
+
+  #swSecondary {
+    margin: 20px auto 10px;
+    padding: 0 15px;
+
+    > ul {
+      > li {
+        width: 84px;
+        box-sizing: border-box;
+        overflow: hidden;
+        padding-bottom: 6px;
+
+        > span {
+          width: 100%;
+          word-break: keep-all;
+        }
+
+        &.active {
+          position: relative;
+
+          &::before {
+            content: "";
+            display: inline-block;
+            position: absolute;
+            bottom: 0;
+            width: 20px;
+            height: 2px;
+            z-index: 9999;
+            left: 50%;
+            transform: translateX(-50%);
+            background: var(--colors-primary-base);
+          }
+        }
+      }
+    }
+  }
+
+  #swScenes {
+    // padding: 0 15px;
+    > ul {
+      > li {
+        cursor: pointer;
+        width: 72px;
+        height: 72px;
+        border-radius: 6px;
+        border: 1px solid #ffffff;
+        background-size: cover;
+        position: relative;
+        overflow: hidden;
+
+        .iconfont {
+          position: absolute;
+          left: 4px;
+          top: 4px;
+          z-index: 99;
+
+          &::after {
+            background: rgba(0, 0, 0, 0.3);
+            content: "";
+            width: 14px;
+            height: 14px;
+            display: inline-block;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: -1;
+            filter: blur(4px);
+          }
+        }
+
+        > div {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          height: 20px;
+          background: rgba(0, 0, 0, 0.5);
+          width: 100%;
+          overflow: hidden;
+
+          > span,
+          div {
+            width: 100%;
+            line-height: 20px;
+            word-break: keep-all;
+          }
+        }
+
+        &.active {
+          border: 1px solid var(--colors-primary-base);
+
+          > div {
+            > span {
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.barshow {
+  max-height: 190px;
+}
+
+@keyframes wordsLoop {
+  0% {
+    transform: translateX(100%);
+    -webkit-transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(-180%);
+    -webkit-transform: translateX(-180%);
+  }
+}
+.marquee {
+  .marquee-text-wrap {
+    height: 20px;
+    line-height: 20px;
+  }
+}
+</style>
+<style>
+.marquee-text-text {
+  padding: 0 5px;
+}
+</style>

packages/qjkankan-view/src/components/UIGather/mobile/list.vue

@@ -1,159 +1,110 @@
 <template>
-  <div
-    class="bar-list"
-    v-if="
-      show &&
-      !(
-        metadata.catalogRoot &&
-        metadata.catalogRoot.length == 1 &&
-        scenes.length == 1 &&
-        secondaryList.length == 1
-      )
-    "
-    :class="{ barshow: isShowScenesList }"
-  >
-    <div class="top-con">
+  <div class="bar-list" v-if="metadata?.navigationTrees?.length" :class="{ barshow: isShowScenesList }">
+    <div class="top-con" v-show="currentScenesList.length">
       <div
-        class="swiper-container"
+        ref="scene-swiper"
+        class="scene-list swiper-container"
         id="swScenes"
         :style="`width:${Math.min(scenesListW, innerW)}px;
       padding:${scenesListW > innerW ? '0 15px' : '0'}`"
         v-if="currentScenesList.length > 0"
       >
         <ul class="swiper-wrapper">
-          <li
-            @click="tabCurrentScene(item)"
-            class="swiper-slide"
-            :class="{
-              active: currentScene.sceneCode == item.sceneCode,
-              loopspan:
-                item.sceneTitle.length > spanlength &&
-                currentScene.id == item.id,
-            }"
-            :style="{ backgroundImage: `url(${item.icon})` }"
-            v-for="(item, i) in currentScenesList"
-            :key="i"
-          >
-            <i
-              class="iconfont"
-              :class="
-                item.type == '4dkk' ? 'icon-editor_3d' : 'icon-editor_panoramic'
-              "
-            ></i>
-            <div class="marquee">
-              <marquee-text
-                :repeat="1"
-                :duration="Math.ceil(item.sceneTitle.length / 10) * 5"
-                :key="item.id"
-                v-if="
-                  item.sceneTitle.length > spanlength &&
-                  currentScene.id == item.id
-                "
-              >
-                {{ item.sceneTitle }}
-              </marquee-text>
-              <span v-else>
-                {{ item.sceneTitle }}
-              </span>
-            </div>
-          </li>
+          <template v-for="(item, i) in currentScenesList" :key="item.id">
+            <li
+              @click="tabCurrentScene(item)"
+              class="swiper-slide"
+              :style="`background-image:url(${item.icon});`"
+              :class="{
+                active: currentScene.sceneCode == item.sceneCode,
+                loopspan: item.name.length > spanlength && currentScene.id == item.id,
+              }"
+            >
+              <i class="iconfont" :class="item.type == '4dkk' ? 'icon-editor_3d' : 'icon-editor_panoramic'"></i>
+              <div class="marquee">
+                <marquee-text :repeat="1" :duration="Math.ceil(item.name.length / 10) * 5" :key="item.id" v-if="item.name.length > spanlength && currentScene.id == item.id">
+                  {{ item.name }}
+                </marquee-text>
+                <span v-else>
+                  {{ item.name }}
+                </span>
+              </div>
+            </li>
+          </template>
         </ul>
       </div>
 
       <div
-        class="swiper-container"
+        class="swiper-container second-group-list"
+        ref="second-group-swiper"
         id="swSecondary"
         :style="`width:${Math.min(secondaryW, innerW)}px;
       padding:${secondaryW > innerW ? '0 15px' : '0'}`"
-        v-if="secondaryList.length > 1"
+        v-if="metadata?.navigationTrees[rootTabIndex] && metadata?.navigationTrees[rootTabIndex]?.children[0]?.type == 'group' && showSecondTab"
       >
         <ul class="swiper-wrapper">
-          <li
-            class="swiper-slide"
-            @click="tabSecondary(item)"
-            :class="{
-              active: currentSecondary.id == item.id,
-              loopspan:
-                fixTitle(item.name).length > spanlength &&
-                currentSecondary.id == item.id,
-            }"
-            v-for="(item, i) in secondaryList"
-            :key="i"
-          >
-            <marquee-text
-              :duration="Math.ceil(fixTitle(item.name).length / 10) * 5"
+          <template v-for="(item, i) in metadata?.navigationTrees[rootTabIndex]?.children">
+            <li
+              class="swiper-slide"
+              @click="tabSecond(item, i)"
+              :class="{
+                active: currentSecondId == item.id,
+                loopspan: fixTitle(item.name).length > spanlength && currentSecondId == item.id,
+              }"
               :key="item.id"
-              :repeat="1"
-              v-if="
-                fixTitle(item.name).length > spanlength &&
-                currentSecondary.id == item.id
-              "
+              v-if="item.children.length"
             >
-              {{ fixTitle(item.name) }}
-            </marquee-text>
-            <span v-else>
-              {{ fixTitle(item.name) }}
-            </span>
-          </li>
+              <marquee-text :duration="Math.ceil(fixTitle(item.name).length / 10) * 5" :key="item.id" :repeat="1" v-if="fixTitle(item.name).length > spanlength && currentSecondary.id == item.id">
+                {{ fixTitle(item.name) }}
+              </marquee-text>
+              <span v-else>
+                {{ fixTitle(item.name) }}
+              </span>
+            </li>
+          </template>
         </ul>
       </div>
     </div>
 
     <div
-      class="swiper-container"
+      class="swiper-container root-group-list"
+      ref="root-group"
       id="swcatalogRoot"
       :style="`width:${Math.min(catalogRootW, innerW)}px;
     padding:${catalogRootW > innerW ? '0 15px' : '0'}`"
-      v-if="metadata.catalogRoot.length > 0 && metadata.catalogs.length > 1"
+      v-if="metadata?.navigationTrees?.length > 1"
     >
-      <ul class="swiper-wrapper" v-show="metadata.catalogRoot.length > 1">
-        <li
-          class="swiper-slide"
-          :class="{
-            active: currentCatalogRoot.id == item.id,
-            loopspan:
-              fixTitle(item.name).length > spanlength &&
-              currentCatalogRoot.id == item.id,
-          }"
-          @click="tabRoot(item)"
-          v-for="(item, i) in metadata.catalogRoot"
-          :key="i"
-        >
-          <marquee-text
-            :duration="Math.ceil(fixTitle(item.name).length / 10) * 5"
-            :key="item.id"
-            :repeat="1"
-            v-if="
-              fixTitle(item.name).length > spanlength &&
-              currentCatalogRoot.id == item.id
-            "
+      <ul class="swiper-wrapper">
+        <template v-for="(item, i) in metadata?.navigationTrees" :key="item.id">
+          <li
+            v-if="item.children.length"
+            class="swiper-slide"
+            :class="{
+              active: currentRootId == item.id,
+              loopspan: fixTitle(item.name).length > spanlength && currentRootId == item.id,
+            }"
+            @click="tabRoot(item, i)"
           >
-            {{ fixTitle(item.name) }}
-          </marquee-text>
-          <span v-else>
-            {{ fixTitle(item.name) }}
-          </span>
-        </li>
+            <marquee-text :duration="Math.ceil(fixTitle(item.name).length / 10) * 5" :key="item.id" :repeat="1" v-if="fixTitle(item.name).length > spanlength && currentRootId == item.id">
+              {{ fixTitle(item.name) }}
+            </marquee-text>
+            <span v-else>
+              {{ fixTitle(item.name) }}
+            </span>
+          </li>
+        </template>
       </ul>
     </div>
   </div>
 </template>
 
 <script setup>
-import {
-  ref,
-  unref,
-  watch,
-  watchEffect,
-  computed,
-  onMounted,
-  nextTick,
-} from "vue";
+import { ref, watch, computed, onMounted, nextTick, unref, watchEffect } from "vue";
 import { useStore } from "vuex";
 import { useApp } from "@/app";
+import MarqueeText from "vue-marquee-text-component";
 import { useI18n, getLocale } from "@/i18n";
 const { t } = useI18n({ useScope: "global" });
-import MarqueeText from "vue-marquee-text-component";
 
 const store = useStore();
 
@@ -162,66 +113,81 @@ const spanlength = ref(5);
 const metadata = computed(() => store.getters["scene/metadata"]);
 const scenes = computed(() => store.getters["scene/list"]);
 const currentScene = computed(() => store.getters["scene/currentScene"]);
+const currentSecondId = computed(() => store.getters["scene/currentSecondId"]);
+const currentRootId = computed(() => store.getters["scene/currentRootId"]);
 
-const currentCatalogRoot = computed(
-  () => store.getters["scene/currentCatalogRoot"]
-);
-const currentSecondary = computed(
-  () => store.getters["scene/currentSecondary"]
-);
+const clamp = computed(() => (num, min, max) => Math.min(Math.max(num, min), max));
+
+const currentCatalogRoot = computed(() => store.getters["scene/currentCatalogRoot"]);
+const currentSecondary = computed(() => store.getters["scene/currentSecondary"]);
 
 const secondaryList = computed(() => store.getters["scene/secondaryList"]);
 
-const isShowScenesList = computed(
-  () => store.getters["functions/isShowScenesList"]
-);
+const isShowScenesList = computed(() => store.getters["functions/isShowScenesList"]);
 
-const currentScenesList = computed(
-  () => store.getters["scene/currentScenesList"]
-);
+const currentScenesList = computed(() => store.getters["scene/currentScenesList"]);
 
+const show = ref(false);
 const swidth = ref({
   swcatalogRoot: 104,
   swSecondary: 84,
   swScenes: 72,
 });
 
-const innerW = computed(() => window.innerWidth);
-
-const scenesListW = computed(
-  () => currentScenesList.value.length * (swidth.value["swScenes"] + 10) - 10
-);
-const secondaryW = computed(
-  () => secondaryList.value.length * (swidth.value["swSecondary"] + 10) - 10
-);
-const catalogRootW = computed(
-  () =>
-    metadata.value.catalogRoot.length * (swidth.value["swcatalogRoot"] + 10) -
-    10
-);
+const SceneSwiper = ref(null);
+const SecondGroupSwiper = ref(null);
+const rootGroupSwiper = ref(null);
 
-const show = ref(false);
+const rootTabIndex = computed(() => {
+  let idx = 0;
+  if (metadata.value && metadata.value?.navigationTrees) {
+    idx = metadata.value?.navigationTrees.findIndex((item) => item.id == currentRootId.value);
+  }
+  return idx;
+});
 
-const tabCurrentScene = (data) => {
-  console.log("tabCurrentScene", data.id, currentScene.value.id);
-  if (data.id !== currentScene.value.id) {
-    store.commit("scene/setCurrentScene", data);
-    setTimeout(() => {
-      scenesSwiperFocus();
-    }, 300);
-  } else {
-    console.log("重复点击当前导航");
-    // window.alert("alert-test-->重复点击当前导航");
+const secondTabIndex = computed(() => {
+  let idx = 0;
+  if (metadata.value && metadata.value?.navigationTrees) {
+    idx = metadata.value.navigationTrees[rootTabIndex.value]?.children.findIndex((item) => item.id == currentSecondId.value);
   }
-};
+  return idx;
+});
 
-const tabSecondary = (data) => {
-  store.commit("scene/setCurrentSecondary", data);
-};
+const showSecondTab = computed(() => {
+  return metadata.value && metadata.value?.navigationTrees ? metadata.value?.navigationTrees[rootTabIndex.value].children.some((item) => item.id != currentSecondId.value) : false;
+});
 
-const tabRoot = (data) => {
-  store.commit("scene/setCurrentCatalogRoot", data);
-};
+const scenesListW = computed(() => currentScenesList.value.length * (swidth.value["swScenes"] + 10) - 10);
+const secondaryW = computed(() => metadata.value?.navigationTrees[rootTabIndex.value].children.chilength * (swidth.value["swSecondary"] + 10) - 10);
+const catalogRootW = computed(() => metadata.value.navigationTrees.length * (swidth.value["swcatalogRoot"] + 10) - 10);
+
+const innerW = computed(() => window.innerWidth);
+
+watch(
+  () => currentScenesList.value,
+  () => {
+    nextTick(() => {
+      initSceneSwiper();
+      initRootGroupSwiper();
+
+      // if (metadata.value.navigationTrees[rootTabIndex.value]?.children[secondTabIndex.value]?.type == "group") {
+      //   initSecondGroupSwiper();
+      // }
+    });
+  }
+);
+watch(
+  () => rootTabIndex.value,
+  (val) => {
+    console.error(val);
+    nextTick(() => {
+      if (metadata.value.navigationTrees[rootTabIndex.value]?.children[secondTabIndex.value]?.type == "group") {
+        initSecondGroupSwiper();
+      }
+    });
+  }
+);
 
 const fixTitle = (name) => {
   if (name == "默认二级分组") {
@@ -233,7 +199,6 @@ const fixTitle = (name) => {
   }
   return name;
 };
-
 const swiperOptions = {
   slidesPerView: "auto",
   centeredSlides: true,
@@ -245,96 +210,115 @@ const swiperOptions = {
     sticky: false,
   },
 };
+const tabRoot = (item, index) => {
+  store.commit("scene/setData", { currentRootId: item.id });
+  store.commit("scene/setData", { currentSecondId: null });
+  changeSceneList();
+  setTimeout(() => {
+    rootGroupSwiper.value.slideTo(index);
+    SecondGroupSwiper.value.slideTo(rootTabIndex.value);
+  }, 0);
+};
+const tabSecond = (item, index) => {
+  store.commit("scene/setData", { currentSecondId: item.id });
+  let sceneList = metadata.value.navigationTrees[rootTabIndex.value].children[secondTabIndex.value].children;
+  store.commit("scene/setCurrentScenesList", sceneList);
 
-// const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+  //
 
-const initMainSwiper = () => {
+  setTimeout(() => {
+    SecondGroupSwiper.value.slideTo(index);
+  }, 0);
+
+  // changeSceneList();
+};
+const changeSceneList = () => {
+  let currentList = null;
+
+  if (metadata.value.navigationTrees[rootTabIndex.value].children.length && metadata.value.navigationTrees[rootTabIndex.value].children[0].type == "group") {
+    store.commit("scene/setData", { currentSecondId: metadata.value.navigationTrees[rootTabIndex.value].children[0].id });
+    currentList = metadata.value.navigationTrees[rootTabIndex.value].children[secondTabIndex.value].children;
+    store.commit("scene/setCurrentScenesList", currentList);
+  }
+
+  if (secondTabIndex.value == -1) {
+    console.error("没有二级目录");
+    let rootList = metadata.value.navigationTrees.find((item) => item.id == currentRootId.value);
+    store.commit("scene/setCurrentScenesList", rootList.children);
+  }
   nextTick(() => {
-    if (window.mainNatSwiper) {
-      window.mainNatSwiper.update();
-      window.sencordNatSwiper.slideReset();
+    initSceneSwiper();
+    initRootGroupSwiper();
+    if (metadata.value.navigationTrees[currentRootId.value]?.children[currentSecondId.value]?.type == "group") {
+      initSecondGroupSwiper();
     }
-    window.mainNatSwiper = new Swiper("#swcatalogRoot", swiperOptions);
   });
 };
-const initsencordNatSwiper = () => {
+const initSceneSwiper = () => {
+  if (SceneSwiper.value) {
+    SceneSwiper.value.destroy();
+    SceneSwiper.value = null;
+  }
+  if (!currentScenesList.value.length) {
+    return;
+  }
+
   nextTick(() => {
-    if (window.sencordNatSwiper) {
-      window.sencordNatSwiper.update();
-      window.sencordNatSwiper.slideReset();
-    }
-    window.sencordNatSwiper = new Swiper("#swSecondary", swiperOptions);
+    SceneSwiper.value = new Swiper(".scene-list", swiperOptions);
+    let index = currentScenesList.value.findIndex((item) => item.id == currentScene.value.id);
+    SceneSwiper.value.slideTo(index);
   });
 };
-const initScenesSwiper = () => {
-  // console.warn("initScenesSwiper");
+const tabCurrentScene = (data, index) => {
+  store.commit("scene/setCurrentScene", data);
+
+  SceneSwiper.value.slideTo(index);
+};
+const initSecondGroupSwiper = () => {
+  console.error("initSecondGroupSwiper");
+  if (SecondGroupSwiper.value) {
+    SecondGroupSwiper.value.destroy();
+    SecondGroupSwiper.value = null;
+  }
+
   nextTick(() => {
-    if (window.scenesNatSwiper) {
-      window.scenesNatSwiper.slides.length > 0 &&
-        window.scenesNatSwiper.update();
-      window.scenesNatSwiper.slideReset();
-      // window.scenesNatSwiper = null;
-    } else {
-      window.scenesNatSwiper = new Swiper("#swScenes", {
-        ...swiperOptions,
-      });
-    }
-    scenesSwiperFocus();
+    SecondGroupSwiper.value = new Swiper(".second-group-list", swiperOptions);
+    SecondGroupSwiper.value.slideTo(secondTabIndex.value);
   });
 };
 
-const scenesSwiperFocus = () => {
-  const sceneIndex = Array.from(currentScenesList.value).findIndex(
-    (item) => item.id === currentScene.value.id
-  );
-  if (window.scenesNatSwiper && window.scenesNatSwiper.slides.length > 0) {
-    const index = sceneIndex < 0 ? 0 : sceneIndex;
-    const fIndex = index < 5 ? 0 : index;
-    console.warn("scenesSwiperFocus", fIndex);
-    window.scenesNatSwiper.slideTo(fIndex);
+const tabCurrentSecondGroup = (data, index) => {
+  // store.commit("scene/setCurrentScene", data);
+
+  SecondGroupSwiper.value.slideTo(index);
+};
+
+const initRootGroupSwiper = () => {
+  // if (rootGroupSwiper.value) {
+  //   rootGroupSwiper.value.destroy();
+  //   rootGroupSwiper.value = null;
+  // }
+  // nextTick(() => {
+  //   rootGroupSwiper.value = new Swiper(".root-group-list", swiperOptions);
+  // });
+
+  if (!rootGroupSwiper.value) {
+    rootGroupSwiper.value = new Swiper(".root-group-list", swiperOptions);
+    rootGroupSwiper.value.slideTo(rootTabIndex.value);
+    initSecondGroupSwiper();
   }
 };
 
-const sencordNatSwiperFocus = () => {
-  nextTick(() => {
-    const current = Array.from(secondaryList.value).findIndex(
-      (item) => item.id === currentSecondary.value.id
-    );
-    if (window.sencordNatSwiper && window.sencordNatSwiper.slides.length > 0) {
-      console.warn("current-sencordNatSwiper-index", current);
-      window.sencordNatSwiper.slideTo(current);
-    }
-  });
+const tabCurrentRootGroup = (data, index) => {
+  // store.commit("scene/setCurrentScene", data);
+
+  SecondGroupSwiper.value.slideTo(index);
 };
 
 onMounted(() => {
   useApp().then(async (app) => {
     show.value = true;
-  });
-  watchEffect(() => {
-    if (
-      metadata.value.catalogRoot &&
-      unref(metadata.value.catalogRoot).length > 0
-    ) {
-      initMainSwiper();
-    }
-  });
-
-  watch(currentSecondary, () => {
-    if (unref(secondaryList).length > 1) {
-      initsencordNatSwiper();
-      sencordNatSwiperFocus();
-    } else {
-      if (window.sencordNatSwiper) {
-        console.warn("destroy-sencordNatSwiper");
-        window.sencordNatSwiper.update();
-        window.sencordNatSwiper.slideReset();
-      }
-    }
-  });
-
-  watch(currentScenesList, () => {
-    initScenesSwiper();
+    console.error("app", show.value);
   });
 });
 </script>

packages/qjkankan-view/src/pages/show.vue

@@ -136,6 +136,7 @@ onMounted(async () => {
 
     store.dispatch("audio/initNormalBGM", data.workBackgroundMusic ? data.workBackgroundMusic.ossPath : "");
     store.commit("scene/setCurrentScene", currentSceneData);
+    console.error(currentSceneData)
     let activeScene = null;
     navigationTrees.forEach((item, index) => {
       activeScene = item.children.find((pano) => pano.id == currentSceneData.id);
@@ -198,7 +199,6 @@ onMounted(async () => {
     // store.commit("scene/setCurrentSecondary", catalog);
 
     store.commit("functions/setAutoRotate", !!work.isAuto);
-    console.error("  show.value ", show.value);
 
     show.value = true;
 

packages/qjkankan-view/src/pages/showMobile.vue

@@ -1,10 +1,7 @@
 <template>
   <LoadingLogo v-if="workEnable" />
   <template v-if="workEnable">
-    <Opening
-      :coverData="coverInfo"
-      v-if="coverInfo.isShowCover && !hasPasswordLock"
-    />
+    <Opening :coverData="coverInfo" v-if="coverInfo.isShowCover && !hasPasswordLock" />
     <Password @pass="handlePass" />
     <Share />
     <div class="ui-view-layout" :class="{ show: show }">
@@ -30,16 +27,8 @@ import Opening from "@/components/assembly/OpeningMobile";
 import LoadingLogo from "@/components/assembly/Loading";
 import { createApp } from "@/app";
 
-import {
-  ref,
-  onMounted,
-  computed,
-  unref,
-  onBeforeMount,
-  watch,
-  nextTick,
-} from "vue";
-import { getPanoInfo, checkWork, exchangeId } from "@/apis";
+import { ref, onMounted, computed, unref, onBeforeMount, watch, nextTick } from "vue";
+import { getPanoInfo, checkWork, exchangeId, getWorkInfo } from "@/apis";
 import { useStore } from "vuex";
 import config from "@/utils/config";
 import browser from "@/utils/browser";
@@ -61,9 +50,7 @@ const lang = getLocale();
 const hasPasswordLock = ref(false);
 
 const currentScene = computed(() => store.getters["scene/currentScene"]);
-const currentCatalogRoot = computed(
-  () => store.getters["scene/currentCatalogRoot"]
-);
+const currentCatalogRoot = computed(() => store.getters["scene/currentCatalogRoot"]);
 
 const isAutoRotate = computed(() => store.getters["functions/isAutoRotate"]);
 
@@ -80,25 +67,22 @@ onBeforeMount(() => {
 
 onMounted(async () => {
   if (!browser.isMobile()) {
-    window.location.href = window.location.href.replace(
-      "showMobile.html",
-      "show.html"
-    );
+    window.location.href = window.location.href.replace("showMobile.html", "show.html");
     return;
   }
   const idRes = await exchangeId({
-    id: config.projectNum
-  })
-  const { id, num, calcStatus } = idRes.data
-  config.projectNum = id
+    id: config.projectNum,
+  });
+  const { id, num, calcStatus } = idRes.data;
+  config.projectNum = id;
 
   if (calcStatus === 0) {
     Dialog.alert({
       title: t("common.tips"),
-      content: t('common.calcing'),
+      content: t("common.calcing"),
       okText: t("common.confirm"),
     });
-    return
+    return;
   }
 
   let res = await checkWork();
@@ -106,25 +90,36 @@ onMounted(async () => {
     workEnable.value = res.data;
     return;
   }
-  getPanoInfo().then(async (data) => {
-    isShowOpeningAnimation.value = data.isShowOpeningAnimation
-      ? Number(data.isShowOpeningAnimation)
-      : 0;
+  // getPanoInfo().then(async (data) => {
+  getWorkInfo().then(async (res) => {
+    let data = res.data;
+
+    let { workOpeningAnimation, work, navigationTrees, workVisualAngleList, workCustomMaskList, workHotList } = data;
+    store.commit("tags/setData", { hotspots: workHotList });
+    isShowOpeningAnimation.value = workOpeningAnimation.isShowOpeningAnimation ? Number(workOpeningAnimation.isShowOpeningAnimation) : 0;
     //TODO 兼容1.2.0或以下数据
-    if (
-      !("isShowOpeningAnimation" in data) &&
-      "openingAnimationType" in data &&
-      data.openingAnimationType.length > 0
-    ) {
+    if (!("isShowOpeningAnimation" in workOpeningAnimation) && "openingAnimationType" in workOpeningAnimation && workOpeningAnimation.openingAnimationType.length > 0) {
       console.log("小行星没有开关,但有openingAnimationType强制开启");
       isShowOpeningAnimation.value = 1;
     }
-    store.commit("scene/setScenes", data.scenes);
-    store.commit(
-      "scene/setPassword",
-      data.password === "" ? false : data.password
-    );
-    if (data.password.length > 0) {
+
+    let scenes = [];
+    navigationTrees.forEach((item) => {
+      item.children.forEach((s_item) => {
+        if (s_item.type != "group") {
+          scenes.push(s_item);
+        }
+        s_item.children.forEach((t_item) => {
+          if (t_item.type != "group") {
+            scenes.push(t_item);
+          }
+        });
+      });
+    });
+
+    store.commit("scene/setScenes", scenes);
+    store.commit("scene/setPassword", work.password === "" ? false : work.password);
+    if (work.password.length > 0) {
       hasPasswordLock.value = true;
     }
     store.commit("scene/setMetaData", data);
@@ -132,77 +127,90 @@ onMounted(async () => {
     // document.title = data.name || t("common.no_title");
 
     let firstScene = "";
-
     if (config.sceneNum) {
-      console.log(config.sceneNum);
-      firstScene = data.scenes.find(
-        (item) => item.sceneCode == config.sceneNum
-      );
+      firstScene = scenes.find((item) => item.sceneCode == config.sceneNum);
     } else if (data.firstScene) {
-      firstScene = data.scenes.find(
-        (item) => item.sceneCode == data.firstScene.sceneCode
-      );
+      firstScene = scenes.find((item) => item.sceneCode == data.firstScene.sceneCode);
     }
 
     // 所有audio入口
 
-    const currentSceneData = firstScene || data.scenes[0];
+    const currentSceneData = firstScene || scenes[0];
     // debugger;
-    store.dispatch(
-      "audio/initNormalBGM",
-      data.backgroundMusic ? data.backgroundMusic.ossPath : ""
-    );
+    store.dispatch("audio/initNormalBGM", data.workBackgroundMusic ? data.workBackgroundMusic.ossPath : "");
     store.commit("scene/setCurrentScene", currentSceneData);
-
-    // 过滤空分组
-    let ttt = data.catalogRoot.filter((item) => {
-      let flag = "";
-
-      if (item.children) {
-        item.children.some((sub) => {
-          flag = data.scenes.some((son) => {
-            // console.log(String(son.category).toLowerCase(), String(sub).toLowerCase());
-            return (
-              String(son.category).toLowerCase() == String(sub).toLowerCase()
-            );
-          });
-          return flag;
-        });
-      }
-      return flag;
-    });
-
-    data.catalogRoot = ttt;
-
-    let catalog = data.catalogs.find(
-      (item) => item.id == currentScene.value.category
-    );
-
-    // 查询初始场景的所在1级分组
-    data.catalogRoot.forEach((item) => {
-      let temp =
-        item.children && item.children.find((sub) => sub == catalog.id);
-      if (temp) {
-        store.commit("scene/setCurrentCatalogRoot", item);
-        return;
+    let activeScene = null;
+    navigationTrees.forEach((item, index) => {
+      activeScene = item.children.find((pano) => pano.id == currentSceneData.id);
+
+      if (activeScene) {
+        store.commit("scene/setCurrentScenesList", item.children);
+        store.commit("scene/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 == currentSceneData.id);
+
+        if (activeScene) {
+          store.commit("scene/setCurrentScenesList", s_item.children);
+          store.commit("scene/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 == currentSceneData.id);
+
+          if (activeScene) {
+            store.commit("scene/setCurrentScenesList", s_item.children);
+            store.commit("scene/setData", { currentSecondId: s_item.id, currentRootId: item.id });
+            // throw new Error("LoopTerminated");
+          }
+        });
+      });
     });
-
-    // 查询初始场景的所在2级分组
-    store.commit("scene/setCurrentSecondary", catalog);
-
-    store.commit("functions/setAutoRotate", !!data.isAuto);
+    // // 过滤空分组
+    // let ttt = data.catalogRoot.filter((item) => {
+    //   let flag = "";
+
+    //   if (item.children) {
+    //     item.children.some((sub) => {
+    //       flag = data.scenes.some((son) => {
+    //         // console.log(String(son.category).toLowerCase(), String(sub).toLowerCase());
+    //         return String(son.category).toLowerCase() == String(sub).toLowerCase();
+    //       });
+    //       return flag;
+    //     });
+    //   }
+    //   return flag;
+    // });
+
+    // data.catalogRoot = ttt;
+
+    // let catalog = data.catalogs.find((item) => item.id == currentScene.value.category);
+
+    // // 查询初始场景的所在1级分组
+    // data.catalogRoot.forEach((item) => {
+    //   let temp = item.children && item.children.find((sub) => sub == catalog.id);
+    //   if (temp) {
+    //     store.commit("scene/setCurrentCatalogRoot", item);
+    //     return;
+    //   }
+    // });
+
+    // // 查询初始场景的所在2级分组
+    // store.commit("scene/setCurrentSecondary", catalog);
+
+    store.commit("functions/setAutoRotate", !!work.isAuto);
 
     show.value = true;
 
-    let isHavePano = data.scenes.some((item) => item.type == "pano");
+    let isHavePano = scenes.some((item) => item.type == "pano");
+    let currnetVisual = workVisualAngleList.forEach((item) => item.navigationId == currentScene.value.id);
+
     document.body.setAttribute("is-mobile", true);
 
     const app = createApp({
       // xml: "%HTMLPATH%/static/template/tour.xml",
-      xml: `${process.env.VUE_APP_CDN}/720yun_fd_manage/${
-        config.projectNum
-      }/tour.xml?rnd=${Math.random()}`,
+      xml: `${process.env.VUE_APP_CDN}/720yun_fd_manage/${config.projectNum}/tour.xml?rnd=${Math.random()}`,
       swf: "%HTMLPATH%/showviewer/lib/krpano/tour.swf",
       target: "pano",
       html5: "auto",
@@ -210,23 +218,16 @@ onMounted(async () => {
       isHavePano,
       vars: {
         startscene: "scene_" + currentScene.value.sceneCode,
-        "view.org_vlookat": currentScene.value.initVisual
-          ? currentScene.value.initVisual.vlookat
-          : 0,
-        "view.org_hlookat": currentScene.value.initVisual
-          ? currentScene.value.initVisual.hlookat
-          : 0,
-        "autorotate.enabled": !!data.isAuto,
-        "skin_settings.littleplanetintro":
-          typeof data.openingAnimationType === "number"
-            ? data.openingAnimationType
-            : 1,
+        "view.org_vlookat": currnetVisual ? currnetVisual.vlookat : 0,
+        "view.org_hlookat": currnetVisual ? currnetVisual.hlookat : 0,
+        "autorotate.enabled": !!work.isAuto,
+        "skin_settings.littleplanetintro": typeof workOpeningAnimation.openingAnimationType === "number" ? workOpeningAnimation.openingAnimationType : 1,
         "skin_settings.lptswitch": unref(isShowOpeningAnimation),
       },
       passQueryParameters: true,
     });
     if (app) {
-      coverInfo.value = data.coverInfo || {};
+      coverInfo.value = data.workCoverType || {};
       app.Scene.lock();
       //如果不需要开场封面就直接渲染
       if (!coverInfo.value?.isShowCover) {
@@ -236,22 +237,23 @@ onMounted(async () => {
       if (isHavePano) {
         app.Scene.on("sceneReady", () => {
           if (app.krpanoDom) {
-            const { sky, earth } = currentScene.value.customMask;
+            // const { sky, earth } = currentScene.value.customMask;
+            let customMask = workCustomMaskList.find((item) => item.navigationId == currentScene.value.id);
+            const { sky, earth } = customMask.data;
             handleMasksUpdate(sky, earth, app);
-            app.krpanoDom.set(
-              `layer[webvr_exitbutton].html`,
-              t("common.exit_vr")
-            );
+            app.krpanoDom.set(`layer[webvr_exitbutton].html`, t("common.exit_vr"));
           }
 
-          let hotspots = [];
-          if (currentScene.value.someData) {
-            hotspots =
-              typeof currentScene.value.someData == "string"
-                ? JSON.parse(currentScene.value.someData).hotspots
-                : currentScene.value.someData.hotspots;
+          // let hotspots = [];
+          // if (currentScene.value.someData) {
+          //   hotspots = typeof currentScene.value.someData == "string" ? JSON.parse(currentScene.value.someData).hotspots : currentScene.value.someData.hotspots;
+          // }
+
+          let currentHotspots = hotspots.value.filter((item) => item.navigationId == currentScene.value.id);
+          if (currentHotspots.length) {
+            app.Tags.initHotspot(currentHotspots, false);
           }
-          app.Tags.initHotspot(hotspots, false);
+
           handleVisualLimit(app, currentScene.value);
         });
       }
@@ -267,11 +269,12 @@ const handlePass = () => {
   hasPasswordLock.value = false;
 };
 const handleVisualLimit = (app, currentScene) => {
-  const { vlookatmax, vlookatmin } = currentScene.initVisual;
+  // const { vlookatmax, vlookatmin } = currentScene.initVisual;
   // console.log('initVisual',currentScene.initVisual)
+  let currnetVisual = workVisualAngleList.forEach((item) => item.navigationId == currentScene.value.id);
   app.krpanoDom.set(`view.limitview`, "lookat");
-  app.krpanoDom.set(`view.vlookatmin`, vlookatmin);
-  app.krpanoDom.set(`view.vlookatmax`, vlookatmax);
+  app.krpanoDom.set(`view.vlookatmin`, currnetVisual.vlookatmin || -90);
+  app.krpanoDom.set(`view.vlookatmax`, currnetVisual.vlookatmax || 90);
 };
 const handleMasksUpdate = (skyMask, earthMask, app) => {
   const lang = getLocale();
@@ -282,10 +285,7 @@ const handleMasksUpdate = (skyMask, earthMask, app) => {
     }
 
     if (skyMask.icon) {
-      app.krpanoDom.set(
-        `hotspot[peaklogo].url`,
-        skyMask.icon + "?x-oss-process=image/resize,w_1000"
-      );
+      app.krpanoDom.set(`hotspot[peaklogo].url`, skyMask.icon + "?x-oss-process=image/resize,w_1000");
     } else {
       app.krpanoDom.set(`hotspot[peaklogo].url`, defaultMask);
     }
@@ -301,25 +301,16 @@ const handleMasksUpdate = (skyMask, earthMask, app) => {
   }
   if (earthMask) {
     if ("isShow" in earthMask) {
-      app.krpanoDom.set(
-        `hotspot[nadirlogo].visible`,
-        Boolean(earthMask.isShow)
-      );
+      app.krpanoDom.set(`hotspot[nadirlogo].visible`, Boolean(earthMask.isShow));
     }
     if (earthMask.icon) {
-      app.krpanoDom.set(
-        `hotspot[nadirlogo].url`,
-        earthMask.icon + "?x-oss-process=image/resize,w_1000"
-      );
+      app.krpanoDom.set(`hotspot[nadirlogo].url`, earthMask.icon + "?x-oss-process=image/resize,w_1000");
     }
     if ("scale" in earthMask) {
       app.krpanoDom.set(`hotspot[nadirlogo].scale`, earthMask.scale);
     }
     if ("antidistorted" in earthMask) {
-      app.krpanoDom.set(
-        `hotspot[nadirlogo].distorted`,
-        earthMask.antidistorted
-      );
+      app.krpanoDom.set(`hotspot[nadirlogo].distorted`, earthMask.antidistorted);
       if (!earthMask.antidistorted) {
         app.krpanoDom.set(`hotspot[nadirlogo].scale`, earthMask.scale * 1.5);
       }