微功能界面调整

public/index.html

@@ -26,6 +26,14 @@
 </body>
 
 <style>
+
+@font-face {
+  font-family: 'din-bold';
+  src: url('./static/font/DIN-Bold/din-bold-2.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
   :root {
 
     /* 滚动条整体部分，必须要设置 */

src/components/AppVue/Header.vue

@@ -87,7 +87,7 @@ export default {
         cursor: pointer;
         // margin: 10px 20px;
         padding: 10px 20px;
-        font-size: 16px;
+        font-size: 14px;
         // font-weight: bold;
       }
 

src/components/AppVue/digitalScrollersComp.vue

@@ -93,7 +93,7 @@ watch(
 }
  
 .count-flop-content {
-  font-family: MicrosoftYaHei-Bold;
+  font-family: 'din-bold';
   text-align: center;
   position: absolute;
   left: 0;

src/components/AppVue/numberScroll.vue

@@ -1,5 +1,5 @@
 <template>
-  <span ref="numberEl">{{ displayValue }}</span>
+  <span ref="numberEl" style="font-family: 'din-bold';">{{ displayValue }}</span>
 </template>
 
 <script setup>

src/components/yxgl/table.vue

@@ -42,10 +42,10 @@ export default {
   computed: {
     headerCellStyle() {
       return {
-        backgroundColor: "rgba(24, 144, 255, 0.25)",
-        color: "#0071e3",
+        // backgroundColor: "rgba(24, 144, 255, 0.25)",
+        color: "#fff",
         fontWeight: "bold",
-        borderBottom: "2px solid rgba(24, 144, 255, 0.3)",
+        // borderBottom: "2px solid rgba(24, 144, 255, 0.3)",
         padding: "12px 8px",
       };
     },

src/views/HomePage.vue

@@ -175,7 +175,7 @@
             <!-- <el-icon color="#0071e3" size="30px">
               <List></List>
             </el-icon> -->
-            <div>热点资源 Top10</div>
+            <div>热点资源 TOP10</div>
           </div>
           <div class="row">
             <div class="top-list" style="flex-grow: 1;">
@@ -210,7 +210,7 @@
             <!-- <el-icon color="#0071e3" size="30px">
               <School />
             </el-icon> -->
-            <div>委办调用 Top5</div>
+            <div>委办调用 TOP5</div>
           </div>
           <div class="top-list">
             <div v-for="index in 5" :key="index" class="list-item">

src/views/Wgn.vue

@@ -1,97 +1,80 @@
 <template>
-  <div class="wgn_box">
-    <!-- <div class="server_title">
-      <el-image
-        style="width: 50%; height: calc(100vh - 120px)"
-        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 class="server_title_text_btu" v-if="$getUserType() == 3"> -->
-          <!-- 先打开弹窗，然后上传文件保存信息到DMS的任务表，同时发送任务到微功能子系统，微功能子系统处理完成后，更新任务状态 -->
-          <!-- <el-button type="primary" round plain size="large" @click="createTask"
-            >大批量数据处理任务<el-icon><Position /></el-icon
-          ></el-button>
-        </div>
-      </div>
-    </div> -->
-
-    <!-- 顶部横幅区域 -->
-    <div class="banner">
-      <div class="banner-content">
-        <h1 class="banner-title">微功能服务</h1>
-        <p class="banner-description">
-          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;微功能子系统专注于提供强大的空间计算与数据处理能力，是支撑青浦区三维数字底板空间分析与数据流转的核心模块，聚焦“精准计算 + 灵活处理”两大核心能力，所有功能均以标准化服务接口形式对外提供（支持第三方委办、上层应用系统调用），同时在系统内部集成可视化操作界面，实现“计算 - 分析 - 展示” 闭环。
-        </p>
-        <div v-if="$getUserType() == 3">
-           <el-button type="primary" round plain size="large" @click="createTask"
-            >大批量数据处理任务<el-icon><Position /></el-icon
-          ></el-button>
-        </div>
-      </div>
-    </div>
+  <el-affix :offset="0">
+    <div style="height: 44px;width: 100vw;background: #00002a;"></div>
+  </el-affix>
+  <el-affix :offset="44">
+  <div class="application-overview">
+    <!-- 右侧主内容区 -->
+    <div class="main-content">
+        <div style="display: flex;justify-content: space-between;padding-right: 30px;">
+            <!-- 搜索栏 -->
+            <div class="search-bar">
+                <el-input
+                    placeholder="输入搜索关键词"
+                    v-model="searchStr"
+                    class="search-input"
+                    >
+                </el-input>
+                <el-button type="primary" class="search-btn" @click="searchServerList">搜索</el-button>
+                <!-- <span>搜索到{{total}}条微功能服务</span> -->
+            </div>
 
-    <div class="server_list_box">
-      <div class="server_list_box_title">微功能列表</div>
-      <el-affix :offset="80">
-        <div class="server_list_box_search">
-          <el-input
-            v-model="searchStr"
-            style="width: 525px; margin-left: 37px"
-            placeholder="输入搜索关键词"
-            class="input-with-select"
-            clearable
-            size="large"
-            @change="searchServerList()"
-          >
-            <template #append>
-              <el-button icon="Search" @click="searchServerList()" />
-            </template>
-          </el-input>
+            <div>
+              <el-button type="primary" class="search-btn" @click="createTask">大批量数据处理任务</el-button>
+                <!-- <el-button type="primary" round plain size="large" @click="createTask"
+                  >大批量数据处理任务<el-icon><Position /></el-icon
+                ></el-button> -->
+            </div>
+            
         </div>
-      </el-affix>
-      <div class="server_list_box_table" v-if="dmsServerList">
-        <div
-          v-for="item in dmsServerList"
-          :key="item.c_scene_name"
-          class="server_list_box_table_item"
-          :id="item.c_scene_name + '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.content }}</div>
-            <div class="server_list_box_table_item_content_button_box">
-              <div
-                class="server_list_box_table_item_content_button_box_item"
-                @click.stop="handleOnlineDemo(item)"
-              >
-                在线演示
+    
+      <!-- 应用卡片网格 -->
+      <div class="wgn-content">
+        <div class="applications-grid">
+          <div class="application-card" v-for="(item, index) in dmsServerList" :key="index">
+            
+            <div class="card-image">
+              <img :src="curUrl + item.c_picture" :alt="item.title" />
+            </div>
+            <div class="card-content">
+              <div class="wgn-header">
+                <h3 class="wgn-name">{{ item.title }}</h3>
+                <!-- <span class="wgn-version">{{ item.version }}</span> -->
               </div>
-              <div
-                class="server_list_box_table_item_content_button_box_item"
-                @click.stop="handleApply(item)"
-              >
-                申请使用
+              <!-- <div class="wgn-tags">
+                <el-tag size="small" type="success">{{ item.buffName }}</el-tag>
+                <el-tag size="small" v-for="tag in item.tags" :key="tag">{{ tag }}</el-tag>
+              </div> -->
+               <el-tooltip placement="top" effect="dark">
+                <template #content>
+                  <div style="max-width: 500px;">{{ item.content }}</div>
+                </template>
+                <p class="wgn-description">{{ item.content }}</p>
+              </el-tooltip>
+              <div class="wgn-footer">
+                <!-- <span class="wgn-date">{{ item.createTime }}</span> -->
+                <el-button
+                  type="primary"
+                  size="small"
+                  class="visit-button"
+                  @click="handleOnlineDemo(item)"
+                  >在线演示</el-button
+                >
+                <el-button
+                  type="primary"
+                  size="small"
+                  class="visit-button"
+                  @click="handleApply(item)"
+                  >申请使用</el-button
+                >
               </div>
             </div>
           </div>
-          <div class="server_list_box_table_item_image">
-            <el-image
-              style="width: 690px; height: 410px"
-              :src="dmsDataProxy + item.c_picture"
-              fit="cover"
-            />
-          </div>
         </div>
       </div>
-      <!-- 申请使用微功能服务的表单弹窗 -->
+
+
+       <!-- 申请使用微功能服务的表单弹窗 -->
       <el-dialog
         title="申请使用微功能服务"
         v-model="showFrom"
@@ -297,23 +280,26 @@
           </div>
         </template>
       </el-dialog>
+
     </div>
   </div>
+  </el-affix>
 </template>
 
 <script>
 import { ElNotification } from "element-plus";
+import moment from "moment";
 import api from "@/api/content";
 export default {
-  name: "微功能服务",
+  name: "ApplicationOverview",
   data() {
     return {
+      total: 0,
+      curUrl:systemConfig.dmsDataProxy,
       // 搜索关键词
       searchStr: "",
       // 微功能服务列表
       dmsServerList: [],
-      // DMS数据代理地址
-      dmsDataProxy: "",
       // 是否显示申请使用微功能服务的表单弹窗
       showFrom: false,
       // 是否显示创建任务的表单弹窗
@@ -483,15 +469,17 @@ export default {
       },
       // 搜索微功能服务的防抖定时器
       searchTimeout: null,
+
     };
   },
   mounted() {
-    this.dmsDataProxy = systemConfig.dmsDataProxy;
     // 任务负责人默认为当前登录用户
     this.taskColumn.from.c_user_id = this.$store.state.userInfo.id;
     // 任务创建人用户名默认为当前登录用户用户名
     this.taskColumn.from.c_user_name = this.$store.state.userInfo.username;
     this.searchServerList();
+
+
   },
   methods: {
     includesKey(keys) {
@@ -503,91 +491,34 @@ export default {
       });
       return hasKey;
     },
-    handleTCUpload(emit) {
-      // 上传任务文件
-      let formData = new FormData();
-      formData.append("file", emit.file);
-      formData.append("columnId", this.taskColumn.columnId);
-      formData.append("type", 0);
-      formData.append("paraName", emit.file.name);
-      api
-        .uploadFile(formData)
-        .then((res) => {
-          if (res.code === 200) {
-            this.taskColumn.from.c_source_file_name = emit.file.name;
-            this.taskColumn.from.c_source_file = res.content;
-            ElNotification.success({
-              title: "成功",
-              message: "上传任务文件成功",
-              offset: 80,
-            });
-          } else {
-            ElNotification.error({
-              title: "失败",
-              message: "上传任务文件失败" + res.msg,
-              offset: 80,
-            });
-          }
-        })
-        .catch((e) => {
-          ElNotification.error({
-            title: "失败",
-            message: "上传任务文件失败" + e,
-            offset: 80,
-          });
-        });
+    // 申请使用微功能服务
+    handleApply(item) {
+      // 申请使用微功能服务时，先从localStorage中获取数据，填充到表单中
+      let applyInfo = localStorage.getItem("wgnApplyInfo");
+      if (applyInfo) {
+        this.column.from = JSON.parse(applyInfo);
+      }
+      // 先打开弹窗，显示from表单，用户输入表单数据并提交
+      this.column.from.c_interface_path = item.c_url;
+      this.showFrom = true;
     },
-    changeTaskType() {
-      if (this.taskColumn.from.c_type) {
-        // 先把任务类型每个字符中间都添加一个句号
-        let serviceId = this.taskColumn.from.c_type.split("").join(".");
-        // 根据任务类型获取任务参数
-        api
-          .getSimpleContentList({
-            columnId: systemConfig.columnIds[5],
-            states: 0,
-            pageSize: 1,
-            page: 0,
-            search: JSON.stringify([
-              {
-                field: "c_scene_name",
-                searchType: 1,
-                content: { value: serviceId },
-              },
-            ]),
-          })
-          .then((res) => {
-            if (res.code === 200) {
-              let apiInfo = res.content.data[0];
-              // 接口描述
-              this.taskColumn.apiFrom.apiDescription = apiInfo.content;
-              // 接口参数规则
-              this.taskColumn.apiFrom.apiParameterRules = JSON.parse(
-                apiInfo.c_input_parameter_rules
-              );
-              // 接口路径
-              this.taskColumn.apiFrom.apiUrl = apiInfo.c_url;
-            } else {
-              this.taskColumn.apiFrom.apiDescription = "";
-              this.taskColumn.apiFrom.apiParameterRules = [];
-              this.taskColumn.apiFrom.apiUrl = "";
-              ElNotification.error({
-                title: "失败",
-                message: "获取任务参数失败" + res.msg,
-                offset: 80,
-              });
-            }
-          })
-          .catch((e) => {
-            this.taskColumn.apiFrom.apiDescription = "";
-            this.taskColumn.apiFrom.apiParameterRules = "";
-            ElNotification.error({
-              title: "失败",
-              message: "获取任务参数失败" + e,
-              offset: 80,
-            });
-          });
-        this.taskColumn.from.c_source_data = {};
+    // 在线演示微功能服务
+    handleOnlineDemo(item) {
+      let routerPath = {};
+      // 1. 解析目标路由（支持传参、命名路由等）
+      if (item.c_scene_name == "view") {
+        routerPath = {
+          path: item.c_url,
+        };
+        this.$router.push(routerPath);
+      } else {
+        routerPath = {
+          path: "/wgnSingle", // 微功能
+          query: { sceneId: item.c_scene_name },
+        };
+        const routeData = this.$router.resolve(routerPath);
+        // 2. 打开新窗口（_blank 表示新窗口）
+        window.open(routeData.href, "_blank");
       }
     },
     // 搜索微功能服务
@@ -617,41 +548,81 @@ export default {
           .getSimpleContentList(requestParams)
           .then((res) => {
             if (res.code === 200) {
-              this.dmsServerList = res.content.data;
-              ElNotification.success({
-                title: "成功",
-                message: "搜索到" + this.dmsServerList.length + "条微功能服务",
-                offset: 80,
-              });
+              // this.dmsServerList = res.content.data;
+              this.dmsServerList = res.content.data.map((item) => ({
+                ...item,
+                createTime: moment(item.create_time).format('YYYY-MM-DD HH:mm:ss')
+              }))
+              this.total = this.dmsServerList.length;
+              // ElNotification.success({
+              //   title: "成功",
+              //   message: "搜索到" + this.dmsServerList.length + "条微功能服务",
+              //   offset: 80,
+              // });
             } else {
-              ElNotification.error({
-                title: "失败",
-                message: "搜索到0条微功能服务",
-                offset: 80,
-              });
+              this.total = 0;
+              // ElNotification.error({
+              //   title: "失败",
+              //   message: "搜索到0条微功能服务",
+              //   offset: 80,
+              // });
             }
           })
           .catch((e) => {
-            ElNotification.error({
-              title: "失败",
-              message: "搜索微功能服务失败" + e,
-              offset: 80,
-            });
+            this.total = 0;
+            // ElNotification.error({
+            //   title: "失败",
+            //   message: "搜索微功能服务失败" + e,
+            //   offset: 80,
+            // });
           });
       }, 0);
     },
-    // 申请使用微功能服务
-    handleApply(item) {
-      // 申请使用微功能服务时，先从localStorage中获取数据，填充到表单中
-      let applyInfo = localStorage.getItem("wgnApplyInfo");
-      if (applyInfo) {
-        this.column.from = JSON.parse(applyInfo);
-      }
-      // 先打开弹窗，显示from表单，用户输入表单数据并提交
-      this.column.from.c_interface_path = item.c_url;
-      this.showFrom = true;
+    // 提交申请使用微功能服务表单
+    handleApplySubmit() {
+      let that = this;
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          // 提交时把信息添加到localStorage中,下次打开弹窗时，从localStorage中获取数据，填充到表单中
+          localStorage.setItem("wgnApplyInfo", JSON.stringify(that.column.from));
+          // 标题：电话+时间
+          that.column.from.title =
+            that.column.from.c_unit_name +
+            "_" +
+            that.column.from.c_business_leader +
+            "_" +
+            that.column.from.c_phone;
+          // 备注：申请使用微功能服务的详细信息
+          let params = {
+            content: JSON.stringify(that.column.from),
+            columnId: that.column.columnId,
+            modelId: that.column.modelId,
+          };
+          api.addContent(params).then((res) => {
+            if (res.code === 200) {
+              // 确认申请使用
+              that.$message({
+                message: "申请成功，请等待审核通过后工作人员专人联系，请保持电话通畅！",
+                type: "success",
+              });
+              that.showFrom = false;
+            } else {
+              that.$message({
+                message: "申请使用" + item.title + "失败" + res.msg,
+                type: "error",
+              });
+            }
+          });
+        } else {
+          // 表单验证失败，提示用户填写完整信息
+          that.$message({
+            message: "请填写完整信息",
+            type: "warning",
+          });
+        }
+      });
     },
-    // 创建任务
+      // 创建任务
     createTask() {
       // 打开弹窗，显示任务创建表单
       this.showTaskFrom = true;
@@ -704,273 +675,256 @@ export default {
         }
       });
     },
-    // 提交申请使用微功能服务表单
-    handleApplySubmit() {
-      let that = this;
-      this.$refs.formRef.validate((valid) => {
-        if (valid) {
-          // 提交时把信息添加到localStorage中,下次打开弹窗时，从localStorage中获取数据，填充到表单中
-          localStorage.setItem("wgnApplyInfo", JSON.stringify(that.column.from));
-          // 标题：电话+时间
-          that.column.from.title =
-            that.column.from.c_unit_name +
-            "_" +
-            that.column.from.c_business_leader +
-            "_" +
-            that.column.from.c_phone;
-          // 备注：申请使用微功能服务的详细信息
-          let params = {
-            content: JSON.stringify(that.column.from),
-            columnId: that.column.columnId,
-            modelId: that.column.modelId,
-          };
-          api.addContent(params).then((res) => {
-            if (res.code === 200) {
-              // 确认申请使用
-              that.$message({
-                message: "申请成功，请等待审核通过后工作人员专人联系，请保持电话通畅！",
-                type: "success",
-              });
-              that.showFrom = false;
-            } else {
-              that.$message({
-                message: "申请使用" + item.title + "失败" + res.msg,
-                type: "error",
-              });
-            }
-          });
-        } else {
-          // 表单验证失败，提示用户填写完整信息
-          that.$message({
-            message: "请填写完整信息",
-            type: "warning",
-          });
-        }
-      });
-    },
-    // 在线演示微功能服务
-    handleOnlineDemo(item) {
-      let routerPath = {};
-      // 1. 解析目标路由（支持传参、命名路由等）
-      if (item.c_scene_name == "view") {
-        routerPath = {
-          path: item.c_url,
-        };
-        this.$router.push(routerPath);
-      } else {
-        routerPath = {
-          path: "/wgnSingle", // 微功能
-          query: { sceneId: item.c_scene_name },
-        };
-        const routeData = this.$router.resolve(routerPath);
-        // 2. 打开新窗口（_blank 表示新窗口）
-        window.open(routeData.href, "_blank");
-      }
-    },
   },
 };
 </script>
 
 <style lang="less" scoped>
-.wgn_box {
-  width: 100vw;
-  margin: 0 auto;
-  background-color: #08224a;
+.application-overview {
+  display: fixed !important;
+  width: 100%;
+  height: 100vh;
+  // background-color: #08224a;
+  background-color: #00002a;
+  color: #ffffff;
 }
-.server_title {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+
+/* 右侧主内容区 */
+.main-content {
+  flex: 1;
+  padding: 20px 100px;
+  overflow-y: auto;
 }
-.server_title_text {
-  width: calc(77vw - 200px);
-  height: calc(100vh - 120px);
-  background-color: #1c2631;
-  color: #fff;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  overflow: hidden;
-  padding: 0 100px;
-  &_title {
-    font-size: 64px;
-    font-weight: bold;
-    // letter-spacing: 0.5rem;
+
+/* 搜索栏样式 */
+.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);
+    // }
   }
-  &_content {
-    margin-top: 77px;
-    font-size: 22px;
+  .search-btn {
+    margin-left: 10px;
   }
-  &_btu {
-    margin-top: 77px;
-    font-size: 22px;
-    // letter-spacing: 0.2rem;
-    color: #4095e5;
+}
+
+/* 过滤标签样式 */
+.filter-tabs {
+  margin-bottom: 30px;
+
+  :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;
+        }
+      }
+    }
   }
 }
-.anchor_box {
-  background: #ffffff32;
-  float: left;
+.wgn-content{
+    // height: 640px;
+    height: calc(100vh - 160px);
+    overflow: auto;
+    padding-right: 20px;
+}
+
+/* 应用卡片网格样式 */
+.applications-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 25px;
 }
-.server_list_box {
-  width: 100vw;
-  background-color: #00002e;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: #fff;
-  position: relative;
-  &_menu {
-    position: absolute;
-    top: 100px;
-    left: 10px;
-    z-index: 1;
+
+/* 应用卡片样式 */
+.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);
   }
-  &_title {
-    margin: 100px 0;
-    font-size: 35px;
-    font-weight: bold;
+
+  .card-image {
+    width: 100%;
+    height: 160px;
+    overflow: hidden;
     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);
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transition: transform 0.3s ease;
     }
+
+    // &:hover img {
+    //   transform: scale(1.05);
+    // }
+  }
+
+  .card-content {
+    padding: 15px;
   }
-  &_search {
-    // margin-top: 100px;
-    font-size: 25px;
+
+  .wgn-header {
     display: flex;
-    flex-wrap: nowrap;
+    justify-content: space-between;
     align-items: center;
-    width: -webkit-fill-available;
-    justify-content: center;
-    .input-with-select {
-      background: #08224a;
+    margin-bottom: 10px;
+
+    .wgn-name {
+      font-size: 16px;
+      font-weight: bold;
+      margin: 0;
+      color: #ffffff;
     }
-  }
-  &_table {
-    margin-top: 50px;
-    width: 100vw;
-    &_item {
-      display: flex;
-      justify-content: space-evenly;
-      align-items: center;
-      padding: 100px 0;
-
-      &:nth-child(odd) {
-        flex-direction: row;
-      }
-      &:nth-child(even) {
-        flex-direction: row-reverse;
-      }
-      &_content {
-        width: 760px;
-        height: 100px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        &_title {
-          font-size: 35px;
-          font-weight: bold;
-          color: #fff;
-        }
-        &_text {
-          margin-top: 35px;
-          font-size: 18px;
-        }
-        &_button_box {
-          display: flex;
-          justify-content: space-evenly;
-          width: 100%;
-          &_item {
-            margin-top: 35px;
-            font-size: 20px;
-            // letter-spacing: 0.2rem;
-            color: #4095e5;
-            border: 1px solid #4095e5;
-            border-radius: 10px;
-            padding: 10px 36px;
-            cursor: pointer;
-            &:hover {
-              background-color: #4095e5;
-              color: #fff;
-            }
-          }
-        }
-      }
-      &_image {
-        width: 690px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border-radius: 30px;
-        overflow: hidden;
-      }
+    .wgn-level {
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.6);
+      background-color: rgba(27, 117, 236, 0.8);
+      padding: 2px 6px;
+      border-radius: 4px;
+    }
+
+    .wgn-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;
     }
   }
-}
-/* 顶部横幅样式 */
-.banner {
-  width: 100%;
-  // height: calc(100vh - 120px);
-  height: 552px;
-  background: url('@static/images/wgn/bg.png');
-  background-size: cover;
-  display: flex;
-  justify-content: right;
-  align-items: start;
-  position: relative;
-  overflow: hidden;
 
-  .banner-content {
-    position: relative;
-    z-index: 2;
-    text-align: right;
-    max-width: 500px;
-    padding: 0 10%;
-    justify-content: right;
-    display: grid;
-    padding-top: 100px;
+  .wgn-tags {
+    margin-bottom: 10px;
+
+    .el-tag {
+      margin-right: 5px;
+      margin-bottom: 5px;
+    }
   }
 
-  .banner-title {
-    font-size: 56px;
-    font-weight: bold;
-    // letter-spacing: 0.5rem;
-    // margin-bottom: 20px;
-    color: #ffffff;
-    text-align: right;
-    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+  .wgn-description {
+    font-size: 13px;
+    line-height: 1.6;
+    height: 40px;
+    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;
   }
 
-  .banner-description {
-    font-size: 16px;
-    // line-height: 1.8;
-    margin: 20px 0px;
-    text-align: left;
-    color: rgba(255, 255, 255, 0.9);
+  .wgn-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .wgn-date {
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.5);
+    }
+
+    .visit-button {
+      padding: 4px 12px;
+      font-size: 12px;
+      border-radius: 4px;
+    }
   }
+}
 
-  .enter-button {
-    padding: 12px 36px;
-    font-size: 18px;
-    border-radius: 10px;
-    background-color: #1890ff;
-    border: none;
-    transition: all 0.3s ease;
+/* 加载更多按钮 */
+.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: #40a9ff;
-      transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
+      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>

src/views/WgnLast.vue

@@ -0,0 +1,976 @@
+<template>
+  <div class="wgn_box">
+    <!-- <div class="server_title">
+      <el-image
+        style="width: 50%; height: calc(100vh - 120px)"
+        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 class="server_title_text_btu" v-if="$getUserType() == 3"> -->
+          <!-- 先打开弹窗，然后上传文件保存信息到DMS的任务表，同时发送任务到微功能子系统，微功能子系统处理完成后，更新任务状态 -->
+          <!-- <el-button type="primary" round plain size="large" @click="createTask"
+            >大批量数据处理任务<el-icon><Position /></el-icon
+          ></el-button>
+        </div>
+      </div>
+    </div> -->
+
+    <!-- 顶部横幅区域 -->
+    <div class="banner">
+      <div class="banner-content">
+        <h1 class="banner-title">微功能服务</h1>
+        <p class="banner-description">
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;微功能子系统专注于提供强大的空间计算与数据处理能力，是支撑青浦区三维数字底板空间分析与数据流转的核心模块，聚焦“精准计算 + 灵活处理”两大核心能力，所有功能均以标准化服务接口形式对外提供（支持第三方委办、上层应用系统调用），同时在系统内部集成可视化操作界面，实现“计算 - 分析 - 展示” 闭环。
+        </p>
+        <div v-if="$getUserType() == 3">
+           <el-button type="primary" round plain size="large" @click="createTask"
+            >大批量数据处理任务<el-icon><Position /></el-icon
+          ></el-button>
+        </div>
+      </div>
+    </div>
+
+    <div class="server_list_box">
+      <div class="server_list_box_title">微功能列表</div>
+      <el-affix :offset="80">
+        <div class="server_list_box_search">
+          <el-input
+            v-model="searchStr"
+            style="width: 525px; margin-left: 37px"
+            placeholder="输入搜索关键词"
+            class="input-with-select"
+            clearable
+            size="large"
+            @change="searchServerList()"
+          >
+            <template #append>
+              <el-button icon="Search" @click="searchServerList()" />
+            </template>
+          </el-input>
+        </div>
+      </el-affix>
+      <div class="server_list_box_table" v-if="dmsServerList">
+        <div
+          v-for="item in dmsServerList"
+          :key="item.c_scene_name"
+          class="server_list_box_table_item"
+          :id="item.c_scene_name + '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.content }}</div>
+            <div class="server_list_box_table_item_content_button_box">
+              <div
+                class="server_list_box_table_item_content_button_box_item"
+                @click.stop="handleOnlineDemo(item)"
+              >
+                在线演示
+              </div>
+              <div
+                class="server_list_box_table_item_content_button_box_item"
+                @click.stop="handleApply(item)"
+              >
+                申请使用
+              </div>
+            </div>
+          </div>
+          <div class="server_list_box_table_item_image">
+            <el-image
+              style="width: 690px; height: 410px"
+              :src="dmsDataProxy + item.c_picture"
+              fit="cover"
+            />
+          </div>
+        </div>
+      </div>
+      <!-- 申请使用微功能服务的表单弹窗 -->
+      <el-dialog
+        title="申请使用微功能服务"
+        v-model="showFrom"
+        width="60%"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :show-close="true"
+      >
+        <el-form :model="column.from" :rules="rules" ref="formRef" label-width="120px">
+          <el-form-item label="应用名称" prop="c_application_name">
+            <el-input
+              v-model="column.from.c_application_name"
+              placeholder="请输入应用名称"
+            />
+          </el-form-item>
+          <el-form-item label="接口路径" prop="c_interface_path">
+            <el-input
+              v-model="column.from.c_interface_path"
+              disabled
+              placeholder="请输入接口路径"
+            />
+          </el-form-item>
+          <el-form-item label="联系电话" prop="c_phone">
+            <el-input v-model="column.from.c_phone" placeholder="请输入联系电话" />
+          </el-form-item>
+          <el-form-item label="单位名称" prop="c_unit_name">
+            <el-input v-model="column.from.c_unit_name" placeholder="请输入单位名称" />
+          </el-form-item>
+          <el-form-item label="部门名称" prop="c_department">
+            <el-input v-model="column.from.c_department" placeholder="请输入部门名称" />
+          </el-form-item>
+          <!-- 项目负责人 -->
+          <el-form-item label="项目负责人" prop="c_business_leader">
+            <el-input
+              v-model="column.from.c_business_leader"
+              placeholder="请输入项目负责人"
+            />
+          </el-form-item>
+          <!-- 申请使用微功能服务的详细信息 -->
+          <el-form-item label="申请使用微功能服务的详细信息" prop="content">
+            <el-input
+              type="textarea"
+              v-model="column.from.content"
+              placeholder="请输入申请使用微功能服务的详细信息"
+            />
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <div class="dialog-footer">
+            <el-button @click="showFrom = false">取消</el-button>
+            <el-button type="primary" @click="handleApplySubmit">确定</el-button>
+          </div>
+        </template>
+      </el-dialog>
+      <!-- 创建任务的表单弹窗 -->
+      <el-dialog
+        title="创建任务"
+        v-model="showTaskFrom"
+        width="60%"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :show-close="true"
+      >
+        <el-form
+          :model="taskColumn.from"
+          :rules="taskColumn.rules"
+          ref="taskFormRef"
+          label-width="120px"
+        >
+          <el-form-item label="任务名称" prop="c_name">
+            <el-input
+              v-model="taskColumn.from.c_name"
+              placeholder="请输入任务名称"
+              clearable
+            >
+              <template #prepend>{{
+                $moment(new Date()).format("YYMMDD_HHmm") +
+                "_" +
+                (taskColumn.from.c_type
+                  ? $getDmsTypes("yzt_task_type", taskColumn.from.c_type) + "_"
+                  : "")
+              }}</template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="任务备注" prop="c_comment">
+            <el-input
+              type="textarea"
+              clearable
+              v-model="taskColumn.from.c_comment"
+              placeholder="请输入任务备注"
+            />
+          </el-form-item>
+          <!-- 下拉框选择任务类型 -->
+          <el-form-item label="任务类型" prop="c_type">
+            <el-select
+              v-model="taskColumn.from.c_type"
+              @change="changeTaskType"
+              placeholder="请选择任务类型"
+            >
+              <el-option
+                v-for="(name, index) in $store.state.DmsTypesMap['yzt_task_type']"
+                :key="index"
+                :label="name"
+                :value="index"
+              />
+            </el-select>
+          </el-form-item>
+          <!-- 渲染任务描述:仅查看 -->
+          <el-form-item
+            label="任务描述"
+            prop="apiDescription"
+            v-if="taskColumn.apiFrom.apiDescription"
+          >
+            <el-input
+              type="textarea"
+              disabled
+              v-model="taskColumn.apiFrom.apiDescription"
+            />
+          </el-form-item>
+          <!-- 任务文件是必须的 -->
+          <el-form-item label="任务文件" prop="c_source_file">
+            <el-input disabled v-model="taskColumn.from.c_source_file" v-show="false" />
+            <el-upload class="avatar-uploader" :http-request="handleTCUpload" :limit="1">
+              <el-button size="small" type="primary">点击上传</el-button>
+            </el-upload>
+          </el-form-item>
+          <el-divider />
+          <!-- 其他参数数据 -->
+          <el-form-item label="其他参数数据" prop="c_source_data" v-show="false">
+            <el-input
+              type="textarea"
+              clearable
+              v-model="taskColumn.from.c_source_data"
+              placeholder="请输入其他参数数据"
+            />
+          </el-form-item>
+          <div
+            v-if="
+              taskColumn.apiFrom.apiParameterRules &&
+              includesKey(['lonKey', 'latKey', 'outFileType', 'inPrj', 'outPrj'])
+            "
+          >
+            <template
+              v-for="(rulesItem, index) in taskColumn.apiFrom.apiParameterRules"
+              :key="index"
+            >
+              <el-form-item
+                v-if="
+                  ['lonKey', 'latKey', 'outFileType', 'inPrj', 'outPrj'].includes(
+                    rulesItem
+                  )
+                "
+                :label="rulesItem"
+              >
+                <el-input
+                  v-if="['lonKey', 'latKey'].includes(rulesItem)"
+                  v-model="taskColumn.from.c_source_data[rulesItem]"
+                  placeholder="当文件为xlsx时必填"
+                />
+                <el-select
+                  v-if="['outFileType', 'inPrj', 'outPrj'].includes(rulesItem)"
+                  v-model="taskColumn.from.c_source_data[rulesItem]"
+                  :placeholder="'请选择' + rulesItem"
+                >
+                  <el-option
+                    v-for="item in taskColumn.selectOptions[rulesItem]"
+                    :key="'wgn-task-selectOptions-form-' + item.label"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </template>
+          </div>
+          <!-- 任务状态默认为初始化 -->
+          <el-form-item label="任务状态" prop="c_state" v-show="false">
+            <el-select
+              disabled
+              v-model="taskColumn.from.c_state"
+              placeholder="请选择任务状态"
+            >
+              <el-option
+                v-for="(name, index) in $store.state.DmsTypesMap['task_status']"
+                :key="'wgn-task-form-' + index"
+                :label="name"
+                :value="index"
+              />
+            </el-select>
+          </el-form-item>
+          <!-- 任务负责人默认为当前登录用户 -->
+          <el-form-item label="用户id" prop="c_user_id" v-show="false">
+            <el-input disabled v-model="taskColumn.from.c_user_id" />
+          </el-form-item>
+          <!-- 任务负责人默认为当前登录用户 -->
+          <el-form-item label="用户名" prop="c_user_name" v-show="false">
+            <el-input disabled v-model="taskColumn.from.c_user_name" />
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <div class="dialog-footer">
+            <el-button @click="showTaskFrom = false">取消</el-button>
+            <el-button type="primary" @click="handleTaskSubmit">确定</el-button>
+          </div>
+        </template>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ElNotification } from "element-plus";
+import api from "@/api/content";
+export default {
+  name: "微功能服务",
+  data() {
+    return {
+      // 搜索关键词
+      searchStr: "",
+      // 微功能服务列表
+      dmsServerList: [],
+      // DMS数据代理地址
+      dmsDataProxy: "",
+      // 是否显示申请使用微功能服务的表单弹窗
+      showFrom: false,
+      // 是否显示创建任务的表单弹窗
+      showTaskFrom: false,
+      // 申请使用微功能服务的表单验证规则
+      rules: {
+        c_application_name: [
+          { required: true, message: "请输入应用名称", trigger: "blur" },
+        ],
+        c_interface_path: [
+          { required: true, message: "请输入接口路径", trigger: "blur" },
+        ],
+        c_business_leader: [
+          { required: true, message: "请输入项目负责人", trigger: "blur" },
+        ],
+        // 添加手机号正则验证
+        c_phone: [
+          { required: true, message: "请输入联系电话", trigger: "blur" },
+          {
+            validator: (rule, value, callback) => {
+              // 手机号正则验证
+              let phoneRegex = /^1[3456789]\d{9}$/;
+              if (!phoneRegex.test(value)) {
+                callback(new Error("请输入正确的手机号"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur",
+          },
+        ],
+        c_unit_name: [{ required: true, message: "请输入单位名称", trigger: "blur" }],
+        c_department: [{ required: true, message: "请输入部门名称", trigger: "blur" }],
+      },
+      // 申请使用微功能服务的表单数据
+      column: {
+        columnId: systemConfig.columnIds[4],
+        modelId: systemConfig.modelIds[2],
+        from: {
+          // 备注：申请使用微功能服务的详细信息，非必填
+          content: "",
+          // 项目负责人，必填
+          c_business_leader: "",
+          // 应用名称,必填
+          c_application_name: "",
+          // 接口路径，必填
+          c_interface_path: "",
+          // 联系电话，必填
+          c_phone: "",
+          // 单位名称，必填
+          c_unit_name: "",
+          // 部门名称，必填
+          c_department: "",
+        },
+      },
+      // 创建任务的表单数据
+      taskColumn: {
+        columnId: systemConfig.columnIds[6],
+        modelId: systemConfig.modelIds[3],
+        rules: {
+          c_name: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
+          c_comment: [{ required: true, message: "请输入任务备注", trigger: "blur" }],
+          c_type: [{ required: true, message: "请选择任务类型", trigger: "change" }],
+          c_source_file: [
+            { required: true, message: "请上传任务文件", trigger: "change" },
+          ],
+        },
+        from: {
+          title: "",
+          content: "",
+          // 任务名称，必填（默认应该是：日期-任务类型-用户自定义名称）,这里保存的就是用户自定义名称，提交的时候会自动补充日期-任务类型-
+          c_name: "",
+          // 备注：任务的详细信息，必填
+          c_comment: "",
+          // 任务类型，必填
+          c_type: "",
+          // 任务创建人用户名，必填
+          c_user_name: "",
+          // 任务创建人，必填
+          c_user_id: "",
+          // 任务文件，必填
+          c_source_file: "",
+          // 任务文件名,上传文件时自动带入
+          c_source_file_name: "",
+          // 其他参数数据
+          c_source_data: {},
+          // 申请状态，默认初始化【0:初始化；1:运行中；2:成功完成；3:异常中断】
+          c_state: "0",
+        },
+        // 切换任务类型时，渲染的接口详情
+        apiFrom: {
+          // 任务描述，仅查看
+          apiDescription: "",
+          // 接口参数，仅查看
+          apiParameterRules: [],
+          // 接口路径
+          apiUrl: "",
+        },
+        // 其他参数
+        selectOptions: {
+          // 单位
+          unit: [
+            {
+              value: "METER",
+              label: "米",
+            },
+            {
+              value: "KILOMETER",
+              label: "千米",
+            },
+          ],
+          inPrj: [
+            {
+              value: "WGS84",
+              label: "WGS84",
+            },
+            {
+              value: "SH2000",
+              label: "SH2000",
+            },
+            {
+              value: "UTM",
+              label: "UTM",
+            },
+            {
+              value: "WEB_Mercator",
+              label: "WEB_Mercator",
+            },
+          ],
+          outPrj: [
+            {
+              value: "WGS84",
+              label: "WGS84",
+            },
+            {
+              value: "SH2000",
+              label: "SH2000",
+            },
+            {
+              value: "UTM",
+              label: "UTM",
+            },
+            {
+              value: "WEB_Mercator",
+              label: "WEB_Mercator",
+            },
+          ],
+          outFileType: [
+            {
+              value: "geoJson",
+              label: "geoJson",
+            },
+            {
+              value: "shp",
+              label: "shp",
+            },
+            {
+              value: "csv",
+              label: "csv",
+            },
+            {
+              value: "xlsx",
+              label: "xlsx",
+            },
+          ],
+        },
+      },
+      // 搜索微功能服务的防抖定时器
+      searchTimeout: null,
+    };
+  },
+  mounted() {
+    this.dmsDataProxy = systemConfig.dmsDataProxy;
+    // 任务负责人默认为当前登录用户
+    this.taskColumn.from.c_user_id = this.$store.state.userInfo.id;
+    // 任务创建人用户名默认为当前登录用户用户名
+    this.taskColumn.from.c_user_name = this.$store.state.userInfo.username;
+    this.searchServerList();
+  },
+  methods: {
+    includesKey(keys) {
+      let hasKey = false;
+      keys.forEach((key) => {
+        if (this.taskColumn.apiFrom.apiParameterRules.includes(key)) {
+          hasKey = true;
+        }
+      });
+      return hasKey;
+    },
+    handleTCUpload(emit) {
+      // 上传任务文件
+      let formData = new FormData();
+      formData.append("file", emit.file);
+      formData.append("columnId", this.taskColumn.columnId);
+      formData.append("type", 0);
+      formData.append("paraName", emit.file.name);
+      api
+        .uploadFile(formData)
+        .then((res) => {
+          if (res.code === 200) {
+            this.taskColumn.from.c_source_file_name = emit.file.name;
+            this.taskColumn.from.c_source_file = res.content;
+            ElNotification.success({
+              title: "成功",
+              message: "上传任务文件成功",
+              offset: 80,
+            });
+          } else {
+            ElNotification.error({
+              title: "失败",
+              message: "上传任务文件失败" + res.msg,
+              offset: 80,
+            });
+          }
+        })
+        .catch((e) => {
+          ElNotification.error({
+            title: "失败",
+            message: "上传任务文件失败" + e,
+            offset: 80,
+          });
+        });
+    },
+    changeTaskType() {
+      if (this.taskColumn.from.c_type) {
+        // 先把任务类型每个字符中间都添加一个句号
+        let serviceId = this.taskColumn.from.c_type.split("").join(".");
+        // 根据任务类型获取任务参数
+        api
+          .getSimpleContentList({
+            columnId: systemConfig.columnIds[5],
+            states: 0,
+            pageSize: 1,
+            page: 0,
+            search: JSON.stringify([
+              {
+                field: "c_scene_name",
+                searchType: 1,
+                content: { value: serviceId },
+              },
+            ]),
+          })
+          .then((res) => {
+            if (res.code === 200) {
+              let apiInfo = res.content.data[0];
+              // 接口描述
+              this.taskColumn.apiFrom.apiDescription = apiInfo.content;
+              // 接口参数规则
+              this.taskColumn.apiFrom.apiParameterRules = JSON.parse(
+                apiInfo.c_input_parameter_rules
+              );
+              // 接口路径
+              this.taskColumn.apiFrom.apiUrl = apiInfo.c_url;
+            } else {
+              this.taskColumn.apiFrom.apiDescription = "";
+              this.taskColumn.apiFrom.apiParameterRules = [];
+              this.taskColumn.apiFrom.apiUrl = "";
+              ElNotification.error({
+                title: "失败",
+                message: "获取任务参数失败" + res.msg,
+                offset: 80,
+              });
+            }
+          })
+          .catch((e) => {
+            this.taskColumn.apiFrom.apiDescription = "";
+            this.taskColumn.apiFrom.apiParameterRules = "";
+            ElNotification.error({
+              title: "失败",
+              message: "获取任务参数失败" + e,
+              offset: 80,
+            });
+          });
+        this.taskColumn.from.c_source_data = {};
+      }
+    },
+    // 搜索微功能服务
+    searchServerList() {
+      // 添加防抖功能，避免频繁搜索导致性能问题
+      if (this.searchTimeout != null) {
+        clearTimeout(this.searchTimeout);
+      }
+      this.searchTimeout = setTimeout(() => {
+        let requestParams = {
+          columnId: systemConfig.columnIds[5],
+          states: 0,
+          pageSize: 999,
+          page: 0,
+        };
+        if (this.searchStr) {
+          requestParams.search = JSON.stringify([
+            {
+              field: "title",
+              searchType: 2,
+              content: { value: "%" + this.searchStr + "%" },
+            },
+          ]);
+        }
+        // 获取微功能服务列表
+        api
+          .getSimpleContentList(requestParams)
+          .then((res) => {
+            if (res.code === 200) {
+              this.dmsServerList = res.content.data;
+              ElNotification.success({
+                title: "成功",
+                message: "搜索到" + this.dmsServerList.length + "条微功能服务",
+                offset: 80,
+              });
+            } else {
+              ElNotification.error({
+                title: "失败",
+                message: "搜索到0条微功能服务",
+                offset: 80,
+              });
+            }
+          })
+          .catch((e) => {
+            ElNotification.error({
+              title: "失败",
+              message: "搜索微功能服务失败" + e,
+              offset: 80,
+            });
+          });
+      }, 0);
+    },
+    // 申请使用微功能服务
+    handleApply(item) {
+      // 申请使用微功能服务时，先从localStorage中获取数据，填充到表单中
+      let applyInfo = localStorage.getItem("wgnApplyInfo");
+      if (applyInfo) {
+        this.column.from = JSON.parse(applyInfo);
+      }
+      // 先打开弹窗，显示from表单，用户输入表单数据并提交
+      this.column.from.c_interface_path = item.c_url;
+      this.showFrom = true;
+    },
+    // 创建任务
+    createTask() {
+      // 打开弹窗，显示任务创建表单
+      this.showTaskFrom = true;
+    },
+    // 提交任务创建表单
+    handleTaskSubmit() {
+      let that = this;
+      // 表单验证
+      this.$refs.taskFormRef.validate((valid) => {
+        if (valid) {
+          let content = this.taskColumn.from;
+          content.title =
+            this.$moment(new Date()).format("YYMMDD_HHmm") +
+            "_" +
+            (this.taskColumn.from.c_type
+              ? this.$getDmsTypes("yzt_task_type", this.taskColumn.from.c_type) + "_"
+              : "") +
+            content.c_name;
+          content.content = this.taskColumn.apiFrom.apiDescription
+            ? this.taskColumn.apiFrom.apiDescription
+            : "";
+          content.c_name = content.title;
+          // 提交任务创建表单
+          let params = {
+            content: JSON.stringify(content),
+            columnId: this.taskColumn.columnId,
+            modelId: this.taskColumn.modelId,
+          };
+          api.addContent(params).then((res) => {
+            if (res.code === 200) {
+              that.$message({
+                message: "任务创建成功",
+                type: "success",
+              });
+              // 不直接开始任务，需要到任务管理页面启动
+              that.showTaskFrom = false;
+            } else {
+              that.$message({
+                message: "任务创建失败" + res.msg,
+                type: "error",
+              });
+            }
+          });
+        } else {
+          // 表单验证失败，提示用户填写完整信息
+          that.$message({
+            message: "请填写完整信息",
+            type: "warning",
+          });
+        }
+      });
+    },
+    // 提交申请使用微功能服务表单
+    handleApplySubmit() {
+      let that = this;
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          // 提交时把信息添加到localStorage中,下次打开弹窗时，从localStorage中获取数据，填充到表单中
+          localStorage.setItem("wgnApplyInfo", JSON.stringify(that.column.from));
+          // 标题：电话+时间
+          that.column.from.title =
+            that.column.from.c_unit_name +
+            "_" +
+            that.column.from.c_business_leader +
+            "_" +
+            that.column.from.c_phone;
+          // 备注：申请使用微功能服务的详细信息
+          let params = {
+            content: JSON.stringify(that.column.from),
+            columnId: that.column.columnId,
+            modelId: that.column.modelId,
+          };
+          api.addContent(params).then((res) => {
+            if (res.code === 200) {
+              // 确认申请使用
+              that.$message({
+                message: "申请成功，请等待审核通过后工作人员专人联系，请保持电话通畅！",
+                type: "success",
+              });
+              that.showFrom = false;
+            } else {
+              that.$message({
+                message: "申请使用" + item.title + "失败" + res.msg,
+                type: "error",
+              });
+            }
+          });
+        } else {
+          // 表单验证失败，提示用户填写完整信息
+          that.$message({
+            message: "请填写完整信息",
+            type: "warning",
+          });
+        }
+      });
+    },
+    // 在线演示微功能服务
+    handleOnlineDemo(item) {
+      let routerPath = {};
+      // 1. 解析目标路由（支持传参、命名路由等）
+      if (item.c_scene_name == "view") {
+        routerPath = {
+          path: item.c_url,
+        };
+        this.$router.push(routerPath);
+      } else {
+        routerPath = {
+          path: "/wgnSingle", // 微功能
+          query: { sceneId: item.c_scene_name },
+        };
+        const routeData = this.$router.resolve(routerPath);
+        // 2. 打开新窗口（_blank 表示新窗口）
+        window.open(routeData.href, "_blank");
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.wgn_box {
+  width: 100vw;
+  margin: 0 auto;
+  background-color: #08224a;
+}
+.server_title {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.server_title_text {
+  width: calc(77vw - 200px);
+  height: calc(100vh - 120px);
+  background-color: #1c2631;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  padding: 0 100px;
+  &_title {
+    font-size: 64px;
+    font-weight: bold;
+    // letter-spacing: 0.5rem;
+  }
+  &_content {
+    margin-top: 77px;
+    font-size: 22px;
+  }
+  &_btu {
+    margin-top: 77px;
+    font-size: 22px;
+    // letter-spacing: 0.2rem;
+    color: #4095e5;
+  }
+}
+.anchor_box {
+  background: #ffffff32;
+  float: left;
+}
+.server_list_box {
+  width: 100vw;
+  background-color: #00002e;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #fff;
+  position: relative;
+  &_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: 100px 0;
+
+      &:nth-child(odd) {
+        flex-direction: row;
+      }
+      &:nth-child(even) {
+        flex-direction: row-reverse;
+      }
+      &_content {
+        width: 760px;
+        height: 100px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        &_title {
+          font-size: 35px;
+          font-weight: bold;
+          color: #fff;
+        }
+        &_text {
+          margin-top: 35px;
+          font-size: 18px;
+        }
+        &_button_box {
+          display: flex;
+          justify-content: space-evenly;
+          width: 100%;
+          &_item {
+            margin-top: 35px;
+            font-size: 20px;
+            // letter-spacing: 0.2rem;
+            color: #4095e5;
+            border: 1px solid #4095e5;
+            border-radius: 10px;
+            padding: 10px 36px;
+            cursor: pointer;
+            &:hover {
+              background-color: #4095e5;
+              color: #fff;
+            }
+          }
+        }
+      }
+      &_image {
+        width: 690px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 30px;
+        overflow: hidden;
+      }
+    }
+  }
+}
+/* 顶部横幅样式 */
+.banner {
+  width: 100%;
+  // height: calc(100vh - 120px);
+  height: 552px;
+  background: url('@static/images/wgn/bg.png');
+  background-size: cover;
+  display: flex;
+  justify-content: right;
+  align-items: start;
+  position: relative;
+  overflow: hidden;
+
+  .banner-content {
+    position: relative;
+    z-index: 2;
+    text-align: right;
+    max-width: 500px;
+    padding: 0 10%;
+    justify-content: right;
+    display: grid;
+    padding-top: 100px;
+  }
+
+  .banner-title {
+    font-size: 56px;
+    font-weight: bold;
+    // letter-spacing: 0.5rem;
+    // margin-bottom: 20px;
+    color: #ffffff;
+    text-align: right;
+    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+  }
+
+  .banner-description {
+    font-size: 16px;
+    // line-height: 1.8;
+    margin: 20px 0px;
+    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);
+    }
+  }
+}
+</style>

src/views/Yxgl.vue

@@ -1,6 +1,6 @@
 <template>
   <el-affix :offset="0">
-    <div style="height: 44px;width: 100vw;background: #08224a;"></div>
+    <div style="height: 44px;width: 100vw;background: #00002a;"></div>
   </el-affix>
   <el-affix :offset="44">
   <div id="yxgl_box">
@@ -41,7 +41,7 @@
       class="viewBox"
       :style="{
         width: isCollapse ? 'calc(100vw - 60px)' : 'calc(100% - 200px)',
-        background: menuActive == 'StatisticalAnalysis' ? '#08224a' : '#08224a',
+        background: menuActive == 'StatisticalAnalysis' ? '#00002a' : '#00002a',
         overflowY: menuActive == 'StatisticalAnalysis' ? 'auto' : 'hidden',
       }"
     >
@@ -119,7 +119,8 @@ export default {
   // height: calc(100vh - 120px);
   height: 100vh;
   margin: 0;
-  background: #08224a;
+  background: #00002a;
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
 }
 .viewBox {
   width: calc(100vw - 200px);
@@ -134,6 +135,6 @@ export default {
 iframe {
   width: 100%;
   height: calc(100%);
-  background: #08224a;
+  background: #00002a;
 }
 </style>

src/views/rwgl/Index.vue

@@ -1,10 +1,10 @@
 <template>
   <el-affix :offset="0">
-    <div style="height: 44px; width: 100vw; background: #08224a"></div>
+    <div style="height: 44px; width: 100vw; background: #00002a"></div>
   </el-affix>
   <el-affix :offset="44">
     <div class="blue-background">
-      <div class="lighter-container">
+      <div style="padding: 0px 20px;margin: 0px 15px;">
         <div class="left-row">
           <div>
             <span>状态：</span>
@@ -27,17 +27,6 @@
               >
                 {{ status.name }}
               </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)"
-                  style="cursor: pointer; margin: 10px 5px"
-                >
-                  {{ status.name }}
-                </el-tag>
-              </template>
             </template>
           </div>
           <div>
@@ -63,8 +52,18 @@
               </el-tag>
             </template>
           </div>
+          <div class="row-search">
+            <el-input
+              size="mini"
+              class="searcher"
+              v-model="searcher"
+              placeholder="请输入任务名称相关关键字"
+            />
+            <el-button type="primary" @click="pullTaskData(1)">搜索</el-button>
+            <el-button class="reset-btn" @click="reset(), pullTaskData(1)">重置</el-button>
+          </div>
         </div>
-        <div class="row">
+        <!-- <div class="row">
           <el-input
             class="searcher"
             v-model="searcher"
@@ -72,11 +71,16 @@
           />
           <el-button type="primary" @click="pullTaskData(1)">搜索</el-button>
           <el-button type="primary" @click="reset(), pullTaskData(1)">重置</el-button>
-        </div>
+        </div> -->
       </div>
       <div class="lighter-container">
-        <div style="padding-bottom: 10px">查询到{{ taskNum }}条任务</div>
-        <el-table table-layout="fixed" row-key="main_id" :data="taskData" class="table">
+        <!-- <div style="padding-bottom: 10px">检索出{{ taskNum }}条任务</div> -->
+        <el-table table-layout="fixed" row-key="main_id" :data="taskData" class="table" 
+        :header-cell-style="headerCellStyle"
+        :row-style="rowStyle"
+        :cell-style="cellStyle"
+        stripe
+        border>
           <el-table-column prop="main_c_name" label="名称" />
           <el-table-column prop="main_c_user_name" label="用户" />
           <el-table-column prop="main_c_state" label="类型">
@@ -161,13 +165,24 @@
             </template>
           </el-table-column>
         </el-table>
-        <div class="between-row pagination-container">
-          <div><!--empty div--></div>
+        <!-- <div class="between-row pagination-container">
+          <div></div>
           <el-pagination
             layout="prev, pager, next"
             :total="taskNum"
             @change="(page) => pullTaskData(page)"
           />
+        </div> -->
+        <div class="between-row pagination-container">
+          <span class="total-text">检索出{{ taskNum }}条任务</span>
+          <el-pagination
+            layout="prev, pager, next, jumper, total"
+            :total="taskNum"
+            :current-page="page"
+            :page-size="pageSize"
+            @current-change="pullTaskData(page)"
+          >
+          </el-pagination>
         </div>
       </div>
       <el-dialog v-model="dialog" :show-close="true" width="750">
@@ -287,8 +302,35 @@ export default {
       focusTask: {},
       dialog: false,
       page: 1,
+      pageSize: 10,
       tableHeight: 0,
     };
+  },
+   computed: {
+    headerCellStyle() {
+      return {
+        // backgroundColor: "rgba(24, 144, 255, 0.25)",
+        color: "#fff",
+        fontWeight: "bold",
+        // borderBottom: "2px solid rgba(24, 144, 255, 0.3)",
+        padding: "12px 8px",
+      };
+    },
+    rowStyle() {
+      return {
+        // 调整行背景色为更浅的黑色，增加透明度
+        backgroundColor: "rgba(0, 0, 0, 0.05)",
+        borderBottom: "1px solid rgba(255, 255, 255, 0.05)",
+        transition: "all 0.3s ease",
+      };
+    },
+    cellStyle() {
+      return {
+        color: "#e0e0e0",
+        padding: "12px 8px",
+        borderRight: "1px solid rgba(255, 255, 255, 0.05)",
+      };
+    },
   },
   mounted() {
     this.pullTaskStatus();
@@ -399,7 +441,7 @@ export default {
       if (page != null) this.page = page;
       let res = await getTasks(
         this.page,
-        10,
+        this.pageSize,
         this.searcher,
         this.getCheckedStatus(),
         this.getCheckedType()
@@ -498,17 +540,56 @@ export default {
 </script>
 
 <style lang="less" scoped>
-* {
-  --el-table-bg-color: #eeeeee0b;
-  /* 表格背景 */
-  --el-table-header-bg-color: #eeeeee0b;
-  /* 表头背景 */
-  --el-table-tr-bg-color: #eeeeee0b;
-  /* 行背景 */
-  --el-table-row-hover-bg-color: #eeeeee0b;
-  /* 行悬浮背景 */
-  --el-table-header-text-color: #ededed;
-  /* 表头文字颜色 */
+// * {
+//   --el-table-bg-color: #eeeeee0b;
+//   /* 表格背景 */
+//   --el-table-header-bg-color: #eeeeee0b;
+//   /* 表头背景 */
+//   --el-table-tr-bg-color: #eeeeee0b;
+//   /* 行背景 */
+//   --el-table-row-hover-bg-color: #eeeeee0b;
+//   /* 行悬浮背景 */
+//   --el-table-header-text-color: #ededed;
+//   /* 表头文字颜色 */
+// }
+
+// 美化表格行悬停效果
+:deep(.el-table__body tr:hover > td) {
+  background-color: rgba(24, 144, 255, 0.1) !important;
+}
+
+// 美化表格边框
+:deep(.el-table__inner-wrapper) {
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+:deep(.el-table__cell) {
+  border-right: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+:deep(.el-table__row) {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+// 调整奇偶行背景色，使其更明亮
+:deep(.el-table--striped .el-table__body tr.el-table__row--striped) {
+  background-color: rgba(255, 255, 255, 0.02) !important;
+}
+
+// 调整表格主体背景色
+:deep(.el-table__body) {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
+  background-color: rgba(255, 255, 255, 0.02);
+}
+:deep(.el-tag--primary){
+  background-color: rgba(0, 0, 0, 0);
+  color: #fff;
+}
+:deep(.el-tag--dark){
+  background-color: var(--el-color-primary);
 }
 
 .font,
@@ -573,7 +654,7 @@ link {
 
 .blue-background,
 body {
-  background: #08224a;
+  background: #00002a;
 }
 
 .bluedark-background {
@@ -629,10 +710,15 @@ body {
 .between-row,
 .left-row {
   display: flex !important;
-  justify-content: space-around;
+  justify-content: space-between;
   padding: 0;
   align-items: stretch;
 }
+.row-search{
+  display: flex !important;
+  justify-content: space-between;
+  align-items: center;
+}
 
 .warp-row {
   flex-wrap: wrap;
@@ -643,11 +729,11 @@ body {
 }
 
 .left-row {
-  justify-content: flex-start;
+  justify-content: space-between;
 }
 
 .left-row > * {
-  margin-right: 15px;
+  // margin-right: 15px;
 }
 
 .col {
@@ -734,8 +820,10 @@ body {
 }
 
 .searcher {
-  background-color: #334155;
+  background-color: #00002a;
   margin-right: 15px;
+  width: 500px;
+  height: 34px;
 }
 
 .blue {

src/views/yxgl/StatisticalAnalysis.vue

@@ -2,7 +2,7 @@
   <div class="mainBox" v-loading="getDataStatus">
     <!-- 搜索区域 -->
     <div class="searchBox">
-      <div>
+      <div style="font-size: large;">
         <!-- 对比时间：
         <el-date-picker
           v-model="lastTimes"
@@ -1095,7 +1095,7 @@ export default {
     border-radius: 5px;
     padding: 20px 18px;
     // background: #00000032;
-    background: rgba(255, 255, 255, 0.1);
+    background: #eeeeee0b;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
   }
 
@@ -1114,7 +1114,7 @@ export default {
     // background: #00000032;
     position: relative;
     flex-direction: column;
-    background: rgba(255, 255, 255, 0.1);
+    background: #eeeeee0b;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
     .tools {
       position: absolute;

src/views/yygl/appCenter.vue

@@ -1,6 +1,6 @@
 <template>
   <el-affix :offset="0">
-  <div style="height: 44px;width: 100vw;background: #08224a;"></div>
+  <div style="height: 44px;width: 100vw;background: #00002a;"></div>
   </el-affix>
   <el-affix :offset="44">
   <div class="app-center">
@@ -81,7 +81,7 @@ export default {
     // min-height: 100vh;
   // height: calc(100vh - 120px);
   height: 100vh;
-  background-color: #08224a;
+  background-color: #00002a;
   color: #ffffff;
   overflow-x: hidden;
 }
@@ -89,14 +89,14 @@ export default {
   display: flex;
   width: 100%;
   height: 100%;
-  background-color: #08224a;
+  background-color: #00002a;
   color: #ffffff;
 }
 
 /* 左侧导航栏样式 */
 .sidebar {
   width: 200px;
-  background-color: #0a2a5a;
+  background-color: #00002a;
   border-right: 1px solid rgba(255, 255, 255, 0.1);
 
   .sidebar-menu {
@@ -109,6 +109,7 @@ export default {
       cursor: pointer;
       transition: all 0.3s ease;
       color: rgba(255, 255, 255, 0.8);
+      font-size: var(--el-menu-item-font-size);
 
       i {
         margin-right: 12px;
@@ -116,14 +117,16 @@ export default {
       }
 
       &:hover {
-        background-color: rgba(24, 144, 255, 0.2);
+        // background-color: rgba(24, 144, 255, 0.2);
+        background-color: var(--el-menu-hover-bg-color);
         color: #ffffff;
       }
 
       &.active {
-        background-color: rgba(24, 144, 255, 0.3);
-        color: #ffffff;
-        border-right: 3px solid #1890ff;
+        // background-color: rgba(24, 144, 255, 0.3);
+        // color: #ffffff;
+        color: var(--el-menu-active-color);
+        // border-right: 3px solid #1890ff;
       }
     }
   }

src/views/yygl/manage/index.vue

@@ -447,7 +447,7 @@ export default {
 <style lang="less" scoped>
 .application-management {
   width: 100%;
-  background-color: #08224a;
+  background-color: #00002a;
   color: #ffffff;
 }
 

src/views/yygl/monitor/index.vue

@@ -4,9 +4,14 @@
     <div class="main-content">
       <!-- 应用统计卡片 -->
       <div class="stats-cards">
-        <div class="stat-card" v-for="item in getLimitedList()" :key="item.name">
+        <div class="stat-card" v-for="(item, index) in getLimitedList()" :key="item.name">
           <div class="stat-icon approved">
-            <el-icon><CircleCheckFilled /></el-icon>
+            <el-icon>
+              <CircleCheckFilled v-if="index == 0" style="color: orange;" />
+              <Clock v-else-if="index == 1" style="color:greenyellow;" />
+              <UploadFilled v-else-if="index == 2" style="color: yellow;" />
+              <DeleteFilled v-else style="color:cadetblue;" />
+            </el-icon>
           </div>
           <div class="stat-content">
             <div class="stat-label">{{ item.name }}</div>
@@ -548,7 +553,7 @@ export default {
 <style lang="less" scoped>
 .application-monitor {
   width: 100%;
-  background-color: #08224a;
+  background-color: #00002a;
   color: #ffffff;
 }
 

src/views/yygl/overview/index.vue

@@ -58,7 +58,12 @@
                 <!-- <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.content }}</p>
+              <el-tooltip placement="top" effect="dark">
+                <template #content>
+                  <div style="max-width: 500px;">{{ app.content }}</div>
+                </template>
+                <p class="app-description">{{ app.content }}</p>
+              </el-tooltip>
               <div class="app-footer">
                 <span class="app-date">{{ app.createTime }}</span>
                 <el-button
@@ -221,7 +226,7 @@ export default {
 .application-overview {
   display: flex;
   width: 100%;
-  background-color: #08224a;
+  background-color: #00002a;
   color: #ffffff;
 }
 
@@ -462,4 +467,9 @@ export default {
     gap: 15px;
   }
 }
+
+/* 在你的组件或全局样式文件中 */
+.custom-tooltip-width {
+  width: 200px; /* 设置你想要的宽度 */
+}
 </style>