|
@@ -23,86 +23,86 @@
|
|
|
</Transition>
|
|
</Transition>
|
|
|
</template>
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
|
- import Header from './headerBelt.vue';
|
|
|
|
|
- import Content from '../../components/content.vue';
|
|
|
|
|
- // import ModuleLeft from './original/moduleLeft.vue';
|
|
|
|
|
- // import ModuleBottom from './original/moduleBottom.vue';
|
|
|
|
|
- import { computed, ref } from 'vue';
|
|
|
|
|
- import ventBox1 from './ventBoxBelt.vue';
|
|
|
|
|
- import { openWindow } from '/@/utils';
|
|
|
|
|
- import { getFormattedText } from '../../hooks/helper';
|
|
|
|
|
- // import { ModuleProps } from '../types';
|
|
|
|
|
|
|
+import Header from './headerBelt.vue';
|
|
|
|
|
+import Content from './contentBelt.vue';
|
|
|
|
|
+// import ModuleLeft from './original/moduleLeft.vue';
|
|
|
|
|
+// import ModuleBottom from './original/moduleBottom.vue';
|
|
|
|
|
+import { computed, ref } from 'vue';
|
|
|
|
|
+import ventBox1 from './ventBoxBelt.vue';
|
|
|
|
|
+import { openWindow } from '/@/utils';
|
|
|
|
|
+import { getFormattedText } from '../../hooks/helper';
|
|
|
|
|
+// import { ModuleProps } from '../types';
|
|
|
|
|
|
|
|
- const props = defineProps<{
|
|
|
|
|
- pageType: string;
|
|
|
|
|
- /** 配置的详细模块信息 */
|
|
|
|
|
- moduleData: any;
|
|
|
|
|
- /** 配置的详细样式信息 */
|
|
|
|
|
- showStyle: any;
|
|
|
|
|
- /** 该模块配置中的设备标识符 */
|
|
|
|
|
- deviceType: string;
|
|
|
|
|
- /** api返回的数据 */
|
|
|
|
|
- data: any;
|
|
|
|
|
- moduleName: string;
|
|
|
|
|
- visible: boolean;
|
|
|
|
|
- chartData?: any;
|
|
|
|
|
- }>();
|
|
|
|
|
- defineEmits(['close', 'click']);
|
|
|
|
|
|
|
+const props = defineProps<{
|
|
|
|
|
+ pageType: string;
|
|
|
|
|
+ /** 配置的详细模块信息 */
|
|
|
|
|
+ moduleData: any;
|
|
|
|
|
+ /** 配置的详细样式信息 */
|
|
|
|
|
+ showStyle: any;
|
|
|
|
|
+ /** 该模块配置中的设备标识符 */
|
|
|
|
|
+ deviceType: string;
|
|
|
|
|
+ /** api返回的数据 */
|
|
|
|
|
+ data: any;
|
|
|
|
|
+ moduleName: string;
|
|
|
|
|
+ visible: boolean;
|
|
|
|
|
+ chartData?: any;
|
|
|
|
|
+}>();
|
|
|
|
|
+defineEmits(['close', 'click']);
|
|
|
|
|
|
|
|
- const { header } = props.moduleData;
|
|
|
|
|
- const selectedData = ref();
|
|
|
|
|
|
|
+const { header } = props.moduleData;
|
|
|
|
|
+const selectedData = ref();
|
|
|
|
|
|
|
|
- const style = computed(() => {
|
|
|
|
|
- const size = props.showStyle.size;
|
|
|
|
|
- const position = props.showStyle.position;
|
|
|
|
|
- console.log(props.showStyle, '123123');
|
|
|
|
|
- return size + position + 'position: absolute; pointer-events: auto; z-index: 1';
|
|
|
|
|
- });
|
|
|
|
|
- const pageType = computed(() => {
|
|
|
|
|
- return props.pageType || '';
|
|
|
|
|
- });
|
|
|
|
|
- const capitalizedPosition = computed(() => {
|
|
|
|
|
- return props.showStyle.position.includes('left') ? 'Left' : 'Right';
|
|
|
|
|
- });
|
|
|
|
|
|
|
+const style = computed(() => {
|
|
|
|
|
+ const size = props.showStyle.size;
|
|
|
|
|
+ const position = props.showStyle.position;
|
|
|
|
|
+ console.log(props.showStyle, '123123');
|
|
|
|
|
+ return size + position + 'position: absolute; pointer-events: auto; z-index: 1';
|
|
|
|
|
+});
|
|
|
|
|
+const pageType = computed(() => {
|
|
|
|
|
+ return props.pageType || '';
|
|
|
|
|
+});
|
|
|
|
|
+const capitalizedPosition = computed(() => {
|
|
|
|
|
+ return props.showStyle.position.includes('left') ? 'Left' : 'Right';
|
|
|
|
|
+});
|
|
|
|
|
|
|
|
- // 根据配置里的定位判断应该使用哪个class
|
|
|
|
|
- function getModuleClass({ size, position }) {
|
|
|
|
|
- const [_, width] = size.match(/width:([0-9]+)px/) || [];
|
|
|
|
|
- if (position.includes('bottom') || parseInt(width) > 800) {
|
|
|
|
|
- return 'module-common module-common-longer';
|
|
|
|
|
- }
|
|
|
|
|
- return 'module-common';
|
|
|
|
|
|
|
+// 根据配置里的定位判断应该使用哪个class
|
|
|
|
|
+function getModuleClass({ size, position }) {
|
|
|
|
|
+ const [_, width] = size.match(/width:([0-9]+)px/) || [];
|
|
|
|
|
+ if (position.includes('bottom') || parseInt(width) > 800) {
|
|
|
|
|
+ return 'module-common module-common-longer';
|
|
|
}
|
|
}
|
|
|
|
|
+ return 'module-common';
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
- function redirectTo() {
|
|
|
|
|
- const { to } = props.moduleData;
|
|
|
|
|
- if (!to) return;
|
|
|
|
|
- openWindow(getFormattedText(selectedData.value, to));
|
|
|
|
|
- }
|
|
|
|
|
|
|
+function redirectTo() {
|
|
|
|
|
+ const { to } = props.moduleData;
|
|
|
|
|
+ if (!to) return;
|
|
|
|
|
+ openWindow(getFormattedText(selectedData.value, to));
|
|
|
|
|
+}
|
|
|
</script>
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
|
- @import '/@/design/theme.less';
|
|
|
|
|
|
|
+@import '/@/design/theme.less';
|
|
|
|
|
|
|
|
- .module-common .box1-center {
|
|
|
|
|
- height: calc(100% - 48px);
|
|
|
|
|
- }
|
|
|
|
|
|
|
+.module-common .box1-center {
|
|
|
|
|
+ height: calc(100% - 48px);
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
- :deep(.box1-center) {
|
|
|
|
|
- height: calc(100% - 48px);
|
|
|
|
|
- }
|
|
|
|
|
- :deep(.box1-center > .box-container) {
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- padding: 0 !important;
|
|
|
|
|
- width: 100% !important;
|
|
|
|
|
|
|
+:deep(.box1-center) {
|
|
|
|
|
+ height: calc(100% - 48px);
|
|
|
|
|
+}
|
|
|
|
|
+:deep(.box1-center > .box-container) {
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ padding: 0 !important;
|
|
|
|
|
+ width: 100% !important;
|
|
|
|
|
+}
|
|
|
|
|
+.module-common-longer {
|
|
|
|
|
+ :deep(.box1-top) {
|
|
|
|
|
+ --image-box1-top: url('/@/assets/images/beltFire/1-1.png');
|
|
|
|
|
+ background-image: url('/@/assets/images/beltFire/1-1.png');
|
|
|
}
|
|
}
|
|
|
- .module-common-longer {
|
|
|
|
|
- :deep(.box1-top) {
|
|
|
|
|
- --image-box1-top: url('/@/assets/images/beltFire/1-1.png');
|
|
|
|
|
- background-image: url('/@/assets/images/beltFire/1-1.png');
|
|
|
|
|
- }
|
|
|
|
|
- :deep(.box1-bottom) {
|
|
|
|
|
- --image-box1-bottom: url('/@/assets/images/beltFire/1-2.png');
|
|
|
|
|
- background-image: url('/@/assets/images/beltFire/1-2.png');
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ :deep(.box1-bottom) {
|
|
|
|
|
+ --image-box1-bottom: url('/@/assets/images/beltFire/1-2.png');
|
|
|
|
|
+ background-image: url('/@/assets/images/beltFire/1-2.png');
|
|
|
}
|
|
}
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|