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

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <CostumeHeader :api="fetchOptions" @change="selectDeviceByID">
    <div class="w-200px flex flex-items-center">
      <RightCircleOutlined class="w-30px" />
      <div class="flex-grow-1">
        {{ selectedDevice.strinstallpos }}
      </div>
    </div>
  </CostumeHeader>
  <div class="flex justify-around mt-10px">
    <MiniBoard v-for="item in configs" :key="item.prop" :label="item.label" :value="selectedDevice[item.prop]" type="C" />
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { list as cfgList } from '@/views/vent/deviceManager/configurationTable/configuration.api';
  import { list } from '@/views/vent/deviceManager/deviceTable/device.api';
  import CostumeHeader from './CostumeHeader.vue';
  import { RightCircleOutlined } from '@ant-design/icons-vue';
  import MiniBoard from './MiniBoard.vue';
  // import mapComponent from './components/3Dmap/index.vue';

  // 设备类别，是个枚举 TODO: 将手动换为自动获取类别
  const devicekind = 'fanmain';

  const configs = ref<{ prop: string; label: string }[]>([]);
  function fetchConfig() {
    cfgList({
      deviceType: 'devicekind',
    }).then(({ records }) => {
      const moduleData = JSON.parse(records[0]?.moduleData);
      configs.value = Object.keys(moduleData).map((k) => {
        return {
          prop: k,
          label: moduleData[k],
        };
      });
    });
  }

  const devices = ref<any[]>([]);
  const selectedDevice = ref<any>({});
  function selectDeviceByID(id: string) {
    selectedDevice.value = devices.value.find((e) => {
      return e.id === id;
    });
  }
  // 获取全部局扇的数据，并以选项格式返回给 Header 消费
  function fetchOptions() {
    return list({
      devicekind,
    }).then(({ records }) => {
      devices.value = records;
      selectDeviceByID(records[0]?.id);
      return records.map((e) => {
        return {
          label: e.strinstallpos,
          key: e.id,
        };
      });
    });
  }

  onMounted(() => {
    fetchConfig();
  });
</script>
<style scoped></style>