Skip to content

Q
qa-platform-ui
Commit 5f6a966d authored by 王晓铜's avatar 王晓铜
Browse files
Options

添加报告管理模块

parent 6aec6e96
Hide whitespace changes
Inline Side-by-side
Showing with 191 additions and 30 deletions
config/prod.env.js
View file @ 5f6a966d
......@@ -2,7 +2,7 @@
module.exports = {
NODE_ENV: '"production"',
ENV_CONFIG: '"prod"',
QA_PLATFORM: '"//qa-platform-yxm.liangkebang.net/"',
QA_PLATFORM: '"//qa-platform-fe.liangkebang.net/"',
TESTDATA_API: '"//testdata.liangkebang.com"',
HOLMES: '"//holmes-yxm.liangkebang.net/"',
HOLMES: '"//holmes-fe.liangkebang.net/"',
}
src/router/index.js
View file @ 5f6a966d
......@@ -32,6 +32,11 @@ import RepayCallback from '../views/vcc/RepayCallback'
import ReportList from '../views/auto/ReportList'
import ReportDetail from '../views/auto/ReportDetail'
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
Vue.use(Router)
const router = new Router({
mode: 'history',
......
src/views/auto/AddCase.vue
View file @ 5f6a966d
......@@ -476,6 +476,7 @@ export default {
}
}
})
console.log('保存信息', this.caseForm)
},
// 取消按钮
cancelCaseFrom() {
......
src/views/auto/ReportDetail.vue
View file @ 5f6a966d
<template>
<div>
<el-card>
<div style="font-size:20px;margin-left:300px;font-weigth:20px">场景用例执行结果</div>
<div id="chartPie" style="width:900px ;height:400px;"></div>
<el-row>
<el-col :span="10">
<div class="rowStyle">
<el-row>
<el-col :span="4" style="color:#878080">用例名称：</el-col>
<el-col :span="20">
<div>
<el-input v-model="sceneName"></el-input>
</div>
</el-col>
</el-row>
<el-row>
<div class="col_style">
<el-col :span="4" style="color:#878080">用例总数：</el-col>
<el-col :span="20">
<el-input v-model="totalNumber"></el-input>
</el-col>
</div>
</el-row>
<el-row>
<div class="col_style">
<el-col :span="4" style="color:#878080">运行时间(s)：</el-col>
<el-col :span="20">
<el-input v-model="totalElapsedTime"></el-input>
</el-col>
</div>
</el-row>
<el-row>
<div class="col_style">
<el-col :span="4" style="color:#878080">通过个数：</el-col>
<el-col :span="20">
<el-input v-model="totalPass"></el-input>
</el-col>
</div>
</el-row>
<el-row>
<div class="col_style">
<el-col :span="4" style="color:#878080">失败个数：</el-col>
<el-col :span="20">
<el-input v-model="totalFail"></el-input>
</el-col>
</div>
</el-row>
</div>
</el-col>
<el-col :span="14">
<div class="divStyle">{{sceneName}}用例执行结果</div>
<div id="chartPie" style="width:900px ;height:250px;margin-top:10px"></div>
</el-col>
</el-row>
</el-card>
<el-card>
<el-table>
<el-table :data="reportDetailList" style="width: 100%" :header-cell-style="{background:'#FFE4C4',color:'#606266'}">
<el-table-column type="expand">
<template slot-scope="props">
<el-row>
<el-col :span="2">
<div class="colStyle">请求头</div>
</el-col>
<el-col :span="22">
<json-viewer :expand-depth=3 :value='props.row.headers'></json-viewer>
</el-col>
</el-row>
<el-row>
<el-col :span="2" class="colStyle">请求参数</el-col>
<el-col :span="22">
<json-viewer :expand-depth=3 :value='props.row.parameters'></json-viewer>
</el-col>
</el-row>
<el-row>
<el-col :span="2" class="colStyle">响应结果</el-col>
<el-col :span="22">
<json-viewer :expand-depth=3 :value='props.row.response'></json-viewer>
</el-col>
</el-row>
<el-row>
<el-col :span="2" class="colStyle">断 言</el-col>
<el-col :span="22">
<el-table v-if="isShowTable" :data="validateList" border style="width: 60%" :header-cell-style="{background:'#E6F3F7',color:'#606266','text-align':'center'}"
:cell-style="{'text-align':'center',background:'#E3EDEB',color:'#606266'}">
<el-table-column prop="check" label="检查值" width="250px"></el-table-column>
<el-table-column prop="comparator" label="比较符" width="250px"></el-table-column>
<el-table-column prop="expect" label="预期结果"></el-table-column>
</el-table>
</el-col>
</el-row>
</template>
</el-table-column>
<el-table-column type='index' label="序号" width="100px"></el-table-column>
<el-table-column prop="interfaceName" label="接口名称" width="250px"></el-table-column>
<el-table-column prop="interfaceUrl" label="接口URL"></el-table-column>
<el-table-column prop="elapsedTime" label="耗时(s)" width="200px"></el-table-column>
<el-table-column prop="status" label="结果" width="200px">
<template slot-scope="scope">
<el-tag :type="scope.row.status === 'pass' ? 'success' : 'danger'" close-transition effect="dark">{{scope.row.status}}</el-tag>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
......@@ -24,14 +117,25 @@ export default {
charts: '',
opinion: ['成功', '失败'],
opinionData: [],
reportDetailList: []
reportDetailList: [],
sceneName: '',
validateList: [
{ check: 'name', comparator: 'eq', expect: 'zhansan' },
{ check: 'age', comparator: 'eq', expect: '18' }
],
isShowTable: false,
totalElapsedTime: '',
totalPass: '',
totalFail: '',
totalNumber: ''
}
},
created() {
this.$bus.$off('reportDetail').$on('reportDetail', (row) => {
// console.log('参数信息', row)
console.log('参数信息', row)
this.queryReportDetail.namespace = row.namespace
this.queryReportDetail.batch = row.batch
this.sceneName = row.sceneName
this.getReportDetail()
})
},
......@@ -40,24 +144,30 @@ export default {
drawPieChart(id) {
this.charts = this.$echarts.init(document.getElementById(id))
this.charts.setOption({
// title: {
// text: '场景用例执行结果',
// subtext: '',
// left: 300
// },
tooltip: {
trigger: 'item',
formatter: '{a}<br/>{b}:{c} ({d}%)'
},
legend: {
padding: [10, 50, 0, 0],
left: 300,
data: this.opinion,
bottom: 0
orient: 'vertical', // 图标展示形似（横/竖）
left: 200,
y: 'top',
data: this.opinion
// bottom: 0
},
series: [
{
name: '运行结果',
type: 'pie',
radius: '60%',
center: ['40%', '60%'],
// avoidLabelOverlap: true,
padding: [5, 10, 5, 10],
radius: '70%',
// center: ['40%', '60%'],
center: ['45%', '45%'], // 距离左跟上的位置
padding: [500, 10, 0, 0],
itemStyle: {
emphasis: {
shadowBlur: 10,
......@@ -66,7 +176,7 @@ export default {
},
color: function (params) {
// 自定义颜色
var colorList = ['#67C23A', '#FF0000']
var colorList = ['#50CFC7', '#CD5E5D']
return colorList[params.dataIndex]
}
},
......@@ -79,14 +189,30 @@ export default {
getReportDetail() {
getReportDetail(this.queryReportDetail).then((resp) => {
this.opinionData = []
console.log('返回信息', resp)
this.reportDetailList = resp.data.data.list
this.totalNumber = resp.data.data.total
this.totalElapsedTime = resp.data.data.totalElapsedTime / 1000
this.totalPass = resp.data.data.pass
this.totalFail = resp.data.data.fail
this.reportDetailList.forEach((item) => {
item['headers'] = JSON.parse(item['headers'])
item['parameters'] = JSON.parse(item['parameters'])
item['response'] = JSON.parse(item['response'])
item['elapsedTime'] = item['elapsedTime'] / 1000
if (item['validate'] !== '[]') {
console.log('666', item['validate'].length)
this.validateList = item['validate']
this.isShowTable = true
}
})
this.opinionData.push(
{
value: resp.data.data.fail,
value: resp.data.data.pass,
name: '成功'
},
{
value: resp.data.data.pass,
value: resp.data.data.fail,
name: '失败'
}
)
......@@ -99,9 +225,26 @@ export default {
}
</script>
<style lang="less" scoped>
div-style {
font-size: 25px;
color: #858585;
.divStyle {
font-size: 18px;
color: #333333;
margin-left: 300px;
font-weight: bold;
margin-top: 20px;
}
.colStyle {
font-size: 15px;
font-weight: bold;
// background: red;
margin-top: 30px;
}
.rowStyle {
margin-left: 150px;
margin-top: 20px;
font-size: 15px;
font-weight: bold;
}
.col_style {
margin-top: 28px;
}
</style>
src/views/auto/ReportList.vue
View file @ 5f6a966d
......@@ -12,12 +12,11 @@
</el-select>
<el-input v-model="queryReportInfo.sceneName" clearable placeholder="请输入场景名称" style="width: 300px;"></el-input>
<el-button type="primary" style="margin-left:10px" icon="el-icon-search" @click="queryData">查询</el-button>
<!-- <el-button type="primary" style="margin-left:10px" icon="el-icon-circle-plus" @click="addPage">新增</el-button> -->
</div>
<el-table :data="reportList" border style="width: 100%;margin-top:20px">
<el-table-column type='index' width="50px"></el-table-column>
<el-table-column prop="projectName" label="项目名称" width="200px"></el-table-column>
<el-table-column prop="sceneName" label="场景名称" width="150px"></el-table-column>
<el-table-column prop="sceneName" label="场景名称" width="200px"></el-table-column>
<el-table-column prop="projectName" label="项目名称" width="150px"></el-table-column>
<el-table-column prop="namespace" label="运行环境" width="150px"></el-table-column>
<el-table-column prop="createTime" label="创建时间" width="200px"></el-table-column>
<el-table-column label="操作">
......@@ -35,7 +34,6 @@
import { getProjectList } from '@/api/getAotoInterface'
import { getSceneList } from '@/api/getAutoScene'
import { getReportList } from '@/api/getAutoReport'
// import bus from '@/utils/bus'
export default {
data() {
return {
......@@ -70,7 +68,7 @@ export default {
this.getProjectList()
this.getReportList()
this.$bus.$off('reportmsg').$on('reportmsg', (row) => {
console.log('参数信息', row)
// console.log('参数信息', row)
// 下拉框赋值
this.projectId = row.projectName
this.sceneId = row.name
......@@ -103,18 +101,26 @@ export default {
},
// 获取场景报告列表
getReportList() {
this.queryReportInfo.namespace = window.sessionStorage.getItem('env')
getReportList(this.queryReportInfo).then((resp) => {
this.reportList = resp.data.data.list
this.totalNum = resp.data.data.total
})
},
// 点击查询调取方法
queryReportList() {
this.queryReportInfo.projectId = this.projectId
this.queryReportInfo.sceneId = this.sceneId
// console.log('参数信息6666', this.queryReportInfo)
this.queryReportInfo.namespace = window.sessionStorage.getItem('env')
getReportList(this.queryReportInfo).then((resp) => {
// console.log('返回结果信息', resp)
this.reportList = resp.data.data.list
this.totalNum = resp.data.data.total
})
},
// 查询方法
queryData() {
this.getReportList()
this.queryReportList()
},
// 报表详情信息
......
src/views/layout/leftAside/menu.json
View file @ 5f6a966d
......@@ -140,6 +140,12 @@
"title": "场景管理",
"icon": "el-icon-thumb",
"path": "/auto/SceneList"
},
{
"id": 6,
"title": "报告管理",
"icon": "el-icon-document",
"path": "/auto/ReportList"
}
]
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment