13 changed files with 23117 additions and 161 deletions
@ -0,0 +1,14 @@ |
|||||||
|
import request from "@/api/request"; |
||||||
|
|
||||||
|
export function listDepartNegative(query) { |
||||||
|
return request.get({ |
||||||
|
url: `/profile/depart`, |
||||||
|
query |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export function getDepartProfile(departId) { |
||||||
|
return request.get({ |
||||||
|
url: `/profile/depart/${departId}` |
||||||
|
}); |
||||||
|
} |
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,155 @@ |
|||||||
|
<template> |
||||||
|
<div class="flex between v-center mb-10"> |
||||||
|
<span class="bar-title">{{ title }}</span> |
||||||
|
<span class="bar-sub-title">{{ subTitle }}</span> |
||||||
|
</div> |
||||||
|
<el-scrollbar height="300px"> |
||||||
|
<div> |
||||||
|
<div |
||||||
|
class="flex v-center bar-item between" |
||||||
|
v-for="item in data" |
||||||
|
:size="size" |
||||||
|
> |
||||||
|
<span class="bar-item-name mr-10">{{ item.label }}</span> |
||||||
|
<div class="bar-item_content mr-16"> |
||||||
|
<div |
||||||
|
class="bar-item_content-bar" |
||||||
|
:style="{ |
||||||
|
width: `${(item.value / max) * 100}%`, |
||||||
|
background: getColor(item.value / max ), |
||||||
|
}" |
||||||
|
></div> |
||||||
|
</div> |
||||||
|
<span class="mr-16">{{ item.value }}</span> |
||||||
|
<span |
||||||
|
class="bar-item_remark text-right" |
||||||
|
v-if="item.denominator" |
||||||
|
style="min-width: 40px" |
||||||
|
> |
||||||
|
<span class="text-success">{{ item.numerator }}</span> |
||||||
|
<span>/</span> |
||||||
|
<span>{{ item.denominator }}</span> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-scrollbar> |
||||||
|
|
||||||
|
</template> |
||||||
|
<script setup> |
||||||
|
import {onMounted} from "vue"; |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
title: { |
||||||
|
type: String, |
||||||
|
default: "", |
||||||
|
}, |
||||||
|
subTitle: { |
||||||
|
type: String, |
||||||
|
default: "", |
||||||
|
}, |
||||||
|
data: { |
||||||
|
type: Array, |
||||||
|
default: [], |
||||||
|
}, |
||||||
|
size: { |
||||||
|
type: String, |
||||||
|
default: "", |
||||||
|
}, |
||||||
|
unit: { |
||||||
|
type: String, |
||||||
|
default: "", |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
const isMouseOver = ref(false); |
||||||
|
|
||||||
|
const handleMouseEnter = () => { |
||||||
|
isMouseOver.value = true; |
||||||
|
}; |
||||||
|
const handleMouseLeave = () => { |
||||||
|
isMouseOver.value = false; |
||||||
|
}; |
||||||
|
|
||||||
|
const max = ref(100); |
||||||
|
watch( |
||||||
|
() => props.data, |
||||||
|
(arr) => { |
||||||
|
getMax() |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
function getMax() { |
||||||
|
if (props.unit !== "%") { |
||||||
|
max.value = Math.max(...props.data.map((item) => item.value)); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
getMax() |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
function getColor(val) { |
||||||
|
if (val > 0.8) { |
||||||
|
return "linear-gradient( 270deg, #FB002D 0%, #822232 100%)"; |
||||||
|
} |
||||||
|
if (val >= 0.6) { |
||||||
|
return "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)"; |
||||||
|
} |
||||||
|
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; |
||||||
|
height: 32px; |
||||||
|
|
||||||
|
&[size="large"] { |
||||||
|
height: 42px; |
||||||
|
|
||||||
|
.bar-item_content { |
||||||
|
.bar-item_content-bar { |
||||||
|
height: 13px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.bar-item-name { |
||||||
|
width: 19%; |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
|
||||||
|
.bar-item_content { |
||||||
|
width: 55%; |
||||||
|
|
||||||
|
.bar-item_content-bar { |
||||||
|
width: 0; |
||||||
|
height: 9px; |
||||||
|
background: linear-gradient(270deg, #63e700 0%, #19674c 100%); |
||||||
|
box-shadow: 1px 0 0px 0px #020b5f; |
||||||
|
transition: width 0.3s; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.bar-item_remark { |
||||||
|
font-size: 14px; |
||||||
|
|
||||||
|
.text-success { |
||||||
|
color: #09c700; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
@ -0,0 +1,342 @@ |
|||||||
|
<template> |
||||||
|
<div class="container"> |
||||||
|
<header> |
||||||
|
<el-form :label-width="114"> |
||||||
|
<el-row> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="所在单位"> |
||||||
|
<depart-tree-select |
||||||
|
v-model="query.departId" |
||||||
|
:check-strictly="false" |
||||||
|
/> |
||||||
|
</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-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" /> |
||||||
|
<el-table-column label="性别" /> |
||||||
|
<el-table-column label="职务" prop="" /> |
||||||
|
<el-table-column label="警号" prop="empNo" /> |
||||||
|
<el-table-column label="任职年限" prop="" /> |
||||||
|
<el-table-column label="单位名称" prop="policeSize" /> |
||||||
|
<el-table-column |
||||||
|
label="查实问题数" |
||||||
|
prop="verifySize" |
||||||
|
width="120" |
||||||
|
/> |
||||||
|
<el-table-column label="操作" width="160"> |
||||||
|
<template #default="{ row }"> |
||||||
|
<el-button type="primary" link @click="show = true" |
||||||
|
>问题画像</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="2vh"> |
||||||
|
<header class="flex center v-center gap"> |
||||||
|
<label>统计范围</label> |
||||||
|
<div style="width: 320px"> |
||||||
|
<date-time-range-picker-ext v-model="query.crtTime" style="width: 300px" /> |
||||||
|
</div> |
||||||
|
<el-button type="primary">查询</el-button> |
||||||
|
</header> |
||||||
|
<main> |
||||||
|
<el-row> |
||||||
|
<el-col :span="8"> |
||||||
|
<h5>单位情况</h5> |
||||||
|
<div class="row"> |
||||||
|
<div class="col col-24"> |
||||||
|
<label>单位名称</label> |
||||||
|
<span>{{}}</span> |
||||||
|
</div> |
||||||
|
<div class="col col-24"> |
||||||
|
<label>所长</label> |
||||||
|
<span>{{}}</span> |
||||||
|
</div> |
||||||
|
<div class="col col-24"> |
||||||
|
<label>副所长</label> |
||||||
|
<span>{{}}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-row> |
||||||
|
<el-col :span="12"> |
||||||
|
<description-pair |
||||||
|
label1="民警总人数" |
||||||
|
label2="问题涉及民警数" |
||||||
|
value1="132" |
||||||
|
value2="21" |
||||||
|
size="large" |
||||||
|
/> |
||||||
|
</el-col> |
||||||
|
<el-col :span="12"> |
||||||
|
<description-pair |
||||||
|
label1="协辅警人数" |
||||||
|
label2="问题涉及协辅警数" |
||||||
|
value1="132" |
||||||
|
value2="21" |
||||||
|
size="large" |
||||||
|
/> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</el-col> |
||||||
|
<el-col :span="8"> |
||||||
|
<h5>问题情况</h5> |
||||||
|
<el-row> |
||||||
|
<el-col :span="6" class="text-center"> |
||||||
|
<div class="text-primary" style="font-size: 34px"> |
||||||
|
51 |
||||||
|
</div> |
||||||
|
<div>问题总数</div> |
||||||
|
</el-col> |
||||||
|
<el-col :span="18"> |
||||||
|
<el-row> |
||||||
|
<el-col :span="12"> |
||||||
|
<description-pair |
||||||
|
label1="110接处警量" |
||||||
|
label2="问题数" |
||||||
|
value1="132" |
||||||
|
value2="21" |
||||||
|
/> |
||||||
|
</el-col> |
||||||
|
<el-col :span="12"> |
||||||
|
<description-pair |
||||||
|
label1="执法办案" |
||||||
|
label2="问题数" |
||||||
|
value1="132" |
||||||
|
value2="21" |
||||||
|
/> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</el-col> |
||||||
|
<el-col :span="8"> |
||||||
|
<h5>风险指数</h5> |
||||||
|
<div class="flex center"> |
||||||
|
<el-progress |
||||||
|
type="dashboard" |
||||||
|
:percentage="78" |
||||||
|
:stroke-width="16" |
||||||
|
:width="250" |
||||||
|
color="#DC6231" |
||||||
|
> |
||||||
|
<div> |
||||||
|
<span style="">78</span> |
||||||
|
</div> |
||||||
|
<div>分险指标值</div> |
||||||
|
<div>中风险</div> |
||||||
|
</el-progress> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<el-row> |
||||||
|
<el-col :span="8"> |
||||||
|
<h5>问题来源占比</h5> |
||||||
|
<v-charts |
||||||
|
style="height: 320px" |
||||||
|
:option="pieOptions" |
||||||
|
autoresize |
||||||
|
/> |
||||||
|
</el-col> |
||||||
|
<el-col :span="8"> |
||||||
|
<h5>业务类型占比</h5> |
||||||
|
<v-charts |
||||||
|
style="height: 320px" |
||||||
|
:option="pieOptions" |
||||||
|
autoresize |
||||||
|
/> |
||||||
|
</el-col> |
||||||
|
<el-col :span="8"> |
||||||
|
<h5>风险问题构成</h5> |
||||||
|
<v-charts |
||||||
|
style="height: 320px" |
||||||
|
:option="radarOption" |
||||||
|
autoresize |
||||||
|
/> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<el-row> |
||||||
|
<el-col :span="8"> |
||||||
|
<h5>个人问题排名</h5> |
||||||
|
<datav-chart-bar :data="barList" /> |
||||||
|
</el-col> |
||||||
|
<el-col :span="8"> |
||||||
|
<h5>突出问题排名</h5> |
||||||
|
<datav-chart-bar :data="barList" /> |
||||||
|
</el-col> |
||||||
|
<el-col :span="8"> |
||||||
|
<h5>单位问题标签</h5> |
||||||
|
<datav-chart-bar :data="barList" /> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<h5>问题变化趋势</h5> |
||||||
|
<v-charts style="height: 320px" :option="barOption" autoresize /> |
||||||
|
<div></div> |
||||||
|
<h5>问题清单</h5> |
||||||
|
<el-table> |
||||||
|
<el-table-column label="发现时间" prop="" /> |
||||||
|
<el-table-column label="问题来源" prop="" /> |
||||||
|
<el-table-column label="业务类别" prop="" /> |
||||||
|
<el-table-column label="涉及单位" prop="" /> |
||||||
|
<el-table-column label="是否属实" prop="" width="180" /> |
||||||
|
<el-table-column |
||||||
|
label="完善情况" |
||||||
|
prop="departName" |
||||||
|
width="120" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
label="最后编辑人" |
||||||
|
prop="fxzs" |
||||||
|
width="120" |
||||||
|
align="center" |
||||||
|
/> |
||||||
|
</el-table> |
||||||
|
</main> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
<script lang="ts" setup> |
||||||
|
import vCharts from "vue-echarts"; |
||||||
|
import { listDepartNegative } from "@/api/sensitivePerception/profileDepart"; |
||||||
|
import { onMounted } from "vue"; |
||||||
|
|
||||||
|
const query = ref({ |
||||||
|
current: 1, |
||||||
|
size: 10, |
||||||
|
}); |
||||||
|
const list = ref<any[]>([]); |
||||||
|
const total = ref(0); |
||||||
|
|
||||||
|
function getList() { |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
getList(); |
||||||
|
}); |
||||||
|
|
||||||
|
const show = ref(false); |
||||||
|
|
||||||
|
const barList = [ |
||||||
|
{ |
||||||
|
label: "张三", |
||||||
|
value: 67, |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: "李四", |
||||||
|
value: 80, |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: "王五", |
||||||
|
value: 40, |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: "王五", |
||||||
|
value: 40, |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: "王五", |
||||||
|
value: 10, |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
const pieOptions = computed(() => { |
||||||
|
return { |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
type: "pie", |
||||||
|
radius: ["40%", "70%"], |
||||||
|
|
||||||
|
data: [ |
||||||
|
{ value: 311, name: "慢作为" }, |
||||||
|
{ value: 735, name: "意见建议" }, |
||||||
|
{ value: 580, name: "违法违纪违规" }, |
||||||
|
{ value: 484, name: "乱作为" }, |
||||||
|
{ value: 300, name: "其他" }, |
||||||
|
{ value: 300, name: "不作为" }, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
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 barOption = { |
||||||
|
xAxis: { |
||||||
|
type: "category", |
||||||
|
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
type: "value", |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
data: [120, 200, 150, 80, 70, 110, 130], |
||||||
|
type: "bar", |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
</style> |
||||||
Loading…
Reference in new issue