qp_onemap_ui/src/views/wgn/index.vue

<template>
  <div class="container">
    <div class="server_title">
      <el-image
        style="width: 824px; height: 786px"
        src="static/images/wgn_title.png"
        fit="cover"
      />
      <div class="server_title_text">
        <div class="server_title_text_title">微功能服务</div>
        <div class="server_title_text_content">
          微功能子系统专注于提供强大的空间计算与数据处理能力，是支撑青浦区三维数字底板空间分析与数据流转的核心模块，聚焦
          “精准计算 + 灵活处理”
          两大核心能力，所有功能均以标准化服务接口形式对外提供（支持第三方委办、上层应用系统调用），同时在系统内部集成可视化操作界面，实现
          “计算 - 分析 - 展示” 闭环。
        </div>
      </div>
    </div>
    <div class="server_list_box">
      <div class="server_list_box_title">微功能列表</div>
      <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>
      <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"
        >
          <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>
    </div>
  </div>
</template>

<script>
import { getDmsData } from "../../api/wgn";
export default {
  name: "微功能服务",
  data() {
    return {
      // 搜索关键词
      searchStr: "",
      // 微功能服务列表
      dmsServerList: [],
      // DMS数据代理地址
      dmsDataProxy: "",
    };
  },
  mounted() {
    this.dmsDataProxy = systemConfig.dmsDataProxy;
    this.searchServerList();
  },
  methods: {
    // 搜索微功能服务
    searchServerList() {
      let requestParams = {
        columnId: 1651,
        states: 0,
        pageSize: 999,
        page: 0,
      };
      if (this.searchStr) {
        requestParams.search = JSON.stringify([
          {
            field: "title",
            searchType: 2,
            content: { value: "%" + this.searchStr + "%" },
          },
        ]);
      }
      // 获取微功能服务列表
      getDmsData(requestParams)
        .then((res) => {
          if (res.code === 200) {
            this.dmsServerList = res.content.data;
            this.$message({
              message: "搜索到" + this.dmsServerList.length + "条微功能服务",
              type: "success",
            });
          } else {
            this.$message({
              message: "搜索到0条微功能服务",
              type: "warning",
            });
          }
        })
        .catch((e) => {
          this.$message({
            message: "搜索微功能服务失败" + e,
            type: "error",
          });
        });
    },
    // 申请使用微功能服务
    handleApply(item) {
      this.$confirm("确认申请使用" + item.title + "吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 确认申请使用
          this.$message({
            message: "申请使用" + item.title + "？等url吧！",
            type: "success",
          });
        })
        .catch(() => {
          // 取消申请使用
        });
    },
    // 在线演示微功能服务
    handleOnlineDemo(item) {
      // 1. 解析目标路由（支持传参、命名路由等）
      const routeData = this.$router.resolve({
        path: "/skszk", // 时空算子库
        query: { sceneId: item.c_scene_name },
      });
      // 2. 打开新窗口（_blank 表示新窗口）
      window.open(routeData.href, "_blank");
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100vw;
  margin: 0 auto;
  background-color: #08224a;
}
.server_title {
  display: flex;
  justify-content: center;
  align-items: center;
}
.server_title_text {
  width: calc(100vw - 824px);
  height: 786px;
  background-color: #1c2631;
  color: #fff;
  padding: 0 160px 0 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  &_title {
    font-size: 64px;
    font-weight: bold;
    letter-spacing: 0.5rem;
  }
  &_content {
    margin-top: 77px;
    font-size: 22px;
  }
}
.server_list_box {
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  &_title {
    margin-top: 100px;
    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;
  }
  &_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: #4095e5;
        }
        &_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;
      }
    }
  }
}
</style>