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

import React from 'react'
import { connect } from 'dva'
import { initFilter, extendRule, extendInclude, getIsPC, openNotificationMobile } 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()
  }
  componentWillUnmount() {
    // this.timerID && clearTimeout(this.timerID);
  }

  //加载数据赋值
  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 = () => {
    if (this.state.data.ListSafeCheckYearMonth) {
      let data = this.state.data.ListSafeCheckYearMonth;
      let xData = [];
      let data1 = [];
      let data2 = [];
      let data3 = [];
      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)