mky-vent-base/src/views/vent/home/configurable/components/ModuleCommonDual.vue

<template>
  <ventBox1 :class="getModuleClass(showStyle)" :style="style">
    <template #title>
      <div class="dual-title">
        <div class="title-left">
          <div :class="{ deactived: index === 1, 'cursor-pointer': !!moduleDataA.to }" @click="index = 0">{{ moduleNameA }}</div>
          <div :class="{ deactived: index === 0, 'cursor-pointer': !!moduleDataB.to }" @click="index = 1">{{ moduleNameB }}</div>
        </div>
        <div class="title-center">{{ commonTitle }}</div>
      </div>
    </template>
    <template #container>
      <slot>
        <Header
          v-if="index === 0"
          :deviceType="deviceTypeA"
          :moduleData="moduleDataA"
          :data="data"
          @select="selectedDataA = $event"
        />
        <Header
          v-if="index === 1"
          :deviceType="deviceTypeB"
          :moduleData="moduleDataB"
          :data="data"
          @select="selectedDataB = $event"
        />
        <Content
          v-if="index === 0"
          :style="{ height: moduleDataA.header?.show ? 'calc(100% - 30px)' : '100%' }"
          :moduleData="moduleDataA"
          :data="selectedDataA"
        />
        <Content
          v-if="index === 1"
          :style="{ height: moduleDataB.header?.show ? 'calc(100% - 30px)' : '100%' }"
          :moduleData="moduleDataB"
          :data="selectedDataB"
        />
      </slot>
    </template>
  </ventBox1>
</template>

<script lang="ts" setup>
import Header from './header.vue';
import Content from './content.vue';
import { computed, ref } from 'vue';
import ventBox1 from '/@/components/vent/ventBox1.vue';
import { openWindow } from '/@/utils';
import { getFormattedText } from '../hooks/helper';

const props = defineProps<{
  moduleDataA: any;
  moduleNameA: string;
  deviceTypeA: string;
  moduleDataB: any;
  moduleNameB: string;
  deviceTypeB: string;
  showStyle: any;
  visible: boolean;
  data: any;
  commonTitle: string;
}>();
defineEmits(['close', 'click']);

const index = ref(0);

const selectedDataA = ref();
const selectedDataB = ref();

const style = computed(() => {
  const size = props.showStyle.size;
  const position = props.showStyle.position;
  
  return size + position + ';position: absolute; pointer-events: auto;';
});

// 根据配置里的定位判断应该使用哪个class
function getModuleClass({ size, position }) {
  const [_, width] = size.match(/width:([0-9]+)px/) || [];
  if (position.includes('bottom') || parseInt(width) > 800) {
    return 'module-common-dual module-common-dual-longer';
  }
  return 'module-common-dual';
}

// 跳转
function redirectToA() {
  const { to } = props.moduleDataA;
  if (!to) return;
  openWindow(getFormattedText(selectedDataA.value, to));
}
function redirectToB() {
  const { to } = props.moduleDataB;
  if (!to) return;
  openWindow(getFormattedText(selectedDataB.value, to));
}
</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

.module-common-dual .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;
}
.dual-title {
  position: relative;
  width: 100%;
  height: 100%;
  align-items: center;
  display: flex;
  font-size: 14px;
  .title-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .title-left {
    height: 100%;
    margin-left: 30px;
    display: flex;
    div {
      display: flex;
      align-items: center;
      height: 100%;
      cursor: pointer;
      padding: 0 12px;
      background: linear-gradient(to top, #2bafc6 0%, rgba(44, 255, 221, 0.1) 50%,rgba(44, 255, 221, 0) 90%);
    }
  }

  .deactived {
    background: none !important;
    color: #8087a1;
  }
}
// @{theme-deepblue} {
//   .module-common-dual-longer {
//     :deep(.box1-top) {
//       --image-box1-top: url('/@/assets/images/themify/deepblue/vent/border/box2-top-long.png');
//     }
//     :deep(.box1-bottom) {
//       --image-box1-bottom: none;
//     }
//   }
// }
.module-common-dual-longer {
  :deep(.box1-top) {
    --image-box1-top: url('/@/assets/images/vent/box-top-bg.png');
    background-image: var(--image-box1-top);
  }
  :deep(.box1-bottom) {
    --image-box1-bottom: url('/@/assets/images/vent/box-bottom-bg.png');
    background-image: var(--image-box1-bottom);
  }
}
</style>