Index.jsx

import React, { useState, useEffect } from 'react';
import { connect, history } from 'umi';
import { Tabs } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import Sidebar from '@/components/Customized/SideTree';
import classNames from 'classnames';
import utilsStyles from '@/utils/utils.less';
import styles from './Index.less';
import AirSystem from './components/AirSystem';

const { TabPane } = Tabs;

const Parameters = (props) => {
  const { ops, dispatch, loading } = props

  /* SideTree */
  const [areaId, setAreaId] = useState([]);
  const [energyTarget, setEnergyTarget] = useState(1);
  /* tab */
  const [tab, setTab] = useState('airSystem')

  /**
   * @tab切换
   */
  const tabChange = (key) => {
    setTab(key)
  };

  /**
   * @SideTree方法
   */
  useEffect(() => {
    console.log(energyTarget, '========')
  }, [energyTarget])

  return (
    <PageHeaderWrapper title="能效分析">
      <div className={classNames(utilsStyles.disFlexCol, utilsStyles.fullContainer)}>
        <div className={utilsStyles.subMenus}>
          <Tabs activeKey={tab} onChange={tabChange}>
            <TabPane tab='空调系统' key='airSystem'></TabPane>
            <TabPane tab='配电系统' key='2'></TabPane>
            <TabPane tab='空压系统' key='3'></TabPane>
            <TabPane tab='锅炉系统' key='4'></TabPane>
            <TabPane tab='给水系统' key='5'></TabPane>
            <TabPane tab='氮气系统' key='6'></TabPane>
            <TabPane tab='纯水系统' key='7'></TabPane>
            <TabPane tab='安防系统' key='8'></TabPane>
          </Tabs>
        </div>
        <div className={styles.wrap_page}>
          <Sidebar
            loading={false}
            title='系统拓扑'
            placeholder='请输入系统/设备名称'
            onSelectTreeNode={setAreaId}
            onSelectEnergyTarget={setEnergyTarget}
          />

          <div className={classNames(utilsStyles.sideContainerWrap, utilsStyles.disFlexCol)}>
            <AirSystem />
          </div>
        </div>

      </div>
    </PageHeaderWrapper>
  )
}

export default connect(({ ops, loading }) => ({
  ops,
  loading: loading.models.ops,
}))(Parameters);