<script lang="ts" setup>
|
import { computed, onMounted, reactive, toRefs } from 'vue';
|
|
import { cloneDeep } from 'lodash-es';
|
import { Vue3Marquee } from 'vue3-marquee';
|
|
import { getDataInterfaceRes } from '#/api/systemData/dataInterface';
|
import { getParamList } from '#/utils/jnpf';
|
|
import CardHeader from '../CardHeader/index.vue';
|
import webLink from '../Link/index.vue';
|
|
interface State {
|
urlAddress: string;
|
}
|
|
const props = defineProps(['activeData']);
|
const state = reactive<State>({
|
urlAddress: '',
|
});
|
const { urlAddress } = toRefs(state);
|
const getValue = computed(() => props.activeData.option.defaultValue);
|
|
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;
|
resolvedURL();
|
});
|
} else {
|
resolvedURL();
|
}
|
}
|
function resolvedURL() {
|
const urlAddress = cloneDeep(props.activeData.option.urlAddress);
|
// eslint-disable-next-line no-template-curly-in-string
|
state.urlAddress = urlAddress.replace('${field}', props.activeData.option.defaultValue);
|
}
|
|
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" :style="{ background: activeData.option.textBgColor }">
|
<web-link
|
:link-type="activeData.option.linkType"
|
:url-address="urlAddress"
|
:link-target="activeData.option.linkTarget"
|
:type="activeData.option.type"
|
:property-json="activeData.option.propertyJson"
|
:key="activeData.renderKey">
|
<div
|
class="text"
|
v-if="activeData.option.styleType == 1"
|
:style="{
|
color: activeData.option.textFontColor,
|
'font-size': `${activeData.option.textFontSize}px`,
|
'text-align': activeData.option.textLeft,
|
'font-weight': activeData.option.textFontWeight ? 'bolder' : 'normal',
|
'font-style': activeData.option.textFontStyle ? 'italic' : '',
|
'text-decoration': activeData.option.textUnderLine,
|
cursor: activeData.option.linkType ? 'pointer' : '',
|
}">
|
<Vue3Marquee
|
:style="{ 'text-decoration': activeData.option.textUnderLine }"
|
:key="activeData.renderKey"
|
:vertical="activeData.option.textAutoplayMode !== 'left'"
|
:duration="activeData.option.textAutoplaySpeed / (activeData.option.textAutoplayMode == 'left' ? 10 : 50)"
|
v-if="activeData.option.textAutoplay && getValue">
|
{{ getValue }}
|
</Vue3Marquee>
|
<span v-else>{{ getValue }}</span>
|
</div>
|
<div class="text" v-else v-html="getValue"></div>
|
</web-link>
|
</div>
|
</a-card>
|
</template>
|
<style lang="scss" scoped>
|
.text {
|
margin: 15px;
|
line-height: 1.5;
|
}
|
</style>
|
