FIreWarn.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. <!-- eslint-disable vue/multi-word-component-names -->
  2. <template>
  3. <div class="w-100% h-100% pl-5px pr-5px">
  4. <div class="flex items-center h-140px">
  5. <div class="fire-warn__image">
  6. <div class="fire-warn__image_sub w-50px h-50px top-10px left-20px line-height-50px">低风险</div>
  7. <div class="fire-warn__image_sub w-30px h-30px top-50px left-70px line-height-30px">CO</div>
  8. <div class="fire-warn__image_sub w-20px h-20px top-80px left-20px line-height-20px">CO</div>
  9. </div>
  10. <CustomList type="A" :list-config="listAConfig" />
  11. </div>
  12. <CustomList type="B" :list-config="listBConfig" style="height: 80px; margin-top: 10px" />
  13. </div>
  14. </template>
  15. <script lang="ts" setup>
  16. import { computed, onMounted } from 'vue';
  17. // import { Config } from '../../../deviceManager/configurationTable/types';
  18. // import { useInitDevices } from '../hooks/useInit';
  19. // import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
  20. // import { SwapOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
  21. // import MiniBoard from './MiniBoard.vue';
  22. // import TimelineList from './TimelineList.vue';
  23. import CustomList from '../detail/CustomList.vue';
  24. import { getFormattedText } from '../../../../deviceManager/configurationTable/adapters';
  25. // import CustomChart from './CustomChart.vue';
  26. // import { get } from 'lodash-es';
  27. // import CommonTable from '../../billboard/components/CommonTable.vue';
  28. // import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
  29. // const { header: headerConfig, background, board, layout, list, chart, table } = props.moduleData;
  30. const listA = [
  31. {
  32. info: 'A',
  33. prop: 'a',
  34. label: '火情状态',
  35. color: 'yellow',
  36. },
  37. {
  38. info: 'A',
  39. prop: 'b',
  40. label: '回采位置',
  41. color: 'white',
  42. },
  43. {
  44. info: 'A',
  45. prop: 'c',
  46. label: '硐室火情',
  47. color: 'blue',
  48. },
  49. {
  50. info: 'A',
  51. prop: 'd',
  52. label: '联动设备状态',
  53. color: 'blue',
  54. },
  55. ];
  56. const listB = [
  57. {
  58. info: 'B',
  59. prop: 'a',
  60. label: '2024/07/22 07:00:00',
  61. color: 'white',
  62. },
  63. {
  64. info: 'B',
  65. prop: 'b',
  66. label: '2811工作面上隅角',
  67. color: 'white',
  68. },
  69. ];
  70. const listBConfig = computed(() => {
  71. const data = {
  72. a: '轻微堵塞',
  73. b: '甲烷0.02%',
  74. };
  75. return listB.map((b) => {
  76. return {
  77. ...b,
  78. value: getFormattedText(data, b.prop),
  79. // value: getFormattedText(data, b.prop, b.formatter),
  80. };
  81. });
  82. });
  83. const listAConfig = computed(() => {
  84. const data = {
  85. a: '缓慢氧化',
  86. b: '800m',
  87. c: '正常',
  88. d: '正常',
  89. };
  90. return listA.map((b) => {
  91. return {
  92. ...b,
  93. value: getFormattedText(data, b.prop),
  94. // value: getFormattedText(data, b.prop, b.formatter),
  95. };
  96. });
  97. });
  98. // const listType = computed(() => {
  99. // return list[0]?.type || 'A';
  100. // });
  101. // const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, fetchDevices } = useInitDevices(
  102. // props.deviceType,
  103. // headerConfig
  104. // );
  105. onMounted(() => {
  106. // fetchDevices();
  107. });
  108. </script>
  109. <style lang="less" scoped>
  110. @import '@/design/vent/color.less';
  111. .fire-warn__image {
  112. position: relative;
  113. width: 200px;
  114. height: 100%;
  115. margin: 0 10px;
  116. background-repeat: no-repeat;
  117. background-position: center;
  118. background-size: 100% auto;
  119. background-image: url(/@/assets/images/home-container/configurable/deco_2.png);
  120. }
  121. .fire-warn__image_sub {
  122. text-align: center;
  123. position: absolute;
  124. background-repeat: no-repeat;
  125. background-position: center;
  126. background-size: 100% auto;
  127. background-image: url(/@/assets/images/home-container/configurable/deco_3.png);
  128. }
  129. </style>