378 lines
15 KiB
Vue
378 lines
15 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,
|
||
},
|
||
});
|
||
// 正确解构props.data中的字段并处理默认值
|
||
const {
|
||
entout: PropEntout = [],
|
||
sxbzxr: PropSxbzxr = [],
|
||
xgbzxr: PropXgbzxr = []
|
||
} = props.data || {}
|
||
|
||
// 安全获取entout数据(带响应式)
|
||
const entout = ref(PropEntout[0]?.entout || {
|
||
administrative: {},
|
||
bankrupt: {},
|
||
cases_tree: { criminal: [] },
|
||
civil: {},
|
||
count: {},
|
||
criminal: { cases: [], count: {} },
|
||
implement: {},
|
||
preservation: {}
|
||
})
|
||
|
||
// 获取其他字段(按需添加响应式)
|
||
const sx = ref(PropSxbzxr[0]?.sxbzxr || [])
|
||
const xg = ref(PropXgbzxr[0]?.xgbzxr || [])
|
||
const fieldLabel = [
|
||
// ================= 案件基础信息 =================
|
||
{ "field": "n_jbfy", "label": "经办法院" },
|
||
|
||
{ "field": "n_jbfy_cj", "label": "法院所属层级" },
|
||
{ "field": "c_ssdy", "label": "所属地域" },
|
||
|
||
// ================= 时间维度 =================
|
||
{ "field": "d_larq", "label": "立案时间" },
|
||
{ "field": "larq_stat", "label": "涉案时间分布" },
|
||
{ "field": "d_jarq", "label": "结案时间" },
|
||
|
||
// ================= 案由与罪名 =================
|
||
{ "field": "n_laay", "label": "立案案由" },
|
||
{ "field": "n_laay_tag", "label": "立案案由标签" },
|
||
{ "field": "n_laay_tree", "label": "立案案由详细" },
|
||
{ "field": "n_jaay", "label": "结案案由" },
|
||
|
||
{ "field": "n_jaay_tag", "label": "结案案由标签" },
|
||
{ "field": "n_jaay_tree", "label": "结案案由详细" },
|
||
{ "field": "n_dzzm", "label": "定罪罪名" },
|
||
{ "field": "n_dzzm_tree", "label": "定罪罪名详细" },
|
||
|
||
// ================= 当事人与诉讼 =================
|
||
{ "field": "c_gkws_dsr", "label": "当事人" },
|
||
{ "field": "n_dsrlx", "label": "当事人类型" },
|
||
{ "field": "n_ssdw", "label": "诉讼地位" },
|
||
{ "field": "n_ssdw_ys", "label": "一审诉讼地位" },
|
||
{ "field": "c_gkws_glah", "label": "相关案件号" },
|
||
|
||
// ================= 审理与判决 =================
|
||
{ "field": "n_slcx", "label": "审理程序" },
|
||
{ "field": "c_slfsxx", "label": "审理方式信息" },
|
||
{ "field": "n_ajjzjd", "label": "案件进展阶段" },
|
||
{ "field": "n_pcjg", "label": "判处结果" },
|
||
{ "field": "c_gkws_pjjg", "label": "判决结果" },
|
||
{ "field": "n_pj_victory", "label": "胜诉估计" },
|
||
|
||
// ================= 金额与执行 =================
|
||
// --- 起诉金额 ---
|
||
{ "field": "n_qsbdje_level", "label": "起诉标的金额等级" },
|
||
{ "field": "n_qsbdje", "label": "起诉标的金额" },
|
||
{ "field": "n_qsbdje_gj_level", "label": "起诉标的金额估计等级" },
|
||
{ "field": "n_qsbdje_gj", "label": "起诉标的金额估计" },
|
||
|
||
// --- 结案金额 ---
|
||
{ "field": "n_jabdje_level", "label": "结案标的金额等级" },
|
||
{ "field": "n_jabdje", "label": "结案标的金额" },
|
||
{ "field": "n_jabdje_gj_level", "label": "结案标的金额估计等级" },
|
||
{ "field": "n_jabdje_gj", "label": "结案标的金额估计" },
|
||
|
||
// --- 执行金额 ---
|
||
{ "field": "n_sqzxbdje", "label": "申请执行标的金额" },
|
||
{ "field": "n_sjdwje", "label": "实际到位金额" },
|
||
{ "field": "n_wzxje", "label": "未执行金额" },
|
||
|
||
// --- 其他金额 ---
|
||
{ "field": "n_fzje_level", "label": "犯罪金额等级" },
|
||
{ "field": "n_fzje", "label": "犯罪金额" },
|
||
{ "field": "n_bqqpcje_level", "label": "被请求赔偿金额等级" },
|
||
{ "field": "n_bqqpcje", "label": "被请求赔偿金额" },
|
||
{ "field": "n_pcpcje_level", "label": "判处赔偿金额等级" },
|
||
{ "field": "n_pcpcje", "label": "判处赔偿金额" },
|
||
{ "field": "n_pcpcje_gj_level", "label": "判处赔偿金额估计等级" },
|
||
{ "field": "n_pcpcje_gj", "label": "判处赔偿金额估计" },
|
||
{ "field": "n_ccxzxje_level", "label": "财产刑执行金额等级" },
|
||
{ "field": "n_ccxzxje", "label": "财产刑执行金额" },
|
||
{ "field": "n_ccxzxje_gj_level", "label": "财产刑执行金额估计等级" },
|
||
{ "field": "n_ccxzxje_gj", "label": "财产刑执行金额估计" },
|
||
|
||
// ================= 其他辅助字段 =================
|
||
{ "field": "n_sqbqse_level", "label": "申请保全数额等级" },
|
||
{ "field": "n_sqbqse", "label": "申请保全数额" },
|
||
{ "field": "c_sqbqbdw", "label": "申请保全标的物" },
|
||
|
||
// ================= 失信被执行人专项 、限制高消费专项 =================
|
||
{ "field": "xb", "label": "性别" },
|
||
{ "field": "zxfy", "label": "执行法院" },
|
||
{ "field": "sf", "label": "省份" },
|
||
{ "field": "ah", "label": "案号" },
|
||
{ "field": "zxyjwh", "label": "执行依据文号" },
|
||
{ "field": "zxyjdw", "label": "执行依据单位" },
|
||
{ "field": "yw", "label": "生成法律文书确定的义务" },
|
||
{ "field": "lxqk", "label": "履行情况" },
|
||
{ "field": "xwqx", "label": "失信行为情形" },
|
||
{ "field": "pjje_gj", "label": "失信金额估计" },
|
||
{ "field": "larq", "label": "立案日期" },
|
||
{ "field": "fbrq", "label": "发布日期" },
|
||
];
|
||
const collapse = ref([]);
|
||
const chartOptions = ref({});
|
||
const chartDom = ref(null); // 用于绑定 DOM 容器
|
||
const totalCases = ref(0);
|
||
|
||
onMounted(() => {
|
||
// 计算每种案件的数量
|
||
const caseCounts = {
|
||
criminal: entout.value.criminal?.cases?.length || 0,
|
||
civil: entout.value.civil?.cases?.length || 0,
|
||
administrative: entout.value.administrative?.cases?.length || 0,
|
||
preservation: entout.value.preservation?.cases?.length || 0,
|
||
implement: entout.value.implement?.cases?.length || 0,
|
||
bankrupt: entout.value.bankrupt?.cases?.length || 0,
|
||
sx: sx.value.length,
|
||
xg: xg.value.length
|
||
};
|
||
|
||
// 计算涉诉总案件数
|
||
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}件`,
|
||
},
|
||
{
|
||
value: caseCounts.bankrupt,
|
||
name: `失信${caseCounts.sx}件`,
|
||
}, {
|
||
value: caseCounts.bankrupt,
|
||
name: `限高${caseCounts.xg}件`,
|
||
},
|
||
],
|
||
},
|
||
],
|
||
};
|
||
|
||
// 初始化 ECharts 实例
|
||
const chartInstance = echarts.init(chartDom.value);
|
||
chartInstance.setOption(chartOptions.value);
|
||
|
||
// 监听窗口大小变化，动态调整图表
|
||
window.addEventListener("resize", () => {
|
||
chartInstance.resize();
|
||
});
|
||
});
|
||
|
||
const caseTypes = computed(() => {
|
||
const data = entout.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 || [],
|
||
sx: sx.value,
|
||
xg: xg.value
|
||
};
|
||
});
|
||
|
||
function getCaseTypeName(caseType) {
|
||
const caseTypeNames = {
|
||
civil: "民事",
|
||
criminal: "刑事",
|
||
administrative: "行政",
|
||
preservation: "非诉保全审查",
|
||
implement: "执行",
|
||
bankrupt: "强制清算与破产",
|
||
sx: "失信",
|
||
xg: "限高"
|
||
};
|
||
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 || caseData.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-left text-gray-500;
|
||
}
|
||
|
||
:deep(.van-cell) {}
|
||
</style>
|