wxc
1 month ago
9 changed files with 345 additions and 592 deletions
@ -0,0 +1,241 @@
|
||||
<template> |
||||
<div class="w100"> |
||||
<div class="flex v-center gap" v-for="(item, index) in data"> |
||||
<div>{{ index + 1}}</div> |
||||
<div |
||||
class="flex v-center bar-item wrap between" |
||||
|
||||
:size="size" |
||||
:style="{ '--label-width': `${labelWidth}px` }" |
||||
:position="labelPosition" |
||||
style="width: calc(100% - 20px)" |
||||
> |
||||
<span class="bar-item-label mr-8"> |
||||
{{ item.label }} |
||||
</span> |
||||
<div class="bar-item_content " :long="!item.denominator" > |
||||
<div |
||||
class="bar-item_content-bar relative" |
||||
:style="{ |
||||
width: `${(item.value / max) * 100}%`, |
||||
background: getColor((item.value / max) * 100), |
||||
}" |
||||
> |
||||
<span class="bar-item_value">{{ item.value }}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script setup> |
||||
import {onMounted} from "vue"; |
||||
|
||||
const props = defineProps({ |
||||
title: { |
||||
type: String, |
||||
default: "", |
||||
}, |
||||
isgroupby:{ |
||||
type:Boolean, |
||||
default:false |
||||
}, |
||||
subTitle: { |
||||
type: String, |
||||
default: "", |
||||
}, |
||||
data: { |
||||
type: Array, |
||||
default: [], |
||||
}, |
||||
size: { |
||||
type: String, |
||||
default: "", |
||||
}, |
||||
unit: { |
||||
type: String, |
||||
default: "", |
||||
}, |
||||
color: { |
||||
type: Object, |
||||
default: "linear-gradient(270deg, #63e700 0%, #19674c 100%)", |
||||
}, |
||||
labelWidth: { |
||||
type: Number, |
||||
default: 80, |
||||
}, |
||||
labelPosition: { |
||||
type: String, |
||||
default: "left", |
||||
}, |
||||
remarkFontSize: {type: String, default: "10px",}, |
||||
spanClass: { type: String, default: "", }, |
||||
showValue:{ |
||||
type:Boolean, |
||||
default:true |
||||
}, |
||||
|
||||
}); |
||||
|
||||
const max = ref(100); |
||||
watch( |
||||
() => props.data, |
||||
() => { |
||||
getMax(); |
||||
} |
||||
); |
||||
|
||||
|
||||
function getMax() { |
||||
if (props.unit !== "%") { |
||||
max.value = Math.max(...props.data.map((item) => item.value)); |
||||
} |
||||
} |
||||
|
||||
onMounted(() => { |
||||
getMax(); |
||||
}); |
||||
|
||||
function getColor(val) { |
||||
if (props.color instanceof String) { |
||||
return props.color; |
||||
} |
||||
// console.log(val) |
||||
if (props.color instanceof Array) { |
||||
const colors = [...props.color]; |
||||
// percentage降序 |
||||
colors.sort((a, b) => b.percentage - a.percentage); |
||||
for (let i = 0; i < colors.length; i++) { |
||||
if (val > colors[i].percentage) { |
||||
return colors[i].color; |
||||
} |
||||
} |
||||
} |
||||
return "linear-gradient(270deg, #63e700 0%, #19674c 100%)"; |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.bar-title { |
||||
font-size: 19px; |
||||
|
||||
} |
||||
|
||||
.bar-sub-title { |
||||
color: #597ae9; |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.bar-item { |
||||
font-size: 17px; |
||||
|
||||
&[size="large"] { |
||||
.bar-item_content { |
||||
.bar-item_content-bar { |
||||
height: 13px; |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
&[size="bigNumber"] { |
||||
.bar-item_content { |
||||
width: calc(100% - var(--label-width) - 16px - 100px); |
||||
} |
||||
} |
||||
|
||||
&[size="small"] { |
||||
font-size: 12px; |
||||
|
||||
.bar-item_content { |
||||
width: calc(100% - 180px); |
||||
} |
||||
.bar-item_value { |
||||
position: absolute; |
||||
right: -20px; |
||||
line-height: 9px; |
||||
} |
||||
|
||||
} |
||||
|
||||
.bar-item-label { |
||||
text-align: right; |
||||
width: var(--label-width); |
||||
overflow: hidden; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
} |
||||
|
||||
&[position="left"] { |
||||
height: 32px; |
||||
line-height: 32px; |
||||
} |
||||
|
||||
&[position="top"] { |
||||
margin-bottom: 4px; |
||||
|
||||
.bar-item-label { |
||||
width: 100%; |
||||
text-align: left; |
||||
} |
||||
|
||||
.bar-item_content { |
||||
width: calc(100% - 80px); |
||||
} |
||||
} |
||||
|
||||
.bar-item_content { |
||||
width: calc(100% - var(--label-width) - 16px - 30px); |
||||
|
||||
&[long=false] { |
||||
width: calc(100% - var(--label-width) - 36px - 110px); |
||||
} |
||||
|
||||
.bar-item_content-bar { |
||||
width: 0; |
||||
height: 9px; |
||||
background: linear-gradient(270deg, #63e700 0%, #19674c 100%); |
||||
transition: width 0.3s; |
||||
|
||||
} |
||||
.bar_item_comtent_div{ |
||||
display: flex; |
||||
height: 100%; |
||||
} |
||||
.bar-item_content-bar-item{ |
||||
height: 13px; |
||||
transition: width 0.3s; |
||||
background: linear-gradient(270deg, #63e700 0%, #19674c 100%); |
||||
} |
||||
} |
||||
|
||||
.bar-item_remark { |
||||
font-size: 14px; |
||||
|
||||
.text-success { |
||||
color: #09c700; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.right-aligned { |
||||
text-align: right; |
||||
width: 60px; |
||||
} |
||||
.dynamic-width { |
||||
width: 70%; |
||||
} |
||||
|
||||
.popover_content{ |
||||
font-size: 15px; |
||||
} |
||||
|
||||
.popover_border{ |
||||
display: inline-block; |
||||
height: 12px; |
||||
width: 12px; |
||||
border-radius: 50%; |
||||
margin-right: 5px; |
||||
} |
||||
|
||||
|
||||
</style> |
||||
@ -1,518 +0,0 @@
|
||||
<template> |
||||
<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"> |
||||
<img v-if="policeInfo.avatarUrl" :src="`${BASE_PATH}/file/stream/${policeInfo.avatarUrl}`" |
||||
class="police-avatar" style="width: 94px"/> |
||||
<icon name="local-icon-police" :size="120" v-else/> |
||||
</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-24"> |
||||
<label>警号</label> |
||||
<span>{{ policeInfo.empNo }}</span> |
||||
</div> |
||||
<div class="col col-24"> |
||||
<label>身份证号</label> |
||||
<span>{{ policeInfo.idCode }}</span> |
||||
</div> |
||||
<div class="col col-24"> |
||||
<label>入职时间</label> |
||||
<span>{{ |
||||
policeInfo.employmentDate || "/" |
||||
}}</span> |
||||
</div> |
||||
<div class="col col-24"> |
||||
<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> |
||||
</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="100" |
||||
:stroke-width="16" |
||||
:width="220" |
||||
color="#DC6231" |
||||
> |
||||
<div class="score-progress-body"> |
||||
<div v-if="score"> |
||||
<div> |
||||
<span |
||||
class="score-progress_score score-theme text-bold" |
||||
|
||||
>{{ 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" style="width: 100%"> |
||||
<v-charts |
||||
style="height: 340px; width: 100%" |
||||
: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" width="160" /> |
||||
<el-table-column label="问题来源" prop="problemSources" width="150" /> |
||||
<el-table-column label="业务类别" prop="businessTypeName" width="150" /> |
||||
<el-table-column |
||||
label="问题详情" |
||||
prop="thingDesc" |
||||
show-overflow-tooltip |
||||
/> |
||||
<el-table-column |
||||
label="核查情况" |
||||
prop="checkStatusDesc" |
||||
show-overflow-tooltip |
||||
/> |
||||
<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> |
||||
</template> |
||||
<script setup> |
||||
import vCharts from "vue-echarts"; |
||||
import {BASE_PATH} from "@/api/request"; |
||||
import {InspectCase} from "@/enums/dictEnums"; |
||||
import { |
||||
getDepartProfile, |
||||
listNegativeMonthly, |
||||
} from "@/api/sensitivePerception/profileDepart"; |
||||
import {listNegative} from "@/api/work/negative"; |
||||
import moment from "moment"; |
||||
import {getGenderFromIdCode} from "@/utils/util.ts"; |
||||
import {getPoliceProfile, listNegativeByPoliceIdCode} from "@/api/sensitivePerception/profilePolice.ts"; |
||||
|
||||
const props = defineProps({ |
||||
empNo: { |
||||
type: String, |
||||
default: 0, |
||||
}, |
||||
}); |
||||
const activeRow = ref({}); |
||||
const policeInfo = ref({}); |
||||
const time = ref([ |
||||
moment().subtract(12, "month").format("YYYY-MM-DD HH:mm:ss"), |
||||
moment().format("YYYY-MM-DD HH:mm:ss"), |
||||
]); |
||||
const colors = [ |
||||
{color: "#5AD8A6", percentage: 40}, |
||||
{color: "#F6BD16", percentage: 60}, |
||||
{color: "#E8684A ", percentage: 80}, |
||||
]; |
||||
const colors2 = [ |
||||
{color: "var(--success-color)", percentage: 60}, |
||||
{color: "#DC6231", percentage: 80}, |
||||
{color: "var(--danger-color)", percentage: 100}, |
||||
]; |
||||
const loading = ref(false); |
||||
const departInfo = ref({}); |
||||
const negativeInfo = ref({}); |
||||
const negativeQuery = ref({ |
||||
checkStatusList: [InspectCase.TRUE, InspectCase.TRUE], |
||||
}); |
||||
const negativeList = ref([]); |
||||
const negativeTotal = ref(0); |
||||
const problemTypeBarList = ref([]); |
||||
const score = ref(0); |
||||
const problemTypePieOptions = ref({ |
||||
tooltip: { |
||||
trigger: "item", |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: "pie", |
||||
radius: ["40%", "70%"], |
||||
data: [], |
||||
}, |
||||
], |
||||
}); |
||||
|
||||
async function getProfileData() { |
||||
loading.value = true; |
||||
negativeQuery.value.idCode = props.empNo; |
||||
getNegativeList(); |
||||
const data = await getPoliceProfile(props.empNo, { |
||||
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( |
||||
props.empNo, |
||||
negativeQuery.value |
||||
).then((data) => { |
||||
negativeList.value = data.records; |
||||
negativeTotal.value = data.total; |
||||
}); |
||||
} |
||||
|
||||
const barOption = ref({ |
||||
xAxis: { |
||||
type: "category", |
||||
data: [], |
||||
}, |
||||
yAxis: { |
||||
type: "value", |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: [], |
||||
type: "bar", |
||||
color: "#5B8FF9 ", |
||||
}, |
||||
], |
||||
}); |
||||
|
||||
watch( |
||||
() => props.empNo, |
||||
() => { |
||||
getProfileData(); |
||||
listNegativeMonthly(props.empNo).then((data) => { |
||||
barOption.value.xAxis.data = data.months; |
||||
barOption.value.series[0].data = data.values; |
||||
}); |
||||
}); |
||||
|
||||
|
||||
const radarOption = ref({ |
||||
radar: { |
||||
indicator: [], |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: "radar", |
||||
data: [ |
||||
{ |
||||
value: [], |
||||
}, |
||||
{ |
||||
value: [], |
||||
}, |
||||
], |
||||
label: { |
||||
show: true, |
||||
}, |
||||
}, |
||||
], |
||||
}); |
||||
const problemSourcesPieOptions = ref({ |
||||
tooltip: { |
||||
trigger: "item", |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: "pie", |
||||
radius: ["40%", "70%"], |
||||
data: [], |
||||
}, |
||||
], |
||||
}); |
||||
const businessTypePieOptions = ref({ |
||||
tooltip: { |
||||
trigger: "item", |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: "pie", |
||||
radius: ["40%", "70%"], |
||||
data: [], |
||||
}, |
||||
], |
||||
}); |
||||
|
||||
const policeBarList = ref([]); |
||||
|
||||
function getType(val) { |
||||
if (val < 60) { |
||||
return "success"; |
||||
} |
||||
if (val < 80) { |
||||
return "warning"; |
||||
} |
||||
return "danger"; |
||||
} |
||||
|
||||
function getScoreLabel() { |
||||
if (score.value === 0) { |
||||
return "无法预测"; |
||||
} |
||||
if (score.value < 60) { |
||||
return "低风险"; |
||||
} |
||||
if (score.value < 80) { |
||||
return "中风险"; |
||||
} |
||||
return "高风险"; |
||||
} |
||||
|
||||
const negativeShow = ref(false); |
||||
const activeNegativeId = ref(""); |
||||
|
||||
function handleAction(row) { |
||||
negativeShow.value = true; |
||||
activeNegativeId.value = row.id; |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
main { |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.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> |
||||
Loading…
Reference in new issue