index.jsx 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. import React, { useState, useEffect, useCallback } from 'react';
  2. import styles from './index.less';
  3. import cx from 'classnames';
  4. import { Select } from 'antd';
  5. import EquipNavRight from '@/pages/Equipment/components/topNavRight';
  6. import RunNavRight from '@/pages/Runtime/components/topNavRight';
  7. const FloorList = [
  8. {
  9. label: 'F1',
  10. value: 'F1',
  11. },
  12. {
  13. label: 'F2',
  14. value: 'F2',
  15. },
  16. {
  17. label: 'F3',
  18. value: 'F3',
  19. },
  20. {
  21. label: 'F4',
  22. value: 'F4',
  23. },
  24. ];
  25. export default ({ navigatorList = [], type, navigatorChange }) => {
  26. const [currentFloor, setCurrentFloor] = useState('F2');
  27. //const [selId, setSelId] = useState('temperature');
  28. const [selParamObj, setSelParamObj] = useState({});
  29. useEffect(() => {
  30. console.log('chartModal-effect');
  31. setSelParamObj(navigatorList[0]);
  32. }, []);
  33. const changHandle = useCallback((val) => {
  34. console.log('select-onChange', val);
  35. setCurrentFloor(val);
  36. }, []);
  37. //当前切换导航条时
  38. const itemClick = (item) => {
  39. //setSelId(item.id);
  40. setSelParamObj(item);
  41. console.log('itemclick', item);
  42. navigatorChange && navigatorChange(item);
  43. };
  44. console.log('top渲染');
  45. return (
  46. <div className={styles.topnavigator}>
  47. <div className={styles.floor}>
  48. <Select
  49. options={FloorList}
  50. value={currentFloor}
  51. onChange={changHandle}
  52. size="large"
  53. dropdownMatchSelectWidth={true}
  54. style={{ width: '100%' }}
  55. bordered={false}
  56. />
  57. </div>
  58. <div className={styles.navigator}>
  59. {navigatorList.map((item, index) => {
  60. return (
  61. <div
  62. className={cx(styles.navItem, { [styles.sel]: item.id === selParamObj.id })}
  63. style={{
  64. borderBottom: item.id === selParamObj.id ? `3px solid ${item.color}` : null,
  65. }}
  66. key={'nav' + index}
  67. onClick={() => {
  68. itemClick(item);
  69. }}
  70. >
  71. <img src={item.src} style={{ height: 20 }}></img>
  72. <div className={styles.text}>{item.name}</div>
  73. </div>
  74. );
  75. })}
  76. </div>
  77. {type === 'enviroment' && (
  78. <div className={styles.right}>
  79. <div className={styles.firstLine} style={{ color: selParamObj.color }}>
  80. <span className={styles.value}>{selParamObj.num}</span>{' '}
  81. <span className={styles.unit}>{selParamObj.unit}</span>
  82. </div>
  83. <div className={styles.text}>当前楼层平均{selParamObj.name}</div>
  84. </div>
  85. )}
  86. {type === 'equipment' && <EquipNavRight selParamObj={selParamObj}></EquipNavRight>}
  87. {type === 'runtime' && <RunNavRight></RunNavRight>}
  88. </div>
  89. );
  90. };