From ecc1f3b4ca5e9d29376f8cc128280f519a8b6cd8 Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Mon, 09 Jan 2023 17:28:45 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-affairs
---
src/views/home/components/bottomContainer.vue | 351 +++++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 274 insertions(+), 77 deletions(-)
diff --git a/src/views/home/components/bottomContainer.vue b/src/views/home/components/bottomContainer.vue
index 2551097..6922e3c 100644
--- a/src/views/home/components/bottomContainer.vue
+++ b/src/views/home/components/bottomContainer.vue
@@ -8,18 +8,9 @@
<span class="beforetime" :class="{ choosed: timetype == 1 }" @click="timeTabClick(1)">月</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 :clearable="false" @change="datePickerChange" v-show="timetype == 0"
- v-model="currentWeekTime" type="week" format="yyyy 第 WW 周" :picker-options="pickerOptions"
- placeholder="选择周">
- </el-date-picker>
-
- <el-date-picker :clearable="false" @change="datePickerChange" v-show="timetype == 1"
- v-model="currentMonthTime" type="month" :picker-options="pickerOptions" placeholder="选择月">
- </el-date-picker>
+ <el-date-picker :clearable="false" v-model="currentTime" type="daterange" align="right"
+ unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
+ @change="datePickerChange" :picker-options="pickerOptions"></el-date-picker>
</div>
<div class="history-tab">
<span class="beforetime" :class="{ choosed: historytype == 0 }"
@@ -29,8 +20,8 @@
</div>
</div>
- <!-- v-if="historytype == 0" -->
- <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>
@@ -46,11 +37,11 @@
</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">
+ <li v-for="(item, index) in policeSituationRealtimeArr" :key="index"
+ :data-obj="JSON.stringify(item)" class="row">
<span class="num" v-text="index"></span>
<span class="receiving-alarm-unit" v-text="item.JJDWMC"></span>
<span class="receiving-alarm-people" v-text="item.JJYXM"></span>
@@ -71,28 +62,40 @@
</div>
</div>
- <!-- <div class="body" v-else>
- <div class="list-box">
- <el-table :data="monitoringList" style="width: 100%"
- :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 prop="index" label="序号" min-width="35%"></el-table-column>
- <el-table-column prop="JJDWMC" label="接警单位" min-width="35%"></el-table-column>
- <el-table-column prop="JJYXM" label="接警员" min-width="35%"></el-table-column>
- <el-table-column :title="item.JJSJ" :prop="JJSJ.substring(0, 10)" label="接警时间" min-width="35%"></el-table-column>
- <el-table-column prop="BJRXM" label="报警人" min-width="35%"></el-table-column>
- <el-table-column prop="LXDH" label="联系电话" min-width="35%"></el-table-column>
- <el-table-column prop="BJNR" label="报警内容" min-width="35%"></el-table-column>
- <el-table-column prop="SFDZ" label="事发地址" min-width="35%"></el-table-column>
- <el-table-column prop="BJLX" label="报警类型" min-width="35%"></el-table-column>
- <el-table-column prop="MEMO" label="备注" min-width="35%"></el-table-column>
- </el-table>
- </div>
- <div class="pages">
+ <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 prop="index" label="序号" min-width="6%"></el-table-column>
+ <el-table-column prop="JJDWMC" label="接警单位" min-width="12.6%"></el-table-column>
+ <el-table-column prop="JJYXM" label="接警员" min-width="7.6%"></el-table-column>
+ <el-table-column label="接警时间" min-width="9.6%">
+ <template slot-scope="scope">
+ <span :title="scope.row.JJSJ">{{ scope.row.JJSJ.substring(0, 10) }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="BJRXM" label="报警人" min-width="7.6%"></el-table-column>
+ <el-table-column prop="LXDH" label="联系电话" min-width="10%"></el-table-column>
+ <el-table-column label="报警内容" min-width="12%">
+ <template slot-scope="scope">
+ <span :title="scope.row.BJNR">{{ scope.row.BJNR }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column label="事发地址" min-width="12%">
+ <template slot-scope="scope">
+ <span :title="scope.row.SFDZ">{{ scope.row.SFDZ }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="BJLX" label="报警类型" min-width="8%"></el-table-column>
+ <el-table-column prop="MEMO" label="备注" min-width="12%"></el-table-column>
+ </el-table>
+
+ <div class="pages" ref="ElPagination" v-show="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>
</div>
<svg class="border-svg">
@@ -141,12 +144,46 @@
// 历史
policeSituationHistoryArr: [],
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,
+ currentPage: 1,
+ pagesCount: 1,
+ // table高度
+ currentTableHeight: 0,
}
},
@@ -156,35 +193,25 @@
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.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 () {
@@ -194,12 +221,50 @@
},
methods: {
+ // 获取table高度
+ setTableHeight () {
+ this.$nextTick(() => {
+ if (this.$refs.ElPagination) {
+ if (this.$refs.ElTableBox) {
+ this.currentTableHeight = this.$refs.ElTableBox.offsetHeight - this.$refs.ElPagination.offsetHeight
+ }
+ } else {
+ if (this.$refs.ElTableBox) {
+ this.currentTableHeight = this.$refs.ElTableBox.offsetHeight
+ }
+ }
+ })
+ },
+
+ // table行点击事件
+ rowClick (row) {
+ this.policeSituationClick(row)
+ },
+
+ // 分页选择事件
+ handleCurrentChange: function (currentPage) {
+ this.currentPage = currentPage
+
+ this.getVideoList(this.currentPage, this.pagesize)
+ },
+
+ // 设置默认时间
+ 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)
+ const date = e.map(item => {
+ return this.dateFormat(item)
+ })
- this.getAlarmList(this.timetype, dateStr)
+ this.getAlarmList({ start: date[0], end: date[1] })
},
// 获取当前日期
@@ -217,9 +282,15 @@
// 获取实时接警记录
getAnswerPolices () {
getAnswerPolices().then(res => {
- this.policeSituationRealtimeArr = res.data.result.map((item, index) => {
- return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
- })
+ 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.policeSituationRealtimeArr = [{
@@ -308,25 +379,111 @@
},
// 获取历史接警记录
- getAlarmList (type, time) {
- getAlarmList(type, time).then(res => {
- this.policeSituationHistoryArr = res.data.data.records.map((item, index) => {
- return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
- })
+ getAlarmList (params) {
+ getAlarmList({ ...params, count: this.pagesize }).then(res => {
+ this.policeSituationHistoryArr = []
+
+ if (this.res.data.data.records > 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.policeSituationHistoryArr = [{
+ // 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.policeSituationHistoryArr = this.policeSituationHistoryArr.map((item, index) => {
+ // return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
+ // })
},
// 周月选择
timeTabClick (type) {
this.timetype = type
- if (type == 0) {
- this.getAlarmList(type, this.dateFormat(this.currentWeekTime))
- } else {
- this.currentMonthTime == '' ? this.currentMonthTime = new Date() : ''
+ this.currentPage = 1
- this.getAlarmList(type, this.dateFormat(this.currentMonthTime))
- }
+ this.getAlarmList({ type, time: this.dateFormat(new Date()), page: this.currentPage })
this.$emit('policeSituationChange')
},
@@ -335,14 +492,25 @@
historyTabClick (type) {
this.historytype = type
+ this.setTableHeight()
+
this.timetype = 0
- this.currentWeekTime = new Date()
+ const date = this.currentTime.map(item => {
+ return this.dateFormat(item)
+ })
if (type == 0) {
this.getAnswerPolices()
+
} else {
- this.getAlarmList(this.timetype, this.dateFormat(this.currentWeekTime))
+ this.currentPage = 1
+
+ this.getAlarmList({
+ start: date[0],
+ end: date[1],
+ page: this.currentPage
+ })
}
this.$emit('changePoliceSituationHistoryType', type)
@@ -400,6 +568,10 @@
this.$emit('policeSituationSiteClick', item)
}
}
+ },
+
+ destroyed () {
+ window.removeEventListener('resize', this.setTableHeight)
}
}
</script>
@@ -597,6 +769,31 @@
}
}
+ .current-table-body {
+ margin: 12px;
+ margin-top: 10px;
+ margin-bottom: 14px;
+ width: calc(100% - 24px);
+ height: calc(100% - 80px);
+
+ :deep(.el-table__body-wrapper) {
+ td {
+ .cell {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ }
+ }
+
+ .pages {
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+
.border-svg {
position: absolute;
--
Gitblit v1.9.3