Commit f69ffa7e authored by mzx's avatar mzx

测试矩阵动态列表逻辑修改

parent 3cc82046
<template> <template>
<page-standard> <page-standard>
<el-table <el-table
height="calc(100vh - 300px)"
:data="tableData" :data="tableData"
style="width: 100%"
border border
@cell-mouse-enter="cellMouseEnter" @cell-mouse-enter="cellMouseEnter"
@cell-mouse-leave="cellMouseLeave" @cell-mouse-leave="cellMouseLeave"
@cell-click="cellClick"
> >
<el-table-column <template v-for="(item, index) in echartsTabled">
prop="test" <el-table-column
width="240" :key="index"
align="center" :width="item.width ? item.width : ''"
label="测试场景\测试类型" :fixed="item.width ? true : false"
/> :label="item.tableNmae"
<el-table-column prop="file" align="center" label="文件审核"> align="center"
<template slot-scope="scope"> >
<div v-if="scope.row.file === '1'" class="table-span-style"> <template slot-scope="scope" height="calc(100vh - 350px)">
{{ '√' }} <span v-if="index === 0">{{ scope.row[item.tableCode] }}</span>
</div> <div
</template> v-if="scope.row[item.tableCode].status === '1'"
</el-table-column> class="table-span-style"
<el-table-column prop="missedScan" align="center" label="系统服务漏扫" /> @click="viewDetail(scope.row[item.tableCode])"
<el-table-column prop="portScanning" align="center" label="端口扫描" /> >
<el-table-column prop="tampering" align="center" label="篡改伪造" /> {{ '√' }}
<el-table-column prop="fuzzing" align="center" label="模糊测试" /> </div>
<el-table-column prop="fuzzing" align="center" label="重放攻击" /> </template>
<el-table-column prop="fuzzing" align="center" label="非授权安装" /> </el-table-column>
<el-table-column prop="fuzzing" align="center" label="非授权访问" /> </template>
<el-table-column prop="fuzzing" align="center" label="非授权写入" />
<el-table-column prop="fuzzing" align="center" label="防病毒测试" />
<el-table-column prop="fuzzing" align="center" label="数据泄露" />
</el-table> </el-table>
</page-standard> </page-standard>
</template> </template>
...@@ -39,70 +37,106 @@ export default { ...@@ -39,70 +37,106 @@ export default {
name: 'Index', name: 'Index',
data() { data() {
return { return {
tableData: [ // 表头信息
echartsTabled: [
{ {
test: 'TBOX-蜂窝以太网接口', tableNmae: '测试场景\\测试类型',
file: '1', tableCode: 'test'
missedScan: '',
portScanning: '',
tampering: '',
fuzzing: ''
}, },
{ {
test: 'WiFi AP接口', tableNmae: '文件审核',
file: '', tableCode: 'file'
missedScan: '',
portScanning: '',
tampering: '',
fuzzing: ''
}, },
{ {
test: 'WiFi Client接口', tableNmae: '系统服务漏扫',
file: '1', tableCode: 'missedScan'
missedScan: '',
portScanning: '',
tampering: '',
fuzzing: ''
}, },
{ {
test: '充电以太网接口', tableNmae: '固件代码漏扫',
file: '', tableCode: 'codeScan'
missedScan: '',
portScanning: '',
tampering: '',
fuzzing: ''
}, },
{ {
test: 'CAN 诊断接口(OBD)', tableNmae: '端口扫描',
file: '', tableCode: 'portScanning'
missedScan: '', }
portScanning: '', ],
tampering: '', // 表格内容
fuzzing: '' tableData: [
{
test: 'TBOX-蜂窝以太网接口',
file: {
id: 0,
status: '1'
},
missedScan: {
id: 0,
status: '1'
},
codeScan: {
id: 0,
status: '1'
},
portScanning: {
id: 0,
status: '1'
}
}, },
{ {
test: '以太网诊断接口(OBD)', test: 'WiFi AP接口',
file: '', file: {
missedScan: '', id: 1,
portScanning: '', status: '1'
tampering: '', },
fuzzing: '' missedScan: {
id: 1,
status: '1'
},
codeScan: {
id: 1,
status: '1'
},
portScanning: {
id: 1,
status: '1'
}
}, },
{ {
test: '车载摄像头以太网接口(无线)', test: 'WiFi Client接口',
file: '', file: {
missedScan: '', id: 2,
portScanning: '', status: ''
tampering: '', },
fuzzing: '' missedScan: {
id: 2,
status: ''
},
codeScan: {
id: 2,
status: ''
},
portScanning: {
id: 2,
status: ''
}
}, },
{ {
test: '第三方应用软件', test: '充电以太网接口',
file: '', file: {
missedScan: '', id: 3,
portScanning: '', status: '1'
tampering: '', },
fuzzing: '' missedScan: {
id: 3,
status: '1'
},
codeScan: {
id: 3,
status: '1'
},
portScanning: {
id: 3,
status: '1'
}
} }
], ],
formConfig: { formConfig: {
...@@ -111,19 +145,28 @@ export default { ...@@ -111,19 +145,28 @@ export default {
} }
}, },
methods: { methods: {
viewDetail(row) {
console.log('viewDetailrow', row)
},
cellClick(row, column, cell, event) {
// console.log('row', row)
// console.log('column', column)
// console.log('cell', cell)
// console.log('event', event)
},
/** 鼠标悬浮时的操作 */ /** 鼠标悬浮时的操作 */
cellMouseEnter(e, row, cell, column) { cellMouseEnter(e, row, cell, column) {
var selrange = document.getElementsByClassName(row.id) var selrange = document.getElementsByClassName(row.id)
console.log('row', row) // console.log('row', row)
console.log('cell', cell) // console.log('cell', cell)
console.log('selrange', selrange) // console.log('selrange', selrange)
if (this.formConfig.isNoHoverColor) { if (this.formConfig.isNoHoverColor) {
cell.style.backgroundColor = '' cell.style.backgroundColor = ''
for (var i = 0; i < selrange.length; i++) { for (var i = 0; i < selrange.length; i++) {
selrange[i].style.backgroundColor = '' selrange[i].style.backgroundColor = ''
} }
} else { } else {
cell.style.backgroundColor = 'pink' cell.style.backgroundColor = '#fec171'
for (var i = 0; i < selrange.length; i++) { for (var i = 0; i < selrange.length; i++) {
selrange[i].style.backgroundColor = '#fec171' selrange[i].style.backgroundColor = '#fec171'
} }
...@@ -133,7 +176,7 @@ export default { ...@@ -133,7 +176,7 @@ export default {
cellMouseLeave(e, row, cell) { cellMouseLeave(e, row, cell) {
var selrange = document.getElementsByClassName(row.id) var selrange = document.getElementsByClassName(row.id)
for (var i = 0; i < selrange.length; i++) { for (var i = 0; i < selrange.length; i++) {
selrange[i].style.backgroundColor = '' selrange[i].style.backgroundColor = '#FFFFFF'
} }
} }
} }
...@@ -147,5 +190,6 @@ export default { ...@@ -147,5 +190,6 @@ export default {
.table-span-style { .table-span-style {
text-align: center; text-align: center;
color: #1890ff; color: #1890ff;
cursor: pointer;
} }
</style> </style>
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