809 lines
27 KiB
Vue
809 lines
27 KiB
Vue
<template>
|
|
<scroll-view class="main" scroll-y="true">
|
|
<!-- <div style="position: fixed;right: 0;top: 20%;z-index:99999999999">-->
|
|
<!-- <commercial-type :have="4"/>-->
|
|
<!-- </div>-->
|
|
<header-top ref="headerTop" :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" :topLeftBg="topLeftBg"
|
|
:topLeftColor="topLeftColor" :iconObj="iconObj" :haveIconObj="haveIconObj" :detailBoxBg="detailBoxBg"
|
|
:haveFun="haveFun" :serviceTypeObj="serviceTypeObj" :serviceInfoObj="serviceInfoObj" :pageType="pageType"
|
|
:pageIndex="5" />
|
|
<div class="charts">
|
|
<div class="chartsItem">
|
|
<view class="top">
|
|
<p class="title">品牌指数</p>
|
|
<!-- <view class="btnBox">-->
|
|
<!-- <view :class="selectTypeNumber===1?'btnItem selectItem':'btnItem'" @click="handleSelectType(1)">盈足</view>-->
|
|
<!-- <view :class="selectTypeNumber===2?'btnItem selectItem':'btnItem'" @click="handleSelectType(2)">不盈足</view>-->
|
|
<!-- </view>-->
|
|
</view>
|
|
<div>
|
|
<div class="labelList">
|
|
<div :class="item[5] ? 'labelItem labelItemSelect' : 'labelItem labelItemUnSelect'"
|
|
v-for="(item, index) in brandLabelList" :key="index" @click="changeLabel(item)">
|
|
<image class="icon" :src="item[4]"></image>
|
|
<p class="name">{{ item[0] }}<text class="number">({{ item[1] }})</text></p>
|
|
</div>
|
|
</div>
|
|
<band-number v-if="brandInfoList.length > 0" :data="brandInfoList" />
|
|
</div>
|
|
<no-data v-if="!brandInfoList.length" />
|
|
</div>
|
|
|
|
<div class="chartsItem" style="margin-top: 32px">
|
|
<div class="top">
|
|
<p class="title">业态占比</p>
|
|
<div class="time">
|
|
<div class="select">
|
|
<picker mode="date" fields="month" :value="single" :start="startDate" :end="endData"
|
|
@change="bindDateChange">
|
|
<view class="time">
|
|
<view class="uni-input" style="background: transparent;padding: 0;height:100%">{{ single }}</view>
|
|
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/arrow_bottom.svg"></image>
|
|
</view>
|
|
</picker>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<filling-degree :data="fillDegreeList" @handleChangeBandLevel="handleChangeBandLevel" :isClick="isClick" />
|
|
<analyse :analyseInfo="{ analysisins_type: 1502, analysisins_format: 2000 }" />
|
|
</div>
|
|
</div>
|
|
<!-- <div class="chartsItem" style="margin-top: 32px">-->
|
|
<!-- <p class="title">品牌消费水平<text class="unit"></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"></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>
|
|
</scroll-view>
|
|
</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/bussiness/bandLevel.vue";
|
|
import ConsumptionLevel from "./components/format/consumLevel.vue";
|
|
import BandNumber from "./components/format/bandNumber.vue";
|
|
import NoData from "./components/noData.vue";
|
|
import { getFieldEnum } from "../../../util/dateTime/index";
|
|
import SliderPage from "./components/sliderPage.vue";
|
|
|
|
export default {
|
|
name: "businessPortrait",
|
|
components: {
|
|
SliderPage,
|
|
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/newCommercialBI/formatPortraitBIBg.svg',//背景图片路径
|
|
page: '/pages/commercialBI/formatPortrait',
|
|
|
|
pageType: 4000,
|
|
detailBoxBg: 'linear-gradient(136deg, #F7F3FF 0%, #FFFFFF 100%);',
|
|
topLeftBg: 'linear-gradient(180deg, rgba(69, 159, 255, 0.2) 0%, rgba(71, 58, 255, 0.2) 100%)',// 类别背景
|
|
topLeftColor: '#473DFF',// 类别文字颜色
|
|
iconObj: {
|
|
car: 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carFormat.svg',
|
|
charge: 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/chargeFormat.svg',
|
|
bady: 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/badyFormat.svg',
|
|
guestRoom: 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/guestFormat.svg'
|
|
},
|
|
haveIconObj: {
|
|
have: 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/haveFormat.svg',
|
|
noHave: 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/noHaveFormat.svg'
|
|
},
|
|
|
|
|
|
time: '',//跳转携带的时间
|
|
menu: {},//手机配置信息
|
|
fillDegreeList: [],//业态充盈度
|
|
bandLevelList: [],//品牌消费水平
|
|
consumLevelList: [],//业态消费水平
|
|
brandLabelList: [],//品牌指数标签列表
|
|
brandLabelListNoChange: [],//把第一次进来请求到的标签列表存起来
|
|
brandInfoList: [],//品牌指数列表
|
|
brandInfoListNoChange: [],//把第一次请求到的全部品牌指数列表存起来
|
|
serviceInfo: {}, //当前服务区信息
|
|
backType: '',//返回的页面类型
|
|
analyseInfo: {
|
|
analysisins_type: 1501 // 传给headTop组件的
|
|
},
|
|
selectKey: '',//有数据的话
|
|
str: '',
|
|
isClick: true,//图表是否能点击
|
|
single: '',//显示时间
|
|
thisMonth: '',//几月
|
|
endData: '', // 结束时间
|
|
haveFun: {},
|
|
startDate: '',// 开始时间
|
|
serviceTypeObj: {},// 服务区类型对象
|
|
serviceInfoObj: {},
|
|
selectTypeNumber: 0
|
|
}
|
|
},
|
|
props: {
|
|
selectIndex: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
watch: {
|
|
selectIndex: {
|
|
handler(value) {
|
|
if (value === 5) {
|
|
this.handleGetPageData()
|
|
}
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
// if (option){
|
|
// if (option.serviceInfo){
|
|
// this.serviceInfo = JSON.parse(option.serviceInfo)
|
|
// }
|
|
// this.backType = option.type
|
|
// //跳转的时候带上时间
|
|
// this.time = option.time
|
|
// }
|
|
// this.endData = uni.getStorageSync('lastDay')
|
|
// this.startDate = '2023-01-01'
|
|
// // 服务区类型枚举
|
|
// this.handleServiceType()
|
|
},
|
|
onShow() {
|
|
// let storeTime = uni.getStorageSync('lastDay')
|
|
// if (storeTime){
|
|
// this.time = storeTime
|
|
// }
|
|
// this.single = this.$util.getThisMonthHave(this.time)
|
|
// const date = new Date(this.single)
|
|
// let m = date.getMonth() + 1
|
|
// if (m<10){
|
|
// m = '0' + m
|
|
// }
|
|
// this.thisMonth = m
|
|
// 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()
|
|
// // 服务区基本信息
|
|
// this.getServiceInfo()
|
|
// this.handleChangeCurrent()
|
|
},
|
|
onUnload() {
|
|
this.$util.addUserBehavior()
|
|
},
|
|
methods: {
|
|
// 盈足不盈足
|
|
handleSelectType(val) {
|
|
if (val === this.selectTypeNumber) {
|
|
this.selectTypeNumber = 0
|
|
} else {
|
|
this.selectTypeNumber = val
|
|
}
|
|
},
|
|
// 拿到页面数据
|
|
handleGetPageData() {
|
|
this.endData = uni.getStorageSync('lastDay')
|
|
this.startDate = '2023-01-01'
|
|
// 服务区类型枚举
|
|
this.handleServiceType()
|
|
let storeTime = uni.getStorageSync('lastDay')
|
|
if (storeTime) {
|
|
this.time = storeTime
|
|
}
|
|
this.single = this.$util.getThisMonthHave(this.time)
|
|
const date = new Date(this.single)
|
|
let m = date.getMonth() + 1
|
|
if (m < 10) {
|
|
m = '0' + m
|
|
}
|
|
this.thisMonth = m
|
|
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()
|
|
// 服务区基本信息
|
|
this.getServiceInfo()
|
|
this.handleChangeCurrent()
|
|
},
|
|
handleChangeCurrent() {
|
|
this.$refs.headerTop.handleChangeCurrent()
|
|
},
|
|
// 枚举服务区类型 SERVERPART_TYPE
|
|
async handleServiceType() {
|
|
const data = await getFieldEnum({ FieldExplainField: 'SERVERPART_TYPE' });
|
|
let obj = {}
|
|
data.forEach(item => {
|
|
obj[Number(item.value)] = item.label
|
|
})
|
|
this.serviceTypeObj = obj
|
|
},
|
|
bindDateChange(e) {
|
|
this.fillDegreeList = []
|
|
this.brandInfoList = []
|
|
const date = new Date(e.detail.value)
|
|
let storeTime = uni.getStorageSync('lastDay')
|
|
const nowDate = new Date(storeTime)
|
|
let nowMonth = nowDate.getMonth() + 1
|
|
|
|
this.single = e.detail.value
|
|
let y = date.getFullYear()
|
|
let m = date.getMonth() + 1
|
|
let nowY = nowDate.getFullYear()
|
|
let nowM = nowDate.getMonth() + 1
|
|
if (y === nowY && m === nowM) {
|
|
this.time = storeTime
|
|
} else {
|
|
let d = this.$util.getThisMonthDay(e.detail.value)
|
|
if (m < 10) {
|
|
m = '0' + m
|
|
}
|
|
this.time = `${y}-${m}-${d}`
|
|
}
|
|
|
|
|
|
// let d
|
|
// if (nowMonth === m){
|
|
// let nowYear = nowDate.getFullYear()
|
|
// let nowMonth = nowDate.getMonth() +1
|
|
// if (nowMonth<10){
|
|
// nowMonth = '0'+ nowMonth
|
|
// }
|
|
// let nowDay = nowDate.getDate() - 1
|
|
// if (nowDay<10){
|
|
// nowDay = '0'+ nowDay
|
|
// }
|
|
// this.time = `${nowYear}-${nowMonth}-${nowDay}`
|
|
// d = nowDay
|
|
// }else{
|
|
// d = this.$util.getThisMonthDay(e.detail.value)
|
|
// this.time = e.detail.value + '-' + d
|
|
// }
|
|
// if (m<10){
|
|
// m = '0' + m
|
|
// }
|
|
this.thisMonth = m
|
|
this.endTime = storeTime
|
|
this.onRefresh()
|
|
},
|
|
onRefresh() {
|
|
//业态充盈度
|
|
this.getFillDegreeList()
|
|
//品牌指数列表
|
|
this.getBrandInfoList()
|
|
// 服务区基本信息
|
|
this.getServiceInfo()
|
|
},
|
|
//获取服务区基本信息
|
|
async getServiceInfo() {
|
|
let req = {
|
|
ServerpartId: this.serviceInfo.Serverpart_ID
|
|
}
|
|
const total = await request.$webGet('CommercialApi/BaseInfo/GetServerpartInfo', req)
|
|
this.serviceInfoObj = total.Result_Data
|
|
if (total.Result_Data) {
|
|
this.haveFun = {
|
|
car: total.Result_Data.HASPILOTLOUNGE,
|
|
charge: total.Result_Data.HASCHARGE,
|
|
bady: total.Result_Data.HASMOTHER,
|
|
gusetHome: total.Result_Data.HASGUESTROOM
|
|
}
|
|
} else {
|
|
this.haveFun = {}
|
|
}
|
|
|
|
},
|
|
async changeLabel(item) {
|
|
let list = this.brandLabelList
|
|
list.forEach(selectItem => {
|
|
selectItem[5] = false
|
|
})
|
|
list.forEach(selectItem => {
|
|
if (item[3] === selectItem[3]) {
|
|
selectItem[5] = true
|
|
} else {
|
|
selectItem[5] = false
|
|
}
|
|
})
|
|
this.brandLabelList = list
|
|
let req = {
|
|
ProvinceCode: '340000',
|
|
Serverpart_ID: this.serviceInfo.Serverpart_ID || null,
|
|
Statistics_Date: this.time,
|
|
BusinessTradeIds: item[3],
|
|
}
|
|
let totalData = await request.$webGet('CommercialApi/BaseInfo/GetBrandAnalysis', req)
|
|
this.brandInfoList = totalData.Result_Data.ShopBrandList
|
|
this.$forceUpdate()
|
|
// 如果要多选 就下面注释的这段
|
|
// let str = ''
|
|
// list.forEach(selectItem=>{
|
|
// if (item[3] === selectItem[3]){
|
|
// if (selectItem[4]){
|
|
// selectItem[4] = false
|
|
// }else{
|
|
// selectItem[4] = true
|
|
// }
|
|
// }
|
|
// })
|
|
// this.brandLabelList = list
|
|
// let req
|
|
// let str1 = ''
|
|
// let str2 = ''
|
|
// // if(item[2] === '1000'){
|
|
// this.brandLabelList.forEach(selectItem=>{
|
|
// if (selectItem[2] === '1000'){
|
|
// if (selectItem[4]){
|
|
// if (str1 === ''){
|
|
// str1 = selectItem[3]
|
|
// }else{
|
|
// str1+=',' + selectItem[3]
|
|
// }
|
|
// }
|
|
// }else if(selectItem[2] === '2000'){
|
|
// if (selectItem[4]){
|
|
// if (str2 === ''){
|
|
// str2 = selectItem[3]
|
|
// }else{
|
|
// str2+=',' + selectItem[3]
|
|
// }
|
|
// }
|
|
// }
|
|
// })
|
|
// // }else if(item[2] === '2000'){
|
|
// // this.brandLabelList.forEach(selectItem=>{
|
|
// // if (selectItem[2] === '2000'){
|
|
// // if (selectItem[4]){
|
|
// // if (str2 === ''){
|
|
// // str2 = selectItem[3]
|
|
// // }else{
|
|
// // str2+=',' + selectItem[3]
|
|
// // }
|
|
// // }
|
|
// // }
|
|
// // })
|
|
// // }
|
|
// if (str1 && !str2){
|
|
// req = {
|
|
// ProvinceCode:'340000',
|
|
// Serverpart_ID:this.serviceInfo.Serverpart_ID,
|
|
// Statistics_Date:this.time,
|
|
// BusinessTradeIds:str1,
|
|
// }
|
|
// }else if(!str1 && str2){
|
|
// req = {
|
|
// ProvinceCode:'340000',
|
|
// Serverpart_ID:this.serviceInfo.Serverpart_ID,
|
|
// Statistics_Date:this.time,
|
|
// BrandType:str2,
|
|
// }
|
|
// }else if(str1 && str2){
|
|
// req = {
|
|
// ProvinceCode:'340000',
|
|
// Serverpart_ID:this.serviceInfo.Serverpart_ID,
|
|
// Statistics_Date:this.time,
|
|
// BusinessTradeIds:str1,
|
|
// BrandType:str2,
|
|
// }
|
|
// }
|
|
},
|
|
// 业态充盈的改变事件
|
|
async handleChangeBandLevel(key) {
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
})
|
|
let req
|
|
if (key === false) {
|
|
req = {
|
|
ProvinceCode: '340000',
|
|
Serverpart_ID: this.serviceInfo.Serverpart_ID,
|
|
Statistics_Date: this.time
|
|
}
|
|
this.selectKey = ''
|
|
} else {
|
|
req = {
|
|
ProvinceCode: '340000',
|
|
Serverpart_ID: this.serviceInfo.Serverpart_ID,
|
|
Statistics_Date: this.time,
|
|
BusinessTradeIds: key
|
|
}
|
|
this.selectKey = key
|
|
}
|
|
let totalData = await request.$webGet('CommercialApi/BaseInfo/GetBrandAnalysis', req)
|
|
if (totalData.Result_Data) {
|
|
this.brandLabelList = totalData.Result_Data.BrandTag
|
|
this.brandInfoList = totalData.Result_Data.ShopBrandList
|
|
uni.hideLoading()
|
|
}
|
|
|
|
},
|
|
async nearestService() {
|
|
let seat = uni.getStorageSync('seatInfo');
|
|
let req = {
|
|
longitude: seat.longitude,
|
|
Province_Code: '340000',
|
|
latitude: seat.latitude,
|
|
}
|
|
const data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartList', req)
|
|
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() {
|
|
let req
|
|
if (this.serviceInfo.SERVERPART_NAME === '安徽驿达') {
|
|
req = {
|
|
ProvinceCode: '340000',
|
|
StatisticsDate: this.time,
|
|
BusinessTradeIds: -1
|
|
}
|
|
} else {
|
|
req = {
|
|
ProvinceCode: '340000',
|
|
StatisticsDate: this.time,
|
|
serverpartId: this.serviceInfo.Serverpart_ID,
|
|
BusinessTradeIds: -1
|
|
}
|
|
}
|
|
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), key: item.key })
|
|
all += Number(item.value)
|
|
} else if (index === 11) {
|
|
res.push({ name: `其他${(100 - all).toFixed(2)}%`, value: Number((100 - all).toFixed(2)), key: item.key })
|
|
}
|
|
})
|
|
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
|
|
},
|
|
async getBrandInfoList() {
|
|
let req
|
|
if (this.serviceInfo.SERVERPART_NAME === '安徽驿达') {
|
|
req = {
|
|
ProvinceCode: '340000',
|
|
Statistics_Date: this.time
|
|
}
|
|
} else {
|
|
req = {
|
|
ProvinceCode: '340000',
|
|
Serverpart_ID: this.serviceInfo.Serverpart_ID,
|
|
Statistics_Date: this.time
|
|
}
|
|
}
|
|
let totalData = await request.$webGet('CommercialApi/BaseInfo/GetBrandAnalysis', req)
|
|
this.brandLabelList = totalData && totalData.Result_Data && totalData.Result_Data.BrandTag ? totalData.Result_Data.BrandTag : ''
|
|
this.brandLabelListNoChange = totalData && totalData.Result_Data && totalData.Result_Data.BrandTag ? totalData.Result_Data.BrandTag : ''
|
|
this.brandInfoList = totalData && totalData.Result_Data && totalData.Result_Data.ShopBrandList ? totalData.Result_Data.ShopBrandList : ''
|
|
this.brandInfoListNoChange = totalData && totalData.Result_Data && totalData.Result_Data.ShopBrandList ? totalData.Result_Data.ShopBrandList : ''
|
|
|
|
// 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]}]
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.main {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
|
|
.charts {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 28px 16px 24px;
|
|
background: #fff;
|
|
|
|
.chartsItem {
|
|
.top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.time {
|
|
margin-bottom: 4px;
|
|
|
|
.select {
|
|
margin-left: 8px;
|
|
display: inline-block;
|
|
|
|
.time {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 4px;
|
|
|
|
.day {
|
|
font-size: 32rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #782717;
|
|
line-height: 44rpx;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.uni-input {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #ae664e;
|
|
line-height: 36rpx;
|
|
}
|
|
|
|
.icon {
|
|
width: 24px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.btnBox {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.btnItem {
|
|
border-radius: 4px;
|
|
padding: 2px 6px;
|
|
margin-right: 6px;
|
|
margin-bottom: 6px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
border: 1px solid #ccc;
|
|
background: #fff
|
|
}
|
|
|
|
.selectItem {
|
|
background: rgba(202, 208, 218, 0.5);
|
|
border: 1px solid #ccc;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
border-radius: 4px;
|
|
padding: 2px 6px;
|
|
margin-right: 6px;
|
|
margin-bottom: 6px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.labelItemSelect {
|
|
border: 1px solid #ccc;
|
|
background: rgba(202, 208, 218, 0.5)
|
|
}
|
|
|
|
.labelItemUnSelect {
|
|
border: 1px solid #ccc;
|
|
background: rgba(237, 239, 244, 0.2)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|