c<template>
|
<div class="container">
|
<div class="header">
|
<div class="history-tab">
|
<span
|
class="beforetime"
|
:class="{ choosed: historytype == 0 }"
|
@click="historyTabClick(0)"
|
>实时</span>
|
<span
|
class="beforetime"
|
:class="{ choosed: historytype == 1 }"
|
@click="historyTabClick(1)"
|
>历史</span>
|
</div>
|
<div class="bottom-title">警情动态</div>
|
<div class="timeTab" v-show="historytype">
|
<span
|
class="beforetime"
|
:class="{ choosed: timetype == 0 }"
|
@click="timeTabClick(0)"
|
>周</span>
|
<span
|
class="beforetime"
|
:class="{ choosed: timetype == 1 }"
|
@click="timeTabClick(1)"
|
>月</span>
|
</div>
|
</div>
|
|
<div class="body" ref="tableBox" @click="handleSelectClick($event)">
|
<ul>
|
<li style="color: #fff; background: rgb(1, 76, 137);">
|
<span class="num">序号</span>
|
<span class="type">警情类别</span>
|
<span class="state">警情状态</span>
|
<span class="comingPhone">报警电话</span>
|
<span class="dealTime">接警时间</span>
|
<span class="dealPolice">经办民警</span>
|
<span class="callPeople">报警人</span>
|
<span class="callPhone">报警人联系人</span>
|
<span class="callContent">报警内容</span>
|
</li>
|
</ul>
|
<vue-seamless-scroll
|
:data="historytype == 0 ? policeSituationRealtimeArr : policeSituationHistoryArr"
|
class="warp"
|
>
|
<ul class="item">
|
<li
|
v-for="(item, index) in (historytype == 0 ? policeSituationRealtimeArr : policeSituationHistoryArr)"
|
:key="index"
|
:data-obj="JSON.stringify(item)"
|
class="row"
|
>
|
<span class="num" v-text="item.num"></span>
|
<span class="type" v-text="item.type"></span>
|
<span class="state" v-text="item.state"></span>
|
<span class="comingPhone" v-text="item.comingPhone"></span>
|
<span class="dealTime" v-text="item.dealTime"></span>
|
<span class="dealPolice" v-text="item.dealPolice"></span>
|
<span class="callPeople" v-text="item.callPeople"></span>
|
<span class="callPhone" v-text="item.callPhone"></span>
|
<span class="callContent" v-text="item.callContent"></span>
|
</li>
|
</ul>
|
</vue-seamless-scroll>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
import realtimeArr from '@/assets/data/policeSituationArr/realtimeArr.js'
|
import historyArr from '@/assets/data/policeSituationArr/historyArr.js'
|
|
export default {
|
data () {
|
return {
|
timetype: 0,
|
historytype: 0,
|
policeSituationRealtimeArr: [],
|
policeSituationHistoryArr: [],
|
policeSituationHistorySaveArr: [],
|
}
|
},
|
|
components: {
|
vueSeamlessScroll
|
},
|
|
created () {
|
this.policeSituationRealtimeArr = realtimeArr
|
this.policeSituationHistoryArr = historyArr
|
this.policeSituationHistorySaveArr = historyArr
|
},
|
|
mounted () {
|
if (this.timetype == 0) {
|
this.policeSituationHistoryArr = this.chooseWeekTimeDate(this.policeSituationHistorySaveArr)
|
} else {
|
this.policeSituationHistoryArr = this.chooseMouthTimeDate(this.policeSituationHistorySaveArr)
|
}
|
},
|
|
methods: {
|
timeTabClick (type) {
|
this.timetype = type
|
this.$emit('changePoliceSituationTimeType', type)
|
this.$emit('policeSituationChange')
|
if (type == 0) {
|
this.policeSituationHistoryArr = this.chooseWeekTimeDate(this.policeSituationHistorySaveArr)
|
} else {
|
this.policeSituationHistoryArr = this.chooseMouthTimeDate(this.policeSituationHistorySaveArr)
|
}
|
},
|
|
historyTabClick (type) {
|
this.historytype = type
|
this.$emit('changePoliceSituationHistoryType', type)
|
this.$emit('policeSituationChange')
|
},
|
|
selectPoliceSituatiionArr (name) {
|
if (name == '全部') {
|
this.policeSituationRealtimeArr = realtimeArr
|
this.policeSituationHistoryArr = historyArr
|
this.timeTabClick(this.timetype)
|
} else {
|
let realtimeNewArr = []
|
let historyNewArr = []
|
realtimeArr.forEach(item => {
|
if (item.policeName == name) {
|
realtimeNewArr.push(item)
|
}
|
})
|
this.policeSituationRealtimeArr = realtimeNewArr
|
historyArr.forEach(item => {
|
if (item.policeName == name) {
|
historyNewArr.push(item)
|
}
|
})
|
this.policeSituationHistorySaveArr = historyNewArr
|
this.policeSituationHistoryArr = historyNewArr
|
this.timeTabClick(this.timetype)
|
}
|
},
|
|
chooseWeekTimeDate (arr) {
|
let lastWeekArr = []
|
let realtimeTimeStamp = new Date().valueOf() - 24 * 60 * 60 * 1000
|
let lastWeekTimeStamp = new Date().valueOf() - 7 * 24 * 60 * 60 * 1000
|
arr.forEach(item => {
|
if (new Date(item.dealTime).valueOf() < realtimeTimeStamp && new Date(item.dealTime).valueOf() > lastWeekTimeStamp) {
|
lastWeekArr.push(item)
|
}
|
})
|
return lastWeekArr
|
},
|
|
chooseMouthTimeDate (arr) {
|
let lastMouthArr = []
|
let realtimeTimeStamp = new Date().valueOf() - 24 * 60 * 60 * 1000
|
let lastMouthTimeStamp = new Date().valueOf() - 30 * 24 * 60 * 60 * 1000
|
arr.forEach(item => {
|
if (new Date(item.dealTime).valueOf() < realtimeTimeStamp && new Date(item.dealTime).valueOf() > lastMouthTimeStamp) {
|
lastMouthArr.push(item)
|
}
|
})
|
return lastMouthArr
|
},
|
|
policeSituationClick (item) {
|
this.$EventBus.$emit('toPosition', {
|
layerName: 'policeSituationyLayers',
|
siteJd: Number(item.position[0]),
|
siteWd: Number(item.position[1])
|
})
|
},
|
|
handleSelectClick (e) {
|
let e1
|
for (let i = 0; i < e.path.length; i++) {
|
if (e.path[i].className == "row") {
|
e1 = e.path[i]
|
break
|
}
|
}
|
let item = JSON.parse(e1.dataset.obj)
|
this.policeSituationClick(item)
|
}
|
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.container {
|
position: relative;
|
height: 100%;
|
width: 100%;
|
|
.header {
|
position: relative;
|
width: 100%;
|
height: 36px;
|
|
.bottom-title::before {
|
content: '';
|
top: 0;
|
left: 0;
|
position: absolute;
|
width: 0px;
|
height: 0px;
|
border: 18px solid #3366e2;
|
border-bottom-color: transparent;
|
border-left-color: transparent;
|
transform: translate(-100%, 0);
|
}
|
|
.bottom-title {
|
margin: 0 auto;
|
position: absolute;
|
left: 0;
|
right: 0;
|
width: 26%;
|
height: 36px;
|
line-height: 36px;
|
color: #fff;
|
text-align: center;
|
background: #3366e2;
|
}
|
|
.bottom-title::after {
|
content: '';
|
top: 0;
|
right: 0;
|
position: absolute;
|
width: 0px;
|
height: 0px;
|
border: 18px solid #3366e2;
|
border-bottom-color: transparent;
|
border-right-color: transparent;
|
transform: translate(100%, 0);
|
}
|
|
.timeTab {
|
position: absolute;
|
top: 10px;
|
right: 10px;
|
display: flex;
|
border-radius: 6px;
|
overflow: hidden;
|
|
span {
|
padding: 0 10px;
|
height: 26px;
|
text-align: center;
|
line-height: 26px;
|
background: rgb(1, 76, 137);
|
}
|
|
.beforetime {
|
color: rgb(98, 95, 95);
|
cursor: pointer;
|
}
|
|
.choosed {
|
color: #fff;
|
}
|
}
|
.history-tab {
|
position: absolute;
|
top: 10px;
|
left: 10px;
|
display: flex;
|
border-radius: 6px;
|
overflow: hidden;
|
span {
|
padding: 0 10px;
|
height: 26px;
|
text-align: center;
|
line-height: 26px;
|
background: rgb(1, 76, 137);
|
}
|
|
.beforetime {
|
color: rgb(98, 95, 95);
|
cursor: pointer;
|
}
|
|
.choosed {
|
color: #fff;
|
}
|
}
|
}
|
|
.body {
|
margin: 10px;
|
width: calc(100% - 20px);
|
height: calc(100% - 56px);
|
|
/* 解决自定义滚动条 x 轴显示问题 */
|
.warp {
|
margin: 0 auto;
|
overflow: hidden;
|
width: 100%;
|
height: calc(100% - 44px);
|
}
|
|
ul {
|
li {
|
height: 44px;
|
line-height: 44px;
|
display: flex;
|
cursor: pointer;
|
|
.num {
|
width: 8%;
|
}
|
|
.type {
|
width: 10%;
|
}
|
|
.state {
|
width: 8%;
|
}
|
|
.comingPhone {
|
width: 14%;
|
}
|
|
.dealTime {
|
width: 14%;
|
}
|
|
.dealPolice {
|
width: 8%;
|
}
|
|
.callPeople {
|
width: 8%;
|
}
|
|
.callPhone {
|
width: 14%;
|
}
|
|
.callContent {
|
flex: 1;
|
}
|
}
|
|
li:nth-child(2n) {
|
background: rgba(20, 50, 123, 1);
|
color: #fff !important;
|
}
|
|
li:nth-child(2n-1) {
|
background: rgba(29, 38, 105, 1);
|
color: #fff;
|
}
|
}
|
}
|
}
|
</style>
|
