<template>
|
<div class="container flex flex-col">
|
<div class="table-top flex justify-between items-center">
|
<div class="top-title">安全事故列表</div>
|
<div class="table-select flex">
|
<div class="select-item mr-2 ml-2 cursor-pointer flex items-center"
|
:class="{ 'item-active': selectItem.isActive }" v-for="selectItem in tableType" :key="selectItem.id"
|
@click="changeSelect(selectItem)">{{
|
selectItem.type }}</div>
|
</div>
|
</div>
|
<div class="table-container flex-1">
|
<div class="table-content">
|
|
<el-table class="data-table body-table" ref="scrollTableOne" :data="tableData" :highlight-current-row="false"
|
:stripe="true"
|
:header-cell-style="{ backgroundColor: 'transparent', color: '#79A5E9', borderColor: '#29466A' }"
|
:cell-style="{ color: '#79A5E9', borderColor: '#29466A', paddingTop: '10px', paddingBottom: '10px' }"
|
:row-style="{ backgroundColor: 'transparent' }">
|
<el-table-column prop="street" label="镇/街道" align="center" />
|
<el-table-column label="发现数量" align="center">
|
|
<template #default="scope">
|
<div style="color: #6289E6;">
|
{{ scope.row.num1 }}
|
</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="下发通知书" align="center">
|
|
<template #default="scope">
|
<div style="color: #CFB249;">
|
{{ scope.row.num2 }}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="处置数量" align="center">
|
|
<template #default="scope">
|
<div style="color: #2BB06D;">
|
{{ scope.row.num3 }}
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onUnmounted, inject, nextTick, watch, watchEffect } from 'vue';
|
|
const tableState = inject('tableState');
|
|
const tableType = ref([
|
{ id: 1, type: '本月', isActive: true },
|
{ id: 2, type: '本季', isActive: false },
|
]);
|
|
const tableData = [
|
{
|
street: '奎光塔街道',
|
num1: 12,
|
num2: 5,
|
num3: 2
|
},
|
{
|
street: '奎光塔街道',
|
num1: 12,
|
num2: 5,
|
num3: 2
|
},
|
{
|
street: '奎光塔街道',
|
num1: 12,
|
num2: 5,
|
num3: 2
|
},
|
{
|
street: '奎光塔街道',
|
num1: 12,
|
num2: 5,
|
num3: 2
|
},
|
{
|
street: '奎光塔街道',
|
num1: 12,
|
num2: 5,
|
num3: 2
|
},
|
{
|
street: '奎光塔街道',
|
num1: 12,
|
num2: 5,
|
num3: 2
|
},
|
{
|
street: '奎光塔街道',
|
num1: 12,
|
num2: 5,
|
num3: 2
|
},
|
{
|
street: '奎光塔街道',
|
num1: 12,
|
num2: 5,
|
num3: 2
|
},
|
{
|
street: '奎光塔街道',
|
num1: 12,
|
num2: 5,
|
num3: 2
|
},
|
{
|
street: '奎光塔街道',
|
num1: 12,
|
num2: 5,
|
num3: 2
|
},
|
{
|
street: '奎光塔街道',
|
num1: 12,
|
num2: 5,
|
num3: 2
|
},
|
{
|
street: '奎光塔街道',
|
num1: 12,
|
num2: 5,
|
num3: 2
|
},
|
{
|
street: '奎光塔街道',
|
num1: 12,
|
num2: 5,
|
num3: 2
|
},
|
{
|
street: '奎光塔街道',
|
num1: 12,
|
num2: 5,
|
num3: 2
|
},
|
];
|
|
const changeSelect = (selectItem) => {
|
tableType.value.forEach((item) => {
|
item.isActive = false;
|
});
|
selectItem.isActive = true;
|
}
|
|
let scrollTableOne = ref("");
|
|
const tableNode = ref(null);
|
const scrollHeight = ref(null);
|
const scrollTop = ref(null);
|
|
let scrollTimer = null;
|
|
// 滚动
|
const scrollTable = () => {
|
clearScroll();
|
tableNode.value = scrollTableOne.value.$refs.bodyWrapper.getElementsByClassName(
|
"el-scrollbar__wrap"
|
)[0];
|
scrollHeight.value = tableNode.value.scrollHeight;
|
scrollTop.value = tableNode.value.scrollTop;
|
|
scrollTimer = setInterval(() => {
|
scrollTableOne.value.setScrollTop(scrollTop.value++);
|
|
|
if (scrollTop.value >= scrollHeight.value - tableNode.value.offsetHeight) {
|
scrollTop.value = 0;
|
scrollTableOne.value.setScrollTop(0);
|
}
|
}, 50);
|
};
|
|
|
const clearScroll = (() => {
|
clearInterval(scrollTimer);
|
});
|
|
watch(tableState, (newVal) => {
|
if (newVal) {
|
nextTick(() => {
|
setTimeout(() => {
|
scrollTable();
|
}, 500);
|
});
|
} else {
|
clearScroll();
|
}
|
})
|
|
onUnmounted(() => {
|
clearScroll();
|
});
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
.container {
|
height: 360px;
|
}
|
|
.table-container {
|
position: relative;
|
}
|
|
.table-content {
|
width: 100%;
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
}
|
|
.table-top {
|
height: 51px;
|
background-color: rgba(17, 34, 58, 0.6);
|
border: 1px solid #29466A;
|
border-bottom: none;
|
}
|
|
.table-select {
|
height: 100%;
|
}
|
|
.top-title {
|
font-size: 16px;
|
color: #447ED6;
|
margin-left: 20px;
|
font-family: 'PingFang SC';
|
|
}
|
|
.select-item {
|
padding: 0 16px;
|
height: 100%;
|
border-bottom: 2px solid RGBA(98, 137, 230, 0);
|
color: rgba(94, 134, 194, 1);
|
font-family: 'PingFang SC';
|
|
}
|
|
.item-active {
|
color: #fff;
|
border-color: RGBA(98, 137, 230, 1);
|
}
|
|
.data-table {
|
font-size: 16px;
|
border: 1px solid #29466A;
|
width: 100%;
|
height: 100%;
|
background: transparent;
|
font-family: 'PingFang SC';
|
|
}
|
|
::v-deep .el-table__inner-wrapper::before {
|
background-color: transparent;
|
}
|
|
::v-deep .el-table thead tr {
|
background-color: rgba(36, 63, 103, 0.6);
|
|
}
|
|
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
|
background-color: rgba(36, 63, 103, 0.6);
|
}
|
|
.el-table__fixed-right {
|
height: 100% !important;
|
}
|
|
.scroll-table {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
height: 85%;
|
overflow: hidden;
|
}
|
|
// .head-table {
|
// &:deep(.el-table__body-wrapper) {
|
// display: none;
|
// }
|
// }
|
|
// .body-table {
|
// :deep(.el-table__header-wrapper) {
|
// display: none;
|
// }
|
// }</style>
|
