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

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <ModuleBasic :title="config.moduleName" :version="config.showStyle?.version" :size="config.showStyle?.size" :position="config.showStyle?.position">
    <CostumeHeader v-model:value="selectedDeviceID" :options="options">
      <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="(label, prop) in config.moduleData?.main" :key="`vhccv-${prop}`" :label="label" :value="get(selectedDevice, prop)" type="C" />
    </div>
  </ModuleBasic>
</template>
<script lang="ts" setup>
  import { onMounted } from 'vue';
  import ModuleBasic from './moduleBasic.vue';
  import CostumeHeader from './CostumeHeader.vue';
  import { RightCircleOutlined } from '@ant-design/icons-vue';
  import MiniBoard from './MiniBoard.vue';
  import { useInitConfig, useInitDevices } from '../hooks/useInit';
  import { get } from '../../billboard/utils';
  // import mapComponent from './components/3Dmap/index.vue';

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

  const { config, fetchConfig } = useInitConfig(devicekind);
  const { options, selectedDevice, selectedDeviceID, fetchDevices } = useInitDevices(devicekind);

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