6.6

src/style/index.css

@@ -287,4 +287,40 @@ position: relative;
   .btncolor{
     background-color: #F5FAFF !important;
     width: 150px !important;
-  }
+  }
+  .left_main_content{
+    width: 200px;
+    height: calc(100vh - 184px);
+background: #FFFFFF;
+box-shadow: 2px 0px 11px 0px rgba(0,0,0,0.12);
+border-radius: 10px 10px 10px 10px;
+  }
+  .mianflex{
+    display: flex;
+  }
+  .main_model{
+    width: 100%;
+    text-align: center;
+  }
+  /* 基础样式 */
+.custom-tree .el-tree-node__label {
+  font-weight: bold;
+  font-size: 14px; /* 基础字体大小 */
+}
+.custom-tree .el-tree-node__children .el-tree-node__label {
+  font-size: 14px; /* 第二级字体大小 */
+  font-weight: 400;
+  color: #212121;
+}
+.custom-tree .el-tree-node__children .el-tree-node__children .el-tree-node__label {
+  font-size: 12px; /* 第三级字体大小 */
+  color: #000000;
+}
+.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
+  background-color: rgba(0,0,0,0);
+  color: #0077F0 !important;
+}
+.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content .el-tree-node__label {
+  background-color: rgba(0,0,0,0);
+  color: #0077F0 !important;
+}

src/views/echart/optimize_monitor.vue

@@ -4,7 +4,7 @@
 <!-- 折线图 -->
     <div>
     <div class="echartitem">
-        <div id="line" style="width: 100%;height:170px;"></div>
+        <div id="line" style="width: 100%;height:0.8888rem;"></div>
     </div>
     </div>
   </template>
@@ -25,11 +25,16 @@ onMounted(() => {
         title: {
         //  text: 'Stacked Line'
         },
-        tooltip: {
-            trigger: 'axis'
+          tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,.6)",
+          borderColor: "rgba(147, 235, 248, .8)",
+          textStyle: {
+            color: "#FFF",
+          },
         },
         legend: {
-            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+            data: ['Email', 'Union Ads']
         },
         grid: {
             show: false,
@@ -50,6 +55,7 @@ onMounted(() => {
         },
         yAxis: {
             type: 'value'
+            
         },
         series: [
             {

src/views/echart/six_bottom.vue

@@ -4,7 +4,7 @@
 <!-- 折线图 -->
   <div>
   <div class="echartitem">
-    <div id="linesan" style="width: 100%;height:240px;"></div>
+    <div id="linesan" style="width: 100%;height:1.25rem;"></div>
   </div>
   </div>
 </template>
@@ -37,6 +37,14 @@ const setOptionfunc =async () => {
         // 图例的位置
         data: ['数据源1', '数据源2']
     },
+    tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,.6)",
+          borderColor: "rgba(147, 235, 248, .8)",
+          textStyle: {
+            color: "#FFF",
+          },
+        },
     xAxis: {
         splitLine: {//去掉网格线
             show: false,
@@ -86,7 +94,7 @@ const setOptionfunc =async () => {
             type: 'scatter',
             data: dataSource1.value,
             itemStyle: {color: '#2267B1'}
-        },
+          },
         {
             name: '数据源2',
             type: 'scatter',

src/views/echart/six_top.vue

@@ -4,7 +4,7 @@
 <!-- 折线图 -->
   <div>
   <div class="echartitem">
-    <div id="line" style="width: 100%;height:240px;"></div>
+    <div id="line2" style="width: 100%;height:1.1458rem;"></div>
     <!-- <div ref="EcharRef" :option="option" style="width: 300px; height: 300px"></div> -->
       <!-- <div id="crosschart" style="width: 100%;height:170px;"></div> -->
    
@@ -43,7 +43,7 @@ onMounted(() => {
 })
 
 const setOptionfunc =async () => {
-    var chartDom = document.getElementById('line');
+    var chartDom = document.getElementById('line2');
    let myChart = echarts.init(chartDom);
  option.value = {
     legend: {
@@ -55,7 +55,7 @@ const setOptionfunc =async () => {
         xAxis: {
           type: "category",
           data: dateList.value,
-          boundaryGap: false, // 不留白，从原点开始
+         boundaryGap: false, // 不留白，从原点开始
           splitLine: {
             show: false,
             lineStyle: {

src/views/index.vue

@@ -14,7 +14,7 @@
                   <!-- <button @click="etImgPath()"></button> -->
                   <div class="listitem lbg_color3 bkcolor3" v-for="(item, index) in Startlist" :key="'one0-' + index"
                     :class="{ activeOrange: active == 'one0-' + index }"
-                    @click="clickgeometry($event, index, 'one0-' + index)">
+                    @click="clickgeometry($event, index, 'one0-' + index,item.titlie )">
                     <div class="item2 ">
                       <el-image :src="getImgPath(item.url)" fit="cover" />
                       <span>{{ item.titlie }}</span>
@@ -26,8 +26,8 @@
                 <div class="imgzong">
                   <!-- <button @click="etImgPath()"></button> -->
                   <div class="listitem lbg_color3 bkcolor3" v-for="(item, index) in question" :key="'Config-' + index"
-                    :class="{ activeOrange: active == 'one0-' + index }"
-                    @click="clickgeometry($event, index, 'Config-' + index)">
+                    :class="{ activeOrange: active == 'Config-' + index }"
+                    @click="clickgeometry($event, index, 'Config-' + index,item.titlie )">
                     <div class="item2 ">
                       <el-image :src="getImgPath(item.url)" fit="cover" />
                       <span>{{ item.titlie }}</span>
@@ -38,7 +38,7 @@
               <el-tab-pane label="优化流程" name="Role">
                 <div class="imgzong">
                   <div class="listitem lbg_color3 bkcolor3"
-                    @click="clickgeometry($event, index, 'Role-'+ '1' )">
+                    @click="clickgeometry($event, index, 'Role-'+ '1',modelban)">
                     <div class="item2 ">
                       <el-image :src="getImgPath('r1.png')" fit="cover" />
                       <span>{{ modelban }}</span>
@@ -59,7 +59,7 @@
                     </div>
                   </div>
                   <div class="listitem lbg_color3 bkcolor3"
-                    @click="clickgeometry($event, index, 'Role-'+ '2' )">
+                    @click="clickgeometry($event, index, 'Role-'+ '2',undmodel  )">
                     <div class="item2 ">
                       <el-image :src="getImgPath('r2.png')" fit="cover" />
                       <span>{{ undmodel }}</span>
@@ -80,14 +80,14 @@
                   <!-- <button @click="etImgPath()"></button> -->
                   <div class="listitem lbg_color3 bkcolor3" v-for="(item, index) in tasktion" :key="'Task-' + index"
                     :class="{ activeOrange: active == 'Task-' +'11' }"
-                    @click="clickgeometry($event, index, 'Task-' + '11')">
+                    @click="clickgeometry($event, index, 'Task-' + '11',item.titlie )">
                     <div class="item2 ">
                       <el-image :src="getImgPath(item.url)" fit="cover" />
                       <span>{{ item.titlie }}</span>
                     </div>
                   </div>
                   <div class="listitem lbg_color3 bkcolor3"
-                    @click="clickgeometry($event, index, 'Task-'+ '22' )">
+                    @click="clickgeometry($event, index, 'Task-'+ '22',tasksel )">
                     <div class="item2 ">
                       <el-image :src="getImgPath('t1.png')" fit="cover" />
                       <span>{{ tasksel }}</span>
@@ -103,7 +103,7 @@
                   </div>
                   <div class="listitem lbg_color3 bkcolor3" v-for="(item, index) in tasktion2" :key="'Task-' + index"
                     :class="{ activeOrange: active == 'Task-' + index }"
-                    @click="clickgeometry($event, index, 'Task-' + index)">
+                    @click="clickgeometry($event, index, 'Task-' + index,item.titlie )">
                     <div class="item2 ">
                       <el-image :src="getImgPath(item.url)" fit="cover" />
                       <span>{{ item.titlie }}</span>
@@ -116,14 +116,14 @@
                   <div class="listitem lbg_color3 bkcolor3 threelist" >
                     <div class="item2 floatitem" v-for="(item, index) in Threelist" :key="'Three-' + index"
                     :class="{ activeOrange: active == 'Three-' + index }"
-                    @click="clickgeometry($event, index, 'Three-' + index)">
+                    @click="clickgeometry($event, index, 'Three-' + index,item.titlie )">
                       <el-image :src="getImgPath(item.url)" fit="cover" />
                       <span>{{ item.titlie }}</span>
                     </div>
                   </div>
                   <div class="listitem lbg_color3 bkcolor3" v-for="(item, index) in Threelist1" :key="'Three1-' + index"
                     :class="{ activeOrange: active == 'Three1' + index }"
-                    @click="clickgeometry($event, index, 'Three1' + index)">
+                    @click="clickgeometry($event, index, 'Three1' + index,item.titlie )">
                     <div class="item2 ">
                       <el-image :src="getImgPath(item.url)" fit="cover" />
                       <span>{{ item.titlie }}</span>
@@ -137,7 +137,7 @@
                   <!-- <button @click="etImgPath()"></button> -->
                   <div class="listitem lbg_color3 bkcolor3" v-for="(item, index) in Sixlist" :key="'Six' + index"
                     :class="{ activeOrange: active == 'Six' + index }"
-                    @click="clickgeometry($event, index, 'Six' + index)">
+                    @click="clickgeometry($event, index, 'Six' + index,item.titlie )">
                     <div class="item2 ">
                       <el-image :src="getImgPath(item.url)" fit="cover" />
                       <span>{{ item.titlie }}</span>
@@ -149,7 +149,7 @@
                 <div class="imgzong">
                   <div class="listitem lbg_color3 bkcolor3" v-for="(item, index) in Sevenlist" :key="'Seven' + index"
                     :class="{ activeOrange: active == 'Seven' + index }"
-                    @click="clickgeometry($event, index, 'Seven' + index)">
+                    @click="clickgeometry($event, index, 'Seven' + index,item.titlie )">
                     <div class="item2 ">
                       <el-image :src="getImgPath(item.url)" fit="cover" />
                       <span>{{ item.titlie }}</span>
@@ -161,7 +161,7 @@
                 <div class="imgzong">
                   <div class="listitem lbg_color3 bkcolor3" v-for="(item, index) in eightlist" :key="'eight' + index"
                     :class="{ activeOrange: active == 'eight' + index }"
-                    @click="clickgeometry($event, index, 'eight' + index)">
+                    @click="clickgeometry($event, index, 'eight' + index,item.titlie )">
                     <div class="item2 ">
                       <el-image :src="getImgPath(item.url)" fit="cover" />
                       <span>{{ item.titlie }}</span>
@@ -172,7 +172,9 @@
             </el-tabs>
           </div>
           <!-- 新建任务 -->
-          <el-dialog v-model="dialog.newdialog" align-center :modal="false" :close-on-click-modal="true"
+          <el-dialog v-model="dialog.newdialog"
+          v-if="tabactive=='新建任务'"
+          align-center :modal="false" :close-on-click-modal="true"
             :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
             :before-close="handleClose" width="480" class="dialog_class bgcolor tianjia">
 
@@ -216,7 +218,9 @@
             </template>
           </el-dialog>
           <!-- 问题设定 -->
-          <el-dialog v-model="dialog.setdialog" align-center :modal="false" :close-on-click-modal="true"
+          <el-dialog v-model="dialog.setdialog" 
+          v-if="tabactive=='问题设定'"
+          align-center :modal="false" :close-on-click-modal="true"
             :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
             :before-close="handleClose" width="480" class="dialog_class bgcolor tianjia">
 
@@ -249,7 +253,9 @@
             </template>
           </el-dialog>
           <!-- 优化目标 -->
-          <el-dialog v-model="dialog.targetdialog" align-center :modal="false" :close-on-click-modal="true"
+          <el-dialog v-model="dialog.targetdialog"
+          v-if="tabactive=='优化目标'"
+           align-center :modal="false" :close-on-click-modal="true"
             :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
             :before-close="handleClose" width="50%" class="dialog_class bgcolor tianjia">
 
@@ -316,7 +322,9 @@
             </template>
           </el-dialog>
           <!-- 设计变量 -->
-          <el-dialog v-model="dialog.design" align-center :modal="false" :close-on-click-modal="true"
+          <el-dialog v-model="dialog.design" 
+          v-if="tabactive=='设计变量'"
+          align-center :modal="false" :close-on-click-modal="true"
             :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
             :before-close="handleClose" width="50%" class="dialog_class bgcolor tianjia">
 
@@ -349,7 +357,9 @@
             </template>
           </el-dialog>
            <!-- 约束条件 -->
-           <el-dialog v-model="dialog.constraint" align-center :modal="false" :close-on-click-modal="true"
+           <el-dialog v-model="dialog.constraint" 
+           v-if="tabactive=='约束条件'"
+           align-center :modal="false" :close-on-click-modal="true"
             :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
             :before-close="handleClose" width="800" class="dialog_class bgcolor tianjia">
 
@@ -403,7 +413,9 @@
             </template>
           </el-dialog>
           <!-- 外形参数化 -->
-          <el-dialog v-model="dialog.parameter" align-center :modal="false" :close-on-click-modal="true"
+          <el-dialog v-model="dialog.parameter"
+          v-if="tabactive=='Task-11'"
+          align-center :modal="false" :close-on-click-modal="true"
             :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
             :before-close="handleClose" width="480" class="dialog_class bgcolor tianjia sel">
 
@@ -437,7 +449,9 @@
             </template>
           </el-dialog>
            <!-- 代理模型 -->
-           <el-dialog v-model="dialog.agency" align-center :modal="false" :close-on-click-modal="true"
+           <el-dialog v-model="dialog.agency"
+           v-if="tabactive=='代理模型'"
+           align-center :modal="false" :close-on-click-modal="true"
             :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
             :before-close="handleClose" width="480" class="dialog_class bgcolor tianjia sel">
 
@@ -494,7 +508,9 @@
             </template>
           </el-dialog>
           <!-- 终止条件 -->
-          <el-dialog v-model="dialog.enddialog" align-center :modal="false" :close-on-click-modal="true"
+          <el-dialog v-model="dialog.enddialog" 
+          v-if="tabactive=='终止条件 '"
+          align-center :modal="false" :close-on-click-modal="true"
             :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
             :before-close="handleClose" width="480" class="dialog_class bgcolor tianjia sel">
 
@@ -543,7 +559,9 @@
             </template>
           </el-dialog>
           <!-- 加点方法 -->
-          <el-dialog v-model="dialog.addfun" align-center :modal="false" :close-on-click-modal="true"
+          <el-dialog v-model="dialog.addfun" 
+          v-if="tabactive=='加点方法'"
+          align-center :modal="false" :close-on-click-modal="true"
             :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
             :before-close="handleClose" width="480" class="dialog_class sel bgcolor tianjia sel">
 
@@ -646,7 +664,9 @@
             </template>
           </el-dialog>
           <!-- 任务管理 -->
-          <el-dialog v-model="dialog.task" align-center :modal="false" :close-on-click-modal="true"
+          <el-dialog v-model="dialog.task"
+          v-if="tabactive=='任务管理'"
+          align-center :modal="false" :close-on-click-modal="true"
             :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
             :before-close="handleClose" width="800px" class="dialog_class bgcolor tianjia">
 
@@ -696,7 +716,9 @@
             </template>
           </el-dialog>
            <!-- 任务管理 -->
-           <el-dialog v-model="dialog.guanli" align-center :modal="false" :close-on-click-modal="true"
+           <el-dialog v-model="dialog.guanli"
+           v-if="tabactive=='任务管理'"
+           align-center :modal="false" :close-on-click-modal="true"
             :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
             :before-close="handleClose" width="800px" class="dialog_class bgcolor tianjia">
 
@@ -744,18 +766,33 @@
             </template>
           </el-dialog>
           <!-- 内容区 -->
-          <div>
+          <div class="main  mianflex">
             <!--left菜单栏  -->
-            <div class="left_main"></div>
+            <div class="left_main">
+            <div class="left_main_content">
+              <el-tree
+              class="custom-tree"
+            style="max-width: 300px"
+            :data="treeData"
+            :props="defaultProps"
+            @node-click="handleNodeClick"
+            :highlight-current="true"
+            :default-expanded-keys="defaultExpandedArr"
+             node-key="id"
+          />
+            </div>
+            
+            </div>
           <!-- 放图形 -->
-            <div class="main"></div>
+            <div class="main_model">图形结构</div>
              <!-- 优化监控 -->
-             <div class="opt_moitor" v-if="tabactive=='Three10'">
+             <div class="opt_moitor" v-if="tabactive=='优化监控'">
             <optmonitor />
           </div>
-          <div class="opt_moitor" v-if="tabactive=='Six0'">
+          <div class="opt_moitor" v-if="tabactive=='可视化'">
             <sixtop />
             <sixbottom/>
+         
           </div>
           </div>
        
@@ -776,6 +813,122 @@ import s0 from "@/assets/img/s0.png"
 import optmonitor from './echart/optimize_monitor.vue'
 import sixtop from './echart/six_top.vue'
 import sixbottom from './echart/six_bottom.vue'
+const treeData = ref([
+  { 
+    id:0,
+    label: '优化设计',
+    children: [
+      {
+        id:1,
+        label: '任务',
+        children: [
+          {
+            label: '任务编号',
+          },
+          {
+            label: '任务名称',
+          },
+          {
+            label: '任务类型',
+          },
+        ],
+      },
+      {
+        id:2,
+        label: '优化问题',
+        children: [
+          {
+            label: '问题设定',
+          },
+          {
+            label: '优化目标',
+          },
+          {
+            label: '设计变量',
+          },
+          {
+            label: '约束条件',
+          },
+        ],
+      },
+      {
+        id:3,
+        label: '优化流程',
+        children: [
+          {
+            label: '模版',
+          },
+          {
+            label: '自定义',
+          },
+        
+        ],
+      },
+      {
+        id:4,
+        label: '优化模型',
+        children: [
+          {
+            label: '外形参数化',
+          },
+          {
+            label: '学科组件',
+          },
+          {
+            label: '代理模型',
+          },
+          {
+            label: '加点方法',
+          },
+          {
+            label: '终止条件',
+          },
+        
+        ],
+      },
+      {
+        id:5,
+        label: '优化运行',
+        children: [
+          {
+            label: '任务提交',
+          },
+          {
+            label: '优化监控',
+          },
+        
+        ],
+      },
+      {
+        id:6,
+        label: '优化结果',
+        children: [
+          {
+            label: '可视化',
+          },
+          {
+            label: '查看报告',
+          },
+          {
+            label: '导出报告',
+          },
+        
+        ],
+      },
+    ],
+  },
+
+])
+
+
+let  defaultExpandedArr=ref([]);
+const defaultProps = {
+  children: 'children',
+  label: 'label',
+}
+treeData.value.forEach((item) => {
+  defaultExpandedArr.value.push(item.id);
+      });
 const activeName = ref('User')
 let active = ref('');
 let tabactive=ref("");
@@ -1065,52 +1218,59 @@ const  dialogcolse=()=>{
   dialog.value.task = false;
   dialog.value.guanli = false;
 }
+// Tree的点击事件
+const handleNodeClick = (data) => {
+   console.log(data)
+   tabactive.value=data.label;
+   dialogbolen();
+}
+
 // 模块选择
-const clickgeometry = (e, index, key) => {
+const clickgeometry = (e, index, key,name) => {
   console.log(key);
-  tabactive.value=key;
+  console.log(name);
+  tabactive.value=name;
+  dialogbolen();
+}
+ const dialogbolen=()=>{
   switch (tabactive.value) {
-    case "one0-0":
-      dialog.value.newdialog = true;
+    case "新建任务":
+       dialog.value.newdialog = true;
       break;
-    case "Config-0":
+    case "问题设定":
       dialog.value.setdialog = true;
       break;
-    case "Config-1":
+    case "优化目标":
       dialog.value.targetdialog = true;
       break;
-      case "Config-2":
+      case "设计变量":
       dialog.value.design = true;
       break;
-      case "Config-3":
+      case "约束条件":
       dialog.value.constraint = true;
       break;
-      case "Task-11":
+      case "外形参数化":
       dialog.value.parameter = true;
       break;
-      case "Task-0":
+      case "代理模型":
       dialog.value.agency = true;
       break;
-      case "Task-1":
+      case "加点方法":
       dialog.value.addfun = true;
       break;
-      case "Task-2":
+      case "终止条件":
       dialog.value.enddialog = true;
       break;
-      case "Seven0":
+      case "任务管理":
       dialog.value.task = true;
       break;
-      case "Seven1":
+      case "任务检索":
       dialog.value.guanli  = true;
       break;
     default: 
-      console.log(1111)
-
-     
-      
+      console.log(1111)   
   }
-}
-
+ }
 const deviceSelectChange = () => {
 
 }