mky-vent-base/src/views/vent/home/configurable/components/ModuleBDDual.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: 140px"
            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: 140px"
            size="small"
            placeholder="请选择"
            v-model:value="selectedDeviceIDB"
            allowClear
            :options="optionsB"
            @change="selectHandlerB"
          />
        </div>
        <!-- 日期组件 -->
        <!-- <div class="common-navR-date" v-if="header.show && header.showSlot">
          <a-range-picker
            size="small"
            style="width: 140px"
            :show-time="{ format: 'HH:mm' }"
            format="YYYY-MM-DD HH:mm"
            :placeholder="['开始时间', '结束时间']"
            @change="onChange"
            @ok="onOk"
          />
        </div> -->
        <!-- 开关组件 -->
        <!-- <div class="common-navR-switch" v-if="commonTitle == 'switchs'">
            <div :class="checked ? 'status-text1' : 'status-text'">风险来源</div>
            <a-switch v-model:checked="checked" />
            <div :class="checked ? 'status-text' : 'status-text1'">危险位置</div>
          </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.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 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 'dane-w';
    }
    if (position.includes('left')) {
      return 'dane-m';
    }
    if (position.includes('right')) {
      return 'dane-m';
    }
    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);
      if (!selectedDeviceIDA.value) selectedDeviceIDA.value = optionsA.value[0]?.value;
      if (!selectedDeviceIDB.value) selectedDeviceIDB.value = optionsB.value[0]?.value;
    },
    {
      immediate: true,
    }
  );
</script>

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

  @{theme-deepblue} {
    .dane-bd {
      --image-module-title: url('@/assets/images/themify/deepblue/home-container/configurable/firehome/module-title.png');
      --image-common-border: url('@/assets/images/themify/deepblue/home-container/configurable/firehome/common-border.png');
      --image-common-border2: url('@/assets/images/themify/deepblue/home-container/configurable/firehome/common-border2.png');
      --image-module-title-long: url('@/assets/images/themify/deepblue/home-container/configurable/firehome/module-title-long.png');
    }
  }

  .dane-bd {
    --image-module-title: url('@/assets/images/home-container/configurable/firehome/module-title.png');
    --image-common-border: url('@/assets/images/home-container/configurable/firehome/common-border.png');
    --image-common-border2: url('@/assets/images/home-container/configurable/firehome/common-border2.png');
    --image-module-title-long: url('@/assets/images/home-container/configurable/firehome/module-title-long.png');
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: var(--image-module-title);
    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: 0 40px 0 50px;

      .common-navL {
        display: flex;
        position: relative;
        align-items: center;
        color: #fff;
        font-size: 14px;
      }

      .common-navR {
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }

      // .common-navR-switch {
      //   display: flex;
      //   align-items: center;
      //   justify-content: space-around;
      //   width: 90%;

      //   .status-text {
      //     color: #1fb3f7;
      //     font-size: 14px;
      //   }

      //   .status-text1 {
      //     color: #a1dff8;
      //     font-size: 14px;
      //   }
      // }
    }

    .dane-content {
      height: calc(100% - 34px);
      // border-image: linear-gradient(#1dabeb, #1dabeb22);
      border-image: var(--vent-configurable-module-border-bd) 30;
      // border-left: 1px;
      // border-right: 1px;
      border-width: 2px;
      border-style: solid;
      box-sizing: border-box;
      border-top: none;
      background-image: linear-gradient(#000723 94%, #1dabeb11);
    }
  }

  .dane-l {
    background: var(--image-common-border) no-repeat;
    background-size: 100% auto;
  }

  .dane-m {
    // background: url('@/assets/images/home-container/configurable/firehome/common-border1.png') no-repeat;
    background-size: 100% auto;
  }

  .dane-s {
    background: var(--image-common-border2) no-repeat;
    background-size: 100% auto;
  }

  .dane-w {
    background-image: var(--image-module-title-long);
    background-size: 100% 37px;
  }

  .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>