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.
415 lines
12 KiB
415 lines
12 KiB
<template> |
|
<el-scrollbar height="100vh"> |
|
<div class="wrapper"> |
|
<datav-header /> |
|
<main> |
|
<el-row :gutter="16"> |
|
<el-col :span="6"> |
|
<datav-card title="维权案件情况"> |
|
<datav-chart-bar |
|
sub-title="案件数" |
|
:data="data1" |
|
:max="31" |
|
size="large" |
|
/> |
|
<div class="flex tab-title flex center mt-20" style="margin-bottom: 20px"> |
|
<div class="tab-title-item active"> |
|
分县市局 |
|
</div> |
|
<div class="tab-title-item">局属单位</div> |
|
</div> |
|
</datav-card> |
|
<datav-card title="案件类别占比"> |
|
<v-charts |
|
style="height: 300px" |
|
:option="option2" |
|
autoresize |
|
/> |
|
<div class="flex tab-title flex center mt-20" style="margin-bottom: 20px"> |
|
<div class="tab-title-item active"> |
|
刑事案件 |
|
</div> |
|
<div class="tab-title-item">行政案件</div> |
|
</div> |
|
</datav-card> |
|
</el-col> |
|
<el-col :span="12"> |
|
<datav-date-picker v-model="time" /> |
|
<div class="flex gap-42"> |
|
<datav-statistic |
|
:value="136" |
|
title="维权案件总数" |
|
style="width: 20%" |
|
/> |
|
<datav-statistic |
|
:value="112" |
|
title="受侵害人数" |
|
style="width: 20%" |
|
/> |
|
<datav-statistic |
|
:value="comfortPersonNumber" |
|
title="抚慰人数" |
|
style="width: 20%" |
|
/> |
|
<datav-statistic |
|
:value="hitPersonNumber" |
|
title="打击处理人数" |
|
style="width: 20%" |
|
/> |
|
<datav-statistic |
|
:value="comfortMoney" |
|
title=" 抚慰金额（万元）" |
|
style="width: 20%" |
|
/> |
|
</div> |
|
<v-charts |
|
style="height: 450px" |
|
:option="option" |
|
autoresize |
|
/> |
|
<el-row :gutter="20"> |
|
<el-col :span="12"> |
|
<datav-card title="打处情况"> |
|
<v-charts |
|
style="height: 300px" |
|
:option="option3" |
|
autoresize |
|
/> |
|
</datav-card> |
|
</el-col> |
|
<el-col :span="12"> |
|
<datav-card title="抚慰情况"> |
|
<v-charts |
|
style="height: 300px" |
|
:option="option4" |
|
autoresize |
|
/> |
|
</datav-card> |
|
</el-col> |
|
</el-row> |
|
</el-col> |
|
<el-col :span="6"> |
|
<datav-card title="民辅警受伤情况"> |
|
<v-charts |
|
style="height: 300px" |
|
:option="option6" |
|
autoresize |
|
/> |
|
<div class="flex tab-title flex center mt-20" style="margin-bottom: 20px"> |
|
<div class="tab-title-item active"> |
|
受伤人数 |
|
</div> |
|
<div class="tab-title-item">受伤类别</div> |
|
</div> |
|
</datav-card> |
|
<datav-card title="发案情况占比"> |
|
<v-charts |
|
style="height: 300px" |
|
:option="option5" |
|
autoresize |
|
/> |
|
<div class="flex tab-title flex center mt-20" style="margin-bottom: 20px"> |
|
<div class="tab-title-item active"> |
|
发案环节 |
|
</div> |
|
<div class="tab-title-item">发案警种</div> |
|
<div class="tab-title-item">发案单位</div> |
|
</div> |
|
</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"; |
|
import {getRightsComfortData} from "@/api/datav"; |
|
import moment from "moment"; |
|
|
|
echarts.registerMap("changsha", changshaMap); |
|
const time = ref([ |
|
moment().startOf("year").format("YYYY-MM-DD"), |
|
moment().format("YYYY-MM-DD"), |
|
]); |
|
const comfortPersonNumber = ref(0); |
|
const hitPersonNumber = ref(0); |
|
const comfortMoney = ref(0.0); |
|
const punishmentSituationList = ref([]); |
|
const comfortSituationList = ref([]); |
|
|
|
function getData() { |
|
getRightsComfortData(time.value).then((data) => { |
|
console.log('Received data:', data); // 添加日志输出 |
|
comfortPersonNumber.value = data.comfortPersonNumber; |
|
hitPersonNumber.value = data.hitPersonNumber; |
|
comfortMoney.value = data.comfortMoney; |
|
punishmentSituationList.value = data.punishmentSituation; |
|
comfortSituationList.value = data.comfortSituation; |
|
}); |
|
} |
|
watch(time, () => { |
|
getData(); |
|
}) |
|
onMounted(() => { |
|
getData(); |
|
}); |
|
const option = { |
|
geo: { |
|
// 是上面注册时的名字哦，registerMap（'名字保持一致'） |
|
map: "changsha", |
|
}, |
|
|
|
visualMap: { |
|
type: "piecewise", |
|
bottom: 10, |
|
pieces: [ |
|
{ gte: 85, lte: 100, label: "问题数低于500" }, |
|
{ gte: 65, lte: 85, label: "问题数低于1000" }, |
|
{ gte: 0, lte: 65, label: "问题数低于1000" }, |
|
], |
|
right: 10, // 右边距 |
|
realtime: false, |
|
orient: "horizontal", // 水平显示 |
|
textStyle: { |
|
color: "#fff", // 文字颜色 |
|
}, |
|
calculable: true, |
|
inRange: { |
|
color: ["#D34343", "#F6A149", "#4987F6"], |
|
}, |
|
}, |
|
series: [ |
|
{ |
|
name: "长沙", |
|
type: "map", |
|
map: "changsha", |
|
hoverAnimation: true, |
|
|
|
label: { |
|
show: true, |
|
color: "white", |
|
}, |
|
itemStyle: { |
|
normal: { |
|
areaColor: "#02215E", // 这里将地图区域的颜色修改为红色 |
|
}, |
|
}, |
|
}, |
|
], |
|
}; |
|
|
|
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", |
|
], |
|
}, |
|
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: [ |
|
2000, 1160, 2310, 3000, 3100, 3100, 3100, 2000, 1160, 2310, |
|
3000, 3100, 3100, 3100, |
|
], |
|
}, |
|
], |
|
}); |
|
|
|
const data1 = [ |
|
// { |
|
// name: "开福分局", |
|
// value: 31 |
|
// }, |
|
// { |
|
// name: "芙蓉分局", |
|
// value: 30 |
|
// }, |
|
// { |
|
// name: "岳麓分局", |
|
// value: 22 |
|
// }, |
|
// { |
|
// name: "雨花分局", |
|
// value: 20 |
|
// }, |
|
// { |
|
// name: "望城分局", |
|
// value: 15 |
|
// }, |
|
// { |
|
// name: "浏阳市局", |
|
// value: 9 |
|
// }, |
|
// { |
|
// name: "长沙县局", |
|
// value: 9 |
|
// }, |
|
]; |
|
|
|
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: 311, name: "故意伤害" }, |
|
// { value: 735, name: "袭警罪" }, |
|
// { value: 580, name: "寻衅滋事" }, |
|
// { value: 484, name: "妨碍公务" } |
|
// ], |
|
// }, |
|
// ], |
|
}; |
|
|
|
const option3 = computed(() => { |
|
return { |
|
series: [ |
|
{ |
|
type: "pie", |
|
radius: ["40%", "70%"], |
|
label: { |
|
color: "#fff", |
|
}, |
|
data: punishmentSituationList.value, |
|
}, |
|
], |
|
}; |
|
}); |
|
|
|
const option4 = computed(() => { |
|
return { |
|
series: [ |
|
{ |
|
type: "pie", |
|
radius: ["40%", "70%"], |
|
label: { |
|
color: "#fff", |
|
}, |
|
data: comfortSituationList.value, |
|
}, |
|
], |
|
}; |
|
}); |
|
|
|
const option6 = { |
|
series: [ |
|
// { |
|
// type: "pie", |
|
// radius: ["40%", "70%"], |
|
// label: { |
|
// color: "#fff", |
|
// }, |
|
// data: [ |
|
// { value: 211, name: "民警" }, |
|
// { value: 655, name: "辅警" }, |
|
// { value: 666, name: "协警" }, |
|
// { value: 312, name: "巡防队员" } |
|
// ], |
|
// }, |
|
], |
|
}; |
|
|
|
const option5 = { |
|
series: [ |
|
// { |
|
// type: "pie", |
|
// radius: ["40%", "70%"], |
|
// label: { |
|
// color: "#fff", |
|
// }, |
|
// data: [ |
|
// { value: 211, name: "其它" }, |
|
// { value: 655, name: "网络侵权" }, |
|
// { value: 666, name: "110警情" }, |
|
// { value: 321, name: "安保维稳" }, |
|
// { value: 211, name: "执勤处室" }, |
|
// { value: 421, name: "组织调解" }, |
|
// ], |
|
// }, |
|
], |
|
}; |
|
</script> |
|
<style lang="scss" scoped> |
|
@import "@/style/datav.scss"; |
|
</style> |