|
|
@@ -0,0 +1,89 @@
|
|
|
+<template>
|
|
|
+ <!-- 原版模块 -->
|
|
|
+ <component
|
|
|
+ :is="getModuleComponent(showStyle)"
|
|
|
+ :style="style"
|
|
|
+ :title="moduleName"
|
|
|
+ :visible="visible"
|
|
|
+ :class="{ 'cursor-pointer': !!moduleData.to }"
|
|
|
+ @close="$emit('close')"
|
|
|
+ @click="redirectTo"
|
|
|
+ class="component-module"
|
|
|
+ >
|
|
|
+ <slot>
|
|
|
+ <!-- <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event" /> -->
|
|
|
+ <component
|
|
|
+ :is="getHeaderComponent(showStyle.headerPosition)"
|
|
|
+ :deviceType="deviceType"
|
|
|
+ :moduleData="moduleData"
|
|
|
+ :data="data"
|
|
|
+ @select="selectedData = $event"
|
|
|
+ />
|
|
|
+ <Content :style="{ height: header.show ? 'calc(100% - 45px)' : '100%' }" :moduleData="moduleData" :data="selectedData" />
|
|
|
+ </slot>
|
|
|
+ </component>
|
|
|
+</template>
|
|
|
+<script lang="ts" setup>
|
|
|
+import Header from './header.vue';
|
|
|
+import Content from './content.vue';
|
|
|
+import ModuleTop from './originalNew/moduleTop.vue';
|
|
|
+import { computed, ref } from 'vue';
|
|
|
+import { openWindow } from '/@/utils';
|
|
|
+import { getFormattedText } from '../hooks/helper';
|
|
|
+// import { ModuleProps } from '../types';
|
|
|
+
|
|
|
+const props = defineProps<{
|
|
|
+ /** 配置的详细模块信息 */
|
|
|
+ moduleData: any;
|
|
|
+ /** 配置的详细样式信息 */
|
|
|
+ showStyle: any;
|
|
|
+ /** 该模块配置中的设备标识符 */
|
|
|
+ deviceType: string;
|
|
|
+ /** api返回的数据 */
|
|
|
+ data: any;
|
|
|
+ moduleName: 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;
|
|
|
+ // const headerPosition = props.showStyle.headerPosition;
|
|
|
+ return size + position;
|
|
|
+});
|
|
|
+
|
|
|
+// 根据配置里的定位判断应该使用哪个module组件
|
|
|
+function getModuleComponent({ size, position, headerPosition }) {
|
|
|
+ // const [_, width] = size.match(/width:([0-9]+)px/) || [];
|
|
|
+ // if (position.includes('top') && parseInt(width) > 800) {
|
|
|
+ // return ModuleTop;
|
|
|
+ // }
|
|
|
+ // if (position.includes('bottom')) {
|
|
|
+ // return ModuleBottom;
|
|
|
+ // }
|
|
|
+ if (headerPosition === 'centerTop') {
|
|
|
+ return ModuleTop;
|
|
|
+ }
|
|
|
+ // if (position.includes('left')) {
|
|
|
+ // return ModuleLeft;
|
|
|
+ // }
|
|
|
+ // if (position.includes('right')) {
|
|
|
+ // return ModuleLeft;
|
|
|
+ // }
|
|
|
+ return ModuleTop;
|
|
|
+}
|
|
|
+function getHeaderComponent(headerType) {
|
|
|
+ return Header; // 默认返回顶部模块
|
|
|
+}
|
|
|
+function redirectTo() {
|
|
|
+ const { to } = props.moduleData;
|
|
|
+ if (!to) return;
|
|
|
+ openWindow(getFormattedText(selectedData.value, to));
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+</style>>
|
hongrunxia