This commit is contained in:
JenniferW 2025-07-03 16:09:30 +08:00
parent 8bd8f74a0e
commit e47988d1b0
1 changed files with 103 additions and 1 deletions

View File

@ -87,6 +87,33 @@
</div>
</el-card>
</div>
<!-- 参数对比弹窗 -->
<el-dialog v-model="compareDialogVisible" title="参数对比" width="60%" top="40px" :close-on-click-modal="false">
<div class="compare-dialog-cards">
<el-card
v-for="item in selectedCompareList"
:key="item.code"
class="compare-card"
>
<img :src="item.image" class="compare-card-img" />
<div class="compare-card-info">
<div class="compare-card-name">{{ item.label }}</div>
<div class="compare-card-code">{{ item.code }}</div>
</div>
</el-card>
</div>
<div class="compare-table-wrap">
<el-table :data="compareTableData" border style="width: 100%">
<el-table-column prop="param" label="差异参数" width="180" />
<el-table-column
v-for="item in selectedCompareList"
:key="item.code"
:label="item.code"
:prop="item.code"
/>
</el-table>
</div>
</el-dialog>
</div>
<div v-else>
<div class="step">
@ -591,8 +618,49 @@ function onQuery() {
showQueryResult.value = true;
}
const compareDialogVisible = ref(false);
const selectedCompareList = computed(() => queryResultList.value.filter(i => i.selected));
const compareTableData = ref([
{
param: "动车组联轴节",
D310000000030: "鼓形齿式",
D310000000031: "鼓形齿式",
D310000000032: "齿式",
},
{
param: "O形橡胶密封圈",
D310000000030: "A.2耐用型",
D310000000031: "A.1耐热型",
D310000000032: "A.2耐用型",
},
{
param: "齿轮箱组成",
D310000000030: "不带联轴节",
D310000000031: "带联轴节",
D310000000032: "带联轴节",
},
{
param: "碳刷",
D310000000030: "耐热",
D310000000031: "耐用",
D310000000032: "耐热",
},
{
param: "齿轮箱温度传感器",
D310000000030: "耐热",
D310000000031: "耐热",
D310000000032: "耐寒",
},
]);
function onCompare() {
//
//
if (selectedCompareList.value.length === 0) {
ElMessage.warning("请先选择要对比的卡片");
return;
}
compareDialogVisible.value = true;
}
</script>
@ -1011,4 +1079,38 @@ function onCompare() {
font-size: 13px;
color: #888;
}
.compare-dialog-cards {
display: flex;
gap: 32px;
margin-bottom: 24px;
}
.compare-card {
width: 220px;
text-align: center;
box-sizing: border-box;
}
.compare-card-img {
width: 100%;
height: 120px;
object-fit: contain;
border-radius: 4px;
border: 1px solid #eee;
margin-bottom: 12px;
}
.compare-card-info {
text-align: center;
}
.compare-card-name {
font-size: 15px;
color: #333;
font-weight: 500;
margin-bottom: 4px;
}
.compare-card-code {
font-size: 13px;
color: #888;
}
.compare-table-wrap {
margin-top: 16px;
}
</style>