update 基本完成设备状态时序图

This commit is contained in:
g7hoo 2022-09-22 15:02:38 +08:00
parent 5a45aead7c
commit 4f39481693

View File

@ -24,6 +24,9 @@
<el-button @click="getDataList()">{{ $t('search') }}</el-button> <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-button v-if="$hasPermission('monitoring:equipmentEffiency:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> -->
</el-form-item> </el-form-item>
<el-form-item>
<el-button type="success" @click="addEq()">{{ '添加设备' }}</el-button>
</el-form-item>
</el-form> </el-form>
<div class="time-chart" style="margin-top: 10px;"> <div class="time-chart" style="margin-top: 10px;">
@ -38,6 +41,16 @@
<div v-show="equipmentCount === 0">请先查询数据</div> <div v-show="equipmentCount === 0">请先查询数据</div>
<!-- <div v-show="equipmentCount === 0">{{ $t('module.basicData.visual.hints.searchFirst') }}</div> --> <!-- <div v-show="equipmentCount === 0">{{ $t('module.basicData.visual.hints.searchFirst') }}</div> -->
</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> </div>
</template> </template>
@ -183,7 +196,7 @@ export default {
equipments: {}, equipments: {},
state: ['正常', '停机', '故障'], state: ['正常', '停机', '故障'],
colors: ['#4caf50', '#ffb300', '#e53935'], colors: ['#4caf50', '#ffb300', '#e53935'],
queryBuffer: {}, // queryBuffer: {},
// tableConfigs, // tableConfigs,
calcMaxHeight, calcMaxHeight,
timeType: 'range', timeType: 'range',
@ -199,7 +212,11 @@ export default {
pageIndex: 1, pageIndex: 1,
pageSize: 10, pageSize: 10,
totalPage: 0, totalPage: 0,
dataListLoading: false dataListLoading: false,
/** dialog */
dialogVisible: false,
eqId: null,
dialogEqList: []
} }
}, },
components: { components: {
@ -217,6 +234,7 @@ export default {
this.getProductLineList().then(() => { this.getProductLineList().then(() => {
this.getWorksetionList() this.getWorksetionList()
}) })
this.getEqList()
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
@ -312,6 +330,7 @@ export default {
console.log('created equipments --- ', equipments) console.log('created equipments --- ', equipments)
return equipments return equipments
}, },
// echartsseries // echartsseries
transformEquipmentsToSeries(equipments) { transformEquipmentsToSeries(equipments) {
const seriesData = [] const seriesData = []
@ -343,27 +362,20 @@ export default {
.add(1, 'd') .add(1, 'd')
.format('YYYY-MM-DDTHH:mm:ss') .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.dataListLoading = true
this.$set(this.queryBuffer, 'productlines', productlines) const condition = {
this.$set(this.queryBuffer, 'wsId', wsId) startTime,
this.$set(this.queryBuffer, 'startTime', startTime) endTime,
this.$set(this.queryBuffer, 'endTime', endTime) productlines: [this.dataForm.productlines],
wsId: this.dataForm.wsId
this.dataListLoading = true }
/** fetch data */ /** fetch data */
this.$http({ this.$http({
url: this.$http.adornUrl('/monitoring/eqAnalysis/timeAndStatus'), url: this.$http.adornUrl('/monitoring/eqAnalysis/timeAndStatus'),
method: 'post', method: 'post',
data: { data: condition
startTime,
endTime,
productlines: [this.dataForm.productlines],
wsId: this.dataForm.wsId
}
}).then(({ data: res }) => { }).then(({ data: res }) => {
if (res.code === 500) { if (res.code === 500) {
this.dataList.splice(0) this.dataList.splice(0)
@ -371,8 +383,8 @@ export default {
this.$message.error(res.msg) this.$message.error(res.msg)
} else { } else {
/** handle actual data */ /** handle actual data */
this.dataList = res.data this.dataList = res.data
/** test data */ /** test data */
// this.dataList = [ // this.dataList = [
// { // {
@ -417,14 +429,91 @@ export default {
} }
}) })
}, },
handleProductLineChange(val) { handleProductLineChange(val) {
this.getWorksetionList() this.getWorksetionList()
}, },
// echarts // echarts
renderChart() { renderChart() {
console.log('>>> chart configs: ', this.chartOption) console.log('>>> chart configs: ', this.chartOption)
this.chart.setOption(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) { sizeChangeHandle(val) {
this.pageSize = val this.pageSize = val