소스 검색

2.ai设计-外墙结果详情按钮修改
3.ai设计-生成方案新增预估工期

armg 5 일 전
부모
커밋
11a9e4ef10
8개의 변경된 파일249개의 추가작업 그리고 151개의 파일을 삭제
  1. 0 2
      .env
  2. 2 0
      .env.development
  3. 3 1
      .env.production
  4. BIN
      src/assets/AIDesign/bsIcon.png
  5. 2 2
      src/utils/index.ts
  6. 157 88
      src/views/AIDesign/GeneratePlan.vue
  7. 28 41
      src/views/AIDesign/design.vue
  8. 57 17
      src/views/AIDesign/result.vue

+ 0 - 2
.env

@@ -4,8 +4,6 @@ VUE_APP_BASE_DISID6=wx818da06b25f30cf5
 #企业微信 
 # 应用appID
 VUE_APP_APPID=ww5444eb205d75e730
-# 应用agentID
-VUE_APP_AGENTID=1000400
 # 随身帮登录密钥
 VUE_APP_SECRETKEY=AideSignSSB2026@WeCom_SecretKey
 

+ 2 - 0
.env.development

@@ -9,4 +9,6 @@ VUE_APP_AIDESIGN=https://aidesigntest.nipponpaint.com.cn/
 # 应用地址
 VUE_APP_AUTHURL=https://aidesigntest.nipponpaint.com.cn/AiDesignWeb/
 VUE_APP_Target=https://suishenbangtest.nipponpaint.com.cn/wxportal-api/
+# 应用agentID
+VUE_APP_AGENTID=1000400
 

+ 3 - 1
.env.production

@@ -4,4 +4,6 @@ VUE_APP_AIDESIGN_API='https://aidesign.nipponpaint.com.cn/'
 devtool=cheap-module-source-map
 # 应用地址
 VUE_APP_AUTHURL=https://aidesign.nipponpaint.com.cn/AiDesignWeb/
-VUE_APP_Target=/
+VUE_APP_Target=/
+# 应用agentID
+VUE_APP_AGENTID=1000400

BIN
src/assets/AIDesign/bsIcon.png


+ 2 - 2
src/utils/index.ts

@@ -158,7 +158,7 @@ export const toXiaoChengxu = (appid) => {
             let yingyongData = response.Data;
             wx.agentConfig({
               corpid: yingyongData.appid, // 必填,企业微信的corpid,必须与当前登录的企业一致
-              agentid: process.env.VUE_APP_AGENTID, // 必填,企业微信的应用id (e.g. 1000247)
+              agentid: yingyongData.agentID, // 必填,企业微信的应用id (e.g. 1000247)
               timestamp: yingyongData.timestamp, // 必填,生成签名的时间戳
               nonceStr: yingyongData.noncestr, // 必填,生成签名的随机串
               signature: yingyongData.signature, // 必填,签名,见附录-JS-SDK使用权限签名算法
@@ -207,7 +207,7 @@ export const getWxconfig = () => {
       wx.agentConfig({
         debug: true,
         corpid: qiyeData.appid,
-        agentid: process.env.VUE_APP_AGENTID,
+        agentid: qiyeData.agentID,
         timestamp: qiyeData.timestamp,
         nonceStr: qiyeData.noncestr,
         signature: qiyeData.signature,

+ 157 - 88
src/views/AIDesign/GeneratePlan.vue

@@ -8,67 +8,88 @@
                 </template>
             </van-nav-bar>
         </div>
-
-        <!-- 已生成方案区域 -->
-        <div class="generated-section">
-            <div class="generated-header">
-                <div class="generated-title">已生成</div>
-                <div>
-                    <div class="scheme-info"><span class="orgin-color">{{ stoneColors }}</span>{{ planParams.F_ColorCard
-                        }}</div>
-                    <span class="gray-color">|</span>
-                    <div class="scheme-process"><span class="orgin-color">{{ planParams.F_DeepGrooveTech }}</span>工艺
+        <div>
+            <!-- 已生成方案区域 -->
+            <div class="generated-section">
+                <div class="generated-header">
+                    <div class="generated-title">已生成</div>
+                    <div>
+                        <div class="scheme-info"><span class="orgin-color">{{ stoneColors }}</span>{{
+                            planParams.F_ColorCard
+                            }}</div>
+                        <span class="gray-color">|</span>
+                        <div class="scheme-process"><span class="orgin-color">{{ planParams.F_DeepGrooveTech }}</span>工艺
+                        </div>
                     </div>
+                    <van-tag color="#FF8D1A" class="ai-tag">AI效果图</van-tag>
                 </div>
-                <van-tag color="#FF8D1A" class="ai-tag">AI效果图</van-tag>
-            </div>
 
-            <!-- 效果图 -->
-            <div class="scheme-image">
-                <img :src="planParams.BaseUrl + planParams.F_ResultSmallFilePath" alt="房屋效果图"
-                    @click="imgClick(imageUrl)" />
-            </div>
-            <!-- 推荐方案区域 -->
-            <div class="recommend-scheme">
-                <h3 class="recommend-title">推荐方案</h3>
-
-                <div class="custom-table">
-                    <div class="table-header">
-                        <div class="table-cell" style="flex:0.8;">工序</div>
-                        <div class="table-cell" style="flex:1.6;">别墅之星系列</div>
-                        <div class="table-cell" style="flex:0.6;">使用量</div>
-                    </div>
-                    <div class="table-row" v-for="(item, index) in processData" :key="index">
-                        <div class="table-cell" style="flex:0.8;">{{ item.F_ProcedureName }}</div>
-                        <div class="table-cell" style="flex:1.6;">{{ item.F_ProductName }}</div>
-                        <div class="table-cell" style="flex:0.6;">{{ item.usage }}{{ item.F_OrderUnit }}</div>
-                    </div>
+                <!-- 效果图 -->
+                <div class="scheme-image">
+                    <img :src="planParams.BaseUrl + planParams.F_ResultSmallFilePath" alt="房屋效果图"
+                        @click="imgClick(imageUrl)" />
                 </div>
-
-                <!-- 施工面积 -->
-                <div class="construction-area">
-                    <h3>施工</h3>
-                    <div class="construction-info">
-                        <span>主色面积</span>
-                        <div @click="openAreaPopup">
-                            <span class="area-value">{{ mainArea }} </span>
-                            ㎡
-                            <van-icon name="arrow" size="12" />
+                <!-- 推荐方案区域 -->
+                <div class="recommend-scheme">
+                    <h3 class="recommend-title">推荐方案</h3>
+                    <section class="recommend-scheme-section">
+                        <!-- 施工面积 -->
+                        <div class="construction-area">
+                            <h3>施工面积</h3>
+                            <div class="construction-info">
+                                <span>主色</span>
+                                <div @click="openAreaPopup">
+                                    <span class="area-value">{{ mainArea }} </span>
+                                    ㎡
+                                    <van-icon name="arrow" size="12" />
+                                </div>
+
+                            </div>
                         </div>
-
-
+                        <!-- 工序 -->
+                        <div class="custom-table">
+                            <div class="table-header">
+                                <div class="table-cell text-left" style="flex:0.95;">工序</div>
+                                <div class="table-cell text-left" style="flex:1.7;">别墅之星系列</div>
+                                <div class="table-cell text-right" style="flex:0.35;">使用量</div>
+                            </div>
+                            <div class="table-row" v-for="(item, index) in processData" :key="index">
+                                <div class="table-cell text-left" style="flex:0.95;"><span class="gray">{{ index + 1 }}
+                                    </span>{{
+                                        item.F_ProcedureName }}</div>
+                                <div class="table-cell text-left" style="flex:1.7;">{{ item.F_ProductName }}</div>
+                                <div class="table-cell text-right" style="flex:0.35;">{{ item.usage }}<span
+                                        class="gray">{{
+                                            item.F_OrderUnit }}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- 预计工期 -->
+                        <div class="construction-period custom-table">
+                            <h5>预计工期<div>
+                                    <span class="orgin-color">2人配合</span>
+                                    施工一栋<span class="orgin-color">300㎡</span>房子
+                                </div>
+                            </h5>
+                            <div class="table-row" v-for="(item, index) in processData" :key="index">
+                                <div class="table-cell text-left" style="flex:2.4;"><span class="gray">{{ index + 1 }}
+                                    </span>{{ item.F_ProcedureName }}</div>
+                                <div class="table-cell text-right" style="flex:0.6;">{{ item.F_ConstructionPeriod
+                                    }}<span class="gray">天</span>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                    <!-- 提示语 -->
+                    <div class="notice-bar">
+                        <span>该方案能有效还原意向效果</span>,快去看看吧~
                     </div>
-                </div>
 
-                <!-- 提示语 -->
-                <div class="notice-bar">
-                    <span>该方案能有效还原意向效果</span>,快去看看吧~
+                    <!-- 确认按钮 -->
+                    <van-button class="confirm-btn" color="#E87838" block @click="confirmScheme">
+                        确认方案 去下单
+                    </van-button>
                 </div>
-
-                <!-- 确认按钮 -->
-                <van-button class="confirm-btn" color="#E87838" block @click="confirmScheme">
-                    确认方案 去下单
-                </van-button>
             </div>
         </div>
 
@@ -92,9 +113,9 @@
 <script lang="ts">
 import Vue from 'vue';
 import { Component, Ref } from 'vue-property-decorator';
-import { getWecomType, toLBHome, toXiaoChengxu, getWxconfig ,getWecomTypeName} from '@/utils/index';
+import { getWecomType, toLBHome, toXiaoChengxu, getWxconfig, getWecomTypeName } from '@/utils/index';
 import { Tag, Field, ImagePreview } from 'vant';
-import { GetProductInfo, GetDictList, AddTrackEvent ,GetOrderAddress } from "@/api/indexAI";
+import { GetProductInfo, GetDictList, AddTrackEvent, GetOrderAddress } from "@/api/indexAI";
 Vue.use(Tag)
 @Component({
     components: {}
@@ -250,13 +271,13 @@ export default class GeneratePlan extends Vue {
             formData.append('eventdata', JSON.stringify(eventdataObj));//事件数据
             AddTrackEvent(formData)//埋点
             // 获取确认下单地址
-            GetOrderAddress().then((res)=>{
-                if(res.StatusCode == 200 && res.Data){
+            GetOrderAddress().then((res) => {
+                if (res.StatusCode == 200 && res.Data) {
                     window.location.href = res.Data;
-                }else{
-                    if(res && res.Info){
+                } else {
+                    if (res && res.Info) {
                         this.$toast(res.Info)
-                    }else{
+                    } else {
                         this.$toast("系统未知错误,请反馈给管理员.")
                     }
                 }
@@ -284,23 +305,25 @@ export default class GeneratePlan extends Vue {
     flex-direction: column;
     padding-bottom: 20px;
 
+    .orgin-color {
+        color: rgba(255, 141, 26, 1);
+    }
+
     .generated-section {
-        padding: 0 16px;
+        padding: 0 14px;
 
         .generated-header {
             margin-bottom: 4px;
 
             .generated-title {
                 font-size: 22px;
-                font-weight: bold;
+                font-weight: 600;
                 margin-right: 10px;
                 line-height: 34px;
                 padding-top: 5px;
             }
 
-            .orgin-color {
-                color: rgba(255, 141, 26, 1);
-            }
+
 
             .gray-color {
                 height: 14px;
@@ -339,34 +362,46 @@ export default class GeneratePlan extends Vue {
         }
 
         .recommend-scheme {
-            background-color: #fff;
+            // background-color: #fff;
             border-radius: 8px;
-            padding: 15px 10px;
+            // padding: 15px 10px;
+            border-bottom: 1px solid rgba(229, 230, 235, 1);
 
             .recommend-title {
-                font-size: 16px;
-                font-weight: bold;
+                font-size: 22px;
+                font-weight: 600;
+                margin-right: 10px;
+                line-height: 34px;
+                padding-top: 5px;
                 margin-bottom: 10px;
             }
 
+            .recommend-scheme-section {
+                padding: 0 6px;
+            }
+
             // 自定义表格样式
             .custom-table {
+                padding: 10px 0;
+                // background-color: #fff;
                 width: 100%;
                 border-radius: 4px;
                 overflow: hidden;
-                border: 1px solid #eee;
+                // border: 1px solid #ddd;
+                border-bottom: 1px solid rgba(229, 230, 235, 1);
 
                 .table-header {
                     display: flex;
-                    background-color: #f8f8f8;
-                    font-weight: bold;
+                    // background-color: #f8f8f8;
+                    font-weight: 600;
 
                     .table-cell {
                         flex: 1;
-                        padding: 10px;
-                        text-align: center;
-                        font-size: 14px;
-                        border-right: 1px solid #eee;
+                        // padding: 10px;
+                        // text-align: center;
+                        font-size: 15px;
+                        white-space: nowrap;
+                        // border-right: 1px solid #eee;
 
                         &:last-child {
                             border-right: none;
@@ -374,9 +409,13 @@ export default class GeneratePlan extends Vue {
                     }
                 }
 
+                .gray {
+                    color: rgba(128, 128, 128, 1);
+                }
+
                 .table-row {
                     display: flex;
-                    border-bottom: 1px solid #eee;
+                    // border-bottom: 1px solid #eee;
                     align-items: stretch;
 
                     &:last-child {
@@ -384,36 +423,65 @@ export default class GeneratePlan extends Vue {
                     }
 
                     .table-cell {
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
+                        padding: 2px 0;
+                        // display: flex;
+                        // align-items: center;
+                        // justify-content: center;
                         flex: 1;
-                        padding: 10px;
-                        text-align: center;
+                        // padding: 10px;
+                        // text-align: center;
                         font-size: 12px;
-                        color: #333;
+                        color: #000;
                         word-break: break-all; // 文字换行
-                        border-right: 1px solid #eee;
+                        // border-right: 1px solid #eee;
+
                         &:last-child {
                             border-right: none;
                         }
                     }
                 }
+
+                .text-left {
+                    text-align: left;
+                }
+
+                .text-right {
+                    text-align: right;
+                }
+            }
+
+            .construction-period {
+                h5 {
+                    font-size: 16px;
+                    font-weight: 600;
+                    padding-bottom: 10px;
+
+                    div {
+                        display: inline-block;
+                        font-size: 12px;
+                        margin-left: 10px;
+                        font-weight: 400;
+
+                        span {
+                            font-size: 12px;
+                        }
+                    }
+                }
             }
 
             .construction-area {
-                margin: 15px 0 0;
-                padding: 10px 0;
-                // border-top: 1px solid #eee;
+                padding: 0 0 10px;
+                border-bottom: 1px solid rgba(229, 230, 235, 1);
 
                 .area-value {
                     color: #e55b2a;
                     font-weight: bold;
+                    font-size: 16px;
                 }
 
                 h3 {
                     font-size: 16px;
-                    font-weight: bold;
+                    font-weight: 600;
                 }
 
                 .construction-info {
@@ -421,6 +489,7 @@ export default class GeneratePlan extends Vue {
                     justify-content: space-between;
                     align-items: center;
                     margin-top: 10px;
+                    font-size: 12px;
 
                 }
             }

+ 28 - 41
src/views/AIDesign/design.vue

@@ -678,7 +678,7 @@ export default class extends Vue {
           this.ColorCard = response.Data.F_ColorCard || this.stoneColors[0].value;
           this.selectedProcess = response.Data.F_DeepGrooveTech || this.deepSlotProcesses[0].value;
           // 有墙面工艺
-          if(this.selectedProcess ){
+          if (this.selectedProcess) {
             const selectedProcessSelctIndex = this.deepSlotProcesses.findIndex(item => item.value === this.selectedProcess);
             // 墙面分割线选项
             this.splitWays = this.deepSlotProcesses[selectedProcessSelctIndex].subitems;
@@ -1136,7 +1136,7 @@ export default class extends Vue {
         this.stoneColors = response.Data.dict.ColorCard;
         // 墙面工艺选项
         this.deepSlotProcesses = response.Data.dict.DeepGrooveTech;
-        if(this.deepSlotProcesses && this.deepSlotProcesses.length > 0){
+        if (this.deepSlotProcesses && this.deepSlotProcesses.length > 0) {
           // 墙面分割线选项
           this.splitWays = this.deepSlotProcesses[0].subitems;
         }
@@ -1172,7 +1172,7 @@ export default class extends Vue {
         console.log(response.Info);
       }
     }).catch((err) => {
-      console.log("=======err=",err)
+      console.log("=======err=", err)
       // that.$toast(err)
     })
   }
@@ -1290,48 +1290,35 @@ export default class extends Vue {
 
 .history-section {
   margin: 20px 0;
-}
-
-.history-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-  background-color: #ffffff;
-  border-radius: 18px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-  border: 1px solid #e9ecef;
-  /* margin-bottom: 10px; */
-}
 
-.icon-clock {
-  font-size: 12px;
-  margin-right: 8px;
-}
-
-.history-header span {
-  font-weight: 500;
-  color: #EC8868;
-}
+  .history-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    background-color: #ffffff;
+    border-radius: 18px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    border: 1px solid #e9ecef;
+    /* margin-bottom: 10px; */
+  }
 
-.history-header .badge-dot {
-  width: 5px;
-  height: 5px;
-  background-color: #ff4d4f;
-  border-radius: 50%;
-}
+  .icon-clock {
+    font-size: 12px;
+    margin-right: 8px;
+  }
 
-.history-content {
-  padding: 20px;
-  border-radius: 12px;
-  background-color: white;
-  text-align: center;
-  border: 1px dashed #ddd;
-}
+  .history-header span {
+    font-weight: 500;
+    color: #EC8868;
+  }
 
-.no-history {
-  color: #999;
-  font-size: 12px;
+  .history-header .badge-dot {
+    width: 5px;
+    height: 5px;
+    background-color: #ff4d4f;
+    border-radius: 50%;
+  }
 }
 
 .image-selection {

+ 57 - 17
src/views/AIDesign/result.vue

@@ -9,6 +9,14 @@
     </div>
 
     <div class="container">
+      <!-- 历史生图 -->
+      <div class="history-section padded-lr-20" v-if="wallType === 'outside'">
+        <div class="history-header" @click="viewHistory">
+          <van-icon name="clock-o" color="#EC8868" />
+          <span>历史生图</span>
+          <span v-if="!readState" class="badge-dot"></span>
+        </div>
+      </div>
       <!-- 房屋效果图 -->
       <div class="image-container">
         <div v-if="imageUrl" class="comparisonWrapper">
@@ -53,28 +61,23 @@
         <div class="flex-between">
           <button class="action-button-middle flex-center" :disabled="regenerateDisable"
             :class="regenerateDisable == true ? 'save-button-disabled' : ''" @click="regenerate">
-            <!-- <van-icon class="icon" name="replay" /> -->
             <img src="@/assets/AIDesign/resetIcon.png" class="icon" />
             <div>
               <div class="title">重新生成</div>
               <div class="text">再来一次也不错</div>
             </div>
           </button>
-          <button class="action-button-middle flex-center" @click="viewHistory">
-            <!-- <van-icon class="icon" name="clock-o" /> -->
-            <img src="@/assets/AIDesign/historyIcon.png" class="icon" />
+          <button class="action-button-middle flex-center" @click="manualDesign" :disabled="projectDisableFlag"
+            v-if="showArtificial && !projectDisableFlag"
+            :class="projectDisableFlag == true ? 'save-button-disabled' : ''">
+            <img src="@/assets/AIDesign/bsIcon.png" class="iconbig" />
             <div>
-              <div class="title">历史生图
-                <!-- <span v-if="!readState" class="badge-dot"></span> -->
+              <div class="title">转人工设计
               </div>
-              <div class="text">保留每一张</div>
+              <div class="text">别墅之星小程序</div>
             </div>
           </button>
         </div>
-        <!-- 服务商随身邦和部分经销商展示转人工  :disabled="projectDisableFlag" :class="projectDisableFlag == true ? 'save-button-disabled' : ''"-->
-        <div class="action-button-small" v-if="showArtificial && !projectDisableFlag" @click="manualDesign">
-          <span class="text">转人工设计</span>
-        </div>
       </div>
       <!-- 内墙 -->
       <div class="button-group" v-if="wallType === 'inside'">
@@ -97,7 +100,7 @@
 import { ImagePreview, Dialog } from 'vant';
 import { Component, Vue } from "vue-property-decorator";
 import { GetEntity, GetReadState, UpdateReadState, insideGetEntity, insideGetReadState, insideUpdateReadState, GetProjectlist, GetDictList, AddTrackEvent } from "@/api/indexAI";
-import { getWecomType, toLBHome, toXiaoChengxu, getWxconfig ,getWecomTypeName ,checkAndSaveUserWecomType } from '@/utils/index';
+import { getWecomType, toLBHome, toXiaoChengxu, getWxconfig, getWecomTypeName, checkAndSaveUserWecomType } from '@/utils/index';
 import axios from "axios";
 declare let wx: any;
 @Component
@@ -148,7 +151,7 @@ export default class extends Vue {
   private serviceCodeArray = [];
   private allRes = null;
   created() {
-    console.log("this.$route",this.$route)
+    console.log("this.$route", this.$route)
     checkAndSaveUserWecomType();
     getWxconfig();
     // this.getServiceCode();
@@ -583,7 +586,7 @@ export default class extends Vue {
     // console.log('转人工设计');
     // 实现转人工设计逻辑
     // that.$magnetlogadd.setLog('AI外墙设计-转人工设计', function () {
-      toXiaoChengxu(`${process.env.VUE_APP_BASE_DISID6}`);
+    toXiaoChengxu(`${process.env.VUE_APP_BASE_DISID6}`);
     // })
   }
 
@@ -631,6 +634,39 @@ export default class extends Vue {
 
 .container {
   padding: 0 20px;
+
+  .history-section {
+    margin: 20px 0;
+
+    .history-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 16px;
+      background-color: #ffffff;
+      border-radius: 18px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+      border: 1px solid #e9ecef;
+      /* margin-bottom: 10px; */
+    }
+
+    .icon-clock {
+      font-size: 12px;
+      margin-right: 8px;
+    }
+
+    .history-header span {
+      font-weight: 500;
+      color: #EC8868;
+    }
+
+    .history-header .badge-dot {
+      width: 5px;
+      height: 5px;
+      background-color: #ff4d4f;
+      border-radius: 50%;
+    }
+  }
 }
 
 .image-container {
@@ -639,7 +675,6 @@ export default class extends Vue {
   border-radius: 10px;
   overflow: hidden;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  margin-top: 20px;
 
   .comparisonWrapper {
     display: flex;
@@ -809,7 +844,6 @@ export default class extends Vue {
   .flex-between {
     display: flex;
     align-items: center;
-    justify-content: space-between;
     border: none;
   }
 
@@ -832,6 +866,11 @@ export default class extends Vue {
     height: auto;
     margin-right: 10px;
   }
+  .iconbig{
+    width: 48px;
+    height: auto;
+    margin-right: 5px;
+  }
 
   .action-button-big {
     width: 100%;
@@ -842,10 +881,11 @@ export default class extends Vue {
   }
 
   .action-button-middle {
-    width: 48.5%;
+    width: 48%;
     height: 72px;
     border-radius: 8px;
     background: rgba(240, 240, 240, 1);
+    margin:8px 1%;
   }
 
   .action-button-small {