压力图
This commit is contained in:
Captain.B
parent
4dbefc9404
commit
04a804f065
|
|
@ -18,7 +18,9 @@
|
|||
"vue": "^2.6.10",
|
||||
"vue-i18n": "^8.15.3",
|
||||
"vue-router": "^3.1.3",
|
||||
"vuex": "^3.1.2"
|
||||
"vuex": "^3.1.2",
|
||||
"echarts": "^4.6.0",
|
||||
"vue-echarts": "^4.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^4.1.0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
import ECharts from 'vue-echarts'
|
||||
import 'echarts/lib/chart/line'
|
||||
|
||||
export default {
|
||||
install(Vue) {
|
||||
Vue.component('chart', ECharts);
|
||||
}
|
||||
}
|
||||
|
|
@ -16,9 +16,7 @@
|
|||
</div>
|
||||
<div class="form">
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="form.username" :placeholder="$t('commons.username')" autofocus autocomplete="off"
|
||||
maxlength="100"
|
||||
show-word-limit/>
|
||||
<el-input v-model="form.username" :placeholder="$t('commons.username')" autofocus autocomplete="off"/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="form.password" :placeholder="$t('commons.password')" show-password autocomplete="off"
|
||||
|
|
|
|||
|
|
@ -1,57 +1,47 @@
|
|||
<template>
|
||||
<div class="pressure-config-container">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-col :span="12">
|
||||
<el-form :inline="true">
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<div class="config-form-label">{{$t('load_test.thread_num')}}</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input-number
|
||||
:placeholder="$t('load_test.input_thread_num')"
|
||||
v-model="threadNumber"
|
||||
@change="calculateChart"
|
||||
:min="1"
|
||||
size="mini"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form :inline="true">
|
||||
<el-form-item>
|
||||
<div class="config-form-label">{{$t('load_test.duration')}}</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input-number
|
||||
:placeholder="$t('load_test.duration')"
|
||||
v-model="duration"
|
||||
:min="1"
|
||||
@change="calculateChart"
|
||||
size="mini"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form :inline="true">
|
||||
<el-form-item>
|
||||
<el-form-item>
|
||||
<div class="config-form-label">{{$t('load_test.thread_num')}}</div>
|
||||
<div class="config-form-label">{{$t('load_test.rps_limit')}}</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
type="number"
|
||||
:placeholder="$t('load_test.input_thread_num')"
|
||||
v-model="threadNumber"
|
||||
@click="convertProperty"
|
||||
show-word-limit
|
||||
>
|
||||
</el-input>
|
||||
<el-input-number
|
||||
:placeholder="$t('load_test.input_rps_limit')"
|
||||
v-model="rpsLimit"
|
||||
@change="calculateChart"
|
||||
:min="1"
|
||||
size="mini"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<div class="config-form-label">{{$t('load_test.duration')}}</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
type="number"
|
||||
:placeholder="$t('load_test.duration')"
|
||||
v-model="duration"
|
||||
@click="convertProperty"
|
||||
show-word-limit
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-row>
|
||||
<el-form-item>
|
||||
<el-col>
|
||||
<el-form-item>
|
||||
<div class="config-form-label">{{$t('load_test.rps_limit')}}</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
type="number"
|
||||
:placeholder="$t('load_test.input_rps_limit')"
|
||||
v-model="rpsLimit"
|
||||
@click="convertProperty"
|
||||
show-word-limit
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form :inline="true" class="input-bottom-border">
|
||||
|
|
@ -59,52 +49,55 @@
|
|||
<div>{{$t('load_test.ramp_up_time_within')}}</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
type="number"
|
||||
<el-input-number
|
||||
placeholder=""
|
||||
:min="1"
|
||||
v-model="rampUpTime"
|
||||
@click="convertProperty"
|
||||
show-word-limit
|
||||
>
|
||||
</el-input>
|
||||
@change="calculateChart"
|
||||
size="mini"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div>{{$t('load_test.ramp_up_time_minutes')}}</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
type="number"
|
||||
<el-input-number
|
||||
placeholder=""
|
||||
:min="1"
|
||||
v-model="step"
|
||||
@click="convertProperty"
|
||||
show-word-limit
|
||||
>
|
||||
</el-input>
|
||||
@change="calculateChart"
|
||||
size="mini"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div>{{$t('load_test.ramp_up_time_times')}}</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
压力预估图
|
||||
<chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "MsTestPlanPressureConfig",
|
||||
data() {
|
||||
return {
|
||||
testPlan: {},
|
||||
threadNumber: 2,
|
||||
duration: 3,
|
||||
threadNumber: 10,
|
||||
duration: 30,
|
||||
rampUpTime: 12,
|
||||
step: 2,
|
||||
step: 4,
|
||||
rpsLimit: 10,
|
||||
orgOptions: {},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
mounted() {
|
||||
this.testPlan.loadConfigurationObj = [];
|
||||
this.calculateChart();
|
||||
this.convertProperty();
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -113,6 +106,39 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
calculateChart() {
|
||||
this.orgOptions = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: []
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [{
|
||||
data: [],
|
||||
type: 'line',
|
||||
}]
|
||||
};
|
||||
let timePeriod = Math.ceil(this.rampUpTime / this.step);
|
||||
let threadPeriod = Math.ceil(this.threadNumber / this.step);
|
||||
let inc = threadPeriod;
|
||||
|
||||
for (let i = 0; i < this.duration; i++) {
|
||||
// x 轴
|
||||
this.orgOptions.xAxis.data.push(i);
|
||||
if (i > timePeriod) {
|
||||
threadPeriod = threadPeriod + inc;
|
||||
timePeriod += timePeriod;
|
||||
if (threadPeriod > this.threadNumber) {
|
||||
threadPeriod = this.threadNumber;
|
||||
}
|
||||
this.orgOptions.series[0].data.push(threadPeriod);
|
||||
} else {
|
||||
this.orgOptions.series[0].data.push(threadPeriod);
|
||||
}
|
||||
}
|
||||
},
|
||||
convertProperty() {
|
||||
/// todo：下面4个属性是jmeter ConcurrencyThreadGroup plugin的属性，这种硬编码不太好吧，在哪能转换这种属性？
|
||||
return [
|
||||
|
|
@ -140,4 +166,8 @@
|
|||
border: 0;
|
||||
border-bottom: 1px solid #DCDFE6;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import './permission' // permission control
|
|||
import i18n from "../i18n/i18n";
|
||||
import store from "./store";
|
||||
import {permission} from './permission'
|
||||
import chart from "../common/chart";
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
Vue.use(icon);
|
||||
|
|
@ -18,9 +19,10 @@ Vue.use(ElementUI, {
|
|||
});
|
||||
Vue.use(filters);
|
||||
Vue.use(ajax);
|
||||
Vue.use(chart);
|
||||
|
||||
// v-permission
|
||||
Vue.directive('permission', permission)
|
||||
Vue.directive('permission', permission);
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
|
|
|
|||
Loading…
Reference in New Issue