пре 1 месец · 222d2f4278
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
 
				 <!DOCTYPE html>
			
 
				-<html lang="">
			
 
				+<html lang="" class="dark">
			
 
				 
			
 
				 <head>
			
 
				   <meta charset="utf-8">
			
@@ -26,4 +26,40 @@
 
				   <!-- built files will be auto injected -->
			
 
				 </body>
			
 
				 
			
 
				+<style>
			
 
				+    :root {
			
 
				+      /* 滚动条整体部分，必须要设置 */
			
 
				+      ::-webkit-scrollbar {
			
 
				+        width: 6px;
			
 
				+        height: 10px;
			
 
				+        overflow-y: overlay;
			
 
				+      }
			
 
				+
			
 
				+      /* 滚动条里面轨道，能向上向下移动 */
			
 
				+      ::-webkit-scrollbar-track {
			
 
				+        background-color: transparent;
			
 
				+      }
			
 
				+
			
 
				+      /* 滚动条里面轨道，能向上向下移动 */
			
 
				+      ::-webkit-scrollbar-track-piece {
			
 
				+        background-color: transparent;
			
 
				+      }
			
 
				+
			
 
				+      ::-webkit-scrollbar-thumb {
			
 
				+        display: none;
			
 
				+        border-radius: 6px;
			
 
				+      }
			
 
				+
			
 
				+      /* 滚动条里面的小方块，能向上向下移动 */
			
 
				+      *:hover::-webkit-scrollbar-thumb {
			
 
				+        display: flex;
			
 
				+        background-color: rgb(163, 166, 173, 0.5);
			
 
				+        border-radius: 6px;
			
 
				+      }
			
 
				+
			
 
				+      *:hover::-webkit-scrollbar-track-piece {
			
 
				+        background-color: rgb(209, 207, 207,0);
			
 
				+      }
			
 
				+    }
			
 
				+  </style>
			
 
				 </html>
			
--- a/public/static/config/config.js
+++ b/public/static/config/config.js
@@ -20,13 +20,138 @@ let systemConfig = {
 
				     // 引擎基础js
			
 
				     scriptMain: "/static/plugins/skyscenery/SkyScenery.js",
			
 
				 
			
 
				+    GEOSERVER_URL_WMS: "http://121.43.55.7:8889/geoserver/kdyjs/wms",
			
 
				+    GEOSERVER_URL_WFS: "http://121.43.55.7:8889/geoserver/kdyjs/wfs",
			
 
				+    TDT_URL: "https://{s}.tianditu.gov.cn/",
			
 
				     /* 以下为各模块定义各自全局变量的位置，包括 example 示例 */
			
 
				     example: {
			
 
				         scriptArr: [
			
 
				-            "/static/plugins/skyscenery/plugins/CGCS2000ArcGisMapServerImageryProvider.js"
			
 
				+            "/static/plugins/skyscenery/plugins/CGCS2000ArcGisMapServerImageryProvider.js",
			
 
				+            "/static/plugins/skyscenery/plugins/3DTiles/add3DTiles.js"
			
 
				         ]
			
 
				     },
			
 
				-    sksjgl: {},
			
 
				+    sksjgl: {
			
 
				+        funcList: {
			
 
				+            sjzljc: [
			
 
				+                {
			
 
				+                    label: "矢量数据重复项检查工具",
			
 
				+                    url: "http://47.103.92.60:1202/",
			
 
				+                    image: "./static/images/sksjgl/sjzljc/矢量数据重复项检查工具.png"
			
 
				+                },
			
 
				+                {
			
 
				+                    label: "矢量数据逻辑一致性检查工具",
			
 
				+                    url: "http://47.103.92.60:1202/",
			
 
				+                    image: "./static/images/sksjgl/sjzljc/矢量数据逻辑一致性检查工具.png"
			
 
				+                },
			
 
				+                {
			
 
				+                    label: "矢量数据语义一致性检查工具",
			
 
				+                    url: "http://47.103.92.60:1202/",
			
 
				+                    image: "./static/images/sksjgl/sjzljc/矢量数据语义一致性检查工具.png"
			
 
				+                },
			
 
				+                {
			
 
				+                    label: "影像数据一致性检查工具",
			
 
				+                    url: "http://47.103.92.60:1202/",
			
 
				+                    image: "./static/images/sksjgl/sjzljc/影像数据一致性检查工具.png"
			
 
				+                },
			
 
				+            ],
			
 
				+            sksjjg: [
			
 
				+                {
			
 
				+                    label: "矢量数据格式转换工具",
			
 
				+                    url: "http://47.103.92.60:1202/",
			
 
				+                    image: "./static/images/sksjgl/sksjjg/矢量数据格式转换工具.png"
			
 
				+                },
			
 
				+                {
			
 
				+                    label: "矢量数据投影转换工具",
			
 
				+                    url: "http://47.103.92.60:1202/",
			
 
				+                    image: "./static/images/sksjgl/sksjjg/矢量数据投影转换工具.png"
			
 
				+                },
			
 
				+                {
			
 
				+                    label: "矢量数据坐标系统转换工具",
			
 
				+                    url: "http://47.103.92.60:1202/",
			
 
				+                    image: "./static/images/sksjgl/sksjjg/矢量数据坐标系统转换工具.png"
			
 
				+                },
			
 
				+                {
			
 
				+                    label: "矢量瓦片定制",
			
 
				+                    url: "http://47.103.92.60:1203/#/sliceMana",
			
 
				+                    image: "./static/images/sksjgl/sksjjg/矢量瓦片定制.png"
			
 
				+                },
			
 
				+                {
			
 
				+                    label: "地图样式符号管理",
			
 
				+                    url: "http://47.103.92.60:1203/#/iconMana/icon",
			
 
				+                    image: "./static/images/sksjgl/sksjjg/地图样式符号管理.png"
			
 
				+                },
			
 
				+                {
			
 
				+                    label: "地图字体管理",
			
 
				+                    url: "http://47.103.92.60:1203/#/fontsets",
			
 
				+                    image: "./static/images/sksjgl/sksjjg/地图字体管理.png"
			
 
				+                },
			
 
				+                {
			
 
				+                    label: "栅格数据格式转换工具",
			
 
				+                    url: "http://47.103.92.60:1202/",
			
 
				+                    image: "./static/images/sksjgl/sksjjg/栅格数据格式转换工具.png"
			
 
				+                },
			
 
				+                {
			
 
				+                    label: "栅格数据坐标系统转换工具",
			
 
				+                    url: "http://47.103.92.60:1202/",
			
 
				+                    image: "./static/images/sksjgl/sksjjg/栅格数据坐标系统转换工具.png"
			
 
				+                },
			
 
				+                {
			
 
				+                    label: "栅格数据投影转换工具",
			
 
				+                    url: "http://47.103.92.60:1202/",
			
 
				+                    image: "./static/images/sksjgl/sksjjg/栅格数据投影转换工具.png"
			
 
				+                },
			
 
				+                {
			
 
				+                    label: "栅格数据裁切工具",
			
 
				+                    url: "http://47.103.92.60:1202/",
			
 
				+                    image: "./static/images/sksjgl/sksjjg/栅格数据裁切工具.png"
			
 
				+                },
			
 
				+                {
			
 
				+                    label: "正射影像数据瓦片定制",
			
 
				+                    url: "http://47.103.92.60:1204/",
			
 
				+                    image: "./static/images/sksjgl/sksjjg/正射影像数据瓦片定制.png"
			
 
				+                },
			
 
				+            ],
			
 
				+            sksjgl: [
			
 
				+                {
			
 
				+                    label: "矢量瓦片集管理",
			
 
				+                    url: "http://47.103.92.60:1203/#/tileMana",
			
 
				+                    image: "./static/images/sksjgl/sksjgl/矢量瓦片集管理.png"
			
 
				+                },
			
 
				+                {
			
 
				+                    label: "栅格定制任务管理",
			
 
				+                    url: "http://47.103.92.60:1204/",
			
 
				+                    image: "./static/images/sksjgl/sksjgl/栅格定制任务管理.png"
			
 
				+                },
			
 
				+                {
			
 
				+                    label: "栅格瓦片产品管理",
			
 
				+                    url: "http://47.103.92.60:1204/",
			
 
				+                    image: "./static/images/sksjgl/sksjgl/栅格瓦片产品管理.png"
			
 
				+                },
			
 
				+                {
			
 
				+                    label: "栅格瓦片服务管理",
			
 
				+                    url: "http://47.103.92.60:1204/",
			
 
				+                    image: "./static/images/sksjgl/sksjgl/栅格瓦片服务管理.png"
			
 
				+                }
			
 
				+            ],
			
 
				+            sksjfb: [
			
 
				+                {
			
 
				+                    label: "栅格服务发布",
			
 
				+                    url: "http://10.235.245.174:2024/?token=1",
			
 
				+                    image: "./static/images/sksjgl/sksjfb/栅格服务发布.png"
			
 
				+                },
			
 
				+                {
			
 
				+                    label: "矢量服务发布",
			
 
				+                    url: "http://10.235.245.174:2024/?token=1",
			
 
				+                    image: "./static/images/sksjgl/sksjfb/矢量服务发布.png"
			
 
				+                },
			
 
				+                {
			
 
				+                    label: "动态地图服务发布",
			
 
				+                    url: "http://10.235.245.174:2024/?token=1",
			
 
				+                    image: "./static/images/sksjgl/sksjfb/动态地图服务发布.png"
			
 
				+                },
			
 
				+            ],
			
 
				+        }
			
 
				+    },
			
 
				     skmh: {},
			
 
				     wgn: {},
			
 
				     yygl: {},
			
--- a/public/static/images/point.png
+++ b/public/static/images/point.png
--- a/public/static/images/skmh-1.png
+++ b/public/static/images/skmh-1.png
--- a/public/static/images/skmh-2.png
+++ b/public/static/images/skmh-2.png
--- a/public/static/images/skmh-3.png
+++ b/public/static/images/skmh-3.png
--- a/public/static/images/sksjgl/sjzljc/影像数据一致性检查工具.png
+++ b/public/static/images/sksjgl/sjzljc/影像数据一致性检查工具.png
--- a/public/static/images/sksjgl/sjzljc/矢量数据语义一致性检查工具.png
+++ b/public/static/images/sksjgl/sjzljc/矢量数据语义一致性检查工具.png
--- a/public/static/images/sksjgl/sjzljc/矢量数据逻辑一致性检查工具.png
+++ b/public/static/images/sksjgl/sjzljc/矢量数据逻辑一致性检查工具.png
--- a/public/static/images/sksjgl/sjzljc/矢量数据重复项检查工具.png
+++ b/public/static/images/sksjgl/sjzljc/矢量数据重复项检查工具.png
--- a/public/static/images/sksjgl/sksjfb/动态地图服务发布.png
+++ b/public/static/images/sksjgl/sksjfb/动态地图服务发布.png
--- a/public/static/images/sksjgl/sksjfb/栅格服务发布.png
+++ b/public/static/images/sksjgl/sksjfb/栅格服务发布.png
--- a/public/static/images/sksjgl/sksjfb/矢量服务发布.png
+++ b/public/static/images/sksjgl/sksjfb/矢量服务发布.png
--- a/public/static/images/sksjgl/sksjgl/栅格定制任务管理.png
+++ b/public/static/images/sksjgl/sksjgl/栅格定制任务管理.png
--- a/public/static/images/sksjgl/sksjgl/栅格瓦片产品管理.png
+++ b/public/static/images/sksjgl/sksjgl/栅格瓦片产品管理.png
--- a/public/static/images/sksjgl/sksjgl/栅格瓦片服务管理.png
+++ b/public/static/images/sksjgl/sksjgl/栅格瓦片服务管理.png
--- a/public/static/images/sksjgl/sksjgl/矢量瓦片集管理.png
+++ b/public/static/images/sksjgl/sksjgl/矢量瓦片集管理.png
--- a/public/static/images/sksjgl/sksjgl_title.png
+++ b/public/static/images/sksjgl/sksjgl_title.png
--- a/public/static/images/sksjgl/sksjjg/地图字体管理.png
+++ b/public/static/images/sksjgl/sksjjg/地图字体管理.png
--- a/public/static/images/sksjgl/sksjjg/地图样式符号管理.png
+++ b/public/static/images/sksjgl/sksjjg/地图样式符号管理.png
--- a/public/static/images/sksjgl/sksjjg/栅格数据坐标系统转换工具.png
+++ b/public/static/images/sksjgl/sksjjg/栅格数据坐标系统转换工具.png
--- a/public/static/images/sksjgl/sksjjg/栅格数据投影转换工具.png
+++ b/public/static/images/sksjgl/sksjjg/栅格数据投影转换工具.png
--- a/public/static/images/sksjgl/sksjjg/栅格数据格式转换工具.png
+++ b/public/static/images/sksjgl/sksjjg/栅格数据格式转换工具.png
--- a/public/static/images/sksjgl/sksjjg/栅格数据裁切工具.png
+++ b/public/static/images/sksjgl/sksjjg/栅格数据裁切工具.png
--- a/public/static/images/sksjgl/sksjjg/正射影像数据瓦片定制.png
+++ b/public/static/images/sksjgl/sksjjg/正射影像数据瓦片定制.png
--- a/public/static/images/sksjgl/sksjjg/矢量数据坐标系统转换工具.png
+++ b/public/static/images/sksjgl/sksjjg/矢量数据坐标系统转换工具.png
--- a/public/static/images/sksjgl/sksjjg/矢量数据投影转换工具.png
+++ b/public/static/images/sksjgl/sksjjg/矢量数据投影转换工具.png
--- a/public/static/images/sksjgl/sksjjg/矢量数据格式转换工具.png
+++ b/public/static/images/sksjgl/sksjjg/矢量数据格式转换工具.png
--- a/public/static/images/sksjgl/sksjjg/矢量瓦片定制.png
+++ b/public/static/images/sksjgl/sksjjg/矢量瓦片定制.png
--- a/public/static/images/u30.png
+++ b/public/static/images/u30.png
--- a/src/assets/images/sksjgl/jiantou.png
+++ b/src/assets/images/sksjgl/jiantou.png
--- a/src/assets/images/sksjgl/sjzljc.png
+++ b/src/assets/images/sksjgl/sjzljc.png
--- a/src/assets/images/sksjgl/sksjfb.png
+++ b/src/assets/images/sksjgl/sksjfb.png
--- a/src/assets/images/sksjgl/sksjgl.png
+++ b/src/assets/images/sksjgl/sksjgl.png
--- a/src/assets/images/sksjgl/sksjjg.png
+++ b/src/assets/images/sksjgl/sksjjg.png
--- a/src/components/AppVue/Footer.vue
+++ b/src/components/AppVue/Footer.vue
@@ -8,7 +8,7 @@ export default {};
 
				 
			
 
				 <style lang="less" scoped>
			
 
				 .footer {
			
 
				-  width: 1920px;
			
 
				+  width: 100%;
			
 
				   box-sizing: border-box;
			
 
				   text-align: center;
			
 
				   background: rgba(17, 16, 16, 1);
			
@@ -16,5 +16,7 @@ export default {};
 
				   height: 50px;
			
 
				   line-height: 50px;
			
 
				   margin: 0 auto;
			
 
				+  position: absolute;
			
 
				+  bottom: 0px;
			
 
				 }
			
 
				 </style>
			
--- a/src/components/AppVue/Header.vue
+++ b/src/components/AppVue/Header.vue
@@ -3,12 +3,8 @@
 
				     <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)"
			
 
				-        >
			
 
				+        <li v-for="(item, index) in menuList" :key="index" :class="{ active: item.isActive }"
			
 
				+          @click="menuClick(item.index, $event)">
			
 
				           {{ item.label }}
			
 
				         </li>
			
 
				       </ul>
			
@@ -17,7 +13,6 @@
 
				 </template>
			
 
				 
			
 
				 <script>
			
 
				-import { toRaw } from "vue";
			
 
				 export default {
			
 
				   data() {
			
 
				     return {
			
@@ -34,6 +29,7 @@ export default {
 
				   },
			
 
				   methods: {
			
 
				     menuClick(index) {
			
 
				+      let that = this
			
 
				       this.menuList.map(function (item) {
			
 
				         if (item.index == index) {
			
 
				           item.isActive = true;
			
@@ -47,26 +43,28 @@ export default {
 
				           this.$router.push("/");
			
 
				           break;
			
 
				         case 2:
			
 
				-          this.$router.push("/data");
			
 
				+          this.$router.push("/sksjgl");
			
 
				           break;
			
 
				         case 3:
			
 
				-          this.$router.push("/application");
			
 
				+          // this.$router.push("/application");
			
 
				+          this.$router.push("/skmh/scene");
			
 
				           break;
			
 
				         case 4:
			
 
				-          this.$router.push("/function");
			
 
				+          // this.$router.push("/function");
			
 
				+          this.$router.push("/skmh");
			
 
				           break;
			
 
				         case 5:
			
 
				           this.$router.push("/wgn");
			
 
				           break;
			
 
				         case 6:
			
 
				-          this.$router.push("/oamc");
			
 
				+          this.$router.push("/yygl");
			
 
				           break;
			
 
				         case 7:
			
 
				           this.$router.push("/yxgl");
			
 
				           break;
			
 
				       }
			
 
				       this.$nextTick(() => {
			
 
				-        this.$emit("scroll-update");
			
 
				+        this.$emit('updateScroll');
			
 
				       });
			
 
				     },
			
 
				     // addClass(element, className) {
			
--- a/src/main.js
+++ b/src/main.js
@@ -6,16 +6,13 @@ import router from './router'
 
				 initApp.use(router);
			
 
				 import store from './store'
			
 
				 initApp.use(store);
			
 
				-
			
 
				 import ElementPlus from 'element-plus'
			
 
				 import zhCn from 'element-plus/es/locale/lang/zh-cn'
			
 
				-
			
 
				+import 'element-plus/dist/index.css' // 引入默认主题样式
			
 
				+import 'element-plus/theme-chalk/dark/css-vars.css' // 引入暗色主题样式
			
 
				 initApp.use(ElementPlus, {
			
 
				     locale: zhCn,
			
 
				 })
			
 
				-import 'element-plus/dist/index.css'
			
 
				-initApp.use(ElementPlus)
			
 
				-
			
 
				 // 如果您正在使用CDN引入，请删除下面一行。
			
 
				 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
			
 
				 import JsonViewer from 'vue-json-viewer'
			
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -15,11 +15,24 @@ const routes = [
 
				         },
			
 
				       },
			
 
				       {
			
 
				-        path: 'wgn',
			
 
				+        path: '/sksjgl',
			
 
				+        component: function () {
			
 
				+          return import('../views/Sksjgl.vue')
			
 
				+        },
			
 
				+      },
			
 
				+      {
			
 
				+        path: '/wgn',
			
 
				+        name: 'wgn',
			
 
				         component: function () {
			
 
				           return import('../views/Wgn.vue')
			
 
				         },
			
 
				       },
			
 
				+      {
			
 
				+        path: 'skmh',
			
 
				+        component: function () {
			
 
				+          return import('../views/skmh/index.vue')
			
 
				+        },
			
 
				+      },
			
 
				       {
			
 
				         path: '/yxgl',
			
 
				         name: 'yxgl',
			
@@ -35,55 +48,78 @@ const routes = [
 
				           }
			
 
				         ], // 子路由配置结束
			
 
				       },
			
 
				-    ],
			
 
				-  },
			
 
				-  {
			
 
				-    path: '/example',
			
 
				-    name: 'example',
			
 
				-    component: function () {
			
 
				-      return import('../views/Example.vue')
			
 
				-    },
			
 
				-    children: [ // 子路由配置开始
			
 
				+      //应用管理
			
 
				       {
			
 
				-        path: 'example',
			
 
				+        path: '/yygl',
			
 
				+        path: 'yygl',
			
 
				         component: function () {
			
 
				-          return import('../views/example/Example.vue')
			
 
				-        },
			
 
				+          return import('../views/yygl/index.vue')
			
 
				+        }
			
 
				       },
			
 
				+      //应用中心
			
 
				       {
			
 
				-        path: 'map',
			
 
				+        path: 'appCenter',
			
 
				+        path: 'appCenter',
			
 
				         component: function () {
			
 
				-          return import('../views/example/Map.vue')
			
 
				-        },
			
 
				-      }
			
 
				-    ], // 子路由配置结束
			
 
				+          return import('../views/yygl/appCenter.vue')
			
 
				+        }
			
 
				+      },
			
 
				+    ],
			
 
				   },
			
 
				+  // {
			
 
				+  //   path: '/example',
			
 
				+  //   name: 'example',
			
 
				+  //   component: function () {
			
 
				+  //     return import('../views/Example.vue')
			
 
				+  //   },
			
 
				+  //   children: [ // 子路由配置开始
			
 
				+  //     {
			
 
				+  //       path: '/yygl',
			
 
				+  //       path: 'yygl',
			
 
				+  //       component: function () {
			
 
				+  //         return import('../views/yygl/index.vue')
			
 
				+  //       }
			
 
				+  //     },
			
 
				+  //     //应用中心
			
 
				+  //     {
			
 
				+  //       path: 'appCenter',
			
 
				+  //       path: 'appCenter',
			
 
				+  //       component: function () {
			
 
				+  //         return import('../views/yygl/appCenter.vue')
			
 
				+  //       }
			
 
				+  //     },
			
 
				+  //   ],
			
 
				+  // },
			
 
				 
			
 
				   /***************** 跳转单页面 ******************/
			
 
				-  // 时空数据管理
			
 
				-  {
			
 
				-    path: '/sksjgl',
			
 
				-    name: 'sksjgl',
			
 
				-    component: function () {
			
 
				-      return import('../views/sksjgl/Example.vue')
			
 
				-    }
			
 
				-  },
			
 
				   // 时空门户
			
 
				-  {
			
 
				-    path: '/skmh',
			
 
				-    name: 'skmh',
			
 
				-    component: function () {
			
 
				-      return import('../views/Skmh.vue')
			
 
				-    },
			
 
				-    children: [ // 子路由配置开始
			
 
				-      {
			
 
				-        path: 'example',
			
 
				-        component: function () {
			
 
				-          return import('../views/skmh/Example.vue')
			
 
				-        },
			
 
				-      }
			
 
				-    ], // 子路由配置结束
			
 
				-  },
			
 
				+  // {
			
 
				+  //   path: '/skmh',
			
 
				+  //   name: 'skmh',
			
 
				+  //   component: function () {
			
 
				+  //     return import('../views/skmh/index.vue')
			
 
				+  //   },
			
 
				+  //   children: [ // 子路由配置开始
			
 
				+  //     {
			
 
				+  //       path: 'example',
			
 
				+  //       component: function () {
			
 
				+  //         return import('../views/skmh/Example.vue')
			
 
				+  //       }
			
 
				+  //     },
			
 
				+  //     {
			
 
				+  //       path: 'index',
			
 
				+  //       component: function () {
			
 
				+  //         return import('../views/skmh/index.vue')
			
 
				+  //       }
			
 
				+  //     },
			
 
				+  //     {
			
 
				+  //       path: 'scene',
			
 
				+  //       component: function () {
			
 
				+  //         return import('../views/skmh/scene/index.vue')
			
 
				+  //       }
			
 
				+  //     }
			
 
				+  //   ], // 子路由配置结束
			
 
				+  // },
			
 
				   // 微功能
			
 
				   {
			
 
				     path: '/wgnSingle',
			
@@ -93,21 +129,21 @@ const routes = [
 
				     },
			
 
				   },
			
 
				   // 应用管理
			
 
				-  {
			
 
				-    path: '/yygl',
			
 
				-    name: 'yygl',
			
 
				-    component: function () {
			
 
				-      return import('../views/Yygl.vue')
			
 
				-    },
			
 
				-    children: [ // 子路由配置开始
			
 
				-      {
			
 
				-        path: 'example',
			
 
				-        component: function () {
			
 
				-          return import('../views/yygl/Example.vue')
			
 
				-        },
			
 
				-      }
			
 
				-    ], // 子路由配置结束
			
 
				-  },
			
 
				+  // {
			
 
				+  //   path: '/yygl',
			
 
				+  //   name: 'yygl',
			
 
				+  //   component: function () {
			
 
				+  //     return import('../views/Yygl.vue')
			
 
				+  //   },
			
 
				+  //   children: [ // 子路由配置开始
			
 
				+  //     {
			
 
				+  //       path: 'example',
			
 
				+  //       component: function () {
			
 
				+  //         return import('../views/yygl/Example.vue')
			
 
				+  //       },
			
 
				+  //     },
			
 
				+  //   ], // 子路由配置结束
			
 
				+  // },
			
 
				   // 运行管理
			
 
				   // {
			
 
				   //   path: '/yxgl',
			
--- a/src/views/Example.vue
+++ b/src/views/Example.vue
@@ -1,32 +0,0 @@
 
				-<template>
			
 
				-    <div class="example container">
			
 
				-        <router-view />
			
 
				-    </div>
			
 
				-</template>
			
 
				-
			
 
				-<script>
			
 
				-export default {
			
 
				-    name: "example",
			
 
				-    data() {
			
 
				-        return {
			
 
				-
			
 
				-        };
			
 
				-    },
			
 
				-    mounted() {
			
 
				-    },
			
 
				-    methods: {
			
 
				-    }
			
 
				-};
			
 
				-</script>
			
 
				-
			
 
				-<style lang="less" scoped>
			
 
				-.container {
			
 
				-    width: 1920px;
			
 
				-    min-height: 100%;
			
 
				-    margin: 0 auto;
			
 
				-}
			
 
				-
			
 
				-.example {
			
 
				-    position: relative;
			
 
				-}
			
 
				-</style>
			
--- a/src/views/Root.vue
+++ b/src/views/Root.vue
@@ -1,15 +1,15 @@
 
				 <template>
			
 
				   <div class="main">
			
 
				-    <Header></Header>
			
 
				-    <el-scrollbar ref="pagescrollbar" view-style="height:100%">
			
 
				+    <Header @updateScroll="updateScrollbar"></Header>
			
 
				+    <el-scrollbar ref="pagescrollbar">
			
 
				       <router-view />
			
 
				-      <Footer></Footer>
			
 
				     </el-scrollbar>
			
 
				+    <Footer></Footer>
			
 
				   </div>
			
 
				 </template>
			
 
				 
			
 
				 <script>
			
 
				-import { defineAsyncComponent } from "vue";
			
 
				+import { defineAsyncComponent, toRaw } from "vue";
			
 
				 export default {
			
 
				   name: "Home",
			
 
				   data() {
			
@@ -35,6 +35,11 @@ export default {
 
				     ),
			
 
				     Footer: defineAsyncComponent(() => import("@/components/AppVue/Footer.vue"))
			
 
				   },
			
 
				+  methods: {
			
 
				+    updateScrollbar() {
			
 
				+      this.$refs.pagescrollbar.setScrollTop(0)
			
 
				+    }
			
 
				+  },
			
 
				 };
			
 
				 </script>
			
 
				 
			
@@ -47,9 +52,9 @@ export default {
 
				 
			
 
				   .el-scrollbar {
			
 
				     width: 100%;
			
 
				-    height: calc(100% - 70px);
			
 
				+    height: calc(100% - 120px);
			
 
				     box-sizing: border-box;
			
 
				-    overflow: hidden;
			
 
				+    overflow: auto;
			
 
				   }
			
 
				 }
			
 
				 </style>
			
--- a/src/views/Sksjgl.vue
+++ b/src/views/Sksjgl.vue
@@ -0,0 +1,371 @@
 
				+<template>
			
 
				+    <div class="sksjgl container">
			
 
				+        <div class="server_title">
			
 
				+            <el-image style="width: 824px; height: 786px" src="static/images/sksjgl/sksjgl_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="checkModule">
			
 
				+            <!-- 流程步骤 -->
			
 
				+            <div class="process-bar">
			
 
				+                <div :class="{ 'process-item': true, 'active': activePanel == 'sjzljc' }"
			
 
				+                    @click="changePanel('sjzljc')">
			
 
				+                    <div class="icon-box"> </div>
			
 
				+                    <div class="label">数据质量检查</div>
			
 
				+                </div>
			
 
				+                <div class="divider"></div>
			
 
				+                <div :class="{ 'process-item': true, 'active': activePanel == 'sksjjg' }"
			
 
				+                    @click="changePanel('sksjjg')">
			
 
				+                    <div class="icon-box"></div>
			
 
				+                    <div class="label">时空数据加工</div>
			
 
				+                </div>
			
 
				+                <div class="divider"></div>
			
 
				+                <div :class="{ 'process-item': true, 'active': activePanel == 'sksjgl' }"
			
 
				+                    @click="changePanel('sksjgl')">
			
 
				+                    <div class="icon-box"></div>
			
 
				+                    <div class="label">时空数据管理</div>
			
 
				+                </div>
			
 
				+                <div class="divider"></div>
			
 
				+                <div :class="{ 'process-item': true, 'active': activePanel == 'sksjfb' }"
			
 
				+                    @click="changePanel('sksjfb')">
			
 
				+                    <div class="icon-box"></div>
			
 
				+                    <div class="label">时空数据发布</div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <!-- 流程内容 -->
			
 
				+            <div class="process-content">
			
 
				+                <div class="process-content-item" v-for="(item, index) in nowFuncContent" :key="index">
			
 
				+                    <a :href="item.url" target="_blank" rel="noopener noreferrer">
			
 
				+                        <div class="pictrue"
			
 
				+                            :style="{ background: 'url(' + item.image + ') no-repeat center center/100% 100%' }"></div>
			
 
				+                        <div class="label">{{ item.label }}</div>
			
 
				+                    </a>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        <div class="time-space-operator-lib">
			
 
				+            <!-- 标题区域 -->
			
 
				+            <div class="title-section">
			
 
				+                <h1>时空算子库</h1>
			
 
				+            </div>
			
 
				+            <!-- 描述区域 -->
			
 
				+            <div class="desc-section">
			
 
				+                <p>
			
 
				+                    时空算子库具备丰富且强大的功能能力，在空间计算方面，涵盖量托轮廓下的宽度和面积计算，可利用投影坐标系结合既定定理与比例尺换算公式计算宽度，将多边形分割成三角形计算面积；还能判断点线面体的相互状态，通过计算点到线距离、射线法等方式判断点与线、面关系，利用计算几何方法判断线与线、线与面、体与点线面的关系；可进行缓冲区计算，以点、线、面为基础按给定距离生成缓冲区，支持线面体分割，依据指定规则对其进行分割并重新构建边和拓扑关系。在时空分析方面，能够对个面进行时空差异分析，判断空间重叠部分并通过求差来得到不相交面，同时考虑时间因素分析不同时间点面的状态变化。
			
 
				+                </p>
			
 
				+            </div>
			
 
				+            <!-- 业务专区区域 -->
			
 
				+            <div class="business-section">
			
 
				+                <div class="business-header">
			
 
				+                    <span>业务专属时空数据</span>
			
 
				+                    <button class="more-btn">查看更多</button>
			
 
				+                </div>
			
 
				+                <!-- 功能卡片列表 -->
			
 
				+                <!-- 单个功能卡片 -->
			
 
				+                <div class="card-item" v-for="(item, index) in cardList" :key="index">
			
 
				+                    <div class="card-title">{{ item.title }}</div>
			
 
				+                    <div class="card-bg" :style="{ backgroundColor: item.bgColor }"></div>
			
 
				+                    <div class="card-desc">{{ item.desc }}</div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+
			
 
				+        </div>
			
 
				+
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+    data() {
			
 
				+        return {
			
 
				+            activePanel: 'sjzljc',
			
 
				+            funcList: systemConfig.sksjgl.funcList,
			
 
				+            nowFuncContent: [],
			
 
				+
			
 
				+            cardList: [
			
 
				+                {
			
 
				+                    title: "量托计算宽度面积",
			
 
				+                    bgColor: "#1a4b8e",
			
 
				+                    desc: "城市水系承载空间分析数据，包括主干道网和街道直径"
			
 
				+                },
			
 
				+                {
			
 
				+                    title: "设置障碍的路径计算",
			
 
				+                    bgColor: "#3a3a4a",
			
 
				+                    desc: "城市大气降水水位时空监测，数据的历史分析"
			
 
				+                },
			
 
				+                {
			
 
				+                    title: "判断点线面体的相互状态",
			
 
				+                    bgColor: "#5a3a7a",
			
 
				+                    desc: "公共服务设施分布分析，包含医院、教育、交通等场所"
			
 
				+                },
			
 
				+                {
			
 
				+                    title: "缓冲区计算",
			
 
				+                    bgColor: "#2a7a5a",
			
 
				+                    desc: "农业用地分布现状与种植结构空间数据、全域耕地空间"
			
 
				+                },
			
 
				+                {
			
 
				+                    title: "线面体分割",
			
 
				+                    bgColor: "#1a5a8a",
			
 
				+                    desc: "主要河网分布与水文监测数据、流域相关大数据"
			
 
				+                },
			
 
				+                {
			
 
				+                    title: "时空差异分析",
			
 
				+                    bgColor: "#1a6a9a",
			
 
				+                    desc: "主要河网分布与水文监测数据、流域相关大数据"
			
 
				+                }
			
 
				+            ]
			
 
				+        };
			
 
				+    },
			
 
				+    mounted() {
			
 
				+        this.changePanel(this.activePanel)
			
 
				+    },
			
 
				+    methods: {
			
 
				+        changePanel(active) {
			
 
				+            this.activePanel = active;
			
 
				+            this.nowFuncContent = this.funcList[this.activePanel]
			
 
				+        }
			
 
				+    }
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.container {
			
 
				+    width: 1920px;
			
 
				+    margin: 0 auto;
			
 
				+
			
 
				+    .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;
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .checkModule {
			
 
				+        width: 100%;
			
 
				+        background-color: #0f2545;
			
 
				+
			
 
				+        /* 流程步骤样式 */
			
 
				+        .process-bar {
			
 
				+            width: fit-content;
			
 
				+            margin: 0 auto;
			
 
				+            padding-top: 100px;
			
 
				+            padding-bottom: 100px;
			
 
				+
			
 
				+            .process-item {
			
 
				+                width: 250px;
			
 
				+                height: 200px;
			
 
				+                display: inline-block;
			
 
				+                color: #ffffff;
			
 
				+                cursor: pointer;
			
 
				+                border-radius: 10px;
			
 
				+                padding: 10px 15px;
			
 
				+
			
 
				+                .icon-box {
			
 
				+                    width: 90px;
			
 
				+                    height: 90px;
			
 
				+                    text-align: center;
			
 
				+                    margin: 30px 80px 30px 80px;
			
 
				+                }
			
 
				+
			
 
				+                .label {
			
 
				+                    height: 50px;
			
 
				+                    line-height: 50px;
			
 
				+                    font-size: 24px;
			
 
				+                    text-align: center;
			
 
				+                    letter-spacing: 5px;
			
 
				+                }
			
 
				+
			
 
				+                &.active {
			
 
				+                    background-color: rgba(64, 149, 229, 0.69);
			
 
				+                }
			
 
				+
			
 
				+                &:hover {
			
 
				+                    background-color: rgba(64, 149, 229, 0.69);
			
 
				+                }
			
 
				+
			
 
				+                &:nth-child(1) .icon-box {
			
 
				+                    background: url("~@/assets/images/sksjgl/sjzljc.png") no-repeat center center/100% 100%;
			
 
				+                }
			
 
				+
			
 
				+                &:nth-child(3) .icon-box {
			
 
				+                    background: url("~@/assets/images/sksjgl/sksjjg.png") no-repeat center center/100% 100%;
			
 
				+                }
			
 
				+
			
 
				+                &:nth-child(5) .icon-box {
			
 
				+                    background: url("~@/assets/images/sksjgl/sksjgl.png") no-repeat center center/100% 100%;
			
 
				+                }
			
 
				+
			
 
				+                &:nth-child(7) .icon-box {
			
 
				+                    background: url("~@/assets/images/sksjgl/sksjfb.png") no-repeat center center/100% 100%;
			
 
				+                }
			
 
				+            }
			
 
				+
			
 
				+            .divider {
			
 
				+                width: 60px;
			
 
				+                height: 200px;
			
 
				+                vertical-align: top;
			
 
				+                display: inline-block;
			
 
				+                background: url("~@/assets/images/sksjgl/jiantou.png") no-repeat center center/100%;
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        /* 流程内容样式 */
			
 
				+        .process-content {
			
 
				+            width: 100%;
			
 
				+            padding: 50px 150px;
			
 
				+            box-sizing: border-box;
			
 
				+            display: flex;
			
 
				+            /* 允许换行 */
			
 
				+            flex-wrap: wrap;
			
 
				+            /* 元素之间的间距（可选） */
			
 
				+            gap: 75px;
			
 
				+
			
 
				+
			
 
				+            .process-content-item {
			
 
				+                /* 核心：每行2个，扣除gap间距 */
			
 
				+                width: calc(50% - 40px);
			
 
				+                height: 400px;
			
 
				+                // background: #f0f8ff;
			
 
				+                // border: 1px solid #409eff;
			
 
				+
			
 
				+                display: flex;
			
 
				+                align-items: center;
			
 
				+                justify-content: center;
			
 
				+                font-size: 18px;
			
 
				+                color: #333;
			
 
				+
			
 
				+                a {
			
 
				+                    width: 100%;
			
 
				+                    height: 100%;
			
 
				+
			
 
				+                    .pictrue {
			
 
				+                        width: 100%;
			
 
				+                        height: 361px;
			
 
				+                        border-radius: 8px;
			
 
				+                    }
			
 
				+
			
 
				+                    .label {
			
 
				+                        color: #ffffff;
			
 
				+                        text-align: center;
			
 
				+                        height: 50px;
			
 
				+                        line-height: 50px;
			
 
				+                        font-size: 24px;
			
 
				+                    }
			
 
				+                }
			
 
				+
			
 
				+
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+
			
 
				+    .time-space-operator-lib {
			
 
				+        background-color: #1e407c;
			
 
				+        color: #fff;
			
 
				+        padding: 50px 150px;
			
 
				+        height: 700px;
			
 
				+        box-sizing: border-box;
			
 
				+
			
 
				+        /* 标题区域 */
			
 
				+        .title-section {
			
 
				+            text-align: center;
			
 
				+            margin-bottom: 20px;
			
 
				+
			
 
				+            h1 {
			
 
				+                font-size: 28px;
			
 
				+                font-weight: bold;
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        /* 描述区域 */
			
 
				+        .desc-section {
			
 
				+            margin-bottom: 30px;
			
 
				+            line-height: 1.6;
			
 
				+            font-size: 14px;
			
 
				+            opacity: 0.9;
			
 
				+        }
			
 
				+
			
 
				+        /* 业务专区区域 */
			
 
				+        .business-section {
			
 
				+            margin-top: 20px;
			
 
				+
			
 
				+            .business-header {
			
 
				+                display: flex;
			
 
				+                justify-content: space-between;
			
 
				+                align-items: center;
			
 
				+                margin-bottom: 15px;
			
 
				+                font-size: 16px;
			
 
				+
			
 
				+                .more-btn {
			
 
				+                    background-color: transparent;
			
 
				+                    border: 1px solid #fff;
			
 
				+                    color: #fff;
			
 
				+                    padding: 4px 12px;
			
 
				+                    border-radius: 4px;
			
 
				+                    cursor: pointer;
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        /* 卡片列表 */
			
 
				+        .card-list {
			
 
				+            display: grid;
			
 
				+            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
			
 
				+            gap: 20px;
			
 
				+
			
 
				+            .card-item {
			
 
				+                background-color: rgba(255, 255, 255, 0.1);
			
 
				+                padding: 15px;
			
 
				+                border-radius: 8px;
			
 
				+                height: 180px;
			
 
				+                display: flex;
			
 
				+                flex-direction: column;
			
 
				+
			
 
				+                .card-title {
			
 
				+                    font-size: 15px;
			
 
				+                    font-weight: 500;
			
 
				+                    margin-bottom: 10px;
			
 
				+                }
			
 
				+
			
 
				+                .card-bg {
			
 
				+                    flex: 1;
			
 
				+                    border-radius: 4px;
			
 
				+                    margin: 8px 0;
			
 
				+                }
			
 
				+
			
 
				+                .card-desc {
			
 
				+                    font-size: 12px;
			
 
				+                    opacity: 0.8;
			
 
				+                    line-height: 1.4;
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+</style>
			
--- a/src/views/Skszk.vue
+++ b/src/views/Skszk.vue
@@ -1,31 +0,0 @@
 
				-<template>
			
 
				-    <div class="sksjgl container">
			
 
				-        <router-view />
			
 
				-    </div>
			
 
				-</template>
			
 
				-
			
 
				-<script>
			
 
				-export default {
			
 
				-    name: "sksjgl",
			
 
				-    data() {
			
 
				-        return {
			
 
				-
			
 
				-        };
			
 
				-    },
			
 
				-    mounted() {
			
 
				-    },
			
 
				-    methods: {
			
 
				-    }
			
 
				-};
			
 
				-</script>
			
 
				-
			
 
				-<style lang="less" scoped>
			
 
				-.container {
			
 
				-    width: 1920px;
			
 
				-    margin: 0 auto;
			
 
				-}
			
 
				-
			
 
				-.sksjgl {
			
 
				-    position: relative;
			
 
				-}
			
 
				-</style>
			
--- a/src/views/skmh/index.vue
+++ b/src/views/skmh/index.vue
@@ -0,0 +1,1075 @@
 
				+<template>
			
 
				+  <div class="dashboard-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="banner">
			
 
				+      <div class="banner-content">
			
 
				+        <h1>时空门户</h1>
			
 
				+        <p>时空门户是一个集数据采集、分析、展示于一体的综合性平台，为用户提供全面的设备监控和数据分析服务</p>
			
 
				+        <button class="enter-btn">进入系统</button>
			
 
				+      </div>
			
 
				+    </div> -->
			
 
				+
			
 
				+    <!-- 平台数据统计 -->
			
 
				+    <div class="stats-section">
			
 
				+      <div class="overview-header">
			
 
				+        <h2>平台数据统计</h2>
			
 
				+      </div>
			
 
				+      <div class="stats-grid">
			
 
				+        <div class="stat-card card-1">
			
 
				+          <div class="stat-label">平台服务总数
			
 
				+              <el-image
			
 
				+              style="width: 20px; height: 20px"
			
 
				+              src="static/images/skmh-1.png"
			
 
				+              fit="cover"
			
 
				+            />
			
 
				+          </div>
			
 
				+          <div class="stat-number">1,248</div>
			
 
				+          <div class="stat-label">较上月增长12.5%</div>
			
 
				+        </div>
			
 
				+        <div class="stat-card card-2">
			
 
				+          <div class="stat-label">新上线服务统计
			
 
				+            <el-image
			
 
				+              style="width: 20px; height: 20px"
			
 
				+              src="static/images/skmh-2.png"
			
 
				+              fit="cover"
			
 
				+            />
			
 
				+          </div>
			
 
				+          <div class="stat-number">86</div>
			
 
				+          <div class="stat-label">本月新增服务</div>
			
 
				+        </div>
			
 
				+        <div class="stat-card card-3">
			
 
				+          <div class="stat-label">注册用户总数
			
 
				+            <el-image
			
 
				+              style="width: 20px; height: 20px"
			
 
				+              src="static/images/skmh-3.png"
			
 
				+              fit="cover"
			
 
				+            />
			
 
				+          </div>
			
 
				+          <div class="stat-number">24,586</div>
			
 
				+          <div class="stat-label">本周新增12,34人</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+
			
 
				+    <!-- 数据概览 -->
			
 
				+    <div class="data-overview">
			
 
				+      <div class="overview-header">
			
 
				+        <h2>数据概览</h2>
			
 
				+        <!-- <div class="time-tabs">
			
 
				+          <div class="tab active">今日</div>
			
 
				+          <div class="tab">本周</div>
			
 
				+          <div class="tab">本月</div>
			
 
				+          <div class="tab">本年</div>
			
 
				+        </div> -->
			
 
				+      </div>
			
 
				+       <div class="time-section">
			
 
				+        <div class="time-card">
			
 
				+          <div class="time-content">
			
 
				+            <div style="">
			
 
				+              <el-date-picker
			
 
				+                class="el-date-picker"
			
 
				+                v-model="fromTime.date"
			
 
				+                type="daterange"
			
 
				+                range-separator="-"
			
 
				+                start-placeholder="开始日期"
			
 
				+                end-placeholder="结束日期"
			
 
				+                format="YYYY-MM-DD"
			
 
				+                 @change="changeTime"
			
 
				+                
			
 
				+              />
			
 
				+            </div>
			
 
				+            <div class="button-row">
			
 
				+              <el-button type="primary" @click="handleType(7)">最近7天</el-button>
			
 
				+              <el-button type="primary" @click="handleType(30)">最近30天</el-button>
			
 
				+              <el-button type="primary" @click="handleType(90)">最近90天</el-button>
			
 
				+              <el-button type="primary" @click="handleType(365)">最近1年</el-button>
			
 
				+          </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      <div class="charts-grid">
			
 
				+        <!-- 访问量统计柱状图 -->
			
 
				+        <div class="chart-card">
			
 
				+          <div class="chart-title">访问量统计</div>
			
 
				+          <div ref="deviceChart" class="chart-container"></div>
			
 
				+        </div>
			
 
				+        <!-- 服务分类占比饼图 -->
			
 
				+        <div class="chart-card">
			
 
				+          <div class="chart-title">服务分类占比</div>
			
 
				+          <div ref="statusChart" class="chart-container"></div>
			
 
				+        </div>
			
 
				+        <!-- 用户活跃度分析折线图 -->
			
 
				+        <!-- <div class="chart-card">
			
 
				+          <div class="chart-title">用户活跃度分析</div>
			
 
				+          <div ref="activityChart" class="chart-container"></div>
			
 
				+        </div> -->
			
 
				+        <!-- 数据量柱状图 -->
			
 
				+        <!-- <div class="chart-card">
			
 
				+          <div class="chart-title">数据量</div>
			
 
				+          <div ref="dataVolumeChart" class="chart-container"></div>
			
 
				+        </div> -->
			
 
				+      </div>
			
 
				+    </div>
			
 
				+
			
 
				+    <!-- 设备综合分析比较 -->
			
 
				+    <div class="comparison-section">
			
 
				+      <div class="chart-card full-width">
			
 
				+        <div class="chart-title">各委办平台用户分布</div>
			
 
				+        <!-- <div ref="comparisonChart" class="chart-container"></div> -->
			
 
				+        <el-table :data="tableData" style="width: 100%">
			
 
				+          <el-table-column prop="name" label="委办单位" />
			
 
				+          <el-table-column prop="number" label="注册用户数" />
			
 
				+          <el-table-column prop="activity" label="活跃度" />
			
 
				+          <el-table-column prop="server" label="服务使用量" />
			
 
				+        </el-table>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+
			
 
				+    <!-- 功能演示 -->
			
 
				+    <div class="demo-section">
			
 
				+      <div class="overview-header">
			
 
				+        <h2>功能演示</h2>
			
 
				+      </div>
			
 
				+      <div class="demo-grid">
			
 
				+        <div class="demo-card">
			
 
				+          <div class="demo-thumbnail">
			
 
				+            <div class="play-btn">▶</div>
			
 
				+          </div>
			
 
				+          <div class="demo-title">
			
 
				+            <div class="demo-label">核心功能操作演示</div>
			
 
				+            <div class="demo-text">展示系统核心功能操作流程与交互方式</div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <div class="demo-card">
			
 
				+          <div class="demo-thumbnail">
			
 
				+            <div class="play-btn">▶</div>
			
 
				+          </div>
			
 
				+          <div class="demo-title">
			
 
				+            <div class="demo-label">二三维一体化引擎</div>
			
 
				+            <div class="demo-text">展示空间数据可视化与交互分析能力</div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <div class="demo-card">
			
 
				+          <div class="demo-thumbnail">
			
 
				+            <div class="play-btn">▶</div>
			
 
				+          </div>
			
 
				+          <div class="demo-title">
			
 
				+            <div class="demo-label">实际业务场景应用</div>
			
 
				+            <div class="demo-text">展示系统在行业中的实际应用案例</div>
			
 
				+          </div>
			
 
				+          
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import * as echarts from 'echarts'
			
 
				+
			
 
				+export default {
			
 
				+  name: 'SpatialTemporalPortal',
			
 
				+  data() {
			
 
				+    return {
			
 
				+      deviceChart: null,
			
 
				+      statusChart: null,
			
 
				+      activityChart: null,
			
 
				+      dataVolumeChart: null,
			
 
				+      comparisonChart: null,
			
 
				+      fromTime:{
			
 
				+        date:[new Date(),new Date()]
			
 
				+      },
			
 
				+      tableData:[
			
 
				+        {
			
 
				+          number: '1234',
			
 
				+          name: 'tom',
			
 
				+          activity:'87',
			
 
				+          server: '2324',
			
 
				+        },
			
 
				+        {
			
 
				+          number: '1234',
			
 
				+          name: 'canver',
			
 
				+          activity:'78',
			
 
				+          server: '2324',
			
 
				+        },
			
 
				+        {
			
 
				+          number: '1234',
			
 
				+          name: 'lina',
			
 
				+          activity:'88',
			
 
				+          server: '2324',
			
 
				+        },
			
 
				+        {
			
 
				+          number: '1234',
			
 
				+          name: 'wang',
			
 
				+          activity:'86',
			
 
				+          server: '2324',
			
 
				+        },
			
 
				+      ]
			
 
				+    }
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    this.initCharts()
			
 
				+    window.addEventListener('resize', this.handleResize)
			
 
				+  },
			
 
				+  beforeUnmount() {
			
 
				+    window.removeEventListener('resize', this.handleResize)
			
 
				+    this.destroyCharts()
			
 
				+  },
			
 
				+  methods: {
			
 
				+    initCharts() {
			
 
				+      this.initDeviceChart()
			
 
				+      this.initStatusChart()
			
 
				+      // this.initActivityChart()
			
 
				+      // this.initDataVolumeChart()
			
 
				+      // this.initComparisonChart()
			
 
				+    },
			
 
				+    handleType(param){
			
 
				+      const end = new Date()
			
 
				+      const start = new Date()
			
 
				+      start.setTime(start.getTime() - 3600 * 1000 * 24 * param) //天计算
			
 
				+      end.setTime(end.getTime() - 3600 * 1000 * 24 * 1) //天计算
			
 
				+      // start.setMonth(start.getMonth() - 6)
			
 
				+      this.fromTime.date = [start,end]
			
 
				+    },
			
 
				+    changeTime(v){
			
 
				+      debugger
			
 
				+      console.log('[ eee ] >', v)
			
 
				+      this.fromTime.date=v
			
 
				+      
			
 
				+    },
			
 
				+    
			
 
				+    initDeviceChart() {
			
 
				+      this.deviceChart = echarts.init(this.$refs.deviceChart)
			
 
				+      const option = {
			
 
				+        tooltip: {
			
 
				+          trigger: 'item',
			
 
				+          backgroundColor: 'rgba(0, 25, 50, 0.8)',
			
 
				+          borderColor: '#1E90FF',
			
 
				+          textStyle: {
			
 
				+            color: '#fff'
			
 
				+          }
			
 
				+        },
			
 
				+        legend: {
			
 
				+          orient: 'horizontal',
			
 
				+          // bottom: 0,
			
 
				+          top:0,
			
 
				+          textStyle: {
			
 
				+            color: '#a3b6c7'
			
 
				+          }
			
 
				+        },
			
 
				+        grid: {
			
 
				+          left: '3%',
			
 
				+          right: '4%',
			
 
				+          bottom: '3%',
			
 
				+          containLabel: true
			
 
				+        },
			
 
				+        xAxis: {
			
 
				+          type: 'category',
			
 
				+          data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
			
 
				+          axisLabel: {
			
 
				+            color: '#a3b6c7'
			
 
				+          },
			
 
				+          axisLine: {
			
 
				+            lineStyle: {
			
 
				+              color: '#1E90FF'
			
 
				+            }
			
 
				+          }
			
 
				+        },
			
 
				+        yAxis: {
			
 
				+          type: 'value',
			
 
				+          axisLabel: {
			
 
				+            color: '#a3b6c7'
			
 
				+          },
			
 
				+          axisLine: {
			
 
				+            lineStyle: {
			
 
				+              color: '#1E90FF'
			
 
				+            }
			
 
				+          },
			
 
				+          splitLine: {
			
 
				+            lineStyle: {
			
 
				+              color: 'rgba(30, 144, 255, 0.2)'
			
 
				+            }
			
 
				+          }
			
 
				+        },
			
 
				+        series: [
			
 
				+          {
			
 
				+            data: [120, 200, 150, 80, 70, 110],
			
 
				+            type: 'bar',
			
 
				+            barWidth: '60%',
			
 
				+            itemStyle: {
			
 
				+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
			
 
				+                { offset: 0, color: '#1E90FF' },
			
 
				+                { offset: 1, color: '#00BFFF' }
			
 
				+              ])
			
 
				+            }
			
 
				+          }
			
 
				+        ]
			
 
				+      }
			
 
				+      this.deviceChart.setOption(option)
			
 
				+    },
			
 
				+    
			
 
				+    initStatusChart() {
			
 
				+      this.statusChart = echarts.init(this.$refs.statusChart)
			
 
				+      const option = {
			
 
				+        tooltip: {
			
 
				+          trigger: 'item',
			
 
				+          backgroundColor: 'rgba(0, 25, 50, 0.8)',
			
 
				+          borderColor: '#1E90FF',
			
 
				+          textStyle: {
			
 
				+            color: '#fff'
			
 
				+          }
			
 
				+        },
			
 
				+        legend: {
			
 
				+          orient: 'horizontal',
			
 
				+          bottom: 0,
			
 
				+          textStyle: {
			
 
				+            color: '#a3b6c7'
			
 
				+          }
			
 
				+        },
			
 
				+        series: [
			
 
				+          {
			
 
				+            name: '服务分类占比',
			
 
				+            type: 'pie',
			
 
				+            radius: ['40%', '70%'],
			
 
				+            avoidLabelOverlap: false,
			
 
				+            itemStyle: {
			
 
				+              borderRadius: 10,
			
 
				+              borderColor: '#0A192F',
			
 
				+              borderWidth: 2
			
 
				+            },
			
 
				+            label: {
			
 
				+              show: false,
			
 
				+              position: 'center'
			
 
				+            },
			
 
				+            emphasis: {
			
 
				+              label: {
			
 
				+                show: true,
			
 
				+                fontSize: 20,
			
 
				+                fontWeight: 'bold',
			
 
				+                color: '#fff'
			
 
				+              }
			
 
				+            },
			
 
				+            labelLine: {
			
 
				+              show: false
			
 
				+            },
			
 
				+            data: [
			
 
				+              { value: 400, name: '空间分析', itemStyle: { color: '#52C41A' } },
			
 
				+              { value: 300, name: '数据查询', itemStyle: { color: '#FAAD14' } },
			
 
				+              { value: 200, name: '三维可视化', itemStyle: { color: '#F5222D' } },
			
 
				+              { value: 100, name: '路径规划', itemStyle: { color: '#8C8C8C' } }
			
 
				+            ]
			
 
				+          }
			
 
				+        ]
			
 
				+      }
			
 
				+      this.statusChart.setOption(option)
			
 
				+    },
			
 
				+    
			
 
				+    initActivityChart() {
			
 
				+      this.activityChart = echarts.init(this.$refs.activityChart)
			
 
				+      const option = {
			
 
				+        tooltip: {
			
 
				+          trigger: 'axis',
			
 
				+          backgroundColor: 'rgba(0, 25, 50, 0.8)',
			
 
				+          borderColor: '#1E90FF',
			
 
				+          textStyle: {
			
 
				+            color: '#fff'
			
 
				+          }
			
 
				+        },
			
 
				+        grid: {
			
 
				+          left: '3%',
			
 
				+          right: '4%',
			
 
				+          bottom: '3%',
			
 
				+          containLabel: true
			
 
				+        },
			
 
				+        xAxis: {
			
 
				+          type: 'category',
			
 
				+          boundaryGap: false,
			
 
				+          data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
			
 
				+          axisLabel: {
			
 
				+            color: '#a3b6c7'
			
 
				+          },
			
 
				+          axisLine: {
			
 
				+            lineStyle: {
			
 
				+              color: '#1E90FF'
			
 
				+            }
			
 
				+          }
			
 
				+        },
			
 
				+        yAxis: {
			
 
				+          type: 'value',
			
 
				+          axisLabel: {
			
 
				+            color: '#a3b6c7'
			
 
				+          },
			
 
				+          axisLine: {
			
 
				+            lineStyle: {
			
 
				+              color: '#1E90FF'
			
 
				+            }
			
 
				+          },
			
 
				+          splitLine: {
			
 
				+            lineStyle: {
			
 
				+              color: 'rgba(30, 144, 255, 0.2)'
			
 
				+            }
			
 
				+          }
			
 
				+        },
			
 
				+        series: [
			
 
				+          {
			
 
				+            name: '活跃度',
			
 
				+            type: 'line',
			
 
				+            stack: 'Total',
			
 
				+            smooth: true,
			
 
				+            lineStyle: {
			
 
				+              color: '#1E90FF'
			
 
				+            },
			
 
				+            areaStyle: {
			
 
				+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
			
 
				+                { offset: 0, color: 'rgba(30, 144, 255, 0.6)' },
			
 
				+                { offset: 1, color: 'rgba(30, 144, 255, 0.1)' }
			
 
				+              ])
			
 
				+            },
			
 
				+            emphasis: {
			
 
				+              focus: 'series'
			
 
				+            },
			
 
				+            data: [120, 132, 101, 134, 90, 230]
			
 
				+          }
			
 
				+        ]
			
 
				+      }
			
 
				+      this.activityChart.setOption(option)
			
 
				+    },
			
 
				+    
			
 
				+    initDataVolumeChart() {
			
 
				+      this.dataVolumeChart = echarts.init(this.$refs.dataVolumeChart)
			
 
				+      const option = {
			
 
				+        tooltip: {
			
 
				+          trigger: 'axis',
			
 
				+          backgroundColor: 'rgba(0, 25, 50, 0.8)',
			
 
				+          borderColor: '#1E90FF',
			
 
				+          textStyle: {
			
 
				+            color: '#fff'
			
 
				+          }
			
 
				+        },
			
 
				+        grid: {
			
 
				+          left: '3%',
			
 
				+          right: '4%',
			
 
				+          bottom: '3%',
			
 
				+          containLabel: true
			
 
				+        },
			
 
				+        xAxis: {
			
 
				+          type: 'category',
			
 
				+          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
			
 
				+          axisLabel: {
			
 
				+            color: '#a3b6c7'
			
 
				+          },
			
 
				+          axisLine: {
			
 
				+            lineStyle: {
			
 
				+              color: '#1E90FF'
			
 
				+            }
			
 
				+          }
			
 
				+        },
			
 
				+        yAxis: {
			
 
				+          type: 'value',
			
 
				+          axisLabel: {
			
 
				+            color: '#a3b6c7'
			
 
				+          },
			
 
				+          axisLine: {
			
 
				+            lineStyle: {
			
 
				+              color: '#1E90FF'
			
 
				+            }
			
 
				+          },
			
 
				+          splitLine: {
			
 
				+            lineStyle: {
			
 
				+              color: 'rgba(30, 144, 255, 0.2)'
			
 
				+            }
			
 
				+          }
			
 
				+        },
			
 
				+        series: [
			
 
				+          {
			
 
				+            data: [1200, 2000, 1500, 800, 700, 1100, 1300],
			
 
				+            type: 'bar',
			
 
				+            barWidth: '60%',
			
 
				+            itemStyle: {
			
 
				+              color: '#FF7F50'
			
 
				+            }
			
 
				+          }
			
 
				+        ]
			
 
				+      }
			
 
				+      this.dataVolumeChart.setOption(option)
			
 
				+    },
			
 
				+    
			
 
				+    initComparisonChart() {
			
 
				+      this.comparisonChart = echarts.init(this.$refs.comparisonChart)
			
 
				+      const option = {
			
 
				+        tooltip: {
			
 
				+          trigger: 'axis',
			
 
				+          backgroundColor: 'rgba(0, 25, 50, 0.8)',
			
 
				+          borderColor: '#1E90FF',
			
 
				+          textStyle: {
			
 
				+            color: '#fff'
			
 
				+          }
			
 
				+        },
			
 
				+        legend: {
			
 
				+          data: ['设备A', '设备B', '设备C'],
			
 
				+          textStyle: {
			
 
				+            color: '#a3b6c7'
			
 
				+          }
			
 
				+        },
			
 
				+        grid: {
			
 
				+          left: '3%',
			
 
				+          right: '4%',
			
 
				+          bottom: '3%',
			
 
				+          containLabel: true
			
 
				+        },
			
 
				+        xAxis: {
			
 
				+          type: 'category',
			
 
				+          boundaryGap: false,
			
 
				+          data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
			
 
				+          axisLabel: {
			
 
				+            color: '#a3b6c7'
			
 
				+          },
			
 
				+          axisLine: {
			
 
				+            lineStyle: {
			
 
				+              color: '#1E90FF'
			
 
				+            }
			
 
				+          }
			
 
				+        },
			
 
				+        yAxis: {
			
 
				+          type: 'value',
			
 
				+          axisLabel: {
			
 
				+            color: '#a3b6c7'
			
 
				+          },
			
 
				+          axisLine: {
			
 
				+            lineStyle: {
			
 
				+              color: '#1E90FF'
			
 
				+            }
			
 
				+          },
			
 
				+          splitLine: {
			
 
				+            lineStyle: {
			
 
				+              color: 'rgba(30, 144, 255, 0.2)'
			
 
				+            }
			
 
				+          }
			
 
				+        },
			
 
				+        series: [
			
 
				+          {
			
 
				+            name: '设备A',
			
 
				+            type: 'line',
			
 
				+            stack: 'Total',
			
 
				+            smooth: true,
			
 
				+            lineStyle: {
			
 
				+              color: '#1E90FF'
			
 
				+            },
			
 
				+            areaStyle: {
			
 
				+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
			
 
				+                { offset: 0, color: 'rgba(30, 144, 255, 0.6)' },
			
 
				+                { offset: 1, color: 'rgba(30, 144, 255, 0.1)' }
			
 
				+              ])
			
 
				+            },
			
 
				+            data: [120, 132, 101, 134, 90, 230]
			
 
				+          },
			
 
				+          {
			
 
				+            name: '设备B',
			
 
				+            type: 'line',
			
 
				+            stack: 'Total',
			
 
				+            smooth: true,
			
 
				+            lineStyle: {
			
 
				+              color: '#52C41A'
			
 
				+            },
			
 
				+            areaStyle: {
			
 
				+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
			
 
				+                { offset: 0, color: 'rgba(82, 196, 26, 0.6)' },
			
 
				+                { offset: 1, color: 'rgba(82, 196, 26, 0.1)' }
			
 
				+              ])
			
 
				+            },
			
 
				+            data: [220, 182, 191, 234, 290, 330]
			
 
				+          },
			
 
				+          {
			
 
				+            name: '设备C',
			
 
				+            type: 'line',
			
 
				+            stack: 'Total',
			
 
				+            smooth: true,
			
 
				+            lineStyle: {
			
 
				+              color: '#FF7F50'
			
 
				+            },
			
 
				+            areaStyle: {
			
 
				+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
			
 
				+                { offset: 0, color: 'rgba(255, 127, 80, 0.6)' },
			
 
				+                { offset: 1, color: 'rgba(255, 127, 80, 0.1)' }
			
 
				+              ])
			
 
				+            },
			
 
				+            data: [150, 232, 201, 154, 190, 330]
			
 
				+          }
			
 
				+        ]
			
 
				+      }
			
 
				+      this.comparisonChart.setOption(option)
			
 
				+    },
			
 
				+    
			
 
				+    handleResize() {
			
 
				+      if (this.deviceChart) this.deviceChart.resize()
			
 
				+      if (this.statusChart) this.statusChart.resize()
			
 
				+      if (this.activityChart) this.activityChart.resize()
			
 
				+      if (this.dataVolumeChart) this.dataVolumeChart.resize()
			
 
				+      if (this.comparisonChart) this.comparisonChart.resize()
			
 
				+    },
			
 
				+    
			
 
				+    destroyCharts() {
			
 
				+      if (this.deviceChart) {
			
 
				+        this.deviceChart.dispose()
			
 
				+        this.deviceChart = null
			
 
				+      }
			
 
				+      if (this.statusChart) {
			
 
				+        this.statusChart.dispose()
			
 
				+        this.statusChart = null
			
 
				+      }
			
 
				+      if (this.activityChart) {
			
 
				+        this.activityChart.dispose()
			
 
				+        this.activityChart = null
			
 
				+      }
			
 
				+      if (this.dataVolumeChart) {
			
 
				+        this.dataVolumeChart.dispose()
			
 
				+        this.dataVolumeChart = null
			
 
				+      }
			
 
				+      if (this.comparisonChart) {
			
 
				+        this.comparisonChart.dispose()
			
 
				+        this.comparisonChart = null
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+
			
 
				+/* 确保你的自定义样式优先级更高 */
			
 
				+.el-date-picker {
			
 
				+    /* 重置为期望的样式 */
			
 
				+    color: initial !important; /* 使用 !important 来确保优先级 */
			
 
				+    background-color: white !important; /* 确保背景色正确 */
			
 
				+}
			
 
				+.dashboard-container {
			
 
				+  background-color: #0A192F;
			
 
				+  min-height: 100vh;
			
 
				+  color: #fff;
			
 
				+}
			
 
				+
			
 
				+.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;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+/* 顶部横幅 */
			
 
				+.banner {
			
 
				+  position: relative;
			
 
				+  height: 500px;
			
 
				+  background: url('@/assets/images/common/home-bg1.png') center/cover no-repeat;
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  justify-content: flex-end;
			
 
				+  padding-right: 10%;
			
 
				+  
			
 
				+  &::before {
			
 
				+    content: '';
			
 
				+    position: absolute;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+    right: 0;
			
 
				+    bottom: 0;
			
 
				+    background: linear-gradient(to right, rgba(10, 25, 47, 0.9), rgba(10, 25, 47, 0.7));
			
 
				+  }
			
 
				+  
			
 
				+  .banner-content {
			
 
				+    position: relative;
			
 
				+    max-width: 600px;
			
 
				+    text-align: left;
			
 
				+    padding: 0 20px;
			
 
				+    
			
 
				+    h1 {
			
 
				+      font-size: 42px;
			
 
				+      font-weight: bold;
			
 
				+      margin-bottom: 20px;
			
 
				+      color: #fff;
			
 
				+    }
			
 
				+    
			
 
				+    p {
			
 
				+      font-size: 14px;
			
 
				+      line-height: 1.8;
			
 
				+      margin-bottom: 30px;
			
 
				+      color: #a3b6c7;
			
 
				+    }
			
 
				+    
			
 
				+    .enter-btn {
			
 
				+      background-color: transparent;
			
 
				+      color: #409eff;
			
 
				+      border: 1px solid #409eff;
			
 
				+      padding: 8px 30px;
			
 
				+      font-size: 16px;
			
 
				+      border-radius: 20px;
			
 
				+      cursor: pointer;
			
 
				+      transition: all 0.3s ease;
			
 
				+      
			
 
				+      &:hover {
			
 
				+        background-color: #409eff;
			
 
				+        color: #fff;
			
 
				+        transform: translateY(-2px);
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+/* 平台数据统计 */
			
 
				+.stats-section {
			
 
				+  padding: 40px 20px;
			
 
				+  .overview-header {
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    align-items: center;
			
 
				+    margin-bottom: 30px;
			
 
				+    
			
 
				+    h2 {
			
 
				+      font-size: 24px;
			
 
				+      color: #fff;
			
 
				+      margin: 0;
			
 
				+    }
			
 
				+  }
			
 
				+  
			
 
				+  .stats-grid {
			
 
				+    display: flex;
			
 
				+    justify-content: center;
			
 
				+    gap: 30px;
			
 
				+    flex-wrap: wrap;
			
 
				+    
			
 
				+    .stat-card {
			
 
				+      width: 555px;
			
 
				+      height: 150px;
			
 
				+      border-radius: 12px;
			
 
				+      padding: 20px;
			
 
				+      display: flex;
			
 
				+      flex-direction: column;
			
 
				+      justify-content: center;
			
 
				+      align-items: flex-start;
			
 
				+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
			
 
				+      transition: transform 0.3s ease;
			
 
				+      
			
 
				+      &:hover {
			
 
				+        transform: translateY(-5px);
			
 
				+      }
			
 
				+      
			
 
				+      .stat-number {
			
 
				+        font-size: 36px;
			
 
				+        font-weight: bold;
			
 
				+        margin-top: 10px;
			
 
				+        margin-bottom: 10px;
			
 
				+        color: #fff;
			
 
				+      }
			
 
				+      
			
 
				+      .stat-label {
			
 
				+        font-size: 16px;
			
 
				+        color: rgba(255, 255, 255, 0.8);
			
 
				+        width: 100%;
			
 
				+        justify-content: space-between;
			
 
				+        display: flex;
			
 
				+      }
			
 
				+    }
			
 
				+    
			
 
				+    .card-1 {
			
 
				+      background: linear-gradient(135deg, #3B82F6 0%, #4F46E5 100%);
			
 
				+    }
			
 
				+    
			
 
				+    .card-2 {
			
 
				+      background: linear-gradient(135deg, #22C55E 0%, #059669 100%);
			
 
				+    }
			
 
				+    
			
 
				+    .card-3 {
			
 
				+      background: linear-gradient(135deg, #A855F7 0%, #7C3AED 100%);
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+/* 数据概览 */
			
 
				+.data-overview {
			
 
				+  padding: 0 20px 40px;
			
 
				+  
			
 
				+  .overview-header {
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    align-items: center;
			
 
				+    margin-bottom: 30px;
			
 
				+    
			
 
				+    h2 {
			
 
				+      font-size: 24px;
			
 
				+      color: #fff;
			
 
				+      margin: 0;
			
 
				+    }
			
 
				+    
			
 
				+    .time-tabs {
			
 
				+      display: flex;
			
 
				+      gap: 20px;
			
 
				+      
			
 
				+      .tab {
			
 
				+        padding: 8px 16px;
			
 
				+        cursor: pointer;
			
 
				+        color: #a3b6c7;
			
 
				+        border-radius: 20px;
			
 
				+        transition: all 0.3s ease;
			
 
				+        
			
 
				+        &:hover {
			
 
				+          color: #409eff;
			
 
				+        }
			
 
				+        
			
 
				+        &.active {
			
 
				+          background-color: #409eff;
			
 
				+          color: #fff;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  
			
 
				+  .charts-grid {
			
 
				+    display: grid;
			
 
				+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
			
 
				+    gap: 30px;
			
 
				+    
			
 
				+    .chart-card {
			
 
				+      background-color: rgba(30, 41, 59, 0.6);
			
 
				+      border-radius: 12px;
			
 
				+      padding: 20px;
			
 
				+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
			
 
				+      
			
 
				+      .chart-title {
			
 
				+        font-size: 18px;
			
 
				+        color: #fff;
			
 
				+        margin-bottom: 20px;
			
 
				+        text-align: left;
			
 
				+      }
			
 
				+      
			
 
				+      .chart-container {
			
 
				+        height: 300px;
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+// 时间筛选
			
 
				+.time-section{
			
 
				+  padding: 0 0px 40px;
			
 
				+  .time-card {
			
 
				+    background-color: rgba(30, 41, 59, 0.6);
			
 
				+    border-radius: 12px;
			
 
				+    padding: 20px;
			
 
				+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
			
 
				+  }
			
 
				+  .time-content{
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    width: 100%;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+
			
 
				+/* 设备综合分析比较 */
			
 
				+.comparison-section {
			
 
				+  padding: 0 20px 40px;
			
 
				+  
			
 
				+  .chart-card {
			
 
				+    background-color: rgba(30, 41, 59, 0.6);
			
 
				+    border-radius: 12px;
			
 
				+    padding: 20px;
			
 
				+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
			
 
				+    
			
 
				+    &.full-width {
			
 
				+      max-width: 100%;
			
 
				+    }
			
 
				+    
			
 
				+    .chart-title {
			
 
				+      font-size: 18px;
			
 
				+      color: #fff;
			
 
				+      margin-bottom: 20px;
			
 
				+      text-align: left;
			
 
				+    }
			
 
				+    
			
 
				+    .chart-container {
			
 
				+      height: 400px;
			
 
				+      width: 100%;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+/* 功能演示 */
			
 
				+.demo-section {
			
 
				+  padding: 0 20px 100px;
			
 
				+  
			
 
				+ .overview-header {
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    align-items: center;
			
 
				+    margin-bottom: 30px;
			
 
				+    
			
 
				+    h2 {
			
 
				+      font-size: 24px;
			
 
				+      color: #fff;
			
 
				+      margin: 0;
			
 
				+    }
			
 
				+  }
			
 
				+  
			
 
				+  .demo-grid {
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    gap: 30px;
			
 
				+    flex-wrap: wrap;
			
 
				+    
			
 
				+    .demo-card {
			
 
				+      width: 350px;
			
 
				+      background-color: rgba(30, 41, 59, 0.6);
			
 
				+      border-radius: 12px;
			
 
				+      overflow: hidden;
			
 
				+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
			
 
				+      transition: transform 0.3s ease;
			
 
				+      
			
 
				+      &:hover {
			
 
				+        transform: translateY(-5px);
			
 
				+      }
			
 
				+      
			
 
				+      .demo-thumbnail {
			
 
				+        height: 200px;
			
 
				+        background-color: #1E90FF;
			
 
				+        position: relative;
			
 
				+        display: flex;
			
 
				+        justify-content: center;
			
 
				+        align-items: center;
			
 
				+        
			
 
				+        .play-btn {
			
 
				+          width: 60px;
			
 
				+          height: 60px;
			
 
				+          border-radius: 50%;
			
 
				+          background-color: rgba(255, 255, 255, 0.8);
			
 
				+          color: #1E90FF;
			
 
				+          font-size: 30px;
			
 
				+          display: flex;
			
 
				+          justify-content: center;
			
 
				+          align-items: center;
			
 
				+          cursor: pointer;
			
 
				+          transition: all 0.3s ease;
			
 
				+          
			
 
				+          &:hover {
			
 
				+            background-color: #fff;
			
 
				+            transform: scale(1.1);
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+      
			
 
				+      .demo-title {
			
 
				+        padding: 15px;
			
 
				+        color: #fff;
			
 
				+        text-align: left;
			
 
				+      }
			
 
				+      .demo-label {
			
 
				+        font-size: 16px;
			
 
				+        color: #fff;
			
 
				+        padding-bottom: 10px;
			
 
				+        text-align: left;
			
 
				+      }
			
 
				+      .demo-text {
			
 
				+        font-size: 12px;
			
 
				+        color: #fff;
			
 
				+        text-align: left;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+/* 响应式设计 */
			
 
				+@media (max-width: 768px) {
			
 
				+  .banner {
			
 
				+    padding-right: 5%;
			
 
				+    
			
 
				+    .banner-content {
			
 
				+      h1 {
			
 
				+        font-size: 32px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  
			
 
				+  .stats-section {
			
 
				+    .stats-grid {
			
 
				+      gap: 20px;
			
 
				+      
			
 
				+      .stat-card {
			
 
				+        width: 100%;
			
 
				+        max-width: 300px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  
			
 
				+  .data-overview {
			
 
				+    .overview-header {
			
 
				+      flex-direction: column;
			
 
				+      gap: 20px;
			
 
				+      
			
 
				+      h2 {
			
 
				+        text-align: center;
			
 
				+      }
			
 
				+    }
			
 
				+    
			
 
				+    .charts-grid {
			
 
				+      grid-template-columns: 1fr;
			
 
				+      
			
 
				+      .chart-card {
			
 
				+        .chart-container {
			
 
				+          height: 250px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  
			
 
				+  .comparison-section {
			
 
				+    .chart-card {
			
 
				+      .chart-container {
			
 
				+        height: 300px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  
			
 
				+  .demo-section {
			
 
				+    .demo-grid {
			
 
				+      gap: 20px;
			
 
				+      
			
 
				+      .demo-card {
			
 
				+        width: 100%;
			
 
				+        max-width: 350px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/views/skmh/scene/index.vue
+++ b/src/views/skmh/scene/index.vue
@@ -0,0 +1,110 @@
 
				+<template>
			
 
				+    <div class="container">
			
 
				+        <div style="padding: 20px;display: ruby-text;">
			
 
				+            <div v-for="info in listData" :key="info" style="padding: 20px;">
			
 
				+                <el-card style="border-radius: 10px !important;" @click="openVideo(info)">
			
 
				+                    <div class="card picDiv"><img :src="info.img" ></div>
			
 
				+                    <template #footer>
			
 
				+                        <div style="width: 260px;">
			
 
				+                            <div style="font-weight: bold;padding-bottom: 10px;">{{info.title}}</div>
			
 
				+                            <div class="ellipsis3">
			
 
				+                                <el-popover
			
 
				+                                    title=""
			
 
				+                                    width="300"
			
 
				+                                    effect="dark"
			
 
				+                                    :content="info.desc"
			
 
				+                                    placement="top-start"
			
 
				+                                >
			
 
				+                                    <template #reference>
			
 
				+                                        <div>{{info.desc}}</div>
			
 
				+                                    </template>
			
 
				+                                </el-popover>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </template>
			
 
				+                </el-card>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        <div>
			
 
				+            <el-dialog v-model="centerDialogVisible" title="预览" width="800" center :before-close="closeDialog">
			
 
				+                <video :src="videoUrl" controls style="width: 100%;"/>  
			
 
				+            </el-dialog>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+    name: "",
			
 
				+    data() {
			
 
				+        return {
			
 
				+            listData:[],
			
 
				+            centerDialogVisible:false,
			
 
				+            videoUrl:''
			
 
				+
			
 
				+        };
			
 
				+    },
			
 
				+    mounted() {
			
 
				+        this.initData()
			
 
				+    },
			
 
				+    methods: {
			
 
				+        initData(){
			
 
				+            let that = this;
			
 
				+            for(let i=0; i<10; i++){
			
 
				+                let str = {
			
 
				+                    url:"https://realbot-oss.oss-accelerate.aliyuncs.com/scrm/2025/2025-05-21/659fa31d-dc87-4882-8be5-1fba8fb7e6ff/flower.mp4",
			
 
				+                    img:require("@static/images/u30.png"),
			
 
				+                    title:"无人机实时成图_"+i,
			
 
				+                    desc:"无人机巡察场景可实时接入无人机视频画面，叠加到GIS场景中，实现边飞边出图的真实场景还原，并可将历史画面内容实现快速切图、上图展示，利用AI技术赋能无人机场景，实现无人机视频画面目标提取，实现关键目标要素点位标记及相关业务分析应用，可用于城市规划、应急、军用侦察等行业应用场景。"
			
 
				+                }
			
 
				+                that.listData.push(str);
			
 
				+            }
			
 
				+        },
			
 
				+        openVideo(param){
			
 
				+            this.videoUrl = param.url;
			
 
				+            this.centerDialogVisible=true
			
 
				+        },
			
 
				+        closeDialog(){
			
 
				+            this.videoUrl='';
			
 
				+            this.centerDialogVisible=false
			
 
				+        }
			
 
				+    }
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+/deep/ .el-card__body{
			
 
				+    padding: 0px !important;
			
 
				+    height: 140px;
			
 
				+}
			
 
				+.container {
			
 
				+    width: 100%;
			
 
				+    padding: 0px;
			
 
				+    margin: 0 auto;
			
 
				+}
			
 
				+.card{
			
 
				+    float: left;
			
 
				+    height: 150px;
			
 
				+    width: 300px;
			
 
				+    cursor: pointer;
			
 
				+    box-sizing: border-box;
			
 
				+}
			
 
				+.picDiv{
			
 
				+    overflow: hidden;
			
 
				+}
			
 
				+.picDiv img{
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    transition: all 1s;
			
 
				+}
			
 
				+.picDiv img:hover{
			
 
				+    transform:scale(1.2,1.2);
			
 
				+}
			
 
				+.ellipsis3{
			
 
				+    display: -webkit-box;
			
 
				+    -webkit-box-orient: vertical;
			
 
				+    -webkit-line-clamp: 3;
			
 
				+    overflow: hidden;
			
 
				+    text-overflow: ellipsis;
			
 
				+}
			
 
				+</style>
			
--- a/src/views/wgn/sksj/index.vue
+++ b/src/views/wgn/sksj/index.vue
@@ -0,0 +1,490 @@
 
				+<template>
			
 
				+    <div class="container">
			
 
				+        <div style="position: absolute;top: 20px;left: 20px;z-index: 9;">
			
 
				+            <div style="display: flex;">
			
 
				+                <el-select
			
 
				+                v-model="typeValue"
			
 
				+                placeholder="Select"
			
 
				+                style="width: 150px"
			
 
				+                @change="changType"
			
 
				+                >
			
 
				+                <el-option
			
 
				+                    v-for="item in options"
			
 
				+                    :key="item.value"
			
 
				+                    :label="item.label"
			
 
				+                    :value="item.value"
			
 
				+                />
			
 
				+                </el-select>
			
 
				+                <el-input v-if="typeValue != 6" v-model="inputAddress" style="width: 200px;height: 32px;padding: 0px 10px;" placeholder="输入URL地址……" />
			
 
				+                <div style="padding: 0px 10px;" v-if="typeValue == 6">
			
 
				+                    <el-upload
			
 
				+                        ref="uploadRef"
			
 
				+                        action=""
			
 
				+                        :auto-upload="false"
			
 
				+                        :file-list="fileList"
			
 
				+                        :show-file-list="false"
			
 
				+                        accept=".json,.geojson"
			
 
				+                        :on-change="handleChange"
			
 
				+                    >
			
 
				+                    <template #trigger>
			
 
				+                        <el-button type="primary">上传文件</el-button>
			
 
				+                    </template>
			
 
				+                    </el-upload>
			
 
				+                </div>
			
 
				+                <el-button type="primary" @click="parse">解析</el-button>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        <Map style="overflow: hidden;"></Map>
			
 
				+        <div class="infoDialog" v-show="infoDialogShow">
			
 
				+            <div class="close" @click="closeWin">×</div>
			
 
				+            <div class="content" v-if="nowPoint != null">
			
 
				+                <el-scrollbar>
			
 
				+                    <div class="item" v-for="info in nowPointInfo" :key="info">{{info.key}}: {{ info.value }}</div>
			
 
				+                </el-scrollbar>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import { ElMessage } from 'element-plus'
			
 
				+import Map from "@/views/example/Map.vue";
			
 
				+import { toRaw } from "vue";
			
 
				+export default {
			
 
				+    name: "",
			
 
				+    components: {
			
 
				+       Map
			
 
				+    },
			
 
				+    data() {
			
 
				+        return {
			
 
				+            listData:[],
			
 
				+            fileList: [],
			
 
				+            dataJson:[],
			
 
				+            wmslayer: {},
			
 
				+            pointImg:require('@static/images/point.png'),
			
 
				+            geometryArr:[],
			
 
				+            mapHandle:null,
			
 
				+            infoDialogShow:false,
			
 
				+            nowPoint: null,
			
 
				+            nowPointInfo:null,
			
 
				+            typeValue:'1',
			
 
				+            inputAddress:'http://121.43.55.7:8889/geoserver/kdyjs/wms',
			
 
				+            options:[
			
 
				+                {
			
 
				+                    value: '1',
			
 
				+                    label: '栅格WMS服务',
			
 
				+                },
			
 
				+                {
			
 
				+                    value: '2',
			
 
				+                    label: '栅格WMTS服务',
			
 
				+                },{
			
 
				+                    value: '3',
			
 
				+                    label: '栅格ArcGis服务',
			
 
				+                },
			
 
				+                {
			
 
				+                    value: '4',
			
 
				+                    label: '3dtiles数据',
			
 
				+                },
			
 
				+                // {
			
 
				+                //     value: '5',
			
 
				+                //     label: '矢量数据',
			
 
				+                // },
			
 
				+                {
			
 
				+                    value: '6',
			
 
				+                    label: '矢量文件',
			
 
				+                }
			
 
				+            ]
			
 
				+        };
			
 
				+    },
			
 
				+    mounted() {
			
 
				+        
			
 
				+    },
			
 
				+    methods: {
			
 
				+        beforeUpload(file) {
			
 
				+            const maxSize = 2; // 限制为2MB
			
 
				+            if (file.size / 1024 / 1024 > maxSize) {
			
 
				+                ElMessage({
			
 
				+                    type: 'error',
			
 
				+                    message: `文件大小不能超过 ${maxSize}MB！`,
			
 
				+                })
			
 
				+                return false;
			
 
				+            }
			
 
				+            return true;
			
 
				+        },
			
 
				+        handleChange(files,fileLists){
			
 
				+            let that = this;
			
 
				+            if (fileLists.length >1) {
			
 
				+                fileLists.shift();
			
 
				+            }
			
 
				+            that.fileList = fileLists;
			
 
				+            let reader = new FileReader();
			
 
				+            reader.readAsText(that.fileList[0].raw, "UTF-8");
			
 
				+            reader.onload = (evt) => {
			
 
				+                that.dataJson = JSON.parse(evt.target.result);
			
 
				+                console.log(that.dataJson); // 输出解析后的JSON数据
			
 
				+                ElMessage({
			
 
				+                    type: 'success',
			
 
				+                    message: `文件处理成功，请解析上图展示`,
			
 
				+                })
			
 
				+            };
			
 
				+        },
			
 
				+        closeWin() {
			
 
				+            this.infoDialogShow = false;
			
 
				+            this.nowPoint = null;
			
 
				+            this.nowPointInfo = null;
			
 
				+        },
			
 
				+        dwanMap(){
			
 
				+            let that = this;
			
 
				+            if(that.geometryArr.length>0){
			
 
				+                that.geometryArr.map(function (info) {
			
 
				+                    viewer.entities.remove(info)
			
 
				+                })
			
 
				+            }
			
 
				+            that.geometryArr = that.dataJson.features.map(function (info) {
			
 
				+                if(info.geometry.type == "Point"){
			
 
				+                    return that.addPoint(info)
			
 
				+                }else if(info.geometry.type == "LineString"){
			
 
				+                    return that.addLine(info)
			
 
				+                }else{
			
 
				+                    return that.addPolygon(info)
			
 
				+                }
			
 
				+                
			
 
				+            })
			
 
				+            that.pointTCHandle();
			
 
				+        },
			
 
				+        addPolygon(param){
			
 
				+            let arr = [];
			
 
				+            param.geometry.coordinates.forEach(element => {
			
 
				+                element.forEach(e => {
			
 
				+                    arr.push(e[0]);
			
 
				+                    arr.push(e[1]);
			
 
				+                })
			
 
				+            });
			
 
				+            return viewer.entities.add(new SkyScenery.Entity({
			
 
				+                name: " polygon",
			
 
				+                polygon: {
			
 
				+                    hierarchy: {
			
 
				+                        positions: SkyScenery.Cartesian3.fromDegreesArray(arr)
			
 
				+                    },
			
 
				+                    heightReference: SkyScenery.HeightReference.CLAMP_TO_GROUND,
			
 
				+                    material: SkyScenery.Color.CYAN.withAlpha(0.5)
			
 
				+                },
			
 
				+                info: {
			
 
				+                    coor: [arr[0], arr[1]],
			
 
				+                    properties: param.properties
			
 
				+                },
			
 
				+            }));
			
 
				+        },
			
 
				+        addLine(param){
			
 
				+            return viewer.entities.add({
			
 
				+                name: "line",
			
 
				+                polyline: {
			
 
				+                    //经纬度数组转世界坐标，带高度的话是fromDegreesArrayHeights
			
 
				+                    positions: SkyScenery.Cartesian3.fromDegreesArray(param.geometry.coordinates),
			
 
				+                    width: 2,
			
 
				+                    material: SkyScenery.Color.CYAN,
			
 
				+                    info: {
			
 
				+                        properties: param.properties
			
 
				+                    },
			
 
				+                }
			
 
				+            });
			
 
				+        },
			
 
				+        addPoint(param){
			
 
				+            let that = this;
			
 
				+            return viewer.entities.add(new SkyScenery.Entity({
			
 
				+                name:"point",
			
 
				+                position: SkyScenery.Cartesian3.fromDegrees(param.geometry.coordinates[0], param.geometry.coordinates[1]),
			
 
				+                type: "point",
			
 
				+                info: {
			
 
				+                  coor: [param.geometry.coordinates[0], param.geometry.coordinates[1]],
			
 
				+                  properties: param.properties
			
 
				+                },
			
 
				+                billboard: {
			
 
				+                  image: that.pointImg,
			
 
				+                  disableDepthTestDistance: Number.POSITIVE_INFINITY,
			
 
				+                  scale: 0.3,
			
 
				+                  horizontalOrigin: SkyScenery.HorizontalOrigin.CENTER,
			
 
				+                  verticalOrigin: SkyScenery.VerticalOrigin.BOTTOM,
			
 
				+                }
			
 
				+              }));
			
 
				+        },
			
 
				+        // 点击事件绑定
			
 
				+        pointTCHandle() {
			
 
				+            let that = this;
			
 
				+            if (!this.mapHandle) {
			
 
				+                this.mapHandle = new SkyScenery.ScreenSpaceEventHandler(viewer.canvas, this);
			
 
				+                this.mapHandle.setInputAction(function (movement) {
			
 
				+                    that.infoDialogShow = false
			
 
				+                    const pickedObject = viewer.scene.pick(movement.position);
			
 
				+
			
 
				+                    let cartesian = viewer.camera.pickEllipsoid(
			
 
				+                        movement.position,
			
 
				+                        viewer.scene.globe.ellipsoid
			
 
				+                    );
			
 
				+                    // 空间坐标转世界坐标(弧度)
			
 
				+                    let cartographic = SkyScenery.Cartographic.fromCartesian(cartesian);
			
 
				+                    // 弧度转为角度（经纬度）
			
 
				+                    let lon = SkyScenery.Math.toDegrees(cartographic.longitude); // 经度值
			
 
				+                    let lat = SkyScenery.Math.toDegrees(cartographic.latitude); // 纬度值
			
 
				+                    let center = [lon,lat]
			
 
				+                    if (SkyScenery.defined(pickedObject) && SkyScenery.defined(pickedObject.id)) {
			
 
				+                        const entity = pickedObject.id;
			
 
				+                        that.infoDialogShow = true
			
 
				+                        that.nowPoint = entity.info;
			
 
				+                        that.nowPointInfo =  Object.keys(that.nowPoint.properties).map(key => ({ key, value: that.nowPoint.properties[key] }));
			
 
				+                        that.nowPoint["type"] = "info";
			
 
				+                        // let xy = that.lonlatConvertToScreenXY(entity.info.coor)
			
 
				+                        let xy = that.lonlatConvertToScreenXY(center)
			
 
				+                        document.querySelector(".infoDialog").style.top = (xy.y - 230) + "px";
			
 
				+                        document.querySelector(".infoDialog").style.left = (xy.x - 100) + "px";
			
 
				+                    } else {
			
 
				+                        // console.log('未拾取到实体');
			
 
				+                    }
			
 
				+                }, SkyScenery.ScreenSpaceEventType.LEFT_CLICK);
			
 
				+                viewer.scene.postRender.addEventListener(that.updatePosition, this);
			
 
				+            } else {
			
 
				+                toRaw(this.mapHandle).destroy();
			
 
				+                this.mapHandle = null
			
 
				+                that.nowPointInfo = null
			
 
				+                viewer.scene.postRender.removeEventListener(that.updatePosition, this);
			
 
				+            }
			
 
				+        },
			
 
				+        // 经纬度转屏幕坐标
			
 
				+        lonlatConvertToScreenXY(lonlat) {
			
 
				+            // 定义经纬度
			
 
				+            var longitude = SkyScenery.Math.toRadians(lonlat[0]); // 例如：东经116.391度
			
 
				+            var latitude = SkyScenery.Math.toRadians(lonlat[1]); // 例如：北纬39.907度
			
 
				+            var height = 0; // 高度，通常在地表为0
			
 
				+            // 将经纬度转换为笛卡尔坐标
			
 
				+            // var cartographic = SkyScenery.Cartographic.fromDegrees(longitude, latitude, height);
			
 
				+            var cartesian = SkyScenery.Cartesian3.fromRadians(longitude, latitude, height, viewer.scene.globe.ellipsoid);
			
 
				+            // 将笛卡尔坐标转换为窗口坐标
			
 
				+            var canvasCoordinates = viewer.scene.cartesianToCanvasCoordinates(cartesian);
			
 
				+            return canvasCoordinates
			
 
				+        },
			
 
				+        // 位置更新
			
 
				+        updatePosition() {
			
 
				+            try {
			
 
				+                if (this.nowPoint != null) {
			
 
				+                    const obj = toRaw(this.nowPoint);
			
 
				+                    let xy = this.lonlatConvertToScreenXY(obj.coor)
			
 
				+                    if (!xy) {
			
 
				+                        document.querySelector(".infoDialog").style.top = "-9999px";
			
 
				+                        document.querySelector(".infoDialog").style.left = "-9999px";
			
 
				+                    } else {
			
 
				+                        document.querySelector(".infoDialog").style.top = (xy.y - 230) + "px";
			
 
				+                        document.querySelector(".infoDialog").style.left = (xy.x - 100) + "px";
			
 
				+                    }
			
 
				+                }
			
 
				+            } catch (error) {
			
 
				+                // debugger
			
 
				+            }
			
 
				+        },
			
 
				+        addWMTSLayer(param) {
			
 
				+            let matrixIds = [];
			
 
				+            for (let i = 0; i < 19; i++) {
			
 
				+                matrixIds[i] = i + 1;
			
 
				+            }
			
 
				+            // this.removeMapLayer();
			
 
				+            // console.log('[ WMTS ] >'+param)
			
 
				+            let layer = viewer.imageryLayers.addImageryProvider(
			
 
				+                new SkyScenery.WebMapTileServiceImageryProvider({
			
 
				+                    url: param.url,
			
 
				+                    layer: param.layers, // 固定的 cia  img  vec  cva 四种类型
			
 
				+                    style: "default",
			
 
				+                    format: "tiles",
			
 
				+                    // format:"image/png",
			
 
				+                    tileMatrixSetID: "w",
			
 
				+                    TileMatrixLabels: matrixIds,
			
 
				+                    subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
			
 
				+                    minimumLevel: 1,
			
 
				+                    maximumLevel: 18,
			
 
				+                    tilingScheme: new SkyScenery.WebMercatorTilingScheme()
			
 
				+                })
			
 
				+            );
			
 
				+            this.wmslayer.mapItemLayer = layer;
			
 
				+        },
			
 
				+        addWMSLayer(param) {
			
 
				+            // console.log('[ WMS ] >'+param)
			
 
				+            let layer =  viewer.imageryLayers.addImageryProvider(
			
 
				+                new SkyScenery.WebMapServiceImageryProvider({
			
 
				+                    url: param.url,
			
 
				+                    layers: param.layers, //固定的已发布的类型
			
 
				+                    parameters: {
			
 
				+                        TRANSPARENT: true,
			
 
				+                        format: "image/png"
			
 
				+                    }
			
 
				+                })
			
 
				+            );
			
 
				+            this.wmslayer.mapItemLayer = layer;
			
 
				+        },
			
 
				+        addARCGISLayer(param){
			
 
				+            // console.log('[ ArcGisMapServer ] >'+param)
			
 
				+            // this.removeMapLayer();
			
 
				+            // 添加地图服务
			
 
				+            let layer =  viewer.imageryLayers.addImageryProvider(
			
 
				+                // 此处使用的地图服务地址也可存放在配置文件中
			
 
				+                new SkyScenery.ArcGisMapServerImageryProvider({
			
 
				+                    url: param.url
			
 
				+                })
			
 
				+            );
			
 
				+            this.wmslayer.mapItemLayer = layer;
			
 
				+        },
			
 
				+        removeMapLayer(){
			
 
				+            // console.log('[ eee ] >')
			
 
				+            if(this.wmslayer.mapItemLayer){
			
 
				+                viewer.imageryLayers.remove(toRaw(this.wmslayer.mapItemLayer))
			
 
				+                delete this.wmslayer.mapItemLayer;
			
 
				+            }
			
 
				+            
			
 
				+        },
			
 
				+        getVectorData(param){
			
 
				+            let that = this;
			
 
				+            fetch(param.url, {
			
 
				+                method: 'GET',
			
 
				+            }).then(response => response.json()) // 假设服务器返回 JSON 数据
			
 
				+                .then(data => {
			
 
				+                    console.log('[ eee ] >')
			
 
				+                    that.dataJson = data.result;
			
 
				+                    that.closeWin()
			
 
				+                    that.dwanMap()
			
 
				+                })
			
 
				+        },
			
 
				+        add3dtilesData(param){
			
 
				+            console.log('[ add3dtilesData ] >'+param)
			
 
				+            let tile1 = new SkyScenery.add3DTilesData(param.url, viewer)
			
 
				+            tile1.readyPromise.then(function (tileset) {
			
 
				+                viewer.zoomTo(tile1)
			
 
				+            });
			
 
				+        },
			
 
				+        changType(){
			
 
				+            let that = this;
			
 
				+            // this.inputAddress = '';
			
 
				+            if(that.typeValue == 1){
			
 
				+                let curUrl = 'http://121.43.55.7:8889/geoserver/kdyjs/wms';
			
 
				+                that.inputAddress = curUrl;
			
 
				+            }else if(that.typeValue == 2){
			
 
				+                let type = "vec"; //cia  img  vec  cva
			
 
				+                let curUrl = "https://{s}.tianditu.gov.cn/"+type+"_w/wmts?tk=f74e6c0cc247c42af05f7053e0b5fb9b";
			
 
				+                that.inputAddress = curUrl;
			
 
				+             
			
 
				+            }else if(that.typeValue == 3){
			
 
				+                let curUrl = 'https://service-api.onemap.sh.gov.cn/data-service-manage-service/MapProxyApi/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBsaWNhdGlvbl9pZCI6NjEsImFwcGxpY2F0aW9uX25hbWUiOiLpnZLmtabkuozkuInnu7TmnI3liqHns7vnu58iLCJleHAiOjIwNDY2Nzg0MDN9.IKUMdjUX4U1jncIUNren-iotL7duXI90aLECMjpvUX8/shmap_normal_web/MapServer';
			
 
				+                that.inputAddress = curUrl;
			
 
				+            }else if(that.typeValue == 4){
			
 
				+                let curUrl = "http://121.43.55.7:65456/shzx/tileset.json";
			
 
				+                that.inputAddress = curUrl;
			
 
				+            }else if(that.typeValue == 5){
			
 
				+                let curUrl = "http://121.43.55.7:10018/kdyjs/shop/recommend?type=1&size=20&banned=1,2,3";
			
 
				+                that.inputAddress = curUrl;
			
 
				+            }else if(that.typeValue == 6){
			
 
				+                that.inputAddress = "";
			
 
				+            }
			
 
				+        },
			
 
				+        parse(){
			
 
				+            let that = this;
			
 
				+            if( that.typeValue != 6 && that.inputAddress == ''){
			
 
				+                return ElMessage({
			
 
				+                    type: 'error',
			
 
				+                    message: `输入地址不能为空！请输入地址后进行解析`,
			
 
				+                })
			
 
				+            }
			
 
				+            console.log('[ eee ] >')
			
 
				+            //  typeValue:'1',
			
 
				+            // inputAddress:'',
			
 
				+            
			
 
				+            if(that.typeValue == 1){
			
 
				+                // let curUrl = that.inputAddress;
			
 
				+                let curUrl = 'http://121.43.55.7:8889/geoserver/kdyjs/wms';
			
 
				+                that.inputAddress = curUrl;
			
 
				+                let param = {url:curUrl,layers:'kdyjs:CourtyardFace'}
			
 
				+                that.addWMSLayer(param)
			
 
				+
			
 
				+            }else if(that.typeValue == 2){
			
 
				+                let type = "vec"; //cia  img  vec  cva
			
 
				+                let curUrl = "https://{s}.tianditu.gov.cn/"+type+"_w/wmts?tk=f74e6c0cc247c42af05f7053e0b5fb9b";
			
 
				+                that.inputAddress = curUrl;
			
 
				+                let param = {url:curUrl,layers:type}
			
 
				+                that.addWMTSLayer(param)
			
 
				+             
			
 
				+            }else if(that.typeValue == 3){
			
 
				+                // let curUrl = that.inputAddress;
			
 
				+                let curUrl = 'https://service-api.onemap.sh.gov.cn/data-service-manage-service/MapProxyApi/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBsaWNhdGlvbl9pZCI6NjEsImFwcGxpY2F0aW9uX25hbWUiOiLpnZLmtabkuozkuInnu7TmnI3liqHns7vnu58iLCJleHAiOjIwNDY2Nzg0MDN9.IKUMdjUX4U1jncIUNren-iotL7duXI90aLECMjpvUX8/shmap_normal_web/MapServer';
			
 
				+                that.inputAddress = curUrl;
			
 
				+                let param = {url:curUrl,layers:'arcgisLayer'}
			
 
				+                that.addARCGISLayer(param)
			
 
				+            }else if(that.typeValue == 4){
			
 
				+                // let curUrl = that.inputAddress;
			
 
				+                let curUrl = "http://121.43.55.7:65456/shzx/tileset.json";
			
 
				+                that.inputAddress = curUrl;
			
 
				+                let param = {url:curUrl}
			
 
				+                that.add3dtilesData(param);
			
 
				+            }else if(that.typeValue == 5){
			
 
				+                // let curUrl = that.inputAddress;
			
 
				+                let curUrl = "https://kdyjs-proxy.metamaker.cn/proxy_map/static/json/%E6%A5%BC%E5%AE%87%E6%95%B0%E6%8D%AE-20250820.geojson";
			
 
				+                that.inputAddress = curUrl;
			
 
				+                let param = {url:curUrl}
			
 
				+                that.getVectorData(param);
			
 
				+            }else if(that.typeValue == 6){
			
 
				+                //上传GeoJson文件解析数据并上图
			
 
				+                if(this.mapHandle){
			
 
				+                    toRaw(this.mapHandle).destroy();
			
 
				+                    this.mapHandle = null
			
 
				+                    that.nowPointInfo = null
			
 
				+                }
			
 
				+                that.closeWin()
			
 
				+                that.dwanMap()
			
 
				+                
			
 
				+            }
			
 
				+            
			
 
				+        }
			
 
				+    },
			
 
				+    beforeDestroy() {
			
 
				+        viewer = undefined
			
 
				+    }
			
 
				+};
			
 
				+</script>
			
 
				+<style lang="less" scoped>
			
 
				+
			
 
				+.container {
			
 
				+    width: 100%;
			
 
				+    padding: 0px;
			
 
				+    margin: 0 auto;
			
 
				+    overflow: hidden;
			
 
				+}
			
 
				+.infoDialog {
			
 
				+    position: absolute;
			
 
				+    top: 0px;
			
 
				+    left: 0px;
			
 
				+    max-width: 500px;
			
 
				+    height: 200px;
			
 
				+    // background: #01346f99;
			
 
				+    background: #ffffff;
			
 
				+    border-radius: 10px;
			
 
				+
			
 
				+    .close {
			
 
				+      font-size: 24px;
			
 
				+      position: absolute;
			
 
				+      top: 6px;
			
 
				+      right: 8px;
			
 
				+      line-height: 24px;
			
 
				+      width: 24px;
			
 
				+      height: 24px;
			
 
				+      cursor: pointer;
			
 
				+      // color: #ffffff;
			
 
				+      color: #000000;
			
 
				+    }
			
 
				+
			
 
				+    .content {
			
 
				+      height: 160px;
			
 
				+      // color: #ffffff;
			
 
				+      color: #000000;
			
 
				+      margin: 30px 0px 10px 20px;
			
 
				+      overflow: auto;
			
 
				+      .item {
			
 
				+        line-height: 30px;
			
 
				+        margin-right: 20px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+</style>
			
--- a/src/views/yygl/appCenter.vue
+++ b/src/views/yygl/appCenter.vue
@@ -0,0 +1,116 @@
 
				+<template>
			
 
				+  <div class="app-center">
			
 
				+    <div class="container">
			
 
				+        <!-- 左侧导航栏 -->
			
 
				+        <div class="sidebar">
			
 
				+        <div class="sidebar-menu">
			
 
				+            <div class="menu-item" :class="{'active': menuValue === 1}" @click="handleMenuClick(1)">
			
 
				+            <el-icon><Menu /></el-icon>
			
 
				+            <span>应用概览</span>
			
 
				+            </div>
			
 
				+            <div class="menu-item" :class="{'active': menuValue === 2}" @click="handleMenuClick(2)">
			
 
				+            <el-icon><Grid /></el-icon>
			
 
				+            <span>应用管理</span>
			
 
				+            </div>
			
 
				+            <div class="menu-item" :class="{'active': menuValue === 3}" @click="handleMenuClick(3)">
			
 
				+            <el-icon><Monitor /></el-icon>
			
 
				+            <span>应用监测</span>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        </div>
			
 
				+
			
 
				+        <!-- 右侧主内容区 -->
			
 
				+        <div class="main-content">
			
 
				+            <AppOverview v-if="menuValue === 1" />
			
 
				+            <AppManagement v-if="menuValue === 2" />
			
 
				+            <AppMonitoring v-if="menuValue === 3" />
			
 
				+        </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import AppOverview from "@/views/yygl/overview/index.vue";
			
 
				+import AppManagement from "@/views/yygl/manage/index.vue";
			
 
				+import AppMonitoring from "@/views/yygl/monitor/index.vue";
			
 
				+export default {
			
 
				+  name: "AppCenter",
			
 
				+  components: {
			
 
				+    AppOverview,
			
 
				+    AppManagement,
			
 
				+    AppMonitoring,
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+        menuValue:1
			
 
				+    }
			
 
				+  },
			
 
				+  methods: {
			
 
				+    handleMenuClick(value) {
			
 
				+      this.menuValue = value;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.app-center {
			
 
				+  width: 100%;
			
 
				+//   min-height: 100vh;
			
 
				+  height: calc(100vh - 120px);
			
 
				+  background-color: #08224a;
			
 
				+  color: #ffffff;
			
 
				+  overflow-x: hidden;
			
 
				+}
			
 
				+.container {
			
 
				+  display: flex;
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  background-color: #08224a;
			
 
				+  color: #ffffff;
			
 
				+}
			
 
				+
			
 
				+/* 左侧导航栏样式 */
			
 
				+.sidebar {
			
 
				+  width: 200px;
			
 
				+  background-color: #0a2a5a;
			
 
				+  border-right: 1px solid rgba(255, 255, 255, 0.1);
			
 
				+  
			
 
				+  .sidebar-menu {
			
 
				+    padding: 20px 0;
			
 
				+    
			
 
				+    .menu-item {
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      padding: 15px 20px;
			
 
				+      cursor: pointer;
			
 
				+      transition: all 0.3s ease;
			
 
				+      color: rgba(255, 255, 255, 0.8);
			
 
				+      
			
 
				+      i {
			
 
				+        margin-right: 12px;
			
 
				+        font-size: 18px;
			
 
				+      }
			
 
				+      
			
 
				+      &:hover {
			
 
				+        background-color: rgba(24, 144, 255, 0.2);
			
 
				+        color: #ffffff;
			
 
				+      }
			
 
				+      
			
 
				+      &.active {
			
 
				+        background-color: rgba(24, 144, 255, 0.3);
			
 
				+        color: #ffffff;
			
 
				+        border-right: 3px solid #1890ff;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+/* 右侧主内容区 */
			
 
				+.main-content {
			
 
				+  flex: 1;
			
 
				+  padding: 20px 30px;
			
 
				+  overflow: auto;
			
 
				+}
			
 
				+
			
 
				+</style>
			
--- a/src/views/yygl/index.vue
+++ b/src/views/yygl/index.vue
@@ -0,0 +1,292 @@
 
				+<template>
			
 
				+  <div class="application-center">
			
 
				+    <!-- 顶部横幅区域 -->
			
 
				+    <div class="banner">
			
 
				+      <div class="banner-content">
			
 
				+        <h1 class="banner-title">应用中心</h1>
			
 
				+        <p class="banner-description">
			
 
				+          收集、管理区级应用的访问地址、使用单位、使用情况等。
			
 
				+          区委办局、街镇、居村应基于区级节点开展区级时空应用建设。
			
 
				+        </p>
			
 
				+        <el-button type="primary" class="enter-button" @click="handleEnterClick">点击进入</el-button>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+
			
 
				+    <!-- 示范应用区域 -->
			
 
				+    <div class="demo-applications">
			
 
				+      <div class="section-title">
			
 
				+        <h2>示范应用</h2>
			
 
				+        <div class="title-line"></div>
			
 
				+      </div>
			
 
				+
			
 
				+      <div class="applications-grid">
			
 
				+        <!-- 应用卡片1 -->
			
 
				+        <div class="application-card">
			
 
				+          <div class="card-image">
			
 
				+            <img src="~@/assets/images/common/app-bg-1.png" alt="青浦区环境自动监测信息化平台" />
			
 
				+          </div>
			
 
				+          <h3 class="card-title">青浦区环境自动监测信息化平台</h3>
			
 
				+          <div class="card-info">
			
 
				+            <p><strong>访问类型：</strong>公开</p>
			
 
				+            <p><strong>建设单位：</strong>青浦区环境局</p>
			
 
				+            <p><strong>建设时间：</strong>2024.10.25</p>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+
			
 
				+        <!-- 应用卡片2 -->
			
 
				+        <div class="application-card">
			
 
				+          <div class="card-image">
			
 
				+            <img src="~@/assets/images/common/app-bg-2.png" alt="青浦区燃气行业监管平台" />
			
 
				+          </div>
			
 
				+          <h3 class="card-title">青浦区燃气行业监管平台</h3>
			
 
				+          <div class="card-info">
			
 
				+            <p><strong>访问类型：</strong>公开</p>
			
 
				+            <p><strong>建设单位：</strong>青浦区环境局</p>
			
 
				+            <p><strong>建设时间：</strong>2024.10.25</p>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+
			
 
				+      </div>
			
 
				+       <div class="applications-grid">
			
 
				+        <!-- 应用卡片3 -->
			
 
				+            <div class="application-card">
			
 
				+            <div class="card-image">
			
 
				+                <img src="~@/assets/images/common/app-bg-3.png" alt="青浦区环境自动监测信息化平台" />
			
 
				+            </div>
			
 
				+            <h3 class="card-title">青浦区环境自动监测信息化平台</h3>
			
 
				+            <div class="card-info">
			
 
				+                <p><strong>访问类型：</strong>公开</p>
			
 
				+                <p><strong>建设单位：</strong>青浦区环境局</p>
			
 
				+                <p><strong>建设时间：</strong>2024.10.25</p>
			
 
				+            </div>
			
 
				+            </div>
			
 
				+
			
 
				+            <!-- 应用卡片4 -->
			
 
				+            <div class="application-card">
			
 
				+            <div class="card-image">
			
 
				+                <img src="~@/assets/images/common/app-bg-4.png" alt="青浦区消防救援支队一网统管平台" />
			
 
				+            </div>
			
 
				+            <h3 class="card-title">青浦区消防救援支队一网统管平台</h3>
			
 
				+            <div class="card-info">
			
 
				+                <p><strong>访问类型：</strong>公开</p>
			
 
				+                <p><strong>建设单位：</strong>青浦区环境局</p>
			
 
				+                <p><strong>建设时间：</strong>2024.10.25</p>
			
 
				+            </div>
			
 
				+            </div>
			
 
				+       </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: "ApplicationCenter",
			
 
				+  data() {
			
 
				+    return {}
			
 
				+  },
			
 
				+  methods: {
			
 
				+    handleEnterClick() {
			
 
				+      this.$router.push('appCenter');
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.application-center {
			
 
				+  width: 100%;
			
 
				+  min-height: 100vh;
			
 
				+  background-color: #08224a;
			
 
				+  color: #ffffff;
			
 
				+  overflow-x: hidden;
			
 
				+}
			
 
				+
			
 
				+/* 顶部横幅样式 */
			
 
				+.banner {
			
 
				+  width: 100%;
			
 
				+  height: 786px;
			
 
				+  background: url(~@/assets/images/common/u720.png) no-repeat center center;
			
 
				+  background-size: cover;
			
 
				+  display: flex;
			
 
				+  justify-content: center;
			
 
				+  align-items: center;
			
 
				+  position: relative;
			
 
				+  overflow: hidden;
			
 
				+
			
 
				+  &::before {
			
 
				+    content: '';
			
 
				+    position: absolute;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    background: rgba(8, 34, 74, 0.7);
			
 
				+    z-index: 1;
			
 
				+  }
			
 
				+
			
 
				+  .banner-content {
			
 
				+    position: relative;
			
 
				+    z-index: 2;
			
 
				+    text-align: center;
			
 
				+    max-width: 800px;
			
 
				+    padding: 0 20px;
			
 
				+  }
			
 
				+
			
 
				+  .banner-title {
			
 
				+    font-size: 64px;
			
 
				+    font-weight: bold;
			
 
				+    letter-spacing: 0.5rem;
			
 
				+    margin-bottom: 20px;
			
 
				+    color: #ffffff;
			
 
				+    text-align: left;
			
 
				+    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
			
 
				+  }
			
 
				+
			
 
				+  .banner-description {
			
 
				+    font-size: 22px;
			
 
				+    line-height: 1.8;
			
 
				+    margin-bottom: 40px;
			
 
				+    margin-top: 70px;
			
 
				+    text-align: left;
			
 
				+    color: rgba(255, 255, 255, 0.9);
			
 
				+  }
			
 
				+
			
 
				+  .enter-button {
			
 
				+    padding: 12px 36px;
			
 
				+    font-size: 18px;
			
 
				+    border-radius: 10px;
			
 
				+    background-color: #1890ff;
			
 
				+    border: none;
			
 
				+    transition: all 0.3s ease;
			
 
				+
			
 
				+    &:hover {
			
 
				+      background-color: #40a9ff;
			
 
				+      transform: translateY(-2px);
			
 
				+      box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+/* 示范应用区域样式 */
			
 
				+.demo-applications {
			
 
				+  padding: 60px 20px;
			
 
				+//   max-width: 1400px;
			
 
				+  width: 80%;
			
 
				+  margin: 0 auto;
			
 
				+
			
 
				+  .section-title {
			
 
				+    text-align: center;
			
 
				+    margin-bottom: 60px;
			
 
				+
			
 
				+    h2 {
			
 
				+      font-size: 36px;
			
 
				+      font-weight: bold;
			
 
				+      margin-bottom: 15px;
			
 
				+      color: #ffffff;
			
 
				+    }
			
 
				+
			
 
				+    .title-line {
			
 
				+      width: 80px;
			
 
				+      height: 3px;
			
 
				+      background-color: #1890ff;
			
 
				+      margin: 0 auto;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .applications-grid {
			
 
				+    display: grid;
			
 
				+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			
 
				+    gap: 30px;
			
 
				+    margin: 60px 0 60px 0px;
			
 
				+    .application-card {
			
 
				+      background: rgba(24, 144, 255, 0.1);
			
 
				+      border: 1px solid rgba(24, 144, 255, 0.3);
			
 
				+      border-radius: 8px;
			
 
				+      overflow: hidden;
			
 
				+      transition: all 0.3s ease;
			
 
				+
			
 
				+      &:hover {
			
 
				+        transform: translateY(-5px);
			
 
				+        box-shadow: 0 10px 30px rgba(24, 144, 255, 0.3);
			
 
				+        border-color: rgba(24, 144, 255, 0.6);
			
 
				+      }
			
 
				+
			
 
				+      .card-image {
			
 
				+        width: 100%;
			
 
				+        height: 200px;
			
 
				+        overflow: hidden;
			
 
				+
			
 
				+        img {
			
 
				+          width: 100%;
			
 
				+          height: 100%;
			
 
				+          object-fit: cover;
			
 
				+          transition: transform 0.3s ease;
			
 
				+        }
			
 
				+
			
 
				+        &:hover img {
			
 
				+          transform: scale(1.05);
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .card-title {
			
 
				+        font-size: 18px;
			
 
				+        font-weight: bold;
			
 
				+        padding: 20px 20px 15px;
			
 
				+        margin: 0;
			
 
				+        color: #ffffff;
			
 
				+        border-bottom: 1px solid rgba(24, 144, 255, 0.3);
			
 
				+      }
			
 
				+
			
 
				+      .card-info {
			
 
				+        padding: 15px 20px 20px;
			
 
				+        font-size: 14px;
			
 
				+        // color: rgba(255, 255, 255, 0.8);
			
 
				+        color: #ffffff;
			
 
				+
			
 
				+        p {
			
 
				+          margin: 8px 0;
			
 
				+          line-height: 1.6;
			
 
				+
			
 
				+          strong {
			
 
				+            // color: rgba(24, 144, 255, 0.9);
			
 
				+            color: #ffffff;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+/* 响应式设计 */
			
 
				+@media (max-width: 768px) {
			
 
				+  .banner {
			
 
				+    height: 400px;
			
 
				+
			
 
				+    .banner-title {
			
 
				+      font-size: 36px;
			
 
				+    }
			
 
				+
			
 
				+    .banner-description {
			
 
				+      font-size: 14px;
			
 
				+    }
			
 
				+
			
 
				+    .enter-button {
			
 
				+      padding: 10px 28px;
			
 
				+      font-size: 16px;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .demo-applications {
			
 
				+    padding: 40px 15px;
			
 
				+
			
 
				+    .section-title h2 {
			
 
				+      font-size: 28px;
			
 
				+    }
			
 
				+
			
 
				+    .applications-grid {
			
 
				+      grid-template-columns: 1fr;
			
 
				+      gap: 20px;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/views/yygl/manage/index.vue
+++ b/src/views/yygl/manage/index.vue
@@ -0,0 +1,500 @@
 
				+<template>
			
 
				+  <div class="application-management">
			
 
				+    <!-- 右侧主内容区 -->
			
 
				+    <div class="main-content">
			
 
				+      <!-- 过滤条件区域 -->
			
 
				+      <div class="filter-section">
			
 
				+        <!-- 应用范围过滤 -->
			
 
				+        <div class="filter-group">
			
 
				+          <span class="filter-title">应用范围：</span>
			
 
				+          <el-radio-group v-model="scopeFilter" size="small">
			
 
				+            <el-radio-button label="all">全部</el-radio-button>
			
 
				+            <el-radio-button label="district">区级</el-radio-button>
			
 
				+            <el-radio-button label="street">街道</el-radio-button>
			
 
				+            <el-radio-button label="community">社区</el-radio-button>
			
 
				+          </el-radio-group>
			
 
				+        </div>
			
 
				+
			
 
				+        <!-- 应用状态过滤 -->
			
 
				+        <div class="filter-group">
			
 
				+          <span class="filter-title">应用状态：</span>
			
 
				+          <el-radio-group v-model="statusFilter" size="small">
			
 
				+            <el-radio-button label="all">全部</el-radio-button>
			
 
				+            <el-radio-button label="online">在等</el-radio-button>
			
 
				+            <el-radio-button label="offline">在建</el-radio-button>
			
 
				+            <el-radio-button label="suspended">在维</el-radio-button>
			
 
				+            <el-radio-button label="expired">停用</el-radio-button>
			
 
				+          </el-radio-group>
			
 
				+        </div>
			
 
				+
			
 
				+        <!-- 应用标签过滤 -->
			
 
				+        <div class="filter-group">
			
 
				+          <span class="filter-title">应用标签：</span>
			
 
				+          <el-radio-group v-model="tagFilter" size="small">
			
 
				+            <el-radio-button label="all">全部</el-radio-button>
			
 
				+            <el-radio-button label="special">特色应用</el-radio-button>
			
 
				+            <el-radio-button label="code">代码平台</el-radio-button>
			
 
				+            <el-radio-button label="government">仅供演示</el-radio-button>
			
 
				+            <el-radio-button label="demo">示范应用</el-radio-button>
			
 
				+            <el-radio-button label="water">水务</el-radio-button>
			
 
				+            <el-radio-button label="test">测试</el-radio-button>
			
 
				+          </el-radio-group>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+
			
 
				+      <!-- 搜索栏区域 -->
			
 
				+      <div class="search-section">
			
 
				+        <el-input 
			
 
				+          placeholder="请输入应用名称模块相关关键字" 
			
 
				+          v-model="searchKeyword" 
			
 
				+          class="search-input" 
			
 
				+          clearable
			
 
				+        >
			
 
				+          <template #prepend><el-icon><search /></el-icon></template>
			
 
				+        </el-input>
			
 
				+        <el-button type="primary" class="search-btn">搜索</el-button>
			
 
				+        <el-button class="reset-btn">重置</el-button>
			
 
				+        <el-button type="success" class="add-btn">+ 应用介入</el-button>
			
 
				+      </div>
			
 
				+
			
 
				+      <!-- 应用列表区域 -->
			
 
				+      <div class="applications-section">
			
 
				+        <div class="section-header">
			
 
				+          <span class="total-count">共检索43个应用</span>
			
 
				+          <div class="sort-control">
			
 
				+            <span>排序：</span>
			
 
				+            <el-select v-model="sortBy" size="small" style="width: 120px;">
			
 
				+              <el-option label="上架时间" value="publishTime"></el-option>
			
 
				+              <el-option label="下架时间" value="romveTime"></el-option>
			
 
				+            </el-select>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+
			
 
				+        <!-- 应用列表 -->
			
 
				+        <div class="applications-list">
			
 
				+          <div class="application-item" v-for="(app, index) in applications" :key="index">
			
 
				+            <div class="app-info">
			
 
				+              <div class="app-logo">
			
 
				+                <img :src="app.logo" :alt="app.name" />
			
 
				+              </div>
			
 
				+              <div class="app-details">
			
 
				+                <div class="app-header">
			
 
				+                  <h3 class="app-name">{{ app.name }}</h3>
			
 
				+                  <span class="app-version">{{ app.version }}</span>
			
 
				+                </div>
			
 
				+                <div class="app-tags">
			
 
				+                  <el-tag size="small" type="primary" v-if="app.isPublic">区属应用</el-tag>
			
 
				+                  <el-tag size="small" v-if="app.tag">{{ app.tag }}</el-tag>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+
			
 
				+            <div class="app-metrics">
			
 
				+              <div class="metric-item">
			
 
				+                <span class="metric-label">应用范围</span>
			
 
				+                <span class="metric-value">{{ app.buff }}</span>
			
 
				+              </div>
			
 
				+              <div class="metric-item">
			
 
				+                <span class="metric-label">状态</span>
			
 
				+                <span class="metric-value" :class="`status-${app.status}`">{{ app.statusText }}</span>
			
 
				+              </div>
			
 
				+              <div class="metric-item">
			
 
				+                <span class="metric-label">使用单位</span>
			
 
				+                <span class="metric-value">{{ app.usingUnit }}</span>
			
 
				+              </div>
			
 
				+              <div class="metric-item">
			
 
				+                <span class="metric-label">访问量</span>
			
 
				+                <span class="metric-value">{{ app.visitCount }}</span>
			
 
				+              </div>
			
 
				+              <div class="metric-item">
			
 
				+                <span class="metric-label">上架时间</span>
			
 
				+                <span class="metric-value">{{ app.createDate }}</span>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+
			
 
				+            <div class="app-actions">
			
 
				+              <!-- <span class="app-date">{{ app.createDate }}</span> -->
			
 
				+              <el-button type="primary" size="small" class="detail-btn">查看详情</el-button>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+
			
 
				+        <!-- 分页控件 -->
			
 
				+        <div class="pagination-section">
			
 
				+          <span class="total-text">共43个应用</span>
			
 
				+          <el-pagination
			
 
				+            layout="prev, pager, next, jumper, total"
			
 
				+            :total="43"
			
 
				+            :current-page="currentPage"
			
 
				+            :page-size="10"
			
 
				+            @current-change="handleCurrentChange"
			
 
				+          >
			
 
				+          </el-pagination>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: "ApplicationManagement",
			
 
				+  data() {
			
 
				+    return {
			
 
				+      // 过滤条件
			
 
				+      scopeFilter: 'all',
			
 
				+      statusFilter: 'all',
			
 
				+      tagFilter: 'all',
			
 
				+      searchKeyword: '',
			
 
				+      
			
 
				+      // 排序条件
			
 
				+      sortBy: 'publishTime',
			
 
				+      
			
 
				+      // 分页信息
			
 
				+      currentPage: 1,
			
 
				+      
			
 
				+      // 应用列表数据
			
 
				+      applications: [
			
 
				+        {
			
 
				+          logo: require('@/assets/images/common/app-bg-1.png'),
			
 
				+          name: '水系统综合管理',
			
 
				+          version: 'v1.0',
			
 
				+          isPublic: true,
			
 
				+          tag: '水务',
			
 
				+          buff: '市级',
			
 
				+          status: 'offline',
			
 
				+          statusText: '在维',
			
 
				+          usingUnit: '暂无',
			
 
				+          visitCount: 64,
			
 
				+          createDate: '2025-10-29 16:10:17'
			
 
				+        },
			
 
				+        {
			
 
				+          logo: require('@/assets/images/common/app-bg-2.png'),
			
 
				+          name: '虹口区历史脉管理系统开发',
			
 
				+          version: 'v1.0',
			
 
				+          isPublic: true,
			
 
				+          tag: '',
			
 
				+          buff: '区级',
			
 
				+          status: 'online',
			
 
				+          statusText: '在线',
			
 
				+          usingUnit: '虹口区文旅局',
			
 
				+          visitCount: 8,
			
 
				+          createDate: '2025-09-15 18:02:32'
			
 
				+        },
			
 
				+        {
			
 
				+          logo: require('@/assets/images/common/app-bg-3.png'),
			
 
				+          name: '虹口区智慧环卫监管平台',
			
 
				+          version: 'v1.0',
			
 
				+          isPublic: true,
			
 
				+          tag: '',
			
 
				+          buff: '街道',
			
 
				+          status: 'offline',
			
 
				+          statusText: '在维',
			
 
				+          usingUnit: '虹口区城管局',
			
 
				+          visitCount: 14,
			
 
				+          createDate: '2025-09-15 18:01:57'
			
 
				+        },
			
 
				+        {
			
 
				+          logo: require('@/assets/images/common/app-bg-4.png'),
			
 
				+          name: '上海市虹口区一网统管平台',
			
 
				+          version: 'v1.0',
			
 
				+          isPublic: true,
			
 
				+          tag: '',
			
 
				+          buff: '街道',
			
 
				+          status: 'online',
			
 
				+          statusText: '在线',
			
 
				+          usingUnit: '虹口区政府办',
			
 
				+          visitCount: 15,
			
 
				+          createDate: '2025-09-15 18:01:09'
			
 
				+        },
			
 
				+        {
			
 
				+          logo: require('@/assets/images/common/u661.png'),
			
 
				+          name: '上海公共交通服务保障',
			
 
				+          version: 'v1.0',
			
 
				+          isPublic: true,
			
 
				+          tag: '',
			
 
				+          buff: '社区',
			
 
				+          status: 'offline',
			
 
				+          statusText: '在维',
			
 
				+          usingUnit: '虹口区体育局',
			
 
				+          visitCount: 13,
			
 
				+          createDate: '2025-09-15 18:00:22'
			
 
				+        }
			
 
				+      ]
			
 
				+    }
			
 
				+  },
			
 
				+  methods: {
			
 
				+    // 处理分页变化
			
 
				+    handleCurrentChange(page) {
			
 
				+      this.currentPage = page;
			
 
				+      // 这里可以添加分页数据加载逻辑
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.application-management {
			
 
				+  width: 100%;
			
 
				+  background-color: #08224a;
			
 
				+  color: #ffffff;
			
 
				+}
			
 
				+
			
 
				+/* 右侧主内容区 */
			
 
				+.main-content {
			
 
				+  padding: 20px 30px;
			
 
				+  overflow-y: auto;
			
 
				+}
			
 
				+
			
 
				+/* 过滤条件区域 */
			
 
				+.filter-section {
			
 
				+  display: flex;
			
 
				+  flex-wrap: wrap;
			
 
				+  gap: 20px;
			
 
				+  margin-bottom: 20px;
			
 
				+  padding-bottom: 15px;
			
 
				+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
			
 
				+}
			
 
				+
			
 
				+.filter-group {
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  gap: 10px;
			
 
				+}
			
 
				+
			
 
				+.filter-title {
			
 
				+  font-size: 14px;
			
 
				+  color: rgba(255, 255, 255, 0.8);
			
 
				+}
			
 
				+
			
 
				+/* 搜索栏区域 */
			
 
				+.search-section {
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  gap: 10px;
			
 
				+  margin-bottom: 25px;
			
 
				+}
			
 
				+
			
 
				+.search-input {
			
 
				+  // width: 400px;
			
 
				+  margin-right: 10px;
			
 
				+}
			
 
				+
			
 
				+.search-btn, .reset-btn, .add-btn {
			
 
				+  padding: 8px 16px;
			
 
				+  font-size: 14px;
			
 
				+}
			
 
				+
			
 
				+/* 应用列表区域 */
			
 
				+.applications-section {
			
 
				+  background-color: rgba(255, 255, 255, 0.05);
			
 
				+  border-radius: 8px;
			
 
				+  padding: 20px;
			
 
				+}
			
 
				+
			
 
				+.section-header {
			
 
				+  display: flex;
			
 
				+  justify-content: space-between;
			
 
				+  align-items: center;
			
 
				+  margin-bottom: 20px;
			
 
				+}
			
 
				+
			
 
				+.total-count {
			
 
				+  font-size: 14px;
			
 
				+  color: rgba(255, 255, 255, 0.8);
			
 
				+}
			
 
				+
			
 
				+.sort-control {
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  gap: 5px;
			
 
				+  font-size: 14px;
			
 
				+  color: rgba(255, 255, 255, 0.8);
			
 
				+}
			
 
				+
			
 
				+/* 应用列表 */
			
 
				+.applications-list {
			
 
				+  margin-bottom: 20px;
			
 
				+}
			
 
				+
			
 
				+.application-item {
			
 
				+  display: flex;
			
 
				+  justify-content: space-between;
			
 
				+  align-items: center;
			
 
				+  padding: 15px;
			
 
				+  margin-bottom: 10px;
			
 
				+  background-color: rgba(255, 255, 255, 0.05);
			
 
				+  border: 1px solid rgba(255, 255, 255, 0.1);
			
 
				+  border-radius: 6px;
			
 
				+  transition: all 0.3s ease;
			
 
				+  
			
 
				+  &:hover {
			
 
				+    border-color: rgba(24, 144, 255, 0.4);
			
 
				+    background-color: rgba(24, 144, 255, 0.05);
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.app-info {
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  // flex: 1;
			
 
				+  width: 500px;
			
 
				+  gap: 15px;
			
 
				+}
			
 
				+
			
 
				+.app-logo {
			
 
				+  width: 60px;
			
 
				+  height: 60px;
			
 
				+  border-radius: 6px;
			
 
				+  overflow: hidden;
			
 
				+  
			
 
				+  img {
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    object-fit: cover;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.app-details {
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+  gap: 5px;
			
 
				+}
			
 
				+
			
 
				+.app-header {
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  gap: 10px;
			
 
				+}
			
 
				+
			
 
				+.app-name {
			
 
				+  font-size: 16px;
			
 
				+  font-weight: bold;
			
 
				+  margin: 0;
			
 
				+  color: #ffffff;
			
 
				+}
			
 
				+
			
 
				+.app-version {
			
 
				+  font-size: 12px;
			
 
				+  color: rgba(255, 255, 255, 0.6);
			
 
				+  background-color: rgba(255, 255, 255, 0.1);
			
 
				+  padding: 2px 6px;
			
 
				+  border-radius: 4px;
			
 
				+}
			
 
				+
			
 
				+.app-tags {
			
 
				+  display: flex;
			
 
				+  gap: 5px;
			
 
				+}
			
 
				+
			
 
				+/* 应用指标 */
			
 
				+.app-metrics {
			
 
				+  display: flex;
			
 
				+  gap: 40px;
			
 
				+  flex: 1;
			
 
				+  justify-content: space-around;
			
 
				+}
			
 
				+
			
 
				+.metric-item {
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+  align-items: center;
			
 
				+  gap: 3px;
			
 
				+}
			
 
				+
			
 
				+.metric-label {
			
 
				+  font-size: 12px;
			
 
				+  color: rgba(255, 255, 255, 0.6);
			
 
				+}
			
 
				+
			
 
				+.metric-value {
			
 
				+  font-size: 14px;
			
 
				+  font-weight: bold;
			
 
				+  color: #ffffff;
			
 
				+}
			
 
				+
			
 
				+.status-online {
			
 
				+  color: #67c23a;
			
 
				+}
			
 
				+
			
 
				+.status-offline {
			
 
				+  color: #e6a23c;
			
 
				+}
			
 
				+
			
 
				+.status-suspended {
			
 
				+  color: #909399;
			
 
				+}
			
 
				+
			
 
				+.status-expired {
			
 
				+  color: #f56c6c;
			
 
				+}
			
 
				+
			
 
				+/* 应用操作 */
			
 
				+.app-actions {
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  gap: 20px;
			
 
				+}
			
 
				+
			
 
				+.app-date {
			
 
				+  font-size: 12px;
			
 
				+  color: rgba(255, 255, 255, 0.6);
			
 
				+}
			
 
				+
			
 
				+.detail-btn {
			
 
				+  padding: 4px 12px;
			
 
				+  font-size: 12px;
			
 
				+}
			
 
				+
			
 
				+/* 分页控件 */
			
 
				+.pagination-section {
			
 
				+  display: flex;
			
 
				+  justify-content: space-between;
			
 
				+  align-items: center;
			
 
				+  padding-top: 15px;
			
 
				+  border-top: 1px solid rgba(255, 255, 255, 0.1);
			
 
				+}
			
 
				+
			
 
				+.total-text {
			
 
				+  font-size: 14px;
			
 
				+  color: rgba(255, 255, 255, 0.8);
			
 
				+}
			
 
				+
			
 
				+/* 响应式设计 */
			
 
				+@media (max-width: 1200px) {
			
 
				+  .app-metrics {
			
 
				+    gap: 20px;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@media (max-width: 992px) {
			
 
				+  .main-content {
			
 
				+    padding: 15px 20px;
			
 
				+  }
			
 
				+  
			
 
				+  .filter-section {
			
 
				+    flex-direction: column;
			
 
				+    align-items: flex-start;
			
 
				+  }
			
 
				+  
			
 
				+  .search-input {
			
 
				+    width: 300px;
			
 
				+  }
			
 
				+  
			
 
				+  .application-item {
			
 
				+    flex-direction: column;
			
 
				+    align-items: flex-start;
			
 
				+    gap: 15px;
			
 
				+  }
			
 
				+  
			
 
				+  .app-metrics {
			
 
				+    width: 100%;
			
 
				+    justify-content: space-around;
			
 
				+  }
			
 
				+  
			
 
				+  .app-actions {
			
 
				+    width: 100%;
			
 
				+    justify-content: space-between;
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/views/yygl/monitor/index.vue
+++ b/src/views/yygl/monitor/index.vue
@@ -0,0 +1,493 @@
 
				+<template>
			
 
				+  <div class="application-monitor">
			
 
				+    <!-- 右侧主内容区 -->
			
 
				+    <div class="main-content">
			
 
				+      <!-- 应用统计卡片 -->
			
 
				+      <div class="stats-cards">
			
 
				+        <div class="stat-card">
			
 
				+          <div class="stat-icon approved">
			
 
				+            <el-icon><CircleCheckFilled /></el-icon>
			
 
				+          </div>
			
 
				+          <div class="stat-content">
			
 
				+            <div class="stat-label">已审批应用</div>
			
 
				+            <div class="stat-number">490个</div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <div class="stat-card">
			
 
				+          <div class="stat-icon pending">
			
 
				+            <el-icon><Clock /></el-icon>
			
 
				+          </div>
			
 
				+          <div class="stat-content">
			
 
				+            <div class="stat-label">待上架应用</div>
			
 
				+            <div class="stat-number">168个</div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <div class="stat-card">
			
 
				+          <div class="stat-icon online">
			
 
				+            <el-icon><UploadFilled /></el-icon>
			
 
				+          </div>
			
 
				+          <div class="stat-content">
			
 
				+            <div class="stat-label">已上架应用</div>
			
 
				+            <div class="stat-number">43个</div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <div class="stat-card">
			
 
				+          <div class="stat-icon offline">
			
 
				+            <el-icon><DeleteFilled /></el-icon>
			
 
				+          </div>
			
 
				+          <div class="stat-content">
			
 
				+            <div class="stat-label">已下架应用</div>
			
 
				+            <div class="stat-number">20个</div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+
			
 
				+      <!-- 内容模块 -->
			
 
				+      <div class="content-modules">
			
 
				+        <!-- 应用状态分布 -->
			
 
				+        <div class="module">
			
 
				+          <div class="module-header">
			
 
				+            <h3 class="module-title">应用状态分布</h3>
			
 
				+          </div>
			
 
				+          <div class="module-content">
			
 
				+            <div ref="statusChart" class="chart-container"></div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+
			
 
				+        <!-- 快捷应用 -->
			
 
				+        <div class="module">
			
 
				+          <div class="module-header">
			
 
				+            <h3 class="module-title">快捷应用</h3>
			
 
				+            <a href="#" class="module-more">更多</a>
			
 
				+          </div>
			
 
				+          <div class="module-content">
			
 
				+            <div class="quick-app" v-for="(app, index) in quickApps" :key="index">
			
 
				+              <div class="app-item">
			
 
				+                <span class="app-icon" :style="{ backgroundColor: getAppColor(app.type) }"><el-icon><Promotion /></el-icon></span>
			
 
				+                <span class="app-name">{{ app.name }}</span>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+
			
 
				+        <!-- 应用上新 -->
			
 
				+        <div class="module">
			
 
				+          <div class="module-header">
			
 
				+            <h3 class="module-title">应用上新</h3>
			
 
				+            <a href="#" class="module-more">更多</a>
			
 
				+          </div>
			
 
				+          <div class="module-content">
			
 
				+            <div class="new-app" v-for="(app, index) in newApps" :key="index">
			
 
				+              <div class="app-info">
			
 
				+                <span class="app-name">{{ app.name }}</span>
			
 
				+                <span class="app-date">{{ app.date }}</span>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+
			
 
				+        <!-- 应用热度排行TOP5 -->
			
 
				+        <div class="module">
			
 
				+          <div class="module-header">
			
 
				+            <h3 class="module-title">应用热度排行TOP5</h3>
			
 
				+            <a href="#" class="module-more">更多</a>
			
 
				+          </div>
			
 
				+          <div class="module-content">
			
 
				+            <div class="hot-app" v-for="(app, index) in hotApps" :key="index">
			
 
				+              <div class="app-rank">
			
 
				+                <span class="rank-number">{{ index + 1 }}</span>
			
 
				+                <span class="app-name">{{ app.name }}</span>
			
 
				+              </div>
			
 
				+              <div class="app-stats">
			
 
				+                <!-- <div class="stat-bar" :style="{ width: app.percentage + '%' }"></div> -->
			
 
				+                 <div style="width: 100%;">
			
 
				+                    <el-progress :percentage="app.percentage" />
			
 
				+                 </div>
			
 
				+                <span class="stat-count">{{ app.count }}次</span>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import * as echarts from 'echarts'
			
 
				+export default {
			
 
				+  name: "ApplicationMonitor",
			
 
				+  data() {
			
 
				+    return {
			
 
				+      statusChart: null,
			
 
				+      // 快捷应用数据
			
 
				+      quickApps: [
			
 
				+        { name: '农产品安全管控示范应用场', type: 'green' },
			
 
				+        { name: '崇明区乡村振兴一张图', type: 'yellow' },
			
 
				+        { name: '数字孪生黄浦', type: 'blue' }
			
 
				+      ],
			
 
				+      
			
 
				+      // 应用上新数据
			
 
				+      newApps: [
			
 
				+        { name: '水系综合管理系统', date: '2023-10-29' },
			
 
				+        { name: '虹口历史文脉管理系统开发', date: '2023-09-15' },
			
 
				+        { name: '虹口智慧环卫监管平台', date: '2023-09-15' },
			
 
				+        { name: '上海虹口区一网统管平台', date: '2023-09-15' },
			
 
				+        { name: '上海公共交通服务保障', date: '2023-09-15' }
			
 
				+      ],
			
 
				+      
			
 
				+      // 应用热度排行数据
			
 
				+      hotApps: [
			
 
				+        { name: '崇明区乡村振兴一张图', count: 128, percentage: 100 },
			
 
				+        { name: '数字孪生浦江', count: 65, percentage: 50.8 },
			
 
				+        { name: '上海"一张图"大数据', count: 62, percentage: 48.4 },
			
 
				+        { name: '黄浦智慧城管系统', count: 45, percentage: 35.2 },
			
 
				+        { name: '上海生态环境管理', count: 38, percentage: 29.7 }
			
 
				+      ]
			
 
				+    }
			
 
				+  },
			
 
				+   mounted() {
			
 
				+    this.initCharts()
			
 
				+    window.addEventListener('resize', this.handleResize)
			
 
				+  },
			
 
				+  beforeUnmount() {
			
 
				+    window.removeEventListener('resize', this.handleResize)
			
 
				+    this.destroyCharts()
			
 
				+  },
			
 
				+  methods: {
			
 
				+    initCharts() {
			
 
				+      this.initStatusChart()
			
 
				+    },
			
 
				+    handleResize() {
			
 
				+      if (this.statusChart) this.statusChart.resize()
			
 
				+    },
			
 
				+    destroyCharts() {
			
 
				+      if (this.statusChart) {
			
 
				+        this.statusChart.dispose()
			
 
				+        this.statusChart = null
			
 
				+      }
			
 
				+    },
			
 
				+    initStatusChart() {
			
 
				+      this.statusChart = echarts.init(this.$refs.statusChart)
			
 
				+      const option = {
			
 
				+        tooltip: {
			
 
				+          trigger: 'item',
			
 
				+          backgroundColor: 'rgba(0, 25, 50, 0.8)',
			
 
				+          borderColor: '#1E90FF',
			
 
				+          textStyle: {
			
 
				+            color: '#fff'
			
 
				+          }
			
 
				+        },
			
 
				+        legend: {
			
 
				+          orient: 'horizontal',
			
 
				+          bottom: 0,
			
 
				+          textStyle: {
			
 
				+            color: '#a3b6c7'
			
 
				+          }
			
 
				+        },
			
 
				+        series: [
			
 
				+          {
			
 
				+            name: '应用状态分布',
			
 
				+            type: 'pie',
			
 
				+            radius: ['40%', '70%'],
			
 
				+            avoidLabelOverlap: false,
			
 
				+            itemStyle: {
			
 
				+              borderRadius: 10,
			
 
				+              borderColor: '#0A192F',
			
 
				+              borderWidth: 2
			
 
				+            },
			
 
				+            label: {
			
 
				+              show: false,
			
 
				+              position: 'center'
			
 
				+            },
			
 
				+            emphasis: {
			
 
				+              label: {
			
 
				+                show: true,
			
 
				+                fontSize: 20,
			
 
				+                fontWeight: 'bold',
			
 
				+                color: '#fff'
			
 
				+              }
			
 
				+            },
			
 
				+            labelLine: {
			
 
				+              show: false
			
 
				+            },
			
 
				+            data: [
			
 
				+              { value: 400, name: '在维', itemStyle: { color: '#52C41A' } },
			
 
				+              { value: 300, name: '在筹', itemStyle: { color: '#FAAD14' } },
			
 
				+              { value: 200, name: '停用', itemStyle: { color: '#F5222D' } }
			
 
				+            ]
			
 
				+          }
			
 
				+        ]
			
 
				+      }
			
 
				+      this.statusChart.setOption(option)
			
 
				+    },
			
 
				+    // 获取应用图标的背景颜色
			
 
				+    getAppColor(type) {
			
 
				+      const colorMap = {
			
 
				+        green: 'rgba(103, 194, 58, 0.2)',
			
 
				+        yellow: 'rgba(230, 162, 60, 0.2)',
			
 
				+        blue: 'rgba(64, 158, 255, 0.2)'
			
 
				+      }
			
 
				+      return colorMap[type] || 'rgba(64, 158, 255, 0.2)'
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.application-monitor {
			
 
				+  width: 100%;
			
 
				+  background-color: #08224a;
			
 
				+  color: #ffffff;
			
 
				+}
			
 
				+
			
 
				+/* 右侧主内容区 */
			
 
				+.main-content {
			
 
				+  flex: 1;
			
 
				+  padding: 20px 30px;
			
 
				+  overflow-y: auto;
			
 
				+}
			
 
				+
			
 
				+/* 统计卡片 */
			
 
				+.stats-cards {
			
 
				+  display: flex;
			
 
				+  gap: 20px;
			
 
				+  margin-bottom: 20px;
			
 
				+  flex-wrap: wrap;
			
 
				+}
			
 
				+
			
 
				+.stat-card {
			
 
				+  flex: 1;
			
 
				+  min-width: 200px;
			
 
				+  height: 100px;
			
 
				+  background-color: rgba(255, 255, 255, 0.05);
			
 
				+  border-radius: 8px;
			
 
				+  padding: 20px;
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  gap: 15px;
			
 
				+  transition: all 0.3s ease;
			
 
				+  
			
 
				+  &:hover {
			
 
				+    background-color: rgba(255, 255, 255, 0.08);
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.stat-icon {
			
 
				+  width: 60px;
			
 
				+  height: 60px;
			
 
				+  border-radius: 50%;
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  justify-content: center;
			
 
				+  font-size: 24px;
			
 
				+  
			
 
				+  &.approved {
			
 
				+    background-color: rgba(64, 158, 255, 0.2);
			
 
				+    color: #409EFF;
			
 
				+  }
			
 
				+  
			
 
				+  &.pending {
			
 
				+    background-color: rgba(230, 162, 60, 0.2);
			
 
				+    color: #E6A23C;
			
 
				+  }
			
 
				+  
			
 
				+  &.online {
			
 
				+    background-color: rgba(103, 194, 58, 0.2);
			
 
				+    color: #67C23A;
			
 
				+  }
			
 
				+  
			
 
				+  &.offline {
			
 
				+    background-color: rgba(245, 108, 108, 0.2);
			
 
				+    color: #F56C6C;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.stat-content {
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+  gap: 5px;
			
 
				+}
			
 
				+
			
 
				+.stat-label {
			
 
				+  font-size: 14px;
			
 
				+  color: rgba(255, 255, 255, 0.6);
			
 
				+}
			
 
				+
			
 
				+.stat-number {
			
 
				+  font-size: 28px;
			
 
				+  font-weight: bold;
			
 
				+  color: #ffffff;
			
 
				+}
			
 
				+
			
 
				+/* 内容模块 */
			
 
				+.content-modules {
			
 
				+  display: grid;
			
 
				+  grid-template-columns: 1fr 1fr;
			
 
				+  grid-template-rows: 1fr 1fr;
			
 
				+  gap: 20px;
			
 
				+}
			
 
				+
			
 
				+/* 模块通用样式 */
			
 
				+.module {
			
 
				+  background-color: rgba(255, 255, 255, 0.05);
			
 
				+  border-radius: 8px;
			
 
				+  overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+.module-header {
			
 
				+  padding: 15px 20px;
			
 
				+  display: flex;
			
 
				+  justify-content: space-between;
			
 
				+  align-items: center;
			
 
				+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
			
 
				+}
			
 
				+
			
 
				+.module-title {
			
 
				+  font-size: 16px;
			
 
				+  font-weight: bold;
			
 
				+  margin: 0;
			
 
				+  color: #ffffff;
			
 
				+}
			
 
				+
			
 
				+.module-more {
			
 
				+  font-size: 12px;
			
 
				+  color: rgba(255, 255, 255, 0.6);
			
 
				+  text-decoration: none;
			
 
				+  
			
 
				+  &:hover {
			
 
				+    color: #409EFF;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.module-content {
			
 
				+  padding: 20px;
			
 
				+}
			
 
				+
			
 
				+/* 应用状态分布图 */
			
 
				+.chart-container {
			
 
				+  width: 100%;
			
 
				+  height: 300px;
			
 
				+}
			
 
				+
			
 
				+/* 快捷应用 */
			
 
				+.quick-app {
			
 
				+  margin-bottom: 15px;
			
 
				+}
			
 
				+
			
 
				+.app-item {
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  gap: 10px;
			
 
				+  padding: 10px;
			
 
				+  background-color: rgba(255, 255, 255, 0.05);
			
 
				+  border-radius: 6px;
			
 
				+  transition: all 0.3s ease;
			
 
				+  
			
 
				+  &:hover {
			
 
				+    background-color: rgba(255, 255, 255, 0.08);
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.app-icon {
			
 
				+  width: 32px;
			
 
				+  height: 32px;
			
 
				+  border-radius: 4px;
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  justify-content: center;
			
 
				+  color: #ffffff;
			
 
				+  font-size: 14px;
			
 
				+}
			
 
				+
			
 
				+.app-name {
			
 
				+  font-size: 14px;
			
 
				+  color: rgba(255, 255, 255, 0.8);
			
 
				+}
			
 
				+
			
 
				+/* 应用上新 */
			
 
				+.new-app {
			
 
				+  margin-bottom: 15px;
			
 
				+  padding-bottom: 15px;
			
 
				+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
			
 
				+  
			
 
				+  &:last-child {
			
 
				+    margin-bottom: 0;
			
 
				+    padding-bottom: 0;
			
 
				+    border-bottom: none;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.app-info {
			
 
				+  display: flex;
			
 
				+  justify-content: space-between;
			
 
				+  align-items: center;
			
 
				+}
			
 
				+
			
 
				+.app-date {
			
 
				+  font-size: 12px;
			
 
				+  color: rgba(255, 255, 255, 0.6);
			
 
				+}
			
 
				+
			
 
				+/* 使用热度排行 */
			
 
				+.hot-app {
			
 
				+  margin-bottom: 20px;
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+  gap: 8px;
			
 
				+}
			
 
				+
			
 
				+.app-rank {
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  gap: 10px;
			
 
				+}
			
 
				+
			
 
				+.rank-number {
			
 
				+  width: 20px;
			
 
				+  height: 20px;
			
 
				+  border-radius: 50%;
			
 
				+  background-color: rgba(255, 255, 255, 0.1);
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  justify-content: center;
			
 
				+  font-size: 12px;
			
 
				+  font-weight: bold;
			
 
				+}
			
 
				+
			
 
				+.app-stats {
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  gap: 10px;
			
 
				+}
			
 
				+
			
 
				+.stat-bar {
			
 
				+  flex: 1;
			
 
				+  height: 6px;
			
 
				+  background-color: #409EFF;
			
 
				+  border-radius: 3px;
			
 
				+}
			
 
				+
			
 
				+.stat-count {
			
 
				+  font-size: 12px;
			
 
				+  color: rgba(255, 255, 255, 0.6);
			
 
				+  min-width: 50px;
			
 
				+  text-align: right;
			
 
				+}
			
 
				+
			
 
				+/* 响应式设计 */
			
 
				+@media (max-width: 1200px) {
			
 
				+  .content-modules {
			
 
				+    grid-template-columns: 1fr;
			
 
				+    grid-template-rows: repeat(4, auto);
			
 
				+  }
			
 
				+  
			
 
				+  .stats-cards {
			
 
				+    flex-direction: column;
			
 
				+  }
			
 
				+  
			
 
				+  .stat-card {
			
 
				+    min-width: auto;
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/views/yygl/overview/index.vue
+++ b/src/views/yygl/overview/index.vue
@@ -0,0 +1,398 @@
 
				+<template>
			
 
				+  <div class="application-overview">
			
 
				+    <!-- 右侧主内容区 -->
			
 
				+    <div class="main-content">
			
 
				+        <div style="display: flex;justify-content: space-between;">
			
 
				+            <!-- 搜索栏 -->
			
 
				+            <div class="search-bar">
			
 
				+                <el-input
			
 
				+                    placeholder="请输入应用名称关键字"
			
 
				+                    v-model="searchKeyword"
			
 
				+                    class="search-input"
			
 
				+                    >
			
 
				+                    <!-- <template #append>
			
 
				+                        <el-button type="primary" class="search-btn">搜索</el-button>
			
 
				+                    </template> -->
			
 
				+                    
			
 
				+                </el-input>
			
 
				+                <el-button type="primary" class="search-btn">搜索</el-button>
			
 
				+            </div>
			
 
				+            
			
 
				+
			
 
				+            <!-- 应用范围过滤 -->
			
 
				+            <div class="filter-tabs">
			
 
				+                <el-radio-group v-model="activeTab" size="medium">
			
 
				+                    <el-radio-button label="all">全部(41)</el-radio-button>
			
 
				+                    <el-radio-button label="district">区级(19)</el-radio-button>
			
 
				+                    <el-radio-button label="street">街镇(8)</el-radio-button>
			
 
				+                </el-radio-group>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+      <!-- 应用卡片网格 -->
			
 
				+      <div class="applications-grid">
			
 
				+        <div class="application-card" v-for="(app, index) in applications" :key="index">
			
 
				+          <div class="card-image">
			
 
				+            <img :src="app.image" :alt="app.name" />
			
 
				+          </div>
			
 
				+          <div class="card-content">
			
 
				+            <div class="app-header">
			
 
				+              <h3 class="app-name">{{ app.name }}</h3>
			
 
				+              <span class="app-version">{{ app.version }}</span>
			
 
				+            </div>
			
 
				+            <div class="app-tags">
			
 
				+              <el-tag size="small" type="success">{{ app.status }}</el-tag>
			
 
				+              <el-tag size="small" v-for="tag in app.tags" :key="tag">{{ tag }}</el-tag>
			
 
				+            </div>
			
 
				+            <p class="app-description">{{ app.description }}</p>
			
 
				+            <div class="app-footer">
			
 
				+              <span class="app-date">{{ app.date }}</span>
			
 
				+              <el-button type="primary" size="small" class="visit-button">访问</el-button>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+
			
 
				+      <!-- 加载更多按钮 -->
			
 
				+      <!-- <div class="load-more">
			
 
				+        <el-button type="primary" size="medium">查看更多</el-button>
			
 
				+      </div> -->
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: "ApplicationOverview",
			
 
				+  data() {
			
 
				+    return {
			
 
				+      searchKeyword: '',
			
 
				+      activeTab: 'all',
			
 
				+      applications: [
			
 
				+        {
			
 
				+          image: require('@/assets/images/common/app-bg-1.png'),
			
 
				+          name: '智慧园区',
			
 
				+          version: 'v1.0',
			
 
				+          status: '待审核',
			
 
				+          tags: [],
			
 
				+          description: '智慧园区运维管理平台',
			
 
				+          date: '2025-12-09 11:09:07'
			
 
				+        },
			
 
				+        {
			
 
				+          image: require('@/assets/images/common/app-bg-2.png'),
			
 
				+          name: '上海市一图一网一屏',
			
 
				+          version: 'v1.0',
			
 
				+          status: '待审核',
			
 
				+          tags: [],
			
 
				+          description: '城市综合数据可视化平台',
			
 
				+          date: '2025-12-09 11:09:06'
			
 
				+        },
			
 
				+        {
			
 
				+          image: require('@/assets/images/common/app-bg-3.png'),
			
 
				+          name: '水系综合管理',
			
 
				+          version: 'v1.0',
			
 
				+          status: '未完成',
			
 
				+          tags: ['水务'],
			
 
				+          description: '汇聚各类水务水务等专业数据，构建综合业务平台',
			
 
				+          date: '2025-11-30 15:17:17'
			
 
				+        },
			
 
				+        {
			
 
				+          image: require('@/assets/images/common/app-bg-4.png'),
			
 
				+          name: '数字孪生黄浦江',
			
 
				+          version: 'v1.0',
			
 
				+          status: '待发布',
			
 
				+          tags: ['未完成', '水务'],
			
 
				+          description: '利用大数据、物联网、BIM、三维可视化技术构建数字孪生平台',
			
 
				+          date: '2025-12-08 15:11:36'
			
 
				+        },
			
 
				+        {
			
 
				+          image: require('@/assets/images/common/u661.png'),
			
 
				+          name: '上海市生态环境管理',
			
 
				+          version: 'v1.0',
			
 
				+          status: '待审核',
			
 
				+          tags: [],
			
 
				+          description: '生态环境综合监测与管理平台',
			
 
				+          date: '2025-11-30 15:43:56'
			
 
				+        },
			
 
				+        {
			
 
				+          image: require('@/assets/images/common/app-bg-1.png'),
			
 
				+          name: '智慧园区',
			
 
				+          version: 'v1.0',
			
 
				+          status: '待审核',
			
 
				+          tags: [],
			
 
				+          description: '智慧园区运维管理平台',
			
 
				+          date: '2025-12-09 11:09:07'
			
 
				+        },
			
 
				+        {
			
 
				+          image: require('@/assets/images/common/app-bg-2.png'),
			
 
				+          name: '上海市一图一网一屏',
			
 
				+          version: 'v1.0',
			
 
				+          status: '待审核',
			
 
				+          tags: [],
			
 
				+          description: '城市综合数据可视化平台',
			
 
				+          date: '2025-12-09 11:09:06'
			
 
				+        },
			
 
				+        {
			
 
				+          image: require('@/assets/images/common/app-bg-3.png'),
			
 
				+          name: '水系综合管理',
			
 
				+          version: 'v1.0',
			
 
				+          status: '未完成',
			
 
				+          tags: ['水务'],
			
 
				+          description: '汇聚各类水务水务等专业数据，构建综合业务平台',
			
 
				+          date: '2025-11-30 15:17:17'
			
 
				+        },
			
 
				+        {
			
 
				+          image: require('@/assets/images/common/app-bg-4.png'),
			
 
				+          name: '数字孪生黄浦江',
			
 
				+          version: 'v1.0',
			
 
				+          status: '待发布',
			
 
				+          tags: ['未完成', '水务'],
			
 
				+          description: '利用大数据、物联网、BIM、三维可视化技术构建数字孪生平台',
			
 
				+          date: '2025-12-08 15:11:36'
			
 
				+        },
			
 
				+        {
			
 
				+          image: require('@/assets/images/common/u661.png'),
			
 
				+          name: '上海市生态环境管理',
			
 
				+          version: 'v1.0',
			
 
				+          status: '待审核',
			
 
				+          tags: [],
			
 
				+          description: '生态环境综合监测与管理平台',
			
 
				+          date: '2025-11-30 15:43:56'
			
 
				+        }
			
 
				+      ]
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.application-overview {
			
 
				+  display: flex;
			
 
				+  width: 100%;
			
 
				+  background-color: #08224a;
			
 
				+  color: #ffffff;
			
 
				+}
			
 
				+
			
 
				+/* 右侧主内容区 */
			
 
				+.main-content {
			
 
				+  flex: 1;
			
 
				+  padding: 20px 30px;
			
 
				+  overflow-y: auto;
			
 
				+}
			
 
				+
			
 
				+/* 搜索栏样式 */
			
 
				+.search-bar {
			
 
				+  margin-bottom: 20px;
			
 
				+  
			
 
				+  .search-input {
			
 
				+    width: 400px;
			
 
				+    
			
 
				+    // ::v-deep .el-input__inner {
			
 
				+    //   background-color: rgba(255, 255, 255, 0.1);
			
 
				+    //   border: 1px solid rgba(255, 255, 255, 0.2);
			
 
				+    //   color: #ffffff;
			
 
				+      
			
 
				+    //   &::placeholder {
			
 
				+    //     color: rgba(255, 255, 255, 0.6);
			
 
				+    //   }
			
 
				+    // }
			
 
				+    
			
 
				+    // ::v-deep .el-input__prepend {
			
 
				+    //   background-color: rgba(255, 255, 255, 0.1);
			
 
				+    //   border-color: rgba(255, 255, 255, 0.2);
			
 
				+    //   color: rgba(255, 255, 255, 0.8);
			
 
				+    // }
			
 
				+  }
			
 
				+  .search-btn {
			
 
				+    margin-left: 10px;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+/* 过滤标签样式 */
			
 
				+.filter-tabs {
			
 
				+  margin-bottom: 30px;
			
 
				+  
			
 
				+  ::v-deep .el-radio-group {
			
 
				+    .el-radio-button {
			
 
				+      background-color: rgba(255, 255, 255, 0.1);
			
 
				+      border-color: rgba(255, 255, 255, 0.2);
			
 
				+      color: rgba(255, 255, 255, 0.8);
			
 
				+      
			
 
				+      &:first-child .el-radio-button__inner {
			
 
				+        border-left-color: rgba(255, 255, 255, 0.2);
			
 
				+      }
			
 
				+      
			
 
				+      .el-radio-button__inner {
			
 
				+        background-color: transparent;
			
 
				+        border-color: rgba(255, 255, 255, 0.2);
			
 
				+        color: rgba(255, 255, 255, 0.8);
			
 
				+      }
			
 
				+      
			
 
				+      &.is-active {
			
 
				+        background-color: #1890ff;
			
 
				+        
			
 
				+        .el-radio-button__inner {
			
 
				+          background-color: #1890ff;
			
 
				+          border-color: #1890ff;
			
 
				+          color: #ffffff;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+/* 应用卡片网格样式 */
			
 
				+.applications-grid {
			
 
				+  display: grid;
			
 
				+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
			
 
				+  gap: 25px;
			
 
				+}
			
 
				+
			
 
				+/* 应用卡片样式 */
			
 
				+.application-card {
			
 
				+  background-color: rgba(255, 255, 255, 0.05);
			
 
				+  border: 1px solid rgba(255, 255, 255, 0.1);
			
 
				+  border-radius: 8px;
			
 
				+  overflow: hidden;
			
 
				+  transition: all 0.3s ease;
			
 
				+  
			
 
				+  &:hover {
			
 
				+    transform: translateY(-5px);
			
 
				+    box-shadow: 0 10px 30px rgba(24, 144, 255, 0.2);
			
 
				+    border-color: rgba(24, 144, 255, 0.4);
			
 
				+  }
			
 
				+  
			
 
				+  .card-image {
			
 
				+    width: 100%;
			
 
				+    height: 160px;
			
 
				+    overflow: hidden;
			
 
				+    
			
 
				+    img {
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+      object-fit: cover;
			
 
				+      transition: transform 0.3s ease;
			
 
				+    }
			
 
				+    
			
 
				+    &:hover img {
			
 
				+      transform: scale(1.05);
			
 
				+    }
			
 
				+  }
			
 
				+  
			
 
				+  .card-content {
			
 
				+    padding: 15px;
			
 
				+  }
			
 
				+  
			
 
				+  .app-header {
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    align-items: center;
			
 
				+    margin-bottom: 10px;
			
 
				+    
			
 
				+    .app-name {
			
 
				+      font-size: 16px;
			
 
				+      font-weight: bold;
			
 
				+      margin: 0;
			
 
				+      color: #ffffff;
			
 
				+    }
			
 
				+    
			
 
				+    .app-version {
			
 
				+      font-size: 12px;
			
 
				+      color: rgba(255, 255, 255, 0.6);
			
 
				+      background-color: rgba(255, 255, 255, 0.1);
			
 
				+      padding: 2px 6px;
			
 
				+      border-radius: 4px;
			
 
				+    }
			
 
				+  }
			
 
				+  
			
 
				+  .app-tags {
			
 
				+    margin-bottom: 10px;
			
 
				+    
			
 
				+    .el-tag {
			
 
				+      margin-right: 5px;
			
 
				+      margin-bottom: 5px;
			
 
				+    }
			
 
				+  }
			
 
				+  
			
 
				+  .app-description {
			
 
				+    font-size: 13px;
			
 
				+    line-height: 1.6;
			
 
				+    color: rgba(255, 255, 255, 0.7);
			
 
				+    margin-bottom: 15px;
			
 
				+    overflow: hidden;
			
 
				+    text-overflow: ellipsis;
			
 
				+    display: -webkit-box;
			
 
				+    -webkit-line-clamp: 2;
			
 
				+    -webkit-box-orient: vertical;
			
 
				+  }
			
 
				+  
			
 
				+  .app-footer {
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    align-items: center;
			
 
				+    
			
 
				+    .app-date {
			
 
				+      font-size: 12px;
			
 
				+      color: rgba(255, 255, 255, 0.5);
			
 
				+    }
			
 
				+    
			
 
				+    .visit-button {
			
 
				+      padding: 4px 12px;
			
 
				+      font-size: 12px;
			
 
				+      border-radius: 4px;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+/* 加载更多按钮 */
			
 
				+.load-more {
			
 
				+  text-align: center;
			
 
				+  margin-bottom: 30px;
			
 
				+  
			
 
				+  .el-button {
			
 
				+    padding: 10px 30px;
			
 
				+    background-color: rgba(24, 144, 255, 0.2);
			
 
				+    border-color: rgba(24, 144, 255, 0.4);
			
 
				+    color: #1890ff;
			
 
				+    
			
 
				+    &:hover {
			
 
				+      background-color: rgba(24, 144, 255, 0.3);
			
 
				+      border-color: rgba(24, 144, 255, 0.6);
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+/* 响应式设计 */
			
 
				+@media (max-width: 1200px) {
			
 
				+  .applications-grid {
			
 
				+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
			
 
				+    gap: 20px;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@media (max-width: 992px) {
			
 
				+  .sidebar {
			
 
				+    width: 180px;
			
 
				+    
			
 
				+    .sidebar-menu .menu-item {
			
 
				+      padding: 12px 15px;
			
 
				+      
			
 
				+      i {
			
 
				+        font-size: 16px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  
			
 
				+  .main-content {
			
 
				+    padding: 15px 20px;
			
 
				+  }
			
 
				+  
			
 
				+  .search-input {
			
 
				+    width: 300px !important;
			
 
				+  }
			
 
				+  
			
 
				+  .applications-grid {
			
 
				+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
			
 
				+    gap: 15px;
			
 
				+  }
			
 
				+}
			
 
				+</style>