281 lines
11 KiB
Vue
281 lines
11 KiB
Vue
<script setup>
|
|
import LTitle from "@/components/LTitle.vue";
|
|
import { defineProps, onMounted, ref, computed } from "vue";
|
|
import * as echarts from "echarts";
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
});
|
|
const fieldLabel = [
|
|
{ "field": "n_jbfy_cj", "label": "法院层级" },
|
|
{ "field": "n_ajjzjd", "label": "案件进展阶段" },
|
|
{ "field": "n_slcx", "label": "审理程序" },
|
|
{ "field": "c_ssdy", "label": "所属地域" },
|
|
{ "field": "n_ssdw", "label": "诉讼地位" },
|
|
{ "field": "larq_stat", "label": "涉案时间分布" },
|
|
{ "field": "n_laay", "label": "立案案由" },
|
|
{ "field": "n_laay_tree", "label": "立案案由详细" },
|
|
{ "field": "n_sqzxbdje", "label": "申请执行标的金额" },
|
|
{ "field": "n_wzxje", "label": "未执行金额" },
|
|
{ "field": "n_sjdwje", "label": "实际到位金额" },
|
|
{ "field": "n_jabdje", "label": "结案标的金额" },
|
|
{ "field": "n_dzzm", "label": "定罪罪名" },
|
|
{ "field": "n_dzzm_tree", "label": "定罪罪名详细" },
|
|
{ "field": "n_pcjg", "label": "判处结果" },
|
|
{ "field": "d_jarq", "label": "结案时间" },
|
|
{ "field": "n_jaay", "label": "结案案由" },
|
|
{ "field": "n_jaay_tree", "label": "结案案由详细" },
|
|
{ "field": "c_gkwsdsr", "label": "当事人说明" },
|
|
{ "field": "c_gkws_pj", "label": "判决结果" },
|
|
{ "field": "n_fzje", "label": "犯罪金额" },
|
|
{ "field": "n_pcpcje", "label": "判处赔偿金额" }
|
|
]
|
|
const collapse = ref([]);
|
|
const jsonData = ref({});
|
|
const chartOptions = ref({});
|
|
const chartDom = ref(null); // 用于绑定 DOM 容器
|
|
const totalCases = ref(0);
|
|
onMounted(() => {
|
|
jsonData.value = props.data;
|
|
// 计算每种案件的数量
|
|
const caseCounts = {
|
|
criminal: jsonData.value.criminal?.cases?.length || 0,
|
|
civil: jsonData.value.civil?.cases?.length || 0,
|
|
administrative: jsonData.value.administrative?.cases?.length || 0,
|
|
preservation: jsonData.value.preservation?.cases?.length || 0,
|
|
implement: jsonData.value.implement?.cases?.length || 0,
|
|
bankrupt: jsonData.value.bankrupt?.cases?.length || 0,
|
|
};
|
|
|
|
// 计算涉诉总案件数
|
|
totalCases.value = Object.values(caseCounts).reduce(
|
|
(sum, count) => sum + count,
|
|
0
|
|
);
|
|
|
|
chartOptions.value = {
|
|
title: {
|
|
// text: "涉诉案件数",
|
|
// subtext: totalCases.toString(),
|
|
// left: "35%", // 与 series.center 的第一个值保持一致
|
|
// top: "50%", // 与 series.center 的第二个值保持一致
|
|
// textAlign: "center", // 确保文本居中
|
|
// textStyle: {
|
|
// fontSize: 16,
|
|
// fontWeight: "bold",
|
|
// color: "#333",
|
|
// },
|
|
// subtextStyle: {
|
|
// fontSize: 24,
|
|
// fontWeight: "bold",
|
|
// color: "#EE6666",
|
|
// },
|
|
},
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{b}: {c}件 ({d}%)",
|
|
},
|
|
legend: {
|
|
orient: "vertical",
|
|
right: "0", // 调整到右边
|
|
top: "middle", // 垂直居中
|
|
itemGap: 10, // 图例项间距
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: "#666",
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "案件类型",
|
|
type: "pie",
|
|
radius: ["30%", "60%"], // 调整环形图半径
|
|
center: ["30%", "50%"], // 调整环形图的位置
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 8, // 添加圆角效果
|
|
borderColor: "#fff",
|
|
borderWidth: 2,
|
|
},
|
|
label: {
|
|
show: false, // 隐藏标签
|
|
position: "center",
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: "18",
|
|
fontWeight: "bold",
|
|
formatter: "{b}\n{c}件",
|
|
},
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
data: [
|
|
{
|
|
value: caseCounts.criminal,
|
|
name: `刑事案件${caseCounts.criminal}件`,
|
|
},
|
|
{
|
|
value: caseCounts.civil,
|
|
name: `民事案件${caseCounts.civil}件`,
|
|
},
|
|
{
|
|
value: caseCounts.administrative,
|
|
name: `行政案件${caseCounts.administrative}件`,
|
|
},
|
|
{
|
|
value: caseCounts.preservation,
|
|
name: `非诉保全审查${caseCounts.preservation}件`,
|
|
},
|
|
{
|
|
value: caseCounts.implement,
|
|
name: `执行案件${caseCounts.implement}件`,
|
|
},
|
|
{
|
|
value: caseCounts.bankrupt,
|
|
name: `强制清算与破产${caseCounts.bankrupt}件`,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
|
|
// 初始化 ECharts 实例
|
|
const chartInstance = echarts.init(chartDom.value);
|
|
chartInstance.setOption(chartOptions.value);
|
|
|
|
// 监听窗口大小变化，动态调整图表
|
|
window.addEventListener("resize", () => {
|
|
chartInstance.resize();
|
|
});
|
|
});
|
|
|
|
const caseTypes = computed(() => {
|
|
const data = jsonData.value;
|
|
return {
|
|
civil: data.civil?.cases || [],
|
|
criminal: data.criminal?.cases || [],
|
|
administrative: data.administrative?.cases || [],
|
|
preservation: data.preservation?.cases || [],
|
|
implement: data.implement?.cases || [],
|
|
bankrupt: data.bankrupt?.cases || [],
|
|
};
|
|
});
|
|
|
|
function getCaseTypeName(caseType) {
|
|
const caseTypeNames = {
|
|
civil: "民事",
|
|
criminal: "刑事",
|
|
administrative: "行政",
|
|
preservation: "非诉保全审查",
|
|
implement: "执行",
|
|
bankrupt: "强制清算与破产",
|
|
};
|
|
return caseTypeNames[caseType] || caseType;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="card">
|
|
<div class="flex flex-col gap-y-4">
|
|
<!-- 涉诉案件统计 -->
|
|
<LTitle title="涉诉案件统计" type="blue-green" />
|
|
<div class="font-bold ml-4 text-lg">
|
|
涉诉案件数共
|
|
<span class="text-red-500 text-2xl font-bold">{{
|
|
totalCases
|
|
}}</span>件
|
|
</div>
|
|
<div ref="chartDom" style="
|
|
width: 100%;
|
|
height: 300px;
|
|
margin-top: -40px;
|
|
margin-bottom: -40px;
|
|
"></div>
|
|
<template v-for="(caseType, typeName) in caseTypes" :key="typeName">
|
|
<LTitle :title="` ${getCaseTypeName(typeName)}案件`" type="blue-green" />
|
|
<div v-if="!caseType || caseType.length === 0">
|
|
无记录，或数据未被公开
|
|
</div>
|
|
<template v-else>
|
|
<van-collapse v-model="collapse">
|
|
<van-collapse-item v-for="(caseData, index) in caseType" :key="index" custom-class="collapse"
|
|
:name="index" :title="`案件: ${caseData.c_ah}`">
|
|
<div class="case-row">
|
|
<div class="case-label">案号:</div>
|
|
<div class="case-value">
|
|
{{ caseData.c_ah || "-" }}
|
|
</div>
|
|
</div>
|
|
<div class="case-row">
|
|
<div class="case-label">案件类型:</div>
|
|
<div class="case-value">
|
|
{{ caseData.n_ajlx || "-" }}
|
|
</div>
|
|
</div>
|
|
<div class="case-row">
|
|
<div class="case-label">经办法院:</div>
|
|
<div class="case-value">
|
|
{{ caseData.n_jbfy || "-" }}
|
|
</div>
|
|
</div>
|
|
<div class="case-row">
|
|
<div class="case-label">立案日期:</div>
|
|
<div class="case-value">
|
|
{{ caseData.d_larq || "-" }}
|
|
</div>
|
|
</div>
|
|
<div class="case-row">
|
|
<div class="case-label">结案方式:</div>
|
|
<div class="case-value">
|
|
{{ caseData.n_jafs || "-" }}
|
|
</div>
|
|
</div>
|
|
<div class="case-row">
|
|
<div class="case-label">当事人信息:</div>
|
|
<div class="case-value">
|
|
<div v-for="dsr in caseData.c_dsrxx" :key="dsr.c_mc">
|
|
{{ dsr.c_mc }} -
|
|
{{
|
|
dsr.n_ssdw === "申请执行人"
|
|
? "申请执行人"
|
|
: "被执行人"
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template v-for="(item, index) in fieldLabel" :key="index">
|
|
<div class="case-row" v-if="caseData[item.field]">
|
|
<div class="case-label">{{ item.label }}:</div>
|
|
<div class="case-value">{{ caseData[item.field] || '无' }}</div>
|
|
</div>
|
|
</template>
|
|
</van-collapse-item>
|
|
</van-collapse>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.case-row {
|
|
@apply flex items-start justify-between my-2;
|
|
}
|
|
|
|
.case-label {
|
|
@apply flex-shrink-0 font-bold text-gray-700;
|
|
}
|
|
|
|
.case-value {
|
|
@apply text-right text-gray-500;
|
|
}
|
|
|
|
:deep(.van-cell) {}
|
|
</style>
|