|
|
@@ -1,31 +1,290 @@
|
|
|
<template>
|
|
|
- <div class="wgn container">
|
|
|
- <router-view />
|
|
|
+ <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 wgn from "@/api/wgn";
|
|
|
export default {
|
|
|
- name: "wgn",
|
|
|
- data() {
|
|
|
- return {
|
|
|
-
|
|
|
- };
|
|
|
+ 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 + "%" },
|
|
|
+ },
|
|
|
+ ]);
|
|
|
+ }
|
|
|
+ // 获取微功能服务列表
|
|
|
+ wgn.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",
|
|
|
+ });
|
|
|
+ });
|
|
|
},
|
|
|
- mounted() {
|
|
|
+ // 申请使用微功能服务
|
|
|
+ handleApply(item) {
|
|
|
+ this.$confirm("确认申请使用" + item.title + "吗？", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ // 确认申请使用
|
|
|
+ this.$message({
|
|
|
+ message: "申请使用" + item.title + "？等url吧！",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ // 取消申请使用
|
|
|
+ });
|
|
|
},
|
|
|
- methods: {
|
|
|
- }
|
|
|
+ // 在线演示微功能服务
|
|
|
+ handleOnlineDemo(item) {
|
|
|
+ // 1. 解析目标路由（支持传参、命名路由等）
|
|
|
+ const routeData = this.$router.resolve({
|
|
|
+ path: "/wgnSingle", // 微功能
|
|
|
+ query: { sceneId: item.c_scene_name },
|
|
|
+ });
|
|
|
+ // 2. 打开新窗口（_blank 表示新窗口）
|
|
|
+ window.open(routeData.href, "_blank");
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.container {
|
|
|
- width: 1920px;
|
|
|
- margin: 0 auto;
|
|
|
+ width: 100vw;
|
|
|
+ margin: 0 auto;
|
|
|
+ background-color: #08224a;
|
|
|
}
|
|
|
-
|
|
|
-.wgn {
|
|
|
+.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>
|
|
|
+</style>
|
wdq