hlt_gis_admin/src/views/resource/plat/item/child/DetailModal.vue

<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?.thumbnail2 || './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" v-if="seeShow">
                        <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">{{ '' }}</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.serviceTags }}</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.servicetype }}</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 === '2' ? '二维' : metaInfo.dataType === '3' ? '三维' : '' }}</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.dataScope }}</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;">{{
                                    baseInfo.runtimestatus ? '启用' : '禁用' }}</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">{{ baseInfo.ispublic === '1' ? '是' :
                                    '否'
                                }}</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">{{ metaInfo.searched === '1' ? '是' :
                                    '否'
                                }}</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;">{{
                                    baseInfo.externalApply === '1' ? '是' : '否' }}</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.isShow === '1' ? '是' : '否' }}</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 { setHtmlImg } from '/@/views/minWidgets/CommonWay.js';
import { getResViewInfo, queryServiceTags } from '/@/api/resource/plat';
import { getAllTags } from '/@/api/sys/tag';

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({})
        const seeShow = ref(false);
        //初始化请求所需数据
        onMounted(async () => {
            console.log(props.resId);
            let res = await getResViewInfo(props.resId)
            console.log(res);
            seeShow.value = res.type == 'DR' ? false : true;
            baseInfo.value = res.servicebase;
            baseInfo.value.thumbnail = res.metadata.thumbnail
            session.getItem('thumbnail2') && (baseInfo.value.thumbnail2 = session.getItem('thumbnail2'));
            baseInfo.value.updatedate = moment(baseInfo.value.updatedate).format('YYYY-MM-DD HH:mm:ss');
            metaInfo.value = res.metadata
            //所有标签
            let param = {
                1: session.getItem('tokenV2')
            }
            let allTags = await getAllTags(param)
            if (allTags.status === '0' && allTags.result) {
                let allTagArr = JSON.parse(allTags.result)
                let keepingUnitObj = {}
                let rbOfficeObj = {}
                let secretLevelObj = {}
                let epsgCodeObj = {}
                let serviceTagsObj = {}
                allTagArr.forEach(item => {
                    //管理部门
                    item.type === '管理部门' && (keepingUnitObj[item.code] = item.name)
                    //责任科室
                    item.type === '责任科室' && (rbOfficeObj[item.code] = item.name)
                    //密级
                    item.type === '密级' && (secretLevelObj[item.code] = item.name)
                    //EPSG code
                    item.type === 'EPSG code' && (epsgCodeObj[item.code] = item.name)
                    //资源标签
                    serviceTagsObj[item.code] = item.name
                    if (metaInfo.value.keywords) {
                        let tags = metaInfo.value.keywords.indexOf('[') > -1 ? JSON.parse(metaInfo.value.keywords) : [metaInfo.value.keywords];
                        let resStr = ''
                        tags.forEach(tag => {
                            serviceTagsObj[tag] ? resStr += serviceTagsObj[tag] + ',' : resStr += ''
                        })
                        metaInfo.value.serviceTags = resStr.slice(0, -1)
                    }
                })
                metaInfo.value.keepingunit = keepingUnitObj[metaInfo.value.keepingunit]
                metaInfo.value.rboffice = rbOfficeObj[metaInfo.value.rboffice]
                metaInfo.value.secretlevel = secretLevelObj[metaInfo.value.secretlevel]
                metaInfo.value.epsgCode = epsgCodeObj[metaInfo.value.epsgCode]
            }
        })
        return {
            seeShow,
            // setHtmlImg,
            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>