微功能更改项目目录中的位置

src/api/wgn.js

@@ -1,8 +1,16 @@
 import {
-    postform
+    postform,
+    postBody
 } from '../utils/request'
 
-// 拓扑计算
-export const getDmsData = (params) => {
+const getDmsData = (params) => {
     return postform(systemConfig.dmsDataProxy + "/content/selectContentList", params)
+}
+
+const topology = (url, params) => {
+    return postBody(systemConfig.baseServicerPath + url, params)
+}
+export default {
+    getDmsData,
+    topology,
 }

src/components/sksjgl/controlPanel.vue → src/components/wgn/controlPanel.vue

@@ -217,7 +217,7 @@
 </template>
 
 <script>
-import sksjgl from "../../api/sksjgl";
+import wgn from "../../api/wgn";
 // 控制面板
 export default {
   name: "ControlPanel",
@@ -1477,7 +1477,7 @@ export default {
       }
       let that = this;
       // 实际项目中使用以下代码发送请求
-      sksjgl
+      wgn
         .topology(requestUrl, requestData)
         .then((res) => {
           if (requestUrl.indexOf("downloadFile") == -1) {
@@ -1554,12 +1554,12 @@ export default {
 #controlPanelBox {
   width: calc(30vw - 2rem);
   min-width: 500px;
-  height: calc(100vh - 120px - 2rem);
+  height: calc(100vh - 2rem);
   display: flex;
   flex-direction: column;
   padding: 1rem;
   position: fixed;
-  top: 70px;
+  top: 0px;
   right: 0;
   background: #fff;
 }

src/router/index-old.js

@@ -1,60 +0,0 @@
-import { createRouter, createWebHistory } from 'vue-router'
-
-const routes = [
-  {
-    path: '/',
-    name: 'home',
-    component: function () {
-      return import(/* webpackChunkName: "homepage" */ '../views/HomePage.vue')
-    }
-  },
-  {
-    path: '/data',
-    name: 'data',
-    component: function () {
-      return import(/* webpackChunkName: "data" */ '../views/Data.vue')
-    }
-  },
-  {
-    path: '/application',
-    name: 'application',
-    component: function () {
-      return import(/* webpackChunkName: "application" */ '../views/Application.vue')
-    }
-  },
-  {
-    path: '/function',
-    name: 'function',
-    component: function () {
-      return import(/* webpackChunkName: "funtcion" */ '../views/Function.vue')
-    }
-  },
-  {
-    path: '/development',
-    name: 'development',
-    component: function () {
-      return import(/* webpackChunkName: "development" */ '../views/Development.vue')
-    }
-  },
-  {
-    path: '/oamc',
-    name: 'oamc',
-    component: function () {
-      return import(/* webpackChunkName: "oamc" */ '../views/OAMC.vue')
-    }
-  },
-  {
-    path: '/display',
-    name: 'display',
-    component: function () {
-      return import(/* webpackChunkName: "display" */ '../views/Display.vue')
-    }
-  }
-]
-
-const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
-  routes
-})
-
-export default router

src/router/index.js

@@ -71,19 +71,11 @@ const routes = [
   },
   // 微功能
   {
-    path: '/wgn',
-    name: 'wgn',
+    path: '/wgnSingle',
+    name: 'wgnSingle',
     component: function () {
-      return import('../views/wgn/index.vue')
+      return import('../views/wgn/Example.vue')
     },
-    // children: [ // 子路由配置开始
-    //   {
-    //     path: 'example',
-    //     component: function () {
-    //       return import('../views/wgn/Example.vue')
-    //     },
-    //   }
-    // ], // 子路由配置结束
   },
   // 应用管理
   {

src/views/sksjgl/Example.vue

@@ -1,102 +1,31 @@
 <template>
-  <!-- 时空算子库 -->
-  <div class="example">
-    <div id="skysceneryContainer"></div>
-    <!-- 操作栏 -->
-    <ControlPanel ref="controlPanel" />
-  </div>
+    <div class="example">
+        示例
+    </div>
 </template>
 
 <script>
-import ControlPanel from "../../components/sksjgl/controlPanel.vue";
-// 需要开发出一个时空算子库的示例页面：需要能绘制点线面的工具，且能包装绘制的几何对象传入到后台接口中
 export default {
-  name: "sksjglExample",
-  // 2. 局部注册组件（键值同名可简写）
-  components: {
-    ControlPanel, // 完整写法：MyButton: MyButton
-  },
-  data() {
-    return {};
-  },
-  mounted() {
-    window.SkySceneryConfig = {};
-    window.loadScripts([systemConfig.scriptMain]).then(() => {
-      this.creatMap();
-    });
-  },
-  methods: {
-    creatMap() {
-      window.viewer = new SkyScenery.Viewer("skysceneryContainer", {
-        animation: false, //是否创建动画小器件，左下角仪表
-        baseLayerPicker: false, //是否显示图层选择器
-        imageryProvider: new SkyScenery.SingleTileImageryProvider({
-          url: (function createColorCanvas(color) {
-            var width = 1,
-              height = 1;
-            var canvas = document.createElement("canvas");
-            canvas.width = width;
-            canvas.height = height;
-            var ctx = canvas.getContext("2d");
-            ctx.fillStyle = color;
-            ctx.fillRect(0, 0, width, height);
-            return canvas.toDataURL();
-          })("#ffffff00"),
-          rectangle: SkyScenery.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
-        }),
-        fullscreenButton: false, //是否显示全屏按钮
-        geocoder: false, //是否显示geocoder小器件，右上角查询按钮
-        homeButton: false, //是否显示Home按钮
-        infoBox: false, //是否显示信息框
-        sceneModePicker: false, //是否显示3D/2D选择器
-        selectionIndicator: false, //是否显示选取指示器组件
-        timeline: false, //是否显示时间轴
-        navigationHelpButton: false, //是否显示右上角的帮助按钮
-        scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
-        shouldAnimate: false, //是否自动播放
-        // 性能优化配置
-        requestRenderMode: true,
-        maximumRenderTimeChange: Infinity,
-        preserveDrawingBuffer: false,
-        useBrowserRecommendedResolution: true,
-      });
+    name: "skmh",
+    data() {
+        return {
 
-      // 添加地图服务
-      viewer.imageryLayers.addImageryProvider(
-        new SkyScenery.ArcGisMapServerImageryProvider({
-          url:
-            "https://szlszxdt.qpservice.org.cn/internal_map/?servertype=shmap_blue_web&proxyToken=" +
-            SkySceneryConfig.token,
-          enablePickFeatures: false, // 禁用要素拾取功能以提高性能
-        })
-      );
-
-      // 定位
-      viewer.camera.setView({
-        destination: SkyScenery.Cartesian3.fromDegrees(121.1, 31, 30000.0), // 设置位置
-        orientation: {
-          heading: SkyScenery.Math.toRadians(0.0), // 方向
-          pitch: SkyScenery.Math.toRadians(-90.0), // 倾斜角度
-          roll: 0,
-        },
-      });
-      this.$refs["controlPanel"].initDrawHandler();
+        };
+    },
+    mounted() {
     },
-  },
+    methods: {
+    }
 };
 </script>
 
 <style lang="less" scoped>
-.example {
-  width: 100%;
-  height: calc(100vh - 120px);
-  position: relative;
-  overflow: hidden;
+.container {
+    width: 1920px;
+    margin: 0 auto;
 }
 
-#skysceneryContainer {
-  width: 70vw;
-  max-width: calc(100vw - 500px);
-  height: 100%;
+.sksjgl {
+    position: relative;
 }
-</style>
+</style>

src/views/wgn/Example.vue

@@ -0,0 +1,103 @@
+<template>
+  <!-- 时空算子库 -->
+  <div class="example">
+    <div id="skysceneryContainer"></div>
+    <!-- 操作栏 -->
+    <ControlPanel ref="controlPanel" />
+  </div>
+</template>
+
+<script>
+import ControlPanel from "../../components/wgn/controlPanel.vue";
+// 需要开发出一个时空算子库的示例页面：需要能绘制点线面的工具，且能包装绘制的几何对象传入到后台接口中
+export default {
+  name: "wgnExample",
+  // 2. 局部注册组件（键值同名可简写）
+  components: {
+    ControlPanel, // 完整写法：MyButton: MyButton
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    window.SkySceneryConfig = {};
+    window.loadScripts([systemConfig.scriptMain]).then(() => {
+      this.creatMap();
+    });
+  },
+  methods: {
+    creatMap() {
+      window.viewer = new SkyScenery.Viewer("skysceneryContainer", {
+        animation: false, //是否创建动画小器件，左下角仪表
+        baseLayerPicker: false, //是否显示图层选择器
+        imageryProvider: new SkyScenery.SingleTileImageryProvider({
+          url: (function createColorCanvas(color) {
+            var width = 1,
+              height = 1;
+            var canvas = document.createElement("canvas");
+            canvas.width = width;
+            canvas.height = height;
+            var ctx = canvas.getContext("2d");
+            ctx.fillStyle = color;
+            ctx.fillRect(0, 0, width, height);
+            return canvas.toDataURL();
+          })("#ffffff00"),
+          rectangle: SkyScenery.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
+        }),
+        fullscreenButton: false, //是否显示全屏按钮
+        geocoder: false, //是否显示geocoder小器件，右上角查询按钮
+        homeButton: false, //是否显示Home按钮
+        infoBox: false, //是否显示信息框
+        sceneModePicker: false, //是否显示3D/2D选择器
+        selectionIndicator: false, //是否显示选取指示器组件
+        timeline: false, //是否显示时间轴
+        navigationHelpButton: false, //是否显示右上角的帮助按钮
+        scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
+        shouldAnimate: false, //是否自动播放
+        // 性能优化配置
+        requestRenderMode: true,
+        maximumRenderTimeChange: Infinity,
+        preserveDrawingBuffer: false,
+        useBrowserRecommendedResolution: true,
+      });
+
+      // 添加地图服务
+      viewer.imageryLayers.addImageryProvider(
+        new SkyScenery.ArcGisMapServerImageryProvider({
+          url:
+            "https://szlszxdt.qpservice.org.cn/internal_map/?servertype=shmap_blue_web&proxyToken=" +
+            SkySceneryConfig.token,
+          enablePickFeatures: false, // 禁用要素拾取功能以提高性能
+        })
+      );
+
+      // 定位
+      viewer.camera.setView({
+        destination: SkyScenery.Cartesian3.fromDegrees(121.1, 31, 30000.0), // 设置位置
+        orientation: {
+          heading: SkyScenery.Math.toRadians(0.0), // 方向
+          pitch: SkyScenery.Math.toRadians(-90.0), // 倾斜角度
+          roll: 0,
+        },
+      });
+      this.$refs["controlPanel"].initDrawHandler();
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.example {
+  width: 100%;
+  // height: calc(100vh - 120px);
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+}
+
+#skysceneryContainer {
+  width: 70vw;
+  max-width: calc(100vw - 500px);
+  height: 100%;
+}
+</style>

src/views/wgn/index.vue

@@ -72,7 +72,7 @@
 </template>
 
 <script>
-import { getDmsData } from "../../api/wgn";
+import wgn from "../../api/wgn";
 export default {
   name: "微功能服务",
   data() {
@@ -108,7 +108,7 @@ export default {
         ]);
       }
       // 获取微功能服务列表
-      getDmsData(requestParams)
+      wgn.getDmsData(requestParams)
         .then((res) => {
           if (res.code === 200) {
             this.dmsServerList = res.content.data;
@@ -152,7 +152,7 @@ export default {
     handleOnlineDemo(item) {
       // 1. 解析目标路由（支持传参、命名路由等）
       const routeData = this.$router.resolve({
-        path: "/sksjgl", // 时空算子库
+        path: "/wgnSingle", // 微功能
         query: { sceneId: item.c_scene_name },
       });
       // 2. 打开新窗口（_blank 表示新窗口）