后台绩效图表
This commit is contained in:
parent
3b634a3c26
commit
ce46a13759
@ -1100,7 +1100,8 @@ class BI009FormRunAnalysis extends React.Component {
|
|||||||
let finishQty = [];
|
let finishQty = [];
|
||||||
data.Data.forEach((item) => {
|
data.Data.forEach((item) => {
|
||||||
teamName.push(item.TEAM_NAME);
|
teamName.push(item.TEAM_NAME);
|
||||||
let finishData = Number(item.CALC * 100).toFixed(2);
|
// let finishData = Number(item.CALC * 100).toFixed(2);
|
||||||
|
let finishData = Number((item.CALC * 100).toFixed(2));
|
||||||
finishQty.push(finishData);
|
finishQty.push(finishData);
|
||||||
});
|
});
|
||||||
let departmentCompletions = document.getElementById("workTicket");
|
let departmentCompletions = document.getElementById("workTicket");
|
||||||
@ -1136,6 +1137,8 @@ class BI009FormRunAnalysis extends React.Component {
|
|||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
show: false,
|
show: false,
|
||||||
|
min: 0,
|
||||||
|
max: 100, // 百分比固定上限100
|
||||||
},
|
},
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
@ -1263,7 +1266,8 @@ class BI009FormRunAnalysis extends React.Component {
|
|||||||
let finishQty = [];
|
let finishQty = [];
|
||||||
data.Data.forEach((item) => {
|
data.Data.forEach((item) => {
|
||||||
teamName.push(item.TEAM_NAME);
|
teamName.push(item.TEAM_NAME);
|
||||||
let finishData = Number(item.CALC * 100).toFixed(2);
|
//let finishData = Number(item.CALC * 100).toFixed(2);
|
||||||
|
let finishData = Number((item.CALC * 100).toFixed(2));
|
||||||
finishQty.push(finishData);
|
finishQty.push(finishData);
|
||||||
});
|
});
|
||||||
let departmentCompletions = document.getElementById("workTicket2");
|
let departmentCompletions = document.getElementById("workTicket2");
|
||||||
@ -1299,6 +1303,8 @@ class BI009FormRunAnalysis extends React.Component {
|
|||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
show: false,
|
show: false,
|
||||||
|
min: 0,
|
||||||
|
max: 100, // 百分比固定上限100
|
||||||
},
|
},
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
|
|||||||
@ -70,7 +70,7 @@ class BI014RiskPerformanceModel extends React.Component {
|
|||||||
],
|
],
|
||||||
CHARTLIST: [
|
CHARTLIST: [
|
||||||
{
|
{
|
||||||
NAME: ["露天矿", "选矿厂", "地下矿", "全公司"],
|
NAME: ["尾矿库", "选矿厂", "地下矿", "全公司"],
|
||||||
LEVEL1: [1, 0, 1, 1],
|
LEVEL1: [1, 0, 1, 1],
|
||||||
LEVEL2: [0, 3, 2, 2],
|
LEVEL2: [0, 3, 2, 2],
|
||||||
LEVEL3: [1, 3, 70, 105],
|
LEVEL3: [1, 3, 70, 105],
|
||||||
@ -762,7 +762,7 @@ class BI014RiskPerformanceModel extends React.Component {
|
|||||||
},
|
},
|
||||||
itemWidth: 10,
|
itemWidth: 10,
|
||||||
itemHeight: 10,
|
itemHeight: 10,
|
||||||
data: ["露天矿", "选矿厂", "地下矿", "全公司"],
|
data: ["尾矿库", "选矿厂", "地下矿", "全公司"],
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: "3%",
|
left: "3%",
|
||||||
@ -788,7 +788,7 @@ class BI014RiskPerformanceModel extends React.Component {
|
|||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
barWidth: 20,
|
barWidth: 20,
|
||||||
name: "露天矿",
|
name: "尾矿库",
|
||||||
type: "bar",
|
type: "bar",
|
||||||
stack: "总量",
|
stack: "总量",
|
||||||
label: {
|
label: {
|
||||||
@ -2015,7 +2015,7 @@ class BI014RiskPerformanceModel extends React.Component {
|
|||||||
this.setState({ isShow2: true })
|
this.setState({ isShow2: true })
|
||||||
} else if (formCode == "风险类别2") {
|
} else if (formCode == "风险类别2") {
|
||||||
titleTemp += "风险类别";
|
titleTemp += "风险类别";
|
||||||
this.chart21(this.state.ret.Data.RISKTYPELIST[0], "露天矿", "1", "1", "1", "1");
|
this.chart21(this.state.ret.Data.RISKTYPELIST[0], "全公司", "1", "1", "1", "1");
|
||||||
this.chart22(this.state.ret.Data.RISKTYPELIST[1], "选矿厂", "1", "1", "1", "1");
|
this.chart22(this.state.ret.Data.RISKTYPELIST[1], "选矿厂", "1", "1", "1", "1");
|
||||||
this.chart23(this.state.ret.Data.RISKTYPELIST[2], "地下矿", "1", "1", "1", "1");
|
this.chart23(this.state.ret.Data.RISKTYPELIST[2], "地下矿", "1", "1", "1", "1");
|
||||||
this.chart24(this.state.ret.Data.RISKTYPELIST[3], "尾矿库", "1", "1", "1", "1");
|
this.chart24(this.state.ret.Data.RISKTYPELIST[3], "尾矿库", "1", "1", "1", "1");
|
||||||
@ -2024,7 +2024,7 @@ class BI014RiskPerformanceModel extends React.Component {
|
|||||||
else if (formCode == "生产单元") {
|
else if (formCode == "生产单元") {
|
||||||
this.setState({ isShow1: true })
|
this.setState({ isShow1: true })
|
||||||
titleTemp += "生产单元";
|
titleTemp += "生产单元";
|
||||||
this.chart21(this.state.ret.Data.SCDYLIST[0], "露天矿", "1", "2", "3", "4");
|
this.chart21(this.state.ret.Data.SCDYLIST[0], "全公司", "1", "2", "3", "4");
|
||||||
this.chart22(this.state.ret.Data.SCDYLIST[1], "选矿厂", "1", "2", "3", "4");
|
this.chart22(this.state.ret.Data.SCDYLIST[1], "选矿厂", "1", "2", "3", "4");
|
||||||
this.chart23(this.state.ret.Data.SCDYLIST[2], "地下矿", "1", "2", "3", "4");
|
this.chart23(this.state.ret.Data.SCDYLIST[2], "地下矿", "1", "2", "3", "4");
|
||||||
this.chart24(this.state.ret.Data.SCDYLIST[3], "尾矿库", "1", "2", "3", "4");
|
this.chart24(this.state.ret.Data.SCDYLIST[3], "尾矿库", "1", "2", "3", "4");
|
||||||
@ -2038,14 +2038,14 @@ class BI014RiskPerformanceModel extends React.Component {
|
|||||||
} else if (formCode == "责任单位") {
|
} else if (formCode == "责任单位") {
|
||||||
this.setState({ isShow1: true })
|
this.setState({ isShow1: true })
|
||||||
titleTemp += "责任单位";
|
titleTemp += "责任单位";
|
||||||
this.chart21(this.state.ret.Data.TEAMLIST[0], "露天矿", "1", "1", "1", "1");
|
this.chart21(this.state.ret.Data.TEAMLIST[0], "全公司", "1", "1", "1", "1");
|
||||||
this.chart22(this.state.ret.Data.TEAMLIST[1], "选矿厂", "1", "1", "1", "1");
|
this.chart22(this.state.ret.Data.TEAMLIST[1], "选矿厂", "1", "1", "1", "1");
|
||||||
this.chart23(this.state.ret.Data.TEAMLIST[2], "地下矿", "1", "1", "1", "1");
|
this.chart23(this.state.ret.Data.TEAMLIST[2], "地下矿", "1", "1", "1", "1");
|
||||||
this.chart24(this.state.ret.Data.TEAMLIST[3], "尾矿库", "1", "1", "1", "1");
|
this.chart24(this.state.ret.Data.TEAMLIST[3], "尾矿库", "1", "1", "1", "1");
|
||||||
} else if (formCode == "区域") {
|
} else if (formCode == "区域") {
|
||||||
this.setState({ isShow1: true })
|
this.setState({ isShow1: true })
|
||||||
titleTemp += "区域";
|
titleTemp += "区域";
|
||||||
this.chart21(this.state.ret.Data.AREALIST[0], "露天矿", "1", "1", "1", "1");
|
this.chart21(this.state.ret.Data.AREALIST[0], "全公司", "1", "1", "1", "1");
|
||||||
this.chart22(this.state.ret.Data.AREALIST[1], "选矿厂", "1", "1", "1", "1");
|
this.chart22(this.state.ret.Data.AREALIST[1], "选矿厂", "1", "1", "1", "1");
|
||||||
this.chart23(this.state.ret.Data.AREALIST[2], "地下矿", "1", "1", "1", "1");
|
this.chart23(this.state.ret.Data.AREALIST[2], "地下矿", "1", "1", "1", "1");
|
||||||
this.chart24(this.state.ret.Data.AREALIST[3], "尾矿库", "1", "1", "1", "1");
|
this.chart24(this.state.ret.Data.AREALIST[3], "尾矿库", "1", "1", "1", "1");
|
||||||
@ -2217,7 +2217,7 @@ class BI014RiskPerformanceModel extends React.Component {
|
|||||||
<div className="home-always-title">
|
<div className="home-always-title">
|
||||||
<div className="home-always-left">
|
<div className="home-always-left">
|
||||||
<div className="home-always-badge"></div>
|
<div className="home-always-badge"></div>
|
||||||
<div className="home-always-name">区域</div>
|
<div className="home-always-name">区域TOP8</div>
|
||||||
</div>
|
</div>
|
||||||
<div onClick={() => this.showDetailModal("区域")}>
|
<div onClick={() => this.showDetailModal("区域")}>
|
||||||
<IconFont
|
<IconFont
|
||||||
@ -2236,7 +2236,7 @@ class BI014RiskPerformanceModel extends React.Component {
|
|||||||
<div className="home-always-title">
|
<div className="home-always-title">
|
||||||
<div className="home-always-left">
|
<div className="home-always-left">
|
||||||
<div className="home-always-badge"></div>
|
<div className="home-always-badge"></div>
|
||||||
<div className="home-always-name">风险类别</div>
|
<div className="home-always-name">风险类别TOP8</div>
|
||||||
</div>
|
</div>
|
||||||
<div onClick={() => this.showDetailModal("风险类别2")}>
|
<div onClick={() => this.showDetailModal("风险类别2")}>
|
||||||
<IconFont
|
<IconFont
|
||||||
|
|||||||
@ -1,54 +1,54 @@
|
|||||||
import React, { useState, useEffect, useRef, Component } from "react";
|
import React, { Component } from "react";
|
||||||
import { connect } from "dva";
|
import { connect } from "dva";
|
||||||
import { initFilter, extendOrder, guid } from "../../../utils/common";
|
import { initFilter } from "../../../utils/common";
|
||||||
import { Row, Col, Select, Modal, Table, Button, DatePicker, message } from "antd";
|
import { Row, Col, Select, message } from "antd";
|
||||||
import echarts from "echarts";
|
import echarts from "echarts";
|
||||||
|
|
||||||
// 年度安全检查统计 弹窗 年度安全检查统计 按月 按生产单元
|
// 年度安全检查统计 弹窗 年度安全检查统计 按月 按生产单元
|
||||||
class BI056Dilg1_1 extends React.Component {
|
class BI056Dilg1_1 extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
var month = (new Date()).getMonth() + 1
|
const month = new Date().getMonth() + 1;
|
||||||
var selectSeason = 1
|
let selectSeason = 1;
|
||||||
var isShowbtn2 = false
|
let isShowbtn2 = false;
|
||||||
var isShowbtn3 = false
|
let isShowbtn3 = false;
|
||||||
var isShowbtn4 = false
|
let isShowbtn4 = false;
|
||||||
|
|
||||||
switch (month) {
|
switch (month) {
|
||||||
case 4:
|
case 4:
|
||||||
case 5:
|
case 5:
|
||||||
case 6:
|
case 6:
|
||||||
selectSeason = 2
|
selectSeason = 2;
|
||||||
isShowbtn2 = true
|
isShowbtn2 = true;
|
||||||
break;
|
break;
|
||||||
case 7:
|
case 7:
|
||||||
case 8:
|
case 8:
|
||||||
case 9:
|
case 9:
|
||||||
selectSeason = 3
|
selectSeason = 3;
|
||||||
isShowbtn2 = true
|
isShowbtn2 = true;
|
||||||
isShowbtn3 = true
|
isShowbtn3 = true;
|
||||||
break;
|
break;
|
||||||
case 10:
|
case 10:
|
||||||
case 11:
|
case 11:
|
||||||
case 12:
|
case 12:
|
||||||
selectSeason = 4
|
selectSeason = 4;
|
||||||
isShowbtn2 = true
|
isShowbtn2 = true;
|
||||||
isShowbtn3 = true
|
isShowbtn3 = true;
|
||||||
isShowbtn4 = true
|
isShowbtn4 = true;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
ColorShow: this.props.data.ColorShow,// ["#c02e30", "#f7aa52", "#fbe06a", "#5185f3", "#EF9494", "#51b5f3"],
|
ColorShow: this.props.data.ColorShow,
|
||||||
month: month,
|
month: month,
|
||||||
barWidth: this.props.data.barWidth,
|
barWidth: this.props.data.barWidth,
|
||||||
seasonIndex: selectSeason,
|
seasonIndex: selectSeason,
|
||||||
isShowbtn2: isShowbtn2,
|
isShowbtn2: isShowbtn2,
|
||||||
isShowbtn3: isShowbtn3,
|
isShowbtn3: isShowbtn3,
|
||||||
isShowbtn4: isShowbtn4,
|
isShowbtn4: isShowbtn4,
|
||||||
dtStart: null,//开始时间
|
dtStart: null,
|
||||||
dtEnd: null,//结束时间
|
dtEnd: null,
|
||||||
mineType: 0,//生产单元
|
mineType: 0,
|
||||||
detailForm: {
|
detailForm: {
|
||||||
formCode: "",
|
formCode: "",
|
||||||
title: "",
|
title: "",
|
||||||
@ -56,41 +56,43 @@ class BI056Dilg1_1 extends React.Component {
|
|||||||
Data: {
|
Data: {
|
||||||
legendName: ["公司级", "部门级", "车间级", "班组级"],
|
legendName: ["公司级", "部门级", "车间级", "班组级"],
|
||||||
axisLabelMonth: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
axisLabelMonth: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
||||||
mineTypeName: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
|
// 修正:和后端lisMineTypeOrder保持一致5个单元
|
||||||
|
mineTypeName: ["全公司", "露天矿", "地下矿", "选矿厂", "尾矿库"],
|
||||||
checkCountMonth: [
|
checkCountMonth: [
|
||||||
//有几月的数据就统计到几月 时间不到不统计 也不能放入0
|
|
||||||
// 公司级 、 部门级 车间级 班组级 各一个数组
|
|
||||||
// [公司级露天矿1月数据,公司级选矿厂1月数据,公司级尾矿库1月数据,公司级职能部门1月数据 ,公司级露天矿2月数据,公司级选矿厂2月数据,公司级尾矿库2月数据,公司级职能部门2月数据]
|
|
||||||
|
|
||||||
// 公司级
|
// 公司级
|
||||||
[1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 6, 6, 6, 6, 7, 7, 7, 7, 8, 8, 8, 8, 9, 9, 9, 9, 10, 10, 10, 10, 11, 11, 11, 11, 12, 12, 12, 12],
|
[1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5, 6, 6, 6, 6, 6, 7, 7, 7, 7, 7, 8, 8, 8, 8, 8, 9, 9, 9, 9, 9, 10, 10, 10, 10, 10, 11, 11, 11, 11, 11, 12, 12, 12, 12, 12],
|
||||||
// 部门级
|
// 部门级
|
||||||
[4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5],
|
[4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5],
|
||||||
// 车间级
|
// 车间级
|
||||||
[28, 29, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
|
[28, 29, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
|
||||||
// 班组级
|
// 班组级
|
||||||
[55, 56, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60]
|
[55, 56, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60]
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
}
|
|
||||||
|
|
||||||
componenthidMount() {
|
|
||||||
// this.getBaseInfoData();
|
|
||||||
this.getBaseInfoDataOnline();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
// this.getBaseInfoData();
|
|
||||||
this.getBaseInfoDataOnline();
|
this.getBaseInfoDataOnline();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 组件销毁,销毁echarts实例,防止内存泄漏、重复绘图
|
||||||
|
componentWillUnmount() {
|
||||||
|
const chartDom = document.getElementById("divShow");
|
||||||
|
if (chartDom) {
|
||||||
|
const myChart = echarts.getInstanceByDom(chartDom);
|
||||||
|
myChart && myChart.dispose();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
//获取数据
|
//获取数据
|
||||||
getBaseInfoDataOnline = (mineType, seasonIndex) => {
|
getBaseInfoDataOnline = (mineType, seasonIndex) => {
|
||||||
const json = initFilter(this.props.login.OrgId);
|
const json = initFilter(this.props.login.OrgId);
|
||||||
// extendOrder(json, "CREATE_TIME", 1);
|
|
||||||
json.Parameter1 = mineType;
|
json.Parameter1 = mineType;
|
||||||
json.Keyword = (seasonIndex == undefined ? this.state.seasonIndex : seasonIndex)
|
// 优先使用下拉传入的新季度,无则取state默认季度
|
||||||
|
const targetSeason = seasonIndex ?? this.state.seasonIndex;
|
||||||
|
json.Keyword = targetSeason;
|
||||||
|
|
||||||
this.props.dispatch({
|
this.props.dispatch({
|
||||||
type: "app/getDataByPost",
|
type: "app/getDataByPost",
|
||||||
url: "BI/BISafe/GetBI056_1_1",
|
url: "BI/BISafe/GetBI056_1_1",
|
||||||
@ -98,15 +100,18 @@ class BI056Dilg1_1 extends React.Component {
|
|||||||
onlyData: false,
|
onlyData: false,
|
||||||
onComplete: (ret) => {
|
onComplete: (ret) => {
|
||||||
if (ret && ret.IsSuccessful) {
|
if (ret && ret.IsSuccessful) {
|
||||||
this.setState({ //设置setState全局变量
|
this.setState({
|
||||||
Data: {
|
Data: {
|
||||||
legendName: ret.Data.lisLevelOrder,// ["公司级", "部门级", "车间级", "班组级"],
|
legendName: ret.Data.lisLevelOrder,
|
||||||
axisLabelMonth: this.state.Data.axisLabelMonth,// ret.Data.lisMineTypeOrder,//["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
axisLabelMonth: this.state.Data.axisLabelMonth,
|
||||||
mineTypeName: ret.Data.lisMineTypeOrder,//["露天矿", "选矿厂", "尾矿库", "职能部门"],
|
mineTypeName: ret.Data.lisMineTypeOrder,
|
||||||
checkCountMonth: ret.Data.Count,// [
|
checkCountMonth: ret.Data.Count,
|
||||||
}, //将ret对象赋值给data, data供页面调用
|
}
|
||||||
})
|
}, () => {
|
||||||
this.CheckCount(this.state.Data, this.state.seasonIndex - 1);
|
// 绘图使用本次选中的新季度下标,不再读取旧state
|
||||||
|
const drawSeasonIdx = targetSeason - 1;
|
||||||
|
this.CheckCount(this.state.Data, drawSeasonIdx);
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
message.error("获取信息失败,请刷新后再试!");
|
message.error("获取信息失败,请刷新后再试!");
|
||||||
}
|
}
|
||||||
@ -118,174 +123,153 @@ class BI056Dilg1_1 extends React.Component {
|
|||||||
this.CheckCount(this.state.Data, this.state.seasonIndex - 1);
|
this.CheckCount(this.state.Data, this.state.seasonIndex - 1);
|
||||||
};
|
};
|
||||||
|
|
||||||
onSelectChange(seasonIndex) {
|
// 下拉季度切换事件:先更新state,再请求接口
|
||||||
// this.CheckCount(this.state.Data, seasonIndex - 1);
|
onSelectChange = (seasonIndex) => {
|
||||||
this.getBaseInfoDataOnline(null, seasonIndex)
|
this.setState({ seasonIndex }, () => {
|
||||||
|
this.getBaseInfoDataOnline(null, seasonIndex);
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// seasonIndex 从0开始
|
// seasonIndex 从0开始(0=一季度,1=二季度...)
|
||||||
CheckCount = (Data, seasonIndex) => {
|
CheckCount = (Data, seasonIndex) => {
|
||||||
let divShow = document.getElementById("divShow");
|
const divShow = document.getElementById("divShow");
|
||||||
if (divShow) {
|
if (!divShow) return;
|
||||||
let myChart = echarts.init(divShow);
|
let myChart = echarts.init(divShow);
|
||||||
|
const unitCount = Data.mineTypeName.length; // 生产单元数量
|
||||||
|
|
||||||
// 3 一个季度 3个月
|
// 1. 根据选中季度生成底部X轴月份标签(核心:切换季度自动变1-3/4-6/7-9/10-12月)
|
||||||
var axisLabelMonth = []
|
const axisLabelMonth = [];
|
||||||
for (let i = 0; i < 3; i++) {
|
for (let i = 0; i < 3; i++) {
|
||||||
axisLabelMonth.push((i + 1 + seasonIndex * 3) + '月');
|
const monthNum = i + 1 + seasonIndex * 3;
|
||||||
}
|
axisLabelMonth.push(`${monthNum}月`);
|
||||||
var xAxisName = []
|
|
||||||
for (let i = 0; i < 3; i++) {
|
|
||||||
for (let j = 0; j < Data.mineTypeName.length; j++) {
|
|
||||||
xAxisName.push((i + 1 + seasonIndex * 3) + '月 ' + Data.mineTypeName[j])//3个月一图表
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const labelOption = {
|
|
||||||
show: true,
|
|
||||||
position: 'inside',
|
|
||||||
formatter: '{c}',
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 12, // 字体大小
|
|
||||||
color: '#333', // 字体颜色
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
var month = this.state.month
|
|
||||||
var seriesShow = []
|
|
||||||
|
|
||||||
for (let i = 0; i < Data.mineTypeName.length; i++) {
|
|
||||||
var seriesData = []//数据 在每组数据中获取 Data.checkCountMonth[i]
|
|
||||||
|
|
||||||
var dateIndexMin = 0
|
|
||||||
var dateIndexMax = 0
|
|
||||||
|
|
||||||
if ((seasonIndex * 3) < month) {
|
|
||||||
dateIndexMin = (seasonIndex * 3) * Data.mineTypeName.length
|
|
||||||
// 12 = 3*Data.mineTypeName.length
|
|
||||||
dateIndexMax = (dateIndexMin + 12) > (month * Data.mineTypeName.length) ? (month * Data.mineTypeName.length) : (dateIndexMin + 12)
|
|
||||||
} else {
|
|
||||||
dateIndexMin = (seasonIndex * 3) * Data.mineTypeName.length
|
|
||||||
dateIndexMax = month * Data.mineTypeName.length
|
|
||||||
|
|
||||||
if (dateIndexMin > dateIndexMax) {
|
|
||||||
dateIndexMin = dateIndexMax
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// for (let j = dateIndexMin; j < dateIndexMax; j++) {
|
|
||||||
// if (Data.checkCountMonth[i].length > j) {
|
|
||||||
// seriesData.push(Data.checkCountMonth[i][j])
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
seriesData = Data.checkCountMonth[i]
|
|
||||||
|
|
||||||
seriesShow.push({
|
|
||||||
name: Data.legendName[i],
|
|
||||||
barWidth: this.state.barWidth,
|
|
||||||
type: 'bar',
|
|
||||||
barGap: 0,
|
|
||||||
stack: 'risk', // 堆叠分组标识,相同值就堆叠在一起
|
|
||||||
label: labelOption,
|
|
||||||
emphasis: {
|
|
||||||
focus: 'series'
|
|
||||||
},
|
|
||||||
data: seriesData,
|
|
||||||
itemStyle: { color: this.state.ColorShow[i] },
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
myChart.setOption(
|
|
||||||
{
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
left: "center",
|
|
||||||
align: "left",
|
|
||||||
bottom: "-2%",
|
|
||||||
textStyle: {
|
|
||||||
color: "#000",
|
|
||||||
},
|
|
||||||
itemWidth: 10,
|
|
||||||
itemHeight: 10,
|
|
||||||
data: Data.legendName
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: 'category',
|
|
||||||
axisTick: { show: false },
|
|
||||||
data: xAxisName,
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "#0c3b71",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: true,
|
|
||||||
color: "rgb(170,170,170)",
|
|
||||||
interval: 0,
|
|
||||||
textStyle: {
|
|
||||||
lineHeight: 14,
|
|
||||||
},
|
|
||||||
formatter: function (param) {
|
|
||||||
return param.split("月")[1];//X轴显示 把月份去除 加是以为 鼠标事件要显示月份
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'category',
|
|
||||||
position: 'bottom', // 将分组x轴位置定至底部,不然默认在顶部
|
|
||||||
offset: 40, // 向下偏移,使分组文字显示位置不与原x轴重叠
|
|
||||||
axisLine: {
|
|
||||||
show: false // 隐藏分组x轴的轴线
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: true,
|
|
||||||
length: 40, // 延长刻度线做分组线
|
|
||||||
inside: true, // 使刻度线相对轴线在上面与原x轴相接,默认在轴线下方
|
|
||||||
// lineStyle: {
|
|
||||||
// color: '#ff9800'
|
|
||||||
// }, // 非必须,仅为了演示,明显标示出分组刻度线
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
inside: true, // 使刻度名称相对轴线在上面与原x轴相接,默认在轴线下方
|
|
||||||
interval: 0, // 强制显示全部刻度名
|
|
||||||
formatter: function (val, index) {
|
|
||||||
// console.log('测试999 val--- ', val);
|
|
||||||
// console.log('测试999 index--- ', index);
|
|
||||||
return ' ' + val // 这儿可以根据 返回 空字符串,来调整 第二个 x 轴值出现的位置。
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: axisLabelMonth// ['1月', '2月','3月']
|
|
||||||
}
|
|
||||||
],
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
type: 'value'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
series: seriesShow
|
|
||||||
},
|
|
||||||
true
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 2. 生成主X轴完整类目:3个月 × 全部生产单元
|
||||||
|
const xAxisName = [];
|
||||||
|
for (let i = 0; i < 3; i++) {
|
||||||
|
const monthNum = i + 1 + seasonIndex * 3;
|
||||||
|
Data.mineTypeName.forEach(unit => {
|
||||||
|
xAxisName.push(`${monthNum}月${unit}`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const labelOption = {
|
||||||
|
show: true,
|
||||||
|
position: 'inside',
|
||||||
|
formatter: '{c}',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#333',
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const seriesShow = [];
|
||||||
|
// 【修复关键点】取消slice切片截取,直接使用后端返回完整数组,兼容现有接口数据
|
||||||
|
Data.legendName.forEach((levelName, i) => {
|
||||||
|
// 直接取后端返回原始数据,不再截断
|
||||||
|
const quarterData = Data.checkCountMonth[i];
|
||||||
|
|
||||||
|
seriesShow.push({
|
||||||
|
name: levelName,
|
||||||
|
barWidth: this.state.barWidth,
|
||||||
|
type: 'bar',
|
||||||
|
barGap: 0,
|
||||||
|
stack: 'risk',
|
||||||
|
label: labelOption,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: quarterData,
|
||||||
|
itemStyle: { color: this.state.ColorShow[i] },
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
myChart.setOption(
|
||||||
|
{
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
left: "center",
|
||||||
|
align: "left",
|
||||||
|
bottom: "-2%",
|
||||||
|
textStyle: {
|
||||||
|
color: "#000",
|
||||||
|
},
|
||||||
|
itemWidth: 10,
|
||||||
|
itemHeight: 10,
|
||||||
|
data: Data.legendName
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
axisTick: { show: false },
|
||||||
|
data: xAxisName,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#0c3b71",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: "rgb(170,170,170)",
|
||||||
|
interval: 0,
|
||||||
|
textStyle: {
|
||||||
|
lineHeight: 14,
|
||||||
|
},
|
||||||
|
formatter: function (param) {
|
||||||
|
return param.split("月")[1];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
position: 'bottom',
|
||||||
|
offset: 40,
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: true,
|
||||||
|
length: 40,
|
||||||
|
inside: true,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
inside: true,
|
||||||
|
interval: 0,
|
||||||
|
formatter: function (val) {
|
||||||
|
return ' ' + val;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: axisLabelMonth
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: seriesShow
|
||||||
|
},
|
||||||
|
true
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div style={{ backgroundColor: "#fff", top: "0", bottom: "0", left: "0", right: "0", margin: "auto",width:"100%" }} >
|
<div style={{ backgroundColor: "#fff", top: "0", bottom: "0", left: "0", right: "0", margin: "auto", width: "100%" }} >
|
||||||
|
<Row gutter={12} style={{ marginTop: "5px", textAlign: "center", width: "100%" }}>
|
||||||
{/* 第一行 */}
|
|
||||||
<Row gutter={12} style={{ marginTop: "5px", textAlign: "center",width:"100%" }}>
|
|
||||||
{/* <Col span={1} > </Col> */}
|
|
||||||
<Col span={24} style={{ padding: 0 }}>
|
<Col span={24} style={{ padding: 0 }}>
|
||||||
|
{/* Select绑定value同步state,不再使用defaultValue */}
|
||||||
<div style={{ float: "right", zIndex: 2 }}>
|
<div style={{ float: "right", zIndex: 2 }}>
|
||||||
<Select onChange={value => this.onSelectChange(value)} defaultValue={this.state.seasonIndex} style={{ zIndex: 2, height: "30px", width: "100px", marginRight: "100px" }}>
|
<Select
|
||||||
|
onChange={this.onSelectChange}
|
||||||
|
value={this.state.seasonIndex}
|
||||||
|
style={{ zIndex: 2, height: "30px", width: "100px", marginRight: "100px" }}
|
||||||
|
>
|
||||||
<option value={1}>第一季度</option>
|
<option value={1}>第一季度</option>
|
||||||
{this.state.isShowbtn2 ? <option value={2}>第二季度</option> : null}
|
{this.state.isShowbtn2 ? <option value={2}>第二季度</option> : null}
|
||||||
{this.state.isShowbtn3 ? <option value={3}>第三季度</option> : null}
|
{this.state.isShowbtn3 ? <option value={3}>第三季度</option> : null}
|
||||||
@ -294,11 +278,11 @@ class BI056Dilg1_1 extends React.Component {
|
|||||||
</div>
|
</div>
|
||||||
<div id="divShow" style={{ width: "100%", height: "380px", marginTop: "30px", zIndex: 0 }}></div>
|
<div id="divShow" style={{ width: "100%", height: "380px", marginTop: "30px", zIndex: 0 }}></div>
|
||||||
</Col>
|
</Col>
|
||||||
{/* <Col span={1} > </Col> */}
|
|
||||||
</Row>
|
</Row>
|
||||||
<br />
|
<br />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default connect(({ login, app }) => ({ login, app }))(BI056Dilg1_1);
|
export default connect(({ login, app }) => ({ login, app }))(BI056Dilg1_1);
|
||||||
Loading…
Reference in New Issue
Block a user