0930

ruoyi-ui/package.json

@@ -34,6 +34,7 @@
     "html2canvas": "^1.4.1",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
+    "json-beautify": "^1.1.1",
     "json-editor-vue3": "^1.1.1",
     "moment": "^2.30.1",
     "nprogress": "0.2.0",

ruoyi-ui/src/views/standardization/modeling/index.vue

@@ -350,6 +350,7 @@
             </div>
             <div v-if="specialNodeProps.data.nodeType=='SERVICE'" 
             class="vue-flow__node-default" 
+            v-loading="specialNodeProps.data.loading"
             style="border: 0.5px solid #c8c9cc;border-radius: 6px;border-radius: 6px;min-height: 8vh;min-width: 13vw">
               <div style='width:100%;font-size:10px;display:flex;align-items:flex-end;height: 10px;margin-top: 2%;justify-content: space-between;'>
                 <img style="width: 15px;height:15px;border-radius: 12px;" src="@/assets/images/icon-HTTP.png" alt="">
@@ -359,7 +360,9 @@
                   <!-- {{ specialNodeProps.data.label}} -->
                 </div>
                 <el-icon v-if="specialNodeProps.data.isSuccess"  style="cursor: pointer;margin-left: auto;color: #67C23A;"><SuccessFilled /></el-icon>
-                <el-icon v-if="specialNodeProps.data.isFail"  style="cursor: pointer;margin-left: auto;color: #F56C6C;"><CircleCloseFilled /></el-icon>
+                <el-tooltip :content="specialNodeProps.data.erMsg" placement="top" effect="light">
+                  <el-icon v-if="specialNodeProps.data.isFail"  style="cursor: pointer;margin-left: auto;color: #F56C6C;"><CircleCloseFilled /></el-icon>
+                </el-tooltip>
                 <!-- <el-icon @click.stop="testNode(specialNodeProps)" style="cursor: pointer;margin-left: 2%;"><CaretRight /></el-icon> -->
                 <el-icon @click.stop="delNode(specialNodeProps)" style="cursor: pointer;color: #F56C6C;margin-left: 2%;"><Delete /></el-icon>
               </div>
@@ -669,7 +672,7 @@
       <el-dialog @close="" title="试运行结果" v-model="dialogVisibleSart" width="50%" destroy-on-close :key="tableKey">
          <el-input
           v-model="outputData"
-          :autosize="{ minRows: 2, maxRows: 4 }"
+          :autosize="{ minRows: 10, maxRows: 15 }"
           type="textarea"
           placeholder="Please input"
         />
@@ -692,6 +695,7 @@ import '@vue-flow/controls/dist/style.css'
 import '@vue-flow/core/dist/theme-default.css';
 import { Plus,Search } from '@element-plus/icons-vue'
 import { toRaw, isReactive, isProxy,onUnmounted  } from 'vue';
+import beautify from 'json-beautify'; 
 import DynamicMap from '@/components/DynamicMap/index.vue'
 import {Promotion} from '@element-plus/icons-vue'
 import { onMounted, ref,onBeforeUnmount } from 'vue'
@@ -974,85 +978,104 @@ function testOne(){
     outputData.value = res.msg
   })
 }
-function startTest(){
-  var param = []
-  var paramEnd = []
-  if(tableDataCanStart.value.length>0&&tableDataCanEnd.value.length>0){
-    tableDataCanStart.value.forEach(item=>{
-      var par = {
-        name:item.name,
-        dataType:item.dataType,
-        refType:'input',
-        description:item.description,
-        required:item.required
-      }
-      param.push(par)
-    })
-    tableDataCanEnd.value.forEach(item=>{
-      var par = {
-        name:item.name,
-        dataType:item.dataType,
-        refType:'ref',
-        ref:item.paramValue
-      }
-      paramEnd.push(par)
-    })
-    nodes.value.forEach(item=>{
-      if(item.id==='1'){
-        item.data.parameters = param 
-      }
-      if(item.id==='2'){
-        item.data.outputDefs = paramEnd 
-      }
-    })
-    
-    var a = JSON.parse(JSON.stringify(toObject()))
-    console.log(a)
-    a.nodes.forEach(item=>{
-      if(item.id==='1'){
-        item.type = 'startNode'
-      }
-      else if(item.id==='2'){
-        item.type = 'endNode'
-      }
-      else{
-        item.type = 'serviceNode'
-      }
-    })
-    var par = {}
-    par.flowGraph = JSON.stringify(a)
-    par.params = {}
-    par.webSocketId = messages.value[0]
-    tableDataCanStart.value.forEach(item=>{
-      // par.set(item.name,item.value)
-      par.params[item.name] = item.value
-    })
-    console.log(a)
-    runflow(par).then(res=>{
-      if(res.code === 200){
-        proxy.$message({
-            message: res.msg,
-            type: 'success'
-        });
-        dialogVisibleSart.value = true
-        outputData.value = JSON.stringify(res.data)
-      }
-    })
-    
-  }
-  else if(tableDataCanStart.value.length===0){
-    proxy.$message({
-        message: '请设置输入值！',
-        type: 'warning'
-    });
-  }
-  else if(tableDataCanEnd.value.length===0){
-    proxy.$message({
-        message: '请设置输出值！',
-        type: 'warning'
-    });
+const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+async function startTest(){
+  messages.value = []
+  ws.value = new WebSocket('ws://127.0.0.1:8082/websocket/message'); // 替换为你的 WS 地址
+  
+  ws.value.onopen = () => {
+    connected.value = true;
+  };
+  
+  ws.value.onmessage = (event) => {
+    messages.value.push(event.data); // 存储接收到的消息
+  };
+  await delay(1000)
+  if(messages.value.length>0){
+    var param = []
+    var paramEnd = []
+    if(tableDataCanStart.value.length>0&&tableDataCanEnd.value.length>0){
+      tableDataCanStart.value.forEach(item=>{
+        var par = {
+          name:item.name,
+          dataType:item.dataType,
+          refType:'input',
+          description:item.description,
+          required:item.required
+        }
+        param.push(par)
+      })
+      tableDataCanEnd.value.forEach(item=>{
+        var par = {
+          name:item.name,
+          dataType:item.dataType,
+          refType:'ref',
+          ref:item.paramValue
+        }
+        paramEnd.push(par)
+      })
+      nodes.value.forEach(item=>{
+        if(item.id==='1'){
+          item.data.parameters = param 
+        }
+        if(item.id==='2'){
+          item.data.outputDefs = paramEnd 
+        }
+      })
+      
+      var a = JSON.parse(JSON.stringify(toObject()))
+      console.log(a)
+      a.nodes.forEach(item=>{
+        if(item.id==='1'){
+          item.type = 'startNode'
+        }
+        else if(item.id==='2'){
+          item.type = 'endNode'
+        }
+        else{
+          item.type = 'serviceNode'
+        }
+      })
+      var par = {}
+      par.flowGraph = JSON.stringify(a)
+      par.params = {}
+      par.webSocketId = messages.value[0]
+      tableDataCanStart.value.forEach(item=>{
+        // par.set(item.name,item.value)
+        par.params[item.name] = item.value
+      })
+      console.log(a)
+      await runflow(par).then(res=>{
+        if(res.code === 200){
+          proxy.$message({
+              message: res.msg,
+              type: 'success'
+          });
+          dialogVisibleSart.value = true
+          // outputData.value = JSON.stringify(res.data)
+          outputData.value = beautify(res.data, null, 2, 80)
+          ws.value.close()
+          ws.value = null
+        }
+      })
+      // connect()
+      
+    }
+    else if(tableDataCanStart.value.length===0){
+      proxy.$message({
+          message: '请设置输入值！',
+          type: 'warning'
+      });
+    }
+    else if(tableDataCanEnd.value.length===0){
+      proxy.$message({
+          message: '请设置输出值！',
+          type: 'warning'
+      });
+    }
   }
   
+  
 }
 function saveStartNode(){
   nodeStart.value = false
@@ -1223,6 +1246,7 @@ function saveFlow(){
   parFlow.nodes.forEach(item => {
     if(item.id==='1'){
       item.type='startNode'
+      item.data.parameters = tableDataCanStart.value;
     }
     if(item.id==='2'){
       item.type='endNode'
@@ -1232,6 +1256,7 @@ function saveFlow(){
       // item.data.parameters.splice(0, item.data.parameters.length, ...tableDataCanEnd.value);
       // item.data.parameters = JSON.parse(JSON.stringify(item.data.parameters))
     }
+    item.title = item.label
   });
   
   // console.log(JSON.parse(JSON.stringify(parFlow)))
@@ -1538,6 +1563,9 @@ function getList() {
         if(item.id==='2'&&item.data){
           tableDataCanEnd.value = item.data.parameters
         }
+        if(item.id==='1'&&item.data.parameters){
+          tableDataCanStart.value = item.data.parameters
+        }
       })
       nodes.value = a.nodes
       edges.value = a.edges
@@ -1555,11 +1583,9 @@ const connect = () => {
   
   ws.value.onopen = () => {
     connected.value = true;
-    console.log('WebSocket 连接已建立');
   };
   
   ws.value.onmessage = (event) => {
-    console.log('收到消息:', event);
     messages.value.push(event.data); // 存储接收到的消息
   };
   
@@ -1592,19 +1618,42 @@ onUnmounted(() => {
   disconnect();
 });
 onMounted(() => {
-  connect()
-    getTreeLeft()
-    getList();
+  // connect()
+  getTreeLeft()
+  getList();
 })
 watch(messages, (newMessages) => {
   newMessages.forEach(item=>{
-
+    item = JSON.parse(item)
+    nodes.value.forEach(item1=>{
+      if(item1.id===item.id){
+        console.log(1)
+        if(item.nodeState&&item.nodeState==='START'){
+          console.log(2)
+          item1.data.loading = true
+        }
+        if(item.nodeState&&item.nodeState==='END'){
+          console.log(2)
+          item1.data.loading = false
+          item1.data.isSuccess = true
+          item1.data.isFail = false
+        }
+        if(item.nodeState&&item.nodeState==='ERROR'){
+          console.log(2)
+          item1.data.loading = false
+          item1.data.isSuccess = false
+          item1.data.isFail = true
+          item1.data.erMsg = item.errorMessage
+        }
+      }
+    })
   })
+  console.log(nodes.value)
   console.log('当前节点列表:', newMessages) // 实时输出最新数据
 }, { deep: true })
-watch(nodes, (newNodes) => {
-  console.log('当前节点列表:', newNodes) // 实时输出最新数据
-}, { deep: true })
+// watch(nodes, (newNodes) => {
+//   console.log('当前节点列表:', newNodes) // 实时输出最新数据
+// }, { deep: true })
 </script>
 <style>
 @import '@vue-flow/core/dist/style.css';