tangjunhao 6 bulan lalu
induk
melakukan
ca6996afa3
2 mengubah file dengan 72 tambahan dan 48 penghapusan
  1. 3 2
      src/style/index.css
  2. 69 46
      src/views/home.vue

+ 3 - 2
src/style/index.css

@@ -332,7 +332,7 @@ overflow: hidden;
   }
   .main_model{
     width: 100%;
-    height:calc(100vh - 194px) ;
+    height:calc(100vh - 154px) ;
     text-align: center;
     position: relative;
   }
@@ -479,7 +479,7 @@ margin-top: -6px;
 }
 .main_model{
   width: 100%;
-  height: 100%;
+  
   display: flex;
   flex-direction: column;
 
@@ -490,6 +490,7 @@ margin-top: -6px;
 .maxh221{
  /* height: calc(100vh - 361px); */
   flex: 1;
+  
   overflow: auto;
 }
 /* .main_container{

+ 69 - 46
src/views/home.vue

@@ -1326,9 +1326,14 @@
                   <!-- 中间部分 -->
                    <!-- 列表监控 -->
                   <div class="conter_mian classtable " v-show="jiankong" style="width:100%; height: 100%;">
-                    <el-table :data="tableDatalieb" border style="display: flex; flex: 1; overflow: auto; height: 100%;" :header-cell-class-name="lbjkheaderCellClassName">
+                    <el-table :data="tableDatalieb" 
+                    border 
+                    style=" overflow: auto; height: 100%;" 
+                    :header-cell-class-name="lbjkheaderCellClassName"
+                    
+                    >
                       <el-table-column type="index" label="编号" width="150"></el-table-column>
-                      <el-table-column v-for="(header, index) in tableHeaders" :key="index" :prop="header.prop"
+                      <el-table-column v-for="(header, index) in tableHeaders" :key="index" :prop="header.prop" show-overflow-tooltip
                         :label="header.label" >
                       </el-table-column>
                     </el-table>
@@ -2657,7 +2662,8 @@ const dialogbolen = () => {
       runok();
       break;
     case "列表监控":
-      ifjiankong()
+      ifjiankong();
+      listtableInit();
       break;
     case "曲线监控":
       ifjiankong()
@@ -2867,6 +2873,23 @@ const runok = () => {
       ElMessage.error(err.returnMsg)
     })
 }
+const listtableInit = () => {
+  const params = {
+    transCode: 'MDO0021',
+    pid: pid.value,
+  }
+  request(params)
+    .then((res) => {
+      console.log('列表初始化:',res);
+      
+    })
+    .catch((err) => {
+      ElMessage.error(err.returnMsg)
+    })
+}  
+
+
+
 //曲线监控
 const curveLine = () => {
   const params = {
@@ -3515,28 +3538,25 @@ const scdelete = (index, row) => {
   }
 }
 // 表格
-function tablefun(vals) {
-  let arrtable = vals;
-  //console.log(arrtable);
-  let obj2 = {}
-  let heaarr = arrobj.value[0].vars.split(",");
-  //let heaarr=['x1', 'x2', 'x3', 'x4', 'x5', 'f1']
-  tableHeaders.value = [];
-  heaarr.forEach(function (item) {
-    let obj = { label: item, prop: item }; // 创建新对象
-    tableHeaders.value.push(obj);
-  });
-  let result = heaarr.map((key, index) => {
-    return { [key]: arrtable[index] };
-  });
+function tablefun(vars, vals) {
+    console.log('表格更新');
+    
+    // 解析列名,vars 以空格分隔
+    let headers = vars.split(" ");  
 
-  const mergedObject = result.reduce((accumulator, currentValue) => {
-    return { ...accumulator, ...currentValue };
-  }, {});
-  tableDatalieb.value.push(mergedObject);
+    // 更新表头
+    tableHeaders.value = headers.map(item => ({ label: item, prop: item }));
 
+    // 构造表格数据对象
+    let rowData = {};
+    headers.forEach((key, index) => {
+      rowData[key] = vals[index] !== undefined ? vals[index] : ""; // 处理数据长度不匹配情况
+    });
+
+    // 更新表格数据
+    tableDatalieb.value.push(rowData);
+  }
 
-}
 //获取日志
 const logsget = () => {
 
@@ -3547,6 +3567,7 @@ const logsget = () => {
   request(params)
     .then((res) => {
       // 去除空行
+      console.log('日志接口赋值')
       logs.value = res.logs.split('\n').filter(line => line.trim() !== '').join('\n');
       const results = extractBracesContent(logs.value);
       for (let i = 0; i < results.length; i++) {
@@ -3616,35 +3637,35 @@ const websocketonopen = (res) => {
 };
 // Websoket接收消息事件
 const websocketonmessage = (res) => {
-
+  console.log('websocket接受消息:',res.data)
   arrobj.value = [];
   if (res.data.indexOf('{') !== -1) {
     progressshow.value = true;
-    // return (number * 100) + '%';
-    // =(Number(JSON.parse(res.data).step))* 100;
-    let step = Number(JSON.parse(res.data).step);
+    
+    // 解析 WebSocket 接收到的消息数据
+    let parsedData = JSON.parse(res.data);
+    let step = Number(parsedData.step);
     percentage.value = Number((step / 20) * 100);
-    console.log(percentage.value);
-    //percentage.value = convertToPercentage((Number(JSON.parse(res.data).step)));
+    console.log("进度:", percentage.value);
+
     echartdata.value = res.data;
-    arrobj.value.push(JSON.parse(res.data));
-    let vals = (JSON.parse(res.data).vals).split(" ");
-    tablefun(vals);
-    optmonitor1.value.getsockechart(arrobj.value);
-    processMonitor1ref.getsockechart(arrobj.value);
-    processMonitor2ref.getsockechart(arrobj.value);
-    arearef.value.getsockechart(arrobj.value);
-    bargraphref.value.getsockechart(arrobj.value);
-    echartLineref.value.getsockechart(arrobj.value);
-    BarChartref.value.getsockechart(arrobj.value);
-    radarref.value.getsockechart(arrobj.value);
-    scatterref.value.getsockechart(arrobj.value);
-    pieref.value.getsockechart(arrobj.value);
-    paretoref.value.getsockechart(arrobj.value);
+    arrobj.value.push(parsedData);
+
+    let vals = parsedData.vals.split(" "); // 以空格分割数据值
+    tablefun(parsedData.vars, vals);  // 传递 vars 和 vals 更新表格
+    // optmonitor1.value.getsockechart(arrobj.value);
+    // processMonitor1ref.getsockechart(arrobj.value);
+    // processMonitor2ref.getsockechart(arrobj.value);
+    // arearef.value.getsockechart(arrobj.value);
+    // bargraphref.value.getsockechart(arrobj.value);
+    // echartLineref.value.getsockechart(arrobj.value);
+    // BarChartref.value.getsockechart(arrobj.value);
+    // radarref.value.getsockechart(arrobj.value);
+    // scatterref.value.getsockechart(arrobj.value);
+    // pieref.value.getsockechart(arrobj.value);
+    // paretoref.value.getsockechart(arrobj.value);
   } else {
     if (res.data.indexOf('——成功') !== -1) {
-
-
       const timer = setTimeout(function () {
         progressshow.value = false;
         console.log('关闭定时器')
@@ -3659,6 +3680,8 @@ const websocketonmessage = (res) => {
       logs.value = logs.value + '\n' + cleanedLog;
       let textarea = document.getElementById("textarea_id");
       textarea.scrollTop = textarea.scrollHeight;
+
+      
     }
 
 
@@ -4196,8 +4219,8 @@ color: #2267B1;
 }
 
 .classtable .el-table th .cell {
- background: #fff;
- line-height: 31px;
+ /* background: #fff; */
+ /* line-height: 31px; */
 }
 
 .classtable .el-table td.el-table__cell, .classtable .el-table th.el-table__cell{