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

lb #39

Merged
g7hoo merged 16 commits from lb into test 2023-10-11 10:33:08 +08:00
Conversation 0 Commits 16 Files Changed 44 +83 -143
2 changed files with 83 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b39f0625a1 - Show all commits

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

@ -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));

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

@ -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',