384 lines
9.1 KiB
Vue
384 lines
9.1 KiB
Vue
<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)
|
||
{
|
||
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> |