js点击触发计时

<template>
  <div>
    <div style="background: white; height: 100%">
      <div class="up_css">
        <p>
        JMETER运行状态:
        <a-tag
          :color="this.jmeterStatus != true ? 'green' : 'grey'"
          style="font-size: 16px; cursor: pointer; "
        >
        
          {{ this.jmeterStatus != true ? "繁忙中~" : "空闲中~" }}
          <a-icon type="loading" v-if="!this.jmeterStatus" style="{ fontSize: '36px', color: '#08c' }"/>
        </a-tag>
        </p>

        <el-button
          v-if="button_status"
          type="primary"
          icon="el-icon-caret-right"
          style="width: 10%"
          @click="button_status_handle(1)"
          >执行</el-button
        >

        <el-button
          v-if="!button_status"
          type="primary"
          icon="el-icon-loading"
          style="width: 10%"
          @click="button_status_handle(0)"
          ><a-icon type="pause" />
        </el-button>

        <!-- 运行时间 -->
        <div
          id="runtime"
          style="
            border-style: outset;
            width: 170px;
            height: 80%;
            text-align: center;
            padding: 4px;
          "
        >
          0天 0小时 00分00秒
        </div>
        <!-- 错误数统计 -->
        <div><a-icon type="alert" style="color: red" /> 0</div>
        <!-- 压测模式按钮 -->
        <el-button type="primary" @click="pmMode()">压测模式</el-button>
      </div>
      <!-- 分割线 -->
      <div style="width: 100%; height: 1px; border-top: double"></div>
    </div>

    <div class="list">
      <left_script
        v-on:rightChange="rightChange($event)"
        style="padding: 0 20px 0px 0px; height: 200px"
        ref="leftScript"
      ></left_script>
      <right_script ref="right"></right_script>
      <pm_mode ref="pm_mode"></pm_mode>
    </div>
  </div>
</template>


<script>
import left_script from "../../scriptCommon/scriptManage/left/left_script";
import right_script from "../../scriptCommon/scriptManage/right/right_script";
import pm_mode from "../../scriptCommon/scriptManage/pm_mode";
import { per_get_JmeterStatus } from "../../../../../../api/index";

export default {
  components: {
    left_script,
    right_script,
    pm_mode,
  },
  //页面载入前执行
  mounted(){
this.timeid=setInterval(
  this.jmeterStatusMeter, 
  5000);
 },
//页面切换
 destroyed(){
   clearInterval(this.timeid)
 },


  data() {
    return {
      timeid:1,
      // jmeter空闲情况
      jmeterStatus: true,
      //用例执行状态
      button_status: true,
      //时间计算
      strDate: 0,
      runtimehandle: "",
    };
  },
  methods: {
    async  jmeterStatusMeter() {
    const { response } = await per_get_JmeterStatus("");
    this.jmeterStatus = response.available;
    this.$refs.leftScript.getget_plans();
    },

    //控制右侧列表接口展示
    rightChange(e) {
      // 传id给右边列表 发请求
      this.$refs.right.getRqList(e);
    },
    // 压测模式
    pmMode() {
      
      this.$refs.pm_mode.per_get_mode_msg();
      this.$refs.pm_mode.visible = true;
    },
    //顶部脚本执行与停止状态切换
    button_status_handle(e) {
      this.button_status = !this.button_status;
      if (e == 1) {
        this.runtime();
      } else {
        clearInterval(this.runtimehandle);
      }
    },
    //顶部运行时间计算
    runtime() {
      //获取当前的时间
      var date = new Date();
      var year = date.getFullYear(); //月份从0~11，所以加一
      let month = date.getMonth();
      var dateArr = [
        date.getMonth() + 1,
        date.getDate(),
        date.getHours(),
        date.getMinutes(),
        date.getSeconds(),
      ];
      //如果格式是MM则需要此步骤，如果是M格式则此循环注释掉
      for (var i = 0; i < dateArr.length; i++) {
        if (dateArr[i] >= 1 && dateArr[i] <= 9) {
          dateArr[i] = "0" + dateArr[i];
        }
      }
      var strDate =
        year +
        "/" +
        dateArr[0] +
        "/" +
        dateArr[1] +
        " " +
        dateArr[2] +
        ":" +
        dateArr[3] +
        ":" +
        dateArr[4];
      //此处可以拿外部的变量接收，也可直接返回  strDate:2022-05-01 13:25:30
      //this.date = strDate;
      console.log("strDate", strDate);
      this.strDate = strDate;

      // 开始时间
      var start = new Date(this.strDate).getTime();

      // 这个当页面被关 再进来时 有任务在跑 给他 任务的开始时间
      // var start=1689436800000

      this.runtimehandle = window.setInterval(function () {
        // 现在
        var now = new Date().getTime();
        // 运行总时间
        var run = now - start;
        // 总秒
        var sumSeconds = parseInt(run / 1000);
        // 天数
        var d = parseInt(sumSeconds / 86400);
        // 小时
        var h = parseInt((sumSeconds % 86400) / 3600);
        // 分钟
        var min = size(parseInt((sumSeconds / 60) % 60));
        // 秒
        var m = size(parseInt(sumSeconds % 60));
        // 插入
        document.querySelector("#runtime").innerHTML =
          "" + d + "天 " + h + "小时 " + min + "分" + m + "秒";
      }, 1000);
      // 小于10的数，前边增加一个0
      function size(d) {
        return d < 10 ? "0" + d : d;
      }
    },
  },

  
 
};
</script>



<style scoped>
.up_css {
  display: flex;
  flex-direction: "column";
  margin-bottom: 30px;
  height: 50px;
  padding-top: 9px;
  justify-content: space-around;
  align-items: baseline;
}
.list {
  display: flex;
  flex-direction: "column";
  margin-bottom: 30px;
  padding-top: 9px;
  justify-content: space-between;
  align-items: baseline;
  height: 900px;
}
</style>