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="Fire">
   <!-- table表 -->
   <div class="btn2" style="text-align: right;">
    <el-button type="success" @click="newtable();newaddshow=true;">新建</el-button>
       <el-button  @click="beginEvolve()">开始演化</el-button>
      
     </div>
   <el-table   v-loading="loading" :data="tableData"  :max-height="tableHeight"  @row-click="rowclick"  style="width: 100%" >
       <el-table-column property="sid" label="编号" width="60"/>
       <el-table-column property="pname" label="管道名称"/>
       <el-table-column property="pid" label="管道编号" width="80" />
       <el-table-column property="site" label="位置"/>
       <el-table-column label="操作" width="220">
         <template #default="scope">
           <el-button
             size="small"
             type="success"
             @click.stop="handlexiugai(scope.$index, scope.row)"
             >修改</el-button
           >
           <el-button
             size="small"
             type="danger"
             @click.stop="handleDeletefire(scope.$index, scope.row)"
             >删除</el-button
           >
         </template>
       </el-table-column>
     </el-table>
     <div v-show="newaddshow">
     <div class="demo-input-suffix firsttitle magintop">
         <el-form-item label="管道名称" :label-width="formLabelWidth5">
       <el-input  v-model="selectstr"
         class="w-50 m-2"
         placeholder="管道名称"
         :prefix-icon="Search"   />
     </el-form-item>
     <div class="btn2">
     <el-button type="primary"  @click="fireclick(); dialogVisiblenode = true;selenum=1">选择管道</el-button></div>
     </div>
     <div class="input">
     <el-form-item label="位置" :label-width="formLabelWidth5">
         <el-input-number v-model="source.site" :min="0" :max="1" 
         :precision="2" :step="0.1"
         controls-position="right"
           class="w-50 m-2"
           placeholder="位置"
           />
       </el-form-item>
     </div>
     <div  class="textright">
     <el-button type="primary"  @click="handleEditfire()">保存</el-button>
    </div>
    </div>
  <div v-show="isDisasterfire">
    <h2 style="text-align: left;">灾情源检查表</h2>
    <div class="btn2" style="text-align: right;">
       <el-button type="success"  @click="jcyclick();dialogVisibleadd=true">新建</el-button>
     </div>
  <!-- 灾情源的新增弹框 -->
  <el-dialog
       v-model="dialogVisibleadd"
       title="新增"
       width="380px"
     >
     <div>
      <el-form>
      <el-form-item label="时间线" :label-width="formLabelWidth5">
         <el-input  v-model="Disastersource.timeline" class="w-50 m-2"  placeholder="请输入"  />
       </el-form-item>
       <el-form-item label="值1"  :label-width="formLabelWidth5">
         <el-input  v-model="Disastersource.val1" class="w-50 m-2"  placeholder="请输入"  />
       </el-form-item>
       <el-form-item label="值2"  :label-width="formLabelWidth5">
         <el-input  v-model="Disastersource.val2" class="w-50 m-2"  placeholder="请输入"  />
       </el-form-item>
       <el-form-item label="值3"  :label-width="formLabelWidth5">
         <el-input  v-model="Disastersource.val3" class="w-50 m-2"  placeholder="请输入"  />
       </el-form-item>
       <el-form-item label="值4"  :label-width="formLabelWidth5">
         <el-input  v-model="Disastersource.val4" class="w-50 m-2"  placeholder="请输入"  />
       </el-form-item>
      </el-form>
     </div>
 
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="dialogVisibleadd = false">取消</el-button>
           <el-button type="primary" @click="Disasterclick();dialogVisibleadd = false">
             确认
           </el-button>
         </span>
       </template>
     </el-dialog>
    <el-table :data="tableDatafir"  :max-height="tableHeight"   style="width: 100%" >
       <el-table-column property="timeline" label="时间线" width="100"/>
       <el-table-column property="val1" label="v1"/>
       <el-table-column property="val2" label="v2" width="80" />
       <el-table-column property="val3" label="v3"/>
       <el-table-column property="val4" label="v3"/>
       <el-table-column label="操作" width="220">
         <template #default="scope">
           <el-button
             size="small"
             type="success"
             @click="handlexiugai2(scope.$index, scope.row)"
             >修改</el-button
           >
           <el-button
             size="small"
             type="danger"
             @click="handleDeletede(scope.$index, scope.row)"
             >删除</el-button
           >
         </template>
       </el-table-column>
     </el-table>
  </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="searchtaggd"
           class="w-50 m-2"
           placeholder="管道名称"
           :prefix-icon="Search"   />
       </el-form-item>
       <div class="btn2">
       <el-button type="success" @click="searchgd">搜索</el-button></div>
       <div class="btn2">
       <el-button type="success">导入</el-button></div>
     
     </div>
     <el-table
       ref="multipleTableRef"
       :data="tableData2"
       style="width: 100%"
       highlight-current-row
       @selection-change="handleSelectionChange"
       @select="projectsSelectionSelect"
     >
       <el-table-column type="selection" width="55" />
       <el-table-column property="snId" label="开始节点"/>
       <el-table-column property="enId" label="结束节点"/>
       <el-table-column property="id" label="编号" width="70"/>
       <el-table-column property="name" label="名称" width="70"/>
       <el-table-column property="sectionType" label="截面类型" width="120"/>
       <el-table-column property="roughCoe" label="粗糙系数"/>
       <el-table-column property="sectionPara1" label="截面参数1" width="90"/>
       <el-table-column property="sectionPara2" label="截面参数2" width="90" />
       <el-table-column property="sectionPara3" label="截面参数3" width="90"/>
       <el-table-column property="sectionPara4" label="截面参数4" width="90"/>
       <el-table-column property="sectionPara5" label="截面参数5" width="90"/>
       
     </el-table>
       <div class="demo-pagination-block">
    <el-pagination
    v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
    small
    background
    layout="prev, total,pager, next, jumpe,"      
    :total="parseInt(total)"
    class="mt-4"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
  </div>
       <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="Water" >
   <!-- table表 -->
   <div class="btn2" style="text-align: right;">
    <el-button  type="success" @click="newtable();waaddshow=true">新建</el-button>
    <el-button  @click="beginEvolve()">开始演化</el-button>
      
     </div>
   <el-table   v-loading="loading" :data="tableDataw"  :max-height="tableHeight"  @row-click="rowclick"  style="width: 100%" >
       <el-table-column property="sid" label="编号" width="60"/>
       <el-table-column property="pname" label="管道名称"/>
       <el-table-column property="pid" label="管道编号" width="80" />
       <el-table-column property="site" label="位置"/>
       <el-table-column label="操作" width="220">
         <template #default="scope">
           <el-button
             size="small"
             type="success"
             @click.stop="handlexiugai(scope.$index, scope.row)"
             >修改</el-button
           >
           <el-button
             size="small"
             type="danger"
             @click="handleDeletefire(scope.$index, scope.row)"
             >删除</el-button
           >
         </template>
       </el-table-column>
     </el-table>
     <div v-show="waaddshow">
     <div class="demo-input-suffix firsttitle magintop">
         <el-form-item label="管道名称" :label-width="formLabelWidth5">
       <el-input  v-model="selectstr"
         class="w-50 m-2"
         placeholder="管道名称"
         :prefix-icon="Search"   />
     </el-form-item>
     <div class="btn2">
     <el-button type="primary"  @click="fireclick(); dialogVisiblenode = true;selenum=1">选择管道</el-button></div>
     </div>
     <div class="input">
     <el-form-item label="位置" :label-width="formLabelWidth5">
         <el-input-number v-model="source.site" :min="0" :max="1" 
         :precision="2" :step="0.1"
         controls-position="right"
           class="w-50 m-2"
           placeholder="位置"
           />
       </el-form-item>
     </div>
     <div  class="textright">
     <el-button type="primary"  @click="handleEditfire()">保存</el-button>
    </div>
    </div>
  <div v-show="isDisasterwater">
    <h2 style="text-align: left;">灾情源检查表</h2>
    <div class="btn2" style="text-align: right;">
       <el-button  type="success" @click=" jcyclick();dialogVisibleadd=true">新建</el-button>
     </div>
  <!-- 灾情源的新增弹框 -->
  <el-dialog
       v-model="dialogVisibleadd"
       title="新增"
       width="380px"
     >
     <div>
      <el-form>
      <el-form-item label="timeline" :label-width="formLabelWidth5">
         <el-input  v-model="Disastersource.timeline" class="w-50 m-2"  placeholder="请输入"  />
       </el-form-item>
       <el-form-item label="值1"  :label-width="formLabelWidth5">
         <el-input  v-model="Disastersource.val1" class="w-50 m-2"  placeholder="请输入"  />
       </el-form-item>
       <el-form-item label="值2"  :label-width="formLabelWidth5">
         <el-input  v-model="Disastersource.val2" class="w-50 m-2"  placeholder="请输入"  />
       </el-form-item>
       <el-form-item label="值3"  :label-width="formLabelWidth5">
         <el-input  v-model="Disastersource.val3" class="w-50 m-2"  placeholder="请输入"  />
       </el-form-item>
       <el-form-item label="值4"  :label-width="formLabelWidth5">
         <el-input  v-model="Disastersource.val4" class="w-50 m-2"  placeholder="请输入"  />
       </el-form-item>
      </el-form>
     </div>
 
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="dialogVisibleadd = false">取消</el-button>
           <el-button type="primary" @click="Disasterclick();dialogVisibleadd = false">
             确认
           </el-button>
         </span>
       </template>
     </el-dialog>
    <el-table :data="tableDatawat"  :max-height="tableHeight"  style="width: 100%" >
       <el-table-column property="timeline" label="时间线" width="100"/>
       <el-table-column property="val1" label="v1"/>
       <el-table-column property="val2" label="v2" width="80" />
       <el-table-column property="val3" label="v3"/>
       <el-table-column property="val4" label="v3"/>
       <el-table-column label="操作" width="220">
         <template #default="scope">
           <el-button
             size="small"
             type="success"
             @click="handlexiugai2(scope.$index, scope.row)"
             >修改</el-button
           >
           <el-button
             size="small"
             type="danger"
             @click="handleDeletede(scope.$index, scope.row)"
             >删除</el-button
           >
         </template>
       </el-table-column>
     </el-table>
  </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>
     <!-- //defineProps,,defineExpose -->
   <script setup>
   import { ref, onMounted, reactive,toRefs} from "vue";
   import { Calendar, Search } from '@element-plus/icons-vue'
   import { request, uploadFile } from "@/utils/request";
   import {RouterView,RouterLink,useRouter } from "vue-router"
   import { ElMessage } from 'element-plus'
   const {currentRouter}=useRouter();
   let tableHeight=ref(200)
 const props= defineProps({
  dialogVisiblerz: {
        type: Boolean,
        default: false,
    }
 });
 //const {dialogVisiblerz} = toRefs(props,'dialogVisiblerz')
let emit= defineEmits(['getthislog','logonclick'])
let isdialogVisiblerz=ref(true);
  //  const emit=defineEmits (["getdata"]);父组件调子组件
  //  const title1=ref("1")
  // 心跳包的参数
  
  let websock=ref(null);
  let times=ref({
      lockReconnect: false, //是否真正建立连接
      timeout: 28 * 1000, //30秒一次心跳
      timeoutObj: null, //心跳倒计时
      serverTimeout0bj: null, //
      timeoutnum: null, //断开重连倒计时
  })
   let userId=ref("5f06c8bc77234f969d13e160b54c27e3");
   let isshow=ref(false);
   let sum=ref('1')
   let url=ref("http://localhost:8080/?aid=5")
   let title=ref()
   let selectstr=ref('');
   let input3=ref("");
   let input4=ref("");
   let selenum=ref(1);
   let aid=ref("");
   let firepid=ref("");
   let firesid=ref("");
   let searchtaggd=ref("");
   let newaddshow=ref(false);
   let waaddshow=ref(false);
   let isDisasterfire=ref(false);
   let isDisasterwater=ref(false);
   let source=reactive({pname:"",site:0.1})
    let loading=ref(true)
   const dialogVisiblenode = ref(false)
   const dialogVisibleadd = ref(false)
   let Disastersource=ref({
    svid:0,
    timeline:'',
    val1:'',
    val2:'',
    val3:'',
    val4:'',
     })
   const tabPosition = ref('left')
   let dialogVisible=ref(true);
   const formLabelWidth5=ref(77)
   const multipleTableRef = ref()
   const multipleSelection = ref([])
   let zaiqytabledata=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 = ref([
     {
      sid: '2022-05-03',
      pname: 'Tom0',
      pid: 'No. 189, Grove St, Los Angeles',
      site:"30",
     },
   
   ]);
   const tableDataw = ref([]);
   const tableDatawat = ref([]);
   const tableDatafir= ref([])
   const tableData2= ref([])
const activeName = ref('Fire');
const gdxiugai=ref({});
const currentPage4 = ref(1);
let logs=ref("");
let gdadd=ref("0");
let jcadd=ref();
const pageSize4 = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let total=ref(1);
let paginationConfig=reactive({
        hideSinglePage: false,
        page: 1,
        size: 15,
        sizeList: [2, 15, 30, 50],
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
      })
         // 分页查询

 function handleSizeChange(val) {
}
function handleCurrentChange(val){ 
  pipelinedata(searchtaggd.value)
}
   function handleClick(tab, event){
     activeName.value=tab.props.name;
     getdata();
   }
  //火灾接口查询
  //let aidurl=

  function getdata(){
    const params = {
        transCode: 'D00005',
        aid:aid.value,
        stype:activeName.value,
        //userId:userId.value
        }
        request(params)
          .then((res) => { 
           // console.log(res)
           loading.value=false;
            if(activeName.value=='Fire'){
              tableData.value=res.rows
            }else{
              tableDataw.value=res.rows
            }
          })
          .catch((err) => {
            loading.value=false;
          })
  }
  function fireclick(){
    pipelinedata('');

  }
  function searchgd(){
    pipelinedata(searchtaggd.value);
  }
//管道数据查询
function pipelinedata(searchtag){
    const params = {
        transCode: 'D00001',
        count:pageSize4.value,
        page:currentPage4.value,
        searchtag:searchtag,
       // userId:userId.value
        }
        request(params)
          .then((res) => { 
           // console.log(res)
            tableData2.value=res.rows
            total.value=res.total

        
          })
          .catch((err) => {
          })
  }

   function handleClicktable() {
   }
   function handleSelectionChange(val){

      }

   function projectsSelectionSelect(selection, row) {
     if(selection.length>1){
      multipleTableRef.value.clearSelection();
      multipleTableRef.value.toggleRowSelection(row,true);
      multipleSelection.value=selection[1];
      return;
     }
      if(selection.length==1){
        multipleSelection.value=selection;
      
     }else if(selection.length==0){
    
     }
      
    // console.log(row)
   }
   //新建fire
 function newtable(){
      selectstr.value='';
      firepid.value='';
       source.site=0;
       newtable.value='1';
       gdadd.value='1';
 }
    //保存fire
   function handleEditfire(){
    if(gdadd.value=='1'){
      fireadd()
      newaddshow.value=false; 
      waaddshow.value=false;  
   }else if(gdadd.value=='2'){ 
    if(activeName.value=='Fire'){
      newaddshow.value=false; 
    }else {
      waaddshow.value=false; 
    }
    gdxiugaifun()
  
   }
  }
  //  新建
 function fireadd(){
  const params = {
        transCode: 'D00004',
        pid:firepid.value,
        aid:aid.value,
        stype:activeName.value,
        site:source.site,
        userId:userId.value
        }
        request(params)
          .then((res) => { 
            ElMessage({
            message: res.returnMsg,
            type: 'success',
          })
            getdata();
          })
          .catch((err) => {
             ElMessage({
            message: err.returnMsg,
            type: 'error',
          })
          })
}
  // 修改
   function handlexiugai(index,row){
    gdxiugai.value=row;
    gdadd.value='2';//修改跟新建的区分
    selectstr.value=row.pname;
      source.site=row.site;
      firesid.value=row.sid;
     if(activeName.value=='Fire'){
    newaddshow.value=true;
     }else if(activeName.value=='Water'){
      waaddshow.value=true;
     }else{

     }
    
   }
     // 管道的修改
  function gdxiugaifun(){
    const params = {
        transCode: 'D000010',
        pid:gdxiugai.value.pid,
        site:source.site,
        sid:gdxiugai.value.sid,
        userId:userId.value,
        }
        request(params)
          .then((res) => { 
            ElMessage({
            message: res.returnMsg,
            type: 'success',
          })
            getdata();
          })
          .catch((err) => {
          })
  }
//管道删除
 function handleDeletefire(index,row){
  firesid.value=row.sid;
 ///secondmethod();
 firstmethod().then(function(){secondmethod()});
}
function firstmethod(){
 return new Promise((resolve)=>{
       testdata()
       setTimeout(function(){
        resolve();
       },1000)
  })

}
 function secondmethod(){
if(zaiqytabledata.value.length==0){
  fundeledata();
  }else{
    ElMessage({
            message:'有灾源检测，不能删除',
            type: "warning",
          });
  }
// },1000)
  }
//删除接口
function fundeledata(){
  const params = {
        transCode: 'D000011',
        sid:firesid.value,
        userId:userId.value,
        }
        console.log(params);
        request(params)
          .then((res) => { 
            ElMessage({
            message: '删除成功',
            type: 'success',
          })
          getdata();
          })
          .catch((err) => {
          })
}

// 灾情源的删除
   function handleDelete(index,row) {
 
   }
   function queding(){
     selectfun();
   
   
   }
   function selectfun(){
   selectstr.value='';
   currentPage4.value=1;
  // console.log(multipleSelection.value)
     if(multipleSelection.value.length!=0){
    firepid.value=multipleSelection.value[0].id;
    selectstr.value=multipleSelection.value[0].name;
     }else{
       selectstr.value='';
      
     }
   }
   function init(){
     //  this.project.projectId = this.$route.query.projectId; //获取url 参数
        //  window.location.href=logUrl
     let urlarr=(url.value).split("?aid=");
     aid.value=parseInt(urlarr[1]);

   }
   function rowclick(row, column, even){
     selectstr.value=row.pname;
      source.site=row.site;
      firesid.value=row.sid;
      if(activeName.value=='Fire'){
        isDisasterfire.value=true;
        newaddshow.value=false;   

      }else{
        waaddshow.value=false;
        isDisasterwater.value=true;
      }
     
       testdata()
   }
  //检测数据
   function testdata(){
   // zaiqytabledata.value=[];
    const params = {
        transCode: 'D00007',
        sid:firesid.value,
        userId:userId.value
        }
        request(params)
          .then((res) => { 
            zaiqytabledata.value=res.rows;
            if(activeName.value=='Fire'){
              tableDatafir.value=res.rows;
            }else{
              tableDatawat.value=res.rows
            }
          })
          .catch((err) => {
          })
  }
  //新建灾情源
  function jcyclick(){
    Disastersource.value.timeline=''
   Disastersource.value.val1=''
   Disastersource.value.val2=''
   Disastersource.value.val3=''
   Disastersource.value.val4=''
    if(activeName.value=='Fire'){
    jcadd.value='1';
    }
    else if(activeName.value=='Water'){
      jcadd.value='1';
    }
  }
  function newDisaster(){
    const params = {
        transCode: 'D00006',
        sid:firesid.value,
        timeline:Disastersource.value.timeline,
        val1:Disastersource.value.val1,
        val2:Disastersource.value.val2,
        val3:Disastersource.value.val3,
        val4:Disastersource.value.val4,
        userId:userId.value
        }
        request(params)
          .then((res) => { 
           //console.log(res);
           ElMessage({
            message: res.returnMsg,
            type: 'success',
          })
           testdata();
          })
          .catch((err) => {
          })

  }
  function xiugaiDisaster(){
    const params = {
        transCode: 'D000012',
        svid:Disastersource.value.svid,
        timeline:Disastersource.value.timeline,
        val1:Disastersource.value.val1,
        val2:Disastersource.value.val2,
        val3:Disastersource.value.val3,
        val4:Disastersource.value.val4,
        userId:userId.value
        }
        request(params)
          .then((res) => { 
           //console.log(res);
           ElMessage({
            message: res.returnMsg,
            type: 'success',
          })
           testdata();
          })
          .catch((err) => {
          })

  }
  function Disasterclick(){
     console.log(jcadd.value);
    if(jcadd.value=='1'){
      newDisaster();
    }else if(jcadd.value=='2'){
      xiugaiDisaster();
    }else{

    }
  }
//  灾情源的修改
function handlexiugai2(index,row){
  jcadd.value='2';
  dialogVisibleadd.value=true;
  if(activeName.value=='Fire'){
   Disastersource.value.timeline=row.timeline;
  Disastersource.value.val1=row.val1;
  Disastersource.value.val2=row.val2;
  Disastersource.value.val3=row.val3;
   Disastersource.value.val4=row.val4;
   Disastersource.value.svid=row.svid;
  }else if(activeName.value=='Water'){
  Disastersource.value.timeline=row.timeline;
  Disastersource.value.val1=row.val1;
  Disastersource.value.val2=row.val2;
  Disastersource.value.val3=row.val3;
   Disastersource.value.val4=row.val4;
   Disastersource.value.svid=row.svid;
  }else{

  }
}
//灾情源删除
function handleDeletede(index,row){
  const params = {
        transCode: 'D000013',
        svid:row.svid,
        userId:userId.value
        }
        request(params)
          .then((res) => { 
           //console.log(res);
           ElMessage({
            message: "删除成功",
            type: 'success',
          })
           testdata();
          })
          .catch((err) => {
          })
}

// 开始演化
function beginEvolve(){

initWebSocket();
}
//演化过程
const beginprocess = () =>{
// function beginprocess(){
  const params = {
        transCode: 'D00008',
        aid:aid.value,
        stype:activeName.value,
        }
        request(params)
          .then((res) => { 
          emit("logonclick",true)
          })
          .catch((err) => {
          })
}
// 日志

function initWebSocket() {
      //初始化weosocket

      // const wsuri = "ws://192.168.0.43:8087//websocket?projectId="+this.pid; ws://192.168.0.131/diswebsocket?projectId=5
      const wsurl =
        "ws://" +
        process.env.VUE_APP_BASE_websokt +
        "/diswebsocket?projectId=" +'5'
        // aid.value;
        websock = new WebSocket(wsurl);
        websock.onopen = websocketonopen;
        websock.onmessage = websocketonmessage;
        websock.onerror = websocketonerror;
        websock.onclose = websocketclose;
    }

 	// Websoket连接成功事件
   const websocketonopen = (res) => {
      console.log("WebSocket连接成功", res);
      start();
      beginprocess();
    };
    // Websoket接收消息事件
    const websocketonmessage = (res) => {
     // console.log("数据", res);
      logs.value=res.data;
      emit('getthislog',logs.value);
      if(res.data.includes("Simulating")){
        let  data=res.data.replace(/\s/g, "");
      console.log(data);
        let num=data.match(/hour(\S*)minute/)[1];///hour(\S*)minut/
        console.log(num)
      }
      
      reset();
    };
    // Websoket连接错误事件
    const websocketonerror = (res) => {
      console.log("连接错误", res);
      socket.close();
      reconnect();
    };
    // Websoket断开事件
    const websocketclose = (res) => {
      console.log("断开连接", res);
    };
      // 创建 websocket 的实例

     // 心跳包
     const reconnect = () => {
      if (times.value.lockReconnect) return;
      times.value.lockReconnect = true;
      //没连接上会一直重连，设置延迟避免请求过多
      times.value.timeoutnum && clearTimeout(times.value.timeoutnum);
      times.value.timeoutnum = setTimeout(function () {
        //新连接
     initWebSocket();
        times.value.lockReconnect = false;
      }, 10000);
    }
    const  reset = () => {
      //重置心跳
      clearTimeout(times.value.timeoutObj);
      clearTimeout(times.value.serverTimeoutObj);
    start();
    }
    const start = () => {
      //开启心跳
      times.value.timeoutObj && clearTimeout(times.value.timeoutObj);
      times.value.serverTimeoutObj && clearTimeout(times.value.serverTimeoutObj);
      times.value.timeoutObj = setTimeout(function () {
        //这里发送一个心跳，后端收到后，返回一个心跳消息
        if (websock.readyState == 1) {
          //如果连接正常
         websock.send("heartCheck");
        } else {
          //否则重连
          reconnect();
        }
        times.value.serverTimeoutObj = setTimeout(function () {
          // 超时关闭
          websock.close(); //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
        }, times.value.timeout);
      }, times.value.timeout);
    }
   onMounted(()=>{
    init();
   //getdata();
   })
       // 组件被销毁之前，清空 sock 对象
  //  onBeforeUnmount(() => {
  //     // 关闭连接
  //     websocketclose;
  //     // 销毁 websocket 实例对象
  //     socket = null;
  //   });

   
   defineExpose({isshow,getdata,logs})
   </script>
   <style scoped>
   .demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.textright{
  text-align: right;
  padding: 0 20px 
}
   .left_container {
     padding: 15px;
     width: 800px;
     position: relative;
     top: 49px;
     left: 89px;
     z-index: 1110;
     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;
   }
   .magintop{
     margin-top: 15px;
   }
   </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>