disaster/src/view/evolutionView.vue

<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>