309 lines
8.2 KiB
Vue
309 lines
8.2 KiB
Vue
<template>
|
|
<div id="container" ref="container" class="processMonitoring">
|
|
<div class="top-box">
|
|
<div class="top-search1">
|
|
<el-radio-group v-model="type" @change="changeType">
|
|
<el-radio-button label="实时数据">实时数据</el-radio-button>
|
|
<el-radio-button label="历史数据">历史数据</el-radio-button>
|
|
</el-radio-group>
|
|
</div>
|
|
<div class="top-search2">
|
|
<search-bar
|
|
:formConfigs="formConfig"
|
|
ref="searchBarForm"
|
|
@headBtnClick="buttonClick"
|
|
@cascader-change="cascaderSelect"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="bottom-box">
|
|
<div class="title-box">
|
|
<span class="title">{{ type }}</span>
|
|
</div>
|
|
<div v-if="type === '实时数据'">
|
|
<base-table
|
|
:page="listQuery.current"
|
|
:limit="listQuery.size"
|
|
:table-props="tableProps"
|
|
:table-data="tableData"
|
|
:max-height="tableH"
|
|
:row-class-name="tableRowClassName"
|
|
/>
|
|
<pagination
|
|
:page.sync="listQuery.current"
|
|
:limit.sync="listQuery.size"
|
|
:total="total"
|
|
@pagination="getRealList"
|
|
/>
|
|
</div>
|
|
<div v-else>
|
|
<process-monitoring-chart :beilv="beilv" :chartMsg="historyList" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import processMonitoringChart from './components/processMonitoringChart.vue'
|
|
import {
|
|
getParamList,
|
|
getPageReal,
|
|
getPageHistory
|
|
} from '@/api/processManagement'
|
|
import { getTreeData } from '@/api/app'
|
|
import { tableHeight } from '@/utils/index'
|
|
const tableProps = [
|
|
{
|
|
prop: 'paramName',
|
|
label: '工艺参数',
|
|
minWidth: 150,
|
|
showOverflowtooltip: true
|
|
},
|
|
{
|
|
prop: 'variableName',
|
|
label: '变量名称',
|
|
minWidth: 150,
|
|
showOverflowtooltip: true
|
|
},
|
|
{
|
|
prop: 'eqName',
|
|
label: '所属设备',
|
|
minWidth: 150
|
|
},
|
|
{
|
|
prop: 'unitName',
|
|
label: '所属单元',
|
|
minWidth: 120
|
|
},
|
|
{
|
|
prop: 'value',
|
|
label: '实时值',
|
|
minWidth: 120
|
|
}
|
|
]
|
|
export default {
|
|
name: 'ProcessMonitoring',
|
|
data() {
|
|
return {
|
|
beilv: 1,
|
|
type: '实时数据',
|
|
formConfig: [
|
|
{
|
|
type: '',
|
|
label: '',
|
|
dateType: 'datetimerange',
|
|
format: 'yyyy-MM-dd HH:mm:ss',
|
|
valueFormat: 'yyyy-MM-ddTHH:mm:ss',
|
|
rangeSeparator: '-',
|
|
startPlaceholder: '开始时间',
|
|
endPlaceholder: '结束时间',
|
|
placeholder: '时间范围',
|
|
param: 'timeStr',
|
|
width: 350
|
|
},
|
|
{
|
|
type: 'cascader',
|
|
label: '产线/单元/设备',
|
|
selectOptions: [],
|
|
param: 'equipmentId',
|
|
cascaderProps: { checkStrictly: false, value: 'id', label: 'name' },
|
|
onChange: true,
|
|
width: 250
|
|
},
|
|
{
|
|
type: 'select',
|
|
label: '工艺参数',
|
|
labelField: 'paramName',
|
|
valueField: 'paramName',
|
|
selectOptions: [],
|
|
filterable: true,
|
|
param: 'paramName',
|
|
defaultSelect: '',
|
|
width: 180
|
|
},
|
|
{
|
|
type: 'button',
|
|
btnName: '查询',
|
|
name: 'search',
|
|
color: 'primary'
|
|
}
|
|
],
|
|
listQuery: {
|
|
current: 1,
|
|
size: 20,
|
|
equipmentId: '',
|
|
paramName: '',
|
|
startTime: '',
|
|
endTime: ''
|
|
},
|
|
tableProps,
|
|
tableData: [],
|
|
tableH: tableHeight(340),
|
|
total: 0,
|
|
historyList: []
|
|
}
|
|
},
|
|
components: { processMonitoringChart },
|
|
mounted() {
|
|
this.beilv = document.getElementById('container').offsetWidth / 1920
|
|
window.addEventListener('resize', () => {
|
|
this.tableH = tableHeight(340)
|
|
this.beilv = document.getElementById('container').offsetWidth / 1920
|
|
console.log(this.beilv)
|
|
})
|
|
this.getTree()
|
|
this.getRealList()
|
|
},
|
|
methods: {
|
|
// 实时数据
|
|
getRealList() {
|
|
getPageReal({ ...this.listQuery }).then((res) => {
|
|
console.log(res)
|
|
if (res.code === 0) {
|
|
this.tableData = res.data.records
|
|
this.total = res.data.total
|
|
}
|
|
})
|
|
},
|
|
// 历史数据
|
|
getHistoryList() {
|
|
if (!this.listQuery.startTime || !this.listQuery.endTime) {
|
|
this.$message.error('时间范围不能为空')
|
|
return false
|
|
}
|
|
if (!this.listQuery.equipmentId) {
|
|
this.$message.error('设备名称不能为空')
|
|
return false
|
|
}
|
|
if (!this.listQuery.paramName) {
|
|
this.$message.error('工艺参数不能为空')
|
|
return false
|
|
}
|
|
getPageHistory({
|
|
startTime: this.listQuery.startTime,
|
|
endTime: this.listQuery.endTime,
|
|
equipmentId: this.listQuery.equipmentId,
|
|
paramName: this.listQuery.paramName
|
|
}).then((res) => {
|
|
if (res.code === 0) {
|
|
this.historyList = res.data
|
|
}
|
|
})
|
|
},
|
|
getTree() {
|
|
getTreeData().then((res) => {
|
|
this.formConfig[1].selectOptions = res.data
|
|
})
|
|
},
|
|
buttonClick(val) {
|
|
if (this.type === '实时数据') {
|
|
this.listQuery.startTime = ''
|
|
this.listQuery.endTime = ''
|
|
this.listQuery.equipmentId = val.equipmentId ? val.equipmentId[2] : ''
|
|
this.listQuery.paramName = val.paramName ? val.paramName : ''
|
|
this.getRealList()
|
|
} else {
|
|
this.listQuery.startTime = val.timeStr ? val.timeStr[0] : ''
|
|
this.listQuery.endTime = val.timeStr ? val.timeStr[1] : ''
|
|
this.listQuery.equipmentId = val.equipmentId ? val.equipmentId[2] : ''
|
|
this.listQuery.paramName = val.paramName ? val.paramName : ''
|
|
this.getHistoryList()
|
|
}
|
|
},
|
|
changeType(val) {
|
|
this.$refs.searchBarForm.resetForm()
|
|
this.listQuery.startTime = ''
|
|
this.listQuery.endTime = ''
|
|
this.listQuery.equipmentId = ''
|
|
this.listQuery.paramName = ''
|
|
this.formConfig[2].selectOptions = []
|
|
if (val === '历史数据') {
|
|
this.formConfig[0].type = 'datePicker'
|
|
this.formConfig[0].label = '时间范围'
|
|
this.formConfig[0].defaultSelect = []
|
|
this.formConfig[1].defaultSelect = []
|
|
this.formConfig[2].defaultSelect = ''
|
|
} else {
|
|
this.formConfig[0].type = ''
|
|
this.formConfig[0].label = ''
|
|
this.formConfig[0].defaultSelect = []
|
|
this.formConfig[1].defaultSelect = []
|
|
this.formConfig[2].defaultSelect = ''
|
|
this.getRealList()
|
|
}
|
|
},
|
|
cascaderSelect(val) {
|
|
console.log(val)
|
|
if (val.value.length === 3) {
|
|
console.log('333333333333333')
|
|
this.listQuery.equipmentId = val.value[2]
|
|
getParamList({
|
|
current: 1,
|
|
size: 1000,
|
|
equipmentId: this.listQuery.equipmentId
|
|
}).then((res) => {
|
|
console.log(res)
|
|
let obj = { ...this.$refs.searchBarForm.formInline }
|
|
this.$refs.searchBarForm.resetForm()
|
|
this.formConfig[0].defaultSelect = obj.timeStr
|
|
this.formConfig[1].defaultSelect = JSON.parse(
|
|
JSON.stringify(obj.equipmentId)
|
|
)
|
|
this.formConfig[2].defaultSelect = ''
|
|
this.formConfig[2].selectOptions = res.data
|
|
})
|
|
} else {
|
|
console.log('清空')
|
|
this.formConfig[1].defaultSelect = ''
|
|
this.$refs.searchBarForm.resetForm()
|
|
this.formConfig[2].selectOptions = []
|
|
}
|
|
},
|
|
tableRowClassName({ row }) {
|
|
if (row.overLimit) {
|
|
return 'danger-row'
|
|
}
|
|
return ''
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.processMonitoring {
|
|
.top-box,
|
|
.bottom-box {
|
|
margin: 8px 16px;
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
}
|
|
.bottom-box {
|
|
padding: 16px;
|
|
height: calc(100vh - 218px);
|
|
.title-box {
|
|
margin-bottom: 16px;
|
|
}
|
|
.title::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 4px;
|
|
height: 16px;
|
|
background-color: #0b58ff;
|
|
vertical-align: middle;
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
.top-box {
|
|
padding: 10px 16px 1px;
|
|
.top-search1,
|
|
.top-search2 {
|
|
display: inline-block;
|
|
}
|
|
.top-search1 {
|
|
height: 50px;
|
|
padding-top: 5px;
|
|
vertical-align: bottom;
|
|
margin-right: 24px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|