|
|
@@ -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>
|
|
|
@@ -197,10 +197,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 - 1, WindowStyle)">
|
|
|
+ <img :src="require('@/assets/AIDesign/magnifyingGlassIcon.png')" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 窗套颜色 -->
|
|
|
+ <div class="design-option" v-show="selectedWindowStyle != '无'">
|
|
|
+ <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"
|
|
|
@@ -250,6 +271,23 @@
|
|
|
<img width="12" :src="require('@/assets/AIDesign/rightjt.png')" />
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 浮雕 -->
|
|
|
+ <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>
|
|
|
</section>
|
|
|
<!-- 外墙平涂选项 -->
|
|
|
<section v-show="activeName === '外墙平涂'" class="radio-group-container1">
|
|
|
@@ -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_carvingType || this.outsideRelief[0].value;//浮雕
|
|
|
+ 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) {
|
|
|
@@ -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;
|
|
|
@@ -923,11 +980,13 @@ export default class extends Vue {
|
|
|
const uColorCard = this.ColorCard === '无' ? '' : this.ColorCard;
|
|
|
const uSelectedProcess = this.selectedProcess === '无' ? '' : this.selectedProcess;
|
|
|
let uSelectedSplit = this.selectedSplit === '无' ? '' : this.selectedSplit;
|
|
|
- const uWindowsColor = this.selectedWindowFrame === '无' ? '' : this.selectedWindowFrame;
|
|
|
+ const uWindowsColor = (this.selectedWindowFrame === '无' || this.selectedWindowStyle === '无') ? '' : this.selectedWindowFrame;//窗套样式为空也传空
|
|
|
const uCastRailing = this.selectedRailing === '无' ? '' : this.selectedRailing;
|
|
|
const uColumnType = this.selectedColumnType === '无' ? '' : this.selectedColumnType;//没有传空
|
|
|
const uGlazedTile = this.selectedTile === '无' ? '' : this.selectedTile;
|
|
|
const uSkirtType = this.selectedSkirtType === '无' ? '' : this.selectedSkirtType;
|
|
|
+ const uReliefType = this.selectedReliefType === '无' ? '' : this.selectedReliefType;
|
|
|
+ const uWindowStyle = this.selectedWindowStyle === '无' ? '' : this.selectedWindowStyle;
|
|
|
formData.append('DesignStyle', uDesignStyle);
|
|
|
formData.append('ColorCard', uColorCard);
|
|
|
formData.append('DeepGrooveTech', uSelectedProcess);
|
|
|
@@ -937,6 +996,8 @@ export default class extends Vue {
|
|
|
formData.append('GlazedTile', uGlazedTile);
|
|
|
formData.append('columnType', uColumnType);//罗马柱
|
|
|
formData.append('skirtType', uSkirtType);//墙裙
|
|
|
+ formData.append('ReliefType', uReliefType);//浮雕
|
|
|
+ formData.append('WindowStyle', uWindowStyle);//窗套
|
|
|
|
|
|
} else if (this.activeName === '外墙平涂') {
|
|
|
// 如果字典渲染有误,不让提交;
|
|
|
@@ -1155,6 +1216,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 +1257,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;
|
|
|
}
|
|
|
|
|
|
//关联列表模糊查询
|