forked from srs-police-affairs
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;
