restore use power when removed not finish jobs

web/src/views/Dalle.vue

@@ -125,6 +125,24 @@
                           </template>
                         </el-image>
 
+                        <el-image v-else-if="slotProp.item.progress === 101">
+                          <template #error>
+                            <div class="image-slot">
+                              <div class="err-msg-container">
+                                <div class="title">任务失败</div>
+                                <div class="opt">
+                                  <el-popover title="错误详情" trigger="click" :width="250" :content="slotProp.item['err_msg']" placement="top">
+                                    <template #reference>
+                                      <el-button type="info">详情</el-button>
+                                    </template>
+                                  </el-popover>
+                                  <el-button type="danger"  @click="removeImage(slotProp.item)">删除</el-button>
+                                </div>
+                              </div>
+                            </div>
+                          </template>
+                        </el-image>
+
                         <el-image v-else>
                           <template #error>
                             <div class="image-slot">
@@ -136,17 +154,17 @@
 
                         <div class="remove">
                           <el-tooltip content="删除" placement="top" effect="light">
-                            <el-button type="danger" :icon="Delete" @click="removeImage($event,slotProp.item)" circle/>
+                            <el-button type="danger" :icon="Delete" @click="removeImage(slotProp.item)" circle/>
                           </el-tooltip>
                           <el-tooltip content="分享" placement="top" effect="light" v-if="slotProp.item.publish">
                             <el-button type="warning"
-                                       @click="publishImage($event,slotProp.item, false)"
+                                       @click="publishImage(slotProp.item, false)"
                                        circle>
                               <i class="iconfont icon-cancel-share"></i>
                             </el-button>
                           </el-tooltip>
                           <el-tooltip content="取消分享" placement="top" effect="light" v-else>
-                            <el-button type="success" @click="publishImage($event,slotProp.item, true)" circle>
+                            <el-button type="success" @click="publishImage(slotProp.item, true)" circle>
                               <i class="iconfont icon-share-bold"></i>
                             </el-button>
                           </el-tooltip>
@@ -185,7 +203,7 @@
 </template>
 
 <script setup>
-import {onMounted, onUnmounted, ref} from "vue"
+import {nextTick, onMounted, onUnmounted, ref} from "vue"
 import {Delete, InfoFilled, Picture} from "@element-plus/icons-vue";
 import {httpGet, httpPost} from "@/utils/http";
 import {ElMessage, ElMessageBox, ElNotification} from "element-plus";
@@ -286,25 +304,9 @@ const connect = () => {
     }
   }
 
-  // 心跳函数
-  const sendHeartbeat = () => {
-    clearTimeout(heartbeatHandle.value)
-    new Promise((resolve, reject) => {
-      if (socket.value !== null) {
-        socket.value.send(JSON.stringify({type: "heartbeat", content: "ping"}))
-      }
-      resolve("success")
-    }).then(() => {
-      heartbeatHandle.value = setTimeout(() => sendHeartbeat(), 5000)
-    });
-  }
-
   const _socket = new WebSocket(host + `/api/dall/client?user_id=${userId.value}`);
   _socket.addEventListener('open', () => {
     socket.value = _socket;
-
-    // 发送心跳消息
-    sendHeartbeat()
   });
 
   _socket.addEventListener('message', event => {
@@ -313,12 +315,12 @@ const connect = () => {
       reader.readAsText(event.data, "UTF-8")
       reader.onload = () => {
         const message = String(reader.result)
-        if (message === "FINISH") {
+        if (message === "FINISH" || message === "FAIL") {
           page.value = 0
           isOver.value = false
           fetchFinishJobs(page.value)
         }
-        fetchRunningJobs()
+        nextTick(() => fetchRunningJobs())
       }
     }
   });
@@ -336,22 +338,7 @@ const fetchRunningJobs = () => {
   }
   // 获取运行中的任务
   httpGet(`/api/dall/jobs?finish=false`).then(res => {
-    const jobs = res.data
-    const _jobs = []
-    for (let i = 0; i < jobs.length; i++) {
-      if (jobs[i].progress === -1) {
-        ElNotification({
-          title: '任务执行失败',
-          dangerouslyUseHTMLString: true,
-          message: `任务ID：${jobs[i]['task_id']}<br />原因：${jobs[i]['err_msg']}`,
-          type: 'error',
-        })
-        power.value += dallPower.value
-        continue
-      }
-      _jobs.push(jobs[i])
-    }
-    runningJobs.value = _jobs
+    runningJobs.value = res.data
   }).catch(e => {
     ElMessage.error("获取任务失败：" + e.message)
   })
@@ -409,8 +396,7 @@ const generate = () => {
   })
 }
 
-const removeImage = (event, item) => {
-  event.stopPropagation()
+const removeImage = (item) => {
   ElMessageBox.confirm(
       '此操作将会删除任务和图片，继续操作码?',
       '删除提示',
@@ -420,7 +406,7 @@ const removeImage = (event, item) => {
         type: 'warning',
       }
   ).then(() => {
-    httpGet("/api/dall/remove", {id: item.id, user_id: item.user}).then(() => {
+    httpGet("/api/dall/remove", {id: item.id}).then(() => {
       ElMessage.success("任务删除成功")
       page.value = 0
       isOver.value = false
@@ -437,18 +423,16 @@ const previewImg = (item) => {
 }
 
 // 发布图片到作品墙
-const publishImage = (event, item, action) => {
-  event.stopPropagation()
+const publishImage = (item, action) => {
   let text = "图片发布"
   if (action === false) {
     text = "取消发布"
   }
-  httpGet("/api/dall/publish", {id: item.id, action: action,user_id:item.user_id}).then(() => {
+  httpGet("/api/dall/publish", {id: item.id, action: action}).then(() => {
     ElMessage.success(text + "成功")
     item.publish = action
     page.value = 0
     isOver.value = false
-    fetchFinishJobs()
   }).catch(e => {
     ElMessage.error(text + "失败：" + e.message)
   })