geg-gas-web/src/views/generator/desktop/components/designer/infos/Image.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>