333 lines
14 KiB
Vue
333 lines
14 KiB
Vue
<template>
|
|
<div class="main">
|
|
<header-top :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :analyseInfo="analyseInfo" :topBg="topBg" :page="page" :backType="backType"
|
|
:serverpartName="serviceInfo.SERVERPART_NAME" :spregionTypeName="serviceInfo.SPREGIONTYPE_NAME" :serviceInfo="serviceInfo"/>
|
|
|
|
<div class="charts">
|
|
<div class="chartsItem">
|
|
<p class="title">业态充盈度</p>
|
|
<div v-if="fillDegreeList.result.series[0].data.length>0">
|
|
<filling-degree :data="fillDegreeList" />
|
|
<analyse :analyseInfo="{analysisins_type: 1502,analysisins_format: 2000}" />
|
|
</div>
|
|
<no-data v-else/>
|
|
</div>
|
|
<div class="chartsItem" style="margin-top: 32px">
|
|
<p class="title">品牌消费水平<text class="unit">(Top 5)</text></p>
|
|
<div v-if="bandLevelList.length>0">
|
|
<band-level :data="bandLevelList"/>
|
|
<analyse :analyseInfo="{analysisins_type: 1503,analysisins_format: 2000}" />
|
|
</div>
|
|
<no-data v-else/>
|
|
</div>
|
|
<div class="chartsItem" style="margin-top: 32px">
|
|
<p class="title">业态消费水平<text class="unit">(Top 5)</text></p>
|
|
<div v-if="consumLevelList.series.length>0">
|
|
<consumption-level :data="consumLevelList" />
|
|
<analyse :analyseInfo="{analysisins_type: 1504,analysisins_format: 2000}" />
|
|
</div>
|
|
<no-data v-else/>
|
|
</div>
|
|
<div class="chartsItem" style="margin-top: 32px">
|
|
<p class="title">品牌指数</p>
|
|
<div v-if="brandInfoList.length>0">
|
|
<div class="labelList">
|
|
<div class="labelItem" v-for="(item,index) in brandLabelList" :key="index">
|
|
<p class="name">{{item[0]}}<text class="number">({{item[1]}})</text></p>
|
|
</div>
|
|
</div>
|
|
<band-number :data="brandInfoList"/>
|
|
</div>
|
|
<no-data v-else/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import request from '@/util/index.js'
|
|
import headerTop from "./components/headerTop.vue";
|
|
import analyse from "./components/analyse.vue";
|
|
import FillingDegree from "./components/format/fillingDegree.vue";
|
|
import BandLevel from "./components/format/bandLevel.vue";
|
|
import ConsumptionLevel from "./components/format/consumLevel.vue";
|
|
import BandNumber from "./components/format/bandNumber.vue";
|
|
import NoData from "./components/noData.vue";
|
|
|
|
export default {
|
|
name: "businessPortrait",
|
|
components: {NoData, BandNumber, ConsumptionLevel, BandLevel, FillingDegree, analyse, headerTop},
|
|
data() {
|
|
return {
|
|
topBg:'linear-gradient(180deg, #C6C1F0 0%, #CECBF3 100%);',//顶部组件的悬浮背景色
|
|
labelList:['女性','高消费','喜爱奶茶','浙江','20-30岁','江苏'],//标签
|
|
title:'业态品牌',//页面标题
|
|
bgColor: '180deg, #459FFF 0%, #473AFF 100%',
|
|
bgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/commercial/formatPortraitBg.svg',//背景图片路径
|
|
page:'/pages/commercialBI/formatPortrait',
|
|
time: '',//跳转携带的时间
|
|
menu: {},//手机配置信息
|
|
fillDegreeList:[],//业态充盈度
|
|
bandLevelList:[],//品牌消费水平
|
|
consumLevelList:[],//业态消费水平
|
|
brandLabelList:[{name:'中式快餐',value:5},
|
|
{name:'省内品牌',value:3},
|
|
{name:'地方特色',value:15},
|
|
{name:'这是品类名称',value:5},
|
|
{name:'省内品牌',value:3},
|
|
{name:'地方特色',value:8}],//品牌指数标签列表
|
|
brandInfoList:[],//品牌指数列表
|
|
serviceInfo:{}, //当前服务区信息
|
|
backType:'',//返回的页面类型
|
|
analyseInfo:{
|
|
analysisins_type: 1501
|
|
},
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
let serviceInfo = JSON.parse(option.serviceInfo)
|
|
this.backType = option.type
|
|
this.serviceInfo = serviceInfo
|
|
//跳转的时候带上时间
|
|
this.time = option.time
|
|
},
|
|
onShow(){
|
|
let storeTime = uni.getStorageSync('lastDay')
|
|
if (storeTime){
|
|
this.time = storeTime
|
|
}
|
|
let storeServiceInfo = uni.getStorageSync('currentService')
|
|
if (storeServiceInfo){
|
|
this.serviceInfo = storeServiceInfo
|
|
}
|
|
// 获取手机参数对页面进行适配
|
|
let systemInfo = uni.getSystemInfoSync()
|
|
// 把获取到的手机参数保存
|
|
uni.setStorageSync('phoneInfo', systemInfo)
|
|
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
|
this.menu = uni.getMenuButtonBoundingClientRect()
|
|
if (!storeServiceInfo){
|
|
this.nearestService()
|
|
}
|
|
//业态充盈度
|
|
this.getFillDegreeList()
|
|
//品牌消费水平
|
|
this.getBandLevelList()
|
|
//业态消费水平
|
|
this.getConsumLevelList()
|
|
//品牌指数列表
|
|
this.getBrandInfoList()
|
|
},
|
|
methods:{
|
|
async nearestService(){
|
|
let seat = uni.getStorageSync('seatInfo');
|
|
let req = {
|
|
longitude:seat.longitude,
|
|
Province_Code:'340000',
|
|
latitude:seat.latitude,
|
|
}
|
|
console.log('req',req)
|
|
const data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartList',req)
|
|
console.log('nearestService',data)
|
|
let res = {
|
|
SERVERPART_NAME:data.Result_Data.List[0].SERVERPART_NAME,//服务区
|
|
SPREGIONTYPE_NAME:data.Result_Data.List[0].SPREGIONTYPE_NAME,//片区
|
|
Serverpart_ID:data.Result_Data.List[0].SERVERPART_ID,
|
|
longitude:data.Result_Data.List[0].SERVERPART_X,
|
|
latitude:data.Result_Data.List[0].SERVERPART_Y,
|
|
}
|
|
uni.setStorageSync('currentService',res)
|
|
},
|
|
async getFillDegreeList(){
|
|
const req = {
|
|
ProvinceCode:'340000',
|
|
StatisticsDate:this.time,
|
|
serverpartId:this.serviceInfo.Serverpart_ID
|
|
}
|
|
const data = await request.$webGet('CommercialApi/Revenue/GetBusinessTradeRevenue',req)
|
|
let res = []
|
|
let all = 0
|
|
data.Result_Data.BusinessTradeRank.forEach((item,index)=>{
|
|
if (index<=10){
|
|
res.push({name:`${item.name} ${item.value}%`,value:Number(item.value)})
|
|
all+=Number(item.value)
|
|
}else if(index===11){
|
|
res.push({name:`其他${(100-all).toFixed(2)}%`,value:Number((100 - all).toFixed(2))})
|
|
}
|
|
})
|
|
console.log('res21312312',res)
|
|
let result= {
|
|
series: [
|
|
{
|
|
data:res
|
|
}
|
|
]
|
|
};
|
|
let obj = {
|
|
result:result,
|
|
Abundant:data.Result_Data.Abundant//是否盈足
|
|
}
|
|
// let res = {
|
|
// series: [
|
|
// {
|
|
// data: [{"name":"商超","value":27.6},
|
|
// {"name":"水果饮品","value":20.7},
|
|
// {"name":"餐饮","value":15.5},
|
|
// {"name":"小吃","value":11.9},
|
|
// {"name":"地方特产","value":8.4},
|
|
// {"name":"连锁品牌","value":7.2},
|
|
// {"name":"粽子","value":5.6},
|
|
// {"name":"箱包工艺","value":3.1}]
|
|
// }
|
|
// ]
|
|
// }
|
|
this.fillDegreeList = obj
|
|
},
|
|
async getBandLevelList(){
|
|
|
|
let req = {
|
|
ProvinceCode:'340000',
|
|
StatisticsDate:this.time,
|
|
ServerpartId:this.serviceInfo.Serverpart_ID,
|
|
ShowWholeBrand:false
|
|
}
|
|
let res =[]
|
|
let totalData = await request.$webGet('CommercialApi/Revenue/GetBusinessBrandLevel',req)
|
|
totalData.Result_Data.legend.forEach(item=>{
|
|
res.push({name:item,small:0,normal:0,big:0})
|
|
})
|
|
res.forEach((item,index)=>{
|
|
totalData.Result_Data.ColumnList.forEach((subItem,subIndex)=>{
|
|
if (subItem.name==='低消费'){
|
|
item.small = subItem.data[index]
|
|
}else if(subItem.name==='普通消费'){
|
|
item.normal = subItem.data[index]
|
|
}else if(subItem.name==='高消费'){
|
|
item.big = subItem.data[index]
|
|
}
|
|
})
|
|
})
|
|
// let res=[{name:'五芳斋',big:'14.8',normal:'41.7',small:'43.5'},
|
|
// {name:'驿佰购',big:'44.1',normal:'31.7',small:'24.2'},
|
|
// {name:'老娘舅',big:'15.2',normal:'70.1',small:'14.5'},
|
|
// {name:'吉祥馄饨',big:'25.2',normal:'39.9',small:'34.7'}]
|
|
this.bandLevelList = res
|
|
},
|
|
async getConsumLevelList(){
|
|
|
|
let req = {
|
|
ProvinceCode:'340000',
|
|
StatisticsDate:this.time,
|
|
ServerpartId:this.serviceInfo.Serverpart_ID,
|
|
ShowWholeTrade:false
|
|
}
|
|
let res = {
|
|
categories:[],
|
|
series:[]
|
|
}
|
|
let totalData = await request.$webGet('CommercialApi/Revenue/GetBusinessTradeLevel',req)
|
|
res.categories = totalData.Result_Data.legend
|
|
totalData.Result_Data.ColumnList.forEach(item=>{
|
|
res.series.push({name:item.name,data:item.data})
|
|
})
|
|
// let res = {
|
|
// categories:["商超","餐饮","水果饮品","小吃","连锁品牌"],
|
|
// series: [
|
|
// {
|
|
// name: "低消费",
|
|
// textColor: "#FFFFFF",
|
|
// data: [18,27,21,24,6]
|
|
// },
|
|
// {
|
|
// name: "普通消费",
|
|
// textColor: "#FFFFFF",
|
|
// data: [18,27,21,24,6]
|
|
// },
|
|
// {
|
|
// name: "高消费",
|
|
// textColor: "#FFFFFF",
|
|
// data: [64,46,58,52,88]
|
|
// },
|
|
// ]
|
|
// }
|
|
this.consumLevelList = res
|
|
console.log('this.consumLevelList',this.consumLevelList)
|
|
},
|
|
async getBrandInfoList(){
|
|
let req = {
|
|
ProvinceCode:'340000',
|
|
Serverpart_ID:this.serviceInfo.Serverpart_ID,
|
|
Statistics_Date:this.time
|
|
}
|
|
let totalData = await request.$webGet('CommercialApi/BaseInfo/GetBrandAnalysis',req)
|
|
console.log('totalData',totalData)
|
|
this.brandLabelList = totalData.Result_Data.BrandTag
|
|
|
|
// let res = [{icon:'',name:'老娘舅',company:'老娘舅餐饮股份有限公司',type:0,time:'2019.03-2022.03',label:["中式快餐","30-40岁男性"],info:[9,8,8]},
|
|
// {icon:'',name:'老乡鸡',company:'老乡鸡餐饮股份有限公司',type:1,time:'2019.03-2022.03',label:["中式快餐","30-40岁男性"],info:[9,9,9]},
|
|
// {icon:'',name:'永和大王',company:'永和大王餐饮股份有限公司',type:2,time:'2019.03-2022.03',label:["中式快餐","30-40岁男性"],info:[8,8,8]}]
|
|
this.brandInfoList =totalData.Result_Data.ShopBrandList
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.main {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
.charts{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 28px 16px 24px;
|
|
background: #fff;
|
|
.chartsItem{
|
|
.title{
|
|
font-size: 17px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 24px;
|
|
.unit{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 20px;
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
.labelList{
|
|
display: flex;
|
|
align-items: center;
|
|
flex-flow: wrap;
|
|
margin-top: 12px;
|
|
.labelItem{
|
|
background: #EDF0F4;
|
|
border-radius: 4px;
|
|
padding:2px 6px;
|
|
margin-right: 6px;
|
|
margin-bottom: 6px;
|
|
.name{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 20px;
|
|
.number{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #A69E9F;
|
|
line-height: 20px;
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|