You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
499 lines
13 KiB
499 lines
13 KiB
<template> |
|
<div class="container"> |
|
<header> |
|
<el-form :label-width="114"> |
|
<el-row> |
|
<el-col :span="6"> |
|
<el-form-item label="姓名"> |
|
<el-input |
|
placeholder="请输入" |
|
v-model="query.name" |
|
clearable |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-form-item label="身份证号"> |
|
<el-input |
|
placeholder="请输入" |
|
v-model="query.idCode" |
|
clearable |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-form-item label="手机号"> |
|
<el-input |
|
placeholder="请输入" |
|
v-model="query.mobileNumber" |
|
clearable |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-form-item label="年龄"> |
|
<el-input |
|
placeholder="请输入" |
|
v-model="query.age" |
|
type="number" |
|
clearable |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
</el-form> |
|
<div class="mb-25 flex end"> |
|
<div> |
|
<el-button type="primary" @click="getList"> |
|
<template #icon> |
|
<icon name="el-icon-Search"/> |
|
</template> |
|
查询 |
|
</el-button |
|
> |
|
<el-button @click="reset">重置</el-button> |
|
</div> |
|
</div> |
|
</header> |
|
<div class="table-container"> |
|
<el-table :data="list"> |
|
<el-table-column label="姓名" prop="name" width="100"/> |
|
<el-table-column |
|
label="性别" |
|
prop="gender" |
|
width="60" |
|
align="center" |
|
> |
|
<template #default="{ row }"> |
|
<span>{{ getGender(row.gender) }}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="年龄" prop="age" width="60"/> |
|
<el-table-column label="身份证号" prop="idCode" width="180"/> |
|
<el-table-column |
|
label="手机号" |
|
prop="mobileNumber" |
|
width="120" |
|
/> |
|
<el-table-column |
|
label="管控单位" |
|
prop="controlDepartName" |
|
width="120" |
|
/> |
|
<el-table-column label="人员标签" show-overflow-tooltip> |
|
<template #default="{ row }"> |
|
<div class="flex gap" v-if="row.tags"> |
|
<el-tag |
|
v-for="item in row.tags.split(',')" |
|
:key="item" |
|
>{{ item }} |
|
</el-tag |
|
> |
|
</div> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="高风险因素" show-overflow-tooltip> |
|
<template #default="{ row }"> |
|
<div class="flex gap" v-if="row.smallTags"> |
|
<el-tag |
|
type="danger" |
|
v-for="item in row.smallTags" |
|
:key="item" |
|
>{{ item }} |
|
</el-tag |
|
> |
|
</div> |
|
</template> |
|
</el-table-column> |
|
<el-table-column |
|
label="高风险指数" |
|
prop="riskScore" |
|
width="120" |
|
align="center" |
|
/> |
|
<el-table-column label="操作" width="160"> |
|
<template #default="{ row }"> |
|
<el-button |
|
type="primary" |
|
link |
|
@click="handleShowDesc(row)" |
|
>查看详情 |
|
</el-button |
|
> |
|
<el-button |
|
type="primary" |
|
link |
|
@click="handleShowNotification" |
|
>预警提醒 |
|
</el-button> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
<div class="flex end mt-8"> |
|
<el-pagination |
|
@size-change="getList" |
|
@current-change="getList" |
|
:current-page="query.current" |
|
:page-sizes="[10, 20, 50]" |
|
:page-size="query.size" |
|
v-model:current-page="query.current" |
|
layout="total, sizes, prev, pager, next" |
|
:total="total" |
|
> |
|
</el-pagination> |
|
</div> |
|
</div> |
|
|
|
<el-dialog title="风险人员详情" v-model="show" width="80vw" top="2vh"> |
|
<h5>风险人员基本情况</h5> |
|
<el-row> |
|
<el-col :span="1"></el-col> |
|
<el-col :span="18"> |
|
|
|
|
|
<el-col :span="18"> |
|
|
|
<div class="col col-20"> |
|
<div class="person-photo"> |
|
<img src="@/assets/images/defaultPhoto.png" /> |
|
</div> |
|
<div class="row" style="height: 100%"> |
|
<div class="col col-6"> |
|
<label>姓名</label> |
|
<span>{{ activeRow.name }}</span> |
|
</div> |
|
<div class="col col-8"> |
|
<label>性别</label> |
|
<span>{{ getGender(activeRow.gender) }}</span> |
|
</div> |
|
<div class="col col-10"> |
|
<label>身份证号</label> |
|
<span>{{ activeRow.idCode }}</span> |
|
</div> |
|
<div class="row" style="width: 100%"> |
|
<div class="col col-6"> |
|
<label>年龄</label> |
|
<span>{{ activeRow.age }}</span> |
|
</div> |
|
<div class="col col-8"> |
|
<label>管控单位</label> |
|
<span>{{ activeRow.controlDepartName }}</span> |
|
</div> |
|
<div class="col col-10"> |
|
<label>电话</label> |
|
<span>{{ activeRow.mobileNumber }}</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</el-col> |
|
</el-col> |
|
<el-col :span="5"> |
|
<div class="flex center column text-center"> |
|
<div class="socre-box"> |
|
{{ personal.riskPersonal.riskScore.toFixed(1) }} |
|
</div> |
|
<span style="font-size: 24px" class="mt-10">风险指数</span> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
<div style="min-height: 50vh"> |
|
<div v-for="(item, index) in personal.riskClueList" :key="index"> |
|
<h5>{{ item.riskName }}</h5> |
|
<el-table :data="item.clues" max-height="300"> |
|
<el-table-column |
|
label="发生时间" |
|
prop="eventTime" |
|
width="160" |
|
/> |
|
<el-table-column |
|
label="风险因素" |
|
prop="riskReason" |
|
width="160" |
|
show-overflow-tooltip |
|
/> |
|
<el-table-column |
|
label="风险内容" |
|
show-overflow-tooltip |
|
> |
|
<template #default="{ row }"> |
|
<span style="white-space: pre-wrap;">{{ row.data }}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column width="80" label="分值" prop="score"/> |
|
</el-table> |
|
</div> |
|
</div> |
|
</el-dialog> |
|
<el-dialog v-model="showNotification" title="创建提醒" width="600px"> |
|
<el-form label-width="148" :model="formData2" ref="formRef"> |
|
<el-form-item label="提醒类型"> |
|
<div class="flex gap"> |
|
<el-select |
|
v-model="formData2.alarmTypeId" |
|
style="min-width: 185px" |
|
> |
|
<el-option :value="1" label="预警问题"/> |
|
<el-option :value="2" label="风险问题"/> |
|
<el-option :value="3" label="提醒通知"/> |
|
</el-select> |
|
</div> |
|
</el-form-item> |
|
<el-form-item |
|
style="width: 333px" |
|
label="被通知单位" |
|
prop="involveDepartId" |
|
:rules="{ |
|
message: '请选择问题涉及单位', |
|
trigger: ['blur'], |
|
}" |
|
> |
|
<depart-tree-select |
|
v-model="formData2.involveDepartId" |
|
:check-strictly="true" |
|
@node-click=" (row) => changeDepart(row)" |
|
/> |
|
</el-form-item> |
|
<el-form-item |
|
label="被提醒民警" |
|
prop="blameEmpNo" |
|
:rules="{ |
|
required: true, |
|
message: '请选择提醒民警', |
|
trigger: ['blur'], |
|
}" |
|
> |
|
<el-select |
|
v-model="police" |
|
value-key="idCode" |
|
placeholder="请选择提醒民警" |
|
@change="changePolice" |
|
style="width: 240px" |
|
> |
|
<el-option |
|
v-for="item in polices" |
|
:key="item.idCode" |
|
:label="item.name" |
|
:value="item" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item |
|
label="提醒内容" |
|
> |
|
<el-input |
|
type="textarea" |
|
v-model="formData2.alarmContent" |
|
:autosize="{ minRows: 12 }" |
|
:rules="{ |
|
message: '请填写提醒内容', |
|
trigger: ['blur'], |
|
}" |
|
style="width: 280px" |
|
/> |
|
</el-form-item> |
|
</el-form> |
|
<footer class="flex end"> |
|
<el-button @click="showNotification = false" size="large">取消</el-button> |
|
<el-button type="primary" @click="handleNotification" size="large" |
|
>提交 |
|
</el-button |
|
> |
|
</footer> |
|
</el-dialog> |
|
</template> |
|
<script lang="ts" setup> |
|
import { |
|
listRiskPersonnel, |
|
getRiskPersonnel, |
|
} from "@/api/sensitivePerception/riskPersonnel"; |
|
import {ref} from "vue"; |
|
import {alarmNotificationCommit} from "~/api/work/alarm"; |
|
import feedback from "~/utils/feedback"; |
|
import {listPoliceAll} from "~/api/system/police"; |
|
|
|
|
|
const query = ref({}); |
|
const list = ref<any[]>([]); |
|
const total = ref(0); |
|
const show = ref(false); |
|
|
|
let showNotification = ref(false) |
|
let formData2 = ref({ |
|
alarmTypeId: 1, |
|
involveDepartId: '', |
|
involveDepartName: '', |
|
alarmContent: '', |
|
blameName: '', |
|
blameIdCode: '', |
|
blameEmpNo: '', |
|
blames: {}, |
|
level: -1 |
|
}) |
|
let police = ref({}) |
|
let polices = ref([]) |
|
|
|
const handleShowNotification = () => { |
|
showNotification.value = true |
|
} |
|
|
|
const handleNotification = async () => { |
|
if(formData2.value.involveDepartId == '') { |
|
feedback.msgWarning("请选择被提醒单位"); |
|
return; |
|
} |
|
if(formData2.value.alarmContent == '') { |
|
feedback.msgWarning("请填写提醒内容"); |
|
return; |
|
} |
|
if(formData2.value.policeIdCode == '') { |
|
feedback.msgWarning("请选择被提醒民警"); |
|
return; |
|
} |
|
let data = { |
|
alarmTypeId: formData2.value.alarmTypeId, |
|
notificationDepartCode: formData2.value.involveDepartId, |
|
notificationDepartName: formData2.value.involveDepartName, |
|
alarmContent: formData2.value.alarmContent, |
|
policeName: police.value.name, |
|
policeIdCode: police.value.idCode, |
|
policeNo: police.value.empNo |
|
} |
|
await alarmNotificationCommit(data); |
|
showNotification.value = false; |
|
feedback.msgSuccess("操作成功"); |
|
initFormData2(); |
|
} |
|
|
|
const initFormData2 = () => { |
|
formData2.value = { |
|
alarmTypeId: 1, |
|
involveDepartId: '', |
|
involveDepartName: '', |
|
alarmContent: '', |
|
blameName: '', |
|
blameIdCode: '', |
|
blameEmpNo: '', |
|
blames: {}, |
|
level: -1 |
|
} |
|
} |
|
|
|
const changeDepart = (row) => { |
|
formData2.value.involveDepartName = row.shortName; |
|
formData2.value.level = row.level |
|
police.value = {} |
|
getPolices(row.id); |
|
} |
|
|
|
const changePolice = (data) => { |
|
police.value = { |
|
idCode: data.idCode, |
|
empNo: data.empNo, |
|
name: data.name |
|
} |
|
} |
|
|
|
function getPolices(departId) { |
|
if(departId=='') { |
|
return; |
|
} |
|
listPoliceAll(departId).then(res => { |
|
polices.value = res |
|
}) |
|
} |
|
|
|
function getList() { |
|
listRiskPersonnel(query.value).then((data) => { |
|
list.value = data.records; |
|
total.value = data.total; |
|
}); |
|
} |
|
|
|
function reset() { |
|
query.value = {}; |
|
getList(); |
|
} |
|
|
|
onMounted(() => { |
|
getList(); |
|
}); |
|
|
|
const activeRow = ref({}); |
|
const personal = ref({ |
|
riskClueList: [], |
|
}); |
|
|
|
async function handleShowDesc(row) { |
|
activeRow.value = row; |
|
const data = await getRiskPersonnel(row.id); |
|
show.value = true; |
|
personal.value = data; |
|
} |
|
|
|
const filterJsonData = (row) => { |
|
if (row.data == undefined) { |
|
return '' |
|
} |
|
try { |
|
let j = JSON.parse(row.data) |
|
if (j.sourceData != undefined) { |
|
j = JSON.parse(row.sourceData) |
|
} |
|
let str = '' |
|
for (let key in j) { |
|
if (key == 'eventTime') { |
|
continue |
|
} |
|
if (key == 'idCode') { |
|
continue |
|
} |
|
if (key == 'departId') { |
|
continue |
|
} |
|
if (key == 'personId') { |
|
continue |
|
} |
|
if (key == 'name') { |
|
continue |
|
} |
|
str += j[key] + '\n' |
|
} |
|
return str |
|
} catch (e) { |
|
return row.data |
|
} |
|
} |
|
|
|
function getGender(val) { |
|
if (val == 1) { |
|
return "男"; |
|
} |
|
if (val == 2) { |
|
return "女"; |
|
} |
|
return ""; |
|
} |
|
</script> |
|
<style lang="scss" scoped> |
|
.socre-box { |
|
background: linear-gradient(180deg, #ffa36a 0%, #ff0000 100%); |
|
border-radius: 9px; |
|
border: 2px solid #f11d16; |
|
height: 153px; |
|
line-height: 153px; |
|
text-align: center; |
|
font-size: 124px; |
|
color: #fff; |
|
} |
|
.person-photo { |
|
text-align: center; |
|
margin-bottom: 10px; |
|
} |
|
|
|
.person-photo img { |
|
max-height: 100%; |
|
width: 200px; |
|
} |
|
</style>
|
|
|