313 lines
8.1 KiB
Vue
313 lines
8.1 KiB
Vue
<template>
|
|
<el-dialog
|
|
title="项目分析"
|
|
:visible.sync="visibleProxy"
|
|
width="92%"
|
|
top="2vh"
|
|
append-to-body
|
|
custom-class="project-analysis-dialog"
|
|
@close="handleDialogClosed"
|
|
>
|
|
<div class="project-analysis-dialog__body">
|
|
<div class="project-analysis-header">
|
|
<div class="project-analysis-header__main">
|
|
<div class="project-analysis-header__title-group">
|
|
<div class="project-analysis-header__eyebrow">结果总览</div>
|
|
<div class="project-analysis-header__title">项目分析详情</div>
|
|
</div>
|
|
<div
|
|
v-if='dialogData.sourceSummary.showCurrentModel && source === "riskModelPeople"'
|
|
class="project-analysis-header__meta"
|
|
>
|
|
<span class="project-analysis-header__meta-label">当前命中模型</span>
|
|
<span class="project-analysis-header__meta-value">
|
|
{{ dialogData.sourceSummary.currentModelValue }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-loading="detailLoading" class="project-analysis-workspace">
|
|
<project-analysis-sidebar
|
|
class="project-analysis-layout__sidebar"
|
|
:sidebar-data="dialogData.sidebar"
|
|
/>
|
|
<div class="project-analysis-layout__main">
|
|
<el-alert
|
|
v-if="detailError"
|
|
:closable="false"
|
|
class="project-analysis-layout__alert"
|
|
type="error"
|
|
show-icon
|
|
:title="detailError"
|
|
>
|
|
<template slot="default">
|
|
<el-button type="text" size="mini" @click="handleRetryDetail">重试</el-button>
|
|
</template>
|
|
</el-alert>
|
|
<el-tabs v-model="activeTab" class="project-analysis-tabs" stretch>
|
|
<el-tab-pane label="异常明细" name="abnormalDetail">
|
|
<project-analysis-abnormal-tab
|
|
:detail-data="dialogData.abnormalDetail"
|
|
:person="person"
|
|
:project-id="projectId"
|
|
@evidence-confirm="$emit('evidence-confirm', $event)"
|
|
/>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="资产分析" name="assetAnalysis">
|
|
<project-analysis-placeholder-tab :tab-data="getTabData('assetAnalysis')" />
|
|
</el-tab-pane>
|
|
<el-tab-pane label="征信摘要" name="creditSummary">
|
|
<project-analysis-placeholder-tab :tab-data="getTabData('creditSummary')" />
|
|
</el-tab-pane>
|
|
<el-tab-pane label="关系图谱" name="relationshipGraph">
|
|
<project-analysis-placeholder-tab :tab-data="getTabData('relationshipGraph')" />
|
|
</el-tab-pane>
|
|
<el-tab-pane label="资金流向" name="fundFlow">
|
|
<project-analysis-placeholder-tab :tab-data="getTabData('fundFlow')" />
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import { getOverviewPersonAnalysisDetail } from "@/api/ccdi/projectOverview";
|
|
import ProjectAnalysisAbnormalTab from "./ProjectAnalysisAbnormalTab";
|
|
import ProjectAnalysisPlaceholderTab from "./ProjectAnalysisPlaceholderTab";
|
|
import ProjectAnalysisSidebar from "./ProjectAnalysisSidebar";
|
|
import { buildProjectAnalysisDialogData } from "./preliminaryCheck.mock";
|
|
|
|
export default {
|
|
name: "ProjectAnalysisDialog",
|
|
components: {
|
|
ProjectAnalysisAbnormalTab,
|
|
ProjectAnalysisPlaceholderTab,
|
|
ProjectAnalysisSidebar,
|
|
},
|
|
props: {
|
|
visible: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
projectId: {
|
|
type: [String, Number],
|
|
default: null,
|
|
},
|
|
person: {
|
|
type: Object,
|
|
default: () => null,
|
|
},
|
|
source: {
|
|
type: String,
|
|
default: "riskPeople",
|
|
},
|
|
modelSummary: {
|
|
type: Object,
|
|
default: () => ({
|
|
modelCount: 0,
|
|
riskTags: [],
|
|
}),
|
|
},
|
|
projectName: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
activeTab: "abnormalDetail",
|
|
detailLoading: false,
|
|
detailError: "",
|
|
detailData: null,
|
|
};
|
|
},
|
|
computed: {
|
|
dialogData() {
|
|
const mockData = buildProjectAnalysisDialogData({
|
|
person: this.person,
|
|
source: this.source,
|
|
projectName: this.projectName,
|
|
});
|
|
return {
|
|
...mockData,
|
|
sidebar: {
|
|
...mockData.sidebar,
|
|
basicInfo: (this.detailData && this.detailData.basicInfo) || mockData.sidebar.basicInfo,
|
|
modelSummary: {
|
|
...mockData.sidebar.modelSummary,
|
|
...(this.modelSummary || {}),
|
|
},
|
|
},
|
|
abnormalDetail: (this.detailData && this.detailData.abnormalDetail) || mockData.abnormalDetail,
|
|
};
|
|
},
|
|
visibleProxy: {
|
|
get() {
|
|
return this.visible;
|
|
},
|
|
set(value) {
|
|
this.$emit("update:visible", value);
|
|
},
|
|
},
|
|
},
|
|
watch: {
|
|
visible(value) {
|
|
if (value) {
|
|
this.resetDialogState();
|
|
this.fetchDetailData();
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
resetDialogState() {
|
|
this.activeTab = "abnormalDetail";
|
|
this.detailLoading = false;
|
|
this.detailError = "";
|
|
this.detailData = null;
|
|
},
|
|
resolveStaffIdCard() {
|
|
return (this.modelSummary && this.modelSummary.staffIdCard)
|
|
|| (this.person && (this.person.idNo || this.person.staffIdCard))
|
|
|| "";
|
|
},
|
|
async fetchDetailData() {
|
|
const staffIdCard = this.resolveStaffIdCard();
|
|
if (!this.projectId || !staffIdCard) {
|
|
return;
|
|
}
|
|
this.detailLoading = true;
|
|
this.detailError = "";
|
|
try {
|
|
const response = await getOverviewPersonAnalysisDetail({
|
|
projectId: this.projectId,
|
|
staffIdCard,
|
|
});
|
|
this.detailData = (response && response.data) || null;
|
|
} catch (error) {
|
|
this.detailError = "项目分析详情加载失败，请稍后重试";
|
|
this.detailData = null;
|
|
console.error("加载项目分析详情失败", error);
|
|
} finally {
|
|
this.detailLoading = false;
|
|
}
|
|
},
|
|
handleRetryDetail() {
|
|
this.fetchDetailData();
|
|
},
|
|
getTabData(tabKey) {
|
|
return (
|
|
this.dialogData.tabs.find((item) => item.key === tabKey) || {
|
|
label: "",
|
|
description: "",
|
|
}
|
|
);
|
|
},
|
|
handleDialogClosed() {
|
|
this.resetDialogState();
|
|
this.$emit("close");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.project-analysis-dialog__body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 24px;
|
|
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.project-analysis-header {
|
|
padding: 24px 28px 18px;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
background: linear-gradient(135deg, #eff6ff 0%, #ffffff 65%);
|
|
}
|
|
|
|
.project-analysis-header__main {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
|
|
.project-analysis-header__title-group {
|
|
min-width: 0;
|
|
}
|
|
|
|
.project-analysis-header__eyebrow {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
color: #64748b;
|
|
}
|
|
|
|
.project-analysis-header__title {
|
|
margin-top: 8px;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.project-analysis-header__meta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px 14px;
|
|
border: 1px solid #fde68a;
|
|
border-radius: 999px;
|
|
background: #fffbeb;
|
|
}
|
|
|
|
.project-analysis-header__meta-label {
|
|
font-size: 12px;
|
|
color: #92400e;
|
|
}
|
|
|
|
.project-analysis-header__meta-value {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #b45309;
|
|
}
|
|
|
|
.project-analysis-workspace {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 24px;
|
|
min-height: 700px;
|
|
max-height: calc(96vh - 170px);
|
|
padding: 24px 28px 28px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.project-analysis-layout {
|
|
display: flex;
|
|
gap: 20px;
|
|
min-height: 640px;
|
|
}
|
|
|
|
.project-analysis-layout__sidebar {
|
|
flex: 0 0 340px;
|
|
}
|
|
|
|
.project-analysis-layout__main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
border-left: 1px solid #e2e8f0;
|
|
padding-left: 24px;
|
|
}
|
|
|
|
.project-analysis-layout__alert {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.project-analysis-tabs {
|
|
margin-top: -8px;
|
|
}
|
|
</style>
|