From 85fb13abbeadc1765d2c0056ba99c6c19aa35dfd Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sun, 09 Apr 2023 03:44:49 +0800
Subject: [PATCH] 电子沙盘的调整
---
src/views/home/components/bottomContainer.vue | 812 +++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 581 insertions(+), 231 deletions(-)
diff --git a/src/views/home/components/bottomContainer.vue b/src/views/home/components/bottomContainer.vue
index 9034000..b43171d 100644
--- a/src/views/home/components/bottomContainer.vue
+++ b/src/views/home/components/bottomContainer.vue
@@ -1,3 +1,13 @@
+<!--
+ * @Author: shuishen 1109946754@qq.com
+ * @Date: 2023-01-13 15:52:59
+ * @LastEditors: shuishen 1109946754@qq.com
+ * @LastEditTime: 2023-04-06 18:10:22
+ * @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">
@@ -6,163 +16,219 @@
<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">
- <!-- <el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels range-separator="至"
- start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> -->
+ <el-date-picker v-show="timetype == 0" v-model="currentWeekTime" @change="datePickerChange" type="week"
+ align="center" format="yyyy 第 WW 周" placeholder="选择周"
+ popper-class="date-week-style"></el-date-picker>
+ <el-date-picker v-show="timetype == 1" v-model="currentMonthTime" @change="datePickerChange"
+ type="month" align="center" placeholder="选择月" popper-class="date-mouth-style"></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>
+ <el-date-picker v-show="timetype == 2" :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 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>
+ <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)">
+ <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-people">接警员</span>
- <span class="receiving-alarm-time">接警时间</span>
- <span class="call-people">报警人</span>
- <span class="call-phone">联系电话</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="currentUseDataLength > 0" :data="listCurrentData" class="warp"
+ <!-- <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">
- <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>
+ <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>
- <div class="warp no-data" v-else>
- 暂无数据
+ <!-- </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,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>
+ <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>
- <stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
+ <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,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>
+ <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">
- </animate>
+ <animate attributeName="stroke-dasharray" from="0, 3220" to="3220, 0" dur="8s" repeatCount="indefinite" />
</use>
</svg>
</div>
</template>
<script>
-import vueSeamlessScroll from 'vue-seamless-scroll'
-import historyArr from '@/assets/data/policeSituationArr/historyArr.js'
+let alarmTiming = null
-import { getCallPolices, getAnswerPolices, getAlarmList } from "@/api/home/index.js"
+// 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 {
- timetype: 0,
+ alarmPageCount: 1,
+ alarmPageSize: 6,
+ timetype: 2,
historytype: 0,
// 实时
+ policeSituationRealtimeAllArr: [],
policeSituationRealtimeArr: [],
// 历史
policeSituationHistoryArr: [],
- policeSituationHistorySaveArr: [],
eventTime: '',
+ // 当前选择周时间
currentWeekTime: '',
+ // 当前选择月时间
currentMonthTime: '',
- pickerOptions: {}, // 日期设置对象
+ // 当前选择自定义时间
+ 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: ''
}
},
- 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
- }
- }
- },
+ // components: {
+ // vueSeamlessScroll
+ // },
created () {
- this.getAnswerPolices()
+ 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 () {
@@ -172,12 +238,80 @@
},
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
- const dateStr = this.dateFormat(e)
+ this.currentPage = 1
- this.getAlarmList(this.timetype, dateStr)
+ 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 })
+
+ }
},
// 获取当前日期
@@ -192,182 +326,379 @@
return time
},
+ // 走马灯改变事件
+ changeAlarm (index) {
+ index = index + 1
+ // 改变数据
+ this.alarmDataHanlder(index)
+ },
+
// 获取实时接警记录
getAnswerPolices () {
- // getAnswerPolices().then(res => {
- // this.policeSituationRealtimeArr = res.data.result
+
+ 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.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: '人群聚集赌博'
- }]
+ // // 数据处理
+ // 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)
+ }
+ })
},
// 获取历史接警记录
- getAlarmList (type, time) {
- getAlarmList(type, time).then(res => {
- this.policeSituationHistoryArr = res.data.data.records
+ getAlarmList (params) {
+ getAlarmList({ ...params, size: this.pagesize, jjdwbh: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).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
- if (type == 0) {
- this.getAlarmList(type, this.dateFormat(this.currentWeekTime))
+ 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.currentMonthTime == '' ? this.currentMonthTime = new Date() : ''
- this.getAlarmList(type, this.dateFormat(this.currentMonthTime))
+ this.currentWeekTime = new Date()
+
+ this.currentMonthTime = new Date()
+
+ this.getAlarmList({ type, time: this.dateFormat(new Date()), current: this.currentPage })
+
}
-
- this.$emit('changePoliceSituationTimeType', type)
- this.$emit('policeSituationChange')
},
// 实时历史选择
- historyTabClick (type) {
+ async historyTabClick (type) {
+ console.log('historyTabClick')
this.historytype = type
- this.currentWeekTime = new Date()
-
- if (type == 0) {
- this.getAnswerPolices()
- } else {
- this.getAlarmList(type, this.dateFormat(this.currentWeekTime))
- }
+ this.timetype = 2
this.$emit('changePoliceSituationHistoryType', type)
- this.$emit('policeSituationChange')
+
+ 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
+ })
+ }
+
},
- chooseWeekTimeDate () {
- return this.policeSituationHistoryArr
+ chooseRealData () {
+ return this.policeSituationRealtimeArr
},
- chooseMouthTimeDate () {
+ chooseTimeDate () {
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)
+ handleSelectClick (item) {
+ this.$emit('policeSituationSiteClick', item)
},
// 点击定位或者显示弹窗
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)
+ console.log(item, 959999)
- 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
- )
+ 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
)
- ]
- })
- } else {
- this.$emit('policeSituationSiteClick', item)
- }
+ )
+ ]
+ })
+ }
+ },
+
+ destroyed () {
+ window.removeEventListener('resize', this.setTableHeight)
+
+ if (alarmTiming != null) {
+ clearInterval(alarmTiming)
+ alarmTiming = null
}
}
}
@@ -507,6 +838,7 @@
cursor: pointer;
span {
+ padding: 0 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -517,34 +849,38 @@
}
.receiving-alarm-unit {
- width: 12%;
+ width: 12.6%;
}
.receiving-alarm-people {
- width: 8%;
+ width: 7.6%;
}
.receiving-alarm-time {
- width: 10%;
+ width: 16%;
}
.call-people {
- width: 8%;
+ width: 7.6%;
}
.call-phone {
- width: 8%;
+ width: 10%;
}
.call-police-content {
- width: 12%;
+ width: 14%;
}
.incident-site {
- width: 12%;
+ width: 24%;
}
.call-police-type {
+ width: 8%;
+ }
+
+ .have-position {
width: 8%;
}
@@ -565,6 +901,20 @@
}
}
+ .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;
--
Gitblit v1.9.3