From a1c2fecb75c9c8fef3345dee6d071faae6d3dccd Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 28 Feb 2023 14:19:37 +0800
Subject: [PATCH] 模型加载的更改

---
 src/views/home/components/bottomContainer.vue |  669 ++++++++++++++++++++++++++++++++++++++++---------------
 1 files changed, 489 insertions(+), 180 deletions(-)

diff --git a/src/views/home/components/bottomContainer.vue b/src/views/home/components/bottomContainer.vue
index 9034000..c09000a 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-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;

--
Gitblit v1.9.3