| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2022-08-18 16:18:17 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2023-04-27 20:03:16 |
| | | * @LastEditTime: 2023-05-06 11:10:51 |
| | | * @FilePath: \srs-police-affairs\src\views\policeInfor\index.vue |
| | | * @Description: 辖区管理 |
| | | * |
| | |
| | | <template> |
| | | <div class="police-page container"> |
| | | <div v-show="boxShow" class="container-content" ref="containerContent"> |
| | | |
| | | <div class="nav-tab" ref="navTabBox"> |
| | | <div class="nav" :class="navType == 0 ? 'choosed' : ''" @click="navClick(0)">实时警情</div> |
| | | <div class="nav" :class="navType == 1 ? 'choosed' : ''" @click="navClick(1)">历史警情</div> |
| | | <div class="time-select" 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" |
| | | ></el-date-picker> |
| | | </div> |
| | | |
| | | <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" |
| | | 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" |
| | | <div 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', 'cursor': 'default' }" |
| | | :row-class-name="tableRowClassName" class="police-infor-table" @cell-click="siteClick" |
| | | @cell-mouse-enter="tableEnter" @cell-mouse-leave="tabelLeave"> |
| | | <template slot="empty"> |
| | | <div>{{ realEmptyText }}</div> |
| | | </template> |
| | | |
| | | <el-table-column prop="JJDWMC" :show-overflow-tooltip="true" label="接警单位" |
| | | min-width="80%"></el-table-column> |
| | | <el-table-column prop="BJSJ" label="报警时间" min-width="50%"> |
| | | </el-table-column> |
| | | <el-table-column prop="BJLX" label="报警类型"> |
| | | </el-table-column> |
| | | <el-table-column label="操作" align="center" min-width="32%"> |
| | | <template slot-scope="scope"> |
| | | <el-button v-if="!whetherPosition(scope.row)" @click="clickData(scope.row)" type="text" |
| | | size="small" title="定位"> |
| | | <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i> |
| | | </el-button> |
| | | </template> |
| | | </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', 'cursor': 'default' }" |
| | | :row-class-name="tableRowClassName" class="police-infor-table" @cell-mouse-enter="tableEnter" |
| | | @cell-mouse-leave="tabelLeave"> |
| | | :row-class-name="tableRowClassName" |
| | | class="police-infor-table" |
| | | @cell-mouse-enter="tableEnter" |
| | | @cell-mouse-leave="tabelLeave" |
| | | > |
| | | <template slot="empty"> |
| | | <div>{{ historyEmptyText }}</div> |
| | | </template> |
| | | <el-table-column prop="JJDWMC" :show-overflow-tooltip="true" label="接警单位" |
| | | min-width="80%"></el-table-column> |
| | | <el-table-column prop="BJSJ" label="报警时间" min-width="50%"> |
| | | </el-table-column> |
| | | <el-table-column prop="BJLX" label="报警类型"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="JJDWMC" |
| | | :show-overflow-tooltip="true" |
| | | label="接警单位" |
| | | min-width="80%" |
| | | ></el-table-column> |
| | | <el-table-column prop="BJSJ" label="报警时间" min-width="50%"></el-table-column> |
| | | <el-table-column prop="BJLX" label="报警类型"></el-table-column> |
| | | <el-table-column label="操作" align="center" min-width="32%"> |
| | | <template slot-scope="scope"> |
| | | <el-button v-if="!whetherPosition(scope.row)" @click="clickData(scope.row)" type="text" |
| | | size="small" title="定位"> |
| | | <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i> |
| | | <el-button |
| | | v-if="!whetherPosition(scope.row)" |
| | | @click="clickData(scope.row)" |
| | | type="text" |
| | | size="small" |
| | | title="定位" |
| | | > |
| | | <i |
| | | class="el-icon-location" |
| | | :style="{ color: positionColor(scope.row) }" |
| | | ></i> |
| | | </el-button> |
| | | <el-buttonalign-justify @click="siteClick(scope.row)" type="text" size="small" title="详情"> |
| | | <el-buttonalign-justify |
| | | @click="siteClick(scope.row)" |
| | | type="text" |
| | | size="small" |
| | | title="详情" |
| | | > |
| | | <i class="el-icon-document"></i> |
| | | </el-buttonalign-justify> |
| | | </template> |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <el-dialog title="警情信息" :visible.sync="policeSituationVisible" :modal-append-to-body="false" |
| | | :before-close="policeSituationBeforeClose" :modal="true" :close-on-click-modal="false" |
| | | class="policeSituation-details-box"> |
| | | <el-dialog |
| | | title="警情信息" |
| | | :visible.sync="policeSituationVisible" |
| | | :modal-append-to-body="false" |
| | | :before-close="policeSituationBeforeClose" |
| | | :modal="true" |
| | | :close-on-click-modal="false" |
| | | class="policeSituation-details-box" |
| | | > |
| | | <div class="btn-change"> |
| | | <div :class="{ on: policeInformationType == '接警信息' }" @click="alarmOrActAsPolice('接警信息')">接警信息</div> |
| | | <div :class="{ on: policeInformationType == '出警信息' }" @click="alarmOrActAsPolice('出警信息')">出警信息</div> |
| | | <div |
| | | :class="{ on: policeInformationType == '接警信息' }" |
| | | @click="alarmOrActAsPolice('接警信息')" |
| | | >接警信息</div> |
| | | <div |
| | | :class="{ on: policeInformationType == '出警信息' }" |
| | | @click="alarmOrActAsPolice('出警信息')" |
| | | >出警信息</div> |
| | | </div> |
| | | |
| | | <div v-show="policeInformationType == '接警信息'" class="box"> |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <div v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) != '{}'" class="box"> |
| | | <div |
| | | v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) != '{}'" |
| | | class="box" |
| | | > |
| | | <div class="item"> |
| | | <div>处警单位编号:</div> |
| | | <div>{{ CJdata.CJDWBH }}</div> |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <div v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) == '{}'" class="box no-data">暂无警情</div> |
| | | <div |
| | | v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) == '{}'" |
| | | class="box no-data" |
| | | >暂无警情</div> |
| | | </el-dialog> |
| | | |
| | | <div class="cur-tooltip" v-show="currentTooltip" |
| | | :style="{ top: currentPointerPosition.y + 'px', left: currentPointerPosition.x + 'px' }"> |
| | | <div class="type-name"> |
| | | 报警内容 |
| | | </div> |
| | | <div class="type-content"> |
| | | {{ currentBJNR }} |
| | | </div> |
| | | <div |
| | | class="cur-tooltip" |
| | | v-show="currentTooltip" |
| | | :style="{ top: currentPointerPosition.y + 'px', left: currentPointerPosition.x + 'px' }" |
| | | > |
| | | <div class="type-name">报警内容</div> |
| | | <div class="type-content">{{ currentBJNR }}</div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | current: 1 |
| | | }, |
| | | |
| | | navType: 1, |
| | | currentTableHeight: 0, |
| | | currentTime: [], |
| | | |
| | |
| | | x: 0, |
| | | y: 0 |
| | | }, |
| | | |
| | | currentTooltip: false, |
| | | currentBJNR: '' |
| | | currentBJNR: '', |
| | | 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 * 14) |
| | | 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]) |
| | | } |
| | | }] |
| | | }, |
| | | } |
| | | }, |
| | | |
| | |
| | | policeInforSiteLayer = new global.DC.PrimitiveLayer('policeInforSiteLayer') |
| | | global.viewer.addLayer(policeInforSiteLayer) |
| | | this.$EventBus.$emit('closeMxTileset') |
| | | this.navClick(0) |
| | | this.navClick() |
| | | this.setTableHeight() |
| | | }) |
| | | |
| | |
| | | defaultDate () { |
| | | var current = new Date() |
| | | |
| | | var seven = new Date(current.getTime() - 1 * 24 * 60 * 60 * 1000) |
| | | var seven = new Date(current.getTime() - 7 * 24 * 60 * 60 * 1000) |
| | | |
| | | this.currentTime = [seven, current] //将值设置给插件绑定的数据 |
| | | }, |
| | |
| | | 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 point = new global.DC.PointPrimitive(center) |
| | | policeInfoPositionList.push(center) |
| | | let num = 0 |
| | | // let num = 0 |
| | | |
| | | timer[index] = setInterval(() => { |
| | | num++ |
| | | if (num >= 10) { |
| | | 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.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) |
| | | // point.attrParams = item |
| | | // point.on(global.DC.MouseEventType.CLICK, this.siteClick) |
| | | // policeInforSiteLayer.addOverlay(point) |
| | | } |
| | | }) |
| | | this.$EventBus.$emit('layerPointAdd', { |
| | |
| | | }, |
| | | |
| | | setTableHeight () { |
| | | |
| | | 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.currentTableHeight = this.$refs.containerContent.offsetHeight - this.$refs.timeSelect.offsetHeight |
| | | }, |
| | | |
| | | /** |
| | | * @description: 实时历史警情切换 |
| | | * @param {*} type |
| | | * @return {*} |
| | | */ |
| | | async navClick (type) { |
| | | this.navType = type |
| | | async navClick () { |
| | | |
| | | const date = this.currentTime.map(item => { |
| | | return this.dateFormat(item) |
| | | }) |
| | | |
| | | if (this.navType == 0) { |
| | | await this.getAnswerPolices() |
| | | } else { |
| | | this.pages.current = 1 |
| | | this.pages.current = 1 |
| | | |
| | | await this.getAlarmList({ |
| | | start: date[0], |
| | | end: date[1], |
| | | current: this.pages.current |
| | | }) |
| | | } |
| | | await this.getAlarmList({ |
| | | start: date[0], |
| | | end: date[1], |
| | | current: this.pages.current |
| | | }) |
| | | |
| | | this.$nextTick(() => { |
| | | this.setTableHeight() |
| | |
| | | height: 100%; |
| | | color: #fff; |
| | | background: $bg-color; |
| | | |
| | | .nav-tab { |
| | | height: 40px; |
| | | line-height: 40px; |
| | | display: flex; |
| | | justify-content: space-around; |
| | | |
| | | .nav { |
| | | flex: 1; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .choosed { |
| | | background-color: #3d5ad5; |
| | | } |
| | | } |
| | | |
| | | .time-select { |
| | | margin: 0; |