ModuleDHZ.vue 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <template>
  2. <!-- 常用模块 -->
  3. <ventBox1 class="module-common" :style="style">
  4. <template v-if="moduleName" #title>
  5. <div :class="{ 'cursor-pointer': !!moduleData.to }" @click="redirectTo">{{ moduleName }}</div>
  6. </template>
  7. <template #container>
  8. <slot>
  9. <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @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 ventBox1 from '/@/components/vent/ventBox1.vue';
  22. import { openWindow } from '/@/utils';
  23. // import { ModuleProps } from '../types';
  24. const props = defineProps<{
  25. /** 配置的详细模块信息 */
  26. moduleData: any;
  27. /** 配置的详细样式信息 */
  28. showStyle: any;
  29. /** 该模块配置中的设备标识符 */
  30. deviceType: string;
  31. /** api返回的数据 */
  32. data: any;
  33. moduleName: string;
  34. visible: boolean;
  35. }>();
  36. defineEmits(['close', 'click']);
  37. const { header } = props.moduleData;
  38. const selectedData = ref();
  39. const style = computed(() => {
  40. const size = props.showStyle.size;
  41. const position = props.showStyle.position;
  42. return size + position + 'position: absolute;';
  43. });
  44. // 根据配置里的定位判断应该使用哪个module组件
  45. // function getModuleComponent(position) {
  46. // if (position === '中下') {
  47. // return ModuleBottom;
  48. // }
  49. // return ModuleLeft;
  50. // }
  51. function redirectTo() {
  52. const { to } = props.moduleData;
  53. if (!to) return;
  54. openWindow(to);
  55. }
  56. </script>
  57. <style scoped>
  58. .module-common .box1-center {
  59. height: calc(100% - 70px);
  60. }
  61. :deep(.box1-center) {
  62. height: calc(100% - 70px);
  63. }
  64. :deep(.box1-center > .box-container) {
  65. height: 100%;
  66. padding: 0 !important;
  67. width: 100% !important;
  68. }
  69. </style>