<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" :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 } from 'vue';
|
|
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
|
},
|
];
|
|
const changeSelect = (selectItem) => {
|
tableType.value.forEach((item) => {
|
item.isActive = false;
|
});
|
selectItem.isActive = true;
|
}
|
</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;
|
}
|
|
.select-item {
|
padding: 0 16px;
|
height: 100%;
|
border-bottom: 2px solid RGBA(98, 137, 230, 0);
|
color: rgba(94, 134, 194, 1);
|
}
|
|
.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;
|
}
|
|
::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;
|
}</style>
|
