airoptweb/src/views/echart/optimize_monitor.vue

<template>
  <!-- 曲线监控 -->
  <div style="width: 100%; height: 100%">
    <div class="echartitem" style="width: 100%; height: 100%">
      <!-- <h3 class="selcal">{{ props.selval }}</h3> -->
      <div
        id="line"
        ref="chartContainer"
        style="width: 100%; height: 100%"
      ></div>
      
    </div>
  </div>
</template>
  <script setup>
import { ref, onMounted, reactive, markRaw, inject, watch, nextTick } from "vue"
import { RouterView, RouterLink } from "vue-router"
import { request, uploadFile } from "@/utils/request"
import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus"
import * as echarts from "echarts"
let vars = ref([])
let vals = ref([])
let series = ref([
  
])
let xdata = ref([])
let chartContainer = ref()
let myChart
let chartDom = ref()
let option = ref(null)
let convergeDate = ref([])
let curvedata = ref("")
let state = reactive({
  instance: null
})
const props = defineProps({
  echartdata: {
    type: String
  },
  curvedata: {
    type: String
  }
})
let emit = defineEmits([""])
onMounted(() => {
  myChart = echarts.init(chartContainer.value)
  linechart()
  myChart.resize();
})
//初始化
const echatinit = () => {
  convergeDate.value = []
  series.value = []
  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;

  let rows = curvedata.value;

  // 获取变量名
  let vars = rows[0].vars.split(" ");
  console.log('变量名：', vars);

  // 继续累加之前的数据
  let convergeDate = {};

  // 遍历每一行数据
  for (let i = 0; i < rows.length; i++) {
    let vals = rows[i].vals.split(" "); 

    // 获取每一列的值
    for (let j = 0; j < vars.length; j++) {
      let columnName = vars[j];
      let value = vals[j];

      // 判断值是否是数组
      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);
  }

  // 遍历每一个列名，动态更新或创建曲线
  Object.keys(convergeDate).forEach((curveName) => {
    if(curveName === 'No'|| curveName === 'Time/s') return;
    let curveData = convergeDate[curveName];

    // 查找是否已经存在此曲线
    let existingSeries = series.value.find(s => s.name === curveName);

    if (existingSeries) {
      // 如果已存在，更新数据
      existingSeries.data.push(...curveData);
    } else {
      // 否则，创建新的曲线
      series.value.push({
        name: curveName,
        type: "line",
        data: curveData
      });
    }
  });

  // 使用 myChart 设置图表的配置
  myChart.setOption({
    legend: {
      data: Object.keys(convergeDate) // 设置图例数据为曲线名
    },
    xAxis: {
      data: xdata.value  // 使用更新后的 xdata
    },
    series: series.value  // 使用更新后的 series
  });

  console.log('更新后的 xdata:', xdata.value);
  console.log('更新后的 series:', series.value);
};


// 数据转化废弃
// 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 = [];

  // 解析传入的 JSON 数据
  let rows = JSON.parse(curvedata.value);

  for (let i = 0; i < rows.length; i++) {
    // 解析每一行的列名和列值
    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); 
  }

  // 遍历每一个列名
  for (let j = 0; j < vars.value.length; j++) {
    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); 
    }
  }

  // 提取 legend 的名称
  const legendData = series.value.map(item => item.name);
  // 更新图表配置
  myChart.setOption({
    legend: {
      data: legendData 
    },
    xAxis: {
      data: xdata.value  
    },
    series: series.value  
  });
};



const linechart = () => {
  //  let chartDom = document.getElementById('line');
  //  let  myChart= echarts.init(chartDom);
  option.value = {
    tooltip: {
      trigger: "axis", //item
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF"
      }
    },
    legend: {
      data: vars.value,
      orient: "vertical", // 图例方向 (horizontal水平, vertical垂直)
      right: '0%',
      top: '3%',
      itemWidth: 30,  // 设置每个图例项的宽度
      itemHeight: 0,  // 设置每个图例项的高度
      // icon: "line",
      width: 'auto',
      height: 'auto',
      pageButtonItemGap: 10,  // 上下滚动按钮之间的间隔
      pageButtonPosition: 'end',  // 滚动按钮位置，'start'、'end'
      type: 'scroll',
      formatter: function (name) {
        // 使用 ECharts 内部 API 获取文本宽度
        var textWidth = echarts.format.getTextRect(name).width;

        // 设置一个最大宽度（如 150px），如果文本宽度超出最大值则截断
        if (textWidth > 150) {
          return name.substring(0, 15) + '...';  // 超出最大宽度的部分加省略号
        }
        return name;  // 否则，直接返回原始文本
      },
    },
    grid: {
      show: false,
      left: "6%",
      right: "14%",
      bottom: "10%",
      containLabel: true
    },
    // toolbox: {
    //   feature: {
    //     saveAsImage: {}
    //   }
    // },
    xAxis: {
      type: "category",
      boundaryGap: false,
      name: "迭代次数",
      nameGap:40,
      nameTextStyle:{
        fontSize: 16,
        color:'#333333',
        fontFamily:'Microsoft YaHei'
      },
      nameLocation: 'middle',
      data: xdata.value,
      axisLine: {
        //X轴线
        show: true,
        lineStyle: {
          color: "#333333", // 线的颜色
          width: 1, // 线宽
          type: "solid" // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
        }
      },
      splitLine: {
        show: true // 如果不需要网格线，可以设置为 false
      },
      
    },
    yAxis: {
      type: "value",
      name: "优化变量",
      nameGap:40,
      nameTextStyle:{
        fontSize: 16,
        color:'#333333',
        fontFamily:'Microsoft YaHei'
      },
      nameLocation: 'middle',
      axisLine: {
        //Y轴线
        show: true,
        lineStyle: {
          color: "#333333", // 线的颜色
          width: 1, // 线宽
          type: "solid" // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
        }
      },
      axisTick: {
        // Y轴刻度线
        show:true,
      },
      splitLine: {
        show: true // 如果不需要网格线，可以设置为 false
      },
      
    },
    dataZoom: [
      {
        type: "inside", // 鼠标滚轮缩放
        xAxisIndex: [0], // 针对 X 轴
      },
      {
        type: "slider", // 滑动条缩放
        xAxisIndex: [0],
        
        show: false,
      }
    ],
    series: series.value
  }
  option.value && myChart.setOption(option.value)
  window.onresize = function () {
    // 让图表自适应大小
    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>
.selcal {
  position: absolute;
  top: 37%;
  width: 26px;
  color: #000;
  font-size: 14px;
  font-weight: bold;
  left: 5px;
}
.diedai {
  color: #000;
  font-size: 14px;
  padding-bottom: 20px;
  font-weight: bold;
}
</style>