This commit is contained in:
parent
8bd8f74a0e
commit
e47988d1b0
|
|
@ -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>
|
||||
Loading…
Reference in New Issue