|
@@ -147,7 +147,7 @@ var categories = []; |
|
|
var types = [ |
|
|
var types = [ |
|
|
{ name: '运行', color: '#5ad8a6' }, |
|
|
{ name: '运行', color: '#5ad8a6' }, |
|
|
{ name: '故障', color: '#fc9c91' }, |
|
|
{ name: '故障', color: '#fc9c91' }, |
|
|
{ name: '停机', color: '#000' }, |
|
|
|
|
|
|
|
|
{ name: '计划停机', color: '#000' }, |
|
|
]; |
|
|
]; |
|
|
function getStartTime(timestamp) { |
|
|
function getStartTime(timestamp) { |
|
|
return new Date(new Date(timestamp).toLocaleDateString()).getTime(); |
|
|
return new Date(new Date(timestamp).toLocaleDateString()).getTime(); |
|
@@ -157,7 +157,7 @@ function renderItem(params, api) { |
|
|
var start = api.coord([api.value(1), categoryIndex]); |
|
|
var start = api.coord([api.value(1), categoryIndex]); |
|
|
var end = api.coord([api.value(2), categoryIndex]); |
|
|
var end = api.coord([api.value(2), categoryIndex]); |
|
|
// var height = api.size([0, 1])[1] * 0.8; |
|
|
// var height = api.size([0, 1])[1] * 0.8; |
|
|
var height = 56 |
|
|
|
|
|
|
|
|
var height = 56; |
|
|
var rectShape = echarts.graphic.clipRectByRect( |
|
|
var rectShape = echarts.graphic.clipRectByRect( |
|
|
{ |
|
|
{ |
|
|
x: start[0], |
|
|
x: start[0], |
|
@@ -252,7 +252,7 @@ export default { |
|
|
lineId: null, |
|
|
lineId: null, |
|
|
sectionId: null, |
|
|
sectionId: null, |
|
|
equipmentId: null, |
|
|
equipmentId: null, |
|
|
recordTime: [], |
|
|
|
|
|
|
|
|
recordTime: null, |
|
|
}, |
|
|
}, |
|
|
graphList: [], |
|
|
graphList: [], |
|
|
open: false, |
|
|
open: false, |
|
@@ -299,8 +299,8 @@ export default { |
|
|
}, |
|
|
}, |
|
|
xAxis: { |
|
|
xAxis: { |
|
|
type: 'time', |
|
|
type: 'time', |
|
|
min: getStartTime(1691568181000), |
|
|
|
|
|
max: getStartTime(1691568181000 + 3600 * 24 * 1000), |
|
|
|
|
|
|
|
|
min: getStartTime(1691568181000), // <=== |
|
|
|
|
|
max: getStartTime(1691568181000 + 3600 * 24 * 1000), // <=== |
|
|
splitNumber: 10, |
|
|
splitNumber: 10, |
|
|
axisLabel: { |
|
|
axisLabel: { |
|
|
// rotate: -15, |
|
|
// rotate: -15, |
|
@@ -326,7 +326,6 @@ export default { |
|
|
}, |
|
|
}, |
|
|
axisLabel: { |
|
|
axisLabel: { |
|
|
fontSize: 18, |
|
|
fontSize: 18, |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
axisTick: { |
|
|
axisTick: { |
|
|
show: false, |
|
|
show: false, |
|
@@ -334,7 +333,7 @@ export default { |
|
|
splitLine: { |
|
|
splitLine: { |
|
|
show: true, |
|
|
show: true, |
|
|
}, |
|
|
}, |
|
|
data: categories, |
|
|
|
|
|
|
|
|
data: [], // <==== |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
axisLine: { |
|
|
axisLine: { |
|
@@ -357,7 +356,7 @@ export default { |
|
|
x: [1, 2], |
|
|
x: [1, 2], |
|
|
y: 0, |
|
|
y: 0, |
|
|
}, |
|
|
}, |
|
|
data: data, |
|
|
|
|
|
|
|
|
data: [], // <=== |
|
|
}, |
|
|
}, |
|
|
], |
|
|
], |
|
|
}, |
|
|
}, |
|
@@ -395,6 +394,43 @@ export default { |
|
|
|
|
|
|
|
|
handleGraphList() { |
|
|
handleGraphList() { |
|
|
console.log('in handleGraphList:', this.graphList); |
|
|
console.log('in handleGraphList:', this.graphList); |
|
|
|
|
|
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) => { |
|
|
|
|
|
arr.forEach((item) => { |
|
|
|
|
|
if (min < item.startTime) min = item.startTime; |
|
|
|
|
|
}); |
|
|
|
|
|
}); |
|
|
|
|
|
return min; |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
initChart() { |
|
|
initChart() { |
|
@@ -407,7 +443,7 @@ export default { |
|
|
this.queryParams.lineId = null; |
|
|
this.queryParams.lineId = null; |
|
|
this.queryParams.equipmentId = null; |
|
|
this.queryParams.equipmentId = null; |
|
|
this.queryParams.sectionId = null; |
|
|
this.queryParams.sectionId = null; |
|
|
this.queryParams.recordTime = []; |
|
|
|
|
|
|
|
|
this.queryParams.recordTime = null; |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
/** 对象到数组的转换 */ |
|
|
/** 对象到数组的转换 */ |
|
|