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

import React, { useState, useEffect, useRef, Component } from "react";
import { connect } from "dva";
import {
  initFilter,
  addRuleAndGroups,
  guid,
  extendInclude,
  extendRule,
  extendOrder,
  extend,
  initQueryFilter,
} from "../../../utils/common";
import {
  Table,
  Row,
  Col,
  Button,
  Select,
  Progress,
  DatePicker,
  message,
} from "antd";
import echarts from "echarts";
import moment from "moment";
const { Option } = Select;
class BI001HomeDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pagination: {},
      retData: [],
      columns1: [
        //   {
        //     title: '序号',
        //     render: (text, record, index) => `${index + 1}`
        //   },
        {
          title: "车间",
          dataIndex: "shopName",
          render: (value, record, index) => {
            const obj = {
              children: value,
              props: {},
            };
            let arr = this.state.retData.filter((res) => {
              return res.shopName == record.shopName;
            });
            if (
              index == 0 ||
              this.state.retData[index - 1].shopName != record.shopName
            ) {
              obj.props.rowSpan = arr.length;
            } else {
              obj.props.rowSpan = 0;
            }
            return obj;
          },
        },
        {
          title: "总任务数",
          dataIndex: "shopTotalCount",
          render: (value, record, index) => {
            const obj = {
              children: value,
              props: {},
            };
            let arr = this.state.retData.filter((res) => {
              return res.shopName == record.shopName;
            });
            if (
              index == 0 ||
              this.state.retData[index - 1].shopName != record.shopName
            ) {
              obj.props.rowSpan = arr.length;
            } else {
              obj.props.rowSpan = 0;
            }
            return obj;
          },
        },
        {
          title: "正常已办",
          dataIndex: "shopDoneCount",
          render: (value, record, index) => {
            const obj = {
              children: value,
              props: {},
            };
            let arr = this.state.retData.filter((res) => {
              return res.shopName == record.shopName;
            });
            if (
              index == 0 ||
              this.state.retData[index - 1].shopName != record.shopName
            ) {
              obj.props.rowSpan = arr.length;
            } else {
              obj.props.rowSpan = 0;
            }
            return obj;
          },
        },
        {
          title: "完成率",
          dataIndex: "shopDoneRate",
          render: (value, record, index) => {
            const obj = {
              children: value + "%",
              props: {},
            };
            let arr = this.state.retData.filter((res) => {
              return res.shopName == record.shopName;
            });
            if (
              index == 0 ||
              this.state.retData[index - 1].shopName != record.shopName
            ) {
              obj.props.rowSpan = arr.length;
            } else {
              obj.props.rowSpan = 0;
            }
            return obj;
          },
        },
        {
          title: "及时完成率",
          dataIndex: "shopOverDoneRate",
          render: (value, record, index) => {
            const obj = {
              children: value + "%",
              props: {},
            };
            let arr = this.state.retData.filter((res) => {
              return res.shopName == record.shopName;
            });
            if (
              index == 0 ||
              this.state.retData[index - 1].shopName != record.shopName
            ) {
              obj.props.rowSpan = arr.length;
            } else {
              obj.props.rowSpan = 0;
            }
            return obj;
          },
        },
        {
          title: "班组",
          dataIndex: "teamName",
         onCell:()=>this.renderSpeedColumn()
        },
        {
          title: "总任务数",
          dataIndex: "teamTotalCount",
        },
        {
          title: "正常已办",
          dataIndex: "teamDoneCount",
        },
        {
          title: "未完成数",
          dataIndex: "teamUndoneCount",
        },
        {
          width: "120px",
          title: "完成率",
          dataIndex: "teamDoneRate",
          render: (text, record) => (
            <Progress
              percent={record.teamDoneRate}
              status="active"
              strokeColor={{ from: "#108ee9", to: "#108ee9" }}
            />
            // <span>
            //   <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
            // </span>
          ),
        },
        {
          width: "120px",
          title: "及时完成率",
          dataIndex: "teamOverDoneRate",
          render: (text, record) => (
            <Progress
              percent={record.teamOverDoneRate}
              status="active"
              strokeColor={{
                from: "rgba(82, 196, 26)",
                to: "rgba(82, 196, 26)",
              }}
            />
            // <span>
            //   <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
            // </span>
          ),
        },
      ],
      showLoading: false,
    };
  }

  componentDidMount() {
    this.loadData();
  }
  renderSpeedColumn = ()=>{
    return { className: 'redTableCell'} 
  }
  loadData = () => {
    this.state.showLoading = true;
    let param = this.props?.login?.currActivatedMenu?.MENU_FORM_PARAMS;
    this.chart1();
  };
  //矿山
  chart1 = () => {
    let json = initFilter(this.props.login.OrgId);
    // extendRule(json, 'DEPARTMENT_NAME', 1, "矿山部");
    // extendOrder(json, "MONTH", 0);
    this.props.dispatch({
      type: "app/getDataByPost",
      url: "BI/BIStatiscialAnalysisController/GetClassCompletionSort",
      payload: json,
      onlyData: false,
      onComplete: (data) => {
        if (data && data.IsSuccessful && data.Data && data.Data.rateData) {
          let month = [];
          let company = [];
          let department = [];
          data.Data.rateData.forEach((item) => {
            month.push(item.MONTHStr);
            company.push(item.FINISH_RATE);
            department.push(item.NORMAL_FINISH_RATE);
          });
          let myChart = echarts.init(document.getElementById("chartClass"));
          myChart.setOption({
            tooltip: {
              trigger: "axis",
              formatter: function (params) {
                let temp=''
                params.forEach(t=>{
                    temp=temp+t.marker + t.seriesName +":"+t.value+"%"+'<br />';
                   
                })
                return temp;
              }
            },
            title: {
              text: "班组活动任务完成走势图",
              left: "center",
              top: "5%",
            },
            // label: {
            //   show: true,
            //   position: 'top'
            // },
            legend: {
              // data: ['部门'],
              data: ["完成率", "及时完成率"],
              bottom: "10px",
            },
            grid: {
              left: "3%",
              right: "4%",
              top: "15%",
              containLabel: true,
            },
            toolbox: {
              feature: {
                // saveAsImage: {}
              },
            },
            xAxis: {
              type: "category",
              data: month,
              axisLabel: {
                showMaxLabel: true,
              },
            },
            yAxis: {
              type: "value",
              axisLabel: {
                formatter: function (val) {
                  return val + "%";
                },
              },
            },
            series: [
              {
                name: "完成率",
                type: "line",
                color: "#4b9bf3",
                data: company,
                smooth: true,
                // symbol:'none', 
              },
              {
                name: "及时完成率",
                type: "line",
                color: "#FCD149",
                data: department,
                areaStyle: {},
                areaStyle: {
                  color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                          offset: 0, color: "#FCD149" // 0% 处的颜色
                      }, {
                          offset: 1, color: '#fff' // 100% 处的颜色
                      }],
                      global: false
                  }
              },
                smooth: true,
                symbol:'circle', 
              },
            ],
          });
          this.setState({
            retData: data.Data.retData,
          });
        }
      },
    });
    this.state.showLoading = false;
  };
  onChange = (type, value) => {
    this.setState({
      [type]: value,
    });
  };
  paginationConfig = {
    pageSizeOptions: ["10", "20", "50"],
    pageSize: 20,
    showSizeChanger: true,
    size: "small",
  };
  render() {
    return (
      <div
        style={{
          backgroundColor: "white",
          width: "1200px",
          top: "0",
          bottom: "0",
          left: "0",
          right: "0",
          margin: "auto",
          borderStyle: "solid",
          borderColor: "#ccc",
          borderWidth: "1px",
        }}
      >
        {/* <h1 style={{ textAlign: "center", marginTop: '30px', fontWeight: 'bold' }}>{this.props.data.mineType == 20?"尾矿库":this.props.data.mineType == 10?"选矿厂":"露天矿"}班组活动任务完成详情（近12月）</h1> */}
        <Row gutter={10} style={{ marginTop: "44px" }}>
          <Col span={1}> </Col>
          <Col span={22}>
            <div
              // className="dashboard-div-style"
              style={{
                border: "1px solid rgb(232,232,232)" 
              }}
            >
              <div id="chartClass" style={{ width: "100%", height: "350px" }}></div>
            </div>
          </Col>
          <Col span={1}></Col>
        </Row>
        {/* <hr style={{ border: '1px dashed #ccc', marginBottom: "20px", marginTop: "20px" }}></hr> */}
        <Row gutter={10} style={{ marginTop: "14px" }}>
          <Col span={1}></Col>
          <Col span={22} style={{ height: "100%" }}>
            <div
              className="bi001-table"
              style={{
                //  border: "1px solid rgb(232,232,232)" 
                 }}
            >
              <Table
                dataSource={this.state.retData}
                columns={this.state.columns1}
                pagination={false} //this.paginationConfig
                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 }))(BI001HomeDetail);