|
|
@@ -32,8 +32,8 @@ |
|
|
|
id="time-chart__inner" |
|
|
|
ref="time-chart__inner" |
|
|
|
class="time-chart__inner" |
|
|
|
style="width: 100%; min-height: 50vh;" |
|
|
|
:style="{ height: autoHeight + 'px' }" |
|
|
|
style="min-height: 50vh;" |
|
|
|
:style="{ height: autoHeight + 'px', width: '100%' }" |
|
|
|
/> |
|
|
|
<div v-show="equipmentCount === 0">请先查询数据</div> |
|
|
|
<!-- <div v-show="equipmentCount === 0">{{ $t('module.basicData.visual.hints.searchFirst') }}</div> --> |
|
|
@@ -112,6 +112,9 @@ class ChartOption { |
|
|
|
show: true, |
|
|
|
alignWithLabel: true |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: true |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
show: true |
|
|
|
}, |
|
|
@@ -188,7 +191,7 @@ export default { |
|
|
|
rawTime: new Date(), |
|
|
|
dataForm: { |
|
|
|
wsId: null, |
|
|
|
productlines: [], |
|
|
|
productlines: null, |
|
|
|
startTime: null, |
|
|
|
entTime: null |
|
|
|
}, |
|
|
@@ -215,6 +218,14 @@ export default { |
|
|
|
this.getWorksetionList() |
|
|
|
}) |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.$nextTick(() => { |
|
|
|
this.initChart() |
|
|
|
}) |
|
|
|
}, |
|
|
|
updated() { |
|
|
|
if (this.chart) this.chart.resize() |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
timeType() { |
|
|
|
// 防止切换日期类型时报错 |
|
|
@@ -279,7 +290,7 @@ export default { |
|
|
|
dataList.map(item => { |
|
|
|
if (equipments[item.eqId]) { |
|
|
|
// 如果设备已存在 |
|
|
|
equipments[item.eqId].name = item.eqName |
|
|
|
// equipments[item.eqId].name = item.eqName |
|
|
|
equipments[item.eqId].status.push({ |
|
|
|
startTime: +new Date(item.startTime), |
|
|
|
endTime: +new Date(item.endTime), |
|
|
@@ -298,7 +309,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
// console.log('items --- ', equipments) |
|
|
|
console.log('created equipments --- ', equipments) |
|
|
|
return equipments |
|
|
|
}, |
|
|
|
// 把分组好的设备数据转换为echarts需要的series数据 |
|
|
@@ -324,16 +335,26 @@ export default { |
|
|
|
getDataList() { |
|
|
|
let startTime = this.rawTime |
|
|
|
? moment(this.rawTime) |
|
|
|
.set({ date: 1, hour: 0, minute: 0, second: 0, millisecond: 0 }) |
|
|
|
.set({ hour: 0, minute: 0, second: 0, millisecond: 0 }) |
|
|
|
.format('YYYY-MM-DDTHH:mm:ss') |
|
|
|
: '' |
|
|
|
let endTime = startTime |
|
|
|
? moment(startTime) |
|
|
|
.add(1, 'M') |
|
|
|
.add(1, 'd') |
|
|
|
.format('YYYY-MM-DDTHH:mm:ss') |
|
|
|
: '' |
|
|
|
const productlines = this.dataForm.productlines ? [this.dataForm.productlines] : [] |
|
|
|
const wsId = this.dataForm.wsId || '' |
|
|
|
|
|
|
|
/** keep a copy of query conditions */ |
|
|
|
this.$set(this.queryBuffer, 'productlines', productlines) |
|
|
|
this.$set(this.queryBuffer, 'wsId', wsId) |
|
|
|
this.$set(this.queryBuffer, 'startTime', startTime) |
|
|
|
this.$set(this.queryBuffer, 'endTime', endTime) |
|
|
|
|
|
|
|
this.dataListLoading = true |
|
|
|
|
|
|
|
/** fetch data */ |
|
|
|
this.$http({ |
|
|
|
url: this.$http.adornUrl('/monitoring/eqAnalysis/timeAndStatus'), |
|
|
|
method: 'post', |
|
|
@@ -346,15 +367,64 @@ export default { |
|
|
|
}).then(({ data: res }) => { |
|
|
|
if (res.code === 500) { |
|
|
|
this.dataList.splice(0) |
|
|
|
this.equipments = {} // 关闭 echarts 的显示 |
|
|
|
this.$message.error(res.msg) |
|
|
|
} else { |
|
|
|
this.dataList = res.data |
|
|
|
/** handle actual data */ |
|
|
|
this.dataList = res.data |
|
|
|
|
|
|
|
/** test data */ |
|
|
|
// this.dataList = [ |
|
|
|
// { |
|
|
|
// eqId: 'eq-001', |
|
|
|
// eqName: 'A1预热机', |
|
|
|
// startTime: '2022-05-04T00:30:34', |
|
|
|
// endTime: '2022-05-04T08:30:34', |
|
|
|
// status: 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// eqId: 'eq-001', |
|
|
|
// eqName: 'A1预热机', |
|
|
|
// startTime: '2022-05-04T08:30:34', |
|
|
|
// endTime: '2022-05-04T09:30:34', |
|
|
|
// status: 1 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// eqId: 'eq-001', |
|
|
|
// eqName: 'A1预热机', |
|
|
|
// startTime: '2022-05-04T09:30:34', |
|
|
|
// endTime: '2022-05-04T11:30:34', |
|
|
|
// status: 2 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// eqId: 'eq-001', |
|
|
|
// eqName: 'A1预热机', |
|
|
|
// startTime: '2022-05-04T11:30:34', |
|
|
|
// endTime: '2022-05-04T13:30:34', |
|
|
|
// status: 1 |
|
|
|
// } |
|
|
|
// ] |
|
|
|
|
|
|
|
this.equipments = this.transformDataToEquipments(this.dataList) |
|
|
|
this.chartOption.setYAxis(Object.keys(this.equipments).map(eId => this.equipments[eId].name)) |
|
|
|
console.log('(((set x axis))): ', this.dataList[0].startTime) |
|
|
|
this.chartOption.setXAxis(this.dataList[0].startTime) |
|
|
|
this.chartOption.setData(this.transformEquipmentsToSeries(this.equipments)) |
|
|
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
this.renderChart() |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
handleProductLineChange(val) { |
|
|
|
this.getWorksetionList() |
|
|
|
}, |
|
|
|
// 渲染 echarts |
|
|
|
renderChart() { |
|
|
|
console.log('>>> chart configs: ', this.chartOption) |
|
|
|
this.chart.setOption(this.chartOption) |
|
|
|
}, |
|
|
|
// 每页数 |
|
|
|
sizeChangeHandle(val) { |
|
|
|
this.pageSize = val |
|
|
@@ -383,3 +453,9 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
/* .time-chart__inner { |
|
|
|
transition: all 300ms ease-out; |
|
|
|
} */ |
|
|
|
</style> |