332 lines
9.3 KiB
Vue
332 lines
9.3 KiB
Vue
<template>
|
||
<div v-loading="loading" class="credit-archive">
|
||
<div class="toolbar">
|
||
<span class="toolbar-label">年报年度：</span>
|
||
<el-select
|
||
v-model="reportYear"
|
||
size="small"
|
||
clearable
|
||
placeholder="默认最近一年"
|
||
style="width: 160px;"
|
||
@change="loadData"
|
||
>
|
||
<el-option
|
||
v-for="y in yearOptions"
|
||
:key="y"
|
||
:label="`${y} 年`"
|
||
:value="y"
|
||
/>
|
||
</el-select>
|
||
<el-button
|
||
type="text"
|
||
icon="el-icon-refresh"
|
||
style="margin-left: 12px;"
|
||
@click="resetGraph"
|
||
>重置图谱</el-button>
|
||
<span class="toolbar-tip">提示：点击一级分支可展开/收起明细，单分支最多展示 {{ maxNodes }} 个节点</span>
|
||
</div>
|
||
<div ref="graph" class="graph-container" />
|
||
|
||
<!-- 节点详情弹窗 -->
|
||
<el-dialog
|
||
:visible.sync="detailVisible"
|
||
:title="detailTitle"
|
||
width="560px"
|
||
append-to-body
|
||
>
|
||
<el-descriptions v-if="detailData" :column="1" border size="small">
|
||
<el-descriptions-item
|
||
v-for="(value, key) in detailData"
|
||
:key="key"
|
||
:label="fieldLabel(key)"
|
||
>{{ value || '—' }}</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getCreditArchive } from '@/api/comprehensive'
|
||
|
||
const MAX_NODES = 20
|
||
const CURRENT_YEAR = new Date().getFullYear()
|
||
|
||
const FIELD_LABEL_MAP = {
|
||
name: '姓名',
|
||
entName: '企业名称',
|
||
uniscid: '统一社会信用代码',
|
||
certType: '证件类型',
|
||
subConAm: '认缴出资额',
|
||
subConProp: '认缴出资比例（%）',
|
||
respForm: '责任形式',
|
||
position: '职务',
|
||
lerepsign: '法定代表人标志',
|
||
tel: '联系电话',
|
||
email: '电子邮箱',
|
||
invid: '股东ID',
|
||
outinvid: '对外投资ID',
|
||
lmid: '联络员ID'
|
||
}
|
||
|
||
const BRANCH_DEFS = [
|
||
{ key: 'shareholders', label: '股东信息', color: '#5470c6' },
|
||
{ key: 'legalPersons', label: '法定代表人', color: '#91cc75' },
|
||
{ key: 'investments', label: '对外投资', color: '#fac858' },
|
||
{ key: 'contacts', label: '联络人', color: '#ee6666' }
|
||
]
|
||
|
||
export default {
|
||
name: 'CreditArchive',
|
||
props: {
|
||
pripid: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
entName: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
chart: null,
|
||
reportYear: null,
|
||
yearOptions: this.buildYearOptions(),
|
||
maxNodes: MAX_NODES,
|
||
archiveData: {
|
||
shareholders: [],
|
||
legalPersons: [],
|
||
investments: [],
|
||
contacts: []
|
||
},
|
||
truncated: {
|
||
shareholders: false,
|
||
investments: false,
|
||
contacts: false
|
||
},
|
||
branches: BRANCH_DEFS,
|
||
detailVisible: false,
|
||
detailTitle: '',
|
||
detailData: null
|
||
}
|
||
},
|
||
mounted() {
|
||
this.loadData()
|
||
window.addEventListener('resize', this.resize)
|
||
},
|
||
beforeDestroy() {
|
||
window.removeEventListener('resize', this.resize)
|
||
if (this.chart) {
|
||
this.chart.dispose()
|
||
this.chart = null
|
||
}
|
||
},
|
||
methods: {
|
||
buildYearOptions() {
|
||
const list = []
|
||
for (let y = CURRENT_YEAR; y >= CURRENT_YEAR - 9; y--) {
|
||
list.push(y)
|
||
}
|
||
return list
|
||
},
|
||
fieldLabel(key) {
|
||
return FIELD_LABEL_MAP[key] || key
|
||
},
|
||
async loadData() {
|
||
if (!this.pripid) return
|
||
this.loading = true
|
||
try {
|
||
const res = await getCreditArchive({
|
||
pripid: this.pripid,
|
||
reportYear: this.reportYear || undefined
|
||
})
|
||
const data = (res && res.data) || res || {}
|
||
this.archiveData = {
|
||
shareholders: data.shareholders || [],
|
||
legalPersons: data.legalPersons || [],
|
||
investments: data.investments || [],
|
||
contacts: data.contacts || []
|
||
}
|
||
this.truncated = data.truncated || { shareholders: false, investments: false, contacts: false }
|
||
// Q5：首次加载用后端返回的 reportYear 作为默认选中
|
||
if (!this.reportYear && data.reportYear) {
|
||
this.reportYear = data.reportYear
|
||
}
|
||
this.$nextTick(() => this.renderGraph())
|
||
} catch (e) {
|
||
this.$message.error('信用档案数据加载失败')
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
renderGraph() {
|
||
if (!this.$refs.graph) return
|
||
if (!this.chart) {
|
||
this.chart = this.$echarts.init(this.$refs.graph)
|
||
this.chart.on('click', params => this.handleNodeClick(params))
|
||
}
|
||
|
||
const centerName = this.entName || this.archiveData.entName || '主体'
|
||
const centerNode = {
|
||
id: 'center',
|
||
name: centerName,
|
||
symbolSize: 80,
|
||
category: 0,
|
||
fixed: true,
|
||
x: 0,
|
||
y: 0,
|
||
itemStyle: { color: '#409EFF' },
|
||
label: { fontWeight: 'bold' }
|
||
}
|
||
const branchNodes = this.branches.map((b, i) => ({
|
||
id: b.key,
|
||
name: `${b.label} (${(this.archiveData[b.key] || []).length})`,
|
||
symbolSize: 50,
|
||
category: i + 1,
|
||
itemStyle: { color: b.color }
|
||
}))
|
||
const branchLinks = this.branches.map(b => ({
|
||
source: 'center',
|
||
target: b.key,
|
||
lineStyle: { color: '#aaa', width: 2 }
|
||
}))
|
||
|
||
this.chart.setOption({
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: params => {
|
||
if (params.dataType === 'edge') return ''
|
||
return params.name
|
||
}
|
||
},
|
||
legend: [{
|
||
data: this.branches.map(b => b.label),
|
||
bottom: 0
|
||
}],
|
||
series: [{
|
||
type: 'graph',
|
||
layout: 'force',
|
||
roam: true,
|
||
draggable: true,
|
||
label: { show: true, position: 'right', formatter: '{b}' },
|
||
force: { repulsion: 400, edgeLength: 120 },
|
||
categories: [
|
||
{ name: '主体' },
|
||
...this.branches.map(b => ({ name: b.label }))
|
||
],
|
||
data: [centerNode, ...branchNodes],
|
||
links: branchLinks,
|
||
lineStyle: { color: 'source', curveness: 0.1 }
|
||
}]
|
||
}, true)
|
||
},
|
||
handleNodeClick(params) {
|
||
// 点击中心节点 / 边 → 忽略
|
||
if (!params.data || params.dataType === 'edge') return
|
||
const branch = this.branches.find(b => b.key === params.data.id)
|
||
if (branch) {
|
||
this.toggleBranch(branch)
|
||
return
|
||
}
|
||
// 二级节点点击 → 弹出明细
|
||
if (params.data.rawData) {
|
||
const parentKey = String(params.data.id).split('-')[0]
|
||
const parentBranch = this.branches.find(b => b.key === parentKey)
|
||
this.detailTitle = parentBranch ? `${parentBranch.label}详情` : '详情'
|
||
this.detailData = params.data.rawData
|
||
this.detailVisible = true
|
||
}
|
||
},
|
||
toggleBranch(branch) {
|
||
const list = this.archiveData[branch.key] || []
|
||
if (!list.length) {
|
||
this.$message.info(`暂无${branch.label}`)
|
||
return
|
||
}
|
||
const option = this.chart.getOption()
|
||
const series = option.series[0]
|
||
const prefix = branch.key + '-'
|
||
const hasChild = series.data.some(n => String(n.id).startsWith(prefix))
|
||
|
||
if (hasChild) {
|
||
// 收起
|
||
series.data = series.data.filter(n => !String(n.id).startsWith(prefix))
|
||
series.links = series.links.filter(l => !String(l.target).startsWith(prefix))
|
||
} else {
|
||
// Q11：单分支最多展开 MAX_NODES 个节点，超出部分显示"更多..."
|
||
const displayList = list.slice(0, MAX_NODES)
|
||
const categoryIndex = this.branches.indexOf(branch) + 1
|
||
displayList.forEach((item, i) => {
|
||
const nodeId = `${branch.key}-${i}`
|
||
series.data.push({
|
||
id: nodeId,
|
||
name: this.getNodeName(branch.key, item),
|
||
symbolSize: 30,
|
||
category: categoryIndex,
|
||
itemStyle: { color: branch.color, opacity: 0.7 },
|
||
rawData: item
|
||
})
|
||
series.links.push({ source: branch.key, target: nodeId })
|
||
})
|
||
// 后端返回的截断标志或前端二次判断
|
||
const isTruncated = this.truncated[branch.key] || list.length > MAX_NODES
|
||
if (isTruncated) {
|
||
const moreId = `${branch.key}-more`
|
||
series.data.push({
|
||
id: moreId,
|
||
name: `更多... (共 ${list.length}${list.length > MAX_NODES ? '+' : ''} 项)`,
|
||
symbolSize: 26,
|
||
category: categoryIndex,
|
||
itemStyle: { color: branch.color, opacity: 0.4 }
|
||
})
|
||
series.links.push({ source: branch.key, target: moreId })
|
||
}
|
||
}
|
||
this.chart.setOption(option, true)
|
||
},
|
||
getNodeName(key, item) {
|
||
if (key === 'investments') return item.entName || '—'
|
||
if (key === 'shareholders') return item.name || '—'
|
||
return item.name || '—'
|
||
},
|
||
resetGraph() {
|
||
this.renderGraph()
|
||
},
|
||
resize() {
|
||
if (this.chart) this.chart.resize()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.credit-archive {
|
||
.toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 10px 12px;
|
||
background: #fafafa;
|
||
border: 1px solid #ebeef5;
|
||
border-bottom: none;
|
||
|
||
.toolbar-label {
|
||
font-size: 13px;
|
||
color: #606266;
|
||
margin-right: 6px;
|
||
}
|
||
.toolbar-tip {
|
||
margin-left: auto;
|
||
font-size: 12px;
|
||
color: #909399;
|
||
}
|
||
}
|
||
.graph-container {
|
||
width: 100%;
|
||
height: 600px;
|
||
border: 1px solid #ebeef5;
|
||
background: #fff;
|
||
}
|
||
}
|
||
</style>
|