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