94 lines
2.3 KiB
Vue
94 lines
2.3 KiB
Vue
<template>
|
|
<div class="box" :class="props.config.showTitle ? 'pt-10' : ''">
|
|
<div class="item-title" v-if="props.config.showTitle">{{ props.title }}</div>
|
|
<div ref="chartRef" class="item">
|
|
<a-image v-if="imageUrl" :src="imageUrl" height="100%" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref, watch } from 'vue';
|
|
import { ImageProperties } from '../config/properties';
|
|
import { DesktopComponent } from '/@/enums/desktop';
|
|
import { ImageConfig } from '/@/model/desktop/designer';
|
|
import { getFileList } from '/@/api/system/file';
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
type: DesktopComponent;
|
|
w: number;
|
|
h: number;
|
|
title: string;
|
|
config: ImageConfig;
|
|
}>(),
|
|
{
|
|
type: DesktopComponent.IMAGE,
|
|
w: 0,
|
|
h: 0,
|
|
config: () => {
|
|
return ImageProperties;
|
|
}
|
|
}
|
|
);
|
|
const imageUrl = ref('');
|
|
onMounted(() => {
|
|
getImage();
|
|
});
|
|
watch(
|
|
() => props.config.folderId,
|
|
() => {
|
|
getImage();
|
|
},
|
|
{
|
|
deep: true
|
|
}
|
|
);
|
|
async function getImage() {
|
|
if (props.config.folderId) {
|
|
let fileList = await getFileList({ tableId: props.config.folderId });
|
|
if (fileList.length) {
|
|
imageUrl.value = fileList[0].fileUrl;
|
|
}
|
|
} else {
|
|
imageUrl.value = '';
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.box {
|
|
.item-title {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
color: #262626;
|
|
font-size: 14px;
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.item-title::after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
height: 1px;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.item {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
:deep(.ant-image) {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|