123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229 |
- import React, { useState, useEffect } from 'react';
- import { Modal, Row, Col, Form, Select, Input, Button } from 'antd';
- import { CloseOutlined } from '@ant-design/icons';
- import Icon from '@/tenants-ui/Icon';
- import styles from './index.less';
- import { EditOutlined } from '@ant-design/icons';
- import { equipImageMap } from '@/config/image.js';
- import AirEq from './airEq';
- import LampEq from './lampEq';
- const typeList = [
- {
- label: '独立办公室',
- value: '1s',
- },
- {
- label: '办公区',
- value: '2s',
- },
- {
- label: '活动区',
- value: '3s',
- },
- ];
- export default ({ onClose }) => {
- const { officeImg, curtainTemp, waterTemp, lampTemp, airTemp } = equipImageMap;
- const [currentType, setCurrentType] = useState('3s');
- const [spaceName, setSpaceName] = useState('王总办公室');
- const [paramList, setParamList] = useState([
- {
- name: '温度',
- id: 'temperature',
- num: 24,
- describe: '温度适宜',
- },
- {
- name: 'CO₂',
- id: 'co2',
- num: 410,
- describe: '空气清新',
- },
- {
- name: 'PM2.5',
- id: 'pm25',
- num: 0.3,
- describe: '优秀',
- },
- {
- name: '甲醛',
- id: 'jiaquan',
- num: 0.5,
- describe: '健康',
- },
- {
- name: '湿度',
- id: 'wet',
- num: 26,
- unit: '%',
- describe: '健康',
- },
- ]);
- //const [paramId, setParamId] = useState('temperature&wet');
- const [paramObj, setParamObj] = useState({});
- const [editVisible, setEditVisible] = useState(false);
- useEffect(() => {
- console.log('chartModal-effect');
- setParamObj(paramList[0]);
- }, []);
- const nameChange = () => {
- setEditVisible(true);
- };
- const [form] = Form.useForm();
- const cancelSave = () => {
- setEditVisible(false);
- };
- const saveForm = () => {
- form
- .validateFields()
- .then((values) => {})
- .catch((errorInfo) => {
- //debugger;
- });
- // setEditVisible(false);
- };
- const [errorObj, setErrorObj] = useState({});
- const formValueChange = () => {
- setTimeout(() => {
- var errors = form.getFieldsError();
- var errorObjTemp = {};
- errors.forEach(function (item) {
- if (item?.errors?.length > 0 && item?.name?.length > 0) {
- errorObjTemp[item.name[0]] = item.errors;
- }
- });
- setErrorObj(errorObjTemp);
- }, 0);
- };
- return (
- <>
- <Modal width={810} visible maskClosable={false} closable={false} footer={null}>
- <div className={styles.main}>
- <div className={styles.header}>
- {!editVisible && (
- <div className={styles.show}>
- <div className={styles.tileline} onClick={nameChange}>
- <img src={officeImg} className={styles.titleIcon}></img>
- <span>1#-1312</span>
- <EditOutlined className={styles.edit} />
- </div>
- <div className={styles.timeLine}>
- 使用时间:<span>08:00-20:00</span>
- </div>
- </div>
- )}
- {editVisible && (
- <div className={styles.editShow}>
- <Form
- layout="vertical"
- initialValues={{ spacename: '总裁办公室', spacetype: '3s' }}
- onValuesChange={() => {
- formValueChange();
- }}
- form={form}
- >
- <Row gutter={[20, 0]}>
- <Col span={8}>
- <Form.Item
- label="空间名称"
- name="spacename"
- rules={[{ required: true, message: '空间名称不能为空' }]}
- >
- <Input
- autoComplete="off"
- size="large"
- style={{ height: '50px' }}
- suffix={
- errorObj.spacename ? (
- <Icon type={'warning'} style={{ color: '#E5574F' }} />
- ) : (
- <span></span>
- )
- }
- />
- </Form.Item>
- </Col>
- <Col span={8}>
- <Form.Item label="空间类型" name="spacetype">
- <Select
- size="large"
- onChange={(val) => {
- console.log(val);
- }}
- options={typeList}
- />
- </Form.Item>
- </Col>
- <Col span={8} style={{ display: 'flex', alignItems: 'center' }}>
- <Button
- type="primary"
- shape="round"
- size="middle"
- style={{ width: 88, height: 50 }}
- onClick={saveForm}
- >
- 保存
- </Button>
- <Button
- type="default"
- size="middle"
- style={{ width: 88, height: 50, border: 'none', marginLeft: 10 }}
- icon={<CloseOutlined />}
- onClick={cancelSave}
- >
- 取消
- </Button>
- </Col>
- </Row>
- </Form>
- </div>
- )}
- <div className={styles.close} onClick={onClose}>
- <Icon type="close" />
- </div>
- </div>
- <div className={styles.content}>
- <div className={styles.infoList}>
- {paramList.map((item, index) => {
- return (
- <div className={styles.item} key={'navc' + item.id}>
- <div className={styles.title}>{item.name}</div>
- <div className={styles.num}>
- {item.num}
- {item.unit}
- </div>
- <div className={styles.describe}>{item.describe}</div>
- </div>
- );
- })}
- </div>
- <div className={styles.devices}>
- <Row gutter={[12, 18]}>
- <Col span={12}>
- {/* <img style={{ width: '100%' }} src={airTemp}></img> */}
- <AirEq></AirEq>
- </Col>
- <Col span={12}>
- {/* <img style={{ width: '100%' }} src={lampTemp}></img> */}
- <LampEq></LampEq>
- </Col>
- <Col span={12}>
- <img style={{ width: '100%' }} src={waterTemp}></img>
- </Col>
- <Col span={12}>
- <img style={{ width: '100%' }} src={curtainTemp}></img>
- </Col>
- </Row>
- {/* <img src={lampTemp}></img>
- <img src={waterTemp}></img>
- <img src={curtainTemp}></img> */}
- </div>
- </div>
- </div>
- </Modal>
- </>
- );
- };
|