AI_Design/src/views/AIDesign/result.vue

<template>
  <div class="resout-container AI-Design-container">
    <div class="header">
      <van-nav-bar title="生成结果" left-arrow @click-left="returnPage" @click-right="toHome">
        <template #right>
          <van-icon name="wap-home-o" color="#333" size="26" />
        </template>
      </van-nav-bar>
    </div>

    <div class="container">
      <!-- 房屋效果图 -->
      <div class="image-container">
        <div v-if="imageUrl" class="comparisonWrapper">
          <div class="imgbox-t">
            <div>
              <p class="tit">原图</p>
            </div>
            <div>
              <p class="tit">AI效果图</p>
            </div>
          </div>
          <div class="imgbox-b">
            <div class="image-wrapper" @click="imgClick(UserFilePathUrl)">
              <img :src="UserFilePathUrl" alt="房屋效果图" class="house-image" />
              <div></div>
            </div>
            <div class="image-wrapper" @click="imgClick(imageUrl)">
              <img :src="imageUrlSmall" alt="房屋效果图" class="house-image" />
              <div></div>
            </div>
          </div>
        </div>
        <div v-else class="loading-state">
          <img v-if="StateCode != 3 && StateCode != 4" src="@/assets/AIDesign/loding.gif" style="width: 100px;">
          <p class="loading-text">{{ type || StateCode ? (StateCode == 3 ? '生成失败' : (StateCode == 4 ?
            '生成失败，\n' + StateInfo :
            '正在为您加速生成中，先喝杯茶吧~\n退出本页不影响生成')) : '加载中...' }}</p>
        </div>
      </div>

      <!-- 保存按钮 -->
      <!-- <button class="save-button" :disabled="!imageUrl" :class="{ 'save-button-disabled': !imageUrl }"
        @click="saveImageToAlbum">保存图片</button> -->

      <!-- 功能按钮组 -->
      <div class="button-group">
        <!--<button class="action-button" :disabled="!imageUrl" :class="{ 'save-button-disabled': !imageUrl }"-->
        <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>
        <!-- 服务商随身邦和部分经销商展示转人工 -->
        <button class="action-button" @click="manualDesign" v-if="showArtificial" :disabled="projectDisableFlag"
          :class="projectDisableFlag == true ? 'save-button-disabled' : ''">
          <van-icon class="icon" name="user-o" />
          <span class="text">转人工设计（原别墅之星小程序）</span>
        </button>
      </div>
    </div>

  </div>
</template>
<script lang="ts">
import { ImagePreview, Dialog } from 'vant';
import { Component, Vue } from "vue-property-decorator";
import { GetEntity, GetReadState, UpdateReadState, insideGetEntity, insideGetReadState, insideUpdateReadState, GetProjectlist, GetDictList } from "@/api/indexAI";
import { getWecomType, toLBHome ,getWxconfig } from '@/utils/index';
import axios from "axios";
declare let wx: any;
@Component
export default class extends Vue {
  private readState = true;
  // 数据属性
  // private imageUrl = require('@/assets/AIDesign/house-image.jpg'); // 替换为实际图片路径
  private imageUrl = ''; // 替换为实际图片路径
  private imageUrlSmall = '';
  private UserFilePathUrl = '';//用户原图
  private pollingTimer: number | null = null; // 轮询定时器引用
  private timer = null;
  private StateCode = null;
  private projectId = null;
  private regenerateDisable = true;
  private StateInfo = '';
  private type = '';
  private wallType = '';
  private F_OutsideType = null;
  // 处理内外墙api
  private GetEntityToApi = {
    outside: GetEntity,
    inside: insideGetEntity
  };
  private GetReadStateToApi = {
    outside: GetReadState,
    inside: insideGetReadState
  };
  private UpdateReadStateToApi = {
    outside: UpdateReadState,
    inside: insideUpdateReadState
  };

  private designPageApi = {
    outside: '/AIDesign/design',
    inside: '/AIDesign/insideDesign'
  };

  private designTimer = {
    outside: 50000,
    inside: 20000
  };
  private showArtificial = false;
  private agentFrom = window.localStorage.getItem('agentFromAI');
  private outsideDesignCount = 0;//项目下设计已用数量-接口获取
  private isNeedProjectFlag = true;//是否需要项目-接口获取
  private projectDisableFlag = true;//转人工不可点击
  private serviceCodeArray = [];
  created() {
    if (this.$route.query.WecomType) {
      sessionStorage.setItem("WecomType", this.$route.query.WecomType);
    } else {
      sessionStorage.removeItem("WecomType");
    }
    getWxconfig();
    // this.getServiceCode();
  }

  activated() {
    this.initialize();
    this.wallType = this.$route.query.wallType || 'outside';
    const userInfo: any = JSON.parse(window.localStorage.getItem("userInfoV1")!);
    const customerCode = userInfo && userInfo.sysUserExt ? userInfo.sysUserExt.customerCode : '';
    const salesLevel = userInfo && userInfo.sysUserExt ? userInfo.sysUserExt.salesLevel : '';
    // 外墙-服务商随身邦
    if (this.agentFrom === 'stoneLikePaint' && this.wallType === 'outside') {
      this.showArtificial = true;
      this.getIsNeedProjectFlag();//获取是否关联了项目
    }
    // 和部分经销商展示转人工
    // else if(customerCode && (salesLevel === 'customer_level' || salesLevel === 'reseller_level')){
    //   this.showArtificial = true;
    // }
    // 从经销商随身邦进入的，显示转人工按钮，没有次数限制
    if (this.agentFrom === 'ssb' && this.wallType === 'outside') {
      this.showArtificial = true;
      this.projectDisableFlag = false;
    }
    this.type = window.localStorage.getItem('type');
    this.GetReadStateFn();
    this.GetEntityDataFirst()
  }
  // 离开页面时清除定时器
  deactivated() {
    // console.log('resule页面销毁1')
    window.localStorage.removeItem('type');
    clearInterval(this.pollingTimer);
    clearTimeout(this.timer);
    this.pollingTimer = null;
    this.timer = null;
  }
  initialize() {
    clearInterval(this.pollingTimer);
    clearTimeout(this.timer);
    this.readState = true;
    this.imageUrl = ''; // 替换为实际图片路径
    this.imageUrlSmall = '';
    this.UserFilePathUrl = '';//用户原图
    this.pollingTimer = null; // 轮询定时器引用
    this.timer = null;
    this.StateCode = null;
    this.projectId = null;
    this.regenerateDisable = true;
    this.StateInfo = '';
    this.type = '';
    this.wallType = '';
    this.outsideDesignCount = 0;
    this.isNeedProjectFlag = true;
    this.projectDisableFlag = true;
    this.showArtificial = false;
  }
  // 是否关联了项目
  getIsNeedProjectFlag() {
    let that = this;
    const formData = new FormData();
    // const userInfo: any = JSON.parse(window.localStorage.getItem("userInfoV1")!);
    // let roleIdArray = [];
    // if (userInfo.roles.length > 0) {
    //   userInfo.roles.forEach(item => {
    //     roleIdArray.push(item.roleId);
    //   })
    // }
    // formData.append('roleIds', roleIdArray.join(','));
    // formData.append('WXuserid', userInfo.loginName);
    formData.append('baseType', 0);//0外墙--这里只用查询外墙
    const agentFrom = window.localStorage.getItem('agentFromAI');
    const wecomType = getWecomType(agentFrom);
    formData.append('wecomType', 5);
    GetDictList(formData).then(response => {
      if (response.StatusCode == 200) {
        if (that.serviceCodeArray.length == 0) {
          that.isNeedProjectFlag = false; //是否需要项目
        } else {
          that.isNeedProjectFlag = response.Data.isNeedProject;
        }
        if (that.isNeedProjectFlag) {
          that.updateCheckedProjectLastNum();
        } else {
          that.projectDisableFlag = false;//没有项目就可点击
        }
      }
    })
  }
  //获取选中关联项目已用数量
  private updateCheckedProjectLastNum() {
    let that = this;
    const formData = new FormData();
    // formData.append('ServiceCode', that.serviceCodeArray.join(','));
    formData.append('projectid', this.$route.query.projectid);
    GetProjectlist(formData).then(response => {
      if (response.StatusCode == 200 && response.Data && response.Data[0]) {
        that.outsideDesignCount = response.Data[0].DesignCount || 0;
        // 单一关联项目下设计了1~3套，转人工设计均置灰不可点。从第4套起等转人工设计均可点
        if (that.outsideDesignCount > 3) {
          that.projectDisableFlag = false;//有项目判断>3可点击
        }
      }
    });
  }
  private getServiceCode() {
    let that = this;
    const userInfo: any = JSON.parse(window.localStorage.getItem("userInfoV1")!);
    let serviceCodeArray = [];
    if (userInfo.loginTypeList.length > 0) {
      userInfo.loginTypeList.forEach(item => {
        if (item.shopType == 'stoneLikePaint') {
          item.shopList.forEach(childItem => {
            serviceCodeArray.push(childItem.shop_code);
          })
        }
      })
    }
    that.serviceCodeArray = serviceCodeArray;
  }
  GetReadStateFn() {
    const formData = new FormData();
    // const userInfo: any = JSON.parse(window.localStorage.getItem("userInfoV1")!);
    // formData.append('WXuserid', userInfo.loginName);
    if (this.wallType === 'outside') {
      const outsideType_val = this.F_OutsideType || 0;
      formData.append('outsideType', outsideType_val);
    }
    this.GetReadStateToApi[this.wallType](formData).then(response => {
      if (response.StatusCode == 200) {
        this.readState = response.Data.readState;
      }
    });
  }
  UpdateReadStateFn() {
    const formData = new FormData();
    // const userInfo: any = JSON.parse(window.localStorage.getItem("userInfoV1")!);
    // formData.append('WXuserid', userInfo.loginName);
    const outsideType_val = this.F_OutsideType || 0;
    formData.append('outsideType', outsideType_val);
    this.UpdateReadStateToApi[this.wallType](formData).then(response => { });
  }
  returnPage() {
    this.$router.push({ path: this.designPageApi[this.wallType] });
    // this.$router.back();
  }
  toHome() {
    toLBHome()
  }
  imgClick(url) {
    ImagePreview([url]);
  }
  private startPolling(): void {
    // 立即执行一次检查
    this.GetEntityData();

    // 设置定时器每秒执行一次检查
    this.pollingTimer = window.setInterval(() => {
      if (!this.imageUrl) {
        if (this.StateCode == 3 || this.StateCode == 4) {
          clearInterval(this.pollingTimer);
          this.pollingTimer = null;
        } else {
          this.GetEntityData();
        }

      } else {
        // 当 imageUrl 有值时，清除定时器
        if (this.pollingTimer) {
          clearInterval(this.pollingTimer);
          this.pollingTimer = null;
        }
      }
    }, 3000);
  }
  //进入页面首次调用获取状态
  GetEntityDataFirst() {
    let that = this;
    const F_ID = this.$route.query.F_id || "";
    const formData = new FormData();
    formData.append('F_id', F_ID);
    this.GetEntityToApi[this.wallType](formData).then(response => {
      // console.log(response);
      if (response.StatusCode == 200) {
        if (response.Data == null) {
          that.regenerateDisable = true;
          if (that.timer) {
            clearTimeout(that.timer);
            that.timer = null;
          }
          that.timer = setTimeout(() => {
            that.startPolling();
          }, that.designTimer[that.wallType]);
        } else {
          this.StateCode = response.Data.StateCode;
          this.StateInfo = response.Data.Description;
          this.projectId = response.Data.ProjectID;
          this.F_OutsideType = response.Data.F_OutsideType;
          if (response.Data.F_ResultFilePath || response.Data.F_ResultlargeFilePath) {
            const high_Definition_img = response.Data.F_ResultFilePath || response.Data.F_ResultlargeFilePath || response.Data.F_ResultSmallFilePath;
            that.imageUrl = response.Data.BaseUrl + high_Definition_img;
            that.imageUrlSmall = response.Data.BaseUrl + response.Data.F_ResultSmallFilePath;
            that.UserFilePathUrl = response.Data.BaseUrl + response.Data.F_UserFilePath;
          }
          if (response.Data.StateCode == 1) {
            let createTime = new Date(response.Data.CreateDate);
            let currentTime = new Date().getTime();
            if (currentTime - createTime > that.designTimer[that.wallType]) {
              that.startPolling();
            } else {
              if (that.timer) {
                clearTimeout(that.timer);
                that.timer = null;
              }
              that.timer = setTimeout(() => {
                that.startPolling();
              }, currentTime - createTime);
            }
          } else {
            if (response.Data.StateCode == 2 || response.Data.StateCode == 3 || response.Data.StateCode == 4) {
              that.regenerateDisable = false;
            } else {
              that.regenerateDisable = true;
            }
          }
        }
      } else {
        this.$toast.fail(response.Info);
      }
    })
  }

  GetEntityData() {
    let that = this;
    const F_ID = this.$route.query.F_id || "";
    const formData = new FormData();
    formData.append('F_id', F_ID);
    this.GetEntityToApi[this.wallType](formData).then(response => {
      // console.log(response);
      if (response.StatusCode == 200) {
        if (response.Data) {
          this.StateCode = response.Data.StateCode;
          this.StateInfo = response.Data.Description;
          this.F_OutsideType = response.Data.F_OutsideType;
          if (response.Data.F_ResultFilePath || response.Data.F_ResultlargeFilePath) {
            const high_Definition_img = response.Data.F_ResultFilePath || response.Data.F_ResultlargeFilePath || response.Data.F_ResultlargeFilePath;
            that.imageUrl = response.Data.BaseUrl + high_Definition_img;
            that.imageUrlSmall = response.Data.BaseUrl + response.Data.F_ResultSmallFilePath;
            that.UserFilePathUrl = response.Data.BaseUrl + response.Data.F_UserFilePath;
          }
          if (response.Data.StateCode == 2 || response.Data.StateCode == 3 || response.Data.StateCode == 4) {
            that.regenerateDisable = false;
          } else {
            that.regenerateDisable = true;
          }
        } else {
          that.regenerateDisable = true;
        }
      } else {
        this.$toast.fail(response.Info);
      }
    })
  }
  // 点击保存图片按钮
  saveImageToAlbum() {
    const that = this;
    wx.ready(function () {
      // 1. 检查用户是否授权保存图片到相册
      wx.getSetting({
        success: (res) => {
          // 2. 如果未授权，请求授权
          if (!res.authSetting['scope.writePhotosAlbum']) {
            wx.authorize({
              scope: 'scope.writePhotosAlbum',
              success: () => {
                // 授权成功，执行保存逻辑
                that.downloadAndSaveImage();
              },
              fail: () => {
                // 用户拒绝授权，引导手动开启
                wx.showModal({
                  title: '授权提示',
                  content: '需要你的授权才能保存图片到相册，请在设置中开启授权',
                  confirmText: '去设置',
                  success: (modalRes) => {
                    if (modalRes.confirm) {
                      // 打开设置页面
                      wx.openSetting({
                        success: (settingRes) => {
                          if (settingRes.authSetting['scope.writePhotosAlbum']) {
                            that.downloadAndSaveImage();
                          } else {
                            that.$toast.fail('未授权，无法保存图片');
                          }
                        }
                      });
                    }
                  }
                });
              }
            });
          } else {
            // 已授权，直接执行保存逻辑
            that.downloadAndSaveImage();
          }
        },
        fail: (err) => {
          console.error('获取设置失败', err);
          that.$toast.fail('获取授权状态失败，请重试');
        }
      });
    });

  }

  // 下载图片并保存到相册
  downloadAndSaveImage() {
    const that = this;
    const imageUrl = this.imageUrl;
    wx.ready(function () {
      // 1. 下载OSS图片到本地临时路径
      wx.downloadFile({
        url: imageUrl,
        success: (downloadRes) => {
          // 检查下载是否成功（临时文件路径存在）
          if (downloadRes.statusCode === 200 && downloadRes.tempFilePath) {
            // 2. 保存图片到相册
            wx.saveImageToPhotosAlbum({
              filePath: downloadRes.tempFilePath,
              success: () => {
                // 提示用户
                that.$toast.success('图片已成功保存到相册');
              },
              fail: (saveErr) => {
                console.error('保存图片失败', saveErr);
                that.$toast.fail('保存失败，请重试');
              }
            });
          } else {
            console.error('图片下载失败', downloadRes);
            that.$toast.fail('图片下载失败，请检查URL');
          }
        },
        fail: (downloadErr) => {
          console.error('下载请求失败', downloadErr);
          that.$toast.fail('下载图片失败，请重试');
        }
      });
    });
  }
  // 方法
  private saveImage(): void {
    if (!this.imageUrl) {
      this.$toast.fail('图片尚未生成完成');
      return;
    }

    // // 创建一个临时的下载链接
    // const link = document.createElement('a');
    // link.href = this.imageUrl;
    // link.download = `ai-design-${new Date().getTime()}.png`;
    // link.style.display = 'none';

    // // 将链接添加到页面并触发点击事件
    // document.body.appendChild(link);
    // link.click();

    // // 清理DOM元素
    // document.body.removeChild(link);

    fetch(this.imageUrl).then(response => response.blob()).then(blob => {
      const blobUrl = URL.createObjectURL(blob);
      // 创建一个临时的下载链接
      const link = document.createElement('a');
      link.href = blobUrl;
      link.download = `ai-design-${new Date().getTime()}.png`;
      link.style.display = 'none';

      // 将链接添加到页面并触发点击事件
      document.body.appendChild(link);
      link.click();

      // 清理DOM元素
      document.body.removeChild(link);

      // 释放Blob URL
      URL.revokeObjectURL(blobUrl);

      // this.$toast.success('图片保存成功');
    }).catch(error => {
      console.error('图片下载失败:', error);
      this.$toast.fail('图片下载失败');
    });
  }

  private regenerate(): void {
    // console.log('重新生成');
    let that = this;
    // 实现重新生成逻辑
    const F_ID = this.$route.query.F_id || "";
    this.$router.push({
      path: this.designPageApi[this.wallType],
      query: {
        F_id: F_ID,
        projectId: that.projectId
      }
    });
  }

  private viewHistory(): void {
    this.UpdateReadStateFn();
    // console.log('查看历史生成');
    // 实现查看历史生成逻辑
    this.$router.push({ path: '/AIDesign/history', query: { wallType: this.wallType } });
  }

  private manualDesign(): void {
    let that = this;
    // debugger
    // console.log('转人工设计');
    // 实现转人工设计逻辑
    // that.$magnetlogadd.setLog('AI外墙设计-转人工设计', function () {
    that.toXiaoChengxu(`${process.env.VUE_APP_BASE_DISID6}`);
    // })
  }
}
</script>

<style scoped lang="scss">
.resout-container {
  background-color: #f8f9fa;
  min-height: 100vh;
  flex-direction: column;
}

.header {
  /*height: 50px;*/
  /*line-height: 50px;*/
  /*text-align: center;*/
  /*background: #fff;*/
  border-bottom: 1px solid #f8f8f8;

  .van-nav-bar__title {
    font-size: 20px;
    color: #333;
  }

  .van-icon {
    font-size: 20px;
    color: #333 !important;
  }
}

.container {
  padding: 0 20px;
}

.image-container {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-top: 20px;

  .comparisonWrapper {
    display: flex;
    flex-direction: column;
    padding: 35px 6px;

    .imgbox-t {
      display: flex;
      justify-content: space-between;
      align-items: center;

      >div {
        .tit {
          width: fit-content;
          padding: 0 5px;
          height: 17px;
          line-height: 17px;
          border-radius: 32px;
          font-size: 10px;
        }
      }

      >div:first-child {
        width: 36%;

        .tit {
          background: rgba(204, 204, 204, 1);
        }
      }

      >div:last-child {
        width: 58%;

        .tit {
          color: #fff;
          background: rgba(244, 155, 125, 1);
        }
      }
    }

    .imgbox-b {
      display: flex;
      justify-content: space-between;
      align-items: center;

      >div:first-child {
        width: 36%;
      }

      >div:last-child {
        width: 58%;
      }

      .image-wrapper {
        position: relative;
        width: 100%;
        margin: 5px 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .house-image {
          border-radius: 10px;
          display: block;
          width: 100%;
          height: auto;
        }

        .house-image+div {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: transparent;
          z-index: 2;
        }
      }
    }
  }
}

.loading-state {
  position: relative;
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #666;
  text-align: center;
  // background-color: rgba(0, 0, 0, 0.7);
  background-image: url('../../assets/AIDesign/bg.png');
  background-size: 100% 100%;
  /* 添加半透明黑色背景 */
  // border-radius: 16px;
  /* 圆角边框 */
}

.loading-text {
  margin-top: 10px;
  font-size: 14px;
  color: white;
  white-space: pre-line
    /* 文字颜色改为白色以提高对比度 */
}



.address-info {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 8px;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
}

.project-name {
  margin: 0;
  font-weight: bold;
}

.address {
  margin: 4px 0 0;
  font-size: 12px;
}

.save-button {
  width: 100%;
  padding: 16px;
  margin-top: 20px;
  background-color: #E96337;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.save-button-disabled {
  background-color: #cccccc !important;
  cursor: not-allowed !important;
  color: white !important;
}

/* .save-button:hover {
  background-color: #e04a1d;
} */

.button-group {
  margin-top: 20px;
}

.action-button {
  width: 100%;
  padding: 14px;
  margin-bottom: 12px;
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  font-size: 15px;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: background-color 0.3s ease;
}

.action-button:hover {
  background-color: #f5f5f5;
}

.badge-dot {
  margin-left: 10px;
  width: 5px;
  height: 5px;
  background-color: #ff4d4f;
  border-radius: 50%;
}

.icon {
  margin-right: 10px;
  font-size: 18px;
}

.text {
  font-weight: 500;
}

.van-nav-bar__title {
  font-size: 20px;
  color: #333;
}
</style>