mt-fe-group/yudao-dev
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

Browse Source
This commit is contained in:
lb 2023-10-09 11:37:19 +08:00
parent e985c73e00
commit b39f0625a1
2 changed files with 83 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
src/views/equipment/timing-diagram/status/demo.js
View File

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

62
src/views/equipment/timing-diagram/status/index.vue
View File

@ -47,7 +47,7 @@
</div> </div>
</el-col> </el-col>
</el-row> </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> <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> <h2 v-if="!graphList || graphList.length == 0" class="no-data-bg"></h2>
</div> </div>
@ -126,6 +126,7 @@ export default {
recordTime: null, recordTime: null,
}, },
graphList: [], graphList: [],
existingEquipments: [],
open: false, open: false,
eqList: [], eqList: [],
startTime: null, startTime: null,
@ -165,12 +166,9 @@ export default {
handler(val) { handler(val) {
if (val && val.length) { if (val && val.length) {
this.$nextTick(() => { this.$nextTick(() => {
// if (!this.chart) this.initChart();
// this.setInitialConfig();
// this.handleGraphList();
if (!this.gantt) { if (!this.gantt) {
this.gantt = new Gantt(null, this.startTime); this.gantt = new Gantt('#status-chart', this.startTime);
this.gantt.init('#status-chart'); this.gantt.init(val);
return; return;
} }
this.gantt.update(val); this.gantt.update(val);
@ -184,43 +182,6 @@ export default {
}, },
}, },
methods: { 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() { findMin() {
let min = 0; let min = 0;
this.graphList.forEach((arr) => { this.graphList.forEach((arr) => {
@ -231,12 +192,6 @@ export default {
return min; return min;
}, },
initChart() {
const el = document.getElementById('status-chart');
this.gantt = new Gantt(el);
this.gantt.init();
},
/** 重置查询条件 */ /** 重置查询条件 */
initQuery() { initQuery() {
this.queryParams.lineId = null; this.queryParams.lineId = null;
@ -261,8 +216,8 @@ export default {
params: this.queryParams, params: this.queryParams,
}); });
if (code == 0) { if (code == 0) {
this.existingEquipments = Object.values(data).map((eq) => eq[0].equipmentId);
this.graphList = this.objectToArray(data); this.graphList = this.objectToArray(data);
console.log('graph list', this.graphList);
} }
}, },
@ -348,8 +303,7 @@ export default {
return; return;
} }
this.startTime = new Date(payload.recordTime).getTime(); this.startTime = new Date(payload.recordTime)
console.log("startTime", new Date(payload.recordTime).getTime());
this.queryParams.lineId = payload.lineId || null; this.queryParams.lineId = payload.lineId || null;
this.queryParams.sectionId = payload.sectionId || null; this.queryParams.sectionId = payload.sectionId || null;
this.queryParams.equipmentId = payload.equipmentId || null; this.queryParams.equipmentId = payload.equipmentId || null;
@ -379,6 +333,10 @@ export default {
}, },
async submitForm() { async submitForm() {
if (this.existingEquipments.indexOf(this.queryParams.equipmentId) >= 0) {
this.$message.error('该设备已存在');
return;
}
const { code, data } = await this.$axios({ const { code, data } = await this.$axios({
url: '/analysis/equipment-analysis/status', url: '/analysis/equipment-analysis/status',
method: 'get', method: 'get',