Commit f26b3400 authored by mzx's avatar mzx

测试矩阵接口对接

parent 56b4dc2c
import request from '@/utils/request'
export function listMatrix(data) {
return request({
url: '/usecase/matrix/getInfo',
method: 'post',
data: data
})
}
......@@ -3,27 +3,32 @@
<el-table
height="calc(100vh - 300px)"
:data="tableData"
v-loading="loading"
border
:header-cell-style="headerCellStyle"
:cell-style="tableCellStyle"
@cell-mouse-enter="cellMouseEnter"
@cell-mouse-leave="cellMouseLeave"
@cell-click="cellClick"
:cell-style="tableCellStyle"
>
<el-table-column
label="测试场景\测试类型"
align="center"
width="160px"
prop="name"
></el-table-column>
<template v-for="(item, index) in echartsTabled">
<el-table-column
:key="index"
:width="item.width ? item.width : ''"
:fixed="item.width ? true : false"
:label="item.tableNmae"
:label="item.title"
align="center"
>
<template slot-scope="scope" height="calc(100vh - 350px)">
<span v-if="index === 0">{{ scope.row[item.tableCode] }}</span>
<div
v-if="scope.row[item.tableCode].status === '1'"
v-if="scope.row[item.id].id !== ''"
class="table-span-style"
@click="viewDetail(scope.row[item.tableCode])"
@click="viewDetail(scope.row[item.id].id)"
>
{{ '√' }}
</div>
......@@ -35,123 +40,151 @@
</template>
<script>
import { listMatrix } from '../../../api/setting/testMatrix'
export default {
name: 'Index',
data() {
return {
// 遮罩层
loading: true,
// 表头信息
echartsTabled: [
{
tableNmae: '测试场景\\测试类型',
tableCode: 'test'
},
{
tableNmae: '文件审核',
tableCode: 'file'
},
{
tableNmae: '系统服务漏扫',
tableCode: 'missedScan'
},
{
tableNmae: '固件代码漏扫',
tableCode: 'codeScan'
},
{
tableNmae: '端口扫描',
tableCode: 'portScanning'
}
// {
// tableNmae: '测试场景\\测试类型',
// tableCode: 'test'
// },
// {
// tableNmae: '文件审核',
// tableCode: 'file'
// },
// {
// tableNmae: '系统服务漏扫',
// tableCode: 'missedScan'
// },
// {
// tableNmae: '固件代码漏扫',
// tableCode: 'codeScan'
// },
// {
// tableNmae: '端口扫描',
// tableCode: 'portScanning'
// }
],
// 表格内容
tableData: [
{
test: 'TBOX-蜂窝以太网接口',
file: {
id: 0,
status: '1'
},
missedScan: {
id: 0,
status: '1'
},
codeScan: {
id: 0,
status: '1'
},
portScanning: {
id: 0,
status: '1'
}
},
{
test: 'WiFi AP接口',
file: {
id: 1,
status: '1'
},
missedScan: {
id: 1,
status: '1'
},
codeScan: {
id: 1,
status: '1'
},
portScanning: {
id: 1,
status: '1'
}
},
{
test: 'WiFi Client接口',
file: {
id: 2,
status: ''
},
missedScan: {
id: 2,
status: ''
},
codeScan: {
id: 2,
status: ''
},
portScanning: {
id: 2,
status: ''
}
},
{
test: '充电以太网接口',
file: {
id: 3,
status: '1'
},
missedScan: {
id: 3,
status: '1'
},
codeScan: {
id: 3,
status: '1'
},
portScanning: {
id: 3,
status: '1'
}
}
// {
// test: 'TBOX-蜂窝以太网接口',
// file: {
// id: 0,
// status: '1'
// },
// missedScan: {
// id: 0,
// status: '1'
// },
// codeScan: {
// id: 0,
// status: '1'
// },
// portScanning: {
// id: 0,
// status: '1'
// }
// },
// {
// test: 'WiFi AP接口',
// file: {
// id: 1,
// status: '1'
// },
// missedScan: {
// id: 1,
// status: '1'
// },
// codeScan: {
// id: 1,
// status: '1'
// },
// portScanning: {
// id: 1,
// status: '1'
// }
// },
// {
// test: 'WiFi Client接口',
// file: {
// id: 2,
// status: ''
// },
// missedScan: {
// id: 2,
// status: ''
// },
// codeScan: {
// id: 2,
// status: ''
// },
// portScanning: {
// id: 2,
// status: ''
// }
// },
// {
// test: '充电以太网接口',
// file: {
// id: 3,
// status: '1'
// },
// missedScan: {
// id: 3,
// status: '1'
// },
// codeScan: {
// id: 3,
// status: '1'
// },
// portScanning: {
// id: 3,
// status: '1'
// }
// }
],
formConfig: {
isNoHoverColor: ''
}
}
},
mounted() {
this.getMatrix()
},
methods: {
/** 获取列表数据 */
getMatrix() {
listMatrix().then(res => {
this.loading = true
this.echartsTabled = res.data.header
this.tableData = res.data.rows
this.tableData.forEach((item, index) => {
const innerArray = this.tableData[index]
for (const key in innerArray) {
if (key !== 'name') {
if (innerArray[key] === '') {
innerArray[key] = { id: '' }
} else {
innerArray[key] = { id: innerArray[key] }
}
}
}
})
this.loading = false
})
},
/** 点击跳转详情 */
viewDetail(row) {
// console.log('viewDetailrow', row)
// console.log('表头信息', JSON.stringify(this.echartsTabled))
// console.log('表格内容', JSON.stringify(this.tableData))
this.$message(row)
},
// 表头样式
headerCellStyle(row, rowIndex) {
if (row.columnIndex === 0) {
return { backgroundColor: '#1A6FD7' }
......@@ -159,24 +192,16 @@ export default {
return { backgroundColor: '#F2F2F2' }
}
},
// 列样式
tableCellStyle(row, column, rowIndex, columnIndex) {
if (row.columnIndex === 0) {
return { backgroundColor: '#dde9f9' }
}
},
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) {
if (row.id !== 'el-table_1_column_1') {
if (!row.width) {
var selrange = document.getElementsByClassName(row.id)
// console.log('row', row)
// console.log('cell', cell)
// console.log('selrange', selrange)
if (this.formConfig.isNoHoverColor) {
cell.style.backgroundColor = ''
for (var i = 0; i < selrange.length; i++) {
......@@ -193,7 +218,7 @@ export default {
},
/** 鼠标离开时的操作 */
cellMouseLeave(e, row, cell) {
if (row.id !== 'el-table_1_column_1') {
if (!row.width) {
var selrange = document.getElementsByClassName(row.id)
for (var i = 0; i < selrange.length; i++) {
selrange[i].style.backgroundColor = ''
......
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