forked from mt-fe-group/mt-yd-ui
update 基本完成设备状态时序图
This commit is contained in:
parent
5a45aead7c
commit
4f39481693
@ -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)
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user