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

refactor(track): 优化设备卡片布局和操作按钮样式

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