<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2022-08-18 16:18:17
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2024-02-08 17:51:12
|
* @FilePath: \srs-police-affairs\src\views\site\index.vue
|
* @Description: 辖区管理
|
*
|
* Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
|
-->
|
|
<template>
|
<div class="site-page-home police-page container">
|
<div v-show="boxShow" class="container-content" ref="containerContent">
|
|
<div class="time-select" ref="timeSelect">
|
<div class="search-item-box">
|
<span>关键字：</span>
|
|
<el-input style="flex: 1;" size="small" placeholder="请输入（姓名、联系电话、工作场所）" v-model="keyword"
|
@change="searchChange" clearable></el-input>
|
</div>
|
|
<div class="search-item-box" style="justify-content: center;">
|
<el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
|
<el-button @click="clearRow" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
|
</div>
|
<div class="search-item-box" style="justify-content: flex-start;">
|
<el-button @click="filterBtn" class="bjnr-btn" :class="{ isOneClick: criminalRecordFlag == 1 }">有前科（{{ scycNum
|
? scycNum :
|
'0'
|
}}）</el-button>
|
</div>
|
</div>
|
|
<div class="list police-info" ref="tableBox">
|
<el-table :data="tableData" style="width: 100%"
|
: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">
|
<el-table-column prop="name" :show-overflow-tooltip="true" label="姓名"></el-table-column>
|
<el-table-column prop="telephone" :show-overflow-tooltip="true" label="联系电话"></el-table-column>
|
<el-table-column prop="placeName" :show-overflow-tooltip="true" label="工作场所"></el-table-column>
|
<el-table-column width="80" label="操作" align="center">
|
<template slot-scope="scope">
|
<el-button type="text" size="small" title="定位" :disabled="positionDisabled(scope.row)"
|
@click="rowClick(scope.row)">
|
<i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i>
|
</el-button>
|
<el-button type="text" size="small" title="详情" @click="goDetail(scope.row)">
|
<i class="el-icon-document" style="color:#66b1ff"></i>
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div class="pages all-pagination-sty" ref="tablePagination">
|
<el-pagination background layout="prev, pager, next" :page-size="pages.size" :total="pages.total"
|
:pager-count="4" :current-page="pages.current" @current-change="handleCurrentChange"></el-pagination>
|
</div>
|
</div>
|
|
</div>
|
|
<PrmDialogPopup ref="PrmDialogPopup"></PrmDialogPopup>
|
</div>
|
</template>
|
|
<script>
|
import { initMapPosition } from '@/utils/mapPositionInit'
|
import { getPlacePractitionerPage, getCountByType } from "@/api/practitionersManage/index.js"
|
|
let loading = null
|
|
export default {
|
inject: ['userInfo'],
|
|
data () {
|
return {
|
boxShow: false,
|
keyword: '',
|
tableData: [],
|
pages: {
|
current: 1,
|
size: 22,
|
total: 0,
|
count: 0,
|
},
|
scycNum: 0,
|
criminalRecordFlag: '',
|
}
|
},
|
|
created () {
|
this.getCountByType()
|
this.getPlacePractitionerPage()
|
const that = this
|
|
that.$nextTick(() => {
|
initMapPosition()
|
})
|
},
|
|
mounted () {
|
this.$parent.$parent.resize('400px', true)
|
|
this.$nextTick(() => {
|
this.$EventBus.$emit('closeMxTileset')
|
})
|
},
|
|
computed: {
|
positionColor () {
|
return (row) => {
|
if (row.X && row.X != 0 || row.lng && row.lng != 0 || row.longitude && row.longitude != 0 || row.x && row.x != 0) {
|
return "#1AFA29"
|
} else {
|
return "#ccc"
|
}
|
}
|
},
|
|
positionDisabled () {
|
return (row) => {
|
if (row.X && row.X != 0 || row.lng && row.lng != 0 || row.longitude && row.longitude != 0 || row.x && row.x != 0) {
|
return false
|
} else {
|
return true
|
}
|
}
|
},
|
},
|
|
methods: {
|
// 有前科筛选按钮
|
filterBtn () {
|
if (this.criminalRecordFlag == '1') {
|
this.criminalRecordFlag = ''
|
} else {
|
this.criminalRecordFlag = 1
|
}
|
this.getPlacePractitionerPage()
|
},
|
|
// 搜索条件改变
|
searchChange () {
|
if (this.keyword.trim() == '') {
|
this.pages.current = 1
|
this.getCountByType()
|
this.getPlacePractitionerPage()
|
}
|
},
|
|
// 点击搜索
|
searchBtn () {
|
this.pages.current = 1
|
this.getCountByType()
|
this.getPlacePractitionerPage()
|
},
|
|
// 重置搜索
|
resetSearch () {
|
this.pages.current = 1
|
this.keyword = ''
|
this.criminalRecordFlag = ''
|
this.getCountByType()
|
this.getPlacePractitionerPage()
|
},
|
|
// 分页处理
|
handleCurrentChange (current) {
|
this.pages.current = current
|
this.getPlacePractitionerPage()
|
},
|
|
// 加载动画
|
loading () {
|
loading = this.$loading({
|
lock: true,
|
text: '拼命加载中',
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.5)'
|
})
|
},
|
|
// 获取有前科数量
|
getCountByType () {
|
getCountByType({ searchKey: this.keyword }).then(res => {
|
this.scycNum = res.data.data.scycNum
|
})
|
},
|
|
// 获取列表数据
|
getPlacePractitionerPage () {
|
this.loading()
|
|
getPlacePractitionerPage({
|
current: this.pages.current,
|
size: this.pages.size,
|
searchKey: this.keyword,
|
criminalRecordFlag: this.criminalRecordFlag
|
}).then(res => {
|
const data = res.data.data
|
this.tableData = data.records
|
this.pages.total = data.total
|
|
setTimeout(() => {
|
loading && loading.close()
|
}, 300)
|
}).catch(error => {
|
setTimeout(() => {
|
loading && loading.close()
|
}, 300)
|
})
|
},
|
|
// 点击定位
|
rowClick (row) {
|
let lng = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[0]
|
let lat = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[1]
|
|
this.$EventBus.$emit('toPosition', {
|
siteJd: lng,
|
siteWd: lat,
|
siteGd: 2000
|
})
|
|
this.$EventBus.$emit('mapClearLayer', {
|
layerName: 'scanLayer',
|
type: 'VectorLayer'
|
})
|
this.$EventBus.$emit('layerPointAdd', {
|
layerName: 'scanLayer',
|
type: "billboard",
|
params: {
|
...row,
|
lng: lng,
|
lat: lat,
|
alt: 1,
|
size: [25.8, 32.4],
|
url: `/img/icon/site.png`,
|
setStyle: {
|
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
}
|
},
|
incident: this.siteClick
|
})
|
},
|
|
// 查看详情
|
goDetail (row) {
|
this.$refs.PrmDialogPopup.initOpen(row)
|
},
|
|
// 点击图标
|
siteClick (e) {
|
this.$refs.PrmDialogPopup.initOpen(e.overlay.attrParams)
|
},
|
|
// 清空按钮-清除图标图层
|
clearRow () {
|
this.$EventBus.$emit('mapClearLayer', {
|
layerName: 'scanLayer',
|
type: 'VectorLayer'
|
})
|
this.$store.commit('SET_DIALOGDETAILPOPUP', false)
|
this.resetSearch()//重置列表
|
},
|
|
// 大小重置
|
boxResize (val) {
|
this.boxShow = val
|
},
|
},
|
|
destroyed () {
|
loading && loading.close()
|
|
this.$parent.$parent.resize('0px')
|
|
this.clearRow()
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.container {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
|
&-content {
|
display: flex;
|
flex-direction: column;
|
width: 100%;
|
height: 100%;
|
color: #fff;
|
background: $bg-color;
|
}
|
}
|
|
.list {
|
display: flex;
|
flex-direction: column;
|
|
.pages {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
|
.isOneClick {
|
color: #fcbd56 !important;
|
}
|
</style>
|
