910曲线

src/views/mainContent/echarts/echartline.vue

@@ -0,0 +1,140 @@
+<template>
+  <!-- 折线图 -->
+  <div style="width: 100%; height: 100%">
+    <div id="line" ref="chartContainer" style="width: 100%; height: 100%"></div>
+  </div>
+</template>
+<script setup>
+import * as echarts from "echarts"
+
+const props = defineProps({
+  chartData: {
+    type: Array,
+    required: true
+  },
+  xLabel: {
+    type: String,
+    default: "Time"
+  },
+  yLabel: {
+    type: String,
+    default: "Value"
+  }
+})
+
+const chartContainer = ref(null)
+let chartInstance = null
+const keys = ref([])
+
+// 用 props 传进来的 chartData 构建 datasetSource
+const datasetSource = computed(() => {
+  if (!props.chartData || props.chartData.length === 0) return [];
+  
+  // 获取所有唯一的 key（曲线名称）
+  keys.value = [...new Set(props.chartData.map(item => item.key))];
+  
+  // 获取所有唯一的 step（x轴数据）
+  const steps = [...new Set(props.chartData.map(item => item.step))].sort((a, b) => a - b);
+  
+  // 构建表头
+  const header = ['step', ...keys.value];
+  
+  // 构建数据行
+  const rows = steps.map(step => {
+    const row = [step];
+    keys.value.forEach(key => {
+      // 查找对应 step 和 key 的数据
+      const dataPoint = props.chartData.find(item => 
+        item.step === step && item.key === key
+      );
+      // 如果找到数据则填入值，否则填 null
+      row.push(dataPoint ? dataPoint.value : null);
+    });
+    return row;
+  });
+  
+  return [header, ...rows];
+});
+
+const initChart = () => {
+  if (!chartContainer.value) return
+
+  chartInstance = echarts.init(chartContainer.value)
+
+  const option = {
+    tooltip: { trigger: "axis" },
+    legend: {
+      type: "scroll",
+      pageIconSize: 10,// 图例翻页按钮大小
+      pageIconColor: '#2CFFFF', // 图例翻页按钮颜色
+      pageTextStyle: { color: '#2CFFFF',fontSize:10 },//翻页按钮文字颜色、大小
+      itemWidth: 20,
+      itemHeight: 10, 
+      textStyle: {
+        color: '#2CFFFF',   // 所有图例文字颜色
+        fontSize: 10
+      }
+    },
+    dataset: { source: datasetSource.value },
+    grid: {
+      top: "30px",
+      right: "40px",
+      bottom: "10px",
+      left: "30px",
+      containLabel: true 
+    },
+    xAxis:
+      {
+        type: "category",
+        // name: props.xLabel,
+        // nameLocation: "middle",
+        // nameGap: 30,
+      },
+
+    yAxis:
+      {
+        type: "value",
+        // name: props.yLabel,
+        // nameLocation: "middle",
+        // nameGap: 30,
+      },
+
+    series: keys.value.map(key => ({
+      type: "line",
+      name: key,
+      smooth: true
+    }))
+  }
+
+  chartInstance.setOption(option)
+}
+
+watch(datasetSource, () => {
+  if (chartInstance) {
+    chartInstance.setOption({
+      dataset: { source: datasetSource.value },
+    })
+  }
+}, { immediate: true })
+
+onMounted(() => {
+  nextTick(() => {
+    initChart()
+    window.addEventListener("resize", resizeChart)
+  })
+})
+
+onBeforeUnmount(() => {
+  if (chartInstance) {
+    chartInstance.dispose()
+    chartInstance = null
+  }
+  window.removeEventListener("resize", resizeChart)
+})
+
+const resizeChart = () => {
+  chartInstance?.resize()
+}
+</script>
+<style scoped>
+</style>

src/views/mainContent/index.vue

@@ -26,7 +26,7 @@
             <op-problem ref="opRef" :type="type" :opDatajson="fourData" :runtype="type"/>
           </div>
           <div class="right-2">
-            <iterative-curve />
+            <iterative-curve :type="type"/>
           </div>
         </el-aside>
       </el-container>

src/views/mainContent/rightaside/iterativeCurve.vue

@@ -5,12 +5,173 @@
       <template #header>
         <span>迭代曲线</span>
       </template>
-      
+      <div class="content">
+        <div class="content-top">
+          <el-form class="custom-form" :label-width="Labelwidth" label-position="left">
+            <el-form-item :label="lineName">
+              <el-row :gutter="5">
+                <el-col :span="12">
+                  <el-select v-model="lineOption.linetype1" size="small">
+                    <el-option
+                      v-for="item in option1"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-col>
+                <el-col :span="12">
+                  <el-select v-model="lineOption.linetype2" size="small">
+                    <el-option
+                      v-for="item in option2"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-col>
+              </el-row>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="content-bottom">
+          <echartline :key="ChartKey" :chartData="chartdata" xLabel="Step" yLabel="Value" />
+        </div>
+      </div>
     </el-card>
   </div>
 </template>
 
 <script setup>
+import { request, enPassword } from "@/utils/request";
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useProjectStore } from '@/store/project'
 
+import echartline from "../echarts/echartline.vue";
 
-</script>
+const projectStore = useProjectStore()
+const pid = computed(() => projectStore.pid)
+
+const props = defineProps({
+  type: {
+    type: Number,
+    default:0
+  },
+})
+
+const Labelwidth = '90px'
+
+const lineName = ref('选择曲线数据')
+
+const lineOption = ref({
+  linetype1:'ScipyOptimize_SLSQP',
+  linetype2:'twist_cp'
+})
+
+const option1 = ref([
+  {label: 'ScipyOptimize_SLSQP',value: 'ScipyOptimize_SLSQP'},
+  {label: 'DOEDriver_LatinHypercube',value: 'DOEDriver_LatinHypercube'}
+])
+
+const option2 = ref([
+  {label: '扭转分布',value: 'twist_cp'},
+  {label: '厚度分布',value: 'thickness_cp'},
+  {label: '升力系数',value: 'CL'},
+  {label: '阻力系数',value: 'CD'},
+  {label: '失效应力',value: 'failure'},
+  {label: '结构质量',value: 'structural_mass'},
+  {label: '燃油消耗',value: 'fuelburn'},
+])
+
+const lineData = ref({})
+const ChartKey = ref(0)
+const chartdata = computed(() => {
+  const l1 = lineOption.value.linetype1
+  const l2 = lineOption.value.linetype2
+  if (lineData.value[l1] && lineData.value[l1][l2]) {
+    return lineData.value[l1][l2]
+  }
+  return []
+})
+
+const getlineData = () => {
+  const params = {
+    transCode: 'AC00010',
+    pid: pid.value,
+    type: props.type
+  }
+  request(params)
+  .then((res) => {
+    console.log('曲线数据', res.rankeys)
+    
+    lineData.value = {}
+
+    // 遍历处理每个 rankey 数据
+    res.rankeys.forEach(item => {
+      const processed = processData(item);
+      // 将处理后的数据合并到 lineData.value 中
+      Object.assign(lineData.value, processed);
+    })
+    
+    console.log('解析曲线数据', lineData.value)
+  })
+  .catch((err) => {
+    ElMessage.error(err.returnMsg || "曲线数据获取失败");
+    console.error(err);
+  })
+}
+
+// 修改处理函数
+function processData(data) {
+  const result = {};
+  const mainKey = data.rankey;
+  
+  result[mainKey] = {};
+  
+  data.keys.forEach(item => {
+    try {
+      const parsedData = JSON.parse(item.svJson);
+      result[mainKey][item.key] = parsedData;
+    } catch (error) {
+      console.error(`解析 ${item.key} 的JSON数据时出错:`, error);
+      result[mainKey][item.key] = [];
+    }
+  });
+  
+  return result;
+}
+
+// 监听 chartdata 的变化
+watch(chartdata, () => {
+  ChartKey.value++   // 每次数据变动，强制刷新 echartline 组件
+})
+
+//监听type变化
+watch(
+  () => props.type,
+  (newVal) => {
+    ChartKey.value++;
+    getlineData();
+  }
+)
+
+onMounted(() => {
+    getlineData();
+});
+
+defineExpose({getlineData})
+</script>
+
+<style scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.content-bottom {
+  flex: 1;
+}
+
+</style>

src/views/project/index.vue

@@ -137,26 +137,26 @@ const handleRowChange = (val) => {
 }
 
 const getprojectlist = () => {
-    const params = {
-        transCode: 'AC00001',
-        count: gd.value.pageSize,
-        page: gd.value.currentPage,
-        searchtag: gd.value.searchtag,
-    }
-    request(params)
-        .then((res) => {
-            // console.log(res);
-            gd.value.total = res.total;
-            projectlists.value=res.rows.map((item) =>({
-              ...item,
-              updateTime: item.updateTime.split(' +')[0],
-              createTime: item.createTime.split(' +')[0],
-            }))
-        })
-        .catch((err) => {
-            console.error(err);
-            ElMessage.error(err.returnMsg)
-        })
+  const params = {
+      transCode: 'AC00001',
+      count: gd.value.pageSize,
+      page: gd.value.currentPage,
+      searchtag: gd.value.searchtag,
+  }
+  request(params)
+      .then((res) => {
+          // console.log(res);
+          gd.value.total = res.total;
+          projectlists.value=res.rows.map((item) =>({
+            ...item,
+            updateTime: item.updateTime.split(' +')[0],
+            createTime: item.createTime.split(' +')[0],
+          }))
+      })
+      .catch((err) => {
+          console.error(err);
+          ElMessage.error(err.returnMsg)
+      })
 };
 
 const opProject = () => {