src/views/index/HCFDLab/echartsHFCD.vue

@@ -18,6 +18,13 @@ import { Message, MessageBox } from "element-ui";
 export default {
   data() {
     return {
+       // 心跳包的参数
+      websock: null, //建立连接
+      lockReconnect: false, //是否真正建立连接
+      timeout: 28 * 1000, //30秒一次心跳
+      timeoutObj: null, //心跳倒计时
+      serverTimeout0bj: null, //
+      timeoutnum: null, //断开重连倒计时
        container_show:false,
       chart: null,
       convergeDate: { title: "hcfd", VARIABLES: [], value: [] },
@@ -102,7 +109,7 @@ export default {
 
   // 时间换算
   timedata(d1, d2,s1){
-    console.log(this.nmlsteps);
+  //  console.log(this.nmlsteps);
  var date1 = new Date(d1);   //开始时间  
             var date2 = new Date(d2);    //结束时间  
              var cydata=(date2.getTime() - new Date(date1).getTime())/s1*(Number(this.nmlsteps)-s1);
@@ -167,6 +174,46 @@ export default {
           console.log(res)
             })
   },
+   // 心跳包
+    reconnect() {
+      var that = this;
+      if (that.lockReconnect) return;
+      that.lockReconnect = true;
+      //没连接上会一直重连，设置延迟避免请求过多
+      that.timeoutnum && clearTimeout(that.timeoutnum);
+      that.timeoutnum = setTimeout(function () {
+        //新连接
+        that.getwebsocket();
+        that.lockReconnect = false;
+      }, 5000);
+    },
+    reset() {
+      //重置心跳
+      var that = this;
+      clearTimeout(this.timeoutObj);
+      clearTimeout(this.serverTimeoutObj);
+      that.start();
+    },
+    start() {
+      //开启心跳
+      var self = this;
+      self.timeoutObj && clearTimeout(self.timeoutObj);
+      self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
+      self.timeoutObj = setTimeout(function () {
+        //这里发送一个心跳，后端收到后，返回一个心跳消息
+        if (self.websock.readyState == 1) {
+          //如果连接正常
+          self.websock.send("heartCheck");
+        } else {
+          //否则重连
+          self.reconnect();
+        }
+        self.serverTimeoutObj = setTimeout(function () {
+          // 超时关闭
+          self.websock.close(); //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
+        }, self.timeout);
+      }, this.timeout);
+    },
     // websocket
     getwebsocket() {
 
@@ -184,6 +231,7 @@ export default {
       this.websock.onclose = this.websocketclose;
     },
     websocketonopen(e) {
+        this.start();
          this.keyactive =sessionStorage.getItem("keyactive");
       //连接建立之后执行send方法发送数据this.newlog();
       // if(this.lsolverState=='1'||this.numzhexian=='1'){
@@ -191,10 +239,8 @@ export default {
          // this.historydata()
             // }
             if( this.keyactive =='four44-0'){
-              console.log(4444)
                     this.historydata()
             }else{
-              console.log(55555)
                this.getlog();
                 this.historydata()
             }
@@ -202,20 +248,22 @@ export default {
     },
     websocketonerror() {
       //连接建立失败重连
-      this.websock.close();
+
+      this.websock.close()
+      this.reconnect();
     },
     websocketonmessage(e) {
       //数据接收
-
+   this.reset();
    try{
             const redata = JSON.parse(e.data);
+            console.log(redata);
             if(typeof redata==='object'&& redata){
             // if(redata.stats=="old"){
             //       this.$emit('getthislog',redata.value);
             // }
-              console.log(redata);
+        
               if(redata.type == "log"){
-                    // this.$emit('statechange','1');redata.stats+
                 let newoldSolver=redata.stats+redata.value;
                 this.$emit('getthislog',redata.value,newoldSolver);
               }
@@ -239,6 +287,7 @@ export default {
     },
     websocketsend(Data) {
       //数据发送
+   
       this.websock.send(Data);
     },
     websocketclose(e) {

src/views/index/HCFDLab/index.vue

@@ -2095,7 +2095,7 @@
         <el-form-item
           label="时间格式"
           :label-width="formLabelWidth7"
-          style=" text-align: left;"
+          class="shijianges"
         >
           <el-select
             v-model="parameterObj.nmlParam.time_accuracy"
@@ -2110,20 +2110,19 @@
             </el-option>
           </el-select>
         </el-form-item>
-        <li
-          class="lheig34 disflex liitem liangf"
-          style="padding:5px 0"
+           <el-form-item
+          :label="$t('HCFD.solution.stepping')"
+          :label-width="formLabelWidth61"
+          class="iemradio shijianges"
         >
-          <span class="formLabelWidth8">{{$t('HCFD.solution.stepping')}}</span>
-          <el-radio-group
-            class="inpw35"
-            style="display:flex"
-            v-model="parameterObj.nmlParam.pseudo_time_stepping"
-          >
-            <el-radio :label="'on'">On</el-radio>
-            <el-radio :label="'off'">Off</el-radio>
+          <el-radio-group v-model="parameterObj.nmlParam.pseudo_time_stepping">
+            <el-radio label="off">Off</el-radio>
+            <el-radio
+              label="on"
+              class="radiooff"
+            >On</el-radio>
           </el-radio-group>
-        </li>
+        </el-form-item>
         <li class="disflex liitem liangf">
           <span class="formLabelWidth8">{{$t('HCFD.solution.nondim')}}</span>
           <el-input v-model="parameterObj.nmlParam.time_step_nondim"></el-input>
@@ -2133,17 +2132,17 @@
           <el-input v-model="parameterObj.nmlParam.subiterations"></el-input>
         </li>
         <li class="disflex liitem liangf">
-          <span class="formLabelWidth8">{{$t('HCFD.solution.cfl')}}</span>
+          <span class="formLabelWidth9">{{$t('HCFD.solution.cfl')}}</span>
           <el-input v-model="parameterObj.nmlParam.schedule_iteration[0]"></el-input>
           <el-input v-model="parameterObj.nmlParam.schedule_iteration[1]"></el-input>
         </li>
         <li class="disflex liitem liangf">
-          <span class="formLabelWidth8">{{$t('HCFD.solution.Schedulecfl')}}</span>
+          <span class="formLabelWidth9">{{$t('HCFD.solution.Schedulecfl')}}</span>
           <el-input v-model="parameterObj.nmlParam.schedule_cfl[0]"></el-input>
           <el-input v-model="parameterObj.nmlParam.schedule_cfl[1]"></el-input>
         </li>
         <li class="disflex liitem liangf">
-          <span class="formLabelWidth8">{{$t('HCFD.solution.cflturb')}}</span>
+          <span class="formLabelWidth9">{{$t('HCFD.solution.cflturb')}}</span>
           <el-input v-model="parameterObj.nmlParam.schedule_cflturb[0]"></el-input>
           <el-input v-model="parameterObj.nmlParam.schedule_cflturb[1]"></el-input>
         </li>
@@ -2483,7 +2482,7 @@
         </li>
         <el-form-item
           :label="$t('HCFD.solution.gcr')"
-          :label-width="formLabelWidth6"
+          :label-width="formLabelWidth61"
           class="iemradio"
         >
           <el-radio-group v-model="parameterObj.nmlParam.line_implicit">
@@ -2816,13 +2815,14 @@
         <el-form-item
           :label="$t('HCFD.solution.Restart')"
           :label-width="formLabelWidth6"
+          class="iemradio"
         >
           <el-radio-group
             class="inpw35"
             v-model="parameterObj.nmlParam.restart_read"
           >
             <el-radio label="off">Off</el-radio>
-            <el-radio label="on">On</el-radio>
+            <el-radio label="on"  class="radiooff">On</el-radio>
           </el-radio-group>
         </el-form-item>
         <!-- <el-button type="info"  @click="hcfdparam()"> 运行</el-button> -->
@@ -4932,7 +4932,9 @@ export default {
       formLabelWidth4: "37px",
       formLabelWidth5: "100px",
       formLabelWidth6: "120px",
+       formLabelWidth61: "134px",
       formLabelWidth7: "170px",
+      formLabelWidth9: "407px",
       switchvalue: "1",
       styX: {
         left: "",
@@ -5978,17 +5980,17 @@ export default {
         })
           .then(() => {
             MessageBox.close();
-            this.$emit("exlodingfalse", true);
             this.isSolverEnd = false;
             this.hcfdExe();
             let _this = this;
             let isStop = false;
             this.$parent.funagain();
+            this.$emit("exlodingfalse", true);
           })
           .catch(() => {
             Message.info("已取消！");
             MessageBox.close();
-            this.$emit("exlodingfalse", false);
+           this.$emit("exlodingfalse", false);
               this.funbool=false;
           });
       } else {
@@ -8055,6 +8057,7 @@ body {
   justify-content: space-around;
   align-items: center;
 }
+
 .footerTitle p {
   margin: 0;
 }
@@ -8071,7 +8074,9 @@ body {
   color: #333;
   padding: 2px;
 }
-
+/deep/.shijianges .el-form-item__label{
+      text-align: left  !important;
+}
 .radio_text {
   line-height: 28px;
   .el-radio__label {
@@ -8271,9 +8276,12 @@ body {
 .classfelx {
   flex: 1;
 }
-.liitem .formLabelWidth8 {
+.liitem .formLabelWidth8,.formLabelWidth8{
   width: 343px;
 }
+.liitem .formLabelWidth9 {
+  width: 409px;
+}
 .formLabelWidth15 {
   width: 70px;
   text-align: center;

src/views/index/index.vue

@@ -259,7 +259,7 @@
                 @statechange='statechange'
                 @getthislog='getthislog'
                 @restimeyear='restimeyear'
-                :projectId='pid'
+                :projectId='pid'  
                 :nmlsteps="Number(numsteps)"
               ></echartsHFCD>
               <!-- 加载图片 -->
@@ -288,6 +288,9 @@
                 <li>
                   <span @click="footerShows('claer')">清空</span>
                 </li>
+                <!-- <li>
+                  <span @click="exlodingfalse(false)">按钮</span>
+                </li> -->
                 <li>
                   <span @click="footerShows('foot')">&#9650;&#9660;</span>
                 </li>
@@ -679,7 +682,9 @@ export default {
       }
     },
     exlodingfalse(res) {
-      this.elodingfalse = res;
+      this.footerShows("claer");
+    this.elodingfalse =res;
+    console.log(this.elodingfalse)
     },
     handleNodeClick(data) {},
     hide() {
@@ -807,9 +812,7 @@ export default {
     fun() {
       this.logs = "";
       this.newlog = "";
-      console.log(1111)
       let funbool= this.$refs.hcfd.funbool;
-      console.log(funbool);
       if(funbool==true){
        this.$refs.hcfd.funbool=false;
         this.$refs.monitor.getwebsocket();
@@ -834,18 +837,17 @@ export default {
       // }
     },
     funagain() {
-      // if (this.statecustom == "1") {
+      // if (this.elodingfalse == true) {
       //   Message({
       //     type: "warning",
       //     message: "运行中不能点击",
       //   });
       // } else {
-
         this.$refs.monitor.getwebsocket();
         this.$refs.monitor.container_show = true;
         this.monitorHCFD = this.$refs.monitor.container_show;
         this.$refs.TFileStream.imgtupian = false;
-      // }
+      //  }
     },
     // 工具栏的显示隐藏
     changehcfd(pare) {
@@ -884,10 +886,10 @@ export default {
         this.elodingfalse = false;
         this.isSolverEnd = true;
         this.statecustom = "0";
+
       }
       // if (endvew.includes("oldSolver end")){//newoldSolver.includes("oldSolver end"
       //   this.statecustom = "0";
-      //    console.log(2222)
       // }
     },
     // 剩余时间
@@ -1039,7 +1041,6 @@ export default {
              this.loadingopen();
           if (rdata.hasOwnProperty("img")) {
              //this.loadingopen();
-          console.log(222222);
             this.$refs.TFileStream.imgtupian = true;
             this.$refs.TFileStream.fetchData(rdata, null);
             this.$refs.monitor.container_show = false;