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.
728 lines
27 KiB
728 lines
27 KiB
<template> |
|
<div class="container"> |
|
<header> |
|
<el-form :label-width="114"> |
|
<el-row> |
|
<el-col :span="6"> |
|
<el-form-item label="单位分组"> |
|
<el-select v-model="query.departGroupId" clearable> |
|
<el-option |
|
value="10" |
|
label="派出所" |
|
></el-option> |
|
<el-option |
|
value="11" |
|
label="交警大队" |
|
></el-option> |
|
<el-option |
|
value="13" |
|
label="刑侦大队" |
|
></el-option> |
|
<el-option |
|
value="14" |
|
label="禁毒大队" |
|
></el-option> |
|
<el-option |
|
value="15" |
|
label="治安大队" |
|
></el-option> |
|
<el-option |
|
value="16" |
|
label="人境大队" |
|
></el-option> |
|
<el-option value="12" label="其他"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-form-item label="统计时间"> |
|
<date-time-range-picker-ext |
|
v-model="query.crtTime" |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-form-item label="姓名"> |
|
<el-input |
|
v-model="query.name" |
|
placeholder="请输入" |
|
clearable |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-form-item label="警号"> |
|
<el-input |
|
v-model="query.empNo" |
|
placeholder="请输入" |
|
clearable |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-form-item label="所属单位"> |
|
<depart-tree-select |
|
v-model="query.departId" |
|
:check-strictly="false" |
|
/> |
|
</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" v-loading="mainLoading"> |
|
<el-table :data="list"> |
|
<el-table-column label="姓名" prop="name" width="120" /> |
|
<el-table-column label="性别" width="100" align="center"> |
|
<template #default="{ row }"> |
|
<span>{{ getGenderFromIdCode(row.idCode) }}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="职务" align="center" width="160"> |
|
<template #default="{ row }"> |
|
<span v-if="row.position">{{ row.position }}</span> |
|
<span v-else>{{ |
|
getDictLable(dict.personType, row.personType) |
|
}}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="警号" prop="empNo" width="160" /> |
|
<el-table-column |
|
label="入职时间" |
|
prop="employmentDate" |
|
width="160" |
|
/> |
|
<el-table-column label="所属单位" prop="departName"> |
|
<template #default="{ row }"> |
|
<span |
|
>{{ |
|
row.parentDepartName |
|
? row.parentDepartName + "/" |
|
: row.parentDepartName |
|
}}{{ row.departName }}</span |
|
> |
|
</template> |
|
</el-table-column> |
|
<el-table-column |
|
label="查实问题数" |
|
prop="verifySize" |
|
width="120" |
|
align="center" |
|
/> |
|
<el-table-column label="风险指数" align="center" width="160"> |
|
<template #default="{ row }"> |
|
<span |
|
:style="{color: getColor(score)}" |
|
v-if="row.score" |
|
>{{ Math.round(row.score) }}</span |
|
> |
|
<span v-else>-</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="操作" width="160"> |
|
<template #default="{ row }"> |
|
<el-button |
|
type="primary" |
|
link |
|
@click="handleShowProfile(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="[9, 18, 36]" |
|
v-model:page-size="query.size" |
|
v-model:current-page="query.current" |
|
layout="total, sizes, prev, pager, next" |
|
:total="total" |
|
v-if="list.length" |
|
> |
|
</el-pagination> |
|
</div> |
|
</div> |
|
|
|
<el-dialog |
|
title="个人问题详情" |
|
v-model="show" |
|
width="85vw" |
|
top="1vh" |
|
style="margin: 1vh auto" |
|
> |
|
<header class="flex center v-center gap"> |
|
<label>统计范围</label> |
|
<div style="width: 320px"> |
|
<date-time-range-picker-ext |
|
v-model="time" |
|
style="width: 300px" |
|
@change="getProfileData" |
|
/> |
|
</div> |
|
<el-button type="primary" @click="getProfileData">查询</el-button> |
|
</header> |
|
<el-scrollbar |
|
max-height="calc(98vh - 120px)" |
|
v-loading="loading" |
|
element-loading-text="个人问题详情加载中..." |
|
> |
|
<main> |
|
<el-row class="mb-20"> |
|
<el-col :span="8"> |
|
<h5>民警基本情况</h5> |
|
<el-row> |
|
<el-col :span="6"> |
|
<icon name="local-icon-police" :size="120" /> |
|
</el-col> |
|
<el-col :span="18"> |
|
<div class="row"> |
|
<div class="col col-12"> |
|
<label>姓名</label> |
|
<span>{{ policeInfo.name }}</span> |
|
</div> |
|
<div class="col col-12"> |
|
<label>性别</label> |
|
<span>{{ |
|
getGenderFromIdCode( |
|
policeInfo.idCode |
|
) |
|
}}</span> |
|
</div> |
|
<div class="col col-24"> |
|
<label>所属单位</label> |
|
<span> |
|
<span |
|
>{{ |
|
activeRow.parentDepartName |
|
? activeRow.parentDepartName + |
|
"/" |
|
: activeRow.parentDepartName |
|
}}{{ |
|
activeRow.departName |
|
}}</span |
|
> |
|
</span> |
|
</div> |
|
<div class="col col-12"> |
|
<label>警号</label> |
|
<span>{{ policeInfo.empNo }}</span> |
|
</div> |
|
<div class="col col-12"> |
|
<label>身份证号</label> |
|
<span>{{ policeInfo.idCode }}</span> |
|
</div> |
|
<div class="col col-12"> |
|
<label>入职时间</label> |
|
<span>{{ |
|
policeInfo.employmentDate || "/" |
|
}}</span> |
|
</div> |
|
<div class="col col-12"> |
|
<label>手机号</label> |
|
<span>{{ |
|
policeInfo.mobile || "/" |
|
}}</span> |
|
</div> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
</el-col> |
|
<el-col :span="8"> |
|
<h5>问题情况</h5> |
|
<el-row |
|
class="flex v-center" |
|
style="height: calc(100% - 76px)" |
|
> |
|
<el-col :span="6" class="text-center"> |
|
<div |
|
class="text-primary" |
|
style="font-size: 34px" |
|
> |
|
{{ negativeInfo.size }} |
|
</div> |
|
<div class="mb-10">问题总数</div> |
|
<div |
|
class="text-danger" |
|
style="font-size: 34px" |
|
> |
|
{{ negativeInfo.score }} |
|
</div> |
|
<div>风险值</div> |
|
</el-col> |
|
<el-col :span="18"> |
|
<el-row> |
|
<el-col |
|
:span="12" |
|
class="mb-20" |
|
v-if=" |
|
negativeInfo.jcj110BusinessSize || |
|
negativeInfo.jcj110Size |
|
" |
|
> |
|
<description-pair |
|
label="110接处警" |
|
label1="量" |
|
label2="问题数" |
|
:value1=" |
|
negativeInfo.jcj110BusinessSize |
|
" |
|
:value2="negativeInfo.jcj110Size" |
|
/> |
|
</el-col> |
|
<el-col |
|
:span="12" |
|
v-if=" |
|
negativeInfo.jcj122BusinessSize || |
|
negativeInfo.jcj122Size |
|
" |
|
> |
|
<description-pair |
|
label="122接处警" |
|
label1="量" |
|
label2="问题数" |
|
:value1=" |
|
negativeInfo.jcj122BusinessSize |
|
" |
|
:value2="negativeInfo.jcj122Size" |
|
/> |
|
</el-col> |
|
<el-col :span="12"> |
|
<description-pair |
|
label="执法办案" |
|
label2="问题数" |
|
:value1=" |
|
negativeInfo.zfbaBusinessSize |
|
" |
|
:value2="negativeInfo.zfbaSize" |
|
/> |
|
</el-col> |
|
</el-row> |
|
</el-col> |
|
</el-row> |
|
</el-col> |
|
<el-col :span="8"> |
|
<h5 style="margin-bottom: 0">风险指数</h5> |
|
<div class="flex center"> |
|
<el-progress |
|
type="dashboard" |
|
:percentage="score" |
|
:stroke-width="16" |
|
:width="220" |
|
:color="colors" |
|
> |
|
<div class="score-progress-body"> |
|
<div v-if="score"> |
|
<div> |
|
<span |
|
class="score-progress_score score-theme text-bold" |
|
:type="getType(score)" |
|
>{{ score }}</span |
|
> |
|
<span>分</span> |
|
</div> |
|
<div |
|
style="font-size: 14px" |
|
class="mb-16" |
|
> |
|
风险指数 |
|
</div> |
|
</div> |
|
<div |
|
v-else |
|
style=" |
|
font-size: 60px; |
|
line-height: 84px; |
|
color: #999; |
|
" |
|
> |
|
- |
|
</div> |
|
<div |
|
class="score-progress_title score-theme" |
|
:type="getType(score)" |
|
> |
|
{{ getScoreLabel() }} |
|
</div> |
|
</div> |
|
</el-progress> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
<el-row class="mb-20"> |
|
<el-col :span="8"> |
|
<h5>问题来源占比</h5> |
|
<v-charts |
|
style="height: 320px" |
|
:option="problemSourcesPieOptions" |
|
autoresize |
|
/> |
|
</el-col> |
|
<el-col :span="8"> |
|
<h5>问题类型占比</h5> |
|
<v-charts |
|
style="height: 320px" |
|
:option="problemTypePieOptions" |
|
autoresize |
|
/> |
|
</el-col> |
|
<el-col :span="8"> |
|
<h5 style="margin-bottom: 0">风险构成</h5> |
|
<div class="flex center"> |
|
<v-charts |
|
style="height: 340px; width: 280px" |
|
:option="radarOption" |
|
autoresize |
|
/> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
|
|
<h5>问题变化趋势</h5> |
|
<v-charts |
|
style="height: 320px" |
|
:option="barOption" |
|
autoresize |
|
/> |
|
<div></div> |
|
<h5>问题清单</h5> |
|
<el-table :data="negativeList"> |
|
<el-table-column label="发现时间" prop="discoveryTime" /> |
|
<el-table-column label="问题来源" prop="problemSources" /> |
|
<el-table-column label="业务类别" prop="businessTypeName" /> |
|
<el-table-column |
|
label="涉及单位" |
|
prop="involveDepartName" |
|
/> |
|
<el-table-column |
|
label="核查情况" |
|
prop="checkStatusName" |
|
width="140" |
|
align="center" |
|
/> |
|
<el-table-column label="操作" width="160"> |
|
<template #default="{ row }"> |
|
<el-button |
|
type="primary" |
|
link |
|
@click="handleAction(row)" |
|
>查看详情</el-button |
|
> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<div class="flex end mt-8"> |
|
<el-pagination |
|
@size-change="getNegativeList" |
|
@current-change="getNegativeList" |
|
:current-page="negativeQuery.current" |
|
:page-sizes="[10, 20, 50]" |
|
:page-size="negativeQuery.size" |
|
v-model:current-page="negativeQuery.current" |
|
layout="total, sizes, prev, pager, next" |
|
:total="negativeTotal" |
|
> |
|
</el-pagination> |
|
</div> |
|
</main> |
|
</el-scrollbar> |
|
</el-dialog> |
|
|
|
<negative-dialog |
|
v-model="negativeShow" |
|
:id="activeNegativeId" |
|
@close="negativeShow = false" |
|
/> |
|
</template> |
|
<script lang="ts" setup> |
|
import vCharts from "vue-echarts"; |
|
import { |
|
listPoliceNegative, |
|
getPoliceProfile, |
|
listNegativeByPoliceIdCode, |
|
listNegativeMonthly, |
|
} from "@/api/sensitivePerception/profilePolice"; |
|
import { InspectCase } from "@/enums/dictEnums"; |
|
import { getDictLable, getGenderFromIdCode } from "@/utils/util"; |
|
import moment from "moment"; |
|
|
|
import useCatchStore from "@/stores/modules/catch"; |
|
const catchStore = useCatchStore(); |
|
const dict = catchStore.getDicts(["personType"]); |
|
|
|
const query = ref({ |
|
current: 1, |
|
size: 10, |
|
crtTime: [ |
|
moment().startOf("year").format("YYYY-MM-DD HH:mm:ss"), |
|
moment().format("YYYY-MM-DD HH:mm:ss"), |
|
], |
|
}); |
|
const list = ref<any[]>([]); |
|
const total = ref(0); |
|
|
|
const mainLoading = ref(false); |
|
function getList() { |
|
mainLoading.value = true; |
|
listPoliceNegative(query.value).then((data) => { |
|
list.value = data.records; |
|
total.value = data.total; |
|
mainLoading.value = false; |
|
}); |
|
} |
|
|
|
function reset() { |
|
query.value = { |
|
current: 1, |
|
size: 10, |
|
crtTime: [ |
|
moment().startOf("year").format("YYYY-MM-DD HH:mm:ss"), |
|
moment().format("YYYY-MM-DD HH:mm:ss"), |
|
], |
|
}; |
|
getList(); |
|
} |
|
|
|
onMounted(() => { |
|
getList(); |
|
}); |
|
|
|
const activeRow = ref({}); |
|
const show = ref(false); |
|
const policeInfo = ref({}); |
|
const negativeInfo = ref({}); |
|
const loading = ref(false); |
|
|
|
const negativeQuery = ref({ |
|
checkStatusList: [InspectCase.TRUE, InspectCase.TRUE], |
|
}); |
|
const negativeList = ref([]); |
|
const negativeTotal = ref(0); |
|
|
|
const problemSourcesPieOptions = ref({ |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
series: [ |
|
{ |
|
type: "pie", |
|
radius: ["40%", "70%"], |
|
data: [], |
|
}, |
|
], |
|
}); |
|
const problemTypePieOptions = ref({ |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
series: [ |
|
{ |
|
type: "pie", |
|
radius: ["40%", "70%"], |
|
data: [], |
|
}, |
|
], |
|
}); |
|
|
|
const barOption = ref({ |
|
xAxis: { |
|
type: "category", |
|
data: [], |
|
}, |
|
yAxis: { |
|
type: "value", |
|
}, |
|
series: [ |
|
{ |
|
data: [], |
|
type: "bar", |
|
color: "#5B8FF9 ", |
|
}, |
|
], |
|
}); |
|
|
|
async function handleShowProfile(row) { |
|
activeRow.value = row; |
|
show.value = true; |
|
} |
|
|
|
watch(activeRow, async () => { |
|
time.value = [ |
|
moment().startOf("year").format("YYYY-MM-DD HH:mm:ss"), |
|
moment().format("YYYY-MM-DD HH:mm:ss"), |
|
]; |
|
await getProfileData(); |
|
listNegativeMonthly(activeRow.value.idCode).then((data) => { |
|
barOption.value.xAxis.data = data.months; |
|
barOption.value.series[0].data = data.values; |
|
}); |
|
}); |
|
|
|
const time = ref([]); |
|
|
|
const radarOption = ref({ |
|
color: ["#F60000", "#162582"], |
|
legend: { |
|
data: ["风险指数", "权重"], |
|
}, |
|
radar: { |
|
indicator: [ |
|
{ name: "110接处警", max: 100 }, |
|
{ name: "122接处警", max: 100 }, |
|
{ name: "人境窗口服务", max: 100 }, |
|
{ name: "车驾管服务", max: 100 }, |
|
{ name: "交警执法", max: 100 }, |
|
{ name: "执法办案", max: 100 }, |
|
{ name: "专项工作", max: 100 }, |
|
{ name: "安保维稳", max: 100 }, |
|
], |
|
}, |
|
series: [ |
|
{ |
|
type: "radar", |
|
data: [ |
|
{ |
|
value: [], |
|
name: "风险指数", |
|
label: { |
|
show: true, |
|
}, |
|
}, |
|
{ |
|
value: [], |
|
name: "权重", |
|
label: { |
|
show: true, |
|
}, |
|
}, |
|
], |
|
}, |
|
], |
|
}); |
|
|
|
const score = ref(0); |
|
async function getProfileData() { |
|
loading.value = true; |
|
negativeQuery.value.idCode = activeRow.value.idCode; |
|
getNegativeList(); |
|
const data = await getPoliceProfile(activeRow.value.idCode, { |
|
beginTime: time.value.length ? time.value[0] : "", |
|
endTime: time.value.length ? time.value[1] : "", |
|
}); |
|
score.value = Math.round(data.score); |
|
console.log(data.expression); |
|
console.log(data.remarks); |
|
policeInfo.value = data.policeInfo; |
|
negativeInfo.value = data.negativeInfo; |
|
problemSourcesPieOptions.value.series[0].data = data.problemSourcesList; |
|
problemTypePieOptions.value.series[0].data = data.problemTypeList; |
|
|
|
radarOption.value.radar.indicator = data.businessTypeRadarIndicator; |
|
radarOption.value.series[0].data[0].value = data.businessTypeScoreRadarData; |
|
radarOption.value.series[0].data[1].value = |
|
data.businessTypeWeightRadarData; |
|
loading.value = false; |
|
} |
|
|
|
function getNegativeList() { |
|
if (time.value.length === 2) { |
|
negativeQuery.value.beginTime = time.value[0]; |
|
negativeQuery.value.endTime = time.value[1]; |
|
} |
|
listNegativeByPoliceIdCode( |
|
activeRow.value.idCode, |
|
negativeQuery.value |
|
).then((data) => { |
|
negativeList.value = data.records; |
|
negativeTotal.value = data.total; |
|
}); |
|
} |
|
|
|
const negativeShow = ref(false); |
|
const activeNegativeId = ref(""); |
|
function handleAction(row) { |
|
negativeShow.value = true; |
|
activeNegativeId.value = row.id; |
|
} |
|
|
|
const colors = [ |
|
{ color: "var(--success-color)", percentage: 60 }, |
|
{ color: "#DC6231", percentage: 80 }, |
|
{ color: "var(--danger-color)", percentage: 100 }, |
|
]; |
|
|
|
function getType(val) { |
|
if (val < 60) { |
|
return "success"; |
|
} |
|
if (val < 80) { |
|
return "warning"; |
|
} |
|
return "danger"; |
|
} |
|
|
|
function getColor(val) { |
|
if (val < 60) { |
|
return "var(--success-color)"; |
|
} |
|
if (val < 80) { |
|
return "#e87749"; |
|
} |
|
return "var(--danger-color)"; |
|
} |
|
|
|
function getScoreLabel() { |
|
if (score.value === 0) { |
|
return "无法预测"; |
|
} |
|
if (score.value < 60) { |
|
return "低风险"; |
|
} |
|
if (score.value < 80) { |
|
return "中风险"; |
|
} |
|
return "高风险"; |
|
} |
|
</script> |
|
<style lang="scss" scoped> |
|
.col { |
|
--label-width: 60px; |
|
} |
|
.score-progress-body { |
|
text-align: center; |
|
font-size: 18px; |
|
.score-progress_score { |
|
font-size: 60px; |
|
line-height: 84px; |
|
} |
|
.score-progress_title { |
|
font-size: 26px; |
|
line-height: 22px; |
|
} |
|
} |
|
.score-theme { |
|
&[type="success"] { |
|
color: var(--success-color); |
|
} |
|
&[type="warning"] { |
|
color: #e87749; |
|
} |
|
&[type="danger"] { |
|
color: var(--danger-color); |
|
} |
|
} |
|
</style> |