314

src/views/echart/optimize_monitor.vue

@@ -13,7 +13,7 @@
   </div>
 </template>
   <script setup>
-import { ref, onMounted, reactive, markRaw, inject, watch, nextTick } from "vue"
+import { ref, onMounted, reactive, markRaw, inject, watch, nextTick,defineExpose } from "vue"
 import { RouterView, RouterLink } from "vue-router"
 import { request, uploadFile } from "@/utils/request"
 import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus"
@@ -32,7 +32,7 @@ let series = ref([
     data: [20, 10, 40, 30] // y轴对应数据
   }
 ])
-let xdata = ref(['0','1.00','2.00','3.00','4.00','5.00','6.00','7.00','8.00'])
+let xdata = ['0','1.00','2.00','3.00','4.00','5.00','6.00','7.00','8.00']
 let chartContainer = ref()
 let myChart
 let chartDom = ref()
@@ -64,37 +64,78 @@ const echatinit = () => {
 }
 // 从websocket取数据
 const getsockechart = (data) => {
-  curvedata.value = data
-  series.value = []
-  let rows = curvedata.value
+  console.log("曲线数据", data);
+  curvedata.value = data;
+  series.value = [];
+  xdata.value = [];
+  let rows = curvedata.value;
+
+  // 清空之前的数据
+  
+  let convergeDate = {
+    "design_var/upperB": [], // 存储 design_var/upperB 的数据
+    "design_var/lowerB": []  // 存储 design_var/lowerB 的数据
+  };
+
+  // 遍历每一行数据
   for (let i = 0; i < rows.length; i++) {
-    vars.value = rows[i].vars.split(",")
-    vals.value = rows[i].vals.split(" ")
-    let data = vals.value.map((str) => Number(str))
-    convergeDate.value.push(data)
-    xdata.value.push(rows[i].step)
+    let vals = rows[i].vals.split(" "); 
+
+    let upperB = JSON.parse(vals[3]);
+    let lowerB = JSON.parse(vals[4]); 
+
+    convergeDate["design_var/upperB"].push(...upperB);
+    convergeDate["design_var/lowerB"].push(...lowerB);
+
+    xdata.value.push(rows[i].step); // 用 `step` 字段的值填充 xdata
   }
-  for (let j = 0; j < vars.value.length; j++) {
-    let firstColumn = convergeDate.value.map((row) => row[j])
-    let item = {
-      name: vars.value[j],
+  // 为每条曲线分配数据
+  let upperBData = convergeDate["design_var/upperB"];
+  let lowerBData = convergeDate["design_var/lowerB"];
+
+  // 需要知道每条曲线的个数，这里是取每列的长度
+  let curveCount = upperBData.length / rows.length;
+
+  // 为每个曲线创建数据
+  for (let i = 0; i < curveCount; i++) {
+    let upperBCurveData = [];
+    let lowerBCurveData = [];
+
+    for (let j = 0; j < rows.length; j++) {
+      upperBCurveData.push(upperBData[j * curveCount + i]);
+      lowerBCurveData.push(lowerBData[j * curveCount + i]);
+    }
+
+    // 创建曲线数据项
+    series.value.push({
+      name: `design_var/upperB${i + 1}`, 
       type: "line",
       stack: "Total",
-      data: firstColumn
-    }
-    series.value.push(item)
+      data: upperBCurveData 
+    });
+
+    series.value.push({
+      name: `design_var/lowerB${i + 1}`, 
+      type: "line",
+      stack: "Total",
+      data: lowerBCurveData 
+    });
   }
+
+  // 使用 myChart 设置图表的配置
   myChart.setOption({
     legend: {
-      data: vars.value
+      data: [...Array(curveCount).keys()].map(i => `design_var/upperB${i + 1}`).concat(
+        [...Array(curveCount).keys()].map(i => `design_var/lowerB${i + 1}`)
+      ) // 设置图例数据为曲线名
     },
     xAxis: {
-      data: xdata.value
+      data: xdata 
     },
-    series: series.value
-  })
-  // linechart();
-}
+    series: series.value 
+  });
+  console.log('XDATAhi大哈办法就是发',xdata.value)
+};
 
 // 数据转化废弃
 const getshuju = (data) => {

src/views/home.vue

@@ -2881,14 +2881,54 @@ const listtableInit = () => {
   request(params)
     .then((res) => {
       console.log('列表初始化：',res);
-      tablefun
+      if (res.rows && res.rows.length > 0) {
+        // 遍历所有返回的条目
+        res.rows.forEach((row) => {
+          const { vars, vals } = row;  // 获取每一行的 vars 和 vals
+
+          // 调用 tablefun 函数更新表格
+          tablefun1(vars, vals);
+        });
+      }
     })
     .catch((err) => {
       ElMessage.error(err.returnMsg)
     })
 }  
 
+/**
+ * 解析 vals 数据，将 [ ] 解析成数组，其他数据保持原样
+ */
+ function parseVals(vals) {
+  let result = [];
+  let temp = "";
+  let inArray = false;
+
+  for (let char of vals) {
+    if (char === "[") {
+      inArray = true;
+      temp += char;
+    } else if (char === "]") {
+      inArray = false;
+      temp += char;
+      result.push(JSON.parse(temp.trim())); // 确保去除首尾空格后转换
+      temp = "";
+    } else if (char === " " && !inArray) {
+      if (temp.trim() !== "") {  // 避免空字符串被加入
+        result.push(temp.trim());
+      }
+      temp = "";
+    } else {
+      temp += char;
+    }
+  }
+
+  if (temp.trim() !== "") {
+    result.push(temp.trim());
+  }
 
+  return result.filter(item => item !== ""); // 过滤掉空字符串
+}
 
 //曲线监控
 const curveLine = () => {
@@ -3557,6 +3597,28 @@ function tablefun(vars, vals) {
     tableDatalieb.value.push(rowData);
   }
 
+  const tablefun1 = (vars, vals) => {
+  console.log('表格更新');
+  
+  // 解析列名，vars 以空格分隔
+  let headers = vars.split(" ");
+
+  // 更新表头
+  tableHeaders.value = headers.map(item => ({ label: item, prop: item }));
+
+  // 解析 vals 为数组（假设 vals 是一个字符串）
+  let values = vals.split(" ");
+
+  // 构造表格数据对象
+  let rowData = {};
+  headers.forEach((key, index) => {
+    rowData[key] = values[index] !== undefined ? values[index] : ""; // 处理数据长度不匹配情况
+  });
+
+  // 更新表格数据
+  tableDatalieb.value.push(rowData);
+};
+
 //获取日志
 const logsget = () => {
 
@@ -3653,6 +3715,8 @@ const websocketonmessage = (res) => {
 
     let vals = parsedData.vals.split(" "); // 以空格分割数据值
     tablefun(parsedData.vars, vals);  // 传递 vars 和 vals 更新表格
+    optmonitor1.value.getsockechart(arrobj.value);
+    
     // optmonitor1.value.getsockechart(arrobj.value);
     // processMonitor1ref.getsockechart(arrobj.value);
     // processMonitor2ref.getsockechart(arrobj.value);