377 lines
14 KiB
Vue
377 lines
14 KiB
Vue
<template>
|
|
<div class="main">
|
|
<header-top :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :labelList="labelList" :topBg="topBg" :page="page"
|
|
:serverpartName="serviceInfo.SERVERPART_NAME" :spregionTypeName="serviceInfo.SPREGIONTYPE_NAME" :serviceInfo="serviceInfo"/>
|
|
|
|
<div class="charts">
|
|
<div class="chartsItem">
|
|
<p class="title">交易分析</p>
|
|
<div v-if="transactionList">
|
|
<transaction-analysis :data="transactionList" />
|
|
</div>
|
|
<no-data v-else />
|
|
</div>
|
|
<div class="chartsItem" style="margin-top: 32px">
|
|
<p class="title">消费时段分析</p>
|
|
<div v-if="timePeriodList.series.length>0">
|
|
<time-period-analysis :data="timePeriodList"/>
|
|
<analyse />
|
|
</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="levelTopList.series.length>0">
|
|
<level-top :data="levelTopList"></level-top>
|
|
<analyse />
|
|
</div>
|
|
<no-data v-else />
|
|
</div>
|
|
<div class="chartsItem" style="margin-top: 32px">
|
|
<p class="title">业态适配型</p>
|
|
<div v-if="businessTypeList.series[0].data.length>0">
|
|
<business-format :data="businessTypeList"/>
|
|
<analyse />
|
|
</div>
|
|
<no-data v-else />
|
|
</div>
|
|
<div class="chartsItem" style="margin-top: 32px">
|
|
<p class="title">消费转化对比图</p>
|
|
<div v-if="compareList.series[0].data.length>0">
|
|
<consumption-compare :data="compareList"/>
|
|
<analyse />
|
|
</div>
|
|
<no-data v-else />
|
|
</div>
|
|
<div class="chartsItem" style="margin-top: 32px">
|
|
<p class="title">商超畅销品</p>
|
|
<bestseller-shop :data="bestsellerList"/>
|
|
<analyse />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import request from '@/util/index.js'
|
|
import headerTop from "./components/headerTop.vue";
|
|
import transactionAnalysis from "./components/bussiness/transactionAnalysis.vue";
|
|
import TimePeriodAnalysis from "./components/bussiness/timePeriodAnalysis.vue";
|
|
import analyse from "./components/analyse.vue";
|
|
import LevelTop from "./components/bussiness/levelTop.vue";
|
|
import BusinessFormat from "./components/bussiness/businessFormat.vue";
|
|
import ConsumptionCompare from "./components/bussiness/consumptionCompare.vue";
|
|
import BestsellerShop from "./components/bussiness/bestsellerShop.vue";
|
|
import NoData from "./components/noData.vue";
|
|
|
|
export default {
|
|
name: "businessPortrait",
|
|
components: {
|
|
NoData,
|
|
BestsellerShop,
|
|
ConsumptionCompare,
|
|
BusinessFormat, LevelTop, analyse, TimePeriodAnalysis, headerTop,transactionAnalysis},
|
|
data() {
|
|
return {
|
|
topBg:'linear-gradient(180deg, #EDD1AF 0%, #EED7BB 100%);',//顶部组件的悬浮背景色
|
|
labelList:['女性','高消费','喜爱奶茶','浙江','20-30岁','江苏'],//标签
|
|
title:'交易画像',//页面标题
|
|
bgColor:'180deg, #FFBA07 0%, #F38309 100%',
|
|
bgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/commercial/businessPortraitBg.svg',//背景图片路径
|
|
page:'/pages/commercialBI/businessPortrait',
|
|
time: '',//跳转携带的时间
|
|
menu: {},//手机配置信息
|
|
transactionList:[],//交易分析数据
|
|
timePeriodList:[],//消费时段分析
|
|
levelTopList:[],//消费水平排行
|
|
businessTypeList:[],//业态适配型
|
|
compareList:[],//消费转化对比图
|
|
bestsellerList:[],//商超畅销品
|
|
serviceInfo:{} //当前服务区信息
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
console.log('option',option)
|
|
let storeServiceInfo = uni.getStorageSync('currentService')
|
|
let serviceInfo = JSON.parse(option.serviceInfo)
|
|
this.serviceInfo = storeServiceInfo?storeServiceInfo:serviceInfo
|
|
//跳转的时候带上时间
|
|
let storeTime = uni.getStorageSync('lastDay')
|
|
this.time = storeTime?storeTime:option.time
|
|
// 获取手机参数对页面进行适配
|
|
let systemInfo = uni.getSystemInfoSync()
|
|
// 把获取到的手机参数保存
|
|
uni.setStorageSync('phoneInfo', systemInfo)
|
|
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
|
this.menu = uni.getMenuButtonBoundingClientRect()
|
|
if (!storeServiceInfo){
|
|
this.nearestService()
|
|
}
|
|
//交易分析
|
|
this.getTransactionList()
|
|
//消费时段分析
|
|
this.getTimePeriodList()
|
|
//消费水平排行
|
|
this.getLevelTopList()
|
|
//业态适配型
|
|
this.getBusinessTypeList()
|
|
//消费转化对比图
|
|
this.getCompareList()
|
|
//商超畅销品
|
|
this.getBestsellerList()
|
|
},
|
|
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 getTransactionList(){
|
|
let req = {
|
|
Province_Code:'340000',
|
|
Statistics_Date:this.time,
|
|
Serverpart_ID:this.serviceInfo.Serverpart_ID,
|
|
ShowConsumptionLevel:true,
|
|
ShowConvertRate:true
|
|
}
|
|
let totalData = await request.$webGet('CommercialApi/Revenue/GetTransactionAnalysis',req)
|
|
|
|
this.transactionList = totalData.Result_Data
|
|
},
|
|
async getTimePeriodList(){
|
|
let req = {
|
|
Province_Code:'340000',
|
|
Statistics_Date:this.time,
|
|
Serverpart_ID:this.serviceInfo.Serverpart_ID
|
|
}
|
|
let totalData = await request.$webGet('CommercialApi/Revenue/GetTransactionTimeAnalysis',req)
|
|
|
|
let res = {
|
|
series: [
|
|
{
|
|
name: "",
|
|
data: totalData.Result_Data.data
|
|
}
|
|
]
|
|
}
|
|
// let res={
|
|
// series: [
|
|
// {
|
|
// name: "气泡一",
|
|
// data: [[2,35,17],[6,18,9],[10,5,5],[14,8,8],[18,9,9],[22,18,9]]
|
|
// }
|
|
// ]
|
|
// }
|
|
this.timePeriodList = res
|
|
},
|
|
async getLevelTopList(){
|
|
let req = {
|
|
ProvinceCode:'340000',
|
|
StatisticsDate:this.time,
|
|
ServerpartId:this.serviceInfo.Serverpart_ID,
|
|
ShowWholeTrade:true
|
|
}
|
|
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: [20,27,21,24,6,28]
|
|
// },
|
|
// {
|
|
// name: "普通消费",
|
|
// textColor: "#FFFFFF",
|
|
// data: [20,27,21,24,6,28]
|
|
// },
|
|
// {
|
|
// name: "高消费",
|
|
// textColor: "#FFFFFF",
|
|
// data: [60,46,58,52,88,44]
|
|
// }
|
|
// ]
|
|
// }
|
|
console.log('res',res)
|
|
this.levelTopList = res
|
|
},
|
|
async getBusinessTypeList(){
|
|
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))})
|
|
}
|
|
})
|
|
let result= {
|
|
series: [
|
|
{
|
|
data:res
|
|
}
|
|
]
|
|
};
|
|
console.log('result',result)
|
|
this.businessTypeList = result
|
|
},
|
|
async getCompareList(){
|
|
const req = {
|
|
Province_Code:'340000',
|
|
Statistics_Date:this.time,
|
|
Serverpart_ID:this.serviceInfo.Serverpart_ID
|
|
}
|
|
const data = await request.$webGet('CommercialApi/Revenue/GetTransactionConvert',req)
|
|
|
|
let customerOrder = []
|
|
let customerMax = 0
|
|
let carLit = []
|
|
let carLitMax = 0
|
|
data.Result_Data.TransactionList.data.forEach(item=>{
|
|
let index = item[0]
|
|
if (index === 0 ||index === 4 ||index === 8 ||index === 12 ||index === 16||index === 20||index === 23){
|
|
if (customerMax<item[1]){
|
|
customerMax = item[1]
|
|
}
|
|
customerOrder.push(item[1])
|
|
}
|
|
})
|
|
data.Result_Data.BayonetList.data.forEach(item=>{
|
|
let index = item[0]
|
|
if (index === 0 ||index === 4 ||index === 8 ||index === 12 ||index === 16||index === 20||index === 23){
|
|
if (carLitMax<item[1]){
|
|
carLitMax = item[1]
|
|
}
|
|
carLit.push(item[1])
|
|
}
|
|
})
|
|
|
|
let res = {
|
|
categories: ["0:00","4:00","8:00","12:00","16:00","20:00","24:00"],
|
|
series:[
|
|
{
|
|
index:0,
|
|
name: "客单数",
|
|
data: customerOrder,
|
|
max:customerMax
|
|
},
|
|
{
|
|
index:1,
|
|
name: "车辆数",
|
|
data: carLit,
|
|
max:carLitMax
|
|
}
|
|
]
|
|
}
|
|
|
|
// let res = {
|
|
// categories: ["0:00","4:00","8:00","12:00","16:00","20:00","24:00"],
|
|
// series: [
|
|
// {
|
|
// index:0,
|
|
// name: "客单数",
|
|
// data: [18,40,25,50,45,65,70]
|
|
// },
|
|
// {
|
|
// index:1,
|
|
// name: "车辆数",
|
|
// data: [180,150,170,140,130,250,280]
|
|
// }
|
|
// ]
|
|
// }
|
|
this.compareList = res
|
|
},
|
|
getBestsellerList(){
|
|
let res = [
|
|
{
|
|
series: [
|
|
{
|
|
data: [{"name":"热销商品","value":39.8},
|
|
{"name":"","value":60.2}],
|
|
list:[{name:'红牛',value:29.3},
|
|
{name:'农夫山泉',value:25.6},
|
|
{name:'康师傅红烧牛肉面桶装牛肉面桶装',value:16.5},
|
|
{name:'方便面',value:15.2},
|
|
{name:'其他',value:13.4}]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
series: [
|
|
{
|
|
data: [{"name":"滞销商品","value":21.6},
|
|
{"name":"","value":78.4}],
|
|
list:[{name:'水杯',value:29.3},
|
|
{name:'吸油纸',value:25.6},
|
|
{name:'康师傅红烧牛肉面桶装牛肉面桶装',value:16.5},
|
|
{name:'纸巾',value:15.2},
|
|
{name:'其他',value:13.4}]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
this.bestsellerList = res
|
|
}
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|