refactor(实时监控): 重构实时监控组件的数据处理和显示逻辑
- 将数据源参数从大写改为首字母大写以保持一致性 - 重构带钢位置进度计算为计算属性 - 扩展并优化各段指标配置,增加更多监控项 - 调整网格布局为8列以适应新增指标 - 优化WebSocket数据处理逻辑,移除冗余代码
This commit is contained in:
@@ -29,7 +29,7 @@
|
|||||||
<!-- 带钢位置卡片 -->
|
<!-- 带钢位置卡片 -->
|
||||||
<div class="strip-status-card">
|
<div class="strip-status-card">
|
||||||
<span class="strip-status-label">带钢位置</span>
|
<span class="strip-status-label">带钢位置</span>
|
||||||
<span class="strip-status-value">{{ getRealtimeValueBySource('ENTRY', 'stripLocation') }}</span>
|
<span class="strip-status-value">{{ getRealtimeValueBySource('Entry', 'stripLocation') }}</span>
|
||||||
<span class="strip-status-unit">m</span>
|
<span class="strip-status-unit">m</span>
|
||||||
<div class="progress-container">
|
<div class="progress-container">
|
||||||
<div class="progress-bar">
|
<div class="progress-bar">
|
||||||
@@ -41,7 +41,7 @@
|
|||||||
<!-- 带钢速度卡片 -->
|
<!-- 带钢速度卡片 -->
|
||||||
<div class="strip-status-card">
|
<div class="strip-status-card">
|
||||||
<span class="strip-status-label">带钢速度</span>
|
<span class="strip-status-label">带钢速度</span>
|
||||||
<span class="strip-status-value">{{ getRealtimeValueBySource('ENTRY', 'stripSpeed') }}</span>
|
<span class="strip-status-value">{{ getRealtimeValueBySource('Entry', 'stripSpeed') }}</span>
|
||||||
<span class="strip-status-unit">m/min</span>
|
<span class="strip-status-unit">m/min</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -55,7 +55,7 @@
|
|||||||
<div class="metrics-grid-3">
|
<div class="metrics-grid-3">
|
||||||
<div class="metric-box" v-for="it in entryMetrics" :key="'entry_' + it.field">
|
<div class="metric-box" v-for="it in entryMetrics" :key="'entry_' + it.field">
|
||||||
<span class="metric-name">{{ it.label || getFieldLabel(it.field) }}</span>
|
<span class="metric-name">{{ it.label || getFieldLabel(it.field) }}</span>
|
||||||
<span class="metric-value">{{ getRealtimeValueBySource('ENTRY', it.field) }}</span>
|
<span class="metric-value">{{ getRealtimeValueBySource('Entry', it.field) }}</span>
|
||||||
<span class="metric-unit">{{ it.unit || getFieldUnit(it.field) }}</span>
|
<span class="metric-unit">{{ it.unit || getFieldUnit(it.field) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -67,10 +67,10 @@
|
|||||||
<div class="metrics-grid-3">
|
<div class="metrics-grid-3">
|
||||||
<div class="metric-box" v-for="it in furnaceMetrics" :key="'furnace_' + it.actualField">
|
<div class="metric-box" v-for="it in furnaceMetrics" :key="'furnace_' + it.actualField">
|
||||||
<span class="metric-name">{{ it.label || getFieldLabel(it.actualField) }}</span>
|
<span class="metric-name">{{ it.label || getFieldLabel(it.actualField) }}</span>
|
||||||
<span class="metric-value">{{ getRealtimeValueBySource('FURNACE', it.actualField) }}</span>
|
<span class="metric-value">{{ getRealtimeValueBySource('Furnace', it.actualField) }}</span>
|
||||||
<span class="metric-unit">{{ it.unit || getFieldUnit(it.actualField) }}</span>
|
<span class="metric-unit">{{ it.unit || getFieldUnit(it.actualField) }}</span>
|
||||||
<span class="metric-set-value" v-if="it.setField">
|
<span class="metric-set-value" v-if="it.setField">
|
||||||
设定: {{ getRealtimeValueBySource('FURNACE', it.setField) }}
|
设定: {{ getRealtimeValueBySource('Furnace', it.setField) }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -81,7 +81,7 @@
|
|||||||
<div class="metrics-grid-3">
|
<div class="metrics-grid-3">
|
||||||
<div class="metric-box" v-for="it in coatMetrics" :key="'coat_' + it.field">
|
<div class="metric-box" v-for="it in coatMetrics" :key="'coat_' + it.field">
|
||||||
<span class="metric-name">{{ it.label || getFieldLabel(it.field) }}</span>
|
<span class="metric-name">{{ it.label || getFieldLabel(it.field) }}</span>
|
||||||
<span class="metric-value">{{ getRealtimeValueBySource('COAT', it.field) }}</span>
|
<span class="metric-value">{{ getRealtimeValueBySource('Coat', it.field) }}</span>
|
||||||
<span class="metric-unit">{{ it.unit || getFieldUnit(it.field) }}</span>
|
<span class="metric-unit">{{ it.unit || getFieldUnit(it.field) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -93,7 +93,7 @@
|
|||||||
<div class="metrics-grid-3">
|
<div class="metrics-grid-3">
|
||||||
<div class="metric-box" v-for="it in exitMetrics" :key="'exit_' + it.field">
|
<div class="metric-box" v-for="it in exitMetrics" :key="'exit_' + it.field">
|
||||||
<span class="metric-name">{{ it.label || getFieldLabel(it.field) }}</span>
|
<span class="metric-name">{{ it.label || getFieldLabel(it.field) }}</span>
|
||||||
<span class="metric-value">{{ getRealtimeValueBySource('EXIT', it.field) }}</span>
|
<span class="metric-value">{{ getRealtimeValueBySource('Exit', it.field) }}</span>
|
||||||
<span class="metric-unit">{{ it.unit || getFieldUnit(it.field) }}</span>
|
<span class="metric-unit">{{ it.unit || getFieldUnit(it.field) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -138,28 +138,60 @@ export default {
|
|||||||
},
|
},
|
||||||
latestMeasure: null, // 最新测量数据
|
latestMeasure: null, // 最新测量数据
|
||||||
socketDataAppended: false, // socket数据是否已追加
|
socketDataAppended: false, // socket数据是否已追加
|
||||||
stripLocationProgress: 0, // 带钢位置进度百分比
|
|
||||||
// 各段指标配置
|
// 各段指标配置
|
||||||
entryMetrics: [
|
entryMetrics: [
|
||||||
|
{ field: 'stripLocation', label: '带钢位置', unit: 'm' },
|
||||||
{ field: 'stripSpeed', label: '带钢速度', unit: 'm/min' },
|
{ field: 'stripSpeed', label: '带钢速度', unit: 'm/min' },
|
||||||
{ field: 'tensionPorBr1', label: '张力POR-BR1', unit: 'kN' },
|
{ field: 'tensionPorBr1', label: '张力POR-BR1', unit: 'kN' },
|
||||||
{ field: 'tensionBr1Br2', label: '张力BR1-BR2', unit: 'kN' },
|
{ field: 'tensionBr1Br2', label: '张力BR1-BR2', unit: 'kN' },
|
||||||
{ field: 'tensionBr2Br3', label: '张力BR2-BR3', unit: 'kN' }
|
{ field: 'tensionBr2Br3', label: '张力BR2-BR3', unit: 'kN' },
|
||||||
|
|
||||||
],
|
],
|
||||||
furnaceMetrics: [
|
furnaceMetrics: [
|
||||||
{ actualField: 'jcf1FurnaceTemperatureActual', setField: 'jcf1FurnaceTemperatureSet', label: 'JCF1温度', unit: '℃' },
|
{ actualField: 'jcf1FurnaceTemperatureActual', setField: 'jcf1FurnaceTemperatureSet', label: 'JCF1炉温', unit: '℃' },
|
||||||
{ actualField: 'jcf2FurnaceTemperatureActual', setField: 'jcf2FurnaceTemperatureSet', label: 'JCF2温度', unit: '℃' },
|
{ actualField: 'jcf2FurnaceTemperatureActual', setField: 'jcf2FurnaceTemperatureSet', label: 'JCF2炉温', unit: '℃' },
|
||||||
{ actualField: 'lbzFurnaceTemperatureActual', setField: 'lbzFurnaceTemperatureSet', label: 'LBZ温度', unit: '℃' }
|
{ actualField: 'lbzFurnaceTemperatureActual', setField: 'lbzFurnaceTemperatureSet', label: 'LBZ炉温', unit: '℃' },
|
||||||
|
{ actualField: 'lthFurnaceTemperatureActual', setField: 'lthFurnaceTemperatureSet', label: 'LTH炉温', unit: '℃' },
|
||||||
|
{ actualField: 'nof1FurnaceTemperatureActual', setField: 'nof1FurnaceTemperatureSet', label: 'NOF1炉温', unit: '℃' },
|
||||||
|
{ actualField: 'nof2FurnaceTemperatureActual', setField: 'nof2FurnaceTemperatureSet', label: 'NOF2炉温', unit: '℃' },
|
||||||
|
{ actualField: 'nof3FurnaceTemperatureActual', setField: 'nof3FurnaceTemperatureSet', label: 'NOF3炉温', unit: '℃' },
|
||||||
|
{ actualField: 'nof4FurnaceTemperatureActual', setField: 'nof4FurnaceTemperatureSet', label: 'NOF4炉温', unit: '℃' },
|
||||||
|
{ actualField: 'nof5FurnaceTemperatureActual', setField: 'nof5FurnaceTemperatureSet', label: 'NOF5炉温', unit: '℃' },
|
||||||
|
{ actualField: 'phFurnaceTemperatureActual', setField: null, label: 'PH炉温', unit: '℃' },
|
||||||
|
{ actualField: 'rtf1FurnaceTemperatureActual', setField: 'rtf1FurnaceTemperatureSet', label: 'RTF1炉温', unit: '℃' },
|
||||||
|
{ actualField: 'rtf2FurnaceTemperatureActual', setField: 'rtf2FurnaceTemperatureSet', label: 'RTF2炉温', unit: '℃' },
|
||||||
|
{ actualField: 'sfFurnaceTemperatureActual', setField: 'sfFurnaceTemperatureSet', label: 'SF炉温', unit: '℃' },
|
||||||
|
{ actualField: 'tdsFurnaceTemperatureActual', setField: 'tdsFurnaceTemperatureSet', label: 'TDS炉温', unit: '℃' },
|
||||||
],
|
],
|
||||||
coatMetrics: [
|
coatMetrics: [
|
||||||
{ field: 'avrCoatingWeightTop', label: '上涂层重量', unit: 'g/m²' },
|
{ field: 'avrCoatingWeightTop', label: '上层平均涂层重量', unit: 'g/m²' },
|
||||||
{ field: 'avrCoatingWeightBottom', label: '下涂层重量', unit: 'g/m²' },
|
{ field: 'avrCoatingWeightBottom', label: '下层平均涂层重量', unit: 'g/m²' },
|
||||||
{ field: 'airKnifePressure', label: '气刀压力', unit: 'bar' }
|
{ field: 'airKnifePressure', label: '气刀压力', unit: '' },
|
||||||
|
{ field: 'stripSpeedTmExit', label: 'TM出口速度', unit: 'm/min' }
|
||||||
],
|
],
|
||||||
exitMetrics: [
|
exitMetrics: [
|
||||||
{ field: 'tensionBr8Br9', label: '张力BR8-BR9', unit: 'kN' },
|
{ field: 'alkaliConcentration', label: '碱液浓度', unit: '' },
|
||||||
{ field: 'tensionBr9Tr', label: '张力BR9-TR', unit: 'kN' },
|
{ field: 'alkaliTemperature', label: '碱液温度', unit: '℃' },
|
||||||
{ field: 'speedExitSection', label: '出口速度', unit: 'm/min' }
|
{ field: 'celCapacity', label: '电池容量', unit: '' },
|
||||||
|
{ field: 'celLength', label: '电池长度', unit: 'm' },
|
||||||
|
{ field: 'cleaningCurrent', label: '清洗电流', unit: 'A' },
|
||||||
|
{ field: 'cleaningVoltage', label: '清洗电压', unit: 'V' },
|
||||||
|
{ field: 'dryingTemperature', label: '干燥温度', unit: '℃' },
|
||||||
|
{ field: 'entryCoilId', label: '入口卷号', unit: '' },
|
||||||
|
{ field: 'hotAirFlow', label: '热风流量', unit: '' },
|
||||||
|
{ field: 'hotAirPressure', label: '热风压力', unit: '' },
|
||||||
|
{ field: 'payOffReelNumber', label: '放卷卷号', unit: '' },
|
||||||
|
{ field: 'rinseConductivity', label: '冲洗电导率', unit: '' },
|
||||||
|
{ field: 'rinseTemperature', label: '冲洗温度', unit: '℃' },
|
||||||
|
{ field: 'stripLocation', label: '带钢位置', unit: 'm' },
|
||||||
|
{ field: 'stripSpeed', label: '带钢速度', unit: 'm/min' },
|
||||||
|
{ field: 'tensionBr1Br2', label: '张力 BR1-BR2', unit: 'daN' },
|
||||||
|
{ field: 'tensionBr2Br3', label: '张力 BR2-BR3', unit: 'daN' },
|
||||||
|
{ field: 'tensionPorBr1', label: '入口张力 POR-BR1', unit: 'daN' },
|
||||||
|
{ field: 'tensionBr8Br9', label: '张力 BR8-BR9', unit: 'daN' },
|
||||||
|
{ field: 'tensionBr9Tr', label: '张力 BR9-TR', unit: 'daN' },
|
||||||
|
{ field: 'speedExitSection', label: '出口速度', unit: 'm/min' },
|
||||||
|
{ field: 'coilLength', label: '钢卷长度', unit: 'm' }
|
||||||
],
|
],
|
||||||
// ECharts实例缓存
|
// ECharts实例缓存
|
||||||
chartInstances: {
|
chartInstances: {
|
||||||
@@ -170,6 +202,20 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
// 带钢位置进度(位置/3000)
|
||||||
|
stripLocationProgress() {
|
||||||
|
if (this.isDestroyed) return 0
|
||||||
|
const m = this.latestMeasure || {}
|
||||||
|
const entry = m.appMeasureEntryMessage || {}
|
||||||
|
const location = entry.stripLocation !== null && entry.stripLocation !== undefined
|
||||||
|
? parseFloat(entry.stripLocation) || 0
|
||||||
|
: 0
|
||||||
|
const maxLocation = 3000
|
||||||
|
const progress = (location / maxLocation) * 100
|
||||||
|
return Math.min(Math.max(progress, 0), 100)
|
||||||
|
},
|
||||||
|
},
|
||||||
// Vue2生命周期钩子
|
// Vue2生命周期钩子
|
||||||
created() {
|
created() {
|
||||||
// 组件创建时加载初始数据
|
// 组件创建时加载初始数据
|
||||||
@@ -329,8 +375,6 @@ export default {
|
|||||||
console.error('WebSocket错误:', error)
|
console.error('WebSocket错误:', error)
|
||||||
},
|
},
|
||||||
onMessage: (event) => {
|
onMessage: (event) => {
|
||||||
// if (isDestroyed) return
|
|
||||||
console.log('收到消息:', event, vm)
|
|
||||||
if (!vm) {
|
if (!vm) {
|
||||||
isDestroyed = true
|
isDestroyed = true
|
||||||
return
|
return
|
||||||
@@ -352,12 +396,11 @@ export default {
|
|||||||
try {
|
try {
|
||||||
vm.latestMeasure = payload
|
vm.latestMeasure = payload
|
||||||
|
|
||||||
|
console.log('更新数据:', payload)
|
||||||
vm.appendStripSpeedPoint(payload)
|
vm.appendStripSpeedPoint(payload)
|
||||||
vm.updateLastTime()
|
vm.updateLastTime()
|
||||||
// 实时更新图表
|
// 实时更新图表
|
||||||
vm.updateCharts()
|
vm.updateCharts()
|
||||||
// 更新带钢位置进度
|
|
||||||
vm.stripLocationProgress = vm.getRealtimeValueBySource('ENTRY', 'stripLocation') * 10 || 0
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
isDestroyed = true
|
isDestroyed = true
|
||||||
console.error('更新实时数据失败:', e)
|
console.error('更新实时数据失败:', e)
|
||||||
@@ -479,7 +522,7 @@ export default {
|
|||||||
// 追加带钢速度数据点
|
// 追加带钢速度数据点
|
||||||
appendStripSpeedPoint(payload) {
|
appendStripSpeedPoint(payload) {
|
||||||
const now = new Date().toTimeString().slice(0, 8)
|
const now = new Date().toTimeString().slice(0, 8)
|
||||||
const speed = payload.stripSpeed || 0
|
const speed = payload.appMeasureEntryMessage.stripSpeed || 0
|
||||||
this.pushSeries('stripSpeed', now, { stripSpeed: speed })
|
this.pushSeries('stripSpeed', now, { stripSpeed: speed })
|
||||||
},
|
},
|
||||||
// 更新最后更新时间
|
// 更新最后更新时间
|
||||||
@@ -490,7 +533,8 @@ export default {
|
|||||||
getRealtimeValueBySource(source, field) {
|
getRealtimeValueBySource(source, field) {
|
||||||
if (!this.latestMeasure) return '--'
|
if (!this.latestMeasure) return '--'
|
||||||
// 按source映射到不同的字段前缀/规则
|
// 按source映射到不同的字段前缀/规则
|
||||||
const value = this.latestMeasure[field] || 0
|
console.log('source:', source, field, this.latestMeasure[`appMeasure${source}Message`])
|
||||||
|
const value = this.latestMeasure[`appMeasure${source}Message`][field] || 0
|
||||||
return value.toFixed(2) // 格式化显示
|
return value.toFixed(2) // 格式化显示
|
||||||
},
|
},
|
||||||
// 获取字段标签
|
// 获取字段标签
|
||||||
@@ -682,7 +726,7 @@ export default {
|
|||||||
/* 指标网格样式 */
|
/* 指标网格样式 */
|
||||||
.metrics-grid-3 {
|
.metrics-grid-3 {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(8, 1fr);
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user