10.13 0.3

src/views/echart/optimize_monitor.vue

@@ -3,7 +3,7 @@
 <!-- 折线图 -->
     <div>
     <div class="echartitem">
-      <h3 class="selcal">{{ props.selval }}</h3>
+      <!-- <h3 class="selcal">{{ props.selval }}</h3> -->
         <div id="line" style="width: 100%;height:400px;"></div>
         <h3 class="diedai">迭代次数</h3>
     </div>
@@ -15,30 +15,72 @@ 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 convergeDate=ref([]);
+let option=ref();
+let curvedata=ref('')
 const props = defineProps({
-
-  selval: {
+//   selval: {
+//   type: String,
+// },
+curvedata:{
   type: String,
 },
 })
   let emit = defineEmits(['',])
 onMounted(() => {
-    linechart()
+ 
+  //  linechart()
   })
-  const linechart= ()=>{
+  // 数据转化
+  
+ const getshuju=()=>{
+
+  convergeDate.value=[];
+  series.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(series.value);
+    //linechart();
+    }
+  //   var newOption = {
+  //       series: [{
+  //           data: series.value
+  //       }]
+  //     }
+  // myChart.setOption(newOption);
+  }
+
+  const linechart= (data)=>{
+    // setTimeout(function(){
+    //   getshuju();
+    // },500)
+    curvedata.value=data;
+    getshuju()
     var chartDom = document.getElementById('line');
    let myChart = echarts.init(chartDom);
- let  option = {
-        // title: {
-        //   text: props.selval,
-        // left: 'left', // 将标题居中
-        // top: '20', // 将标题放置在纵坐标的上方
-        // floating: true, // 启用浮动效果
-        // textStyle: {
-        //  rotate: 90 // 旋转角度，正值为顺时针旋转
-        // }
-
-        // },
+option = {
           tooltip: {
           trigger: "axis",
           backgroundColor: "rgba(0,0,0,.6)",
@@ -48,7 +90,7 @@ onMounted(() => {
           },
         },
         legend: {
-            data: ['Email', 'Union Ads']
+            data:vars.value
         },
         grid: {
             show: false,
@@ -65,7 +107,7 @@ onMounted(() => {
         xAxis: {
             type: 'category',
             boundaryGap: false,
-            data: ['0.1', '0.4', '0.8', '1.2', '1.6'],
+            data:  xdata.value,
             axisLine: {//X轴线
             show: true, 
             lineStyle: {
@@ -89,21 +131,7 @@ onMounted(() => {
             }
 },
         },
-        series: [
-            {
-            name: 'Email',
-            type: 'line',
-            stack: 'Total',
-            data: [120, 132, 101, 134, 90]
-            },
-            // {
-            // name: 'Union Ads',
-            // type: 'line',
-            // stack: 'Total',
-            // data: [220, 182, 191, 234, 290]
-            // }
-        
-        ]
+        series:series.value
         };
         option && myChart.setOption(option);
 
@@ -112,7 +140,7 @@ onMounted(() => {
 
       }
     }
-    
+    defineExpose({linechart,getshuju});
   </script>
   <style lang="scss" scoped>
   .selcal{

src/views/home.vue

@@ -1019,7 +1019,7 @@
                 <vuefindex  v-if="activeName=='Role'" ref="vuefval" :Xfiol="dialog.Xfiol" :jboptimizer="dialog.jboptimizer"  :optimizer="dialog.optimizer" @optimizerfalse="optimizerfalse($event)" ></vuefindex>
                 <div  class="maxh221">
              <!-- 中间部分 -->
-             <div  class="conter_mian classtable " v-if="activeName=='Three'&&tabactive=='列表监控'">
+             <div  class="conter_mian classtable " v-if="activeName=='Three'&&tabactive=='列表监控'||activeName=='Three'&&tabactive=='开始'">
                <!-- <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"  />
@@ -1039,7 +1039,8 @@
                 <el-table-column prop="x15" label="x15"  />
                 <el-table-column prop="cd" label="cd/cl"  />
                 </el-table>  -->
-                <el-table :data="tableDatalieb">
+                <el-table :data="tableDatalieb" border  style="display: flex; flex: 1; overflow: auto;" height="500">
+                  <el-table-column type="index"  width="50"></el-table-column>
                   <el-table-column
                     v-for="(header, index) in tableHeaders"
                     :key="index"
@@ -1047,22 +1048,22 @@
                     :label="header.label">
                   </el-table-column>
                 </el-table>
-                <div @click="tablefun()">点击</div>
+                <!-- <div @click="tablefun()">点击</div> -->
              </div>
              <!--   曲线监控 -->
              <div  class="conter_mian classtable " v-if="activeName=='Three'&&tabactive=='曲线监控'">
-              <el-form-item label="" >
+              <!-- <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 :selval="quval"/>
+                </el-form-item> -->
+                <optmonitor ref="optmonitor1"  :selval="quval" :curvedata="curvedata"/>
             </div>
             <!-- 过程监控 -->
             <div  class="conter_mian classtable conter_flex" v-if="activeName=='Three'&&tabactive=='过程监控'">
-              <div class="echart_left  ech">left</div>
-              <div class="echart_right ech">right</div>
+              <!-- <div class="echart_left  ech">left</div>
+              <div class="echart_right ech">right</div> -->
             </div>
                 <!-- 右侧边栏开始 -->
                 <!-- 结束 -->
@@ -1354,15 +1355,20 @@
     operator:'倒位变异',
     gpu:'YES'
   })
+  let optmonitor1=ref();
   let tableHeaders=ref([
         // { label: '日期', prop: 'date' },
         // { label: '姓名', prop: 'name' },
         // 可以根据需要动态添加或删除表头信息
       ]) 
+      let varsobj=ref({});
+      let valsobj=ref({});
+  let tabarr=ref([]);
   let arrobj=ref([]);
  let tableDatalieb=ref([
         // { date: '2016-05-02', name: '王小虎' },
       ])
+  let curvedata=ref('');
   let websock=ref(null);
   let times=ref({
       lockReconnect: false, //是否真正建立连接
@@ -1397,7 +1403,7 @@
   { label: '约束条件', value: '约束条件' },
   { label: '目标函数', value: '目标函数' },
 ])
-let quval = ref("设计变量")
+let quval = ref("")
   const activeIndex = ref(0);
   const activeIndex2 = ref(0);
   const activeIndex3 = ref(0);
@@ -1712,6 +1718,7 @@ let options3=ref([
   setTimeout(function() {
     init();
     initWebSocket();
+      logsget();
 }, 1500);
   // childfun();
 
@@ -1741,6 +1748,9 @@ console.log(route.query.pid);
     tabactive.value=tab.props.name;
     if(tabactive.value=='User'){
         router.replace({ path: '/' })
+    }else if(tabactive.value=='Three'){
+      // logsget();
+
     }
     dialogcolse()
   }
@@ -1846,6 +1856,9 @@ console.log(route.query.pid);
         break;
         case "开始":
        runok();
+       break;
+        case "曲线监控":
+        curveLine();
       
       default: 
     }
@@ -1859,6 +1872,10 @@ console.log(route.query.pid);
     }
     request(params)
         .then((res) => {
+          arrobj.value=[];
+    tabarr.value=[];
+    tableDatalieb.value=[];
+    tableHeaders.value=[];
           ElMessage({
                   message: "开始运行",
                   type: 'success',
@@ -1867,6 +1884,28 @@ console.log(route.query.pid);
         .catch((err) => {
             ElMessage.error(err.returnMsg)
         })
+  }
+  //曲线监控
+  const curveLine= ()=>{
+    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',
+          //     })
+        })
+        .catch((err) => {
+            ElMessage.error(err.returnMsg)
+        })
   }
    //进化优化器
    const getoptimize = () => {
@@ -2367,25 +2406,50 @@ const params = {
       }
 }
 // 表格
-function tablefun(){
-  let varsobj={}
+function tablefun(vals){
+  let arrtable=vals;
+  console.log(arrtable);
+  let obj2={}
  let heaarr= arrobj.value[0].vars.split(",");
+ //let heaarr=['x1', 'x2', 'x3', 'x4', 'x5', 'f1']
  tableHeaders.value=[];
-heaarr.forEach(function(item) {
-  let obj = { label: item ,prop:item}; // 创建新对象
-  tableHeaders.value.push(obj);
-
-});
+    heaarr.forEach(function(item) {
+      let obj = {label: item ,prop:item}; // 创建新对象
+      tableHeaders.value.push(obj);
+    });
+    let result = heaarr.map((key, index) => {
+        return { [key]: arrtable[index] };
+      });
+      const mergedObject = result.reduce((accumulator, currentValue) => {
+  return { ...accumulator, ...currentValue };
+}, {});
+    tableDatalieb.value.push(mergedObject);
 
 
 }
+//获取日志
+const logsget= ()=>{
+    const params = {
+        transCode: 'MDO0025',
+        pid:pid.value,
+    }
+    request(params)
+        .then((res) => {
+          //console.log(res.logs)
+        //let  data=JSON.parse(res.logs);
+ 
+          logs.value=res.logs;
+        })
+        .catch((err) => {
+            ElMessage.error(err.returnMsg)
+        })
+  }
 //websockct的连接
 function initWebSocket() {
 
       //初始化weosocket
-    arrobj.value=[];
       // const wsuri = "ws://192.168.0.43:8087//websocket?projectId="+this.pid; ws://192.168.0.131/diswebsocket?projectId=5
-       const wsurl = "ws://192.168.104:8188//websocket?projectId="+pid.value;
+       const wsurl = "ws://192.168.106:8188//websocket?projectId="+pid.value;
       // const wsurl =
       //   "ws://" +
       //   process.env.VUE_APP_BASE_websokt +
@@ -2405,45 +2469,19 @@ function initWebSocket() {
     };
     // Websoket接收消息事件
     const websocketonmessage = (res) => {
-     
       if(res.data.indexOf('{') !== -1){
          arrobj.value.push(JSON.parse(res.data));
-        let vals=(JSON.parse(res.data).vals).split(",");
-        let varsobj={};
-        let valsobj={};
-        let heaarr= arrobj.value[0].vars.split(",");
-        tableHeaders.value=[];
-        // heaarr.forEach(function(item) {
-          for(i=0;i<heaarr.length;i++){
-            let obj = { label: item ,prop:item}; // 创建新对象
-             tableHeaders.value.push(obj);
-             vals.forEach((vals)=> {
-              valsobj.heaarr[i]=vals;
-              tableDatalieb.value.push(valsobj);
-        })
-          }
-          
-        
-        // });
-//         heaarr.forEach(function(item) {
-
-// });
-//         vals.forEach((item)=> {
-//           valsobj.
-
-//         })
-        valsobj={ label: item ,prop:item};
-         tablefun();
-         //console.log(   arrobj.value);
-    //    let header=(arrobj.vars).split(',');
-       
+        let vals=(JSON.parse(res.data).vals).split(" ");
+            tablefun(vals);
       }else{
+         if( res.data.indexOf('msg=heartChec') == -1){
         logs.value=logs.value+'"\n"'+res.data;
         let textarea = document.getElementById("textarea_id");
         textarea.scrollTop = textarea.scrollHeight;
+         }
+      
       }
     
-      
       reset();
     };
   

vite.config.ts

@@ -47,7 +47,7 @@ export default defineConfig(({ mode }) => {
             proxy: {
                 '/api': {
                     //target: 'http://192.168.0.131:8188/TransServlet',//配置文件获取地址
-                    target: 'http://192.168.0.104:8188/TransServlet',
+                    target: 'http://192.168.0.106:8188/TransServlet',
                     secure: false, //接受使用https
                     changeOrigin: true, //允许跨域
                     ws: false, //使用websocket