1.12添加了弹框

src/view/evolutionView.vue

@@ -0,0 +1,384 @@
+<template>
+    <div > 
+          <div class="left_container " v-show="isshow">
+         
+           <h2 ref="title">{{props.title1}}</h2>
+           <!-- <div
+           class="img"
+           v-for="(item, index) in listArray"
+           :key="index"
+         >
+          <span>{{ item.name }}</span>
+         </div> -->
+         <el-tabs
+       v-model="activeName"
+       type="card"
+       :tab-position="tabPosition"
+       class="demo-tabs yanshib"
+       @tab-click="handleClick"
+     >
+     <!-- 火灾 -->
+       <el-tab-pane label="火灾" name="111">
+         <div class="demo-input-suffix firsttitle">
+           <el-form-item label="火灾源" label-width="formLabelWidth5">
+         <el-input  v-model="input2"
+           class="w-50 m-2"
+           placeholder="节点名称"
+           :prefix-icon="Search"   />
+       </el-form-item>
+       <div class="btn2">
+       <el-button type="success">导入</el-button></div>
+       <div class="btn2">
+       <el-button type="success">开始演化</el-button></div>
+     </div>
+   <!-- table表 -->
+   <el-table :data="tableData" style="width: 100%">
+       <el-table-column fixed prop="date" label="时间序列名" width="100" />
+       <el-table-column prop="name" label="节点名称" width="80" />
+       <el-table-column prop="state" label="值" width="90" />
+       <el-table-column label="操作" width="220">
+     
+         <template #default="scope">
+           <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
+             >添加</el-button
+           >
+           <el-button
+             size="small"
+             type="success"
+             @click="handleDelete(scope.$index, scope.row)"
+             >Delete</el-button
+           >
+           <el-button
+             size="small"
+             type="danger"
+             @click="handleDelete(scope.$index, scope.row)"
+             >删除</el-button
+           >
+         </template>
+       </el-table-column>
+     </el-table>
+     <div class="input">
+     <el-form-item label="时间序列名" :label-width="formLabelWidth5">
+         <el-input  v-model="input2"
+           class="w-50 m-2"
+           placeholder="节点名称"
+           />
+       </el-form-item>
+     </div>
+       <div class="demo-input-suffix firsttitle">
+         
+           <el-form-item label="节点名称" :label-width="formLabelWidth5">
+         <el-input  v-model="input3"
+           class="w-50 m-2"
+           placeholder="节点名称"
+           :prefix-icon="Search"   />
+       </el-form-item>
+       <div class="btn2">
+       <el-button type="primary"  @click="dialogVisiblenode = true;selenum=1">选择节点</el-button></div>
+       </div>
+       <div class="input " style="margin-top: -2px;">
+         <el-form-item  label="值"  :label-width="formLabelWidth5" >
+         <el-input v-model="des1" :autosize="{ minRows: 5, maxRows: 10}" type="textarea" />
+       </el-form-item>
+     </div>
+   
+   
+       </el-tab-pane>
+         <!-- 选择节点弹出框 -->
+       <el-dialog
+       v-model="dialogVisiblenode"
+       title="Tips"
+       width="50%"
+     >
+     <div class="demo-input-suffix firsttitle">
+           <el-form-item label="节点选择" :label-width="formLabelWidth5">
+         <el-input  v-model="input2"
+           class="w-50 m-2"
+           placeholder="节点名称"
+           :prefix-icon="Search"   />
+       </el-form-item>
+       <div class="btn2">
+       <el-button type="success">导入</el-button></div>
+     
+     </div>
+     <el-table
+       ref="multipleTableRef"
+       :data="tableData2"
+       style="width: 100%"
+       @selection-change="handleSelectionChange"
+     >
+       <el-table-column type="selection" width="55" />
+       <!-- <el-table-column label="Date" width="120">
+       <template #default="scope">{{ scope.row.date }}</template>
+       </el-table-column> -->
+       <el-table-column type="index" width="50" />
+       <el-table-column property="name" label="名称" width="120" />
+       <el-table-column property="chuk" label="位置坐标"/>
+       <el-table-column property="chuk" label="出口"/>
+       <el-table-column property="w1" label="初始水位(升)" width="120"/>
+       <el-table-column property="w2" label="初始温度（K）" width="120"/>
+     </el-table>
+       <template #footer>
+         <span class="dialog-footer">
+           <el-button @click="dialogVisiblenode = false">取消</el-button>
+           <el-button type="primary" @click="queding();dialogVisiblenode = false">
+             确认
+           </el-button>
+         </span>
+       </template>
+     </el-dialog>
+       <!--水灾  -->
+       <el-tab-pane label="水灾" name="222" >
+         <div class="demo-input-suffix firsttitle">
+           <el-form-item label="突水源" label-width="formLabelWidth5">
+         <el-input  v-model="input4"
+           class="w-50 m-2"
+           placeholder="节点名称"
+           :prefix-icon="Search"   />
+       </el-form-item>
+       <div class="btn2">
+       <el-button type="success">导入</el-button></div>
+       <div class="btn2">
+       <el-button type="success">开始演化</el-button></div>
+     </div>
+   <!-- table表 -->
+   <el-table :data="tableData" style="width: 100%">
+       <el-table-column fixed prop="date" label="时间序列名" width="100" />
+       <el-table-column prop="name" label="节点名称" width="80" />
+       <el-table-column prop="state" label="值" width="90" />
+       <el-table-column label="操作" width="220">
+     
+         <template #default="scope">
+           <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
+             >添加</el-button
+           >
+           <el-button
+             size="small"
+             type="success"
+             @click="handleDelete(scope.$index, scope.row)"
+             >Delete</el-button
+           >
+           <el-button
+             size="small"
+             type="danger"
+             @click="handleDelete(scope.$index, scope.row)"
+             >删除</el-button
+           >
+         </template>
+       </el-table-column>
+     </el-table>
+     <div class="input">
+     <el-form-item label="时间序列名" :label-width="formLabelWidth5">
+         <el-input  v-model="input2"
+           class="w-50 m-2"
+           placeholder="节点名称"
+           />
+       </el-form-item>
+     </div>
+       <div class="demo-input-suffix firsttitle">
+         
+           <el-form-item label="节点名称" :label-width="formLabelWidth5">
+         <el-input  v-model="input4"
+           class="w-50 m-2"
+           placeholder="节点名称"
+           :prefix-icon="Search"   />
+       </el-form-item>
+       <div class="btn2">
+       <el-button type="primary"  @click="dialogVisiblenode = true;selenum=2">选择节点</el-button></div>
+       </div>
+       <div class="input " style="margin-top: -2px;">
+         <el-form-item label="值" :label-width="formLabelWidth5" >
+         <el-input v-model="des2"   :autosize="{ minRows: 5, maxRows: 10}" type="textarea" />
+       </el-form-item>
+     </div>
+   
+       </el-tab-pane>
+       <el-tab-pane label="瓦斯爆炸" name="333">还在开发中.....</el-tab-pane>
+     </el-tabs>
+     <!--  底部 -->
+     <div class="dialog-footer">
+       <el-button type="primary" @click="isshow = false">
+             确认
+           </el-button>
+               <span class="btn" @click="isshow = false">关 闭</span>
+             </div>
+         </div>
+      
+       </div>
+     </template>
+   <script setup >
+   import { ref, onMounted,defineProps, reactive,defineExpose } from "vue";
+   import { Calendar, Search } from '@element-plus/icons-vue'
+   const props= defineProps(['title1']);
+   let isshow=ref(false);
+   let sum=ref('1')
+   let title=ref()
+   let selectstr=ref('')
+   let input3=ref("")
+   let input4=ref("")
+   let selenum=ref(1)
+   const dialogVisiblenode = ref(false)
+   
+   const tabPosition = ref('left')
+   // let title1=ref("1")
+   let dialogVisible=ref(true);
+   const formLabelWidth5=ref(77)
+   const multipleTableRef = ref()
+   const multipleSelection = ref([])
+   let listArray = ref([
+     { id: 0, name: "灾情演化" },
+     { id: 1, name: "演化过程" },
+     { id: 2, name: "灾情历史" },
+     { id: 3,  name: "日志" },
+   ]);
+   let input2=ref("")
+   let des1=ref("  0   373 0.1 0.1    \n 10  373 0.1 0.1\n 20  373 0.1 0.1")
+   let des2=ref("  0 100\n 10 100 \n 20 100")
+   const tableData = [
+     {
+       date: '2022-05-03',
+       name: 'Tom',
+       state: 'California',
+       city: 'Los Angeles',
+       address: 'No. 189, Grove St, Los Angeles',
+       zip: 'CA 90036',
+       tag: 'Home',
+     },
+     {
+       date: '2023-05-02',
+       name: 'Tom',
+       state: 'California',
+       city: 'Los Angeles',
+       address: 'No. 189, Grove St, Los Angeles',
+       zip: 'CA 90036',
+       tag: 'Office',
+     },
+     {
+       date: '2016-05-04',
+       name: 'Tom',
+       state: 'California',
+       city: 'Los Angeles',
+       address: 'No. 189, Grove St, Los Angeles',
+       zip: 'CA 90036',
+       tag: 'Home',
+     },
+     {
+       date: '2016-05-01',
+       name: 'Tom',
+       state: 'California',
+       city: 'Los Angeles',
+       address: 'No. 189, Grove St, Los Angeles',
+       zip: 'CA 90036',
+       tag: 'Office',
+     },
+   ]
+   const tableData2= [
+     {
+       date: '2022-05-03',
+       name: 'Tom0',
+       address: 'No. 189, Grove St, Los Angeles',
+       chuk: '是',
+       w1:"30",
+       w2:'10'
+     },
+     {
+       date: '2023-05-02',
+       name: 'Tom1',
+       address: 'No. 189, Grove St, Los Angeles',
+       chuk: '否',
+       w1:"20",
+       w2:'10'
+     },
+    
+   ]
+   const activeName = ref('111')
+   function handleClick(tab, event){
+     activeName.value=tab.props.name;
+    // console.log( activeName.value);
+   }
+   function handleClicktable() {
+     console.log('click')
+   }
+   function handleSelectionChange(val){
+     multipleSelection.value = val
+     console.log(  multipleSelection.value );
+   }
+   function handleEdit(index,row){
+     console.log(index, row)
+   }
+   function handleDelete(index,row) {
+     console.log(index, row)
+   }
+   function queding(){
+     selectfun();
+     if(selenum.value==1){
+       input3.value=selectstr.value
+   
+     }else{
+       input4.value=selectstr.value
+     }
+   
+   
+   }
+   function selectfun(){
+     selectstr.value='';
+     if(multipleSelection.value.length!=0){
+       //selectstr.value='';
+     for(let i=0;i<=multipleSelection.value.length-1;i++){
+        selectstr.value+=multipleSelection.value[i].name;
+        selectstr.value+=','
+      console.log(multipleSelection.value[i].name)
+     }
+     }else{
+   
+       selectstr.value='';
+      
+     }
+   }
+   onMounted(()=>{
+     console.log(props)
+   
+     // title1.value='我是头部'
+     // console.log(title.value)
+   })
+   defineExpose({isshow})
+   </script>
+   <style scoped>
+   .left_container {
+     padding: 15px;
+     width: 600px;
+     position: relative;
+     top: 49px;
+     left: 89px;
+     z-index: 2018;
+     border-radius: 5px;
+     box-shadow: 0px 3px 10px rgba(255, 255, 255, 0.1);
+     background-color: #fff;
+     font-size: 12px;
+   }
+   .demo-input-suffix{
+     /* padding: 10px; */
+   }
+   
+   .firsttitle{
+     display: flex;
+   }
+   .btn2{
+     padding: 0 20px;
+   }
+   .input{
+     width: 400px;
+     margin-top: 10px;
+   }
+   
+   </style>
+   <style>
+   .yanshib .el-tabs__content{
+     border: 1px solid #e4e7ed !important;
+     padding: 5px 20px;
+     min-height: 200px;
+   }
+   .el-tabs--left .el-tabs__header.is-left{
+     margin-right: 0 !important;
+   }
+   </style>

src/view/myIndex.vue

@@ -75,6 +75,8 @@
       </div>
     </div>
     <!-- 内容 -->
+        <!-- 内容 -->
+   <evolutionView ref="evolution" :title1="title1" />
   </div>
 </template>
 
@@ -100,9 +102,11 @@ import vtkDataArray from "@kitware/vtk.js/Common/Core/DataArray.js";
 import vtkColorTransferFunction from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction";
 import { I } from "@kitware/vtk.js/macros2.js";
 import { Representation } from '@kitware/vtk.js/Rendering/Core/Property/Constants';
+import evolutionView  from "./evolutionView.vue"
 
 // const props = {};
 let time = 3 * 60;
+let evolution=ref();
 let listArray = reactive([
   { id: 0, img: p1, name: "灾情演化" },
   { id: 1, img: p2, name: "演化过程" },
@@ -153,6 +157,10 @@ let options = reactive([
 function add(id) {
   if (id == 2) {
     dialogVisible.value = true;
+    evolution.value.isshow=false;
+  }else if(id==0){
+    evolution.value.isshow=true;
+    dialogVisible.value = false;
   }
 }
 // 响应式状态