longcai/JiaZhiQianYan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.27 业务结构分析，产业链模块完善，接口对接

Browse Source
This commit is contained in:
尚政杰
2026-01-27 17:59:17 +08:00
parent dc82f4a57c
commit 21dc6aeefe
125 changed files with 1365 additions and 799 deletions
Download Patch File Download Diff File Expand all files Collapse all files

355
components/cyl-view/cyl-view.vue
View File

@@ -1,9 +1,9 @@
<template>
<view class="cyl_view">
<view class="top">
<view class="top flex">
<view class="child_1">产业链分析</view>
<view class="child_2">目标公司供应链图谱</view>
<view class="child_3">节点 18</view>
<view class="child_3">节点 {{totalNodes}}</view>
</view>
<view class="center">
<view class="child" :class="{action: center_index == 0}" @click="changeCenterIndex(0)">
@@ -14,53 +14,75 @@
</view>
</view>
<view class="bottom">
<view class="type">
<view v-for="(item,index) in types" :key="index" class="item">
<template v-if="item.title">
<view @click="typeIndex = index"
style="display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #FAFAFC; border-radius: 10rpx; width: 100%; padding: 26rpx 0; box-sizing: border-box;"
:style="{'background-color' : (typeIndex == index ? item.backColor : '#FAFAFC'), border : (typeIndex == index ? `1rpx solid ${item.color}` : 'none')}">
<view style="color: #2B2B2B; font-size: 24rpx; font-weight: bold;">
{{item.title}}
<text
style="min-width: 24rpx; text-align: center; margin-left: 6rpx; padding: 0 5rpx; border-radius: 5rpx; font-weight: 500;"
:style="{'background-color' : (typeIndex == index ? item.color : '#F2C369'), 'color' : (typeIndex == index ? '#ffffff' : '#070707')}">
{{item.count}}
</text>
</view>
<view style="color: #999999; font-size: 22rpx; font-weight: 500; margin-top: 10rpx;">
{{item.desc}}
</view>
</view>
</template>
<template v-else>
<image style="width: 100%; height: auto;" src="/pagesStock/static/icon/rightArrow.png"
mode="widthFix"></image>
</template>
</view>
</view>
<view class="list" @click="clickAction"
style="margin: 20rpx; background-color: #FAFAFC; border-radius: 10rpx; padding: 25rpx 20rpx; box-sizing: border-box;">
<view style="color: #2B2B2B; font-size: 28rpx; font-weight: bold;">央行/政策性银行</view>
<view style="color: #999999; font-size: 24rpx; font-weight: 500;">提供再贷款、再贴现、同业存放等基础货币与流动性支持</view>
<view style="display: flex; align-items: center; font-size: 20rpx; font-weight: 500; margin: 15rpx 0;">
<view style="border-radius: 5rpx; padding: 0 10rpx; margin-right: 10rpx;"
:style="{'background-color' : (types[typeIndex].backColor), 'color' : (types[typeIndex].color)}">
Supplier</view>
<view style="border-radius: 5rpx; padding: 0 10rpx;"
:style="{'color' : types[typeIndex].color, border : `1rpx solid ${types[typeIndex].color}`}">份额:
12.5%</view>
</view>
<view style="display: flex; align-items: center;">
<view style="color: #71675D; font-size: 22rpx; font-weight: 500;">影响度</view>
<view
style="flex: 1; height: 10rpx; background-color: #EFEFEF; border-radius: 5rpx; margin: 0 15rpx; overflow: hidden;">
<view style="height: 100%; border-radius: 5rpx;"
:style="{width: `${95}%`, background: `linear-gradient(to right, ${types[typeIndex].sColor}, ${types[typeIndex].color})`}">
<view class="type flex">
<view v-for="(item,index) in types" :key="index" class="item flex flex1">
<view :class="'contentC flexColumnCenter flex1 '+(typeIndex==index?item.type:'')" @click="typeIndex = index">
<view class="titleNumC">
{{item.title}}
<text :class="'num '+(typeIndex==index?item.type:'')">{{item.count}}</text>
</view>
<view class="des">{{item.desc}}</view>
</view>
<view style="color: #71675D; font-size: 24rpx; font-weight: 500;">95</view>
<image v-if="index!=types.length-1" class="arrow" src="/pagesStock/static/icon/rightArrow.png"
mode="widthFix"></image>
</view>
</view>
<view class="list">
<block v-if="typeIndex==0">
<!-- 上游供应链 -->
<view class="item" v-for="(item,index) in upstreamList" :key="index" @click="clickAction(item)">
<view class="title">{{item.node_name}}</view>
<view class="des">{{item.node_description}}</view>
<view class="labelC flex">
<view class="label upstream type">{{item.node_type}}</view>
<view class="label upstream market">份额:{{item.market_share}}%</view>
</view>
<view class="importanceC flex">
<view class="title">影响度</view>
<view class="progressBgC flex1">
<view class="progress upstream" :style="{width: `${item.importance_score}%`}">
</view>
</view>
<view class="value">{{item.importance_score}}</view>
</view>
</view>
</block>
<block v-if="typeIndex==1">
<!-- 核心企业 -->
<view class="item" v-for="(item,index) in coreEnterpriseList" :key="index" @click="clickAction(item)">
<view class="title">{{item.node_name}}</view>
<view class="des">{{item.node_description}}</view>
<view class="labelC flex">
<view class="label core type">{{item.node_type}}</view>
<view class="label core market">份额:{{item.market_share}}%</view>
</view>
<view class="importanceC flex">
<view class="title">影响度</view>
<view class="progressBgC flex1">
<view class="progress core" :style="{width: `${item.importance_score}%`}"></view>
</view>
<view class="value">{{item.importance_score}}</view>
</view>
</view>
</block>
<block v-if="typeIndex==2">
<!-- 下游客户 -->
<view class="item" v-for="(item,index) in downstreamList" :key="index" @click="clickAction(item)">
<view class="title">{{item.node_name}}</view>
<view class="des">{{item.node_description}}</view>
<view class="labelC flex">
<view class="label downstream type">{{item.node_type}}</view>
<view class="label downstream market">份额:{{item.market_share}}%</view>
</view>
<view class="importanceC flex">
<view class="title">影响度</view>
<view class="progressBgC flex1">
<view class="progress downstream" :style="{width: `${item.importance_score}%`}"></view>
</view>
<view class="value">{{item.importance_score}}</view>
</view>
</view>
</block>
</view>
</view>
</view>
@@ -75,41 +97,48 @@
center_index: 0,
types: [{
title: '上游供应链',
count: 5,
count: 0,
desc: '原材料与供应商',
sColor: '#FF8C53',
color: '#FF5501',
backColor: '#FFF4EF'
type:'upstream'
},
{},
{
title: '核心企业',
count: 1,
count: 0,
desc: '公司主体与产品',
sColor: '#518BFF',
color: '#175CE6',
backColor: '#F2F6FD'
type:'core'
},
{},
{
title: '下游客户',
count: 12,
desc: '原材料与供应商',
sColor: '#48D394',
color: '#1DB26F',
backColor: '#E7F5F0'
count: 0,
desc: '客户与终端市场',
type:'downstream'
}
],
typeIndex: 0
typeIndex: 0,
};
},
props:{
valueChainAnalysisInfo:Object,
upstreamList:Array, //上游供应链
coreEnterpriseList:Array, //核心企业
downstreamList:Array, //下游客户
totalNodes:Number, //总节点数
},
watch:{
valueChainAnalysisInfo(newValue)
{
this.types[0].count = newValue.upstream_nodes
this.types[1].count = newValue.company_nodes
this.types[2].count = newValue.downstream_nodes
}
},
methods: {
changeCenterIndex(index) {
this.center_index = index
},
clickAction() {
console.log(123);
this.$emit('detail')
clickAction(item) {
this.$emit('detail',item)
}
}
}
@@ -118,13 +147,9 @@
<style lang="less">
.cyl_view {
padding: 20rpx;
box-sizing: border-box;
.top {
display: flex;
align-items: center;
font-weight: 500;
.child_1 {
color: #2B2B2B;
font-size: 28rpx;
@@ -172,16 +197,192 @@
.bottom {
.type {
display: grid;
grid-template-columns: 1fr 19rpx 1fr 19rpx 1fr;
gap: 6rpx;
.item {
display: flex;
align-items: center;
justify-content: center;
.item {
border-radius: 10rpx;
width: 100%;
padding: 26rpx 0;
.contentC
{
background-color: #FAFAFC;
justify-content: center;
height: 120rpx;
border-radius: 10rpx;
.titleNumC
{
font-size: 24rpx;
font-weight: bold;
color: #2B2B2B;
.num
{
background-color: #F2C369;
margin-left: 6rpx;
padding: 0 5rpx;
min-width: 24rpx;
border-radius: 5rpx;
font-weight: 500;
text-align: center;
}
.num.upstream
{
background-color: #FF5501;
color: white;
}
.num.core
{
background-color: #175CE6;
color: white;
}
.num.downstream
{
background-color: #1DB26F;
color: white;
}
}
.des
{
margin-top: 10rpx;
font-size: 22rpx;
font-weight: 500;
color: #999999;
}
}
.contentC.upstream
{
background-color: #FFF4EF;
border: solid 1rpx #FF5501;
}
.contentC.core
{
background-color: #F2F6FD;
border: solid 1rpx #175CE6;
}
.contentC.downstream
{
background-color: #E7F5F0;
border: solid 1rpx #1DB26F;
}
.arrow
{
margin: 0 6rpx;
width: 19rpx;
height: auto;
}
}
}
}
.list
{
margin-top: 20rpx;
.item
{
background-color: #FAFAFC;
margin-bottom: 20rpx;
border-radius: 10rpx;
padding: 25rpx 20rpx;
.title
{
font-size: 28rpx;
font-weight: bold;
color: #2B2B2B;
}
.des
{
margin-top: 10rpx;
font-size: 24rpx;
font-weight: 500;
color: #999999;
}
.labelC
{
margin-top: 10rpx;
.label
{
margin-right: 10rpx;
padding: 0 10rpx;
line-height: 30rpx;
border-radius: 5rpx;
font-size: 20rpx;
font-weight: 500;
}
.label.upstream
{
color: #FF5501;
}
.label.upstream.type
{
background-color: #FFF4EF;
}
.label.upstream.market
{
border: solid 1rpx #FF5501;
}
.label.core
{
color: #175CE6;
}
.label.core.type
{
background-color: #EDF2FD;
}
.label.core.market
{
border: solid 1rpx #175CE6;
}
.label.downstream
{
color: #1DB26F;
}
.label.downstream.type
{
background-color: #E7F5F0;
}
.label.downstream.market
{
border: solid 1rpx #1DB26F;
}
}
.importanceC
{
margin-top: 20rpx;
.title
{
font-size: 22rpx;
font-weight: 500;
color: #71675D;
}
.progressBgC
{
background-color: #EFEFEF;
height: 10rpx;
border-radius: 5rpx;
margin: 0 15rpx;
.progress
{
height: 100%;
border-radius: 5rpx;
}
.progress.upstream
{
background: linear-gradient(90deg, #FF8C53 0%, #FF5501 100%);
}
.progress.core
{
background: linear-gradient(90deg, #518BFF 0%, #175CE6 100%);
}
.progress.downstream
{
background: linear-gradient(90deg, #48D394 0%, #1DB26F 100%);
}
}
.value
{
font-size: 24rpx;
font-weight: 500;
color: #71675D;
}
}
}
}
}
</style>