index.jsx 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. import React, { useState, useEffect } from 'react';
  2. import { Modal, Row, Col, Form, Select, Input, Button } from 'antd';
  3. import { CloseOutlined } from '@ant-design/icons';
  4. import Icon from '@/tenants-ui/Icon';
  5. import styles from './index.less';
  6. import { EditOutlined } from '@ant-design/icons';
  7. import { equipImageMap } from '@/config/image.js';
  8. import AirEq from './airEq';
  9. import LampEq from './lampEq';
  10. const typeList = [
  11. {
  12. label: '独立办公室',
  13. value: '1s',
  14. },
  15. {
  16. label: '办公区',
  17. value: '2s',
  18. },
  19. {
  20. label: '活动区',
  21. value: '3s',
  22. },
  23. ];
  24. export default ({ onClose }) => {
  25. const { officeImg, curtainTemp, waterTemp, lampTemp, airTemp } = equipImageMap;
  26. const [currentType, setCurrentType] = useState('3s');
  27. const [spaceName, setSpaceName] = useState('王总办公室');
  28. const [paramList, setParamList] = useState([
  29. {
  30. name: '温度',
  31. id: 'temperature',
  32. num: 24,
  33. describe: '温度适宜',
  34. },
  35. {
  36. name: 'CO₂',
  37. id: 'co2',
  38. num: 410,
  39. describe: '空气清新',
  40. },
  41. {
  42. name: 'PM2.5',
  43. id: 'pm25',
  44. num: 0.3,
  45. describe: '优秀',
  46. },
  47. {
  48. name: '甲醛',
  49. id: 'jiaquan',
  50. num: 0.5,
  51. describe: '健康',
  52. },
  53. {
  54. name: '湿度',
  55. id: 'wet',
  56. num: 26,
  57. unit: '%',
  58. describe: '健康',
  59. },
  60. ]);
  61. //const [paramId, setParamId] = useState('temperature&wet');
  62. const [paramObj, setParamObj] = useState({});
  63. const [editVisible, setEditVisible] = useState(false);
  64. useEffect(() => {
  65. console.log('chartModal-effect');
  66. setParamObj(paramList[0]);
  67. }, []);
  68. const nameChange = () => {
  69. setEditVisible(true);
  70. };
  71. const [form] = Form.useForm();
  72. const cancelSave = () => {
  73. setEditVisible(false);
  74. };
  75. const saveForm = () => {
  76. form
  77. .validateFields()
  78. .then((values) => {})
  79. .catch((errorInfo) => {
  80. //debugger;
  81. });
  82. // setEditVisible(false);
  83. };
  84. const [errorObj, setErrorObj] = useState({});
  85. const formValueChange = () => {
  86. setTimeout(() => {
  87. var errors = form.getFieldsError();
  88. var errorObjTemp = {};
  89. errors.forEach(function (item) {
  90. if (item?.errors?.length > 0 && item?.name?.length > 0) {
  91. errorObjTemp[item.name[0]] = item.errors;
  92. }
  93. });
  94. setErrorObj(errorObjTemp);
  95. }, 0);
  96. };
  97. return (
  98. <>
  99. <Modal width={810} visible maskClosable={false} closable={false} footer={null}>
  100. <div className={styles.main}>
  101. <div className={styles.header}>
  102. {!editVisible && (
  103. <div className={styles.show}>
  104. <div className={styles.tileline} onClick={nameChange}>
  105. <img src={officeImg} className={styles.titleIcon}></img>
  106. <span>1#-1312</span>
  107. <EditOutlined className={styles.edit} />
  108. </div>
  109. <div className={styles.timeLine}>
  110. 使用时间:<span>08:00-20:00</span>
  111. </div>
  112. </div>
  113. )}
  114. {editVisible && (
  115. <div className={styles.editShow}>
  116. <Form
  117. layout="vertical"
  118. initialValues={{ spacename: '总裁办公室', spacetype: '3s' }}
  119. onValuesChange={() => {
  120. formValueChange();
  121. }}
  122. form={form}
  123. >
  124. <Row gutter={[20, 0]}>
  125. <Col span={8}>
  126. <Form.Item
  127. label="空间名称"
  128. name="spacename"
  129. rules={[{ required: true, message: '空间名称不能为空' }]}
  130. >
  131. <Input
  132. autoComplete="off"
  133. size="large"
  134. style={{ height: '50px' }}
  135. suffix={
  136. errorObj.spacename ? (
  137. <Icon type={'warning'} style={{ color: '#E5574F' }} />
  138. ) : (
  139. <span></span>
  140. )
  141. }
  142. />
  143. </Form.Item>
  144. </Col>
  145. <Col span={8}>
  146. <Form.Item label="空间类型" name="spacetype">
  147. <Select
  148. size="large"
  149. onChange={(val) => {
  150. console.log(val);
  151. }}
  152. options={typeList}
  153. />
  154. </Form.Item>
  155. </Col>
  156. <Col span={8} style={{ display: 'flex', alignItems: 'center' }}>
  157. <Button
  158. type="primary"
  159. shape="round"
  160. size="middle"
  161. style={{ width: 88, height: 50 }}
  162. onClick={saveForm}
  163. >
  164. 保存
  165. </Button>
  166. <Button
  167. type="default"
  168. size="middle"
  169. style={{ width: 88, height: 50, border: 'none', marginLeft: 10 }}
  170. icon={<CloseOutlined />}
  171. onClick={cancelSave}
  172. >
  173. 取消
  174. </Button>
  175. </Col>
  176. </Row>
  177. </Form>
  178. </div>
  179. )}
  180. <div className={styles.close} onClick={onClose}>
  181. <Icon type="close" />
  182. </div>
  183. </div>
  184. <div className={styles.content}>
  185. <div className={styles.infoList}>
  186. {paramList.map((item, index) => {
  187. return (
  188. <div className={styles.item} key={'navc' + item.id}>
  189. <div className={styles.title}>{item.name}</div>
  190. <div className={styles.num}>
  191. {item.num}
  192. {item.unit}
  193. </div>
  194. <div className={styles.describe}>{item.describe}</div>
  195. </div>
  196. );
  197. })}
  198. </div>
  199. <div className={styles.devices}>
  200. <Row gutter={[12, 18]}>
  201. <Col span={12}>
  202. {/* <img style={{ width: '100%' }} src={airTemp}></img> */}
  203. <AirEq></AirEq>
  204. </Col>
  205. <Col span={12}>
  206. {/* <img style={{ width: '100%' }} src={lampTemp}></img> */}
  207. <LampEq></LampEq>
  208. </Col>
  209. <Col span={12}>
  210. <img style={{ width: '100%' }} src={waterTemp}></img>
  211. </Col>
  212. <Col span={12}>
  213. <img style={{ width: '100%' }} src={curtainTemp}></img>
  214. </Col>
  215. </Row>
  216. {/* <img src={lampTemp}></img>
  217. <img src={waterTemp}></img>
  218. <img src={curtainTemp}></img> */}
  219. </div>
  220. </div>
  221. </div>
  222. </Modal>
  223. </>
  224. );
  225. };