606过程监控修改

src/views/echart/process-monitor1.vue

@@ -57,39 +57,6 @@ const echatinit = () => {
   series.value = []
   xdata.value = []
 }
-// 从websocket取数据
-// const getsockechart = (data) => {
-//   curvedata.value = data
-//   series.value = []
-//   let rows = curvedata.value
-//   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)
-//   }
-//   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
-//   })
-//   // linechart();
-// }
 
 const getsockechart = (data) => {
   console.log("曲线数据1：", data);
@@ -138,96 +105,130 @@ const getsockechart = (data) => {
   console.log("更新后的 series1:", series.value);
 };
 
-// 数据转化废弃
 // const getshuju = (data) => {
-//   curvedata.value = data
-//   convergeDate.value = []
-//   series.value = []
-//   xdata.value = []
-//   let rows = JSON.parse(curvedata.value)
-//   let num = 0
+//   // console.log("曲线数据1：", data);
+
+//   curvedata.value = data;
+//   convergeDate.value = [];
+//   series.value = [];
+//   xdata.value = [];
+  
+//   // 解析传入的 JSON 数据
+//   let rows = JSON.parse(curvedata.value);
+
+//   vars = rows[0].vars.split(" ");
+
 //   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
+//     let vals = rows[i].vals.split(" ");
+//     let existingSeries = series.value.find((s) => s.name === vars[1]);
+
+//     if (existingSeries) {
+//       existingSeries.data.push([parseFloat(vals[0]), parseFloat(vals[1])]);
+//     } else {
+//       series.value.push({
+//         name: vars[1],
+//         type: "line",
+//         showSymbol: false,
+//         data: [[parseFloat(vals[0]), parseFloat(vals[1])]], 
+//       });
 //     }
-//     series.value.push(item)
 //   }
+
+//   console.log("vars:", vars);
+//   console.log("vals:", vals);
+
 //   myChart.setOption({
 //     legend: {
-//       data: vars.value
+//       data: [],  // 图例数据
 //     },
 //     xAxis: {
-//       data: xdata.value
+//       type: "value",        
 //     },
-//     series: series.value
-//   })
-// }
+//     yAxis: {
+//       type: "value"  // Y 轴也是数值轴
+//     },
+//     series: series.value  
+//   });
 
-const getshuju = (data) => {
-  // console.log("曲线数据1：", data);
+//   console.log("初始化后的 xdata1:", xdata.value);
+//   console.log("初始化后的 series1:", series.value);
+
+// };
 
+// 分组（改）
+const getshuju = (data) => {
   curvedata.value = data;
   convergeDate.value = [];
   series.value = [];
   xdata.value = [];
-  
-  // 解析传入的 JSON 数据
+
   let rows = JSON.parse(curvedata.value);
+  let vars = rows[0].vars.split(" "); 
 
-  vars = rows[0].vars.split(" ");
+  // 使用 Map 按 gser 分组
+  const gserMap = new Map();
 
   for (let i = 0; i < rows.length; i++) {
-    let vals = rows[i].vals.split(" ");
-    let existingSeries = series.value.find((s) => s.name === vars[1]);
-
-    if (existingSeries) {
-      existingSeries.data.push([parseFloat(vals[0]), parseFloat(vals[1])]);
-    } else {
-      series.value.push({
-        name: vars[1],
-        type: "line",
-        showSymbol: false,
-        data: [[parseFloat(vals[0]), parseFloat(vals[1])]], 
-      });
+    let row = rows[i];
+    let vals = row.vals.split(" ");
+    let gser = row.gser;
+    let x = parseFloat(vals[0]);
+    let y = parseFloat(vals[1]);
+
+    if (!gserMap.has(gser)) {
+      gserMap.set(gser, []);
     }
+    gserMap.get(gser).push([x, y]);
   }
 
-  console.log("vars:", vars);
-  console.log("vals:", vals);
+  // 创建一个颜色映射：gser % 100000 -> color index
+  const colorMap = new Map();
+  const colorList = ['#5470C6', '#91CC75', '#EE6666', '#73C0DE', '#FAC858', '#3BA272', '#FC8452']; // 可扩展
+  let colorIndex = 0;
+
+  for (let [gser, points] of gserMap.entries()) {
+    const group = gser % 100000;
+    if (!colorMap.has(group)) {
+      colorMap.set(group, colorList[colorIndex % colorList.length]);
+      colorIndex++;
+    }
+
+    series.value.push({
+      name: `gser=${gser}`,
+      type: "line",
+      showSymbol: false,
+      data: points,
+      lineStyle: {
+        color: colorMap.get(group)
+      }
+    });
+  }
+
+  const xlabel = vars[0] !== 'v1' ? vars[0] : 'x/c';
+  const ylabel = vars[1] !== 'v2' ? vars[1] : 'y/c';
 
   myChart.setOption({
-    legend: {
-      data: [],  // 图例数据
-    },
+    // legend: {
+    //   data: series.value.map(s => s.name),
+    // },
     xAxis: {
-      type: "value",  
-      min: 0,         
-      max: 1,       
+      name: xlabel,
+      type: "value",
+      scale: true,
     },
     yAxis: {
-      type: "value"  // Y 轴也是数值轴
+      name: ylabel,
+      type: "value",
+      scale: true,
     },
-    series: series.value  
+    series: series.value
   });
 
-  console.log("初始化后的 xdata1:", xdata.value);
-  console.log("初始化后的 series1:", series.value);
+  console.log("vars:", vars);
+  console.log("初始化后的 series：", series.value);
 };
 
+
 const linechart = () => {
   //  let chartDom = document.getElementById('line');
   //  let  myChart= echarts.init(chartDom);

src/views/echart/process-monitor2.vue

@@ -57,39 +57,6 @@ const echatinit = () => {
   series.value = []
   xdata.value = []
 }
-// 从websocket取数据
-// const getsockechart = (data) => {
-//   curvedata.value = data
-//   series.value = []
-//   let rows = curvedata.value
-//   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)
-//   }
-//   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
-//   })
-//   // linechart();
-// }
 
 const getsockechart = (data) => {
   console.log("曲线数据2：", data);
@@ -139,94 +106,115 @@ const getsockechart = (data) => {
   console.log("更新后的 series2:", series.value);
 };
 
-// 数据转化废弃
 // const getshuju = (data) => {
-//   curvedata.value = data
-//   convergeDate.value = []
-//   series.value = []
-//   xdata.value = []
-//   let rows = JSON.parse(curvedata.value)
-//   let num = 0
+//   // console.log("曲线数据2：", data);
+
+//   curvedata.value = data;
+//   convergeDate.value = [];
+//   series.value = [];
+//   xdata.value = [];
+  
+//   // 解析传入的 JSON 数据
+//   let rows = JSON.parse(curvedata.value);
+
+//   vars = rows[0].vars.split(" ");
+
 //   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
+//     let vals = rows[i].vals.split(" ");
+//     let existingSeries = series.value.find((s) => s.name === vars[1]);
+
+//     if (existingSeries) {
+//       existingSeries.data.push([parseFloat(vals[0]), -1*parseFloat(vals[1])]);
+//     } else {
+//       series.value.push({
+//         name: vars[1],
+//         type: "line",
+//         showSymbol: false,
+//         data: [[parseFloat(vals[0]), -1*parseFloat(vals[1])]], 
+//       });
 //     }
-//     series.value.push(item)
 //   }
+
+//   console.log("vars:", vars);
+//   console.log("vals:", vals);
+
 //   myChart.setOption({
 //     legend: {
-//       data: vars.value
+//       data: [],  // 图例数据
 //     },
 //     xAxis: {
-//       data: xdata.value
+//       type: "value",        
 //     },
-//     series: series.value
-//   })
-// }
+//     yAxis: {
+//       type: "value"  // Y 轴也是数值轴
+//     },
+//     series: series.value  
+//   });
 
-const getshuju = (data) => {
-  // console.log("曲线数据2：", data);
+//   console.log("初始化后的 xdata2:", xdata.value);
+//   console.log("初始化后的 series2:", series.value);
+// };
 
+const getshuju = (data) => {
   curvedata.value = data;
   convergeDate.value = [];
   series.value = [];
   xdata.value = [];
-  
-  // 解析传入的 JSON 数据
+
   let rows = JSON.parse(curvedata.value);
+  let vars = rows[0].vars.split(" "); // ["x", "cp"]
 
-  vars = rows[0].vars.split(" ");
+  let colorMap = {}; // key: gser % 100000, value: color
+  const colorList = ['#5470C6', '#91CC75', '#EE6666', '#FAC858', '#73C0DE', '#3BA272'];
+
+  let colorIndex = 0;
 
   for (let i = 0; i < rows.length; i++) {
-    let vals = rows[i].vals.split(" ");
-    let existingSeries = series.value.find((s) => s.name === vars[1]);
+    let row = rows[i];
+    let gser = row.gser;
+    let groupKey = gser % 100000;
+    let vals = row.vals.split(" ");
+    let x = parseFloat(vals[0]);
+    let y = -1 * parseFloat(vals[1]);
+
+    // 为每个 groupKey 分配一个颜色
+    if (!(groupKey in colorMap)) {
+      colorMap[groupKey] = colorList[colorIndex % colorList.length];
+      colorIndex++;
+    }
+
+    // 查找是否已存在该 gser 的曲线
+    let existingSeries = series.value.find(s => s.name === `gser_${gser}`);
 
     if (existingSeries) {
-      existingSeries.data.push([parseFloat(vals[0]), -1*parseFloat(vals[1])]);
+      existingSeries.data.push([x, y]);
     } else {
       series.value.push({
-        name: vars[1],
+        name: `gser_${gser}`,
         type: "line",
         showSymbol: false,
-        data: [[parseFloat(vals[0]), -1*parseFloat(vals[1])]], 
+        data: [[x, y]],
+        lineStyle: {
+          color: colorMap[groupKey]
+        }
       });
     }
   }
 
-  console.log("vars:", vars);
-  console.log("vals:", vals);
-
   myChart.setOption({
-    legend: {
-      data: [],  // 图例数据
-    },
+    // legend: {
+    //   data: series.value.map(s => s.name),
+    // },
     xAxis: {
-      type: "value",  
-      min: 0,         
-      max: 1,       
+      type: "value",
     },
     yAxis: {
-      type: "value"  // Y 轴也是数值轴
+      type: "value"
     },
-    series: series.value  
+    series: series.value
   });
 
-  console.log("初始化后的 xdata2:", xdata.value);
-  console.log("初始化后的 series2:", series.value);
+  console.log("按 gser 分类后的 series：", series.value);
 };
 
 const linechart = () => {
@@ -338,24 +326,7 @@ const linechart = () => {
     myChart.resize()
   }
 }
-// 监听数据变化，重绘图表
-//   watch( myChart.value, () => {
-//     console.log(11111)
-//     window.onresize = function() {
-//           // 让图表自适应大小
-//           myChart.value.resize();
-//       };
-// });
-//window.addEventListener('resize', handleResize);
-// watch(series, () => {
-//   linechart();
-// }, { deep: true });
-// watch(() =>props.echartdata, (newValue, oldValue) => {
-//   // 这里处理 echartData 变化的逻辑
-//   console.log(11111)
-//   console.log('echartData changed:', newValue);
-// //  console.log(optmonitor1.value);
-// }, {deep: true ,immediate: true });
+
 defineExpose({ linechart, getshuju, getsockechart, echatinit })
 </script>
   <style lang="scss" scoped>