<script lang="ts" setup>
|
import { computed, onMounted } from 'vue';
|
|
import { getDataInterfaceRes } from '#/api/systemData/dataInterface';
|
import { getAuthMediaUrl, getParamList } from '#/utils/jnpf';
|
|
import CardHeader from '../CardHeader/index.vue';
|
import webLink from '../Link/index.vue';
|
|
const props = defineProps(['activeData']);
|
|
const getValue = computed(() => {
|
const val = props.activeData.option.defaultValue;
|
if (props.activeData.option.styleType == 1 && val) return getAuthMediaUrl(val);
|
return val;
|
});
|
|
function initData() {
|
if (props.activeData.dataType === 'dynamic') {
|
props.activeData.option.defaultValue = '';
|
const propsApi = props.activeData.propsApi;
|
if (!propsApi) return;
|
const query = { paramList: getParamList(props.activeData.templateJson) };
|
getDataInterfaceRes(propsApi, query).then((res) => {
|
props.activeData.option.defaultValue = res.data;
|
});
|
}
|
}
|
|
onMounted(() => initData());
|
</script>
|
<template>
|
<a-card class="portal-card-box">
|
<template #title v-if="activeData.title">
|
<CardHeader :title="activeData.title" :card="activeData.card" />
|
</template>
|
<div class="portal-card-body">
|
<web-link
|
class="web-link"
|
v-if="getValue"
|
:link-type="activeData.option.linkType"
|
:url-address="activeData.option.urlAddress"
|
:link-target="activeData.option.linkTarget"
|
:type="activeData.option.type"
|
:property-json="activeData.option.propertyJson">
|
<img class="image" :style="{ 'object-fit': activeData.option.imageFillStyle }" :src="getValue" />
|
<div
|
class="bottom-text text-ellipsis"
|
v-if="activeData.option.textDefaultValue"
|
:style="{
|
color: activeData.option.textFontColor,
|
'font-size': `${activeData.option.textFontSize}px`,
|
'text-align': activeData.option.textLeft,
|
background: activeData.option.textBgColor,
|
'font-weight': activeData.option.textFontWeight ? 'bolder' : 'normal',
|
'font-style': activeData.option.textFontStyle ? 'italic' : '',
|
}">
|
{{ activeData.option.textDefaultValue }}
|
</div>
|
</web-link>
|
<div class="portal-common-noData" v-else>
|
<img src="@/assets/images/portal/nodata.png" alt="" class="noData-img" />
|
<p class="noData-txt">暂无图片</p>
|
</div>
|
</div>
|
</a-card>
|
</template>
|
<style lang="scss" scoped>
|
.portal-card-body {
|
height: 100%;
|
|
.web-link,
|
.image {
|
width: 100%;
|
height: 100%;
|
}
|
|
.bottom-text {
|
position: absolute;
|
bottom: 0;
|
width: 100%;
|
height: 30px;
|
padding: 0 10px;
|
font-size: 14px;
|
line-height: 30px;
|
color: #fff;
|
background: #000;
|
}
|
}
|
</style>
|
