<template>
|
<el-table :data="tableData" :show-overflow-tooltip="true" class="alarmTable">
|
<el-table-column prop="name" :label="t('attendsCount.areaName')" align="center" width="130"> </el-table-column>
|
<el-table-column prop="tagid" :label="t('attendsCount.areaPersonCount')" align="center" width="130" />
|
<el-table-column prop="intime" :label="t('Config.time')" align="center" width="130" />
|
</el-table>
|
</template>
|
<script lang="ts">
|
import { defineComponent, onMounted, reactive, ref, toRefs, nextTick, onUnmounted } from "vue";
|
import { FindRealAttendanceInfo } from "@/api/modules/hxzk/statistics/historyAttendance";
|
import { useI18n } from "vue-i18n";
|
|
export default defineComponent({
|
name: "AttendsCount",
|
setup() {
|
const { t } = useI18n({ useScope: "global" });
|
|
// 表格的数据类型
|
interface tableType {
|
name: string;
|
money: number;
|
}
|
const data = reactive({
|
tableData: [] as Array<tableType>, // 表格的数据
|
currentPage: 1, // 当前展示的页码
|
pageSize: 6, // 当前表格一页展示多少条数据
|
tableDom: {} as HTMLElement // 表格内容的dom
|
});
|
let timeInterval: NodeJS.Timer; // 定时器的对象
|
let tableScroll = ref(false); // 是否需要滚动
|
|
onMounted(() => {
|
// 初始化表格的数据
|
list();
|
scrollTable();
|
});
|
|
onUnmounted(() => {
|
clearInterval(timeInterval);
|
});
|
|
// 初始化表格的数据
|
const list = () => {
|
const tableList = {
|
pageNum: 1,
|
pageSize: 1000
|
};
|
const params = {
|
tableList
|
};
|
FindRealAttendanceInfo(params).then(dt => {
|
data.tableData = dt;
|
});
|
};
|
|
// 表格的数据滚动
|
const scrollTable = () => {
|
nextTick(() => {
|
// 获取当前表格内容的dom
|
let table = document.getElementsByClassName("alarmTable")[0];
|
data.tableDom = table.getElementsByClassName("el-scrollbar__wrap")[0]! as HTMLElement;
|
// 鼠标放在表格内容，暂停滚动
|
data.tableDom.addEventListener("mouseover", () => {
|
tableScroll.value = false;
|
});
|
|
//
|
timeInterval = setInterval(() => {
|
if (tableScroll.value) {
|
// 每次内容滚动的距离
|
data.tableDom.scrollTop += 1;
|
if (data.tableDom.clientHeight + data.tableDom.scrollTop == data.tableDom.scrollHeight) {
|
data.tableDom.scrollTop = 0;
|
}
|
}
|
}, 10);
|
});
|
};
|
|
return {
|
...toRefs(data),
|
t
|
};
|
}
|
});
|
</script>
|
<style lang="scss" scoped>
|
.alarmTable {
|
height: 100%;
|
padding: 10px 0;
|
margin-top: 10px;
|
overflow: hidden;
|
font-size: 14px;
|
font-weight: bolder;
|
text-shadow:
|
-1px -1px 0 #000000,
|
1px -1px 0 #000000,
|
-1px 1px 0 #000000,
|
1px 1px 0 #000000;
|
scroll-behavior: smooth;
|
}
|
</style>
|
<style lang="scss">
|
.alarmTable,
|
.alarmTable::before,
|
.alarmTable--border .el-table__inner-wrapper::after,
|
.alarmTable--border::after,
|
.alarmTable--border::before,
|
.el-table__inner-wrapper::before {
|
background: rgb(36 77 207 / 0%);
|
border: 0;
|
}
|
.alarmTable thead tr {
|
background: none !important;
|
}
|
.alarmTable tr {
|
height: 50px;
|
color: white;
|
background: url("../images/tr.png") no-repeat;
|
background-size: 100% 100%;
|
border-bottom: 10px solid #3a66d6 !important;
|
&:nth-child(2n) {
|
color: white;
|
background: url("../images/tr.png") no-repeat;
|
background-size: 100% 100%;
|
border-bottom: 10px solid #3a66d6;
|
}
|
}
|
.alarmTable th.el-table__cell {
|
height: 30px;
|
padding: 0;
|
background: rgb(237 250 49 / 0%) !important;
|
}
|
.el-table tr:hover > td {
|
cursor: pointer;
|
background-color: rgb(0 148 255 / 10%) !important;
|
}
|
.el-table td.el-table__cell,
|
.el-table th.el-table__cell.is-leaf {
|
border-bottom: none;
|
}
|
</style>
|
