test #47
@ -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],
|
||||
data: arr.map(item => ({
|
||||
name: ['运行', '故障', '计划停机'][item.status],
|
||||
value: [0, item.startTime, item.startTime + item.duration * 60 * 1000, 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,
|
||||
|
||||
},
|
||||
},
|
||||
],
|
||||
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));
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="main-area" style="flex: 1; background: lightyellow; display: flex; flex-direction: column">
|
||||
<div class="main-area" style="flex: 1; display: flex; flex-direction: column">
|
||||
<div class="graphs" v-show="graphList.length" id="status-chart" style="height: 1px; flex: 1"></div>
|
||||
<h2 v-if="!graphList || graphList.length == 0" class="no-data-bg"></h2>
|
||||
</div>
|
||||
@ -126,6 +126,7 @@ export default {
|
||||
recordTime: null,
|
||||
},
|
||||
graphList: [],
|
||||
existingEquipments: [],
|
||||
open: false,
|
||||
eqList: [],
|
||||
startTime: null,
|
||||
@ -165,12 +166,9 @@ export default {
|
||||
handler(val) {
|
||||
if (val && val.length) {
|
||||
this.$nextTick(() => {
|
||||
// if (!this.chart) this.initChart();
|
||||
// this.setInitialConfig();
|
||||
// this.handleGraphList();
|
||||
if (!this.gantt) {
|
||||
this.gantt = new Gantt(null, this.startTime);
|
||||
this.gantt.init('#status-chart');
|
||||
this.gantt = new Gantt('#status-chart', this.startTime);
|
||||
this.gantt.init(val);
|
||||
return;
|
||||
}
|
||||
this.gantt.update(val);
|
||||
@ -184,43 +182,6 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
setInitialConfig() {
|
||||
console.log('in setInitialConfig', this.chartOption);
|
||||
this.chart.setOption(this.chartOption);
|
||||
},
|
||||
|
||||
handleGraphList() {
|
||||
console.log('in handleGraphList:', this.graphList);
|
||||
return;
|
||||
const min = this.queryParams.recordTime
|
||||
? new Date(this.queryParams.recordTime).getTime()
|
||||
: this.findMin();
|
||||
|
||||
console.log('min is', min);
|
||||
this.chartOption.xAxis.min = getStartTime(min);
|
||||
this.chartOption.xAxis.max = getStartTime(min + 3600 * 24 * 1000);
|
||||
this.graphList.forEach((arr) => {
|
||||
this.chartOption.yAxis[0].data.push(arr.key);
|
||||
arr.forEach((item) => {
|
||||
this.chartOption.series[0].data.push({
|
||||
name: ['运行', '故障', '计划停机'][item.status],
|
||||
value: [
|
||||
0,
|
||||
item.startTime,
|
||||
item.startTime + item.duration * 60 * 1000,
|
||||
item.duration * 60 * 1000,
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[item.status].color,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
console.log('chartOptions', this.chartOption);
|
||||
});
|
||||
},
|
||||
|
||||
findMin() {
|
||||
let min = 0;
|
||||
this.graphList.forEach((arr) => {
|
||||
@ -231,12 +192,6 @@ export default {
|
||||
return min;
|
||||
},
|
||||
|
||||
initChart() {
|
||||
const el = document.getElementById('status-chart');
|
||||
this.gantt = new Gantt(el);
|
||||
this.gantt.init();
|
||||
},
|
||||
|
||||
/** 重置查询条件 */
|
||||
initQuery() {
|
||||
this.queryParams.lineId = null;
|
||||
@ -261,8 +216,8 @@ export default {
|
||||
params: this.queryParams,
|
||||
});
|
||||
if (code == 0) {
|
||||
this.existingEquipments = Object.values(data).map((eq) => eq[0].equipmentId);
|
||||
this.graphList = this.objectToArray(data);
|
||||
console.log('graph list', this.graphList);
|
||||
}
|
||||
},
|
||||
|
||||
@ -348,8 +303,7 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
this.startTime = new Date(payload.recordTime).getTime();
|
||||
console.log("startTime", new Date(payload.recordTime).getTime());
|
||||
this.startTime = new Date(payload.recordTime)
|
||||
this.queryParams.lineId = payload.lineId || null;
|
||||
this.queryParams.sectionId = payload.sectionId || null;
|
||||
this.queryParams.equipmentId = payload.equipmentId || null;
|
||||
@ -379,6 +333,10 @@ export default {
|
||||
},
|
||||
|
||||
async submitForm() {
|
||||
if (this.existingEquipments.indexOf(this.queryParams.equipmentId) >= 0) {
|
||||
this.$message.error('该设备已存在');
|
||||
return;
|
||||
}
|
||||
const { code, data } = await this.$axios({
|
||||
url: '/analysis/equipment-analysis/status',
|
||||
method: 'get',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user