|
@@ -1,186 +1,129 @@
|
|
|
import React, { useState, useEffect } from 'react';
|
|
|
-import { Modal, Row, Col, Form, Select, Input, Button } from 'antd';
|
|
|
-import { CloseOutlined } from '@ant-design/icons';
|
|
|
+import { Modal, Row, Col } from 'antd';
|
|
|
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';
|
|
|
import CurtainEq from './curtainEq';
|
|
|
-
|
|
|
-const typeList = [
|
|
|
- {
|
|
|
- label: '独立办公室',
|
|
|
- value: '1s',
|
|
|
- },
|
|
|
- {
|
|
|
- label: '办公区',
|
|
|
- value: '2s',
|
|
|
- },
|
|
|
- {
|
|
|
- label: '活动区',
|
|
|
- value: '3s',
|
|
|
- },
|
|
|
-];
|
|
|
+import { getSpaceAdjustList } from '@/services/ant-design-pro/equipment';
|
|
|
|
|
|
export default ({ onClose }) => {
|
|
|
- const { officeImg, curtainTemp, waterTemp, lampTemp, airTemp } = equipImageMap;
|
|
|
- const [currentType, setCurrentType] = useState('3s');
|
|
|
- const [spaceName, setSpaceName] = useState('王总办公室');
|
|
|
- const [paramList, setParamList] = useState([
|
|
|
+ const envArr = [
|
|
|
{
|
|
|
name: '温度',
|
|
|
- id: 'Tdb',
|
|
|
- num: 24,
|
|
|
- describe: '温度适宜',
|
|
|
+ id: 'temperature',
|
|
|
+ num: '0',
|
|
|
+ describe: '--',
|
|
|
},
|
|
|
{
|
|
|
name: 'CO₂',
|
|
|
- id: 'CO2',
|
|
|
- num: 410,
|
|
|
- describe: '空气清新',
|
|
|
+ id: 'co2',
|
|
|
+ num: '0',
|
|
|
+ describe: '--',
|
|
|
},
|
|
|
{
|
|
|
name: 'PM2.5',
|
|
|
- id: 'PM2d5',
|
|
|
- num: 0.3,
|
|
|
- describe: '优秀',
|
|
|
+ id: 'pm25',
|
|
|
+ num: '0',
|
|
|
+ describe: '--',
|
|
|
},
|
|
|
{
|
|
|
name: '甲醛',
|
|
|
- id: 'HCHO',
|
|
|
- num: 0.5,
|
|
|
- describe: '健康',
|
|
|
+ id: 'hcho',
|
|
|
+ num: '0',
|
|
|
+ describe: '--',
|
|
|
},
|
|
|
{
|
|
|
name: '湿度',
|
|
|
- id: 'RH',
|
|
|
- num: 26,
|
|
|
+ id: 'humidity',
|
|
|
+ num: '0',
|
|
|
unit: '%',
|
|
|
- describe: '健康',
|
|
|
+ describe: '--',
|
|
|
},
|
|
|
- ]);
|
|
|
- //const [paramId, setParamId] = useState('Tdb&RH');
|
|
|
- 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;
|
|
|
+ ];
|
|
|
+ const checkLevel = (value, name) => {
|
|
|
+ if (value || value == 0) {
|
|
|
+ let objList = {
|
|
|
+ temperature: {
|
|
|
+ range: [20, 24],
|
|
|
+ text: ['偏冷', '舒适', '偏热'],
|
|
|
+ },
|
|
|
+ humidity: {
|
|
|
+ range: [30, 70],
|
|
|
+ text: ['干燥', '适宜', '湿润'],
|
|
|
+ },
|
|
|
+ co2: {
|
|
|
+ range: [800, 1500],
|
|
|
+ text: ['适宜', '偏高', '超标'],
|
|
|
+ },
|
|
|
+ pm25: {
|
|
|
+ range: [35, 75],
|
|
|
+ text: ['优', '良', '差'],
|
|
|
+ },
|
|
|
+ hcho: {
|
|
|
+ range: [0.08, 0.1],
|
|
|
+ text: ['适宜', '偏高', '超标'],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ let sortArr = [value, ...objList[name].range].sort((a, b) => {
|
|
|
+ return a - b;
|
|
|
});
|
|
|
- // 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);
|
|
|
+ let level = sortArr.findIndex((item) => item === value);
|
|
|
+ let levelTxt = objList[name].text[level];
|
|
|
+ return { level, levelTxt };
|
|
|
+ } else {
|
|
|
+ return { level: '--', levelTxt: '--' };
|
|
|
+ }
|
|
|
};
|
|
|
+ const { officeImg } = equipImageMap;
|
|
|
+ const [currentType, setCurrentType] = useState('3s');
|
|
|
+ const [spaceName, setSpaceName] = useState('王总办公室');
|
|
|
+ const [paramList, setParamList] = useState([]);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ const paramsObj = {
|
|
|
+ criteria: {
|
|
|
+ spaceId: 'Sp1101080259a0fc148d72f242fe9300566c12e15bf4',
|
|
|
+ projectId: 'Pj1101080259',
|
|
|
+ },
|
|
|
+ pubname: 'sagacareAndtenantslink',
|
|
|
+ openid: '9a1ecfbacb6b4f249bf2dd3ec7793ead', // userId
|
|
|
+ };
|
|
|
+ getSpaceAdjustList(paramsObj).then((res) => {
|
|
|
+ res.content &&
|
|
|
+ res.content.forEach((item, idx) => {
|
|
|
+ envArr.forEach((jtem, jdx) => {
|
|
|
+ jtem.describe = checkLevel(item[jtem.id], jtem.id).levelTxt;
|
|
|
+ if (jtem.id == 'humidity') {
|
|
|
+ jtem.num = item[jtem.id].toFixed(0);
|
|
|
+ } else if (jtem.id == 'hcho') {
|
|
|
+ jtem.num = item[jtem.id].toFixed(2);
|
|
|
+ } else {
|
|
|
+ jtem.num = item[jtem.id];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ console.log(paramList, 'paramListparamList');
|
|
|
+ setParamList(envArr);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }, []);
|
|
|
+
|
|
|
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 className={styles.show}>
|
|
|
+ <div className={styles.tileline}>
|
|
|
+ <img src={officeImg} className={styles.titleIcon}></img>
|
|
|
+ <span>1#-1312</span>
|
|
|
</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 className={styles.timeLine}>
|
|
|
+ 使用时间:<span>08:00-20:00</span>
|
|
|
</div>
|
|
|
- )}
|
|
|
+ </div>
|
|
|
<div className={styles.close} onClick={onClose}>
|
|
|
<Icon type="close" />
|
|
|
</div>
|
|
@@ -203,25 +146,15 @@ export default ({ onClose }) => {
|
|
|
<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> */}
|
|
|
<CurtainEq></CurtainEq>
|
|
|
</Col>
|
|
|
</Row>
|
|
|
-
|
|
|
- {/* <img src={lampTemp}></img>
|
|
|
- <img src={waterTemp}></img>
|
|
|
- <img src={curtainTemp}></img> */}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|