MonitorCenter.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <!-- eslint-disable vue/multi-word-component-names -->
  2. <template>
  3. <div class="monitor-center">
  4. <div class="flex">
  5. <div class="w-50% text-center">
  6. <span>总供风量</span>
  7. <p class="monitor-center__primary_text">123123</p>
  8. <Pie
  9. :option="chartOption"
  10. :chart-data="[
  11. {
  12. value: 70,
  13. name: 'A',
  14. },
  15. {
  16. value: 30,
  17. name: 'B',
  18. },
  19. ]"
  20. height="100px"
  21. />
  22. </div>
  23. <div class="w-50% text-center">
  24. <span>总需风量</span>
  25. <p class="monitor-center__primary_text">123123</p>
  26. <Pie
  27. :option="chartOption"
  28. :chart-data="[
  29. {
  30. value: 70,
  31. name: 'A',
  32. },
  33. {
  34. value: 30,
  35. name: 'B',
  36. },
  37. ]"
  38. height="100px"
  39. />
  40. </div>
  41. </div>
  42. </div>
  43. </template>
  44. <script lang="ts" setup>
  45. import { onMounted, ref } from 'vue';
  46. import { list as cfgList } from '@/views/vent/deviceManager/configurationTable/configuration.api';
  47. import { list } from '@/views/vent/deviceManager/deviceTable/device.api';
  48. import Pie from '/@/components/chart/Pie.vue';
  49. import { EChartsOption } from 'echarts';
  50. // import mapComponent from './components/3Dmap/index.vue';
  51. // 设备类别,是个枚举 TODO: 将手动换为自动获取类别
  52. const devicekind = 'fanlocal';
  53. const configs = ref<{ prop: string; label: string }[]>([]);
  54. function fetchConfig() {
  55. cfgList({
  56. deviceType: 'devicekind',
  57. }).then(({ records }) => {
  58. const moduleData = JSON.parse(records[0]?.moduleData);
  59. configs.value = Object.keys(moduleData).map((k) => {
  60. return {
  61. prop: k,
  62. label: moduleData[k],
  63. };
  64. });
  65. });
  66. }
  67. const devices = ref<any[]>([]);
  68. const selectedDevice = ref<any>({});
  69. function selectDeviceByID(id: string) {
  70. selectedDevice.value = devices.value.find((e) => {
  71. return e.id === id;
  72. });
  73. }
  74. // 获取全部局扇的数据,并以选项格式返回给 Header 消费
  75. function fetchOptions() {
  76. return list({
  77. devicekind,
  78. }).then(({ records }) => {
  79. devices.value = records;
  80. selectDeviceByID(records[0]?.id);
  81. return records.map((e) => {
  82. return {
  83. label: e.strinstallpos,
  84. key: e.id,
  85. };
  86. });
  87. });
  88. }
  89. // 图标相关
  90. const chartOption: EChartsOption = {
  91. series: [
  92. {
  93. type: 'pie',
  94. radius: ['50%', '75%'],
  95. center: ['50%', '55%'],
  96. data: [],
  97. labelLine: { show: false },
  98. label: {
  99. show: false,
  100. // formatter: '{b} \n ({d}%)',
  101. // color: '#B1B9D3',
  102. },
  103. itemStyle: {
  104. shadowBlur: 20,
  105. shadowColor: '#259bcf',
  106. },
  107. },
  108. ],
  109. color: ['#d9a1ff', '#00d1ff', '#82fe78'],
  110. };
  111. onMounted(() => {
  112. fetchConfig();
  113. });
  114. </script>
  115. <style lang="less" scoped>
  116. @import '@/design/vent/color.less';
  117. .monitor-center__primary_text {
  118. font-size: 20px;
  119. color: @vent-gas-primary-text;
  120. }
  121. .monitor-center {
  122. width: 200px;
  123. background-image: @vent-configurable-home-bg-img;
  124. border-top: 2px solid @vent-configurable-home-light-border;
  125. color: @white;
  126. }
  127. </style>