|
|
|
@ -9,6 +9,7 @@ |
|
|
|
<datav-tabs v-model="activeTab"> |
|
|
|
<datav-tabs v-model="activeTab"> |
|
|
|
<datav-tab-item label="维权案件情况" name="1"> |
|
|
|
<datav-tab-item label="维权案件情况" name="1"> |
|
|
|
<datav-tabs |
|
|
|
<datav-tabs |
|
|
|
|
|
|
|
ref="firstAndRepeat" |
|
|
|
v-model="activeMailTab" |
|
|
|
v-model="activeMailTab" |
|
|
|
type="bottom-button" |
|
|
|
type="bottom-button" |
|
|
|
title="案件数" |
|
|
|
title="案件数" |
|
|
|
@ -68,7 +69,7 @@ |
|
|
|
<datav-card title="案件类别占比"> |
|
|
|
<datav-card title="案件类别占比"> |
|
|
|
|
|
|
|
|
|
|
|
<datav-tabs |
|
|
|
<datav-tabs |
|
|
|
v-model="activeMailTab" |
|
|
|
v-model="activeMailTabCase" |
|
|
|
type="bottom-button" |
|
|
|
type="bottom-button" |
|
|
|
> |
|
|
|
> |
|
|
|
<datav-tab-item label="刑事案件" name="1"> |
|
|
|
<datav-tab-item label="刑事案件" name="1"> |
|
|
|
@ -151,17 +152,17 @@ |
|
|
|
|
|
|
|
|
|
|
|
<datav-card title="民辅警受伤情况" sub-title="人数"> |
|
|
|
<datav-card title="民辅警受伤情况" sub-title="人数"> |
|
|
|
<datav-tabs |
|
|
|
<datav-tabs |
|
|
|
v-model="activeMailTab" |
|
|
|
v-model="comfortInjuryActiveMailTab" |
|
|
|
type="bottom-button" |
|
|
|
type="bottom-button" |
|
|
|
> |
|
|
|
> |
|
|
|
<datav-tab-item label="受伤人数" name="1"> |
|
|
|
<!-- <datav-tab-item label="受伤人数" name="1">--> |
|
|
|
<v-charts |
|
|
|
<!-- <v-charts--> |
|
|
|
style="height: 310px;" |
|
|
|
<!-- style="height: 310px;"--> |
|
|
|
:option="comfortPoliceInjurySituation" |
|
|
|
<!-- :option="comfortPoliceInjurySituation"--> |
|
|
|
autoresize |
|
|
|
<!-- autoresize--> |
|
|
|
/> |
|
|
|
<!-- />--> |
|
|
|
</datav-tab-item> |
|
|
|
<!-- </datav-tab-item>--> |
|
|
|
<datav-tab-item label="受伤类別" name="2"> |
|
|
|
<datav-tab-item label="受伤类別" name="1"> |
|
|
|
<v-charts |
|
|
|
<v-charts |
|
|
|
style="height: 310px;" |
|
|
|
style="height: 310px;" |
|
|
|
:option="comfortInjuryCategory" |
|
|
|
:option="comfortInjuryCategory" |
|
|
|
@ -174,7 +175,7 @@ |
|
|
|
<datav-card title="发案情况占比"> |
|
|
|
<datav-card title="发案情况占比"> |
|
|
|
|
|
|
|
|
|
|
|
<datav-tabs |
|
|
|
<datav-tabs |
|
|
|
v-model="activeMailTab" |
|
|
|
v-model="activeMailTabAriseCase" |
|
|
|
type="bottom-button" |
|
|
|
type="bottom-button" |
|
|
|
> |
|
|
|
> |
|
|
|
<datav-tab-item label="发案环节" name="1"> |
|
|
|
<datav-tab-item label="发案环节" name="1"> |
|
|
|
@ -240,7 +241,40 @@ const overview = ref({ |
|
|
|
comfortPersonNumber: 0, |
|
|
|
comfortPersonNumber: 0, |
|
|
|
comfortMoney: 0 |
|
|
|
comfortMoney: 0 |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
//维权（分县、局属）、抚慰饼图（分县、局属） |
|
|
|
|
|
|
|
const activeMailTab = ref("1") |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//案件类别占比(刑事、行政) |
|
|
|
|
|
|
|
const activeMailTabCase = ref("1") |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//发案情况占比(发案环节、发案警种、发案单位) |
|
|
|
|
|
|
|
const activeMailTabAriseCase = ref("1") |
|
|
|
|
|
|
|
//民辅警受伤情况（受伤类型） |
|
|
|
|
|
|
|
const comfortInjuryActiveMailTab = ref("1") |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
|
|
|
* //维权（分县、局属）、抚慰饼图（分县、局属） |
|
|
|
|
|
|
|
* 切换动画 |
|
|
|
|
|
|
|
* */ |
|
|
|
|
|
|
|
let activeMailTabIntervalId; |
|
|
|
|
|
|
|
const activeMailTabRepeatAnimation = () => { |
|
|
|
|
|
|
|
activeMailTab.value = (parseInt(activeMailTab.value) % 2 + 1).toString(); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
activeMailTabIntervalId = setInterval(activeMailTabRepeatAnimation, 3000); |
|
|
|
|
|
|
|
/** |
|
|
|
|
|
|
|
* 绑定自动事件 |
|
|
|
|
|
|
|
* */ |
|
|
|
|
|
|
|
let firstAndRepeat =ref(null) |
|
|
|
|
|
|
|
const activeMailTabAnimationStop = () => { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const temp = firstAndRepeat.value.$el; |
|
|
|
|
|
|
|
temp.addEventListener('mouseenter', () => { |
|
|
|
|
|
|
|
clearInterval(activeMailTabIntervalId) |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
temp.addEventListener('mouseleave', () => { |
|
|
|
|
|
|
|
activeMailTabIntervalId = setInterval(activeMailTabRepeatAnimation, 3000); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
const countyRightsBarList = ref([ |
|
|
|
const countyRightsBarList = ref([ |
|
|
|
{ |
|
|
|
{ |
|
|
|
label: "岳麓分局", |
|
|
|
label: "岳麓分局", |
|
|
|
@ -349,18 +383,27 @@ const comfortInjuryCategory = ref( |
|
|
|
); |
|
|
|
); |
|
|
|
////////////////////////////////////////////////////////////////////////////////////////////////// |
|
|
|
////////////////////////////////////////////////////////////////////////////////////////////////// |
|
|
|
function getData() { |
|
|
|
function getData() { |
|
|
|
|
|
|
|
|
|
|
|
getRightsComfortData(time.value).then(data => { |
|
|
|
getRightsComfortData(time.value).then(data => { |
|
|
|
|
|
|
|
|
|
|
|
overview.value.rightsNumber = data.rightsNumber |
|
|
|
overview.value.rightsNumber = data.rightsNumber |
|
|
|
overview.value.victimNumber = data.victimNumber |
|
|
|
overview.value.victimNumber = data.victimNumber |
|
|
|
overview.value.hitPersonNumber = data.hitPersonNumber |
|
|
|
overview.value.hitPersonNumber = data.hitPersonNumber |
|
|
|
overview.value.comfortPersonNumber = data.comfortPersonNumber |
|
|
|
overview.value.comfortPersonNumber = data.comfortPersonNumber |
|
|
|
overview.value.comfortMoney = data.comfortMoney |
|
|
|
overview.value.comfortMoney = data.comfortMoney |
|
|
|
|
|
|
|
|
|
|
|
countyComfortMoneyBarList.value = data.countyComfortMoneyBarList; |
|
|
|
countyComfortMoneyBarList.value = data.countyComfortMoneyBarList; |
|
|
|
bureauComfortMoneyBarList.value = data.bureauComfortMoneyBarList; |
|
|
|
bureauComfortMoneyBarList.value = data.bureauComfortMoneyBarList; |
|
|
|
punishmentSituationOption.value.series[0].data = data.punishmentSituation |
|
|
|
punishmentSituationOption.value.series[0].data = data.punishmentSituation |
|
|
|
comfortPoliceInjurySituation.value.series[0].data = data.comfortPoliceInjurySituation |
|
|
|
comfortPoliceInjurySituation.value.series[0].data = data.comfortPoliceInjurySituation |
|
|
|
comfortInjuryCategory.value.series[0].data = data.comfortInjuryCategory |
|
|
|
comfortInjuryCategory.value.series[0].data = data.comfortInjuryCategory |
|
|
|
|
|
|
|
countyRightsBarList.value = data.countyRightsBarList; |
|
|
|
|
|
|
|
bureauRightsBarList.value=data.bureauRightsBarList; |
|
|
|
|
|
|
|
xsajCaseTypeOption.value.series[0].data = data.crownCaseBarList; |
|
|
|
|
|
|
|
xzajCaseTypeOption.value.series[0].data = data.administrativeCaseList; |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
getCaseAriseSituationRateList(time.value) |
|
|
|
|
|
|
|
getMapData(time.value) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
watch(time, () => { |
|
|
|
watch(time, () => { |
|
|
|
@ -376,6 +419,7 @@ let globalTempMapVoList = ref([]); |
|
|
|
// 地图数据 |
|
|
|
// 地图数据 |
|
|
|
const getMapData = async (timeValue) => { |
|
|
|
const getMapData = async (timeValue) => { |
|
|
|
const res = await getComfortMapIcon(timeValue); |
|
|
|
const res = await getComfortMapIcon(timeValue); |
|
|
|
|
|
|
|
console.log('res',res) |
|
|
|
const mappedData = res.comfortMapVoList?.map(item => { |
|
|
|
const mappedData = res.comfortMapVoList?.map(item => { |
|
|
|
let name; |
|
|
|
let name; |
|
|
|
switch (item.name) { |
|
|
|
switch (item.name) { |
|
|
|
@ -425,6 +469,7 @@ const getMapData = async (timeValue) => { |
|
|
|
const avg = total / mappedData.length; // 计算平均值 |
|
|
|
const avg = total / mappedData.length; // 计算平均值 |
|
|
|
const range30Percent = avg * 0.3 // 不用取整，小数也可以 |
|
|
|
const range30Percent = avg * 0.3 // 不用取整，小数也可以 |
|
|
|
option.value.series[0].data = mappedData; |
|
|
|
option.value.series[0].data = mappedData; |
|
|
|
|
|
|
|
|
|
|
|
option.value.visualMap.pieces = [ |
|
|
|
option.value.visualMap.pieces = [ |
|
|
|
{gte: 0, lte: avg - range30Percent, label: "低于平均问题30%", color: "#4987F6"}, |
|
|
|
{gte: 0, lte: avg - range30Percent, label: "低于平均问题30%", color: "#4987F6"}, |
|
|
|
{gte: avg - range30Percent, lte: avg + range30Percent + 0.1, label: `平均问题上下浮动30%内`, color: "#F6A149"}, |
|
|
|
{gte: avg - range30Percent, lte: avg + range30Percent + 0.1, label: `平均问题上下浮动30%内`, color: "#F6A149"}, |
|
|
|
@ -464,7 +509,7 @@ const option = ref({ |
|
|
|
tooltip: { |
|
|
|
tooltip: { |
|
|
|
trigger: 'item', |
|
|
|
trigger: 'item', |
|
|
|
formatter: function (params) { |
|
|
|
formatter: function (params) { |
|
|
|
console.log(params) |
|
|
|
console.log('---------123e123------',params) |
|
|
|
const dataItem = globalTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2))); |
|
|
|
const dataItem = globalTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2))); |
|
|
|
if (dataItem) { |
|
|
|
if (dataItem) { |
|
|
|
return ` |
|
|
|
return ` |
|
|
|
@ -472,17 +517,17 @@ const option = ref({ |
|
|
|
<div class="tooltip-title">${dataItem.name}</div> |
|
|
|
<div class="tooltip-title">${dataItem.name}</div> |
|
|
|
<div class="tooltip-content"> |
|
|
|
<div class="tooltip-content"> |
|
|
|
<ul class="tooltip-ul" > |
|
|
|
<ul class="tooltip-ul" > |
|
|
|
<li>维权案件总数 <span>${dataItem.totalCase}</span></li> |
|
|
|
<li>维权案件总数 <span>${dataItem.rightsNumber }</span></li> |
|
|
|
<li>受侵害人数 <span>${dataItem.victimPer}</span></li> |
|
|
|
<li>受侵害人数 <span>${dataItem.victimNumber}</span></li> |
|
|
|
<li>抚慰人数 <span>${dataItem.comfortPer}</span></li> |
|
|
|
<li>抚慰人数 <span>${dataItem.comfortPersonNumber}</span></li> |
|
|
|
<li>打击处理人数 <span>${dataItem.hitPro}</span></li> |
|
|
|
<li>打击处理人数 <span>${dataItem.hitPersonNumber}</span></li> |
|
|
|
<li>抚慰金额 <span>${dataItem.comfortMon}</span></li> |
|
|
|
<li>抚慰金额 <span>${dataItem.comfortMoney}</span></li> |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div>`; |
|
|
|
</div>`; |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
return `<div class="tooltip"> |
|
|
|
return `<div class="tooltip"> |
|
|
|
<div class="tooltip-title">${dataItem.name}</div> |
|
|
|
<div class="tooltip-title">${dataItem?dataItem.name:'-'}</div> |
|
|
|
<div class="tooltip-content"> |
|
|
|
<div class="tooltip-content"> |
|
|
|
<ul class="tooltip-ul""> |
|
|
|
<ul class="tooltip-ul""> |
|
|
|
<li>维权案件总数 <span>-</span></li> |
|
|
|
<li>维权案件总数 <span>-</span></li> |
|
|
|
@ -546,10 +591,7 @@ const xsajCaseTypeOption = ref({ |
|
|
|
color: "#fff", |
|
|
|
color: "#fff", |
|
|
|
}, |
|
|
|
}, |
|
|
|
data: [ |
|
|
|
data: [ |
|
|
|
{value: 32, name: "故意伤害"}, |
|
|
|
|
|
|
|
{value: 42, name: "袭警罪"}, |
|
|
|
|
|
|
|
{value: 12, name: "寻衅滋事"}, |
|
|
|
|
|
|
|
{value: 28, name: "妨碍公务"} |
|
|
|
|
|
|
|
], |
|
|
|
], |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
], |
|
|
|
@ -565,11 +607,11 @@ const xzajCaseTypeOption = ref({ |
|
|
|
label: { |
|
|
|
label: { |
|
|
|
color: "#fff", |
|
|
|
color: "#fff", |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
tooltip: { |
|
|
|
|
|
|
|
trigger: "item", |
|
|
|
|
|
|
|
}, |
|
|
|
data: [ |
|
|
|
data: [ |
|
|
|
{value: 2, name: "故意伤害"}, |
|
|
|
|
|
|
|
{value: 42, name: "袭警罪"}, |
|
|
|
|
|
|
|
{value: 2, name: "寻衅滋事"}, |
|
|
|
|
|
|
|
{value: 28, name: "妨碍公务"} |
|
|
|
|
|
|
|
], |
|
|
|
], |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
], |
|
|
|
@ -591,9 +633,7 @@ const hurtNumOption = ref({ |
|
|
|
trigger: "item", |
|
|
|
trigger: "item", |
|
|
|
}, |
|
|
|
}, |
|
|
|
data: [ |
|
|
|
data: [ |
|
|
|
{value: 68, name: "民警"}, |
|
|
|
|
|
|
|
{value: 50, name: "辅警"}, |
|
|
|
|
|
|
|
{value: 3, name: "协警"}, |
|
|
|
|
|
|
|
], |
|
|
|
], |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
], |
|
|
|
@ -613,9 +653,7 @@ const hurtTypeOption = ref({ |
|
|
|
trigger: "item", |
|
|
|
trigger: "item", |
|
|
|
}, |
|
|
|
}, |
|
|
|
data: [ |
|
|
|
data: [ |
|
|
|
{value: 68, name: "民警"}, |
|
|
|
|
|
|
|
{value: 250, name: "辅警"}, |
|
|
|
|
|
|
|
{value: 3, name: "协警"}, |
|
|
|
|
|
|
|
], |
|
|
|
], |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
@ -633,14 +671,7 @@ const ariseCaseLinkOption = ref({ |
|
|
|
color: "#fff", |
|
|
|
color: "#fff", |
|
|
|
}, |
|
|
|
}, |
|
|
|
data: [ |
|
|
|
data: [ |
|
|
|
{value: 127, name: "110警情"}, |
|
|
|
|
|
|
|
{value: 32, name: "执勤处室"}, |
|
|
|
|
|
|
|
{value: 2, name: "组织调解"}, |
|
|
|
|
|
|
|
{value: 3, name: "传唤抓捕"}, |
|
|
|
|
|
|
|
{value: 2, name: "安保维稳"}, |
|
|
|
|
|
|
|
{value: 2, name: "网络侵权"}, |
|
|
|
|
|
|
|
{value: 2, name: "医闹纠纷"}, |
|
|
|
|
|
|
|
{value: 1, name: "其它"}, |
|
|
|
|
|
|
|
], |
|
|
|
], |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
], |
|
|
|
@ -657,14 +688,7 @@ const ariseCasePoliceOption = ref({ |
|
|
|
color: "#fff", |
|
|
|
color: "#fff", |
|
|
|
}, |
|
|
|
}, |
|
|
|
data: [ |
|
|
|
data: [ |
|
|
|
{value: 127, name: "110警情"}, |
|
|
|
|
|
|
|
{value: 132, name: "执勤处室"}, |
|
|
|
|
|
|
|
{value: 222, name: "组织调解"}, |
|
|
|
|
|
|
|
{value: 332, name: "传唤抓捕"}, |
|
|
|
|
|
|
|
{value: 2, name: "安保维稳"}, |
|
|
|
|
|
|
|
{value: 276, name: "网络侵权"}, |
|
|
|
|
|
|
|
{value: 492, name: "医闹纠纷"}, |
|
|
|
|
|
|
|
{value: 199, name: "其它"}, |
|
|
|
|
|
|
|
], |
|
|
|
], |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
], |
|
|
|
@ -681,14 +705,7 @@ const ariseCaseORgOption = ref({ |
|
|
|
color: "#fff", |
|
|
|
color: "#fff", |
|
|
|
}, |
|
|
|
}, |
|
|
|
data: [ |
|
|
|
data: [ |
|
|
|
{value: 17, name: "110警情"}, |
|
|
|
|
|
|
|
{value: 322, name: "执勤处室"}, |
|
|
|
|
|
|
|
{value: 234, name: "组织调解"}, |
|
|
|
|
|
|
|
{value: 343, name: "传唤抓捕"}, |
|
|
|
|
|
|
|
{value: 22, name: "安保维稳"}, |
|
|
|
|
|
|
|
{value: 2, name: "网络侵权"}, |
|
|
|
|
|
|
|
{value: 2, name: "医闹纠纷"}, |
|
|
|
|
|
|
|
{value: 1, name: "其它"}, |
|
|
|
|
|
|
|
], |
|
|
|
], |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
], |
|
|
|
@ -758,21 +775,20 @@ const colors = [ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.tooltip-content ul li { |
|
|
|
.tooltip-content ul li { |
|
|
|
height: 24px; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
justify-content: space-around; |
|
|
|
|
|
|
|
height: 26px; |
|
|
|
color: #597AE9; |
|
|
|
color: #597AE9; |
|
|
|
font-weight: 400; |
|
|
|
font-weight: 400; |
|
|
|
font-size: 14px; |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//// 数字的span |
|
|
|
|
|
|
|
.tooltip-ul span { |
|
|
|
.tooltip-ul span { |
|
|
|
|
|
|
|
display: inline-block; |
|
|
|
float: right; |
|
|
|
float: right; |
|
|
|
width: 55px; |
|
|
|
|
|
|
|
color: #fff; |
|
|
|
color: #fff; |
|
|
|
font-size: 14px; |
|
|
|
font-size: 14px; |
|
|
|
text-align: center; /* 水平居中 */ |
|
|
|
//text-align: center; /* 水平居中 */ |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -812,4 +828,4 @@ const colors = [ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style> |
|
|
|
</style> |
|
|
|
|
