10.15

src/views/echart/optimize_monitor.vue

@@ -4,13 +4,13 @@
     <div>
     <div class="echartitem">
       <!-- <h3 class="selcal">{{ props.selval }}</h3> -->
-        <div id="line"  ref="myChart" style="width: 100%;height:400px;"></div>
+        <div id="line"  ref="chartContainer"  style="width:100%;height:400px;"></div>
         <h3 class="diedai">迭代次数</h3>
     </div>
     </div>
   </template>
   <script setup>
-  import { ref, onMounted, reactive,markRaw, inject} from "vue";
+  import { ref, onMounted, reactive,markRaw, inject,watch} from "vue";
 import { RouterView, RouterLink } from "vue-router"
 import { request, uploadFile } from "@/utils/request";
 import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
@@ -38,62 +38,73 @@ curvedata:{
 })
   let emit = defineEmits(['',])
 onMounted(() => {
-    chartDom.value = document.getElementById('line');
-    myChart.value = echarts.init(chartDom.value);
+  //var chartDom = document.getElementById('line');
+  //chartContainer.value.style.width=window.innerWidth-220+'px';
+ // console.log( chartContainer.value.style.width);
+    myChart.value = echarts.init(chartContainer.value);
+
+    linechart();
+    setTimeout(function(){
+      window.addEventListener("resize",function() {
+    // chartContainer.value.style.width='';
+      myChart.value.resize();
+    });
+    },1000)
+  
+    // window.onresize = function() {
+    //         // 让图表自适应大小
+    //         myChart.value.resize();
+    //     };
   //  myChart.value = echarts.init(myChart.value);
   //myChart.value= echarts.init(chartContainer.value as HTMLElement)
 
-    linechart();
+ 
   })
   //初始化
   const echatinit=()=>{
   convergeDate.value=[];
   series.value=[];
+  xdata.value=[];
 }
 // 从websocket取数据
-const getsockechart=()=>{
-  console.log(1113333)
-  // 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);
-  //   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)
-  //   }
-  //   console.log(33333)
-  //   //myChart.value.setOption(option.value);
-  //   myChart.value.setOption({
-  //     legend: {
-  //           data:vars.value
-  //       },
-  //     xAxis:{
-  //       data:  xdata.value,
-  //     },
-  //     series: series.value
-  //   });
-  //   //linechart();
-  //   console.log(series.value);
+const getsockechart=(data)=>{
+  curvedata.value=data;
+  series.value=[];
+  let rows=curvedata.value;
+  console.log(rows);
+  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.value.setOption({
+      legend: {
+            data:vars.value
+        },
+      xAxis:{
+        data:  xdata.value,
+      },
+      series: series.value
+    });
+   // linechart();
+ 
 }
 
-  // 数据转化
+  // 数据转化废弃
  const getshuju=(data)=>{
   curvedata.value=data;
   convergeDate.value=[];
@@ -109,6 +120,7 @@ const getsockechart=()=>{
        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]);
@@ -120,8 +132,6 @@ const getsockechart=()=>{
     }
     series.value.push(item)
     }
-    console.log(33333)
-    //myChart.value.setOption(option.value);
     myChart.value.setOption({
       legend: {
             data:vars.value
@@ -131,7 +141,7 @@ const getsockechart=()=>{
       },
       series: series.value
     });
-    console.log(series.value);
+
   }
 
   const linechart= ()=>{
@@ -139,7 +149,7 @@ const getsockechart=()=>{
   //  let  myChart= echarts.init(chartDom);
 option.value = {
           tooltip: {
-          trigger: "item",
+          trigger: "axis",//item
           backgroundColor: "rgba(0,0,0,.6)",
           borderColor: "rgba(147, 235, 248, .8)",
           textStyle: {
@@ -191,19 +201,22 @@ option.value = {
         series:series.value
         };
         option.value && myChart.value.setOption(option.value);
-       
         window.onresize = function() {
-            myChart.value.resize()
-
-      }
-      
+            // 让图表自适应大小
+            myChart.value.resize();
+        };
     }
     // 监听数据变化，重绘图表
-watch(series, () => {
-  linechart();
-}, { deep: true });
-
-    defineExpose({linechart,getshuju,getsockechart});
+// 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{

src/views/home.vue

@@ -1027,7 +1027,7 @@
               </div>
                 <div  class="maxh221">
              <!-- 中间部分 -->
-             <div  class="conter_mian classtable " v-if="activeName=='Three'&&tabactive=='列表监控'||activeName=='Three'&&tabactive=='开始'">
+             <div  class="conter_mian classtable " v-show="jiankong">
                <!-- <el-table :data="tableDatalieb" border  style="display: flex; flex: 1; overflow: auto;"  max-height="600">
                 <el-table-column  type="index" width="30" />
                 <el-table-column prop="x1" label="x1"  />
@@ -1059,14 +1059,14 @@
                 <!-- <div @click="tablefun()">点击</div> -->
              </div>
              <!--   曲线监控 -->
-             <div  class="conter_mian classtable " v-if="activeName=='Three'&&tabactive=='曲线监控'">
+             <div  class="conter_mian classtable "  v-show="echartshow">
               <!-- <el-form-item label="" >
                   <el-select v-model="quval" :suffix-icon="CaretBottom" placeholder="请选择">
                     <el-option v-for="item in quxian" :key="item.value" :label="item.label" :value="item.value">
                     </el-option>
                   </el-select>
                 </el-form-item> -->
-                <optmonitor ref="optmonitor1"  :echartdata="echartdata" :selval="quval" :curvedata="curvedata"/>
+                <optmonitor ref="optmonitor1"  :echartdata="echartdata" :selval="quval" :curvedata="curvedata" />
             </div>
             <!-- 过程监控 -->
             <div  class="conter_mian classtable conter_flex" v-if="activeName=='Three'&&tabactive=='过程监控'">
@@ -1350,6 +1350,8 @@
   import vuefindex from './vuetree/index.vue'
   import Sidebar from './vuetree/Sidebar.vue'
   let flowshow=ref(true);
+  let jiankong=ref(false);
+  let echartshow=ref(false);
   const router = useRouter();
   const route = useRoute();
   let youhua=ref({
@@ -1769,10 +1771,11 @@ console.log(route.query.pid);
       flowshow.value=true;
       console.log(11111)
     }else{
-   
       flowshow.value=false;
       console.log( flowshow.value)
     }
+    ifjiankong();
+   
     dialogcolse()
   }
   //表格点击事件
@@ -1826,6 +1829,7 @@ console.log(route.query.pid);
     console.log(key);
     console.log(name);
     tabactive.value=name;
+
     dialogbolen();
   }
    const dialogbolen=()=>{
@@ -1876,14 +1880,34 @@ console.log(route.query.pid);
         vuefval.value.linestrokeWidth(3);
         break;
         case "开始":
-       runok();
+        optmonitor1.value.echatinit();
+         runok();
+       break;
+       case "列表监控":
+       ifjiankong()
        break;
         case "曲线监控":
+        ifjiankong()
         curveLine();
       
       default: 
     }
    }
+  //  ||activeName.value=='Three'&&tabactive.value=='开始'
+  const ifjiankong=()=>{;
+    if(activeName.value=='Three'&&tabactive.value=='列表监控'||activeName.value=='Three'&&tabactive.value=='开始'){
+      jiankong.value=true;
+    
+    }else{
+      jiankong.value=false;
+    }
+    if(activeName.value=='Three'&&tabactive.value=='曲线监控'||activeName.value=='Three'&&tabactive.value=='曲线监控'){
+      echartshow.value=true;
+     
+    }else{
+      echartshow.value=false;
+    }
+  }
   //  求解
   const runok= ()=>{
     const params = {
@@ -1917,7 +1941,7 @@ console.log(route.query.pid);
         .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();
 
      
@@ -1927,10 +1951,6 @@ console.log(route.query.pid);
         .catch((err) => {
             ElMessage.error(err.returnMsg)
         })
-  }
-  const diaoyongfun=()=>{
-    console.log(optmonitor1.value);
-   //optmonitor1.value.getshuju();
   }
    //进化优化器
    const getoptimize = () => {
@@ -2436,7 +2456,7 @@ const params = {
 // 表格
 function tablefun(vals){
   let arrtable=vals;
-  console.log(arrtable);
+  //console.log(arrtable);
   let obj2={}
  let heaarr= arrobj.value[0].vars.split(",");
  //let heaarr=['x1', 'x2', 'x3', 'x4', 'x5', 'f1']
@@ -2448,6 +2468,7 @@ function tablefun(vals){
     let result = heaarr.map((key, index) => {
         return { [key]: arrtable[index] };
       });
+    
       const mergedObject = result.reduce((accumulator, currentValue) => {
   return { ...accumulator, ...currentValue };
 }, {});
@@ -2465,11 +2486,14 @@ const logsget= ()=>{
         .then((res) => {
           logs.value=res.logs;
           const results = extractBracesContent( logs.value);
-          console.log(results);
           for(let i=0;i<results.length;i++){
             arrobj.value.push(results[i]);
            let vals=(results[i].vals).split(" ");
             tablefun(vals);
+            let echarr=[];
+            echarr.push(results[i])
+            optmonitor1.value.getsockechart(echarr);
+            
           }
         })
         .catch((err) => {
@@ -2521,13 +2545,14 @@ function initWebSocket() {
       arrobj.value=[];
       if(res.data.indexOf('{') !== -1){
         echartdata.value=res.data;
+       // console.log( echartdata.value);
         arrobj.value.push(JSON.parse(res.data));
-        console.log( arrobj.value);
+        //console.log( arrobj.value);
         let vals=(JSON.parse(res.data).vals).split(" ");
             tablefun(vals);
-         
+            optmonitor1.value.getsockechart(arrobj.value);
           //  curveLine();
-            //console.log(optmonitor1.value);
+          ///console.log(optmonitor1.value);
            
         // diaoyongfun();
         // curveLine();
@@ -2602,6 +2627,12 @@ function initWebSocket() {
         footerShow.value = !footerShow.value;
         }
       }
+    
+    //   watch(() =>echartdata.value, (newValue, oldValue) => {
+    //   // 这里处理 echartData 变化的逻辑
+    //   console.log('echartData changed:', newValue);
+    // //  console.log(optmonitor1.value);
+    // });
   </script>
   <style lang="scss" scoped>