FireStatus.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <!-- eslint-disable vue/multi-word-component-names -->
  2. <template>
  3. <CommonTitle class="mb-10px" label="矿井火灾风险性等级" :value="risk" />
  4. <ListItem
  5. v-for="(item, i) in FIRE_STATUS_LIST"
  6. :key="item.icon"
  7. :icon="item.icon"
  8. :label="item.label"
  9. :value="listData[item.prop]"
  10. :type="i % 2 ? 'green' : 'blue'"
  11. class="mt-5px"
  12. />
  13. </template>
  14. <script lang="ts" setup>
  15. import { onMounted, ref, shallowRef } from 'vue';
  16. import CommonTitle from './CommonTitle.vue';
  17. import ListItem from './ListItem.vue';
  18. import { BillboardType, DEFAULT_TEST_DATA, FIRE_STATUS_LIST } from '../billboard.data';
  19. const props = withDefaults(
  20. defineProps<{
  21. data?: BillboardType;
  22. }>(),
  23. {
  24. data: () => DEFAULT_TEST_DATA,
  25. }
  26. );
  27. const risk = ref('低风险');
  28. const listData = shallowRef<any>({});
  29. function fetchData() {
  30. const info = props.data.fireInfo;
  31. const trans = {
  32. 0: '低风险',
  33. 101: '低风险',
  34. 102: '一般风险',
  35. 103: '较大风险',
  36. 104: '重大风险',
  37. 201: '报警',
  38. 1001: '网络断开',
  39. };
  40. risk.value = trans[info.fireWarnLevel];
  41. listData.value = info;
  42. }
  43. onMounted(() => {
  44. fetchData();
  45. });
  46. </script>
  47. <style lang="less" scoped></style>