|
|
@@ -24,6 +24,9 @@ |
|
|
|
<el-button @click="getDataList()">{{ $t('search') }}</el-button> |
|
|
|
<!-- <el-button v-if="$hasPermission('monitoring:equipmentEffiency:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> --> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-button type="success" @click="addEq()">{{ '添加设备' }}</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
|
|
|
|
<div class="time-chart" style="margin-top: 10px;"> |
|
|
@@ -38,6 +41,16 @@ |
|
|
|
<div v-show="equipmentCount === 0">请先查询数据</div> |
|
|
|
<!-- <div v-show="equipmentCount === 0">{{ $t('module.basicData.visual.hints.searchFirst') }}</div> --> |
|
|
|
</div> |
|
|
|
|
|
|
|
<el-dialog :visible.sync="dialogVisible" :title="'添加设备'" width="30%"> |
|
|
|
<el-select v-model="eqId" style="width: 100%" placeholder="请选择设备" clearable> |
|
|
|
<el-option v-for="eq in dialogEqList" :key="eq.id" :label="eq.name" :value="eq.id" /> |
|
|
|
</el-select> |
|
|
|
<div slot="footer"> |
|
|
|
<el-button @click="dialogVisible = false">{{ '取消' }}</el-button> |
|
|
|
<el-button type="primary" @click="dialogConfirm">{{ '确定' }}</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
@@ -183,7 +196,7 @@ export default { |
|
|
|
equipments: {}, |
|
|
|
state: ['正常', '停机', '故障'], |
|
|
|
colors: ['#4caf50', '#ffb300', '#e53935'], |
|
|
|
queryBuffer: {}, |
|
|
|
// queryBuffer: {}, |
|
|
|
// tableConfigs, |
|
|
|
calcMaxHeight, |
|
|
|
timeType: 'range', |
|
|
@@ -199,7 +212,11 @@ export default { |
|
|
|
pageIndex: 1, |
|
|
|
pageSize: 10, |
|
|
|
totalPage: 0, |
|
|
|
dataListLoading: false |
|
|
|
dataListLoading: false, |
|
|
|
/** dialog */ |
|
|
|
dialogVisible: false, |
|
|
|
eqId: null, |
|
|
|
dialogEqList: [] |
|
|
|
} |
|
|
|
}, |
|
|
|
components: { |
|
|
@@ -217,6 +234,7 @@ export default { |
|
|
|
this.getProductLineList().then(() => { |
|
|
|
this.getWorksetionList() |
|
|
|
}) |
|
|
|
this.getEqList() |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.$nextTick(() => { |
|
|
@@ -312,6 +330,7 @@ export default { |
|
|
|
console.log('created equipments --- ', equipments) |
|
|
|
return equipments |
|
|
|
}, |
|
|
|
|
|
|
|
// 把分组好的设备数据转换为echarts需要的series数据 |
|
|
|
transformEquipmentsToSeries(equipments) { |
|
|
|
const seriesData = [] |
|
|
@@ -343,27 +362,20 @@ export default { |
|
|
|
.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 |
|
|
|
// this.dataListLoading = true |
|
|
|
const condition = { |
|
|
|
startTime, |
|
|
|
endTime, |
|
|
|
productlines: [this.dataForm.productlines], |
|
|
|
wsId: this.dataForm.wsId |
|
|
|
} |
|
|
|
|
|
|
|
/** fetch data */ |
|
|
|
this.$http({ |
|
|
|
url: this.$http.adornUrl('/monitoring/eqAnalysis/timeAndStatus'), |
|
|
|
method: 'post', |
|
|
|
data: { |
|
|
|
startTime, |
|
|
|
endTime, |
|
|
|
productlines: [this.dataForm.productlines], |
|
|
|
wsId: this.dataForm.wsId |
|
|
|
} |
|
|
|
data: condition |
|
|
|
}).then(({ data: res }) => { |
|
|
|
if (res.code === 500) { |
|
|
|
this.dataList.splice(0) |
|
|
@@ -371,8 +383,8 @@ export default { |
|
|
|
this.$message.error(res.msg) |
|
|
|
} else { |
|
|
|
/** handle actual data */ |
|
|
|
this.dataList = res.data |
|
|
|
|
|
|
|
this.dataList = res.data |
|
|
|
|
|
|
|
/** test data */ |
|
|
|
// this.dataList = [ |
|
|
|
// { |
|
|
@@ -417,14 +429,91 @@ export default { |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
handleProductLineChange(val) { |
|
|
|
this.getWorksetionList() |
|
|
|
}, |
|
|
|
|
|
|
|
// 渲染 echarts |
|
|
|
renderChart() { |
|
|
|
console.log('>>> chart configs: ', this.chartOption) |
|
|
|
this.chart.setOption(this.chartOption) |
|
|
|
}, |
|
|
|
|
|
|
|
// 获取对话框里的设备列表 |
|
|
|
getEqList() { |
|
|
|
this.$http({ |
|
|
|
url: this.$http.adornUrl('/monitoring/equipment/page'), |
|
|
|
method: 'get', |
|
|
|
params: this.$http.adornParams({ |
|
|
|
page: 1, |
|
|
|
limit: 99999 |
|
|
|
}) |
|
|
|
}).then(({ data }) => { |
|
|
|
if (data && data.code === 0) { |
|
|
|
this.dialogEqList = data.data.list |
|
|
|
} else { |
|
|
|
this.dialogEqList.splice(0) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
// 添加设备 |
|
|
|
addEq() { |
|
|
|
if (this.equipmentCount) { |
|
|
|
this.dialogVisible = true |
|
|
|
} else { |
|
|
|
this.$message.warning('请先查询数据') |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 确认添加设备 |
|
|
|
dialogConfirm() { |
|
|
|
let startTime = this.rawTime |
|
|
|
? moment(this.rawTime) |
|
|
|
.set({ hour: 0, minute: 0, second: 0, millisecond: 0 }) |
|
|
|
.format('YYYY-MM-DDTHH:mm:ss') |
|
|
|
: '' |
|
|
|
let endTime = startTime |
|
|
|
? moment(startTime) |
|
|
|
.add(1, 'd') |
|
|
|
.format('YYYY-MM-DDTHH:mm:ss') |
|
|
|
: '' |
|
|
|
|
|
|
|
const condition = { |
|
|
|
startTime, |
|
|
|
endTime, |
|
|
|
productlines: [this.dataForm.productlines], |
|
|
|
wsId: this.dataForm.wsId, |
|
|
|
eqId: this.eqId |
|
|
|
} |
|
|
|
|
|
|
|
/** fetch data */ |
|
|
|
this.$http({ |
|
|
|
url: this.$http.adornUrl('/monitoring/eqAnalysis/timeAndStatus'), |
|
|
|
method: 'post', |
|
|
|
data: condition |
|
|
|
}).then(({ data: res }) => { |
|
|
|
if (res.code === 500) { |
|
|
|
this.$message.error(res.msg) |
|
|
|
} else { |
|
|
|
/** handle new equipment */ |
|
|
|
const newEqStatusList = res.data |
|
|
|
console.log('添加设备', res) |
|
|
|
const newEq = this.transformDataToEquipments(newEqStatusList) |
|
|
|
this.$set(this.equipments, Object.keys(newEq)[0], newEq[Object.keys(newEq)[0]]) |
|
|
|
this.chartOption.setYAxis(Object.keys(this.equipments).map(item => this.equipments[item].name)) |
|
|
|
this.chartOption.setData(this.transformEquipmentsToSeries(this.equipments)) |
|
|
|
|
|
|
|
this.$message.success('新设备数据获取成功') |
|
|
|
this.$nextTick(() => { |
|
|
|
this.dialogVisible = false |
|
|
|
this.renderChart() |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
// 每页数 |
|
|
|
sizeChangeHandle(val) { |
|
|
|
this.pageSize = val |
|
|
|