Ventilate.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <!-- eslint-disable vue/multi-word-component-names -->
  2. <template>
  3. <CostumeHeader :api="fetchOptions" @change="selectDeviceByID">
  4. <div class="w-200px flex flex-items-center">
  5. <RightCircleOutlined class="w-30px" />
  6. <div class="flex-grow-1">
  7. {{ selectedDevice.strinstallpos }}
  8. </div>
  9. </div>
  10. </CostumeHeader>
  11. <div class="flex justify-around mt-10px">
  12. <MiniBoard v-for="item in configs" :key="item.prop" :label="item.label" :value="selectedDevice[item.prop]" type="C" />
  13. </div>
  14. </template>
  15. <script lang="ts" setup>
  16. import { onMounted, ref } from 'vue';
  17. import { list as cfgList } from '@/views/vent/deviceManager/configurationTable/configuration.api';
  18. import { list } from '@/views/vent/deviceManager/deviceTable/device.api';
  19. import CostumeHeader from './CostumeHeader.vue';
  20. import { RightCircleOutlined } from '@ant-design/icons-vue';
  21. import MiniBoard from './MiniBoard.vue';
  22. // import mapComponent from './components/3Dmap/index.vue';
  23. // 设备类别,是个枚举 TODO: 将手动换为自动获取类别
  24. const devicekind = 'fanmain';
  25. const configs = ref<{ prop: string; label: string }[]>([]);
  26. function fetchConfig() {
  27. cfgList({
  28. deviceType: 'devicekind',
  29. }).then(({ records }) => {
  30. const moduleData = JSON.parse(records[0]?.moduleData);
  31. configs.value = Object.keys(moduleData).map((k) => {
  32. return {
  33. prop: k,
  34. label: moduleData[k],
  35. };
  36. });
  37. });
  38. }
  39. const devices = ref<any[]>([]);
  40. const selectedDevice = ref<any>({});
  41. function selectDeviceByID(id: string) {
  42. selectedDevice.value = devices.value.find((e) => {
  43. return e.id === id;
  44. });
  45. }
  46. // 获取全部局扇的数据,并以选项格式返回给 Header 消费
  47. function fetchOptions() {
  48. return list({
  49. devicekind,
  50. }).then(({ records }) => {
  51. devices.value = records;
  52. selectDeviceByID(records[0]?.id);
  53. return records.map((e) => {
  54. return {
  55. label: e.strinstallpos,
  56. key: e.id,
  57. };
  58. });
  59. });
  60. }
  61. onMounted(() => {
  62. fetchConfig();
  63. });
  64. </script>
  65. <style scoped></style>