微功能服务页面开发，以及DMS数据获取（DMS的栏目模型和数据待完善和补充）

public/static/css/reset.css

@@ -1,25 +1,150 @@
 /* reset */
-html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
-header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
-html,body{overflow: hidden;}
-table{border-collapse:collapse;border-spacing:0;}
-caption,th{text-align:left;font-weight:normal;}
-html,body,fieldset,img,iframe,abbr{border:0;}
-i,cite,em,var,address,dfn{font-style:normal;}
-[hidefocus],summary{outline:0;}
-li{list-style:none;}
-h1,h2,h3,h4,h5,h6,small{font-size:100%;}
-sup,sub{font-size:83%;}
-pre,code,kbd,samp{font-family:inherit;}
-q:before,q:after{content:none;}
-textarea{overflow:auto;resize:none;}
-label,summary{cursor:default;}
-a,button{cursor:pointer;}
-h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
-del,ins,u,s,a,a:hover{text-decoration:none;}
+html,
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+p,
+blockquote,
+pre,
+hr,
+figure,
+table,
+caption,
+th,
+td,
+form,
+fieldset,
+legend,
+input,
+button,
+textarea,
+menu {
+  margin: 0;
+  padding: 0;
+}
+header,
+footer,
+section,
+article,
+aside,
+nav,
+hgroup,
+address,
+figure,
+figcaption,
+menu,
+details {
+  display: block;
+}
+html,
+body {
+  overflow: hidden;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+caption,
+th {
+  text-align: left;
+  font-weight: normal;
+}
+html,
+body,
+fieldset,
+img,
+iframe,
+abbr {
+  border: 0;
+}
+i,
+cite,
+em,
+var,
+address,
+dfn {
+  font-style: normal;
+}
+[hidefocus],
+summary {
+  outline: 0;
+}
+li {
+  list-style: none;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+small {
+  font-size: 100%;
+}
+sup,
+sub {
+  font-size: 83%;
+}
+pre,
+code,
+kbd,
+samp {
+  font-family: inherit;
+}
+q:before,
+q:after {
+  content: none;
+}
+textarea {
+  overflow: auto;
+  resize: none;
+}
+label,
+summary {
+  cursor: default;
+}
+a,
+button {
+  cursor: pointer;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+em,
+strong,
+b {
+  font-weight: bold;
+}
+del,
+ins,
+u,
+s,
+a,
+a:hover {
+  text-decoration: none;
+}
 /* body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#000000;outline:0;} */
-body{background:#fff;}
-a,a:hover{color:#333;}
+body {
+  background: #fff;
+}
+a,
+a:hover {
+  color: #333;
+}
 
 /* 滚动条样式 */
 /* ::-webkit-scrollbar {
@@ -35,4 +160,4 @@ a,a:hover{color:#333;}
 ::-webkit-scrollbar-track {
     border-radius: 10px;
     background: #eeeeee;
-} */
+} */

src/api/wgn.js

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

src/components/skszk/controlPanel.vue

@@ -5,6 +5,8 @@
         <div class="">
           场景名称：
           <el-cascader
+            :disabled="$route.query.sceneId"
+            v-model="SceneValue"
             placeholder="试试搜索：距离"
             :options="SceneList"
             :props="{ expandTrigger: 'hover' }"
@@ -15,7 +17,7 @@
             v-if="SceneValue && SceneRule[SceneValue].functionalDefinition"
             :content="SceneRule[SceneValue].functionalDefinition"
             placement="bottom"
-            effect="light"
+            :popper-style="{ maxWidth: '300px' }"
           >
             <el-icon
               style="margin-left: 1rem; width: 1rem; height: 1rem"
@@ -175,20 +177,36 @@
         :class="{ active: currentTool === 'point' }"
       >
         绘制点
+        <el-tooltip
+          content="绘制开关，蓝色状态代表开启，再次点击结束绘制，地图左键点击选点，"
+          placement="right"
+        >
+          <el-icon style="width: 1rem; height: 1rem"><QuestionFilled /></el-icon>
+        </el-tooltip>
       </div>
       <div
         class="tool-item"
         @click="activateDraw('polyline')"
         :class="{ active: currentTool === 'polyline' }"
       >
-        绘制线
+        绘制线<el-tooltip
+          content="绘制线最少需要两个点，鼠标左键点击选点，点之间自动连线，鼠标右键结束绘制"
+          placement="right"
+        >
+          <el-icon style="width: 1rem; height: 1rem"><QuestionFilled /></el-icon>
+        </el-tooltip>
       </div>
       <div
         class="tool-item"
         @click="activateDraw('polygon')"
         :class="{ active: currentTool === 'polygon' }"
       >
-        绘制面
+        绘制面<el-tooltip
+          content="绘制面最少需要三个点，鼠标左键点击选点，面自动必合，鼠标右键结束绘制"
+          placement="right"
+        >
+          <el-icon style="width: 1rem; height: 1rem"><QuestionFilled /></el-icon>
+        </el-tooltip>
       </div>
       <!-- <div class="tool-item" @click="startHoleDrawing" :class="{ active: isDrawingHole }">
         绘制镂空
@@ -290,6 +308,10 @@ export default {
               value: "1.5.2.10",
               label: "区域高程统计",
             },
+            {
+              value: "1.5.4.5",
+              label: "缓冲区计算",
+            },
           ],
         },
         {
@@ -334,10 +356,6 @@ export default {
               value: "1.5.4.4",
               label: "相离关系分析",
             },
-            {
-              value: "1.5.4.5",
-              label: "近邻关系分析",
-            },
           ],
         },
         {
@@ -670,7 +688,7 @@ export default {
         "1.5.4.5": {
           // 功能描述
           functionalDefinition:
-            "以一个核心要素（点、线、面）为中心，按自定义半径（如 500 米、1 千米）划定范围，查询范围内所有目标要素（如设施、地块、道路），核心用于 “资源覆盖范围” 场景。​",
+            "以一个核心要素（点、线、面）为中心，按自定义半径（如 500 米、1 千米）划定范围，查询范围内所有目标要素（如设施、地块、道路），核心用于 “资源覆盖范围” 场景。由于不是我负责，暂时为缓冲区计算功能。​",
           // 元素类型
           elementTypes: ["point", "polyline", "polygon", "EPSILON"],
           // 元素个数
@@ -782,7 +800,9 @@ export default {
       tempEntity: null, // 临时预览实体
     };
   },
-  mounted() {},
+  mounted() {
+    this.SceneValue = this.$route.query.sceneId ? this.$route.query.sceneId : "";
+  },
 
   beforeUnmount() {
     // 组件卸载前清理资源
@@ -1547,12 +1567,12 @@ export default {
 // 绘制按钮区域
 .toolbar {
   position: absolute;
-  top: 20px;
+  top: 10px;
   left: -120px;
   z-index: 1000;
   background: rgba(255, 255, 255, 0.9);
   border-radius: 8px;
-  padding: 10px;
+  padding: 3px 5px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
   display: flex;
   flex-direction: column;

src/router/index.js

@@ -30,7 +30,6 @@ const routes = [
       }
     ], // 子路由配置结束
   },
-
   // 时空算子库
   {
     path: '/skszk',
@@ -60,16 +59,16 @@ const routes = [
     path: '/wgn',
     name: 'wgn',
     component: function () {
-      return import('../views/Wgn.vue')
+      return import('../views/wgn/index.vue')
     },
-    children: [ // 子路由配置开始
-      {
-        path: 'example',
-        component: function () {
-          return import('../views/wgn/Example.vue')
-        },
-      }
-    ], // 子路由配置结束
+    // children: [ // 子路由配置开始
+    //   {
+    //     path: 'example',
+    //     component: function () {
+    //       return import('../views/wgn/Example.vue')
+    //     },
+    //   }
+    // ], // 子路由配置结束
   },
   // 应用管理
   {

src/views/HomePage.vue

@@ -5,8 +5,8 @@
         <div class="part1-1-1">
           <div class="number-container">
             <span class="text">调用总数</span>
-            <span v-for="(num,index) in totalCall" :key="index">
-              <span v-if="num.indexOf(',')>-1">
+            <span v-for="(num, index) in totalCall" :key="index">
+              <span v-if="num.indexOf(',') > -1">
                 <span class="separator">,</span>
               </span>
               <span v-else>
@@ -51,29 +51,47 @@
       <div class="row">
         <div class="service">
           <h2 class="title yellow">空间数据查询</h2>
-          <p>空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。</p>
+          <p>
+            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
+            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。
+          </p>
         </div>
         <div class="service">
           <h2 class="title gray">数据分析</h2>
-          <p>空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。</p>
+          <p>
+            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
+            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。
+          </p>
         </div>
         <div class="service">
           <h2 class="title blue">可视化服务</h2>
-          <p>空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。</p>
+          <p>
+            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
+            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。
+          </p>
         </div>
       </div>
       <div class="row">
         <div class="service">
           <h2 class="title orange">空间数据查询</h2>
-          <p>空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。</p>
+          <p>
+            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
+            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。
+          </p>
         </div>
         <div class="service">
           <h2 class="title green">数据分析</h2>
-          <p>空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。</p>
+          <p>
+            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
+            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。
+          </p>
         </div>
         <div class="service">
           <h2 class="title yellow-green">可视化服务</h2>
-          <p>空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。</p>
+          <p>
+            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
+            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。
+          </p>
         </div>
       </div>
     </div>
@@ -84,7 +102,7 @@
           GIS 通用计算功能，实用便捷超乎想象！
           <br />测距、剖面分析及点线面绘制轻松实现，坐标转换精准高效，路径规划快速准确，地名搜索智能推荐
         </p>
-        <el-button type="primary" size="large">了解更多</el-button>
+        <el-button type="primary" size="large" @click="gotoDetail">了解更多</el-button>
       </div>
     </div>
     <div class="part4">
@@ -92,34 +110,52 @@
       <div class="row">
         <div class="service">
           <h2 class="title yellow">空间数据查询</h2>
-          <p>空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。</p>
+          <p>
+            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
+            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。
+          </p>
           <el-button size="large" link>了解详情→</el-button>
         </div>
         <div class="service">
           <h2 class="title gray">数据分析</h2>
-          <p>空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。</p>
+          <p>
+            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
+            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。
+          </p>
           <el-button size="large" link>了解详情→</el-button>
         </div>
         <div class="service">
           <h2 class="title blue">可视化服务</h2>
-          <p>空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。</p>
+          <p>
+            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
+            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。
+          </p>
           <el-button size="large" link>了解详情→</el-button>
         </div>
       </div>
       <div class="row">
         <div class="service">
           <h2 class="title orange">空间数据查询</h2>
-          <p>空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。</p>
+          <p>
+            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
+            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。
+          </p>
           <el-button size="large" link>了解详情→</el-button>
         </div>
         <div class="service">
           <h2 class="title green">数据分析</h2>
-          <p>空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。</p>
+          <p>
+            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
+            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。
+          </p>
           <el-button size="large" link>了解详情→</el-button>
         </div>
         <div class="service">
           <h2 class="title yellow-green">可视化服务</h2>
-          <p>空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。</p>
+          <p>
+            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
+            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。
+          </p>
           <el-button size="large" link>了解详情→</el-button>
         </div>
       </div>
@@ -130,20 +166,23 @@
         <div class="part5-1-1">
           <div>
             约
-            <p>545</p>万次
+            <p>545</p>
+            万次
           </div>
           <div>地址</div>
         </div>
         <div class="part5-1-2">
           <div>
-            <p>319</p>个
+            <p>319</p>
+            个
           </div>
           <div>应用场景</div>
         </div>
         <div class="part5-1-3">
           <div>
             约
-            <p>230</p>万条
+            <p>230</p>
+            万条
           </div>
           <div>服务人数</div>
         </div>
@@ -151,10 +190,10 @@
       <div class="part5-2">
         <div class="tab-container">
           <div
-            v-for="(item) in tabs"
+            v-for="item in tabs"
             :key="item.key"
             @click="currentTab = item.key"
-            :class="{'tab-item':true, 'tab-item-active': currentTab === item.key }"
+            :class="{ 'tab-item': true, 'tab-item-active': currentTab === item.key }"
           >
             <!-- <span class="tab-icon">{{ item.icon }}</span> -->
             <span class="tab-title">{{ item.title }}</span>
@@ -165,30 +204,58 @@
             <div class="content">
               <div class="tag">盈港街道、夏阳街道</div>
               <h2 class="title">上海市青浦区教育局·学区查询</h2>
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod
+                bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra
+                justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus
+                et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum,
+                nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus
+                pronin sapien nunc accuan eget.
+              </p>
             </div>
           </div>
           <div class="service">
             <div class="content">
               <div class="tag">全区、快递实验室</div>
               <h2 class="title">上海市青浦区快递实验室</h2>
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod
+                bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra
+                justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus
+                et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum,
+                nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus
+                pronin sapien nunc accuan eget.
+              </p>
             </div>
           </div>
         </div>
         <div class="row">
-             <div class="service">
+          <div class="service">
             <div class="content">
               <div class="tag">盈港街道、夏阳街道</div>
               <h2 class="title">上海市青浦区教育局·学区查询</h2>
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod
+                bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra
+                justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus
+                et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum,
+                nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus
+                pronin sapien nunc accuan eget.
+              </p>
             </div>
           </div>
           <div class="service">
             <div class="content">
               <div class="tag">全区、快递实验室</div>
               <h2 class="title">上海市青浦区快递实验室</h2>
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod
+                bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra
+                justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus
+                et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum,
+                nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus
+                pronin sapien nunc accuan eget.
+              </p>
             </div>
           </div>
         </div>
@@ -214,8 +281,8 @@ export default {
       tabs: [
         { key: "data-governance", icon: "", title: "数据治理" },
         { key: "business-app", icon: "", title: "业务应用" },
-        { key: "comprehensive-decision", icon: "", title: "综合决策" }
-      ]
+        { key: "comprehensive-decision", icon: "", title: "综合决策" },
+      ],
     };
   },
   mounted() {
@@ -223,6 +290,11 @@ export default {
     this.setChart();
   },
   methods: {
+    gotoDetail() {
+      this.$router.push({
+        path: "/skszk",
+      });
+    },
     // 处理调用总数数字
     handleTotalCallNumber(num) {
       // 667507060
@@ -244,11 +316,11 @@ export default {
       let option = {
         tooltip: {
           trigger: "axis", // 坐标轴触发提示
-          axisPointer: { type: "shadow" }
+          axisPointer: { type: "shadow" },
         },
         legend: {
           data: ["tokyo", "london"],
-          textStyle: { color: "#fff" } // 图例文字颜色
+          textStyle: { color: "#fff" }, // 图例文字颜色
         },
         xAxis: {
           type: "category",
@@ -263,11 +335,11 @@ export default {
             "Aug",
             "Sep",
             "Oct",
-            "Nov"
+            "Nov",
           ],
           axisLine: { lineStyle: { color: "#fff" } }, // 坐标轴颜色
           axisTick: { show: false }, // 隐藏刻度
-          splitLine: { show: false } // 隐藏分割线
+          splitLine: { show: false }, // 隐藏分割线
         },
         yAxis: {
           type: "value",
@@ -276,9 +348,9 @@ export default {
           splitLine: {
             lineStyle: {
               type: "dashed", // 虚线网格
-              color: "#fff"
-            }
-          }
+              color: "#fff",
+            },
+          },
         },
         series: [
           {
@@ -288,7 +360,7 @@ export default {
             lineStyle: { color: "#42a5f5" }, // 蓝色线条
             itemStyle: { color: "#42a5f5" }, // 节点颜色
             symbol: "circle", // 节点形状
-            symbolSize: 6 // 节点大小
+            symbolSize: 6, // 节点大小
           },
           {
             name: "london",
@@ -297,14 +369,14 @@ export default {
             lineStyle: { color: "#4caf50" }, // 绿色线条
             itemStyle: { color: "#4caf50" },
             symbol: "circle",
-            symbolSize: 6
-          }
-        ]
+            symbolSize: 6,
+          },
+        ],
       };
       // 绘制图表
       myChart.setOption(option);
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -788,4 +860,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/views/wgn/Example.vue

@@ -1,27 +0,0 @@
-<template>
-    <div class="example">
-        wgn example
-    </div>
-</template>
-
-<script>
-export default {
-    name: "",
-    data() {
-        return {
-
-        };
-    },
-    mounted() {
-    },
-    methods: {
-    }
-};
-</script>
-
-<style lang="less" scoped>
-.container {
-    width: 1920px;
-    margin: 0 auto;
-}
-</style>

src/views/wgn/index.vue

@@ -0,0 +1,290 @@
+<template>
+  <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 { getDmsData } from "../../api/wgn";
+export default {
+  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 + "%" },
+          },
+        ]);
+      }
+      // 获取微功能服务列表
+      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",
+          });
+        });
+    },
+    // 申请使用微功能服务
+    handleApply(item) {
+      this.$confirm("确认申请使用" + item.title + "吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          // 确认申请使用
+          this.$message({
+            message: "申请使用" + item.title + "？等url吧！",
+            type: "success",
+          });
+        })
+        .catch(() => {
+          // 取消申请使用
+        });
+    },
+    // 在线演示微功能服务
+    handleOnlineDemo(item) {
+      // 1. 解析目标路由（支持传参、命名路由等）
+      const routeData = this.$router.resolve({
+        path: "/skszk", // 时空算子库
+        query: { sceneId: item.c_scene_name },
+      });
+      // 2. 打开新窗口（_blank 表示新窗口）
+      window.open(routeData.href, "_blank");
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.container {
+  width: 100vw;
+  margin: 0 auto;
+  background-color: #08224a;
+}
+.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>