Merge branch 'master' into onemap_zmg

README.md

@@ -77,4 +77,15 @@ loadScripts函数传入参数类型为Aarry，Aarry的值为需要当前地图
 
 config.js中更新各模块引入插件包的数据组织方式
 
-相应修改可见 src/views/example/Map.vue 示例
+相应修改可见 src/views/example/Map.vue 示例
+
+# 更新
+## 0.0.2
+移除 xxfk 文件夹
+
+### 业务模块对应关系
+sksjgl  时空数据管理
+skmh    时空门户
+wgn     微功能
+yygl    应用管理
+yxgl    运行管理

public/static/config/config.js

@@ -24,10 +24,9 @@ let systemConfig = {
             "/static/plugins/skyscenery/plugins/3DTiles/add3DTiles.js"
         ]
     },
-    skszk: {},
+    sksjgl: {},
     skmh: {},
     wgn: {},
     yygl: {},
-    xxfk: {},
     yxgl: {}
 }

src/App.vue

@@ -1,14 +1,7 @@
 <template>
-  <div class="main">
-    <Header></Header>
-    <el-scrollbar ref="pagescrollbar" view-style="height:100%">
-      <router-view />
-      <Footer></Footer>
-    </el-scrollbar>
-  </div>
+  <router-view />
 </template>
 <script>
-import { defineAsyncComponent } from "vue";
 import api from "@/api/common";
 export default {
   name: "App",
@@ -17,12 +10,6 @@ export default {
       loadedScripts: [],
     }
   },
-  components: {
-    Header: defineAsyncComponent(() =>
-      import("@/components/AppVue/Header.vue")
-    ),
-    Footer: defineAsyncComponent(() => import("@/components/AppVue/Footer.vue"))
-  },
   mounted() {
     let that = this;
     window.loadScripts = this.loadScripts
@@ -72,6 +59,7 @@ export default {
       // return ww < wh ? ww : wh;
       return ww
     },
+
     initScript() {
       let that = this;
       window.SkySceneryConfig = {
@@ -162,18 +150,4 @@ html {
   transform-origin: left top;
   transform: translate(-50%, 0%);
 }
-
-.main {
-  width: 100%;
-  height: 100%;
-  margin: 0 auto;
-  overflow: hidden;
-
-  .el-scrollbar {
-    width: 100%;
-    height: calc(100% - 70px);
-    box-sizing: border-box;
-    overflow: hidden;
-  }
-}
 </style>

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/AppVue/Header.vue

@@ -3,8 +3,14 @@
     <div class="logo">青浦一张图</div>
     <div class="menu">
       <ul class="menu_ul">
-        <li v-for="(item, index) in menuList" :key="index" :class="{ 'active': item.isActive }"
-          @click="menuClick(item.index, $event)">{{ item.label }}</li>
+        <li
+          v-for="(item, index) in menuList"
+          :key="index"
+          :class="{ active: item.isActive }"
+          @click="menuClick(item.index, $event)"
+        >
+          {{ item.label }}
+        </li>
       </ul>
     </div>
   </div>
@@ -22,8 +28,8 @@ export default {
         { index: 4, label: "时空门户", isActive: false },
         { index: 5, label: "微功能", isActive: false },
         { index: 6, label: "应用管理", isActive: false },
-        { index: 7, label: "运行管理", isActive: false }
-      ]
+        { index: 7, label: "运行管理", isActive: false },
+      ],
     };
   },
   methods: {
@@ -58,13 +64,13 @@ export default {
           this.$router.push("/oamc");
           break;
         case 7:
-          this.$router.push("/display");
+          this.$router.push("/yxgl");
           break;
       }
       this.$nextTick(() => {
         this.$emit("scroll-update");
       });
-    }
+    },
     // addClass(element, className) {
     //   if (
     //     !new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className)
@@ -77,7 +83,7 @@ export default {
     //     ""
     //   );
     // }
-  }
+  },
 };
 </script>
 
@@ -125,4 +131,4 @@ export default {
     }
   }
 }
-</style>
+</style>

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

@@ -60,7 +60,7 @@
     <el-divider></el-divider>
     <div>
       <!-- 元素文本渲染和操作区域 -->
-      <el-tabs tab-position="left" style="height: calc(100vh - 250px)" class="demo-tabs">
+      <el-tabs tab-position="left" style="height: calc(100vh - 370px)" class="demo-tabs">
         <el-tab-pane label="入参">
           <div
             v-if="
@@ -128,7 +128,7 @@
             :preview-mode="false"
             style="
               pointer-events: auto;
-              max-height: calc(100vh - 250px) !important;
+              max-height: calc(100vh - 370px) !important;
               overflow-y: scroll !important;
             "
             copyable
@@ -153,7 +153,7 @@
             :preview-mode="false"
             style="
               pointer-events: auto;
-              max-height: calc(100vh - 250px) !important;
+              max-height: calc(100vh - 370px) !important;
               overflow-y: scroll !important;
             "
             copyable
@@ -217,7 +217,7 @@
 </template>
 
 <script>
-import skszk from "../../api/skszk";
+import wgn from "../../api/wgn";
 // 控制面板
 export default {
   name: "ControlPanel",
@@ -1477,7 +1477,7 @@ export default {
       }
       let that = this;
       // 实际项目中使用以下代码发送请求
-      skszk
+      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: 100vh;
+  height: calc(100vh - 2rem);
   display: flex;
   flex-direction: column;
   padding: 1rem;
   position: fixed;
-  top: 0;
+  top: 0px;
   right: 0;
   background: #fff;
 }

src/components/yxgl/EchartsDome.vue

@@ -28,13 +28,28 @@ export default {
       this.chart = echarts.init(this.$refs.chartContainer);
 
       let option = {
+        legend: {
+          data: ["调用次数", "平均响应时间"],
+        },
         tooltip: {
-          trigger: "axis", // 坐标轴触发提示
+          show: true,
+          trigger: "axis",
           axisPointer: { type: "shadow" },
-        },
-        legend: {
-          data: ["tokyo", "london"],
-          textStyle: { color: "#fff" }, // 图例文字颜色
+          // 给不同Y轴的提示文字加对应颜色
+          // formatter: (params) => {
+          //   let html = `<div style="color:#333;z-index:100;">${params[0].axisValue}</div>`;
+          //   params.forEach((item) => {
+          //     // 调用次数
+          //     if (item.yAxisIndex === 0) {
+          //       html += `<div style="color:#42a5f5">${item.seriesName}：${item.value}</div>`;
+          //     }
+          //     // 平均响应时间
+          //     else if (item.yAxisIndex === 1) {
+          //       html += `<div style="color:#4caf50">${item.seriesName}：${item.value}</div>`;
+          //     }
+          //   });
+          //   return html;
+          // },
         },
         xAxis: {
           type: "category",
@@ -51,39 +66,49 @@ export default {
             "Oct",
             "Nov",
           ],
-          axisLine: { lineStyle: { color: "#fff" } }, // 坐标轴颜色
           axisTick: { show: false }, // 隐藏刻度
           splitLine: { show: false }, // 隐藏分割线
         },
-        yAxis: {
-          type: "value",
-          max: 30,
-          axisLine: { lineStyle: { color: "#fff" } },
-          splitLine: {
-            lineStyle: {
-              type: "dashed", // 虚线网格
-              color: "#fff",
-            },
+        yAxis: [
+          {
+            type: "value",
+            name: "调用次数", // 第一个Y轴（左侧）
+            axisLine: { lineStyle: { color: "#42a5f5" } }, // 区分样式
           },
-        },
+          {
+            type: "value",
+            name: "响应时间（ms）", // 第二个Y轴（右侧）
+            position: "right", // 显示在右侧（关键）
+            axisLine: { lineStyle: { color: "#4caf50" } }, // 区分样式
+          },
+        ],
         series: [
           {
             name: "调用次数",
             type: "line",
+            smooth: true,
             data: [7, 7, 15, 19, 21, 22, 25, 26, 23, 19, 12], // 模拟数据
             lineStyle: { color: "#42a5f5" }, // 蓝色线条
             itemStyle: { color: "#42a5f5" }, // 节点颜色
             symbol: "circle", // 节点形状
             symbolSize: 6, // 节点大小
+            yAxisIndex: 0, // 绑定第一个Y轴（调用次数）
           },
           {
             name: "平均响应时间",
             type: "line",
+            smooth: true,
             data: [3, 3, 6, 12, 15, 17, 18, 17, 14, 10, 6], // 模拟数据
-            lineStyle: { color: "#4caf50" }, // 绿色线条
-            itemStyle: { color: "#4caf50" },
+            lineStyle: { color: "#4caf50", type: "dashed" }, // 绿色线条
+            itemStyle: {
+              color: "#4caf50",
+              color: "#FFF",
+              borderWidth: 2,
+              borderColor: "#4caf50",
+            },
             symbol: "circle",
             symbolSize: 6,
+            yAxisIndex: 1, // 绑定第二个Y轴（响应时间）
           },
         ],
       };
@@ -98,14 +123,14 @@ export default {
 .echartsDome {
   width: 100%;
   height: 400px;
-  background-color: #222;
-  /* color: #fff; */
+  /* background-color: #222;
+  color: #fff; */
   padding: 20px;
   box-sizing: border-box;
 }
 .echartsDome_title {
-  font-size: 20px;
-  font-weight: bold;
+  font-size: 16px;
+  /* font-weight: bold; */
 }
 .echartsDome_chart {
   width: 100%;

src/router/index.js

@@ -3,12 +3,40 @@ import { createRouter, createWebHistory } from 'vue-router'
 const routes = [
   {
     path: '/',
-    name: 'home',
+    name: 'root',
     component: function () {
-      return import('../views/HomePage.vue')
-    }
+      return import('../views/Root.vue')
+    },
+    children: [
+      {
+        path: '/',
+        component: function () {
+          return import('../views/HomePage.vue')
+        },
+      },
+      {
+        path: 'wgn',
+        component: function () {
+          return import('../views/Wgn.vue')
+        },
+      },
+      {
+        path: '/yxgl',
+        name: 'yxgl',
+        component: function () {
+          return import('../views/Yxgl.vue')
+        },
+        children: [ // 子路由配置开始
+          {
+            path: 'StatisticalAnalysis',
+            component: function () {
+              return import('../views/yxgl/StatisticalAnalysis.vue')
+            },
+          }
+        ], // 子路由配置结束
+      },
+    ],
   },
-  // 例子（开发时参考，生产环境中相关文件无意义）
   {
     path: '/example',
     name: 'example',
@@ -30,12 +58,14 @@ const routes = [
       }
     ], // 子路由配置结束
   },
-  // 时空算子库
+
+  /***************** 跳转单页面 ******************/
+  // 时空数据管理
   {
-    path: '/skszk',
-    name: 'skszk',
+    path: '/sksjgl',
+    name: 'sksjgl',
     component: function () {
-      return import('../views/skszk/Example.vue')
+      return import('../views/sksjgl/Example.vue')
     }
   },
   // 时空门户
@@ -68,25 +98,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')
-      //   }
-      // },
-      {
-        path: 'sksj',
-        component: function () {
-          return import('../views/wgn/sksj/index.vue')
-        }
-      }
-    ], // 子路由配置结束
   },
   // 应用管理
   {
@@ -104,38 +120,22 @@ const routes = [
       }
     ], // 子路由配置结束
   },
-  // 信息反馈
-  {
-    path: '/xxfk',
-    name: 'xxfk',
-    component: function () {
-      return import('../views/Xxfk.vue')
-    },
-    children: [ // 子路由配置开始
-      {
-        path: 'example',
-        component: function () {
-          return import('../views/xxfk/Example.vue')
-        },
-      }
-    ], // 子路由配置结束
-  },
   // 运行管理
-  {
-    path: '/yxgl',
-    name: 'yxgl',
-    component: function () {
-      return import('../views/Yxgl.vue')
-    },
-    children: [ // 子路由配置开始
-      {
-        path: 'StatisticalAnalysis',
-        component: function () {
-          return import('../views/yxgl/StatisticalAnalysis.vue')
-        },
-      }
-    ], // 子路由配置结束
-  },
+  // {
+  //   path: '/yxgl',
+  //   name: 'yxgl',
+  //   component: function () {
+  //     return import('../views/Yxgl.vue')
+  //   },
+  //   children: [ // 子路由配置开始
+  //     {
+  //       path: 'StatisticalAnalysis',
+  //       component: function () {
+  //         return import('../views/yxgl/StatisticalAnalysis.vue')
+  //       },
+  //     }
+  //   ], // 子路由配置结束
+  // },
 ]
 
 const router = createRouter({

src/store/index.js

@@ -8,11 +8,10 @@ export default createStore({
     userState: false,
     userInfo: null,
 
-    skszk: {},
+    sksjgl: {},
     skmh: {},
     wgn: {},
     yygl: {},
-    xxfk: {},
     yxgl: {}
   },
   getters: {

src/views/HomePage.vue

@@ -292,7 +292,7 @@ export default {
   methods: {
     gotoDetail() {
       this.$router.push({
-        path: "/skszk",
+        path: "/sksjgl",
       });
     },
     // 处理调用总数数字

src/views/Root.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="main">
+    <Header></Header>
+    <el-scrollbar ref="pagescrollbar" view-style="height:100%">
+      <router-view />
+      <Footer></Footer>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script>
+import { defineAsyncComponent } from "vue";
+export default {
+  name: "Home",
+  data() {
+    return {
+      todayCall: "857,605",
+      totalCall: [],
+
+      serveNum: 456,
+      userNum: 17,
+      appNum: 43,
+
+      currentTab: "data-governance", // 初始选中项
+      tabs: [
+        { key: "data-governance", icon: "", title: "数据治理" },
+        { key: "business-app", icon: "", title: "业务应用" },
+        { key: "comprehensive-decision", icon: "", title: "综合决策" },
+      ],
+    };
+  },
+  components: {
+    Header: defineAsyncComponent(() =>
+      import("@/components/AppVue/Header.vue")
+    ),
+    Footer: defineAsyncComponent(() => import("@/components/AppVue/Footer.vue"))
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  overflow: hidden;
+
+  .el-scrollbar {
+    width: 100%;
+    height: calc(100% - 70px);
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+}
+</style>

src/views/Skszk.vue

@@ -1,12 +1,12 @@
 <template>
-    <div class="skszk container">
+    <div class="sksjgl container">
         <router-view />
     </div>
 </template>
 
 <script>
 export default {
-    name: "skszk",
+    name: "sksjgl",
     data() {
         return {
 
@@ -25,7 +25,7 @@ export default {
     margin: 0 auto;
 }
 
-.skszk {
+.sksjgl {
     position: relative;
 }
 </style>

src/views/Wgn.vue

@@ -1,31 +1,290 @@
 <template>
-    <div class="wgn container">
-        <router-view />
+  <div class="container">
+    <div class="server_title">
+      <el-image
+        style="width: 824px; height: 786px"
+        src="static/images/wgn_title.png"
+        fit="cover"
+      />
+      <div class="server_title_text">
+        <div class="server_title_text_title">微功能服务</div>
+        <div class="server_title_text_content">
+          微功能子系统专注于提供强大的空间计算与数据处理能力，是支撑青浦区三维数字底板空间分析与数据流转的核心模块，聚焦
+          “精准计算 + 灵活处理”
+          两大核心能力，所有功能均以标准化服务接口形式对外提供（支持第三方委办、上层应用系统调用），同时在系统内部集成可视化操作界面，实现
+          “计算 - 分析 - 展示” 闭环。
+        </div>
+      </div>
     </div>
+    <div class="server_list_box">
+      <div class="server_list_box_title">微功能列表</div>
+      <div class="server_list_box_search">
+        功能搜索
+        <el-input
+          v-model="searchStr"
+          style="width: 525px; margin-left: 37px"
+          placeholder="输入搜索关键词"
+          class="input-with-select"
+          clearable
+          size="large"
+          @change="searchServerList()"
+        >
+          <template #append>
+            <el-button icon="Search" @click="searchServerList()" />
+          </template>
+        </el-input>
+      </div>
+      <div class="server_list_box_table" v-if="dmsServerList">
+        <div
+          v-for="item in dmsServerList"
+          :key="item.c_scene_name"
+          class="server_list_box_table_item"
+        >
+          <div class="server_list_box_table_item_content">
+            <div class="server_list_box_table_item_content_title">{{ item.title }}</div>
+            <div class="server_list_box_table_item_content_text">{{ item.content }}</div>
+            <div class="server_list_box_table_item_content_button_box">
+              <div
+                class="server_list_box_table_item_content_button_box_item"
+                @click.stop="handleOnlineDemo(item)"
+              >
+                在线演示
+              </div>
+              <div
+                class="server_list_box_table_item_content_button_box_item"
+                @click.stop="handleApply(item)"
+              >
+                申请使用
+              </div>
+            </div>
+          </div>
+          <div class="server_list_box_table_item_image">
+            <el-image
+              style="width: 690px; height: 410px"
+              :src="dmsDataProxy + item.c_picture"
+              fit="cover"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import wgn from "@/api/wgn";
 export default {
-    name: "wgn",
-    data() {
-        return {
-
-        };
+  name: "微功能服务",
+  data() {
+    return {
+      // 搜索关键词
+      searchStr: "",
+      // 微功能服务列表
+      dmsServerList: [],
+      // DMS数据代理地址
+      dmsDataProxy: "",
+    };
+  },
+  mounted() {
+    this.dmsDataProxy = systemConfig.dmsDataProxy;
+    this.searchServerList();
+  },
+  methods: {
+    // 搜索微功能服务
+    searchServerList() {
+      let requestParams = {
+        columnId: 1651,
+        states: 0,
+        pageSize: 999,
+        page: 0,
+      };
+      if (this.searchStr) {
+        requestParams.search = JSON.stringify([
+          {
+            field: "title",
+            searchType: 2,
+            content: { value: "%" + this.searchStr + "%" },
+          },
+        ]);
+      }
+      // 获取微功能服务列表
+      wgn.getDmsData(requestParams)
+        .then((res) => {
+          if (res.code === 200) {
+            this.dmsServerList = res.content.data;
+            this.$message({
+              message: "搜索到" + this.dmsServerList.length + "条微功能服务",
+              type: "success",
+            });
+          } else {
+            this.$message({
+              message: "搜索到0条微功能服务",
+              type: "warning",
+            });
+          }
+        })
+        .catch((e) => {
+          this.$message({
+            message: "搜索微功能服务失败" + e,
+            type: "error",
+          });
+        });
     },
-    mounted() {
+    // 申请使用微功能服务
+    handleApply(item) {
+      this.$confirm("确认申请使用" + item.title + "吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          // 确认申请使用
+          this.$message({
+            message: "申请使用" + item.title + "？等url吧！",
+            type: "success",
+          });
+        })
+        .catch(() => {
+          // 取消申请使用
+        });
     },
-    methods: {
-    }
+    // 在线演示微功能服务
+    handleOnlineDemo(item) {
+      // 1. 解析目标路由（支持传参、命名路由等）
+      const routeData = this.$router.resolve({
+        path: "/wgnSingle", // 微功能
+        query: { sceneId: item.c_scene_name },
+      });
+      // 2. 打开新窗口（_blank 表示新窗口）
+      window.open(routeData.href, "_blank");
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .container {
-    width: 1920px;
-    margin: 0 auto;
+  width: 100vw;
+  margin: 0 auto;
+  background-color: #08224a;
 }
-
-.wgn {
+.server_title {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.server_title_text {
+  width: calc(100vw - 824px);
+  height: 786px;
+  background-color: #1c2631;
+  color: #fff;
+  padding: 0 160px 0 60px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  &_title {
+    font-size: 64px;
+    font-weight: bold;
+    letter-spacing: 0.5rem;
+  }
+  &_content {
+    margin-top: 77px;
+    font-size: 22px;
+  }
+}
+.server_list_box {
+  width: 100vw;
+  background-color: rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #fff;
+  &_title {
+    margin-top: 100px;
+    font-size: 35px;
+    font-weight: bold;
     position: relative;
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: -12px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 100px;
+      height: 4px;
+      background-image: linear-gradient(to right, #1d88f0, #00bfff);
+    }
+  }
+  &_search {
+    margin-top: 100px;
+    font-size: 25px;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    width: -webkit-fill-available;
+    justify-content: center;
+  }
+  &_table {
+    margin-top: 50px;
+    width: 100vw;
+    &_item {
+      display: flex;
+      justify-content: space-evenly;
+      align-items: center;
+      padding: 100px 0;
+
+      &:nth-child(odd) {
+        flex-direction: row;
+      }
+      &:nth-child(even) {
+        flex-direction: row-reverse;
+      }
+      &_content {
+        width: 760px;
+        height: 100px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        &_title {
+          font-size: 35px;
+          font-weight: bold;
+          color: #4095e5;
+        }
+        &_text {
+          margin-top: 35px;
+          font-size: 18px;
+        }
+        &_button_box {
+          display: flex;
+          justify-content: space-evenly;
+          width: 100%;
+          &_item {
+            margin-top: 35px;
+            font-size: 20px;
+            letter-spacing: 0.2rem;
+            color: #4095e5;
+            border: 1px solid #4095e5;
+            border-radius: 10px;
+            padding: 10px 36px;
+            cursor: pointer;
+            &:hover {
+              background-color: #4095e5;
+              color: #fff;
+            }
+          }
+        }
+      }
+      &_image {
+        width: 690px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 30px;
+        overflow: hidden;
+      }
+    }
+  }
 }
-</style>
+</style>

src/views/Yxgl.vue

@@ -70,20 +70,22 @@ export default {
 <style lang="less" scoped>
 #yxgl_box {
   width: 100vw;
+  height: calc(100vh - 120px);
   margin: 0;
   display: flex;
+  overflow: hidden;
 }
 
 .el-menu-vertical-demo:not(.el-menu--collapse) {
   width: 200px;
-  height: 100vh;
+  height: calc(100vh - 120px);
   margin: 0;
   //   background: #08224a;
 }
 .viewBox {
   width: calc(100vw - 200px);
   margin: 0;
-  height: 100vh;
+  height: calc(100vh - 120px);
   position: relative;
   overflow: hidden;
   overflow-y: auto;

src/views/example/Example.vue

@@ -25,7 +25,7 @@ export default {
     margin: 0 auto;
 }
 
-.skszk {
+.sksjgl {
     position: relative;
 }
 </style>

src/views/xxfk/Example.vue → src/views/sksjgl/Example.vue

@@ -1,12 +1,12 @@
 <template>
     <div class="example">
-        xxfk example
+        示例
     </div>
 </template>
 
 <script>
 export default {
-    name: "",
+    name: "skmh",
     data() {
         return {
 
@@ -24,4 +24,8 @@ export default {
     width: 1920px;
     margin: 0 auto;
 }
+
+.sksjgl {
+    position: relative;
+}
 </style>

src/views/skszk/Example.vue → src/views/wgn/Example.vue

@@ -8,10 +8,10 @@
 </template>
 
 <script>
-import ControlPanel from "../../components/skszk/controlPanel.vue";
+import ControlPanel from "../../components/wgn/controlPanel.vue";
 // 需要开发出一个时空算子库的示例页面：需要能绘制点线面的工具，且能包装绘制的几何对象传入到后台接口中
 export default {
-  name: "SkszkExample",
+  name: "wgnExample",
   // 2. 局部注册组件（键值同名可简写）
   components: {
     ControlPanel, // 完整写法：MyButton: MyButton
@@ -89,6 +89,7 @@ export default {
 <style lang="less" scoped>
 .example {
   width: 100%;
+  // height: calc(100vh - 120px);
   height: 100vh;
   position: relative;
   overflow: hidden;