diff --git a/src/components/CustomPages/BI/BI009FormRunAnalysis.js b/src/components/CustomPages/BI/BI009FormRunAnalysis.js index 64ecbd6..03f6bf2 100644 --- a/src/components/CustomPages/BI/BI009FormRunAnalysis.js +++ b/src/components/CustomPages/BI/BI009FormRunAnalysis.js @@ -1100,7 +1100,8 @@ class BI009FormRunAnalysis extends React.Component { let finishQty = []; data.Data.forEach((item) => { 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); }); let departmentCompletions = document.getElementById("workTicket"); @@ -1136,6 +1137,8 @@ class BI009FormRunAnalysis extends React.Component { }, xAxis: { show: false, + min: 0, + max: 100, // 百分比固定上限100 }, yAxis: [ { @@ -1263,7 +1266,8 @@ class BI009FormRunAnalysis extends React.Component { let finishQty = []; data.Data.forEach((item) => { 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); }); let departmentCompletions = document.getElementById("workTicket2"); @@ -1299,6 +1303,8 @@ class BI009FormRunAnalysis extends React.Component { }, xAxis: { show: false, + min: 0, + max: 100, // 百分比固定上限100 }, yAxis: [ { diff --git a/src/components/CustomPages/BI/BI014RiskPerformanceModel.js b/src/components/CustomPages/BI/BI014RiskPerformanceModel.js index 46cd171..27f0e7f 100644 --- a/src/components/CustomPages/BI/BI014RiskPerformanceModel.js +++ b/src/components/CustomPages/BI/BI014RiskPerformanceModel.js @@ -70,7 +70,7 @@ class BI014RiskPerformanceModel extends React.Component { ], CHARTLIST: [ { - NAME: ["露天矿", "选矿厂", "地下矿", "全公司"], + NAME: ["尾矿库", "选矿厂", "地下矿", "全公司"], LEVEL1: [1, 0, 1, 1], LEVEL2: [0, 3, 2, 2], LEVEL3: [1, 3, 70, 105], @@ -762,7 +762,7 @@ class BI014RiskPerformanceModel extends React.Component { }, itemWidth: 10, itemHeight: 10, - data: ["露天矿", "选矿厂", "地下矿", "全公司"], + data: ["尾矿库", "选矿厂", "地下矿", "全公司"], }, grid: { left: "3%", @@ -788,7 +788,7 @@ class BI014RiskPerformanceModel extends React.Component { series: [ { barWidth: 20, - name: "露天矿", + name: "尾矿库", type: "bar", stack: "总量", label: { @@ -2015,7 +2015,7 @@ class BI014RiskPerformanceModel extends React.Component { this.setState({ isShow2: true }) } else if (formCode == "风险类别2") { 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.chart23(this.state.ret.Data.RISKTYPELIST[2], "地下矿", "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 == "生产单元") { this.setState({ isShow1: true }) 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.chart23(this.state.ret.Data.SCDYLIST[2], "地下矿", "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 == "责任单位") { this.setState({ isShow1: true }) 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.chart23(this.state.ret.Data.TEAMLIST[2], "地下矿", "1", "1", "1", "1"); this.chart24(this.state.ret.Data.TEAMLIST[3], "尾矿库", "1", "1", "1", "1"); } else if (formCode == "区域") { this.setState({ isShow1: true }) 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.chart23(this.state.ret.Data.AREALIST[2], "地下矿", "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 {
-
区域
+
区域TOP8
this.showDetailModal("区域")}>
-
风险类别
+
风险类别TOP8
this.showDetailModal("风险类别2")}> { const json = initFilter(this.props.login.OrgId); - // extendOrder(json, "CREATE_TIME", 1); json.Parameter1 = mineType; - json.Keyword = (seasonIndex == undefined ? this.state.seasonIndex : seasonIndex) + // 优先使用下拉传入的新季度，无则取state默认季度 + const targetSeason = seasonIndex ?? this.state.seasonIndex; + json.Keyword = targetSeason; + this.props.dispatch({ type: "app/getDataByPost", url: "BI/BISafe/GetBI056_1_1", @@ -98,15 +100,18 @@ class BI056Dilg1_1 extends React.Component { onlyData: false, onComplete: (ret) => { if (ret && ret.IsSuccessful) { - this.setState({ //设置setState全局变量 + this.setState({ Data: { - legendName: ret.Data.lisLevelOrder,// ["公司级", "部门级", "车间级", "班组级"], - axisLabelMonth: this.state.Data.axisLabelMonth,// ret.Data.lisMineTypeOrder,//["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], - mineTypeName: ret.Data.lisMineTypeOrder,//["露天矿", "选矿厂", "尾矿库", "职能部门"], - checkCountMonth: ret.Data.Count,// [ - }, //将ret对象赋值给data, data供页面调用 - }) - this.CheckCount(this.state.Data, this.state.seasonIndex - 1); + legendName: ret.Data.lisLevelOrder, + axisLabelMonth: this.state.Data.axisLabelMonth, + mineTypeName: ret.Data.lisMineTypeOrder, + checkCountMonth: ret.Data.Count, + } + }, () => { + // 绘图使用本次选中的新季度下标，不再读取旧state + const drawSeasonIdx = targetSeason - 1; + this.CheckCount(this.state.Data, drawSeasonIdx); + }); } else { message.error("获取信息失败，请刷新后再试！"); } @@ -118,174 +123,153 @@ class BI056Dilg1_1 extends React.Component { this.CheckCount(this.state.Data, this.state.seasonIndex - 1); }; - onSelectChange(seasonIndex) { - // this.CheckCount(this.state.Data, seasonIndex - 1); - this.getBaseInfoDataOnline(null, seasonIndex) + // 下拉季度切换事件：先更新state，再请求接口 + onSelectChange = (seasonIndex) => { + this.setState({ seasonIndex }, () => { + this.getBaseInfoDataOnline(null, seasonIndex); + }); }; - // seasonIndex 从0开始 + // seasonIndex 从0开始（0=一季度，1=二季度...） CheckCount = (Data, seasonIndex) => { - let divShow = document.getElementById("divShow"); - if (divShow) { - let myChart = echarts.init(divShow); + const divShow = document.getElementById("divShow"); + if (!divShow) return; + let myChart = echarts.init(divShow); + const unitCount = Data.mineTypeName.length; // 生产单元数量 - // 3 一个季度 3个月 - var axisLabelMonth = [] - for (let i = 0; i < 3; i++) { - axisLabelMonth.push((i + 1 + seasonIndex * 3) + '月'); - } - 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 - ); + // 1. 根据选中季度生成底部X轴月份标签（核心：切换季度自动变1-3/4-6/7-9/10-12月） + const axisLabelMonth = []; + for (let i = 0; i < 3; i++) { + const monthNum = i + 1 + seasonIndex * 3; + axisLabelMonth.push(`${monthNum}月`); } + + // 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() { return ( -
- - {/* 第一行 */} - - {/* */} +
+ + {/* Select绑定value同步state，不再使用defaultValue */}
- {this.state.isShowbtn2 ? : null} {this.state.isShowbtn3 ? : null} @@ -294,11 +278,11 @@ class BI056Dilg1_1 extends React.Component {
- {/* */}
); } } + export default connect(({ login, app }) => ({ login, app }))(BI056Dilg1_1); \ No newline at end of file