| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2022-08-18 16:18:17 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2023-02-24 14:26:02 |
| | | * @LastEditTime: 2023-02-24 17:28:24 |
| | | * @FilePath: \srs-police-affairs\src\views\policeInfor\index.vue |
| | | * @Description: 辖区管理 |
| | | * |
| | |
| | | |
| | | <template> |
| | | <div class="police-page container"> |
| | | <div v-show="boxShow" class="container-content"> |
| | | <div v-show="boxShow" class="container-content" ref="containerContent"> |
| | | |
| | | <div class="nav-tab" ref="navTabBox"> |
| | | <div class="nav" :class="navType == 0 ? 'choosed' : ''" @click="navClick" data-type="0">实时警情</div> |
| | | <div class="nav" :class="navType == 1 ? 'choosed' : ''" @click="navClick" data-type="1">历史警情</div> |
| | | <div class="nav" :class="navType == 0 ? 'choosed' : ''" @click="navClick(0)">实时警情</div> |
| | | <div class="nav" :class="navType == 1 ? 'choosed' : ''" @click="navClick(1)">历史警情</div> |
| | | </div> |
| | | |
| | | <div class="police-info" ref="policeTableBox"> |
| | | <el-table :data="policeInforData" style="width: 100%" :height="currentTableHeight" |
| | | <div class="time-select" v-show="navType == 1" ref="timeSelect"> |
| | | <el-date-picker :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 v-if="navType == 0" class="police-info"> |
| | | <el-table :data="realPoliceInforData" style="width: 100%" :height="currentTableHeight" |
| | | :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }" |
| | | :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" :row-class-name="tableRowClassName" |
| | | @row-click="clickData"> |
| | | <el-table-column prop="JJDWMC" :show-overflow-tooltip="true" label="接警单位" |
| | | min-width="34%"></el-table-column> |
| | | <el-table-column label="报警时间" min-width="26%"> |
| | | <template slot-scope="scope"> |
| | | <span>{{ scope.row.BJSJ.substring(0, 10) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="JJYXM" :show-overflow-tooltip="true" label="接警员" |
| | | min-width="20%"></el-table-column> |
| | | <el-table-column prop="BJRXM" :show-overflow-tooltip="true" label="报警人" |
| | | min-width="20%"></el-table-column> |
| | | </el-table> |
| | | </div> |
| | | |
| | | |
| | | <div v-else class="police-info"> |
| | | <el-table :data="historyPoliceInforData" style="width: 100%" :height="currentTableHeight" |
| | | :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }" |
| | | :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" :row-class-name="tableRowClassName" |
| | | @row-click="clickData"> |
| | |
| | | </div> |
| | | |
| | | </div> |
| | | |
| | | <el-dialog title="报警信息" :modal="true" :visible.sync="policeSituationVisible" :append-to-body="true" |
| | | :before-close="policeSituationBeforeClose" :close-on-click-modal="true" class="policeSituation-details-box"> |
| | | <div class="box"> |
| | | <div class="item"> |
| | | <div>接警单位编号:</div> |
| | | <div>{{ policeSituationDetailObj.JJDWBH }}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div>接警单位名称:</div> |
| | | <div>{{ policeSituationDetailObj.JJDWMC }}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div>接警单编号:</div> |
| | | <div>{{ policeSituationDetailObj.JJDBH }}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div>接警员编号:</div> |
| | | <div>{{ policeSituationDetailObj.JJYBH }}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div>接警员姓名:</div> |
| | | <div>{{ policeSituationDetailObj.JJYXM }}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div>报警时间:</div> |
| | | <div>{{ policeSituationDetailObj.BJSJ }}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div>报警电话:</div> |
| | | <div>{{ policeSituationDetailObj.LXDH }}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div>报警人姓名:</div> |
| | | <div>{{ policeSituationDetailObj.BJRXM }}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div>报警类别:</div> |
| | | <div>{{ policeSituationDetailObj.BJLB }}</div> |
| | | </div> |
| | | |
| | | <div class="item"> |
| | | <div>报警类型:</div> |
| | | <div>{{ policeSituationDetailObj.BJLX }}</div> |
| | | </div> |
| | | |
| | | <div class="dialog-content"> |
| | | <div>事发地址:</div> |
| | | <div>{{ policeSituationDetailObj.SFDZ }}</div> |
| | | </div> |
| | | |
| | | <div class="dialog-content"> |
| | | <div>报警内容:</div> |
| | | <div>{{ policeSituationDetailObj.BJNR }}</div> |
| | | </div> |
| | | |
| | | <div class="dialog-content"> |
| | | <div>备注:</div> |
| | | <div>{{ policeSituationDetailObj.MEMO }}</div> |
| | | </div> |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | let policeInforSiteLayer = null |
| | | let timer = [] |
| | | |
| | | import { getAnswerPolices, getAlarmList } from "@/api/home/index.js" |
| | | |
| | | export default { |
| | |
| | | |
| | | data () { |
| | | return { |
| | | policeInforData: [], |
| | | realPoliceInforData: [], // 实时 |
| | | historyPoliceInforData: [], |
| | | boxShow: false, |
| | | pages: { |
| | | total: 0, |
| | | size: 15, |
| | | current: 1 |
| | | }, |
| | | |
| | | navType: 0, |
| | | currentTableHeight: 0 |
| | | currentTableHeight: 0, |
| | | 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]) |
| | | } |
| | | }] |
| | | }, |
| | | |
| | | policeSituationDetailObj: {}, |
| | | policeSituationVisible: false, |
| | | |
| | | } |
| | | }, |
| | | created () { |
| | | this.defaultDate() |
| | | }, |
| | | mounted () { |
| | | this.$parent.$parent.resize('400px', true) |
| | | |
| | | this.$nextTick(() => { |
| | | this.getAnswerPolices() |
| | | this.setTableHeight() |
| | | }) |
| | | |
| | | window.addEventListener('resize', this.setTableHeight) |
| | | }, |
| | | methods: { |
| | | // 设置默认时间 |
| | | defaultDate () { |
| | | var current = new Date() |
| | | |
| | | var seven = new Date(current.getTime() - 7 * 24 * 60 * 60 * 1000) |
| | | |
| | | this.currentTime = [seven, current] //将值设置给插件绑定的数据 |
| | | }, |
| | | |
| | | datePickerChange (e) { |
| | | |
| | | this.pages.current = 1 |
| | | |
| | | const date = e.map(item => { |
| | | return this.dateFormat(item) |
| | | }) |
| | | |
| | | this.getAlarmList({ start: date[0], end: date[1], current: this.pages.current }) |
| | | |
| | | }, |
| | | |
| | | /** |
| | | * @description: 获取当前日期 |
| | | * @param {*} dateData |
| | | * @return {*} |
| | | */ |
| | | dateFormat (dateData) { |
| | | var date = new Date(dateData) |
| | | var y = date.getFullYear() |
| | | var m = date.getMonth() + 1 |
| | | m = m < 10 ? ('0' + m) : m |
| | | var d = date.getDate() |
| | | d = d < 10 ? ('0' + d) : d |
| | | const time = y + '-' + m + '-' + d |
| | | return time |
| | | }, |
| | | |
| | | // 获取实时接警记录 |
| | | getAnswerPolices () { |
| | | getAnswerPolices({ deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => { |
| | | this.policeSituationRealtimeArr = [] |
| | | getAnswerPolices({ deptId: this.userInfo.dept_id }).then(res => { |
| | | this.realPoliceInforData = [] |
| | | |
| | | if (res.data.result.length > 0) { |
| | | this.policeSituationRealtimeArr = res.data.result.map((item, index) => { |
| | | this.realPoliceInforData = res.data.result.map((item, index) => { |
| | | return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB } |
| | | }) |
| | | } else { |
| | | this.policeSituationRealtimeArr = [] |
| | | this.realPoliceInforData = [] |
| | | } |
| | | |
| | | this.$emit('policeSituationChange') |
| | | this.addPoliceInforSiteLayer(this.realPoliceInforData) |
| | | }) |
| | | |
| | | // this.policeSituationRealtimeArr = [{ |
| | | // this.realPoliceInforData = [{ |
| | | // ZDDWXZB: 117.97, |
| | | // ZDDWYZB: 28.45, |
| | | // JJDWMC: '信州公安局派出所', |
| | |
| | | // MEMO: '人群聚集赌博' |
| | | // }] |
| | | |
| | | // this.policeSituationRealtimeArr = this.policeSituationRealtimeArr.map((item, index) => { |
| | | // this.realPoliceInforData = this.realPoliceInforData.map((item, index) => { |
| | | // return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB } |
| | | // }) |
| | | |
| | | // this.$emit('policeSituationChange') |
| | | // this.addPoliceInforSiteLayer(this.realPoliceInforData) |
| | | }, |
| | | |
| | | // 获取历史接警记录 |
| | | 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 = [] |
| | | getAlarmList({ ...params, size: this.pages.size, jjdwbh: this.userInfo.dept_id }).then(res => { |
| | | this.pages.total = 0 |
| | | this.historyPoliceInforData = [] |
| | | |
| | | if (res.data.data.records.length > 0) { |
| | | this.policeSituationHistoryArr = res.data.data.records.map((item, index) => { |
| | | this.pages.total = res.data.data.pages |
| | | this.historyPoliceInforData = res.data.data.records.map((item, index) => { |
| | | return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB } |
| | | }) |
| | | } else { |
| | | this.policeSituationHistoryArr = [] |
| | | this.pages.total = 0 |
| | | this.historyPoliceInforData = [] |
| | | } |
| | | |
| | | this.setTableHeight() |
| | | |
| | | this.$emit('policeSituationChange') |
| | | this.addPoliceInforSiteLayer(this.historyPoliceInforData) |
| | | }) |
| | | |
| | | // this.policeSituationHistoryArr = [{ |
| | | // this.historyPoliceInforData = [{ |
| | | // ZDDWXZB: 112, |
| | | // ZDDWYZB: 25, |
| | | // JJDWMC: '信州公安局派出所', |
| | |
| | | // MEMO: '人群聚集赌博' |
| | | // }] |
| | | |
| | | // this.policeSituationHistoryArr = this.policeSituationHistoryArr.map((item, index) => { |
| | | // this.historyPoliceInforData = this.historyPoliceInforData.map((item, index) => { |
| | | // return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB } |
| | | // }) |
| | | |
| | | // this.setTableHeight() |
| | | // this.addPoliceInforSiteLayer(this.historyPoliceInforData) |
| | | }, |
| | | |
| | | addPoliceInforSiteLayer (data) { |
| | | this.clearLayer() |
| | | |
| | | data.forEach((item, index) => { |
| | | |
| | | if (item.lng && item.lng != undefined && item.lng != '') { |
| | | let center = new global.DC.Position(Number(item.lng), Number(item.lat)) |
| | | let point = new global.DC.PointPrimitive(center) |
| | | |
| | | let num = 0 |
| | | |
| | | timer[index] = setInterval(() => { |
| | | num++ |
| | | if (num >= 10) { |
| | | num = 0 |
| | | } |
| | | |
| | | point.setStyle({ |
| | | outlineColor: global.DC.Color.RED.withAlpha(0.5),//边框颜色 |
| | | outlineWidth: num,//边框大小, |
| | | color: global.DC.Color.RED |
| | | }) |
| | | }, 100) |
| | | |
| | | point.attrParams = item |
| | | point.on(global.DC.MouseEventType.CLICK, this.siteClick) |
| | | policeInforSiteLayer.addOverlay(point) |
| | | } |
| | | }) |
| | | }, |
| | | |
| | | /** |
| | | * @description: 警情闪烁点的点击事件 |
| | | * @param {*} e |
| | | * @return {*} |
| | | */ |
| | | siteClick (e) { |
| | | this.$store.commit('SET_DETAILSPOPUP', { |
| | | showBox: true, |
| | | showBtn: false |
| | | }) |
| | | |
| | | this.$store.commit('SET_DATAPOPUP', e.overlay.attrParams) |
| | | var popup = new global.DC.DivForms(global.viewer, { |
| | | domId: 'divFormsDomBox', |
| | | position: [ |
| | | global.DC.Transform.transformWGS84ToCartesian( |
| | | new global.DC.Position( |
| | | Number(e.overlay.attrParams.lng), |
| | | Number(e.overlay.attrParams.lat), |
| | | 0 |
| | | ) |
| | | ) |
| | | ] |
| | | }) |
| | | }, |
| | | |
| | | /** |
| | | * @description: 清除图层 |
| | | * @return {*} |
| | | */ |
| | | clearLayer () { |
| | | if (policeInforSiteLayer && policeInforSiteLayer != null && policeInforSiteLayer != undefined) { |
| | | policeInforSiteLayer.clear() |
| | | policeInforSiteLayer.remove() |
| | | policeInforSiteLayer = null |
| | | } |
| | | |
| | | policeInforSiteLayer = new global.DC.PrimitiveLayer('policeInforSiteLayer') |
| | | global.viewer.addLayer(policeInforSiteLayer) |
| | | }, |
| | | |
| | | setTableHeight () { |
| | | this.currentTableHeight = this.$refs.policeTableBox.offsetHeight - this.$refs.ElPagination.offsetHeight |
| | | |
| | | if (this.navType == 0) { |
| | | this.currentTableHeight = this.$refs.containerContent.offsetHeight - this.$refs.navTabBox.offsetHeight |
| | | } else { |
| | | this.currentTableHeight = this.$refs.containerContent.offsetHeight - this.$refs.navTabBox.offsetHeight - this.$refs.timeSelect.offsetHeight - this.$refs.ElPagination.offsetHeight |
| | | } |
| | | |
| | | }, |
| | | |
| | | /** |
| | | * @description: 实时历史警情切换 |
| | | * @param {*} e |
| | | * @param {*} type |
| | | * @return {*} |
| | | */ |
| | | navClick (e) { |
| | | this.navType = e.target.dataset.type |
| | | async navClick (type) { |
| | | this.navType = type |
| | | |
| | | const date = this.currentTime.map(item => { |
| | | return this.dateFormat(item) |
| | | }) |
| | | |
| | | if (this.navType == 0) { |
| | | await this.getAnswerPolices() |
| | | } else { |
| | | this.pages.current = 1 |
| | | |
| | | await this.getAlarmList({ |
| | | start: date[0], |
| | | end: date[1], |
| | | current: this.pages.current |
| | | }) |
| | | } |
| | | |
| | | this.$nextTick(() => { |
| | | this.setTableHeight() |
| | | }) |
| | | }, |
| | | |
| | | /** |
| | | * @description: 警情列表点击事件 |
| | | * @param {*} item |
| | | * @return {*} |
| | | */ |
| | | clickData (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', { |
| | | showBox: true, |
| | | showBtn: false |
| | | }) |
| | | |
| | | 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.policeSituationDetailObj = item |
| | | this.policeSituationVisible = true |
| | | } |
| | | }, |
| | | |
| | | |
| | | // 大小重置 |
| | | boxResize (val) { |
| | |
| | | |
| | | destroyed () { |
| | | window.removeEventListener('resize', this.setTableHeight) |
| | | |
| | | policeInforSiteLayer != null && policeInforSiteLayer.remove() |
| | | |
| | | this.$store.commit('SET_DETAILSPOPUP', { |
| | | showBox: false, |
| | | showBtn: false |
| | | }) |
| | | |
| | | for (let i = 0; i < timer.length; i++) { |
| | | clearInterval(timer[i]) |
| | | } |
| | | |
| | | this.$parent.$parent.resize('0px') |
| | | } |
| | |
| | | |
| | | .nav { |
| | | flex: 1; |
| | | border-bottom: 1px solid #33566c; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .choosed { |
| | | // background-color: rgba(0, 92, 169, 1); |
| | | background-color: #3d5ad5; |
| | | } |
| | | } |
| | | |
| | | .police-info { |
| | | height: calc(100% - 40px); |
| | | |
| | | .pages { |
| | | height: 40px; |
| | | line-height: 40px; |
| | | } |
| | | .time-select { |
| | | margin: 0; |
| | | padding: 5px; |
| | | } |
| | | } |
| | | } |