|
|
@@ -90,18 +90,23 @@ export default class GanttGraph { |
|
|
|
yAxis = [] |
|
|
|
series = [] |
|
|
|
|
|
|
|
constructor(data, startTime) { |
|
|
|
this.gridIndex = 0; |
|
|
|
this.currentXaxisId = null; |
|
|
|
this.currentYaxisId = null; |
|
|
|
// this.startTime = new Date(startTime); |
|
|
|
this.startTime = new Date(new Date().toLocaleDateString()); |
|
|
|
constructor(el, startTime) { |
|
|
|
this.el = el; |
|
|
|
this.gridIndex = -1; |
|
|
|
this.currentGraphIndex = -2; |
|
|
|
this.startTime = new Date(startTime); |
|
|
|
// this.startTime = new Date(new Date('2023/10/8').toLocaleDateString()); |
|
|
|
console.log('<> Gantt Created', this.startTime); |
|
|
|
|
|
|
|
this.grid.push(this.makeGrid()) |
|
|
|
this.xAxis.push(...this.makeXaxis()) |
|
|
|
this.yAxis.push(...this.makeYaxis("设备1")) |
|
|
|
this.series.push(...this.makeSeries({ equipmentName: "设备1" })) |
|
|
|
// this.grid.push(this.makeGrid()) |
|
|
|
// this.xAxis.push(...this.makeXaxis()) |
|
|
|
// this.yAxis.push(...this.makeYaxis("设备1")) |
|
|
|
// this.series.push(...this.makeSeries({ equipmentName: "设备1" })) |
|
|
|
|
|
|
|
// this.grid.push(this.makeGrid()) |
|
|
|
// this.xAxis.push(...this.makeXaxis()) |
|
|
|
// this.yAxis.push(...this.makeYaxis("设备2")) |
|
|
|
// this.series.push(...this.makeSeries({ equipmentName: "设备2" })) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
@@ -110,8 +115,10 @@ export default class GanttGraph { |
|
|
|
this.gridIndex++; |
|
|
|
return { |
|
|
|
id: 'GRID_' + this.gridIndex, |
|
|
|
top: 12 + 64 * (this.gridIndex - 1), |
|
|
|
right: 64, |
|
|
|
// top: 12 + 128 * this.gridIndex, |
|
|
|
top: 12 + 104 * this.gridIndex, |
|
|
|
right: 48, |
|
|
|
left: 88, |
|
|
|
height: 56 |
|
|
|
} |
|
|
|
} |
|
|
@@ -119,11 +126,10 @@ export default class GanttGraph { |
|
|
|
// 构造一个 xAxis |
|
|
|
makeXaxis() { |
|
|
|
const [id1, id2] = ['' + Math.random(), '' + Math.random()] |
|
|
|
this.currentXaxisId = id1; |
|
|
|
return [ |
|
|
|
{ |
|
|
|
id: id1, |
|
|
|
gridIndex: 'GRID_' + this.gridIndex, |
|
|
|
gridIndex: this.gridIndex, |
|
|
|
axisTick: { |
|
|
|
alignWithLabel: true, |
|
|
|
inside: true, |
|
|
@@ -147,7 +153,7 @@ export default class GanttGraph { |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: id2, |
|
|
|
gridIndex: 'GRID_' + this.gridIndex, |
|
|
|
gridIndex: this.gridIndex, |
|
|
|
axisLabel: { show: false }, |
|
|
|
axisLine: { show: false }, |
|
|
|
}, |
|
|
@@ -158,20 +164,19 @@ export default class GanttGraph { |
|
|
|
// 构造一个 yAxis |
|
|
|
makeYaxis(equipmentName) { |
|
|
|
const [id1, id2] = ['' + Math.random(), '' + Math.random()] |
|
|
|
this.currentYaxisId = id1; |
|
|
|
return [ |
|
|
|
// 主y轴 |
|
|
|
{ |
|
|
|
id: id1, |
|
|
|
gridIndex: 'GRID_' + this.gridIndex, |
|
|
|
gridIndex: this.gridIndex, |
|
|
|
type: 'value', |
|
|
|
splitLine: { show: false }, |
|
|
|
name: equipmentName, |
|
|
|
nameLocation: 'center', |
|
|
|
nameGap: 56, |
|
|
|
nameGap: 14, |
|
|
|
nameRotate: 0, |
|
|
|
nameTextStyle: { |
|
|
|
fontSize: 18, |
|
|
|
fontSize: 16, |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
show: true, |
|
|
@@ -183,7 +188,7 @@ export default class GanttGraph { |
|
|
|
// 辅y轴 |
|
|
|
{ |
|
|
|
id: id2, |
|
|
|
gridIndex: 'GRID_' + this.gridIndex, |
|
|
|
gridIndex: this.gridIndex, |
|
|
|
type: 'value', |
|
|
|
splitLine: { show: false }, |
|
|
|
axisLabel: { show: false }, |
|
|
@@ -193,15 +198,15 @@ export default class GanttGraph { |
|
|
|
} |
|
|
|
|
|
|
|
// 构造一个 series |
|
|
|
makeSeries({ equipmentName }) { |
|
|
|
const { currentXaxisId: xAxisIndex, currentYaxisId: yAxisIndex } = this; |
|
|
|
makeSeries({ equipmentName, arr }) { |
|
|
|
this.currentGraphIndex += 2; |
|
|
|
const bgStartTime = this.startTime.getTime(); |
|
|
|
const bgEndTime = bgStartTime + 3600 * 24 * 1000; |
|
|
|
return [ |
|
|
|
// 沉默的背景 |
|
|
|
{ |
|
|
|
xAxisIndex, |
|
|
|
yAxisIndex, |
|
|
|
xAxisIndex: this.currentGraphIndex, |
|
|
|
yAxisIndex: this.currentGraphIndex, |
|
|
|
type: 'custom', |
|
|
|
renderItem: renderItem, |
|
|
|
silent: true, |
|
|
@@ -226,8 +231,8 @@ export default class GanttGraph { |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: equipmentName, |
|
|
|
xAxisIndex, |
|
|
|
yAxisIndex, |
|
|
|
xAxisIndex: this.currentGraphIndex, |
|
|
|
yAxisIndex: this.currentGraphIndex, |
|
|
|
type: 'custom', |
|
|
|
renderItem: renderItem, |
|
|
|
itemStyle: { |
|
|
@@ -237,83 +242,34 @@ export default class GanttGraph { |
|
|
|
x: [1, 2], |
|
|
|
y: 0, |
|
|
|
}, |
|
|
|
data: [ |
|
|
|
// 暂时先静态数据 |
|
|
|
{ |
|
|
|
name: '运行', |
|
|
|
value: [0, 1696694400000, 1696699400000, 0], |
|
|
|
itemStyle: { |
|
|
|
|
|
|
|
color: types[0].color, |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '运行', |
|
|
|
value: [0, 1696730000000, 1696734040450, 0], |
|
|
|
itemStyle: { |
|
|
|
|
|
|
|
color: types[0].color, |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '故障', |
|
|
|
value: [0, 1696737040000, 1696754040450, 0], |
|
|
|
itemStyle: { |
|
|
|
|
|
|
|
color: types[1].color, |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '计划停机', |
|
|
|
value: [0, 1696755000000, 1696759000000, 0], |
|
|
|
itemStyle: { |
|
|
|
|
|
|
|
color: types[2].color, |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '运行', |
|
|
|
value: [0, 1696759000000, 1696769000000, 0], |
|
|
|
itemStyle: { |
|
|
|
|
|
|
|
color: types[0].color, |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '计划停机', |
|
|
|
value: [0, 1696769400000, 1696779000000, 0], |
|
|
|
itemStyle: { |
|
|
|
|
|
|
|
color: types[2].color, |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
data: arr.map(item => ({ |
|
|
|
name: ['运行', '故障', '计划停机'][item.status], |
|
|
|
value: [0, item.startTime, item.startTime + item.duration * 60 * 1000, 0], |
|
|
|
itemStyle: { |
|
|
|
color: types[item.status].color, |
|
|
|
} |
|
|
|
})), |
|
|
|
}, |
|
|
|
] |
|
|
|
} |
|
|
|
|
|
|
|
init(el) { |
|
|
|
if (typeof el == 'string') { |
|
|
|
el = document.querySelector(el); |
|
|
|
init(data) { |
|
|
|
if (!this.el) throw new Error('没有可供echarts初始化的容器') |
|
|
|
if (typeof this.el == 'string') { |
|
|
|
this.el = document.querySelector(this.el); |
|
|
|
} |
|
|
|
this.chart = echarts.init(el); |
|
|
|
this.chart = echarts.init(this.el); |
|
|
|
this.handleProps(data); |
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
console.log("init....", this.chart, this.option); |
|
|
|
debugger; |
|
|
|
// debugger; |
|
|
|
this.chart.setOption(this.option); |
|
|
|
}, 200); |
|
|
|
} |
|
|
|
|
|
|
|
update(data) { |
|
|
|
// todo , handle data |
|
|
|
this.chart.setOption(this.option); |
|
|
|
this.clear(); |
|
|
|
this.init(data); |
|
|
|
} |
|
|
|
|
|
|
|
resize() { |
|
|
@@ -330,6 +286,32 @@ export default class GanttGraph { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 每次 graphList 刷新都会重新渲染整个所有图表 |
|
|
|
// 可以改进的地方:添加一个 handleAdd() 方法,一次添加一个新的 |
|
|
|
handleProps(props) { |
|
|
|
// props 是父组件的 graphList |
|
|
|
console.log('props: ', props); |
|
|
|
props.forEach(eqArr => { |
|
|
|
this.grid.push(this.makeGrid()); |
|
|
|
this.xAxis.push(...this.makeXaxis()); |
|
|
|
this.yAxis.push(...this.makeYaxis(eqArr.key)); |
|
|
|
this.series.push(...this.makeSeries({ equipmentName: eqArr.key, arr: eqArr })) |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
// handleAdd |
|
|
|
handleAdd() { } |
|
|
|
|
|
|
|
clear() { |
|
|
|
this.grid = []; |
|
|
|
this.xAxis = []; |
|
|
|
this.yAxis = []; |
|
|
|
this.series = []; |
|
|
|
this.currentGraphIndex = -2; |
|
|
|
this.gridIndex = -1; |
|
|
|
this.chart.dispose(); |
|
|
|
} |
|
|
|
|
|
|
|
// print option |
|
|
|
print() { |
|
|
|
console.log(JSON.stringify(this.option, null, 2)); |
|
|
|