<div>
<div class="wrap">
<a-table
class="ant-table-striped"
size="middle"
:dataSource="transData"
:columns="tableColumns"
:showHeader="false"
:pagination="false"
:scroll="{ x: width, y: scrolly }"
:rowClassName="(_record, index) => (index % 2 === 1 ? 'tdodd' : 'tdeven')"
>
<!-- <template #bodyCell="{ text, record, column }">
<template v-if="column.dataIndex == '1'">
1111111
<div class="totalScore">
<div
class="score"
:class="column.className && colunm.className(record.totalScore)"
:value="record.totalScore"
>{{ record.totalScore }}</div>
</div>
</template>
</template> -->
</a-table>
</div>
</div>
</template>
<script setup>
import { defineComponent, ref, reactive, onMounted, onBeforeUnmount, computed } from 'vue';
// import { ewsData } from '/@/api/station/data'
// 为后端原始正常的数据, 此数据按正常表格展示
let data = [
{
asseTime: '2022-06-11 8:00PM',
totalScore: '0',
RR: '21',
Temp: '36.5',
BP: '120',
HR: '60',
awareness: '清醒',
key: '1',
},
{
asseTime: '2022-06-12 8:00PM',
totalScore: '1',
RR: '21',
Temp: '36.5',
BP: '120',
HR: '60',
awareness: '清醒',
key: "2",
},
{
asseTime: '2022-06-13 8:00PM',
totalScore: '4',
RR: '21',
Temp: '36.5',
BP: '120',
HR: '60',
awareness: '清醒',
key: "3",
},
{
asseTime: '2022-06-14 8:00PM',
totalScore: '8',
RR: '21',
Temp: '36.5',
BP: '120',
HR: '60',
awareness: '清醒',
key: "4",
},
{
asseTime: '2022-06-15 8:00PM',
totalScore: '8',
RR: '21',
Temp: '36.5',
BP: '120',
HR: '60',
awareness: '清醒',
key: "5",
},
{
asseTime: '2022-06-16 8:00PM',
totalScore: '8',
RR: '21',
Temp: '36.5',
BP: '120',
HR: '60',
awareness: '清醒',
key: "6",
},
{
asseTime: '2022-06-10 8:00PM',
totalScore: '8',
RR: '21',
Temp: '36.5',
BP: '120',
HR: '60',
awareness: '清醒',
key: "6",
},
{
asseTime: '2022-06-10 8:00PM',
totalScore: '8',
RR: '21',
Temp: '36.5',
BP: '120',
HR: '60',
awareness: '清醒',
key: "6",
},
{
asseTime: '2022-06-10 8:00PM',
totalScore: '8',
RR: '21',
Temp: '36.5',
BP: '120',
HR: '60',
awareness: '清醒',
key: "6",
},
{
asseTime: '2022-06-10 8:00PM',
totalScore: '8',
RR: '21',
Temp: '36.5',
BP: '120',
HR: '60',
awareness: '清醒',
key: "6",
},
{
asseTime: '2022-06-10 8:00PM',
totalScore: '8',
RR: '21',
Temp: '36.5',
BP: '120',
HR: '60',
awareness: '清醒',
key: "6",
},
];
let columns = [
{
title: '时间',
key: 'asseTime',
dataIndex: 'asseTime',
align: 'center',
fixed: 'left',
width: 100,
},
{
title: 'MEWS',
key: 'totalScore',
dataIndex: 'totalScore',
align: 'center',
},
{
title: 'RR(rpm)',
key: 'RR',
dataIndex: 'RR',
align: 'center',
},
{
title: 'Temp(°C)',
key: 'Temp',
dataIndex: 'Temp',
align: 'center',
},
{
title: 'bpBP-S(mmHg)m',
key: 'BP',
dataIndex: 'BP',
align: 'center',
},
{
title: 'HR(bpm)',
key: 'HR',
dataIndex: 'HR',
align: 'center',
},
{
title: '意识',
key: 'awareness',
dataIndex: 'awareness',
align: 'center',
},
];
// 为转化后的表头和数据
let tableColumns = [];
let transData = [];
const newdata = [];
// 获取接口数据data
// async function init() {
// let self = this;
// ewsData().then((res) => {
// if (res.status === 200) {
// self.data = res.data;
// console.log('res---', res);
// }
// })
// }
// 数据转换
columns.forEach((col, index) => {
const values = data.map(item => item[col.dataIndex]);
let obj = {
'0': col.title,
'key': index,
}
values.forEach((value,i) => {
obj[i + 1] = value;
});
newdata.push(obj);
col.key = index + '';
col.dataIndex = index + ''
});
console.log(columns);
console.log(newdata);
transData = newdata;
tableColumns = columns;
console.log('transData---', transData);
console.error('tableColumns----', tableColumns);
// 颜色背景区间
onMounted(() => {
const tds = document.querySelectorAll('.ant-table-tbody>tr:nth-child(3)>td');
console.log(tds);
for (let i = 1; i < tds.length; i++){
const value = tds[i].innerText; // 获取元素内容，innerHTML也可以
console.log(value);
if (value == 0){
tds[i].style = 'color: #fff'
// 设置单个属性 dom.style.xx = xxx, 如dom.style.color（样式）、dom.id、dom.name、dom.className等等
// 设置多个属性 dom.style = 'width:xxx;background:xxx;height:xxx;'
// dom可以设置html的任何属性值，只要在HTML标签上，就可以设置或者获取
}
if (value>=1 && value<=3){
tds[i].style.color = 'green'
}
if (value>=4 && value<=6){
tds[i].style.color = 'yellow'
}
if (value>=7 && value<=14){
tds[i].style.color = 'purple'
}
}
})
// 表格出现滚动的宽度和高度
let scrolly = ref(300);
let width = ref(1500);
</script>
<style lang="less" scoped>
.wrap {
width: 440px;
height: 100%;
flex: auto;
background-color: #313644;
overflow: auto;
::-webkit-scrollbar {
/*滚动条整体样式*/
/*高宽分别对应横竖滚动条的尺寸*/
width: 0;
height: 5px;
display: block;
}
::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
background-color: #eee;
}
::-webkit-scrollbar-track {
/*滚动条里面轨道*/
background: #464f63;
}
/* 改变悬浮表格换色 */
:deep(.ant-table-tbody) > tr:hover:not(.ant-table-expanded-row) > td, .ant-table-row-hover, .ant-table-row-hover > td {
background-color: #333232;
}
:deep(.tdeven) td {
background-color: #3d4355;
}
:deep(.tdodd) td {
background-color: #313644;
}
:deep(.ant-table-thead > tr > th) {
background-color: #3d4355;
}
:deep(.ant-table-tbody > tr > td) {
font-size: 16px;
color: #fff;
}
}
</style>
