LastMonthData.vue 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. <template>
  2. <div
  3. class="lastMonth"
  4. :class="[screenType === 'hor' ? 'horiLastMonth' : 'verticalLastMonth']"
  5. >
  6. <div class="subhead-title"><span>上月数据</span></div>
  7. <div class="itemWrap">
  8. <div class="item" v-for="(item, index) in lastDataArr" :key="index">
  9. <div class="item-left">
  10. <img :src="item.img" />
  11. </div>
  12. <div class="item-right">
  13. <div class="item-value">
  14. <span>{{ item.value }}</span
  15. ><span>{{ item.unit }}</span>
  16. </div>
  17. <div class="item-content">
  18. <div class="item-content-right">
  19. <div class="max">
  20. <span>{{ item.maxName }}</span>
  21. <span>{{ item.max }}</span>
  22. <span>{{ item.unit }}</span>
  23. </div>
  24. <div class="min">
  25. <span>{{ item.minName }}</span>
  26. <span>{{ item.min }}</span>
  27. <span>{{ item.unit }}</span>
  28. </div>
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. </div>
  35. </template>
  36. <script lang="ts">
  37. import { ref, defineComponent, reactive, toRefs, onMounted } from "vue";
  38. import { queryEnvHistory } from "@/api/index";
  39. import { dapingImage } from "@/utils/dapingImage";
  40. export default defineComponent({
  41. props: {
  42. screenType: {
  43. type: String,
  44. },
  45. },
  46. setup(props, contx) {
  47. const { lastco2, lasthumidity, lastmethanal, lastpm25, lasttemp } =
  48. dapingImage;
  49. const allData = reactive({
  50. lastDataArr: [],
  51. });
  52. onMounted(() => {
  53. queryEnvHistory()
  54. .then((res) => {
  55. var lastMonthData = res.data.data || [];
  56. var lastMonthInit = [
  57. {
  58. id: "temp",
  59. name: "温度",
  60. code: "Tdb",
  61. unit: "℃",
  62. maxName: "最高温",
  63. minName: "最低温",
  64. img: lasttemp,
  65. fixed: 1,
  66. },
  67. {
  68. id: "humidity",
  69. name: "湿度",
  70. code: "RH",
  71. unit: "%",
  72. maxName: "最大值",
  73. max: 50,
  74. minName: "最小值",
  75. min: 20,
  76. img: lasthumidity,
  77. fixed: 0,
  78. },
  79. {
  80. id: "co2",
  81. name: "CO2",
  82. code: "CO2",
  83. value: 2600,
  84. unit: "ppm",
  85. maxName: "最大值",
  86. max: 2600,
  87. minName: "最小值",
  88. min: 300,
  89. img: lastco2,
  90. fixed: 0,
  91. },
  92. {
  93. id: "methanal",
  94. name: "甲醛",
  95. code: "HCHO",
  96. value: 0.03,
  97. unit: "mg/m³",
  98. maxName: "最大值",
  99. max: 0.01,
  100. minName: "最小值",
  101. min: 0.07,
  102. img: lastmethanal,
  103. fixed: 2,
  104. },
  105. {
  106. id: "pm25",
  107. name: "PM2.5",
  108. code: "PM2d5",
  109. value: 120,
  110. unit: "ug/m³",
  111. maxColor: "#C4E34F",
  112. minColor: "#7ed874",
  113. maxName: "最大值",
  114. max: 340,
  115. minName: "最小值",
  116. min: 20,
  117. img: lastpm25,
  118. fixed: 0,
  119. },
  120. ];
  121. lastMonthInit.forEach((item) => {
  122. var filterRes = lastMonthData.filter((ele) => {
  123. return ele.code == item.code;
  124. });
  125. var filterObj = filterRes[0] || {};
  126. item.value = filterObj.avgData
  127. ? Number(filterObj.avgData.toFixed(item.fixed))
  128. : filterObj.avgData;
  129. item.max = filterObj.maxData
  130. ? Number(filterObj.maxData.toFixed(item.fixed))
  131. : filterObj.maxData;
  132. item.min = filterObj.minData
  133. ? Number(filterObj.minData.toFixed(item.fixed))
  134. : filterObj.minData;
  135. });
  136. // debugger;
  137. allData.lastDataArr = lastMonthInit;
  138. })
  139. .catch((err) => {});
  140. });
  141. return { ...toRefs(allData) };
  142. },
  143. });
  144. </script>
  145. <style scoped lang="scss">
  146. .lastMonth {
  147. .item {
  148. padding-top: 60px;
  149. display: flex;
  150. align-items: center;
  151. .item-left {
  152. width: 86px;
  153. height: 86px;
  154. margin-right: 20px;
  155. background: rgba(100, 108, 130, 0.3);
  156. backdrop-filter: blur(10px);
  157. border-radius: 12px;
  158. img {
  159. width: 86px;
  160. }
  161. }
  162. .item-value {
  163. font-family: Persagy;
  164. font-weight: 700;
  165. font-size: 24px;
  166. line-height: 30px;
  167. color: #f7e6cd;
  168. }
  169. .item-content {
  170. display: flex;
  171. align-items: center;
  172. padding-top: 8px;
  173. font-weight: 500;
  174. font-size: 14px;
  175. }
  176. .item-content-right {
  177. font-size: 14px;
  178. font-weight: 400;
  179. line-height: 20px;
  180. color: #f7e6cd;
  181. white-space: nowrap;
  182. .min {
  183. padding-top: 8px;
  184. }
  185. }
  186. }
  187. }
  188. .horiLastMonth {
  189. height: 100%;
  190. padding-left: 35px;
  191. .item {
  192. padding-top: 0;
  193. }
  194. .itemWrap {
  195. height: calc(100% - 30px);
  196. display: flex;
  197. flex-direction: column;
  198. justify-content: space-evenly;
  199. }
  200. }
  201. .verticalLastMonth {
  202. height: 400px;
  203. padding: 0 36px;
  204. background: rgba(149, 162, 194, 0.1);
  205. backdrop-filter: blur(40px);
  206. border-radius: 20px;
  207. .itemWrap {
  208. display: flex;
  209. flex-direction: row;
  210. flex-wrap: wrap;
  211. // justify-content:space-around;
  212. .item {
  213. width: 33.33%;
  214. // justify-content: center;
  215. .item-content-right {
  216. font-size: 14px;
  217. white-space: nowrap;
  218. }
  219. }
  220. }
  221. }
  222. </style>