更新系統樣式 ｜使用local modal

src/components/forge/ForgeForSystem.vue

@@ -39,78 +39,118 @@ const forgeDom = ref(null);
 
 const initViewer = (container) => {
   return new Promise(function (resolve, reject) {
-    Autodesk.Viewing.Initializer({ getAccessToken }, function () {
+    // Autodesk.Viewing.Initializer({ getAccessToken }, function () {
+    //   const config = {
+    //     extensions: ["Autodesk.DataVisualization", "Autodesk.DocumentBrowser"],
+    //   };
+    //   let viewer = new Autodesk.Viewing.GuiViewer3D(container, config);
+    //   Autodesk.Viewing.Private.InitParametersSetting.alpha = true;
+    //   viewer.start();
+    //   resolve(viewer);
+    // });
+
+    Autodesk.Viewing.Initializer(
+      {
+        env: "Local",
+        language: "en",
+      },
+      function () {
         const config = {
-        extensions: ["Autodesk.DataVisualization", "Autodesk.DocumentBrowser"],
+          extensions: [
+            "Autodesk.DataVisualization",
+            "Autodesk.DocumentBrowser",
+          ],
         };
         let viewer = new Autodesk.Viewing.GuiViewer3D(container, config);
         Autodesk.Viewing.Private.InitParametersSetting.alpha = true;
         viewer.start();
         resolve(viewer);
-    });
-  });
-};
-
-const loadModel = (viewer, urn) => {
-  return new Promise(function (resolve, reject) {
-    async function onDocumentLoadSuccess(doc) {
-      viewer.setGroundShadow(false);
-      viewer.impl.renderer().setClearAlpha(0); //clear alpha channel
-      viewer.impl.glrenderer().setClearColor(0xffffff, 0); //set transparent background, color code does not matter
-      viewer.impl.invalidate(true); //trigger rendering
-
-      const documentNode = await viewer.loadDocumentNode(
-        doc,
-        doc.getRoot().getDefaultGeometry()
-      );
-      updateDataVisualization(viewer)
-      resolve(documentNode);
       }
-    function onDocumentLoadFailure(code, message, errors) {
-      reject({ code, message, errors });
-    }
-    Autodesk.Viewing.Document.load(
-      "urn:" + urn,
-      onDocumentLoadSuccess,
-      onDocumentLoadFailure
     );
   });
 };
 
-const initForge = () => {
+// 使用本地 .svf 文件加載模型
-  getUrn().then((res) => {
+const loadModel = (viewer, filePath) => {
-    if (!res.isSuccess) return;
+  return new Promise((resolve, reject) => {
+    viewer.loadModel(
+      filePath,
+      {},
+      (model) => {
+        viewer.impl.invalidate(true);
+        viewer.fitToView();
+        resolve(model);
+        console.log("模型加載完成");
+      },
+      reject
+    );
+  });
+};
 
-    initViewer(forgeDom.value).then((viewer) => {
+// const loadModel = (viewer, urn) => {
-      loadModel(viewer, res.data[0].urn_3D).then(() => {
+//   return new Promise(function (resolve, reject) {
-        viewer.addEventListener(
+//     async function onDocumentLoadSuccess(doc) {
-          Autodesk.Viewing.GEOMETRY_LOADED_EVENT,
+//       viewer.setGroundShadow(false);
-          async function () {
+//       viewer.impl.renderer().setClearAlpha(0); //clear alpha channel
-            console.log(
+//       viewer.impl.glrenderer().setClearColor(0xffffff, 0); //set transparent background, color code does not matter
-              "Autodesk.Viewing.GEOMETRY_LOADED_EVENT",
+//       viewer.impl.invalidate(true); //trigger rendering
-              viewer.isLoadDone()
-            );
-            // updateForgeViewer(viewer);
-            createSprites()
-            hideAllObjects();
-          }
-        );
-        viewer.addEventListener(
-          Autodesk.Viewing.CAMERA_CHANGE_EVENT,
-          function (e) {
-            // viewer.isLoadDone() &&
-            //   updateDbidPosition(this, subscribeData.value);
-            console.log(
-              "camera position changed: ",
-              NOP_VIEWER.navigation.getTarget(),
-              e.camera.position
-            );
-          }
-        );
 
-      });
+//       const documentNode = await viewer.loadDocumentNode(
-    });
+//         doc,
-  });
+//         doc.getRoot().getDefaultGeometry()
+//       );
+//       updateDataVisualization(viewer)
+//       resolve(documentNode);
+//     }
+//     function onDocumentLoadFailure(code, message, errors) {
+//       reject({ code, message, errors });
+//     }
+//     Autodesk.Viewing.Document.load(
+//       "urn:" + urn,
+//       onDocumentLoadSuccess,
+//       onDocumentLoadFailure
+//     );
+//   });
+// };
+
+const initForge = async () => {
+  // getUrn().then((res) => {
+  //   if (!res.isSuccess) return;
+
+  //   initViewer(forgeDom.value).then((viewer) => {
+  //     loadModel(viewer, res.data[0].urn_3D).then(() => {
+  //       viewer.addEventListener(
+  //         Autodesk.Viewing.GEOMETRY_LOADED_EVENT,
+  //         async function () {
+  //           console.log(
+  //             "Autodesk.Viewing.GEOMETRY_LOADED_EVENT",
+  //             viewer.isLoadDone()
+  //           );
+  //           // updateForgeViewer(viewer);
+  //           createSprites()
+  //           hideAllObjects();
+  //         }
+  //       );
+  //       viewer.addEventListener(
+  //         Autodesk.Viewing.CAMERA_CHANGE_EVENT,
+  //         function (e) {
+  //           // viewer.isLoadDone() &&
+  //           //   updateDbidPosition(this, subscribeData.value);
+  //           console.log(
+  //             "camera position changed: ",
+  //             NOP_VIEWER.navigation.getTarget(),
+  //             e.camera.position
+  //           );
+  //         }
+  //       );
+
+  //     });
+  //   });
+  // });
+  const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL; 
+  const viewer = await initViewer(forgeDom.value)
+  const filePath = `${FILE_BASEURL}/upload/forge/0.svf`;
+  await loadModel(viewer, filePath)
 };
 
 onMounted(() => {

src/views/system/System.vue

@@ -116,8 +116,9 @@ provide("system_deviceList", { data, subscribeData, currentFloor, updateCurrentF
 
 <template>
   <SystemFloorBar />
-  <div class="grid grid-cols-2 gap-5 mb-5">
+  <div class="grid grid-cols-2 gap-5 mt-8 mb-4">
-    <div class="col-span-1 my-5 h-[80vh]">
+    <div class="col-span-1 h-[80vh] flex flex-col justify-between">
+      <div>
         <div class="flex mb-4 items-center">
           <span class="flex items-center mr-3" v-if="statusList?.device_normal_text">
             <span class="w-7 h-7 rounded-full inline-block mr-1"
@@ -136,7 +137,8 @@ provide("system_deviceList", { data, subscribeData, currentFloor, updateCurrentF
           </span>
         </div>
         <SystemSubBar class="mt-2 mb-4" />
-      <div class="max-h-[75vh] pr-2 my-2 overflow-y-auto">
+      </div>
+      <div class="max-h-[75vh] pr-2 overflow-y-auto">
         <RouterView />
       </div>
     </div>