BigScreen/src/components/Sewage/UserWaterUsage.js

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

class UserWaterUsage extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      config: {
        // 表头背景色
        headerBGC: "transparent",
        // 奇数行背景色
        oddRowBGC: "#0ab8d952",
        // 偶数行背景色
        evenRowBGC: "transparent",
        // 行号
        index: false,
        // 行号表头
        // indexHeader: '序号',
        // 宽度
        columnWidth: [100, 200],
        // 对其方式
        align: ["center"],
        // 表行数
        rowNum: 6,
      },
    };
  }
  render() {
    const { height } = this.props;
    const data = {
      header: ["排名", "水厂名称", "分数（分）"],
      data: [
        ["NO.1", "高新区水质净化一厂", "98"],
        ["NO.2", "济南西区污水处理厂", "97"],
        ["NO.3", "平阴区污水处理厂", "97.8"],
        ["NO.4", "光大水务二厂", "97.3"],
        ["NO.5", "济南清区污水处理厂", "95.5"],
        ["NO.6", "光大水务一厂", "95"],
        ["NO.7", "章丘污水处理厂", "93"],
        ["NO.8", "美洁污水处理厂", "94.7"],
      ],
    };
    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 UserWaterUsage;