wxc
11 months ago
7 changed files with 779 additions and 492 deletions
@ -0,0 +1,30 @@
|
||||
import request from "@/api/request"; |
||||
|
||||
export function listProblemTypeMaping(query) { |
||||
return request.get({ |
||||
url: '/problemTypeMaping', |
||||
query |
||||
}); |
||||
} |
||||
|
||||
|
||||
export function addProblemTypeMaping(body) { |
||||
return request.post({ |
||||
url: '/problemTypeMaping', |
||||
body |
||||
}); |
||||
} |
||||
|
||||
|
||||
export function updateProblemTypeMaping(body) { |
||||
return request.put({ |
||||
url: '/problemTypeMaping', |
||||
body |
||||
}); |
||||
} |
||||
|
||||
export function delProblemTypeMaping(id) { |
||||
return request.del({ |
||||
url: '/problemTypeMaping/' + id |
||||
}); |
||||
} |
||||
@ -0,0 +1,501 @@
|
||||
<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" |
||||
@change="getProfileData" |
||||
style="width: 300px" |
||||
/> |
||||
</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="12"> |
||||
<div class="row"> |
||||
<div class="col col-24"> |
||||
<label>单位名称</label> |
||||
<span>{{ departInfo.name }}</span> |
||||
</div> |
||||
<div class="col col-24"> |
||||
<label>所长</label> |
||||
<span>{{ departInfo.mainRole }}</span> |
||||
</div> |
||||
<div class="col col-24"> |
||||
<label>副所长</label> |
||||
<span> |
||||
<span |
||||
v-for="item in departInfo.deputyRole" |
||||
:key="item" |
||||
class="mr-10" |
||||
>{{ item }}</span |
||||
> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="12" v-if="departInfo.departImg"> |
||||
<img |
||||
:src="`${BASE_PATH}/file/stream/${departInfo.departImg}`" |
||||
style="max-height: 96px" |
||||
/> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row> |
||||
<el-col :span="12"> |
||||
<description-pair |
||||
label1="民警总人数" |
||||
label2="问题涉及民警数" |
||||
:value1="departInfo.negativePoliceSize" |
||||
:value2="departInfo.negativePoliceSize" |
||||
size="large" |
||||
/> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<description-pair |
||||
label1="协辅警人数" |
||||
label2="问题涉及协辅警数" |
||||
:value1="departInfo.negativeAuxSize" |
||||
:value2="departInfo.negativeAuxSize" |
||||
size="large" |
||||
/> |
||||
</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>问题总数</div> |
||||
</el-col> |
||||
<el-col :span="18"> |
||||
<el-row> |
||||
<el-col |
||||
:span="12" |
||||
class="mb-20" |
||||
v-if=" |
||||
negativeInfo.jcj110BusinessSize || |
||||
negativeInfo.jcj110Size |
||||
" |
||||
> |
||||
<description-pair |
||||
label1="110接处警量" |
||||
label2="110接处警问题数" |
||||
:value1=" |
||||
negativeInfo.jcj110BusinessSize |
||||
" |
||||
:value2="negativeInfo.jcj110Size" |
||||
/> |
||||
</el-col> |
||||
<el-col |
||||
:span="12" |
||||
v-if=" |
||||
negativeInfo.jcj122BusinessSize || |
||||
negativeInfo.jcj122Size |
||||
" |
||||
> |
||||
<description-pair |
||||
label1="122接处警量" |
||||
label2="122接处警问题数" |
||||
:value1=" |
||||
negativeInfo.jcj122BusinessSize |
||||
" |
||||
:value2="negativeInfo.jcj122Size" |
||||
/> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<description-pair |
||||
label1="执法办案" |
||||
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="colors2" |
||||
> |
||||
<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="businessTypePieOptions" |
||||
autoresize |
||||
/> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<h5>风险问题构成</h5> |
||||
<v-charts |
||||
style="height: 320px" |
||||
:option="radarOption" |
||||
autoresize |
||||
/> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row class="mb-20" :gutter="20"> |
||||
<el-col :span="8"> |
||||
<h5>个人问题排名</h5> |
||||
<el-scrollbar max-height="300px"> |
||||
<datav-chart-bar |
||||
size="small" |
||||
:data="policeBarList" |
||||
:color="colors" |
||||
/> |
||||
<el-empty v-if="policeBarList.length === 0" /> |
||||
</el-scrollbar> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<h5>突出问题排名</h5> |
||||
<el-scrollbar max-height="300px"> |
||||
<datav-chart-bar |
||||
size="small" |
||||
:data="problemTypeBarList" |
||||
:color="colors" |
||||
labelPosition="top" |
||||
/> |
||||
<el-empty v-if="problemTypeBarList.length === 0" /> |
||||
</el-scrollbar> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<h5>单位问题标签</h5> |
||||
</el-col> |
||||
</el-row> |
||||
<div style="margin-top: 60px"> |
||||
<h5>问题变化趋势</h5> |
||||
<v-charts |
||||
style="height: 320px" |
||||
:option="barOption" |
||||
autoresize |
||||
/> |
||||
<div></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 mb-20"> |
||||
<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 { 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"; |
||||
|
||||
const props = defineProps({ |
||||
departId: { |
||||
type: String, |
||||
}, |
||||
}); |
||||
|
||||
const time = ref([ |
||||
moment().startOf("year").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); |
||||
|
||||
async function getProfileData() { |
||||
loading.value = true; |
||||
negativeQuery.value.involveDepartId = props.departId; |
||||
getNegativeList(); |
||||
const data = await getDepartProfile(props.departId, { |
||||
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); |
||||
departInfo.value = data.departInfo; |
||||
negativeInfo.value = data.negativeInfo; |
||||
problemSourcesPieOptions.value.series[0].data = data.problemSourcesList; |
||||
businessTypePieOptions.value.series[0].data = data.businessTypeList; |
||||
|
||||
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; |
||||
} |
||||
|
||||
const barOption = ref({ |
||||
xAxis: { |
||||
type: "category", |
||||
data: [], |
||||
}, |
||||
yAxis: { |
||||
type: "value", |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: [], |
||||
type: "bar", |
||||
color: "#5B8FF9 ", |
||||
}, |
||||
], |
||||
}); |
||||
|
||||
watch( |
||||
() => props.departId, |
||||
() => { |
||||
getProfileData(); |
||||
listNegativeMonthly(props.departId).then((data) => { |
||||
barOption.value.xAxis.data = data.months; |
||||
barOption.value.series[0].data = data.values; |
||||
}); |
||||
} |
||||
); |
||||
|
||||
function getNegativeList() { |
||||
listNegative(negativeQuery.value).then((data) => { |
||||
negativeList.value = data.records; |
||||
negativeTotal.value = data.total; |
||||
}); |
||||
} |
||||
|
||||
const radarOption = ref({ |
||||
radar: { |
||||
indicator: [], |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: "radar", |
||||
data: [ |
||||
{ |
||||
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 "高风险"; |
||||
} |
||||
</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> |
||||
@ -0,0 +1,238 @@
|
||||
<template> |
||||
<div class="container"> |
||||
<header> |
||||
<el-row> |
||||
<el-col :span="12"> |
||||
<div class="form-row flex"> |
||||
<label class="text-center">局长信箱</label> |
||||
<div class="flex wrap query-box"> |
||||
<el-input |
||||
placeholder="问题类型" |
||||
v-model="query.originId" |
||||
clearable |
||||
style="width: 200px" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<div class="form-row flex"> |
||||
<label class="text-center">数字督察</label> |
||||
<div class="flex wrap query-box"> |
||||
<div style="width: 280px"> |
||||
<problem-type-select |
||||
v-model="query.internalId" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
<div class="flex between mt-20 mb-26"> |
||||
<el-button type="primary" @click="handleAdd"> |
||||
<template #icon><icon name="el-icon-Plus" /></template> |
||||
新增</el-button |
||||
> |
||||
<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="externalName" /> |
||||
<el-table-column label="数字督察问题类型"> |
||||
<template #default="{ row }"> |
||||
<span>{{ getProblemType(row.internalId) }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
label="最后修改时间" |
||||
prop="updateTime" |
||||
width="160" |
||||
/> |
||||
<el-table-column label="操作" width="160"> |
||||
<template #default="{ row }"> |
||||
<el-button type="primary" link @click="handleEdit(row)" |
||||
>编辑</el-button |
||||
> |
||||
<el-button type="danger" link @click="handleDel(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]" |
||||
v-model:page-size="query.size" |
||||
v-model:current-page="query.current" |
||||
layout="total, sizes, prev, pager, next" |
||||
:total="total" |
||||
> |
||||
</el-pagination> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-dialog |
||||
v-model="show" |
||||
:title="mode === 'add' ? '新增问题类型映射' : '编辑问题类型映射'" |
||||
width="600" |
||||
> |
||||
<el-form :label-width="140" :model="formData" ref="fomrRef"> |
||||
<el-form-item |
||||
label="局长信箱问题类型" |
||||
prop="externalName" |
||||
:rules="{ |
||||
required: true, |
||||
message: '请输入', |
||||
trigger: ['blur'], |
||||
}" |
||||
> |
||||
<el-input |
||||
v-model="formData.externalName" |
||||
clearable |
||||
style="width: 280px" |
||||
placeholder="请输入" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item |
||||
label="数字督察问题类型" |
||||
prop="internalId" |
||||
:rules="{ |
||||
required: true, |
||||
message: '请选择', |
||||
trigger: ['blur'], |
||||
}" |
||||
> |
||||
<problem-type-select |
||||
v-model="formData.internalId" |
||||
@change="(node) => (formData.internalName = node.label)" |
||||
style="width: 280px" |
||||
/> |
||||
</el-form-item> |
||||
</el-form> |
||||
<footer class="flex end mt-40"> |
||||
<el-button @click="show = false" size="large">取消</el-button> |
||||
<el-button type="primary" @click="submit" size="large" |
||||
>确定</el-button |
||||
> |
||||
</footer> |
||||
</el-dialog> |
||||
</template> |
||||
<script setup> |
||||
import { |
||||
listProblemTypeMaping, |
||||
addProblemTypeMaping, |
||||
updateProblemTypeMaping, |
||||
delProblemTypeMaping, |
||||
} from "@/api/system/problemTypeMaping"; |
||||
import feedback from "@/utils/feedback"; |
||||
import useCatchStore from "@/stores/modules/catch"; |
||||
const catchSotre = useCatchStore(); |
||||
const dictContent = catchSotre.getDictContent(); |
||||
|
||||
function getProblemType(id) { |
||||
console.log(dictContent); |
||||
dictContent.forEach(() => { |
||||
return "111"; |
||||
}); |
||||
for (let i = 0; i < dictContent.length; i++) { |
||||
const obj1 = dictContent[i]; |
||||
if (obj1.id === id) { |
||||
return obj1.name; |
||||
} |
||||
if (!obj1.children) { |
||||
continue; |
||||
} |
||||
for (let j = 0; j < obj1.children.length; j++) { |
||||
const obj2 = obj1.children[j]; |
||||
if (obj2.id === id) { |
||||
return obj1.name + ' / ' + obj2.name; |
||||
} |
||||
if (!obj2.children) { |
||||
continue; |
||||
} |
||||
for (let k = 0; k < obj2.children.length; k++) { |
||||
const obj3 = obj2.children[k]; |
||||
if (obj3.id === id) { |
||||
return obj1.name + ' / ' + obj2.name + ' / ' + obj3.name; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
const query = ref({ |
||||
current: 1, |
||||
size: 10, |
||||
}); |
||||
|
||||
const list = ref([]); |
||||
const total = ref(0); |
||||
function getList() { |
||||
listProblemTypeMaping(query.value).then((data) => { |
||||
list.value = data.records; |
||||
total.value = data.total; |
||||
}); |
||||
} |
||||
|
||||
function reset() { |
||||
query.value = { |
||||
current: 1, |
||||
size: 10, |
||||
}; |
||||
getList(); |
||||
} |
||||
|
||||
onMounted(() => { |
||||
getList(); |
||||
}); |
||||
|
||||
const show = ref(false); |
||||
const mode = ref("add"); |
||||
const formData = ref({}); |
||||
const fomrRef = ref(); |
||||
|
||||
function handleAdd() { |
||||
formData.value = {internalId: ''}; |
||||
show.value = true; |
||||
mode.value = "add"; |
||||
} |
||||
function handleEdit(row) { |
||||
formData.value = { ...row }; |
||||
show.value = true; |
||||
mode.value = "edit"; |
||||
} |
||||
|
||||
async function handleDel(row) { |
||||
await feedback.confirm("确定要删除该数据？"); |
||||
await delProblemTypeMaping(row.id); |
||||
getList(); |
||||
feedback.msgSuccess("删除成功"); |
||||
} |
||||
|
||||
async function submit() { |
||||
await fomrRef.value.validate(); |
||||
if (mode.value === "add") { |
||||
await addProblemTypeMaping(formData.value); |
||||
} else { |
||||
await updateProblemTypeMaping(formData.value); |
||||
} |
||||
show.value = false; |
||||
formData.value = {}; |
||||
getList(); |
||||
feedback.msgSuccess("操作成功"); |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
</style> |
||||
Loading…
Reference in new issue