|
@@ -1,4 +1,4 @@
|
|
|
-<template>
|
|
|
|
|
|
|
+<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
|
|
|
<div class="resout-container AI-Design-container">
|
|
<div class="resout-container AI-Design-container">
|
|
|
<div class="header">
|
|
<div class="header">
|
|
|
<van-nav-bar title="生成结果" left-arrow @click-left="returnPage" @click-right="toHome">
|
|
<van-nav-bar title="生成结果" left-arrow @click-left="returnPage" @click-right="toHome">
|
|
@@ -10,7 +10,7 @@
|
|
|
|
|
|
|
|
<div class="container">
|
|
<div class="container">
|
|
|
<!-- 历史生图 -->
|
|
<!-- 历史生图 -->
|
|
|
- <div class="history-section padded-lr-20" v-if="wallType === 'outside'">
|
|
|
|
|
|
|
+ <div class="history-section padded-lr-20" v-if="wallType === 'outside' || wallType === 'inside'">
|
|
|
<div class="history-header" @click="viewHistory">
|
|
<div class="history-header" @click="viewHistory">
|
|
|
<van-icon name="clock-o" color="#EC8868" />
|
|
<van-icon name="clock-o" color="#EC8868" />
|
|
|
<span>历史生图</span>
|
|
<span>历史生图</span>
|
|
@@ -29,13 +29,13 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="imgbox-b">
|
|
<div class="imgbox-b">
|
|
|
- <div class="image-wrapper" @click="imgClick(UserFilePathUrl)">
|
|
|
|
|
|
|
+ <div class="image-wrapper" @click="imgClick(0)">
|
|
|
<img :src="UserFilePathUrl" alt="房屋效果图" class="house-image" @error="handleImageError" />
|
|
<img :src="UserFilePathUrl" alt="房屋效果图" class="house-image" @error="handleImageError" />
|
|
|
<div v-on="{
|
|
<div v-on="{
|
|
|
'click.stop': imgHasErr ? () => reloadImage('userFile') : () => { }
|
|
'click.stop': imgHasErr ? () => reloadImage('userFile') : () => { }
|
|
|
}"></div>
|
|
}"></div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="image-wrapper" @click="imgClick(imageUrl)">
|
|
|
|
|
|
|
+ <div class="image-wrapper" @click="imgClick(1)">
|
|
|
<img :src="imageUrlSmall" alt="房屋效果图" class="house-image" @error="handleImageError" />
|
|
<img :src="imageUrlSmall" alt="房屋效果图" class="house-image" @error="handleImageError" />
|
|
|
<div v-on="{
|
|
<div v-on="{
|
|
|
'click.stop': imgHasErr ? () => reloadImage('imageSmall') : () => { }
|
|
'click.stop': imgHasErr ? () => reloadImage('imageSmall') : () => { }
|
|
@@ -49,13 +49,18 @@
|
|
|
'生成失败,\n' + StateInfo :
|
|
'生成失败,\n' + StateInfo :
|
|
|
'正在为您加速生成中,先喝杯茶吧~\n退出本页不影响生成')) : '加载中...' }}</p>
|
|
'正在为您加速生成中,先喝杯茶吧~\n退出本页不影响生成')) : '加载中...' }}</p>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <div v-if="imageUrl" class="feedback" @click="toFeedback">
|
|
|
|
|
+ <img src="@/assets/AIDesign/feedback_icon.png" class="feedback-icon" />
|
|
|
|
|
+ <span v-if="F_Feedback == null">一键反馈</span>
|
|
|
|
|
+ <span v-if="F_Feedback != null">查看反馈</span>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 功能按钮组 -->
|
|
<!-- 功能按钮组 -->
|
|
|
<!-- 外墙 -->
|
|
<!-- 外墙 -->
|
|
|
- <div class="button-group-outside" v-if="wallType === 'outside'">
|
|
|
|
|
|
|
+ <div class="button-group-outside" v-if="wallType === 'outside' || wallType === 'inside'">
|
|
|
<button class="action-button-big flex-center" @click="handleAIfun"
|
|
<button class="action-button-big flex-center" @click="handleAIfun"
|
|
|
- v-if="agentFrom === 'stoneLikePaint' && allRes && allRes.F_DesignStyle != 'CHANGE_COLOR' && StateCode == 2">
|
|
|
|
|
|
|
+ v-if="agentFrom === 'stoneLikePaint' && allRes && allRes.F_DesignStyle != 'CHANGE_COLOR' && StateCode == 2 && wallType === 'outside'">
|
|
|
<img src="@/assets/AIDesign/file-excel-line.png" class="icon" />
|
|
<img src="@/assets/AIDesign/file-excel-line.png" class="icon" />
|
|
|
<div>
|
|
<div>
|
|
|
<div class="title">确认AI设计</div>
|
|
<div class="title">确认AI设计</div>
|
|
@@ -73,7 +78,7 @@
|
|
|
</button>
|
|
</button>
|
|
|
<!-- :class="projectDisableFlag == true ? 'save-button-disabled' : ''" :disabled="projectDisableFlag"-->
|
|
<!-- :class="projectDisableFlag == true ? 'save-button-disabled' : ''" :disabled="projectDisableFlag"-->
|
|
|
<button class="action-button-middle flex-center" @click="manualDesign"
|
|
<button class="action-button-middle flex-center" @click="manualDesign"
|
|
|
- v-if="showArtificial && StateCode == 2 && !projectDisableFlag">
|
|
|
|
|
|
|
+ v-if="showArtificial && StateCode == 2 && !projectDisableFlag && wallType === 'outside'">
|
|
|
<img src="@/assets/AIDesign/bsIcon.png" class="iconbig" />
|
|
<img src="@/assets/AIDesign/bsIcon.png" class="iconbig" />
|
|
|
<div>
|
|
<div>
|
|
|
<div class="title">转人工设计
|
|
<div class="title">转人工设计
|
|
@@ -84,20 +89,32 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<!-- 内墙 -->
|
|
<!-- 内墙 -->
|
|
|
- <div class="button-group" v-if="wallType === 'inside'">
|
|
|
|
|
- <button class="action-button" :disabled="regenerateDisable"
|
|
|
|
|
- :class="regenerateDisable == true ? 'save-button-disabled' : ''" @click="regenerate">
|
|
|
|
|
- <van-icon class="icon" name="replay" />
|
|
|
|
|
- <span class="text">重新生成</span>
|
|
|
|
|
- </button>
|
|
|
|
|
- <button class="action-button" @click="viewHistory">
|
|
|
|
|
- <van-icon class="icon" name="clock-o" />
|
|
|
|
|
- <span class="text">历史生图</span>
|
|
|
|
|
- <span v-if="!readState" class="badge-dot"></span>
|
|
|
|
|
- </button>
|
|
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
|
|
+ <!--<div class="button-group" v-if="wallType === 'inside'">-->
|
|
|
|
|
+ <!--<button class="action-button" :disabled="regenerateDisable"-->
|
|
|
|
|
+ <!--:class="regenerateDisable == true ? 'save-button-disabled' : ''" @click="regenerate">-->
|
|
|
|
|
+ <!--<van-icon class="icon" name="replay" />-->
|
|
|
|
|
+ <!--<span class="text">重新生成</span>-->
|
|
|
|
|
+ <!--</button>-->
|
|
|
|
|
+ <!--<button class="action-button" @click="viewHistory">-->
|
|
|
|
|
+ <!--<van-icon class="icon" name="clock-o" />-->
|
|
|
|
|
+ <!--<span class="text">历史生图</span>-->
|
|
|
|
|
+ <!--<span v-if="!readState" class="badge-dot"></span>-->
|
|
|
|
|
+ <!--</button>-->
|
|
|
|
|
+ <!--</div>-->
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <van-image-preview
|
|
|
|
|
+ v-model="showImagePreview"
|
|
|
|
|
+ :images="imagePreviewArray"
|
|
|
|
|
+ :loop="false"
|
|
|
|
|
+ :start-position="imagePreviewIndex"
|
|
|
|
|
+ @change="imagePreviewOnChange">
|
|
|
|
|
+ <template v-slot:index>
|
|
|
|
|
+ <div class="image-preview-header">
|
|
|
|
|
+ <div>{{imagePreviewIndex+1}}/{{imagePreviewArray.length}}</div>
|
|
|
|
|
+ <div>{{imagePreviewIndex == 0 ? '原图' : '效果图'}}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </van-image-preview>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
<script lang="ts">
|
|
<script lang="ts">
|
|
@@ -124,8 +141,12 @@ export default class extends Vue {
|
|
|
private type = '';
|
|
private type = '';
|
|
|
private wallType = '';
|
|
private wallType = '';
|
|
|
private F_OutsideType = null;
|
|
private F_OutsideType = null;
|
|
|
|
|
+ private F_Feedback = null;
|
|
|
private defaultImg = require('@/assets/AIDesign/imgErrIcon.jpg'); // 替换为实际图片路径
|
|
private defaultImg = require('@/assets/AIDesign/imgErrIcon.jpg'); // 替换为实际图片路径
|
|
|
private imgHasErr = false;
|
|
private imgHasErr = false;
|
|
|
|
|
+ private showImagePreview = false;
|
|
|
|
|
+ private imagePreviewArray = [];
|
|
|
|
|
+ private imagePreviewIndex = 0
|
|
|
// 处理内外墙api
|
|
// 处理内外墙api
|
|
|
private GetEntityToApi = {
|
|
private GetEntityToApi = {
|
|
|
outside: GetEntity,
|
|
outside: GetEntity,
|
|
@@ -322,9 +343,14 @@ export default class extends Vue {
|
|
|
toHome() {
|
|
toHome() {
|
|
|
toLBHome()
|
|
toLBHome()
|
|
|
}
|
|
}
|
|
|
- imgClick(url) {
|
|
|
|
|
- ImagePreview([url]);
|
|
|
|
|
|
|
+ imgClick(index) {
|
|
|
|
|
+ this.showImagePreview = true;
|
|
|
|
|
+ this.imagePreviewIndex = index;
|
|
|
|
|
+ // ImagePreview([this.UserFilePathUrl,this.imageUrl],index);
|
|
|
}
|
|
}
|
|
|
|
|
+ imagePreviewOnChange(index){
|
|
|
|
|
+ this.imagePreviewIndex = index;
|
|
|
|
|
+ }
|
|
|
private startPolling(): void {
|
|
private startPolling(): void {
|
|
|
// 立即执行一次检查
|
|
// 立即执行一次检查
|
|
|
this.GetEntityData();
|
|
this.GetEntityData();
|
|
@@ -372,6 +398,7 @@ export default class extends Vue {
|
|
|
this.StateInfo = response.Data.Description;
|
|
this.StateInfo = response.Data.Description;
|
|
|
this.projectId = response.Data.ProjectID;
|
|
this.projectId = response.Data.ProjectID;
|
|
|
this.F_OutsideType = response.Data.F_OutsideType;
|
|
this.F_OutsideType = response.Data.F_OutsideType;
|
|
|
|
|
+ this.F_Feedback = response.Data.F_Feedback;
|
|
|
let DesignCount = response.Data.DesignCount || 0;
|
|
let DesignCount = response.Data.DesignCount || 0;
|
|
|
// 外墙-服务商随身邦
|
|
// 外墙-服务商随身邦
|
|
|
if (this.agentFrom === 'stoneLikePaint' && this.wallType === 'outside') {
|
|
if (this.agentFrom === 'stoneLikePaint' && this.wallType === 'outside') {
|
|
@@ -388,6 +415,7 @@ export default class extends Vue {
|
|
|
that.imageUrl = response.Data.BaseUrl + high_Definition_img;
|
|
that.imageUrl = response.Data.BaseUrl + high_Definition_img;
|
|
|
that.imageUrlSmall = response.Data.BaseUrl + response.Data.F_ResultSmallFilePath;
|
|
that.imageUrlSmall = response.Data.BaseUrl + response.Data.F_ResultSmallFilePath;
|
|
|
that.UserFilePathUrl = response.Data.BaseUrl + response.Data.F_UserFilePath;
|
|
that.UserFilePathUrl = response.Data.BaseUrl + response.Data.F_UserFilePath;
|
|
|
|
|
+ that.imagePreviewArray = [that.UserFilePathUrl,that.imageUrl];
|
|
|
}
|
|
}
|
|
|
if (response.Data.StateCode == 1) {
|
|
if (response.Data.StateCode == 1) {
|
|
|
let createTime = new Date(response.Data.CreateDate);
|
|
let createTime = new Date(response.Data.CreateDate);
|
|
@@ -430,6 +458,7 @@ export default class extends Vue {
|
|
|
this.StateCode = response.Data.StateCode;
|
|
this.StateCode = response.Data.StateCode;
|
|
|
this.StateInfo = response.Data.Description;
|
|
this.StateInfo = response.Data.Description;
|
|
|
this.F_OutsideType = response.Data.F_OutsideType;
|
|
this.F_OutsideType = response.Data.F_OutsideType;
|
|
|
|
|
+ this.F_Feedback = response.Data.F_Feedback;
|
|
|
this.projectId = response.Data.ProjectID;
|
|
this.projectId = response.Data.ProjectID;
|
|
|
let DesignCount = response.Data.DesignCount || 0;
|
|
let DesignCount = response.Data.DesignCount || 0;
|
|
|
// 外墙-服务商随身邦
|
|
// 外墙-服务商随身邦
|
|
@@ -447,6 +476,7 @@ export default class extends Vue {
|
|
|
that.imageUrl = response.Data.BaseUrl + high_Definition_img;
|
|
that.imageUrl = response.Data.BaseUrl + high_Definition_img;
|
|
|
that.imageUrlSmall = response.Data.BaseUrl + response.Data.F_ResultSmallFilePath;
|
|
that.imageUrlSmall = response.Data.BaseUrl + response.Data.F_ResultSmallFilePath;
|
|
|
that.UserFilePathUrl = response.Data.BaseUrl + response.Data.F_UserFilePath;
|
|
that.UserFilePathUrl = response.Data.BaseUrl + response.Data.F_UserFilePath;
|
|
|
|
|
+ that.imagePreviewArray = [that.UserFilePathUrl,that.imageUrl];
|
|
|
}
|
|
}
|
|
|
if (response.Data.StateCode == 2 || response.Data.StateCode == 3 || response.Data.StateCode == 4) {
|
|
if (response.Data.StateCode == 2 || response.Data.StateCode == 3 || response.Data.StateCode == 4) {
|
|
|
that.regenerateDisable = false;
|
|
that.regenerateDisable = false;
|
|
@@ -556,6 +586,12 @@ export default class extends Vue {
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ private toFeedback(){
|
|
|
|
|
+ let that = this;
|
|
|
|
|
+ const F_ID = this.$route.query.F_id || "";
|
|
|
|
|
+ this.$router.push({ path: '/AIDesign/feedback', query: { F_id: F_ID, feedbackResult: that.F_Feedback == null ? 0 : 1, wallType: this.wallType } });
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
private viewHistory(): void {
|
|
private viewHistory(): void {
|
|
|
this.UpdateReadStateFn();
|
|
this.UpdateReadStateFn();
|
|
|
// console.log('查看历史生成');
|
|
// console.log('查看历史生成');
|
|
@@ -663,7 +699,16 @@ export default class extends Vue {
|
|
|
border-radius: 10px;
|
|
border-radius: 10px;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
|
-
|
|
|
|
|
|
|
+ .feedback{
|
|
|
|
|
+ padding: 15px 10px 15px 10px;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ color: rgba(22, 93, 255, 1);
|
|
|
|
|
+ .feedback-icon{
|
|
|
|
|
+ width: 20px;
|
|
|
|
|
+ margin-right: 5px;
|
|
|
|
|
+ margin-bottom: -5px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
.comparisonWrapper {
|
|
.comparisonWrapper {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
@@ -933,7 +978,11 @@ export default class extends Vue {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-
|
|
|
|
|
|
|
+.image-preview-header{
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+}
|
|
|
.van-nav-bar__title {
|
|
.van-nav-bar__title {
|
|
|
font-size: 20px;
|
|
font-size: 20px;
|
|
|
color: #333;
|
|
color: #333;
|