import React, { PureComponent } from "react";
import { connect } from "dva";
import { RightPage } from "./style";
import ChartBox from "../ChartBox";
import WaterPlantMonitoring from "../Overview/WaterPlantMonitoring";
import WaterVolumeStat from "../Overview/WaterVolumeStat";
import PipelineMonitoring from "../Overview/PipelineMonitoring";

class index extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <RightPage>
        <ChartBox title="当年水量统计" style={{ flex: 1}}>
          <WaterVolumeStat />
        </ChartBox>
        <ChartBox title="当月管网监测" style={{ flex: 1, marginTop: 30, marginBottom: 30 }}>
          <PipelineMonitoring />
        </ChartBox>
        <WaterPlantMonitoring height="30vh" />
      </RightPage>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    browseCategories: state.rightPage.browseCategories,
    userIdentityCategory: state.rightPage.userIdentityCategory,
    offline: state.rightPage.offline,
  };
};

const mapStateToDispatch = (dispatch) => ({});

export default connect(mapStateToProps, mapStateToDispatch)(index);