1.vue写法 较简单
<table border cellpadding="0" cellspacing="0">
<thead>
<td>名称</td>
<td class="align-center">开始时间</td>
<td class="align-center">完成时间</td>
<td class="align-center">整体耗时</td>
</thead>
<tbody>
<tr v-for="item in tableData" :key="item.id">
<td>{{item.name}}</td>
<td>{{item.started_time}}</td>
<td>{{item.finished_time}}</td>
<td>{{item.cost}}</td>
</tr>
</tbody>
</table>
将vue数据引入即可
2.原生js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,
html {
height: 100%;
margin: 0;
}
.container {
height: calc(100% - 20px);
padding: 10px;
background: #eee;
}
.header {
height: 400px;
background-color: #fff;
margin-bottom: 10px;
display: flex;
background: #eee;
&>.base-info {
flex: 1;
background: #fff;
margin-right: 10px;
}
&>.chart {
width: 500px;
background: #fff;
}
}
.body {
height: calc(100% - 400px);
background-color: #fff;
overflow: hidden;
& .table-wrapper {
margin-top: 10px;
&>table {
width: 100%;
border-color: #ebeef5;
& td {
padding: 10px;
}
}
}
}
.align-center {
text-align: center;
width: 300px;
}
</style>
</head>
<body>
<div class="container" id="app">
<div class="header">
<div class="base-info">
基本信息
<span></span>
</div>
<div class="chart">
饼图
</div>
</div>
<div class="body">
<div class="table-wrapper">
</div>
</div>
</div>
</body>
<script>
var tableData = []
const results = [
{
"id": 99,
"script": {
"id": 4289,
"case_info": {
"id": 70337,
"case_name": "QccIpEnterpriseCertificate255陪跑，查询成功无数据",
"case_priority": "P2",
"is_archived": 1,
"case_condition": "1、检查cp_comp_flow表的资信的is_able是Y，复用期为0\n2、阿波罗的credit_config的zhongshu.copyFlag值为Y\n3、ccrs.cr_intf_ref表copy_flag=N，divert_flag=Y，copy_ratio=0,divert_ratio=1",
"steps": "1、单测包发起金企贷授信",
"expect": "1、授信成功，调用QccIpEnterpriseCertificate255资信成功有数据\n2、sit3_ccrs.ext_copy_log表数据入库成功且状态码，compara_result，描述等字段正确，compare desc字段显示相同，mongo里的数据入库成功且正确（CCRS对应的表）\n3、ext_copy_log表数据入库成功，分流到ext_divert_log中数表的divert_sys为ZS\n4、检查ext_copy_log日志中history接口调用QccIpEnterpriseCertificate255\n5.cp_query_history的tate字段显示SUCC， queryState字段显示ZS00200\n6.分流的中数和ccRS的输入项是一致的",
"script_id": "4289",
"status": 1,
"stage": 1,
"uploader": "田洋",
"module_id": 103,
"module_name": "存款呼出任务",
"marks": "",
"created_by": "何祎",
"updated_by": "tianyang",
"archived_time": "2023-04-17 23:03:45",
"date_created": "2023-04-11 10:19:12",
"date_updated": "2023-05-11 11:01:09"
},
"name": "公众号我的页面，还款记录查看",
"type": null,
"path": "test_cases/test_product/test_wechat_wode.py",
"priority": "P2",
"function": "test_wechat_huankuanjilu",
"class_name": "",
"ids": "[\\u516c\\u4f17\\u53f7\\u6211\\u7684\\u9875\\u9762\\uff0c\\u8fd8\\u6b3e\\u8bb0\\u5f55\\u67e5\\u770b@\\u9ec4\\u8fd0\\u8bed#209316]",
"module": "product",
"case_id": "70337",
"status": 1,
"marks": "",
"author": "黄运语",
"date_created": "2023-05-07 21:46:09",
"date_updated": "2023-05-11 11:01:09"
},
"result": "skipped",
"task_record_no_str": "4d323f04-a2ac-49ea-a37f-0a70222329c6",
"fail_reason": null,
"task_record_no": "46",
"case_package_file": null,
"operator": "田洋",
"started_time": null,
"finished_time": null,
"cost": 0
},
{
"id": 98,
"script": {
"id": 4288,
"case_info": {
"id": 70322,
"case_name": "QccPersonHisSXC806分流，查询成功无数据",
"case_priority": "P2",
"is_archived": 0,
"case_condition": "1、检查cp_comp_flow表的资信的is_able是Y，复用期为0\n2、阿波罗的credit_config的zhongshu.copyFlag值为Y\n3、ccrs.cr_intf_ref表copy_flag=N，divert_flag=Y，copy_ratio=0,divert_ratio=1",
"steps": "1、单测包发起金企贷授信",
"expect": "1、授信成功，调用QccPersonHisSXC806资信成功有数据\n2、sit3_ccrs.ext_copy_log表数据入库成功且状态码，compara_result，描述等字段正确，compare desc字段显示相同，mongo里的数据入库成功且正确（CCRS对应的表）\n3、ext_copy_log表数据入库成功，分流到ext_divert_log中数表的divert_sys为ZS\n4、检查ext_copy_log日志中history接口调用QccPersonHisSXC806\n5.cp_query_history的tate字段显示SUCC， queryState字段显示ZS00200\n6.分流的中数和ccRS的输入项是一致的",
"script_id": "4288",
"status": 1,
"stage": 1,
"uploader": "田洋",
"module_id": 914,
"module_name": "支付系统渠道",
"marks": "",
"created_by": "何祎",
"updated_by": "何祎",
"archived_time": null,
"date_created": "2023-04-11 10:19:12",
"date_updated": "2023-05-11 11:01:09"
},
"name": "公众号我的页面，放款记录查看",
"type": null,
"path": "test_cases/test_product/test_wechat_wode.py",
"priority": "P2",
"function": "test_wechat_fangkuanjilu",
"class_name": "",
"ids": "[\\u516c\\u4f17\\u53f7\\u6211\\u7684\\u9875\\u9762\\uff0c\\u653e\\u6b3e\\u8bb0\\u5f55\\u67e5\\u770b@\\u9ec4\\u8fd0\\u8bed#209315]",
"module": "product",
"case_id": "70322",
"status": 1,
"marks": "",
"author": "黄运语",
"date_created": "2023-05-07 21:46:09",
"date_updated": "2023-05-11 11:01:09"
},
"result": "broken",
"task_record_no_str": "4d323f04-a2ac-49ea-a37f-0a70222329c6",
"fail_reason": null,
"task_record_no": "46",
"case_package_file": null,
"operator": "田洋",
"started_time": null,
"finished_time": null,
"cost": 0
},
{
"id": 97,
"script": {
"id": 4287,
"case_info": {
"id": 70323,
"case_name": "QccPersonRelaRiskCount778分流，查询成功有数据",
"case_priority": "P2",
"is_archived": 0,
"case_condition": "1、检查cp_comp_flow表的资信的is_able是Y，复用期为0\n2、阿波罗的credit_config的zhongshu.copyFlag值为Y\n3、ccrs.cr_intf_ref表copy_flag=N，divert_flag=Y，copy_ratio=0,divert_ratio=1",
"steps": "1、单测包发起金企贷授信",
"expect": "1、授信成功，调用QccPersonRelaRiskCount778资信成功有数据\n2、sit3_ccrs.ext_copy_log表数据入库成功且状态码，compara_result，描述等字段正确，compare desc字段显示相同，mongo里的数据入库成功且正确（CCRS对应的表）\n3、ext_copy_log表数据入库成功，分流到ext_divert_log中数表的divert_sys为ZS\n4、检查ext_copy_log日志中history接口调用QccPersonRelaRiskCount778\n5.cp_query_history的tate字段显示SUCC， queryState字段显示ZS00200\n6.分流的中数和ccRS的输入项是一致的",
"script_id": "4287",
"status": 1,
"stage": 1,
"uploader": "田洋",
"module_id": 914,
"module_name": "支付系统渠道",
"marks": "",
"created_by": "何祎",
"updated_by": "何祎",
"archived_time": null,
"date_created": "2023-04-11 10:19:12",
"date_updated": "2023-05-11 11:01:09"
},
"name": "公众号我的页面，还款专户查看",
"type": null,
"path": "test_cases/test_product/test_wechat_wode.py",
"priority": "P2",
"function": "test_wechat_huankuanzhuanhu",
"class_name": "",
"ids": "[\\u516c\\u4f17\\u53f7\\u6211\\u7684\\u9875\\u9762\\uff0c\\u8fd8\\u6b3e\\u4e13\\u6237\\u67e5\\u770b@\\u9ec4\\u8fd0\\u8bed#209314]",
"module": "product",
"case_id": "70323",
"status": 1,
"marks": "",
"author": "黄运语",
"date_created": "2023-05-07 21:46:09",
"date_updated": "2023-05-11 11:01:09"
},
"result": "undo",
"task_record_no_str": "4d323f04-a2ac-49ea-a37f-0a70222329c6",
"fail_reason": null,
"task_record_no": "46",
"case_package_file": null,
"operator": "田洋",
"started_time": null,
"finished_time": null,
"cost": 0
},
{
"id": 96,
"script": {
"id": 4286,
"case_info": {
"id": 70334,
"case_name": "QccRiBankruptcyReorganization761陪跑，查询成功有数据",
"case_priority": "P2",
"is_archived": 1,
"case_condition": "1、检查cp_comp_flow表的资信的is_able是Y，复用期为0\n2、阿波罗的credit_config的zhongshu.copyFlag值为Y\n3、ccrs.cr_intf_ref表copy_flag=N，divert_flag=Y，copy_ratio=0,divert_ratio=1",
"steps": "1、单测包发起金企贷授信",
"expect": "1、授信成功，调用QccRiBankruptcyReorganization761资信成功有数据\n2、sit3_ccrs.ext_copy_log表数据入库成功且状态码，compara_result，描述等字段正确，compare desc字段显示相同，mongo里的数据入库成功且正确（CCRS对应的表）\n3、ext_copy_log表数据入库成功，分流到ext_divert_log中数表的divert_sys为ZS\n4、检查ext_copy_log日志中history接口调用QccRiBankruptcyReorganization761\n5.cp_query_history的tate字段显示SUCC， queryState字段显示ZS00200\n6.分流的中数和ccRS的输入项是一致的",
"script_id": "4286",
"status": 1,
"stage": 1,
"uploader": "田洋",
"module_id": 110,
"module_name": "存款名单回收",
"marks": "",
"created_by": "何祎",
"updated_by": "tianyang",
"archived_time": "2023-04-17 23:03:45",
"date_created": "2023-04-11 10:19:12",
"date_updated": "2023-05-11 11:01:09"
},
"name": "公众号我的页面，借款记录查看",
"type": null,
"path": "test_cases/test_product/test_wechat_wode.py",
"priority": "P2",
"function": "test_wechat_jiekuanjilu",
"class_name": "",
"ids": "[\\u516c\\u4f17\\u53f7\\u6211\\u7684\\u9875\\u9762\\uff0c\\u501f\\u6b3e\\u8bb0\\u5f55\\u67e5\\u770b@\\u9ec4\\u8fd0\\u8bed#209313]",
"module": "product",
"case_id": "70334",
"status": 1,
"marks": "",
"author": "黄运语",
"date_created": "2023-05-07 21:46:09",
"date_updated": "2023-05-11 11:01:09"
},
"result": "failed",
"task_record_no_str": "4d323f04-a2ac-49ea-a37f-0a70222329c6",
"fail_reason": null,
"task_record_no": "46",
"case_package_file": null,
"operator": "田洋",
"started_time": null,
"finished_time": null,
"cost": 0
},
{
"id": 95,
"script": {
"id": 4285,
"case_info": {
"id": 70335,
"case_name": "QccRiBankruptcyReorganization761陪跑，查询成功无数据",
"case_priority": "P2",
"is_archived": 1,
"case_condition": "1、检查cp_comp_flow表的资信的is_able是Y，复用期为0\n2、阿波罗的credit_config的zhongshu.copyFlag值为Y\n3、ccrs.cr_intf_ref表copy_flag=N，divert_flag=Y，copy_ratio=0,divert_ratio=1",
"steps": "1、单测包发起金企贷授信",
"expect": "1、授信成功，调用QccRiBankruptcyReorganization761资信成功有数据\n2、sit3_ccrs.ext_copy_log表数据入库成功且状态码，compara_result，描述等字段正确，compare desc字段显示相同，mongo里的数据入库成功且正确（CCRS对应的表）\n3、ext_copy_log表数据入库成功，分流到ext_divert_log中数表的divert_sys为ZS\n4、检查ext_copy_log日志中history接口调用QccRiBankruptcyReorganization761\n5.cp_query_history的tate字段显示SUCC， queryState字段显示ZS00200\n6.分流的中数和ccRS的输入项是一致的",
"script_id": "4285",
"status": 1,
"stage": 1,
"uploader": "田洋",
"module_id": 105,
"module_name": "呼出清单",
"marks": "",
"created_by": "何祎",
"updated_by": "tianyang",
"archived_time": "2023-04-17 23:03:45",
"date_created": "2023-04-11 10:19:12",
"date_updated": "2023-05-11 11:01:09"
},
"name": "公众号我的页面，额度总览查看",
"type": null,
"path": "test_cases/test_product/test_wechat_wode.py",
"priority": "P2",
"function": "test_wechat_eduzonglan",
"class_name": "",
"ids": "[\\u516c\\u4f17\\u53f7\\u6211\\u7684\\u9875\\u9762\\uff0c\\u989d\\u5ea6\\u603b\\u89c8\\u67e5\\u770b@\\u9ec4\\u8fd0\\u8bed#209312]",
"module": "product",
"case_id": "70335",
"status": 1,
"marks": "",
"author": "黄运语",
"date_created": "2023-05-07 21:46:09",
"date_updated": "2023-05-11 11:01:09"
},
"result": "passed",
"task_record_no_str": "4d323f04-a2ac-49ea-a37f-0a70222329c6",
"fail_reason": null,
"task_record_no": "46",
"case_package_file": "2023/5/15/c6d96ebe-04ab-4168-bd22-f67d9f0e890a/4579755b9b44bf1a/json/4579755b9b44bf1a.json",
"operator": "田洋",
"started_time": null,
"finished_time": null,
"cost": 100
}
]
results.forEach(item => {
item.name = item.script.name
})
tableData = results
//表头
var tableHead = ["name", "started_time", "finished_time", "cost"]
//核心方法
function initTable (container) {
var table = document.createElement("table")
table.setAttribute('cellpadding', '0')
table.setAttribute('cellspacing', '0')
table.setAttribute('border', '1')
container.appendChild(table)
var tr_head = document.createElement("tr")
table.appendChild(tr_head)
for (var i = 0; i < tableHead.length; i++) {
var th = document.createElement("th")
th.setAttribute("class", "text-center")
const headMap = {
'name': '名称',
'started_time': '开始时间',
'finished_time': '完成时间',
'cost': '整体耗时',
}
th.innerHTML = headMap[tableHead[i]]
tr_head.appendChild(th)
}
//使用for循环将对象加入到table中去
for (var k = 0; k < tableData.length; k++) {
var tr = document.createElement("tr")
table.appendChild(tr)
for (var j = 0; j < tableHead.length; j++) {
var td = document.createElement("td")
td.innerHTML = tableData[k][tableHead[j]]
tr.appendChild(td)
}
}
}
window.onload = function () {
const table = document.querySelectorAll('.table-wrapper')[0]
initTable(table)
}
</script>
</html>
