|
|
|
|
@ -45,7 +45,13 @@
|
|
|
|
|
autoresize |
|
|
|
|
/> |
|
|
|
|
</datav-tab-item> |
|
|
|
|
|
|
|
|
|
<datav-tab-item label="警纪警规" name="3"> |
|
|
|
|
<v-charts |
|
|
|
|
style="height: 320px" |
|
|
|
|
:option="fwglPieOption" |
|
|
|
|
autoresize |
|
|
|
|
/> |
|
|
|
|
</datav-tab-item> |
|
|
|
|
</datav-tabs> |
|
|
|
|
</datav-card> |
|
|
|
|
</el-col> |
|
|
|
|
@ -58,27 +64,27 @@
|
|
|
|
|
style="width: 16.66%" |
|
|
|
|
/> |
|
|
|
|
<datav-statistic |
|
|
|
|
:value="temp.tempCheckedCaseTotal" |
|
|
|
|
:value="overview.confirmed" |
|
|
|
|
title="查实案件数" |
|
|
|
|
style="width: 16.66%" |
|
|
|
|
/> |
|
|
|
|
<datav-statistic |
|
|
|
|
:value="temp.tempDealPro" |
|
|
|
|
:value="overview.investigateAndPunish" |
|
|
|
|
title="查处问题（个）" |
|
|
|
|
style="width: 16.66%" |
|
|
|
|
/> |
|
|
|
|
<datav-statistic |
|
|
|
|
:value="temp.tempDealPre" |
|
|
|
|
:value="overview.accountablePeopleNumber" |
|
|
|
|
title="问责人次" |
|
|
|
|
style="width: 16.66%" |
|
|
|
|
/> |
|
|
|
|
<datav-statistic |
|
|
|
|
:value="temp.tempDealOrg" |
|
|
|
|
:value="overview.accountableDepartNumber" |
|
|
|
|
title="问责单位数" |
|
|
|
|
style="width: 16.66%" |
|
|
|
|
/> |
|
|
|
|
<datav-statistic |
|
|
|
|
:value="temp.tempRate" |
|
|
|
|
:value="overview.confirmedRate" |
|
|
|
|
value-unit="%" |
|
|
|
|
title="查实率" |
|
|
|
|
style="width: 16.66%" |
|
|
|
|
@ -95,6 +101,19 @@
|
|
|
|
|
:option="option1" |
|
|
|
|
autoresize |
|
|
|
|
/> |
|
|
|
|
<div class="gobal-dropdown-container"> |
|
|
|
|
<el-dropdown class="test" @command="handleCommand"> |
|
|
|
|
<span class="el-dropdown-link my-gobal-yearselect"> |
|
|
|
|
{{ selectedYear + " 年" }} |
|
|
|
|
</span> |
|
|
|
|
<template #dropdown> |
|
|
|
|
<el-dropdown-menu style="width: 90px"> |
|
|
|
|
<el-dropdown-item v-for="year in years" :key="year" :command="year">{{ year + " 年" }} |
|
|
|
|
</el-dropdown-item> |
|
|
|
|
</el-dropdown-menu> |
|
|
|
|
</template> |
|
|
|
|
</el-dropdown> |
|
|
|
|
</div> |
|
|
|
|
</datav-card> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="6"> |
|
|
|
|
@ -131,7 +150,15 @@
|
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</datav-tab-item> |
|
|
|
|
|
|
|
|
|
<datav-tab-item label="停职处理情况" name="2"> |
|
|
|
|
<div class="mb-40"> |
|
|
|
|
<v-charts |
|
|
|
|
style="height: 340px" |
|
|
|
|
:option="option4" |
|
|
|
|
autoresize |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</datav-tab-item> |
|
|
|
|
</datav-tabs> |
|
|
|
|
</datav-card> |
|
|
|
|
</el-col> |
|
|
|
|
@ -147,7 +174,12 @@ import changshaMap from "@/assets/data/changsha.json";
|
|
|
|
|
import * as echarts from "echarts/core"; |
|
|
|
|
import moment from "moment"; |
|
|
|
|
import {getCaseVerifData, getCaseVerifTrend} from "@/api/datav"; |
|
|
|
|
import {getGobalRecentlyTrendByMonth} from "@/api/data/basicScreen.ts"; |
|
|
|
|
import {getAllCaseVerifCount} from "@/api/screen/CaseVerif.ts"; |
|
|
|
|
|
|
|
|
|
const currentYear = new Date().getFullYear(); |
|
|
|
|
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表 |
|
|
|
|
const selectedYear = ref('2024'); // 当前选中的年份 |
|
|
|
|
const time = ref([ |
|
|
|
|
moment().startOf("year").format("YYYY-MM-DD"), |
|
|
|
|
moment().format("YYYY-MM-DD"), |
|
|
|
|
@ -155,11 +187,11 @@ const time = ref([
|
|
|
|
|
|
|
|
|
|
const overview = ref({ |
|
|
|
|
total: 0, |
|
|
|
|
confirmed: 0, |
|
|
|
|
investigateAndPunish: 0, |
|
|
|
|
accountablePeopleNumber: 0, |
|
|
|
|
accountableDepartNumber: 0, |
|
|
|
|
confirmedRate: 0, |
|
|
|
|
confirmed: 0, // 查实案件数 |
|
|
|
|
investigateAndPunish: 0, // 查处问题（个） |
|
|
|
|
accountablePeopleNumber: 0, // 问责人次 |
|
|
|
|
accountableDepartNumber: 0, // 问责单位数、 |
|
|
|
|
confirmedRate: 0, // 查实率 |
|
|
|
|
}); |
|
|
|
|
let gobalTempMapVoList = [ |
|
|
|
|
{ |
|
|
|
|
@ -252,8 +284,6 @@ const fwglPieList = ref([]);
|
|
|
|
|
const jjjgPieList = ref([]); |
|
|
|
|
const ajlyPieList = ref([]); |
|
|
|
|
const ajhcqxList = ref([]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const temp = ref({ |
|
|
|
|
tempCheckedCaseTotal: 0, |
|
|
|
|
tempDealPro: 0, |
|
|
|
|
@ -262,16 +292,25 @@ const temp = ref({
|
|
|
|
|
tempRate: 0, |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
temp.value={ |
|
|
|
|
tempCheckedCaseTotal: 292, |
|
|
|
|
tempDealPro: 285, |
|
|
|
|
tempDealPre: 223, |
|
|
|
|
tempDealOrg: 93, |
|
|
|
|
tempRate: 18, |
|
|
|
|
} |
|
|
|
|
}, 1000); |
|
|
|
|
|
|
|
|
|
// setTimeout(() => { |
|
|
|
|
// temp.value={ |
|
|
|
|
// tempCheckedCaseTotal: 292, |
|
|
|
|
// tempDealPro: 285, |
|
|
|
|
// tempDealPre: 223, |
|
|
|
|
// tempDealOrg: 93, |
|
|
|
|
// tempRate: 18, |
|
|
|
|
// } |
|
|
|
|
// }, 1000); |
|
|
|
|
// |
|
|
|
|
|
|
|
|
|
// region 事件||监听 |
|
|
|
|
const handleCommand = (year) => { |
|
|
|
|
selectedYear.value = year; // 更新当前选中的年份 |
|
|
|
|
}; |
|
|
|
|
watch(time, () => { |
|
|
|
|
getData(); |
|
|
|
|
}); |
|
|
|
|
// endregion |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -280,7 +319,7 @@ setTimeout(() => {
|
|
|
|
|
|
|
|
|
|
function getData() { |
|
|
|
|
getCaseVerifData(time.value).then((data) => { |
|
|
|
|
overview.value = data.overview; |
|
|
|
|
// overview.value = data.overview; |
|
|
|
|
fxsjBarList.value = data.fxsjBarList; |
|
|
|
|
jsdwBarList.value = data.jsdwBarList; |
|
|
|
|
zfbaPieList.value = data.zfbaPieList; |
|
|
|
|
@ -292,9 +331,13 @@ function getData() {
|
|
|
|
|
|
|
|
|
|
getCaseVerifTrend(time.value, 12).then((data) => { |
|
|
|
|
ajhcqxList.value = data.ajhcqsList; |
|
|
|
|
console.log(ajhcqxList.value) |
|
|
|
|
// console.log(ajhcqxList.value) |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
getAllCaseVerifCount(time.value).then((data) => { |
|
|
|
|
overview.value = data.overview; |
|
|
|
|
console.log(overview.value) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -505,9 +548,20 @@ const option = {
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const option1 = ref({ |
|
|
|
|
grid: { |
|
|
|
|
left: '5%', // 图表距离容器左边的距离 |
|
|
|
|
right: '2%', // 图表距离容器右边的距离 |
|
|
|
|
top: '10%', // 图表距离容器上边的距离 |
|
|
|
|
bottom: '20%', // 图表距离容器下边的距离 |
|
|
|
|
containLabel: false // 是否包含坐标轴的标签 |
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
type: "category", |
|
|
|
|
boundaryGap: false, |
|
|
|
|
boundaryGap: true, |
|
|
|
|
axisTick: { |
|
|
|
|
// 去掉X轴刻度线 |
|
|
|
|
show: false |
|
|
|
|
}, |
|
|
|
|
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月'], |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
@ -606,85 +660,100 @@ const colors = [
|
|
|
|
|
// 弹框整体 |
|
|
|
|
.tooltip { |
|
|
|
|
position: relative; |
|
|
|
|
width: 180px; |
|
|
|
|
height: 222px; |
|
|
|
|
width: 160px; |
|
|
|
|
height: 194px; |
|
|
|
|
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: 180px; |
|
|
|
|
width: 160px; |
|
|
|
|
height: 43px; |
|
|
|
|
background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%); |
|
|
|
|
background: linear-gradient(180deg, #0A2F86 0%, #04154E 100%); |
|
|
|
|
box-shadow: inset 0px -1px 0px 0px #253755; |
|
|
|
|
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: 180px; |
|
|
|
|
height: 172px; |
|
|
|
|
//font-size: 11px; |
|
|
|
|
margin-top: -12px; |
|
|
|
|
background: linear-gradient(180deg, #010457 0%, #031577 100%); |
|
|
|
|
width: 160px; |
|
|
|
|
height: 150px; |
|
|
|
|
background: linear-gradient(180deg, #010457 0%, #031577 100%) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tooltip-content ul { |
|
|
|
|
list-style-type: none; /* 移除默认的小圆点 */ |
|
|
|
|
padding: 0; |
|
|
|
|
|
|
|
|
|
padding-left: 5px; |
|
|
|
|
margin: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tooltip-content ul li { |
|
|
|
|
margin-left: 5px; |
|
|
|
|
height: 25px; |
|
|
|
|
height: 24px; |
|
|
|
|
color: #597AE9; |
|
|
|
|
font-size: 13px; |
|
|
|
|
font-weight: 400; |
|
|
|
|
font-size: 14px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 数字的span |
|
|
|
|
//// 数字的span |
|
|
|
|
.tooltip-ul span { |
|
|
|
|
float: right; |
|
|
|
|
width: 50px; |
|
|
|
|
text-align: right; |
|
|
|
|
margin-right: 10px; |
|
|
|
|
width: 55px; |
|
|
|
|
color: #fff; |
|
|
|
|
font-size: 13px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
text-align: center; /* 水平居中 */ |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 小尖角 */ |
|
|
|
|
.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; /* 右边颜色，与背景颜色相同 */ |
|
|
|
|
} |
|
|
|
|
///* 小尖角 */ |
|
|
|
|
//.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; /* 右边颜色，与背景颜色相同 */ |
|
|
|
|
//} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.gobal-dropdown-container { |
|
|
|
|
position: absolute; |
|
|
|
|
right: 20px; |
|
|
|
|
top: 15px; |
|
|
|
|
} |
|
|
|
|
.test { |
|
|
|
|
width: 95px; |
|
|
|
|
height: 25px; |
|
|
|
|
background: #1C3472; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.gobal-dropdown-container { |
|
|
|
|
position: absolute; |
|
|
|
|
right: 20px; |
|
|
|
|
top: 15px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.my-gobal-yearselect { |
|
|
|
|
font-size: 14px; |
|
|
|
|
padding-top: 6px; |
|
|
|
|
padding-left: 20px; |
|
|
|
|
width: 90px; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--<datav-tab-item label="警纪警规" name="3">--> |
|
|
|
|
<!--<v-charts--> |
|
|
|
|
<!-- style="height: 320px"--> |
|
|
|
|
<!-- :option="jjjgPieOption"--> |
|
|
|
|
<!-- autoresize--> |
|
|
|
|
<!--/>--> |
|
|
|
|
<!--</datav-tab-item>--> |
|
|
|
|
|
