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-02-24 14:35:04 * @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,36 +16,36 @@ <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" @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="receiving-alarm-time">报警时间</span> <span class="call-people">报警人</span> <span class="call-phone">联系电话</span> <span class="call-police-content">报警内容</span> @@ -45,124 +55,176 @@ </li> </ul> <vue-seamless-scroll v-if="currentUseDataLength > 0" :data="listCurrentData" class="warp" :class-option="classOption"> <vue-seamless-scroll 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> <li v-for="(item, index) in policeSituationRealtimeArr" :key="index" :data-obj="JSON.stringify(item)" class="row"> <span class="num" v-text="item.index"></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="receiving-alarm-time" :title="item.BJSJ" v-text="item.BJSJ.substring(0, 10)"></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="incident-site" :title="item.SFDZ" 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 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="rowClick"> <el-table-column :show-overflow-tooltip="true" prop="index" label="序号" min-width="6%"></el-table-column> <el-table-column :show-overflow-tooltip="true" prop="JJDWMC" label="接警单位" min-width="12.6%"></el-table-column> <el-table-column :show-overflow-tooltip="true" prop="JJYXM" label="接警员" min-width="7.6%"></el-table-column> <el-table-column label="报警时间" min-width="9.6%"> <template slot-scope="scope"> <span>{{ scope.row.BJSJ.substring(0, 10) }}</span> </template> </el-table-column> <el-table-column :show-overflow-tooltip="true" prop="BJRXM" label="报警人" min-width="7.6%"></el-table-column> <el-table-column :show-overflow-tooltip="true" prop="LXDH" label="联系电话" min-width="10%"></el-table-column> <el-table-column :show-overflow-tooltip="true" prop="BJNR" label="报警内容" min-width="12%"></el-table-column> <el-table-column :show-overflow-tooltip="true" prop="SFDZ" label="事发地址" min-width="12%"></el-table-column> <el-table-column :show-overflow-tooltip="true" prop="BJLX" label="报警类型" min-width="8%"></el-table-column> <el-table-column :show-overflow-tooltip="true" prop="MEMO" label="备注" min-width="12%"></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" export default { inject: ["getWidth", 'userInfo'], data () { return { timetype: 0, timetype: 2, historytype: 0, // 实时 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 } } }, 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 +234,85 @@ }, 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 } }) }, // table行点击事件 rowClick (row) { this.policeSituationClick(row) }, // 分页选择事件 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 }) } }, // 获取当前日期 @@ -194,135 +329,281 @@ // 获取实时接警记录 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.result.length > 0) { this.policeSituationRealtimeArr = res.data.result.map((item, index) => { return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB } }) } else { this.policeSituationRealtimeArr = [] } this.$emit('policeSituationChange') }) // this.policeSituationRealtimeArr = [{ // 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.policeSituationRealtimeArr = this.policeSituationRealtimeArr.map((item, index) => { // return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: 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.$emit('policeSituationChange') }, // 获取历史接警记录 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) => { return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB } }) } 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) { 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 }, @@ -350,7 +631,11 @@ siteWd: Number(item.ZDDWYZB) }) this.$store.commit('SET_DETAILSPOPUP', true) this.$store.commit('SET_DETAILSPOPUP', { showBox: true, showBtn: true }) this.$store.commit('SET_DATAPOPUP', item) var popup = new global.DC.DivForms(global.viewer, { @@ -368,6 +653,15 @@ } else { this.$emit('policeSituationSiteClick', item) } } }, destroyed () { window.removeEventListener('resize', this.setTableHeight) if (alarmTiming != null) { clearInterval(alarmTiming) alarmTiming = null } } } @@ -507,6 +801,7 @@ cursor: pointer; span { padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -517,23 +812,23 @@ } .receiving-alarm-unit { width: 12%; width: 12.6%; } .receiving-alarm-people { width: 8%; width: 7.6%; } .receiving-alarm-time { width: 10%; width: 9.6%; } .call-people { width: 8%; width: 7.6%; } .call-phone { width: 8%; width: 10%; } .call-police-content { @@ -565,6 +860,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;
