添加训练模型websocket

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'

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'
+VITE_APP_BASE_HTTP = 'http://localhost:3000'
+VITE_APP_WS_API = 'http://192.168.1.76:8090'

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",

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;

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,

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) {
+onBeforeUnmount(()=>{
-  // let params = {
+  if(webSocket != null){
-  //   algorithmId: row.algorithmId,
+    webSocket.close();
-  //   status: row.status,
+  }
-  // };
+ 
-  // updateAlgorithms(params).then((res) => {
+})
-  //   gettableData();
-  //   ElMessage({
-  //     type: "success",
-  //     message: "更新成功",
-  //   });
-  // });
-}
 
 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 == 'Success' " style="color:#00c10b"> {{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 == 'Failed' " style="color: #fd3737"> {{statusName(scope.row.status)}}</span> 
-          <span v-if="scope.row.status == 'Success' " style="color: #ff8c02;display: flex;align-items: center;" >
+          <span v-if="scope.row.status == 'Training' " style="color: #266fff;display: flex;align-items: center;" >
-            <!-- Training -->
+            <img src="@/assets/table/loading.gif" alt="" title="训练中" style="margin-right: 10px;"> {{statusName(scope.row.status)}}
-            <img src="@/assets/table/view.png" alt="" title="训练中" style="margin-right: 10px;"> {{statusName(scope.row.status)}}
+          </span> 
-            </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="版本号"  >