9.25更改静态页面

src/views/home.vue

@@ -12,7 +12,62 @@
                 <el-tab-pane label="首页" name="User">
                     <!-- <router-link to="/"> </router-link> -->
                 </el-tab-pane>
-                <el-tab-pane label="运行" name="Three">
+                <el-tab-pane label="问题设定" name="Role">
+                <div class="imgzong Role">
+                  <!-- <div class="listitem lbg_color3 bkcolor3" v-for="(item, index) in Rolelist" :key="'Role-' + index"
+                      :class="{ activeOrange: active == 'Role-' + index }"
+                      @click="clickgeometry($event, index, 'Role-' + index,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 ">
+                    <div class="threelist">
+                      <div class="item2 floatitem wentsd" v-for="(item, index) in Rolelist" :key="'Role' + index"
+                        :class="{ activeOrange: active == 'Role' + index }"
+                        @click="clickgeometry($event, index, 'Role' + index, item.titlie)">
+                        <el-image :src="getImgPath(item.url)" fit="cover" />
+                        <span>{{ item.titlie }}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <!--  -->
+                  <div class="listitem lbg_color3 bkcolor3 ">
+                    <div class="threelist">
+                      <div class="item2 floatitem wentsd" v-for="(item, index) in Rolelist1" :key="'Role1' + index"
+                        :class="{ activeOrange: active == 'Role1' + index }"
+                        @click="clickgeometry($event, index, 'Role1' + index, item.titlie)">
+                        <el-image :src="getImgPath(item.url)" fit="cover" />
+                        <span>{{ item.titlie }}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <!--  -->
+                  <div class="listitem lbg_color3 bkcolor3 ">
+                    <div class="threelist">
+                      <div class="item2 floatitem wentsd" v-for="(item, index) in Rolelist2" :key="'Role2' + index"
+                        :class="{ activeOrange: active == 'Role2' + index }"
+                        @click="clickgeometry($event, index, 'Role2' + index, item.titlie)">
+                        <el-image :src="getImgPath(item.url)" fit="cover" />
+                        <span>{{ item.titlie }}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <!--  -->
+                  <div class="listitem lbg_color3 bkcolor3 ">
+                    <div class="threelist">
+                      <div class="item2 floatitem wentsd" v-for="(item, index) in Rolelist3" :key="'Role3' + index"
+                        :class="{ activeOrange: active == 'Role3' + index }"
+                        @click="clickgeometry($event, index, 'Role3' + index, item.titlie)">
+                        <el-image :src="getImgPath(item.url)" fit="cover" />
+                        <span>{{ item.titlie }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </el-tab-pane>
+                <el-tab-pane label="优化运行" name="Three">
                   <div class="imgzong">
                     <div class="listitem lbg_color3 bkcolor3 threelist" >
                       <div class="item2 floatitem" v-for="(item, index) in Threelist" :key="'Three-' + index"
@@ -22,15 +77,25 @@
                         <span>{{ item.titlie }}</span>
                       </div>
                     </div>
-                    <div class="listitem lbg_color3 bkcolor3" v-for="(item, index) in Threelist1" :key="'Three1-' + index"
+                    <!-- <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,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 ">
+                    <div class="threelist">
+                      <div class="item2 floatitem wentsd1" v-for="(item, index) in Threelist1" :key="'Three1' + index"
+                        :class="{ activeOrange: active == 'Three1' + index }"
+                        @click="clickgeometry($event, index, 'Three1' + index, item.titlie)">
+                        <el-image :src="getImgPath(item.url)" fit="cover" />
+                        <span>{{ item.titlie }}</span>
+                      </div>
                     </div>
                   </div>
+                  </div>
                 
                 </el-tab-pane>
                 <el-tab-pane label="可视化" name="Config">
@@ -1118,7 +1183,7 @@ let options3=ref([
   // treeData.value.forEach((item) => {
   //   defaultExpandedArr.value.push(item.id);
   //       });
-  const activeName = ref('Three')
+  const activeName = ref('Role')
   const activeName1 = ref('message')
   let active = ref('');
   let tabactive=ref("");
@@ -1147,15 +1212,34 @@ let options3=ref([
   let tasktion = ref([
     { url: 't0.png', titlie: "外形参数化" },
   ])
-
+  let Rolelist=ref([
+  { url: 'w1.png', titlie: "优化问题组件" },
+  { url: 'w2.png', titlie: "学科分析组件" },
+  { url: 'w3.png', titlie: "优化器组件" },
+  ])
+  let Rolelist1=ref([
+  { url: 'w4.png', titlie: "逻辑流连线" },
+  { url: 'w5.png', titlie: "数据流连线" },
+  { url: 'w6.png', titlie: "选择连线颜色" },
+  ])
+  let Rolelist2=ref([
+  { url: 'w7.png', titlie: "模块组合" },
+  { url: 'w8.png', titlie: "模块拆分" },
+  { url: 'w9.png', titlie: "选择图框颜色" },
+  ])
+  let Rolelist3=ref([
+  { url: 'w10.png', titlie: "添加注释" },
+  ])
   let Threelist = ref([
     { url: 'tt.png', titlie: "开始" },
     { url: 'tt1.png', titlie: "暂停" },
-    { url: 'tt2.png', titlie: "结束" },
-    { url: 'tts.png', titlie: "续算" },
+    { url: 'tt2.png', titlie: "续算" },
+    { url: 'tts.png', titlie: "结束" },
   ])
   let Threelist1 = ref([
-    { url: 'tt3.png', titlie: "优化监控" },
+    { url: 'yh1.png', titlie: "列表监控" },
+    { url: 'yh2.png', titlie: "曲线监控" },
+    { url: 'yh3.png', titlie: "过程监控" },
   ])
  
   let Sevenlist = ref([
@@ -1544,6 +1628,9 @@ let options3=ref([
   //没有子节点
   </style>
   <style>
+  .wentsd{
+    padding:0 8px;
+  }
     .el-treeicon .el-tree-node__expand-icon.is-leaf{
    display: none !important;
   }

src/views/vuetree/eltree.vue

@@ -30,7 +30,7 @@ onMounted(() => {
    <Handle id="target-b" type="target"  :position="Position.Left" /> 
   <Handle id="target-d" type="target" :position="Position.Bottom"  /> 
 </template>
-<style scoped>
+<style scoped> 
 
 .icons img{
     width: 26px;