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.
713 lines
17 KiB
713 lines
17 KiB
<template> |
|
<el-scrollbar height="100vh"> |
|
<div class="wrapper"> |
|
<datav-header/> |
|
<main> |
|
<el-row :gutter="16"> |
|
<el-col :span="6"> |
|
<datav-card title="审计整改结果" sub-title="已整改问题数/查出问题数"> |
|
|
|
|
|
<el-scrollbar height="350px"> |
|
<datav-chart-bar |
|
:size="small" |
|
:data="data1" |
|
unit="%" |
|
remark-font-size="12px" |
|
spanClass="right-aligned" |
|
:color="colors" |
|
|
|
/> |
|
</el-scrollbar> |
|
|
|
|
|
</datav-card> |
|
|
|
|
|
<datav-card title="审计查出问题" style="height: 500px"> |
|
<v-charts |
|
style="height: 300px" |
|
:option="option22" |
|
autoresize |
|
/> |
|
|
|
|
|
</datav-card> |
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
<div class="datav-col"> |
|
<label for="">统计周期：</label> |
|
<span>2024年01月01日 - 2024年08月30日</span> |
|
</div> |
|
<div class="flex gap-42"> |
|
<datav-statistic |
|
:value="462" |
|
title="审计单位/项目" |
|
style="width: 20%" |
|
/> |
|
<datav-statistic |
|
:value="79224.59" |
|
:title="`审计总金额\n（万元）`" |
|
:isDecimal="true" |
|
style="width: 20%" |
|
/> |
|
<datav-statistic |
|
:value="3544.01" |
|
:title="`审减金额\n（万元）`" |
|
:isDecimal="true" |
|
style="width: 20%" |
|
/> |
|
<datav-statistic |
|
:value="1192" |
|
title="查出问题数" |
|
style="width: 20%" |
|
/> |
|
<datav-statistic |
|
:value="389" |
|
title="追责问责数" |
|
style="width: 20%" |
|
/> |
|
</div> |
|
<v-charts |
|
style="height: 450px" |
|
:option="option" |
|
autoresize |
|
/> |
|
<datav-card title="审计工作趋势"> |
|
<v-charts |
|
style="height: 300px" |
|
:option="option1" |
|
autoresize |
|
/> |
|
</datav-card> |
|
</el-col> |
|
|
|
<el-col :span="6"> |
|
<datav-card title="审计项目类型"> |
|
|
|
<datav-tabs> |
|
<datav-tab-item label="政府投资审计" name="1"> |
|
<div class="mb-40"> |
|
<v-charts |
|
style="height: 300px" |
|
:option="option2" |
|
autoresize |
|
/> |
|
</div> |
|
</datav-tab-item> |
|
<datav-tab-item label="专项审计" name="2"> |
|
<div class="mb-40"> |
|
<v-charts |
|
style="height: 300px" |
|
:option="option3" |
|
autoresize |
|
/> |
|
</div> |
|
</datav-tab-item> |
|
<datav-tab-item label="经济责任审计" name="3"> |
|
<div class="mb-40"> |
|
<v-charts |
|
style="height: 300px" |
|
:option="option4" |
|
autoresize |
|
/> |
|
</div> |
|
</datav-tab-item> |
|
</datav-tabs> |
|
|
|
</datav-card> |
|
<datav-card title="审计工作动态"> |
|
|
|
<el-scrollbar height="470px"> |
|
<div class="message"> |
|
<div class="message-title">工作简报</div> |
|
<div class="message-content"> |
|
为强化队伍纪律作风监督，给严打整治“雷霆行动”及即将到来的国庆节安保维稳工作提供强有力的纪律监督保障，9月25日20时至23时，市局警务督察支队安排6个现场督察组，对干部、民警共计119人开展集中酒精吹气测试。 |
|
</div> |
|
<div class="message-footer flex end"> |
|
<span>2024-09-27 10:32</span> |
|
</div> |
|
</div> |
|
<div class="message" type="warning"> |
|
<div class="message-title">工作简报</div> |
|
<div class="message-content"> |
|
为持续抓好“六项规定”贯彻执行，扎实做好中秋佳节前队伍纪律作风监督，9月3日20时至22时，市局警务督察支队联合机关党委以及来支队跟班学习的督察专干，组成6个督察组，对干部、民警、辅警共计112人开展集中酒精吹气测试 |
|
</div> |
|
<div class="message-footer flex end"> |
|
<span>2024-09-06 16:23</span> |
|
</div> |
|
</div> |
|
<div class="message" type="success"> |
|
<div class="message-title">工作简报</div> |
|
<div class="message-content"> |
|
为强化队伍纪律作风监督，给“夏季治安打击整治行动”及党的二十届三中全会安保维稳工作提供强有力地纪律监督保障，7月11日晚，市局警务督察支队联合机关党委，派出6个现场督察组，对干部、民警、辅警共计111人开展集中酒精吹气测试。 |
|
</div> |
|
<div class="message-footer flex end"> |
|
<span>2024-07-15 14:39</span> |
|
</div> |
|
</div> |
|
<div class="message" type="success"> |
|
<div class="message-title">工作简报</div> |
|
<div class="message-content"> |
|
为督促各参战警力切实履职，拧紧责任链条，保障周杰伦演唱会安全顺利进行，根据市局统一部署，2024年5月30日至6月2日，由警务督察支队牵头，统筹参战单位督察力量，对全市公安机关周杰伦演唱会安全保卫工作开展全方位督导检查。 |
|
</div> |
|
<div class="message-footer flex end"> |
|
<span>2024-06-06 09:04</span> |
|
</div> |
|
</div> |
|
</el-scrollbar> |
|
</datav-card> |
|
</el-col> |
|
</el-row> |
|
</main> |
|
</div> |
|
</el-scrollbar> |
|
</template> |
|
|
|
|
|
<script setup> |
|
import vCharts from "vue-echarts"; |
|
import changshaMap from "@/assets/data/changsha.json"; |
|
import * as echarts from "echarts/core"; |
|
|
|
|
|
let gobalTempMapVoList = [ |
|
{ |
|
"name": "天心分局", |
|
"reviewOrg": 0, |
|
"checkPro": 0, |
|
"rushPro": 0, |
|
"changed": 0 |
|
}, |
|
{ |
|
"name": "开福分局", |
|
"reviewOrg": 0, |
|
"checkPro": 186, |
|
"rushPro": 0, |
|
"changed": 137 |
|
}, |
|
{ |
|
"name": "岳麓分局", |
|
"reviewOrg": 0, |
|
"checkPro": 11, |
|
"rushPro": 0, |
|
"changed": 0 |
|
}, |
|
{ |
|
"name": "望城分局", |
|
"reviewOrg": 0, |
|
"checkPro": 0, |
|
"rushPro": 0, |
|
"changed": 0 |
|
}, |
|
{ |
|
"name": "浏阳市局", |
|
"reviewOrg": 0, |
|
"checkPro": 0, |
|
"rushPro": 0, |
|
"changed": 0 |
|
}, |
|
{ |
|
"name": "长沙县局", |
|
"reviewOrg": 0, |
|
"checkPro": 0, |
|
"rushPro": 0, |
|
"changed": 0 |
|
}, |
|
{ |
|
"name": "芙蓉分局", |
|
"reviewOrg": 0, |
|
"checkPro": 1, |
|
"rushPro": 0, |
|
"changed": 1 |
|
}, |
|
{ |
|
"name": "雨花分局", |
|
"reviewOrg": 0, |
|
"checkPro": 240, |
|
"rushPro": 0, |
|
"changed": 220 |
|
}, |
|
{ |
|
"name": "宁乡市局", |
|
"reviewOrg": 0, |
|
"checkPro": 232, |
|
"rushPro": 194, |
|
"changed": 194 |
|
} |
|
|
|
]; |
|
|
|
echarts.registerMap("changsha", changshaMap); |
|
const option = ref({ |
|
geo: { |
|
map: "changsha", |
|
|
|
}, |
|
tooltip: { |
|
trigger: 'item', |
|
formatter: function (params) { |
|
console.log(params) |
|
const dataItem = gobalTempMapVoList.find(item => item.name.includes(params.name.substring(0, 2))); |
|
if (dataItem) { |
|
return ` |
|
<div class="tooltip"> |
|
<div class="tooltip-title">${dataItem.name}</div> |
|
<div class="tooltip-content"> |
|
<ul class="tooltip-ul" > |
|
<li>审计单位/项目数<span>暂无</span></li> |
|
<li>查出问题数 <span>${dataItem.checkPro}</span></li> |
|
<li>追责问责数 <span>暂无</span></li> |
|
<li>整改问题数 <span>${dataItem.changed}</span></li> |
|
</ul> |
|
</div> |
|
</div>`; |
|
} else { |
|
return `<div class="tooltip"> |
|
<div class="tooltip-title">${dataItem.name}</div> |
|
<div class="tooltip-content"> |
|
<ul class="tooltip-ul""> |
|
<li>审计单位/项目 <span>0</span></li> |
|
<li>查出问题数 <span>0</span></li> |
|
<li>追责问责数 <span>0</span></li> |
|
</ul> |
|
</div> |
|
</div>`; |
|
} |
|
}, |
|
}, |
|
visualMap: { |
|
type: "piecewise", |
|
bottom: 10, |
|
pieces: [ |
|
{min: 0, max: 500, label: "问题数低于500"}, {min: 501, max: 1000, label: "问题数介于500-1000"}, { |
|
min: 1001, |
|
label: "问题数高于1000" |
|
}, |
|
], |
|
right: 10, |
|
realtime: false, |
|
orient: "horizontal", |
|
textStyle: { |
|
color: "#fff", |
|
}, |
|
calculable: true, |
|
inRange: { |
|
color: ["#4987F6", "#F6A149", "#D34343",], |
|
}, |
|
}, |
|
series: [ |
|
{ |
|
name: "长沙", |
|
type: "map", |
|
map: "changsha", |
|
hoverAnimation: true, |
|
label: { |
|
show: true, |
|
color: "white", |
|
}, |
|
itemStyle: { |
|
normal: { |
|
areaColor: "#02215E", |
|
borderColor: "#1773c3", |
|
}, |
|
}, |
|
emphasis: { |
|
areaColor: "#FFD700", // 高亮时区域颜色 |
|
borderColor: "#FF0000", // 高亮时边框颜色 |
|
borderWidth: 4 // 高亮时边框宽度 |
|
}, |
|
data: [], |
|
} |
|
], |
|
}) |
|
|
|
const option1 = ref({ |
|
xAxis: { |
|
type: "category", |
|
boundaryGap: false, |
|
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月",], |
|
}, |
|
tooltip: { |
|
trigger: 'axis', |
|
axisPointer: { |
|
type: 'line', |
|
label: { |
|
backgroundColor: '#6a7985' |
|
} |
|
} |
|
}, |
|
yAxis: { |
|
type: "value", |
|
splitLine: { |
|
show: true, |
|
lineStyle: { |
|
color: "#193775", |
|
}, |
|
} |
|
}, |
|
series: [ |
|
{ |
|
type: "line", |
|
smooth: true, |
|
label: { |
|
show: false |
|
}, |
|
lineStyle: { |
|
color: "#28E6FF", |
|
width: 4, |
|
}, |
|
areaStyle: { |
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|
{ |
|
offset: 0, |
|
color: "rgba(40,230,255,0.47)", // 渐变起始颜色 |
|
}, |
|
{ |
|
offset: 1, |
|
color: "rgba(40,230,255,0)", // 渐变结束颜色 |
|
}, |
|
]), |
|
}, |
|
data: [0, 0, 4, 45, 16, 1, 436, 687, 3, 0, 0], |
|
}, |
|
], |
|
}); |
|
|
|
const data1 = [ |
|
{ |
|
label: "芙蓉分局", |
|
value: "100", |
|
rate: "100", |
|
numerator: "1", |
|
denominator: "1", |
|
}, |
|
{ |
|
label: "雨花分局", |
|
value: "91", |
|
rate: "91", |
|
numerator: "220", |
|
denominator: 240, |
|
}, |
|
{ |
|
label: "高新分局", |
|
value: 90, |
|
rate: 90, |
|
numerator: 140, |
|
denominator: 155, |
|
}, |
|
{ |
|
label: "宁乡市局", |
|
value: 83, |
|
rate: 83, |
|
numerator: 194, |
|
denominator: 232, |
|
}, |
|
{ |
|
label: "开福分局", |
|
value: 73, |
|
rate: 73, |
|
numerator: 137, |
|
denominator: 186, |
|
}, |
|
{ |
|
label: "开福分局", |
|
value: 73, |
|
rate: 73, |
|
numerator: 137, |
|
denominator: 186, |
|
}, |
|
{ |
|
label: "岳麓分局", |
|
value: 0, |
|
numerator: 0, |
|
rate: 0, |
|
denominator: 11, |
|
}, |
|
]; |
|
// setTimeout(() => { |
|
// data1.values().forEach((item) => { |
|
// console.log(item.label); |
|
// }); |
|
// }, 1000); |
|
|
|
const data2 = [ |
|
{ |
|
name: "开福分局", |
|
value: 9700 |
|
}, |
|
{ |
|
name: "芙蓉分局", |
|
value: 9021 |
|
}, |
|
{ |
|
name: "岳麓分局", |
|
value: 8512 |
|
}, |
|
{ |
|
name: "雨花分局", |
|
value: 8021 |
|
}, |
|
{ |
|
name: "望城分局", |
|
value: 7111 |
|
}, |
|
{ |
|
name: "浏阳市局", |
|
value: 6622 |
|
}, |
|
{ |
|
name: "长沙县局", |
|
value: 6221 |
|
}, |
|
]; |
|
|
|
const option2 = { |
|
series: [ |
|
{ |
|
type: "pie", |
|
radius: ["40%", "70%"], |
|
label: { |
|
color: "#fff", |
|
}, |
|
data: [ |
|
{value: 23, name: "项目未按规定立项"}, |
|
{value: 21, name: "未按规定或批准的采购方式进行采购"}, |
|
{value: 6, name: "未按规定程序办理立项手续"}, |
|
{value: 2, name: "涉嫌项目拆分"}, |
|
{value: 2, name: "项目开始是实施或完成后补签合同"}, |
|
{value: 1, name: "未严格履行立项手续"}, |
|
], |
|
}, |
|
], |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
}; |
|
|
|
const option3 = { |
|
series: [ |
|
{ |
|
type: "pie", |
|
radius: ["40%", "70%"], |
|
label: { |
|
color: "#fff", |
|
}, |
|
data: [ |
|
{value: 321, name: "提取、查封、扣押、冻结、处置涉案财物不规范"}, |
|
{value: 249, name: "法律文书填制不规范"}, |
|
{value: 215, name: "未上缴或未及时上缴涉案资金"}, |
|
{value: 190, name: "随身财务登记、保管、处置不规范"}, |
|
{value: 88, name: "执法活动财务管理制度不健全、管理责任不落实"}, |
|
{value: 55, name: "未按规定退还保证金"}, |
|
{value: 13, name: "涉案财务保管场所设施配备不规范"}, |
|
{value: 6, name: "随身财务登记、保管、处置不规范"}, |
|
], |
|
}, |
|
], |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
}; |
|
|
|
|
|
const option4 = { |
|
series: [ |
|
{ |
|
type: "pie", |
|
radius: ["40%", "70%"], |
|
label: { |
|
color: "#fff", |
|
}, |
|
data: [ |
|
{value: 8, name: "法律文书填写不规范"}, |
|
{value: 3, name: "提取、查封、扣押、冻结、处置涉案财物不规范"}, |
|
{value: 1, name: "\"三公经费\"预算执行及公开不符合规定"}, |
|
{value: 1, name: "随身财务登记、保管、处置不规范"}, |
|
{value: 1, name: "未按规定退还保证金"}, |
|
{value: 1, name: "未上缴或未及时上缴涉案资金"}, |
|
{value: 1, name: "无预算采购"}, |
|
], |
|
}, |
|
], |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
}; |
|
|
|
|
|
const option5 = { |
|
series: [ |
|
{ |
|
type: "pie", |
|
radius: ["40%", "70%"], |
|
label: { |
|
color: "#fff", |
|
}, |
|
data: [ |
|
{value: 143, name: "工程"}, |
|
{value: 78, name: "信息化"}, |
|
{value: 176, name: "服务"}, |
|
{value: 21, name: "购物"}, |
|
], |
|
}, |
|
], |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
}; |
|
|
|
|
|
const option22 = { |
|
series: [ |
|
{ |
|
type: "pie", |
|
radius: ["40%", "70%"], |
|
label: { |
|
color: "#fff", |
|
}, |
|
data: [ |
|
{value: 55, name: "政府投资审计"}, |
|
{value: 1137, name: "专项审计"}, |
|
{value: 16, name: "经济责任审计"}, |
|
], |
|
}, |
|
], |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
}; |
|
|
|
|
|
const colors = [ |
|
{ |
|
// 绿色 |
|
color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)", |
|
percentage: 90, |
|
}, |
|
{ |
|
// 黄色 |
|
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)", |
|
percentage: 80, |
|
}, |
|
{ |
|
|
|
// 红色 |
|
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)", |
|
percentage: 70, |
|
}, |
|
]; |
|
|
|
</script> |
|
|
|
|
|
<style lang="scss" scoped> |
|
@import "@/style/datav.scss"; |
|
|
|
:deep() { |
|
// 弹框整体 |
|
.tooltip { |
|
position: relative; |
|
width: 169.88px; |
|
height: 155px; |
|
background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%); |
|
border: 1px solid #4E8FFF; |
|
margin: -10px -10px -10px -10px; |
|
} |
|
|
|
//浏阳市局 |
|
.tooltip-title { |
|
width: 169.88px; |
|
height: 43px; |
|
background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%); |
|
display: flex; |
|
justify-content: center; /* 水平居中 */ |
|
align-items: center; /* 垂直居中 */ |
|
text-align: center; /* 水平居中 */ |
|
font-weight: 400; |
|
font-size: 16px; |
|
color: #FFFFFF; |
|
line-height: 22px; |
|
border-bottom: 1px solid #253755; /* 设置下边框 */ |
|
} |
|
|
|
|
|
.tooltip-content { |
|
width: 170px; |
|
height: 106px; |
|
//font-size: 11px; |
|
margin-top: -12px; |
|
background: linear-gradient(180deg, #010457 0%, #031577 100%); |
|
} |
|
|
|
.tooltip-content ul { |
|
list-style-type: none; /* 移除默认的小圆点 */ |
|
padding: 0; |
|
|
|
} |
|
|
|
.tooltip-content ul li { |
|
margin-left: 5px; |
|
height: 25px; |
|
color: #597AE9; |
|
font-size: 13px; |
|
} |
|
|
|
|
|
// 数字的span |
|
.tooltip-ul span { |
|
float: right; |
|
width: 50px; |
|
text-align: right; |
|
margin-right: 15px; |
|
color: #fff; |
|
font-size: 13px; |
|
} |
|
|
|
|
|
/* 小尖角 */ |
|
.tooltip::before { |
|
content: ''; |
|
position: absolute; |
|
top: 90px; /* 调整尖角的垂直位置 */ |
|
left: -10px; /* 调整尖角的水平位置 */ |
|
width: 0; |
|
height: 0; |
|
//border-top: 10px solid red; /* 顶边颜色 */ |
|
//border-bottom: 10px solid green; /* 底边颜色 */ |
|
//border-right: 10px solid blue; /* 右边颜色，与背景颜色相同 */ |
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.message { |
|
padding: 10px; |
|
margin-bottom: 10px; |
|
background: linear-gradient(270deg, rgba(16, 151, 255, 0.1) 0%, rgba(0, 55, 236, 0.87) 100%); |
|
|
|
&[type=warning] { |
|
background: linear-gradient(270deg, rgba(255, 190, 16, 0.1) 0%, rgba(236, 84, 0, 0.87) 100%); |
|
} |
|
|
|
&[type=success] { |
|
background: linear-gradient(270deg, rgba(91, 216, 9, 0.14) 0%, #28813D 100%); |
|
} |
|
|
|
.message-title { |
|
font-size: 14px; |
|
margin-bottom: 10px; |
|
} |
|
|
|
.message-content { |
|
margin-bottom: 10px; |
|
} |
|
} |
|
|
|
|
|
</style> |
|
|
|
|
|
|
|
|