ModuleCommon.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <template>
  2. <!-- 常用模块 -->
  3. <ventBox1 class="module-common" :style="style">
  4. <template v-if="moduleName" #title>
  5. <div @click="redirectTo">{{ moduleName }}</div>
  6. </template>
  7. <template #container>
  8. <slot>
  9. <Header :deviceType="deviceType" :moduleData="moduleData" @select="selectedData = $event" />
  10. <Content :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }" :moduleData="moduleData" :data="selectedData" />
  11. </slot>
  12. </template>
  13. </ventBox1>
  14. </template>
  15. <script lang="ts" setup>
  16. import Header from './header.vue';
  17. import Content from './content.vue';
  18. // import ModuleLeft from './original/moduleLeft.vue';
  19. // import ModuleBottom from './original/moduleBottom.vue';
  20. import { computed, ref } from 'vue';
  21. import { ShowStyle, ModuleData } from '../../../deviceManager/configurationTable/types';
  22. import ventBox1 from '/@/components/vent/ventBox1.vue';
  23. import { openWindow } from '/@/utils';
  24. const props = defineProps<{
  25. moduleData: ModuleData;
  26. showStyle: ShowStyle;
  27. moduleName: string;
  28. deviceType: string;
  29. visible: boolean;
  30. }>();
  31. defineEmits(['close', 'click']);
  32. const { header } = props.moduleData;
  33. const selectedData = ref();
  34. const style = computed(() => {
  35. const size = props.showStyle.size;
  36. const position = props.showStyle.position;
  37. return size + position + 'position: absolute;';
  38. });
  39. // 根据配置里的定位判断应该使用哪个module组件
  40. // function getModuleComponent(position) {
  41. // if (position === '中下') {
  42. // return ModuleBottom;
  43. // }
  44. // return ModuleLeft;
  45. // }
  46. function redirectTo() {
  47. const { to } = props.moduleData;
  48. if (!to) return;
  49. openWindow(to);
  50. }
  51. </script>
  52. <style scoped>
  53. .module-common .box1-center {
  54. height: calc(100% - 70px);
  55. }
  56. :deep(.box1-center) {
  57. height: calc(100% - 70px);
  58. }
  59. :deep(.box1-center > .box-container) {
  60. height: 100%;
  61. padding: 0 !important;
  62. width: 100% !important;
  63. }
  64. </style>