10.9

src/views/echart/optimize_monitor.vue

@@ -1,10 +1,11 @@
 <template>
-      <!-- 优化监控 -->
-<h3 class="opt_tltie">时间历程曲线</h3>
+
 <!-- 折线图 -->
     <div>
     <div class="echartitem">
-        <div id="line" style="width: 100%;height:170px;"></div>
+      <h3 class="selcal">{{ props.selval }}</h3>
+        <div id="line" style="width: 100%;height:400px;"></div>
+        <h3 class="diedai">迭代次数</h3>
     </div>
     </div>
   </template>
@@ -14,6 +15,12 @@ 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'
+const props = defineProps({
+
+  selval: {
+  type: String,
+},
+})
   let emit = defineEmits(['',])
 onMounted(() => {
     linechart()
@@ -22,9 +29,16 @@ onMounted(() => {
     var chartDom = document.getElementById('line');
    let myChart = echarts.init(chartDom);
  let  option = {
-        title: {
-        //  text: 'Stacked Line'
-        },
+        // title: {
+        //   text: props.selval,
+        // left: 'left', // 将标题居中
+        // top: '20', // 将标题放置在纵坐标的上方
+        // floating: true, // 启用浮动效果
+        // textStyle: {
+        //  rotate: 90 // 旋转角度，正值为顺时针旋转
+        // }
+
+        // },
           tooltip: {
           trigger: "axis",
           backgroundColor: "rgba(0,0,0,.6)",
@@ -51,25 +65,43 @@ onMounted(() => {
         xAxis: {
             type: 'category',
             boundaryGap: false,
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+            data: ['0.1', '0.4', '0.8', '1.2', '1.6'],
+            axisLine: {//X轴线
+            show: true, 
+            lineStyle: {
+                color: '#000', // 线的颜色
+                width: 2, // 线宽
+                type: 'solid' // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
+            }
+            },
+            splitLine: {
+            show: true // 如果不需要网格线，可以设置为 false
+        }
         },
         yAxis: {
-            type: 'value'
-            
+            type: 'value',
+            axisLine: {//Y轴线
+            show: true, 
+            lineStyle: {
+                color: '#000', // 线的颜色
+                width: 2, // 线宽
+                type: 'solid' // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
+            }
+},
         },
         series: [
             {
             name: 'Email',
             type: 'line',
             stack: 'Total',
-            data: [120, 132, 101, 134, 90, 230, 210]
+            data: [120, 132, 101, 134, 90]
             },
-            {
-            name: 'Union Ads',
-            type: 'line',
-            stack: 'Total',
-            data: [220, 182, 191, 234, 290, 330, 310]
-            }
+            // {
+            // name: 'Union Ads',
+            // type: 'line',
+            // stack: 'Total',
+            // data: [220, 182, 191, 234, 290]
+            // }
         
         ]
         };
@@ -83,7 +115,21 @@ onMounted(() => {
     
   </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/home.vue

@@ -45,7 +45,7 @@
                         :class="{ activeOrange: active == 'Role11' + index }"
                         @click="clickgeometry($event, index, 'Role11' + index, item.titlie)">
                         <el-image :src="getImgPath(item.url)" fit="cover" />
-                        <el-color-picker v-model="color1" @change="colorpicker()" />
+                        <el-color-picker v-model="color1" @change="colorpicker()"  :class="{'is-show-panel': showTrigger}" />
                         <span>{{ item.titlie }}</span>
                       </div>
                     </div>
@@ -797,19 +797,47 @@
             <!-- 放图形 -->
             <div class="main_container">
               <div class="main_model">
-                <vuefindex ref="vuefval" :optimizer="dialog.optimizer" @optimizerfalse="optimizerfalse()" ></vuefindex>
+               
+                <vuefindex  v-if="activeName=='Role'" ref="vuefval" :optimizer="dialog.optimizer" @optimizerfalse="optimizerfalse()" ></vuefindex>
                 <div  class="maxh221">
-             
-                <!-- 右侧边栏开始 -->
-                    <!-- 优化监控echarts -->
-               <div class="opt_moitor" v-if="tabactive=='优化监控'">
-              <optmonitor />
+             <!-- 中间部分 -->
+             <div  class="conter_mian classtable " v-if="activeName=='Three'&&tabactive=='列表监控'">
+               <el-table :data="tableDatalieb" border  style="display: flex; flex: 1; overflow: auto;"  max-height="600">
+                <el-table-column  type="index" width="30" />
+                <el-table-column prop="x1" label="x1"  />
+                <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> 
+             </div>
+             <!--   曲线监控 -->
+             <div  class="conter_mian classtable " v-if="activeName=='Three'&&tabactive=='曲线监控'">
+              <el-form-item label="" >
+                  <el-select v-model="quval" :suffix-icon="CaretBottom" placeholder="请选择">
+                    <el-option v-for="item in quxian" :key="item.value" :label="item.label" :value="item.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+                <optmonitor :selval="quval"/>
             </div>
-            <div class="opt_moitor" v-if="tabactive=='可视化'">
-              <sixtop />
-              <sixbottom/>
-           
+            <!-- 过程监控 -->
+            <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>
+                <!-- 右侧边栏开始 -->
                 <!-- 结束 -->
               </div>
               <el-footer
@@ -1031,6 +1059,7 @@
   import gc3 from "@/assets/img/gc3.png"
   import wen from "@/assets/img/wen.png"
   import optmonitor from './echart/optimize_monitor.vue'
+  import echartindex from './echart/index.vue'
   import sixtop from './echart/six_top.vue'
   import sixbottom from './echart/six_bottom.vue'
   import sixindex from './demo/index.vue'      
@@ -1046,9 +1075,22 @@
   let tabName=ref("one")
   const tabs = ['信息栏', '优化问题'];
   const listli = ['设计变量', '约束条件', '优化目标'];
+  // let quxian=ref([{
+  //   val:'1',name:"设计变量",
+  //   val:'2',name:"约束条件",
+  //   val:'3',name:"约束条件",
+  // }])
+  //  let quval=ref('1')
+  let quxian = ref([
+  { label: '设计变量', value: '设计变量' },
+  { label: '约束条件', value: '约束条件' },
+  { label: '优化目标', value: '优化目标' },
+])
+let quval = ref("设计变量")
   const activeIndex = ref(0);
   const activeIndex2 = ref(0);
-  const color1 = ref('')
+  const color1 = ref('');
+  let showTrigger=ref(false);
   const datatree = ref([
     {
       id:1,
@@ -1301,6 +1343,7 @@ let options3=ref([
   let yslist = ref([
   { label: 'GA遗传算法', value: 'GA遗传算法' },
   { label: 'PSO', value: 'PSO' },
+  { label: 'NSGA2', value: 'NSGA2' },
   ])
   let addval1=ref("概率相乘法")
   let addlist1 = ref([
@@ -1437,7 +1480,43 @@ 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',
+    },
+  ])
   let name = ref("1")
   let num = ref(1)
   const getImgPath = (url) => {
@@ -1532,6 +1611,7 @@ let options3=ref([
         dialog.value.guanli  = true;
         break;
         case "选择连线颜色":
+        showTrigger.value= true;
         break;
         case "逻辑流连线":
         vuefval.value.linestrokeWidth(1);
@@ -1612,6 +1692,13 @@ let options3=ref([
       }
   </script>
   <style lang="scss" scoped>
+  .conter_flex{
+    display: flex;
+    .ech{
+      flex: 1;
+      border: 1px solid;
+    }
+  }
   //有子节点 且未展开
   .left_main_content :deep(.el-icon svg) {
     display: block;
@@ -1761,4 +1848,16 @@ border: 1px solid #2267B1;
 .classtable .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf,.eldesign{
   /* border: 1px solid #000000; */
 }
+/* .el-color-picker__trigger {
+  //display: none;
+} */
+ 
+/* 使颜色选择器的触发器可点击，但不显示 */
+.el-color-picker__trigger.is-show-panel {
+  display: block;
+}
+.conter_mian{
+  padding: 1px;
+}
+
   </style>

src/views/vuetree/eltree.vue

@@ -54,7 +54,7 @@ onMounted(() => {
         
  
 .vue-flow__edge-text {
-  display: none;
+  display: block;
 }
 .vue-flow__node-custom {
     background: purple;

src/views/vuetree/index.vue

@@ -1,7 +1,7 @@
 <template>
   <VueFlow ref="vueFlowRef" :nodes="nodes" :edges="edges"  :class="{ dark }"
     class="basic-flow" 
-    :default-viewport="{ zoom: 1.5 }" :min-zoom="0.2" :max-zoom="4" @drop="onDrop"
+    :default-viewport="{ zoom: 1.5 }" :min-zoom="0.2" :max-zoom="1.5" @drop="onDrop"
     @contextmenu.prevent="onContextMenu" @node-contextmenu="logEvent('contextmenu', $event)" 
     @dragover="onDragOver" @dragleave="onDragLeave" @edge-click="onEdgeClick" @node-double-click="onNodeDoubleClick"  @node-click="onNodeClick">
     <template  #node-default="props">
@@ -80,13 +80,15 @@ let newobj=ref({
   name:'',
   description:'',
 })
+let linenum=ref(1);
+let linecolor=ref('#b1b1b7')
 let pid=ref('');
 let newroter=ref();
 let vueflowimg=ref('');
 const shopShow = ref(false);
 let noid = ref([]);
 let Edgeid = ref();
-let seledge=ref();
+let seledge=ref(null);
 let node = ref();
 let contextMenu = ref({
   position: { x: 0, y: 0 },
@@ -99,9 +101,10 @@ onConnect((connection) => {
   console.log(connection);
   connection.type = 'smoothstep';//  smoothstep straight
   connection.markerEnd = MarkerType.ArrowClosed;
-  //connection.color="#FC0537"
-  connection.style = { strokeWidth: 1,stroke:'#b1b1b7' };
+  connection.label = '这是一条注释';
+  connection.style = { strokeWidth:linenum.value ,stroke:linecolor.value};
   addEdges(connection)
+  seledge.value=null;
 })
 
 function onNodeClick(e) {
@@ -119,7 +122,7 @@ function onNodeDoubleClick(e) {
 function onEdgeClick(e) {
   Edgeid.value = e.edge.id;
   seledge.value= e.edge;
-  // seledge.value.style.stroke = 'red';
+   //seledge.value.style.stroke = 'red';
 }
 function logEvent(name, event) {
   console.log(2222)
@@ -132,13 +135,15 @@ onInit((vueFlowInstance) => {
 })
 
 onNodeDragStop(({ event, nodes, node }) => {
-  console.log('Node Drag Stop', { event, nodes, node })
+  console.log(nodes)
+  //console.log('Node Drag Stop', { event, nodes, node })
 })
 
 onConnect((connection) => {
   addEdges(connection)
 })
 function updatePos() {
+
   nodes.value = nodes.value.map((node) => {
     return {
       ...node,
@@ -240,28 +245,47 @@ const getroter=()=>{
 }
 //改变线的粗
 const linestrokeWidth=(num)=>{
+  if(seledge.value){
+    seledge.value.style.strokeWidth = num;
+  }
+  linenum.value=num;
 // console.log(seledge.value);
-  let edgearr= toObject().edges;
-  for (let i = 0; i <= edgearr.length-1; i++) {
-    edgearr[i].style.strokeWidth = num;
-}
-addEdges(edgearr);
+//   let edgearr= toObject().edges;
+//   for (let i = 0; i <= edgearr.length-1; i++) {
+//     edgearr[i].style.strokeWidth = num;
+// }
+console.log(num)
+//addEdges(edgearr);
 
 }
 //改变线的颜色
 const changeAllEdgesColor=(color1)=>{
   //console.log(props.color1);
-  console.log(seledge.value);
-  seledge.value.style.stroke = color1;
+  //console.log(seledge.value);
+  linecolor.value= color1;
+  if(  seledge.value){
+    console.log(11111)
+    seledge.value.style.stroke =  linecolor.value;
+  }
+
+ 
 }
 
 watch(() => seledge.value, (newItems, oldItems) => {
-      console.log('Array changed:', newItems);
+  // if(seledge.value!=null){
+  //   //seledge.value.style.stroke =  linecolor.value;
+  // }
     });
 defineExpose({changeAllEdgesColor,linestrokeWidth});
 </script>
 
 <style>
+/* .vue-flow__edge.selected .vue-flow__edge-path, .vue-flow__edge:focus .vue-flow__edge-path, .vue-flow__edge:focus-visible .vue-flow__edge-path {
+    stroke: #555 !important;
+} */
+.vue-flow__edge:focus .vue-flow__edge-path, .vue-flow__edge:focus-visible .vue-flow__edge-path {
+    stroke: #555 !important;
+} 
 .vue-flow__edge {
   text-align: left;
   /* 设置edges的左对齐 */