543 lines
16 KiB
Vue
543 lines
16 KiB
Vue
<template>
|
||
<div class="card">
|
||
<div class="header-box">
|
||
<h3 class="header-title">企业司法涉诉</h3>
|
||
<p class="header-desc">展示企业在全国法院公开信息中的涉诉情况</p>
|
||
<p v-if="entName" class="header-ent">被查询企业：{{ entName }}</p>
|
||
</div>
|
||
|
||
<div v-if="hasCivilData" class="summary-section">
|
||
<div class="summary-row">
|
||
<div class="summary-card summary-risk">
|
||
<div class="summary-label">民事案件总数</div>
|
||
<div class="summary-value">{{ totalCivilCases }}</div>
|
||
<div class="summary-sub">
|
||
已结案 {{ civilClosedCases }} 件 · 未结案 {{ civilPendingCases }} 件
|
||
</div>
|
||
</div>
|
||
<div class="summary-card summary-money">
|
||
<div class="summary-label">案件地域/案由概览</div>
|
||
<div class="summary-value small">
|
||
{{ civilAreaStat || '地域分布未知' }}
|
||
</div>
|
||
<div class="summary-sub">
|
||
{{ civilAyStat || '案由分布暂无统计' }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tag-row" v-if="civilAreaStat || civilAyStat || civilJafsStat">
|
||
<span v-if="civilAreaStat" class="stat-tag">
|
||
涉案地域：{{ civilAreaStat }}
|
||
</span>
|
||
<span v-if="civilAyStat" class="stat-tag">
|
||
案由分布：{{ civilAyStat }}
|
||
</span>
|
||
<span v-if="civilJafsStat" class="stat-tag">
|
||
结案方式：{{ civilJafsStat }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="civilCases.length" class="block">
|
||
<div class="block-title">民事案件列表</div>
|
||
<div class="case-list">
|
||
<div v-for="(item, index) in civilCases" :key="item.c_id || index" class="case-wrapper">
|
||
<div class="case-card">
|
||
<!-- 可点击的摘要区域，参考 FLXG7E8F 样式 -->
|
||
<div class="case-summary" @click="toggleCaseExpand(item.c_id || index)">
|
||
<div class="summary-top">
|
||
<div class="summary-title">
|
||
<span class="case-no-text">
|
||
{{ item.c_ah || '暂无案号' }}
|
||
</span>
|
||
<span class="case-type-tag">
|
||
{{ item.n_ajlx || item.n_laay_tag || item.n_laay || '民事案件' }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="summary-middle">
|
||
<span class="summary-label">立案：</span>
|
||
<span class="summary-value">{{ formatDate(item.d_larq) }}</span>
|
||
</div>
|
||
<div class="summary-bottom">
|
||
<span class="risk-tag" :class="statusClass(item.n_ajjzjd)">
|
||
{{ item.n_ajjzjd || '未知进展' }}
|
||
</span>
|
||
<span v-if="item.n_pj_victory" class="victory-tag">
|
||
胜诉估计：{{ item.n_pj_victory }}
|
||
</span>
|
||
<span class="expand-indicator">
|
||
<span class="expand-text">
|
||
{{ isCaseExpanded(item.c_id || index) ? '收起详情' : '展开详情' }}
|
||
</span>
|
||
<img src="@/assets/images/report/zk.png" alt="展开" class="w-4 h-4"
|
||
:class="{ 'rotate-180': isCaseExpanded(item.c_id || index) }" />
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 详情区域，可展开/收起 -->
|
||
<div class="case-detail" :class="{
|
||
'detail-collapsed': !isCaseExpanded(item.c_id || index),
|
||
'detail-expanded': isCaseExpanded(item.c_id || index),
|
||
}">
|
||
<div class="case-body">
|
||
<div class="info-row">
|
||
<span class="info-label">立案时间</span>
|
||
<span class="info-value">{{ formatDate(item.d_larq) }}</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">结案时间</span>
|
||
<span class="info-value">{{ formatDate(item.d_jarq) }}</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">经办法院</span>
|
||
<span class="info-value">
|
||
{{ item.n_jbfy || '-' }}
|
||
</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">审理程序</span>
|
||
<span class="info-value">
|
||
{{ item.n_slcx || '-' }}
|
||
</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">结案案由</span>
|
||
<span class="info-value">
|
||
{{ item.n_jaay || '-' }}
|
||
</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">立案案由</span>
|
||
<span class="info-value">
|
||
{{ item.n_laay || '-' }}
|
||
</span>
|
||
</div>
|
||
<div class="info-row" v-if="item.c_gkws_pjjg">
|
||
<span class="info-label">判决结果</span>
|
||
<span class="info-value">
|
||
{{ item.c_gkws_pjjg }}
|
||
</span>
|
||
</div>
|
||
<div class="info-row" v-if="casePartiesText(item)">
|
||
<span class="info-label">当事人</span>
|
||
<span class="info-value">
|
||
{{ casePartiesText(item) }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else-if="hasAnyData" class="empty-tip">
|
||
暂未检索到民事案件记录，可留意其他风险模块。
|
||
</div>
|
||
<div v-else class="empty-tip">
|
||
暂无企业涉诉信息
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, ref } from "vue";
|
||
|
||
const props = defineProps({
|
||
data: { type: Object, default: () => ({}) },
|
||
params: { type: Object, default: () => ({}) },
|
||
apiId: { type: String, default: "" },
|
||
index: { type: Number, default: 0 },
|
||
notifyRiskStatus: { type: Function, default: () => { } },
|
||
});
|
||
|
||
const entName = computed(() => {
|
||
return props.params?.ent_name || props.params?.entName || "";
|
||
});
|
||
|
||
// 提取 entout.data 结构
|
||
const entoutData = computed(() => {
|
||
const d = props.data || {};
|
||
// 优先使用 entout.data
|
||
if (d.entout && d.entout.data) return d.entout.data;
|
||
if (d.entout) return d.entout;
|
||
// 兼容 data.entout.data 结构
|
||
if (d.data && d.data.entout && d.data.entout.data) return d.data.entout.data;
|
||
return null;
|
||
});
|
||
|
||
const civil = computed(() => entoutData.value?.civil || {});
|
||
const civilCases = computed(() => civil.value.cases || []);
|
||
const civilCount = computed(() => civil.value.count || {});
|
||
|
||
const totalCivilCases = computed(() => civilCount.value.count_total ?? civilCases.value.length ?? 0);
|
||
const civilClosedCases = computed(() => civilCount.value.count_jie_total ?? 0);
|
||
const civilPendingCases = computed(() => civilCount.value.count_wei_total ?? 0);
|
||
|
||
const civilAreaStat = computed(() => civilCount.value.area_stat || "");
|
||
const civilAyStat = computed(() => civilCount.value.ay_stat || "");
|
||
const civilJafsStat = computed(() => civilCount.value.jafs_stat || "");
|
||
|
||
const hasCivilData = computed(() => totalCivilCases.value > 0);
|
||
const hasAnyData = computed(() => !!entoutData.value);
|
||
|
||
// 展开/收起案件详情，参考 FLXG7E8F 的交互
|
||
const expandedCases = ref({});
|
||
function toggleCaseExpand(key) {
|
||
const id = String(key);
|
||
expandedCases.value[id] = !expandedCases.value[id];
|
||
}
|
||
function isCaseExpanded(key) {
|
||
const id = String(key);
|
||
return !!expandedCases.value[id];
|
||
}
|
||
|
||
const moneySummary = computed(() => {
|
||
const total = civilCount.value.money_jie_total ?? null;
|
||
if (total == null) return "暂无金额统计";
|
||
if (typeof total === "number" && total === 0) return "金额较小或未公开";
|
||
return "已结案金额估计 " + formatMoney(total) + " 元";
|
||
});
|
||
|
||
function formatMoney(val) {
|
||
if (val == null || val === "") return "-";
|
||
const num = Number(val);
|
||
if (Number.isNaN(num)) return String(val);
|
||
if (num >= 1e8) {
|
||
return (num / 1e8).toFixed(2) + " 亿";
|
||
}
|
||
if (num >= 1e4) {
|
||
return (num / 1e4).toFixed(2) + " 万";
|
||
}
|
||
return num.toFixed(2);
|
||
}
|
||
|
||
function formatDate(str) {
|
||
if (!str) return "-";
|
||
// 支持 yyyy-MM-dd 或 yyyy-MM-dd HH:mm:ss
|
||
if (str.length >= 10) {
|
||
return str.slice(0, 10);
|
||
}
|
||
return str;
|
||
}
|
||
|
||
function statusClass(status) {
|
||
if (!status) return "status-tag status-unknown";
|
||
if (String(status).includes("已结案")) return "status-tag status-closed";
|
||
if (String(status).includes("执行中") || String(status).includes("审理中")) {
|
||
return "status-tag status-processing";
|
||
}
|
||
return "status-tag status-unknown";
|
||
}
|
||
|
||
function casePartiesText(item) {
|
||
const list = item.c_dsrxx || [];
|
||
if (!Array.isArray(list) || list.length === 0) return "";
|
||
|
||
// 尝试优先提取与当前企业相关的角色
|
||
const name = entName.value;
|
||
const related = name
|
||
? list.filter((p) => typeof p.c_mc === "string" && p.c_mc.includes(name))
|
||
: [];
|
||
const targetList = related.length ? related : list;
|
||
|
||
const parts = targetList.map((p) => {
|
||
const n = p.c_mc || "";
|
||
const role = p.n_ssdw || "";
|
||
if (n && role) return `${n}（${role}）`;
|
||
return n || role || "";
|
||
}).filter(Boolean);
|
||
|
||
return parts.join("，");
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.card {
|
||
padding: 1rem;
|
||
}
|
||
|
||
.header-box {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.header-title {
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
}
|
||
|
||
.header-desc {
|
||
margin-top: 0.25rem;
|
||
font-size: 0.85rem;
|
||
color: #666666;
|
||
}
|
||
|
||
.header-ent {
|
||
margin-top: 0.25rem;
|
||
font-size: 0.85rem;
|
||
color: #333333;
|
||
}
|
||
|
||
.summary-section {
|
||
padding: 0.75rem 0;
|
||
border-top: 1px solid #f1f1f1;
|
||
border-bottom: 1px solid #f1f1f1;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.summary-row {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.summary-row {
|
||
flex-direction: row;
|
||
}
|
||
}
|
||
|
||
.summary-card {
|
||
flex: 1;
|
||
padding: 0.75rem;
|
||
border-radius: 0.75rem;
|
||
}
|
||
|
||
.summary-risk {
|
||
background: rgba(235, 60, 60, 0.04);
|
||
border: 1px solid rgba(235, 60, 60, 0.3);
|
||
}
|
||
|
||
.summary-money {
|
||
background: rgba(214, 148, 62, 0.04);
|
||
border: 1px solid rgba(214, 148, 62, 0.3);
|
||
}
|
||
|
||
.summary-label {
|
||
font-size: 0.85rem;
|
||
color: #666666;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.summary-value {
|
||
font-size: 1.4rem;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
}
|
||
|
||
.summary-value.small {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.summary-sub {
|
||
margin-top: 0.25rem;
|
||
font-size: 0.75rem;
|
||
color: #999999;
|
||
}
|
||
|
||
.tag-row {
|
||
margin-top: 0.75rem;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.stat-tag {
|
||
padding: 0.25rem 0.5rem;
|
||
font-size: 0.75rem;
|
||
border-radius: 999px;
|
||
background-color: #f5f5f5;
|
||
color: #666666;
|
||
}
|
||
|
||
.block {
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.block-title {
|
||
font-size: 0.95rem;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.case-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.case-wrapper {
|
||
width: 100%;
|
||
}
|
||
|
||
.case-card {
|
||
border-radius: 0.75rem;
|
||
border: 1px solid #dddddd;
|
||
background-color: #ffffff;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.case-summary {
|
||
padding: 0.75rem 0.75rem 0.5rem;
|
||
cursor: pointer;
|
||
position: relative;
|
||
}
|
||
|
||
.summary-top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.summary-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
min-width: 0;
|
||
}
|
||
|
||
.case-no-text {
|
||
font-size: 0.9rem;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
}
|
||
|
||
.case-type-tag {
|
||
padding: 0.1rem 0.4rem;
|
||
border-radius: 999px;
|
||
font-size: 0.75rem;
|
||
background-color: #f9ecec;
|
||
color: #eb3c3c;
|
||
}
|
||
|
||
.summary-middle {
|
||
font-size: 0.8rem;
|
||
padding-bottom: 0.25rem;
|
||
}
|
||
|
||
.summary-label {
|
||
color: #666666;
|
||
}
|
||
|
||
.summary-value {
|
||
color: #333333;
|
||
}
|
||
|
||
.summary-bottom {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.risk-tag {
|
||
padding: 0.2rem 0.6rem;
|
||
border-radius: 999px;
|
||
font-size: 0.75rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.status-closed {
|
||
background-color: rgba(31, 190, 93, 0.1);
|
||
color: #1fbe5d;
|
||
}
|
||
|
||
.status-processing {
|
||
background-color: rgba(235, 60, 60, 0.08);
|
||
color: #eb3c3c;
|
||
}
|
||
|
||
.status-unknown {
|
||
background-color: rgba(153, 153, 153, 0.1);
|
||
color: #666666;
|
||
}
|
||
|
||
.victory-tag {
|
||
font-size: 0.75rem;
|
||
color: #d6943e;
|
||
}
|
||
|
||
.expand-indicator {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.25rem;
|
||
font-size: 0.75rem;
|
||
color: #999999;
|
||
}
|
||
|
||
.expand-indicator img {
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.expand-indicator img.rotate-180 {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.case-detail {
|
||
border-top: 1px dashed #eeeeee;
|
||
padding: 0 0.75rem 0.5rem;
|
||
max-height: 0;
|
||
opacity: 0;
|
||
overflow: hidden;
|
||
transition: max-height 0.25s ease, opacity 0.25s ease;
|
||
}
|
||
|
||
.case-detail.detail-expanded {
|
||
max-height: 500px;
|
||
opacity: 1;
|
||
}
|
||
|
||
.status-closed {
|
||
background-color: rgba(31, 190, 93, 0.1);
|
||
color: #1fbe5d;
|
||
}
|
||
|
||
.status-processing {
|
||
background-color: rgba(235, 60, 60, 0.08);
|
||
color: #eb3c3c;
|
||
}
|
||
|
||
.status-unknown {
|
||
background-color: rgba(153, 153, 153, 0.1);
|
||
color: #666666;
|
||
}
|
||
|
||
.case-body {
|
||
border-top: 1px dashed #e5e5e5;
|
||
padding-top: 0.5rem;
|
||
}
|
||
|
||
.info-row {
|
||
display: flex;
|
||
font-size: 0.8rem;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.info-label {
|
||
width: 4.5rem;
|
||
color: #999999;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.info-value {
|
||
color: #333333;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.empty-tip {
|
||
margin-top: 0.75rem;
|
||
padding: 0.75rem;
|
||
text-align: center;
|
||
font-size: 0.85rem;
|
||
color: #999999;
|
||
background-color: #fafafa;
|
||
border-radius: 0.75rem;
|
||
}
|
||
</style>
|