From b70b2a5c26b73437d308abbc507c991e88b1ac6b Mon Sep 17 00:00:00 2001 From: wuqun Date: Thu, 9 Mar 2023 10:29:09 +0800 Subject: [PATCH] =?UTF-8?q?(*)=E9=A6=96=E9=A1=B5=E5=9B=BE=E8=A1=A8?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=8E=A5=E5=85=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shouye/components/charts/column.js | 26 ++++----- .../shouye/components/charts/stackColumn.js | 33 +++++------- .../shouye/components/charts/xColumn.js | 5 +- .../src/sections/shouye/containers/shouye.js | 53 +++++++++++++++---- 4 files changed, 73 insertions(+), 44 deletions(-) diff --git a/web/client/src/sections/shouye/components/charts/column.js b/web/client/src/sections/shouye/components/charts/column.js index 0e011f5..3038763 100644 --- a/web/client/src/sections/shouye/components/charts/column.js +++ b/web/client/src/sections/shouye/components/charts/column.js @@ -7,22 +7,22 @@ class ColumnChart extends Component { }; } componentDidMount() { - const { xAxis, datas, domId } = this.props; - this.createCharts(xAxis, datas, domId); + const { xAxis, yAxis, domId } = this.props; + this.createCharts(xAxis, yAxis, domId); } componentWillReceiveProps(nextProps) { - let { xAxis, datas, domId } = nextProps; - if (JSON.stringify(xAxis) != JSON.stringify(this.props.xAxis) || JSON.stringify(datas) != JSON.stringify(this.props.datas)) { - this.createCharts(xAxis, datas, domId); + let { xAxis, yAxis, domId } = nextProps; + if (JSON.stringify(xAxis) != JSON.stringify(this.props.xAxis) || JSON.stringify(yAxis) != JSON.stringify(this.props.yAxis)) { + this.createCharts(xAxis, yAxis, domId); } } - createCharts = (xAxis, datas, domId) => { + createCharts = (xAxis, yAxis, domId) => { this.clearEchart(); let chartDom = document.getElementById(domId); this.chart = echarts.init(chartDom); - let option = this.getOption(xAxis, datas); + let option = this.getOption(xAxis, yAxis); this.chart.setOption(option); this.onSize = () => { this.chart.resize(); @@ -39,8 +39,7 @@ class ColumnChart extends Component { } }; - getOption = (xAxis, datas) => { - const { unit } = this.props + getOption = (xAxis, yAxis) => { let option = { title: { text: '成本分析' @@ -54,17 +53,18 @@ class ColumnChart extends Component { }, xAxis: { type: 'category', - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + data: xAxis }, yAxis: { type: 'value', - name: '单位：万元', + name: '单位：元', }, tooltip: {}, series: [ { - data: [120, 200, 150, 80, 70, 110, 130], - type: 'bar' + data: yAxis, + type: 'bar', + barMaxWidth: 30,//柱子最大宽度 } ] } diff --git a/web/client/src/sections/shouye/components/charts/stackColumn.js b/web/client/src/sections/shouye/components/charts/stackColumn.js index 34cc0e3..8ad4b6b 100644 --- a/web/client/src/sections/shouye/components/charts/stackColumn.js +++ b/web/client/src/sections/shouye/components/charts/stackColumn.js @@ -7,22 +7,23 @@ class StackColumn extends Component { }; } componentDidMount() { - const { xAxis, datas, domId } = this.props; - this.createCharts(xAxis, datas, domId); + const { xAxis, yAxis1, yAxis2, domId } = this.props; + this.createCharts(xAxis, yAxis1, yAxis2, domId); } componentWillReceiveProps(nextProps) { - let { xAxis, datas, domId } = nextProps; - if (JSON.stringify(xAxis) != JSON.stringify(this.props.xAxis) || JSON.stringify(datas) != JSON.stringify(this.props.datas)) { - this.createCharts(xAxis, datas, domId); + let { xAxis, yAxis1, yAxis2, domId } = nextProps; + if (JSON.stringify(xAxis) != JSON.stringify(this.props.xAxis) + || JSON.stringify(yAxis1) != JSON.stringify(this.props.yAxis1) || JSON.stringify(yAxis2) != JSON.stringify(this.props.yAxis2)) { + this.createCharts(xAxis, yAxis1, yAxis2, domId); } } - createCharts = (xAxis, datas, domId) => { + createCharts = (xAxis, yAxis1, yAxis2, domId) => { this.clearEchart(); let chartDom = document.getElementById(domId); this.chart = echarts.init(chartDom); - let option = this.getOption(xAxis, datas); + let option = this.getOption(xAxis, yAxis1, yAxis2); this.chart.setOption(option); this.onSize = () => { this.chart.resize(); @@ -39,15 +40,7 @@ class StackColumn extends Component { } }; - getOption = (xAxis, datas) => { - let xAxisData = []; - let data1 = []; - let data2 = []; - for (let i = 0; i < 10; i++) { - xAxisData.push('Class' + i); - data1.push(+(Math.random() * 2).toFixed(2)); - data2.push(+(Math.random() * 5).toFixed(2)); - } + getOption = (xAxis, yAxis1, yAxis2) => { let emphasisStyle = { itemStyle: { shadowBlur: 10, @@ -64,7 +57,7 @@ class StackColumn extends Component { }, tooltip: {}, xAxis: { - data: xAxisData, + data: xAxis, axisLine: { onZero: true }, splitLine: { show: false }, splitArea: { show: false } @@ -84,14 +77,16 @@ class StackColumn extends Component { type: 'bar', stack: 'one', emphasis: emphasisStyle, - data: data1 + data: yAxis1, + barMaxWidth: 30,//柱子最大宽度 }, { name: '维修数', type: 'bar', stack: 'one', emphasis: emphasisStyle, - data: data2 + data: yAxis2, + barMaxWidth: 30,//柱子最大宽度 } ] } diff --git a/web/client/src/sections/shouye/components/charts/xColumn.js b/web/client/src/sections/shouye/components/charts/xColumn.js index 5627d9a..f1a91aa 100644 --- a/web/client/src/sections/shouye/components/charts/xColumn.js +++ b/web/client/src/sections/shouye/components/charts/xColumn.js @@ -42,7 +42,7 @@ class XColumn extends Component { getOption = (xAxis, yAxis) => { let option = { title: { - text: '故障点位分析' + text: '实时故障点位分析' }, tooltip: { trigger: 'axis', @@ -69,7 +69,8 @@ class XColumn extends Component { { name: '异常数', type: 'bar', - data: xAxis + data: xAxis, + barMaxWidth: 30,//柱子最大宽度 } ] }; diff --git a/web/client/src/sections/shouye/containers/shouye.js b/web/client/src/sections/shouye/containers/shouye.js index 0ba1092..71298ae 100644 --- a/web/client/src/sections/shouye/containers/shouye.js +++ b/web/client/src/sections/shouye/containers/shouye.js @@ -60,17 +60,45 @@ const Information = (props) => { console.log(xunjiandata,'xunjiandata') const calcChartData = (data) => { - let arr = [] + let arr1 = [], arr2 = [], arr4 = [] data.filter(d => d.alarm).forEach(l => { - let ext = arr.find(a => a.name === l.point.name); - if (ext) { - ext.value++; + let repairOk = l.patrolRecordIssueHandles.length && l.patrolRecordIssueHandles[0]?.state === 6;//验收通过 + if(!repairOk){//没修||没修好 + let ext1 = arr1.find(a => a.name === l.point.name); + if (ext1) { + ext1.value++; + } else { + arr1.push({ name: l.point.name, value: 1 }) + } + } else {//修好了 + let ext4 = arr4.find(a => a.name === l.point.name); + if (ext4) { + ext4.cost += parseFloat(l.patrolRecordIssueHandles[0]?.cost); + } else { + arr4.push({ name: l.point.name, cost: parseFloat(l.patrolRecordIssueHandles[0]?.cost) }) + } + } + + //右上 + let ext2 = arr2.find(a => a.name === l.point.name); + if (ext2) { + ext2.num++; + if(repairOk){ + ext2.repairNum += l.patrolRecordIssueHandles[0]?.yanshoucishu; + } } else { - arr.push({ name: l.point.name, value: 1 }) + let repairNum = repairOk ? l.patrolRecordIssueHandles[0]?.yanshoucishu : 0; + arr2.push({ name: l.point.name, num: 1, repairNum }) } }) - arr.sort((a, b) => b.value - a.value) - setChartData1(arr.slice(0, 10));//展示前10名 + arr1.sort((a, b) => b.value - a.value); + setChartData1(arr1.slice(0, 10));//前10名 + + arr2.sort((a, b) => (b.num + b.repairNum) - (a.num + a.repairNum)); + setChartData2(arr2.slice(0, 10));//前10名 + + arr4.sort((a, b) => b.cost - a.cost); + setChartData4(arr4.slice(0, 10));//前10名 } return ( @@ -120,17 +148,22 @@ const Information = (props) => {
+ height={clientHeight * 0.35} + xAxis={chartData2.map(cd => cd.name)} + yAxis1={chartData2.map(cd => cd.num)} + yAxis2={chartData2.map(cd => cd.repairNum)} />
-
+
+ height={clientHeight * 0.35} + xAxis={chartData4.map(cd => cd.name)} + yAxis={chartData4.map(cd => cd.cost)} />