10.14

src/views/echart/optimize_monitor.vue

@@ -4,13 +4,13 @@
     <div>
     <div class="echartitem">
       <!-- <h3 class="selcal">{{ props.selval }}</h3> -->
-        <div id="line" style="width: 100%;height:400px;"></div>
+        <div id="line"  ref="myChart" style="width: 100%;height:400px;"></div>
         <h3 class="diedai">迭代次数</h3>
     </div>
     </div>
   </template>
   <script setup>
-  import { ref, onMounted, reactive, } from "vue";
+  import { ref, onMounted, reactive,markRaw, inject} from "vue";
 import { RouterView, RouterLink } from "vue-router"
 import { request, uploadFile } from "@/utils/request";
 import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
@@ -19,28 +19,86 @@ let vars=ref([]);
 let vals=ref([]);
 let series=ref([]);
 let xdata=ref([]);
+let chartContainer=ref(null);
+let myChart=ref(null)
+let chartDom=ref(null)
+let option=ref(null);
 let convergeDate=ref([]);
-let option=ref();
 let curvedata=ref('')
+let state = reactive({
+instance: null,
+})
 const props = defineProps({
-//   selval: {
-//   type: String,
-// },
+  echartdata: {
+  type: String,
+},
 curvedata:{
   type: String,
 },
 })
   let emit = defineEmits(['',])
 onMounted(() => {
- 
-  //  linechart()
+    chartDom.value = document.getElementById('line');
+    myChart.value = echarts.init(chartDom.value);
+  //  myChart.value = echarts.init(myChart.value);
+  //myChart.value= echarts.init(chartContainer.value as HTMLElement)
+
+    linechart();
   })
-  // 数据转化
-  
- const getshuju=()=>{
+  //初始化
+  const echatinit=()=>{
+  convergeDate.value=[];
+  series.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 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++){
@@ -61,28 +119,27 @@ onMounted(() => {
       data:firstColumn
     }
     series.value.push(item)
-    //console.log(series.value);
-    //linechart();
     }
-  //   var newOption = {
-  //       series: [{
-  //           data: series.value
-  //       }]
-  //     }
-  // myChart.setOption(newOption);
+    console.log(33333)
+    //myChart.value.setOption(option.value);
+    myChart.value.setOption({
+      legend: {
+            data:vars.value
+        },
+      xAxis:{
+        data:  xdata.value,
+      },
+      series: series.value
+    });
+    console.log(series.value);
   }
 
-  const linechart= (data)=>{
-    // setTimeout(function(){
-    //   getshuju();
-    // },500)
-    curvedata.value=data;
-    getshuju()
-    var chartDom = document.getElementById('line');
-   let myChart = echarts.init(chartDom);
-option = {
+  const linechart= ()=>{
+  //  let chartDom = document.getElementById('line');
+  //  let  myChart= echarts.init(chartDom);
+option.value = {
           tooltip: {
-          trigger: "axis",
+          trigger: "item",
           backgroundColor: "rgba(0,0,0,.6)",
           borderColor: "rgba(147, 235, 248, .8)",
           textStyle: {
@@ -133,14 +190,20 @@ option = {
         },
         series:series.value
         };
-        option && myChart.setOption(option);
-
+        option.value && myChart.value.setOption(option.value);
+       
         window.onresize = function() {
-            myChart.resize()
+            myChart.value.resize()
 
       }
+      
     }
-    defineExpose({linechart,getshuju});
+    // 监听数据变化，重绘图表
+watch(series, () => {
+  linechart();
+}, { deep: true });
+
+    defineExpose({linechart,getshuju,getsockechart});
   </script>
   <style lang="scss" scoped>
   .selcal{

src/views/home.vue

@@ -1021,8 +1021,10 @@
             <!-- 放图形 -->
             <div class="main_container">
               <div class="main_model">
-               
-                <vuefindex  v-if="activeName=='Role'" ref="vuefval" :Xfiol="dialog.Xfiol" :jboptimizer="dialog.jboptimizer"  :optimizer="dialog.optimizer" @optimizerfalse="optimizerfalse($event)" ></vuefindex>
+                <div class="main_model"  v-show='flowshow' >
+               <!-- //v-if="activeName=='Role'" -->
+                <vuefindex     ref="vuefval" :Xfiol="dialog.Xfiol" :jboptimizer="dialog.jboptimizer"  :optimizer="dialog.optimizer" @optimizerfalse="optimizerfalse($event)" ></vuefindex>
+              </div>
                 <div  class="maxh221">
              <!-- 中间部分 -->
              <div  class="conter_mian classtable " v-if="activeName=='Three'&&tabactive=='列表监控'||activeName=='Three'&&tabactive=='开始'">
@@ -1064,7 +1066,7 @@
                     </el-option>
                   </el-select>
                 </el-form-item> -->
-                <optmonitor ref="optmonitor1"  :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=='过程监控'">
@@ -1327,7 +1329,7 @@
     </div>
   </template>
   <script setup>
-  import { ref, onMounted, reactive, } from "vue";
+  import { ref, onMounted, reactive, provide,nextTick } from "vue";
   import { RouterView, RouterLink,useRouter,useRoute } from "vue-router"
   import myheader from "@/components/header.vue"
   import { request, uploadFile } from "@/utils/request";
@@ -1347,6 +1349,7 @@
   import sixchine from './demo/chine.vue'
   import vuefindex from './vuetree/index.vue'
   import Sidebar from './vuetree/Sidebar.vue'
+  let flowshow=ref(true);
   const router = useRouter();
   const route = useRoute();
   let youhua=ref({
@@ -1361,6 +1364,7 @@
     operator:'倒位变异',
     gpu:'YES'
   })
+  let echartdata=ref(null);
   let optmonitor1=ref();
   let tableHeaders=ref([
         // { label: '日期', prop: 'date' },
@@ -1725,7 +1729,9 @@ let options3=ref([
   setTimeout(function() {
     init();
     initWebSocket();
-      logsget();
+  
+    logsget();
+   // vuefval.value.getroter()
 }, 1500);
   // childfun();
 
@@ -1759,6 +1765,14 @@ console.log(route.query.pid);
       // logsget();
 
     }
+    if(tabactive.value=='Role'){
+      flowshow.value=true;
+      console.log(11111)
+    }else{
+   
+      flowshow.value=false;
+      console.log( flowshow.value)
+    }
     dialogcolse()
   }
   //表格点击事件
@@ -1879,10 +1893,11 @@ console.log(route.query.pid);
     }
     request(params)
         .then((res) => {
+          logs.value='';
           arrobj.value=[];
-    tabarr.value=[];
-    tableDatalieb.value=[];
-    tableHeaders.value=[];
+          tabarr.value=[];
+          tableDatalieb.value=[];
+          tableHeaders.value=[];
           ElMessage({
                   message: "开始运行",
                   type: 'success',
@@ -1897,22 +1912,25 @@ console.log(route.query.pid);
     const params = {
         transCode: 'MDO0021',
         pid:pid.value,
-       
-
     }
     request(params)
         .then((res) => {
           curvedata.value=JSON.stringify(res.rows);
-          //optmonitor1.value.linechart();
-          optmonitor1.value.linechart( curvedata.value);
-          // ElMessage({
-          //         message: "",
-          //         type: 'success',
-          //     })
+         // console.log(curvedata.value);
+        optmonitor1.value.getshuju(curvedata.value);
+     //  optmonitor1.value.getsockechart();
+
+     
+      // optmonitor1.value.getecharts();
+        
         })
         .catch((err) => {
             ElMessage.error(err.returnMsg)
         })
+  }
+  const diaoyongfun=()=>{
+    console.log(optmonitor1.value);
+   //optmonitor1.value.getshuju();
   }
    //进化优化器
    const getoptimize = () => {
@@ -2445,15 +2463,35 @@ const logsget= ()=>{
     }
     request(params)
         .then((res) => {
-          //console.log(res.logs)
-        //let  data=JSON.parse(res.logs);
- 
           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);
+          }
         })
         .catch((err) => {
             ElMessage.error(err.returnMsg)
         })
   }
+  // 字符串截取
+  function extractBracesContent(str) {
+  const objectRegex = /\{[^}]+\}/g; // 匹配大括号对象
+  const matches = str.match(objectRegex);
+  if (!matches) return [];
+  return matches.map(match => {
+    try {
+      return JSON.parse(match);
+    } catch (e) {
+      console.error('Failed to parse object:', match);
+      return null;
+    }
+  }).filter(Boolean); // 过滤掉解析失败的对象
+}
+ 
+
 //websockct的连接
 function initWebSocket() {
 
@@ -2475,14 +2513,25 @@ function initWebSocket() {
  	// Websoket连接成功事件
    const websocketonopen = (res) => {
       console.log("WebSocket连接成功", res);
+      console.log()
       start();
     };
     // Websoket接收消息事件
     const websocketonmessage = (res) => {
+      arrobj.value=[];
       if(res.data.indexOf('{') !== -1){
-         arrobj.value.push(JSON.parse(res.data));
+        echartdata.value=res.data;
+        arrobj.value.push(JSON.parse(res.data));
+        console.log( arrobj.value);
         let vals=(JSON.parse(res.data).vals).split(" ");
             tablefun(vals);
+         
+          //  curveLine();
+            //console.log(optmonitor1.value);
+           
+        // diaoyongfun();
+        // curveLine();
+          // optmonitor1.value.getsockechart()
       }else{
          if( res.data.indexOf('msg=heartChec') == -1){
         logs.value=logs.value+'"\n"'+res.data;

src/views/vuetree/index.vue

@@ -246,7 +246,6 @@ const getroter=()=>{
   }
   newobj.value.name=objlist.name;
   newobj.value.description=objlist.remark;
-  console.log(objlist.pid);
   pid.value=objlist.pid;
 }
 //改变线的粗
@@ -282,7 +281,7 @@ watch(() => seledge.value, (newItems, oldItems) => {
   //   //seledge.value.style.stroke =  linecolor.value;
   // }
     });
-defineExpose({changeAllEdgesColor,linestrokeWidth});
+defineExpose({changeAllEdgesColor,linestrokeWidth,getroter});
 </script>
 
 <style>