Browse Source

(*)首页图表数据接入

master
wuqun 2 years ago
parent
commit
b70b2a5c26
  1. 26
      web/client/src/sections/shouye/components/charts/column.js
  2. 33
      web/client/src/sections/shouye/components/charts/stackColumn.js
  3. 5
      web/client/src/sections/shouye/components/charts/xColumn.js
  4. 53
      web/client/src/sections/shouye/containers/shouye.js

26
web/client/src/sections/shouye/components/charts/column.js

@ -7,22 +7,22 @@ class ColumnChart extends Component {
}; };
} }
componentDidMount() { componentDidMount() {
const { xAxis, datas, domId } = this.props; const { xAxis, yAxis, domId } = this.props;
this.createCharts(xAxis, datas, domId); this.createCharts(xAxis, yAxis, domId);
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
let { xAxis, datas, domId } = nextProps; let { xAxis, yAxis, domId } = nextProps;
if (JSON.stringify(xAxis) != JSON.stringify(this.props.xAxis) || JSON.stringify(datas) != JSON.stringify(this.props.datas)) { if (JSON.stringify(xAxis) != JSON.stringify(this.props.xAxis) || JSON.stringify(yAxis) != JSON.stringify(this.props.yAxis)) {
this.createCharts(xAxis, datas, domId); this.createCharts(xAxis, yAxis, domId);
} }
} }
createCharts = (xAxis, datas, domId) => { createCharts = (xAxis, yAxis, domId) => {
this.clearEchart(); this.clearEchart();
let chartDom = document.getElementById(domId); let chartDom = document.getElementById(domId);
this.chart = echarts.init(chartDom); this.chart = echarts.init(chartDom);
let option = this.getOption(xAxis, datas); let option = this.getOption(xAxis, yAxis);
this.chart.setOption(option); this.chart.setOption(option);
this.onSize = () => { this.onSize = () => {
this.chart.resize(); this.chart.resize();
@ -39,8 +39,7 @@ class ColumnChart extends Component {
} }
}; };
getOption = (xAxis, datas) => { getOption = (xAxis, yAxis) => {
const { unit } = this.props
let option = { let option = {
title: { title: {
text: '成本分析' text: '成本分析'
@ -54,17 +53,18 @@ class ColumnChart extends Component {
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] data: xAxis
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
name: '单位:元', name: '单位:元',
}, },
tooltip: {}, tooltip: {},
series: [ series: [
{ {
data: [120, 200, 150, 80, 70, 110, 130], data: yAxis,
type: 'bar' type: 'bar',
barMaxWidth: 30,//柱子最大宽度
} }
] ]
} }

33
web/client/src/sections/shouye/components/charts/stackColumn.js

@ -7,22 +7,23 @@ class StackColumn extends Component {
}; };
} }
componentDidMount() { componentDidMount() {
const { xAxis, datas, domId } = this.props; const { xAxis, yAxis1, yAxis2, domId } = this.props;
this.createCharts(xAxis, datas, domId); this.createCharts(xAxis, yAxis1, yAxis2, domId);
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
let { xAxis, datas, domId } = nextProps; let { xAxis, yAxis1, yAxis2, domId } = nextProps;
if (JSON.stringify(xAxis) != JSON.stringify(this.props.xAxis) || JSON.stringify(datas) != JSON.stringify(this.props.datas)) { if (JSON.stringify(xAxis) != JSON.stringify(this.props.xAxis)
this.createCharts(xAxis, datas, domId); || 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(); this.clearEchart();
let chartDom = document.getElementById(domId); let chartDom = document.getElementById(domId);
this.chart = echarts.init(chartDom); this.chart = echarts.init(chartDom);
let option = this.getOption(xAxis, datas); let option = this.getOption(xAxis, yAxis1, yAxis2);
this.chart.setOption(option); this.chart.setOption(option);
this.onSize = () => { this.onSize = () => {
this.chart.resize(); this.chart.resize();
@ -39,15 +40,7 @@ class StackColumn extends Component {
} }
}; };
getOption = (xAxis, datas) => { getOption = (xAxis, yAxis1, yAxis2) => {
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));
}
let emphasisStyle = { let emphasisStyle = {
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 10,
@ -64,7 +57,7 @@ class StackColumn extends Component {
}, },
tooltip: {}, tooltip: {},
xAxis: { xAxis: {
data: xAxisData, data: xAxis,
axisLine: { onZero: true }, axisLine: { onZero: true },
splitLine: { show: false }, splitLine: { show: false },
splitArea: { show: false } splitArea: { show: false }
@ -84,14 +77,16 @@ class StackColumn extends Component {
type: 'bar', type: 'bar',
stack: 'one', stack: 'one',
emphasis: emphasisStyle, emphasis: emphasisStyle,
data: data1 data: yAxis1,
barMaxWidth: 30,//柱子最大宽度
}, },
{ {
name: '维修数', name: '维修数',
type: 'bar', type: 'bar',
stack: 'one', stack: 'one',
emphasis: emphasisStyle, emphasis: emphasisStyle,
data: data2 data: yAxis2,
barMaxWidth: 30,//柱子最大宽度
} }
] ]
} }

5
web/client/src/sections/shouye/components/charts/xColumn.js

@ -42,7 +42,7 @@ class XColumn extends Component {
getOption = (xAxis, yAxis) => { getOption = (xAxis, yAxis) => {
let option = { let option = {
title: { title: {
text: '故障点位分析' text: '实时故障点位分析'
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
@ -69,7 +69,8 @@ class XColumn extends Component {
{ {
name: '异常数', name: '异常数',
type: 'bar', type: 'bar',
data: xAxis data: xAxis,
barMaxWidth: 30,//柱子最大宽度
} }
] ]
}; };

53
web/client/src/sections/shouye/containers/shouye.js

@ -60,17 +60,45 @@ const Information = (props) => {
console.log(xunjiandata,'xunjiandata') console.log(xunjiandata,'xunjiandata')
const calcChartData = (data) => { const calcChartData = (data) => {
let arr = [] let arr1 = [], arr2 = [], arr4 = []
data.filter(d => d.alarm).forEach(l => { data.filter(d => d.alarm).forEach(l => {
let ext = arr.find(a => a.name === l.point.name); let repairOk = l.patrolRecordIssueHandles.length && l.patrolRecordIssueHandles[0]?.state === 6;//验收通过
if (ext) { if(!repairOk){//没修||没修好
ext.value++; 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 { } 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) arr1.sort((a, b) => b.value - a.value);
setChartData1(arr.slice(0, 10));//展示前10名 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 ( return (
@ -120,17 +148,22 @@ const Information = (props) => {
<div style={{ width: '45%' }}> <div style={{ width: '45%' }}>
<StackColumn <StackColumn
domId={'column-chart-2'} domId={'column-chart-2'}
height={clientHeight * 0.35} /> height={clientHeight * 0.35}
xAxis={chartData2.map(cd => cd.name)}
yAxis1={chartData2.map(cd => cd.num)}
yAxis2={chartData2.map(cd => cd.repairNum)} />
</div> </div>
</div> </div>
<div style={{ display: 'flex', justifyContent: 'space-between' }}> <div style={{ display: 'flex', justifyContent: 'space-between', marginTop : 12 }}>
<div style={{ width: '45%' }}> <div style={{ width: '45%' }}>
<AlarmStatistics height={clientHeight * 0.25} /> <AlarmStatistics height={clientHeight * 0.25} />
</div> </div>
<div style={{ width: '45%' }}> <div style={{ width: '45%' }}>
<Column <Column
domId={'column-chart-3'} domId={'column-chart-3'}
height={clientHeight * 0.35} /> height={clientHeight * 0.35}
xAxis={chartData4.map(cd => cd.name)}
yAxis={chartData4.map(cd => cd.cost)} />
</div> </div>
</div> </div>
</Card> </Card>

Loading…
Cancel
Save