index.jsx 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. import React, { useState, useEffect } from 'react';
  2. import { Modal, Row, Col } from 'antd';
  3. import Icon from '@/tenants-ui/Icon';
  4. import styles from './index.less';
  5. import { equipImageMap } from '@/config/image.js';
  6. import AirEq from './airEq';
  7. import LampEq from './lampEq';
  8. import CurtainEq from './curtainEq';
  9. import { getSpaceAdjustList } from '@/services/ant-design-pro/equipment';
  10. export default ({ onClose }) => {
  11. const envArr = [
  12. {
  13. name: '温度',
  14. id: 'temperature',
  15. num: '0',
  16. describe: '--',
  17. },
  18. {
  19. name: 'CO₂',
  20. id: 'co2',
  21. num: '0',
  22. describe: '--',
  23. },
  24. {
  25. name: 'PM2.5',
  26. id: 'pm25',
  27. num: '0',
  28. describe: '--',
  29. },
  30. {
  31. name: '甲醛',
  32. id: 'hcho',
  33. num: '0',
  34. describe: '--',
  35. },
  36. {
  37. name: '湿度',
  38. id: 'humidity',
  39. num: '0',
  40. unit: '%',
  41. describe: '--',
  42. },
  43. ];
  44. const checkLevel = (value, name) => {
  45. if (value || value == 0) {
  46. let objList = {
  47. temperature: {
  48. range: [20, 24],
  49. text: ['偏冷', '舒适', '偏热'],
  50. },
  51. humidity: {
  52. range: [30, 70],
  53. text: ['干燥', '适宜', '湿润'],
  54. },
  55. co2: {
  56. range: [800, 1500],
  57. text: ['适宜', '偏高', '超标'],
  58. },
  59. pm25: {
  60. range: [35, 75],
  61. text: ['优', '良', '差'],
  62. },
  63. hcho: {
  64. range: [0.08, 0.1],
  65. text: ['适宜', '偏高', '超标'],
  66. },
  67. };
  68. let sortArr = [value, ...objList[name].range].sort((a, b) => {
  69. return a - b;
  70. });
  71. let level = sortArr.findIndex((item) => item === value);
  72. let levelTxt = objList[name].text[level];
  73. return { level, levelTxt };
  74. } else {
  75. return { level: '--', levelTxt: '--' };
  76. }
  77. };
  78. const { officeImg } = equipImageMap;
  79. const [currentType, setCurrentType] = useState('3s');
  80. const [spaceName, setSpaceName] = useState('王总办公室');
  81. const [paramList, setParamList] = useState([]);
  82. useEffect(() => {
  83. const paramsObj = {
  84. criteria: {
  85. spaceId: 'Sp1101080259a0fc148d72f242fe9300566c12e15bf4',
  86. projectId: 'Pj1101080259',
  87. },
  88. pubname: 'sagacareAndtenantslink',
  89. openid: '9a1ecfbacb6b4f249bf2dd3ec7793ead', // userId
  90. };
  91. getSpaceAdjustList(paramsObj).then((res) => {
  92. res.content &&
  93. res.content.forEach((item, idx) => {
  94. envArr.forEach((jtem, jdx) => {
  95. jtem.describe = checkLevel(item[jtem.id], jtem.id).levelTxt;
  96. if (jtem.id == 'humidity') {
  97. jtem.num = item[jtem.id].toFixed(0);
  98. } else if (jtem.id == 'hcho') {
  99. jtem.num = item[jtem.id].toFixed(2);
  100. } else {
  101. jtem.num = item[jtem.id];
  102. }
  103. });
  104. //console.log(paramList, 'paramListparamList');
  105. setParamList(envArr);
  106. });
  107. });
  108. }, []);
  109. return (
  110. <>
  111. <Modal width={810} visible maskClosable={false} closable={false} footer={null}>
  112. <div className={styles.main}>
  113. <div className={styles.header}>
  114. <div className={styles.show}>
  115. <div className={styles.tileline}>
  116. <img src={officeImg} className={styles.titleIcon}></img>
  117. <span>1#-1312</span>
  118. </div>
  119. <div className={styles.timeLine}>
  120. 使用时间:<span>08:00-20:00</span>
  121. </div>
  122. </div>
  123. <div className={styles.close} onClick={onClose}>
  124. <Icon type="close" />
  125. </div>
  126. </div>
  127. <div className={styles.content}>
  128. <div className={styles.infoList}>
  129. {paramList.map((item, index) => {
  130. return (
  131. <div className={styles.item} key={'navc' + item.id}>
  132. <div className={styles.title}>{item.name}</div>
  133. <div className={styles.num}>
  134. {item.num}
  135. {item.unit}
  136. </div>
  137. <div className={styles.describe}>{item.describe}</div>
  138. </div>
  139. );
  140. })}
  141. </div>
  142. <div className={styles.devices}>
  143. <Row gutter={[12, 18]}>
  144. <Col span={12}>
  145. <AirEq></AirEq>
  146. </Col>
  147. <Col span={12}>
  148. <LampEq></LampEq>
  149. </Col>
  150. <Col span={12}>
  151. <CurtainEq></CurtainEq>
  152. </Col>
  153. </Row>
  154. </div>
  155. </div>
  156. </div>
  157. </Modal>
  158. </>
  159. );
  160. };