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

components/cyl-view/cyl-view.vue

@@ -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,54 +14,76 @@
 			</view>
 		</view>
 		<view class="bottom">
-			<view class="type">
+			<view class="type flex">
-				<view v-for="(item,index) in types" :key="index" class="item">
+				<view v-for="(item,index) in types" :key="index" class="item flex flex1">
-					<template v-if="item.title">
+					<view :class="'contentC flexColumnCenter flex1 '+(typeIndex==index?item.type:'')" @click="typeIndex = index">
-						<view @click="typeIndex = index"
+						<view class="titleNumC">
-							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
+							<text :class="'num '+(typeIndex==index?item.type:'')">{{item.count}}</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;">
+						<view class="des">{{item.desc}}</view>
-								{{item.desc}}
 					</view>
-						</view>
+					<image v-if="index!=types.length-1" class="arrow" src="/pagesStock/static/icon/rightArrow.png"
-					</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"
+			<view class="list">
-				style="margin: 20rpx; background-color: #FAFAFC; border-radius: 10rpx; padding: 25rpx 20rpx; box-sizing: border-box;">
+				<block v-if="typeIndex==0">
-				<view style="color: #2B2B2B; font-size: 28rpx; font-weight: bold;">央行/政策性银行</view>
+					<!-- 上游供应链 -->
-				<view style="color: #999999; font-size: 24rpx; font-weight: 500;">提供再贷款、再贴现、同业存放等基础货币与流动性支持</view>
+					<view class="item" v-for="(item,index) in upstreamList" :key="index" @click="clickAction(item)">
-				<view style="display: flex; align-items: center; font-size: 20rpx; font-weight: 500; margin: 15rpx 0;">
+						<view class="title">{{item.node_name}}</view>
-					<view style="border-radius: 5rpx; padding: 0 10rpx; margin-right: 10rpx;"
+						<view class="des">{{item.node_description}}</view>
-						:style="{'background-color' : (types[typeIndex].backColor), 'color' : (types[typeIndex].color)}">
+						<view class="labelC flex">
-						Supplier</view>
+							<view class="label upstream type">{{item.node_type}}</view>
-					<view style="border-radius: 5rpx; padding: 0 10rpx;"
+							<view class="label upstream market">份额:{{item.market_share}}%</view>
-						:style="{'color' : types[typeIndex].color, border : `1rpx solid ${types[typeIndex].color}`}">份额:
-						12.5%</view>
 						</view>
-				<view style="display: flex; align-items: center;">
+						<view class="importanceC flex">
-					<view style="color: #71675D; font-size: 22rpx; font-weight: 500;">影响度</view>
+							<view class="title">影响度</view>
-					<view
+							<view class="progressBgC flex1">
-						style="flex: 1; height: 10rpx; background-color: #EFEFEF; border-radius: 5rpx; margin: 0 15rpx; overflow: hidden;">
+								<view class="progress upstream" :style="{width: `${item.importance_score}%`}">
-						<view style="height: 100%; border-radius: 5rpx;"
-							:style="{width: `${95}%`, background: `linear-gradient(to right, ${types[typeIndex].sColor}, ${types[typeIndex].color})`}">
 								</view>
 							</view>
-					<view style="color: #71675D; font-size: 24rpx; font-weight: 500;">95</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>
 </template>
@@ -75,41 +97,48 @@
 				center_index: 0,
 				types: [{
 						title: '上游供应链',
-						count: 5,
+						count: 0,
 						desc: '原材料与供应商',
-						sColor: '#FF8C53',
+						type:'upstream'
-						color: '#FF5501',
-						backColor: '#FFF4EF'
 					},
-					{},
 					{
 						title: '核心企业',
-						count: 1,
+						count: 0,
 						desc: '公司主体与产品',
-						sColor: '#518BFF',
+						type:'core'
-						color: '#175CE6',
-						backColor: '#F2F6FD'
 					},
-					{},
 					{
 						title: '下游客户',
-						count: 12,
+						count: 0,
-						desc: '原材料与供应商',
+						desc: '客户与终端市场',
-						sColor: '#48D394',
+						type:'downstream'
-						color: '#1DB26F',
-						backColor: '#E7F5F0'
 					}
 				],
-				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() {
+			clickAction(item) {
-				console.log(123);
+				this.$emit('detail',item)
-				this.$emit('detail')
 			}
 		}
 	}
@@ -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,14 +197,190 @@
 
 		.bottom {
 			.type {
-				display: grid;
-				grid-template-columns: 1fr 19rpx 1fr 19rpx 1fr;
-				gap: 6rpx;
-
 				.item {
-					display: flex;
+					border-radius: 10rpx; 
-					align-items: center;
+					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; 
+					}
 				}
 			}
 		}

components/fzjg-view/fzjg-view.vue

@@ -0,0 +1,126 @@
+<template>
+	<view class="branchList">
+		<view class="item" v-for="(item,index) in branchList" :key="index">
+			<view class="titleStatusC flex">
+				<view class="title flex1">{{item.branch_name}}</view>
+				<view :class="'statusC flex '+(item.business_status=='注销'?'logOff':'exist')">
+					<image v-if="item.business_status=='注销'" class="icon" src="/pagesStock/static/icon/logOffStatus.png" mode="widthFix">
+					</image>
+					<image v-else class="icon" src="/pagesStock/static/icon/existStatus.png" mode="widthFix"></image>
+					<view>{{item.business_status}}</view>
+				</view>
+			</view>
+			<view class="infoC topInfo flex">
+				<view class="infoItem leftInfo flex flex1">
+					<view class="title">注册资本</view>
+					<view class="content flex1">{{item.register_capital}}</view>
+				</view>
+				<view class="infoItem rightInfo flex flex1">
+					<view class="title">法人代表</view>
+					<view class="content flex1">{{item.legal_person}}</view>
+				</view>
+			</view>
+			<view class="infoC flex">
+				<view class="infoItem leftInfo flex flex1">
+					<view class="title">成立日期</view>
+					<view class="content flex1">{{item.register_date}}</view>
+				</view>
+				<view class="infoItem rightInfo flex flex1">
+					<view class="title">关联企业</view>
+					<view class="content flex1">{{item.related_company_count}}家</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"fzjg-view",
+		data() {
+			return {
+				
+			};
+		},
+		props:{
+			branchList:Array
+		}
+	}
+</script>
+
+<style lang="less">
+.branchList {
+	margin-top: 38rpx;
+	padding: 0 20rpx;
+
+	.item {
+		background-color: #FAFAFC;
+		margin-bottom: 20rpx;
+		padding: 20rpx;
+		border-radius: 10rpx;
+
+		.titleStatusC {
+			font-size: 28rpx;
+			font-weight: bold;
+			color: #2B2B2B;
+
+			.statusC {
+				padding: 0 10rpx;
+				line-height: 28rpx;
+				border-radius: 15rpx;
+				font-size: 20rpx;
+				font-weight: 500;
+				.icon {
+					margin-right: 3rpx;
+					width: 16rpx;
+					height: auto;
+				}
+			}
+
+			.statusC.exist {
+				background-color: #FFF7E9;
+				border: solid 1rpx #F2C369;
+				color: #F2C369;
+			}
+			
+			.statusC.logOff {
+				background-color: #FFF1F1;
+				border: solid 1rpx #EF3535;
+				color: #EF3535;
+			}
+		}
+
+		.infoC {
+			height: 50rpx;
+
+			.infoItem {
+				.title {
+					margin-right: 16rpx;
+					font-size: 22rpx;
+					font-weight: 500;
+					color: #999;
+				}
+
+				.content {
+					font-size: 24rpx;
+					font-weight: bold;
+					color: #2A2A2A;
+					text-align: right;
+				}
+			}
+
+			.infoItem.leftInfo {
+				margin-right: 20rpx;
+			}
+
+			.infoItem.rightInfo {
+				margin-left: 20rpx;
+			}
+		}
+
+		.infoC.topInfo {
+			margin-top: 10rpx;
+		}
+	}
+}
+</style>

components/gltd-view/gltd-view.vue

@@ -0,0 +1,223 @@
+<template>
+	<view class="managementTeamList">
+		<block v-for="(item,index) in managementList" :key="index">
+			<view v-if="item.list.length>0" class="positionNumC flex">
+				<view class="position">{{item.key}}</view>
+				<view class="num director">{{item.list.length}}人</view>
+			</view>
+			<block v-if="item.list.length>4&&!item.isExpand">
+				<view class="item flex" v-for="(pitem,pindex) in item.list.slice(0,4)" :key="index">
+					<view class="avatarC flexCenter relative director">
+						{{getLastNameStr(pitem.name)}}
+						<view :class="'sexC flexCenter absolute '+(pitem.gender=='女'?'female':'male')">
+							<image v-if="pitem.gender=='女'" class="icon" src="/pagesStock/static/icon/female.png" mode="widthFix">
+							</image>
+							<image v-else class="icon" src="/pagesStock/static/icon/male.png" mode="widthFix">
+							</image>
+						</view>
+					</view>
+					<view class="flex1">
+						<view class="flex">
+							<view class="name">{{pitem.name}}</view>
+							<view class="position">{{pitem.position_name}}</view>
+							<view class="date flex1">任职日期：{{pitem.start_date}}</view>
+						</view>
+						<view class="educationAgeC flex">
+							<view class="education label">{{pitem.education}}</view>
+							<view class="age label">{{getAgeByBirthYear(pitem.birth_year)}}岁</view>
+						</view>
+					</view>
+				</view>
+			</block>
+			<block v-else>
+				<view class="item flex" v-for="(pitem,pindex) in item.list" :key="index">
+					<view class="avatarC flexCenter relative director">
+						{{getLastNameStr(pitem.name)}}
+						<view :class="'sexC flexCenter absolute '+(pitem.gender=='女'?'female':'male')">
+							<image v-if="pitem.gender=='女'" class="icon" src="/pagesStock/static/icon/female.png" mode="widthFix">
+							</image>
+							<image v-else class="icon" src="/pagesStock/static/icon/male.png" mode="widthFix">
+							</image>
+						</view>
+					</view>
+					<view class="flex1">
+						<view class="flex">
+							<view class="name">{{pitem.name}}</view>
+							<view class="position">{{pitem.position_name}}</view>
+							<view class="date flex1">任职日期：{{pitem.start_date}}</view>
+						</view>
+						<view class="educationAgeC flex">
+							<view class="education label">{{pitem.education}}</view>
+							<view class="age label">{{getAgeByBirthYear(pitem.birth_year)}}岁</view>
+						</view>
+					</view>
+				</view>
+			</block>
+			<view v-if="item.list.length>4" class="expandMoreC flexCenter" @click="clickExpandOrRetractManagement(index)">
+				<view >{{item.isExpand?'收起':'展开查看'}}</view>
+				<image class="arrow" src="/pagesStock/static/icon/lookMoreArrow.png" mode="widthFix">
+				</image>
+			</view>
+		</block>
+	</view>
+</template>
+
+<script>
+	import { getAgeByBirthYear, getLastNameStr } from '@/utils/util';
+
+	export default {
+		name:"gltd-view",
+		data() {
+			return {
+				getLastNameStr:getLastNameStr,				//获取姓
+				getAgeByBirthYear:getAgeByBirthYear	//获取年龄
+			};
+		},
+		props:{
+			managementList:Array
+		},
+		methods:{
+			/**
+			 * 点击展开或收起管理团队人员
+			 */
+			clickExpandOrRetractManagement(index)
+			{
+				this.managementList[index].isExpand = !this.managementList[index].isExpand
+			},
+		},
+		
+	}
+</script>
+
+<style lang="less">
+.managementTeamList {
+	padding: 0 20rpx;
+	.positionNumC {
+		height: 70rpx;
+		.position {
+			margin-right: 11rpx;
+			font-size: 28rpx;
+			font-weight: bold;
+		}
+		.num {
+			padding: 0 14rpx;
+			line-height: 30rpx;
+			border-radius: 5rpx;
+			font-size: 20rpx;
+			font-weight: bold;
+			color: white;
+		}
+
+		.num.director {
+			background-color: #99AFEC;
+		}
+
+		.num.supervisor {
+			background-color: #B499EC;
+		}
+
+		.num.other {
+			background-color: #B5B5C9;
+		}
+	}
+
+	.item {
+		background-color: #FAFAFC;
+		margin-bottom: 20rpx;
+		padding: 20rpx 25rpx 20rpx 20rpx;
+		border-radius: 10rpx;
+
+		.avatarC {
+			margin-right: 18rpx;
+			width: 80rpx;
+			height: 80rpx;
+			border-radius: 50%;
+			font-size: 30rpx;
+			font-weight: bold;
+			color: white;
+
+			.sexC {
+				right: 0;
+				bottom: 0;
+				width: 30rpx;
+				height: 30rpx;
+				border-radius: 50%;
+				border: solid 2rpx white;
+
+				.icon {
+					width: 16rpx;
+					height: auto;
+				}
+			}
+
+			.sexC.female {
+				background-color: #FA5A93;
+			}
+
+			.sexC.male {
+				background-color: #3E6CFC;
+			}
+		}
+
+		.avatarC.director {
+			background-color: #99AFEC;
+		}
+
+		.avatarC.supervisor {
+			background-color: #B499EC;
+		}
+
+		.avatarC.other {
+			background-color: #B5B5C9;
+		}
+
+		.name {
+			margin-right: 13rpx;
+			font-size: 24rpx;
+			font-weight: bold;
+			color: #666;
+		}
+
+		.position {
+			font-size: 22rpx;
+			font-weight: 500;
+			color: #999;
+		}
+
+		.date {
+			font-size: 20rpx;
+			font-weight: 500;
+			color: #999;
+			text-align: right;
+		}
+
+		.educationAgeC {
+			margin-top: 8rpx;
+
+			.label {
+				margin-right: 10rpx;
+				background-color: #F1F1F1;
+				line-height: 30rpx;
+				padding: 0 16rpx;
+				font-size: 20rpx;
+				font-weight: 500;
+				color: #999;
+			}
+		}
+	}
+
+	.expandMoreC {
+		height: 80rpx;
+		border-bottom: solid 1rpx #E7E7E7;
+		font-size: 24rpx;
+		font-weight: 500;
+		color: #C9C9C9;
+
+		.arrow {
+			margin-left: 18rpx;
+			width: 11rpx;
+			height: auto;
+		}
+	}
+}
+</style>

components/gqjg-view/gqjg-view.vue

@@ -8,7 +8,7 @@
 				<view class="left">
 					<view class="l_top">{{actualControlInfo.actual_controller_name}}</view>
 					<view class="l_bottom">
-						<view class="l_b_left">企业法人</view>
+						<view class="l_b_left">{{actualControlInfo.control_type}}</view>
 						<view class="l_b_right">截至 {{actualControlInfo.end_date}}</view>
 					</view>
 				</view>
@@ -119,7 +119,7 @@
 		},
 		props:{
 			actualControlInfo:Object,			//实际控制人信息
-			concentrationList:[],				//股权集中度列表
+			concentrationList:Array,				//股权集中度列表
 			shareholdersList:Array,				//十大股东列表
 			circulatingShareholdersList:Array,	//十大流通股东列表
 			competitivePositionInfo:Object,		//竞争地位信息

components/ywjg-view/ywjg-view.vue

@@ -1,44 +1,42 @@
 <template>
 	<view class="ywjg_list">
 		<view>
-			<block v-for="(item,index) in businessStructureList" :key="index"></block>
+			<view style="margin: 25rpx 20rpx; color: #2B2B2B; font-size: 28rpx; font-weight: bold;">业务结构分析</view>
-			<view style="margin: 25rpx 20rpx; color: #2B2B2B; font-size: 28rpx; font-weight: bold;">
+			<view v-for="(item, index) in businessStructureList" :key="index" class="ywjg_item_1">
-				{{item.title}}
-			</view>
-			<view v-for="(child, row) in item.list" :key="row" class="ywjg_item_1">
 				<view style="display: flex; align-items: center;">
 					<view style="font-size: 28rpx; font-weight: bold; margin-right: 10rpx;">
-						{{child.title}}
+						{{item.business_name}}
 					</view>
-					<view v-if="child.is_hexin"
+					<view v-if="item.is_hexin"
 						style="background-color: #F2C369; border-radius: 5rpx; font-size: 20rpx; padding: 0 5rpx;">
 						核心业务</view>
 				</view>
-				<view style="display: flex; align-items: center; justify-content: space-between; font-weight: 500;">
+				<view class="flex between" style="font-weight: 500;">
-					<view style="display: flex; align-items: center; color: #F2C369; font-size: 20rpx;">
+					<view class="flex" style="color: #F2C369; font-size: 20rpx;">
-						<view style="border: 1rpx solid #F2C369; border-radius: 5rpx; padding: 0 5rpx;">
+						<view style="border: 1rpx solid #F2C369; border-radius: 5rpx; padding: 0 10rpx;">
-							营收占比:{{child.yszb}}%</view>
+							营收占比:{{item.financial_metrics.revenue_ratio}}%</view>
-						<view
+						<view v-if="item.financial_metrics.gross_margin"
-							style="border: 1rpx solid #F2C369; border-radius: 5rpx; padding: 0 5rpx; margin-left: 10rpx;">
+							style="border: 1rpx solid #F2C369; border-radius: 5rpx; padding: 0 10rpx; margin-left: 10rpx;">
-							毛利率:{{child.mlv}}%</view>
+							毛利率:{{item.financial_metrics.gross_margin}}%</view>
+						<view v-else
+								style="border: 1rpx solid #F2C369; border-radius: 5rpx; padding: 0 10rpx; margin-left: 10rpx;">
+								毛利率:-</view>
 					</view>
 					<view>
 						<view style="color: #999999; font-size: 24rpx;">营业收入</view>
-						<view style="font-weight: bold; font-size: 30rpx; color: #BB8520; margin-top: 10rpx;">
+						<view style="font-weight: bold; font-size: 30rpx; color: #BB8520; margin-top: 10rpx;">{{item.revenue}}{{item.revenue_unit}}</view>
-							{{child.yysr > 10000 ? child.yysr / 10000 + '亿' : child.yysr + '万'}}元
-						</view>
 					</view>
 				</view>
 				<view style="display: flex;">
-					<view
+					<view v-if="item.growth_metrics.revenue_growth" :class="'growthRate '+(getRateUpOrDown(item.growth_metrics.revenue_growth)?'down':'up')">
-						style="color: white; display: flex; align-items: center; justify-content: center; padding: 5rpx 10rpx;font-size: 20rpx; border-radius: 5rpx;"
+						增长:{{item.growth_metrics.revenue_growth}}%
-						:style="{backgroundColor: child.zz > 0 ? '#EC3440' : '#345423'}">增长:
+					</view>
-						{{child.zz > 0 ? '+' + child.zz : child.zz}}%
+					<view v-else class="growthRate down">增长:-</view>
-					</view>
 				</view>
 			</view>
+			<view style="margin: 25rpx 20rpx; color: #2B2B2B; font-size: 28rpx; font-weight: bold;">业务板块详情</view>
 			<view style="font-weight: 500;">
-				<view v-for="(item,index) in businessSegmentList" :key="item"
+				<view v-for="(item,index) in businessSegmentList" :key="index"
 					style="background-color: #FAFAFC; color: #2B2B2B; font-size: 22rpx; margin: 20rpx; background-color: #FAFAFC; border-radius: 10rpx; padding: 25rpx 20rpx;">
 					<view style="font-size: 24rpx;">{{item.segment_name}}</view>
 					<view style="color: #BB8520; font-weight: bold; margin: 10rpx 0;">业务描述</view>
@@ -54,17 +52,20 @@
 </template>
 
 <script>
+	import { getRateUpOrDown } from '@/utils/util';
+
 	export default {
 		name: "ywjg-view",
 		data() {
 			return {
-				
+				getRateUpOrDown:getRateUpOrDown
 			};
 			
 		},
 		props:{
 			businessStructureList:Array,	//业务结构分析
-			businessSegmentList:Array		//业务板块详情
+			businessSegmentList:Array		,//业务板块详情
+			
 		}
 	}
 </script>
@@ -84,7 +85,22 @@
 			background-color: #FAFAFC;
 			border-radius: 10rpx;
 			padding: 25rpx 20rpx;
-			box-sizing: border-box;
+			.growthRate 
+			{
+				padding: 0 10rpx;
+				line-height: 30rpx;
+				border-radius: 5rpx;
+				font-size: 20rpx; 
+				color: white; 
+			}
+			.growthRate.up
+			{
+				background-color: #EC3440;
+			}
+			.growthRate.down
+			{
+				background-color: #345423; 
+			}
 		}
 	}
 </style>

components/zlfx-view/zlfx-view.vue

@@ -0,0 +1,385 @@
+<template>
+	<view class="strategicAnalysisList">
+		<view class="section">核心定位</view>
+		<view v-if="qualitativeAnalysisInfo" class="corePositionC">{{qualitativeAnalysisInfo.core_positioning.one_line_intro}}</view>
+		<view class="section">投资亮点</view>
+		<view v-if="qualitativeAnalysisInfo" class="corePositionC">{{qualitativeAnalysisInfo.core_positioning.investment_highlights}}</view>
+		<!-- <view class="highlightsList">
+			<view class="item flex">
+				<image class="icon" src="" mode="widthFix"></image>
+				<view class="flex1">
+					<view class="title">综合金融优势</view>
+					<view class="content">背靠平安集团，客户资源共享和交叉销售带来持续增长动力</view>
+				</view>
+			</view>
+		</view> -->
+		<view class="section">商业模式</view>
+		<view v-if="qualitativeAnalysisInfo" class="corePositionC">{{qualitativeAnalysisInfo.core_positioning.business_model_desc}}</view>
+		<!-- <view class="infoC">
+			<view class="title">零售银行核心驱动</view>
+			<view class="content">以零售银行业务为核心驱动，依托平安集团综合金融平台，构建智能化、移动化、综合化三位一体发展模式。</view>
+		</view>
+		<view class="infoC">
+			<view class="title">科技赋能转型</view>
+			<view class="content">通过科技赋能实现业务流程数字化，降本增效的同时提升客户体验。</view>
+			<view class="labelList flexWrap">
+				<view class="labelC flex">
+					<image class="icon" src="/pagesStock/static/icon/existStatus.png" mode="widthFix">
+					</image>
+					<view>AI应用深化</view>
+				</view>
+			</view>
+		</view>
+		<view class="infoC">
+			<view class="title">对公业务聚焦</view>
+			<view class="content">聚焦供应链金融和产业互联网，服务实体经济高质量发展。</view>
+		</view>
+		<view class="section">战略分析</view>
+		<view v-if="qualitativeAnalysisInfo" class="infoC">
+			<view class="title">战略方向</view>
+			<view class="content">{{qualitativeAnalysisInfo.strategy.strategy_description}}</view>
+		</view>
+		<view v-if="qualitativeAnalysisInfo" class="infoC">
+			<view class="title">战略举措</view>
+			<view class="content">{{qualitativeAnalysisInfo.strategy.strategic_initiatives}}</view>
+		</view> -->
+		
+		<view class="section flex">
+			<view>竞争地位分析</view>
+			<view class="industryRankC flex" @click="clickIndustryRank()">
+				<image class="icon" src="/pagesStock/static/icon/industryRank.png" mode="widthFix">
+				</image>
+				<view v-if="industryRankInfo">行业排名 {{industryRankInfo.industry_rank}}/{{industryRankInfo.total_companies}}</view>
+				<!-- <image src="/arrow" mode=""></image> -->
+			</view>
+		</view>
+		<view class="subSection">主要竞争对手</view>
+		<view class="mainCompetitorList flexWrap">
+			<view class="item flex" v-for="(item,index) in mainCompetitorsList" :key="index">
+				<image class="icon" src="/pagesStock/static/icon/existStatus.png" mode="widthFix"></image>
+				<view>{{item}}</view>
+			</view>
+		</view>
+		<view class="scoreList">
+			<view :class="'item flex '+item.color" v-for="(item,index) in scoreList" :key="index">
+				<image class="icon" :src="item.icon" mode="widthFix"></image>
+				<view class="title">{{item.title}}</view>
+				<view class="progressBgC relative flex1">
+					<view :class="'progress absolute '+item.color" :style="'width: '+item.score+'%;'"></view>
+				</view>
+				<view class="score">{{item.score}}</view>
+			</view>
+		</view>
+		<view style="width:660rpx; height:500rpx">
+			<l-echart ref="chartRef"></l-echart>
+		</view>
+		<view v-if="competitivePositionInfo" class="infoC">
+			<view class="title">竞争优势</view>
+			<view class="content">{{competitivePositionInfo.analysis.competitive_advantages}}</view>
+		</view>
+		<view v-if="competitivePositionInfo" class="infoC">
+			<view class="title">竞争劣势</view>
+			<view class="content">{{competitivePositionInfo.analysis.competitive_disadvantages}}</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	const echarts = require('../../uni_modules/lime-echart/static/echarts.min.js');
+	
+	export default {
+		name:"zlfx-view",
+		data() {
+			return {
+				option:{
+					title: {
+						show:false
+					},
+					legend: {
+						show:false
+					},
+					tooltip:{
+						show:true,
+						triggerOn:'mousemove'
+					},
+					radar: {
+					    indicator: [
+					      { name: '市场地位', max: 100 },
+					      { name: '技术实力', max: 100 },
+					      { name: '品牌价值', max: 100 },
+					      { name: '运营效率', max: 100 },
+					      { name: '财务健康', max: 100 },
+					      { name: '创新能力', max: 100 },
+						  { name: '风险控制', max: 100 },
+						  { name: '成长潜力', max: 100 }
+					    ],
+					    shape: 'polygon',
+					    splitNumber: 5,
+					    axisName: {
+					      color: '#54555A'
+					    },
+					    splitLine: {
+					      lineStyle: {
+					        color: ['#CFD2D7']
+					      }
+					    },
+					    splitArea: {
+							areaStyle:{
+								color:['#F4F6FA','white']
+							}
+					    },
+					    axisLine: {
+					      lineStyle: {
+					        color: '#CFD2D7'
+					      }
+					    }
+					},
+					series: [
+					    {
+							name: 'Beijing',
+							type: 'radar',
+							lineStyle: {
+								width:1
+							},
+							data: [],
+							symbol: 'circle',
+							symbolSize: 4,
+							label:{
+								show:true  
+							},
+							itemStyle: {
+								color: '#5070DD'
+							},
+							areaStyle: {
+								opacity: 0.1
+							}
+					    },
+					]
+				},
+			};
+		},
+		props:{
+			qualitativeAnalysisInfo:Object,			//定性分析
+			competitivePositionInfo:Object,			//竞争地位信息
+			mainCompetitorsList:Array,				//主要竞争对手
+			industryRankInfo:Object,				//行业排名数据
+			scoreList:Array,						//
+			data:Array,
+		},
+		watch:{
+			data(newValue)
+			{
+				console.log(newValue)
+				this.option.series[0].data = newValue
+				this.init()
+			}
+		},
+		methods:{
+			async init() {
+				// chart 图表实例不能存在data里
+				const chart = await this.$refs.chartRef.init(echarts);
+				// chart.on('click',function (params) {
+				// 	console.log(params)
+				// })
+				console.log(chart)
+				chart.setOption(this.option)
+			},
+			clickIndustryRank()
+			{
+				this.$emit('rank')
+			}
+		}
+	}
+</script>
+
+<style lang="less">
+.strategicAnalysisList {
+	padding: 0 20rpx;
+	.section {
+		line-height: 72rpx;
+		font-size: 28rpx;
+		font-weight: bold;
+		color: #2B2B2B;
+
+		.industryRankC {
+			margin-left: 10rpx;
+			padding: 0 12rpx;
+			line-height: 38rpx;
+			border: solid 1rpx #F2C369;
+			border-radius: 19rpx;
+			font-size: 20rpx;
+			font-weight: 500;
+			color: #F3C368;
+
+			.icon {
+				margin-right: 5rpx;
+				width: 17rpx;
+				height: auto;
+			}
+		}
+	}
+
+	.corePositionC {
+		background-color: #FAFAFC;
+		padding: 20rpx;
+		font-size: 24rpx;
+		font-weight: 500;
+		color: #2A2A2A;
+		border-radius: 10rpx;
+	}
+
+	.highlightsList {
+		.item {
+			background-color: #FAFAFC;
+			margin-bottom: 20rpx;
+			padding: 20rpx;
+			border-radius: 10rpx;
+
+			.icon {
+				width: 81rpx;
+				height: auto;
+			}
+
+			.title {
+				font-size: 22rpx;
+				font-weight: 500;
+				color: #999;
+			}
+
+			.content {
+				font-size: 20rpx;
+				font-weight: 500;
+				color: #2A2A2A;
+			}
+		}
+	}
+
+	.infoC {
+		background-color: #FAFAFC;
+		border-radius: 10rpx;
+		padding: 12rpx 20rpx;
+		margin-bottom: 20rpx;
+
+		.infoItem {
+			line-height: 40rpx;
+		}
+
+		.title {
+			font-size: 22rpx;
+			font-weight: 500;
+			color: #2A2A2A;
+		}
+
+		.content {
+			margin-top: 10rpx;
+			font-size: 20rpx;
+			font-weight: 500;
+			color: #999;
+		}
+
+		.content.code {
+			color: #BB8520;
+		}
+
+		.content.rightAlign {
+			text-align: right;
+		}
+
+		.labelList {
+			margin-top: 10rpx;
+
+			.labelC {
+				background-color: #FFF7E9;
+				margin: 0 12rpx 12rpx 0;
+				padding: 0 10rpx;
+				line-height: 38rpx;
+				border: solid 1rpx #F2C369;
+				border-radius: 20rpx;
+				font-size: 22rpx;
+				font-weight: 500;
+				color: #F3C368;
+
+				.icon {
+					margin-right: 3rpx;
+					width: 16rpx;
+					height: auto;
+				}
+			}
+		}
+	}
+
+	.subSection {
+		line-height: 60rpx;
+		font-size: 24rpx;
+		font-weight: bold;
+		color: #2A2A2A;
+	}
+
+	.mainCompetitorList {
+		.item {
+			background-color: #FFF7E9;
+			margin: 0 20rpx 20rpx 0;
+			padding: 0 16rpx;
+			line-height: 38rpx;
+			border-radius: 20rpx;
+			border: solid 1rpx #F2C369;
+			font-size: 22rpx;
+			font-weight: 500;
+			color: #F3C368;
+
+			.icon {
+				margin-right: 3rpx;
+				width: 16rpx;
+				height: auto;
+			}
+		}
+	}
+	.scoreList 
+	{
+		.item 
+		{
+			margin-bottom: 40rpx;
+			font-size: 24rpx;
+			.icon   
+			{
+				margin-right: 10rpx;
+				width: 24rpx;
+				height: auto;
+			}
+			.title 
+			{
+				margin-right: 15rpx;
+				font-weight: 500;
+				color: #232323;
+			}
+			.progressBgC 
+			{
+				background-color: #EFEFEF;
+				margin-right: 15rpx;
+				height: 10rpx;
+				border-radius: 5rpx;
+				.progress 
+				{
+					top: 0;
+					left: 0;
+					height: 10rpx;
+					border-radius: 5rpx;
+				}
+				.progress.blue 
+				{
+					background: linear-gradient(90deg, #4AAFFF 0%, #1F83FD 100%);
+				}
+				.progress.purple
+				{
+					background: linear-gradient(90deg, #DD96FC 0%, #C061FD 100%);
+				}
+			}
+			.score 
+			{
+				font-weight: 800;
+				color: #070707;
+			}
+		}
+	}
+}
+</style>

request/api.js

@@ -183,6 +183,14 @@ export const comprehensiveAnalysis = code => get('/api/company/comprehensive-ana
  * 行业排名列表
  */
 export const industryRankList = code => get('/api/financial/industry-rank/'+code,null,true)
+/**
+ * 价值链分析
+ */
+export const valueChainAnalysis = code => get('/api/company/value-chain-analysis/'+code,null,true)
+/**
+ * 价值链相关公司
+ */
+export const valueChainRelatedCompany = param => get('/api/company/value-chain/related-companies',param,true)
 /**
  * 关键因素和时间线
  */