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

<template>
  <div class="dane-bd" :style="style" :class="daneClass">
    <div class="dane-title">
      <div class="common-navL">
        <span :class="{ deactived: index === 1 }" @click="index = 0">
          {{ moduleNameA }}
        </span>
        <span class="ml-5px mr-5px">|</span>
        <span :class="{ deactived: index === 0 }" @click="index = 1">
          {{ moduleNameB }}
        </span>
      </div>

      <div class="common-navR">
        <!-- 下拉框 -->
        <div class="common-navR-select" v-if="index === 0 && headerA.show && headerA.selector.show">
          <a-select
            style="width: 160px"
            size="small"
            placeholder="请选择"
            v-model:value="selectedDeviceIDA"
            allowClear
            :options="optionsA"
            @change="selectHandlerA"
          />
        </div>
        <div class="common-navR-select" v-if="index === 1 && headerB.show && headerB.selector.show">
          <a-select
            style="width: 160px"
            size="small"
            placeholder="请选择"
            v-model:value="selectedDeviceIDB"
            allowClear
            :options="optionsB"
            @change="selectHandlerB"
          />
        </div>
      </div>
    </div>
    <div class="dane-content">
      <slot>
        <Content v-if="index === 0" style="height: 100%" :moduleData="moduleDataA" :data="selectedDeviceA" />
        <Content v-if="index === 1" style="height: 100%" :moduleData="moduleDataB" :data="selectedDeviceB" />
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import Content from './content-FireNew.vue';
import { defineProps, defineEmits, computed, ref, watch } from 'vue';
import { ModuleData, ShowStyle } from '../../../../deviceManager/configurationTable/types';
import { useInitModule } from '../../hooks/useInit';

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

const index = ref(0);

const headerA = props.moduleDataA.header;
const headerB = props.moduleDataB.header;

const {
  selectedDeviceID: selectedDeviceIDA,
  selectedDevice: selectedDeviceA,
  options: optionsA,
  init: initA,
} = useInitModule(props.deviceTypeA, props.moduleDataA);
const {
  selectedDeviceID: selectedDeviceIDB,
  selectedDevice: selectedDeviceB,
  options: optionsB,
  init: initB,
} = useInitModule(props.deviceTypeB, props.moduleDataB);

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

// 根据配置里的定位判断应该使用哪个module组件
const daneClass = computed(() => {
  const headerPosition = props.showStyle.headerPosition;
  const size = props.showStyle.size;
  const [_, width] = size.match(/width:([0-9]+)px/) || [];
  // if (position.includes('bottom') || parseInt(width) > 800) {
  //   return 'dane-w';
  // }
  // if (position.includes('left')) {
  //   return 'dane-m';
  // }
  // if (position.includes('right')) {
  //   return 'dane-m';
  // }
  if (headerPosition === 'centerBottom') {
    return 'center-Bottom';
  }
  if (headerPosition === 'centerTop') {
    return 'center-Top';
  }
  return 'dane-m'; // 默认返回顶部模块
});

//切换时间选项
// function onChange(value, dateString) {
//   console.log('Selected Time: ', value);
//   console.log('Formatted Selected Time: ', dateString);
// }
// function onOk(val) {
//   console.log('onOk: ', val);
// }

//下拉框选项切换
function selectHandlerA(id) {
  selectedDeviceIDA.value = id;
  emit('select', selectedDeviceA);
}
function selectHandlerB(id) {
  selectedDeviceIDB.value = id;
  emit('select', selectedDeviceB);
}

watch(
  () => props.data,
  (d) => {
    initA(d);
    initB(d);
    selectedDeviceIDA.value = optionsA.value[0]?.value;
    selectedDeviceIDB.value = optionsB.value[0]?.value;
  },
  {
    immediate: true,
  }
);
</script>

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

@font-face {
  font-family: 'douyuFont';
  src: url('/@/assets/font/douyuFont.otf');
}
@{theme-deepblue} {
  .dane-bd {
    --image-CenterBottom: url('@/assets/images/fireNew/4-2.png');
    --image-CenterTop: url('@/assets/images/fireNew/3-1.png');
  }
}

.dane-bd {
  --image-CenterBottom: url('@/assets/images/fireNew/4-2.png');
  --image-CenterTop: url('@/assets/images/fireNew/3-1.png');
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  z-index: 2;
  .dane-title {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 34px;
    padding: 20px 173px 15px 133px;
    .common-navL {
      display: flex;
      position: relative;
      align-items: center;
      color: #fff;
      font-size: 15px;
      font-family: 'douyuFont';

      .common-navR {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .common-navR-select {
          background: url('@/assets/images/fireNew/4-1.png') no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
  .dane-content {
    height: calc(100% - 34px);
    box-sizing: border-box;
    border-top: none;
  }
}
.center-Top {
  background: var(--image-CenterTop) no-repeat;
  background-size: 100% 100%;
}
.center-Bottom {
  background: var(--image-CenterBottom) no-repeat;
  background-size: 100% 100%;
}
.dane-m {
  background-image: var(--image-MidBottom);
  background-size: 100% 100%;
}

.deactived {
  cursor: pointer;
  color: #8087a1;
}

:deep(.zxm-select-selector) {
  height: 22px !important;
  border: none !important;
  // background-color: rgb(15 64 88) !important;
  background-color: transparent !important;
  color: #8087a1 !important;
}

:deep(.zxm-select-selection-placeholder) {
  color: #8087a1 !important;
}

:deep(.zxm-select-arrow) {
  color: #8087a1 !important;
}

:deep(.zxm-picker) {
  border: none !important;
  background-color: rgb(15 64 88) !important;
  box-shadow: none;
  color: #a1dff8 !important;
}

:deep(.zxm-picker-input > input) {
  color: #a1dff8 !important;
  text-align: center !important;
}

:deep(.zxm-picker-separator) {
  color: #a1dff8 !important;
}

:deep(.zxm-picker-active-bar) {
  display: none !important;
}

:deep(.zxm-picker-suffix) {
  color: #a1dff8 !important;
}

:deep(.zxm-switch) {
  min-width: 48px !important;
}

:deep(.zxm-switch-checked) {
  background-color: rgb(15 64 89) !important;
}

:deep(.zxm-switch-handle::before) {
  background-color: rgb(33 179 247) !important;
}

:deep(.zxm-select-selection-item) {
  color: #fff !important;
}
</style>