最新版效果提交

public/static/config/config.js

@@ -186,23 +186,40 @@ let systemConfig = {
             title:"基础能力",
             data:[
                 {
+                    index:"1-1",
                     tags: ["盈浦街道", "夏阳街道"],
                     title: "一张图资源预览",
                     text: "一张图资源聚焦于资源预览的高效性与便捷性核心需求，打造轻量化、高适配的单图资源快速预览解决方案，覆盖各类图片素材场景的预览诉求，旨在解决传统资源查看中加载繁琐、信息获取不直观、筛选效率低等问题。",
                     picture: "./static/images/example/1-4.png",
                     url:"http://10.235.245.174:2024?token=1"
                 }, {
+                    index:"1-2",
                     tags: ["盈浦街道", "夏阳街道"],
                     title: "一张图开发者中心",
                     text: "一张图开发者中心是面向开发者打造的图片资源预览能力开放与集成服务平台，作为一张图资源预览产品的技术开放枢纽，聚焦图片快速预览核心能力的高效输出，为企业开发者、第三方开发团队及个人开发者提供标准化、轻量化、高适配的图片预览技术解决方案。",
                     picture: "./static/images/example/1-2.png",
                     url:"http://10.235.245.174:2103/?token=123456"
                 }, {
+                    index:"1-3",
                     tags: ["盈浦街道、夏阳街道"],
                     title: "一张图二三维引擎组件库",
                     text: "一张图二三维引擎组件库是依托一张图技术体系打造的二三维一体化引擎能力演示与实践参考体系，聚焦图片资源在二三维可视化场景下的渲染、交互、融合应用，通过丰富的示例场景、可复用的代码模板、完整的能力演示。",
                     picture: "./static/images/example/1-3.jpg",
                     url:"http://10.235.245.174:2102/"
+                }, {
+                    index:"1-4",
+                    tags: ["盈浦街道、夏阳街道"],
+                    title: "二维GIS引擎",
+                    text: "几何计算是对青浦区三维数字底板中的面要素（支持单个或多个）进行几何形态运算的功能，核心输出 “并集、交集、差集” 三类新的面要素，运算过程严格遵循矢量几何运算规则，确保新要素的拓扑一致性（如无重叠、无悬挂节点），可用于要素合并、重叠提取、范围裁剪等场景。",
+                    picture: "./static/images/example/1-2.png",
+                    url:""
+                }, {
+                    index:"1-5",
+                    tags: ["盈浦街道、夏阳街道"],
+                    title: "数字孪生引擎",
+                    text: "空间量算是基于青浦区三维数字底板的基础数据源（如矢量数据、DEM 高程数据），计算空间要素几何参数的功能，核心输出 “距离、面积、高程” 三类关键指标，精度适配数字底板的坐标系统（SH2000 投影坐标系）与数据分辨率（如 DEM 数据精度为 5 米 ×5 米），可满足规划设计、工程施工、资源统计等场景的量算需求。",
+                    picture: "./static/images/example/1-2.png",
+                    url:""
                 }
             ]
         },

src/components/AppVue/Header.vue

@@ -42,12 +42,24 @@ export default {
 </script>
 
 <style lang="less" scoped>
+#header::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px; /* 边框厚度 */
+  background-image: linear-gradient(to right, #071b3c, #71a5d4, #071b3c);
+}
 #header {
   width: 100vw;
   height: 70px;
   background: linear-gradient(180deg, #2c2f74, #494d98);
   color: #ffffff;
   margin: 0 auto;
+  position: absolute;
+  background: #00215387;
+  z-index: 999;
   .logo {
     display: inline-block;
     height: 70px;

src/components/user/user.vue

@@ -139,6 +139,7 @@ export default {
     .container{
         padding: 0;
         margin: 0;
+        position: relative;
     }
     .el-dropdown-link {
         cursor: pointer;

src/store/index.js

@@ -14,11 +14,11 @@ export default createStore({
     activeMenu: sessionStorage.getItem('activeMenu') ? parseInt(sessionStorage.getItem('activeMenu')) : 1, // 初始化为1或具体的菜单项ID
     menuList: [
       { id: 1, path: "/", label: "首页" },
-      { id: 2, path: "/sksjgl", label: "时空数据管理" },
-      // { id:3,path: "/skmh/scene", label: "二维GIS引擎"},
-      { id: 4, path: "/skmh", label: "时空门户" },
-      { id: 5, path: "/wgn", label: "微功能" },
-      { id: 6, path: "/yygl", label: "应用管理" },
+      { id: 2, path: "/skmh", label: "时空门户" },
+      { id: 3, path: "/yygl", label: "应用中心" },
+      { id: 4, path: "/sksjgl", label: "数据管理中心" },
+      { id: 5, path: "/wgn", label: "微功能中心" },
+      // { id:6,path: "/skmh/scene", label: "二维GIS引擎"},
       { id: 7, path: "/yxgl", label: "运行管理" },
       { id: 8, path: "/taskManger", label: "任务管理" }
     ],

src/views/HomePage.vue

@@ -1,21 +1,19 @@
 <template>
   <div class="home container">
 
-    <div class="affix-container" >
+    <!-- <div class="affix-container" >
       <el-affix :offset="200" >
         <div style="padding: 10px;font-size: 14px;height:300px;cursor: pointer;display: flex;justify-content: center;align-items: center;">
           <el-steps direction="vertical" :active="activeIndex">
             <el-step title="顶部" @click="goAnchor('top')" :icon="Edit"/>
-            <!-- <el-step title="应用案例" @click="goAnchor('yyal')" :icon="Edit"/> -->
             <el-step title="基础能力" @click="goAnchor('jcnl')" :icon="Edit"/>
             <el-step title="统建应用" @click="goAnchor('tjyy')" :icon="Edit"/>
             <el-step title="应用支撑" @click="goAnchor('yyzc')" :icon="Edit"/>
-            <!-- <el-step title="六大核心" @click="goAnchor('hxgn')" :icon="Edit"/> -->
           </el-steps>
           
         </div>
       </el-affix>
-    </div>
+    </div> -->
     <div class="part1" id="top">
       <div style="margin-left: 10%;">
         <div class="super-title">青浦区“一张图”区级节点</div>
@@ -257,7 +255,7 @@
         </div>
       </div> -->
 
-      <div v-for="useCaseItem in examplelist" :key="useCaseItem.title" :id="useCaseItem.title === '基础能力' ? 'jcnl' : useCaseItem.title === '统建应用' ? 'tjyy' : useCaseItem.title === '应用支撑' ? 'yyzc' : ''">
+      <!-- <div v-for="useCaseItem in examplelist" :key="useCaseItem.title" :id="useCaseItem.title === '基础能力' ? 'jcnl' : useCaseItem.title === '统建应用' ? 'tjyy' : useCaseItem.title === '应用支撑' ? 'yyzc' : ''">
         <div class="title " style="margin-top:90px;margin-bottom: 20px;">{{useCaseItem.title}}</div>
         <div class="warp-container">
           <div class="warp-page-card" v-for="item in useCaseItem.data" :key="item.title" @click="handleTabsOpenPage(item)">
@@ -269,7 +267,7 @@
           </div>
         </div>
       </div>
-      <div style="height: 90px;width: 100%;"></div>
+      <div style="height: 90px;width: 100%;"></div> -->
 
       <!-- <el-tabs v-model="activeUseCase" class="usecase-tabs" @tab-click="handleClick" stretch="true">
         <el-tab-pane label="dataProcass" name="dataProcass">
@@ -1320,7 +1318,8 @@ export default {
 .blue-background,
 .image-background {
   padding-top: 0px;
-  padding-bottom: 40px;
+  // padding-bottom: 40px;
+  padding-bottom: 100px;
   margin-left: 0;
   padding-left: 120px;
   padding-right: 120px;
@@ -1328,7 +1327,8 @@ export default {
 }
 
 .darkblue-background {
-  background: linear-gradient(to bottom, #00002a, #060633, #0f3460, #0f3460);
+  background: #00002a;
+  // background: linear-gradient(to bottom, #00002a, #060633, #0f3460, #0f3460);
   // background: linear-gradient(to bottom,
   //     #01012f 0%,
   //     #0f3460 40%,

src/views/Root.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="main">
     <Header />
-    <el-scrollbar ref="pagescrollbar" class="el-scrollbar">
-      <router-view />
-    </el-scrollbar>
-    <Footer></Footer>
+      <el-scrollbar ref="pagescrollbar" class="el-scrollbar">
+          <router-view />
+      </el-scrollbar>
+    <!-- <Footer></Footer> -->
   </div>
 </template>
 
@@ -55,11 +55,11 @@ export default {
     position: relative;
     width: 100%;
     height: 100%;
-    height: calc(100% - 120px);
+    // height: calc(100% - 120px);
     box-sizing: border-box;
     overflow: hidden;
     overflow: auto;
-    // padding-bottom: 50px
+    // padding-bottom: 120px
   }
 }
 </style>

src/views/Sksjgl.vue

@@ -364,7 +364,7 @@ export default {
   }
 
   .time-space-operator-lib {
-    background-color: #1e407c;
+    background-color: #00002e;
     color: #fff;
     padding: 100px 150px;
     box-sizing: border-box;
@@ -375,7 +375,7 @@ export default {
       margin-bottom: 50px;
 
       h1 {
-        font-size: 50px;
+        font-size: 36px;
         font-weight: bold;
       }
     }

src/views/Wgn.vue

@@ -878,7 +878,7 @@ export default {
         &_title {
           font-size: 35px;
           font-weight: bold;
-          color: #4095e5;
+          color: #fff;
         }
         &_text {
           margin-top: 35px;

src/views/Yxgl.vue

@@ -1,4 +1,8 @@
 <template>
+  <el-affix :offset="0">
+    <div style="height: 70px;width: 100vw;background: #08224a;"></div>
+  </el-affix>
+  <el-affix :offset="70">
   <div id="yxgl_box">
     <el-menu
       :default-active="menuActive"
@@ -46,6 +50,7 @@
       <iframe v-else :src="iframeUrl" frameborder="0"></iframe>
     </div>
   </div>
+  </el-affix>
 </template>
 
 <script>
@@ -102,7 +107,8 @@ export default {
 <style lang="less" scoped>
 #yxgl_box {
   width: 100vw;
-  height: calc(100vh - 120px);
+  // height: calc(100vh - 120px);
+  height: 100vh;
   margin: 0;
   display: flex;
   overflow: hidden;
@@ -110,17 +116,20 @@ export default {
 
 .el-menu-vertical-demo:not(.el-menu--collapse) {
   width: 200px;
-  height: calc(100vh - 120px);
+  // height: calc(100vh - 120px);
+  height: 100vh;
   margin: 0;
   background: #08224a;
 }
 .viewBox {
   width: calc(100vw - 200px);
   margin: 0;
-  height: calc(100vh - 120px);
+  // height: calc(100vh - 120px);
+  height: 100vh;
   position: relative;
   overflow: hidden;
   overflow-y: auto;
+  padding-bottom: 120px;
 }
 iframe {
   width: 100%;

src/views/rwgl/Index.vue

@@ -1,29 +1,33 @@
 <template>
+  <el-affix :offset="0">
+    <div style="height: 70px;width: 100vw;background: #08224a;"></div>
+  </el-affix>
+  <el-affix :offset="70">
   <div class="blue-background">
     <div class="lighter-container">
       <div class="left-row">
         <div>
-          <div>状态：</div>
+          <span>状态：</span>
           <el-tag size="large" :effect="focusTaskStatus.includes('all') ? 'dark' : ''" type="primary"
-            @click="changeTaskStatus()">
+            @click="changeTaskStatus()" style="cursor: pointer;margin: 10px 5px;">
             全部
           </el-tag>
           <template v-for="status in taskStatus" :key="status.index">
             <el-tag size="large" :effect="focusTaskStatus.includes(status.index) ? 'dark' : ''" type="primary"
-              @click="changeTaskStatus(status)">
+              @click="changeTaskStatus(status)" style="cursor: pointer;margin: 10px 5px;">
               {{ status.name }}
             </el-tag>
           </template>
         </div>
         <div>
-          <div>类别：</div>
+          <span>类别：</span>
           <el-tag size="large" :effect="focusTaskType.includes('all') ? 'dark' : ''" type="primary"
-            @click="changeTaskType()">
+            @click="changeTaskType()" style="cursor: pointer;margin: 10px 5px;">
             全部
           </el-tag>
           <template v-for="type in taskType" :key="type.index">
             <el-tag size="large" :effect="focusTaskType.includes(type.index) ? 'dark' : ''" type="primary"
-              @click="changeTaskType(type)">
+              @click="changeTaskType(type)" style="cursor: pointer;margin: 10px 5px;">
               {{ type.name }}
             </el-tag>
           </template>
@@ -36,7 +40,9 @@
       </div>
     </div>
     <div class="lighter-container">
-      查询到{{ taskNum }}条任务
+      <div style="padding-bottom: 10px;">
+        查询到{{ taskNum }}条任务
+      </div>
       <el-table table-layout="fixed" row-key="main_id" :data="taskData" class="table">
         <el-table-column prop="main_c_name" label="名称" />
         <el-table-column prop="main_c_user_name" label="用户" />
@@ -165,6 +171,7 @@
       </el-descriptions>
     </el-dialog>
   </div>
+  </el-affix>
 </template>
 
 <script>
@@ -413,7 +420,8 @@ link {
   margin-left: 0;
   padding-left: 90px;
   padding-right: 90px;
-  min-height: 80vh
+  // min-height: 80vh
+  height: 100vh;
 }
 
 .darkblue-background {
@@ -426,7 +434,7 @@ link {
 
 .blue-background,
 body {
-  background: #0f3460;
+  background: #08224a;
 }
 
 .bluedark-background {
@@ -441,15 +449,15 @@ body {
 
 .lighter-container {
   background-color: #eeeeee0b;
-  padding: 10px;
+  padding: 20px;
   margin: 15px;
   vertical-align: middle;
-  border-radius: 3%;
+  border-radius: 10px;
 }
 
 .lightblue-container {
   border-radius: 3%;
-  padding: 10px;
+  padding: 20px;
   margin: 15px;
   background: linear-gradient(to bottom, #215476 0%, #28638b 66%, #337aac 100%);
   font-size: 20px;

src/views/skmh/index.vue

@@ -28,10 +28,39 @@
         </div> -->
       </div>
     </div>
-
-
+   
+    <div class="server_list_box">
+      <div class="server_list_box_table">
+        <div
+          v-for="item in dataList[0].data"
+          :key="item.index"
+          class="server_list_box_table_item"
+          :id="item.index + 'list'"
+        >
+          <div class="server_list_box_table_item_content">
+            <div class="server_list_box_table_item_content_title">{{ item.title }}</div>
+            <div class="server_list_box_table_item_content_text">{{ item.text }}</div>
+            <div class="server_list_box_table_item_content_button_box">
+              <div
+                class="server_list_box_table_item_content_button_box_item"
+                @click.stop="handleOpenPage(item)"
+              >
+                在线演示
+              </div>
+            </div>
+          </div>
+          <div class="server_list_box_table_item_image">
+            <el-image
+              style="width: 690px; height: 410px"
+              :src="item.picture"
+              fit="cover"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
     <!-- 平台数据统计 -->
-    <div class="stats-section">
+    <!-- <div class="stats-section">
       <div class="overview-header">
         <h2>平台数据统计</h2>
       </div>
@@ -70,18 +99,12 @@
           <div class="stat-label">本周新增{{countData.curWeek.username}}人</div>
         </div>
       </div>
-    </div>
+    </div> -->
 
     <!-- 数据概览 -->
-    <div class="data-overview">
+    <!-- <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">
@@ -108,18 +131,18 @@
           </div>
           </div>
         </div>
-      </div>
-      <div class="charts-grid">
+      </div> -->
+      <!-- <div class="charts-grid"> -->
         <!-- 访问量统计柱状图 -->
-        <div class="chart-card">
+        <!-- <div class="chart-card">
           <div class="chart-title">访问量统计</div>
           <div ref="deviceChart" class="chart-container"></div>
-        </div>
+        </div> -->
         <!-- 服务分类占比饼图 -->
-        <div class="chart-card">
+        <!-- <div class="chart-card">
           <div class="chart-title">服务分类占比</div>
           <div ref="statusChart" class="chart-container"></div>
-        </div>
+        </div> -->
         <!-- 用户活跃度分析折线图 -->
         <!-- <div class="chart-card">
           <div class="chart-title">用户活跃度分析</div>
@@ -130,14 +153,13 @@
           <div class="chart-title">数据量</div>
           <div ref="dataVolumeChart" class="chart-container"></div>
         </div> -->
-      </div>
-    </div>
+      <!-- </div>
+    </div> -->
 
     <!-- 设备综合分析比较 -->
-    <div class="comparison-section">
+    <!-- <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%;"
           height="530"
           :header-cell-style="headerCellStyle"
@@ -151,10 +173,10 @@
           <el-table-column prop="count" label="服务使用量" />
         </el-table>
       </div>
-    </div>
+    </div> -->
 
     <!-- 功能演示 -->
-    <div class="demo-section">
+    <!-- <div class="demo-section">
       <div class="overview-header">
         <h2>功能演示</h2>
       </div>
@@ -168,37 +190,8 @@
             <div class="demo-text">{{item.content}}</div>
           </div>
         </div>
-
-        <!-- <div class="demo-card">
-          <div class="demo-thumbnail" :style="{ backgroundImage: 'url(' + imageUrl + ')' }">
-            <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> -->
 
     <div>
       <el-dialog
@@ -216,6 +209,7 @@
 
 <script>
 import * as echarts from 'echarts'
+import { ElNotification } from "element-plus";
 import appCenter from "@/api/appCenter";
 import { countUserList,coutService,totalCountGroupByTime,countUserDataByAutoTime } from "@/api/count";
 import moment from "moment";
@@ -235,6 +229,7 @@ export default {
       centerDialogVisible: false,
       videoUrl: "",
       imageUrl: "static/images/wgn_title.png",
+      dataList:systemConfig.examplelist,
       countData:{
         total:{
           service:0,
@@ -288,12 +283,12 @@ export default {
     },
   },
   mounted() {
-    this.initData()
-    window.addEventListener('resize', this.handleResize)
+    // this.initData()
+    // window.addEventListener('resize', this.handleResize)
   },
   beforeUnmount() {
-    window.removeEventListener('resize', this.handleResize)
-    this.destroyCharts()
+    // window.removeEventListener('resize', this.handleResize)
+    // this.destroyCharts()
   },
   methods: {
     initData(){
@@ -315,6 +310,18 @@ export default {
       this.videoUrl = "";
       this.centerDialogVisible = false;
     },
+    handleOpenPage(item){
+      if(item.url){
+        window.open(item.url, '_blank');
+      }else{
+        ElNotification.success({
+            title: "提示",
+            message: "暂未开放服务",
+            offset: 80,
+          });
+      }
+      
+    },
     getDmsDataList() {
       let requestParams = {
         columnId: systemConfig.columnIds[2], // 应用中心栏目id（示范应用）
@@ -1007,6 +1014,7 @@ export default {
 /* 平台数据统计 */
 .stats-section {
   padding: 40px 10%;
+  margin-top: 100px;
   .overview-header {
     display: flex;
     justify-content: space-between;
@@ -1139,12 +1147,12 @@ export default {
 }
 // 时间筛选
 .time-section{
-  padding: 0 0px 40px;
+  padding: 0 0px 10px;
   .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);
+    // background-color: rgba(30, 41, 59, 0.6);
+    // border-radius: 12px;
+    padding: 10px;
+    // box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
   }
   .time-content{
     display: flex;
@@ -1361,4 +1369,115 @@ export default {
 :deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
   background-color: rgba(255, 255, 255, 0.02);
 }
+
+.server_list_box {
+  width: 100vw;
+  background-color: #00002e;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #fff;
+  position: relative;
+  padding-bottom: 100px;
+  &_menu {
+    position: absolute;
+    top: 100px;
+    left: 10px;
+    z-index: 1;
+  }
+  &_title {
+    margin: 100px 0;
+    font-size: 35px;
+    font-weight: bold;
+    position: relative;
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: -12px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 100px;
+      height: 4px;
+      background-image: linear-gradient(to right, #1d88f0, #00bfff);
+    }
+  }
+  &_search {
+    // margin-top: 100px;
+    font-size: 25px;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    width: -webkit-fill-available;
+    justify-content: center;
+    .input-with-select {
+      background: #08224a;
+    }
+  }
+  &_table {
+    // margin-top: 50px;
+    width: 100vw;
+    &_item {
+      display: flex;
+      justify-content: space-evenly;
+      align-items: center;
+      padding: 50px 0;
+
+      &:nth-child(odd) {
+        flex-direction: row;
+      }
+      &:nth-child(even) {
+        flex-direction: row-reverse;
+      }
+      &_content {
+        width: 760px;
+        height: 100px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        &_title {
+          font-size: 35px;
+          font-weight: bold;
+          color: #fff;
+          text-align: left;
+          width: 100%;
+        }
+        &_text {
+          margin-top: 35px;
+          font-size: 18px;
+        }
+        &_button_box {
+          display: flex;
+          // justify-content: space-evenly;
+          text-align: left;
+          width: 100%;
+          &_item {
+            margin-top: 35px;
+            font-size: 20px;
+            letter-spacing: 0.2rem;
+            // color: #4095e5;
+            // border: 1px solid #4095e5;
+            background-color: #4095e5;
+            color: #fff;
+            border-radius: 10px;
+            padding: 10px 36px;
+            cursor: pointer;
+            &:hover {
+              background-color: #077ae6;
+              color: #fff;
+            }
+          }
+        }
+      }
+      &_image {
+        width: 690px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 30px;
+        overflow: hidden;
+      }
+    }
+  }
+}
 </style>

src/views/yxgl/StatisticalAnalysis.vue

@@ -1085,6 +1085,7 @@ export default {
 .mainBox {
   width: calc(100% - 60px);
   margin: 30px;
+  padding-bottom: 80px;
   & > div {
     margin: 20px 0;
     display: flex;

src/views/yygl/appCenter.vue

@@ -1,4 +1,8 @@
 <template>
+  <el-affix :offset="0">
+  <div style="height: 70px;width: 100vw;background: #08224a;"></div>
+  </el-affix>
+  <el-affix :offset="70">
   <div class="app-center">
     <div class="container">
       <!-- 左侧导航栏 -->
@@ -40,6 +44,7 @@
       </div>
     </div>
   </div>
+  </el-affix>
 </template>
 
 <script>
@@ -72,8 +77,10 @@ export default {
 <style lang="less" scoped>
 .app-center {
   width: 100%;
-  //   min-height: 100vh;
-  height: calc(100vh - 120px);
+  // height: 100%;
+    // min-height: 100vh;
+  // height: calc(100vh - 120px);
+  height: 100vh;
   background-color: #08224a;
   color: #ffffff;
   overflow-x: hidden;

src/views/yygl/index.vue

@@ -7,21 +7,21 @@
         <p class="banner-description">
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;收集、管理区级应用的访问地址、使用单位、使用情况等。区委办局、街镇、居村应基于区级节点开展区级时空应用建设。
         </p>
-        <div>
+        <!-- <div>
           <el-button type="primary" class="enter-button" @click="handleEnterClick">立即体验</el-button>
-        </div>
+        </div> -->
       </div>
     </div>
 
     <!-- 示范应用区域 -->
     <div class="demo-applications">
-      <div class="section-title">
+      <!-- <div class="section-title">
         <h2>示范应用</h2>
         <div class="title-line"></div>
-      </div>
+      </div> -->
 
       
-      <div class="applications-grid" >
+      <!-- <div class="applications-grid" >
         <div v-for="item in applications" :key="item.id">
           <div class="application-card">
             <div class="card-image">
@@ -35,33 +35,50 @@
             </div>
           </div>
         </div>
+      </div> -->
+
+      <div v-for="useCaseItem in appCenterlications" :key="useCaseItem.title">
+        <div class="title " v-if="useCaseItem.title != '基础能力'"  style="margin: 50px 0px;display: flex;justify-content: space-between;align-items: baseline;">
+          <div></div>
+          <div style="font-size: 24px;margin-top: 10px;text-align: center;font-weight: bold;">{{useCaseItem.title}}</div>
+          <div style="color: #ADE8FE;cursor: pointer;" @click="handleEnterClick(useCaseItem.title)">查看更多></div>
+        </div>
+        <div class="warp-container" v-if="useCaseItem.title != '基础能力'" >
+        <el-carousel :interval="40000" type="card" height="600px">
+            <el-carousel-item v-for="item in useCaseItem.data" :key="item.title" @click="handleTabsOpenPage(item)">
+                <div class="warp-page-card" >
+                  <div class="warp-page-img" :style="`background-image: url(${curUrl}${item.picture});`"></div>
+                  <div class="warp-page-text">
+                    <div class="warp-page-text-title">{{ item.title }}</div>
+                    <div class="warp-page-text-desc">{{ item.text }}</div>
+                  </div>
+                </div>
+              </el-carousel-item>
+          </el-carousel>
+        </div>
       </div>
-       <!-- <div class="applications-grid">
-            <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>
 
-            <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 v-for="useCaseItem in examplelist" :key="useCaseItem.title" :id="useCaseItem.title === '统建应用' ? 'tjyy' : useCaseItem.title === '应用支撑' ? 'yyzc' : ''">
+        <div class="title " v-if="useCaseItem.title != '基础能力'"  style="margin: 50px 0px;display: flex;justify-content: space-between;align-items: baseline;">
+          <div></div>
+          <div style="font-size: 24px;margin-top: 10px;text-align: center;font-weight: bold;">{{useCaseItem.title}}</div>
+          <div style="color: #ADE8FE;cursor: pointer;" @click="handleEnterClick">查看更多></div>
+        </div>
+        <div class="warp-container" v-if="useCaseItem.title != '基础能力'" >
+          <div class="warp-page-card" v-for="item in useCaseItem.data" :key="item.title" @click="handleTabsOpenPage(item)">
+            <div class="warp-page-img" :style="`background-image: url(${item.picture});`"></div>
+            <div class="warp-page-text">
+              <div class="warp-page-text-title">{{ item.title }}</div>
+              <div class="warp-page-text-desc">{{ item.text }}</div>
             </div>
-       </div> -->
+          </div>
+
+        </div>
+      </div> -->
+
     </div>
+
   </div>
 </template>
 
@@ -73,17 +90,45 @@ export default {
   data() {
     return {
       applications:[],
-      curUrl:systemConfig.dmsDataProxy
+      appCenterlications:[],
+      itemAppCenterlications:[],
+      tagOptions: [],
+      curUrl:systemConfig.dmsDataProxy,
+      examplelist:systemConfig.examplelist,
     }
   },
   mounted() {
     this.initData()
   },
   methods: {
-    handleEnterClick() {
+    handleEnterClick(val) {
+      let tag = this.tagOptions.find((info)=>info.value == val).label;
+      sessionStorage.setItem('activeTag', parseInt(tag));
       this.$router.push('appCenter');
     },
     initData() {
+      this.getDmsTagSName();
+    },
+    getDmsTagSName() {
+      let requestParams = {
+        sName: "tag",
+      };
+      appCenter.getDmsSName(requestParams).then((res) => {
+        if (res.code === 200) {
+          this.tagOptions = res.content.map((item) => ({
+            label: item.index,
+            value: item.name,
+          }));
+          this.appCenterlications = res.content.map((item) => ({
+            title: item.name,
+            data: [],
+          }));
+          this.getDmsDataList();
+        }
+      });
+    },
+    //示范数据
+    getDmsSFDataList(){
       let requestParams = {
         columnId: systemConfig.columnIds[0], // 应用中心栏目id（示范应用）
         states: 0,
@@ -103,11 +148,65 @@ export default {
         }
       })
     },
+    // 应用中心数据
+    getDmsDataList() {
+       let requestParams = {
+        columnId: systemConfig.columnIds[1], // 应用中心栏目id
+        states: 0,
+        orderBy: JSON.stringify([{"field":"frame_time","orderByType":2}]),
+        pageSize: 9999,
+        page: 0
+      };
+      appCenter.getDmsDataList(requestParams).then((res) => {
+        if (res.code === 200) {
+           let arr = res.content.data.map((item) => ({
+            ...item,
+            tags: item.apptags.split(',').map(tag => this.tagOptions.find(info => info.label == tag.trim())?.value || ''),
+            createTime: moment(item.create_time).format('YYYY-MM-DD HH:mm:ss')
+          }))
+          this.appCenterlications.forEach(item => {
+             arr.forEach(info => {
+                if(info.tags.includes(item.title) == true && info.issf != '0'){
+                  let str = {
+                      id:info.id,
+                      tags: ["盈浦街道", "夏阳街道"],
+                      title: info.title,
+                      text: info.content,
+                      picture: info.c_picture,
+                      url:info.c_url
+                  }
+                  item.data.push(str);
+                }
+              })
+          })
+          console.log(this.appCenterlications);
+        } else {
+          this.appCenterlications = [];
+        }
+      });
+    },
+    handleTabsOpenPage(item){
+        // if(item.url){
+        //   window.open(item.url);
+        // }
+    }
+
   }
 }
 </script>
 
 <style lang="less" scoped>
+
+:deep(.el-carousel__arrow--left) {
+  background: #18a6ff; /* 左箭头背景色 */
+  opacity: 0.8;
+}
+
+:deep(.el-carousel__arrow--right) {
+  background: #18a6ff; /* 右箭头背景色 */
+  opacity: 0.8;
+}
+
 .application-center {
   width: 100%;
   min-height: 100vh;
@@ -186,10 +285,13 @@ export default {
 
 /* 示范应用区域样式 */
 .demo-applications {
-  padding: 60px 20px;
+  // padding: 60px 20px;
 //   max-width: 1400px;
-  width: 80%;
+  // width: 80%;
   margin: 0 auto;
+  padding-left: 120px;
+  padding-right: 120px;
+  padding-bottom: 120px;
 
   .section-title {
     text-align: center;
@@ -306,4 +408,64 @@ export default {
     }
   }
 }
+
+.el-carousel__item:nth-child(2n) {
+    background-color: #01012f;
+    border-radius: 20px;
+  }
+
+  .el-carousel__item:nth-child(2n + 1) {
+    background-color: #01012f;
+    border-radius: 20px;
+}
+
+.warp-container{
+    display: grid;
+    justify-content: flex-start;
+    align-items: center;
+    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+    gap: 30px;
+  .warp-page-card{
+    cursor: pointer;
+    justify-content: flex-start;
+    width: 100%;
+    height: 600px;
+    // display: grid;
+    border: 1px solid transparent;
+    border-radius: 16px;
+    background-clip: padding-box, border-box;
+    background-origin: padding-box, border-box;
+    background-image: linear-gradient(345deg, #08113e, #2220), linear-gradient(345deg, #fffdfd6b, #00000000, #00000000, #00000000);
+    .warp-page-img{
+      cursor: pointer;
+      height: 400px;
+      background-size: cover;
+      border-radius: 16px 16px 0px 0px;
+    }
+    .warp-page-text{
+      padding: 0px 20px 20px 20px;
+      // height: 200px;
+      // font-size: 24px;
+      color: #c7c2c2;
+      .warp-page-text-title{
+        font-weight: bold;
+        margin: 10px 0px;
+        color: #ffffff;
+      }
+      .warp-page-text-desc{
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 5; /* 限制显示4行 */
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+    transition: all 0.3s ease;
+    // &:hover {
+    //   background-color: #152736;
+    //   transform: translateY(-5px);
+    //   box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
+    // }
+  }
+}
 </style>

src/views/yygl/monitor/index.vue

@@ -555,7 +555,8 @@ export default {
 /* 右侧主内容区 */
 .main-content {
   flex: 1;
-  padding: 20px 30px;
+  // padding: 20px 30px;
+  padding: 20px 30px 100px 20px;
   overflow-y: auto;
 }
 

src/views/yygl/overview/index.vue

@@ -20,12 +20,17 @@
             
 
             <!-- 应用范围过滤 -->
-            <div class="filter-tabs">
+            <!-- <div class="filter-tabs">
                 <el-radio-group v-model="activeTab" size="medium" @change="handleTabChange" v-for="item in buffOptions" :key="item.value">
                     <el-radio-button :label="item.label">{{ item.value }}</el-radio-button>
-                    <!-- <el-radio-button label="1">区级</el-radio-button>
-                    <el-radio-button label="2">街镇</el-radio-button> -->
                 </el-radio-group>
+            </div> -->
+
+            <!-- 应用标签过滤 -->
+            <div class="filter-group">
+              <el-radio-group v-model="tagFilter" size="medium" @change="handleTagFilterChange" v-for="item in tagOptions" :key="item.value">
+                <el-radio-button :label="item.label">{{ item.value }}</el-radio-button>
+              </el-radio-group>
             </div>
         </div>
     
@@ -33,7 +38,13 @@
       <div class="app-content">
         <div class="applications-grid">
           <div class="application-card" v-for="(app, index) in applications" :key="index">
+            
             <div class="card-image">
+              <div v-if="app.issf != '0'" style="position: absolute;background: #0e3a74;border-radius: 5px 0px 5px 0px;width: 30px;height: 30px;">
+                <el-icon :size="20" color="yellow" style="position: relative;left: 5px;top: 5px;">
+                  <StarFilled />
+                </el-icon>
+              </div>
               <img :src="curUrl + app.c_picture" :alt="app.title" />
             </div>
             <div class="card-content">
@@ -79,6 +90,7 @@ export default {
     return {
       searchKeyword: '',
       activeTab: 'all',
+      tagFilter: sessionStorage.getItem('activeTag') ? parseInt(sessionStorage.getItem('activeTag')) : 'all',
       curUrl:systemConfig.dmsDataProxy,
       buffOptions: [],
       tagOptions: [],
@@ -98,6 +110,15 @@ export default {
         this.applications = this.itemApplications.filter(item => item.appbuff == this.activeTab);
       }
     },
+    handleTagFilterChange() {
+      if (this.tagFilter == 'all') {
+        sessionStorage.setItem('activeTag', "");
+        this.applications = this.itemApplications;
+      } else {
+        sessionStorage.setItem('activeTag', this.tagFilter);
+        this.applications = this.itemApplications.filter(item => item.apptags.split(",").includes(this.tagFilter.toString()));
+      }
+    },
     initData() {
       this.getDmsCNameAType();
       this.getDmsTagSName();
@@ -190,7 +211,8 @@ export default {
             createTime: moment(item.create_time).format('YYYY-MM-DD HH:mm:ss')
           }))
           this.applications = this.itemApplications;
-          this.handleTabChange();
+          // this.handleTabChange();
+          this.handleTagFilterChange();
         } else {
           this.applications = [];
         }
@@ -307,6 +329,7 @@ export default {
     width: 100%;
     height: 160px;
     overflow: hidden;
+    position: relative;
 
     img {
       width: 100%;
@@ -315,9 +338,9 @@ export default {
       transition: transform 0.3s ease;
     }
 
-    &:hover img {
-      transform: scale(1.05);
-    }
+    // &:hover img {
+    //   transform: scale(1.05);
+    // }
   }
 
   .card-content {