mh-sms-web/src/components/CustomPages/BI/BI054HomeDetail.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 { notification, Button, Descriptions, Table, Row, Col } from "antd";
import echarts from "echarts";
import styles from "../HI/StepForm.css";

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

// 安全检查次数统计明细（首页）
class BI054HomeDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        listName: [],
        ListSafeCheckYearMonth: [],
        ListSafeCheckCountDepartment: [],
        countTypeTitle: [],
        columnsTb: [],
        showLoading: false,
      },
      // listSafeCheckTypeYear: [],
      // listCheckTypeYear: [],
    };
  }

  componenthidMount() {
    if (!getIsPC()) {
      openNotificationMobile("bottomRight", notification);
      this.state.displayStr = "none";
      this.state.displayNum = 24;
      //alert('手机');
    } else {
      this.state.displayStr = "";
      this.state.displayNum = 16;
      //alert('PC');
    }
    this.loadData();
    //定时器功能，暂时不开启
    // this.timerID = setInterval(() => this.getBaseInfoData(1, this.state.tableKey, 5), 120000);
  }
  componentDidMount() {
    // this.loadData()
    this.hiddenDangerTotal();
    this.loadReal();
  }
  componentWillUnmount() {
    // this.timerID && clearTimeout(this.timerID);
  }
  loadReal = () => {
    let result = {
      ListSafeCheckCountDepartment: [
        {
          DepartmentName: "穿孔班组",
          DepartmentType: 2,
          NUM: 1,
          Parent: {
            DepartmentName: "穿爆车间",
            RowCount: 2,
            listCount: [51, 751, 0, 0, 0],
          },
          Percent: 0,
          RowCount: 1,
          listCount: [0, 350, 0, 0, 0],
          listName: [
            "巡回检查",
            "例行检查",
            "专业检查",
            "综合检查",
            "综合检查",
          ],
        },
        {
          DepartmentName: "爆破班组",
          DepartmentType: 2,
          NUM: 2,
          Parent: {
            DepartmentName: "穿爆车间",
            RowCount: 2,
            listCount: [51, 751, 0, 0, 0],
          },
          Percent: 0,
          RowCount: 1,
          listCount: [0, 350, 0, 0, 0],
          listName: [
            "巡回检查",
            "例行检查",
            "专业检查",
            "综合检查",
            "综合检查",
          ],
        },
        {
          DepartmentName: "生产班",
          DepartmentType: 2,
          Department_ID: "97ee9944-74e6-6c99-d4c3-9e48f29beb98",
          NUM: 3,
          PARENT_ID: "72e83a49-5319-0784-d1ed-025d309b87eb",
          Parent: {
            DepartmentName: "生产技术科",
            RowCount: 1,
            listCount: [51, 522, 0, 0, 0],
          },
          Percent: 0,
          RowCount: 1,
          listCount:  [0, 349, 0, 0, 0],
          listName: [
            "巡回检查",
            "例行检查",
            "专业检查",
            "综合检查",
            "综合检查",
          ],
        },
        {
          DepartmentName: "综合班组",
          DepartmentType: 2,
          NUM: 4,
          Parent: {
            DepartmentName: "综合组",
            RowCount: 1,
            listCount: [0, 349, 0, 0, 0],
          },
          Percent: 0,
          RowCount: 1,
          listCount:  [0, 349, 0, 0, 0],
          listName: [
            "巡回检查",
            "例行检查",
            "专业检查",
            "综合检查",
            "综合检查",
          ],
        },
        {
          DepartmentName: "采制样班",
          DepartmentType: 2,
          NUM: 5,
          Parent: {
            DepartmentName: "试验化验室",
            RowCount: 2,
            listCount: [0, 0, 0, 0, 0],
          },
          Percent: 0,
          RowCount: 1,
          listCount: [0, 0, 0, 0, 0],
          listName: [
            "巡回检查",
            "例行检查",
            "专业检查",
            "综合检查",
            "综合检查",
          ],
        },
        {
          DepartmentName: "化验班",
          DepartmentType: 2,
          Department_ID: "97ee9944-74e6-6c99-d4c3-9e48f29beb98",
          NUM: 6,
          PARENT_ID: "72e83a49-5319-0784-d1ed-025d309b87eb",
          Parent: {
            DepartmentName: "试验化验室",
            RowCount: 2,
            listCount: [0, 0, 0, 0, 0],
          },
          Percent: 0,
          RowCount: 1,
          listCount:[0, 0, 0, 0, 0],
          listName: [
            "巡回检查",
            "例行检查",
            "专业检查",
            "综合检查",
            "综合检查",
          ],
        },
        {
          DepartmentName: "维修班组",
          DepartmentType: 2,
          Department_ID: "97ee9944-74e6-6c99-d4c3-9e48f29beb98",
          NUM: 7,
          PARENT_ID: "72e83a49-5319-0784-d1ed-025d309b87eb",
          Parent: {
            DepartmentName: "金宇宁化分公司",
            RowCount: 4,
            listCount: [51, 1452, 0, 0, 0],
          },
          Percent: 0,
          RowCount: 1,
          listCount: [0, 351, 0, 0, 0],
          listName: [
            "巡回检查",
            "例行检查",
            "专业检查",
            "综合检查",
            "综合检查",
          ],
        },
        {
          DepartmentName: "金宇现场",
          DepartmentType: 2,
          Department_ID: "97ee9944-74e6-6c99-d4c3-9e48f29beb98",
          NUM: 8,
          PARENT_ID: "72e83a49-5319-0784-d1ed-025d309b87eb",
          Parent: {
            DepartmentName: "金宇宁化分公司",
            RowCount: 4,
            listCount: [51, 1452, 0, 0, 0],
          },
          Percent: 0,
          RowCount: 1,
          listCount: [0, 350, 0, 0, 0],
          listName: [
            "巡回检查",
            "例行检查",
            "专业检查",
            "综合检查",
            "综合检查",
          ],
        },
        {
          DepartmentName: "运输二班",
          DepartmentType: 2,
          Department_ID: "97ee9944-74e6-6c99-d4c3-9e48f29beb98",
          NUM: 9,
          PARENT_ID: "72e83a49-5319-0784-d1ed-025d309b87eb",
          Parent: {
            DepartmentName: "金宇宁化分公司",
            RowCount: 4,
            listCount: [51, 1452, 0, 0, 0],
          },
          Percent: 0,
          RowCount: 1,
          listCount: [0, 350, 0, 0, 0],
          listName: [
            "巡回检查",
            "例行检查",
            "专业检查",
            "综合检查",
            "综合检查",
          ],
        },
        {
          DepartmentName: "运输一班",
          DepartmentType: 2,
          Department_ID: "97ee9944-74e6-6c99-d4c3-9e48f29beb98",
          NUM: 10,
          PARENT_ID: "72e83a49-5319-0784-d1ed-025d309b87eb",
          Parent: {
            DepartmentName: "金宇宁化分公司",
            RowCount: 4,
            listCount: [51, 1452, 0, 0, 0],
          },
          Percent: 0,
          RowCount: 1,
          listCount: [0, 350, 0, 0, 0],
          listName: [
            "巡回检查",
            "例行检查",
            "专业检查",
            "综合检查",
            "综合检查",
          ],
        },
        {
          DepartmentName: "民爆储存库班组",
          DepartmentType: 2,
          Department_ID: "97ee9944-74e6-6c99-d4c3-9e48f29beb98",
          NUM: 11,
          PARENT_ID: "72e83a49-5319-0784-d1ed-025d309b87eb",
          Parent: {
            DepartmentName: "安环科",
            RowCount: 1,
            listCount: [52, 400, 2, 1, 1],
          },
          Percent: 0,
          RowCount: 1,
          listCount: [0, 349, 0, 0, 0],
          listName: [
            "巡回检查",
            "例行检查",
            "专业检查",
            "综合检查",
            "综合检查",
          ],
        },
        
      ],
      ListSafeCheckYearMonth: [],
    };
    if (
      result.ListSafeCheckCountDepartment != null &&
      result.ListSafeCheckCountDepartment.length > 0
    ) {
      // listName.push('车间名称')
      // result.ListSafeCheckCountDepartment[0].listName.forEach((e, i) => {
      //   listName.push(e)
      // })

      // listName.push('班组名称')
      // result.ListSafeCheckCountDepartment[0].listChild[0].listName.forEach(e => {
      //   listName.push(e)
      // })

      var countTypeTitle = [];
      var columnsTb = [];
      if (
        result.ListSafeCheckCountDepartment != null &&
        result.ListSafeCheckCountDepartment.length > 0
      ) {
        countTypeTitle = result.ListSafeCheckCountDepartment[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++) {
          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 &&
                    result.ListSafeCheckCountDepartment[index - 1].Parent
                      .DepartmentName == record.Parent.DepartmentName
                  ) {
                    RowCount = 0;
                  }
                  const obj = {
                    children: record.Parent.DepartmentName,
                    props: {
                      rowSpan: RowCount,
                    },
                  };
                  return obj;
                },
              });
            }

            //非头部

            columnsTb.push({
              title: countTypeTitle[j],
              dataIndex: "NUM",
              key: i * 10 + j,
              render: (value, record, index) => {
                RowCount = record.Parent.RowCount;
                if (
                  index > 0 &&
                  result.ListSafeCheckCountDepartment[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;
                },
              });
            }

            columnsTb.push({
              title: countTypeTitle[j],
              key: i * 10 + j,
              render: (value, record, index) => {
                const obj = {
                  children: record.listCount[j],
                };
                return obj;
              },
            });
          }
        }
      }

      this.setState({
        data: {
          countTypeTitle: countTypeTitle,
          columnsTb: columnsTb,
          // listName: listName,
          ListSafeCheckYearMonth: result.ListSafeCheckYearMonth,
          ListSafeCheckCountDepartment: result.ListSafeCheckCountDepartment, //车间 子集是 班组
        },
      });
    }
  };

  //加载数据赋值
  loadData = () => {
    this.state.showLoading = true;
    // let json = initFilter(this.props.login.OrgId, this.props.data.mineType, "NUM");
    let json = initFilter(this.props.login.OrgId, "", "NUM");

    this.props.dispatch({
      type: "app/getDataByPost",
      payload: json,
      url: "BI/BIHome/GetHomeDetailMonthCheckType",
      onComplete: (result) => {
        if (result) {
          // let listName = []
          if (
            result.ListSafeCheckCountDepartment != null &&
            result.ListSafeCheckCountDepartment.length > 0
          ) {
            // listName.push('车间名称')
            // result.ListSafeCheckCountDepartment[0].listName.forEach((e, i) => {
            //   listName.push(e)
            // })

            // listName.push('班组名称')
            // result.ListSafeCheckCountDepartment[0].listChild[0].listName.forEach(e => {
            //   listName.push(e)
            // })

            var countTypeTitle = [];
            var columnsTb = [];
            if (
              result.ListSafeCheckCountDepartment != null &&
              result.ListSafeCheckCountDepartment.length > 0
            ) {
              countTypeTitle = result.ListSafeCheckCountDepartment[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++) {
                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 &&
                          result.ListSafeCheckCountDepartment[index - 1].Parent
                            .DepartmentName == record.Parent.DepartmentName
                        ) {
                          RowCount = 0;
                        }
                        const obj = {
                          children: record.Parent.DepartmentName,
                          props: {
                            rowSpan: RowCount,
                          },
                        };
                        return obj;
                      },
                    });
                  }

                  //非头部

                  columnsTb.push({
                    title: countTypeTitle[j],
                    dataIndex: "NUM",
                    key: i * 10 + j,
                    render: (value, record, index) => {
                      RowCount = record.Parent.RowCount;
                      if (
                        index > 0 &&
                        result.ListSafeCheckCountDepartment[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;
                      },
                    });
                  }

                  columnsTb.push({
                    title: countTypeTitle[j],
                    key: i * 10 + j,
                    render: (value, record, index) => {
                      const obj = {
                        children: record.listCount[j],
                      };
                      return obj;
                    },
                  });
                }
              }
            }

            this.setState({
              data: {
                countTypeTitle: countTypeTitle,
                columnsTb: columnsTb,
                // listName: listName,
                ListSafeCheckYearMonth: result.ListSafeCheckYearMonth,
                ListSafeCheckCountDepartment:
                  result.ListSafeCheckCountDepartment, //车间 子集是 班组
              },
            });
            this.hiddenDangerTotal();
          }
        }
      },
    });

    this.state.showLoading = false;
  };

  hiddenDangerTotal = () => {
    
      let xData = [];
      let data3 = [
        [17, 20, 16, 20, 16, 16, 20, 16, 16, 20, 16, 12],
        [317, 330, 316, 330, 292, 286, 299, 286, 295, 299, 223, 201],
        [0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      ];
      for (let i = 0; i < 12; i++) {
        xData.unshift(getSixMonth(-i, "-", ""));
      }
      let seriesName = [
        "巡回检查",
        "例行检查",
        "专业检查",
        "综合检查",
        "综合检查",
      ];
      // data.map((item) => {
      //   if (item.MONTH>9){
      //     xData.push(item.YEAR+'-'+ item.MONTH);
      //   }else{
      //     xData.push(item.YEAR+'-0'+ item.MONTH);
      //   }
      //   seriesName = item.listSOURCENAME;
      //   data1.push(item.listListCount);
      // });

      // for (var i = 0; i < data[0].listListCount.length; i++) {
      //   for (var j = 0; j < data.length; j++) {
      //     data2.push(data1[j][i]);
      //   }
      // }

      // for (var i = 0; i < data2.length; i += data.length) {
      //   data3.push(data2.slice(i, i + data.length));
      // }
      let series = [];
      for (let i = 0; i < data3.length; i++) {
        series.push({
          name: seriesName[i],
          type: "bar",
          stack: "总量",
          data: data3[i],
          barWidth: "40%",
        });
      }

      //图标2
      let dangerTotals = document.getElementById("dangerTotal2");

      if (dangerTotals) {
        let myChart = echarts.init(dangerTotals);
        myChart.setOption({
          color: ["#4285F4", "#72b85b", "#c92a2a", "#ffa94d"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
            transitionDuration: 0,
          },
          grid: {
            left: "5%",
            right: "5%",
            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: seriesName,
            left: "center",
            align: "left",
            bottom: "2%",
            textStyle: {
              color: "#000",
            },
            itemWidth: 10,
            itemHeight: 10,
            // itemGap: 15,
          },
          yAxis: {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#f2f2f2"],
              },
            },
            axisLine: {
              lineStyle: {
                color: "#0c3b71",
              },
            },
            axisLabel: {
              color: "rgb(170,170,170)",
              formatter: "{value} ",
            },
          },
          series: series,
        });
      }
    
  };

  render() {
    const { data } = this.state;
    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="dangerTotal2"
                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.data.ListSafeCheckCountDepartment}
                columns={this.state.data.columnsTb}
                pagination={false}
                bordered
                loading={this.state.data.showLoading}
                size="small"
                rowKey="1"
              />
            </div>

            {/* <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}   >
            <table className={styles.tableRow} style={{ width: '100%', marginLeft: '0px' }}>
              <tbody>
                {
                  data.listName ? (
                    <tr>
                      {
                        data.listName.map(e => {
                          return <th>{e}</th>
                        })
                      }
                    </tr>)
                    : (<tr> <th>车间名称</th><th>巡回检查</th><th>例行检查</th> <th>专业检查</th><th>综合检查</th><th>班组名称</th><th>巡回检查</th><th>例行检查</th><th>专业检查</th><th>综合检查</th></tr>)
                }

                {
                  data.ListSafeCheckCountDepartment ?
                    data.ListSafeCheckCountDepartment.map((e) => {
                      return e.listChild?.map((c, i) => {
                        if (i == 0) {
                          return (
                            <tr>
                              <td rowspan={e.RowCount} >{e.DepartmentName}</td>
                              {
                                e.listCount?.map(c => {
                                  return <td rowspan={e.RowCount}>{c}</td>
                                })
                              }
                              <td>{c.DepartmentName}</td>
                              {
                                c.listCount?.map(k => {
                                  return <td>{k}</td>
                                })
                              }
                            </tr>
                          )
                        }
                        else {
                          return (
                            <tr>
                              <td>{c.DepartmentName}</td>
                              {
                                c.listCount?.map(k => {
                                  return <td>{k}</td>
                                })
                              }
                            </tr>
                          )
                        }
                      })
                    }) : (
                      <tr>
                        <td colSpan={10}>暂无数据</td>
                      </tr>
                    )
                }
              </tbody>
            </table>
          </div> */}
          </Col>
          <Col span={1}></Col>
        </Row>
        <br />
      </div>
    );
  }
}
export default connect(({ login, app }) => ({ login, app }))(BI054HomeDetail);