Browse Source

fix: 完善单位问题画像、个人问题画像

main
wxc 1 year ago
parent
commit
463ae6de51
  1. 15
      src/components/datav/chart-bar.vue
  2. 15
      src/utils/util.ts
  3. 14
      src/views/datav/Gobal.vue
  4. 126
      src/views/sensitivePerception/DepartNegative.vue
  5. 143
      src/views/sensitivePerception/PoliceNegative.vue

15
src/components/datav/chart-bar.vue

@ -8,9 +8,10 @@
class="flex v-center bar-item between" class="flex v-center bar-item between"
v-for="item in data" v-for="item in data"
:size="size" :size="size"
:style="{'--label-width': `${labelWidth}px`}"
> >
<span class="bar-item-name mr-10">{{ item.label }}</span> <span class="bar-item-label mr-10">{{ item.label }}</span>
<div class="bar-item_content mr-16"> <div class="bar-item_content mr-16" >
<div <div
class="bar-item_content-bar" class="bar-item_content-bar"
:style="{ :style="{
@ -59,6 +60,10 @@ const props = defineProps({
color: { color: {
type: Object, type: Object,
default: "linear-gradient(270deg, #63e700 0%, #19674c 100%)" default: "linear-gradient(270deg, #63e700 0%, #19674c 100%)"
},
labelWidth: {
type: Number,
default: 80
} }
}); });
@ -123,12 +128,12 @@ function getColor(val) {
height: 25px; height: 25px;
font-size: 12px; font-size: 12px;
} }
.bar-item-name { .bar-item-label {
width: 19%;
text-align: right; text-align: right;
width: var(--label-width);
} }
.bar-item_content { .bar-item_content {
width: 55%; width: calc(100% - var(--label-width) - 80px);
.bar-item_content-bar { .bar-item_content-bar {
width: 0; width: 0;
height: 9px; height: 9px;

15
src/utils/util.ts

@ -369,3 +369,18 @@ export function getInvolveProblem(json) {
} }
return JSON.parse(json).map(item => item.dictLabel).join(' ') return JSON.parse(json).map(item => item.dictLabel).join(' ')
} }
export function getGenderFromIdCode(idCode) {
// 检查身份证号码是否有效(长度为18位)
if (!idCode || idCode.length !== 18) {
return "";
}
// 获取第17位数字
const genderCode = parseInt(idCode.charAt(16), 10);
// 检查是否为数字
if (isNaN(genderCode)) {
return "";
}
// 根据第17位数字判断性别
return genderCode % 2 === 0 ? "女" : "男";
}

14
src/views/datav/Gobal.vue

@ -387,49 +387,49 @@ const option1 = ref({
const data1 = [ const data1 = [
{ {
name: "开福分局", label: "开福分局",
value: 97, value: 97,
unit: "%", unit: "%",
numerator: 97, numerator: 97,
denominator: 100, denominator: 100,
}, },
{ {
name: "芙蓉分局", label: "芙蓉分局",
value: 90, value: 90,
unit: "%", unit: "%",
numerator: 90, numerator: 90,
denominator: 100, denominator: 100,
}, },
{ {
name: "岳麓分局", label: "岳麓分局",
value: 85, value: 85,
unit: "%", unit: "%",
numerator: 85, numerator: 85,
denominator: 100, denominator: 100,
}, },
{ {
name: "雨花分局", label: "雨花分局",
value: 80, value: 80,
unit: "%", unit: "%",
numerator: 80, numerator: 80,
denominator: 100, denominator: 100,
}, },
{ {
name: "望城分局", label: "望城分局",
value: 71, value: 71,
unit: "%", unit: "%",
numerator: 71, numerator: 71,
denominator: 100, denominator: 100,
}, },
{ {
name: "浏阳市局", label: "浏阳市局",
value: 66, value: 66,
unit: "%", unit: "%",
numerator: 66, numerator: 66,
denominator: 100, denominator: 100,
}, },
{ {
name: "长沙县局", label: "长沙县局",
value: 62, value: 62,
unit: "%", unit: "%",
numerator: 62, numerator: 62,

126
src/views/sensitivePerception/DepartNegative.vue

@ -19,7 +19,7 @@
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-form-item label="三级单位"> <el-form-item label="单位">
<depart-tree-select <depart-tree-select
v-model="query.departId" v-model="query.departId"
:check-strictly="false" :check-strictly="false"
@ -83,7 +83,11 @@
align="center" align="center"
width="160" width="160"
/> />
<el-table-column label="风险指数" align="center" width="160">
<template #default="{ row }">
<span>/</span>
</template>
</el-table-column>
<el-table-column label="操作"> <el-table-column label="操作">
<template #default="{ row }"> <template #default="{ row }">
<el-button <el-button
@ -112,7 +116,13 @@
</div> </div>
</div> </div>
<el-dialog title="单位问题画像" v-model="show" width="85vw" top="2vh"> <el-dialog
title="单位问题画像"
v-model="show"
width="85vw"
top="1vh"
style="margin: 1vh auto"
>
<header class="flex center v-center gap"> <header class="flex center v-center gap">
<label>统计范围</label> <label>统计范围</label>
<div style="width: 320px"> <div style="width: 320px">
@ -124,7 +134,12 @@
</div> </div>
<el-button type="primary" @click="getProfileData">查询</el-button> <el-button type="primary" @click="getProfileData">查询</el-button>
</header> </header>
<main v-loading="loading"> <el-scrollbar
max-height="calc(98vh - 120px)"
v-loading="loading"
element-loading-text="单位问题画像加载中..."
>
<main>
<el-row class="mb-20"> <el-row class="mb-20">
<el-col :span="8"> <el-col :span="8">
<h5>单位情况</h5> <h5>单位情况</h5>
@ -176,7 +191,10 @@
style="height: calc(100% - 76px)" style="height: calc(100% - 76px)"
> >
<el-col :span="6" class="text-center"> <el-col :span="6" class="text-center">
<div class="text-primary" style="font-size: 34px"> <div
class="text-primary"
style="font-size: 34px"
>
{{ activeRow.verifySize }} {{ activeRow.verifySize }}
</div> </div>
<div>问题总数</div> <div>问题总数</div>
@ -187,7 +205,9 @@
<description-pair <description-pair
label1="110接处警量" label1="110接处警量"
label2="问题数" label2="问题数"
:value1="negativeInfo.jcjBusinessSize" :value1="
negativeInfo.jcjBusinessSize
"
:value2="negativeInfo.jcjSize" :value2="negativeInfo.jcjSize"
/> />
</el-col> </el-col>
@ -195,7 +215,9 @@
<description-pair <description-pair
label1="执法办案" label1="执法办案"
label2="问题数" label2="问题数"
:value1="negativeInfo.zfbaBusinessSize" :value1="
negativeInfo.zfbaBusinessSize
"
:value2="negativeInfo.zfbaSize" :value2="negativeInfo.zfbaSize"
/> />
</el-col> </el-col>
@ -255,6 +277,11 @@
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<h5>风险问题构成</h5> <h5>风险问题构成</h5>
<v-charts
style="height: 320px"
:option="radarOption"
autoresize
/>
</el-col> </el-col>
</el-row> </el-row>
<el-row class="mb-20"> <el-row class="mb-20">
@ -268,11 +295,10 @@
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<h5>突出问题排名</h5> <h5>突出问题排名</h5>
<datav-chart-bar size="small" :data="[]" /> <datav-chart-bar size="small" :data="problemTypeBarList" :color="colors" />
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<h5>单位问题标签</h5> <h5>单位问题标签</h5>
<datav-chart-bar size="small" :data="[]" />
</el-col> </el-col>
</el-row> </el-row>
<div style="margin-top: 60px"> <div style="margin-top: 60px">
@ -289,7 +315,10 @@
<el-table-column label="发现时间" prop="discoveryTime" /> <el-table-column label="发现时间" prop="discoveryTime" />
<el-table-column label="问题来源" prop="problemSources" /> <el-table-column label="问题来源" prop="problemSources" />
<el-table-column label="业务类别" prop="businessTypeName" /> <el-table-column label="业务类别" prop="businessTypeName" />
<el-table-column label="涉及单位" prop="involveDepartName" /> <el-table-column
label="涉及单位"
prop="involveDepartName"
/>
<el-table-column <el-table-column
label="核查情况" label="核查情况"
prop="checkStatusName" prop="checkStatusName"
@ -321,6 +350,7 @@
</el-pagination> </el-pagination>
</div> </div>
</main> </main>
</el-scrollbar>
</el-dialog> </el-dialog>
<negative-dialog <negative-dialog
@ -445,13 +475,34 @@ watch(activeRow, async () => {
moment().format("YYYY-MM-DD HH:mm:ss"), moment().format("YYYY-MM-DD HH:mm:ss"),
]; ];
await getProfileData(); await getProfileData();
listNegativeMonthly(row.departId).then((data) => { listNegativeMonthly(activeRow.value.departId).then((data) => {
barOption.value.xAxis.data = data.months; barOption.value.xAxis.data = data.months;
barOption.value.series[0].data = data.values; barOption.value.series[0].data = data.values;
}); });
}); });
const time = ref([]); const time = ref([]);
const radarOption = ref({
radar: {
indicator: [],
},
series: [
{
type: "radar",
data: [
{
value: [],
},
],
label: {
show: true
}
},
],
});
const problemTypeBarList = ref([])
async function getProfileData() { async function getProfileData() {
loading.value = true; loading.value = true;
negativeQuery.value.involveDepartId = activeRow.value.departId; negativeQuery.value.involveDepartId = activeRow.value.departId;
@ -467,6 +518,11 @@ async function getProfileData() {
businessTypePieOptions.value.series[0].data = data.businessTypeList; businessTypePieOptions.value.series[0].data = data.businessTypeList;
policeBarList.value = data.policeBarList; policeBarList.value = data.policeBarList;
radarOption.value.radar.indicator = data.problemTypeRadarIndicator
radarOption.value.series[0].data[0].value = data.problemTypeRadarData
problemTypeBarList.value = data.problemTypeBarList
loading.value = false; loading.value = false;
} }
@ -483,54 +539,6 @@ const colors = [
{ color: "#E8684A ", percentage: 80 }, { color: "#E8684A ", percentage: 80 },
]; ];
const barList = [
{
label: "张三",
value: 67,
},
{
label: "李四",
value: 80,
},
{
label: "王五",
value: 40,
},
{
label: "王五",
value: 40,
},
{
label: "王五",
value: 10,
},
];
const radarOption = {
radar: {
// shape: 'circle',
indicator: [
{ name: "内部管理", max: 6500 },
{ name: "涉及监督", max: 6500 },
{ name: "记录作风", max: 30000 },
{ name: "警保卫工作", max: 38000 },
{ name: "执法办案", max: 52000 },
{ name: "专项工作", max: 25000 },
],
},
series: [
{
name: "Budget vs spending",
type: "radar",
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
},
],
},
],
};
const negativeShow = ref(false); const negativeShow = ref(false);
const activeNegativeId = ref(""); const activeNegativeId = ref("");
function handleAction(row) { function handleAction(row) {

143
src/views/sensitivePerception/PoliceNegative.vue

@ -50,7 +50,7 @@
</div> </div>
</div> </div>
</header> </header>
<div class="table-container"> <div class="table-container" v-loading="mainLoading">
<el-table :data="list"> <el-table :data="list">
<el-table-column label="姓名" prop="name" /> <el-table-column label="姓名" prop="name" />
<el-table-column label="性别"> <el-table-column label="性别">
@ -85,6 +85,11 @@
width="120" width="120"
align="center" align="center"
/> />
<el-table-column label="风险指数" align="center" width="160">
<template #default="{ row }">
<span>/</span>
</template>
</el-table-column>
<el-table-column label="操作" width="160"> <el-table-column label="操作" width="160">
<template #default="{ row }"> <template #default="{ row }">
<el-button <el-button
@ -113,7 +118,13 @@
</div> </div>
</div> </div>
<el-dialog title="个人问题画像" v-model="show" width="85vw" top="2vh"> <el-dialog
title="个人问题画像"
v-model="show"
width="85vw"
top="1vh"
style="margin: 1vh auto"
>
<header class="flex center v-center gap"> <header class="flex center v-center gap">
<label>统计范围</label> <label>统计范围</label>
<div style="width: 320px"> <div style="width: 320px">
@ -125,13 +136,18 @@
</div> </div>
<el-button type="primary" @click="getProfileData">查询</el-button> <el-button type="primary" @click="getProfileData">查询</el-button>
</header> </header>
<main v-loading="loading"> <el-scrollbar
max-height="calc(98vh - 120px)"
v-loading="loading"
element-loading-text="个人问题画像加载中..."
>
<main>
<el-row class="mb-20"> <el-row class="mb-20">
<el-col :span="8"> <el-col :span="8">
<h5>民警基本情况</h5> <h5>民警基本情况</h5>
<el-row> <el-row>
<el-col :span="6"> <el-col :span="6">
<img src="/imgs/police.jpeg" /> <img src="/favicon.png" />
</el-col> </el-col>
<el-col :span="18"> <el-col :span="18">
<div class="row"> <div class="row">
@ -142,7 +158,9 @@
<div class="col col-12"> <div class="col col-12">
<label>性别</label> <label>性别</label>
<span>{{ <span>{{
getGenderFromIdCode(policeInfo.idCode) getGenderFromIdCode(
policeInfo.idCode
)
}}</span> }}</span>
</div> </div>
<div class="col col-24"> <div class="col col-24">
@ -154,7 +172,9 @@
? activeRow.parentDepartName + ? activeRow.parentDepartName +
"/" "/"
: activeRow.parentDepartName : activeRow.parentDepartName
}}{{ activeRow.departName }}</span }}{{
activeRow.departName
}}</span
> >
</span> </span>
</div> </div>
@ -164,11 +184,15 @@
</div> </div>
<div class="col col-12"> <div class="col col-12">
<label>任职年份</label> <label>任职年份</label>
<span>{{ policeInfo.employmentDate }}</span> <span>{{
policeInfo.employmentDate || "/"
}}</span>
</div> </div>
<div class="col col-12"> <div class="col col-12">
<label>手机号</label> <label>手机号</label>
<span>{{ policeInfo.mobile }}</span> <span>{{
policeInfo.mobile || "/"
}}</span>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -181,7 +205,10 @@
style="height: calc(100% - 76px)" style="height: calc(100% - 76px)"
> >
<el-col :span="6" class="text-center"> <el-col :span="6" class="text-center">
<div class="text-primary" style="font-size: 34px"> <div
class="text-primary"
style="font-size: 34px"
>
{{ activeRow.verifySize }} {{ activeRow.verifySize }}
</div> </div>
<div>问题总数</div> <div>问题总数</div>
@ -192,7 +219,9 @@
<description-pair <description-pair
label1="110接处警量" label1="110接处警量"
label2="问题数" label2="问题数"
:value1="negativeInfo.jcjBusinessSize" :value1="
negativeInfo.jcjBusinessSize
"
:value2="negativeInfo.jcjSize" :value2="negativeInfo.jcjSize"
/> />
</el-col> </el-col>
@ -200,7 +229,9 @@
<description-pair <description-pair
label1="执法办案" label1="执法办案"
label2="问题数" label2="问题数"
:value1="negativeInfo.zfbaBusinessSize" :value1="
negativeInfo.zfbaBusinessSize
"
:value2="negativeInfo.zfbaSize" :value2="negativeInfo.zfbaSize"
/> />
</el-col> </el-col>
@ -260,18 +291,30 @@
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<h5>风险问题构成</h5> <h5>风险问题构成</h5>
<v-charts
style="height: 320px"
:option="radarOption"
autoresize
/>
</el-col> </el-col>
</el-row> </el-row>
<h5>问题变化趋势</h5> <h5>问题变化趋势</h5>
<v-charts style="height: 320px" :option="barOption" autoresize /> <v-charts
style="height: 320px"
:option="barOption"
autoresize
/>
<div></div> <div></div>
<h5>问题清单</h5> <h5>问题清单</h5>
<el-table :data="negativeList"> <el-table :data="negativeList">
<el-table-column label="发现时间" prop="discoveryTime" /> <el-table-column label="发现时间" prop="discoveryTime" />
<el-table-column label="问题来源" prop="problemSources" /> <el-table-column label="问题来源" prop="problemSources" />
<el-table-column label="业务类别" prop="businessTypeName" /> <el-table-column label="业务类别" prop="businessTypeName" />
<el-table-column label="涉及单位" prop="involveDepartName" /> <el-table-column
label="涉及单位"
prop="involveDepartName"
/>
<el-table-column <el-table-column
label="核查情况" label="核查情况"
prop="checkStatusName" prop="checkStatusName"
@ -303,6 +346,7 @@
</el-pagination> </el-pagination>
</div> </div>
</main> </main>
</el-scrollbar>
</el-dialog> </el-dialog>
<negative-dialog <negative-dialog
@ -320,7 +364,7 @@ import {
listNegativeMonthly, listNegativeMonthly,
} from "@/api/sensitivePerception/profilePolice"; } from "@/api/sensitivePerception/profilePolice";
import { InspectCase } from "@/enums/dictEnums"; import { InspectCase } from "@/enums/dictEnums";
import { getDictLable } from "@/utils/util"; import { getDictLable, getGenderFromIdCode } from "@/utils/util";
import moment from "moment"; import moment from "moment";
import useCatchStore from "@/stores/modules/catch"; import useCatchStore from "@/stores/modules/catch";
@ -338,10 +382,13 @@ const query = ref({
const list = ref<any[]>([]); const list = ref<any[]>([]);
const total = ref(0); const total = ref(0);
const mainLoading = ref(false);
function getList() { function getList() {
mainLoading.value = true;
listPoliceNegative(query.value).then((data) => { listPoliceNegative(query.value).then((data) => {
list.value = data.records; list.value = data.records;
total.value = data.total; total.value = data.total;
mainLoading.value = false;
}); });
} }
@ -426,13 +473,33 @@ watch(activeRow, async () => {
moment().format("YYYY-MM-DD HH:mm:ss"), moment().format("YYYY-MM-DD HH:mm:ss"),
]; ];
await getProfileData(); await getProfileData();
listNegativeMonthly(row.idCode).then((data) => { listNegativeMonthly(activeRow.value.idCode).then((data) => {
barOption.value.xAxis.data = data.months; barOption.value.xAxis.data = data.months;
barOption.value.series[0].data = data.values; barOption.value.series[0].data = data.values;
}); });
}) });
const time = ref([]); const time = ref([]);
const radarOption = ref({
radar: {
indicator: [],
},
series: [
{
type: "radar",
data: [
{
value: [],
},
],
label: {
show: true
}
},
],
});
async function getProfileData() { async function getProfileData() {
loading.value = true; loading.value = true;
negativeQuery.value.idCode = activeRow.value.idCode; negativeQuery.value.idCode = activeRow.value.idCode;
@ -447,6 +514,8 @@ async function getProfileData() {
problemSourcesPieOptions.value.series[0].data = data.problemSourcesList; problemSourcesPieOptions.value.series[0].data = data.problemSourcesList;
businessTypePieOptions.value.series[0].data = data.businessTypeList; businessTypePieOptions.value.series[0].data = data.businessTypeList;
radarOption.value.radar.indicator = data.problemTypeRadarIndicator
radarOption.value.series[0].data[0].value = data.problemTypeRadarData
loading.value = false; loading.value = false;
} }
@ -464,48 +533,6 @@ function getNegativeList() {
}); });
} }
const radarOption = {
radar: {
// shape: 'circle',
indicator: [
{ name: "内部管理", max: 6500 },
{ name: "涉及监督", max: 6500 },
{ name: "记录作风", max: 30000 },
{ name: "警保卫工作", max: 38000 },
{ name: "执法办案", max: 52000 },
{ name: "专项工作", max: 25000 },
],
},
series: [
{
name: "Budget vs spending",
type: "radar",
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
},
],
},
],
};
function getGenderFromIdCode(idCode) {
// 18
if (!idCode || idCode.length !== 18) {
return "";
}
// 17
const genderCode = parseInt(idCode.charAt(16), 10);
//
if (isNaN(genderCode)) {
return "";
}
// 17
return genderCode % 2 === 0 ? "女" : "男";
}
const negativeShow = ref(false); const negativeShow = ref(false);
const activeNegativeId = ref(""); const activeNegativeId = ref("");
function handleAction(row) { function handleAction(row) {

Loading…
Cancel
Save