Ver código fonte

新增离线包打包功能

wangfumin 3 meses atrás
pai
commit
ee4ada2200

+ 2 - 0
packages/qjkankan-view/.env.offline

@@ -0,0 +1,2 @@
+NODE_ENV=production
+VUE_APP_OFFLINE=true

+ 1 - 0
packages/qjkankan-view/.gitignore

@@ -21,3 +21,4 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+dist/

+ 3 - 0
packages/qjkankan-view/package.json

@@ -10,6 +10,9 @@
     "build-eurtestprod": "vue-cli-service build --mode eurtestprod",
     "build-eurprod": "vue-cli-service build --mode eurprod",
     "build-prod": "vue-cli-service build --mode prod",
+    "build:offline": "vue-cli-service build --mode offline",
+    "deploy:offline": "node scripts/deploy-offline.js",
+    "build-deploy:offline": "npm run build:offline && npm run deploy:offline",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {

+ 22 - 0
packages/qjkankan-view/scripts/deploy-offline.js

@@ -0,0 +1,22 @@
+const fs = require('fs-extra');
+const path = require('path');
+
+// 构建输出目录
+const sourceDir = path.resolve(__dirname, '../dist');
+// 目录
+// const targetDir = 'd:/A-project/WK1920049367641874432/WK1920049367641874432/wwwroot/panorama/qjkankan';
+const targetDir = path.resolve(__dirname, '../../../dist');
+
+async function deployOffline() {
+  try {
+    await fs.ensureDir(targetDir);
+    
+    await fs.copy(sourceDir, targetDir);
+    
+    console.log('离线版本已成功部署到:', targetDir);
+  } catch (err) {
+    console.error('部署过程中出错:', err);
+  }
+}
+
+deployOffline();

+ 58 - 0
packages/qjkankan-view/src/apis/index.js

@@ -34,6 +34,28 @@ export function getPanoInfo(ok, no) {
  * @param {*} no
  */
 export function getFdkkInfo(data, ok, no) {
+  // 使用环境变量判断是否为离线模式
+  if (config.isOfflineMode) {
+    // 离线包环境,读取本地JSON文件
+    return new Promise((resolve, reject) => {
+      const vrId = data.num || browser.getURLParam("vr");
+      // 构建scene.json文件的路径
+      const sceneJsonPath = `/scene_view_data/${vrId}/data/scene.json`;
+      
+      fetch(sceneJsonPath)
+        .then(response => response.json())
+        .then(data => {
+          console.log('读取本地scene.json成功:', data);
+          if (ok) ok(data);
+          resolve(data);
+        })
+        .catch(error => {
+          console.error('读取本地scene.json文件失败:', error);
+          if (no) no(error);
+          reject(error);
+        });
+    });
+  }
   return http.get(`${fdkkURL}api/scene/getInfo?num=${data.num}&_=${Math.random()}`, {}, ok, no);
 }
 
@@ -54,6 +76,24 @@ export function checkWork(ok, no) {
  * @param {*} no
  */
 export function exchangeId(data, ok, no) {
+  // 使用环境变量判断是否为离线模式
+  if (config.isOfflineMode) {
+    // 离线包环境,读取本地JSON文件
+    return new Promise((resolve, reject) => {
+      fetch(`${config.offlineBasePath}/web/common/getIdInfo`)
+        .then(response => response.json())
+        .then(data => {
+          console.log(data, 55555)
+          if (ok) ok(data);
+          resolve(data);
+        })
+        .catch(error => {
+          console.error('读取本地getIdInfo文件失败:', error);
+          if (no) no(error);
+          reject(error);
+        });
+    });
+  }
   return http.post(`${URL_FILL}/web/common/getIdInfo`, data, ok, no);
 }
 /**
@@ -63,5 +103,23 @@ export function exchangeId(data, ok, no) {
  * @param {*} no
  */
 export function getWorkInfo(ok, no) {
+  // 使用环境变量判断是否为离线模式
+  if (config.isOfflineMode) {
+    // 离线包环境,读取本地JSON文件
+    return new Promise((resolve, reject) => {
+      fetch(`${config.offlineBasePath}/work/view--workId=${number()}`)
+        .then(response => response.json())
+        .then(data => {
+          console.log(data, 55555)
+          if (ok) ok(data);
+          resolve(data);
+        })
+        .catch(error => {
+          console.error('读取本地getIdInfo文件失败:', error);
+          if (no) no(error);
+          reject(error);
+        });
+    });
+  }
   return http.get(`${URL_FILL}/work/view?workId=${number()}`, {}, ok, no);
 }

+ 11 - 6
packages/qjkankan-view/src/pages/show.vue

@@ -80,6 +80,7 @@ onMounted(async () => {
   const idRes = await exchangeId({
     id: config.projectNum,
   });
+  console.log("idRes", idRes);
   const { id, num, calcStatus } = idRes.data;
   config.projectNum = id;
 
@@ -91,12 +92,14 @@ onMounted(async () => {
     });
     return;
   }
+  // 使用环境变量判断是否为离线模式
+  if (!config.isOfflineMode) {
+    let res = await checkWork();
 
-  let res = await checkWork();
-
-  if (!res.data) {
-    workEnable.value = res.data;
-    return;
+    if (!res.data) {
+      workEnable.value = res.data;
+      return;
+    }
   }
   // getWorkInfo().then((res) => {
   //   console.error(res);
@@ -227,7 +230,9 @@ onMounted(async () => {
     // store.commit("scene/setCurrnetVisual", currnetVisual);
     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: config.isOfflineMode 
+      ? `${config.offlineResourePath}/${config.projectNum}/tour.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",

+ 10 - 5
packages/qjkankan-view/src/pages/showMobile.vue

@@ -96,10 +96,13 @@ onMounted(async () => {
     return;
   }
 
-  let res = await checkWork();
-  if (!res.data) {
-    workEnable.value = res.data;
-    return;
+  // 使用环境变量判断是否为离线模式
+  if (!config.isOfflineMode) {
+    let res = await checkWork();
+    if (!res.data) {
+      workEnable.value = res.data;
+      return;
+    }
   }
   // getPanoInfo().then(async (data) => {
   getWorkInfo().then(async (res) => {
@@ -221,7 +224,9 @@ onMounted(async () => {
 
     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: config.isOfflineMode 
+      ? `${config.offlineResourePath}/${config.projectNum}/tour.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",

+ 3 - 0
packages/qjkankan-view/src/utils/config.js

@@ -24,6 +24,9 @@ const config = {
 
     // 无限滚动列表的每页数据量
     PAGE_SIZE: 20,
+    isOfflineMode: process.env.VUE_APP_OFFLINE === 'true',
+    offlineBasePath: '/panorama/qjkankan',
+    offlineResourePath: '/720yun_fd_manage'
 };
 
 export default config

+ 36 - 0
packages/qjkankan-view/src/utils/urlHelper.js

@@ -0,0 +1,36 @@
+import config from './config';
+
+/**
+ * 处理资源URL,在离线模式下转换为本地路径
+ * @param {string} url - 原始URL
+ * @returns {string} - 处理后的URL
+ */
+export function getResourceUrl(url) {
+  if (!url) return url;
+  
+  // 如果是离线模式且URL是远程URL
+  if (config.isOfflineMode && (url.startsWith('http://') || url.startsWith('https://'))) {
+    // 提取URL路径部分
+    let path = '';
+    try {
+      const urlObj = new URL(url);
+      // 从路径中提取需要的部分,例如 /panorama/showviewer/lib/krpano/plugins/webvr.xml
+      if (urlObj.pathname.includes('/panorama/')) {
+        path = urlObj.pathname.substring(urlObj.pathname.indexOf('/panorama/'));
+      } else if (urlObj.pathname.includes('/showviewer/')) {
+        path = config.offlineBasePath + urlObj.pathname.substring(urlObj.pathname.indexOf('/showviewer/'));
+      } else {
+        // 其他情况,保留原始URL
+        return url;
+      }
+      
+      // 返回本地路径
+      return path;
+    } catch (e) {
+      console.error('URL解析错误:', e);
+      return url;
+    }
+  }
+  
+  return url;
+}

Diferenças do arquivo suprimidas por serem muito extensas
+ 13191 - 10784
pnpm-lock.yaml