<template>
|
<div class="container">
|
<div class="header">
|
<div class="bottomTitle">
|
<div class="leftBor"></div>
|
<div class="topName">警情动态</div>
|
<div class="rightBor"></div>
|
</div>
|
<div class="timeTab">
|
<span class="beforetime" :class="{choosed:timetype==0}" @click="timeTabClick(0)">近一周</span>
|
<span>/</span>
|
<span class="beforetime" :class="{choosed:timetype==1}" @click="timeTabClick(1)">近一月</span>
|
</div>
|
</div>
|
|
<div class="body" ref="tableBox">
|
<el-table
|
:data="timetype == 0 ? pliceSituationWeekArr : pliceSituationMouthArr"
|
style="width: 100%"
|
:header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}"
|
:cell-style="{'text-align':'center','borderColor':'#324e75'}"
|
:row-class-name="tableRowClassName"
|
:height="currentTableHeight"
|
>
|
<el-table-column prop="num" label="序号"></el-table-column>
|
<el-table-column prop="type" label="警情类别"></el-table-column>
|
<el-table-column prop="comingPhone" label="报警电话"></el-table-column>
|
<el-table-column prop="dealTime" label="接警时间"></el-table-column>
|
<el-table-column prop="dealPolice" label="经办民警"></el-table-column>
|
<el-table-column prop="callPeople" label="报警人"></el-table-column>
|
<el-table-column prop="callPhone" label="报警人联系人"></el-table-column>
|
<el-table-column prop="callContent" label="报警内容"></el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
let interTime
|
|
export default {
|
data () {
|
return {
|
timetype: 0,
|
pliceSituationWeekArr: [
|
{ 'num': '1', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '12H', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
|
{ 'num': '2', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '12H', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
|
{ 'num': '3', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '12H', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
|
{ 'num': '4', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '12H', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
|
{ 'num': '5', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '12H', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
|
],
|
pliceSituationMouthArr: [
|
{ 'num': '1', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '15H', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
|
{ 'num': '2', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '15H', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
|
{ 'num': '3', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '15H', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
|
{ 'num': '4', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '15H', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
|
{ 'num': '5', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '15H', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
|
],
|
currentTableHeight: 0,
|
|
}
|
},
|
|
mounted () {
|
this.$nextTick(() => {
|
this.tableScroll()
|
this.setDomStyle()
|
})
|
|
window.addEventListener('resize', this.setDomStyle)
|
},
|
|
methods: {
|
timeTabClick (type) {
|
this.timetype = type
|
},
|
setDomStyle () {
|
this.currentTableHeight = this.$refs.tableBox.offsetHeight
|
},
|
tableScroll () {
|
// 拿到表格挂载后的真实DOM
|
const divData = this.$refs.tableBox.querySelector('.el-table__body-wrapper')
|
// 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
|
interTime = setInterval(() => {
|
// 元素自增距离顶部1像素
|
divData.scrollTop += 1
|
// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
|
if (divData.clientHeight + divData.scrollTop + 1 > divData.scrollHeight) {
|
// 重置table距离顶部距离
|
divData.scrollTop = 0
|
}
|
}, 100)
|
},
|
},
|
|
destroyed () {
|
window.addEventListener('resize', this.setDomStyle)
|
clearInterval(interTime)
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.container {
|
position: relative;
|
height: 100%;
|
width: 100%;
|
.header {
|
width: 100%;
|
height: 36px;
|
|
.bottomTitle {
|
display: flex;
|
float: left;
|
width: 34%;
|
margin-left: 33%;
|
height: 36px;
|
line-height: 36px;
|
color: #fff;
|
text-align: center;
|
|
.leftBor {
|
width: 0px;
|
height: 0px;
|
border: 18px solid #3366e2;
|
border-bottom-color: transparent;
|
border-left-color: transparent;
|
}
|
|
.rightBor {
|
width: 0px;
|
height: 0px;
|
border: 18px solid #3366e2;
|
border-bottom-color: transparent;
|
border-right-color: transparent;
|
}
|
|
.topName {
|
width: calc(100% - 48px);
|
background-color: #3366e2;
|
letter-spacing: 2px;
|
}
|
}
|
|
.timeTab {
|
float: right;
|
width: 20%;
|
height: 36px;
|
line-height: 36px;
|
.beforetime {
|
color: rgb(98, 95, 95);
|
cursor: pointer;
|
}
|
.beforetime:hover {
|
text-decoration: underline;
|
}
|
.choosed {
|
color: #fff;
|
}
|
}
|
}
|
|
.body {
|
margin: 10px;
|
width: calc(100% - 20px);
|
height: calc(100% - 56px);
|
|
/* 解决自定义滚动条 x 轴显示问题 */
|
}
|
}
|
</style>
|
