wuqun
2 years ago
7 changed files with 590 additions and 56 deletions
@ -0,0 +1,62 @@ |
|||
'use strict' |
|||
import React, { Component } from 'react'; |
|||
import { Row, Col, Tooltip } from 'antd'; |
|||
import AutoRollComponent from './autorollcomponent'; |
|||
class AlarmStatistics extends Component { |
|||
constructor(props) { |
|||
super(props); |
|||
this.state = { |
|||
workers: { |
|||
wTypePieData: [ |
|||
{ item: '点位1', count: 214 }, |
|||
{ item: '点位2', count: 135 }, |
|||
{ item: '点位3', count: 88 }, |
|||
{ item: '点位4', count: 63 }, |
|||
{ item: '点位5', count: 56 }, |
|||
{ item: '点位6', count: 115 }, |
|||
{ item: '点位7', count: 67 }, |
|||
{ item: '点位8', count: 144 }, |
|||
{ item: '点位9', count: 21 }, |
|||
{ item: '点位10', count: 83 }, |
|||
] |
|||
} |
|||
} |
|||
} |
|||
|
|||
render() { |
|||
const { height } = this.props; |
|||
const { workers } = this.state; |
|||
let max = null, content = null; |
|||
let data = workers.wTypePieData.sort((a, b) => b.count - a.count); |
|||
max = data[0].count; |
|||
content = <div style={{ padding: '0px 10px 30px 30px' }}> |
|||
{ |
|||
workers.wTypePieData.map((wd, i) => { |
|||
let cls = i < 3 ? 'alarm-row rank1' : 'alarm-row rank2'; |
|||
return <Row style={{ marginBottom: 15 }}> |
|||
<Col offset={1} span={3}><span className={cls}>No.{i + 1}</span></Col> |
|||
<Col offset={1} span={15}>{wd.item}</Col> |
|||
<Col span={4}>{wd.count}次</Col> |
|||
</Row> |
|||
}) |
|||
} |
|||
</div> |
|||
return ( |
|||
<div> |
|||
<div style={{ fontWeight: 'bold', fontSize: 18 }}> |
|||
告警统计 |
|||
</div> |
|||
<div style={{ marginTop: 20 }}> |
|||
{ |
|||
content ? <AutoRollComponent content={content} divHeight={height} divId={"type-list"} /> |
|||
: <div style={{ border: '1px dashed #999', width: '100%', height: height, paddingTop: height * 0.45, textAlign: 'center' }}> |
|||
暂无数据 |
|||
</div> |
|||
} |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
} |
|||
|
|||
export default AlarmStatistics; |
@ -0,0 +1,138 @@ |
|||
'use strict' |
|||
import React, { Component } from 'react'; |
|||
import { Row, Col } from 'antd'; |
|||
|
|||
export default class AutoRollComponent extends Component { |
|||
|
|||
constructor(props) { |
|||
super(props); |
|||
this.scrollElem = null; |
|||
this.stopscroll = false; |
|||
this.preTop = 0; |
|||
this.cloneEle = null; |
|||
this.currentTop = 0; |
|||
this.marqueesHeight = 0; |
|||
this.interval = null; |
|||
this.state = { |
|||
enabledScroll: false |
|||
} |
|||
} |
|||
|
|||
get enabledScroll() { |
|||
let scrollElem = document.getElementById(this.props.divId); |
|||
let fatherElem = scrollElem?.parentNode || null; |
|||
if (scrollElem && fatherElem) { |
|||
return scrollElem.scrollHeight > fatherElem.scrollHeight |
|||
} |
|||
|
|||
return false; |
|||
} |
|||
|
|||
|
|||
marque = (height) => { |
|||
try { |
|||
this.scrollElem = document.getElementById(this.props.divId); |
|||
this.marqueesHeight = height; |
|||
if (this.scrollElem) { |
|||
this.scrollElem.style.height = this.marqueesHeight; |
|||
this.scrollElem.style.overflow = 'hidden'; |
|||
} |
|||
this.repeat(); |
|||
} catch (e) { console.log(e) } |
|||
} |
|||
|
|||
|
|||
repeat = () => { |
|||
this.scrollElem.scrollTop = 0; |
|||
|
|||
this.interval = setInterval(() => { |
|||
if (this.stopscroll) return; |
|||
this.currentTop = this.currentTop + 1; |
|||
this.preTop = this.scrollElem.scrollTop; |
|||
this.scrollElem.scrollTop = this.scrollElem.scrollTop + 1; |
|||
// console.log(`this.scrollElem.scrollTop:${this.scrollElem.scrollTop} === this.preTop:${this.preTop}`);
|
|||
if (this.preTop === this.scrollElem.scrollTop) { |
|||
this.scrollElem.scrollTop = this.marqueesHeight; |
|||
this.scrollElem.scrollTop = this.scrollElem.scrollTop + 1; |
|||
} |
|||
}, 80); |
|||
} |
|||
|
|||
|
|||
componentWillUnmount() { |
|||
clearInterval(this.interval); |
|||
} |
|||
|
|||
componentWillReceiveProps(nextProps) { |
|||
requestAnimationFrame(() => { |
|||
if (this.enabledScroll) { |
|||
if (!this.state.enabledScroll) { |
|||
this.setState({ enabledScroll: true }, () => { |
|||
this.marque(10) |
|||
}) |
|||
} |
|||
|
|||
} |
|||
}) |
|||
} |
|||
|
|||
componentDidMount() { |
|||
if (this.enabledScroll) { |
|||
this.setState({ enabledScroll: true }, () => { |
|||
this.marque(10) |
|||
}) |
|||
} |
|||
} |
|||
|
|||
onMouseOver = () => { |
|||
this.stopscroll = true; |
|||
} |
|||
|
|||
onMouseOut = () => { |
|||
this.stopscroll = false; |
|||
} |
|||
|
|||
|
|||
render() { |
|||
|
|||
const { headStyle = headStyle || {}, changeStyleCol, heads, spans, data, divId, divHeight, content, containerStyle = {} } = this.props; |
|||
|
|||
return ( |
|||
<div style={{ ...containerStyle, textAlign: 'left' }}> |
|||
{ |
|||
heads ? |
|||
<Row style={{ ...headStyle, lineHeight: '40px', height: 40 }}> |
|||
{heads.map((c, index) => { |
|||
return <Col span={spans[index]} key={index}>{c}</Col> |
|||
}) |
|||
} |
|||
</Row> : '' |
|||
} |
|||
|
|||
<div id={divId} style={{ overflow: 'hidden', height: divHeight }} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}> |
|||
<div> |
|||
{content ? content : ''} |
|||
{this.state.enabledScroll && content ? content : ''} |
|||
{ |
|||
data ? |
|||
data.map((q, idx) => { |
|||
return ( |
|||
<div key={idx}> |
|||
<Row gutter={16} style={{ borderBottom: '0px solid grey' }}> |
|||
{heads.map((c, index) => { |
|||
return <Col span={spans[index]} key={index} style={{ paddingTop: 8, textAlign: 'left', wordBreak: 'break-word', color: `${c === changeStyleCol ? q.changeColor : ''}` }}> |
|||
{index == 1 ? q.data[index] == -1 ? "-" : q.data[index] : index == 2 ? q.data[1] == -1 ? '-' : q.data[index] : q.data[index]}</Col> |
|||
}) |
|||
} |
|||
</Row> |
|||
</div> |
|||
) |
|||
}) : '' |
|||
} |
|||
<div style={{ margin: 16 }}></div> |
|||
</div> |
|||
</div> |
|||
</div > |
|||
) |
|||
} |
|||
} |
@ -0,0 +1,80 @@ |
|||
import React, { Component } from 'react'; |
|||
import * as echarts from 'echarts'; |
|||
class ColumnChart extends Component { |
|||
constructor(props) { |
|||
super(props); |
|||
this.state = { |
|||
}; |
|||
} |
|||
componentDidMount() { |
|||
const { xAxis, datas, domId } = this.props; |
|||
this.createCharts(xAxis, datas, 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); |
|||
} |
|||
} |
|||
|
|||
createCharts = (xAxis, datas, domId) => { |
|||
this.clearEchart(); |
|||
let chartDom = document.getElementById(domId); |
|||
this.chart = echarts.init(chartDom); |
|||
let option = this.getOption(xAxis, datas); |
|||
this.chart.setOption(option); |
|||
this.onSize = () => { |
|||
this.chart.resize(); |
|||
} |
|||
window.addEventListener("resize", this.onSize); |
|||
}; |
|||
// 组件销毁删除监听
|
|||
componentWillUnmount() { |
|||
window.removeEventListener("resize", this.onSize) |
|||
} |
|||
clearEchart = () => { |
|||
if (this.chart) { |
|||
this.chart.dispose(); |
|||
} |
|||
}; |
|||
|
|||
getOption = (xAxis, datas) => { |
|||
const { unit } = this.props |
|||
let option = { |
|||
title: { |
|||
text: '成本分析' |
|||
}, |
|||
legend: {}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '10%', |
|||
bottom: '0%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
name: '单位:万元', |
|||
}, |
|||
tooltip: {}, |
|||
series: [ |
|||
{ |
|||
data: [120, 200, 150, 80, 70, 110, 130], |
|||
type: 'bar' |
|||
} |
|||
] |
|||
} |
|||
return option; |
|||
}; |
|||
|
|||
render() { |
|||
const { domId, width, height } = this.props; |
|||
return <div id={domId} style={{ height: height, width: width || '100%', margin: '0px auto' }} />; |
|||
} |
|||
} |
|||
|
|||
export default ColumnChart; |
@ -0,0 +1,107 @@ |
|||
import React, { Component } from 'react'; |
|||
import * as echarts from 'echarts'; |
|||
class StackColumn extends Component { |
|||
constructor(props) { |
|||
super(props); |
|||
this.state = { |
|||
}; |
|||
} |
|||
componentDidMount() { |
|||
const { xAxis, datas, domId } = this.props; |
|||
this.createCharts(xAxis, datas, 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); |
|||
} |
|||
} |
|||
|
|||
createCharts = (xAxis, datas, domId) => { |
|||
this.clearEchart(); |
|||
let chartDom = document.getElementById(domId); |
|||
this.chart = echarts.init(chartDom); |
|||
let option = this.getOption(xAxis, datas); |
|||
this.chart.setOption(option); |
|||
this.onSize = () => { |
|||
this.chart.resize(); |
|||
} |
|||
window.addEventListener("resize", this.onSize); |
|||
}; |
|||
// 组件销毁删除监听
|
|||
componentWillUnmount() { |
|||
window.removeEventListener("resize", this.onSize) |
|||
} |
|||
clearEchart = () => { |
|||
if (this.chart) { |
|||
this.chart.dispose(); |
|||
} |
|||
}; |
|||
|
|||
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)); |
|||
} |
|||
let emphasisStyle = { |
|||
itemStyle: { |
|||
shadowBlur: 10, |
|||
shadowColor: 'rgba(0,0,0,0.3)' |
|||
} |
|||
}; |
|||
let option = { |
|||
title: { |
|||
text: '设备维修分析' |
|||
}, |
|||
legend: { |
|||
data: ['异常数', '维修数'], |
|||
left: '40%' |
|||
}, |
|||
tooltip: {}, |
|||
xAxis: { |
|||
data: xAxisData, |
|||
axisLine: { onZero: true }, |
|||
splitLine: { show: false }, |
|||
splitArea: { show: false } |
|||
}, |
|||
yAxis: { |
|||
name: '单位:次数', |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '10%', |
|||
bottom: '0%', |
|||
containLabel: true |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '异常数', |
|||
type: 'bar', |
|||
stack: 'one', |
|||
emphasis: emphasisStyle, |
|||
data: data1 |
|||
}, |
|||
{ |
|||
name: '维修数', |
|||
type: 'bar', |
|||
stack: 'one', |
|||
emphasis: emphasisStyle, |
|||
data: data2 |
|||
} |
|||
] |
|||
} |
|||
return option; |
|||
}; |
|||
|
|||
render() { |
|||
const { domId, width, height } = this.props; |
|||
return <div id={domId} style={{ height: height, width: width || '100%', margin: '0px auto' }} />; |
|||
} |
|||
} |
|||
|
|||
export default StackColumn; |
@ -0,0 +1,85 @@ |
|||
import React, { Component } from 'react'; |
|||
import * as echarts from 'echarts'; |
|||
class XColumn extends Component { |
|||
constructor(props) { |
|||
super(props); |
|||
this.state = { |
|||
}; |
|||
} |
|||
componentDidMount() { |
|||
const { xAxis, yAxis, domId } = this.props; |
|||
this.createCharts(xAxis, yAxis, domId); |
|||
} |
|||
|
|||
componentWillReceiveProps(nextProps) { |
|||
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, yAxis, domId) => { |
|||
this.clearEchart(); |
|||
let chartDom = document.getElementById(domId); |
|||
this.chart = echarts.init(chartDom); |
|||
let option = this.getOption(xAxis, yAxis); |
|||
this.chart.setOption(option); |
|||
this.onSize = () => { |
|||
this.chart.resize(); |
|||
} |
|||
window.addEventListener("resize", this.onSize); |
|||
}; |
|||
// 组件销毁删除监听
|
|||
componentWillUnmount() { |
|||
window.removeEventListener("resize", this.onSize) |
|||
} |
|||
clearEchart = () => { |
|||
if (this.chart) { |
|||
this.chart.dispose(); |
|||
} |
|||
}; |
|||
|
|||
getOption = (xAxis, yAxis) => { |
|||
let option = { |
|||
title: { |
|||
text: '故障点位分析' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
} |
|||
}, |
|||
legend: {}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '10%', |
|||
bottom: '0%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: { |
|||
type: 'value', |
|||
boundaryGap: [0, 0.01] |
|||
}, |
|||
yAxis: { |
|||
type: 'category', |
|||
data: yAxis |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '异常数', |
|||
type: 'bar', |
|||
data: xAxis |
|||
} |
|||
] |
|||
}; |
|||
return option; |
|||
}; |
|||
|
|||
render() { |
|||
const { domId, width, height } = this.props; |
|||
return <div id={domId} style={{ height: height, width: width || '100%', margin: '0px auto' }} />; |
|||
} |
|||
} |
|||
|
|||
export default XColumn; |
Loading…
Reference in new issue