外墙重新设计后，选项居中显示

src/views/AIDesign/design.vue

@@ -719,36 +719,85 @@ export default class extends Vue {
           if (response.Data.F_UserFilePath) {
             this.selectedImage = response.Data.BaseUrl + response.Data.F_UserFilePath;
           }
+          //设计风格
           if (response.Data.F_Color) {
             this.DesignStyle = this.designStyles[0].value;
           } else {
-              this.DesignStyle = this.cardValueFindIndex(response.Data.F_DesignStyle,this.designStyles) == -1 ? this.designStyles[0].value : response.Data.F_DesignStyle;
-            // this.DesignStyle = response.Data.F_DesignStyle || this.designStyles[0].value;
+              let DesignStyleIndex = this.cardValueFindIndex(response.Data.F_DesignStyle,this.designStyles);
+              if (DesignStyleIndex == -1){
+                  this.DesignStyle = this.designStyles[0].value;
+              } else {
+                  this.selectStyle(response.Data.F_DesignStyle,'designsRef',DesignStyleIndex);
+              }
+          }
+          //仿石漆电子色卡
+          let ColorCardIndex = this.cardValueFindIndex(response.Data.F_ColorCard,this.stoneColors);
+          if (ColorCardIndex == -1) {
+              this.ColorCard = this.stoneColors[0].value;
+          }else {
+              this.selectColor(response.Data.F_ColorCard,'stoneColorsRef',ColorCardIndex);
+          }
+          //墙面工艺
+          let selectedProcessIndex = this.cardValueFindIndex(response.Data.F_DeepGrooveTech,this.deepSlotProcesses);
+          if (selectedProcessIndex == -1){
+              this.selectedProcess = this.deepSlotProcesses[0].value;
+          }else {
+              this.selectProcess(response.Data.F_DeepGrooveTech,'processesRef',selectedProcessIndex);
           }
-            this.ColorCard = this.cardValueFindIndex(response.Data.F_ColorCard,this.stoneColors) == -1 ? this.stoneColors[0].value : response.Data.F_ColorCard;
-          // this.ColorCard = response.Data.F_ColorCard || this.stoneColors[0].value;
-            this.selectedProcess = this.cardValueFindIndex(response.Data.F_DeepGrooveTech,this.deepSlotProcesses) == -1 ? this.deepSlotProcesses[0].value : response.Data.F_DeepGrooveTech;
-            // this.selectedProcess = response.Data.F_DeepGrooveTech || this.deepSlotProcesses[0].value;
           // 有墙面工艺
             if (this.selectedProcess && this.selectedProcess != '平涂') {
                 const selectedProcessSelctIndex = this.deepSlotProcesses.findIndex(item => item.value === this.selectedProcess);
                 // 墙面分割线选项
                 this.splitWays = this.deepSlotProcesses[selectedProcessSelctIndex].subitems;
-                this.selectedSplit = this.cardValueFindIndex(response.Data.F_DivisionMethod,this.splitWays) == -1 ? this.splitWays[0].value : response.Data.F_DivisionMethod;
-                // this.selectedSplit = response.Data.F_DivisionMethod || this.splitWays[0].value;
+                let selectedSplitIndex = this.cardValueFindIndex(response.Data.F_DivisionMethod,this.splitWays);
+                if (selectedSplitIndex == -1){
+                    this.selectedSplit = this.splitWays[0].value;
+                } else {
+                    this.selectSplit(response.Data.F_DivisionMethod,'splitsRef',selectedSplitIndex);
+                }
+            }
+            //窗套颜色
+            let selectedWindowFrameIndex = this.cardValueFindIndex(response.Data.F_WindowsColor,this.windowFrames);
+            if (selectedWindowFrameIndex == -1){
+                this.selectedWindowFrame = this.windowFrames[0].value;
+            } else {
+                this.selectWindowFrame(response.Data.F_WindowsColor,'windowsRef',selectedWindowFrameIndex);
+            }
+            //栏杆
+            let selectedRailingIndex = this.cardValueFindIndex(response.Data.F_CastRailing,this.railings);
+            if (selectedRailingIndex == -1){
+                this.selectedRailing = this.railings[0].value;
+            } else {
+                this.selectRailing(response.Data.F_CastRailing,'railingsRef',selectedRailingIndex);
+            }
+            //新琉璃瓦
+            let selectedTileIndex = this.cardValueFindIndex(response.Data.F_GlazedTile,this.tiles);
+            if (selectedTileIndex == -1){
+                this.selectedTile = this.tiles[0].value;
+            } else {
+                this.selectTile(response.Data.F_GlazedTile,'tilesRef',selectedTileIndex);
+            }
+            //墙裙
+            let selectedSkirtTypeIndex = this.cardValueFindIndex(response.Data.F_SkirtType,this.skirtTypes);
+            if (selectedSkirtTypeIndex == -1){
+                this.selectedSkirtType = this.skirtTypes[0].value;
+            } else {
+                this.selectSkirtType(response.Data.F_SkirtType,'skirtTypesRef',selectedSkirtTypeIndex);
+            }
+            //浮雕
+            let selectedReliefTypeIndex = this.cardValueFindIndex(response.Data.F_carvingType,this.outsideRelief);
+            if (selectedReliefTypeIndex == -1){
+                this.selectedReliefType = this.outsideRelief[0].value;
+            } else {
+                this.selectReliefType(response.Data.F_carvingType.value, 'outsideReliefRef', selectedReliefTypeIndex)
+            }
+            //窗套样式
+            let selectedWindowStyleIndex = this.cardValueFindIndex(response.Data.F_WindowsStyle,this.WindowStyle);
+            if (selectedWindowStyleIndex == -1){
+                this.selectedWindowStyle = this.WindowStyle[0].value;
+            } else {
+                this.selectWindowFrame(response.Data.F_WindowsStyle, 'windowsRef', selectedWindowStyleIndex)
             }
-            this.selectedWindowFrame = this.cardValueFindIndex(response.Data.F_WindowsColor,this.windowFrames) == -1 ? this.windowFrames[0].value : response.Data.F_WindowsColor;
-            // this.selectedWindowFrame = response.Data.F_WindowsColor || this.windowFrames[0].value;
-            this.selectedRailing = this.cardValueFindIndex(response.Data.F_CastRailing,this.railings) == -1 ? this.railings[0].value : response.Data.F_CastRailing;
-            // this.selectedRailing = response.Data.F_CastRailing || this.railings[0].value;
-            this.selectedTile = this.cardValueFindIndex(response.Data.F_GlazedTile,this.tiles) == -1 ? this.tiles[0].value : response.Data.F_GlazedTile;
-            // this.selectedTile = response.Data.F_GlazedTile || this.tiles[0].value;//新琉璃瓦
-            this.selectedSkirtType = this.cardValueFindIndex(response.Data.F_SkirtType,this.skirtTypes) == -1 ? this.skirtTypes[0].value : response.Data.F_SkirtType;
-            // this.selectedSkirtType = response.Data.F_SkirtType || this.skirtTypes[0].value;//墙裙
-            this.selectedReliefType = this.cardValueFindIndex(response.Data.F_carvingType,this.outsideRelief) == -1 ? this.outsideRelief[0].value : response.Data.F_carvingType;
-            // this.selectedReliefType = response.Data.F_carvingType || this.outsideRelief[0].value;//浮雕
-            this.selectedWindowStyle = this.cardValueFindIndex(response.Data.F_WindowsStyle,this.WindowStyle) == -1 ? this.WindowStyle[0].value : response.Data.F_WindowsStyle;
-            // this.selectedWindowStyle = response.Data.F_WindowsStyle || this.WindowStyle[0].value;//窗套样式
           this.oldf_id = response.Data.F_ID;
           this.color_selValue = response.Data.F_Color || null;// 外墙平涂选中的值
           if (this.color_selValue) {
@@ -796,7 +845,12 @@ export default class extends Vue {
               this.ColumnTypes = [];
             }
           }
-            this.selectedColumnType = this.cardValueFindIndex(F_ColumnType,this.ColumnTypes) == -1 ? this.ColumnTypes[0].value : F_ColumnType;
+          let selectedColumnTypeIndex = this.cardValueFindIndex(F_ColumnType,this.ColumnTypes);
+          if (selectedColumnTypeIndex == -1){
+              this.selectedColumnType = this.ColumnTypes[0].value;
+          } else {
+              this.selectColumnType(F_ColumnType, 'ColumnTypeRef', selectedColumnTypeIndex)
+          }
           // this.selectedColumnType = F_ColumnType;//罗马柱
         }
       }
@@ -839,7 +893,7 @@ export default class extends Vue {
   //   console.log('拍摄图片');
   // }
   private autoScrollToActive(refsName: string, selcIndex: number) {
-    // console.log("refsName=", refsName)
+    console.log("refsName=", refsName)
     const container = this.$refs[refsName];
     const activeItem = container.children[selcIndex];
     const itemWidth = activeItem.offsetWidth * 1.1;
@@ -850,13 +904,13 @@ export default class extends Vue {
     const isFullyVisibleL = itemRect.left >= containerRect.left;
     const isFullyVisibleR = itemRect.right <= containerRect.right;
     if (!isFullyVisibleL) {
-      container.scrollBy({
-        left: -itemWidth, // 右边滑一格多的距离
+        container.scrollBy({
+        left: -(containerRect.left - itemRect.left + itemWidth), // 右边滑一格多的距离
         behavior: 'smooth' // 平滑滚动
       });
     } else if (!isFullyVisibleR) {
       container.scrollBy({
-        left: itemWidth, // 左滑一格多的距离
+        left: itemRect.right - containerRect.right + itemWidth, // 左滑一格多的距离
         behavior: 'smooth' // 平滑滚动
       });
     }