mh-sms-web/src/components/CustomPages/BI/BI011TrainSafeAnalysis.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, DatePicker, message } from "antd";
import echarts from "echarts";
import moment from "moment";
const { Option } = Select;
class TrainSafeAnalysis extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pagination: {},
      retData: [],
      totalUsers: 0,
      totalActiveUsers: 0,
      selectUser: "",
      selectDepartment: "",
      dates: [],
      recordNums: [],
      todayCount: 0,
      NUM1: 0,
      NUM2: 0,
      NUM3: 0,
      NUM4: 0,
      NUM5: 0,
      NUM6: 0,
      NUM7: 0,
      searchMonth: moment().format("YYYY-MM"),
      showLoading: false,
    };
  }

  componentDidMount() {
    this.state.columns1 = [
      {
        title: "序号",
        render: (text, record, index) => `${index + 1}`,
      },
      {
        title: "课程名称",
        dataIndex: "NAME",
      },
      {
        width: "270px",
        title: "培训起止时间",
        dataIndex: "TIMERANGE",
      },
      {
        title: "应参训人数",
        dataIndex: "SHOULD_TRAINER",
      },
      {
        title: "实际参训人数",
        dataIndex: "ACTUAL_TRAINER",
      },
      {
        title: "参训率",
        render: (text, record) => (
          <span>
            {((record.ACTUAL_TRAINER / record.SHOULD_TRAINER) * 100).toFixed(
              0
            ) + "%"}
          </span>
        ),
      },
      {
        title: "考核方式",
        dataIndex: "METHOD",
      },
      {
        title: "通过率",
        dataIndex: "PASS_RATE",
        render: (text, record) => (
          <span>{(record.PASS_RATE * 100).toFixed(0) + "%"}</span>
        ),
      },
      {
        title: "效果评估(优良率)",
        dataIndex: "EFFORT_RATE",
        render: (text, record) => (
          <span>{(record.EFFORT_RATE * 1).toFixed(0) + "%"}</span>
        ),
      },
    ];
    this.loadData(this.state.searchMonth);
  }
  loadData = (startTime) => {
    // const json = initFilter(this.props.login.OrgId);
    // this.state.showLoading = true;
    // json.Parameter1 = startTime;
    // this.props.dispatch({
    //   type: "app/getDataByPost",
    //   url: "BI/BIController/getSafeTrainData",
    //   payload: json,
    //   onlyData: false,
    //   onComplete: (ret) => {
    //     if (ret) {
    let ret = {
      IsSuccessful: true,
      Data: {
        NUM1: 1,
        NUM2: 94,
        NUM3: 42,
        NUM4: 13,
        NUM5: 14,
        NUM6: 15,
        NUM7: 539,
        trainRecords: [],
        dateCountModel: [
          {
            DATE: "2024-01-01 00:00:00",
            COUNT: 44,
            TYPE: 0,
          },
          {
            DATE: "2024-02-01 00:00:00",
            COUNT: 50,
            TYPE: 0,
          },
          {
            DATE: "2024-03-01 00:00:00",
            COUNT: 0,
            TYPE: 0,
          },
          {
            DATE: "2024-04-01 00:00:00",
            COUNT: 0,
            TYPE: 0,
          },
        ],
      },
      TotalCount: 0,
      MessageType: 0,
    };
    this.setState(
      {
        showLoading: false,
        NUM1: ret.Data.NUM1,
        NUM2: ret.Data.NUM2,
        NUM3: ret.Data.NUM3,
        NUM4: ret.Data.NUM4,
        NUM5: ret.Data.NUM5,
        NUM6: ret.Data.NUM6,
        NUM7: ret.Data.NUM7,
        retData: ret.Data.trainRecords,
      }
    );
    // this.state.showLoading = false;
    // this.state.NUM1 = ret.Data.NUM1;
    // this.state.NUM2 = ret.Data.NUM2;
    // this.state.NUM3 = ret.Data.NUM3;
    // this.state.NUM4 = ret.Data.NUM4;
    // this.state.NUM5 = ret.Data.NUM5;
    // this.state.NUM6 = ret.Data.NUM6;
    // this.state.NUM7 = ret.Data.NUM7;
    // this.state.retData = ret.Data.trainRecords;
    this.chart1(ret.Data.dateCountModel);
    //     }
    //   },
    // });
  };
  chart1 = (ret) => {
    this.state.recordNums = [];
    this.state.dates = [];
    let color = [
      "#0090FF",
      "#36CE9E",
      "#FFC005",
      "#FF515A",
      "#8B5CFF",
      "#00CA69",
    ];
    const hexToRgba = (hex, opacity) => {
      let rgbaColor = "";
      let reg = /^#[\da-f]{6}$/i;
      if (reg.test(hex)) {
        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
          "0x" + hex.slice(3, 5)
        )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
      }
      return rgbaColor;
    };
    for (let i = 0; i < ret.length; i++) {
      this.state.recordNums.push(ret[i].COUNT);
      this.state.dates.push(moment(ret[i].DATE).format("YYYY-MM"));
    }
    let chart1s = document.getElementById("chart1");
    if (chart1s) {
      let myChart = echarts.init(chart1s);
      myChart.on("click", (params) => {
        this.loadData(params.name);
      });
      myChart.setOption({
        color: color,
        grid: {
          left: "5%",
          right: "5%",
        },
        legend: {
          bottom: "0px",
        },
        title: {
          text: "月度培训完成走势图",
          left: "center",
          top: "2%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "category",
          data: this.state.dates,
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: "#333",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#D9D9D9",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#666",
            },
          },
          nameTextStyle: {
            color: "#666",
            fontSize: 12,
            lineHeight: 40,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#E9E9E9",
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "培训记录数",
            data: this.state.recordNums,
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[0],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[0], 0.5),
                shadowOffsetY: 8,
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: hexToRgba(color[0], 0.3),
                    },
                    {
                      offset: 1,
                      color: hexToRgba(color[0], 0.1),
                    },
                  ],
                  false
                ),
                shadowColor: hexToRgba(color[0], 0.1),
                shadowBlur: 10,
              },
            },
          },
        ],
      });
    }
  };
  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" }}
        >
          安全教育与培训统计分析
        </h1>
        <Row gutter={10} style={{ marginTop: "14px" }}>
          <Col span={1}> </Col>
          <Col span={22}>
            {/* <Button style={{ width: "150px", height: "60px", borderRadius: '8px', border: '1px RGB(24, 149, 255) solid', margin: "10px" , boxShadow:"6px 0 10px rgba(0, 0, 0, 0.5)" }}>年度培训计划完成率<br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: '#843C0C' }}>{this.state.NUM1}</span>%</Button> */}
            {/* <Button style={{ width: "110px", height: "60px", borderRadius: '8px', border: '1px RGB(24, 149, 255) solid', margin: "10px", boxShadow: "6px 0 10px rgba(0, 0, 0, 0.5)" }}>安全培训教育<br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: '#843C0C' }}>{this.state.NUM2}</span>/次</Button>
            <Button style={{ width: "110px", height: "60px", borderRadius: '8px', border: '1px RGB(24, 149, 255) solid', margin: "10px", boxShadow: "6px 0 10px rgba(0, 0, 0, 0.5)" }}>三级安全教育<br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: '#843C0C' }}>{this.state.NUM3}</span>/次</Button>
            {/* <Button style={{ width: "110px", height: "60px", borderRadius: '8px', border: '1px RGB(24, 149, 255) solid', margin: "10px" , boxShadow:"6px 0 10px rgba(0, 0, 0, 0.5)"}}>学时达标率<br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: '#843C0C' }}>{this.state.NUM4}</span>%</Button> */}
            {/* <Button style={{ width: "110px", height: "60px", borderRadius: '8px', border: '1px RGB(24, 149, 255) solid', margin: "10px" , boxShadow:"6px 0 10px rgba(0, 0, 0, 0.5)"}}>培训优良率<br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: '#843C0C' }}>{this.state.NUM5}</span>%</Button> */}
            {/* <Button style={{ width: "150px", height: "60px", borderRadius: '8px', border: '1px RGB(24, 149, 255) solid', margin: "10px" , boxShadow:"6px 0 10px rgba(0, 0, 0, 0.5)"}}>培训考核通过率<br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: '#843C0C' }}>{this.state.NUM6}</span>%</Button> */}
            {/* <Button style={{ width: "110px", height: "60px", borderRadius: '8px', border: '1px RGB(24, 149, 255) solid', margin: "10px", boxShadow: "6px 0 10px rgba(0, 0, 0, 0.5)" }}>题库总条数<br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: '#843C0C' }}>{this.state.NUM7}</span>/条</Button> */}
            <div
              style={{
                display: "flex",
                flexDirection: "row",
                alignItems: "center",
                justifyContent: "space-around",
                border: "1px #888 solid",
                padding: "8px 0px",
              }}
            >
              <div
                style={{
                  width: "120px",
                  height: "70px",
                  borderRadius: "8px",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "space-around",
                  // marginBottom: "10px",
                }}
              >
                <span>安全培训教育</span>
                {/* <br></br> */}
                <div>
                  <span
                    style={{
                      fontWeight: "bold",
                      fontSize: "20px",
                      color: "brown",
                    }}
                  >
                    {this.state.NUM2}
                  </span>
                  次
                </div>
              </div>
              <div
                style={{
                  width: "120px",
                  height: "70px",
                  borderRadius: "8px",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "space-around",
                  // marginBottom: "10px",
                }}
              >
                <span>三级安全教育</span>
                {/* <br></br> */}
                <div>
                  <span
                    style={{
                      fontWeight: "bold",
                      fontSize: "20px",
                      color: "brown",
                    }}
                  >
                    {this.state.NUM3}
                  </span>
                  次
                </div>
              </div>
              <div
                style={{
                  width: "120px",
                  height: "70px",
                  borderRadius: "8px",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "space-around",
                  // marginBottom: "10px",
                }}
              >
                <span>题库总条数</span>
                {/* <br></br> */}
                <div>
                  <span
                    style={{
                      fontWeight: "bold",
                      fontSize: "20px",
                      color: "brown",
                    }}
                  >
                    {this.state.NUM7}
                  </span>
                  条
                </div>
              </div>
            </div>
          </Col>
          <Col span={1}></Col>
        </Row>
        <Row gutter={10} style={{ marginTop: "14px" }}>
          <Col span={1}> </Col>
          <Col span={22}>
            <div
              className="dashboard-div-style"
              style={{
                // borderRadius: "10px",
                backgroundColor: "white",
                border: "1px solid rgb(232,232,232)",
                // boxShadow: "0px 0px 10px rgba(0,0,0,.15)",
              }}
            >
              <div id="chart1" 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="dashboard-div-style"
            // style={{ boxShadow: "0px 0px 10px rgba(0,0,0,.15)" }}
            >
              <Table
                dataSource={this.state.retData}
                columns={this.state.columns1}
                // pagination={this.paginationConfig}
                bordered
                loading={this.state.showLoading}
                size="small"
                rowKey="2"
              />
            </div>
          </Col>
          <Col span={1}></Col>
        </Row>
        <br />
      </div>
    );
  }
}
export default connect(({ login, app }) => ({ login, app }))(TrainSafeAnalysis);