<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2023-01-13 15:52:59
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-05-06 21:50:44
|
* @FilePath: \srs-police-affairs\src\views\home\components\bottomContainer.vue
|
* @Description:
|
*
|
* Copyright (c) 2023 by shuishen 1109946754@qq.com, All Rights Reserved.
|
-->
|
<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>
|
<span
|
class="beforetime"
|
:class="{ choosed: timetype == 2 }"
|
@click="timeTabClick(2)"
|
>自定义</span>
|
</div>
|
|
<div class="timeSeclect" v-show="historytype">
|
<div v-show="timetype == 0">
|
<el-date-picker
|
size="small"
|
v-model="currentWeekTime"
|
@change="datePickerChange"
|
type="week"
|
align="center"
|
format="yyyy 第 WW 周"
|
placeholder="选择周"
|
popper-class="date-week-style"
|
></el-date-picker>
|
</div>
|
<div v-show="timetype == 1">
|
<el-date-picker
|
size="small"
|
v-model="currentMonthTime"
|
@change="datePickerChange"
|
type="month"
|
align="center"
|
placeholder="选择月"
|
popper-class="date-mouth-style"
|
></el-date-picker>
|
</div>
|
<div v-show="timetype == 2">
|
<el-date-picker
|
size="small"
|
:clearable="false"
|
v-model="currentTime"
|
type="daterange"
|
align="center"
|
unlink-panels
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
@change="datePickerChange"
|
:picker-options="pickerOptions"
|
popper-class="date-day-style"
|
></el-date-picker>
|
</div>
|
<div>
|
<el-select
|
style="flex: 1;"
|
size="small"
|
v-model="policeInforValue"
|
@change="policeTypeChange"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in policeInforOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</div>
|
</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" v-if="historytype == 0" ref="tableBox">
|
<ul class="title-header">
|
<li>
|
<span class="num">序号</span>
|
<span class="receiving-alarm-unit">接警单位</span>
|
<span class="receiving-alarm-time">报警时间</span>
|
<span class="call-police-content">报警内容</span>
|
<span class="incident-site">事发地址</span>
|
<span class="call-police-type">报警类型</span>
|
<span class="have-position">坐标</span>
|
<span class="alarm-bz">备注</span>
|
</li>
|
</ul>
|
|
<!-- <vue-seamless-scroll v-if="policeSituationRealtimeArr.length > 0" :data="policeSituationRealtimeArr" class="warp" :class-option="classOption"> -->
|
<div
|
v-if="policeSituationRealtimeArr.length > 0"
|
:data="policeSituationRealtimeArr"
|
class="warp"
|
:class-option="classOption"
|
>
|
<el-carousel
|
indicator-position="none"
|
direction="vertical"
|
@change="changeAlarm"
|
>
|
<el-carousel-item v-for="item in alarmPageCount" :key="item">
|
<ul class="item">
|
<li
|
v-for="(item, index) in policeSituationRealtimeArr"
|
:key="index"
|
class="row"
|
@click.stop="handleSelectClick(item)"
|
>
|
<span class="num" v-text="item.index"></span>
|
<span class="receiving-alarm-unit" v-text="item.JJDWMC"></span>
|
<span class="receiving-alarm-time" v-text="item.BJSJ"></span>
|
<span
|
class="call-police-content"
|
:title="item.BJNR"
|
v-text="item.BJNR"
|
></span>
|
<span
|
class="incident-site"
|
:title="item.SFDZ"
|
v-text="item.SFDZ"
|
></span>
|
<span class="call-police-type" v-text="item.BJLX"></span>
|
<span class="have-position">
|
<i
|
v-show="item.position == '有'"
|
class="el-icon-location"
|
style="color: #1AFA29;"
|
@click.stop="policeSituationClick(item)"
|
></i>
|
</span>
|
<span class="alarm-bz" v-text="item.MEMO"></span>
|
</li>
|
</ul>
|
</el-carousel-item>
|
</el-carousel>
|
</div>
|
|
<!-- </vue-seamless-scroll> -->
|
|
<div class="warp no-data" v-else>暂无警情数据</div>
|
</div>
|
|
<div class="current-table-body" ref="ElTableBox" v-if="historytype == 1">
|
<el-table
|
:data="policeSituationHistoryArr"
|
:key="currentPage"
|
style="width: 100%"
|
:height="currentTableHeight"
|
:header-cell-style="{ 'text-align': 'center', 'background-color': 'rgba(9, 40, 199, 0.5)', 'borderColor': '#324e75' }"
|
:cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
|
@cell-click="handleSelectClick"
|
>
|
<el-table-column
|
:show-overflow-tooltip="true"
|
prop="index"
|
label="序号"
|
width="60"
|
></el-table-column>
|
<el-table-column :show-overflow-tooltip="true" prop="JJDWMC" label="接警单位"></el-table-column>
|
<el-table-column prop="BJSJ" label="报警时间"></el-table-column>
|
<el-table-column :show-overflow-tooltip="true" prop="BJNR" label="报警内容"></el-table-column>
|
<el-table-column :show-overflow-tooltip="true" prop="SFDZ" label="事发地址"></el-table-column>
|
<el-table-column :show-overflow-tooltip="true" prop="BJLX" label="报警类型"></el-table-column>
|
<el-table-column
|
:show-overflow-tooltip="true"
|
prop="position"
|
label="坐标"
|
width="60"
|
>
|
<template slot-scope="scope">
|
<el-button
|
v-show="scope.row.position == '有'"
|
@click.stop="policeSituationClick(scope.row)"
|
type="text"
|
size="small"
|
title="定位"
|
>
|
<i class="el-icon-location" style="color: #1AFA29;"></i>
|
</el-button>
|
</template>
|
</el-table-column>
|
<el-table-column :show-overflow-tooltip="true" prop="MEMO" label="备注"></el-table-column>
|
</el-table>
|
|
<div
|
class="pages all-pagination-sty"
|
ref="ElPagination"
|
v-if="policeSituationHistoryArr.length > 0"
|
>
|
<el-pagination
|
background
|
layout="prev, pager, next"
|
:page-size="pagesize"
|
:page-count="pagesCount"
|
:current-page="currentPage"
|
@current-change="handleCurrentChange"
|
></el-pagination>
|
</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,0c55.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,25c0,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,10c-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-20c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z"
|
fill="transparent"
|
/>
|
<radialGradient id="border-box-gradient" cx="50%" cy="50%" r="50%">
|
<stop offset="0%" stop-color="#fff" stop-opacity="1" />
|
<stop offset="100%" stop-color="#fff" stop-opacity="0" />
|
</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,0c55.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,25c0,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,10c-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-20c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z"
|
rotate="auto"
|
repeatCount="indefinite"
|
/>
|
</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"
|
/>
|
</use>
|
</svg>
|
</div>
|
</template>
|
|
<script>
|
let alarmTiming = null
|
|
// import vueSeamlessScroll from 'vue-seamless-scroll'
|
|
import { getAnswerPolices, getAlarmList } from "@/api/home/index.js"
|
import { BjlxData } from "@/assets/police"
|
|
export default {
|
inject: ["getWidth", 'userInfo'],
|
|
data () {
|
return {
|
alarmPageCount: 1,
|
alarmPageSize: 4,
|
timetype: 2,
|
historytype: 0,
|
// 实时
|
policeSituationRealtimeAllArr: [],
|
policeSituationRealtimeArr: [],
|
// 历史
|
policeSituationHistoryArr: [],
|
eventTime: '',
|
// 当前选择周时间
|
currentWeekTime: '',
|
// 当前选择月时间
|
currentMonthTime: '',
|
// 当前选择自定义时间
|
currentTime: [],
|
|
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
|
},
|
// 分页
|
pagesize: 15,
|
pagesCount: 1,
|
currentPage: 1,
|
// table高度
|
currentTableHeight: 0,
|
policeStaionID: '',
|
policeInforValue: '',
|
policeInforOptions: [
|
{
|
value: '',
|
label: '全部'
|
},
|
{
|
value: '盗窃',
|
label: '盗窃'
|
},
|
{
|
value: '诈骗',
|
label: '诈骗'
|
},
|
{
|
value: '纠纷',
|
label: '纠纷'
|
},
|
{
|
value: '涉赌',
|
label: '涉赌'
|
},
|
{
|
value: '涉毒',
|
label: '涉毒'
|
},
|
{
|
value: '涉黄',
|
label: '涉黄'
|
},
|
{
|
value: '求救',
|
label: '求救'
|
},
|
{
|
value: '其他',
|
label: '其他'
|
}
|
],
|
}
|
},
|
|
// components: {
|
// vueSeamlessScroll
|
// },
|
|
created () {
|
this.getHomeAllData()
|
|
this.defaultDate()
|
|
// disabledDate 为true表示不可选,false表示可选
|
this.pickerOptions = {
|
...this.pickerOptions,
|
disabledDate (time) {
|
// 设置可选择的日期为今天之后的一个月内
|
let curDate = (new Date()).getTime()
|
return time.getTime() > curDate
|
}
|
}
|
|
window.addEventListener('resize', this.setTableHeight)
|
},
|
|
mounted () {
|
if (this.getWidth() > 7000) {
|
this.classOption.step = 8
|
}
|
},
|
|
methods: {
|
/**
|
* @description: 获取当前组件内所有数据
|
* @return {*}
|
*/
|
getHomeAllData (id = '') {
|
this.policeStaionID = id
|
|
this.historyTabClick(0)
|
},
|
|
// 获取table高度
|
setTableHeight () {
|
this.$nextTick(() => {
|
if (this.$refs.ElTableBox && this.$refs.ElPagination) {
|
this.currentTableHeight = this.$refs.ElTableBox.offsetHeight - this.$refs.ElPagination.offsetHeight
|
}
|
})
|
},
|
|
// 分页选择事件
|
handleCurrentChange: function (currentPage) {
|
this.currentPage = currentPage
|
|
if (this.timetype == 0) {
|
|
this.getAlarmList({ type: this.timetype, time: this.dateFormat(this.currentWeekTime), current: this.currentPage })
|
|
} else if (this.timetype == 1) {
|
|
this.getAlarmList({ type: this.timetype, time: this.dateFormat(this.currentMonthTime), current: this.currentPage })
|
|
} else {
|
|
const date = this.currentTime.map(item => {
|
return this.dateFormat(item)
|
})
|
|
this.getAlarmList({ start: date[0], end: date[1], current: this.currentPage })
|
|
}
|
|
},
|
|
// 设置默认时间
|
defaultDate () {
|
var current = new Date()
|
|
var seven = new Date(current.getTime() - 7 * 24 * 60 * 60 * 1000)
|
|
this.currentTime = [seven, current] //将值设置给插件绑定的数据
|
},
|
|
// 时间改变事件
|
datePickerChange (e) {
|
// this.timetype
|
this.currentPage = 1
|
|
if (this.timetype == 0) {
|
|
this.getAlarmList({ type: this.timetype, time: this.dateFormat(e), current: this.currentPage })
|
|
} else if (this.timetype == 1) {
|
|
this.getAlarmList({ type: this.timetype, time: this.dateFormat(e), current: this.currentPage })
|
|
} else {
|
|
const date = e.map(item => {
|
return this.dateFormat(item)
|
})
|
|
this.getAlarmList({ start: date[0], end: date[1], current: this.currentPage })
|
|
}
|
},
|
|
// 获取当前日期
|
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
|
},
|
|
// 走马灯改变事件
|
changeAlarm (index) {
|
index = index + 1
|
// 改变数据
|
this.alarmDataHanlder(index)
|
},
|
|
// 获取实时接警记录
|
getAnswerPolices () {
|
getAnswerPolices({ deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
|
this.policeSituationRealtimeArr = []
|
|
if (res.data && res.data.length) {
|
// 计算页数
|
this.alarmPageCount = Math.ceil(res.data.length / this.alarmPageSize)
|
this.policeSituationRealtimeAllArr = res.data.map((item, index) => {
|
const bjlxText = BjlxData.filter(i => item.BJLX == i.BJLX)[0].VALUE || ''
|
|
if (item.JJDWMC.indexOf('上饶市公安局') != -1) item.JJDWMC = item.JJDWMC.replace(/上饶市公安局/, '市局')
|
if (item.JJDWMC.indexOf('信州区分局') != -1) item.JJDWMC = item.JJDWMC.replace(/信州区分局/, '')
|
if (item.JJDWMC.indexOf('信州') != -1) item.JJDWMC = item.JJDWMC.replace(/信州/, '')
|
|
return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB, position: item.ZDDWYZB && item.ZDDWYZB != 0 ? '有' : '无', BJLX: bjlxText }
|
})
|
// 数据处理
|
this.alarmDataHanlder(1)
|
} else {
|
this.alarmPageCount = 1
|
this.policeSituationRealtimeArr = []
|
}
|
|
this.$emit('policeSituationChange')
|
})
|
|
// var arr = [{
|
// ZDDWXZB: 117.97,
|
// ZDDWYZB: 28.45,
|
// JJDWMC: '信州公安局派出所',
|
// JJYXM: '欧阳西门',
|
// BJSJ: '2022-12-12 12:12:12',
|
// BJRXM: '西门庆祝',
|
// LXDH: 17335843642,
|
// BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
|
// SFDZ: '上饶市信州区万达华府小区',
|
// BJLX: '聚众赌博',
|
// MEMO: '人群聚集赌博'
|
// },
|
// {
|
// JJDWMC: '信州公安局派出所',
|
// JJYXM: '欧阳西门',
|
// BJSJ: '2022-12-12 12:12:12',
|
// BJRXM: '西门庆祝',
|
// LXDH: 17335843642,
|
// BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
|
// SFDZ: '上饶市信州区万达华府小区',
|
// BJLX: '聚众赌博',
|
// MEMO: '人群聚集赌博'
|
// },
|
// {
|
// JJDWMC: '信州公安局派出所',
|
// JJYXM: '欧阳西门',
|
// BJSJ: '2022-12-12 12:12:12',
|
// BJRXM: '西门庆祝',
|
// LXDH: 17335843642,
|
// BJNR: '今日在某小区查获私人赌博场所',
|
// SFDZ: '上饶市信州区万达华府小区',
|
// BJLX: '聚众赌博',
|
// MEMO: '人群聚集赌博'
|
// },
|
// {
|
// JJDWMC: '信州公安局派出所',
|
// JJYXM: '欧阳西门',
|
// BJSJ: '2022-12-12 12:12:12',
|
// BJRXM: '西门庆祝',
|
// LXDH: 17335843642,
|
// BJNR: '今日在某小区查获私人赌博场所',
|
// SFDZ: '上饶市信州区万达华府小区',
|
// BJLX: '聚众赌博',
|
// MEMO: '人群聚集赌博'
|
// },
|
// {
|
// JJDWMC: '信州公安局派出所',
|
// JJYXM: '欧阳西门',
|
// BJSJ: '2022-12-12 12:12:12',
|
// BJRXM: '西门庆祝',
|
// LXDH: 17335843642,
|
// BJNR: '今日在某小区查获私人赌博场所',
|
// SFDZ: '上饶市信州区万达华府小区',
|
// BJLX: '聚众赌博',
|
// MEMO: '人群聚集赌博'
|
// },
|
// {
|
// JJDWMC: '信州公安局派出所',
|
// JJYXM: '欧阳西门',
|
// BJSJ: '2022-12-12 12:12:12',
|
// BJRXM: '西门庆祝',
|
// LXDH: 17335843642,
|
// BJNR: '今日在某小区查获私人赌博场所',
|
// SFDZ: '上饶市信州区万达华府小区',
|
// BJLX: '聚众赌博',
|
// MEMO: '人群聚集赌博'
|
// },
|
// {
|
// JJDWMC: '信州公安局派出所',
|
// JJYXM: '欧阳西门',
|
// BJSJ: '2022-12-12 12:12:12',
|
// BJRXM: '西门庆祝',
|
// LXDH: 17335843642,
|
// BJNR: '今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
|
// SFDZ: '上饶市信州区万达华府小区上饶市信州区万达华府小区',
|
// BJLX: '聚众赌博',
|
// MEMO: '人群聚集赌博'
|
// }]
|
|
// // 计算页数
|
// this.alarmPageCount = Math.ceil(arr.length / this.alarmPageSize)
|
|
// // 加 index 序号
|
// this.policeSituationRealtimeAllArr = arr.map((item, index) => {
|
// return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB, position: item.ZDDWYZB ? '有' : '无' }
|
// })
|
|
// // 数据处理
|
// this.alarmDataHanlder(1)
|
// this.$emit('policeSituationChange')
|
},
|
|
/**
|
* 实时警情数据处理（滚动）
|
* @param {*} index
|
*/
|
alarmDataHanlder (index) {
|
this.policeSituationRealtimeArr = []
|
//计算序号
|
var start = (index - 1) * this.alarmPageSize
|
var end = index * this.alarmPageSize
|
// 获取第 index 页数据
|
this.policeSituationRealtimeAllArr.forEach((item, index) => {
|
if (index < Number(end) && index >= Number(start)) {
|
this.policeSituationRealtimeArr.push(item)
|
}
|
})
|
},
|
|
|
policeTypeChange () {
|
this.currentPage = 1
|
|
if (this.timetype == 0) {
|
|
this.getAlarmList({ type: this.timetype, time: this.dateFormat(this.currentWeekTime), current: this.currentPage })
|
|
} else if (this.timetype == 1) {
|
|
this.getAlarmList({ type: this.timetype, time: this.dateFormat(this.currentMonthTime), current: this.currentPage })
|
|
} else {
|
const date = this.currentTime.map(item => {
|
return this.dateFormat(item)
|
})
|
|
this.getAlarmList({ start: date[0], end: date[1], current: this.currentPage })
|
}
|
},
|
|
// 获取历史接警记录
|
getAlarmList (params) {
|
getAlarmList({ ...params, size: this.pagesize, jjdwbh: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id, bjlx: this.policeInforValue }).then(res => {
|
this.pagesCount = res.data.data.pages
|
|
this.policeSituationHistoryArr = []
|
|
if (res.data.data.records.length > 0) {
|
this.policeSituationHistoryArr = res.data.data.records.map((item, index) => {
|
const bjlxText = BjlxData.filter(i => item.BJLX == i.BJLX)[0].VALUE || ''
|
|
if (item.JJDWMC.indexOf('上饶市公安局') != -1) item.JJDWMC = item.JJDWMC.replace(/上饶市公安局/, '市局')
|
if (item.JJDWMC.indexOf('信州区分局') != -1) item.JJDWMC = item.JJDWMC.replace(/信州区分局/, '')
|
if (item.JJDWMC.indexOf('信州') != -1) item.JJDWMC = item.JJDWMC.replace(/信州/, '')
|
|
return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB, position: item.ZDDWYZB && item.ZDDWYZB != 0 ? '有' : '无', BJLX: bjlxText }
|
})
|
} else {
|
this.policeSituationHistoryArr = []
|
}
|
|
this.setTableHeight()
|
|
this.$emit('policeSituationChange')
|
})
|
|
// this.policeSituationHistoryArr = [{
|
// ZDDWXZB: 112,
|
// ZDDWYZB: 25,
|
// JJDWMC: '信州公安局派出所',
|
// JJYXM: '欧阳西门',
|
// BJSJ: '2022-12-12 12:12:12',
|
// BJRXM: '西门庆祝',
|
// LXDH: 17335843642,
|
// BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
|
// SFDZ: '上饶市信州区万达华府小区',
|
// BJLX: '聚众赌博',
|
// MEMO: '人群聚集赌博'
|
// },
|
// {
|
// JJDWMC: '信州公安局派出所',
|
// JJYXM: '欧阳西门',
|
// BJSJ: '2022-12-12 12:12:12',
|
// BJRXM: '西门庆祝',
|
// LXDH: 17335843642,
|
// BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
|
// SFDZ: '上饶市信州区万达华府小区',
|
// BJLX: '聚众赌博',
|
// MEMO: '人群聚集赌博'
|
// },
|
// {
|
// JJDWMC: '信州公安局派出所',
|
// JJYXM: '欧阳西门',
|
// BJSJ: '2022-12-12 12:12:12',
|
// BJRXM: '西门庆祝',
|
// LXDH: 17335843642,
|
// BJNR: '今日在某小区查获私人赌博场所',
|
// SFDZ: '上饶市信州区万达华府小区',
|
// BJLX: '聚众赌博',
|
// MEMO: '人群聚集赌博'
|
// },
|
// {
|
// JJDWMC: '信州公安局派出所',
|
// JJYXM: '欧阳西门',
|
// BJSJ: '2022-12-12 12:12:12',
|
// BJRXM: '西门庆祝',
|
// LXDH: 17335843642,
|
// BJNR: '今日在某小区查获私人赌博场所',
|
// SFDZ: '上饶市信州区万达华府小区',
|
// BJLX: '聚众赌博',
|
// MEMO: '人群聚集赌博'
|
// },
|
// {
|
// JJDWMC: '信州公安局派出所',
|
// JJYXM: '欧阳西门',
|
// BJSJ: '2022-12-12 12:12:12',
|
// BJRXM: '西门庆祝',
|
// LXDH: 17335843642,
|
// BJNR: '今日在某小区查获私人赌博场所',
|
// SFDZ: '上饶市信州区万达华府小区',
|
// BJLX: '聚众赌博',
|
// MEMO: '人群聚集赌博'
|
// },
|
// {
|
// JJDWMC: '信州公安局派出所',
|
// JJYXM: '欧阳西门',
|
// BJSJ: '2022-12-12 12:12:12',
|
// BJRXM: '西门庆祝',
|
// LXDH: 17335843642,
|
// BJNR: '今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
|
// SFDZ: '上饶市信州区万达华府小区上饶市信州区万达华府小区',
|
// BJLX: '聚众赌博',
|
// MEMO: '人群聚集赌博'
|
// },
|
// {
|
// JJDWMC: '信州公安局派出所',
|
// JJYXM: '欧阳西门',
|
// BJSJ: '2022-12-12 12:12:12',
|
// BJRXM: '西门庆祝',
|
// LXDH: 17335843642,
|
// BJNR: '今日在某小区查获私人赌博场所',
|
// SFDZ: '上饶市信州区万达华府小区',
|
// BJLX: '聚众赌博',
|
// MEMO: '人群聚集赌博'
|
// }]
|
|
// this.policeSituationHistoryArr = this.policeSituationHistoryArr.map((item, index) => {
|
// return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
|
// })
|
|
// this.setTableHeight()
|
},
|
|
// 周月选择
|
timeTabClick (type) {
|
this.timetype = type
|
|
this.currentPage = 1
|
|
if (type == 2) {
|
|
this.defaultDate()
|
|
const date = this.currentTime.map(item => {
|
return this.dateFormat(item)
|
})
|
|
this.getAlarmList({ start: date[0], end: date[1], current: this.currentPage })
|
|
} else {
|
|
this.currentWeekTime = new Date()
|
|
this.currentMonthTime = new Date()
|
|
this.getAlarmList({ type, time: this.dateFormat(new Date()), current: this.currentPage })
|
|
}
|
},
|
|
// 实时历史选择
|
async historyTabClick (type) {
|
console.log('historyTabClick')
|
this.historytype = type
|
|
this.timetype = 2
|
|
this.$emit('changePoliceSituationHistoryType', type)
|
|
const date = this.currentTime.map(item => {
|
return this.dateFormat(item)
|
})
|
|
if (alarmTiming != null) {
|
clearInterval(alarmTiming)
|
alarmTiming = null
|
}
|
|
if (type == 0) {
|
await this.getAnswerPolices()
|
|
alarmTiming = setInterval(() => {
|
this.getAnswerPolices()
|
}, 60000)
|
} else {
|
this.currentPage = 1
|
|
await this.getAlarmList({
|
start: date[0],
|
end: date[1],
|
current: this.currentPage
|
})
|
}
|
|
},
|
|
chooseRealData () {
|
return this.policeSituationRealtimeArr
|
},
|
|
chooseTimeDate () {
|
return this.policeSituationHistoryArr
|
},
|
|
// 列表行选择
|
handleSelectClick (item) {
|
this.$emit('policeSituationSiteClick', item)
|
},
|
|
// 点击定位或者显示弹窗
|
policeSituationClick (item) {
|
this.$EventBus.$emit('toPosition', {
|
layerName: 'policeSituationyLayers',
|
siteJd: Number(item.ZDDWXZB),
|
siteWd: Number(item.ZDDWYZB)
|
})
|
|
this.$store.commit('SET_DETAILSPOPUP', {
|
showBox: true,
|
showBtn: 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
|
)
|
)
|
]
|
})
|
}
|
},
|
|
destroyed () {
|
window.removeEventListener('resize', this.setTableHeight)
|
|
if (alarmTiming != null) {
|
clearInterval(alarmTiming)
|
alarmTiming = null
|
}
|
}
|
}
|
</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: 670px;
|
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: 520px;
|
height: 30px;
|
position: absolute;
|
top: 20px;
|
right: 130px;
|
display: flex;
|
align-items: center;
|
|
& > div {
|
margin: 0 5px;
|
flex: 1;
|
display: flex;
|
align-items: center;
|
}
|
}
|
|
.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 {
|
padding: 0 4px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.num {
|
width: 6%;
|
}
|
|
.receiving-alarm-unit {
|
width: 12.6%;
|
}
|
|
.receiving-alarm-people {
|
width: 7.6%;
|
}
|
|
.receiving-alarm-time {
|
width: 16%;
|
}
|
|
.call-people {
|
width: 7.6%;
|
}
|
|
.call-phone {
|
width: 10%;
|
}
|
|
.call-police-content {
|
width: 14%;
|
}
|
|
.incident-site {
|
width: 24%;
|
}
|
|
.call-police-type {
|
width: 8%;
|
}
|
|
.have-position {
|
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;
|
}
|
}
|
}
|
|
.current-table-body {
|
margin: 12px;
|
margin-top: 10px;
|
margin-bottom: 14px;
|
width: calc(100% - 24px);
|
height: calc(100% - 80px);
|
|
.pages {
|
height: 40px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
|
.border-svg {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 1;
|
}
|
}
|
</style>
|
