时空门户

public/static/config/config.js

@@ -24,7 +24,128 @@ let systemConfig = {
             "/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: {},

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,7 +43,7 @@ export default {
           this.$router.push("/");
           break;
         case 2:
-          this.$router.push("/data");
+          this.$router.push("/sksjgl");
           break;
         case 3:
           // this.$router.push("/application");
@@ -68,7 +64,7 @@ export default {
           break;
       }
       this.$nextTick(() => {
-        this.$emit("scroll-update");
+        this.$emit('updateScroll');
       });
     },
     // addClass(element, className) {

src/components/yxgl/EchartsDome.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="echartsDome">
     <div class="echartsDome_title">{{ title }}</div>
-    <div class="echartsDome_chart" ref="chartContainer"></div>
+    <div class="echartsDome_chart" ref="chartContainer" id="yxglEchart"></div>
   </div>
 </template>
 
@@ -25,7 +25,7 @@ export default {
   },
   methods: {
     initChart() {
-      this.chart = echarts.init(this.$refs.chartContainer);
+      let chart = echarts.init(document.getElementById("yxglEchart"));
 
       let option = {
         legend: {
@@ -113,7 +113,7 @@ export default {
         ],
       };
       // 绘制图表
-      this.chart.setOption(option);
+      chart.setOption(option);
     },
   },
 };

src/router/index.js

@@ -15,7 +15,14 @@ const routes = [
         },
       },
       {
-        path: 'wgn',
+        path: '/sksjgl',
+        component: function () {
+          return import('../views/Sksjgl.vue')
+        },
+      },
+      {
+        path: '/wgn',
+        name: 'wgn',
         component: function () {
           return import('../views/Wgn.vue')
         },
@@ -67,29 +74,24 @@ const routes = [
     },
     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: '/sksjgl',
-    name: 'sksjgl',
-    component: function () {
-      return import('../views/sksjgl/Example.vue')
-    }
-  },
   // 时空门户
   // {
   //   path: '/skmh',

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>

src/views/Root.vue

@@ -1,7 +1,7 @@
 <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>
@@ -9,7 +9,7 @@
 </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>
 

src/views/Sksjgl.vue

@@ -0,0 +1,230 @@
+<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>
+
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            activePanel: 'sjzljc',
+            funcList: systemConfig.sksjgl.funcList,
+            nowFuncContent: []
+        };
+    },
+    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;
+                    }
+                }
+
+
+            }
+        }
+    }
+}
+</style>

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>