<template>
|
<div class="table2">
|
<div class="header">
|
<span class="title1">城市应急事件跟踪</span>
|
</div>
|
|
<el-table :data="tableData" size="mini" style="width: 90%;background: #182a45;margin-top: 16px;" :height="'160px'">
|
<el-table-column prop="name" header-align="center" align="center" label="事件名称">
|
<template slot-scope="scope">
|
<span style="color:red;padding-top: 9px ;padding-bottom: 9px">
|
{{ scope.row.name }}
|
</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="type" header-align="center" align="center" label="事件类型">
|
</el-table-column>
|
<el-table-column prop="level" header-align="center" align="center" label="事件等级">
|
</el-table-column>
|
<el-table-column header-align="center" align="center" label="处置状态">
|
<template slot-scope="scope">
|
<span class="progress" :class="getStyle(scope.row.progress)">
|
{{ scope.row.progress }}
|
</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div style="width: 100%;height: 36px ;margin: 6px 0px; text-align: center">
|
<el-pagination :total="30" layout="total, prev, pager, next, jumper" :page-sizes="[5]">
|
</el-pagination>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
name: "table2",
|
components: {
|
|
},
|
data() {
|
return {
|
tableTreeDdataTotal: 0,
|
tableData: [
|
{
|
name: 'xx街内涝',
|
type: '自然灾害',
|
level: '一般突发',
|
progress: '处置中'
|
},
|
{
|
name: 'xx街撞车',
|
type: '事故灾难',
|
level: '一般突发',
|
progress: '未处置'
|
},
|
{
|
name: 'xx街内涝',
|
type: '自然灾害',
|
level: '一般突发',
|
progress: '已完结'
|
},
|
{
|
name: 'xx街撞车',
|
type: '交通事故',
|
level: '一般突发',
|
progress: '处置中'
|
},
|
|
{
|
name: 'xx街撞车',
|
type: '交通事故',
|
level: '一般突发',
|
progress: '处置中'
|
},
|
{
|
name: 'xx街撞车',
|
type: '交通事故',
|
level: '一般突发',
|
progress: '处置中'
|
},
|
]
|
}
|
},
|
methods: {
|
getStyle(type) {
|
switch (type) {
|
case '处置中':
|
return 'progress1'
|
break;
|
case '未处置':
|
return 'progress2'
|
break;
|
case '已完结':
|
return 'progress3'
|
break;
|
default:
|
return 'progress1'
|
break;
|
}
|
}
|
},
|
|
|
}
|
</script>
|
|
<style scoped lang="less">
|
.table2 {
|
height: 100%;
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-between;
|
pointer-events: all;
|
|
.header {
|
width: 304px;
|
height: 27.5px;
|
margin-left: 20px;
|
margin-top: 20px;
|
background-image: url("~@/assets/img/menuTitle1.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
font-family: PangMenZhengDao;
|
text-shadow: 0px 6px 9px #20618e;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
flex-shrink: 0;
|
align-self: flex-start;
|
|
.title1 {
|
margin-left: 30px;
|
font-size: 15px;
|
color: #ffffff;
|
}
|
|
}
|
|
.progress {
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
width: 50px;
|
height: 16px;
|
border-radius: 6.5px;
|
color: #fff;
|
}
|
|
.progress1 {
|
background: rgba(10, 174, 244, 0.30);
|
border: 0.5px solid #9fd0ff;
|
}
|
|
.progress2 {
|
background: rgba(255, 255, 255, 0.3);
|
border: 0.5px solid #fff;
|
}
|
|
.progress3 {
|
background: rgba(0, 255, 242, 0.30);
|
border: 0.5px solid #00fff2;
|
}
|
}
|
|
|
.el-table /deep/ tr {
|
background-color: transparent;
|
color: #dedfe1;
|
}
|
|
.el-table /deep/ tr th {
|
background-color: rgba(240, 250, 254, 0.1);
|
color: rgba(240, 250, 254, 0.85);
|
}
|
|
.el-table /deep/ tr:hover>td {
|
background-color: rgba(0, 166, 226, 0.4) !important;
|
}
|
|
.el-pagination /deep/ .btn-prev,
|
.el-pagination /deep/ .btn-next,
|
.el-pagination /deep/ .el-input__inner,
|
.el-pagination /deep/ .el-pager li {
|
background-color: rgba(0, 166, 226, 0.02);
|
border-radius: 2px 2px 2px 2px;
|
border: 1px solid rgba(240, 250, 254, 0.3);
|
color: #dedfe1 !important;
|
}
|
|
.el-pagination /deep/ .el-pagination__jump {
|
color: #dedfe1;
|
}
|
|
/deep/.el-pagination__total {
|
color: #dedfe1;
|
}
|
|
/deep/ .el-input__inner {
|
background-color: transparent;
|
background-image: none;
|
border-radius: 0px;
|
border: 1px solid #5c6d96;
|
color: #ffffff;
|
}
|
|
/deep/.el-input-group__append {
|
background: transparent;
|
border: 1px solid #5c6d96;
|
color: #ffffff;
|
}
|
|
/deep/.el-table--mini .el-table__cell {
|
padding: 0px 0;
|
}
|
|
/deep/.el-table th.el-table__cell>.cell {
|
padding: 6px 10px;
|
}
|
|
/deep/.el-table .cell {
|
color: #aec2de;
|
}
|
|
/deep/.el-table tr {
|
height: 33px;
|
}
|
</style>
|
