BigScreen/src/components/FloodControl/indexLeft.js

// 污水
import React, { PureComponent } from "react";
import { Circle, CircleCon, LeftPage, Line, RightPage } from "./style";
import ChartBox from "../ChartBox";
import MaterialsPrepare from "./MaterialsPrepare";
import WaterLevel from "./WaterLevel";
import WarnMessage from "./WarnMessage";

class index extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        {
          name: "现在",
          value: require("../../assets/sun.png"),
        },
        {
          name: "15:00",
          value: require("../../assets/smallRain.png"),
        },
        {
          name: "17:00",
          value: require("../../assets/bigRain.png"),
        },
        {
          name: "17:00",
          value: require("../../assets/bigRain.png"),
        },
        {
          name: "17:00",
          value: require("../../assets/bigRain.png"),
        },
        {
          name: "17:00",
          value: require("../../assets/bigRain.png"),
        },
      ],
    };
  }
  render() {
    return (
      <LeftPage>
        <CircleCon>
          {this.state.data.map((item, idx) => (
            <>
              {idx !== 0 && <Line></Line>}
              <div style={{ textAlign: "center", color: "#fff" }}>
                <div>{item.name}</div>
                <img className="image" src={item.value} />
              </div>
            </>
          ))}
        </CircleCon>
        <ChartBox
          title="重点区域积水点液位"
          style={{ flex: 1, marginTop: 10, marginBottom: 30 }}
        >
          <WaterLevel />
        </ChartBox>

        <ChartBox
          title="汛前物资准备统计"
          style={{ flex: 1, marginBottom: 30 }}
        >
          <MaterialsPrepare />
        </ChartBox>
        <ChartBox title="报警信息" style={{ flex: 1 }}>
          <WarnMessage height="20vh" />
        </ChartBox>
      </LeftPage>
    );
  }
}

export default index;