|
@@ -57,14 +57,15 @@
|
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
|
|
|
|
|
|
|
|
+
|
|
|
<!-- 统计信息 -->
|
|
<!-- 统计信息 -->
|
|
|
<view class="stats-panel">
|
|
<view class="stats-panel">
|
|
|
- <view class="stats-box"> <view class="stats-icon-g stats-icon"></view> <text class="stat-item">资产</text></view>
|
|
|
|
|
- <view class="stats-box"> <view class="stats-icon-g stats-icon"></view> <text class="stat-item">资产</text></view>
|
|
|
|
|
- <view class="stats-box"> <view class="stats-icon-g stats-icon"></view> <text class="stat-item">资产</text></view>
|
|
|
|
|
- <view class="stats-box"> <view class="stats-icon-g stats-icon"></view> <text class="stat-item">资产</text></view>
|
|
|
|
|
- <view class="stats-box"> <view class="stats-icon-g stats-icon"></view> <text class="stat-item">资产</text></view>
|
|
|
|
|
- <view class="stats-box"> <view class="stats-icon-g stats-icon"></view> <text class="stat-item">资产</text></view>
|
|
|
|
|
|
|
+ <view class="stats-box"> <view class="stats-icon-debt stats-icon"></view> <text class="stat-item">债务</text></view>
|
|
|
|
|
+ <view class="stats-box"> <view class="stats-icon-borrower stats-icon"></view> <text class="stat-item">借款人</text></view>
|
|
|
|
|
+ <view class="stats-box"> <view class="stats-icon-guarantor stats-icon"></view> <text class="stat-item">担保人</text></view>
|
|
|
|
|
+ <view class="stats-box"> <view class="stats-icon-collateral stats-icon"></view> <text class="stat-item">抵押物</text></view>
|
|
|
|
|
+<!-- <view class="stats-box"> <view class="stats-icon-company stats-icon"></view> <text class="stat-item">借款人</text></view>-->
|
|
|
|
|
+<!-- <view class="stats-box"> <view class="stats-icon-g stats-icon"></view> <text class="stat-item">法院</text></view>-->
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</template>
|
|
</template>
|
|
@@ -118,19 +119,21 @@ export default {
|
|
|
// 示例数据
|
|
// 示例数据
|
|
|
this.graphData = {
|
|
this.graphData = {
|
|
|
nodes: [
|
|
nodes: [
|
|
|
- { id: 'node1', name: '中心节点', type: 'center', x: 275, y: 150, size: 20, color: '#ff6b6b' },
|
|
|
|
|
- { id: 'node2', name: '用户节点', type: 'user', x: 275, y: 150, size: 15, color: '#4ecdc4' },
|
|
|
|
|
- { id: 'node3', name: '产品节点', type: 'product', x: 275, y: 150, size: 15, color: '#45b7d1' },
|
|
|
|
|
- { id: 'node4', name: '分类节点', type: 'category', x: 275, y: 150, size: 15, color: '#96ceb4' },
|
|
|
|
|
- { id: 'node5', name: '服务节点', type: 'service', x: 275, y: 150, size: 15, color: '#feca57' }
|
|
|
|
|
|
|
+ { id: 'node1', name: '债务', type: 'center', x: 275, y: 150, size: 20, color: '#ff6b35' },
|
|
|
|
|
+ { id: 'node2', name: '大连迈世农业发展有限公司', type: 'user', x: 275, y: 150, size: 15, color: '#8b5cf6' },
|
|
|
|
|
+ { id: 'node3', name: '迈世集团有限公司', type: 'product', x: 275, y: 150, size: 15, color: '#3b82f6' },
|
|
|
|
|
+ { id: 'node4', name: '宜居园81号2单元1层1号房屋', type: 'category', x: 275, y: 150, size: 15, color: '#10b981' },
|
|
|
|
|
+ { id: 'node6', name: '景山东园7号13层2号房屋', type: 'category', x: 275, y: 150, size: 15, color: '#10b981' },
|
|
|
|
|
+ { id: 'node5', name: '中信银行股份有限公司大连分行', type: 'service', x: 275, y: 150, size: 15, color: '#6366f1' }
|
|
|
],
|
|
],
|
|
|
links: [
|
|
links: [
|
|
|
{ source: 'node1', target: 'node2' },
|
|
{ source: 'node1', target: 'node2' },
|
|
|
{ source: 'node1', target: 'node3' },
|
|
{ source: 'node1', target: 'node3' },
|
|
|
{ source: 'node1', target: 'node4' },
|
|
{ source: 'node1', target: 'node4' },
|
|
|
{ source: 'node1', target: 'node5' },
|
|
{ source: 'node1', target: 'node5' },
|
|
|
- { source: 'node2', target: 'node3' },
|
|
|
|
|
- { source: 'node4', target: 'node5' }
|
|
|
|
|
|
|
+ { source: 'node1', target: 'node6' },
|
|
|
|
|
+ { source: 'node2', target: 'node4' },
|
|
|
|
|
+ { source: 'node3', target: 'node6' },
|
|
|
]
|
|
]
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
@@ -139,7 +142,7 @@ export default {
|
|
|
const animate = () => {
|
|
const animate = () => {
|
|
|
this.updateLayout();
|
|
this.updateLayout();
|
|
|
this.drawGraph();
|
|
this.drawGraph();
|
|
|
- this.animationId = requestAnimationFrame(animate);
|
|
|
|
|
|
|
+ // this.animationId = requestAnimationFrame(animate);
|
|
|
};
|
|
};
|
|
|
animate();
|
|
animate();
|
|
|
},
|
|
},
|
|
@@ -337,10 +340,10 @@ export default {
|
|
|
// 检测点击的节点
|
|
// 检测点击的节点
|
|
|
const touchX = e.touches[0].x / this.scale;
|
|
const touchX = e.touches[0].x / this.scale;
|
|
|
const touchY = e.touches[0].y / this.scale;
|
|
const touchY = e.touches[0].y / this.scale;
|
|
|
-
|
|
|
|
|
this.selectedNode = this.getNodeAtPosition(touchX, touchY);
|
|
this.selectedNode = this.getNodeAtPosition(touchX, touchY);
|
|
|
if (this.selectedNode) {
|
|
if (this.selectedNode) {
|
|
|
- uni.vibrateShort(); // 触觉反馈
|
|
|
|
|
|
|
+ this.$emit('setNode',this.selectedNode)
|
|
|
|
|
+ // uni.vibrateShort(); // 触觉反馈
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
|
|
|
|
@@ -450,7 +453,7 @@ export default {
|
|
|
.graph-container {
|
|
.graph-container {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
- height: calc(100vh - 225px);
|
|
|
|
|
|
|
+ height: calc(100vh - 295px);
|
|
|
background: #f5f5f5;
|
|
background: #f5f5f5;
|
|
|
margin: 0 20rpx ;
|
|
margin: 0 20rpx ;
|
|
|
border-radius: 50rpx;
|
|
border-radius: 50rpx;
|
|
@@ -599,12 +602,33 @@ export default {
|
|
|
width: 10rpx;
|
|
width: 10rpx;
|
|
|
height: 10rpx;
|
|
height: 10rpx;
|
|
|
margin-right: 8rpx;
|
|
margin-right: 8rpx;
|
|
|
|
|
+ background-color:#6b7280 ;
|
|
|
|
|
+}
|
|
|
|
|
+.stats-icon-debt{
|
|
|
|
|
+ background-color:#ff6b35 ;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.stats-icon-borrower{
|
|
|
|
|
+ background-color:#8b5cf6 ;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.stats-icon-guarantor{
|
|
|
|
|
+ background-color:#3b82f6 ;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.stats-icon-collateral{
|
|
|
|
|
+ background-color:#10b981 ;
|
|
|
}
|
|
}
|
|
|
-.stats-icon-g{
|
|
|
|
|
- background-color:#4ecdc4 ;
|
|
|
|
|
|
|
+
|
|
|
|
|
+.stats-icon-property{
|
|
|
|
|
+ background-color:#f59e0b ;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
+.stats-icon-company{
|
|
|
|
|
+ background-color:#6366f1 ;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
.stat-item {
|
|
.stat-item {
|
|
|
display: block;
|
|
display: block;
|
|
|
color: white;
|
|
color: white;
|