vent-template/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 === 0, 'cursor-pointer': !!moduleDataA.to }" @click="index = 0">{{ moduleNameA }}</div>
          <div :class="{ deactived: index === 1, 'cursor-pointer': !!moduleDataB.to }" @click="index = 1">{{ moduleNameB }}</div>
          <div :class="{ deactived: index === 2, 'cursor-pointer': !!moduleDataC.to }" @click="index = 2">{{ moduleNameC }}</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" />
        <Header v-if="index === 2" :deviceType="deviceTypeC" :moduleData="moduleDataC" :data="data" @select="selectedDataC = $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"
        />
        <Content
          v-if="index === 2"
          :style="{ height: moduleDataC.header?.show ? 'calc(100% - 30px)' : '100%' }"
          :moduleData="moduleDataC"
          :data="selectedDataC"
        />
      </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;
    moduleDataC: any;
    moduleNameC: string;
    deviceTypeC: string;
    showStyle: any;
    visible: boolean;
    data: any;
    commonTitle: string;
  }>();
  defineEmits(['close', 'click']);

  const index = ref(0);

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

  const style = computed(() => {
    const size = props.showStyle.size;
    const position = props.showStyle.position;

    return size + position + ';position: absolute; pointer-events: auto; z-index: 1';
  });

  // 根据配置里的定位判断应该使用哪个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));
  }
  function redirectToC() {
    const { to } = props.moduleDataC;
    if (!to) return;
    openWindow(getFormattedText(selectedDataC.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;
        color: #8087a1;
      }
    }

    .deactived {
      color: #fff !important;
      background: linear-gradient(to top, #2bafc6 0%, rgba(44, 255, 221, 0.1) 50%, rgba(44, 255, 221, 0) 90%);
    }
  }
  // @{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>