<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="结束日期"></el-date-picker> -->
|
|
|
<el-date-picker @change="datePickerChange" v-show="timetype == 0" v-model="currentWeekTime"
|
type="week" format="yyyy 第 WW 周" :picker-options="pickerOptions" placeholder="选择周">
|
</el-date-picker>
|
|
<el-date-picker @change="datePickerChange" v-show="timetype == 1" v-model="currentMonthTime"
|
type="month" :picker-options="pickerOptions" placeholder="选择月">
|
</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="receiving-alarm-unit">接警单位</span>
|
<span class="receiving-alarm-people">接警员</span>
|
<span class="receiving-alarm-time">接警时间</span>
|
<span class="call-people">报警人</span>
|
<span class="call-phone">联系电话</span>
|
<span class="call-police-content">报警内容</span>
|
<span class="incident-site">事发地址</span>
|
<span class="call-police-type">报警类型</span>
|
<span class="alarm-bz">备注</span>
|
</li>
|
</ul>
|
|
<vue-seamless-scroll v-if="currentUseDataLength > 0" :data="listCurrentData" class="warp"
|
:class-option="classOption">
|
<ul class="item">
|
<li v-for="(item, index) in listCurrentData" :key="index" :data-obj="JSON.stringify(item)"
|
class="row">
|
<span class="num" v-text="index + 1"></span>
|
<span class="receiving-alarm-unit" v-text="item.JJDWMC"></span>
|
<span class="receiving-alarm-people" v-text="item.JJYXM"></span>
|
<span class="receiving-alarm-time" v-text="item.JJSJ"></span>
|
<span class="call-people" v-text="item.BJRXM"></span>
|
<span class="call-phone" v-text="item.LXDH"></span>
|
<span class="call-police-content" :title="item.BJNR" v-text="item.BJNR"></span>
|
<span class="incident-site" v-text="item.SFDZ"></span>
|
<span class="call-police-type" v-text="item.BJLX"></span>
|
<span class="alarm-bz" v-text="item.MEMO"></span>
|
</li>
|
</ul>
|
</vue-seamless-scroll>
|
|
<div class="warp no-data" v-else>
|
暂无数据
|
</div>
|
</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 historyArr from '@/assets/data/policeSituationArr/historyArr.js'
|
|
import { getCallPolices, getAnswerPolices, getAlarmList } from "@/api/home/index.js"
|
|
export default {
|
data () {
|
return {
|
timetype: 0,
|
historytype: 0,
|
// 实时
|
policeSituationRealtimeArr: [],
|
// 历史
|
policeSituationHistoryArr: [],
|
policeSituationHistorySaveArr: [],
|
eventTime: '',
|
currentWeekTime: '',
|
currentMonthTime: '',
|
pickerOptions: {}, // 日期设置对象
|
classOption: {
|
step: 1
|
}
|
}
|
},
|
|
inject: ["getWidth"],
|
|
components: {
|
vueSeamlessScroll
|
},
|
|
computed: {
|
listCurrentData () {
|
if (this.historytype == 0) {
|
return this.policeSituationRealtimeArr
|
} else {
|
return this.policeSituationHistoryArr
|
}
|
},
|
|
currentUseDataLength () {
|
if (this.historytype == 0) {
|
return this.policeSituationRealtimeArr.length
|
} else {
|
return this.policeSituationHistoryArr.length
|
}
|
}
|
},
|
|
created () {
|
this.getAnswerPolices()
|
|
// disabledDate 为true表示不可选,false表示可选
|
this.pickerOptions = {
|
disabledDate (time) {
|
// 设置可选择的日期为今天之后的一个月内
|
let curDate = (new Date()).getTime()
|
return time.getTime() > curDate
|
}
|
|
}
|
},
|
|
mounted () {
|
if (this.getWidth() > 7000) {
|
this.classOption.step = 8
|
}
|
},
|
|
methods: {
|
// 时间改变事件
|
datePickerChange (e) {
|
// this.timetype
|
const dateStr = this.dateFormat(e)
|
|
this.getAlarmList(this.timetype, dateStr)
|
},
|
|
// 获取当前日期
|
dateFormat (dateData) {
|
var date = new Date(dateData)
|
var y = date.getFullYear()
|
var m = date.getMonth() + 1
|
m = m < 10 ? ('0' + m) : m
|
var d = date.getDate()
|
d = d < 10 ? ('0' + d) : d
|
const time = y + '-' + m + '-' + d
|
return time
|
},
|
|
// 获取实时接警记录
|
getAnswerPolices () {
|
// getAnswerPolices().then(res => {
|
// this.policeSituationRealtimeArr = res.data.result
|
// })
|
|
this.policeSituationRealtimeArr = [{
|
ZDDWXZB: 112,
|
ZDDWYZB: 25,
|
JJDWMC: '信州公安局派出所',
|
JJYXM: '欧阳西门',
|
JJSJ: '2022-12-12 12:12:12',
|
BJRXM: '西门庆祝',
|
LXDH: 17335843642,
|
BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
|
SFDZ: '上饶市信州区万达华府小区',
|
BJLX: '聚众赌博',
|
MEMO: '人群聚集赌博'
|
},
|
{
|
JJDWMC: '信州公安局派出所',
|
JJYXM: '欧阳西门',
|
JJSJ: '2022-12-12 12:12:12',
|
BJRXM: '西门庆祝',
|
LXDH: 17335843642,
|
BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
|
SFDZ: '上饶市信州区万达华府小区',
|
BJLX: '聚众赌博',
|
MEMO: '人群聚集赌博'
|
},
|
{
|
JJDWMC: '信州公安局派出所',
|
JJYXM: '欧阳西门',
|
JJSJ: '2022-12-12 12:12:12',
|
BJRXM: '西门庆祝',
|
LXDH: 17335843642,
|
BJNR: '今日在某小区查获私人赌博场所',
|
SFDZ: '上饶市信州区万达华府小区',
|
BJLX: '聚众赌博',
|
MEMO: '人群聚集赌博'
|
},
|
{
|
JJDWMC: '信州公安局派出所',
|
JJYXM: '欧阳西门',
|
JJSJ: '2022-12-12 12:12:12',
|
BJRXM: '西门庆祝',
|
LXDH: 17335843642,
|
BJNR: '今日在某小区查获私人赌博场所',
|
SFDZ: '上饶市信州区万达华府小区',
|
BJLX: '聚众赌博',
|
MEMO: '人群聚集赌博'
|
},
|
{
|
JJDWMC: '信州公安局派出所',
|
JJYXM: '欧阳西门',
|
JJSJ: '2022-12-12 12:12:12',
|
BJRXM: '西门庆祝',
|
LXDH: 17335843642,
|
BJNR: '今日在某小区查获私人赌博场所',
|
SFDZ: '上饶市信州区万达华府小区',
|
BJLX: '聚众赌博',
|
MEMO: '人群聚集赌博'
|
},
|
{
|
JJDWMC: '信州公安局派出所',
|
JJYXM: '欧阳西门',
|
JJSJ: '2022-12-12 12:12:12',
|
BJRXM: '西门庆祝',
|
LXDH: 17335843642,
|
BJNR: '今日在某小区查获私人赌博场所',
|
SFDZ: '上饶市信州区万达华府小区',
|
BJLX: '聚众赌博',
|
MEMO: '人群聚集赌博'
|
},
|
{
|
JJDWMC: '信州公安局派出所',
|
JJYXM: '欧阳西门',
|
JJSJ: '2022-12-12 12:12:12',
|
BJRXM: '西门庆祝',
|
LXDH: 17335843642,
|
BJNR: '今日在某小区查获私人赌博场所',
|
SFDZ: '上饶市信州区万达华府小区',
|
BJLX: '聚众赌博',
|
MEMO: '人群聚集赌博'
|
}]
|
},
|
|
// 获取历史接警记录
|
getAlarmList (type, time) {
|
getAlarmList(type, time).then(res => {
|
this.policeSituationHistoryArr = res.data.data.records
|
})
|
},
|
|
// 周月选择
|
timeTabClick (type) {
|
this.timetype = type
|
|
if (type == 0) {
|
this.getAlarmList(type, this.dateFormat(this.currentWeekTime))
|
} else {
|
this.currentMonthTime == '' ? this.currentMonthTime = new Date() : ''
|
|
this.getAlarmList(type, this.dateFormat(this.currentMonthTime))
|
}
|
|
this.$emit('changePoliceSituationTimeType', type)
|
this.$emit('policeSituationChange')
|
},
|
|
// 实时历史选择
|
historyTabClick (type) {
|
this.historytype = type
|
|
this.currentWeekTime = new Date()
|
|
if (type == 0) {
|
this.getAnswerPolices()
|
} else {
|
this.getAlarmList(type, this.dateFormat(this.currentWeekTime))
|
}
|
|
this.$emit('changePoliceSituationHistoryType', type)
|
this.$emit('policeSituationChange')
|
},
|
|
chooseWeekTimeDate () {
|
return this.policeSituationHistoryArr
|
},
|
|
chooseMouthTimeDate () {
|
return this.policeSituationHistoryArr
|
},
|
|
// 列表行选择
|
handleSelectClick (e) {
|
let element
|
for (let i = 0; i < e.path.length; i++) {
|
if (e.path[i].className == "row") {
|
element = e.path[i]
|
break
|
}
|
}
|
|
let currentItem = JSON.parse(element.dataset.obj)
|
|
this.policeSituationClick(currentItem)
|
},
|
|
// 点击定位或者显示弹窗
|
policeSituationClick (item) {
|
if (item.ZDDWXZB && item.ZDDWXZB != 0 && item.ZDDWYZB && item.ZDDWYZB != 0) {
|
this.$EventBus.$emit('toPosition', {
|
layerName: 'policeSituationyLayers',
|
siteJd: Number(item.ZDDWXZB),
|
siteWd: Number(item.ZDDWYZB)
|
})
|
|
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.ZDDWXZB),
|
Number(item.ZDDWYZB),
|
0
|
)
|
)
|
]
|
})
|
} else {
|
this.$emit('policeSituationSiteClick', 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);
|
}
|
|
.warp.no-data {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
ul {
|
li {
|
height: 44px;
|
line-height: 44px;
|
display: flex;
|
cursor: pointer;
|
|
span {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.num {
|
width: 6%;
|
}
|
|
.receiving-alarm-unit {
|
width: 12%;
|
}
|
|
.receiving-alarm-people {
|
width: 8%;
|
}
|
|
.receiving-alarm-time {
|
width: 10%;
|
}
|
|
.call-people {
|
width: 8%;
|
}
|
|
.call-phone {
|
width: 8%;
|
}
|
|
.call-police-content {
|
width: 12%;
|
}
|
|
.incident-site {
|
width: 12%;
|
}
|
|
.call-police-type {
|
width: 8%;
|
}
|
|
.alarm-bz {
|
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>
|
