6.14

src/style/index.css

@@ -1,6 +1,8 @@
 /* reset.css */
 html {
     box-sizing: border-box; /* 统一盒模型计算方式 */
+    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
 }
 *, *::before, *::after {
     margin: 0;
@@ -9,6 +11,8 @@ html {
 }
 body {
     font-family: Arial, sans-serif; /* 设定基本字体族 */
+    font-family: '微软雅黑', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei', Arial, sans-serif;
     line-height: 1.5; /* 行高 */
 }
 h1, h2, h3, h4, h5, h6 {
@@ -197,7 +201,7 @@ text-transform: none;
   .headersele{
     width: 97px;
     height: 9px;
-    margin-top: -15px;
+    margin-top: -5px;
     background-color: #eee;
   }
   .headersele .select-trigger{
@@ -304,23 +308,94 @@ border-radius: 10px 10px 10px 10px;
   }
   /* 基础样式 */
 .custom-tree .el-tree-node__label {
-  font-weight: bold;
-  font-size: 14px; /* 基础字体大小 */
+  /* font-weight: bold; */
+  font-size: 15px; /* 基础字体大小 */
+  color: #383838 ;
+  font-family: 'Inter-Regular';
+}
+.treetiele{
+  padding: 6px;
+  font-family: Inter, Inter;
+font-weight: 600;
+font-size: 16px;
+color: #1A1A1A;
+line-height: 24px;
+text-align: left;
+font-style: normal;
+text-transform: none
 }
 .custom-tree .el-tree-node__children .el-tree-node__label {
-  font-size: 14px; /* 第二级字体大小 */
+  font-size: 15px; /* 第二级字体大小 */
   font-weight: 400;
-  color: #212121;
+  color: #383838 ;
+  font-family: 'Inter-Regular';
+  
 }
 .custom-tree .el-tree-node__children .el-tree-node__children .el-tree-node__label {
-  font-size: 12px; /* 第三级字体大小 */
-  color: #000000;
+  font-size: 14px; /* 第三级字体大小 */
+  color: #1A1A1A ;
+  font-family: 'Inter-Regular';
 }
 .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
   background-color: rgba(0,0,0,0);
   color: #0077F0 !important;
+  font-family: 'Inter-Regular';
 }
 .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;
+}
+.el-tabs__item{
+position:relative;
+}
+.el-tabs--card>.el-tabs__header .el-tabs__item.is-active::before{
+  content: "";
+  display: block;
+  width: 45%;
+  height: 2px;
+  background: linear-gradient( 270deg, #1E69FF 0%, #5B91FF 100%);
+  border-radius: 0px 0px 0px 0px;
+  bottom: 3px;
+  position: absolute;
+}
+.el-icon-folder{
+
+  background: url(../assets/img/jia.png)no-repeat 0;
+  content: "";
+  display: block;
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  background-size: 16px;
+}
+.el-icon-collection-tag{
+  background: url(../assets/img/jian.png)no-repeat 0;
+  content: "";
+  display: block;
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  background-size: 16px;
+}
+.treesvgi{
+  display: contents;
+}
+.herader_tabs{
+  text-align: center;
+  font-family: Microsoft YaHei, Microsoft YaHei;
+font-weight: 400;
+font-size: 14px;
+color: #1A1A1A;
+line-height: 27px;
+letter-spacing: 1px;
+text-align: center;
+font-style: normal;
+margin-top: -6px;
+}
+.margr{
+  margin: 0 10px;
+}
+.Role .item2 .el-image{
+  padding: 7px 9px 7px 9px !important;
+
 }

src/views/demo/chine.vue

@@ -0,0 +1,35 @@
+<template>
+    <!-- 接受mittindex.vue的传值 -->
+<h3>兄弟组件</h3>
+<span class="color">{{child}}</span>
+<p>给哥哥的玩具{{aotemtoy}}</p>
+<button @click="fun()">点我</button>
+<!-- 折线图 -->
+  <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 emitter from "@/utils/emitter";
+let emit = defineEmits(['',])
+let child = ref("飞机")
+let aotemtoy = ref("奥特曼")
+emitter.on("child-fun",val=>{
+    child.value=val;
+})
+const fun=()=>{
+    emitter.emit("chalboy",aotemtoy.value)
+}
+</script>
+<style lang="scss" scoped>
+.color{
+    font-size: 24px;
+    color: blue;
+}
+</style>
+

src/views/demo/index.vue

@@ -0,0 +1,32 @@
+<template>
+    <!-- emitter mitt传值案例 -->
+<h3 class="boy">{{boy}}</h3>
+<!-- 折线图 -->
+<button @click="funboy()">点我</button>
+  <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 emitter from "@/utils/emitter";
+let emit = defineEmits(['',])
+let boy = ref("玩具汽车")
+const funboy=()=>{
+    emitter.emit("child-fun",boy.value)
+}
+emitter.on("chalboy",val=>{
+    boy.value=val;
+})
+</script>
+<style lang="scss" scoped>
+.boy{
+    font-size: 24px;
+    color: red;
+}
+</style>
+

src/views/index.vue

@@ -35,11 +35,69 @@
                   </div>
                 </div>
               </el-tab-pane>
-              <el-tab-pane label="优化流程" name="Role">
-                <div class="imgzong">
-                  <div class="listitem lbg_color3 bkcolor3"
-                    @click="clickgeometry($event, index, 'Role-'+ '1',modelban)">
-                    <div class="item2 ">
+              <el-tab-pane label="分析流程" name="Role">
+                
+              
+                <div class="imgzong Role">
+                    <!-- f1 -->
+                <div class="listitem lbg_color3 bkcolor3" >
+                <div class="threelist">
+                    <div class="item2 floatitem" v-for="(item, index) in Rolelist1" :key="'f1-' + index"
+                    :class="{ activeOrange: active == 'f1-' + index }"
+                    @click="clickgeometry($event, index, 'f1-' + index,item.titlie )">
+                      <el-image :src="getImgPath(item.url)" fit="cover" />
+                      <span>{{ item.titlie }}</span>
+                    </div>
+                  </div>
+                  <p class="herader_tabs">数据组件</p>
+
+                  </div>
+                  <!-- f2 -->
+                  <div class="listitem lbg_color3 bkcolor3 " >
+                    <div class="threelist">
+                    <div class="item2 floatitem" v-for="(item, index) in Rolelist2" :key="'f2-' + index"
+                    :class="{ activeOrange: active == 'f2-' + index }"
+                    @click="clickgeometry($event, index, 'f2-' + index,item.titlie )">
+                      <el-image :src="getImgPath(item.url)" fit="cover" />
+                      <span>{{ item.titlie }}</span>
+                    </div>
+                  </div>
+                    <p class="herader_tabs">数据组件</p>
+                  </div>
+                  <!-- f3 -->
+                  <div class="listitem lbg_color3 bkcolor3 " >
+                    <div class="threelist">
+                    <div class="item2 floatitem" v-for="(item, index) in Rolelist3" :key="'f2-' + index"
+                    :class="{ activeOrange: active == 'f2-' + index }"
+                    @click="clickgeometry($event, index, 'f2-' + index,item.titlie )">
+                      <el-image :src="getImgPath(item.url)" fit="cover" />
+                      <span>{{ item.titlie }}</span>
+                    </div>
+                  </div>
+                    <p class="herader_tabs">应用组件</p>
+                  </div>
+                <!-- f4 -->
+                  <div class="listitem lbg_color3 bkcolor3 threelist"
+                   >
+                    <div class="item2 margr"  @click="clickgeometry($event, index, 'Role-'+ '1',modelban)">
+                      <el-image :src="getImgPath('f41.png')" fit="cover" />
+                      <span>{{ modelban }}</span>
+                      <el-select v-model="modelban"  class="no-border headersele" :suffix-icon="CaretBottom">
+                          <el-option-group
+                            v-for="group in optiongroup"
+                            :key="group.label"
+                            :label="group.label"
+                          >
+                            <el-option
+                              v-for="item in group.options"
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value"
+                            />
+                          </el-option-group>
+                        </el-select> 
+                    </div>
+                    <div class="item2 margr"  @click="clickgeometry($event, index, 'Role-'+ '1',modelban)">
                       <el-image :src="getImgPath('r1.png')" fit="cover" />
                       <span>{{ modelban }}</span>
                       <el-select v-model="modelban"  class="no-border headersele" :suffix-icon="CaretBottom">
@@ -57,10 +115,7 @@
                           </el-option-group>
                         </el-select> 
                     </div>
-                  </div>
-                  <div class="listitem lbg_color3 bkcolor3"
-                    @click="clickgeometry($event, index, 'Role-'+ '2',undmodel  )">
-                    <div class="item2 ">
+                    <div class="item2 margr" @click="clickgeometry($event, index, 'Role-'+ '2',undmodel  )">
                       <el-image :src="getImgPath('r2.png')" fit="cover" />
                       <span>{{ undmodel }}</span>
                       <el-select v-model="undmodel"  class="no-border headersele" :suffix-icon="CaretBottom">
@@ -715,9 +770,9 @@
               </div>
             </template>
           </el-dialog>
-           <!-- 任务管理 -->
+           <!-- 任务检索 -->
            <el-dialog v-model="dialog.guanli"
-           v-if="tabactive=='任务管理'"
+           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">
@@ -725,7 +780,7 @@
             <template #header="{ titleId, titleClass }">
               <div class="my-header ">
                 <el-image :src="getImgPath('s11.png')" fit="contain"></el-image>
-                <h4 :id="titleId" :class="titleClass">任务管理</h4>
+                <h4 :id="titleId" :class="titleClass">任务检索</h4>
               </div>
             </template>
             <div>
@@ -770,8 +825,9 @@
             <!--left菜单栏  -->
             <div class="left_main">
             <div class="left_main_content">
+              <p class="treetiele">优化设计</p>
               <el-tree
-              class="custom-tree"
+             class="custom-tree"
             style="max-width: 300px"
             :data="treeData"
             :props="defaultProps"
@@ -779,12 +835,30 @@
             :highlight-current="true"
             :default-expanded-keys="defaultExpandedArr"
              node-key="id"
-          />
+          >        
+          <template #default="{ node, data }">   
+                  <span  class="treesvgi">
+                        <!-- <i v-if="data.expanded" class="el-icon-folder"></i>
+                        <i v-else class="el-icon-collection-tag"></i> -->
+                        <i v-if="!data.children" class=""></i>
+            <!-- 展开后的图标 -->
+            <i v-else-if="node.expanded" class="el-icon-collection-tag"> </i>
+            <!-- 未展开的图标 -->
+            <i v-else class="el-icon-folder"> </i>
+                        <span style="margin-left: 10px;font-size: 15px;">{{ node.label}}</span>
+                  </span>
+  
+                </template>
+          </el-tree>
             </div>
             
             </div>
           <!-- 放图形 -->
-            <div class="main_model">图形结构</div>
+            <div class="main_model">图形结构
+            <h3>mitt.vue</h3>
+              <sixindex/><br>
+              <sixchine/>
+            </div>
              <!-- 优化监控 -->
              <div class="opt_moitor" v-if="tabactive=='优化监控'">
             <optmonitor />
@@ -813,26 +887,28 @@ 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'
+import sixindex from './demo/index.vue'
+import sixchine from './demo/chine.vue'
 const treeData = ref([
-  { 
-    id:0,
-    label: '优化设计',
-    children: [
-      {
-        id:1,
-        label: '任务',
-        children: [
-          {
-            label: '任务编号',
-          },
-          {
-            label: '任务名称',
-          },
-          {
-            label: '任务类型',
-          },
-        ],
-      },
+  // { 
+    // id:0,
+    // label: '优化设计',
+    // children: [
+    //   {
+    //     // id:1,
+    //     // label: '任务',
+    //     // children: [
+    //     //   {
+    //     //     label: '任务编号',
+    //     //   },
+    //     //   {
+    //     //     label: '任务名称',
+    //     //   },
+    //     //   {
+    //     //     label: '任务类型',
+    //     //   },
+    //     // ],
+    //   },
       {
         id:2,
         label: '优化问题',
@@ -853,19 +929,6 @@ const treeData = ref([
       },
       {
         id:3,
-        label: '优化流程',
-        children: [
-          {
-            label: '模版',
-          },
-          {
-            label: '自定义',
-          },
-        
-        ],
-      },
-      {
-        id:4,
         label: '优化模型',
         children: [
           {
@@ -887,7 +950,7 @@ const treeData = ref([
         ],
       },
       {
-        id:5,
+        id:4,
         label: '优化运行',
         children: [
           {
@@ -899,8 +962,9 @@ const treeData = ref([
         
         ],
       },
+      
       {
-        id:6,
+        id:5,
         label: '优化结果',
         children: [
           {
@@ -915,8 +979,19 @@ const treeData = ref([
         
         ],
       },
-    ],
-  },
+      {
+        id:6,
+        label: '数据库管理',
+        children: [
+          {
+            label: '任务检索',
+          },
+        ],
+      },
+     
+    
+  //   ],
+  // },
 
 ])
 
@@ -953,9 +1028,24 @@ let question = ref([
   { url: 'q3.png', titlie: "约束条件" },
 ])
 let roletion = ref([
-  { url: 'r1.png', titlie: "模版" },
+{ url: 'f41.png', titlie: "测试函数模板" },
+  { url: 'r1.png', titlie: "工程优化模板" },
   { url: 'r2.png', titlie: "自定义" },
 ])
+let Rolelist1 = ref([
+{ url: 'f11.png', titlie: "开始" },
+  { url: 'f12.png', titlie: "结束" },
+  { url: 'f13.png', titlie: "判断" },
+])
+let Rolelist2 = ref([
+{ url: 'f21.png', titlie: "输入" },
+  { url: 'f22.png', titlie: "输出" },
+])
+let Rolelist3= ref([
+{ url: 'f31.png', titlie: "Excel" },
+  { url: 'f32.png', titlie: "Python" },
+  { url: 'f33.png', titlie: "Matlab" },
+])
 let tasktion = ref([
   { url: 't0.png', titlie: "外形参数化" },
 ])
@@ -1283,4 +1373,10 @@ const targetclick=()=>{
   console.log(tableData.value)
 }
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+//有子节点 且未展开
+.left_main_content :deep(.el-icon svg) {
+  display: none;
+}
+//没有子节点
+</style>