refactor(track): 优化设备卡片布局和操作按钮样式
- 简化设备卡片的模板结构,提高代码可读性 - 调整操作按钮布局为水平排列并设置固定尺寸 - 移除冗余的CSS样式
This commit is contained in:
@@ -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"
|
|
||||||
:key="device.positionNameEn"
|
|
||||||
class="device-card"
|
|
||||||
:class="{
|
|
||||||
active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
|
active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
|
||||||
'has-data': hasRealtimeData(device.positionNameEn)
|
'has-data': hasRealtimeData(device.positionNameEn)
|
||||||
}"
|
}" @click="selectDevice(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"
|
|
||||||
:key="device.positionNameEn"
|
|
||||||
class="device-card"
|
|
||||||
:class="{
|
|
||||||
active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
|
active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
|
||||||
'has-data': hasRealtimeData(device.positionNameEn)
|
'has-data': hasRealtimeData(device.positionNameEn)
|
||||||
}"
|
}" @click="selectDevice(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"
|
|
||||||
:key="device.positionNameEn"
|
|
||||||
class="device-card"
|
|
||||||
:class="{
|
|
||||||
active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
|
active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
|
||||||
'has-data': hasRealtimeData(device.positionNameEn)
|
'has-data': hasRealtimeData(device.positionNameEn)
|
||||||
}"
|
}" @click="selectDevice(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"
|
|
||||||
:key="device.positionNameEn"
|
|
||||||
class="device-card"
|
|
||||||
:class="{
|
|
||||||
active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
|
active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
|
||||||
'has-data': hasRealtimeData(device.positionNameEn)
|
'has-data': hasRealtimeData(device.positionNameEn)
|
||||||
}"
|
}" @click="selectDevice(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">
|
||||||
@@ -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>
|
||||||
|
|
||||||
@@ -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)
|
||||||
@@ -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 {
|
||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user