466 lines
19 KiB
Vue
466 lines
19 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div class="hasTagsView">
|
|
<div class="app-main">
|
|
|
|
<el-card class="box-card">
|
|
<div slot="header" class="clearfix">
|
|
<div style="float: right;">
|
|
<el-button type="primary" size="mini" icon="el-icon-download" @click="exportWord">导出</el-button>
|
|
<el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
|
|
</div>
|
|
</div><!--header-->
|
|
<h4 class="ftitle">内容符合性检测结果报告</h4><!--ftitle 一级标题-->
|
|
|
|
<div class="stitle">检测指标统计分析</div><!--stitle 二级标题-->
|
|
<div class="test-list">
|
|
<div class="list">
|
|
<div class="title"><img src="../../../assets/images/j-icon1.svg"><span class="tit">检测内容条数</span></div>
|
|
<!-- <div class="figure">{{ data.checkTotalCount_new }}</div>-->
|
|
<div class="figure" >{{ checkTotalCount_new }}</div>
|
|
|
|
</div>
|
|
<div class="list">
|
|
<div class="title"><img src="../../../assets/images/j-icon2.svg"><span class="tit">检测总耗时(毫秒)</span></div>
|
|
<!-- <div class="figure">{{ data.checkTimeConsuming_new }}</div>-->
|
|
<div class="figure">{{ checkTimeConsuming_new }}</div>
|
|
|
|
</div>
|
|
<div class="list">
|
|
<div class="title"><img src="../../../assets/images/j-icon3.svg"><span class="tit">不合规总数</span></div>
|
|
<!-- <div class="figure">{{ data.checkErrorCount_new }}</div>-->
|
|
<div class="figure">{{ checkErrorCount_new }}</div>
|
|
|
|
</div>
|
|
<div class="list">
|
|
<div class="title"><img src="../../../assets/images/j-icon4.svg"><span class="tit">不合规率</span></div>
|
|
<div class="figure">{{ (checkErrorCount_new / checkTotalCount_new * 100).toFixed(2) + '%' }}</div>
|
|
<!-- <div class="figure">{{ data.checkTotalCount_new }}</div>-->
|
|
|
|
</div>
|
|
</div><!--test-list-->
|
|
|
|
<div class="stitle">不合规统计分析</div><!--stitle 二级标题-->
|
|
<el-row :gutter="24">
|
|
<el-col :span="12">
|
|
<div class="ttitle">按数据源统计不合规数量</div><!--ttitle 三级标题-->
|
|
<el-table :data="reportTableData1" border style="width: 100%" class="btable"><!--加上btable-->
|
|
<el-table-column prop="ruleSourceName" label="数据源" align="center" />
|
|
<el-table-column prop="ruleLevelName" label="数据源版本" align="center" />
|
|
<el-table-column prop="tableSum" label="检测条数" align="center" />
|
|
<el-table-column prop="tableTime" label="总耗时（毫秒）" align="center" />
|
|
<el-table-column prop="checkErrorCount" label="不合规数" align="center">
|
|
<template slot-scope="scope">
|
|
<el-progress :percentage="scope.row.checkErrorCount" :stroke-width="20" :text-inside="true" :color="colorFormat(scope.row.ruleLevelName)" :format="cellFormat" />
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="ttitle">按用例类型统计不合规数量</div><!--ttitle 三级标题-->
|
|
<el-table :data="reportTableData2" border style="width: 100%" class="btable"><!--加上btable-->
|
|
<!-- <el-table-column prop="ta1" label="数据源">数据平台</el-table-column>-->
|
|
<el-table-column prop="ruleName" label="用例类型"></el-table-column>
|
|
<el-table-column prop="checkErrorCount" label="不合规数">
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<div class="stitle">用例类型统计分析</div><!--stitle 二级标题-->
|
|
<div class="dbox" >
|
|
<div class="ttitle">完整性标准检测用例</div><!--ttitle 三级标题-->
|
|
<el-table :data="integrity" border style="width: 100%">
|
|
<el-table-column prop="ruleName" label="用例名称" align="center" />
|
|
<el-table-column prop="ruleSourceName" label="数据源" align="center" />
|
|
<el-table-column prop="version" label="数据源版本" align="center" />
|
|
<el-table-column prop="checkTotalTime" label="耗时（毫秒）" align="center" />
|
|
<el-table-column prop="checkTotalCount" label="检测数" align="center" />
|
|
<el-table-column prop="checkErrorCount" label="不合规数" align="center" />
|
|
</el-table>
|
|
<el-collapse @change="handleChange" class="ncoll"><!--加上ncoll-->
|
|
<el-collapse-item name="1">
|
|
<template slot="title"><span class="tit">不合规明细</span></template>
|
|
<el-table :data="no_integrity" border style="width: 100%">
|
|
<el-table-column prop="caseName" label="用例名称" align="center" />
|
|
<el-table-column prop="source" label="数据源" align="center" />
|
|
<el-table-column prop="tableName" label="数据表" align="center" />
|
|
<el-table-column prop="trueColumn" label="字段名称" align="center" />
|
|
<el-table-column prop="tableErrorCount" label="不合规数" align="center" />
|
|
<el-table-column prop="notDetail" label="不合规原因" align="center" />
|
|
</el-table>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</div><!--dbox-->
|
|
|
|
<div class="dbox" >
|
|
<div class="ttitle">准确性标准检测用例</div><!--ttitle 三级标题-->
|
|
<el-table :data="accuracy" border style="width: 100%">
|
|
<el-table-column prop="ruleName" label="用例名称" align="center" />
|
|
<el-table-column prop="ruleSourceName" label="数据源" align="center" />
|
|
<el-table-column prop="version" label="数据源版本" align="center" />
|
|
<el-table-column prop="checkTotalTime" label="耗时（毫秒）" align="center" />
|
|
<el-table-column prop="checkTotalCount" label="检测数" align="center" />
|
|
<el-table-column prop="checkErrorCount" label="不合规数" align="center" />
|
|
</el-table>
|
|
<el-collapse @change="handleChange" class="ncoll"><!--加上ncoll-->
|
|
<el-collapse-item name="1">
|
|
<template slot="title"><span class="tit">不合规明细</span></template>
|
|
<el-table :data="no_accuracy" border style="width: 100%">
|
|
<el-table-column prop="caseName" label="用例名称" align="center" />
|
|
<el-table-column prop="source" label="数据源" align="center" />
|
|
<el-table-column prop="tableName" label="数据表" align="center" />
|
|
<el-table-column prop="trueColumn" label="字段名称" align="center" />
|
|
<el-table-column prop="tableErrorCount" label="不合规数" align="center" />
|
|
<el-table-column prop="notDetail" label="不合规原因" align="center" />
|
|
</el-table>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</div><!--dbox-->
|
|
|
|
<div class="dbox" >
|
|
<div class="ttitle">一致性标准检测用例</div><!--ttitle 三级标题-->
|
|
<el-table :data="consistent" border style="width: 100%">
|
|
<el-table-column prop="ruleName" label="用例名称" align="center" />
|
|
<el-table-column prop="ruleSourceName" label="数据源" align="center" />
|
|
<el-table-column prop="version" label="数据源版本" align="center" />
|
|
<el-table-column prop="checkTotalTime" label="耗时（毫秒）" align="center" />
|
|
<el-table-column prop="checkTotalCount" label="检测数" align="center" />
|
|
<el-table-column prop="checkErrorCount" label="不合规数" align="center" />
|
|
</el-table>
|
|
<el-collapse @change="handleChange" class="ncoll"><!--加上ncoll-->
|
|
<el-collapse-item name="1">
|
|
<template slot="title"><span class="tit">不合规明细</span></template>
|
|
<el-table :data="no_consistent" border style="width: 100%">
|
|
<el-table-column prop="caseName" label="用例名称" align="center" />
|
|
<el-table-column prop="source" label="数据源" align="center" />
|
|
<el-table-column prop="tableName" label="数据表" align="center" />
|
|
<el-table-column prop="trueColumn" label="字段名称" align="center" />
|
|
<el-table-column prop="tableErrorCount" label="不合规数" align="center" />
|
|
<el-table-column prop="notDetail" label="不合规原因" align="center" />
|
|
</el-table>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</div><!--dbox-->
|
|
|
|
<div class="dbox" >
|
|
<div class="ttitle">正则表达式标准检测用例</div><!--ttitle 三级标题-->
|
|
<el-table :data="regular" border style="width: 100%">
|
|
<el-table-column prop="ruleName" label="用例名称" align="center" />
|
|
<el-table-column prop="ruleSourceName" label="数据源" align="center" />
|
|
<el-table-column prop="version" label="数据源版本" align="center" />
|
|
<el-table-column prop="checkTotalTime" label="耗时（毫秒）" align="center" />
|
|
<el-table-column prop="checkTotalCount" label="检测数" align="center" />
|
|
<el-table-column prop="checkErrorCount" label="不合规数" align="center" />
|
|
</el-table>
|
|
<el-collapse @change="handleChange" class="ncoll"><!--加上ncoll-->
|
|
<el-collapse-item name="1">
|
|
<template slot="title"><span class="tit">不合规明细</span></template>
|
|
<el-table :data="no_regular" border style="width: 100%">
|
|
<el-table-column prop="caseName" label="用例名称" align="center" />
|
|
<el-table-column prop="source" label="数据源" align="center" />
|
|
<el-table-column prop="tableName" label="数据表" align="center" />
|
|
<el-table-column prop="trueColumn" label="字段名称" align="center" />
|
|
<el-table-column prop="tableErrorCount" label="不合规数" align="center" />
|
|
<el-table-column prop="notDetail" label="不合规原因" align="center" />
|
|
</el-table>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</div><!--dbox-->
|
|
|
|
</el-card><!--el-card-->
|
|
|
|
</div><!--app-main-->
|
|
</div><!--hasTagsView-->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import { getReportBySource, getReportByType, C } from '@/api/quality/checkreport'
|
|
import moment from 'moment'
|
|
import dataJson from './Data_content.json'
|
|
export default {
|
|
name: 'CheckReportStructureontent',
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default: function() {
|
|
return {}
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
queryParams: {
|
|
checkDate: ''
|
|
},
|
|
pickerOption: {
|
|
disabledDate(date) {
|
|
return date.getTime() > Date.now()
|
|
}
|
|
},
|
|
date: '',
|
|
// 展示切换
|
|
showOptions: {
|
|
data: {},
|
|
showList: true,
|
|
showDetail_content: false
|
|
},
|
|
spanArr1: [],
|
|
position1: 0,
|
|
reportTableData1: [],
|
|
spanArr2: [],
|
|
position2: 0,
|
|
reportTableData2: [],
|
|
// 唯一性核查数据
|
|
uniqueTableData: [],
|
|
// 完整性核查数据
|
|
integrityTableData: [],
|
|
// 准确性核查数据
|
|
accuracyTableData: [],
|
|
// 一致性核查数据
|
|
consistentTableData: [],
|
|
// 关联性核查数据
|
|
relevanceTableData: [],
|
|
// 及时性核查数据
|
|
timelinessTableData: [],
|
|
|
|
// 表字段标准检测
|
|
table_key: [],
|
|
no_table_key: [],
|
|
// 长度标准检测
|
|
length_key: [],
|
|
no_length_key: [],
|
|
// 空值标准检测
|
|
null_key: [],
|
|
no_null_key: [],
|
|
// 主键标准检测
|
|
pk_key: [],
|
|
no_pk_key: [],
|
|
// 外键标准检测
|
|
fk_key: [],
|
|
no_fk_key: [],
|
|
// 完整性标准检测
|
|
integrity: [],
|
|
no_integrity: [],
|
|
// 准确性标准检测
|
|
accuracy: [],
|
|
no_accuracy: [],
|
|
// 一致性标准检测
|
|
consistent: [],
|
|
no_consistent: [],
|
|
// 正则表达式标准检测
|
|
regular: [],
|
|
no_regular: [],
|
|
// 检测表总数
|
|
checkTotalCount: null,
|
|
// 检测总耗时
|
|
checkTimeConsuming: null,
|
|
// 不合规总数
|
|
checkErrorCount: null,
|
|
|
|
// 检测表总数
|
|
checkTotalCount_new: null,
|
|
// 检测总耗时
|
|
checkTimeConsuming_new: null,
|
|
// 不合规总数
|
|
checkErrorCount_new: null,
|
|
|
|
like: true,
|
|
value1: 4154.564,
|
|
totalTables: 1314,
|
|
title: '增长人数'
|
|
}
|
|
},
|
|
created() {
|
|
this.queryParams.checkDate = moment(this.data.checkDate).format('YYYY-MM-DD')
|
|
this.handleQuery()
|
|
},
|
|
mounted () {
|
|
// 表字段标准检测
|
|
this.table_key = dataJson.caseType.table_key
|
|
this.no_table_key = dataJson.caseType.no_table_key
|
|
// 长度标准检测
|
|
this.length_key = dataJson.caseType.length_key
|
|
this.no_length_key = dataJson.caseType.no_length_key
|
|
// 空值标准检测
|
|
this.null_key = dataJson.caseType.null_key
|
|
this.no_null_key = dataJson.caseType.no_null_key
|
|
// 主键标准检测
|
|
this.pk_key = dataJson.caseType.pk_key
|
|
this.no_pk_key = dataJson.caseType.no_pk_key
|
|
// 外键标准检测
|
|
this.fk_key = dataJson.caseType.fk_key
|
|
this.no_fk_key = dataJson.caseType.no_fk_key
|
|
// 完整性标准检测
|
|
this.integrity = dataJson.caseType.integrity
|
|
this.no_integrity = dataJson.caseType.no_integrity
|
|
// 准确性标准检测
|
|
this.accuracy = dataJson.caseType.accuracy
|
|
this.no_accuracy = dataJson.caseType.no_accuracy
|
|
// 一致性标准检测
|
|
this.consistent = dataJson.caseType.consistent
|
|
this.no_consistent = dataJson.caseType.no_consistent
|
|
// 正则表达式标准检测
|
|
this.regular = dataJson.caseType.regular
|
|
this.no_regular = dataJson.caseType.no_regular
|
|
|
|
// 初始化按数据源统计不合规数量
|
|
this.spanArr1 = []
|
|
this.spanArr2 = []
|
|
this.reportTableData1 = dataJson.dataReport.reportTableData1
|
|
this.reportTableData2 = dataJson.dataReport.reportTableData2
|
|
this.rowspan1()
|
|
this.rowspan2()
|
|
|
|
this.checkTotalCount_new = dataJson.checkTotalCount
|
|
this.checkTimeConsuming_new = dataJson.checkTimeConsuming
|
|
this.checkErrorCount_new = dataJson.checkErrorCount
|
|
},
|
|
methods: {
|
|
showCard() {
|
|
this.$emit('showCard', this.showOptions)
|
|
},
|
|
handleQuery() {
|
|
this.spanArr1 = []
|
|
this.spanArr2 = []
|
|
// this.getReportData1()
|
|
// this.getReportData2()
|
|
// this.getReportData3()
|
|
// this.date = moment(this.queryParams.checkDate).format('YYYY年MM月DD日')
|
|
},
|
|
// getReportData1() {
|
|
// getReportBySource({ checkDate: this.queryParams.checkDate }).then(response => {
|
|
// if (response.success) {
|
|
// this.reportTableData1 = response.data
|
|
// console.log('reportTableData1==', this.reportTableData1)
|
|
// this.rowspan1()
|
|
// }
|
|
// })
|
|
// },
|
|
// getReportData2() {
|
|
// getReportByType({ checkDate: this.queryParams.checkDate }).then(response => {
|
|
// if (response.success) {
|
|
// this.reportTableData2 = response.data
|
|
// console.log('this.reportTableData2===', this.reportTableData2)
|
|
// this.rowspan2()
|
|
// }
|
|
// })
|
|
// },
|
|
rowspan1() {
|
|
this.reportTableData1.forEach((item, index) => {
|
|
if (index === 0) {
|
|
this.spanArr1.push(1)
|
|
this.position1 = 0
|
|
} else {
|
|
if (this.reportTableData1[index].ruleSourceId === this.reportTableData1[index - 1].ruleSourceId) {
|
|
this.spanArr1[this.position1] += 1
|
|
this.spanArr1.push(0)
|
|
} else {
|
|
this.spanArr1.push(1)
|
|
this.position1 = index
|
|
}
|
|
}
|
|
})
|
|
},
|
|
objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
|
|
if (columnIndex === 0) {
|
|
const _row = this.spanArr1[rowIndex]
|
|
const _col = _row > 0 ? 1 : 0
|
|
return {
|
|
rowspan: _row,
|
|
colspan: _col
|
|
}
|
|
}
|
|
},
|
|
rowspan2() {
|
|
this.reportTableData2.forEach((item, index) => {
|
|
if (index === 0) {
|
|
this.spanArr2.push(1)
|
|
this.position2 = 0
|
|
} else {
|
|
if (this.reportTableData2[index].ruleTypeId === this.reportTableData2[index - 1].ruleTypeId) {
|
|
this.spanArr2[this.position2] += 1
|
|
this.spanArr2.push(0)
|
|
} else {
|
|
this.spanArr2.push(1)
|
|
this.position2 = index
|
|
}
|
|
}
|
|
})
|
|
},
|
|
objectSpanMethod2({ row, column, rowIndex, columnIndex }) {
|
|
if (columnIndex === 0) {
|
|
const _row = this.spanArr2[rowIndex]
|
|
const _col = _row > 0 ? 1 : 0
|
|
return {
|
|
rowspan: _row,
|
|
colspan: _col
|
|
}
|
|
}
|
|
},
|
|
colorFormat(level) {
|
|
if (level === '低') {
|
|
return '#409eff'
|
|
} else if (level === '中') {
|
|
return '#e6a23c'
|
|
} else {
|
|
return '#f56c6c'
|
|
}
|
|
},
|
|
cellFormat(percentage) {
|
|
return `${percentage}`
|
|
},
|
|
typeFormat(level) {
|
|
if (level === '低') {
|
|
return 'primary'
|
|
} else if (level === '中') {
|
|
return 'warning'
|
|
} else {
|
|
return 'danger'
|
|
}
|
|
},
|
|
// getReportData3() {
|
|
// getReportDetail({ checkDate: this.queryParams.checkDate }).then(response => {
|
|
// if (response.success) {
|
|
// this.uniqueTableData = response.data.unique
|
|
// this.integrityTableData = response.data.integrity
|
|
// this.accuracyTableData = response.data.accuracy
|
|
// this.consistentTableData = response.data.consistent
|
|
// this.relevanceTableData = response.data.relevance
|
|
// this.timelinessTableData = response.data.timeliness
|
|
// }
|
|
// })
|
|
// },
|
|
exportWord() {
|
|
const filePath = './static/your-word-document.docx'
|
|
const link = document.createElement('a')
|
|
link.href = filePath
|
|
link.download = '测结果报告.docx'
|
|
document.body.appendChild(link)
|
|
link.click()
|
|
document.body.removeChild(link)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.el-card ::v-deep .el-card__body {
|
|
height: calc(100vh - 230px);
|
|
overflow-y: auto;
|
|
}
|
|
.form-inline {
|
|
::v-deep .el-form-item {
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
::v-deep .el-badge__content {
|
|
margin-top: 10px;
|
|
right: 0px;
|
|
}
|
|
::v-deep .el-table__header th {
|
|
background-color: #f5f5f5 !important;
|
|
}
|
|
</style>
|