|
@@ -0,0 +1,126 @@
|
|
|
+import React, { useState, useEffect } from 'react';
|
|
|
+import styles from './index.less';
|
|
|
+import commonStyles from '../common.less';
|
|
|
+import { equipImageMap } from '@/config/image.js';
|
|
|
+import AnSwitch from '../anSwitch';
|
|
|
+
|
|
|
+export default () => {
|
|
|
+ const {
|
|
|
+ airOpen,
|
|
|
+ airClose,
|
|
|
+ temp_down,
|
|
|
+ temp_up,
|
|
|
+ temp_keep,
|
|
|
+ arrow_down,
|
|
|
+ arrow_up,
|
|
|
+ wind_up,
|
|
|
+ wind_down,
|
|
|
+ } = equipImageMap;
|
|
|
+ const hasAir = true;
|
|
|
+ const [isOpen, setIsOpen] = useState(true); // 12 开, 10关
|
|
|
+ const temperature = '11';
|
|
|
+ const airExpend = [
|
|
|
+ {
|
|
|
+ title: '温度调节',
|
|
|
+ type: 'temp',
|
|
|
+ downType: 4,
|
|
|
+ upType: 2,
|
|
|
+ leftImg: arrow_down,
|
|
|
+ rightImg: arrow_up,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '风量调节',
|
|
|
+ type: 'wind',
|
|
|
+ downType: 5,
|
|
|
+ upType: 6,
|
|
|
+ leftImg: wind_down,
|
|
|
+ rightImg: wind_up,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ const airData = {
|
|
|
+ spaceStatus: true,
|
|
|
+ icon: 2,
|
|
|
+ };
|
|
|
+
|
|
|
+ const airStatusImg = () => {
|
|
|
+ switch (airData.icon) {
|
|
|
+ case 1:
|
|
|
+ return temp_keep;
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ return temp_down;
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ return temp_up;
|
|
|
+ break;
|
|
|
+
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ function changeSwitch(val) {
|
|
|
+ setIsOpen(val);
|
|
|
+ }
|
|
|
+
|
|
|
+ const AirExpend = () => {
|
|
|
+ const changeTemp = (type) => {
|
|
|
+ console.log(type, 'win 风蛋糕');
|
|
|
+ };
|
|
|
+ if (isOpen) {
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <div className={styles.expend}>
|
|
|
+ {airExpend.map((items, idx) => {
|
|
|
+ return (
|
|
|
+ <div className={styles.item} key={idx}>
|
|
|
+ <div>{items.title}</div>
|
|
|
+ <div className={styles.itemRight}>
|
|
|
+ <div className={styles.itemBg} onClick={() => changeTemp(items.downType)}>
|
|
|
+ <img className={styles.itemImg} src={items.leftImg} />
|
|
|
+ </div>
|
|
|
+ <div className={styles.itemBg} onClick={() => changeTemp(items.upType)}>
|
|
|
+ <img className={styles.itemImg} src={items.rightImg} />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ return <></>;
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className={styles.box}>
|
|
|
+ <div className={styles.content}>
|
|
|
+ <div className={styles.env}>
|
|
|
+ <div className={styles.envLeft}>
|
|
|
+ <span className={commonStyles.eqTitle}>空调</span>
|
|
|
+ <div className={styles.envnum}>
|
|
|
+ {temperature ? temperature : '--'}
|
|
|
+ <span className={styles.unit}>℃</span>
|
|
|
+ </div>
|
|
|
+ <div className={styles.airStatus}>
|
|
|
+ <span>{isOpen ? '空调已开启' : '空调已关闭'}</span>
|
|
|
+ <div className={styles.airStatusbox}>
|
|
|
+ <img className={styles.airStatusImg} src={airStatusImg()} />
|
|
|
+ <span className={styles.statusText}>正在全力降温中的对方的身份</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className={styles.envRight}>
|
|
|
+ <img className={styles.roomAirImg} src={isOpen ? airOpen : airClose} />
|
|
|
+ </div>
|
|
|
+ <div className={commonStyles.eqBtn}>
|
|
|
+ <AnSwitch isOpen={isOpen} changeSwitch={changeSwitch} />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <AirExpend></AirExpend>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|