数据管理中心跳转页面修改

src/router/index.js

@@ -160,6 +160,13 @@ const routes = [
       return import("../views/wgn/sksj/index.vue");
     },
   },
+  {
+    path: "/sksjglyl",
+    name: "sksjglyl",
+    component: function () {
+      return import("../views/Sksjglyl.vue");
+    },
+  },
   // 文件预览功能
   {
     path: "/fileView",

src/views/Sksjgl.vue

@@ -1,18 +1,5 @@
 <template>
   <div class="sksjgl container">
-    <!-- <div class="server_title">
-      <el-image
-        style="width: 50%; height: calc(100vh - 120px)"
-        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="banner">
@@ -66,7 +53,8 @@
       <!-- 流程内容 -->
       <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">
+          <!-- <a :href="item.url" target="_blank" rel="noopener noreferrer"> -->
+          <a href="javascript:;" @click="goDetail(item)">
             <div
               class="pictrue"
               :style="{
@@ -138,6 +126,15 @@ export default {
     this.searchServerList();
   },
   methods: {
+    // 跳转详情页
+    goDetail(item) {
+      let routerPath = {
+          path: "/Sksjglyl", // 预览页面
+          query: { activePanel: this.activePanel },
+        };
+      const routeData = this.$router.resolve(routerPath);
+      window.open(routeData.href, '_blank')
+    },
     changePanel(active) {
       this.activePanel = active;
       this.nowFuncContent = this.funcList[this.activePanel];

src/views/Sksjglyl.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="container">
+      <el-tabs
+        v-model="activeName"
+        type="border-card"
+        class="demo-tabs"
+        @tab-click="handleClick"
+      >
+        <el-tab-pane v-for="item in nowFuncContent" :key="item.label" :label="item.label" :name="item.label">
+        </el-tab-pane>
+      </el-tabs>
+      <!-- 复用的iframe：根据激活标签动态改src -->
+      <div class="win-iframe-container">
+        <iframe
+          :src="iframeSrc"
+          width="100%"
+          height="100%"
+          frameborder="0"
+          allowfullscreen
+        ></iframe>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activeName: "",
+      funcList: systemConfig.sksjgl.funcList,
+      nowFuncContent: [],
+      activePanel: "",
+      iframeSrc: "",
+    };
+  },
+  mounted() {
+    this.dmsDataProxy = systemConfig.dmsDataProxy;
+    this.activePanel = this.$route.query.activePanel ? this.$route.query.activePanel : "";
+    this.changePanel(this.activePanel);
+  },
+  methods: {
+    changePanel(active) {
+      this.activePanel = active;
+      this.nowFuncContent = this.funcList[this.activePanel];
+      this.iframeSrc = this.nowFuncContent[0].url;
+      this.activeName = this.nowFuncContent[0].label;
+    },
+    handleClick(tab, event) {
+      console.log(tab, event)
+      let label = tab.props.label;
+      this.iframeSrc = this.nowFuncContent.find(item => item.label == label).url;
+      console.log(this.iframeSrc);
+    }
+  },
+};
+</script>
+<style>
+   .el-tabs--border-card>.el-tabs__content {
+      padding: 0;
+      display: none;
+   }
+</style>
+<style lang="less" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  padding: 0;
+}
+.win-iframe {
+  width: 100%;
+  height: 100%;
+}
+.win-iframe-container {
+  width: 100%;
+  height: 100%;
+}
+</style>