参数对比优化

src/views/order/intention/search.vue

@@ -173,6 +173,7 @@
               class="result-card-list-wrap"
               style="position: relative"
             >
+              <!-- 参数对比按钮 - 随滚动条移动 -->
               <el-button
                 v-if="selectedCompareList.length > 0"
                 type="warning"
@@ -252,13 +253,25 @@
           <el-dialog
             v-model="compareDialogVisible"
             title="参数对比"
-            width="80%"
+            width="1200px"
             top="40px"
             :close-on-click-modal="false"
           >
-            <!-- 表格对比区，图片放在表头下方 -->
+            <!-- 仅看不同项选项 -->
+            <div class="compare-filter-options" style="margin-bottom: 16px">
+              <el-radio-group v-model="showOnlyDifferences">
+                <el-radio :label="false">显示所有项</el-radio>
+                <el-radio :label="true">仅看不同项</el-radio>
+              </el-radio-group>
+            </div>
+
+            <!-- 表格对比区，添加横向滚动 -->
             <div class="compare-table-wrap">
-              <el-table :data="compareTableData" border style="width: 100%">
+              <el-table
+                :data="filteredCompareTableData"
+                border
+                style="width: 100%; min-width: 900px"
+              >
                 <el-table-column
                   prop="param"
                   label="参数"
@@ -274,6 +287,7 @@
                   :prop="item.productNumber"
                   align="center"
                   header-align="center"
+                  min-width="200"
                 >
                   <template #header="{ column }">
                     <div
@@ -291,6 +305,19 @@
                       }}</span>
                     </div>
                   </template>
+                  <!-- 单元格内容，不同的值标红 -->
+                  <template #default="scope">
+                    <span
+                      :class="{
+                        'different-value': isValueDifferent(
+                          scope.row.param,
+                          scope.row[scope.column.property]
+                        ),
+                      }"
+                    >
+                      {{ scope.row[scope.column.property] || "-" }}
+                    </span>
+                  </template>
                 </el-table-column>
               </el-table>
             </div>
@@ -397,24 +424,74 @@ const compareDialogVisible = ref(false);
 const selectedCompareList = computed(() =>
   filteredData.value.filter((i) => i.selected)
 );
+// 新增：仅显示不同项的开关
+const showOnlyDifferences = ref(false);
+// 存储参数差异信息的映射
+const parameterDifferences = ref({});
 
 // 确认弹窗
 const confirmDialogVisible = ref(false);
 
-// 生成对比表格数据
+// 生成对比表格数据并分析差异
 const compareTableData = computed(() => {
-  if (selectedCompareList.value.length === 0) return [];
+  if (selectedCompareList.value.length === 0) {
+    parameterDifferences.value = {};
+    return [];
+  }
+
+  // 重置差异映射
+  const differences = {};
 
   // 构建对比数据
-  return paramsToCompare.map((param) => {
+  const result = paramsToCompare.map((param) => {
     const row = { param };
+    const values = [];
+
+    // 收集所有产品的参数值
     selectedCompareList.value.forEach((item) => {
-      row[item.productNumber] = item[fieldMap[param]] || "-";
+      const value = item[fieldMap[param]] || "-";
+      row[item.productNumber] = value;
+      values.push(value);
     });
+
+    // 判断参数值是否全部相同
+    const allSame = values.every((v) => v === values[0]);
+    differences[param] = !allSame;
+
     return row;
   });
+
+  // 保存差异信息
+  parameterDifferences.value = differences;
+  return result;
 });
 
+// 过滤后的对比表格数据（根据"仅看不同项"选项）
+const filteredCompareTableData = computed(() => {
+  if (!showOnlyDifferences.value) {
+    return compareTableData.value;
+  }
+
+  // 只返回有差异的参数项
+  return compareTableData.value.filter(
+    (row) => parameterDifferences.value[row.param]
+  );
+});
+
+// 判断某个参数值是否不同
+const isValueDifferent = (param, value) => {
+  // 如果参数本身没有差异，直接返回false
+  if (!parameterDifferences.value[param]) return false;
+
+  // 获取该参数的所有值
+  const values = selectedCompareList.value.map(
+    (item) => item[fieldMap[param]] || "-"
+  );
+
+  // 判断当前值是否与第一个值不同
+  return value !== values[0];
+};
+
 // 收集所有可能的值用于匹配
 const allValues = ref([]);
 
@@ -1243,10 +1320,6 @@ watch(
 function toggleSelect(item) {
   // 统计已选中的数量
   const selectedCount = filteredData.value.filter((i) => i.selected).length;
-  // if (!item.selected && selectedCount >= 3) {
-  //   ElMessage.warning("最多只能选择3个卡片进行对比");
-  //   return;
-  // }
   item.selected = !item.selected;
 }
 
@@ -1719,13 +1792,15 @@ function handleConfirm() {
 }
 .compare-table-wrap {
   margin-top: 16px;
+  overflow-x: auto; /* 允许横向滚动 */
+  max-width: 100%; /* 限制最大宽度 */
 }
+/* 参数对比按钮样式 - 随滚动条移动 */
 .compare-btn-float {
-  /* 关键修改：相对于滚动容器固定定位 */
+  position: fixed; /* 修改为fixed定位，相对于视口固定 */
-  position: sticky;
+  top: 20px;
-  top: 20px; /* 距离滚动容器顶部的距离 */
   right: 20px;
-  z-index: 10;
+  z-index: 100; /* 提高层级确保可见 */
   width: 52px;
   height: 52px;
   display: flex;
@@ -1738,7 +1813,6 @@ function handleConfirm() {
   transition: all 0.25s ease;
   font-size: 13px;
   line-height: 1.3;
-  margin-left: auto; /* 右对齐 */
 }
 
 .compare-btn-float:hover {
@@ -1889,6 +1963,7 @@ function handleConfirm() {
 
 .tag-field {
   font-weight: 500;
+  font-weight: 500;
 }
 
 .tag-value {
@@ -2010,6 +2085,18 @@ function handleConfirm() {
   padding: 20px 0;
 }
 
+/* 新增：不同参数值的样式 */
+.different-value {
+  color: #ff4d4f; /* 红色 */
+  font-weight: 500;
+}
+
+/* 新增：对比筛选选项样式 */
+.compare-filter-options {
+  text-align: right;
+  padding-right: 10px;
+}
+
 @media (max-width: 768px) {
   .search-box {
     flex-direction: column;