liuqiao 1 年之前
父节点
当前提交
6f0f44731b
共有 4 个文件被更改,包括 335 次插入87 次删除
  1. 二进制
      src/assets/img/Framem.png
  2. 78 6
      src/style/index.css
  3. 3 2
      src/views/echart/six_bottom.vue
  4. 254 79
      src/views/index.vue

二进制
src/assets/img/Framem.png


+ 78 - 6
src/style/index.css

@@ -22,8 +22,9 @@ a {
     text-decoration: none; /* 去除链接下划线 */
     color: #007bff; /* 设定颜色 */
 }
-ul, ol {
+ul, ol,li {
     list-style: none; /* 清除列表项符号 */
+
 }
 img {
     max-width: 100%; /* 图片最大宽度自动调整到容器尺寸 */
@@ -252,12 +253,18 @@ text-transform: none;
   }
   .opt_moitor{
     width: 340px;
-    height: calc(100vh - 184px);
+  height:calc(100vh - 341px);
     background: #FFFFFF;
     box-shadow: 2px 0px 11px 0px rgba(0,0,0,0.12);
     border-radius: 10px 10px 10px 10px;
     float: right;
     padding: 12px;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+  .opt_moitor h3{
+    text-align: left;
   }
   .echartitem{
     width: 100%;
@@ -304,7 +311,9 @@ border-radius: 10px 10px 10px 10px;
   }
   .main_model{
     width: 100%;
+    height:calc(100vh - 183px) ;
     text-align: center;
+    position: relative;
   }
   /* 基础样式 */
 .custom-tree .el-tree-node__label {
@@ -324,15 +333,37 @@ text-align: left;
 font-style: normal;
 text-transform: none
 }
-.custom-tree .el-tree-node__children .el-tree-node__label {
-  font-size: 15px; /* 第二级字体大小 */
+.el-tree-node__content{
+  position: relative;
+}
+.custom-tree .el-tree-node__children .el-tree-node__content .treesvgi  i::before{
+  
+content: "";
+display: block;
+width: 1px;
+height: 24px;
+/* background: #000; */
+border-left: 0.5px dashed #383838;
+bottom:0px;
+position: absolute;
+transform: scale(0.5, 1);
+}
+.el-tree .el-tree-node__content{
+  font-size: 16px; /* 这里设置为20px,你可以根据需求调整大小 */
+}
+.custom-tree .el-tree-node__children .el-tree-node__content .treesvgi {
+  font-size: 14px !important; /* 第二级字体大小 */
   font-weight: 400;
   color: #383838 ;
   font-family: 'Inter-Regular';
   
 }
+.custom-tree .el-tree-node__content.is-root {
+  font-weight: bold; /* 设置一级节点字体加粗 */
+  color: red; /* 设置一级节点字体颜色为红色 */
+}
 .custom-tree .el-tree-node__children .el-tree-node__children .el-tree-node__label {
-  font-size: 14px; /* 第三级字体大小 */
+  font-size: 12px; /* 第三级字体大小 */
   color: #1A1A1A ;
   font-family: 'Inter-Regular';
 }
@@ -358,6 +389,7 @@ position:relative;
   bottom: 3px;
   position: absolute;
 }
+
 .el-icon-folder{
 
   background: url(../assets/img/jia.png)no-repeat 0;
@@ -398,4 +430,44 @@ margin-top: -6px;
 .Role .item2 .el-image{
   padding: 7px 9px 7px 9px !important;
 
-}
+}
+.femFooter {
+  position: absolute;
+  /* position: fixed; */
+  width: 100%;
+  bottom: 0px;
+}
+.el-footer{
+ --el-footer-padding: 0 0 0 20px;
+    --el-footer-height: auto;
+}
+.left_main{
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.footerText .el-textarea__inner{
+  width: 100%;
+  height: 130px!important;
+  border: 0;
+  font-size: 12px;
+  color: #333;
+  padding: 2px;
+  padding-bottom: 20px;
+}
+.main_model{
+  width: 100%;
+  /* height: 80vh; */
+  display: flex;
+  flex-direction: column;
+
+}
+.main_container{
+  width: 100%;
+}
+.maxh221{
+ height: calc(100vh - 361px);
+  flex: 1;
+}
+/* .main_container{
+  display: flex;
+} */

+ 3 - 2
src/views/echart/six_bottom.vue

@@ -1,8 +1,9 @@
 <template>
     <!-- 优化监控 -->
-<h3 class="opt_tltie">散点图</h3>
 <!-- 折线图 -->
-  <div>
+  <div style="margin-top: 40px;">
+    
+<h3 class="opt_tltie">散点图</h3>
   <div class="echartitem">
     <div id="linesan" style="width: 100%;height:1.25rem;"></div>
   </div>

+ 254 - 79
src/views/index.vue

@@ -22,22 +22,8 @@
                   </div>
                 </div>
               </el-tab-pane>
-              <el-tab-pane label="优化问题" name="Config">
-                <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 == '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>
-                    </div>
-                  </div>
-                </div>
-              </el-tab-pane>
+           
               <el-tab-pane label="分析流程" name="Role">
-                
-              
                 <div class="imgzong Role">
                     <!-- f1 -->
                 <div class="listitem lbg_color3 bkcolor3" >
@@ -49,7 +35,7 @@
                       <span>{{ item.titlie }}</span>
                     </div>
                   </div>
-                  <p class="herader_tabs">数据组件</p>
+                  <p class="herader_tabs">逻辑组件</p>
 
                   </div>
                   <!-- f2 -->
@@ -79,22 +65,28 @@
                 <!-- f4 -->
                   <div class="listitem lbg_color3 bkcolor3 threelist"
                    >
-                    <div class="item2 margr"  @click="clickgeometry($event, index, 'Role-'+ '1',modelban)">
+                    <!-- <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>
+                      <span>{{f4ce }}</span>
+                        <el-select v-model="f4ce"  class="no-border headersele" :suffix-icon="CaretBottom">
+                          <el-option
+                            v-for="item in optiongroup1"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value">
+                          </el-option>
+                        </el-select> 
+                    </div> -->
+                    <div class="item2 margr" @click="clickgeometry($event, index, 'Role-'+ '2',undmodel  )">
+                      <el-image :src="getImgPath('f41.png')" fit="cover" />
+                      <span>{{ f4ce }}</span>
+                      <el-select v-model="f4ce"  class="no-border headersele" :suffix-icon="CaretBottom">
+                          <el-option
+                            v-for="item in optiongroup1"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value">
+                          </el-option>
                         </el-select> 
                     </div>
                     <div class="item2 margr"  @click="clickgeometry($event, index, 'Role-'+ '1',modelban)">
@@ -130,9 +122,32 @@
                   </div>
                 </div>
               </el-tab-pane>
+              <el-tab-pane label="优化问题" name="Config">
+                <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 == '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>
+                    </div>
+                  </div>
+                </div>
+              </el-tab-pane>
               <el-tab-pane label="优化模型" name="Task">
                 <div class="imgzong">
                   <!-- <button @click="etImgPath()"></button> -->
+                  <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,item.titlie )">
+                    <div class="item2 ">
+                      <el-image :src="getImgPath(item.url)" fit="cover" />
+                      <span>{{ item.titlie }}</span>
+                    </div>
+                  </div>
+                </div>
+                <!-- <div class="imgzong">
                   <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',item.titlie )">
@@ -164,7 +179,7 @@
                       <span>{{ item.titlie }}</span>
                     </div>
                   </div>
-                </div>
+                </div> -->
               </el-tab-pane>
               <el-tab-pane label="优化运行" name="Three">
                 <div class="imgzong">
@@ -613,59 +628,37 @@
               </div>
             </template>
           </el-dialog>
-          <!-- 加点方法 -->
-          <el-dialog v-model="dialog.addfun" 
-          v-if="tabactive=='加点方法'"
+          <!-- 优化算法 -->
+          <el-dialog v-model="dialog.sufun" 
+          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">
 
             <template #header="{ titleId, titleClass }">
               <div class="my-header ">
-                <el-image :src="getImgPath('t3.png')" fit="contain"></el-image>
-                <h4 :id="titleId" :class="titleClass">加点方法</h4>
+                <el-image :src="getImgPath('Framem.png')" fit="contain"></el-image>
+                <h4 :id="titleId" :class="titleClass">优化算法</h4>
               </div>
             </template>
             <div class="numberinput">
-              <el-form>
-                <el-form-item label="最大样本点数:" :label-width="formLabelWidth1">
-                  <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
-                </el-form-item>
-                <el-form-item label="加点准则:" :label-width="formLabelWidth1">
-                  <el-select   v-model="addval" :suffix-icon="CaretBottom" placeholder="请选择">
+              <!-- class="border2" -->
+              <div>
+                <!-- <div class="title2">GA遗传算法</div> -->
+                <el-form-item label="优化算法" :label-width="formLabelWidth1">
+                  <el-select   v-model="ys" :suffix-icon="CaretBottom" placeholder="请选择">
                           <el-option
-                            v-for="item in addlist"
+                            v-for="item in yslist"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                           </el-option>
                         </el-select>
                 </el-form-item>
-                <el-form-item label="单次迭代新增样本点数:" :label-width="formLabelWidth1">
+                     <el-form-item label="种群规模:" :label-width="formLabelWidth1">
                   <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
                 </el-form-item>
-                <el-form-item label="子优化方法:" :label-width="formLabelWidth1">
-                  <el-input v-model="name" maxlength="18"
-                    oninput="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" class="w-50 m-2"
-                    placeholder="请输入" />
-                </el-form-item>
-                <el-form-item label="加点准则:" :label-width="formLabelWidth1">
-                  <el-select   v-model="addval1" :suffix-icon="CaretBottom" placeholder="请选择">
-                          <el-option
-                            v-for="item in addlist1"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value">
-                          </el-option>
-                        </el-select>
-                </el-form-item>
-              </el-form>
-              <div class="border2">
-                <div class="title2">GA遗传算法</div>
-                <el-form-item label="种群规模:" :label-width="formLabelWidth1">
-                  <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
-                </el-form-item>
-                <el-form-item label="最大进化代数:" :label-width="formLabelWidth1">
+                <el-form-item label="最大进化代数:" :label-width="formLabelWidth1">
                   <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
                 </el-form-item>
                 <el-form-item label="交叉概率:" :label-width="formLabelWidth1">
@@ -707,8 +700,80 @@
                           </el-option>
                         </el-select>
                 </el-form-item>
+                <el-form-item label="precision:" :label-width="formLabelWidth1">
+                  <el-select   v-model="addval7" :suffix-icon="CaretBottom" placeholder="请选择">
+                          <el-option
+                            v-for="item in addlist7"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value">
+                          </el-option>
+                        </el-select>
+                </el-form-item>
+                <el-form-item label="GPU" :label-width="formLabelWidth1">
+                  <el-select   v-model="addval8" :suffix-icon="CaretBottom" placeholder="请选择">
+                          <el-option
+                            v-for="item in addlist8"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value">
+                          </el-option>
+                        </el-select>
+                </el-form-item>
               </div>
             </div>
+            <template #footer>
+              <div class="dialog-footer">
+                <el-button @click="dialog.sufun = false">取消</el-button>
+                <el-button type="primary" @click="dialog.sufun = false">
+                  确定
+                </el-button>
+              </div>
+            </template>
+          </el-dialog>
+          <!-- 加点方法 -->
+          <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">
+
+            <template #header="{ titleId, titleClass }">
+              <div class="my-header ">
+                <el-image :src="getImgPath('t3.png')" fit="contain"></el-image>
+                <h4 :id="titleId" :class="titleClass">加点方法</h4>
+              </div>
+            </template>
+            <div class="numberinput">
+              <el-form>
+                <el-form-item label="最大样本点数:" :label-width="formLabelWidth1">
+                  <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
+                </el-form-item>
+                <el-form-item label="加点准则:" :label-width="formLabelWidth1">
+                  <el-select   v-model="addval" :suffix-icon="CaretBottom" placeholder="请选择">
+                          <el-option
+                            v-for="item in addlist"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value">
+                          </el-option>
+                        </el-select>
+                </el-form-item>
+                <el-form-item label="单次迭代新增样本点数:" :label-width="formLabelWidth1">
+                  <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
+                </el-form-item>
+                <el-form-item label="约束处理方法:" :label-width="formLabelWidth1">
+                  <el-select   v-model="addval1" :suffix-icon="CaretBottom" placeholder="请选择">
+                          <el-option
+                            v-for="item in addlist1"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value">
+                          </el-option>
+                        </el-select>
+                </el-form-item>
+              </el-form>
+            </div>
             <template #footer>
               <div class="dialog-footer">
                 <el-button @click="dialog.addfun = false">取消</el-button>
@@ -845,7 +910,7 @@
             <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  style="margin-left: 10px">{{ node.label}}</span>
                   </span>
   
                 </template>
@@ -854,12 +919,14 @@
             
             </div>
           <!-- 放图形 -->
+          <div class="main_container">
             <div class="main_model">图形结构
+              <div  class="maxh221">
             <h3>mitt.vue</h3>
               <sixindex/><br>
               <sixchine/>
-            </div>
-             <!-- 优化监控 -->
+              <!-- 右侧边栏开始 -->
+                  <!-- 优化监控echarts -->
              <div class="opt_moitor" v-if="tabactive=='优化监控'">
             <optmonitor />
           </div>
@@ -868,6 +935,45 @@
             <sixbottom/>
          
           </div>
+              <!-- 结束 -->
+            </div>
+            <el-footer
+              class="femFooter"
+            
+            >
+              <!-- 日志 -->
+              <div class="footerTitle   el-tag--primary">
+              <div>
+                <p>信息栏</p>
+              </div>
+              <div>
+                <li
+                  class="exloadbox"
+                  v-show="elodingfalse"
+                >
+                  <span>正在求解中</span>
+                  <i class="el-icon-loading"></i>
+                </li>
+                <li>
+                  <span >清空</span>
+                </li>
+                <li>
+                  <span @click="footerShows('foot')">&#9650;&#9660;</span>
+                </li>
+              </div>
+            </div> 
+               <div class="footerTextBox"   v-if="footerShow">
+                <el-input
+                  class="footerText"
+                  type="textarea"
+                  id="textarea_id"
+                  v-model="logs"
+                ></el-input>
+              </div> 
+            </el-footer>
+            </div> 
+          </div>
+         
           </div>
        
          
@@ -889,6 +995,9 @@ 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'
+let logs=ref("信息框");
+let elodingfalse=ref(false);
+let footerShow=ref(true);
 const treeData = ref([
   // { 
     // id:0,
@@ -931,20 +1040,14 @@ const treeData = ref([
         id:3,
         label: '优化模型',
         children: [
-          {
-            label: '外形参数化',
-          },
-          {
-            label: '学科组件',
-          },
           {
             label: '代理模型',
           },
           {
-            label: '加点方法',
+            label: '优化算法',
           },
           {
-            label: '终止条件',
+            label: '加点方法',
           },
         
         ],
@@ -1051,8 +1154,9 @@ let tasktion = ref([
 ])
 let tasktion2 = ref([
   { url: 't2.png', titlie: "代理模型" },
+  { url: 'Framem.png', titlie: "优化算法" },
   { url: 't3.png', titlie: "加点方法" },
-  { url: 't4.png', titlie: "终止条件" },
+ 
 ])
 let Threelist = ref([
   { url: 'tt.png', titlie: "开始" },
@@ -1104,6 +1208,11 @@ let addval=ref("EI + MSP")
 let addlist = ref([
 { label: 'EI + MSP', value: 'EI + MSP' },
 ])
+
+let yslist = ref([
+{ label: 'GA遗传算法', value: 'GA遗传算法' },
+{ label: 'PSO', value: 'PSO' },
+])
 let addval1=ref("概率相乘法")
 let addlist1 = ref([
 { label: '概率相乘法', value: '概率相乘法' },
@@ -1113,6 +1222,7 @@ let addlist2 = ref([
 { label: 'SBX交叉', value: 'SBX交叉' },
 ])
 let addval3=ref("最佳保留策略")
+let ys=ref("GA遗传算法")
 let addlist3 = ref([
 { label: '最佳保留策略', value: '最佳保留策略' },
 ])
@@ -1120,6 +1230,14 @@ let addval4=ref("倒位变异")
 let addlist4 = ref([
 { label: '倒位变异', value: '倒位变异' },
 ])
+let addval7=ref("1e-7")
+let addlist7 = ref([
+{ label: '1e-7', value: '1e-7' },
+])
+let addval8=ref("YES")
+let addlist8 = ref([
+{ label: 'YES', value: 'YES' },
+])
 let dialog = ref({
   newdialog: false,
   setdialog: false,
@@ -1130,6 +1248,7 @@ let dialog = ref({
   agency:false,
   enddialog:false,
   addfun:false,
+  sufun:false,
   task:false,
   guanli:false,
 })
@@ -1154,6 +1273,10 @@ let options4=ref([
 { label: '循环', value: '循环' },
 { label: '条件', value: '条件' },
 ])
+let f4ce=ref("测试函数模版")
+let optiongroup1=ref([
+{ label: '二维Rosenbrock', value: '二维Rosenbrock' }
+])
 let tasklist=ref([
 { label: '气动', value: '气动' },
 { label: '结构', value: '结构' },
@@ -1304,6 +1427,7 @@ const  dialogcolse=()=>{
   dialog.value.parameter = false;
   dialog.value.agency = false;
   dialog.value.addfun = false;
+  dialog.value.sufun = false;
   dialog.value.enddialog = false;
   dialog.value.task = false;
   dialog.value.guanli = false;
@@ -1348,6 +1472,9 @@ const clickgeometry = (e, index, key,name) => {
       case "加点方法":
       dialog.value.addfun = true;
       break;
+      case "优化算法":
+      dialog.value.sufun = true;
+      break;
       case "终止条件":
       dialog.value.enddialog = true;
       break;
@@ -1372,11 +1499,59 @@ const handleClose = (done) => {
 const targetclick=()=>{
   console.log(tableData.value)
 }
+// 日志框
+   // 日志的文本框
+   const  footerShows=(evt)=>{
+      if (evt == "claer") {
+      logs.value = "";
+      } else {
+      footerShow.value = !footerShow.value;
+      }
+    }
 </script>
 <style lang="scss" scoped>
 //有子节点 且未展开
 .left_main_content :deep(.el-icon svg) {
   display: none;
 }
+.footerTitle {
+  display: flex;
+    justify-content: space-between;
+    padding: 5px 20px;
+    font-size: 20px;
+    height: 25px !important;
+    z-index: 99;
+    background-color: #fff;
+    border-radius: 5px 5px 0px 0px;
+    // bottom: 160px;
+    // position: absolute;
+    // width: 100%;
+}
+.footerTitle div {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  font-size: 14px;
+}
+.kongzhit{
+   position: absolute;
+    bottom: 0;
+    width: 100%;
+}
+.footerTitle p {
+  margin: 0;
+}
+.footerTitle span {
+  padding: 5px 10px;
+  cursor: default;
+}
+.footerText .el-textarea__inner {
+  width: 100%;
+  height: 135px!important;
+  border: 0;
+  font-size: 12px;
+  color: #333;
+  padding: 2px;
+}
 //没有子节点
 </style>