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

import React, { useState, useEffect, useRef, Component } from "react";
import { connect } from "dva";
import { initFilter, extendOrder, guid } from "../../../utils/common";
import { Row, Col, Modal, Table, Button, Select, DatePicker, message } from "antd";
import echarts from "echarts";
import moment from "moment";

// 年度安全检查统计 弹窗 年度安全检查统计  按月 按生产单元
class BI056Dilg1_2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ColorShow: ["#c02e30", "#f7aa52", "#fbe06a", "#5185f3", "#EF9494", "#51b5f3"],
      barWidth: this.props.barWidth,
      isShow1: false,
      isShow2: false,
      dtStart: null,//开始时间
      dtEnd: null,//结束时间
      mineType: 0,//生产单元
      detailForm: {
        formCode: "",
        title: "",
      },
      ret: {
        IsSuccessful: true,
        Data: {
          axisLabelMonth: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
          legendName: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
          //各生产单元 1~12 月数量 时间未到为空 没有数量就为0
          checkrisk: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], [12, 12, 12, 6], [24, 24, 24, 12], [90, 90, 120, 36]],
        }
      }
    }
  }


  componenthidMount() {
    this.getBaseInfoData();
  }

  componentDidMount() {
    this.getBaseInfoData();
  }

  //获取数据
  getBaseInfoDataOnline = (mineType) => {
    const json2 = initFilter(this.props.login.OrgId);
    extendOrder(json2, "CREATE_TIME", 1);
    json2.Parameter1 = mineType;
    this.props.dispatch({
      type: "app/getDataByPost",
      url: "BI/BIController/getRiskPerformanceData",
      payload: json2,
      onlyData: false,
      onComplete: (ret) => {
        this.CheckCount(this.state.ret.Data)
      },
    });
  };

  getBaseInfoData = (mineType) => {
    this.CheckCount(this.state.ret.Data)
  };

  CheckCount = (Data) => {
    let divRiskCount = document.getElementById("divRiskCount");
    if (divRiskCount) {
      let myChart = echarts.init(divRiskCount);
      var listSeries = []
      for (var i = 0; i < Data.legendName.length; i++) {
        listSeries.push({
          name: Data.legendName[i],
          data: Data.checkrisk[i],
          type: "bar",
          itemStyle: { color: this.state.ColorShow[i] },
          barWidth: this.state.barWidth,//横轴的柱状图宽度
          label: {
            normal: {
              show: true,
              position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
              formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
              textStyle: {
                fontSize: 12, // 字体大小
                color: '#333', // 字体颜色
              },
            },
          },
        })
      }

      myChart.setOption(
        {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          legend: {
            left: "center",
            align: "left",
            bottom: "2%",
            textStyle: {
              color: "#000",
            },
            itemWidth: 10,
            itemHeight: 10,
            data: Data.legendName,
          },
          grid: {
            left: "3%",
            right: "3%",
            bottom: "12%",
            top: "10%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: Data.axisLabelMonth,
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: listSeries
        },
        true
      );
    }
  };

  render() {
    return (
      <div style={{ backgroundColor: "#fff", top: "0", bottom: "0", left: "0", right: "0", margin: "auto" }}  >

        {/* 第一行 */}
        <Row gutter={12} style={{ marginTop: "5px", textAlign: "center" }}>
          <Col span={1} > </Col>
          <Col span={22} style={{ padding: 0 }}>
            {/* <div className="home-always-title">
              <div className="home-always-left">
                <div className="home-always-badge"></div>
                <div className="home-always-name">隐患数量统计</div>
              </div>
            </div> */}
            <div id="divRiskCount" style={{ width: "100%", height: "330px" }}></div>
          </Col>
          <Col span={1} > </Col>
        </Row>
        <br />
      </div>
    );
  }
}
export default connect(({ login, app }) => ({ login, app }))(BI056Dilg1_2);