6.3新建任务

src/App.vue

@@ -1,16 +1,5 @@
 <template>
-  <!-- <viewIndex/> -->
-  <!-- <keep-alive>
-          <router-view v-if="$route.meta.keepAlive"></router-view>
-    </keep-alive>
-    <router-view v-if="!$route.meta.keepAlive"></router-view> -->
   <router-view></router-view>
-  <!-- <router-view v-slot="{ Component }">
-	   <keep-alive>
-	     <component :is="Component"  v-if="$route.meta.keepAlive"/>
-	   </keep-alive>
-	   <component :is="Component"  v-if="!$route.meta.keepAlive"/>
-	 </router-view>  -->
 </template>
 
 <script setup>
@@ -21,7 +10,6 @@
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
   color: #2c3e50;
   margin: 0;
   padding: 0;

src/components/HelloWorld.vue

@@ -1,209 +0,0 @@
-<template>
-  <div>
-    <div>
-    <button @click="increment">步数: {{ count }}</button>
-    <button @click="inOpacity">透明度： {{ opacity }}</button>
-    </div>
-    <div id="vtkContainer" />
-   
-  </div>
-</template >
-
-<script setup>
-import * as d3 from 'd3-scale';
-import { formatDefaultLocale } from 'd3-format';
-import { ref,onMounted } from 'vue';
-import '@kitware/vtk.js/Rendering/Profiles/Geometry';
-import vtkRenderWindowWithControlBar from '@kitware/vtk.js/Rendering/Misc/RenderWindowWithControlBar';
-import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
-import vtkActor           from '@kitware/vtk.js/Rendering/Core/Actor';
-import vtkMapper          from '@kitware/vtk.js/Rendering/Core/Mapper';
-import vtkUnstructuredDataReader from '../reader/UnstructuredDataReader.js';
-import vtkScalarBarActor from '@kitware/vtk.js/Rendering/Core/ScalarBarActor';
-import vtkLookupTable from '@kitware/vtk.js/Common/Core/LookupTable';
-import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray.js';
-import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
-// 响应式状态
-const count = ref(0);//步数
-const opacity = ref(0.1);
-const min=ref(0.0);
-const max=ref(1.0);
-
-const scalarFAll = ref([]);//火灾标量
-const scalarWAll = ref([]);//水灾标量
-const foW =ref(false);//火灾 true  水灾 false
-/*
-  Temperature：温度
-  Pressure：压强
-  SO2：SO2
-  CO2：CO2
-  Height：水位高度
-*/
-
-const scalarName = ref("CO2");
-const filedir =ref("data/Fire/");
-//const scalarName = ref("Height");
-//const filedir =ref("data/Water/"); 
-const renderWindowWith = vtkRenderWindowWithControlBar.newInstance({
-    controlSize: 2,
-  });
-// const renderWindowWith =vtkFullScreenRenderWindow.newInstance();
-const renderer = renderWindowWith.getRenderer();
-// renderer.setBackground([0.1,0.2,0]); 
-const renderWindow = renderWindowWith.getRenderWindow();
-const resetCamera = renderer.resetCamera;
-const render = renderWindow.render;
-const mapper = vtkMapper.newInstance();
-//Sets scalarMode to USE_POINT_DATA
-// mapper.setScalarModeToUsePointData();
-const actor = vtkActor.newInstance();
-const reader = vtkUnstructuredDataReader.newInstance();
-
-// 设置透明度
-function inOpacity() {
-  opacity.value=opacity.value+0.1;
-  actor.getProperty().setOpacity(opacity.value);
-  renderWindow.render();
-}
-//计算最大最小值
-function getMinMax(scalars){
-  // console.log("getMinMax:",scalars);
-       min.value=scalars[0];
-       max.value=scalars[0];
-  for (let index = 0; index <= scalars.length; index++) {
-    let scalar=scalars[index];
-     if(min.value>scalar){
-        min.value=scalar;
-      }
-      if(max.value<scalar){
-        max.value=scalar;
-      }
-  }
-  // console.log("max，min:",max.value,min.value);
-}
-// 用来修改状态、触发更新的函数
-function increment() {
-  count.value++;
-  var scalars;
-  if(foW.value){
-       scalars=scalarFAll.value[count.value];
-  }else{
-       scalars=scalarWAll.value[count.value];
-  }
-  const polydata = mapper.getInputData();      
-  const scalarArray=scalars.get(scalarName.value);
-  // console.log("scalarArray:",scalarArray);
-  const dataArray = vtkDataArray.newInstance({
-    name:scalarName.value,
-    size:polydata.getNumberOfPoints()
-  }); 
-  dataArray.setData(scalarArray);
-  polydata.getPointData().setScalars(dataArray); 
- 
-  mapper.clearColorArrays();//强制重建颜色
-  actor.getProperty().setOpacity(count.value+2);//设置错误的透明度使得页面重新加载  不设置不刷新页面
-  renderWindow.render();
-}
-//加载所有 标量数据
-function loadScalarAll(){
-  //水灾
- for (let index = 0; index <= 60; index++) {
-    const reader = vtkUnstructuredDataReader.newInstance();
-    reader.setUrl("data/Water/"+'POST'+index+'.vtk').then(() => {
-    const scalars = reader.getOutputData(1);
-    scalarWAll.value[index]=scalars;
-    });
-  }
-  //火灾
-  for (let index = 0; index <= 60; index++) {
-    const reader = vtkUnstructuredDataReader.newInstance();
-    reader.setUrl("data/Fire/"+'POST'+index+'.vtk').then(() => {
-    const scalars = reader.getOutputData(1);
-    scalarFAll.value[index]=scalars;
-    });
-  }
-}
-//设置 
-function generateTicks(numberOfTicks) {
-  return (helper) => {
-    const lastTickBounds = helper.getLastTickBounds();
-    // compute tick marks for axes
-    const scale = d3
-      .scaleLinear()
-      .domain([0.0, 1.0])
-      .range([lastTickBounds[0], lastTickBounds[1]]);
-    const samples = scale.ticks(numberOfTicks);
-    const ticks = samples.map((tick) => scale(tick));
-    // Replace minus "\u2212" with hyphen-minus "\u002D" so that parseFloat() works
-    formatDefaultLocale({ minus: '\u002D' });
-    const format = scale.tickFormat(
-      ticks[0],
-      ticks[ticks.length - 1],
-      numberOfTicks
-    );
-    const tickStrings = ticks
-      .map(format)
-      .map((tick) => Number(parseFloat(tick).toPrecision(12)).toPrecision()); // d3 sometimes adds unwanted whitespace
-    helper.setTicks(ticks);
-    helper.setTickStrings(tickStrings);
-  };     
-}
-//安装时
-onMounted(() => {
-  //div 绑定
-  const rootContainer =document.getElementById("vtkContainer");
-  rootContainer.style.position = 'relative';
-  rootContainer.style.width = '1000px';
-  rootContainer.style.height = '500px';
-  console.log("rootContainer:",rootContainer);    
- 
-  renderWindowWith.setContainer(rootContainer);
-  // fullScreenRenderer.setBackground([0,0,0]);
-  // const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
-  reader.setUrl(filedir.value+'POST0.vtk').then(() => {
-    const polydata = reader.getOutputData(0);        
-    const scalars = reader.getOutputData(1);    
-    const scalarArray=scalars.get(scalarName.value);
-    // console.log("scalarArray:",scalarArray);
-    const dataArray = vtkDataArray.newInstance({
-      name:scalarName.value,
-      size:polydata.getNumberOfPoints()
-    });
-    dataArray.setData(scalarArray);
-    polydata.getPointData().setScalars(dataArray); 
-    actor.setMapper(mapper);
-    mapper.setInputData(polydata);
-    getMinMax(scalarArray);
-    mapper.setScalarRange(min.value,max.value);//设置范围
-
-    renderer.addActor(actor);
-
-    let lut = mapper.getLookupTable();
-    const scalarBarActor = vtkScalarBarActor.newInstance();
-    renderer.addActor(scalarBarActor);
-    scalarBarActor.setScalarsToColors(lut);
-    // console.log("lut:",lut.getRange());    
-    // Change the number of ticks (TODO: add numberOfTicks to ScalarBarActor)
-    scalarBarActor.setGenerateTicks(generateTicks(5));
-    scalarBarActor.setAxisLabel(scalarName.value);
-    scalarBarActor.setDrawAboveRangeSwatch(true);
-    
-    //修改设条颜色
-    const ctf = vtkColorTransferFunction.newInstance();
-    ctf.addRGBPoint(0.0, 0.0, 0.0, 1.0);
-    ctf.addRGBPoint(1.0, 0.0, 1.0, 0.5);
-    ctf.addRGBPoint(2.0, 0.0, 1.0, 0.0);
-    ctf.addRGBPoint(3.0, 1.0, 0.5, 0.0);
-    ctf.addRGBPoint(4.0, 1.0, 0.0, 0.0);
-    mapper.setLookupTable(ctf);
-    // lut = mapper.getLookupTable();
-    // scalarBarActor.setScalarsToColors(lut);
-    resetCamera();
-   renderWindow.render();
-  });
-  loadScalarAll();
-});
-</script>
-
-<style scoped>
-</style>

src/components/HelloWorld——1.vue

@@ -1,147 +0,0 @@
-<template>
-
-    <div id="vtkContainer"  />
-</template>
-
-<script>
-import '@kitware/vtk.js/favicon';
-
-// Load the rendering pieces we want to use (for both WebGL and WebGPU)
-import '@kitware/vtk.js/Rendering/Profiles/Geometry';
-import { onMounted } from 'vue';
-import vtkRenderWindowWithControlBar from '@kitware/vtk.js/Rendering/Misc/RenderWindowWithControlBar';
-import vtkSlider from '@kitware/vtk.js/Interaction/UI/Slider';
-import vtkCornerAnnotation from '@kitware/vtk.js/Interaction/UI/CornerAnnotation';
-
-import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
-import vtkConeSource from '@kitware/vtk.js/Filters/Sources/ConeSource';
-import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
-export default {
-  name: 'HelloWorld',
- 
-
-  //体制
-  setup() {
-    
-    onMounted(() => {
-      // Define container size/position
-const body = document.querySelector('body');
-// const rootContainer = document.createElement('div');
-// rootContainer.style.position = 'relative';
-// rootContainer.style.width = '500px';
-// rootContainer.style.height = '500px';
-
-// body.appendChild(rootContainer);
-body.style.margin = '0';
-
-// Create render window inside container
-const rootContainer =document.getElementById("vtkContainer");
-rootContainer.style.position = 'relative';
-rootContainer.style.width = '500px';
-rootContainer.style.height = '500px';
-console.log("rootContainer:",rootContainer);    
-
-const renderWindow = vtkRenderWindowWithControlBar.newInstance({
-  controlSize: 25,
-});
-renderWindow.setContainer(rootContainer);
-
-// Add some content to the renderer
-const coneSource = vtkConeSource.newInstance();
-const mapper = vtkMapper.newInstance();
-const actor = vtkActor.newInstance();
-
-mapper.setInputConnection(coneSource.getOutputPort());
-actor.setMapper(mapper);
-
-renderWindow.getRenderer().addActor(actor);
-renderWindow.getRenderer().resetCamera();
-renderWindow.getRenderWindow().render();
-
-// Set control bar to be red so we can see it + layout setup...
-renderWindow.getControlContainer().style.background = '#eee';
-renderWindow.getControlContainer().style.display = 'flex';
-renderWindow.getControlContainer().style.alignItems = 'stretch';
-renderWindow.getControlContainer().style.justifyContent = 'stretch';
-renderWindow.getControlContainer().innerHTML = `
-  <button alt="Left"   title="Left"   value="left">L</button>
-  <button alt="Top"    title="Top"    value="top">T</button>
-  <button alt="Right"  title="Right"  value="right">R</button>
-  <button alt="Bottom" title="Bottom" value="bottom">B</button>
-  <div class="js-slider"></div>
-`;
-
-// Add corner annotation
-const cornerAnnotation = vtkCornerAnnotation.newInstance();
-cornerAnnotation.setContainer(renderWindow.getRenderWindowContainer());
-cornerAnnotation.getAnnotationContainer().style.color = 'white';
-cornerAnnotation.updateMetadata(coneSource.get('resolution', 'mtime'));
-cornerAnnotation.updateTemplates({
-  nw(meta) {
-    return `<b>Resolution: </b> ${meta.resolution}`;
-  },
-  se(meta) {
-    return `<span style="font-size: 50%"><i style="color: red;">mtime:</i>${meta.mtime}</span><br/>Annotation Corner`;
-  },
-});
-
-// Add slider to the control bar
-const sliderContainer = renderWindow
-  .getControlContainer()
-  .querySelector('.js-slider');
-sliderContainer.style.flex = '1';
-sliderContainer.style.position = 'relative';
-sliderContainer.style.minWidth = '25px';
-sliderContainer.style.minHeight = '25px';
-
-const slider = vtkSlider.newInstance();
-slider.generateValues(6, 60, 55);
-slider.setValue(6);
-slider.setContainer(sliderContainer);
-slider.onValueChange((resolution) => {
-  coneSource.set({ resolution });
-  renderWindow.getRenderWindow().render();
-  cornerAnnotation.updateMetadata(coneSource.get('resolution', 'mtime'));
-});
-
-function updateSizeAndOrientation() {
-  renderWindow.resize();
-  slider.resize();
-  renderWindow.getControlContainer().style.flexFlow = slider.getOrientation()
-    ? 'row'
-    : 'column';
-  setTimeout(slider.resize, 0);
-}
-updateSizeAndOrientation();
-
-// Handle UI to change bar location
-function onClick(e) {
-  renderWindow.setControlPosition(e.target.value);
-  updateSizeAndOrientation();
-}
-
-const list = document.querySelectorAll('button');
-let count = list.length;
-while (count--) {
-  list[count].style.width = '25px';
-  list[count].style.height = '25px';
-  list[count].style.flex = 'none';
-  list[count].addEventListener('click', onClick);
-}
-    });
-    return ;
-  }
-}
-
-
-</script>
-
-<style scoped>
-.controls {
-  position: absolute;
-  top: 25px;
-  left: 25px;
-  background: white;
-  padding: 12px;
-}
-</style>

src/components/header.vue

@@ -1,85 +1,52 @@
 <template>
-       <div class="bgk1">
-        <div class="d-flex jc-center title_wrap">
-            <div class="timers">
-            <span>{{headername }}</span>
-            <div class="headertime">
-              <p class="datayear">{{  headertime.dateYear }}</p>
-              <p class="dateday" >{{  headertime.dateDay }}</p>
-            </div>
-          </div>
-          <div class="titlebtn titleanniu imgtupian" :class="{headeractive: headeractive === '1'}"   @click="handleSelect('1')">突水推演</div>
-            <div class="titlebtn titleanniu imgtupian"  style="margin-right: 20px;" :class="{headeractive: headeractive === '2'}" @click="handleSelect('2')">火灾推演</div>
-          <div class="d-flex jc-center s-content">
-            <div class="title tiletimg">
+   <div class="ve_menu_logo">
             <div class="ve_logo_img">
-              <el-image style="height: 100%" :src="logo" fit="contain"></el-image>
-            </div>
-          
-              <span class="title-text">煤矿典型灾害态势推演</span>
+                <el-image
+                    style="height: 100%"
+                    :src="logo"
+                    fit="contain"
+                ></el-image>
             </div>
-          </div>
-          
-          <div class="titlebtn titleanniu imgtupian2" :class="{headeractive: headeractive === '3'}"  @click="handleSelect('3')" >瓦斯爆炸推演</div>
-            <div class="titlebtn titleanniu imgtupian2" :class="{headeractive: headeractive === '4'}"   @click="handleSelect('4')"  >模型库</div>
+            <h3 class="ve_logo_title">
+                {{ title }}
+            </h3>
         </div>
-      </div>
-     </template>
+
+  </template>
    <script setup>
 import { ref, onMounted, reactive, } from "vue";
-import {RouterView,RouterLink } from "vue-router"
-import { request, uploadFile } from "@/utils/request";
 import logo from "@/assets/logo.png";
 import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
-import { timestampToTime,formatTime } from "@/js/lindex.js";
-let emit = defineEmits(['handleSelect'])
-let headername=ref();
-const props = defineProps({
-    name:{
-        type:String
-    },
+let title=ref("民用飞机多学科联合优化设计软件");
+   </script>
+<style lang="scss" scoped>
+.ve_menu_logo {
+    width: 100%;
+    height: 40px;
+    background-color:#2267B1 ;
+      overflow: hidden;
+    padding: 0 10px;
  
-
-});
-let headeractive=ref(0);
- let headerobj = ref({
-  time: "",
-  name: "",
-});
- let headertime=ref({
-       timing: null,
-      loading: true,
-      dateDay: null,
-      dateYear: null,
-      dateWeek: null,
-      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
-})
-let headerid=ref();
-onMounted(() => {
-  timeFn();
-});
-// 当前时间
-const timeFn=()=> {
-  headertime.value.timing = setInterval(() => {
-    headertime.value.dateDay = formatTime(new Date(), "HH: mm: ss");
-    headertime.value.dateYear = formatTime(new Date(), "yyyy-MM-dd");
-    headertime.value.dateWeek =  headertime.value.weekday[new Date().getDay()];
-      }, 1000);
+    .ve_logo_img {
+        height: 100%;
+        text-align: center;
+        // 和side收缩后的宽度一致
+        // padding: 10px;
+        display: inline-block;
+        box-sizing: border-box;
+        vertical-align: middle;
+    }
+    .ve_logo_title {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: inline-block;
+        margin: 0;
+        font-size: 16px;
+        vertical-align: middle;
+        color: #fff;
+        &:hover {
+  
+        }
     }
- const handleSelect = (key) => {
-    headerid.value=key;
-    headeractive.value= headerid.value;
-    emit('handleSelect', key);
-    headername.value="";
-};
-const hname=(val)=>{
-  headername.value=val// 获取项目名称
-}
-defineExpose({headeractive,hname});
-   </script>
-   <style  lang="scss" scoped>
-.headeractive{
-  background-image: url('/src/assets/img/Rectangle4562.png') !important;
 }
-
-   </style>
+</style>

src/components/myHome.vue

@@ -1,23 +0,0 @@
-<template>
-    <div > 
-          <div class="left_container">
-          <h2>我是跳转的路由</h2>
-         </div>
-       </div>
-     </template>
-   <script setup>
-   
-
-   </script>
-   <style scoped>
-   .left_container {
-     padding: 15px;
-     width: 300px;
-     position: relative;
-     top: 60px;
-     left: 169px;
-     z-index: 2018;
-     border-radius: 5px;
-     box-shadow: 0px 3px 10px rgba(255, 255, 255, 0.1);
-   }
-   </style>

src/main.js

@@ -8,13 +8,11 @@ import ElementUI from 'element-plus'
 import { createPinia } from 'pinia'
 import 'element-plus/theme-chalk/index.css' // 引入整个Element样式
 import './style/index.css' // 引入整个Element样式
-import "normalize.css/normalize.css";//重置样式
-import '@/js/lindex.js'
 import '@/utils/flexible'
-// import '../public/static/Build/Build.wasm'
-// import '../public/static/Build/Build.data'
+import "normalize.css/normalize.css";//重置样式
 import directive from '@/utils/directive'
 
+
 // import mitt from 'mitt'
 
 //import '"element-plus/dist/index.css'

src/style.css

@@ -25,10 +25,7 @@ a:hover {
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+  padding: 0;
 }
 
 h1 {
@@ -59,13 +56,6 @@ button:focus-visible {
   padding: 2em;
 }
 
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;

src/style/index.css

@@ -1,7 +1,3 @@
-CSS的重置样式可以通过使用reset.css文件来实现。这个文件会将所有元素的默认样式都设为相同的初始值，从而消除不同浏览器之间的显示差异。
-
-下面是一个常用的reset.css文件的示例代码：
-
 /* reset.css */
 html {
     box-sizing: border-box; /* 统一盒模型计算方式 */
@@ -47,3 +43,121 @@ img{
     vertical-align: middle; 
 }
 /* 改 el-dialog的默认样式*/
+.el-header{
+    padding: 0;
+    --el-header-height:auto;
+}
+.el-main{
+    --el-main-padding: 0;;  
+}
+.heder_tabs{
+ 
+  --el-main-padding: 0 .1042rem!important;  
+}
+.heder_tabs .el-tabs__header{
+    padding: 0 .1042rem;
+    background-color:#2267B1; 
+}
+.ve_logo_img .el-image{
+    padding: 5px;
+}
+.heder_tabs .el-tabs__item{
+    width: 120px;
+    height: 40px;
+}
+body{
+    width: 100%;
+    height: 100vh;
+    background-color:rgba(123, 176, 232, 0.1);
+}
+.heder_tabs .el-tabs__item.is-active{
+    background-color: #fff;
+    border-radius: 10px 10px 0px 0px;
+    color: #2267B1 ;
+}
+.el-tabs--card>.el-tabs__header .el-tabs__item,.el-tabs--card>.el-tabs__header .el-tabs__nav{
+    border: none;
+}
+.el-tabs__item{
+    color: #fff;
+    font-weight: bold;
+    font-size: 14px;
+}
+.imgzong {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    overflow: auto;
+    white-space: nowrap;
+    background-color: #fff;
+    padding: 0 20px;
+}
+.imgzong .listitem {
+    width: auto;
+    height: 92px;
+    margin: 5px;
+    padding: 2px 6px 2px 2px;
+  
+}
+.activeOrange {
+    background-color: rgba(255, 255, 255, 0.3);
+    border: 2px solid #fff;
+    border-radius: 5px;
+    box-sizing: border-box;
+  }
+  .imgzong  .listitem{
+    border-right:1px solid rgba(34,103,177,0.2);
+  }
+.item1, .item2 {
+    cursor: pointer;
+}
+.imgzong .item2 .el-image{
+    margin: 0 19px;
+    width: 60px;
+    vertical-align: middle;
+    padding: 9px;
+}
+.imgzong .item2 span {
+    display: block;
+    text-align: center;
+}
+
+.imgzong .listitem span {
+    font-size: 14px;
+}
+.el-tabs__header{
+    padding: 0;
+    margin: 0;
+}
+.my-header{
+    line-height: 40px;
+    height: 40px;
+    text-align: left;
+}
+.my-header .el-image{
+    width: 28px;
+    margin-top: 6px;
+
+}
+.my-header h4{
+    font-size: 14px;
+    font-weight: 700;
+    color: #fff;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+    display: inline-block;
+    padding-left: 5px;
+}
+.el-dialog__header{
+    padding:0px 20px; 
+    background-color:#2267B1;   
+    margin: 0;
+}
+.el-image {
+    vertical-align: middle;
+}
+.el-dialog__headerbtn{
+    height: 40px !important;
+    top: 3px;
+}

src/views/index.vue

@@ -1,13 +1,119 @@
 <template>
-  <div>hahaha</div>
-</template>
+  <div class="common-layout">
+    <el-container>
+      <el-header>
+        <myheader />
+      </el-header>
+      <el-main>
+        <div class="main_container padding_gg">
+          <div class="heder_tabs">
+            <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
+              <!-- 开始 -->
+              <el-tab-pane label="开始" name="User">
+                <div class="imgzong">
+                  <!-- <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)">
+                    <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="Config">优化问题</el-tab-pane>
+              <el-tab-pane label="优化流程" name="Role">优化流程</el-tab-pane>
+              <el-tab-pane label="优化模型" name="Task">优化模型</el-tab-pane>
+              <el-tab-pane label="优化运行" name="Three">优化运行</el-tab-pane>
+              <el-tab-pane label="优化结果" name="Six">优化结果</el-tab-pane>
+              <el-tab-pane label="数据库管理" name="Seven">数据库管理</el-tab-pane>
+              <el-tab-pane label="帮助" name="eight">帮助</el-tab-pane>
+            </el-tabs>
+          </div>
+          <!-- 新建任务 -->
+          <!-- 添加弹窗 -->
+          <el-dialog v-model="dialog.newdialog" align-center :append-to-body="true" width="480"
+            class="dialog_class bgcolor tianjia">
 
-<script>
-export default {
+            <template #header="{ titleId, titleClass }">
+              <div class="my-header ">
+                <el-image :src="getImgPath('s0.png')" fit="contain"></el-image>
+                <h4 :id="titleId" :class="titleClass">新建任务</h4>
+              </div>
+            </template>
+            <div>
+              <el-form>
+                <el-form-item label="任务编号：" :label-width="formLabelWidth6">
+                  <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="formLabelWidth6">
+                  <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="formLabelWidth6">
+                  <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="formLabelWidth6">
+                  <el-input v-model="name" maxlength="18" type="textarea"
+                    oninput="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" class="w-50 m-2"
+                    placeholder="请输入" />
+                </el-form-item>
+              </el-form>
+            </div>
+            <template #footer>
+          <div class="dialog-footer">
+            <el-button @click="dialog.newdialog = false">Cancel</el-button>
+            <el-button type="primary" @click="dialog.newdialog= false">
+              Confirm
+            </el-button>
+          </div>
+        </template>
+          </el-dialog>
+        </div>
+      </el-main>
 
+    </el-container>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted, reactive, } from "vue";
+import myheader from "@/components/header.vue"
+import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
+import '@/utils/flexible'
+import s0 from "@/assets/img/s0.png"
+const activeName = ref('User')
+let active = ref('');
+let formLabelWidth6=ref(100)
+let Startlist = ref([
+  { url: 's0.png', titlie: "新建任务" },
+  { url: 's1.png', titlie: "打开任务" },
+  { url: 's2.png', titlie: "保存任务" },
+  { url: 's3.png', titlie: "关闭任务" },
+])
+let dialog=ref({
+        newdialog:false
+})
+let name=ref("1")
+const getImgPath = (url) => {
+  return new URL(`../assets/img/${url}`, import.meta.url).href
+}
+const handleClick = (tab, event) => {
+  console.log(tab, event)
+}
+// 模块选择
+const clickgeometry = (e, index, key) => {
+  console.log(key);
+  switch (key) {
+        case "one0-0":
+        dialog.value.newdialog=true;
+        
+          break;
+  }
 }
 </script>
-
-<style>
-
-</style>
+<style lang="scss" scoped></style>