12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 |
- import React, { useState, useEffect, useCallback } from 'react';
- import styles from './index.less';
- import cx from 'classnames';
- import { Select } from 'antd';
- import EquipNavRight from '@/pages/Equipment/components/topNavRight';
- import RunNavRight from '@/pages/Runtime/components/topNavRight';
- const FloorList = [
- {
- label: 'F1',
- value: 'F1',
- },
- {
- label: 'F2',
- value: 'F2',
- },
- {
- label: 'F3',
- value: 'F3',
- },
- {
- label: 'F4',
- value: 'F4',
- },
- ];
- export default ({ navigatorList = [], type, navigatorChange }) => {
- const [currentFloor, setCurrentFloor] = useState('F2');
- //const [selId, setSelId] = useState('temperature');
- const [selParamObj, setSelParamObj] = useState({});
- useEffect(() => {
- console.log('chartModal-effect');
- setSelParamObj(navigatorList[0]);
- }, []);
- const changHandle = useCallback((val) => {
- console.log('select-onChange', val);
- setCurrentFloor(val);
- }, []);
- //当前切换导航条时
- const itemClick = (item) => {
- //setSelId(item.id);
- setSelParamObj(item);
- console.log('itemclick', item);
- navigatorChange && navigatorChange(item);
- };
- console.log('top渲染');
- return (
- <div className={styles.topnavigator}>
- <div className={styles.floor}>
- <Select
- options={FloorList}
- value={currentFloor}
- onChange={changHandle}
- size="large"
- dropdownMatchSelectWidth={true}
- style={{ width: '100%' }}
- bordered={false}
- />
- </div>
- <div className={styles.navigator}>
- {navigatorList.map((item, index) => {
- return (
- <div
- className={cx(styles.navItem, { [styles.sel]: item.id === selParamObj.id })}
- style={{
- borderBottom: item.id === selParamObj.id ? `3px solid ${item.color}` : null,
- }}
- key={'nav' + index}
- onClick={() => {
- itemClick(item);
- }}
- >
- <img src={item.src} style={{ height: 20 }}></img>
- <div className={styles.text}>{item.name}</div>
- </div>
- );
- })}
- </div>
- {type === 'enviroment' && (
- <div className={styles.right}>
- <div className={styles.firstLine} style={{ color: selParamObj.color }}>
- <span className={styles.value}>{selParamObj.num}</span>{' '}
- <span className={styles.unit}>{selParamObj.unit}</span>
- </div>
- <div className={styles.text}>当前楼层平均{selParamObj.name}</div>
- </div>
- )}
- {type === 'equipment' && <EquipNavRight selParamObj={selParamObj}></EquipNavRight>}
- {type === 'runtime' && <RunNavRight></RunNavRight>}
- </div>
- );
- };
|