DeXun/klp-mono
9
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master'

Browse Source
This commit is contained in:
86156
2025-11-05 22:20:26 +08:00
parent 90e7933622 6b36deecfe
commit 39c745ebcb
1 changed files with 81 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
apps/l2/src/views/l2/track/rect.vue
View File

@@ -8,16 +8,10 @@
<div class="section-area">
<div class="section-header">入口段</div>
<div class="device-grid">
<div
v-for="device in entryDevicesList"
:key="device.positionNameEn"
class="device-card"
:class="{
active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
'has-data': hasRealtimeData(device.positionNameEn)
}"
@click="selectDevice(device.positionNameEn)"
>
<div v-for="device in entryDevicesList" :key="device.positionNameEn" class="device-card" :class="{
active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
'has-data': hasRealtimeData(device.positionNameEn)
}" @click="selectDevice(device.positionNameEn)">
<div class="device-name">{{ device.positionNameCn }}</div>
<div class="device-code">{{ device.positionNameEn }}</div>
<div class="device-status">
@@ -37,16 +31,10 @@
<div class="section-area">
<div class="section-header">熔炉段</div>
<div class="device-grid">
<div
v-for="device in furnaceDevicesList"
:key="device.positionNameEn"
class="device-card"
:class="{
active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
'has-data': hasRealtimeData(device.positionNameEn)
}"
@click="selectDevice(device.positionNameEn)"
>
<div v-for="device in furnaceDevicesList" :key="device.positionNameEn" class="device-card" :class="{
active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
'has-data': hasRealtimeData(device.positionNameEn)
}" @click="selectDevice(device.positionNameEn)">
<div class="device-name">{{ device.positionNameCn }}</div>
<div class="device-code">{{ device.positionNameEn }}</div>
<div class="device-status">
@@ -66,16 +54,10 @@
<div class="section-area">
<div class="section-header">涂层段</div>
<div class="device-grid">
<div
v-for="device in coatDevicesList"
:key="device.positionNameEn"
class="device-card"
:class="{
active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
'has-data': hasRealtimeData(device.positionNameEn)
}"
@click="selectDevice(device.positionNameEn)"
>
<div v-for="device in coatDevicesList" :key="device.positionNameEn" class="device-card" :class="{
active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
'has-data': hasRealtimeData(device.positionNameEn)
}" @click="selectDevice(device.positionNameEn)">
<div class="device-name">{{ device.positionNameCn }}</div>
<div class="device-code">{{ device.positionNameEn }}</div>
<div class="device-status">
@@ -95,16 +77,10 @@
<div class="section-area">
<div class="section-header">出口段</div>
<div class="device-grid">
<div
v-for="device in exitDevicesList"
:key="device.positionNameEn"
class="device-card"
:class="{
active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
'has-data': hasRealtimeData(device.positionNameEn)
}"
@click="selectDevice(device.positionNameEn)"
>
<div v-for="device in exitDevicesList" :key="device.positionNameEn" class="device-card" :class="{
active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
'has-data': hasRealtimeData(device.positionNameEn)
}" @click="selectDevice(device.positionNameEn)">
<div class="device-name">{{ device.positionNameCn }}</div>
<div class="device-code">{{ device.positionNameEn }}</div>
<div class="device-status">
@@ -121,7 +97,7 @@
</div>
</div>
</el-col>
<!-- 右侧：信息面板 -->
<el-col :span="8">
<div class="info-panels">
@@ -169,14 +145,38 @@
<div class="panel" v-if="selectedCard">
<div class="panel-title">操作</div>
<div class="btn-list">
<el-button size="small" type="primary" @click="handleOperate(selectedCard, 'ONLINE')" style="width: 100%; margin-bottom: 8px;">钢卷上线</el-button>
<el-button size="small" type="warning" @click="handleOperate(selectedCard, 'UNLOAD')" style="width: 100%; margin-bottom: 8px;">手动卸卷</el-button>
<el-button size="small" type="danger" @click="handleOperate(selectedCard, 'ALL_RETURN')" style="width: 100%; margin-bottom: 8px;">整卷回退</el-button>
<el-button size="small" type="danger" @click="handleOperate(selectedCard, 'HALF_RETURN')" style="width: 100%; margin-bottom: 8px;">半卷回退</el-button>
<el-button size="small" type="info" @click="handleOperate(selectedCard, 'BLOCK')" style="width: 100%;">卸卷并封闭</el-button>
<el-button class="action-btn" size="small" @click="handleOperate(selectedCard, 'ONLINE')">钢卷上线</el-button>
<el-button class="action-btn" size="small" @click="handleOperate(selectedCard, 'UNLOAD')">手动卸卷</el-button>
<el-button class="action-btn" size="small"
@click="handleOperate(selectedCard, 'ALL_RETURN')">整卷回退</el-button>
<el-button class="action-btn" size="small"
@click="handleOperate(selectedCard, 'HALF_RETURN')">半卷回退</el-button>
<el-button class="action-btn" size="small" @click="handleOperate(selectedCard, 'BLOCK')">卸卷并封闭</el-button>
</div>
</div>
<div class="panel">
<!-- 调整工具，选择两个位置，两个下拉选，分别双向绑定 -->
<el-form :model="adjustForm" ref="adjustForm" label-width="80px">
<el-form-item label="当前位置" prop="current">
<el-select v-model="adjustForm.current" placeholder="请选择当前位置">
<el-option v-for="item in matMapList" :key="item.positionNameEn" :label="item.positionNameCn"
:value="item.positionNameEn"></el-option>
</el-select>
</el-form-item>
<el-form-item label="目标位置" prop="target">
<el-select v-model="adjustForm.target" placeholder="请选择目标位置">
<el-option v-for="item in matMapList" :key="item.positionNameEn" :label="item.positionNameCn"
:value="item.positionNameEn"></el-option>
</el-select>
</el-form-item>
</el-form>
<el-button type="primary" :disabled="!adjustForm.current || !adjustForm.target"
@click="handleConfirmAdjust">确认调整</el-button>
</div>
</div>
</el-col>
</el-row>
@@ -319,40 +319,40 @@ export default {
},
// 入口段设备列表
entryDevicesList() {
return this.matMapList.filter(device =>
return this.matMapList.filter(device =>
['POR1', 'POR2', 'WELDER', 'ENL1', 'ENL2', 'CLEAN'].includes(device.positionNameEn)
)
},
// 熔炉段设备列表
furnaceDevicesList() {
return this.matMapList.filter(device =>
return this.matMapList.filter(device =>
['FUR1', 'FUR2', 'FUR3', 'FUR4'].includes(device.positionNameEn)
)
},
// 涂层段设备列表
coatDevicesList() {
return this.matMapList.filter(device =>
return this.matMapList.filter(device =>
['TM', 'TL', 'COAT'].includes(device.positionNameEn)
)
},
// 出口段设备列表
exitDevicesList() {
return this.matMapList.filter(device =>
return this.matMapList.filter(device =>
['CXL1', 'CXL2', 'TR', 'WEIT'].includes(device.positionNameEn)
)
},
// 根据选中设备获取详细数据
currentDeviceData() {
if (!this.selectedCard) return []
const deviceId = this.selectedCard.positionNameEn
const data = []
// 开卷机数据
if ((deviceId === 'POR1' || deviceId === 'POR2') && this.realtimeData.entry) {
const entry = this.realtimeData.entry
const reelNumber = entry.payOffReelNumber
if ((deviceId === 'POR1' && reelNumber === 1) || (deviceId === 'POR2' && reelNumber === 2)) {
data.push(
{ label: '入口钢卷ID', value: entry.entryCoilId || '--', unit: '' },
@@ -376,7 +376,7 @@ export default {
else if ((deviceId === 'ENL1' || deviceId === 'ENL2') && this.realtimeData.entry) {
const entry = this.realtimeData.entry
const reelNumber = entry.payOffReelNumber
if ((deviceId === 'ENL1' && reelNumber === 1) || (deviceId === 'ENL2' && reelNumber === 2)) {
data.push(
{ label: '入口活套位置', value: this.formatValue(entry.celLength), unit: 'm' },
@@ -481,7 +481,7 @@ export default {
else if (['CXL1', 'CXL2'].includes(deviceId) && this.realtimeData.exit && this.realtimeData.entry) {
const exit = this.realtimeData.exit
const reelNumber = this.realtimeData.entry.payOffReelNumber
// CXL1对应开卷机1，CXL2对应开卷机2
if ((deviceId === 'CXL1' && reelNumber === 1) || (deviceId === 'CXL2' && reelNumber === 2)) {
data.push(
@@ -512,7 +512,7 @@ export default {
{ label: '出口段速度', value: this.formatValue(exit.speedExitSection), unit: 'm/min' }
)
}
return data
}
},
@@ -549,7 +549,7 @@ export default {
// 判断设备是否有实时数据
hasRealtimeData(deviceId) {
if (!this.realtimeData) return false
// 入口段设备
if (['POR1', 'POR2', 'WELDER', 'ENL1', 'ENL2', 'CLEAN'].includes(deviceId) && this.realtimeData.entry) {
if (deviceId === 'POR1' && this.realtimeData.entry.payOffReelNumber === 1) return true
@@ -570,14 +570,14 @@ export default {
if (deviceId === 'CXL1' && reelNumber === 1) return true
if (deviceId === 'CXL2' && reelNumber === 2) return true
}
return false
},
// 获取设备钢卷号
getDeviceCoilId(deviceId) {
const deviceInfo = this.getDeviceInfo(deviceId)
// 开卷机特殊处理
if (deviceId === 'POR1' || deviceId === 'POR2') {
if (this.realtimeData.entry) {
@@ -588,18 +588,18 @@ export default {
return '空闲'
}
}
return deviceInfo?.matId || '空闲'
},
// 获取设备卡片上显示的迷你实时数据
getMiniRealtimeData(deviceId) {
const data = []
if ((deviceId === 'POR1' || deviceId === 'POR2') && this.realtimeData.entry) {
const entry = this.realtimeData.entry
const reelNumber = entry.payOffReelNumber
if ((deviceId === 'POR1' && reelNumber === 1) || (deviceId === 'POR2' && reelNumber === 2)) {
data.push(
{ label: '速度', value: this.formatValue(entry.stripSpeed) + ' m/min' },
@@ -613,7 +613,7 @@ export default {
} else if ((deviceId === 'ENL1' || deviceId === 'ENL2') && this.realtimeData.entry) {
const entry = this.realtimeData.entry
const reelNumber = entry.payOffReelNumber
if ((deviceId === 'ENL1' && reelNumber === 1) || (deviceId === 'ENL2' && reelNumber === 2)) {
data.push(
{ label: '位置', value: this.formatValue(entry.celLength) + ' m' },
@@ -658,7 +658,7 @@ export default {
)
} else if (['CXL1', 'CXL2'].includes(deviceId) && this.realtimeData.exit && this.realtimeData.entry) {
const reelNumber = this.realtimeData.entry.payOffReelNumber
// CXL1对应开卷机1，CXL2对应开卷机2
if ((deviceId === 'CXL1' && reelNumber === 1) || (deviceId === 'CXL2' && reelNumber === 2)) {
data.push(
@@ -676,7 +676,7 @@ export default {
{ label: '长度', value: this.formatValue(this.realtimeData.exit.coilLength) + ' m' }
)
}
return data
},
@@ -734,17 +734,17 @@ export default {
// WebSocket连接
connectWebSocket() {
if (this.socket) return
const url = 'ws://140.143.206.120:18081/websocket?type=track_measure'
try {
this.socket = new WebSocket(url)
this.socket.onopen = () => {
console.log('WebSocket已连接')
this.isConnected = true
}
this.socket.onmessage = (event) => {
try {
const data = JSON.parse(event.data)
@@ -754,12 +754,12 @@ export default {
console.error('数据解析错误:', error)
}
}
this.socket.onerror = (error) => {
console.error('WebSocket错误:', error)
this.isConnected = false
}
this.socket.onclose = () => {
console.log('WebSocket已关闭')
this.isConnected = false
@@ -786,7 +786,7 @@ export default {
if (data.appMeasureExitMessage) {
this.$set(this.realtimeData, 'exit', data.appMeasureExitMessage)
}
// 强制更新视图
this.$forceUpdate()
},
@@ -819,7 +819,6 @@ export default {
}).then(() => {
adjustPosition(params).then(() => {
this.$message.success('调整成功')
this.exitAdjustMode()
this.fetchData()
}).catch(err => {
console.error('调整失败：', err)
@@ -872,7 +871,7 @@ export default {
this.fetchData()
this.connectWebSocket()
},
beforeDestroy() {
this.disconnectWebSocket()
}
@@ -880,11 +879,6 @@ export default {
</script>
<style scoped>
.track-container {
padding: 20px;
background: #fff;
}
.device-layout {
background: #f5f5f5;
border-radius: 4px;
@@ -1064,8 +1058,6 @@ export default {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
max-height: 500px;
overflow-y: auto;
}
.data-item {
@@ -1085,7 +1077,7 @@ export default {
.data-value {
font-size: 24px;
font-weight: 600;
color: #333;
color: #333;
margin-bottom: 4px;
font-family: 'Arial', sans-serif;
}
@@ -1097,6 +1089,12 @@ export default {
.btn-list {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.action-btn {
margin-bottom: 8px;
width: 80px;
height: 40px;
}
</style>