gasInjection-project/src/views/vent/home/configurable/components/ModuleMine.vue

<template>
  <div class="module-mine" :style="style" :class="moduleClass">
    <!-- 标题栏 -->
    <div v-if="moduleName" class="module-title">
      <div class="title-content" :class="{ 'cursor-pointer': !!moduleData.to }" @click="redirectTo">
        {{ moduleName }}
      </div>
      <!-- 右侧插槽内容（如有） -->
      <div class="title-right" v-if="header.show && header.slot.show">
        {{ getFormattedText(selectedDevice, header.slot.value) }}
      </div>
    </div>
    <!-- 下拉选择框，单独一行放在标题栏下方 -->
    <div class="module-selector-row" v-if="header.show && header.selector.show">
      <a-select
        size="middle"
        placeholder="请选择"
        v-model:value="selectedDeviceID"
        :options="options"
        @change="selectHandler"
        class="custom-select"
      />
    </div>
    <!-- 内容区 -->
    <div class="module-content" :style="contentStyle">
      <slot>
        <Content style="height: 100%" :moduleData="moduleData" :data="selectedDevice" />
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
// 引入内容组件
import Content from './content.vue';
import { defineProps, defineEmits, computed, watch } from 'vue';
import { useInitModule } from '../hooks/useInit';
import { getFormattedText } from '../hooks/helper';
import { openWindow } from '/@/utils';

// 定义组件接收的属性
const props = defineProps<{
  moduleData: any;
  showStyle: any;
  deviceType: string;
  data: any;
  moduleName: string;
  visible: boolean;
}>();
const emit = defineEmits(['close', 'select']);

// 取出头部配置
const { header } = props.moduleData;

// 初始化模块相关的下拉、选中项等
const { selectedDeviceID, selectedDevice, options, init } = useInitModule(props.deviceType, props.moduleData);

// 计算样式（宽高+定位）
const style = computed(() => {
  const size = props.showStyle.size;
  const position = props.showStyle.position;
  return size + position;
});

// 计算不同布局下的class
const moduleClass = computed(() => {
  const position = props.showStyle.position;
  const size = props.showStyle.size;
  const [_, width] = size.match(/width:([0-9]+)px/) || [];
  if (position.includes('bottom') || parseInt(width) > 800) {
    return 'module-wide';
  }
  if (position.includes('left')) {
    return 'module-medium';
  }
  if (position.includes('right')) {
    return 'module-medium';
  }
  return 'module-medium';
});

// 计算内容区高度样式
const contentStyle = computed(() => {
  if (header.show && header.selector.show) {
    return 'height: calc(100% - 48px - 40px);'; // 有下拉框的情况
  }
  return 'height: calc(100% - 40px);'; // 没有下拉框的情况
});

// 下拉选择事件
function selectHandler(id) {
  selectedDeviceID.value = id;
  emit('select', selectedDevice);
}

// 跳转事件
function redirectTo() {
  const { to } = props.moduleData;
  if (!to) return;
  openWindow(to);
}

// 监听数据变化，初始化
watch(
  () => props.data,
  (d) => {
    init(d);
    selectedDeviceID.value = options.value[0]?.value;
  },
  {
    immediate: true,
  }
);
</script>

<style scoped lang="less">
    @font-face {
      font-family: 'douyuFont';
      src: url('../../../../assets/font/douyuFont.otf');
    }
    .module-mine {
      --image-common-border1: url('@/assets/images/home-container/configurable/minehome/common-border1.png');
      --image-common-border2: url('@/assets/images/home-container/configurable/minehome/common-border2.png');
      --image-common-border3: url('@/assets/images/home-container/configurable/minehome/common-border3.png');
      --image-select-border: url('@/assets/images/home-container/configurable/minehome/select-border.png');
      position: absolute;
      //   width: 100%;
      //   height: 100%;
      background: var(--image-common-border2) no-repeat center;
      background-size: 100% 100%;
      overflow: hidden;

      /* 标题栏样式 */
      .module-title {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
        color: #fff;
        font-size: 14px;
        font-weight: bold;

        .title-content {
          font-family: 'douyuFont';
          margin-right: 10px;
          &.cursor-pointer {
          cursor: pointer;
          text-decoration: underline;
          }
        }
      }

      /* 下拉选择框单独一行样式 */
      .module-selector-row {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 10px 35px 0 35px;
        width: 100%;
        min-height: 40px;
        .custom-select {
          flex: 1;
          width: 100% !important;
          min-width: 0;
          font-size: 18px;
          color: white !important;
          ::v-deep .zxm-select-selector {
            background: var(--image-select-border) no-repeat center/100% 100%;
            border: none !important;
            padding: 0 20px;

          }
          /* 隐藏默认的下拉箭头 */
          ::v-deep .zxm-select-arrow {
            display: none;
          }
          
          /* 添加自定义白色下拉三角形 */
          &::after {
            content: '';
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 8px solid white;
            pointer-events: none;
          }
          /* 修复占位符颜色 */
          ::v-deep .zxm-select-selection-placeholder {
            color: white !important;
            font-size: 18px;
          }
        }
      }

      /* 内容区样式 */
      .module-content {
        padding: 10px 23px;
        background: transparent;
      }
    }
</style>