风险管理统计分析、安全教育与培训统计报表

src/components/CustomPages/BI/BI011TrainSafeAnalysis.js

@@ -1,9 +1,18 @@
-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'
+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) {
@@ -25,61 +34,72 @@ class TrainSafeAnalysis extends React.Component {
       NUM5: 0,
       NUM6: 0,
       NUM7: 0,
-      searchMonth: moment().format('YYYY-MM'),
-      showLoading: false
+      searchMonth: moment().format("YYYY-MM"),
+      showLoading: false,
     };
-  };
+  }
 
   componentDidMount() {
     this.state.columns1 = [
       {
-        title: '序号',
-        render: (text, record, index) => `${index + 1}`
+        title: "序号",
+        render: (text, record, index) => `${index + 1}`,
       },
       {
-        title: '课程名称',
-        dataIndex: 'NAME',
+        title: "课程名称",
+        dataIndex: "NAME",
       },
       {
-        title: '培训起止时间',
-        dataIndex: 'TIMERANGE',
+        width: "270px",
+        title: "培训起止时间",
+        dataIndex: "TIMERANGE",
       },
       {
-        title: '应参训人数',
-        dataIndex: 'SHOULD_TRAINER',
+        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: "ACTUAL_TRAINER",
       },
       {
-        title: '考核方式',
-        dataIndex: 'METHOD',
+        title: "参训率",
+        render: (text, record) => (
+          <span>
+            {((record.ACTUAL_TRAINER / record.SHOULD_TRAINER) * 100).toFixed(
+              0
+            ) + "%"}
+          </span>
+        ),
       },
       {
-        title: '通过率',
-        dataIndex: 'PASS_RATE',
-        render: (text, record) => (<span>{(record.PASS_RATE * 100).toFixed(0) + "%"}</span>),
-
+        title: "考核方式",
+        dataIndex: "METHOD",
       },
       {
-        title: '效果评估(优良率)',
-        dataIndex: 'EFFORT_RATE',
-        render: (text, record) => (<span>{(record.EFFORT_RATE*1).toFixed(0) + "%"}</span>),
+        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',
+      type: "app/getDataByPost",
+      url: "BI/BIController/getSafeTrainData",
       payload: json,
       onlyData: false,
       onComplete: (ret) => {
@@ -95,106 +115,320 @@ class TrainSafeAnalysis extends React.Component {
           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'));
+      this.state.dates.push(moment(ret[i].DATE).format("YYYY-MM"));
     }
-    let chart1s = document.getElementById('chart1');
+    let chart1s = document.getElementById("chart1");
     if (chart1s) {
       let myChart = echarts.init(chart1s);
-      myChart.on('click', (params) => {
+      myChart.on("click", (params) => {
         this.loadData(params.name);
       });
       myChart.setOption({
+        color: color,
         grid: {
-          left: '5%',
-          right: '5%',
+          left: "5%",
+          right: "5%",
         },
         legend: {
-          bottom: '0px'
+          bottom: "0px",
         },
         title: {
           text: "月度培训完成走势图",
-          left: 'center'
+          left: "center",
+          top: "2%",
         },
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
           axisPointer: {
-            type: 'shadow'
+            type: "shadow",
           },
         },
         xAxis: {
-          type: 'category',
+          type: "category",
           data: this.state.dates,
+          boundaryGap: false,
           axisLabel: {
-            showMaxLabel: true
-          }
+            textStyle: {
+              color: "#333",
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#D9D9D9",
+            },
+          },
         },
         yAxis: {
-          type: 'value',
+          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: '培训记录数',
+            name: "培训记录数",
             data: this.state.recordNums,
-            type: 'line',
+            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
-    })
-  }
+      [type]: value,
+    });
+  };
   paginationConfig = {
-    pageSizeOptions: ['10', '20', '50'],
+    // pageSizeOptions: ["10", "20", "50"],
     pageSize: 20,
-    showSizeChanger: true,
-    size: 'small',
-  }
+    // 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>
+      <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={3}> 
-          {/* <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>
+          <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>
-            </Col>
-          <Col span={19}>
-            <div className="dashboard-div-style" style={{ borderRadius: '10px', backgroundColor: 'white', boxShadow: '0px 0px 10px rgba(0,0,0,.15)' }}>
-              <div id="chart1" style={{ width: '100%', height: '350px' }}></div>
+            {/* <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>
-        <hr style={{ border: '1px dashed #ccc', marginBottom: "20px", marginTop: "20px" }}></hr>
+        <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)' }}>
+          <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}
+                // pagination={this.paginationConfig}
                 bordered
                 loading={this.state.showLoading}
                 size="small"
-                rowKey="1"
+                rowKey="2"
               />
             </div>
           </Col>
@@ -202,7 +436,7 @@ class TrainSafeAnalysis extends React.Component {
         </Row>
         <br />
       </div>
-    )
+    );
   }
 }
-export default connect(({ login, app }) => ({ login, app }))(TrainSafeAnalysis)
+export default connect(({ login, app }) => ({ login, app }))(TrainSafeAnalysis);