DustRisk.vue 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <!-- eslint-disable vue/multi-word-component-names -->
  2. <template>
  3. <Result v-if="unavailble" status="error" title="网络异常" sub-title="无法获取到粉尘预警信息" />
  4. <div v-else class="dust-risk">
  5. <div class="dust-risk-item" v-for="item in DUST_RISK_CONFIG" :key="item.id" @click="$emit('click', item)">
  6. <div class="img"> <img :src="item.src" alt="" /> </div>
  7. <div class="text">{{ item.text }}</div>
  8. <div class="num">{{ get(dustRiskData, item.prop) }}</div>
  9. </div>
  10. </div>
  11. </template>
  12. <script lang="ts" setup>
  13. import { computed } from 'vue';
  14. import { Result } from 'ant-design-vue';
  15. import { BillboardType, DUST_RISK_CONFIG } from '../billboard.data';
  16. import { get } from '../utils';
  17. const props = defineProps<{
  18. data: Partial<BillboardType>;
  19. }>();
  20. defineEmits(['click']);
  21. const unavailble = computed<boolean>(() => {
  22. return props.data.dustRisk === undefined;
  23. });
  24. const dustRiskData = computed(() => {
  25. const info = props.data.dustRisk;
  26. return info;
  27. });
  28. </script>
  29. <style lang="less" scoped>
  30. @import '/@/design/theme.less';
  31. @import '/@/design/theme.less';
  32. @font-face {
  33. font-family: 'douyuFont';
  34. src: url(/@/assets/images/files/douyuFont.otf);
  35. }
  36. .dust-risk {
  37. height: 100%;
  38. // display: flex;
  39. // justify-content: space-evenly;
  40. // align-items: center;
  41. // flex-wrap: wrap;
  42. }
  43. .dust-risk-item {
  44. display: flex;
  45. align-items: center;
  46. background-size: 100% auto;
  47. background-repeat: no-repeat;
  48. background-position: center;
  49. height: 46px;
  50. margin-top: 10px;
  51. padding: 0 7px;
  52. .text {
  53. text-align: center;
  54. width: 200px;
  55. }
  56. .num {
  57. text-align: center;
  58. width: 140px;
  59. }
  60. .img {
  61. width: 27px;
  62. height: 27px;
  63. }
  64. }
  65. .dust-risk-item:nth-child(odd) {
  66. background-image: url(/@/assets/images/company/list-item-1.png);
  67. }
  68. .dust-risk-item:nth-child(even) {
  69. background-image: url(/@/assets/images/company/list-item-2.png);
  70. }
  71. .num {
  72. font-size: 20px;
  73. font-family: douyuFont;
  74. color: @vent-gas-primary-text;
  75. }
  76. .risk {
  77. font-size: 20px;
  78. font-family: douyuFont;
  79. color: @vent-gas-primary-text;
  80. }
  81. </style>