|
|
|
@ -149,7 +149,89 @@ const hitPersonNumber = ref(28.1); |
|
|
|
const comfortMoney = ref(0.0); |
|
|
|
const comfortMoney = ref(0.0); |
|
|
|
const punishmentSituationList = ref([]); |
|
|
|
const punishmentSituationList = ref([]); |
|
|
|
const comfortSituationList = ref([]); |
|
|
|
const comfortSituationList = ref([]); |
|
|
|
|
|
|
|
let gobalTempMapVoList = [ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
"name": "岳麓分局", |
|
|
|
|
|
|
|
"totalCase": 23, |
|
|
|
|
|
|
|
"victimPer": "暂无", |
|
|
|
|
|
|
|
"comfortPer": "19", |
|
|
|
|
|
|
|
"hitPro": "暂无", |
|
|
|
|
|
|
|
"comfortMon": "暂无", |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
"name": "芙蓉分局", |
|
|
|
|
|
|
|
"totalCase": 20, |
|
|
|
|
|
|
|
"victimPer": "暂无", |
|
|
|
|
|
|
|
"comfortPer": "12", |
|
|
|
|
|
|
|
"hitPro": "暂无", |
|
|
|
|
|
|
|
"comfortMon": "暂无", |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
"name": "天心分局", |
|
|
|
|
|
|
|
"totalCase": 20, |
|
|
|
|
|
|
|
"victimPer": "暂无", |
|
|
|
|
|
|
|
"comfortPer": "23", |
|
|
|
|
|
|
|
"hitPro": "暂无", |
|
|
|
|
|
|
|
"comfortMon": "暂无", |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
"name": "雨花分局", |
|
|
|
|
|
|
|
"totalCase": 19, |
|
|
|
|
|
|
|
"victimPer": "暂无", |
|
|
|
|
|
|
|
"comfortPer": "16", |
|
|
|
|
|
|
|
"hitPro": "暂无", |
|
|
|
|
|
|
|
"comfortMon": "暂无", |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
"name": "浏阳市局", |
|
|
|
|
|
|
|
"totalCase": 17, |
|
|
|
|
|
|
|
"victimPer": "暂无", |
|
|
|
|
|
|
|
"comfortPer": "30", |
|
|
|
|
|
|
|
"hitPro": "暂无", |
|
|
|
|
|
|
|
"comfortMon": "暂无", |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
"name": "宁乡市局", |
|
|
|
|
|
|
|
"totalCase": 11, |
|
|
|
|
|
|
|
"victimPer": "暂无", |
|
|
|
|
|
|
|
"comfortPer": "0", |
|
|
|
|
|
|
|
"hitPro": "暂无", |
|
|
|
|
|
|
|
"comfortMon": "暂无", |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
"name": "开福分局", |
|
|
|
|
|
|
|
"totalCase": 11, |
|
|
|
|
|
|
|
"victimPer": "暂无", |
|
|
|
|
|
|
|
"comfortPer": "4", |
|
|
|
|
|
|
|
"hitPro": "暂无", |
|
|
|
|
|
|
|
"comfortMon": "暂无", |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
"name": "望城分局", |
|
|
|
|
|
|
|
"totalCase": 9, |
|
|
|
|
|
|
|
"victimPer": "暂无", |
|
|
|
|
|
|
|
"comfortPer": "0", |
|
|
|
|
|
|
|
"hitPro": "暂无", |
|
|
|
|
|
|
|
"comfortMon": "暂无", |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
"name": "长沙县局", |
|
|
|
|
|
|
|
"totalCase": 9, |
|
|
|
|
|
|
|
"victimPer": "暂无", |
|
|
|
|
|
|
|
"comfortPer": "0", |
|
|
|
|
|
|
|
"hitPro": "暂无", |
|
|
|
|
|
|
|
"comfortMon": "暂无", |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
"name": "高新分局", |
|
|
|
|
|
|
|
"totalCase": 4, |
|
|
|
|
|
|
|
"victimPer": "暂无", |
|
|
|
|
|
|
|
"comfortPer": "7", |
|
|
|
|
|
|
|
"hitPro": "暂无", |
|
|
|
|
|
|
|
"comfortMon": "暂无", |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
]; |
|
|
|
function getData() { |
|
|
|
function getData() { |
|
|
|
getRightsComfortData(time.value).then((data) => { |
|
|
|
getRightsComfortData(time.value).then((data) => { |
|
|
|
console.log('Received data:', data); // 添加日志输出 |
|
|
|
console.log('Received data:', data); // 添加日志输出 |
|
|
|
@ -167,29 +249,65 @@ watch(time, () => { |
|
|
|
onMounted(() => { |
|
|
|
onMounted(() => { |
|
|
|
getData(); |
|
|
|
getData(); |
|
|
|
}); |
|
|
|
}); |
|
|
|
const option = { |
|
|
|
const option = ref({ |
|
|
|
geo: { |
|
|
|
geo: { |
|
|
|
// 是上面注册时的名字哦，registerMap（'名字保持一致'） |
|
|
|
|
|
|
|
map: "changsha", |
|
|
|
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.totalCase}</span></li> |
|
|
|
|
|
|
|
<li>受侵害人数 <span>${dataItem.victimPer}</span></li> |
|
|
|
|
|
|
|
<li>抚慰人数 <span>${dataItem.comfortPer}</span></li> |
|
|
|
|
|
|
|
<li>打击处理人数 <span>${dataItem.hitPro}</span></li> |
|
|
|
|
|
|
|
<li>抚慰金额 <span>${dataItem.comfortMon}</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> |
|
|
|
|
|
|
|
</ul> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div>`; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
// backgroundColor: "#031577", // |
|
|
|
|
|
|
|
// borderColor: "#0A2F86", |
|
|
|
|
|
|
|
// borderWidth: 0, // 设置边框宽度为1像素 |
|
|
|
|
|
|
|
// borderRadius: 3, // 设置边框半径为3像素 |
|
|
|
|
|
|
|
// shadowBlur: 0, // 设置阴影模糊程度为8像素 |
|
|
|
|
|
|
|
// shadowOffsetX: 0, // 设置水平阴影位移量为0像素 |
|
|
|
|
|
|
|
// shadowOffsetY: 0, // 设置垂直阴影位移量为6像素 |
|
|
|
|
|
|
|
}, |
|
|
|
visualMap: { |
|
|
|
visualMap: { |
|
|
|
type: "piecewise", |
|
|
|
type: "piecewise", |
|
|
|
bottom: 10, |
|
|
|
bottom: 10, |
|
|
|
pieces: [ |
|
|
|
pieces: [ |
|
|
|
{gte: 85, lte: 100, label: "数据数高于1000"}, |
|
|
|
{ min: 0, max: 500, label: "问题数低于500" }, { min: 501, max: 1000, label: "问题数介于500-1000" }, { min: 1001, label: "问题数高于1000" }, |
|
|
|
{gte: 65, lte: 85, label: "问题数低于1000"}, |
|
|
|
|
|
|
|
{gte: 0, lte: 65, label: "问题数低于500"}, |
|
|
|
|
|
|
|
], |
|
|
|
], |
|
|
|
right: 10, // 右边距 |
|
|
|
right: 10, |
|
|
|
realtime: false, |
|
|
|
realtime: false, |
|
|
|
orient: "horizontal", // 水平显示 |
|
|
|
orient: "horizontal", |
|
|
|
textStyle: { |
|
|
|
textStyle: { |
|
|
|
color: "#fff", // 文字颜色 |
|
|
|
color: "#fff", |
|
|
|
}, |
|
|
|
}, |
|
|
|
calculable: true, |
|
|
|
calculable: true, |
|
|
|
inRange: { |
|
|
|
inRange: { |
|
|
|
color: ["#4987F6", "#F6A149", "#D34343"], |
|
|
|
color: ["#4987F6", "#F6A149", "#D34343",], |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
series: [ |
|
|
|
@ -198,23 +316,28 @@ const option = { |
|
|
|
type: "map", |
|
|
|
type: "map", |
|
|
|
map: "changsha", |
|
|
|
map: "changsha", |
|
|
|
hoverAnimation: true, |
|
|
|
hoverAnimation: true, |
|
|
|
emphasis: { |
|
|
|
|
|
|
|
areaColor: "#FFD700", // 高亮时区域颜色 |
|
|
|
|
|
|
|
borderColor: "#FF0000", // 高亮时边框颜色 |
|
|
|
|
|
|
|
borderWidth: 4 // 高亮时边框宽度 |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
label: { |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
show: true, |
|
|
|
color: "white", |
|
|
|
color: "white", |
|
|
|
}, |
|
|
|
}, |
|
|
|
itemStyle: { |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
normal: { |
|
|
|
areaColor: "#02215E", // 这里将地图区域的颜色修改为红色 |
|
|
|
areaColor: "#02215E", |
|
|
|
|
|
|
|
borderColor: "#1773c3", |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
|
|
|
|
areaColor: "#FFD700", // 高亮时区域颜色 |
|
|
|
|
|
|
|
borderColor: "#FF0000", // 高亮时边框颜色 |
|
|
|
|
|
|
|
borderWidth: 4 // 高亮时边框宽度 |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
data: gobalTempMapVoList.map(item => ({ |
|
|
|
|
|
|
|
name: item.name, |
|
|
|
|
|
|
|
value: item.totalPro // 将 totalPro 值映射到 value 字段 |
|
|
|
|
|
|
|
})) |
|
|
|
|
|
|
|
} |
|
|
|
], |
|
|
|
], |
|
|
|
}; |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const option1 = ref({ |
|
|
|
const option1 = ref({ |
|
|
|
xAxis: { |
|
|
|
xAxis: { |
|
|
|
@ -501,6 +624,108 @@ const colors = [ |
|
|
|
]; |
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
@import "@/style/datav.scss"; |
|
|
|
@import "@/style/datav.scss"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
:deep() { |
|
|
|
|
|
|
|
// 弹框整体 |
|
|
|
|
|
|
|
.tooltip { |
|
|
|
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
width: 169.88px; |
|
|
|
|
|
|
|
height: 170px; |
|
|
|
|
|
|
|
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: 132px; |
|
|
|
|
|
|
|
//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: 35px; |
|
|
|
|
|
|
|
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; /* 右边颜色，与背景颜色相同 */ |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.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> |
|
|
|
</style> |
