mh-sms-web/src/components/CustomPages/BI/BI055HomeDetail.js

import React from "react";
import { connect } from "dva";
import {
  initFilter,
  extendRule,
  extendInclude,
  getIsPC,
  openNotificationMobile,
  getSixMonth,
} from "../../../utils/common";
import {
  ChartBarShow_Vertical,
  LineShow,
} from "../../../utils/commonEcharsShow";
import { Table, Row, Progress, Col } from "antd";
import echarts from "echarts";
import styles from "../HI/StepForm.css";

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

// 月度隐患整改情况明细（首页）
class BI055HomeDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ListC: [],
      ListSafeCheckYearMonth: [],
      pagination: {},
      countTypeTitle: [],
      columnsTb: [],
      showLoading: false,
    };
  }

  componenthidMount() {
    if (!getIsPC()) {
      openNotificationMobile("bottomRight", notification);
      this.state.displayStr = "none";
      this.state.displayNum = 24;
    } else {
      this.state.displayStr = "";
      this.state.displayNum = 16;
    }
    this.loadReal();
    //定时器功能，暂时不开启
    // this.timerID = setInterval(() => this.getBaseInfoData(1, this.state.tableKey, 5), 120000);
  }

  componentDidMount() {
    this.loadReal();
  }
  loadReal = () => {
    let data = {
      IsSuccessful: true,
      Data: {
        ListC: [],
        ListSafeCheckYearMonth: [
          {
            DepartmentName: "穿孔班组",
            NUM: 1,
            Parent: {
              DepartmentName: "穿爆车间",
              RowCount: 2,
              listCount: [0, 0, 0, 10000],
            },
            RowCount: 1,
            listCount: [0, 0, 0, 10000],
            listName: [
              "按时整改隐患",
              "超期整改隐患",
              "未整改隐患",
              "隐患整改率",
            ],
          },
          {
            DepartmentName: "爆破班组",
            NUM: 2,
            Parent: {
              DepartmentName: "穿爆车间",
              RowCount: 2,
              listCount: [0, 0, 0, 10000],
            },
            RowCount: 1,
            listCount: [0, 0, 0, 10000],
            listName: [
              "按时整改隐患",
              "超期整改隐患",
              "未整改隐患",
              "隐患整改率",
            ],
          },
          {
            DepartmentName: "生产班",
            NUM: 3,
            Parent: {
              DepartmentName: "生产技术科",
              RowCount: 1,
              listCount: [6, 4, 0, 10000],
            },
            RowCount: 1,
            listCount: [4, 1, 0, 10000],
            listName: [
              "按时整改隐患",
              "超期整改隐患",
              "未整改隐患",
              "隐患整改率",
            ],
          },
          {
            DepartmentName: "综合班组",
            NUM: 4,
            Parent: {
              DepartmentName: "综合组",
              RowCount: 1,
              listCount: [3, 4, 0, 10000],
            },
            RowCount: 1,
            listCount: [3, 4, 0, 10000],
            listName: [
              "按时整改隐患",
              "超期整改隐患",
              "未整改隐患",
              "隐患整改率",
            ],
          },
          {
            DepartmentName: "采制样班",
            NUM: 5,
            Parent: {
              DepartmentName: "试验化验室",
              RowCount: 2,
              listCount: [0, 0, 0, 10000],
            },
            RowCount: 1,
            listCount: [0, 0, 0, 10000],
            listName: [
              "按时整改隐患",
              "超期整改隐患",
              "未整改隐患",
              "隐患整改率",
            ],
          },
          {
            DepartmentName: "化验班",
            NUM: 6,
            Parent: {
              DepartmentName: "试验化验室",
              RowCount: 2,
              listCount: [0, 0, 0, 10000],
            },
            RowCount: 1,
            listCount: [0, 0, 0, 10000],
            listName: [
              "按时整改隐患",
              "超期整改隐患",
              "未整改隐患",
              "隐患整改率",
            ],
          },
          {
            DepartmentName: "维修班组",
            NUM: 7,
            Parent: {
              DepartmentName: "金宇宁化分公司",
              RowCount: 4,
              listCount: [6, 7, 0, 10000],
            },
            RowCount: 1,
            listCount: [0, 0, 0, 10000],
            listName: [
              "按时整改隐患",
              "超期整改隐患",
              "未整改隐患",
              "隐患整改率",
            ],
          },
          {
            DepartmentName: "金宇现场",
            NUM: 8,
            Parent: {
              DepartmentName: "金宇宁化分公司",
              RowCount: 4,
              listCount: [6, 7, 0, 10000],
            },
            RowCount: 1,
            listCount: [2, 0, 0, 10000],
            listName: [
              "按时整改隐患",
              "超期整改隐患",
              "未整改隐患",
              "隐患整改率",
            ],
          },
          {
            DepartmentName: "运输二班",
            NUM: 9,
            Parent: {
              DepartmentName: "金宇宁化分公司",
              RowCount: 4,
              listCount: [6, 7, 0, 10000],
            },
            RowCount: 1,
            listCount: [1, 1, 0, 10000],
            listName: [
              "按时整改隐患",
              "超期整改隐患",
              "未整改隐患",
              "隐患整改率",
            ],
          },
          {
            DepartmentName: "运输一班",
            NUM: 10,
            Parent: {
              DepartmentName: "金宇宁化分公司",
              RowCount: 4,
              listCount: [6, 7, 0, 10000],
            },
            RowCount: 1,
            listCount: [1, 0, 0, 10000],
            listName: [
              "按时整改隐患",
              "超期整改隐患",
              "未整改隐患",
              "隐患整改率",
            ],
          },
          {
            DepartmentName: "民爆储存库班组",
            NUM: 11,
            Parent: {
              DepartmentName: "安环科",
              RowCount: 1,
              listCount: [2, 1, 0, 10000],
            },
            RowCount: 1,
            listCount: [0, 0, 0, 10000],
            listName: [
              "按时整改隐患",
              "超期整改隐患",
              "未整改隐患",
              "隐患整改率",
            ],
          },
        ],
      },
    };
    var countTypeTitle = [];
    var countTypeDataIndex = [];
    var columnsTb = [];
    if (
      data.Data.ListSafeCheckYearMonth != null &&
      data.Data.ListSafeCheckYearMonth.length > 0
    ) {
      countTypeTitle = data.Data.ListSafeCheckYearMonth[0].listName;
    }

    if (countTypeTitle.length < 1) {
      countTypeTitle.push("按时整改隐患");
      countTypeTitle.push("超期整改隐患");
      countTypeTitle.push("未整改隐患");
      countTypeTitle.push("隐患整改率");
    }

    var typeName = ["车间名称", "班组名称"];
    var RowCount = 0;
    for (let i = 0; i < 2; i++) {
      for (let j = 0; j < countTypeTitle.length; j++) {
        countTypeDataIndex.push(j);
        if (i == 0) {
          if (j == 0) {
            //头部
            columnsTb.push({
              title: typeName[i],
              dataIndex: "NUM",
              key: i * 10 + j,
              render: (value, record, index) => {
                RowCount = record.Parent.RowCount;
                if (
                  index > 0 &&
                  this.state.ListSafeCheckYearMonth[index - 1].Parent
                    .DepartmentName == record.Parent.DepartmentName
                ) {
                  RowCount = 0;
                }
                const obj = {
                  children: record.Parent.DepartmentName,
                  props: {
                    rowSpan: RowCount,
                  },
                };
                return obj;
              },
            });
          }

          //非头部
          if (countTypeTitle[j].indexOf("率") > -1) {
            columnsTb.push({
              title: countTypeTitle[j],
              dataIndex: "NUM",
              key: i * 10 + j,
              render: (value, record, index) => {
                RowCount = record.Parent.RowCount;
                if (
                  index > 0 &&
                  this.state.ListSafeCheckYearMonth[index - 1].Parent
                    .DepartmentName == record.Parent.DepartmentName
                ) {
                  RowCount = 0;
                }
                const obj = {
                  children: (
                    <Progress
                      percent={record.Parent.listCount[j] / 100}
                      status="active"
                      strokeColor={{ from: "#108ee9", to: "#108ee9" }}
                    />
                  ),
                  props: {
                    rowSpan: RowCount,
                  },
                };
                return obj;
              },
            });
          } else {
            columnsTb.push({
              title: countTypeTitle[j],
              dataIndex: "NUM",
              key: i * 10 + j,
              render: (value, record, index) => {
                RowCount = record.Parent.RowCount;
                if (
                  index > 0 &&
                  this.state.ListSafeCheckYearMonth[index - 1].Parent
                    .DepartmentName == record.Parent.DepartmentName
                ) {
                  RowCount = 0;
                }
                const obj = {
                  children: record.Parent.listCount[j],
                  props: {
                    rowSpan: RowCount,
                  },
                };
                return obj;
              },
            });
          }
        } else {
          //班组
          if (j == 0) {
            columnsTb.push({
              title: typeName[i],
              key: i * 10 + j,
              render: (value, record, index) => {
                const obj = {
                  children: record.DepartmentName,
                };
                return obj;
              },
            });
          }

          if (countTypeTitle[j].indexOf("率") > -1) {
            columnsTb.push({
              title: countTypeTitle[j],
              key: i * 10 + j,
              render: (text, record) => (
                <Progress
                  percent={record.listCount[j] / 100}
                  status="active"
                  strokeColor={{ from: "#108ee9", to: "#108ee9" }}
                />
              ),
            });
          } else {
            columnsTb.push({
              title: countTypeTitle[j],
              key: i * 10 + j,
              render: (value, record, index) => {
                const obj = {
                  children: record.listCount[j],
                };
                return obj;
              },
            });
          }
        }
      }
    }

    this.setState({
      countTypeTitle: countTypeTitle,
      columnsTb: columnsTb,
      ListC: data.Data.ListC,
      ListSafeCheckYearMonth: data.Data.ListSafeCheckYearMonth,
    });
    this.safeChekDanger();
  };

  renderSpeedColumn = () => {
    return { className: "redTableCell" };
  };
  loadData = () => {
    this.state.showLoading = true;
    // var mineType = ''
    // // let mineType = this.props.data.mineType;
    // if (this.props.data.mineType == null || this.props.data.mineType == undefined) {
    //   mineType = this.props.data.mineType;
    // } else {
    //   mineType = this.props.formParam.mineType;
    // }

    let json = initFilter(this.props.login.OrgId);
    this.props.dispatch({
      type: "app/getDataByPost",
      url: "BI/BIHome/GetHomeDetailMonthRisk",
      payload: json,
      onlyData: false,
      onComplete: (data) => {
        if (
          data &&
          data.IsSuccessful &&
          data.Data &&
          (data.Data.ListC || data.Data.ListSafeCheckYearMonth)
        ) {
          var countTypeTitle = [];
          var countTypeDataIndex = [];
          var columnsTb = [];
          if (
            data.Data.ListSafeCheckYearMonth != null &&
            data.Data.ListSafeCheckYearMonth.length > 0
          ) {
            countTypeTitle = data.Data.ListSafeCheckYearMonth[0].listName;
          }

          if (countTypeTitle.length < 1) {
            countTypeTitle.push("按时整改隐患");
            countTypeTitle.push("超期整改隐患");
            countTypeTitle.push("未整改隐患");
            countTypeTitle.push("隐患整改率");
          }

          var typeName = ["车间名称", "班组名称"];
          var RowCount = 0;
          for (let i = 0; i < 2; i++) {
            for (let j = 0; j < countTypeTitle.length; j++) {
              countTypeDataIndex.push(j);
              if (i == 0) {
                if (j == 0) {
                  //头部
                  columnsTb.push({
                    title: typeName[i],
                    dataIndex: "NUM",
                    key: i * 10 + j,
                    render: (value, record, index) => {
                      RowCount = record.Parent.RowCount;
                      if (
                        index > 0 &&
                        this.state.ListSafeCheckYearMonth[index - 1].Parent
                          .DepartmentName == record.Parent.DepartmentName
                      ) {
                        RowCount = 0;
                      }
                      const obj = {
                        children: record.Parent.DepartmentName,
                        props: {
                          rowSpan: RowCount,
                        },
                      };
                      return obj;
                    },
                  });
                }

                //非头部
                if (countTypeTitle[j].indexOf("率") > -1) {
                  columnsTb.push({
                    title: countTypeTitle[j],
                    dataIndex: "NUM",
                    key: i * 10 + j,
                    render: (value, record, index) => {
                      RowCount = record.Parent.RowCount;
                      if (
                        index > 0 &&
                        this.state.ListSafeCheckYearMonth[index - 1].Parent
                          .DepartmentName == record.Parent.DepartmentName
                      ) {
                        RowCount = 0;
                      }
                      const obj = {
                        children: (
                          <Progress
                            percent={record.Parent.listCount[j] / 100}
                            status="active"
                            strokeColor={{ from: "#108ee9", to: "#108ee9" }}
                          />
                        ),
                        props: {
                          rowSpan: RowCount,
                        },
                      };
                      return obj;
                    },
                  });
                } else {
                  columnsTb.push({
                    title: countTypeTitle[j],
                    dataIndex: "NUM",
                    key: i * 10 + j,
                    render: (value, record, index) => {
                      RowCount = record.Parent.RowCount;
                      if (
                        index > 0 &&
                        this.state.ListSafeCheckYearMonth[index - 1].Parent
                          .DepartmentName == record.Parent.DepartmentName
                      ) {
                        RowCount = 0;
                      }
                      const obj = {
                        children: record.Parent.listCount[j],
                        props: {
                          rowSpan: RowCount,
                        },
                      };
                      return obj;
                    },
                  });
                }
              } else {
                //班组
                if (j == 0) {
                  columnsTb.push({
                    title: typeName[i],
                    key: i * 10 + j,
                    render: (value, record, index) => {
                      const obj = {
                        children: record.DepartmentName,
                      };
                      return obj;
                    },
                  });
                }

                if (countTypeTitle[j].indexOf("率") > -1) {
                  columnsTb.push({
                    title: countTypeTitle[j],
                    key: i * 10 + j,
                    render: (text, record) => (
                      <Progress
                        percent={record.listCount[j] / 100}
                        status="active"
                        strokeColor={{ from: "#108ee9", to: "#108ee9" }}
                      />
                    ),
                  });
                } else {
                  columnsTb.push({
                    title: countTypeTitle[j],
                    key: i * 10 + j,
                    render: (value, record, index) => {
                      const obj = {
                        children: record.listCount[j],
                      };
                      return obj;
                    },
                  });
                }
              }
            }
          }

          this.setState({
            countTypeTitle: countTypeTitle,
            columnsTb: columnsTb,
            ListC: data.Data.ListC,
            ListSafeCheckYearMonth: data.Data.ListSafeCheckYearMonth,
          });

          this.safeChekDanger();
        }
      },
    });
    this.state.showLoading = false;
  };

  paginationConfig = {
    pageSizeOptions: ["10", "20", "50"],
    pageSize: 20,
    showSizeChanger: true,
    size: "small",
  };

  // 安全检查和隐患整改
  safeChekDanger = () => {
    let xData = [];
    for (let i = 0; i < 12; i++) {
      xData.unshift(getSixMonth(-i, "-", ""));
    }
    let ydata = [
      ["3", "2", "2", "3", "2", "0", "2", "5", "6", "8", "0", "5"],
      ["5", "4", "0", "1", "0", "0", "1", "7", "1", "0", "0", "2"],
      ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0"],
      [
        "100.00",
        "100.00",
        "100.00",
        "100.00",
        "100.00",
        "100.00",
        "100.00",
        "100.00",
        "100.00",
        "100.00",
        "100.00",
        "100.00",
      ],
    ];
    let sourceName = [
      ["按时整改隐患", "超期整改隐患", "未整改隐患", "隐患整改率"],
    ];
    // if (this.state.ListC) {
    // this.state.ListC.map((item) => {
    //   let name = item.NAME.split(",");
    //   xData.push(name);
    //   sourceName.push(item.SOURCENAME);
    //   let valu = item.Val.split(",");
    //   ydata.push(valu);
    // });
    let safeInspections = document.getElementById("safeInspection2");
    if (safeInspections) {
      let myChart = echarts.init(safeInspections);
      myChart.setOption(
        {
          color: ["#72b85b", "#f6841a", "#cc0404", "#4285F4"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
            transitionDuration: 0,
            formatter: function (params) {
              return (
                params[0].name +
                "</br>" +
                params[0].marker +
                params[0].seriesName +
                " : " +
                params[0].value +
                "</br>" +
                params[1].marker +
                params[1].seriesName +
                " : " +
                params[1].value +
                "</br>" +
                params[2].marker +
                params[2].seriesName +
                " : " +
                params[2].value +
                "</br>" +
                params[3].marker +
                params[3].seriesName +
                " : " +
                params[3].value +
                "%"
              );
            },
          },
          grid: {
            left: "10%",
            // right: "10%",
            bottom: "15%",
            top: "5%",
            containLabel: true,
            z: 22,
          },
          xAxis: {
            type: "category",
            data: xData,
            axisLine: {
              lineStyle: {
                color: "#0c3b71",
              },
            },
            axisLabel: {
              show: true,
              color: "rgb(170,170,170)",
              interval: 0,
              textStyle: {
                lineHeight: 14,
              },
            },
          },
          legend: {
            data: sourceName,
            left: "center",
            align: "left",
            bottom: "2%",
            textStyle: {
              color: "#000",
            },
            itemWidth: 10,
            itemHeight: 10,
            // itemGap: 35,
          },
          yAxis: [
            {
              type: "value",
              position: "left",
              splitLine: {
                show: true,
                lineStyle: {
                  color: ["#f2f2f2"],
                  // opacity:0.2
                  // zlevel: -1,
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#0c3b71",
                },
              },
              axisLabel: {
                color: "rgb(170,170,170)",
                formatter: "{value} ",
              },
            },
            {
              type: "value",
              position: "right",
              splitLine: {
                show: false,
                lineStyle: {
                  color: ["#f2f2f2"],
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#f2f2f2",
                },
              },
              axisLabel: {
                color: "rgb(170,170,170)",
                formatter: "{value} %",
              },
            },
          ],
          series: [
            {
              name: sourceName[0],
              type: "bar",
              data: ydata[0],
              barWidth: "20%",
              barGap: "10%",
              stack: null,
            },
            {
              name: sourceName[1],
              type: "bar",
              data: ydata[1],
              barWidth: "20%",
              barGap: "10%",
              stack: null,
            },
            {
              name: sourceName[2],
              type: "bar",
              data: ydata[2],
              barWidth: "20%",
              barGap: "10%",
              stack: null,
              // zlevel: 99,
            },
            {
              name: sourceName[3],
              type: "line",
              data: ydata[3],
              yAxisIndex: 1,
              // zlevel:100,
            },
          ],
        },
        true
      );
    }
    // }
  };

  render() {
    return (
      <div
        style={{
          backgroundColor: "white",
          width: "1200px",
          top: "0",
          bottom: "0",
          left: "0",
          right: "0",
          margin: "auto",
          borderStyle: "solid",
          borderColor: "#ccc",
          borderWidth: "1px",
        }}
      >
        <Row gutter={10} style={{ marginTop: "44px" }}>
          <Col span={1}> </Col>
          <Col span={22}>
            <div style={{ border: "1px solid rgb(232,232,232)" }}>
              <div
                id="safeInspection2"
                style={{ width: "100%", height: "350px" }}
              ></div>
            </div>
          </Col>
          <Col span={1}></Col>
        </Row>
        <Row gutter={10} style={{ marginTop: "14px" }}>
          <Col span={1}></Col>
          <Col span={22} style={{ height: "100%" }}>
            <div className="bi001-table">
              <Table
                dataSource={this.state.ListSafeCheckYearMonth}
                columns={this.state.columnsTb}
                pagination={false}
                bordered
                loading={this.state.showLoading}
                size="small"
                rowKey="1"
              />
            </div>
          </Col>
          <Col span={1}></Col>
        </Row>
        <br />
      </div>
    );
  }
}
export default connect(({ login, app }) => ({ login, app }))(BI055HomeDetail);