ModulePlain.vue 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <template>
  2. <div :style="style">
  3. <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event" />
  4. <Content :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }" :moduleData="moduleData" :data="selectedData" />
  5. </div>
  6. </template>
  7. <script lang="ts" setup>
  8. import Header from '/@/views/vent/home/configurable/components/header.vue';
  9. import Content from '/@/views/vent/home/configurable/components/content.vue';
  10. // import ModuleLeft from './original/moduleLeft.vue';
  11. // import ModuleBottom from './original/moduleBottom.vue';
  12. import { computed, ref } from 'vue';
  13. // import { ModuleProps } from '../types';
  14. const props = defineProps<{
  15. /** 配置的详细模块信息 */
  16. moduleData: any;
  17. /** 配置的详细样式信息 */
  18. showStyle: any;
  19. /** 该模块配置中的设备标识符 */
  20. deviceType: string;
  21. /** api返回的数据 */
  22. data: any;
  23. moduleName: string;
  24. visible: boolean;
  25. }>();
  26. defineEmits(['close', 'click']);
  27. const { header } = props.moduleData;
  28. const selectedData = ref();
  29. const style = computed(() => {
  30. const size = props.showStyle.size;
  31. const position = props.showStyle.position;
  32. return size + position + 'pointer-events: auto;';
  33. });
  34. </script>
  35. <style lang="less" scoped>
  36. @import '/@/design/theme.less';
  37. </style>