<template>
|
<div class="container">
|
<div class="box">
|
<div class="header">
|
<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 class="timeSeclect" v-show="historytype">
|
<el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels range-separator="至"
|
start-placeholder="开始日期" end-placeholder="结束日期"
|
:picker-options="pickerOptions"></el-date-picker>
|
</div>
|
<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>
|
|
<div class="body" ref="tableBox" @click="handleSelectClick($event)">
|
<ul class="title-header">
|
<li>
|
<span class="num">序号</span>
|
<span class="type">警情类别</span>
|
<span class="dealTime">接警时间</span>
|
<span class="state">警情状态</span>
|
<span class="dealPolice">经办民警</span>
|
<span class="callPeople">报警人</span>
|
<span class="comingPhone">报警电话</span>
|
<span class="callPhone">报警人联系人</span>
|
<span class="callContent">报警内容</span>
|
</li>
|
</ul>
|
<vue-seamless-scroll :data="historytype == 0 ? policeSituationRealtimeArr : policeSituationHistoryArr"
|
class="warp" :class-option="classOption">
|
<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="num" v-text="index + 1"></span>
|
<span class="type" v-text="item.type"></span>
|
<span class="dealTime" v-text="item.dealTime"></span>
|
<span class="state" v-text="item.state"></span>
|
<span class="dealPolice" v-text="item.dealPolice"></span>
|
<span class="callPeople" v-text="item.callPeople"></span>
|
<span class="comingPhone" v-text="item.comingPhone"></span>
|
<span class="callPhone" v-text="item.callPhone"></span>
|
<span class="callContent" v-text="item.callContent"></span>
|
</li>
|
</ul>
|
</vue-seamless-scroll>
|
</div>
|
</div>
|
|
<svg class="border-svg">
|
<defs>
|
<path id="bottom-box-path" d="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0
|
c55.99,0,112.01,0,168,0c238.64,0,477.36,0,716,0c1.01,1.73,4.64,4.26,5,5c0,20,0,40,0,60c0,49,0,98,0,147c-0.89,1.52,0,19.4,0,25
|
c0,22.33,0,44.67,0,67c-1.43,0.78-4.01,2.77-5,4c-13,0-26,0-39,0c-3-3.33-6-6.67-9-10c-22,0-44,0-66,0c-2.26,3.84-6.72,5.26-8,10
|
c-241.98,0-484.02,0-726,0c-64.33,0-128.67,0-193,0c-17,0-34,0-51,0c-5.68,0-16.19,1.49-20-1c-4.4-2.88-3-12.84-3-20
|
c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z" fill="transparent">
|
</path>
|
<radialGradient id="border-box-gradient" cx="50%" cy="50%" r="50%">
|
<stop offset="0%" stop-color="#fff" stop-opacity="1"></stop>
|
<stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
|
</radialGradient>
|
<mask id="border-box-mask">
|
<circle cx="0" cy="0" r="150" fill="url(#border-box-gradient)">
|
<animateMotion dur="8s" path="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0
|
c55.99,0,112.01,0,168,0c238.64,0,477.36,0,716,0c1.01,1.73,4.64,4.26,5,5c0,20,0,40,0,60c0,49,0,98,0,147c-0.89,1.52,0,19.4,0,25
|
c0,22.33,0,44.67,0,67c-1.43,0.78-4.01,2.77-5,4c-13,0-26,0-39,0c-3-3.33-6-6.67-9-10c-22,0-44,0-66,0c-2.26,3.84-6.72,5.26-8,10
|
c-241.98,0-484.02,0-726,0c-64.33,0-128.67,0-193,0c-17,0-34,0-51,0c-5.68,0-16.19,1.49-20-1c-4.4-2.88-3-12.84-3-20
|
c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z" rotate="auto" repeatCount="indefinite"></animateMotion>
|
</circle>
|
</mask>
|
</defs>
|
|
<use stroke-width="2" xlink:href="#bottom-box-path" mask="url(#border-box-mask)" stroke="#4fd2dd">
|
<animate attributeName="stroke-dasharray" from="0, 3220" to="3220, 0" dur="8s" repeatCount="indefinite">
|
</animate>
|
</use>
|
</svg>
|
</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'
|
|
import { getCallPolices } from "@/api/home/index.js"
|
|
export default {
|
data () {
|
return {
|
timetype: 0,
|
historytype: 0,
|
policeSituationRealtimeArr: [],
|
policeSituationHistoryArr: [],
|
policeSituationHistorySaveArr: [],
|
eventTime: '',
|
pickerOptions: {
|
shortcuts: [{
|
text: '最近一周',
|
onClick (picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
picker.$emit('pick', [start, end])
|
}
|
}, {
|
text: '最近一个月',
|
onClick (picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
picker.$emit('pick', [start, end])
|
}
|
}, {
|
text: '最近三个月',
|
onClick (picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
picker.$emit('pick', [start, end])
|
}
|
}]
|
},
|
classOption: {
|
step: 1
|
}
|
}
|
},
|
|
inject: ["getWidth"],
|
|
components: {
|
vueSeamlessScroll
|
},
|
|
created () {
|
this.policeSituationRealtimeArr = realtimeArr
|
this.policeSituationHistoryArr = historyArr
|
this.policeSituationHistorySaveArr = historyArr
|
|
this.getCallPolices()
|
},
|
|
mounted () {
|
if (this.timetype == 0) {
|
this.policeSituationHistoryArr = this.chooseWeekTimeDate(this.policeSituationHistorySaveArr)
|
} else {
|
this.policeSituationHistoryArr = this.chooseMouthTimeDate(this.policeSituationHistorySaveArr)
|
}
|
|
if (this.getWidth() > 7000) {
|
this.classOption.step = 8
|
}
|
},
|
|
methods: {
|
getCallPolices () {
|
getCallPolices().thne(res => {
|
setTimeout(() => {
|
console.log(res, 465464)
|
}, 5000)
|
})
|
},
|
|
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) {
|
if (item.position) {
|
this.$EventBus.$emit('toPosition', {
|
layerName: 'policeSituationyLayers',
|
siteJd: Number(item.position[0]),
|
siteWd: Number(item.position[1])
|
})
|
this.$store.commit('SET_DETAILSPOPUP', true)
|
this.$store.commit('SET_DATAPOPUP', item)
|
var popup = new global.DC.DivForms(global.viewer, {
|
domId: 'divFormsDomBox',
|
position: [
|
global.DC.Transform.transformWGS84ToCartesian(
|
new global.DC.Position(
|
Number(item.position[0]),
|
Number(item.position[1]),
|
0
|
)
|
)
|
]
|
})
|
} else {
|
this.$emit('policeSituationSiteClick', item)
|
}
|
},
|
|
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%;
|
background-image: url(/img/box/bottom-box.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
|
.box {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 11;
|
}
|
|
.header {
|
position: relative;
|
width: 100%;
|
height: 56px;
|
|
.bottom-title {
|
position: absolute;
|
top: 0;
|
left: 18px;
|
height: 56px;
|
line-height: 56px;
|
color: #fff;
|
text-align: center;
|
font-size: 16px;
|
font-weight: bold;
|
font-style: oblique;
|
letter-spacing: 2px;
|
}
|
|
.timeTab {
|
position: absolute;
|
top: 22px;
|
right: 400px;
|
display: flex;
|
border-radius: 6px;
|
overflow: hidden;
|
|
span {
|
padding: 0 10px;
|
height: 26px;
|
text-align: center;
|
line-height: 26px;
|
background: $sub-tab-bg-color;
|
}
|
|
.beforetime {
|
color: #99cccc;
|
cursor: pointer;
|
}
|
|
.choosed {
|
color: #fff;
|
}
|
}
|
|
.timeSeclect {
|
width: 250px;
|
height: 30px;
|
position: absolute;
|
top: 12px;
|
right: 130px;
|
}
|
|
.history-tab {
|
position: absolute;
|
top: 22px;
|
right: 12px;
|
display: flex;
|
border-radius: 6px;
|
overflow: hidden;
|
|
span {
|
padding: 0 10px;
|
height: 26px;
|
text-align: center;
|
line-height: 26px;
|
background: $sub-tab-bg-color;
|
}
|
|
.beforetime {
|
color: #99cccc;
|
cursor: pointer;
|
}
|
|
.choosed {
|
color: #fff;
|
}
|
}
|
}
|
|
.body {
|
margin: 12px;
|
margin-top: 10px;
|
margin-bottom: 14px;
|
width: calc(100% - 24px);
|
height: calc(100% - 80px);
|
|
.title-header {
|
li {
|
color: #fff !important;
|
background: $table-header-bg-color !important;
|
}
|
}
|
|
/* 解决自定义滚动条 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: $table-body-tr-2n-color;
|
color: #fff !important;
|
}
|
|
li:nth-child(2n-1) {
|
background: $table-body-tr-n-color;
|
color: #fff;
|
}
|
}
|
}
|
|
|
.border-svg {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 1;
|
}
|
}
|
</style>
|
