|
|
@@ -1,319 +1,330 @@
|
|
|
<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">
|
|
|
- 微功能子系统专注于提供强大的空间计算与数据处理能力，是支撑青浦区三维数字底板空间分析与数据流转的核心模块，聚焦“精准计算 + 灵活处理”两大核心能力，所有功能均以标准化服务接口形式对外提供（支持第三方委办、上层应用系统调用），同时在系统内部集成可视化操作界面，实现“计算 - 分析 - 展示” 闭环。
|
|
|
- </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
|
|
|
+ v-if="$getUserType() != 1"
|
|
|
+ type="primary"
|
|
|
+ class="search-btn"
|
|
|
+ @click="createTask"
|
|
|
+ >大批量数据处理任务</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="server_list_box_table_item_content_button_box_item"
|
|
|
- @click.stop="handleApply(item)"
|
|
|
- >
|
|
|
- 申请使用
|
|
|
+ <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="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>
|
|
|
- <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-dialog
|
|
|
+ title="申请使用微功能服务"
|
|
|
+ v-model="showFrom"
|
|
|
+ width="60%"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ :show-close="true"
|
|
|
>
|
|
|
- <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-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-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'])
|
|
|
- "
|
|
|
+ </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"
|
|
|
>
|
|
|
- <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-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-input
|
|
|
- v-if="['lonKey', 'latKey'].includes(rulesItem)"
|
|
|
- v-model="taskColumn.from.c_source_data[rulesItem]"
|
|
|
- placeholder="当文件为xlsx时必填"
|
|
|
+ <el-option
|
|
|
+ v-for="(name, index) in $store.state.DmsTypesMap['yzt_task_type']"
|
|
|
+ :key="index"
|
|
|
+ :label="name"
|
|
|
+ :value="index"
|
|
|
/>
|
|
|
- <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-select>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- 渲染任务描述:仅查看 -->
|
|
|
+ <el-form-item
|
|
|
+ label="任务描述"
|
|
|
+ prop="apiDescription"
|
|
|
+ v-if="taskColumn.apiFrom.apiDescription"
|
|
|
>
|
|
|
- <el-option
|
|
|
- v-for="(name, index) in $store.state.DmsTypesMap['task_status']"
|
|
|
- :key="'wgn-task-form-' + index"
|
|
|
- :label="name"
|
|
|
- :value="index"
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ disabled
|
|
|
+ v-model="taskColumn.apiFrom.apiDescription"
|
|
|
/>
|
|
|
- </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>
|
|
|
+ </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',
|
|
|
+ 'compressionRatio',
|
|
|
+ ])
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <template
|
|
|
+ v-for="(rulesItem, index) in taskColumn.apiFrom.apiParameterRules"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <el-form-item
|
|
|
+ v-if="
|
|
|
+ [
|
|
|
+ 'lonKey',
|
|
|
+ 'latKey',
|
|
|
+ 'outFileType',
|
|
|
+ 'inPrj',
|
|
|
+ 'outPrj',
|
|
|
+ 'compressionRatio',
|
|
|
+ ].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', 'compressionRatio'].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>
|
|
|
- </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,
|
|
|
// 是否显示创建任务的表单弹窗
|
|
|
@@ -443,6 +454,24 @@ export default {
|
|
|
label: "WEB_Mercator",
|
|
|
},
|
|
|
],
|
|
|
+ compressionRatio: [
|
|
|
+ {
|
|
|
+ value: "100%",
|
|
|
+ label: "100%",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "80%",
|
|
|
+ label: "80%",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "50%",
|
|
|
+ label: "50%",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "25%",
|
|
|
+ label: "25%",
|
|
|
+ },
|
|
|
+ ],
|
|
|
outPrj: [
|
|
|
{
|
|
|
value: "WGS84",
|
|
|
@@ -486,7 +515,6 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.dmsDataProxy = systemConfig.dmsDataProxy;
|
|
|
// 任务负责人默认为当前登录用户
|
|
|
this.taskColumn.from.c_user_id = this.$store.state.userInfo.id;
|
|
|
// 任务创建人用户名默认为当前登录用户用户名
|
|
|
@@ -590,6 +618,36 @@ export default {
|
|
|
this.taskColumn.from.c_source_data = {};
|
|
|
}
|
|
|
},
|
|
|
+ // 申请使用微功能服务
|
|
|
+ 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;
|
|
|
+ },
|
|
|
+ // 在线演示微功能服务
|
|
|
+ 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");
|
|
|
+ }
|
|
|
+ },
|
|
|
// 搜索微功能服务
|
|
|
searchServerList() {
|
|
|
// 添加防抖功能，避免频繁搜索导致性能问题
|
|
|
@@ -617,39 +675,83 @@ export default {
|
|
|
.getSimpleContentList(requestParams)
|
|
|
.then((res) => {
|
|
|
if (res.code === 200) {
|
|
|
- this.dmsServerList = res.content.data;
|
|
|
- ElNotification.success({
|
|
|
- title: "成功",
|
|
|
- message: "搜索到" + this.dmsServerList.length + "条微功能服务",
|
|
|
- offset: 80,
|
|
|
- });
|
|
|
+ // 过滤掉自定义工具微功能服务1.5.8.1
|
|
|
+ this.dmsServerList = res.content.data.filter(
|
|
|
+ (item) => item.c_scene_name != "1.5.8.1"
|
|
|
+ );
|
|
|
+ // 转换时间格式
|
|
|
+ this.dmsServerList = this.dmsServerList.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() {
|
|
|
@@ -704,273 +806,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;
|
|
|
}
|
|
|
-.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;
|
|
|
+
|
|
|
+/* 应用卡片网格样式 */
|
|
|
+.applications-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
|
+ gap: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 应用卡片样式 */
|
|
|
+.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);
|
|
|
+ // }
|
|
|
}
|
|
|
- &_search {
|
|
|
- // margin-top: 100px;
|
|
|
- font-size: 25px;
|
|
|
+
|
|
|
+ .card-content {
|
|
|
+ padding: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+/* 加载更多按钮 */
|
|
|
+.load-more {
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 30px;
|
|
|
|
|
|
- .enter-button {
|
|
|
- padding: 12px 36px;
|
|
|
- font-size: 18px;
|
|
|
- border-radius: 10px;
|
|
|
- background-color: #1890ff;
|
|
|
- border: none;
|
|
|
- transition: all 0.3s ease;
|
|
|
+ .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>
|
DESKTOP-6LTVLN7\Liumouren