10.22

src/views/echart/BarChart.vue

@@ -0,0 +1,117 @@
+<template>
+    <div>
+
+        <div class="echartitem">
+            <div id="bargraphbar" style="width:1400px;height:500px;"></div>
+        </div>
+    </div>
+</template>
+<script setup>
+import { ref, onMounted, reactive, } 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'
+import { graphic } from "echarts/core"
+let myChart;
+let vars = ref([]);
+let vals = ref([]);
+let series = ref([]);
+let xdata = ref([]);
+let chartContainer = ref(null);
+let chartDom = ref()
+let option = ref(null);
+let convergeDate = ref([]);
+let curvedata = ref('')
+let state = reactive({
+    instance: null,
+})
+const getData = () => {
+};
+onMounted(() => {
+    var chartDom = document.getElementById('bargraphbar');
+    myChart = echarts.init(chartDom);
+    setOptionfun()
+})
+//初始化
+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: 'bar',
+            data: firstColumn
+        }
+        series.value.push(item)
+    }
+    myChart.setOption({
+        legend: {
+            data: vars.value
+        },
+        yAxis: {
+            data: xdata.value,
+        },
+        series: series.value
+    });
+}
+const setOptionfun = () => {
+    option.value = {
+        title: {
+            text: '横条图'
+        },
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            }
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        legend: {
+            data: vars.value
+        },
+        toolbox: {
+            feature: {
+                saveAsImage: {}
+            }
+        },
+
+        xAxis: {
+            type: 'value',
+        },
+        yAxis: {
+            type: 'category',
+            data: xdata.value
+
+        },
+        series: series.value
+    };
+
+    option.value && myChart.setOption(option.value);
+}
+defineExpose({ getsockechart, echatinit });
+</script>
+<style lang="scss" scoped></style>
+  
+  

src/views/echart/area.vue

@@ -0,0 +1,146 @@
+<template>
+  <div>
+    
+  <div class="echartitem">
+    <div id="area"  style="width:1200px;height:500px;"></div>
+  </div>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted, reactive, } 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'
+import {graphic} from "echarts/core"
+let emit = defineEmits(['',])
+let myChart;
+let vars=ref([]);
+let vals=ref([]);
+let series=ref([]);
+let xdata=ref([]);
+let chartContainer=ref(null);
+let chartDom=ref()
+let option=ref(null);
+let convergeDate=ref([]);
+let curvedata=ref('')  
+let state = reactive({
+instance: null,
+})
+const getData = () => {
+};
+onMounted(() => {
+var chartDom = document.getElementById('area');
+ myChart = echarts.init(chartDom);  
+ setOptionfun()
+})
+  //初始化
+  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',
+      areaStyle: {},
+      emphasis: {
+        focus: 'series'
+      },
+      data:firstColumn
+    }
+    series.value.push(item)
+    }
+    myChart.setOption({
+      legend: {
+            data:vars.value
+        },
+      xAxis:{
+        data:  xdata.value,
+      },
+      series: series.value
+    });
+}
+const setOptionfun=()=>{
+    option.value = {
+  title: {
+    text: '面积图'
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  legend: {
+    data:vars.value
+  },
+  toolbox: {
+    feature: {
+      saveAsImage: {}
+    }
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  xAxis: [
+    {
+      type: 'category',
+      boundaryGap: false,
+      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);
+}
+defineExpose({getsockechart,echatinit});
+</script>
+<style lang="scss" scoped>
+
+</style>
+

src/views/echart/bargraph.vue

@@ -0,0 +1,116 @@
+<template>
+    <div>
+
+        <div class="echartitem">
+            <div id="bargraph" style="width:1400px;height:500px;"></div>
+        </div>
+    </div>
+</template>
+<script setup>
+import { ref, onMounted, reactive, } 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'
+import { graphic } from "echarts/core"
+let myChart;
+let vars = ref([]);
+let vals = ref([]);
+let series = ref([]);
+let xdata = ref([]);
+let chartContainer = ref(null);
+let chartDom = ref()
+let option = ref(null);
+let convergeDate = ref([]);
+let curvedata = ref('')
+let state = reactive({
+    instance: null,
+})
+const getData = () => {
+};
+onMounted(() => {
+    var chartDom = document.getElementById('bargraph');
+    myChart = echarts.init(chartDom);
+    setOptionfun()
+})
+//初始化
+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: 'bar',
+            data: firstColumn
+        }
+        series.value.push(item)
+    }
+    myChart.setOption({
+        legend: {
+            data: vars.value
+        },
+        xAxis: {
+            data: xdata.value,
+        },
+        series: series.value
+    });
+}
+const setOptionfun = () => {
+    option.value = {
+        title: {
+            text: '柱状图'
+        },
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            }
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        legend: {
+            data: vars.value
+        },
+        toolbox: {
+            feature: {
+                saveAsImage: {}
+            }
+        },
+
+        xAxis: {
+            type: 'category',
+            data: xdata.value
+        },
+        yAxis: {
+            type: 'value'
+        },
+        series: series.value
+    };
+
+    option.value && myChart.setOption(option.value);
+}
+defineExpose({ getsockechart, echatinit });
+</script>
+<style lang="scss" scoped></style>
+  
+  

src/views/echart/echartLine.vue

@@ -0,0 +1,189 @@
+<template>
+
+    <!-- 折线图 -->
+        <div>
+        <div class="echartitem">
+          <!-- <h3 class="selcal">{{ props.selval }}</h3> -->
+            <div id="line2"  ref="chartContainer"  style="width:100%;height:500px;"></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(null);
+    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,
+    },
+    })
+    onMounted(() => {
+     chartContainer.value.style.width=window.innerWidth-220+'px';       
+        myChart = echarts.init(chartContainer.value);
+        linechart();
+          window.addEventListener("resize",function() {
+            chartContainer.value.style.width='';
+          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
+        });
+
+     
+    } 
+      const linechart= ()=>{
+    option.value = {
+      title: {
+    text: '折线图'
+  },
+              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
+            }
+            },
+            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);
+    // 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,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{
+      color: #000;
+      font-size: 14px;
+      padding-bottom: 20px;
+      font-weight: bold;
+     }
+      </style>
+     
+      

src/views/echart/pie.vue

@@ -0,0 +1,117 @@
+<template>
+    <div>
+
+        <div class="echartitem">
+            <div id="pie" style="width:1400px;height:500px;"></div>
+        </div>
+    </div>
+</template>
+<script setup>
+import { ref, onMounted, reactive, } 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'
+import { graphic } from "echarts/core"
+let myChart;
+let vars = ref([]);
+let vals = ref([]);
+let series = ref([]);
+let xdata = ref([]);
+let chartContainer = ref(null);
+let chartDom = ref()
+let option = ref(null);
+let convergeDate = ref([]);
+let curvedata = ref('')
+let state = reactive({
+    instance: null,
+})
+const getData = () => {
+};
+onMounted(() => {
+    var chartDom = document.getElementById('pie');
+    myChart = echarts.init(chartDom);
+    setOptionfun()
+})
+//初始化
+const echatinit = () => {
+    convergeDate.value = [];
+    series.value = [];
+    xdata.value = [];
+}
+// 从websocket取数据
+const getsockechart = (data) => {
+    console.log(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: 'bar',
+            data: firstColumn
+        }
+        series.value.push(item)
+    }
+    myChart.setOption({
+        legend: {
+            data: vars.value
+        },
+        xAxis: {
+            data: xdata.value,
+        },
+        series: series.value
+    });
+}
+const setOptionfun = () => {
+    option.value = {
+        title: {
+            text: '饼图'
+        },
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            }
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        legend: {
+            data: vars.value
+        },
+        toolbox: {
+            feature: {
+                saveAsImage: {}
+            }
+        },
+
+        xAxis: {
+            type: 'category',
+            data: xdata.value
+        },
+        yAxis: {
+            type: 'value'
+        },
+        series: series.value
+    };
+
+    option.value && myChart.setOption(option.value);
+}
+defineExpose({ getsockechart, echatinit });
+</script>
+<style lang="scss" scoped></style>
+  
+  

src/views/echart/radar.vue

@@ -0,0 +1,128 @@
+<template>
+    <div>
+
+        <div class="echartitem">
+            <div id="radar" style="width:1400px;height:500px;"></div>
+        </div>
+    </div>
+</template>
+<script setup>
+import { ref, onMounted, reactive, } 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'
+import { graphic } from "echarts/core"
+let myChart;
+let vars = ref([]);
+let vals = ref([]);
+let series = ref([]);
+let xdata = ref([]);
+let chartContainer = ref(null);
+let chartDom = ref()
+let option = ref(null);
+let convergeDate = ref([]);
+let curvedata = ref('')
+let radar;
+let max1;
+let datain=ref([]);
+let state = reactive({
+    instance: null,
+})
+const getData = () => {
+};
+onMounted(() => {
+    var chartDom = document.getElementById('radar');
+    myChart = echarts.init(chartDom);
+    setOptionfun()
+})
+//初始化
+const echatinit = () => {
+    convergeDate.value = [];
+    series.value = [];
+    xdata.value = [];
+    datain.value=[];
+}
+// 从websocket取数据
+const getsockechart = (data) => {
+    curvedata.value = data;
+    series.value = [];
+   datain.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);
+
+    }
+    console.log(xdata.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: 'radar',
+            areaStyle: {},
+            data: [
+                {
+                value:firstColumn,
+                name:vars.value[j]
+                },
+    ]
+ 
+            }
+            max1= Math.max(firstColumn[0])
+        series.value.push(item)
+    }
+        
+    console.log( max1);
+   
+    for (let k = 0; k < xdata.value.length; k++) { 
+        let indicatorobj={
+        name:k, max:max1,
+    }
+     datain.value.push(indicatorobj);
+    }
+    console.log(vars.value);
+    console.log(series.value);
+    myChart.setOption({
+        legend: {
+            left: 'center',
+            data: vars.value
+        },
+        radar: {
+        indicator: datain.value
+    },
+        series: series.value
+    });
+}
+const setOptionfun = () => {
+    option.value = {
+  title: {
+    text: '雷达图'
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+
+  radar: {
+    indicator: datain.value
+  },
+  series: series.value
+};
+
+option.value && myChart.setOption(option.value);
+}
+defineExpose({ getsockechart, echatinit });
+</script>
+<style lang="scss" scoped></style>
+  
+  

src/views/home.vue

@@ -1028,25 +1028,6 @@
                 <div  class="maxh221">
              <!-- 中间部分 -->
              <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"  />
-                <el-table-column prop="x2" label="x2"  />
-                <el-table-column prop="x3" label="x3" />
-                <el-table-column prop="x4" label="x4"  />
-                <el-table-column prop="x5" label="x5"  />
-                <el-table-column prop="x6" label="x6" />
-                <el-table-column prop="x7" label="x7"  />
-                <el-table-column prop="x8" label="x8"  />
-                <el-table-column prop="x9" label="x9" />
-                <el-table-column prop="x10" label="x10"  />
-                <el-table-column prop="x11" label="x11"  />
-                <el-table-column prop="x12" label="x12" />
-                <el-table-column prop="x13" label="x13"  />
-                <el-table-column prop="x14" label="x14"  />
-                <el-table-column prop="x15" label="x15"  />
-                <el-table-column prop="cd" label="cd/cl"  />
-                </el-table>  -->
                 <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
@@ -1056,7 +1037,6 @@
                     :label="header.label">
                   </el-table-column>
                 </el-table>
-                <!-- <div @click="tablefun()">点击</div> -->
              </div>
              <!--   曲线监控 -->
              <div  class="conter_mian classtable "  v-show="echartshow">
@@ -1073,6 +1053,15 @@
               <!-- <div class="echart_left  ech">left</div>
               <div class="echart_right ech">right</div> -->
             </div>
+            <!-- 可视化开始 -->
+            <div  class="conter_mian classtable" v-show="echartzongshow">
+            <echartarea ref="arearef" v-show="areashow"/>
+            <bargraph ref="bargraphref" v-show="bargraphshow"/>
+            <echartLine ref="echartLineref" v-show="echartLineshow"/>
+            <BarChart ref="BarChartref" v-show="BarChartshow"/>
+            <radar ref="radarref" v-show="radarshow"/>
+          </div>
+            <!-- 可视化结束 -->
                 <!-- 右侧边栏开始 -->
                 <!-- 结束 -->
               </div>
@@ -1349,9 +1338,25 @@
   import sixchine from './demo/chine.vue'
   import vuefindex from './vuetree/index.vue'
   import Sidebar from './vuetree/Sidebar.vue'
+  // 可视化echart
+  import echartarea from './echart/area.vue'
+  import bargraph from './echart/bargraph.vue'
+  import echartLine from './echart/echartLine.vue'
+  import BarChart from './echart/BarChart.vue'
+  import radar from './echart/radar.vue'
   let flowshow=ref(true);
   let jiankong=ref(false);
   let echartshow=ref(false);
+  let areashow=ref(false);
+  let echartLineshow=ref(false);
+  let BarChartshow=ref(false);
+  let bargraphshow=ref(false);
+  let  radarshow=ref(false);
+  let bargraphref=ref();
+  let echartLineref=ref();
+  let BarChartref=ref();
+  let  radarref=ref();
+  let echartzongshow=ref(false);
   const router = useRouter();
   const route = useRoute();
   let youhua=ref({
@@ -1368,6 +1373,7 @@
   })
   let echartdata=ref(null);
   let optmonitor1=ref();
+  let  arearef=ref();
   let tableHeaders=ref([
         // { label: '日期', prop: 'date' },
         // { label: '姓名', prop: 'name' },
@@ -1401,7 +1407,7 @@
   let zhixing=ref('Rosenbrock');
   let tabName=ref("one")
   const tabs = ['信息栏', '优化问题'];
-  const listli = ['设计变量', '约束条件', '目标函数'];
+  const listli = ['设计变量', '约束条件', '优化目标'];
   const xfoil = ['输入', '执行', '输出'];
   let srtable=ref([]);
   let sctable=ref([]);
@@ -1763,8 +1769,7 @@ console.log(route.query.pid);
     tabactive.value=tab.props.name;
     if(tabactive.value=='User'){
         router.replace({ path: '/' })
-    }else if(tabactive.value=='Three'){
-      // logsget();
+    }else {
 
     }
     if(tabactive.value=='Role'){
@@ -1777,6 +1782,11 @@ console.log(route.query.pid);
     ifjiankong();
    
     dialogcolse()
+    if(tabactive.value=='Config'){
+      echartzongshow.value=true;
+    }else{
+      echartzongshow.value=false;
+    }
   }
   //表格点击事件
   const handleEdit = (row) => {
@@ -1889,12 +1899,91 @@ console.log(route.query.pid);
         case "曲线监控":
         ifjiankong()
         curveLine();
-      
+        case "面积图":
+        echatsfunc();
+       break;
+       case "柱状图":
+        echatsfunc();
+       break;
+       case "折线图":
+        echatsfunc();
+       break;
+       case "散点图":
+        //echatsfunc();
+       break;
+       case "横条图":
+        echatsfunc();
+       break;
+       case "雷达图":
+        //logsget();
+        echatsfunc();
+       break;
       default: 
     }
    }
+   
+  //  可视化清空
+  const echartclear=()=>{
+    arearef.value.echatinit();
+    bargraphref.value.echatinit();
+    echartLineref.value.echatinit();
+    BarChartref.value.echatinit();
+    radarref.value.echatinit();
+  }
+  const echatsfunc=()=>{
+      //echartzongshow.value=true;
+      echartclear();
+      switch (tabactive.value){
+      case "面积图":
+      areashow.value=true;
+      bargraphshow.value=false;
+      echartLineshow.value=false;
+     BarChartshow.value=false;
+     radarshow.value=false;
+     break;
+     case "柱状图":
+     areashow.value=false;
+     bargraphshow.value=true;
+     echartLineshow.value=false;
+     BarChartshow.value=false;
+     radarshow.value=false;
+     break;
+     case "饼状图":
+     areashow.value=false;
+     bargraphshow.value=false;
+     echartLineshow.value=false;
+     BarChartshow.value=false;
+     radarshow.value=false;
+     break;
+     case "折线图":
+     areashow.value=false;
+     bargraphshow.value=false;
+     echartLineshow.value=true;
+     BarChartshow.value=false;
+     radarshow.value=false;
+     break;
+     case "横条图":
+     areashow.value=false;
+     bargraphshow.value=false;
+     echartLineshow.value=false;
+     BarChartshow.value=true;
+     radarshow.value=false;
+     break
+     case "雷达图":
+     areashow.value=false;
+     bargraphshow.value=false;
+     echartLineshow.value=false;
+     BarChartshow.value=false;
+     radarshow.value=true;
+     break
+     default:
+
+    }
+  
+  }
+  // 可视化结束
   //  ||activeName.value=='Three'&&tabactive.value=='开始'
-  const ifjiankong=()=>{;
+  const ifjiankong=()=>{
     if(activeName.value=='Three'&&tabactive.value=='列表监控'||activeName.value=='Three'&&tabactive.value=='开始'){
       jiankong.value=true;
     
@@ -2478,6 +2567,7 @@ function tablefun(vals){
 }
 //获取日志
 const logsget= ()=>{
+
     const params = {
         transCode: 'MDO0025',
         pid:pid.value,
@@ -2493,7 +2583,11 @@ const logsget= ()=>{
             let echarr=[];
             echarr.push(results[i])
             optmonitor1.value.getsockechart(echarr);
-            
+            arearef.value.getsockechart(echarr);
+            bargraphref.value.getsockechart(echarr);
+            echartLineref.value.getsockechart(echarr);
+            BarChartref.value.getsockechart(echarr);
+            radarref.value.getsockechart(echarr);
           }
         })
         .catch((err) => {
@@ -2521,7 +2615,7 @@ function initWebSocket() {
 
       //初始化weosocket
       // 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.106:8188//websocket?projectId="+pid.value;
+       const wsurl = "ws://192.168.104:8188//websocket?projectId="+pid.value;
       // const wsurl =
       //   "ws://" +
       //   process.env.VUE_APP_BASE_websokt +

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.106:8188/TransServlet',
+                    target: 'http://192.168.0.104:8188/TransServlet',
                     secure: false, //接受使用https
                     changeOrigin: true, //允许跨域
                     ws: false, //使用websocket