|
|
|
|
@ -14,7 +14,6 @@
|
|
|
|
|
<datav-chart-bar |
|
|
|
|
:data="fxsjBarList" |
|
|
|
|
size="large" |
|
|
|
|
:color="colors" |
|
|
|
|
/> |
|
|
|
|
</el-scrollbar> |
|
|
|
|
</datav-tab-item> |
|
|
|
|
@ -24,7 +23,6 @@
|
|
|
|
|
:data="jsdwBarList" |
|
|
|
|
:max="11" |
|
|
|
|
size="large" |
|
|
|
|
:color="colors" |
|
|
|
|
/> |
|
|
|
|
</el-scrollbar> |
|
|
|
|
</datav-tab-item> |
|
|
|
|
@ -46,13 +44,7 @@
|
|
|
|
|
autoresize |
|
|
|
|
/> |
|
|
|
|
</datav-tab-item> |
|
|
|
|
<datav-tab-item label="警纪警规" name="3"> |
|
|
|
|
<v-charts |
|
|
|
|
style="height: 320px" |
|
|
|
|
:option="jjjgPieOption" |
|
|
|
|
autoresize |
|
|
|
|
/> |
|
|
|
|
</datav-tab-item> |
|
|
|
|
|
|
|
|
|
</datav-tabs> |
|
|
|
|
</datav-card> |
|
|
|
|
</el-col> |
|
|
|
|
@ -65,27 +57,27 @@
|
|
|
|
|
style="width: 16.66%" |
|
|
|
|
/> |
|
|
|
|
<datav-statistic |
|
|
|
|
:value="overview.confirmed" |
|
|
|
|
:value="292" |
|
|
|
|
title="查实案件数" |
|
|
|
|
style="width: 16.66%" |
|
|
|
|
/> |
|
|
|
|
<datav-statistic |
|
|
|
|
:value="overview.investigateAndPunish" |
|
|
|
|
:value="285" |
|
|
|
|
title="查处问题（个）" |
|
|
|
|
style="width: 16.66%" |
|
|
|
|
/> |
|
|
|
|
<datav-statistic |
|
|
|
|
:value="overview.accountablePeopleNumber" |
|
|
|
|
:value="223" |
|
|
|
|
title="问责人次" |
|
|
|
|
style="width: 16.66%" |
|
|
|
|
/> |
|
|
|
|
<datav-statistic |
|
|
|
|
:value="overview.accountableDepartNumber" |
|
|
|
|
:value="93" |
|
|
|
|
title="问责单位数" |
|
|
|
|
style="width: 16.66%" |
|
|
|
|
/> |
|
|
|
|
<datav-statistic |
|
|
|
|
:value="overview.confirmedRate" |
|
|
|
|
:value="18.4" |
|
|
|
|
value-unit="%" |
|
|
|
|
title="查实率" |
|
|
|
|
style="width: 16.66%" |
|
|
|
|
@ -117,6 +109,13 @@
|
|
|
|
|
</div> |
|
|
|
|
</datav-tab-item> |
|
|
|
|
<datav-tab-item label="问责处理情况" name="2"> |
|
|
|
|
<div class="mb-40"> |
|
|
|
|
<v-charts |
|
|
|
|
style="height: 340px" |
|
|
|
|
:option="wzclPieOption" |
|
|
|
|
autoresize |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</datav-tab-item> |
|
|
|
|
</datav-tabs> |
|
|
|
|
</datav-card> |
|
|
|
|
@ -131,8 +130,7 @@
|
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</datav-tab-item> |
|
|
|
|
<datav-tab-item label="禁闭处理情况" name="2"> |
|
|
|
|
</datav-tab-item> |
|
|
|
|
|
|
|
|
|
</datav-tabs> |
|
|
|
|
</datav-card> |
|
|
|
|
</el-col> |
|
|
|
|
@ -147,7 +145,7 @@ import vCharts from "vue-echarts";
|
|
|
|
|
import changshaMap from "@/assets/data/changsha.json"; |
|
|
|
|
import * as echarts from "echarts/core"; |
|
|
|
|
import moment from "moment"; |
|
|
|
|
import {getCaseVerifData} from "@/api/datav"; |
|
|
|
|
import {getCaseVerifData, getCaseVerifTrend} from "@/api/datav"; |
|
|
|
|
|
|
|
|
|
const time = ref([ |
|
|
|
|
moment().startOf("year").format("YYYY-MM-DD"), |
|
|
|
|
@ -162,14 +160,97 @@ const overview = ref({
|
|
|
|
|
accountableDepartNumber: 0, |
|
|
|
|
confirmedRate: 0, |
|
|
|
|
}); |
|
|
|
|
let gobalTempMapVoList = [ |
|
|
|
|
{ |
|
|
|
|
"name": "浏阳市局", |
|
|
|
|
"totalPro": 93, |
|
|
|
|
"checkedPro": 11, |
|
|
|
|
"dealPro": 8, |
|
|
|
|
"dealPersonCount": 7, |
|
|
|
|
"orgCount": 9, |
|
|
|
|
"rate": "12%" |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
"name": "长沙县局", |
|
|
|
|
"totalPro": 192, |
|
|
|
|
"checkedPro": 33, |
|
|
|
|
"dealPro": 33, |
|
|
|
|
"dealPersonCount": 22, |
|
|
|
|
"orgCount": 11, |
|
|
|
|
"rate": "17%" |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
"name": "开福分局", |
|
|
|
|
"totalPro": 174, |
|
|
|
|
"checkedPro": 63, |
|
|
|
|
"dealPro": 60, |
|
|
|
|
"dealPersonCount": 32, |
|
|
|
|
"orgCount": 13, |
|
|
|
|
"rate": "36%" |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
"name": "芙蓉分局", |
|
|
|
|
"totalPro": 175, |
|
|
|
|
"checkedPro": 30, |
|
|
|
|
"dealPro": 30, |
|
|
|
|
"dealPersonCount": 24, |
|
|
|
|
"orgCount": 17, |
|
|
|
|
"rate": "17%" |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
"name": "雨花分局", |
|
|
|
|
"totalPro": 214, |
|
|
|
|
"checkedPro": 32, |
|
|
|
|
"dealPro": 32, |
|
|
|
|
"dealPersonCount": 27, |
|
|
|
|
"orgCount": 12, |
|
|
|
|
"rate": "15%" |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
"name": "天心分局", |
|
|
|
|
"totalPro": 179, |
|
|
|
|
"checkedPro": 34, |
|
|
|
|
"dealPro": 21, |
|
|
|
|
"dealPersonCount": 16, |
|
|
|
|
"orgCount": 14, |
|
|
|
|
"rate": "19%" |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
"name": "岳麓分局", |
|
|
|
|
"totalPro": 234, |
|
|
|
|
"checkedPro": 25, |
|
|
|
|
"dealPro": 10, |
|
|
|
|
"dealPersonCount": 9, |
|
|
|
|
"orgCount": 10, |
|
|
|
|
"rate": "11%" |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
"name": "宁乡分局", |
|
|
|
|
"totalPro": 68, |
|
|
|
|
"checkedPro": 9, |
|
|
|
|
"dealPro": 9, |
|
|
|
|
"dealPersonCount": 11, |
|
|
|
|
"orgCount": 8, |
|
|
|
|
"rate": "13%" |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
"name": "望城分局", |
|
|
|
|
"totalPro": 78, |
|
|
|
|
"checkedPro": 21, |
|
|
|
|
"dealPro": 8, |
|
|
|
|
"dealPersonCount": 9, |
|
|
|
|
"orgCount": 5, |
|
|
|
|
"rate": "27%" |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
]; |
|
|
|
|
const fxsjBarList = ref([]); |
|
|
|
|
const jsdwBarList = ref([]); |
|
|
|
|
const zfbaPieList = ref([]); |
|
|
|
|
const fwglPieList = ref([]); |
|
|
|
|
const jjjgPieList = ref([]); |
|
|
|
|
|
|
|
|
|
const ajlyPieList = ref([]); |
|
|
|
|
const ajhcqxList = ref([]); |
|
|
|
|
|
|
|
|
|
function getData() { |
|
|
|
|
getCaseVerifData(time.value).then((data) => { |
|
|
|
|
@ -181,6 +262,14 @@ function getData() {
|
|
|
|
|
jjjgPieList.value = data.jjjgPieList; |
|
|
|
|
ajlyPieList.value = data.ajlyPieList; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
getCaseVerifTrend(time.value, 12).then((data) => { |
|
|
|
|
ajhcqxList.value = data.ajhcqsList; |
|
|
|
|
console.log(ajhcqxList.value) |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
watch(time, () => { |
|
|
|
|
@ -220,7 +309,12 @@ const fwglPieOption = computed(() => {
|
|
|
|
|
label: { |
|
|
|
|
color: "#fff", |
|
|
|
|
}, |
|
|
|
|
data: fwglPieList.value, |
|
|
|
|
data: [ |
|
|
|
|
{value: 4, name: "交警执法"}, |
|
|
|
|
{value: 3, name: "态度生硬"}, |
|
|
|
|
{value: 3, name: "户政业务"}, |
|
|
|
|
{value: 2, name: "监所管理"}, |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
@ -256,18 +350,97 @@ const ajlyPieOption = computed(() => {
|
|
|
|
|
label: { |
|
|
|
|
color: "#fff", |
|
|
|
|
}, |
|
|
|
|
data: ajlyPieList.value, |
|
|
|
|
data: [ |
|
|
|
|
{name: "12389", value: 843}, |
|
|
|
|
{name: "网络投诉", value: 711}, |
|
|
|
|
{name: "信件投诉", value: 29}, |
|
|
|
|
{name: "其他投诉", value: 3}, |
|
|
|
|
{name: "值班来电", value: 3}, |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const wzclPieOption = computed(() => { |
|
|
|
|
return { |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: "item", |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
type: "pie", |
|
|
|
|
radius: ["40%", "70%"], |
|
|
|
|
label: { |
|
|
|
|
color: "#fff", |
|
|
|
|
}, |
|
|
|
|
data: [ |
|
|
|
|
{name: "通报批评", value: 167}, |
|
|
|
|
{name: "未处置人", value: 54}, |
|
|
|
|
{name: "工作提醒", value: 17}, |
|
|
|
|
{name: "批评教育", value: 9}, |
|
|
|
|
{name: "提醒谈话", value: 21}, |
|
|
|
|
{name: "禁闭", value: 2}, |
|
|
|
|
{name: "责令检查", value: 2}, |
|
|
|
|
{name: "党纪处分", value: 1}, |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
echarts.registerMap("changsha", changshaMap); |
|
|
|
|
const option = { |
|
|
|
|
geo: { |
|
|
|
|
// 是上面注册时的名字哦，registerMap（'名字保持一致'） |
|
|
|
|
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>${dataItem.totalPro}</span></li> |
|
|
|
|
<li>查实案件数 <span>${dataItem.checkedPro}</span></li> |
|
|
|
|
<li>查处问题（个） <span>${dataItem.dealPro}</span></li> |
|
|
|
|
<li>问责人次 <span>${dataItem.dealPersonCount}</span></li> |
|
|
|
|
<li>问责单位数 <span>${dataItem.orgCount}</span></li> |
|
|
|
|
<li>查实率 <span>${dataItem.rate}</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> |
|
|
|
|
<li>问责人次 <span>0</span></li> |
|
|
|
|
<li>问责单位数 <span>0</span></li> |
|
|
|
|
<li>查实率 <span>0</span></li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</div>`; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// backgroundColor: "#031577", // |
|
|
|
|
// borderColor: "#0A2F86", |
|
|
|
|
// borderWidth: 0, // 设置边框宽度为1像素 |
|
|
|
|
// borderRadius: 3, // 设置边框半径为3像素 |
|
|
|
|
// shadowBlur: 0, // 设置阴影模糊程度为8像素 |
|
|
|
|
// shadowOffsetX: 0, // 设置水平阴影位移量为0像素 |
|
|
|
|
// shadowOffsetY: 0, // 设置垂直阴影位移量为6像素 |
|
|
|
|
}, |
|
|
|
|
visualMap: { |
|
|
|
|
type: "piecewise", |
|
|
|
|
bottom: 10, |
|
|
|
|
@ -309,22 +482,7 @@ const option1 = ref({
|
|
|
|
|
xAxis: { |
|
|
|
|
type: "category", |
|
|
|
|
boundaryGap: false, |
|
|
|
|
data: [ |
|
|
|
|
"9/10", |
|
|
|
|
"9/11", |
|
|
|
|
"9/12", |
|
|
|
|
"9/13", |
|
|
|
|
"9/14", |
|
|
|
|
"9/15", |
|
|
|
|
"9/16", |
|
|
|
|
"9/17", |
|
|
|
|
"9/18", |
|
|
|
|
"9/19", |
|
|
|
|
"9/20", |
|
|
|
|
"9/21", |
|
|
|
|
"9/22", |
|
|
|
|
"9/23", |
|
|
|
|
], |
|
|
|
|
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月'], |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
type: "value", |
|
|
|
|
@ -367,10 +525,7 @@ const option1 = ref({
|
|
|
|
|
}, |
|
|
|
|
]), |
|
|
|
|
}, |
|
|
|
|
data: [ |
|
|
|
|
2000, 1160, 2310, 3000, 3100, 3100, 3100, 2000, 1160, 2310, |
|
|
|
|
3000, 3100, 3100, 3100, |
|
|
|
|
], |
|
|
|
|
data: [175, 101, 158, 141, 177, 162, 108, 166, 197, 104], |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}); |
|
|
|
|
@ -418,4 +573,90 @@ const colors = [
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
@import "@/style/datav.scss"; |
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
:deep() { |
|
|
|
|
// 弹框整体 |
|
|
|
|
.tooltip { |
|
|
|
|
position: relative; |
|
|
|
|
width: 180px; |
|
|
|
|
height: 222px; |
|
|
|
|
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; |
|
|
|
|
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: 180px; |
|
|
|
|
height: 172px; |
|
|
|
|
//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: 10px; |
|
|
|
|
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; /* 右边颜色，与背景颜色相同 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--<datav-tab-item label="警纪警规" name="3">--> |
|
|
|
|
<!--<v-charts--> |
|
|
|
|
<!-- style="height: 320px"--> |
|
|
|
|
<!-- :option="jjjgPieOption"--> |
|
|
|
|
<!-- autoresize--> |
|
|
|
|
<!--/>--> |
|
|
|
|
<!--</datav-tab-item>--> |
