曲线监控。过程监控页面修改，可视化各个页面修改

src/views/echart/echartLine.vue

@@ -43,7 +43,7 @@ const props = defineProps({
   }
 })
 onMounted(() => {
-  chartContainer.value.style.width = window.innerWidth - 220 + "px"
+ 
   myChart = echarts.init(chartContainer.value)
   linechart()
   myChart.resize();

src/views/echart/index.vue

@@ -1,7 +1,7 @@
 <template>
-    <!-- 优化监控 -->
+
 <h3 class="opt_tltie">时间历程曲线</h3>
-<!-- 折线图 -->
+
   <div>
   <div class="echartitem">
       <div id="line"></div>

src/views/echart/optimize_monitor.vue

@@ -1,238 +1,237 @@
 <template>
-
-<!-- 折线图 -->
-    <div>
-    <div class="echartitem">
+  <!-- 曲线监控 -->
+  <div style="width: 100%; height: 100%">
+    <div class="echartitem" style="width: 100%; height: 100%">
       <!-- <h3 class="selcal">{{ props.selval }}</h3> -->
-        <div id="line"  ref="chartContainer"  style="width:100%;height:390px;"></div>
-        <h3 class="diedai">迭代次数</h3>
-    </div>
+      <div
+        id="line"
+        ref="chartContainer"
+        style="width: 100%; height: 100%"
+      ></div>
+      
     </div>
-  </template>
+  </div>
+</template>
   <script setup>
-  import { ref, onMounted, reactive,markRaw, inject,watch,nextTick} from "vue";
+import { ref, onMounted, reactive, markRaw, inject, watch, nextTick } from "vue"
 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 chartContainer=ref();
-let myChart;
-let chartDom=ref()
-let option=ref(null);
-let convergeDate=ref([]);
-let curvedata=ref('')  
+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 chartContainer = ref()
+let myChart
+let chartDom = ref()
+let option = ref(null)
+let convergeDate = ref([])
+let curvedata = ref("")
 let state = reactive({
-instance: null,
+  instance: null
 })
 const props = defineProps({
   echartdata: {
-  type: String,
-},
-curvedata:{
-  type: String,
-},
+    type: String
+  },
+  curvedata: {
+    type: String
+  }
 })
-  let emit = defineEmits(['',])
+let emit = defineEmits([""])
 onMounted(() => {
- chartContainer.value.style.width=window.innerWidth-220+'px';
- console.log( chartContainer.value.style)    ;   
-    myChart = echarts.init(chartContainer.value);
-    linechart();
-      window.addEventListener("resize",function() {
-       // chartContainer.value.style.width='';
-       //chartContainer?.value?.style.width = '';
-       if (chartContainer && chartContainer.value) {
-       // console.log( chartContainer.value.style)    ; 
-    chartContainer.value.style.width = '';
-
-}
-      myChart.resize();
+  myChart = echarts.init(chartContainer.value)
+  linechart()
+  myChart.resize();
 })
-     })
-  //初始化
-  const echatinit=()=>{
-  convergeDate.value=[];
-  series.value=[];
-  xdata.value=[];
+//初始化
+const echatinit = () => {
+  convergeDate.value = []
+  series.value = []
+  xdata.value = []
 }
 // 从websocket取数据
-const getsockechart=(data)=>{
-  curvedata.value=data;
-  series.value=[];
-  let rows=curvedata.value;
-  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',
+const getsockechart = (data) => {
+  curvedata.value = data
+  series.value = []
+  let rows = curvedata.value
+  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.setOption({
-      legend: {
-            data:vars.value
-        },
-      xAxis:{
-        data:  xdata.value,
-      },
-      series: series.value
-    });
-   // linechart();
- 
+  }
+  myChart.setOption({
+    legend: {
+      data: vars.value
+    },
+    xAxis: {
+      data: xdata.value
+    },
+    series: series.value
+  })
+  // linechart();
 }
 
-  // 数据转化废弃
- 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++){
-      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);
-   // 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
+// 数据转化废弃
+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++) {
+    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)
+  // 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)
-    }
-    myChart.setOption({
-      legend: {
-            data:vars.value
-        },
-      xAxis:{
-        data:  xdata.value,
-      },
-      series: series.value
-    });
-
   }
+  myChart.setOption({
+    legend: {
+      data: vars.value
+    },
+    xAxis: {
+      data: xdata.value
+    },
+    series: series.value
+  })
+}
 
-  const linechart= ()=>{
+const linechart = () => {
   //  let chartDom = document.getElementById('line');
   //  let  myChart= echarts.init(chartDom);
-option.value = {
-          tooltip: {
-          trigger: "axis",//item
-          backgroundColor: "rgba(0,0,0,.6)",
-          borderColor: "rgba(147, 235, 248, .8)",
-          textStyle: {
-            color: "#FFF",
-          },
-        },
-        legend: {
-            data:vars.value
-        },
-        grid: {
-            show: false,
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true
-        },
-        toolbox: {
-            feature: {
-            saveAsImage: {}
-            }
-        },
-        xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            data:  xdata.value,
-            axisLine: {//X轴线
-            show: true, 
-            lineStyle: {
-                color: '#000', // 线的颜色
-                width: 2, // 线宽
-                type: 'solid' // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
-            }
-            },
-            splitLine: {
-            show: true // 如果不需要网格线，可以设置为 false
+  option.value = {
+    tooltip: {
+      trigger: "axis", //item
+      backgroundColor: "rgba(0,0,0,.6)",
+      borderColor: "rgba(147, 235, 248, .8)",
+      textStyle: {
+        color: "#FFF"
+      }
+    },
+    legend: {
+      data: vars.value
+    },
+    grid: {
+      show: false,
+      left: "10%",
+      right: "4%",
+      bottom: "10%",
+      containLabel: true
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {}
+      }
+    },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      name: "迭代次数",
+      nameLocation: 'middle',
+      data: xdata.value,
+      axisLine: {
+        //X轴线
+        show: true,
+        lineStyle: {
+          color: "#000", // 线的颜色
+          width: 2, // 线宽
+          type: "solid" // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
         }
-        },
-        yAxis: {
-            type: 'value',
-            axisLine: {//Y轴线
-            show: true, 
-            lineStyle: {
-                color: '#000', // 线的颜色
-                width: 2, // 线宽
-                type: 'solid' // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
-            }
-},
-        },
-        series:series.value
-        };
-        option.value && myChart.setOption(option.value);
-        window.onresize = function() {
-            // 让图表自适应大小
-            myChart.resize();
-        };
-    }
-    // 监听数据变化，重绘图表
-  //   watch( myChart.value, () => {
-  //     console.log(11111)
-  //     window.onresize = function() {
-  //           // 让图表自适应大小
-  //           myChart.value.resize();
-  //       };
-  // });
-  //window.addEventListener('resize', handleResize);
+      },
+      splitLine: {
+        show: true // 如果不需要网格线，可以设置为 false
+      }
+    },
+    yAxis: {
+      type: "value",
+      name: "优化变量",
+      nameLocation: 'middle',
+      axisLine: {
+        //Y轴线
+        show: true,
+        lineStyle: {
+          color: "#000", // 线的颜色
+          width: 2, // 线宽
+          type: "solid" // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
+        }
+      },
+      axisTick: {
+        // Y轴刻度线
+        show:true,
+      }
+    },
+    series: series.value
+  }
+  option.value && myChart.setOption(option.value)
+  window.onresize = function () {
+    // 让图表自适应大小
+    myChart.resize()
+  }
+}
+// 监听数据变化，重绘图表
+//   watch( myChart.value, () => {
+//     console.log(11111)
+//     window.onresize = function() {
+//           // 让图表自适应大小
+//           myChart.value.resize();
+//       };
+// });
+//window.addEventListener('resize', handleResize);
 // 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>
+// 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{
-    position: absolute;
-    top: 37%;
-    width: 26px;
-    color: #000;
-    font-size: 14px;
-    font-weight: bold;
-    left: 5px
-  }
- .diedai{
+.selcal {
+  position: absolute;
+  top: 37%;
+  width: 26px;
+  color: #000;
+  font-size: 14px;
+  font-weight: bold;
+  left: 5px;
+}
+.diedai {
   color: #000;
   font-size: 14px;
   padding-bottom: 20px;
   font-weight: bold;
- }
-  </style>
+}
+</style>
  
   

src/views/echart/pie.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-
+      <!-- 饼图 -->
         <div class="echartitem">
             <div id="pie" style="width:1400px;height:390px;"></div>
         </div>

src/views/echart/process-monitor1.vue

@@ -0,0 +1,228 @@
+<template>
+  <!-- 曲线监控 -->
+  <div style="width: 100%; height: 100%">
+    <div class="echartitem" style="width: 100%; height: 100%">
+      <!-- <h3 class="selcal">{{ props.selval }}</h3> -->
+      <div
+        id="line"
+        ref="chartContainer"
+        style="width: 100%; height: 100%"
+      ></div>
+      
+    </div>
+  </div>
+</template>
+  <script setup>
+import { ref, onMounted, reactive, markRaw, inject, watch, nextTick } from "vue"
+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 chartContainer = ref()
+let myChart
+let chartDom = ref()
+let option = ref(null)
+let convergeDate = ref([])
+let curvedata = ref("")
+let state = reactive({
+  instance: null
+})
+const props = defineProps({
+  echartdata: {
+    type: String
+  },
+  curvedata: {
+    type: String
+  }
+})
+let emit = defineEmits([""])
+onMounted(() => {
+  myChart = echarts.init(chartContainer.value)
+  linechart()
+  myChart.resize()
+})
+//初始化
+const echatinit = () => {
+  convergeDate.value = []
+  series.value = []
+  xdata.value = []
+}
+// 从websocket取数据
+const getsockechart = (data) => {
+  curvedata.value = data
+  series.value = []
+  let rows = curvedata.value
+  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.setOption({
+    legend: {
+      data: vars.value
+    },
+    xAxis: {
+      data: xdata.value
+    },
+    series: series.value
+  })
+  // linechart();
+}
+
+// 数据转化废弃
+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++) {
+    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)
+  // 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)
+  }
+  myChart.setOption({
+    legend: {
+      data: vars.value
+    },
+    xAxis: {
+      data: xdata.value
+    },
+    series: series.value
+  })
+}
+
+const linechart = () => {
+  //  let chartDom = document.getElementById('line');
+  //  let  myChart= echarts.init(chartDom);
+  option.value = {
+    tooltip: {
+      trigger: "axis", //item
+      backgroundColor: "rgba(0,0,0,.6)",
+      borderColor: "rgba(147, 235, 248, .8)",
+      textStyle: {
+        color: "#FFF"
+      }
+    },
+    legend: {
+      data: vars.value
+    },
+    grid: {
+      show: false,
+      left: "13%",
+      right: "4%",
+      bottom: "10%",
+      containLabel: true
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {}
+      }
+    },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      data: xdata.value,
+      axisLine: {
+        //X轴线
+        show: true,
+        lineStyle: {
+          color: "#000", // 线的颜色
+          width: 2, // 线宽
+          type: "solid" // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
+        }
+      },
+      splitLine: {
+        show: true // 如果不需要网格线，可以设置为 false
+      }
+    },
+    yAxis: {
+      type: "value",
+      axisLine: {
+        //Y轴线
+        show: true,
+        lineStyle: {
+          color: "#000", // 线的颜色
+          width: 2, // 线宽
+          type: "solid" // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
+        }
+      },
+      axisTick: {
+        // Y轴刻度线
+        show:true,
+      }
+    },
+    series: series.value
+  }
+  option.value && myChart.setOption(option.value)
+  window.onresize = function () {
+    // 让图表自适应大小
+    myChart.resize()
+  }
+}
+// 监听数据变化，重绘图表
+//   watch( myChart.value, () => {
+//     console.log(11111)
+//     window.onresize = function() {
+//           // 让图表自适应大小
+//           myChart.value.resize();
+//       };
+// });
+//window.addEventListener('resize', handleResize);
+// 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 {
+  position: absolute;
+  top: 37%;
+  width: 26px;
+  color: #000;
+  font-size: 14px;
+  font-weight: bold;
+  left: 5px;
+}
+
+</style>
+ 
+  

src/views/echart/process-monitor2.vue

@@ -0,0 +1,228 @@
+<template>
+  <!-- 曲线监控 -->
+  <div style="width: 100%; height: 100%">
+    <div class="echartitem" style="width: 100%; height: 100%">
+      <!-- <h3 class="selcal">{{ props.selval }}</h3> -->
+      <div
+        id="line"
+        ref="chartContainer"
+        style="width: 100%; height: 100%"
+      ></div>
+      
+    </div>
+  </div>
+</template>
+  <script setup>
+import { ref, onMounted, reactive, markRaw, inject, watch, nextTick } from "vue"
+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 chartContainer = ref()
+let myChart
+let chartDom = ref()
+let option = ref(null)
+let convergeDate = ref([])
+let curvedata = ref("")
+let state = reactive({
+  instance: null
+})
+const props = defineProps({
+  echartdata: {
+    type: String
+  },
+  curvedata: {
+    type: String
+  }
+})
+let emit = defineEmits([""])
+onMounted(() => {
+  myChart = echarts.init(chartContainer.value)
+  linechart()
+  myChart.resize()
+})
+//初始化
+const echatinit = () => {
+  convergeDate.value = []
+  series.value = []
+  xdata.value = []
+}
+// 从websocket取数据
+const getsockechart = (data) => {
+  curvedata.value = data
+  series.value = []
+  let rows = curvedata.value
+  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.setOption({
+    legend: {
+      data: vars.value
+    },
+    xAxis: {
+      data: xdata.value
+    },
+    series: series.value
+  })
+  // linechart();
+}
+
+// 数据转化废弃
+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++) {
+    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)
+  // 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)
+  }
+  myChart.setOption({
+    legend: {
+      data: vars.value
+    },
+    xAxis: {
+      data: xdata.value
+    },
+    series: series.value
+  })
+}
+
+const linechart = () => {
+  //  let chartDom = document.getElementById('line');
+  //  let  myChart= echarts.init(chartDom);
+  option.value = {
+    tooltip: {
+      trigger: "axis", //item
+      backgroundColor: "rgba(0,0,0,.6)",
+      borderColor: "rgba(147, 235, 248, .8)",
+      textStyle: {
+        color: "#FFF"
+      }
+    },
+    legend: {
+      data: vars.value
+    },
+    grid: {
+      show: false,
+      left: "13%",
+      right: "4%",
+      bottom: "10%",
+      containLabel: true
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {}
+      }
+    },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      data: xdata.value,
+      axisLine: {
+        //X轴线
+        show: true,
+        lineStyle: {
+          color: "#000", // 线的颜色
+          width: 2, // 线宽
+          type: "solid" // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
+        }
+      },
+      splitLine: {
+        show: true // 如果不需要网格线，可以设置为 false
+      }
+    },
+    yAxis: {
+      type: "value",
+      axisLine: {
+        //Y轴线
+        show: true,
+        lineStyle: {
+          color: "#000", // 线的颜色
+          width: 2, // 线宽
+          type: "solid" // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
+        }
+      },
+      axisTick: {
+        // Y轴刻度线
+        show:true,
+      }
+    },
+    series: series.value
+  }
+  option.value && myChart.setOption(option.value)
+  window.onresize = function () {
+    // 让图表自适应大小
+    myChart.resize()
+  }
+}
+// 监听数据变化，重绘图表
+//   watch( myChart.value, () => {
+//     console.log(11111)
+//     window.onresize = function() {
+//           // 让图表自适应大小
+//           myChart.value.resize();
+//       };
+// });
+//window.addEventListener('resize', handleResize);
+// 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 {
+  position: absolute;
+  top: 37%;
+  width: 26px;
+  color: #000;
+  font-size: 14px;
+  font-weight: bold;
+  left: 5px;
+}
+
+</style>
+ 
+  

src/views/home.vue

@@ -1671,8 +1671,9 @@
                 </div>
                 <div class="maxh221">
                   <!-- 中间部分 -->
-                  <div class="conter_mian classtable " v-show="jiankong">
-                    <el-table :data="tableDatalieb" border style="display: flex; flex: 1; overflow: auto;" height="500">
+                   <!-- 列表监控 -->
+                  <div class="conter_mian classtable " v-show="jiankong" style="width:100%; height: 100%;">
+                    <el-table :data="tableDatalieb" border style="display: flex; flex: 1; overflow: auto; height: 100%;" >
                       <el-table-column type="index" width="50"></el-table-column>
                       <el-table-column v-for="(header, index) in tableHeaders" :key="index" :prop="header.prop"
                         :label="header.label">
@@ -1680,7 +1681,7 @@
                     </el-table>
                   </div>
                   <!--   曲线监控 -->
-                  <div class="conter_mian classtable " v-show="echartshow">
+                  <div class="conter_mian classtable " v-if="echartshow" style="width:100%; height: 100%;">
                     <!-- <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">
@@ -1690,9 +1691,13 @@
                     <optmonitor ref="optmonitor1" :echartdata="echartdata" :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="conter_mian classtable conter_flex" v-if="echartshow2" style="width:100%; height: 100%;">
+                    <div class="echart_left  ech">
+                      <processMonitor1 ref="processMonitor1ref" :echartdata="echartdata" :selval="quval" :curvedata="curvedata"/>
+                    </div>
+                    <div class="echart_right ech">
+                      <processMonitor2 ref="processMonitor2ref" :echartdata="echartdata" :selval="quval" :curvedata="curvedata"/>
+                    </div>
                   </div>
                   <!-- 可视化开始 -->
                   <div class="conter_mian classtable echartcont" v-show="echartzongshow">
@@ -1971,6 +1976,8 @@ import xuek10 from '@/assets/flowimg/xuek10.png'
 import xuek11 from '@/assets/flowimg/xuek11.png'
 import xuek12 from '@/assets/flowimg/xuek12.png'
 import optmonitor from './echart/optimize_monitor.vue'
+import processMonitor1 from "./echart/process-monitor1.vue"
+import processMonitor2 from "./echart/process-monitor2.vue"
 import echartindex from './echart/index.vue'
 import sixtop from './echart/six_top.vue'
 import sixbottom from './echart/six_bottom.vue'
@@ -2041,6 +2048,7 @@ let progressshow = ref(false);
 let flowshow = ref(true);
 let jiankong = ref(false);
 let echartshow = ref(false);
+let echartshow2 = ref(false);
 let areashow = ref(false);
 let echartLineshow = ref(false);
 let BarChartshow = ref(false);
@@ -2069,6 +2077,8 @@ let youhua = ref({
 })
 let echartdata = ref(null);
 let optmonitor1 = ref();
+let processMonitor1ref = ref()
+let processMonitor2ref = ref()
 let arearef = ref();
 let tableHeaders = ref([
   // { label: '日期', prop: 'date' },
@@ -2582,7 +2592,7 @@ const init = () => {
   console.log(route.query.pid);
 }
 const handleClick = (tab, event) => {
-  console.log(tab.props.name);
+  console.log('标签页：',tab.props.name);
 
   tabactive.value = tab.props.name;
   if (tabactive.value == 'User') {
@@ -2600,6 +2610,8 @@ const handleClick = (tab, event) => {
   ifjiankong();
 
   dialogcolse()
+
+  // 可视化标签页
   if (tabactive.value == 'Config') {
     echartzongshow.value = true;
     curveLine();
@@ -2961,6 +2973,8 @@ const dialogbolen = () => {
       break;
     case "开始":
       optmonitor1.value.echatinit();
+      processMonitor1ref.value.echatinit();
+      processMonitor1ref.value.echatinit();
       runok();
       break;
     case "列表监控":
@@ -2969,6 +2983,10 @@ const dialogbolen = () => {
     case "曲线监控":
       ifjiankong()
       curveLine();
+      break;
+    case "过程监控":
+      ifjiankong()
+      break;
     case "列表":
       echatsfunc();
       dialog.value.listdialog = true;
@@ -3100,12 +3118,18 @@ const ifjiankong = () => {
   } else {
     jiankong.value = false;
   }
-  if (activeName.value == 'Three' && tabactive.value == '曲线监控' || activeName.value == 'Three' && tabactive.value == '曲线监控') {
+  if (activeName.value == 'Three' && tabactive.value == '曲线监控' ) {
     echartshow.value = true;
 
   } else {
     echartshow.value = false;
   }
+  if (activeName.value == 'Three' && tabactive.value == '过程监控' ) {
+    echartshow2.value = true;
+
+  } else {
+    echartshow2.value = false;
+  }
 }
 //  求解
 const runok = () => {
@@ -3781,6 +3805,8 @@ const logsget = () => {
         let echarr = [];
         echarr.push(results[i])
         optmonitor1.value.getsockechart(echarr);
+        processMonitor1ref.value.getsockechart(echarr);
+        processMonitor2ref.value.getsockechart(echarr);
         // arearef.value.getsockechart(echarr);
         // bargraphref.value.getsockechart(echarr);
         // echartLineref.value.getsockechart(echarr);
@@ -3854,12 +3880,14 @@ const websocketonmessage = (res) => {
     let vals = (JSON.parse(res.data).vals).split(" ");
     tablefun(vals);
     optmonitor1.value.getsockechart(arrobj.value);
-        arearef.value.getsockechart(arrobj.value);
-        bargraphref.value.getsockechart(arrobj.value);
-        echartLineref.value.getsockechart(arrobj.value);
-        BarChartref.value.getsockechart(arrobj.value);
-        radarref.value.getsockechart(arrobj.value);
-        scatterref.value.getsockechart(arrobj.value);
+    processMonitor1ref.getsockechart(arrobj.value);
+    processMonitor2ref.getsockechart(arrobj.value);
+    arearef.value.getsockechart(arrobj.value);
+    bargraphref.value.getsockechart(arrobj.value);
+    echartLineref.value.getsockechart(arrobj.value);
+    BarChartref.value.getsockechart(arrobj.value);
+    radarref.value.getsockechart(arrobj.value);
+    scatterref.value.getsockechart(arrobj.value);
   } else {
     if (res.data.indexOf('——成功') !== -1) {
 

src/views/titlecomponent/Cloudsecond.vue

@@ -43,18 +43,18 @@
     <!-- 域 -->
     <div v-show="activesd.domain">
       <div>
-        <el-row style="margin-bottom: 10px;">
+        <el-row style="margin-bottom: 10px;" :gutter="20">
           <el-col v-for="(item,index) in domainbtnbox1" :key="index" :span="8">
-            <el-button>{{ item }}</el-button>
+            <el-button style="width: 100%;">{{ item }}</el-button>
           </el-col>
         </el-row>
-        <el-row style="margin-bottom: 10px;">
+        <el-row style="margin-bottom: 10px;" :gutter="20">
           <el-col v-for="(item,index) in domainbtnbox2" :key="index" :span="8">
-            <el-button>{{ item }}</el-button>
+            <el-button style="width: 100%;">{{ item }}</el-button>
           </el-col>
         </el-row>
       </div>
-      <div class="classtable">
+      <div class="classtable tabledomain">
         <el-table :data="tableDatadomain" style="width: 100%" border="true">
             <el-table-column prop="rowname" label="域名称"  />
             <el-table-column
@@ -75,21 +75,21 @@
       <div>
         <el-collapse v-model="activeNames">
           <el-collapse-item title="标量" name="1">
-            <el-form>
-              <el-form-item label="名称：" label-width="formLabelWidth1">
+            <el-form label-position="left">
+              <el-form-item label="名称：" :label-width="formLabelWidth1" >
                 <el-input></el-input>
               </el-form-item>
-              <el-form-item label="类型：" label-width="formLabelWidth1">
+              <el-form-item label="类型：" :label-width="formLabelWidth1">
                 <el-input></el-input>
               </el-form-item>
-              <el-form-item label="标量名：" label-width="formLabelWidth1">
+              <el-form-item label="标量名：" :label-width="formLabelWidth1">
                 <el-select v-model="scalarname">
                   <el-option 
                   v-for=" item in scalarnameoptions" :key="item.value" :label="item.label" :value="item.value"
                   />
                 </el-select>
               </el-form-item>
-              <el-form-item label="" label-width="formLabelWidth1">
+              <el-form-item label="" :label-width="formLabelWidth1">
                 <el-row>
                   <el-col :span="12">
                     <el-checkbox label="极值"></el-checkbox>
@@ -103,15 +103,16 @@
           </el-collapse-item>
 
           <el-collapse-item title="云图间隔" name="2">
-            <el-form>
-              <el-form-item label="名称：" label-width="formLabelWidth1">
+            <el-form label-position="left">
+              <el-form-item label="名称：" :label-width="formLabelWidth1">
                 <el-input ></el-input>
               </el-form-item>
-              <el-form-item label="" label-width="formLabelWidth1">
+              <el-form-item label=" " :label-width="formLabelWidth1">
                 <el-row>
-                  <el-col :span="12">
-                  </el-col>
-                  <el-col :span="12">
+                  <!-- <el-col :span="16">
+                    <div></div>
+                  </el-col> -->
+                  <el-col :span="24">
                     <el-checkbox label="平滑云图"></el-checkbox>
                   </el-col>
                 </el-row>
@@ -119,36 +120,36 @@
             </el-form>
           </el-collapse-item>
 
-          <el-collapse-item title="数据范围">
-            <el-form>
-              <el-form-item label="数据范围类型：" label-width="formLabelWidth1">
+          <el-collapse-item title="数据范围" name="3">
+            <el-form label-position="left">
+              <el-form-item label="数据范围类型：" :label-width="120">
                 <el-select v-model="dataAreaType">
                   <el-option 
                   v-for=" item in dataAreaTypeoptions" :key="item.value" :label="item.label" :value="item.value"
                   />
                 </el-select>
               </el-form-item>
-              <el-form-item label="最大值：" label-width="formLabelWidth1">
+              <el-form-item label="最大值：" :label-width="formLabelWidth1">
                 <el-input ></el-input>
               </el-form-item>
-              <el-form-item label="最小值：" label-width="formLabelWidth1">
+              <el-form-item label="最小值：" :label-width="formLabelWidth1">
                 <el-input ></el-input>
               </el-form-item>
             </el-form>
           </el-collapse-item>
 
-          <el-collapse-item title="色卡颜色范围">
-            <el-form>
-              <el-form-item label="最大值：" label-width="formLabelWidth1">
-                <el-row>
-                  <el-col :span="20"><el-input ></el-input></el-col>
-                  <el-col :span="4"><el-color-picker v-model="color1" /></el-col>
+          <el-collapse-item title="色卡颜色范围" name="4">
+            <el-form label-position="left">
+              <el-form-item label="最大值：" :label-width="formLabelWidth1">
+                <el-row style="width: 100%;">
+                  <el-col :span="22"><el-input ></el-input></el-col>
+                  <el-col :span="2"><el-color-picker v-model="color1" /></el-col>
                 </el-row>
               </el-form-item>
-              <el-form-item label="最小值：" label-width="formLabelWidth1">
-                <el-row>
-                  <el-col :span="20"><el-input ></el-input></el-col>
-                  <el-col :span="4"><el-color-picker v-model="color1" /></el-col>
+              <el-form-item label="最小值：" :label-width="formLabelWidth1">
+                <el-row style="width: 100%;">
+                  <el-col :span="22"><el-input ></el-input></el-col>
+                  <el-col :span="2"><el-color-picker v-model="color1" /></el-col>
                 </el-row>
               </el-form-item>
             </el-form>
@@ -158,11 +159,11 @@
     </div>
     <!-- 色卡 -->
     <div v-show="activesd.colorchart">
-      <el-form>
-        <el-form-item>
+      <el-form label-position="left">
+        <el-form-item label="" :label-width="formLabelWidth1">
           <el-checkbox label="显示色卡"></el-checkbox>
         </el-form-item>
-        <el-form-item label="朝向：" label-width="formLabelWidth1">
+        <el-form-item label="朝向：" :label-width="formLabelWidth1">
           <el-select v-model="orientation">
             <el-option 
             v-for=" item in orientationoptions" :key="item.value" :label="item.label" :value="item.value"
@@ -172,12 +173,12 @@
 
         <el-row :gutter="10">
           <el-col :span="10">
-            <el-form-item label="X(0-1):">
+            <el-form-item label="X(0-1):" :label-width="formLabelWidth2">
               <el-input></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="10">
-            <el-form-item label="Y(0-1):">
+            <el-form-item label="Y(0-1):" :label-width="formLabelWidth2">
               <el-input></el-input>
             </el-form-item>
           </el-col>
@@ -186,14 +187,14 @@
           </el-col>
         </el-row>
 
-        <el-row :gutter="5">
+        <el-row :gutter="10">
           <el-col :span="10">
-            <el-form-item label="宽度(0-1):">
+            <el-form-item label="宽度(0-1):" :label-width="formLabelWidth2">
               <el-input></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="10">
-            <el-form-item label="高度(0-1):">
+            <el-form-item label="高度(0-1):" :label-width="formLabelWidth2">
               <el-input></el-input>
             </el-form-item>
           </el-col>
@@ -202,12 +203,12 @@
           </el-col>
         </el-row>
 
-        <el-form-item label="跳过层级：" label-width="formLabelWidth1">
+        <el-form-item label="跳过层级：" :label-width="formLabelWidth1">
           <el-input type="number"></el-input>
         </el-form-item>
 
-        <el-form-item label="字体：" label-width="formLabelWidth1">
-          <el-row>
+        <el-form-item label="字体：" :label-width="formLabelWidth1">
+          <el-row style="width: 100%;" gutter="10">
             <el-col :span="18">
               <el-select v-model="font">
                 <el-option 
@@ -224,7 +225,7 @@
           </el-row>
         </el-form-item>
 
-        <el-form-item label="字体大小：" label-width="formLabelWidth1">
+        <el-form-item label="字体大小：" :label-width="formLabelWidth1">
           <el-select v-model="fontsize">
             <el-option 
             v-for=" item in fontsizeoptions" :key="item.value" :label="item.label" :value="item.value"
@@ -232,7 +233,7 @@
           </el-select>
         </el-form-item>
 
-        <el-form-item label="数据格式：" label-width="formLabelWidth1">
+        <el-form-item label="数据格式：" :label-width="formLabelWidth1">
           <el-select v-model="dataformat">
             <el-option 
             v-for=" item in dataformatoptions" :key="item.value" :label="item.label" :value="item.value"
@@ -240,15 +241,15 @@
           </el-select>
         </el-form-item>
 
-        <el-form-item label="精度：" label-width="formLabelWidth1">
+        <el-form-item label="精度：" :label-width="formLabelWidth1">
           <el-input type="number"></el-input>
         </el-form-item>
 
-        <el-form-item>
+        <el-form-item label="" :label-width="formLabelWidth1">
           <el-checkbox label="显示标题："></el-checkbox>
         </el-form-item>
 
-        <el-form-item label="标题文本：" label-width="formLabelWidth1">
+        <el-form-item label="标题文本：" :label-width="formLabelWidth1">
           <el-row>
             <el-col :span="12">
               <el-select v-model="texttitle">
@@ -263,9 +264,9 @@
           </el-row>
         </el-form-item>
 
-        <el-form-item label="标题字体：" label-width="formLabelWidth1">
-          <el-row>
-            <el-col :span="18">
+        <el-form-item label="标题字体：" :label-width="formLabelWidth1">
+          <el-row style="width: 100%;" gutter="10">
+            <el-col :span="18" >
               <el-select v-model="titlefont">
                 <el-option 
                 v-for=" item in titlefontoptions" :key="item.value" :label="item.label" :value="item.value"
@@ -281,7 +282,7 @@
           </el-row>
         </el-form-item>
 
-        <el-form-item label="字体大小：" label-width="formLabelWidth1">
+        <el-form-item label="字体大小：" :label-width="formLabelWidth1">
           <el-select v-model="fontsize">
             <el-option 
             v-for=" item in fontsizeoptions" :key="item.value" :label="item.label" :value="item.value"
@@ -295,14 +296,14 @@
     <div v-show="activesd.isoline">
       <el-collapse v-model="activeNames2">
         <el-collapse-item title="标量" name="1">
-          <el-form>
-              <el-form-item label="名称：" label-width="formLabelWidth1">
+          <el-form label-position="left">
+              <el-form-item label="名称：" :label-width="formLabelWidth1">
                 <el-input ></el-input>
               </el-form-item>
-              <el-form-item label="类型：" label-width="formLabelWidth1">
+              <el-form-item label="类型：" :label-width="formLabelWidth1">
                 <el-input ></el-input>
               </el-form-item>
-              <el-form-item label="标量名：" label-width="formLabelWidth1">
+              <el-form-item label="标量名：" :label-width="formLabelWidth1">
                 <el-select v-model="scalarname2">
                   <el-option 
                   v-for=" item in scalarname2options" :key="item.value" :label="item.label" :value="item.value"
@@ -313,19 +314,19 @@
         </el-collapse-item>
 
         <el-collapse-item title="云图间隔：" name="2">
-          <el-form>
-            <el-form-item label="层级：" label-width="formLabelWidth1">
+          <el-form label-position="left">
+            <el-form-item label="层级：" :label-width="formLabelWidth1">
               <el-input ></el-input>
             </el-form-item>
           </el-form>
         </el-collapse-item>
 
         <el-collapse-item title="数据范围：" name="3">
-          <el-form>
-            <el-form-item label="最大值：" label-width="formLabelWidth1">
+          <el-form label-position="left">
+            <el-form-item label="最大值：" :label-width="formLabelWidth1">
               <el-input ></el-input>
             </el-form-item>
-            <el-form-item label="最小值：" label-width="formLabelWidth1">
+            <el-form-item label="最小值：" :label-width="formLabelWidth1">
               <el-input ></el-input>
             </el-form-item>
           </el-form>
@@ -344,6 +345,7 @@ import fileUploads from "../components/fileuploads.vue";
 const meshFileImgSrc = new URL("@/assets/img/open.png", import.meta.url).href;
 
 let formLabelWidth1 = ref(100)
+let formLabelWidth2 = ref(100)
 
 const props = defineProps({
   activesd: {
@@ -429,6 +431,10 @@ let scalarname2options = ref([
   {label:'1',value:'1'}
 ])
 
+let activeNames = ref(['1','2','3','4'])
+let activeNames2 = ref(['1','2','3'])
+
+
 </script>
 
 <style>
@@ -436,4 +442,20 @@ let scalarname2options = ref([
   font-size: 16px;
   font-family: 'Source Sans-Regular';
 }
+
+.tabledomain {
+  margin-top: 20px;
+  
+}
+
+.cloudsecond .el-form-item__label {
+  font-size: 14px;
+  color: #333333;
+  font-family: 'Source Sans-Regular' !important;
+}
+
+.el-collapse-item__header {
+  font-size: 14px;
+}
+
 </style>