feat(Photography): 添加详情页生成进度消息功能

- 在详情页添加处理进度消息和抠图进度消息的功能
- 实现进度消息的显示和隐藏逻辑
- 优化 LoadingDialog 组件，支持显示进度消息
- 修改 socket消息类型，增加 detail_progress 和 segment_progress

electron/utils/socket.js

@@ -16,6 +16,8 @@ const typeToMessage = {
   set_mcu_other_info:"developer",
   send_command:"developer",
   smart_shooter_get_camera_property:"seeting",
+  detail_progress:"PhotographyDetail",
+  segment_progress:"PhotographyDetail"
 }
 
 
@@ -81,7 +83,10 @@ const pySocket = function () {
         try {
           let this_data = JSON.parse(data.toString());
 
-          if(!['blue_tooth','smart_shooter_enable_preview'].includes(this_data.msg_type)){ console.log(this_data);}
+          if(!['blue_tooth','smart_shooter_enable_preview','smart_shooter_getinfo'].includes(this_data.msg_type)){
+            console.log('message');
+            console.log(this_data);
+          }
           if(this_data.msg_type){
             let notAllMessage = false
             switch (this_data.msg_type){

frontend/src/views/Photography/components/LoadingDialog.vue

@@ -4,7 +4,7 @@
     :show-close="requesting"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
-    width="400px"
+    width="600px"
     custom-class="loading-dialog-EL"
     align-center
     append-to-body
@@ -23,6 +23,8 @@
       <div class="message">{{ message }}</div>
       <!-- 错误信息插槽 -->
       <slot name="errList"></slot>
+      <!-- 进度消息插槽 -->
+      <slot name="progressMessages"></slot>
 
       <el-button
         v-if="!disabledButton"
@@ -116,7 +118,7 @@ const handleButtonClick = () => {
 
 .progress-container {
   width: 100%;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
   display: flex;
   align-items: center;
   gap: 10px;
@@ -146,7 +148,7 @@ const handleButtonClick = () => {
 .message {
   color: #606266;
   font-size: 14px;
-  margin-bottom: 20px;
+  margin-bottom: 0px;
 }
 
 .action-button {

frontend/src/views/Photography/detail.vue

@@ -286,7 +286,25 @@
         <span>{{ item.goods_art_no }}</span>：<span>{{ item.info }}</span>
       </div>
     </template>
-
+    <template #progressMessages>
+      <div class="progress-messages" v-if="progressMessages.length">
+        <div class="message-header">
+          <span>处理进度</span>
+          <el-button type="text" @click="showMessageHistory = !showMessageHistory" v-log="{ describe: { action: '点击查看进度详情' } }">
+            {{ showMessageHistory ? '收起' : '查看详情' }}
+          </el-button>
+        </div>
+        <div class="message-list" v-if="showMessageHistory">
+          <div v-for="(msg, index) in progressMessages" :key="index" class="message-item flex left">
+            <div class="message-time">{{ formatTime(msg.timestamp) }}</div>
+            <div class="message-content mar-left-10">
+              <span class="goods-no">货号{{ msg.goods_art_nos.join(', ') }}：</span>
+              <span class="message-text">{{ msg.msg }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
   </loading-dialog>
   <el-dialog v-model="dialogVisible">
     <img style="width: 100%;" :src="dialogImageUrl" alt="Preview Image" />
@@ -308,7 +326,7 @@ import { clickLog, setLogInfo } from '@/utils/log'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
 import headerBar from '@/components/header-bar/index.vue'
-import { ref, computed, reactive, onMounted } from 'vue';
+import { ref, computed, reactive, onMounted, onBeforeUnmount } from 'vue';
 import { Select, EditPen } from '@element-plus/icons-vue'
 import upload from '@/components/upload'
 import client from "@/stores/modules/client";
@@ -316,6 +334,8 @@ import icpList from '@/utils/ipc'
 const clientStore = client();
 import { getRouterUrl } from '@/utils/appfun'
 import { useUuidStore } from '@/stores/modules/uuid'
+import socket from "@/stores/modules/socket";
+const socketStore = socket();
 
 import { Close, Warning } from '@element-plus/icons-vue'
 import LoadingDialog from '@/views/Photography/components/LoadingDialog.vue'
@@ -345,6 +365,16 @@ const loadingDialogVisible = ref(false)
 const progress = ref(0)
 const message = ref('正在为您处理，请稍后')
 const disabledButton = ref(true)
+// 进度消息队列
+const progressMessages = ref<Array<{
+  goods_no: string
+  temp_name: string
+  status: string
+  goods_art_nos: string[]
+  msg: string
+  timestamp: number
+}>>([])
+const showMessageHistory = ref(true)
 
 let templates = ref([])
 let goods_art_nos = ref([])
@@ -388,6 +418,14 @@ onMounted(() => {
   getLogolist()
 })
 
+// 页面卸载时清理监听器
+onBeforeUnmount(() => {
+  clientStore.ipc.removeAllListeners(icpList.socket.message + '_detail_progress');
+  clientStore.ipc.removeAllListeners(icpList.socket.message + '_segment_progress');
+  clientStore.ipc.removeAllListeners(icpList.generate.generatePhotoDetail);
+  clearInterval(INTERVAL.value);
+})
+
 
 // 计算属性，获取当前页可见的模板
 const visibleTemplates = computed(() => {
@@ -456,6 +494,50 @@ const onSizeChange = (data) => {
 
 
 
+// 格式化时间
+const formatTime = (timestamp: number) => {
+  const date = new Date(timestamp)
+  return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`
+}
+
+// 处理进度消息
+const handleProgressMessage = (data: any) => {
+  console.log("detail_progress", data);
+
+  if (data.code === 0 && data.msg_type === 'detail_progress') {
+    const messageData = {
+      goods_no: data.data.goods_no,
+      temp_name: data.data.temp_name,
+      status: data.data.status,
+      goods_art_nos: data.data.goods_art_nos,
+      msg: data.msg,
+      timestamp: Date.now()
+    }
+    progressMessages.value.push(messageData)
+    // 更新当前显示的消息
+    message.value = `货号${data.data.goods_art_nos.join(', ')}：${data.msg}`
+  }
+}
+
+// 处理抠图进度消息
+const handleSegmentProgressMessage = (data: any) => {
+  console.log("segment_progress", data);
+
+  if (data.code === 0 && data.msg_type === 'segment_progress') {
+    const messageData = {
+      goods_no: '',
+      temp_name: '',
+      status: data.data.status,
+      goods_art_nos: data.data.goods_art_nos,
+      msg: data.msg,
+      timestamp: Date.now()
+    }
+    progressMessages.value.push(messageData)
+    // 更新当前显示的消息
+    message.value = `货号${data.data.goods_art_nos.join(', ')}：${data.msg}`
+  }
+}
+
 // 开始生成操作
 const generate = async function () {
   // 埋点：开始生成详情页
@@ -485,26 +567,40 @@ const generate = async function () {
   })
   const params = {
     goods_art_no: JSON.parse(JSON.stringify(goods_art_nos.value)),
-    services: form.services,
     logo_path: form.logo_path || '',
     temp_name: form.selectTemplate.template_id || '',
     excel_path: form.dataType == '1' ? form.excel_path : '',
     template_image_order: form.selectTemplate.template_image_order,
     temp_list,
-    online_stores: domesticPlatforms.value, // 追加电商平台参数
     token,
     uuid: uuidStore.getUuid || ''
   }
   console.log(params);
   // 开启进度弹窗
   requesting.value =  false
-  console.log("params", "color:#3f7cff", params);
   partErrList.value = []
   message.value = '正在为您处理，请稍后'
   progress.value = 0
+  // 清空之前的进度消息
+  progressMessages.value = []
+  showMessageHistory.value = true
+
   openLoadingDialog(goods_art_nos.value.length * 10)
   clientStore.ipc.removeAllListeners(icpList.generate.generatePhotoDetail);
   clientStore.ipc.send(icpList.generate.generatePhotoDetail, params);
+
+  // 监听进度消息
+  clientStore.ipc.removeAllListeners(icpList.socket.message + '_detail_progress');
+  clientStore.ipc.on(icpList.socket.message + '_detail_progress', (event, data) => {
+    console.log('_detail_progress',data);
+    handleProgressMessage(data)
+  });
+
+  // 监听抠图进度消息
+  clientStore.ipc.removeAllListeners(icpList.socket.message + '_segment_progress');
+  clientStore.ipc.on(icpList.socket.message + '_segment_progress', (event, data) => {
+    handleSegmentProgressMessage(data)
+  });
   clientStore.ipc.on(icpList.generate.generatePhotoDetail, (event, result) => {
     if(result.code !== 0 ){
      if(result.msg){
@@ -518,7 +614,11 @@ const generate = async function () {
 
     console.log('result', result)
     requesting.value =  true
-    clientStore.ipc.removeAllListeners(icpList.generate.generatePhotoDetail);
+    setTimeout(() => {
+      clientStore.ipc.removeAllListeners(icpList.generate.generatePhotoDetail);
+      clientStore.ipc.removeAllListeners(icpList.socket.message + '_detail_progress');
+      clientStore.ipc.removeAllListeners(icpList.socket.message + '_segment_progress');
+    }, 500)
     clearInterval(INTERVAL.value)
     if (result.code === 0) {
       const { output_folder, list } = result.data
@@ -545,6 +645,10 @@ const generate = async function () {
       if (errorMsg) {
         ElMessage.error(errorMsg)
       }
+
+      // 处理完成后停止监听进度消息
+     // clientStore.ipc.removeAllListeners(icpList.socket.message + '_detail_progress');
+    //  clientStore.ipc.removeAllListeners(icpList.socket.message + '_segment_progress');
     }
 
     // 全部生成成功
@@ -556,6 +660,8 @@ const generate = async function () {
       progress.value = 100
       disabledButton.value = false
       message.value = loadingMsg
+
+
       handleComplete()
     }
     // 部分成功
@@ -586,6 +692,7 @@ const generate = async function () {
       progress.value = 100
       disabledButton.value = true
       message.value = '全部货号生成失败'
+
     }
   });
 }
@@ -1123,4 +1230,61 @@ const selectFolder = () => {
   padding-right: 20px;
   color: #2957FF !important;
 }
+
+.progress-messages {
+  margin-top: 20px;
+  border-top: 1px solid #e4e7ed;
+  padding-top: 20px;
+  width: 100%;
+
+  .message-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+    font-weight: 500;
+    color: #606266;
+  }
+
+  .message-list {
+    max-height: 200px;
+    overflow-y: auto;
+    border: 1px solid #e4e7ed;
+    border-radius: 4px;
+    padding: 10px;
+    background: #fafafa;
+
+    .message-item {
+      margin-bottom: 12px;
+      padding-bottom: 12px;
+      border-bottom: 1px solid #f0f0f0;
+
+      &:last-child {
+        margin-bottom: 0;
+        padding-bottom: 0;
+        border-bottom: none;
+      }
+
+      .message-time {
+        font-size: 12px;
+        color: #909399;
+        margin-bottom: 4px;
+      }
+
+      .message-content {
+        font-size: 14px;
+        line-height: 1.4;
+
+        .goods-no {
+          color: #2957FF;
+          font-weight: 500;
+        }
+
+        .message-text {
+          color: #606266;
+        }
+      }
+    }
+  }
+}
 </style>