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,
  getSixMonth
} 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: [
        {
          shopDoneCount: 1541,
          shopDoneRate: 99.94,
          shopId: "b53266f6-2ba9-9b30-e96f-f9893a48376d",
          shopName: "安环科",
          shopOntimeCount: 1437,
          shopOverDoneRate: 93.19,
          shopTotalCount: 1542,
          teamDoneCount: 1541,
          teamDoneRate: 99.94,
          teamId: "45aba808-c12c-b785-fa09-f9acd9922785",
          teamName: "民爆储存库班组",
          teamOntimeCount: 1437,
          teamOverDoneRate: 93.19,
          teamTotalCount: 1542,
          teamUndoneCount: 1,
        },
        {
          shopDoneCount: 2792,
          shopDoneRate: 99.29,
          shopId: "72e83a49-5319-0784-d1ed-025d309b87eb",
          shopName: "穿爆车间",
          shopOntimeCount: 2080,
          shopOverDoneRate: 73.97,
          shopTotalCount: 2812,
          teamDoneCount: 1466,
          teamDoneRate: 99.93,
          teamId: "c671778d-dd76-080f-51d1-5dc5ca698419",
          teamName: "爆破班组",
          teamOntimeCount: 1286,
          teamOverDoneRate: 87.66,
          teamTotalCount: 1467,
          teamUndoneCount: 1,
        },
        {
          shopDoneCount: 2792,
          shopDoneRate: 99.29,
          shopId: "72e83a49-5319-0784-d1ed-025d309b87eb",
          shopName: "穿爆车间",
          shopOntimeCount: 2080,
          shopOverDoneRate: 73.97,
          shopTotalCount: 2812,
          teamDoneCount: 1326,
          teamDoneRate: 98.59,
          teamId: "821a4fe3-5513-681e-ed3c-e61836b29638",
          teamName: "穿孔班组",
          teamOntimeCount: 794,
          teamOverDoneRate: 59.03,
          teamTotalCount: 1345,
          teamUndoneCount: 19,
        },
        {
          shopDoneCount: 15056,
          shopDoneRate: 99.87,
          shopId: "30ce4b63-9971-c8d3-a2b4-ca4f51cf0fab",
          shopName: "金宇宁化分公司",
          shopOntimeCount: 9755,
          shopOverDoneRate: 64.71,
          shopTotalCount: 15075,
          teamDoneCount: 1768,
          teamDoneRate: 100,
          teamId: "bcdca284-6373-6862-083e-645030a2315d",
          teamName: "维修班组",
          teamOntimeCount: 1254,
          teamOverDoneRate: 70.93,
          teamTotalCount: 1768,
          teamUndoneCount: 0,
        },
        {
          shopDoneCount: 15056,
          shopDoneRate: 99.87,
          shopId: "30ce4b63-9971-c8d3-a2b4-ca4f51cf0fab",
          shopName: "金宇宁化分公司",
          shopOntimeCount: 9755,
          shopOverDoneRate: 64.71,
          shopTotalCount: 15075,
          teamDoneCount: 4927,
          teamDoneRate: 99.78,
          teamId: "0270fa34-4849-4429-35e8-5fb8b98c9fc9",
          teamName: "金宇现场",
          teamOntimeCount: 3482,
          teamOverDoneRate: 70.51,
          teamTotalCount: 4938,
          teamUndoneCount: 11,
        },
        {
          shopDoneCount: 15056,
          shopDoneRate: 99.87,
          shopId: "30ce4b63-9971-c8d3-a2b4-ca4f51cf0fab",
          shopName: "金宇宁化分公司",
          shopOntimeCount: 9755,
          shopOverDoneRate: 64.71,
          shopTotalCount: 15075,
          teamDoneCount: 2903,
          teamDoneRate: 99.93,
          teamId: "8ba1fb97-540b-d451-881a-39f632700975",
          teamName: "运输二班",
          teamOntimeCount: 1854,
          teamOverDoneRate: 63.82,
          teamTotalCount: 2905,
          teamUndoneCount: 2,
        },
        {
          shopDoneCount: 15056,
          shopDoneRate: 99.87,
          shopId: "30ce4b63-9971-c8d3-a2b4-ca4f51cf0fab",
          shopName: "金宇宁化分公司",
          shopOntimeCount: 9755,
          shopOverDoneRate: 64.71,
          shopTotalCount: 15075,
          teamDoneCount: 5458,
          teamDoneRate: 99.89,
          teamId: "db1ccb4a-0ffa-63c9-9384-c3d9139e8c8f",
          teamName: "运输一班",
          teamOntimeCount: 3165,
          teamOverDoneRate: 57.92,
          teamTotalCount: 5464,
          teamUndoneCount: 6,
        },
        {
          shopDoneCount: 2066,
          shopDoneRate: 100,
          shopId: "4adbdf10-3cce-ac8a-4abf-104bc12f882a",
          shopName: "生产技术科",
          shopOntimeCount: 1969,
          shopOverDoneRate: 95.3,
          shopTotalCount: 2066,
          teamDoneCount: 2066,
          teamDoneRate: 100,
          teamId: "91f40319-fd33-6b72-dfb5-b51b21abac54",
          teamName: "生产班",
          teamOntimeCount: 1969,
          teamOverDoneRate: 95.3,
          teamTotalCount: 2066,
          teamUndoneCount: 0,
        },
        {
          shopDoneCount: 2253,
          shopDoneRate: 99.96,
          shopId: "a144c298-17ef-e105-5cb7-34991ca7b3c2",
          shopName: "综合组",
          shopOntimeCount: 1488,
          shopOverDoneRate: 66.02,
          shopTotalCount: 2254,
          teamDoneCount: 2253,
          teamDoneRate: 99.96,
          teamId: "9e171704-f1af-9de4-0287-476216371c16",
          teamName: "综合班组",
          teamOntimeCount: 1488,
          teamOverDoneRate: 66.02,
          teamTotalCount: 2254,
          teamUndoneCount: 1,
        },
      ],
      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.chartReal();
  };
  chartReal = () => {
    let month = [];
    let company = [
      100, 100, 100, 99.69, 99.86, 100, 99.94, 100, 100, 99.57, 99.56, 99.17,
    ];
    let department = [
      68.79, 58.8, 56.28, 69.59, 69.03, 71.58, 71.08, 75.05, 76.26, 77.09,
      77.84, 80.51,
    ];
    for (let i = 0; i < 12; i++) {
      month.unshift(getSixMonth(-i, "-", ""));
    }
    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",
        },
      ],
    });
  };
  //矿山
  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);