1.27 业务结构分析，产业链模块完善，接口对接
This commit is contained in:
尚政杰
385
components/zlfx-view/zlfx-view.vue
Normal file
385
components/zlfx-view/zlfx-view.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user