317曲线监控修改，bug修改

src/style/index.css

@@ -583,6 +583,8 @@ box-sizing: border-box;
 .custom-divider {
   border-color: #B3B3B3;
   border-width: 1px;
+  margin: 0;
+  margin-right: 10px;
 }
 .colortext .el-tabs__item{
   font-family: 'Source Sans-Regular';

src/views/echart/optimize_monitor.vue

@@ -54,6 +54,108 @@ const echatinit = () => {
   xdata.value = []
 }
 // 从websocket取数据
+// const getsockechart = (data) => {
+//   console.log("曲线数据", data);
+//   curvedata.value = data;
+
+//   // 如果是第一次传入数据，则初始化为空数组；否则保留之前的数据
+//   if (!xdata.value) {
+//     xdata.value = [];
+//   }
+
+//   let rows = curvedata.value;
+
+//   vars = rows[0].vars.split(" ")
+//   console.log('变量名：',vars);
+
+  
+
+//   // 继续累加之前的数据
+//   let convergeDate = {
+//     "design_var/upperB": [],
+//     "design_var/lowerB": []
+//   };
+
+//   // 遍历每一行数据
+//   for (let i = 0; i < rows.length; i++) {
+//     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);
+
+//     // 将新的 step 值追加到 xdata 数组
+//     xdata.value.push(rows[i].step); 
+//   }
+
+//   // 获取所有的 upperB 和 lowerB 数据
+//   let upperBData = convergeDate["design_var/upperB"];
+//   let lowerBData = convergeDate["design_var/lowerB"];
+
+//   // 计算每条曲线的数量
+//   let curveCount = upperBData.length / rows.length;
+//   console.log('曲线数据测试：',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]);
+//     }
+
+//     // 查找是否已经存在此曲线
+//     let upperBSeries = series.value.find(s => s.name === `design_var/upperB${i + 1}`);
+//     let lowerBSeries = series.value.find(s => s.name === `design_var/lowerB${i + 1}`);
+
+//     // 如果存在则更新数据，否则创建新曲线
+//     if (upperBSeries) {
+//       upperBSeries.data.push(...upperBCurveData);
+//     } else {
+//       series.value.push({
+//         name: `design_var/upperB${i + 1}`, 
+//         type: "line",
+        
+//         data: upperBCurveData 
+//       });
+//     }
+
+//     if (lowerBSeries) {
+//       lowerBSeries.data.push(...lowerBCurveData);
+//     } else {
+//       series.value.push({
+//         name: `design_var/lowerB${i + 1}`, 
+//         type: "line",
+        
+//         data: lowerBCurveData 
+//       });
+//     }
+//   }
+
+
+//   // 使用 myChart 设置图表的配置
+//   myChart.setOption({
+//     legend: {
+//       data: [
+//       ...Array.from({ length: curveCount }, (_, i) => `design_var/upperB${i + 1}`),
+//       ...Array.from({ length: curveCount }, (_, i) => `design_var/lowerB${i + 1}`)
+//     ] // 设置图例数据为曲线名
+//     },
+//     xAxis: {
+//       data: xdata.value  // 使用更新后的 xdata
+//     },
+//     series: series.value  // 使用更新后的 series
+//   });
+
+//   console.log('更新后的 xdata:', xdata.value);
+//   console.log('更新后的 series:', series.value);
+// };
+
 const getsockechart = (data) => {
   console.log("曲线数据", data);
   curvedata.value = data;
@@ -63,83 +165,86 @@ const getsockechart = (data) => {
     xdata.value = [];
   }
 
+  // 如果是第一次传入数据，则初始化series为空数组；否则保留之前的数据
+  if (!series.value) {
+    series.value = [];
+  }
+
   let rows = curvedata.value;
 
+  // 获取变量名
+  let vars = rows[0].vars.split(" ");
+  console.log('变量名：', vars);
+
   // 继续累加之前的数据
-  let convergeDate = {
-    "design_var/upperB": [],
-    "design_var/lowerB": []
-  };
+  let convergeDate = {};
 
   // 遍历每一行数据
   for (let i = 0; i < rows.length; i++) {
     let vals = rows[i].vals.split(" "); 
 
-    let upperB = JSON.parse(vals[3]);
-    let lowerB = JSON.parse(vals[4]);
+    // 获取每一列的值
+    for (let j = 0; j < vars.length; j++) {
+      let columnName = vars[j];
+      let value = vals[j];
 
-    // 将新的数据追加到对应的数组中
-    convergeDate["design_var/upperB"].push(...upperB);
-    convergeDate["design_var/lowerB"].push(...lowerB);
+      // 判断值是否是数组
+      try {
+        let parsedValue = JSON.parse(value); // 尝试解析为数组
+        if (Array.isArray(parsedValue)) {
+          // 如果是数组，分解成每个单独的值，创建多条曲线
+          parsedValue.forEach((item, index) => {
+            let curveName = `${columnName}_${index + 1}`;
+            if (!convergeDate[curveName]) {
+              convergeDate[curveName] = [];
+            }
+            convergeDate[curveName].push(item);
+          });
+        } else {
+          // 如果是单个值，创建单一的曲线
+          if (!convergeDate[columnName]) {
+            convergeDate[columnName] = [];
+          }
+          convergeDate[columnName].push(parsedValue);
+        }
+      } catch (e) {
+        // 如果解析失败，说明该列不是数组，直接作为单个数值处理
+        if (!convergeDate[columnName]) {
+          convergeDate[columnName] = [];
+        }
+        convergeDate[columnName].push(parseFloat(value));
+      }
+    }
 
     // 将新的 step 值追加到 xdata 数组
-    xdata.value.push(rows[i].step); 
+    xdata.value.push(rows[i].step);
   }
 
-  // 获取所有的 upperB 和 lowerB 数据
-  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]);
-    }
+  // 遍历每一个列名，动态更新或创建曲线
+  Object.keys(convergeDate).forEach((curveName) => {
+    if(curveName === 'No'|| curveName === 'Time/s') return;
+    let curveData = convergeDate[curveName];
 
     // 查找是否已经存在此曲线
-    let upperBSeries = series.value.find(s => s.name === `design_var/upperB${i + 1}`);
-    let lowerBSeries = series.value.find(s => s.name === `design_var/lowerB${i + 1}`);
+    let existingSeries = series.value.find(s => s.name === curveName);
 
-    // 如果存在则更新数据，否则创建新曲线
-    if (upperBSeries) {
-      upperBSeries.data.push(...upperBCurveData);
+    if (existingSeries) {
+      // 如果已存在，更新数据
+      existingSeries.data.push(...curveData);
     } else {
+      // 否则，创建新的曲线
       series.value.push({
-        name: `design_var/upperB${i + 1}`, 
+        name: curveName,
         type: "line",
-        stack: "Total",
-        data: upperBCurveData 
+        data: curveData
       });
     }
-
-    if (lowerBSeries) {
-      lowerBSeries.data.push(...lowerBCurveData);
-    } else {
-      series.value.push({
-        name: `design_var/lowerB${i + 1}`, 
-        type: "line",
-        stack: "Total",
-        data: lowerBCurveData 
-      });
-    }
-  }
-
+  });
 
   // 使用 myChart 设置图表的配置
   myChart.setOption({
     legend: {
-      data: [
-      ...Array.from({ length: curveCount }, (_, i) => `design_var/upperB${i + 1}`),
-      ...Array.from({ length: curveCount }, (_, i) => `design_var/lowerB${i + 1}`)
-    ] // 设置图例数据为曲线名
+      data: Object.keys(convergeDate) // 设置图例数据为曲线名
     },
     xAxis: {
       data: xdata.value  // 使用更新后的 xdata
@@ -153,43 +258,117 @@ const getsockechart = (data) => {
 
 
 // 数据转化废弃
+// const getshuju = (data) => {
+//   curvedata.value = data
+//   convergeDate.value = []
+//   series.value = []
+//   xdata.value = []
+//   let rows = JSON.parse(curvedata.value)
+//   let num = 0
+//   for (let i = 0; i < rows.length; i++) {
+//     num += 1
+//     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(num)
+//   }
+//   console.log(convergeDate.value)
+//   // console.log( convergeDate.value);
+//   for (let j = 0; j < vars.value.length; j++) {
+//     let firstColumn = convergeDate.value.map((row) => row[j])
+//     let item = {
+//       name: vars.value[j],
+//       type: "line",
+//       stack: "Total",
+//       data: firstColumn
+//     }
+//     series.value.push(item)
+//   }
+//   myChart.setOption({
+//     legend: {
+//       data: vars.value
+//     },
+//     xAxis: {
+//       data: xdata.value
+//     },
+//     series: series.value
+//   })
+// }
+
 const getshuju = (data) => {
-  curvedata.value = data
-  convergeDate.value = []
-  series.value = []
-  xdata.value = []
-  let rows = JSON.parse(curvedata.value)
-  let num = 0
+  // 初始化变量
+  curvedata.value = data;
+  convergeDate.value = [];
+  series.value = [];
+  xdata.value = [];
+
+  // 解析传入的 JSON 数据
+  let rows = JSON.parse(curvedata.value);
+
   for (let i = 0; i < rows.length; i++) {
-    num += 1
-    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(num)
+    // 解析每一行的列名和列值
+    vars.value = rows[i].vars.split(" ");  // 列名（空格分隔）
+    vals.value = rows[i].vals.split(" ");  // 对应的值（空格分隔）
+
+    // 处理 vals 中的数据
+    let data = vals.value.map((str) => {
+      // 处理每个值，如果是数组类型（JSON 字符串），则转换为数组
+      try {
+        return JSON.parse(str);
+      } catch (e) {
+        return Number(str);  // 如果不是数组，直接转换为数字
+      }
+    });
+
+    convergeDate.value.push(data);
+    xdata.value.push(rows[i].step); 
   }
-  console.log(convergeDate.value)
-  // console.log( convergeDate.value);
+
+  // 遍历每一个列名
   for (let j = 0; j < vars.value.length; j++) {
-    let firstColumn = convergeDate.value.map((row) => row[j])
-    let item = {
-      name: vars.value[j],
-      type: "line",
-      stack: "Total",
-      data: firstColumn
+    if (vars.value[j] === 'No' || vars.value[j] === 'Time/s') {
+      continue;
+    }
+    let firstColumn = convergeDate.value.map((row) => row[j]);
+
+    // 如果该列是数组类型的数据（例如 design_var/upperB），需要为每个值创建一条曲线
+    if (Array.isArray(firstColumn[0])) {
+      firstColumn[0].forEach((_, idx) => {
+        let curveData = convergeDate.value.map((row) => row[j][idx]);
+        let item = {
+          name: `${vars.value[j]}-${idx + 1}`,  // 为每条曲线命名，使用列名 + 索引
+          type: "line",  
+          data: curveData  
+        };
+        series.value.push(item);  
+      });
+    } else {
+      // 如果该列不是数组类型（普通值），直接绘制一条曲线
+      let item = {
+        name: vars.value[j], 
+        type: "line",  
+        data: firstColumn 
+      };
+      series.value.push(item); 
     }
-    series.value.push(item)
   }
+
+  // 提取 legend 的名称
+  const legendData = series.value.map(item => item.name);
+  // 更新图表配置
   myChart.setOption({
     legend: {
-      data: vars.value
+      data: legendData.value 
     },
     xAxis: {
-      data: xdata.value
+      data: xdata.value  
     },
-    series: series.value
-  })
-}
+    series: series.value  
+  });
+};
+
+
 
 const linechart = () => {
   //  let chartDom = document.getElementById('line');
@@ -206,21 +385,30 @@ const linechart = () => {
     legend: {
       data: vars.value,
       orient: "vertical", // 图例方向 (horizontal水平, vertical垂直)
-      right: '4%',
-      top: '2%'
+      right: '-8%',
+      top: '2%',
+      itemWidth: 40,  // 设置每个图例项的宽度
+      itemHeight: 14,  // 设置每个图例项的高度
+      // icon: "line",
+      width: 'auto',
+      height: 'auto',
+      pageButtonItemGap: 10,  // 上下滚动按钮之间的间隔
+      pageButtonPosition: 'end',  // 滚动按钮位置，'start'、'end'
+      type: 'scroll',
+      
     },
     grid: {
       show: false,
       left: "6%",
-      right: "4%",
+      right: "14%",
       bottom: "10%",
       containLabel: true
     },
-    toolbox: {
-      feature: {
-        saveAsImage: {}
-      }
-    },
+    // toolbox: {
+    //   feature: {
+    //     saveAsImage: {}
+    //   }
+    // },
     xAxis: {
       type: "category",
       boundaryGap: false,

src/views/home.vue

@@ -1332,7 +1332,7 @@
                     :header-cell-class-name="lbjkheaderCellClassName"
                     
                     >
-                      <el-table-column type="index" label="编号" width="150"></el-table-column>
+                      <el-table-column type="index" label="编号" width="100"></el-table-column>
                       <el-table-column v-for="(header, index) in tableHeaders" :key="index" :prop="header.prop" show-overflow-tooltip
                         :label="header.label" >
                       </el-table-column>
@@ -1408,7 +1408,7 @@
                             <li @click="issueclick(index)" :class="{ 'active2': activeIndex2 === index }">
                               <el-image v-if="activeIndex2 === index" :src="tab.isimg" fit="contain"></el-image>
                               <el-image v-else :src="tab.noimg" fit="contain"></el-image>
-                              {{ tab.name }}
+                              <span>{{ tab.name }}</span>
                             </li>
                           </template>
                         </ul>
@@ -2881,6 +2881,7 @@ const listtableInit = () => {
   request(params)
     .then((res) => {
       console.log('列表初始化：',res);
+      tableDatalieb.value = [];
       if (res.rows && res.rows.length > 0) {
         // 遍历所有返回的条目
         res.rows.forEach((row) => {
@@ -2940,7 +2941,7 @@ const curveLine = () => {
     .then((res) => {
       curvedata.value = JSON.stringify(res.rows);
       // console.log(curvedata.value);
-      // optmonitor1.value.getshuju(curvedata.value);
+      optmonitor1.value.getshuju(curvedata.value);
       //  optmonitor1.value.getsockechart();
       arearef.value.getsockechart(curvedata.value);
       bargraphref.value.getsockechart(curvedata.value);
@@ -3713,8 +3714,7 @@ const websocketonmessage = (res) => {
     echartdata.value = res.data;
     arrobj.value.push(parsedData);
 
-    let vals = parsedData.vals.split(" "); // 以空格分割数据值
-    tablefun(parsedData.vars, vals);  // 传递 vars 和 vals 更新表格
+    tablefun1(parsedData.vars, parsedData.vals);  // 传递 vars 和 vals 更新表格
     optmonitor1.value.getsockechart(arrobj.value);
     
     // optmonitor1.value.getsockechart(arrobj.value);
@@ -4073,7 +4073,7 @@ const lbjkheaderCellClassName = ({ columnIndex }) => {
 }
 .footerTitle div {
   display: flex;
-  justify-content:center ;
+  // justify-content:center ;
   align-items: center;
   font-size: 14px;
 }
@@ -4092,6 +4092,8 @@ const lbjkheaderCellClassName = ({ columnIndex }) => {
   width: 150px;
   height: 32px;
   line-height: 40px;
+  padding: 0 20px;
+  box-sizing: border-box;
   cursor: default;
   position: relative;
   font-size: 14px;
@@ -4099,7 +4101,7 @@ const lbjkheaderCellClassName = ({ columnIndex }) => {
   font-family: 'Source Sans-Regular';
 }
 .footerTitle .span span{
-  padding-left:8px
+  padding-left:20px;
 }
 .footerText .el-textarea__inner {
   width: 100%;
@@ -4171,7 +4173,7 @@ color: rgba(51, 51, 51, 0.8);
   background-color: #fff;
    border-left:1px solid #B3B3B3;
    border-right:1px solid #B3B3B3;
-   border-bottom:4px solid #fff;
+   /* border-bottom:4px solid #fff; */
 
 }
 .footerTitle .active::before{
@@ -4182,16 +4184,18 @@ color: rgba(51, 51, 51, 0.8);
     background: #2267B1;
     border-radius: 0px 0px 0px 0px;
     top: 0px;
+    left:0px;
     position: absolute;
 }
 .footerTitle .active::after{
    content: "";
     display: block;
     width: 100%;
-    height:7px;
+    height:4px;
     background: #fff;
     border-radius: 0px 0px 0px 0px;
     bottom: 0px;
+    left:0px;
     position: absolute;
 }
 .youhualog {
@@ -4205,23 +4209,26 @@ color: rgba(51, 51, 51, 0.8);
 color: #2267B1;
 }
 .youhualog ul {
-  width:504px;
+  /* width:482px; */
   display: flex;
   align-items: center;
 }
 .youhualog ul li {
   font-family: 'Source Sans-Regular';
-  flex: 1;
+  /* flex: 1; */
   /* border-left: 1px solid #B3B3B3; */
   font-size: 14px;
   height: 32px;
   /* line-height: 40px; */
-  width: 168px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
+  width: 140px;
+  display: flex;
+  /* justify-content: center; */
+  align-items: center;
+  padding:0 10px;
+}
 
+.youhualog ul li span {
+  margin-left: 20px;
 }
 
 .footer-content {