mh-sms-web/src/components/CustomPages/BI/BI055HomeDetail.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 { 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.loadData()
    //定时器功能，暂时不开启
    // this.timerID = setInterval(() => this.getBaseInfoData(1, this.state.tableKey, 5), 120000);
  };

  componentDidMount() {
    this.loadData();
  }

  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 = [];
    let ydata = [];
    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[0],
              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)