123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 |
- <template>
- <!-- 常用模块 -->
- <ventBox1 class="module-common" :style="style">
- <template v-if="moduleName" #title>
- <div @click="redirectTo">{{ moduleName }}</div>
- </template>
- <template #container>
- <slot>
- <Header :deviceType="deviceType" :moduleData="moduleData" @select="selectedData = $event" />
- <Content :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }" :moduleData="moduleData" :data="selectedData" />
- </slot>
- </template>
- </ventBox1>
- </template>
- <script lang="ts" setup>
- import Header from './header.vue';
- import Content from './content.vue';
- // import ModuleLeft from './original/moduleLeft.vue';
- // import ModuleBottom from './original/moduleBottom.vue';
- import { computed, ref } from 'vue';
- import { ShowStyle, ModuleData } from '../../../deviceManager/configurationTable/types';
- import ventBox1 from '/@/components/vent/ventBox1.vue';
- import { openWindow } from '/@/utils';
- const props = defineProps<{
- moduleData: ModuleData;
- showStyle: ShowStyle;
- moduleName: string;
- deviceType: string;
- visible: boolean;
- }>();
- defineEmits(['close', 'click']);
- const { header } = props.moduleData;
- const selectedData = ref();
- const style = computed(() => {
- const size = props.showStyle.size;
- const position = props.showStyle.position;
- return size + position + 'position: absolute;';
- });
- // 根据配置里的定位判断应该使用哪个module组件
- // function getModuleComponent(position) {
- // if (position === '中下') {
- // return ModuleBottom;
- // }
- // return ModuleLeft;
- // }
- function redirectTo() {
- const { to } = props.moduleData;
- if (!to) return;
- openWindow(to);
- }
- </script>
- <style scoped>
- .module-common .box1-center {
- height: calc(100% - 70px);
- }
- :deep(.box1-center) {
- height: calc(100% - 70px);
- }
- :deep(.box1-center > .box-container) {
- height: 100%;
- padding: 0 !important;
- width: 100% !important;
- }
- </style>
|