|
|
@@ -0,0 +1,388 @@
|
|
|
+<template>
|
|
|
+ <a-modal :visible="true" :width="width" :maskClosable="false" :destroyOnClose="true" centered :title="title" :footer="null"
|
|
|
+ wrapClassName="modal-wrap" @cancel="onClose">
|
|
|
+ <div class="action-content">
|
|
|
+ <div class="top-header">
|
|
|
+ <div class="img-container">
|
|
|
+ <img :src="baseInfo?.thumbnail || './static/img/default-dr3.jpg'" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="res-title">
|
|
|
+ <div class="title">{{ baseInfo.servicename }}</div>
|
|
|
+ <div class="describle">描述:{{ baseInfo.description }}</div>
|
|
|
+ <div class="small-mark">
|
|
|
+ <div class="update-time">更新时间:{{ baseInfo.updatedate }}</div>
|
|
|
+ <div class="service-type">服务类型:{{ baseInfo.servicetype }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="look">
|
|
|
+ <a target="_blank" :href="`./mapview.html?${baseInfo.serviceid}`">
|
|
|
+ <span>浏览</span>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="base-info info-item">
|
|
|
+ <div class="info-title">基本信息</div>
|
|
|
+ <div class="form-box">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="3" class="form-item-title form-title">真实地址</a-col>
|
|
|
+ <a-col :span="21" class="form-item-value form-title">{{ baseInfo.mapingurl }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="6" class="form-item-title form-title" style="border-top: none;">资源名称</a-col>
|
|
|
+ <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
|
|
|
+ baseInfo.servicename }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="6" class="form-item-title form-title"
|
|
|
+ style="border-top: none;border-left: none;">资源别名</a-col>
|
|
|
+ <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
|
|
|
+ baseInfo.servicealiasname }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="3" class="form-item-title form-title" style="border-top: none;">缩略图</a-col>
|
|
|
+ <a-col :span="21" class="form-item-value form-title" style="border-top: none;"
|
|
|
+ :title="baseInfo.thumbnail">{{ baseInfo.thumbnail }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="3" class="form-item-title form-title" style="border-top: none;">资源描述</a-col>
|
|
|
+ <a-col :span="21" class="form-item-value form-title" style="border-top: none;">{{
|
|
|
+ baseInfo.description }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="meta-info info-item">
|
|
|
+ <div class="info-title">描述信息</div>
|
|
|
+ <div class="form-box">
|
|
|
+ <!-- 系统标签,资源类型 -->
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="6" class="form-item-title form-title">系统标签</a-col>
|
|
|
+ <a-col :span="18" class="form-item-value form-title">{{ metaInfo.tag }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="6" class="form-item-title form-title" style="border-left: none;">资源类型</a-col>
|
|
|
+ <a-col :span="18" class="form-item-value form-title">{{ baseInfo.servicealiasname }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <!-- 数据类型,数据范围 -->
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="6" class="form-item-title form-title" style="border-top: none;">数据类型</a-col>
|
|
|
+ <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
|
|
|
+ metaInfo.dataType }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="6" class="form-item-title form-title"
|
|
|
+ style="border-top: none;border-left: none;">数据范围</a-col>
|
|
|
+ <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
|
|
|
+ baseInfo.servicealiasname }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <!-- 更新方式,数据来源 -->
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="6" class="form-item-title form-title" style="border-top: none;">更新方式</a-col>
|
|
|
+ <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
|
|
|
+ metaInfo.updateType }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="6" class="form-item-title form-title"
|
|
|
+ style="border-top: none;border-left: none;">数据来源</a-col>
|
|
|
+ <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
|
|
|
+ metaInfo.source }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <!-- 管理部门,责任科室 -->
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="6" class="form-item-title form-title" style="border-top: none;">管理部门</a-col>
|
|
|
+ <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
|
|
|
+ metaInfo.keepingunit }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="6" class="form-item-title form-title"
|
|
|
+ style="border-top: none;border-left: none;">责任科室</a-col>
|
|
|
+ <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
|
|
|
+ metaInfo.rboffice }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <!-- 密级,坐标系 -->
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="6" class="form-item-title form-title" style="border-top: none;">密级</a-col>
|
|
|
+ <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
|
|
|
+ metaInfo.secretlevel }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="6" class="form-item-title form-title"
|
|
|
+ style="border-top: none;border-left: none;">坐标系</a-col>
|
|
|
+ <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
|
|
|
+ metaInfo.crs }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <!-- EPSG code,运行状态 -->
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="6" class="form-item-title form-title" style="border-top: none;">EPSG
|
|
|
+ code</a-col>
|
|
|
+ <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
|
|
|
+ metaInfo.epsgCode }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="6" class="form-item-title form-title"
|
|
|
+ style="border-top: none;border-left: none;">运行状态</a-col>
|
|
|
+ <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
|
|
|
+ metaInfo.status ? '正常运行' : '停运' }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <!-- 是否为历史版本,适合申请流程 -->
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="6" class="form-item-title form-title"
|
|
|
+ style="border-top: none;">是否为历史版本</a-col>
|
|
|
+ <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
|
|
|
+ Boolean(Number(metaInfo.ishistory)) ? '是' : '否' }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="6" class="form-item-title form-title"
|
|
|
+ style="border-top: none;border-left: none;">适合申请流程</a-col>
|
|
|
+ <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
|
|
|
+ metaInfo.shsqlc }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <!-- 备注 -->
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="3" class="form-item-title form-title" style="border-top: none;">备注</a-col>
|
|
|
+ <a-col :span="21" class="form-item-value form-title" style="border-top: none;">{{
|
|
|
+ metaInfo.bz }}</a-col>
|
|
|
+ </a-row>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="public-set info-item">
|
|
|
+ <div class="info-title">共享设置</div>
|
|
|
+ <div class="form-box">
|
|
|
+ <!-- 是否公开,是否共享 -->
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="6" class="form-item-title form-title">是否公开</a-col>
|
|
|
+ <a-col :span="18" class="form-item-value form-title">{{ '是' }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="6" class="form-item-title form-title" style="border-left: none;">是否共享</a-col>
|
|
|
+ <a-col :span="18" class="form-item-value form-title">{{ '是' }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <!-- 外部申请,是否展示 -->
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="6" class="form-item-title form-title" style="border-top: none;">外部申请</a-col>
|
|
|
+ <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
|
|
|
+ '是' }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="6" class="form-item-title form-title"
|
|
|
+ style="border-top: none;border-left: none;">是否展示</a-col>
|
|
|
+ <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
|
|
|
+ Boolean(Number(metaInfo.isShow)) ? '是' : '否' }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-modal>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { defineComponent, reactive, ref, onMounted, watch, toRefs } from 'vue';
|
|
|
+import { message } from 'ant-design-vue';
|
|
|
+import { session } from '/@/utils/Memory';
|
|
|
+import moment from 'moment';
|
|
|
+
|
|
|
+import { getResViewInfo } from '/@/api/resource/plat';
|
|
|
+
|
|
|
+const props = {
|
|
|
+ resId: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ }
|
|
|
+}
|
|
|
+export default defineComponent({
|
|
|
+ name: 'modal',
|
|
|
+ components: {},
|
|
|
+ props,
|
|
|
+ setup(props, { emit }) {
|
|
|
+ const data = reactive({
|
|
|
+ width: '1200px',
|
|
|
+ title: '资源详情',
|
|
|
+ })
|
|
|
+ // 关闭请求弹窗
|
|
|
+ const onClose = (e) => {
|
|
|
+ emit('closeModal')
|
|
|
+ }
|
|
|
+ const baseInfo = ref({})
|
|
|
+ const metaInfo = ref({})
|
|
|
+ //初始化请求所需数据
|
|
|
+ onMounted(() => {
|
|
|
+ console.log(props.resId);
|
|
|
+ getResViewInfo(props.resId).then(res => {
|
|
|
+ console.log(res);
|
|
|
+ baseInfo.value = res.servicebase;
|
|
|
+ baseInfo.value.thumbnail = res.metadata.thumbnail
|
|
|
+ baseInfo.value.updatedate = moment(baseInfo.value.updatedate).format('YYYY-MM-DD HH:mm:ss');
|
|
|
+ metaInfo.value = res.metadata
|
|
|
+ })
|
|
|
+ })
|
|
|
+ return {
|
|
|
+ baseInfo,
|
|
|
+ metaInfo,
|
|
|
+ // formRef,
|
|
|
+ ...toRefs(data),
|
|
|
+ onClose
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.modal-wrap {
|
|
|
+ .action-content {
|
|
|
+ padding: 20px;
|
|
|
+ max-height: 800px;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ .top-header {
|
|
|
+ margin-left: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .img-container {
|
|
|
+ width: 260px;
|
|
|
+ height: 200px;
|
|
|
+ // border: 1px solid blue;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .res-title {
|
|
|
+ flex-grow: 1;
|
|
|
+ margin-left: 30px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 26px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ .describle {
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .small-mark {
|
|
|
+ width: 100%;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 1px solid rgb(220, 220, 220);
|
|
|
+
|
|
|
+ .update-time {
|
|
|
+ margin-right: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .look {
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-left: 10px;
|
|
|
+ width: 100px;
|
|
|
+ height: 35px;
|
|
|
+ line-height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ border: 2px solid blue;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: blue;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ cursor: pointer;
|
|
|
+ user-select: none;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-item {
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ .info-title {
|
|
|
+ margin: 10px 0;
|
|
|
+ padding-left: 10px;
|
|
|
+ border-left: 3px solid blue;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-box {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .form-title {
|
|
|
+ border: 1px solid rgb(230, 230, 230);
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 27px;
|
|
|
+ padding-left: 5px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-item-title {
|
|
|
+ background-color: rgb(249, 249, 249);
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-item-value {
|
|
|
+ border-left: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|