From 3c969488b75deb7212738605527a86803674a437 Mon Sep 17 00:00:00 2001
From: limengnan <420004014@qq.com>
Date: Thu, 26 Mar 2026 11:32:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=AE=AD=E7=BB=83=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8Bwebsocket?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 business-css/frontend/.env.development        |   1 +
 business-css/frontend/.env.production         |   3 +-
 business-css/frontend/package.json            |   2 +
 .../frontend/src/assets/table/loading.gif     | Bin 0 -> 1792 bytes
 .../src/components/antvx6/connectingwire.vue  |   1 +
 .../frontend/src/store/modules/user.ts        |   4 +
 .../modelTrainTask/index.vue                  | 100 ++++++++++++------
 7 files changed, 76 insertions(+), 35 deletions(-)
 create mode 100644 business-css/frontend/src/assets/table/loading.gif

diff --git a/business-css/frontend/.env.development b/business-css/frontend/.env.development
index 470ff49..0a98f5c 100644
--- a/business-css/frontend/.env.development
+++ b/business-css/frontend/.env.development
@@ -7,3 +7,4 @@ VITE_APP_TITLE = '临界事故情景分析模拟系统'
 VITE_APP_PORT = 3000
 VITE_APP_BASE_API = '/dev-api'
 VITE_APP_BASE_HTTP = 'http://localhost:3000'
+VITE_APP_WS_API = 'http://192.168.1.76:8090'
diff --git a/business-css/frontend/.env.production b/business-css/frontend/.env.production
index 7a2d7c7..5f08010 100644
--- a/business-css/frontend/.env.production
+++ b/business-css/frontend/.env.production
@@ -4,4 +4,5 @@ NODE_ENV='production'
 VITE_APP_TITLE = 'NewFrameWork2023-WEB'
 VITE_APP_PORT = 3000
 VITE_APP_BASE_API = '/prod-api'
-VITE_APP_BASE_HTTP = 'http://localhost:3000'
\ No newline at end of file
+VITE_APP_BASE_HTTP = 'http://localhost:3000'
+VITE_APP_WS_API = 'http://192.168.1.76:8090'
\ No newline at end of file
diff --git a/business-css/frontend/package.json b/business-css/frontend/package.json
index 0d4da51..b79b2e6 100644
--- a/business-css/frontend/package.json
+++ b/business-css/frontend/package.json
@@ -31,7 +31,9 @@
     "path-to-regexp": "^6.2.0",
     "pinia": "^2.0.12",
     "screenfull": "^6.0.0",
+    "sockjs-client": "^1.6.1",
     "sortablejs": "^1.14.0",
+    "stompjs": "^2.3.3",
     "vue": "^3.2.40",
     "vue-i18n": "^9.1.9",
     "vue-router": "^4.1.6",
diff --git a/business-css/frontend/src/assets/table/loading.gif b/business-css/frontend/src/assets/table/loading.gif
new file mode 100644
index 0000000000000000000000000000000000000000..26d2516e1cedd35510d408bfd41ece77a483fe10
GIT binary patch
literal 1792
zcmZ?wbhEHb6ky<IXkcVe%m2^7z@Ye_+s`#5*x50_)kx2PnGqrs;Txdfl30=mq;2dg
z3KEmEQ%e+*Qqwc@Y?a>c-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)Wn
zQ(;w+TacStlBiITo0C^;Rbi`?n3A8AY6WD2g!Ppaz)DK8ZIv8B5(*$Yo%4%Q6-@Qa
zbdwE@EfmZx^$bldEsRWb6pRcE&GZc{^$ksQ4GgUeEUgR-6`()~Xj@TAnpKdC8`Lf!
z&sHg;q@=(~U%$M(T(8_%FTW^V-_X+1Qs2Nx-^fT8s6w~6GOr}DLN~8i8D@e@YH@N=
zW<g12ex3rz#Kffh(h^%Gpi3cM$Sr^yn^&v{_Kse1ey)B+Vu8M)o&m^9FonLp_?717
z!c`ZS1f?R}i`C%bkjjEo{h-w1{L-T2RG@NYkW~d%&PAz-CHX}m`T04pPz=b(FUc>?
z$S+WEb_Ru-xq?P`W?o8ud9fx~kFT$lXI^nhVqS8pr;Du;&=kGQ%oJd7TAEupnYkKS
zI2#!nx*1xSn;W@WnwXkeIvE=oSUAD-y5uL9=BDPA!1Sgd^t$2H3rY^T1wfl!Qj0Rn
zQd8WD@^cly-nPob?G|U8=0WwQ;C71(PQCg-$LND17b&t~LckORV#1RykONQrsd>N@
zUj$6rjQ{`r{qy_R&mZ5vef{$J)5j0*-@SeF`qj%9&!0Vg^7zri2lwyYy>t84%^TOR
zUA=Po(!~qs&z(JU`qar2$B!L7a`@1}1N-;w-Lrew&K=vgZQZhY)5Z<!*R5T%dezDm
z%a<)(vUt(L1@q_4oilsZ%o)?CO`S4%(!>e<eZ4*1U7a26ZLKZMO^prpb+t9sRh1Rx
zWu+y>MTG_VdAT{+S(zE>X{jm6Nr?&Zaj`McQIQehVWA<xL4g7Oe!f25UY;KAZmurQ
zPL2-tcD6RwR+bj#W~L^_MurCZdb&E=TACW_YN{&AN{R~da<VegQj!wlVxl6#LV^PP
ze7ro|T$~*2Y^*HIOuzy{@h1x>I|Czw4zR3X02L+-OiDfdj3?P|OZ0pUG+AFGSzOn6
z>zd@W$f`-3mS}LBUwCPi$%svxLQnt7)3Of)8a`e%RX;r^sn#>WsBb<~rrfM;vl-Vd
z55j5}NYm^C+;@Ttqoh>N{rq}6<c6Y=s$|Hm73(@wb}h!GiFtYT1fIa0e7$tzVvAzl
zysM$56K^V<^jM|$rDP3<D0b&DvsKo1&nWf@vQ|GgNB@RqyhoV=XI@&%49{1cn`UFx
zq}apE)>$(vta^&8)yA;hztw8Je@vbFxOK&er5C#*Ke*Yk;<Bpq`3$j|K3A=mC%bId
zw+g81E$C=Vsa)1|`(W=IF>IQ^Rv|Qn0yTZtQHz|lsH1J|?qi>Pq_J9sRo61jMUSK=
zt=Zl5#;2PYT|fsWZEZ-hTqd=A)9PI_7xS=V)uqtGIDO-@ITtERT)Q@(nfm*`g0x0c
z+SQ6MskkLy{qFw|!R9Tc9(jgsFLqujUVE0?aMLb-)yf6#a*A6GWhSqU4yg@YGuH#0
lm{`%$ATV7Z(qP{Ccl$i!jQV2Ibi}$==1q0du@q;p1^{U5R|x<B

literal 0
HcmV?d00001

diff --git a/business-css/frontend/src/components/antvx6/connectingwire.vue b/business-css/frontend/src/components/antvx6/connectingwire.vue
index 28e8bcb..bc169f9 100644
--- a/business-css/frontend/src/components/antvx6/connectingwire.vue
+++ b/business-css/frontend/src/components/antvx6/connectingwire.vue
@@ -200,6 +200,7 @@ onMounted(() => {
   border: 1px solid #ccc;
   margin: 5px;
   cursor: pointer;
+  border-radius: 4px;
 }
 .connectingwire-customize{
   width: 200px;
diff --git a/business-css/frontend/src/store/modules/user.ts b/business-css/frontend/src/store/modules/user.ts
index d825937..249e270 100644
--- a/business-css/frontend/src/store/modules/user.ts
+++ b/business-css/frontend/src/store/modules/user.ts
@@ -13,6 +13,7 @@ export const useUserStore = defineStore('user', () => {
   // state
   const Token = ref<string>(getToken() || '');
   const nickname = ref<string>('');
+  const userId = ref<string>('');
   const avatar = ref<string>('');
   const roles = ref<Array<string>>([]); // 用户角色编码集合 → 判断路由权限
   const perms = ref<Array<string>>([]); // 用户权限编码集合 → 判断按钮权限
@@ -48,6 +49,7 @@ export const useUserStore = defineStore('user', () => {
             reject('getUserInfo: roles must be a non-null array!');
           }
           nickname.value = data.userInfo.nickname;
+          userId.value = data.userInfo.id;
           avatar.value = data.userInfo.avatar;
           roles.value = data.roles;
           perms.value = data.permissions;
@@ -79,6 +81,7 @@ export const useUserStore = defineStore('user', () => {
     removeToken();
     Token.value = '';
     nickname.value = '';
+    userId.value = '';
     avatar.value = '';
     roles.value = [];
     perms.value = [];
@@ -86,6 +89,7 @@ export const useUserStore = defineStore('user', () => {
   return {
     Token,
     nickname,
+    userId,
     avatar,
     roles,
     perms,
diff --git a/business-css/frontend/src/views/business/algorithmManagement/modelTrainTask/index.vue b/business-css/frontend/src/views/business/algorithmManagement/modelTrainTask/index.vue
index 1243596..7e1fa3b 100644
--- a/business-css/frontend/src/views/business/algorithmManagement/modelTrainTask/index.vue
+++ b/business-css/frontend/src/views/business/algorithmManagement/modelTrainTask/index.vue
@@ -5,14 +5,21 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { onMounted, ref, nextTick,reactive } from "vue";
+import { onMounted,onBeforeUnmount, ref, nextTick,reactive } from "vue";
 import { ElForm, ElMessage, ElMessageBox,FormRules } from "element-plus";
 import { addAlgorithms,deleteAlgorithms,trainAlgorithmsPage,trainPublish,trainStatus} from "@/api/algorithml";
-
+import { useUserStore } from '@/store/modules/user';
 import { searchAlgorithmsPage,algorithmsType } from "@/api/business/algorithm";
 import { getDictItemById } from '@/api/dict';
+// @ts-ignore
+import SockJS from 'sockjs-client'
+// @ts-ignore
+import * as Stomp from 'stompjs';
 import Page from '@/components/Pagination/page.vue'
+const userStore = useUserStore();
+
 const apiUrl = import.meta.env.VITE_APP_BASE_API; // 基础路径
+const webSocketUrl = import.meta.env.VITE_APP_WS_API;
 const fileList:any = ref([])
 const isSwitch = ref(false);
 const textarea = ref('')
@@ -37,7 +44,7 @@ const rules = reactive<FormRules>({
 const total = ref()
 //定义表格数据
 
-const tableData= ref([]);
+const tableData:any = ref([]);
 // 表格加载
 const loading = ref(false)
 function gettableData() {
@@ -89,7 +96,7 @@ function getAlgorithmType(type:any) { // 获取算法类型
   }).catch((err:any) => {
   });
 }
-const menuData:any = ref([]);
+const equipmentData:any = ref([]);
 // 查询字典项
 function menuInit() { // 获取算法类型字典项
   let params = {
@@ -98,7 +105,7 @@ function menuInit() { // 获取算法类型字典项
     current:1
   }
   getDictItemById(params).then((result: any) => {
-    menuData.value = result.data.records;
+    equipmentData.value = result.data.records;
   }).catch((err: any) => {
   });
 }
@@ -111,7 +118,7 @@ function statusInit() { // 获取类型字典项
   }
   getDictItemById(params).then((result: any) => {
     statusData.value = result.data.records;
-    gettableData()
+
   }).catch((err: any) => {
   });
 }
@@ -297,27 +304,41 @@ function dateFormat(row: any) {
     return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
   }
 }
+let webSocket:any = null;
+
 onMounted(() => {
   menuInit() // 获取算法类型字典项
   statusInit()
   getAlgorithmList() // 获取算法列表
-
   gettableData();
 
+
+  // webSocket = new WebSocket(webSocketUrl + '/websocket/' + userStore.Token);
+  const socket = new SockJS(webSocketUrl + '/ws/train');
+  const stompClient = Stomp.over(socket);
+  stompClient.connect({}, (frame:any) => {
+     console.log('✅ 连接成功！');
+    stompClient.subscribe('/topic/train-status/all', (message:any) => {
+      let data:any = {}
+      if(message.body != null){
+        data = JSON.parse(message.body)
+        for(let i = 0;i<tableData.value.length;i++){
+        if(tableData.value[i].taskId == data.taskId){
+          tableData.value[i].status = data.status
+        }
+      }
+      }
+    });
+
+  });
+
 });
-function changeStatus(row: any) {
-  // let params = {
-  //   algorithmId: row.algorithmId,
-  //   status: row.status,
-  // };
-  // updateAlgorithms(params).then((res) => {
-  //   gettableData();
-  //   ElMessage({
-  //     type: "success",
-  //     message: "更新成功",
-  //   });
-  // });
-}
+onBeforeUnmount(()=>{
+  if(webSocket != null){
+    webSocket.close();
+  }
+ 
+})
 
 function releaseClick(row: any) {
   title.value = "发布模型";
@@ -345,7 +366,6 @@ function handlefileremove(){
 
 function statusName(code:any){
   let name = ''
-console.log(statusData.value)
   for(let i = 0;i<statusData.value.length;i++){
     if(statusData.value[i].itemCode == code){
       name = statusData.value[i].dictName
@@ -353,6 +373,15 @@ console.log(statusData.value)
   }
   return name
 }
+function equipmentName(code:any){
+  let name = ''
+  for(let i = 0;i<equipmentData.value.length;i++){
+    if(equipmentData.value[i].itemCode == code){
+      name = equipmentData.value[i].dictName
+    }
+  }
+  return name
+}
 const trainParamsData:any = ref([])
 
 function addTrainParams(){ 
@@ -390,7 +419,7 @@ function confirmsClick(){
     versionTag: textarea.value,
   }
   trainPublish(data).then((res:any) => {
-    if(res.code == '0'){
+    if( res != null && res.code == '0'){
        gettableData();
       ElMessage({
         type: "success",
@@ -445,7 +474,7 @@ const objectSpanMethod = ({
             <el-option v-for="item in algorithmData" :key="item.algorithmType" :label="item.algorithmType" :value="item.algorithmType" ></el-option>
           </el-select>
           <el-select style="width: 200px;margin-left: 10px;" clearable v-model="queryParams.deviceType" placeholder="请选择设备类型" @change="gettableData">
-            <el-option v-for="item in menuData" :key="item.itemCode" :label="item.dictName" :value="item.itemCode" ></el-option>
+            <el-option v-for="item in equipmentData" :key="item.itemCode" :label="item.dictName" :value="item.itemCode" ></el-option>
           </el-select>
           <el-select style="width: 200px;margin-left: 10px;" clearable v-model="queryParams.status" placeholder="请选择状态" @change="gettableData">
             <el-option v-for="item in statusData" :key="item.itemCode" :label="item.dictName" :value="item.itemCode" ></el-option>
@@ -464,15 +493,18 @@ const objectSpanMethod = ({
         <el-table-column type="index" label="序号" width="70" align="center" prop="taskId"></el-table-column>
         <el-table-column prop="taskName" label="任务名称" min-width="180" ></el-table-column>
         <el-table-column prop="algorithmType" label="算法类型" width="160" ></el-table-column>
-        <el-table-column prop="deviceType" label="设备类型" width="160" ></el-table-column>
+        <el-table-column prop="deviceType" label="设备类型" width="160" >
+          <template #default="scope">
+            {{ equipmentName(scope.row.deviceType) }}
+          </template>
+        </el-table-column>
         <el-table-column prop="status" label="任务状态" width="100" align="center">
           <template #default="scope">
-          <!-- <span v-if="scope.row.status == 'Success' " style="color:rgb(51,126,204)"> {{statusName(scope.row.status)}}</span>  -->
-          <span v-if="scope.row.status == 'Failed' " style="color: #f56c6c;"> {{statusName(scope.row.status)}}</span> 
-          <span v-if="scope.row.status == 'Success' " style="color: #ff8c02;display: flex;align-items: center;" >
-            <!-- Training -->
-            <img src="@/assets/table/view.png" alt="" title="训练中" style="margin-right: 10px;"> {{statusName(scope.row.status)}}
-            </span> 
+          <span v-if="scope.row.status == 'Success' " style="color:#00c10b"> {{statusName(scope.row.status)}}</span> 
+          <span v-if="scope.row.status == 'Failed' " style="color: #fd3737"> {{statusName(scope.row.status)}}</span> 
+          <span v-if="scope.row.status == 'Training' " style="color: #266fff;display: flex;align-items: center;" >
+            <img src="@/assets/table/loading.gif" alt="" title="训练中" style="margin-right: 10px;"> {{statusName(scope.row.status)}}
+          </span> 
 
         </template>
         </el-table-column>
@@ -515,7 +547,7 @@ const objectSpanMethod = ({
         </el-form-item> 
         <el-form-item label="设备类型" prop="deviceType" style="width: 100%;"  >
         <el-select v-model="info.deviceType" placeholder="请选择设备类型">
-          <el-option v-for="item in menuData" :key="item.itemCode" :label="item.dictName" :value="item.itemCode" ></el-option>
+          <el-option v-for="item in equipmentData" :key="item.itemCode" :label="item.dictName" :value="item.itemCode" ></el-option>
         </el-select>
         </el-form-item> 
         <el-form-item label="算法类型" prop="algorithmType" style="width: 100%;" >
@@ -577,7 +609,7 @@ const objectSpanMethod = ({
 
     <el-dialog v-model="dialogViewVisible" :close-on-click-modal="false"
       :modal="false" draggable :before-close="handleClose" :title="'查看详情'"
-      append-to-body width="1145px" height="600px">
+      append-to-body width="1145px" height="600px" class="modelTrainTask-dialog">
       <div style=" width: calc(100%);    height: calc(100vh - 200px);">
         <div style="display: flex; margin-bottom: 20px; border-bottom: 1px solid #e5e5e5;padding-bottom: 5px;">
           <div @click="changeShowResult(false)" class="adddevice_navigation_left" :class="{'adddevice_navigation_activeleft':!isEchartsModel}">基本信息</div>
@@ -596,7 +628,7 @@ const objectSpanMethod = ({
           </el-form-item>
           <el-form-item label="设备类型" style="width: 100%;" >
             <el-select v-model="info.deviceType" placeholder="请选择设备类型"  :disabled="true">
-          <el-option v-for="item in menuData" :key="item.itemCode" :label="item.dictName" :value="item.itemCode" ></el-option>
+          <el-option v-for="item in equipmentData" :key="item.itemCode" :label="item.dictName" :value="item.itemCode" ></el-option>
         </el-select>
           </el-form-item>
           <el-form-item label="训练参数" style="width: 100%;">
@@ -646,7 +678,7 @@ const objectSpanMethod = ({
         </el-form-item> 
         <el-form-item label="设备类型" prop="deviceType"   >
         <el-select v-model="info.deviceType" placeholder="请选择设备类型" style="width: 100%;" disabled>
-          <el-option v-for="item in menuData" :key="item.itemCode" :label="item.dictName" :value="item.itemCode" ></el-option>
+          <el-option v-for="item in equipmentData" :key="item.itemCode" :label="item.dictName" :value="item.itemCode" ></el-option>
         </el-select>
         </el-form-item> 
         <el-form-item label="版本号"  >