mine-wind.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <template>
  2. <div class="mineWind">
  3. <div class="mine-title">{{ mineTitle }}</div>
  4. <div class="mine-content">
  5. <div class="content-label">
  6. <div class="label-t" v-for="(ite, ind) in labelList" :key="ind">{{ ite.name }}</div>
  7. </div>
  8. <div class="content-text">
  9. <div class="text" v-for="(item, index) in mineData" :key="index">
  10. <span>{{ item.deviceName }}</span>
  11. <span>{{ filterBadValue(item.jf) }}</span>
  12. <span>{{ filterBadValue(item.hf) }}</span>
  13. <span>{{ filterBadValue(item.xf) }}</span>
  14. </div>
  15. </div>
  16. </div>
  17. </div>
  18. </template>
  19. <script lang="ts" setup>
  20. import { ref, reactive, watch, defineProps } from 'vue';
  21. let props = defineProps({
  22. airKjStatus: {
  23. type: Array,
  24. default: () => {
  25. return [];
  26. },
  27. },
  28. });
  29. let mineTitle = ref('矿井通风状态监测');
  30. let labelList = reactive([{ name: '矿井名称' }, { name: '总进风量' }, { name: '总回风量' }, { name: '总需风量' }]);
  31. let mineData = ref<any[]>([]);
  32. // 过滤不合法的值,小于5000的视为传感器出错
  33. function filterBadValue(val: number | string) {
  34. const valid = parseInt(val) > 5000;
  35. return valid ? val : '/';
  36. }
  37. watch(
  38. () => props.airKjStatus,
  39. (newA, oldA) => {
  40. console.log(newA, 'airKjStatus-----------');
  41. if (newA.length != 0) {
  42. mineData.value = newA;
  43. }
  44. },
  45. {
  46. immediate: true,
  47. deep: true,
  48. }
  49. );
  50. </script>
  51. <style lang="less" scoped>
  52. @font-face {
  53. font-family: 'douyuFont';
  54. src: url('../../../../assets/font/douyuFont.otf');
  55. }
  56. .mineWind {
  57. position: relative;
  58. width: 100%;
  59. height: 100%;
  60. .mine-title {
  61. position: absolute;
  62. left: 50px;
  63. top: 12px;
  64. color: #fff;
  65. font-family: 'douyuFont';
  66. font-size: 14px;
  67. }
  68. .mine-content {
  69. height: 100%;
  70. padding: 62px 0px 28px 0px;
  71. box-sizing: border-box;
  72. display: flex;
  73. flex-direction: column;
  74. align-items: center;
  75. .content-label {
  76. width: 366px;
  77. height: 32px;
  78. display: flex;
  79. justify-content: space-around;
  80. align-items: center;
  81. background: url('../../../../../assets/images/company/content-label.png') no-repeat;
  82. .label-t {
  83. color: #3df6ff;
  84. text-align: center;
  85. font-size: 14px;
  86. &:nth-child(1) {
  87. width: 31%;
  88. }
  89. &:nth-child(2) {
  90. width: 23%;
  91. }
  92. &:nth-child(3) {
  93. width: 23%;
  94. }
  95. &:nth-child(4) {
  96. width: 23%;
  97. }
  98. }
  99. }
  100. .content-text {
  101. height: calc(100% - 32px);
  102. width: 378px;
  103. display: flex;
  104. flex-direction: column;
  105. // justify-content: space-around;
  106. justify-content: flex-start;
  107. padding: 5px 0px;
  108. box-sizing: border-box;
  109. overflow-y: auto;
  110. .text {
  111. width: 100%;
  112. height: 28px;
  113. display: flex;
  114. justify-content: space-around;
  115. align-items: flex-start;
  116. background: url('../../../../../assets/images/company/content-text.png') no-repeat;
  117. color: #fff;
  118. margin-bottom: 5px;
  119. span {
  120. display: inline-block;
  121. text-align: center;
  122. &:nth-child(1) {
  123. width: 31%;
  124. }
  125. &:nth-child(2) {
  126. width: 23%;
  127. }
  128. &:nth-child(3) {
  129. width: 23%;
  130. }
  131. &:nth-child(4) {
  132. width: 23%;
  133. }
  134. }
  135. }
  136. }
  137. }
  138. }
  139. </style>