327可视化

src/views/echart/echartLine.vue

@@ -150,6 +150,63 @@ const getsockechart = (data) => {
   });
 };
 
+// 绘制所有数据的曲线
+const getshuju = (dataheader, data) => {
+  console.log("散点图曲线数据1：", data);
+
+  curvedata.value = data; 
+  series.value = [];
+  xdata.value = [];
+
+  vars.value = dataheader;  // dataheader 是包含 label 和 prop 的数组
+  vals.value = data; 
+
+  // 生成 x 轴数据（这里假设 x 轴是从 0 开始递增的索引）
+  for (let i = 0; i < vals.value.length; i++) {
+    xdata.value.push(i);  // x 轴数据为行索引
+  }
+
+  // 为每个字段生成一条曲线
+  for (let colIndex = 0; colIndex < vars.value.length; colIndex++) {
+    const prop = vars.value[colIndex].prop;  // 获取当前列的字段名
+    const label = vars.value[colIndex].label;  // 获取当前列的显示名称
+
+    let seriesData = [];
+
+    // 遍历每一行，提取该列的数据
+    for (let rowIndex = 0; rowIndex < vals.value.length; rowIndex++) {
+      let value = vals.value[rowIndex][prop];  // 获取当前列的值
+      seriesData.push([xdata.value[rowIndex], value]);  // 添加到 seriesData
+    }
+
+    // 为每列数据生成一条曲线，使用 label 作为曲线的名字
+    series.value.push({
+      name: label,  // 使用 label 作为曲线名
+      type: "line",  // 散点图类型
+      data: seriesData, 
+    });
+  }
+
+  // 处理 ECharts 图表配置
+  const myChart = echarts.init(chartContainer.value);
+
+  myChart.setOption({
+    legend: {
+      data: vars.value.map(item => item.label),  // 图例数据是列名
+    },
+    xAxis: {
+      type: "category",  // 设置为 "category" 表示 x 轴为分类数据
+      data: xdata.value, // x 轴数据为索引
+    },
+    yAxis: {
+      type: "value",  // y 轴是数值型
+    },
+    series: series.value,  // 使用生成的 series 数据
+  });
+
+  console.log("初始化后的 series:", series.value);
+};
+
 const linechart = () => {
   option.value = {
     title: {
@@ -174,13 +231,17 @@ const linechart = () => {
     legend: {
       data: vars.value,
       orient: "vertical", // 图例方向 (horizontal水平, vertical垂直)
-      right: "4%",
-      top: "2%"
+      right: "0%",
+      top: "2%",
+      itemWidth: 30,
+      pageButtonItemGap: 10,
+      pageButtonPosition: 'end',
+      type: 'scroll',
     },
     grid: {
       show: false,
       left: "5%",
-      right: "4%",
+      right: "14%",
       bottom: "10%",
       containLabel: true
     },
@@ -266,7 +327,7 @@ const linechart = () => {
 //   console.log('echartData changed:', newValue);
 // //  console.log(optmonitor1.value);
 // }, {deep: true ,immediate: true });
-defineExpose({ linechart, getsockechart, echatinit })
+defineExpose({ linechart, getsockechart, echatinit ,getshuju})
 </script>
       <style lang="scss" scoped>
 .selcal {

src/views/echart/scatter.vue

@@ -21,21 +21,12 @@ import { graphic } from "echarts/core"
 const option = ref({})
 let myChart
 
-let vars = ref(['变量1','变量2'])
+let vars = ref([])
 let vals = ref([])
 let series = ref([
-  {
-    name: "变量1",
-    type: "scatter",
-    data: [10, 20, 30, 40] // y轴对应数据
-  },
-  {
-    name: "变量2",
-    type: "scatter",
-    data: [20, 10, 40, 30] // y轴对应数据
-  }
+  
 ])
-let xdata = ref(['-0.25','0.00','0.25','0.50','0.75','1.00'])
+let xdata = ref([])
 let chartContainer = ref(null)
 let chartDom = ref()
 let convergeDate = ref([])
@@ -142,6 +133,148 @@ const getsockechart = (data) => {
 }
 
 
+// 绘制所有数据曲线，X轴为行索引
+const getshuju = (dataheader, data) => {
+  console.log("散点图曲线数据1：", data);
+
+  curvedata.value = data; 
+  series.value = [];
+  xdata.value = [];
+
+  vars.value = dataheader;  // dataheader 是包含 label 和 prop 的数组
+  vals.value = data; 
+
+  // 生成 x 轴数据（这里假设 x 轴是从 0 开始递增的索引）
+  for (let i = 0; i < vals.value.length; i++) {
+    xdata.value.push(i);  // x 轴数据为行索引
+  }
+
+  // 为每个字段生成一条曲线
+  for (let colIndex = 0; colIndex < vars.value.length; colIndex++) {
+    const prop = vars.value[colIndex].prop;  // 获取当前列的字段名
+    const label = vars.value[colIndex].label;  // 获取当前列的显示名称
+
+    let seriesData = [];
+
+    // 遍历每一行，提取该列的数据
+    for (let rowIndex = 0; rowIndex < vals.value.length; rowIndex++) {
+      let value = vals.value[rowIndex][prop];  // 获取当前列的值
+      seriesData.push([xdata.value[rowIndex], value]);  // 添加到 seriesData
+    }
+
+    // 为每列数据生成一条曲线，使用 label 作为曲线的名字
+    series.value.push({
+      name: label,  // 使用 label 作为曲线名
+      type: "scatter",  // 散点图类型
+      data: seriesData, 
+    });
+  }
+
+  // 处理 ECharts 图表配置
+  const myChart = echarts.init(chartContainer.value);
+
+  myChart.setOption({
+    legend: {
+      data: vars.value.map(item => item.label),  // 图例数据是列名
+    },
+    xAxis: {
+      type: "category",  // 设置为 "category" 表示 x 轴为分类数据
+      data: xdata.value, // x 轴数据为索引
+    },
+    yAxis: {
+      type: "value",  // y 轴是数值型
+    },
+    series: series.value,  // 使用生成的 series 数据
+  });
+
+  console.log("初始化后的 series:", series.value);
+};
+
+
+const selectshuju = (listcbval,listcbval2,dataheader, data) => {
+  console.log("散点图曲线数据1：", data);
+
+  curvedata.value = data;
+  series.value = [];
+  xdata.value = [];
+  const ydata = ref([]);
+
+  vars.value = dataheader;  // dataheader 是包含 label 和 prop 的数组
+  vals.value = data; // vals 是表格数据
+
+  // 生成 X 轴数据和 Y 轴数据
+  const xColumns = listcbval.value;  // 获取 listcbval 中选择的列，作为 X 轴
+  const yColumns = listcbval2.value;  // 获取 listcbval2 中选择的列，作为 Y 轴
+
+  if (xColumns.length === 0 || yColumns.length === 0) {
+    console.error('请先选择 X 轴和 Y 轴的变量');
+    return;
+  }
+
+  // 遍历每一行数据，为每对 X 和 Y 轴选择的列生成数据
+  for (let i = 0; i < vals.value.length; i++) {
+    let xValue = [];
+    let yValue = [];
+
+    // 对于每个 X 轴选择的列，提取该列数据
+    for (let xCol of xColumns) {
+      let xColumnData = vals.value[i][xCol];  // 获取当前行的 X 列数据
+      xValue.push(xColumnData);
+    }
+
+    // 对于每个 Y 轴选择的列，提取该列数据
+    for (let yCol of yColumns) {
+      let yColumnData = vals.value[i][yCol];  // 获取当前行的 Y 列数据
+      yValue.push(yColumnData);
+    }
+
+    xdata.value.push(xValue);
+    ydata.value.push(yValue);
+  }
+
+  // 为每个 Y 轴数据列生成一条曲线
+  for (let yColIndex = 0; yColIndex < yColumns.length; yColIndex++) {
+    const label = yColumns[yColIndex];  // 使用 Y 轴列名作为曲线的标签
+    let seriesData = [];
+
+    for (let rowIndex = 0; rowIndex < vals.value.length; rowIndex++) {
+      let xValues = xdata.value[rowIndex]; // 获取当前行的 X 轴数据
+      let yValue = ydata.value[rowIndex][yColIndex]; // 获取当前行的 Y 轴数据
+
+      // 将 X 和 Y 的数据组成成对的数据，传给 seriesData
+      for (let xVal of xValues) {
+        seriesData.push([xVal, yValue]);  // 每对 (X, Y) 数据
+      }
+    }
+
+    // 生成曲线的数据
+    series.value.push({
+      name: label,  // 使用列名作为曲线名
+      type: "scatter",  // 散点图类型
+      data: seriesData, 
+    });
+  }
+
+  // 处理 ECharts 图表配置
+  const myChart = echarts.init(chartContainer.value);
+
+  myChart.setOption({
+    legend: {
+      data: yColumns,  // 图例数据使用 Y 轴的列名
+    },
+    xAxis: {
+      type: "category",  // 设置为 "category" 表示 x 轴为分类数据
+      data: xdata.value, // x 轴数据为 X 轴数据
+    },
+    yAxis: {
+      type: "value",  // y 轴是数值型
+    },
+    series: series.value,  // 使用生成的 series 数据
+  });
+
+  console.log("初始化后的 series:", series.value);
+};
+
 const setOptionfunc = async () => {
   option.value = {
     title: {
@@ -159,13 +292,17 @@ const setOptionfunc = async () => {
       show: true,
       data: vars.value,
       orient: "vertical", // 图例方向 (horizontal水平, vertical垂直)
-      right: "4%",
-      top: "2%"
+      right: "0%",
+      top: "2%",
+      itemWidth: 30,
+      pageButtonItemGap: 10,
+      pageButtonPosition: 'end',
+      type: 'scroll',
     },
     grid: {
       show: false,
       left: "5%",
-      right: "4%",
+      right: "14%",
       bottom: "15%",
       containLabel: true
     },
@@ -179,9 +316,9 @@ const setOptionfunc = async () => {
     },
     xAxis: [
       {
-        type: "category",
+        type: "value",
         boundaryGap: false,
-        name: "cd",
+        name: "x/c",
         nameGap:30,
         nameTextStyle:{
           fontSize: 16,
@@ -207,7 +344,7 @@ const setOptionfunc = async () => {
 
     yAxis: {
       type: "value",
-      name:'-cl',
+      name:'cp',
       nameGap:40,
       nameTextStyle:{
         fontSize: 16,
@@ -231,16 +368,16 @@ const setOptionfunc = async () => {
         }
       }
     },
-    dataZoom: [
-      {
-        type: "inside", // 鼠标滚轮缩放
-        xAxisIndex: [0], // 针对 X 轴
-      },
-      {
-        type: "slider", // 滑动条缩放
-        xAxisIndex: [0],
-      }
-    ],
+    // dataZoom: [
+    //   {
+    //     type: "inside", // 鼠标滚轮缩放
+    //     xAxisIndex: [0], // 针对 X 轴
+    //   },
+    //   {
+    //     type: "slider", // 滑动条缩放
+    //     xAxisIndex: [0],
+    //   }
+    // ],
     series: series.value
   }
   option.value && myChart.setOption(option.value)
@@ -249,7 +386,7 @@ const setOptionfunc = async () => {
     myChart.resize()
   }
 }
-defineExpose({ getsockechart, echatinit })
+defineExpose({ getsockechart,getshuju, echatinit,selectshuju })
 </script>
 <style lang="scss" scoped>
 </style>

src/views/home.vue

@@ -753,7 +753,7 @@
               </div>
             </template>
             <div>
-              <ListSE />
+              <ListSE @update="handleUpdate"/>
               <!-- <el-form>
                 <el-form-item label="设计集：" >
                   <el-select v-model="listval" :suffix-icon="CaretBottom" placeholder="请选择">
@@ -791,13 +791,13 @@
               </div>
             </template>
             <div>
-              <ListSE />
+              <ListSE @update="handleUpdate"/>
             </div>
             <template #footer>
               <div class="dialog-footer">
                 
                 <el-button @click="dialog.scatterdialog = false">取消</el-button>
-                <el-button type="primary" @click="dialog.scatterdialog = false">
+                <el-button type="primary" @click="selectshujuto;dialog.scatterdialog = false">
                   确定
                 </el-button>
               </div>
@@ -814,7 +814,7 @@
               </div>
             </template>
             <div>
-              <ListSE />
+              <ListSE @update="handleUpdate"/>
             </div>
             <template #footer>
               <div class="dialog-footer">
@@ -1660,6 +1660,7 @@ import Exreport from "./titlecomponent/Exreport.vue";
 import PythonEdit from '@/components/PythonEditor/index.vue'; // python编辑器
 import pdfReportView from '@/components/pdfReportView/index.vue'; //报告查看
 import cloudChart from './threejsView/index.vue'; // 云图
+import emitter from "@/utils/emitter";
 
 let Sidebarref = ref();
 let resource=ref(0);
@@ -2705,6 +2706,7 @@ const dialogbolen = () => {
       break;
     case "面积图":
       echatsfunc();
+      // curveLine4();
       break;
     case "饼状图":
       echatsfunc();
@@ -2715,11 +2717,13 @@ const dialogbolen = () => {
     case "折线图":
       dialog.value.echartLinedialog = true;
       echatsfunc();
+      curveLine4();
       break;
     case "散点图":
       // logsget();
       dialog.value.scatterdialog = true;
       echatsfunc();
+      curveLine4();
       break;
     case "横条图":
       echatsfunc();
@@ -2989,7 +2993,6 @@ const curveLine = () => {
       // pieref.value.getsockechart(curvedata.value);
       // paretoref.value.getsockechart(curvedata.value);
       // optmonitor1.value.getecharts();
-
     })
     .catch((err) => {
       ElMessage.error(err.returnMsg)
@@ -3035,7 +3038,126 @@ const curveLine3 = () => {
     })
 }
 
-//进化优化器
+
+const curveLine4 = () => {
+  const params = {
+    transCode: 'MDO0021',
+    pid: pid.value,
+    type: 1,
+  }
+  request(params)
+    .then((res) => {
+      // curvedata.value = JSON.stringify(res.rows);
+      // console.log('数据形式：',curvedata.value);
+      
+      // echartLineref.value.getshuju(curvedata.value);
+      // scatterref.value.getshuju(curvedata.value);
+
+      if (res.rows && res.rows.length > 0) {
+        // 清空数据
+        datatotabledata.value = [];
+        datatotableheader.value = [];
+
+        // 遍历返回的所有行数据
+        res.rows.forEach((row) => {
+          const { vars, vals } = row; // 解析 vars 和 vals
+          datatotable(vars, vals);
+        });
+      }
+      console.log("表格数据:", datatotabledata.value);
+      console.log("表头数据:", datatotableheader.value);
+      emitter.emit('update:datatotableheader', datatotableheader.value);
+      emitter.emit('update:datatotabledata', datatotabledata.value);
+      scatterref.value.getshuju(datatotableheader.value,datatotabledata.value);
+      echartLineref.value.getshuju(datatotableheader.value,datatotabledata.value);
+    })
+    .catch((err) => {
+      ElMessage.error(err.returnMsg)
+    })
+}
+let datatotableheader = ref([]);
+let datatotabledata = ref([]);
+// 解析数据到表格
+const datatotable = (vars, vals) => {
+  console.log("表格更新");
+
+  // 解析列名，vars 以空格分隔
+  let headers = vars.split(" ");
+
+  // 解析 vals 数据
+  let values = vals.split(" ");
+
+  // 构造表格数据对象
+  let rowData = {};
+  let newHeaders = [];
+
+  headers.forEach((key, index) => {
+    let val = values[index];
+
+    // 处理数组数据，解析为 JSON 或直接填充
+    if (val.startsWith("[") && val.endsWith("]")) {
+      try {
+        let parsedArray = JSON.parse(val); // 解析数组
+        // 解析数组数据并拆分为多个列
+        parsedArray.forEach((item, subIndex) => {
+          let newKey = `${key}_${subIndex + 1}`; // 生成列名：原列名_1, _2, _3...
+          rowData[newKey] = item;
+          // 只在第一次时添加新列
+          if (
+            datatotableheader.value.length === 0 ||
+            !datatotableheader.value.some((h) => h.prop === newKey)
+          ) {
+            newHeaders.push({ label: newKey, prop: newKey });
+          }
+        });
+      } catch (e) {
+        rowData[key] = val; // 解析失败，保留原始字符串
+      }
+    } else {
+      rowData[key] = val !== undefined ? val : ""; // 处理数据长度不匹配情况
+      // 只在第一次时添加原始列
+      if (
+        datatotableheader.value.length === 0 ||
+        !datatotableheader.value.some((h) => h.prop === key)
+      ) {
+        newHeaders.push({ label: key, prop: key });
+      }
+    }
+  });
+
+  // 更新表头：防止重复添加
+  if (datatotableheader.value.length === 0) {
+    datatotableheader.value = newHeaders;
+  } else {
+    newHeaders.forEach((header) => {
+      if (!datatotableheader.value.some((h) => h.prop === header.prop)) {
+        datatotableheader.value.push(header);
+      }
+    });
+  }
+
+  // 更新表格数据
+  datatotabledata.value.push(rowData);
+};
+
+let listcbval = ref([]);
+let listcbval2 = ref([]);
+
+const handleUpdate = (name, value) => {
+  if (name === 'listcbval') {
+    listcbval.value = value;
+    console.log("listcbval:",listcbval.value);
+  } else if (name === 'listcbval2') {
+    listcbval2.value = value;
+    console.log("listcbval2:",listcbval2.value);
+  }
+};
+
+const selectshujuto = () => {
+  console.log("选择数据");
+  scatterref.value.selectshuju(listcbval.value,listcbval2.value,datatotableheader.value,datatotabledata.value);
+}
+
 
 //选择颜色改变线的颜色
 const colorpicker = (e) => {

src/views/titlecomponent/ListSE.vue

@@ -18,23 +18,23 @@
     <el-form-item label="选择要在表中显示的一个或者多个变量和响应">
     </el-form-item>
     <el-space style="width: 100%;" fill :fill-ratio="40">
-      <el-card shadow="hover" >
-        <el-checkbox-group v-model="listcbval">
+      <el-card shadow="hover" style="height: 150px;overflow: auto;">
+        <el-checkbox-group v-model="listcbval" @change="updateParent('listcbval', listcbval)">
           <el-checkbox
             v-for="item in Listcheckbox"
-            :key="item.value"
-            :label="item.value"
+            :key="item.prop"
+            :label="item.prop"
             style="display: block"
             >{{ item.label }}</el-checkbox
           >
         </el-checkbox-group>
       </el-card>
-      <el-card shadow="hover" >
-        <el-checkbox-group v-model="listcbval2">
+      <el-card shadow="hover" style="height: 150px;overflow: auto;">
+        <el-checkbox-group v-model="listcbval2" @change="updateParent('listcbval2', listcbval2)">
           <el-checkbox
-            v-for="item in Listcheckbox2"
-            :key="item.value"
-            :label="item.value"
+            v-for="item in Listcheckbox"
+            :key="item.prop"
+            :label="item.prop"
             style="display: block"
             >{{ item.label }}</el-checkbox
           >
@@ -48,6 +48,8 @@
 import { ref, onMounted, reactive, provide, nextTick } from "vue"
 import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus"
 import { Edit, CaretBottom } from "@element-plus/icons-vue"
+import emitter from "@/utils/emitter"
+
 
 let listval = ref("全部设计")
 let listoptions = ref([
@@ -69,12 +71,20 @@ let Listcheckbox = ref([
 ])
 
 let listcbval2 = ref([])
-let Listcheckbox2 = ref([
-  { label: "y1", value: "y1" },
-  { label: "y2", value: "y2" },
-  { label: "y3", value: "y3" },
-  { label: "y4", value: "y4" }
-])
 
+const emit = defineEmits();
+const updateParent = (name, value) => {
+  emit('update', name, value);
+};
+
+onMounted(() => {
+  emitter.on('update:datatotableheader',(data) => {
+    Listcheckbox.value = data
+  })
+});
+
+onUnmounted(() => {
+  emitter.off('update:datatotableheader')
+})
 
 </script>

src/views/vuetree/index.vue

@@ -483,7 +483,7 @@ function onNodeDoubleClick(e) {
   }else if(e.node.data.name=="进化优化器"){
     emit('optimizerfalse',{name:'进化优化器',wid:nowid});
 
-  }else if(e.node.data.name=="代理优化器"){
+  }else if(e.node.data.name=="optimizer3"){
     emit('optimizerfalse',{name:'代理优化器',wid:nowid});
 
   }else if(e.node.data.name=="Xfoil"){
@@ -650,7 +650,7 @@ function onEdgeDoubleClick(e) {
   console.log('zhongdian:',e.edge.targetNode.data.name);
   let qidian = e.edge.sourceNode.data.name;
   let zhongdian = e.edge.targetNode.data.name;
-  let youhualist = ['优化器','代理优化器','进化优化器','梯度优化器'];
+  let youhualist = ['优化器','optimizer3','进化优化器','梯度优化器'];
   if( youhualist.includes(qidian) && zhongdian ==='FFD' ){
     datacontent.value = '1';
     dataflowshow.value = true;

src/views/vuetree/useDnD.js

@@ -88,7 +88,7 @@ function imagefun(){
     }else if(nid=='4-1'){
       return datas = {label:'进化优化器', image:xuek10,name:'进化优化器'}
     }else if(nid=='4-2'){
-      return datas = {label:'代理优化器', image:xuek11,name:'代理优化器'}
+      return datas = {label:'代理优化器', image:xuek11,name:'optimizer3'}
     }else if(nid=='4-3'){
       return datas = {label:'梯度优化器', image:xuek12,name:'梯度优化器'}
     }else if(nid=='3-01'){