BigScreen/src/components/PumpStation/PumpGeneral.js

//大用户用水量排名
import React, { PureComponent } from "react";
import { ScrollBoard } from "@jiaminghi/data-view-react";

class PumpGeneral extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      config: {
        // 表头背景色
        headerBGC: "transparent",
        // 奇数行背景色
        oddRowBGC: "#0ab8d952",
        // 偶数行背景色
        evenRowBGC: "transparent",
        // 行号
        index: false,
        // 行号表头
        // indexHeader: '序号',
        // 宽度
        columnWidth: [120, 70, 90, 80],
        // 对其方式
        align: ["center"],
        // 表行数
        rowNum: 5,
      },
    };
  }

  render() {
    const { height } = this.props;
    const data = {
      header: ["泵站名称", "运行状态", "流量", "能耗", "溢流风险"],
      data: [
        ["凤凰路一级泵站", "正常", "500m3/h", "1.2kWh", ""],
        [
          "凤凰路二级泵站 ",
          "正常",
          "600m3/h",
          "1.5kWh",
          "<span style='color:#f20a0a;'>!!!</span>",
        ],
        ["凤凰路三级泵站 ", "正常", "300m3/h", "0.7kWh", ""],
        ["大涧沟雨水泵站 ", "正常", "500m3/h", "1.3kWh", ""],
        ["改建纬十二路雨水泵站 ", "正常", "450m3/h", "0.9kWh", ""],
      ],
    };
    const config = {
      ...this.state.config,
      ...data,
    };

    return (
      <div
        style={{
          width: "calc(100% - 24px)",
          margin: "auto",
        }}
      >
        <ScrollBoard
          config={config}
          style={{
            width: "100%",
            height: height,
          }}
        ></ScrollBoard>
      </div>
    );
  }
}

export default PumpGeneral;