<!-- -->
|
<template>
|
<div class="table-box-w">
|
<div class="list-box">
|
<el-table :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
|
:cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" v-loading="residentLoading"
|
element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
|
element-loading-background="rgba(17, 38, 163, 1)" :empty-text="residentNoDataText" :data="dataList.records"
|
style="width: 100%" @cell-click="cellClick">
|
<!-- 包含了姓名、性别、民族、身份证号码、手机号、现居住地、岗位、从业人员照片等。 -->
|
<el-table-column align="center" prop="policeName" label="民警"> </el-table-column>
|
<el-table-column align="center" prop="pcsName" label="单位"> </el-table-column>
|
<el-table-column align="center" prop="createTime" label="报警时间"> </el-table-column>
|
<el-table-column align="center" prop="address" show-overflow-tooltip label="地址"> </el-table-column>
|
<el-table-column align="center" prop="injuryFlag" label="是否受伤">
|
<template slot-scope="scope">
|
{{ scope.row.injuryFlag == 1 ? '是' : '否' }}
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div class="pages">
|
<el-pagination background layout="prev, pager, next" :page-size="100" :total="dataList.total"
|
:current-page="currentPage4" @current-change="handleCurrentChange"></el-pagination>
|
</div>
|
</div>
|
|
<!-- 详情页面 -->
|
<el-dialog class="resident-details-box-details" :modal="false" :close-on-click-modal="false" :append-to-body="true"
|
:visible.sync="detailBox">
|
<div class="detail-box">
|
<!-- popelList[0] 详情页面 包含了姓名、性别、民族、身份证号码、手机号、现居住地、岗位、从业人员照片等-->
|
<div class="detail-title-box">
|
<div class="detail-title">扫码报警详情</div>
|
<div class="close" @click="detailBox = false" title="关闭"></div>
|
</div>
|
|
<div class="detail-content-box">
|
<el-row class="">
|
<el-col :span="6">
|
<div class="detail-row">民警</div>
|
</el-col>
|
<el-col :span="18">
|
<div class="detail-row">{{ row.policeName }}</div>
|
</el-col>
|
</el-row>
|
|
<el-row class="">
|
<el-col :span="6">
|
<div class="detail-row">单位</div>
|
</el-col>
|
<el-col :span="18">
|
<div class="detail-row">{{ row.pcsName }}</div>
|
</el-col>
|
</el-row>
|
|
<el-row class="">
|
<el-col :span="6">
|
<div class="detail-row">是否受伤</div>
|
</el-col>
|
<el-col :span="18">
|
<div class="detail-row">{{ row.gender == 1 ? '是' : '否' }}</div>
|
</el-col>
|
</el-row>
|
|
<el-row class="">
|
<el-col :span="6">
|
<div class="detail-row">报警时间</div>
|
</el-col>
|
<el-col :span="18">
|
<div class="detail-row">{{ row.createTime }}</div>
|
</el-col>
|
</el-row>
|
|
<el-row class="">
|
<el-col :span="6">
|
<div class="detail-row">地址</div>
|
</el-col>
|
<el-col :span="18">
|
<div class="">{{ row.address }}</div>
|
</el-col>
|
</el-row>
|
|
<el-row class="">
|
<el-col :span="6">
|
<div class="detail-row">经纬度</div>
|
</el-col>
|
<el-col :span="18">
|
<div class="detail-row">{{ row.longitude }},{{ row.latitude }}</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
|
import {
|
getPoliceAlarmRecordsPage
|
} from "@/api/dept/newIndex.js"
|
export default {
|
name: 'tableFromPop',
|
|
props: {
|
hushiPeoTy: {
|
type: String,
|
default: ''
|
},
|
residentIdSave: {
|
type: String,
|
default: ''
|
},
|
residentDetailsType: {
|
type: Number,
|
default: 1
|
},
|
},
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
data () {
|
//这里存放数据
|
return {
|
row: {},
|
detailBox: false,
|
residentLoading: false,
|
residentNoDataText: '暂无数据',
|
dataList: {
|
total: 1,
|
records: []
|
|
},
|
pageparm: {
|
pageSize: 10,
|
current: 1
|
}
|
|
}
|
},
|
//监听属性 类似于data概念
|
computed: {
|
},
|
//监控data中的数据变化
|
watch: {},
|
//方法集合
|
methods: {
|
handleSizeChange (val) {
|
console.log(`每页 ${val} 条`)
|
this.pageparm.pageSize = val
|
this.init()
|
},
|
handleCurrentChange (val) {
|
console.log(`当前页: ${val}`)
|
this.pageparm.current = val
|
this.init()
|
|
},
|
init () {
|
this.residentLoading = true
|
getPoliceAlarmRecordsPage(this.residentDetailsType, this.residentIdSave, this.pageparm.pageSize, this.pageparm.current).then((res) => {
|
this.dataList.total = res.data.data.total
|
this.dataList.records = res.data.data.records
|
this.residentLoading = false
|
}).catch((err) => {
|
this.residentLoading = false
|
})
|
},
|
cellClick (row, column, cell, event) {
|
row.employerImg = this.getImgUrls(row.employerImg)
|
this.row = row
|
this.detailBox = !this.detailBox
|
console.log('cellClick', row, column, cell, event)
|
},
|
// // 图片转换
|
getImgUrls (imageUrls) {
|
if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
|
imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
|
return 'http://10.141.11.11/jczzMedia/' + ele
|
// return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
|
})
|
}
|
return imageUrls || []
|
},
|
|
},
|
//生命周期 - 创建完成（可以访问当前this实例）
|
created () {
|
console.log('tableFromPop mounted', this.hushiPeoTy)
|
|
},
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
mounted () {
|
console.log('tableFromPop mounted', this.hushiPeoTy)
|
this.init()
|
|
},
|
beforeCreate () { }, //生命周期 - 创建之前
|
beforeMount () { }, //生命周期 - 挂载之前
|
beforeUpdate () { }, //生命周期 - 更新之前
|
updated () { }, //生命周期 - 更新之后
|
beforeDestroy () { }, //生命周期 - 销毁之前
|
destroyed () { }, //生命周期 - 销毁完成
|
activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
|
}
|
</script>
|
|
|
<style scoped lang="scss">
|
.table-box-w {
|
// position: relative;
|
// background-color: rgba(228, 17, 17, 0.5);
|
}
|
</style>
|
