<script lang="ts" setup>
|
import { inject } from 'vue';
|
|
import { ScrollContainer } from '@jnpf/ui';
|
|
import emptyImage from '#/assets/images/portal/dashboardNodata.png';
|
|
import Parser from '../../Design/components/Parser.vue';
|
import { noNeedMaskList } from '../../Design/helper/dataMap';
|
|
defineProps({
|
layout: { type: Array as PropType<any[]>, default: () => [] },
|
mask: { type: Boolean, default: false },
|
detailed: { type: Boolean, default: false },
|
enabledLock: { type: Number, default: 1 },
|
});
|
const emit = defineEmits(['register', 'layoutUpdatedEvent']);
|
const emitter: any = inject('emitter');
|
function movedEvent() {
|
emit('layoutUpdatedEvent');
|
}
|
function resizedEvent(i, item) {
|
emitter.emit(`eChart${i}`);
|
const loop = (data) => {
|
if (data.children && item.children.length) {
|
data.children.map((ele) => {
|
if (ele.jnpfKey) emitter.emit(`eChart${ele.i}`);
|
if (ele.children && ele.children.length) loop(ele);
|
return ele;
|
});
|
}
|
};
|
loop(item);
|
movedEvent();
|
}
|
</script>
|
<template>
|
<ScrollContainer class="layout-area jnpf-basic-portal !p-0">
|
<template v-if="layout.length">
|
<grid-layout :layout="layout" :row-height="40">
|
<grid-item
|
v-for="item in layout"
|
:x="item.x"
|
:y="item.y"
|
:w="item.w"
|
:h="item.h"
|
:i="item.i"
|
:key="item.i"
|
:max-h="item.maxH"
|
:min-h="item.minH"
|
:min-w="item.minW"
|
:max-w="item.maxW"
|
@resized="resizedEvent(item.i, item)"
|
@moved="movedEvent"
|
:static="!!enabledLock">
|
<Parser :item="item" :detailed="true" />
|
<div class="mask" v-if="mask && !noNeedMaskList.includes(item.jnpfKey)"></div>
|
</grid-item>
|
</grid-layout>
|
</template>
|
<div class="portal-layout-nodata" v-else>
|
<jnpf-empty :image="emptyImage" />
|
</div>
|
</ScrollContainer>
|
</template>
|
<style lang="scss" scoped>
|
.layout-area {
|
height: 100%;
|
|
:deep(.ant-card) {
|
width: 100%;
|
height: 100%;
|
|
.el-card__body {
|
padding: 0;
|
}
|
}
|
}
|
</style>
|
