10.23

package-lock.json

@@ -9,7 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@element-plus/icons": "^0.0.11",
-        "@element-plus/icons-vue": "^2.1.0",
+        "@element-plus/icons-vue": "^2.3.1",
         "@kitware/vtk.js": "^29.7.3",
         "@vue-flow/background": "^1.3.0",
         "@vue-flow/controls": "^1.1.2",
@@ -1978,9 +1978,9 @@
       "deprecated": "Please use @element-plus/icons-vue instead."
     },
     "node_modules/@element-plus/icons-vue": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.1.0.tgz",
-      "integrity": "sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
+      "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
       "peerDependencies": {
         "vue": "^3.2.0"
       }

package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@element-plus/icons": "^0.0.11",
-    "@element-plus/icons-vue": "^2.1.0",
+    "@element-plus/icons-vue": "^2.3.1",
     "@kitware/vtk.js": "^29.7.3",
     "@vue-flow/background": "^1.3.0",
     "@vue-flow/controls": "^1.1.2",

src/views/echart/radar.vue

@@ -25,6 +25,7 @@ let convergeDate = ref([]);
 let curvedata = ref('')
 let radar;
 let max1;
+let maxarr=ref([]);
 let datain=ref([]);
 let state = reactive({
     instance: null,
@@ -48,17 +49,18 @@ const getsockechart = (data) => {
     curvedata.value = data;
     series.value = [];
    datain.value=[];
+   maxarr.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);
+        convergeDate.value.push(vals.value);
         xdata.value.push(rows[i].step);
 
     }
-    console.log(xdata.value);
+   // console.log(xdata.value);
     for (let j = 0; j < vars.value.length; j++) {
         let firstColumn = (convergeDate.value.map((row) => row[j]));
         let item={
@@ -73,11 +75,12 @@ const getsockechart = (data) => {
     ]
  
             }
-            max1= Math.max(firstColumn[0])
+          //  maxarr.value.push(firstColumn);
+            //max1= Math.max(firstColumn[0])
         series.value.push(item)
     }
         
-    console.log( max1);
+   // console.log( maxarr.value);
    
     for (let k = 0; k < xdata.value.length; k++) { 
         let indicatorobj={
@@ -85,8 +88,8 @@ const getsockechart = (data) => {
     }
      datain.value.push(indicatorobj);
     }
-    console.log(vars.value);
-    console.log(series.value);
+    // console.log(vars.value);
+    // console.log(series.value);
     myChart.setOption({
         legend: {
             left: 'center',

src/views/echart/scatter.vue

@@ -0,0 +1,169 @@
+<template>
+    <!-- 优化监控 -->
+<!-- 折线图 -->
+  <div >
+  <div class="echartitem">
+    <div id="linesan" 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"
+const option = ref({});
+let myChart;
+let dateList=ref(['01:10:00', '03:10:33', '06:00:00', '12:25:00', '21:36:00', '23:00']);
+let dataSource1 = ref([[10, 20], [15, 35], [20, 50], [25, 65]]);
+let dataSource2 = ref([[10, 40], [35, 80], [40, 75], [45, 85]]);
+let vars=ref([]);
+let vals=ref([]);
+let series=ref([]);
+let xdata=ref([]);
+let chartContainer=ref(null);
+let chartDom=ref()
+let convergeDate=ref([]);
+let curvedata=ref('')  
+const getData = () => {
+  setOption(dateList.value, numList.value, numList2.value);
+};
+onMounted(() => {
+ var chartDom = document.getElementById('linesan');
+ myChart = echarts.init(chartDom);
+  setOptionfunc()
+})
+  //初始化
+  const echatinit=()=>{
+  convergeDate.value=[];
+  series.value=[];
+  xdata.value=[];
+}
+//数据组装
+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(Number(rows[i].step));
+    }
+    //console.log(convergeDate.value)
+    //console.log( xdata.value)
+    for(let j=0;j<vars.value.length;j++){
+     let firstColumn=(convergeDate.value.map((row) => row[j]));
+     const zippedArray = xdata.value.map((x, index) => [x, firstColumn[index]]);
+    let item={
+            name:vars.value[j],
+            type: 'scatter',
+            data:zippedArray,
+            itemStyle: {}
+         
+    }
+   series.value.push(item)
+    }
+    myChart.setOption({
+      legend: {
+            data:vars.value
+        },
+      xAxis:{
+        data:  xdata.value,
+      },
+      series: series.value
+    });
+}
+const setOptionfunc =async () => {
+   
+ option.value = {
+    legend: {
+        // 开启图例
+        show: true,
+        // 图例的位置
+        data:vars.value
+    },
+    tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,.6)",
+          borderColor: "rgba(147, 235, 248, .8)",
+          textStyle: {
+            color: "#FFF",
+          },
+        },
+        xAxis: [
+    {
+      type: 'category',
+      boundaryGap: false,
+      data:  xdata.value,
+      axisLine: {//X轴线
+            show: true, 
+            lineStyle: {
+                color: '#000', // 线的颜色
+                width: 2, // 线宽
+                type: 'solid' // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
+            }
+            },
+    }
+  ],
+    // xAxis: {
+    //     splitLine: {//去掉网格线
+    //         show: false,
+    //         lineStyle: {
+    //           color: "rgba(31,99,163,.2)",
+    //         },
+    //       }, 
+    //       axisLine: {//Y轴线
+    //         show: true, 
+    //         lineStyle: {
+    //             color: 'rgba(31,99,163,.3)', // 线的颜色
+    //             width: 2, // 线宽
+    //             type: 'solid' // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
+    //         }
+    //         },
+    //         axisLabel: {
+    //         color: "#7EB7FD",
+    //         fontWeight: "500",
+    //       },
+    // },
+    yAxis: {
+        axisTick: {
+            show: false,
+        },
+        axisLabel: {
+            color: "#000",
+            fontWeight: "500",
+          },
+        splitLine: {//去掉网格线
+            show: false,
+            lineStyle: {
+              color: "rgba(31,99,163,.2)",
+            },
+          }, 
+          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()
+
+    }
+  }
+  defineExpose({getsockechart,echatinit}); 
+</script>
+<style lang="scss" scoped>
+
+</style>
+

src/views/home.vue

@@ -1021,6 +1021,16 @@
             <!-- 放图形 -->
             <div class="main_container">
               <div class="main_model">
+                <div class="jindutiao" >
+                  <!-- <el-progress :text-inside="true" :stroke-width="26" :percentage="70" /> -->
+                  <div class="demo-progress" v-show="progressshow">
+                  <el-progress :percentage="percentage" :stroke-width="15"  :color="customColors">
+                    <template #default="{ percentage }">
+                    <span class="percentage-value">当前进度:{{ percentage }}%</span>
+                  </template>
+                  </el-progress>
+                  </div>
+                </div>
                 <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>
@@ -1059,6 +1069,7 @@
             <bargraph ref="bargraphref" v-show="bargraphshow"/>
             <echartLine ref="echartLineref" v-show="echartLineshow"/>
             <BarChart ref="BarChartref" v-show="BarChartshow"/>
+            <scatter ref="scatterref" v-show="scattershow"/>
             <radar ref="radarref" v-show="radarshow"/>
           </div>
             <!-- 可视化结束 -->
@@ -1343,7 +1354,10 @@
   import bargraph from './echart/bargraph.vue'
   import echartLine from './echart/echartLine.vue'
   import BarChart from './echart/BarChart.vue'
+  import scatter from './echart/scatter.vue'
   import radar from './echart/radar.vue'
+  let percentage=ref(0);
+  let progressshow=ref(true)
   let flowshow=ref(true);
   let jiankong=ref(false);
   let echartshow=ref(false);
@@ -1351,11 +1365,13 @@
   let echartLineshow=ref(false);
   let BarChartshow=ref(false);
   let bargraphshow=ref(false);
+  let  scattershow=ref(false);
   let  radarshow=ref(false);
   let bargraphref=ref();
   let echartLineref=ref();
   let BarChartref=ref();
   let  radarref=ref();
+  let scatterref=ref();
   let echartzongshow=ref(false);
   const router = useRouter();
   const route = useRoute();
@@ -1691,43 +1707,13 @@ let options3=ref([
       
     }, 
   ])
-  // let tableDatalieb=ref([
-  // {
-  //     x1:"02",
-  //     x2: '33456833',
-  //     x3:"02",
-  //     x4: '20160503',
-  //     x5:"02",
-  //     x6: '20160503',
-  //     x7:"02",
-  //     x8: '20160503',
-  //     x9:"02",
-  //     x10: '20160503',
-  //     x11:"02",
-  //     x12: '20160503',
-  //     x13:"02",
-  //     x14: '20160503',
-  //     x15: '20160503',
-  //     cd: '20160503',
-  //   }, 
-  //   {
-  //     x1:"02",
-  //     x2: '33456833',
-  //     x3:"02",
-  //     x4: '20160503',
-  //     x5:"02",
-  //     x6: '20160503',
-  //     x7:"02",
-  //     x8: '20160503',
-  //     x9:"02",
-  //     x10: '20160503',
-  //     x11:"02",
-  //     x12: '20160503',
-  //     x13:"02",
-  //     x14: '20160503',
-  //     cd: '20160503',
-  //   },
-  // ])
+  const customColors = [
+  { color: '#f56c6c', percentage: 20 },
+  { color: '#e6a23c', percentage: 40 },
+  { color: '#d3f12f', percentage: 60 },
+  { color: '#1989fa', percentage: 80 },
+  { color: '#5cb87a', percentage: 100 },
+]
   let name = ref("1")
   let num = ref(1)
   const getImgPath = (url) => {
@@ -1909,7 +1895,8 @@ console.log(route.query.pid);
         echatsfunc();
        break;
        case "散点图":
-        //echatsfunc();
+      // logsget();
+        echatsfunc();
        break;
        case "横条图":
         echatsfunc();
@@ -1929,6 +1916,7 @@ console.log(route.query.pid);
     echartLineref.value.echatinit();
     BarChartref.value.echatinit();
     radarref.value.echatinit();
+    scatterref.value.echatinit();
   }
   const echatsfunc=()=>{
       //echartzongshow.value=true;
@@ -1940,6 +1928,7 @@ console.log(route.query.pid);
       echartLineshow.value=false;
      BarChartshow.value=false;
      radarshow.value=false;
+     scattershow.value=false;
      break;
      case "柱状图":
      areashow.value=false;
@@ -1947,6 +1936,7 @@ console.log(route.query.pid);
      echartLineshow.value=false;
      BarChartshow.value=false;
      radarshow.value=false;
+     scattershow.value=false;
      break;
      case "饼状图":
      areashow.value=false;
@@ -1954,6 +1944,7 @@ console.log(route.query.pid);
      echartLineshow.value=false;
      BarChartshow.value=false;
      radarshow.value=false;
+     scattershow.value=false;
      break;
      case "折线图":
      areashow.value=false;
@@ -1961,13 +1952,23 @@ console.log(route.query.pid);
      echartLineshow.value=true;
      BarChartshow.value=false;
      radarshow.value=false;
+     scattershow.value=false;
      break;
+     case "散点图":
+     areashow.value=false;
+     bargraphshow.value=false;
+     echartLineshow.value=false;
+     BarChartshow.value=false;
+     radarshow.value=false;
+     scattershow.value=true;
+     break
      case "横条图":
      areashow.value=false;
      bargraphshow.value=false;
      echartLineshow.value=false;
      BarChartshow.value=true;
      radarshow.value=false;
+     scattershow.value=false;
      break
      case "雷达图":
      areashow.value=false;
@@ -1975,6 +1976,7 @@ console.log(route.query.pid);
      echartLineshow.value=false;
      BarChartshow.value=false;
      radarshow.value=true;
+     scattershow.value=false;
      break
      default:
 
@@ -2588,6 +2590,7 @@ const logsget= ()=>{
             echartLineref.value.getsockechart(echarr);
             BarChartref.value.getsockechart(echarr);
             radarref.value.getsockechart(echarr);
+            scatterref.value.getsockechart(echarr);
           }
         })
         .catch((err) => {
@@ -2608,7 +2611,9 @@ const logsget= ()=>{
     }
   }).filter(Boolean); // 过滤掉解析失败的对象
 }
- 
+function convertToPercentage(number) {
+    return (number * 100);
+}
 
 //websockct的连接
 function initWebSocket() {
@@ -2631,32 +2636,40 @@ function initWebSocket() {
  	// Websoket连接成功事件
    const websocketonopen = (res) => {
       console.log("WebSocket连接成功", res);
+     
       console.log()
       start();
     };
     // Websoket接收消息事件
     const websocketonmessage = (res) => {
+      progressshow.value=true;
       arrobj.value=[];
       if(res.data.indexOf('{') !== -1){
+        // return (number * 100) + '%';
+      // =(Number(JSON.parse(res.data).step))* 100;
+      let step=Number(JSON.parse(res.data).step);
+      percentage.value = Math.floor((step*100));
+       //percentage.value = convertToPercentage((Number(JSON.parse(res.data).step)));
         echartdata.value=res.data;
-       // console.log( echartdata.value);
         arrobj.value.push(JSON.parse(res.data));
-        //console.log( arrobj.value);
         let vals=(JSON.parse(res.data).vals).split(" ");
             tablefun(vals);
             optmonitor1.value.getsockechart(arrobj.value);
-          //  curveLine();
-          ///console.log(optmonitor1.value);
-           
-        // diaoyongfun();
-        // curveLine();
-          // optmonitor1.value.getsockechart()
       }else{
+        if(res.data.indexOf('--成功') == -1){
+         const timer= setTimeout(function(){
+            //progressshow.value=false;
+            console.log('关闭定时器')
+          },20000)
+          clearTimeout(timer);
+      
+        }
          if( res.data.indexOf('msg=heartChec') == -1){
         logs.value=logs.value+'"\n"'+res.data;
         let textarea = document.getElementById("textarea_id");
         textarea.scrollTop = textarea.scrollHeight;
          }
+
       
       }
     
@@ -2919,4 +2932,15 @@ border: 1px solid #2267B1;
       right: 13px;
     top: 5px;
      }
+.jindutiao{
+
+  padding:0 0 2px 0px;
+  background: #9FCDFF;
+}
+.jindutiao .demo-progress{
+  width:80%;
+}
+.jindutiao .percentage-value{
+  font-size: 13px;
+}
   </style>

src/views/vuetree/Icon.vue

@@ -30,9 +30,9 @@ defineProps({
     />
   </svg>
 
-  <svg v-if="name === 'log'" width="16" height="16" viewBox="0 0 24 24">
+  <svg v-if="name === 'log'" width="20" height="20" viewBox="0 0 24 24">
     <path
-      d="M20 19V7H4v12h16m0-16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16m-7 14v-2h5v2h-5m-3.42-4L5.57 9H8.4l3.3 3.3c.39.39.39 1.03 0 1.42L8.42 17H5.59l3.99-4Z"
+      d="m12 17l4-4l-1.4-1.4l-1.6 1.55V9h-2v4.15L9.4 11.6L8 13zm-6 5q-.825 0-1.412-.587T4 20V8l6-6h8q.825 0 1.413.588T20 4v16q0 .825-.587 1.413T18 22zm0-2h12V4h-7.15L6 8.85zm0 0h12z"
     />
   </svg>
 </template>

src/views/vuetree/index.vue

@@ -11,14 +11,19 @@
 
     <Background pattern-color="#aaa" :gap="16" />
 
-    <!-- <MiniMap /> -->
+    <!-- <MiniMap /> @input="handleUpdate"-->
     <Panel :position="'right'">
-      <div>
-        <button class="remove" @click="removeNode(event)">N</button>
+      <div class="field">
+        <label for="label">Label:</label>
+        <input id="label" v-model="labelname"  />
+        <button @click="handleUpdate"  class="lableaniu">确定</button>
+      </div>
+      <!-- <div> -->
+        <!-- <button class="remove" @click="removeNode(event)">N</button>
         <button class="remove" @click="removeEdge(event)">E</button>
         <button class="remove" @click="removeall(event)">all</button>
-        <!-- <button class="remove" @click="getnodes()">获取所有数据</button> -->
-      </div>
+     
+      </div> -->
      
     </Panel>
     <Controls position="top-left">
@@ -31,8 +36,20 @@
       </ControlButton>
 
       <ControlButton title="保存" @click="logToObject1">
-        <Icon name="log" />
+        <!-- <Icon name="log" /> -->
+        <el-icon :color="iconcolor"><UploadFilled /></el-icon>
+      </ControlButton>
+      <ControlButton title="删除节点" @click="removeNode()">
+        <el-icon  :color="iconcolor"><DocumentDelete /></el-icon>
       </ControlButton>
+      <ControlButton title="删除线" @click="removeEdge()">
+        <el-icon  :color="iconcolor"><Crop /></el-icon>
+      </ControlButton>
+      <ControlButton title="清空全部" @click="removeall()">
+        <el-icon :color="iconcolor"><DeleteFilled /></el-icon>
+      </ControlButton>
+      
+    
     </Controls>
 
   </VueFlow>
@@ -47,6 +64,14 @@
 import { ref, markRaw } from 'vue'
 import { VueFlow,Panel, useVueFlow, MarkerType} from '@vue-flow/core'
 import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
+import {
+  DocumentDelete,
+  Delete,
+  UploadFilled,
+  Histogram,
+  DeleteFilled,
+  Crop,
+} from '@element-plus/icons-vue'
 import { useRoute } from 'vue-router';
 import { request, uploadFile } from "@/utils/request";
 import { Background } from '@vue-flow/background'
@@ -60,6 +85,9 @@ import useDragAndDrop from './useDnD';
 import f11 from '@/assets/img/f11.png'
 import html2canvas from 'html2canvas';
 import Icon from './Icon.vue'
+import { formatTime } from '@/js/lindex.js';
+
+// import func from 'vue-temp/vue-editor-bridge.js';
 
 const dark = ref(false)
 const route = useRoute();
@@ -67,6 +95,8 @@ const { onInit, onNodeDragStop, onNodeContextMenu, onConnect, addEdges, setViewp
 let vueFlowRef = ref();
 let emit = defineEmits(['optimizerfalse']);
 let mergedObj=ref();
+let labelname=ref();
+let iconcolor=ref('#000')
 const props = defineProps({
 
   optimizer: {
@@ -112,9 +142,15 @@ onConnect((connection) => {
   addEdges(connection)
   seledge.value=null;
 })
+//修改名称
+function handleUpdate(){
 
+  noid.value.data.label=labelname.value;
+  console.log( noid.value.data.label);
+}
 function onNodeClick(e) {
   noid.value = e.node;
+  labelname.value=e.node.data.label;
 }
 function onNodeDoubleClick(e) {
   noid.value = e.node;
@@ -227,7 +263,14 @@ function resetTransform() {
 }
 
 function toggleDarkMode() {
-  dark.value = !dark.value
+  dark.value = !dark.value;
+  if(dark.value){
+    iconcolor.value='#fff'
+  }else{
+    iconcolor.value='#000'
+  }
+
+
 }
 onMounted(() => {
   setTimeout(function() {
@@ -346,4 +389,18 @@ panel {
   -ms-user-select: none; /* IE10+/Edge */
   user-select: none; /* Standard syntax */
 }
+.lableaniu{
+
+  font-size: 12px;
+    background-color: #ddd;
+    padding: 4px 16px;
+    /* margin-top: -17px; */
+    margin-left: 5px;
+    margin-top: 0px;
+    border-radius: 1px;
+}
+.vue-flow__controls-button svg{
+  max-width: 16px;
+  max-height: 16px;
+}
 </style>