heatmap
This commit is contained in:
Captain.B
parent
ffdf8ef805
commit
7638513556
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<el-card>
|
||||
<template v-slot:header>
|
||||
<span class="title">{{$t('commons.calendar_heatmap')}}</span>
|
||||
</template>
|
||||
<calendar-heatmap :end-date="endDate" :values="values" :locale="locale"
|
||||
tooltip-unit="tests"
|
||||
:range-color="colorRange"/>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MsTestHeatmap",
|
||||
props: ['values'],
|
||||
data() {
|
||||
return {
|
||||
endDate: new Date(),
|
||||
colorRange: ['#ebedf0', '#dae2ef', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'],
|
||||
locale: {
|
||||
// 一月 二月 三月 四月 五月 六月 七月 八月 九月 十月 十一月 十二月
|
||||
months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
// 星期日 Sun. 星期一 Mon. 星期二 Tues. 星期三 Wed. 星期四 Thur. 星期五 Fri. 星期六 Sat.
|
||||
days: ['Sun', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat'],
|
||||
No: 'No',
|
||||
on: 'on',
|
||||
less: 'Less',
|
||||
more: 'More'
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<el-card class="table-card" v-loading="result.loading">
|
||||
<template v-slot:header>
|
||||
<span class="title">{{$t('api_report.title')}}</span>
|
||||
</template>
|
||||
<el-table :data="tableData" class="table-content">
|
||||
<el-table-column :label="$t('commons.name')" width="150" show-overflow-tooltip>
|
||||
<template v-slot:default="scope">
|
||||
<el-link type="info" @click="link(scope.row)">{{ scope.row.name }}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="250" :label="$t('commons.create_time')">
|
||||
<template v-slot:default="scope">
|
||||
<span>{{ scope.row.createTime | timestampFormatDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="250" :label="$t('commons.update_time')">
|
||||
<template v-slot:default="scope">
|
||||
<span>{{ scope.row.updateTime | timestampFormatDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" :label="$t('commons.status')">
|
||||
<template v-slot:default="{row}">
|
||||
{{row.status}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "MsPerformanceReportRecentList",
|
||||
data() {
|
||||
return {
|
||||
result: {},
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
search() {
|
||||
this.result = this.$get("/performance/report/recent/5", response => {
|
||||
this.tableData = response.data;
|
||||
});
|
||||
},
|
||||
link(row) {
|
||||
this.$router.push({
|
||||
path: '/api/report/view/' + row.id,
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.search();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,11 +1,17 @@
|
|||
<template>
|
||||
<ms-container>
|
||||
<ms-main-container>
|
||||
<el-card>
|
||||
<calendar-heatmap :end-date="endDate" :values="values" :locale="locale"
|
||||
tooltip-unit="tests"
|
||||
:range-color="colorRange"/>
|
||||
</el-card>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<ms-performance-report-recent-list/>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<ms-performance-test-recent-list/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<ms-test-heatmap :values="values"></ms-test-heatmap>
|
||||
</el-row>
|
||||
</ms-main-container>
|
||||
</ms-container>
|
||||
|
||||
|
|
@ -14,25 +20,22 @@
|
|||
<script>
|
||||
import MsContainer from "../../common/components/MsContainer";
|
||||
import MsMainContainer from "../../common/components/MsMainContainer";
|
||||
import MsPerformanceTestRecentList from "./PerformanceTestRecentList"
|
||||
import MsPerformanceReportRecentList from "./PerformanceReportRecentList"
|
||||
import MsTestHeatmap from "../../common/components/MsTestHeatmap";
|
||||
|
||||
export default {
|
||||
name: "PerformanceTestHome",
|
||||
components: {MsMainContainer, MsContainer},
|
||||
components: {
|
||||
MsTestHeatmap,
|
||||
MsMainContainer,
|
||||
MsContainer,
|
||||
MsPerformanceTestRecentList,
|
||||
MsPerformanceReportRecentList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
values: [],
|
||||
endDate: new Date(),
|
||||
colorRange: ['#ebedf0', '#dae2ef', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'],
|
||||
locale: {
|
||||
// 一月 二月 三月 四月 五月 六月 七月 八月 九月 十月 十一月 十二月
|
||||
months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
// 星期日 Sun. 星期一 Mon. 星期二 Tues. 星期三 Wed. 星期四 Thur. 星期五 Fri. 星期六 Sat.
|
||||
days: ['Sun', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat'],
|
||||
No: 'No',
|
||||
on: 'on',
|
||||
less: 'Less',
|
||||
more: 'More'
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -44,5 +47,7 @@
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.el-row {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,65 @@
|
|||
<template>
|
||||
<el-card class="table-card" v-loading="result.loading">
|
||||
<template v-slot:header>
|
||||
<span class="title">{{$t('api_test.title')}}</span>
|
||||
</template>
|
||||
<el-table :data="tableData" class="table-content">
|
||||
<el-table-column :label="$t('commons.name')" width="150" show-overflow-tooltip>
|
||||
<template v-slot:default="scope">
|
||||
<el-link type="info" @click="link(scope.row)">{{ scope.row.name }}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="projectName" :label="$t('load_test.project_name')" width="150" show-overflow-tooltip/>
|
||||
<el-table-column width="250" :label="$t('commons.create_time')">
|
||||
<template v-slot:default="scope">
|
||||
<span>{{ scope.row.createTime | timestampFormatDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="250" :label="$t('commons.update_time')">
|
||||
<template v-slot:default="scope">
|
||||
<span>{{ scope.row.updateTime | timestampFormatDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" :label="$t('commons.status')">
|
||||
<template v-slot:default="{row}">
|
||||
<!-- <ms-api-test-status :row="row"/>-->
|
||||
{{row.status}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "MsPerformanceTestRecentList",
|
||||
data() {
|
||||
return {
|
||||
result: {},
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
search() {
|
||||
this.result = this.$get("/performance/recent/5", response => {
|
||||
this.tableData = response.data;
|
||||
});
|
||||
},
|
||||
link(row) {
|
||||
this.$router.push({
|
||||
path: '/api/test/edit?id=' + row.id,
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.search();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -60,6 +60,7 @@ export default {
|
|||
'title': 'Title',
|
||||
'custom': 'Custom',
|
||||
'select_date': 'Select date',
|
||||
'calendar_heatmap': 'Calendar Heatmap'
|
||||
},
|
||||
workspace: {
|
||||
'create': 'Create Workspace',
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@ export default {
|
|||
'title': '标题',
|
||||
'custom': '自定义',
|
||||
'select_date': '选择日期',
|
||||
'calendar_heatmap': '测试日历'
|
||||
},
|
||||
workspace: {
|
||||
'create': '创建工作空间',
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@ export default {
|
|||
'title': '標題',
|
||||
'custom': '自定義',
|
||||
'select_date': '選擇日期',
|
||||
'calendar_heatmap': '測試日曆'
|
||||
},
|
||||
workspace: {
|
||||
'create': '創建工作空間',
|
||||
|
|
|
|||
Loading…
Reference in New Issue