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

<template>
  <div class="dane-bd" :style="style">
    <div v-if="moduleName" class="dane-title" :class="daneClass">
      <div class="common-navL" :class="{ 'cursor-pointer': !!moduleData.to }" @click="redirectTo"
        ><span class="title">{{ moduleName }}</span></div
      >

      <div class="common-navR">
        <!-- 下拉框 -->
        <div class="common-navR-select" v-if="header.show && header.selector.show">
          <a-select
            style="width: 140px"
            size="small"
            placeholder="请选择"
            v-model:value="selectedDeviceID"
            allowClear
            :options="options"
            @change="selectHandler"
          />
        </div>
        <div v-if="header.show && header.slot.show">
          {{ getFormattedText(selectedDevice, header.slot.value) }}
        </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 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';
// import { ModuleProps } from '../types';

const props = defineProps<{
  /** 配置的详细模块信息 */
  moduleData: any;
  /** 配置的详细样式信息 */
  showStyle: any;
  /** 该模块配置中的设备标识符 */
  deviceType: string;
  /** api返回的数据 */
  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;
});

// 根据配置里的定位判断应该使用哪个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';
  // }
  // return 'dane-m';
  if (headerPosition === 'leftTop') {
    return 'left-1';
  }
  if (headerPosition === 'leftCenter') {
    return 'left-2';
  }
  if (headerPosition === 'leftBottom') {
    return 'left-3';
  }
  if (headerPosition === 'rightTop') {
    return 'right-1';
  }
  if (headerPosition === 'rightCenter') {
    return 'right-1';
  }
  if (headerPosition === 'rightBottom') {
    return 'right-3';
  }
  if (headerPosition === 'centerBottom') {
    return 'center-Bottom';
  }
  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 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">
@import '/@/design/theme.less';

@{theme-deepblue} {
  .dane-bd {
    --image-Left1: url('@/assets/images/vent/homeNew/left1.png');
    --image-Left2: url('@/assets/images/vent/homeNew/left2.png');
    --image-Left3: url('@/assets/images/vent/homeNew/left3.png');
    --image-Right1: url('@/assets/images/vent/homeNew/right1.png');
    --image-Right2: url('@/assets/images/vent/homeNew/right2.png');
    --image-Right3: url('@/assets/images/vent/homeNew/right3.png');
    --image-CenterBottom: url('@/assets/images/vent/homeNew/center-Bottom.png');
  }
}

.dane-bd {
  --image-Left1: url('@/assets/images/vent/homeNew/left1.png');
  --image-Left2: url('@/assets/images/vent/homeNew/left2.png');
  --image-Left3: url('@/assets/images/vent/homeNew/left3.png');
  --image-Right1: url('@/assets/images/vent/homeNew/right1.png');
  --image-Right2: url('@/assets/images/vent/homeNew/right2.png');
  --image-Right3: url('@/assets/images/vent/homeNew/right3.png');
  --image-CenterBottom: url('@/assets/images/vent/homeNew/center-Bottom.png');
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;

  .dane-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    padding: 0 40px 15px 20px;

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

  .dane-content {
    height: calc(100% - 38px);
    box-sizing: border-box;
    border-top: none;
  }
}
.left-1 {
  background: var(--image-Left1) no-repeat;
  background-size: 100% 100%;
}
.left-2 {
  background: var(--image-Left2) no-repeat;
  background-size: 100% 100%;
}
.left-3 {
  background: var(--image-Left3) no-repeat;
  background-size: 100% 100%;
}
.right-1 {
  background: var(--image-Right1) no-repeat;
  background-size: 100% 100%;
}
.right-2 {
  background: var(--image-Right2) no-repeat;
  background-size: 100% 100%;
}
.right-3 {
  background: var(--image-Right3) no-repeat;
  background-size: 100% 100%;
}

.center-Bottom {
  background: var(--image-CenterBottom) no-repeat;
  background-size: 100% 100%;
}
: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>