318

src/style/index.css

@@ -329,6 +329,7 @@ overflow: hidden;
   .mianflex{
     display: flex;
     overflow: auto;
+    width: 100%;
   }
   .main_model{
     width: 100%;

src/views/echart/optimize_monitor.vue

@@ -359,7 +359,7 @@ const getshuju = (data) => {
   // 更新图表配置
   myChart.setOption({
     legend: {
-      data: legendData.value 
+      data: legendData 
     },
     xAxis: {
       data: xdata.value  
@@ -386,9 +386,9 @@ const linechart = () => {
       data: vars.value,
       orient: "vertical", // 图例方向 (horizontal水平, vertical垂直)
       right: '0%',
-      top: '2%',
+      top: '3%',
       itemWidth: 30,  // 设置每个图例项的宽度
-      itemHeight: 14,  // 设置每个图例项的高度
+      itemHeight: 0,  // 设置每个图例项的高度
       // icon: "line",
       width: 'auto',
       height: 'auto',

src/views/home.vue

@@ -1330,7 +1330,7 @@
                     border 
                     style=" overflow: auto; height: 100%;" 
                     :header-cell-class-name="lbjkheaderCellClassName"
-                    
+                    :key="tableKey"
                     >
                       <el-table-column type="index" label="编号" width="100"></el-table-column>
                       <el-table-column v-for="(header, index) in tableHeaders" :key="index" :prop="header.prop" show-overflow-tooltip
@@ -2261,7 +2261,7 @@ const handleClick = (tab, event) => {
   // 可视化标签页
   if (tabactive.value == 'Config') {
     echartzongshow.value = true;
-    curveLine();
+    // curveLine();
   } else {
     echartzongshow.value = false;
   }
@@ -2852,6 +2852,9 @@ const ifjiankong = () => {
 }
 //  求解
 const runok = () => {
+  if(echartshow.value){
+    optmonitor1.value.echatinit();
+  }
   const params = {
     transCode: 'MDO0039',
     pid: pid.value,
@@ -2873,24 +2876,27 @@ const runok = () => {
       ElMessage.error(err.returnMsg)
     })
 }
+const tableKey = ref(0);
 const listtableInit = () => {
   const params = {
     transCode: 'MDO0021',
     pid: pid.value,
+    type: 1,
   }
   request(params)
     .then((res) => {
-      console.log('列表初始化：',res);
       tableDatalieb.value = [];
+      tableKey.value++;
       if (res.rows && res.rows.length > 0) {
         // 遍历所有返回的条目
         res.rows.forEach((row) => {
-          const { vars, vals } = row;  // 获取每一行的 vars 和 vals
+        const { vars, vals } = row;  // 获取每一行的 vars 和 vals
 
-          // 调用 tablefun 函数更新表格
-          tablefun1(vars, vals);
+        // 调用 tablefun 函数更新表格
+        tablefun1(vars, vals);
         });
       }
+      
     })
     .catch((err) => {
       ElMessage.error(err.returnMsg)
@@ -2936,6 +2942,7 @@ const curveLine = () => {
   const params = {
     transCode: 'MDO0021',
     pid: pid.value,
+    type: 1,
   }
   request(params)
     .then((res) => {
@@ -2943,14 +2950,14 @@ const curveLine = () => {
       // console.log(curvedata.value);
       optmonitor1.value.getshuju(curvedata.value);
       //  optmonitor1.value.getsockechart();
-      arearef.value.getsockechart(curvedata.value);
-      bargraphref.value.getsockechart(curvedata.value);
-      echartLineref.value.getsockechart(curvedata.value);
-      BarChartref.value.getsockechart(curvedata.value);
-      radarref.value.getsockechart(curvedata.value);
-      scatterref.value.getsockechart(curvedata.value);
-      pieref.value.getsockechart(curvedata.value);
-      paretoref.value.getsockechart(curvedata.value);
+      // arearef.value.getsockechart(curvedata.value);
+      // bargraphref.value.getsockechart(curvedata.value);
+      // echartLineref.value.getsockechart(curvedata.value);
+      // BarChartref.value.getsockechart(curvedata.value);
+      // radarref.value.getsockechart(curvedata.value);
+      // scatterref.value.getsockechart(curvedata.value);
+      // pieref.value.getsockechart(curvedata.value);
+      // paretoref.value.getsockechart(curvedata.value);
       // optmonitor1.value.getecharts();
 
     })
@@ -3598,7 +3605,7 @@ function tablefun(vars, vals) {
     tableDatalieb.value.push(rowData);
   }
 
-  const tablefun1 = (vars, vals) => {
+const tablefun1 = (vars, vals) => {
   console.log('表格更新');
   
   // 解析列名，vars 以空格分隔
@@ -3708,14 +3715,21 @@ const websocketonmessage = (res) => {
     // 解析 WebSocket 接收到的消息数据
     let parsedData = JSON.parse(res.data);
     let step = Number(parsedData.step);
-    percentage.value = Number((step / 30) * 100);
+    if(parsedData.type === 1){
+      percentage.value = Math.round((step / 30) * 100);
+    }
+
     console.log("进度:", percentage.value);
 
     echartdata.value = res.data;
     arrobj.value.push(parsedData);
-
-    tablefun1(parsedData.vars, parsedData.vals);  // 传递 vars 和 vals 更新表格
-    optmonitor1.value.getsockechart(arrobj.value);
+    console.log('tabactive:',tabactive.value)
+    if(jiankong.value && parsedData.type === 1){
+      console.log('列表监控')
+      tablefun1(parsedData.vars, parsedData.vals);  // 传递 vars 和 vals 更新表格
+    }else if(echartshow.value){
+      optmonitor1.value.getsockechart(arrobj.value);
+    }
     
     // optmonitor1.value.getsockechart(arrobj.value);
     // processMonitor1ref.getsockechart(arrobj.value);
@@ -4370,11 +4384,13 @@ color: #2267B1;
 }
 
 .jindutiao .demo-progress {
-  width: 80%;
+  width: 100%;
 }
 
 .jindutiao .percentage-value {
   font-size: 13px;
+  color: #333333;
+  font-family: 'Source Sans Pro-Regular';
 }
 .cstleft{
   width:50%;