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.
289 lines
9.4 KiB
289 lines
9.4 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="人员标签" 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 |
|
> |
|
</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"> |
|
<el-row> |
|
<el-col :span="5"></el-col> |
|
<el-col :span="12"> |
|
<div class="row" style="--label-width: 60px"> |
|
<div class="col col-8"> |
|
<label>姓名</label> |
|
<span>{{ activeRow.name }}</span> |
|
</div> |
|
<div class="col col-8"> |
|
<label>性别</label> |
|
<span>{{ getGender(activeRow.gender) }}</span> |
|
</div> |
|
<div class="col col-8"> |
|
<label>身份证号</label> |
|
<span>{{ activeRow.idCode }}</span> |
|
</div> |
|
<div class="col col-8"> |
|
<label>年龄</label> |
|
<span>{{ activeRow.age }}</span> |
|
</div> |
|
</div> |
|
</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"> |
|
<div> |
|
<span class="text-primary">{{ item.riskName }}</span> |
|
</div> |
|
<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> |
|
</template> |
|
<script lang="ts" setup> |
|
import { |
|
listRiskPersonnel, |
|
getRiskPersonnel, |
|
} from "@/api/sensitivePerception/riskPersonnel"; |
|
|
|
const query = ref({}); |
|
const list = ref<any[]>([]); |
|
const total = ref(0); |
|
const show = ref(false); |
|
|
|
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; |
|
} |
|
</style>
|
|
|