1.新增砖雕、窗套样式；原来窗套样式改为窗套颜色；都要放大；砖雕放在罗马柱下面；窗套样式在窗套颜色上方；

src/views/AIDesign/design.vue

@@ -171,7 +171,7 @@
               <div class="railing-icon" :style="{ backgroundImage: `url(${imgBaseUrl}${Column.imgPath})` }"></div>
               <div class="railing-name">{{ Column.text }}</div>
               <div v-show="Column.value != '无' && Column.value != 'CUSTOM'" class="magnifyingGlassBox"
-                @click.stop="openComponentPreview(index - 1)">
+                @click.stop="openComponentPreview(index - 1, ColumnTypes)">
                 <img :src="require('@/assets/AIDesign/magnifyingGlassIcon.png')" />
               </div>
             </div>
@@ -184,6 +184,23 @@
             {{ currentTitle }} ({{ currentIndex + 1 }}/{{ imgValuesArray.length }})
           </template>
         </van-image-preview>
+        <!-- 浮雕 -->
+        <div class="design-option">
+          <div class="option-title">浮雕</div>
+          <div class="option-grid stone-colors-grid" ref="outsideReliefRef" @mousedown="handleMouseDown"
+            @mousemove="handleMouseMove" @mouseup="handleMouseUp" @mouseleave="handleMouseUp">
+            <div v-for="(Relief, index) in outsideRelief" :key="index" class="option-item"
+              :class="{ active: selectedReliefType === Relief.value }"
+              @click="selectReliefType(Relief.value, 'outsideReliefRef', index)">
+              <div class="railing-icon" :style="{ backgroundImage: `url(${imgBaseUrl}${Relief.imgPath})` }"></div>
+              <div class="railing-name">{{ Relief.text }}</div>
+              <div v-show="Relief.value != '无' && Relief.value != 'CUSTOM'" class="magnifyingGlassBox"
+                @click.stop="openComponentPreview(index - 1, outsideRelief)">
+                <img :src="require('@/assets/AIDesign/magnifyingGlassIcon.png')" />
+              </div>
+            </div>
+          </div>
+        </div>
         <!-- 浇筑栏杆 -->
         <div class="design-option">
           <div class="option-title">栏杆</div>
@@ -197,10 +214,31 @@
             </div>
           </div>
         </div>
-
         <!-- 窗套样式 -->
         <div class="design-option">
           <div class="option-title">窗套样式</div>
+          <div class="option-grid stone-colors-grid" ref="WindowStyleRef" @mousedown="handleMouseDown"
+            @mousemove="handleMouseMove" @mouseup="handleMouseUp" @mouseleave="handleMouseUp">
+            <div v-for="(WindowStyleItem, index) in WindowStyle" :key="index" class="option-item"
+              :class="{ active: selectedWindowStyle === WindowStyleItem.value }"
+              @click="selectWindowStyle(WindowStyleItem.value, 'WindowStyleRef', index)">
+              <div v-if="WindowStyleItem.value" class="split-icon"
+                :style="{ backgroundImage: `url(${imgBaseUrl}${WindowStyleItem.imgPath})` }">
+              </div>
+              <div v-else class="split-icon">
+                <img width="50" :src="require('@/assets/AIDesign/nothing1.png')" />
+              </div>
+              <div class="split-name">{{ WindowStyleItem.text }}</div>
+              <div v-show="WindowStyleItem.value != '无' && WindowStyleItem.value != 'CUSTOM'" class="magnifyingGlassBox"
+                @click.stop="openComponentPreview(index, WindowStyle)">
+                <img :src="require('@/assets/AIDesign/magnifyingGlassIcon.png')" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 窗套颜色 -->
+        <div class="design-option">
+          <div class="option-title">窗套颜色</div>
           <div class="option-grid stone-colors-grid" ref="windowsRef" @mousedown="handleMouseDown"
             @mousemove="handleMouseMove" @mouseup="handleMouseUp" @mouseleave="handleMouseUp">
             <div v-for="(windowFrame, index) in windowFrames" :key="index" class="option-item"
@@ -384,6 +422,8 @@ export default class extends Vue {
     railingsRef: HTMLDivElement;
     tilesRef: HTMLDivElement;
     skirtTypesRef: HTMLDivElement;
+    outsideReliefRef: HTMLDivElement;
+    WindowStyleRef: HTMLDivElement;
   };
 
   private readState = true;
@@ -427,6 +467,8 @@ export default class extends Vue {
   private tiles = []; // 琉璃瓦选项
   private ColumnTypes = [];// 罗马柱选项
   private skirtTypes = [];// 墙裙
+  private outsideRelief = [];//浮雕
+  private WindowStyle = [];//窗套样式
 
   // 外墙质感
   private DesignStyle = null;//设计风格
@@ -438,6 +480,8 @@ export default class extends Vue {
   private selectedWindowFrame = null;//窗套样式
   private selectedTile = null;//琉璃瓦
   private selectedSkirtType = null;//墙裙
+  private selectedReliefType = null;//浮雕
+  private selectedWindowStyle = null;//窗套样式
 
 
   private color_options = [];//外墙平涂列表
@@ -466,7 +510,7 @@ export default class extends Vue {
     } else {
       this.imgBaseUrl = 'https://aidesigntest.nipponpaint.com.cn'
     }
-    if(window.localStorage.getItem('agentFromAI') === 'stoneLikePaint'){
+    if (window.localStorage.getItem('agentFromAI') === 'stoneLikePaint') {
       this.getServiceCode();
     }
   }
@@ -622,9 +666,9 @@ export default class extends Vue {
   }
 
   // 处理罗马柱
-  openComponentPreview(initIndex: number) {
-    if (this.ColumnTypes.length > 0) {
-      const imgArray = this.ColumnTypes
+  openComponentPreview(initIndex: number, list) {
+    if (list.length > 0) {
+      const imgArray = list
         .filter(item => item.value != '无' && item.imgPath);
       this.imgValuesArray = imgArray.map(item => this.imgBaseUrl + item.imgPath);
       this.titlesArray = imgArray.map(item => item.text);
@@ -693,6 +737,8 @@ export default class extends Vue {
           this.selectedRailing = response.Data.F_CastRailing || this.railings[0].value;
           this.selectedTile = response.Data.F_GlazedTile || this.tiles[0].value;//新琉璃瓦
           this.selectedSkirtType = response.Data.F_SkirtType || this.skirtTypes[0].value;//墙裙
+          this.selectedReliefType = response.Data.F_OutsideRelief || this.outsideRelief[0].value;//浮雕
+          this.selectedWindowStyle = response.Data.F_WindowStyle || this.WindowStyle[0].value;//窗套样式
           this.oldf_id = response.Data.F_ID;
           this.color_selValue = response.Data.F_Color || null;// 外墙平涂选中的值
           if (this.color_selValue) {
@@ -828,6 +874,11 @@ export default class extends Vue {
     this.autoScrollToActive(refsName, selcIndex); // 选中后触发自动滚动
   }
 
+  private selectWindowStyle(value: string, refsName: string, selcIndex: number) {
+    this.selectedWindowStyle = value;
+    this.autoScrollToActive(refsName, selcIndex); // 选中后触发自动滚动
+  }
+
   private selectWindowFrame(value: string, refsName: string, selcIndex: number) {
     this.selectedWindowFrame = value;
     this.autoScrollToActive(refsName, selcIndex); // 选中后触发自动滚动
@@ -853,6 +904,12 @@ export default class extends Vue {
     this.autoScrollToActive(refsName, selcIndex); // 选中后触发自动滚动
   }
 
+  private selectReliefType(value: string, refsName: string, selcIndex: number) {
+    this.selectedReliefType = value;
+    this.autoScrollToActive(refsName, selcIndex); // 选中后触发自动滚动
+  }
+
+
   // 添加鼠标滚轮事件处理
   private handleWheel(e: WheelEvent) {
     const container = e.currentTarget as HTMLElement;
@@ -1155,6 +1212,11 @@ export default class extends Vue {
         this.color_options = response.Data.dict.outsideColor;
         // 墙裙
         this.skirtTypes = response.Data.dict.outsideSkirtType;
+        // 浮雕
+        this.outsideRelief = response.Data.dict.outsideRelief;
+        // 窗套样式
+        this.WindowStyle = response.Data.dict.WindowStyle;
+
         // 罗马柱选项
         if (this.designStyles && this.designStyles[0] && this.designStyles[0].subitems) {
           this.ColumnTypes = this.designStyles[0].subitems || [];
@@ -1191,6 +1253,8 @@ export default class extends Vue {
     this.selectedRailing = this.railings[0].value;
     this.selectedTile = this.tiles[0].value;
     this.selectedSkirtType = this.skirtTypes[0].value;
+    this.selectedReliefType = this.outsideRelief[0].value;
+    this.selectedWindowStyle = this.WindowStyle[0].value;
   }
 
   //关联列表模糊查询