goaf-monitoring-system/src/components/Configurable/ModulePrimary.vue

<template>
  <div class="module-primary" :style="style">
    <div v-if="moduleName" class="module-title">
      <div class="common-navL" :class="{ 'cursor-pointer': !!moduleData.to }" @click="redirectTo">
        <div class="navL-title">
          {{ moduleName }}
        </div>
        <div class="navL-slot" v-if="header.show && header.slot.show">
          {{ getFormattedText(selectedDevice, header.slot.value) }}
        </div>
      </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"
            :options="options"
            @change="selectHandler"
          />
        </div>
      </div>
    </div>
    <div class="module-content">
      <slot>
        <Content style="height: 100%" :moduleData="moduleData" :data="selectedDevice" />
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
  import Content from './content.vue';
  import { 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;
  });

  //下拉框选项切换
  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);
      if (!selectedDeviceID.value) {
        selectedDeviceID.value = options.value[0]?.value;
      }
    },
    {
      immediate: true,
    }
  );
</script>

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

  .module-primary {
    --image-module-title: url('/@/assets/images/sealedGoaf/views/home/module-title.png');
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    z-index: @layout-basic-z-index;
    // 不允许点击穿透，防止点击穿透到地图
    pointer-events: all;

    .module-title {
      display: flex;
      box-sizing: border-box;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 25px;
      background: var(--image-module-title) no-repeat;
      background-size: cover;
      padding-left: 10px;

      .common-navL {
        display: flex;
        color: #234e8e;
        font-size: 18px;
        margin-top: -15px;
        .navL-title {
          font-weight: 600;
        }
        .navL-slot {
          padding-left: 20px;
        }
      }

      .common-navR {
        margin-top: -15px;
      }
      .common-navR-select {
        :deep(.ant-select) {
          .ant-select-selector {
            background-color: #2b6ff0;
            font-size: 16px;
            cursor: pointer;
            width: auto;
            height: 32px;
          }
          .ant-select-selection-placeholder {
            display: flex;
            align-items: center;
            color: #fff;
          }
          .ant-select-selection-search-input {
            height: 100%;
          }
          .ant-select-selection-item {
            color: #fff;
          }
          .ant-select-arrow {
            color: #fff;
          }
        }
      }
    }

    .module-content {
      height: calc(100% - 38px);
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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