优化项目详情资金流向图谱展示
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="project-analysis-fund-graph">
|
||||
<div class="project-analysis-fund-graph" :class="rootClasses">
|
||||
<fund-graph-section
|
||||
ref="fundGraphSection"
|
||||
:initial-keyword="defaultKeyword"
|
||||
@@ -7,8 +7,12 @@
|
||||
:auto-scroll="false"
|
||||
:hide-header="true"
|
||||
:graph-tabs="graphTabs"
|
||||
:layout-scale="0.94"
|
||||
:show-edge-detail-table="false"
|
||||
:layout-scale="1.03"
|
||||
:show-edge-detail-table="true"
|
||||
:edge-detail-table-height="220"
|
||||
compact-graph-labels
|
||||
:show-edge-metrics="!isFundOnly"
|
||||
:stacked-fund-detail-pane="isFundOnly"
|
||||
hide-empty-detail-pane
|
||||
/>
|
||||
</div>
|
||||
@@ -46,6 +50,15 @@ export default {
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isFundOnly() {
|
||||
return this.initialGraphTab === "fund" && this.graphTabs.length === 2;
|
||||
},
|
||||
rootClasses() {
|
||||
return {
|
||||
"project-analysis-fund-graph--fund": this.isFundOnly,
|
||||
"project-analysis-fund-graph--relation": !this.isFundOnly,
|
||||
};
|
||||
},
|
||||
defaultKeyword() {
|
||||
return (this.modelSummary && this.modelSummary.staffIdCard)
|
||||
|| (this.person && (this.person.idNo || this.person.staffIdCard || this.person.staffName || this.person.name))
|
||||
@@ -76,7 +89,7 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.project-analysis-fund-graph {
|
||||
min-height: 520px;
|
||||
min-height: 780px;
|
||||
|
||||
::v-deep .graph-analysis-section {
|
||||
margin-top: 0;
|
||||
@@ -84,28 +97,44 @@ export default {
|
||||
}
|
||||
|
||||
::v-deep .fund-workbench {
|
||||
grid-template-columns: minmax(0, 1fr) 316px;
|
||||
max-width: 1000px;
|
||||
min-height: 450px;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
max-width: 100%;
|
||||
min-height: 760px;
|
||||
}
|
||||
|
||||
::v-deep .fund-workbench.fund-workbench--single {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
max-width: 760px;
|
||||
max-width: 100%;
|
||||
min-height: 560px;
|
||||
}
|
||||
|
||||
::v-deep .fund-workbench--stacked {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
::v-deep .fund-left-pane {
|
||||
padding: 10px 12px 12px;
|
||||
padding: 14px 16px 16px;
|
||||
overflow: hidden;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
::v-deep .fund-right-pane {
|
||||
padding: 12px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 14px;
|
||||
background: #ffffff;
|
||||
border-top: 1px solid #dce7f2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
::v-deep .graph-canvas-wrap,
|
||||
::v-deep .detail-empty {
|
||||
::v-deep .graph-canvas-wrap {
|
||||
height: auto;
|
||||
min-height: 360px;
|
||||
min-height: 520px;
|
||||
}
|
||||
|
||||
::v-deep .detail-empty {
|
||||
min-height: 240px;
|
||||
}
|
||||
|
||||
::v-deep .query-row {
|
||||
@@ -124,6 +153,21 @@ export default {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
::v-deep .detail-table .el-table__cell {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
::v-deep .pagination-container {
|
||||
margin-top: 8px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::v-deep .pagination-container .el-pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
::v-deep .query-row {
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
@@ -131,32 +175,73 @@ export default {
|
||||
|
||||
::v-deep .graph-shell {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
::v-deep .graph-canvas {
|
||||
min-height: 360px;
|
||||
min-height: 520px;
|
||||
}
|
||||
|
||||
::v-deep .detail-title {
|
||||
font-size: 15px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
::v-deep .node-field-row,
|
||||
::v-deep .edge-metrics span,
|
||||
::v-deep .edge-metrics strong,
|
||||
::v-deep .detail-subtitle {
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.project-analysis-fund-graph--relation {
|
||||
min-height: 520px;
|
||||
|
||||
::v-deep .fund-workbench {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
max-width: 760px;
|
||||
min-height: 450px;
|
||||
}
|
||||
|
||||
::v-deep .graph-canvas-wrap,
|
||||
::v-deep .detail-empty {
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
::v-deep .graph-canvas {
|
||||
min-height: 360px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1440px) {
|
||||
.project-analysis-fund-graph {
|
||||
.project-analysis-fund-graph--fund {
|
||||
::v-deep .fund-workbench {
|
||||
grid-template-columns: minmax(0, 1fr) 300px;
|
||||
max-width: 940px;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
::v-deep .fund-workbench.fund-workbench--single {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
::v-deep .graph-canvas-wrap {
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
::v-deep .detail-empty {
|
||||
min-height: 220px;
|
||||
}
|
||||
|
||||
::v-deep .graph-canvas {
|
||||
min-height: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.project-analysis-fund-graph--relation {
|
||||
::v-deep .fund-workbench {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
@@ -37,7 +37,10 @@
|
||||
<div
|
||||
v-show="activeGraphTab === 'fund'"
|
||||
class="fund-workbench"
|
||||
:class="{ 'fund-workbench--single': shouldHideFundDetailPane }"
|
||||
:class="{
|
||||
'fund-workbench--single': shouldHideFundDetailPane,
|
||||
'fund-workbench--stacked': stackedFundDetailPane,
|
||||
}"
|
||||
>
|
||||
<div class="fund-left-pane">
|
||||
<div class="query-row">
|
||||
@@ -155,7 +158,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="edge-metrics">
|
||||
<div v-if="showEdgeMetrics" class="edge-metrics">
|
||||
<div>
|
||||
<span>累计金额</span>
|
||||
<strong>{{ formatMoney(selectedEdge.totalAmount) }}</strong>
|
||||
@@ -199,7 +202,7 @@
|
||||
v-loading="detailLoading"
|
||||
:data="edgeDetails"
|
||||
size="mini"
|
||||
height="342"
|
||||
:height="edgeDetailTableHeight"
|
||||
class="detail-table"
|
||||
>
|
||||
<template slot="empty">
|
||||
@@ -512,6 +515,22 @@ export default {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
edgeDetailTableHeight: {
|
||||
type: Number,
|
||||
default: 342,
|
||||
},
|
||||
compactGraphLabels: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showEdgeMetrics: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
stackedFundDetailPane: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
hideEmptyDetailPane: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
@@ -521,6 +540,7 @@ export default {
|
||||
return {
|
||||
activeGraphTab: this.initialGraphTab,
|
||||
chart: null,
|
||||
chartBlankClickHandler: null,
|
||||
relationChart: null,
|
||||
graphLoading: false,
|
||||
relationGraphLoading: false,
|
||||
@@ -532,6 +552,7 @@ export default {
|
||||
selectedRelationNode: null,
|
||||
edgeDetails: [],
|
||||
detailTotal: 0,
|
||||
edgeDetailRequestSeq: 0,
|
||||
expandedObjectKeys: [],
|
||||
contextMenu: {
|
||||
visible: false,
|
||||
@@ -707,8 +728,7 @@ export default {
|
||||
this.resizeRelationChart();
|
||||
});
|
||||
} else if (this.chart) {
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
this.destroyFundChart();
|
||||
}
|
||||
},
|
||||
initialKeyword: {
|
||||
@@ -733,10 +753,7 @@ export default {
|
||||
window.removeEventListener("resize", this.resizeChart);
|
||||
window.removeEventListener("resize", this.resizeRelationChart);
|
||||
document.removeEventListener("click", this.hideContextMenu);
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
}
|
||||
this.destroyFundChart();
|
||||
if (this.relationChart) {
|
||||
this.relationChart.dispose();
|
||||
this.relationChart = null;
|
||||
@@ -1001,6 +1018,17 @@ export default {
|
||||
}
|
||||
if (!this.chart) {
|
||||
this.chart = echarts.init(this.$refs.chart);
|
||||
this.chartBlankClickHandler = (event) => {
|
||||
if (event && event.target) {
|
||||
return;
|
||||
}
|
||||
if (!this.selectedNode && !this.selectedEdge) {
|
||||
return;
|
||||
}
|
||||
this.hideContextMenu();
|
||||
this.resetFundSelection();
|
||||
};
|
||||
this.chart.getZr().on("click", this.chartBlankClickHandler);
|
||||
this.chart.on("click", (params) => {
|
||||
this.hideContextMenu();
|
||||
if (params.dataType === "edge" && params.data && params.data.raw) {
|
||||
@@ -1034,6 +1062,18 @@ export default {
|
||||
}
|
||||
this.renderChart();
|
||||
},
|
||||
destroyFundChart() {
|
||||
if (!this.chart) {
|
||||
this.chartBlankClickHandler = null;
|
||||
return;
|
||||
}
|
||||
if (this.chartBlankClickHandler && this.chart.getZr) {
|
||||
this.chart.getZr().off("click", this.chartBlankClickHandler);
|
||||
}
|
||||
this.chartBlankClickHandler = null;
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
initRelationChart() {
|
||||
if (!this.$refs.relationChart) {
|
||||
return;
|
||||
@@ -1212,23 +1252,35 @@ export default {
|
||||
}],
|
||||
}, true);
|
||||
},
|
||||
renderChart() {
|
||||
renderChart(options = {}) {
|
||||
if (!this.chart) {
|
||||
return;
|
||||
}
|
||||
const resetViewport = !!options.resetViewport;
|
||||
this.syncChartSize();
|
||||
if (resetViewport) {
|
||||
this.chart.clear();
|
||||
}
|
||||
const centerObjectKey = this.graph.centerNode && this.graph.centerNode.objectKey;
|
||||
const rawNodes = this.graph.nodes || [];
|
||||
const rawEdges = this.graph.edges || [];
|
||||
const chartWidth = this.chart.getWidth ? this.chart.getWidth() : 900;
|
||||
const chartHeight = this.chart.getHeight ? this.chart.getHeight() : 540;
|
||||
const nodeLayout = this.buildNodeLayout(rawNodes, rawEdges, centerObjectKey, chartWidth, chartHeight);
|
||||
const selectedEdge = this.selectedEdge;
|
||||
const hasFundSelection = !!(this.selectedNode || selectedEdge);
|
||||
const nodes = rawNodes.map((node) => {
|
||||
const isCenter = node.objectKey === centerObjectKey;
|
||||
const isFamily = !!node.relationType;
|
||||
const isExpanded = this.expandedObjectKeys.includes(node.objectKey);
|
||||
const category = isCenter ? 0 : isFamily ? 1 : isExpanded ? 3 : 2;
|
||||
const layout = nodeLayout.get(node.nodeKey) || {};
|
||||
const displayName = this.compactGraphLabels
|
||||
? this.truncateGraphText(node.nodeName, isCenter ? 8 : 7)
|
||||
: (node.nodeName || "-");
|
||||
const isSelectedNode = this.selectedNode && this.selectedNode.objectKey === node.objectKey;
|
||||
const inSelectedEdge = this.isNodeInSelectedEdge(node, selectedEdge);
|
||||
const shouldDim = selectedEdge && !inSelectedEdge;
|
||||
return {
|
||||
id: node.nodeKey,
|
||||
name: node.nodeName,
|
||||
@@ -1240,7 +1292,7 @@ export default {
|
||||
fixed: true,
|
||||
category,
|
||||
raw: node,
|
||||
itemStyle: this.getNodeStyle(category, this.selectedNode && this.selectedNode.objectKey === node.objectKey),
|
||||
itemStyle: this.getNodeStyle(category, isSelectedNode || inSelectedEdge, shouldDim),
|
||||
emphasis: {
|
||||
scale: isCenter ? 1.08 : 1.12,
|
||||
itemStyle: {
|
||||
@@ -1257,13 +1309,13 @@ export default {
|
||||
show: true,
|
||||
position: "bottom",
|
||||
distance: isCenter ? 8 : 6,
|
||||
color: "#1b1f2a",
|
||||
color: shouldDim ? "#8794a6" : "#1b1f2a",
|
||||
fontSize: isCenter ? 14 : 13,
|
||||
fontWeight: isCenter ? 700 : 500,
|
||||
formatter: isFamily ? `{name|${node.nodeName || "-"} }\n{tag|${node.relationType}}` : "{b}",
|
||||
formatter: isFamily ? `{name|${displayName} }\n{tag|${node.relationType}}` : displayName,
|
||||
rich: {
|
||||
name: {
|
||||
color: "#1b1f2a",
|
||||
color: shouldDim ? "#8794a6" : "#1b1f2a",
|
||||
fontWeight: isCenter ? 700 : 500,
|
||||
fontSize: isCenter ? 14 : 13,
|
||||
lineHeight: 17,
|
||||
@@ -1280,6 +1332,8 @@ export default {
|
||||
const edgeCurves = this.buildEdgeCurves(rawEdges);
|
||||
const edges = rawEdges.map((edge, index) => {
|
||||
const isOut = String(edge.direction) === "1";
|
||||
const selected = this.isSelectedEdge(edge, selectedEdge);
|
||||
const shouldDim = selectedEdge && !selected;
|
||||
return {
|
||||
source: edge.fromKey,
|
||||
target: edge.toKey,
|
||||
@@ -1293,8 +1347,8 @@ export default {
|
||||
},
|
||||
lineStyle: {
|
||||
color: this.isExpandedEdge(edge) ? (isOut ? "#4f78ab" : "#3a8f83") : (isOut ? "#245f95" : "#1c7f73"),
|
||||
opacity: this.isExpandedEdge(edge) ? 0.72 : 0.9,
|
||||
width: this.isExpandedEdge(edge) ? 1.5 : 1.9,
|
||||
opacity: shouldDim ? 0.22 : selected ? 1 : this.isExpandedEdge(edge) ? 0.72 : 0.9,
|
||||
width: selected ? 2.8 : this.isExpandedEdge(edge) ? 1.5 : 1.9,
|
||||
curveness: edgeCurves[index],
|
||||
type: this.isManualEdge(edge) ? "dashed" : "solid",
|
||||
},
|
||||
@@ -1364,23 +1418,23 @@ export default {
|
||||
edgeLabel: {
|
||||
position: "middle",
|
||||
rotate: 0,
|
||||
distance: 22,
|
||||
color: "#4b5a6a",
|
||||
fontSize: 11,
|
||||
distance: this.compactGraphLabels ? 18 : 22,
|
||||
color: selectedEdge ? "#516070" : "#4b5a6a",
|
||||
fontSize: this.compactGraphLabels ? 10 : 11,
|
||||
fontWeight: 500,
|
||||
fontFamily: "'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif",
|
||||
backgroundColor: "rgba(255,255,255,0.92)",
|
||||
backgroundColor: this.compactGraphLabels ? "rgba(255,255,255,0.86)" : "rgba(255,255,255,0.92)",
|
||||
borderColor: "rgba(205, 216, 228, 0.92)",
|
||||
borderWidth: 1,
|
||||
borderRadius: 8,
|
||||
padding: [3, 7],
|
||||
padding: this.compactGraphLabels ? [2, 5] : [3, 7],
|
||||
},
|
||||
edgeLabelLayout: (params) => this.layoutEdgeLabel(params, nodeLayout, rawEdges, edgeCurves),
|
||||
labelLayout: { hideOverlap: false },
|
||||
data: nodes.concat(boundaryNodes),
|
||||
links: edges,
|
||||
emphasis: {
|
||||
focus: "adjacency",
|
||||
focus: hasFundSelection ? "none" : "adjacency",
|
||||
scale: true,
|
||||
lineStyle: {
|
||||
opacity: 0.92,
|
||||
@@ -1389,7 +1443,9 @@ export default {
|
||||
},
|
||||
}],
|
||||
}, true);
|
||||
this.resizeChart();
|
||||
if (!resetViewport) {
|
||||
this.resizeChart();
|
||||
}
|
||||
},
|
||||
buildBoundaryNodes(chartWidth, chartHeight) {
|
||||
const padding = 56;
|
||||
@@ -1631,10 +1687,10 @@ export default {
|
||||
}
|
||||
return PROXY_SYMBOL;
|
||||
},
|
||||
getNodeStyle(category, selected) {
|
||||
getNodeStyle(category, selected, dimmed = false) {
|
||||
const isCenter = category === 0;
|
||||
return {
|
||||
opacity: category === 3 ? 0.88 : 1,
|
||||
opacity: dimmed ? 0.42 : category === 3 ? 0.88 : 1,
|
||||
shadowBlur: selected ? 16 : isCenter ? 10 : 6,
|
||||
shadowOffsetY: selected ? 4 : 2,
|
||||
shadowColor: selected ? "rgba(42, 111, 174, 0.24)" : "rgba(45, 84, 124, 0.12)",
|
||||
@@ -1644,6 +1700,7 @@ export default {
|
||||
this.selectedEdge = edge;
|
||||
this.selectedNode = null;
|
||||
this.detailQuery.pageNum = 1;
|
||||
this.renderChart();
|
||||
if (this.isManualEdge(edge)) {
|
||||
this.edgeDetails = [];
|
||||
this.detailTotal = 0;
|
||||
@@ -1655,7 +1712,9 @@ export default {
|
||||
if (!this.selectedEdge) {
|
||||
return;
|
||||
}
|
||||
if (!this.selectedEdge.fromKey || !this.selectedEdge.toKey) {
|
||||
const requestSeq = ++this.edgeDetailRequestSeq;
|
||||
const selectedEdge = this.selectedEdge;
|
||||
if (!selectedEdge.fromKey || !selectedEdge.toKey) {
|
||||
this.edgeDetails = [];
|
||||
this.detailTotal = 0;
|
||||
this.$message.warning("当前边缺少明细查询参数");
|
||||
@@ -1664,26 +1723,34 @@ export default {
|
||||
this.detailLoading = true;
|
||||
try {
|
||||
const response = await getFundGraphEdgeDetail({
|
||||
fromKey: this.selectedEdge.fromKey,
|
||||
toKey: this.selectedEdge.toKey,
|
||||
direction: this.selectedEdge.direction,
|
||||
fromKey: selectedEdge.fromKey,
|
||||
toKey: selectedEdge.toKey,
|
||||
direction: selectedEdge.direction,
|
||||
transactionStartTime: this.query.transactionStartTime,
|
||||
transactionEndTime: this.query.transactionEndTime,
|
||||
pageNum: this.detailQuery.pageNum,
|
||||
pageSize: this.detailQuery.pageSize,
|
||||
});
|
||||
if (requestSeq !== this.edgeDetailRequestSeq || this.selectedEdge !== selectedEdge) {
|
||||
return;
|
||||
}
|
||||
this.edgeDetails = response.rows || [];
|
||||
this.detailTotal = response.total || 0;
|
||||
} catch (error) {
|
||||
if (requestSeq !== this.edgeDetailRequestSeq || this.selectedEdge !== selectedEdge) {
|
||||
return;
|
||||
}
|
||||
this.edgeDetails = [];
|
||||
this.detailTotal = 0;
|
||||
this.$message.error("流水明细查询失败");
|
||||
console.error("流水明细查询失败", {
|
||||
error,
|
||||
selectedEdge: this.selectedEdge,
|
||||
selectedEdge,
|
||||
});
|
||||
} finally {
|
||||
this.detailLoading = false;
|
||||
if (requestSeq === this.edgeDetailRequestSeq && this.selectedEdge === selectedEdge) {
|
||||
this.detailLoading = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
mergeGraph(currentGraph, nextGraph) {
|
||||
@@ -1711,6 +1778,26 @@ export default {
|
||||
isManualEdge(edge) {
|
||||
return !!(edge && edge.sourceType === "MANUAL");
|
||||
},
|
||||
isSelectedEdge(edge, selectedEdge) {
|
||||
if (!edge || !selectedEdge) {
|
||||
return false;
|
||||
}
|
||||
if (edge.edgeKey && selectedEdge.edgeKey) {
|
||||
return edge.edgeKey === selectedEdge.edgeKey;
|
||||
}
|
||||
return edge.fromKey === selectedEdge.fromKey
|
||||
&& edge.toKey === selectedEdge.toKey
|
||||
&& String(edge.direction || "") === String(selectedEdge.direction || "");
|
||||
},
|
||||
isNodeInSelectedEdge(node, selectedEdge) {
|
||||
if (!node || !selectedEdge) {
|
||||
return false;
|
||||
}
|
||||
return node.nodeKey === selectedEdge.fromKey
|
||||
|| node.nodeKey === selectedEdge.toKey
|
||||
|| node.objectKey === selectedEdge.fromObjectKey
|
||||
|| node.objectKey === selectedEdge.toObjectKey;
|
||||
},
|
||||
buildRelationNodeLayout(nodes, edges, centerObjectKey, chartWidth, chartHeight) {
|
||||
const layout = new Map();
|
||||
if (!nodes.length) {
|
||||
@@ -1860,10 +1947,30 @@ export default {
|
||||
this.queryByNode(node);
|
||||
},
|
||||
clearSelection() {
|
||||
this.edgeDetailRequestSeq += 1;
|
||||
this.selectedNode = null;
|
||||
this.selectedEdge = null;
|
||||
this.edgeDetails = [];
|
||||
this.detailTotal = 0;
|
||||
this.detailLoading = false;
|
||||
},
|
||||
resetFundSelection() {
|
||||
this.clearChartEmphasis();
|
||||
this.clearSelection();
|
||||
this.renderChart({ resetViewport: true });
|
||||
this.$nextTick(() => {
|
||||
this.clearChartEmphasis();
|
||||
});
|
||||
},
|
||||
clearChartEmphasis() {
|
||||
if (!this.chart) {
|
||||
return;
|
||||
}
|
||||
this.chart.dispatchAction({ type: "hideTip" });
|
||||
this.chart.dispatchAction({
|
||||
type: "downplay",
|
||||
seriesIndex: 0,
|
||||
});
|
||||
},
|
||||
resizeChart() {
|
||||
this.$nextTick(() => {
|
||||
@@ -1922,8 +2029,29 @@ export default {
|
||||
formatEdgeLabel(edge) {
|
||||
const amount = Number(edge && edge.totalAmount ? edge.totalAmount : 0);
|
||||
const count = Number(edge && edge.transactionCount ? edge.transactionCount : 0);
|
||||
if (this.compactGraphLabels) {
|
||||
return `${this.formatCompactMoney(amount)}, ${count}笔`;
|
||||
}
|
||||
return `${amount.toLocaleString("zh-CN", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}元, ${count}笔`;
|
||||
},
|
||||
formatCompactMoney(value) {
|
||||
const number = Math.abs(Number(value || 0));
|
||||
const sign = Number(value || 0) < 0 ? "-" : "";
|
||||
if (number >= 100000000) {
|
||||
return `${sign}${(number / 100000000).toLocaleString("zh-CN", { maximumFractionDigits: 2 })}亿`;
|
||||
}
|
||||
if (number >= 10000) {
|
||||
return `${sign}${(number / 10000).toLocaleString("zh-CN", { maximumFractionDigits: 2 })}万`;
|
||||
}
|
||||
return `${sign}${number.toLocaleString("zh-CN", { maximumFractionDigits: 0 })}元`;
|
||||
},
|
||||
truncateGraphText(value, maxLength) {
|
||||
const text = String(value || "-");
|
||||
if (text.length <= maxLength) {
|
||||
return text;
|
||||
}
|
||||
return `${text.slice(0, Math.max(1, maxLength - 1))}…`;
|
||||
},
|
||||
formatShortMoney(value) {
|
||||
const number = Number(value || 0);
|
||||
return `${number.toLocaleString("zh-CN", { maximumFractionDigits: 2 })}元`;
|
||||
|
||||
Reference in New Issue
Block a user