645 lines
22 KiB
Vue
645 lines
22 KiB
Vue
<template>
|
|
<scroll-view class="main" scroll-y="true">
|
|
<!-- <div style="position: fixed;right: 0;top: 20%;z-index:99999999999">-->
|
|
<!-- <commercial-type :have="1"/>-->
|
|
<!-- </div>-->
|
|
<header-top ref="headerTop" :bgUrl="bgUrl" :menu="menu" :topBg="topBg" :bgColor="bgColor" :title="title"
|
|
:page="page" :backType="backType" :analyseInfo="analyseInfo" :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="2" :headerBg="'linear-gradient( #3ca284 0%, #ffffff 100%)'" />
|
|
|
|
<div class="charts"
|
|
:style="{ paddingTop: serviceInfo.SERVERPART_NAME === '安徽驿达' ? menu.bottom + 62 + 14 + 'px' : '' }">
|
|
<div class="chartsItem" style="height: 440px">
|
|
<div style="display: flex;align-items: center;justify-content: space-between">
|
|
<p class="title">客单分析</p>
|
|
<div class="item">
|
|
<text class="value">{{ time }}</text>
|
|
</div>
|
|
</div>
|
|
<div v-if="customer">
|
|
<customer-first :analyseInfo="{ analysisins_type: 1202, analysisins_format: 2000 }" :data="customer" />
|
|
</div>
|
|
<no-data v-else />
|
|
</div>
|
|
<div class="chartsItem" style="margin-top: 32px;height: 330px">
|
|
<div class="time">
|
|
<div class="select">
|
|
<picker mode="date" fields="month" :value="single" :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>
|
|
<p class="title">客群特征分析</p>
|
|
<div v-if="genderBubbleList.res && genderBubbleList.res.length > 0">
|
|
<customer-second :data="genderBubbleList" />
|
|
<analyse :analyseInfo="{ analysisins_type: 1203, analysisins_format: 2000 }" />
|
|
</div>
|
|
<no-data v-else />
|
|
</div>
|
|
<div class="chartsItem" style="margin-top: 32px;height: 310px">
|
|
<p class="title">客群消费偏好</p>
|
|
<div v-if="consterPreferList.series && consterPreferList.series.length > 0">
|
|
<consum-prefer :data="consterPreferList" />
|
|
<analyse :analyseInfo="{ analysisins_type: 1204, analysisins_format: 2000 }" />
|
|
</div>
|
|
<no-data v-else />
|
|
</div>
|
|
<div class="chartsItem" style="margin-top: 32px;height: 210px">
|
|
<p class="title">客群消费水平</p>
|
|
<div v-if="consumptionLevelList && consumptionLevelList.length > 0">
|
|
<consumption-level :data="consumptionLevelList" />
|
|
<analyse :analyseInfo="{ analysisins_type: 1205, analysisins_format: 2000 }" />
|
|
</div>
|
|
<no-data v-else />
|
|
</div>
|
|
<div class="chartsItem" style="margin-top: 32px;height: 220px">
|
|
<p class="title" style="margin-bottom: 24px">业态客单偏好</p>
|
|
<div>
|
|
<business-type :data="businessTypeList"></business-type>
|
|
<analyse :analyseInfo="{ analysisins_type: 1206, 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 customerFirst from "./components/guest/customerFirst.vue";
|
|
import customerSecond from "./components/guest/customerSecond.vue";
|
|
import analyse from "./components/analyse.vue";
|
|
import ConsumPrefer from "./components/guest/consumPrefer.vue";
|
|
import ConsumptionLevel from "./components/guest/consumptionLevel.vue";
|
|
import BusinessType from "./components/guest/businessType.vue";
|
|
import NoData from "./components/noData.vue";
|
|
import { getFieldEnum } from "../../../util/dateTime/index";
|
|
import SliderPage from "./components/sliderPage.vue";
|
|
export default {
|
|
name: "guestPortrait",
|
|
components: {
|
|
SliderPage,
|
|
NoData, BusinessType, ConsumptionLevel, ConsumPrefer, analyse, headerTop, customerFirst, customerSecond
|
|
},
|
|
data() {
|
|
return {
|
|
topBg: 'linear-gradient(180deg, #A1D0C1 0%, #B1D9CD 100%);',//顶部组件的悬浮背景色
|
|
title: '客群画像',//页面标题
|
|
bgColor: '180deg, #30C8ED 0%, #0B9353 100%',//标签背景颜色
|
|
bgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/guestPortraitBg.svg',//背景图片路径
|
|
page: '/pages/commercialBI/guestPortrait',
|
|
|
|
pageType: 1000,
|
|
detailBoxBg: 'linear-gradient(136deg, #ECF6F6 0%, #FFFFFF 100%);',
|
|
topLeftBg: 'linear-gradient(180deg, rgba(48, 200, 237, 0.2) 0%, rgba(11, 147, 83, 0.2) 100%)',// 类别背景
|
|
topLeftColor: '#0E9760',// 类别文字颜色
|
|
iconObj: {
|
|
car: 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carGuest.svg',
|
|
charge: 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/chargeGuest.svg',
|
|
bady: 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/badyGuest.svg',
|
|
guestRoom: 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/guestRoomGuest.svg'
|
|
},
|
|
haveIconObj: {
|
|
have: 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/haveGuest.svg',
|
|
noHave: 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/noHaveGuest.svg'
|
|
},
|
|
time: '',//跳转携带的时间
|
|
menu: {},//手机配置信息
|
|
customer: {}, // 客群分析第一个
|
|
genderBubbleList: [],//男女的气泡图
|
|
consterPreferList: {},//客群消费偏好
|
|
consumptionLevelList: [],//客群消费水平
|
|
businessTypeList: [],//业态偏好
|
|
serviceInfo: {}, //当前服务区信息
|
|
backType: '',//返回的页面类型
|
|
analyseInfo: {
|
|
analysisins_type: 1201,
|
|
},
|
|
single: '',//显示时间
|
|
thisMonth: '',//几月
|
|
endData: '', // 结束时间
|
|
haveFun: {},
|
|
serviceTypeObj: {},// 服务区类型对象
|
|
serviceInfoObj: {}
|
|
}
|
|
},
|
|
props: {
|
|
selectIndex: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
watch: {
|
|
selectIndex: {
|
|
handler(value) {
|
|
if (value === 2) {
|
|
this.handleGetPageData()
|
|
}
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
// if (option.serviceInfo){
|
|
// this.serviceInfo = JSON.parse(option.serviceInfo)
|
|
// }
|
|
// this.backType = option.type
|
|
// //跳转的时候带上时间
|
|
// this.time = option.time
|
|
// this.endData = new Date()
|
|
// // 服务区类型枚举
|
|
// 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()
|
|
// 把获取图表数据的方法统一放在一起 然后去请求接口拿到数据 再分批传到相对应的图标组件
|
|
// 每个图表都是用组件的方式引入的 数据是通过prop传入的
|
|
// 每个组件需要的数据格式都注释在方法的下面 方便修改，接口拿到数据之后 就是对数据进行处理 普通的遍历数组和遍历对象的方法
|
|
if (!storeServiceInfo) {
|
|
this.nearestService()
|
|
}
|
|
//customer
|
|
this.getCustomer()
|
|
//客群分析男女的气泡图
|
|
this.getGenderBubbleList()
|
|
//客群消费偏好
|
|
this.getConsterPreferList()
|
|
//客群消费水平
|
|
this.getConsumptionLevelList()
|
|
//业态偏好
|
|
this.getBusinessTypeList()
|
|
// 服务区基本信息
|
|
this.getServiceInfo()
|
|
this.handleChangeCurrent()
|
|
},
|
|
onUnload() {
|
|
this.$util.addUserBehavior()
|
|
},
|
|
methods: {
|
|
// 拿到页面数据
|
|
handleGetPageData() {
|
|
this.endData = new Date()
|
|
// 服务区类型枚举
|
|
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()
|
|
// 把获取图表数据的方法统一放在一起 然后去请求接口拿到数据 再分批传到相对应的图标组件
|
|
// 每个图表都是用组件的方式引入的 数据是通过prop传入的
|
|
// 每个组件需要的数据格式都注释在方法的下面 方便修改，接口拿到数据之后 就是对数据进行处理 普通的遍历数组和遍历对象的方法
|
|
if (!storeServiceInfo) {
|
|
this.nearestService()
|
|
}
|
|
//customer
|
|
this.getCustomer()
|
|
//客群分析男女的气泡图
|
|
this.getGenderBubbleList()
|
|
//客群消费偏好
|
|
this.getConsterPreferList()
|
|
//客群消费水平
|
|
this.getConsumptionLevelList()
|
|
//业态偏好
|
|
this.getBusinessTypeList()
|
|
// 服务区基本信息
|
|
this.getServiceInfo()
|
|
this.handleChangeCurrent()
|
|
},
|
|
handleChangeCurrent() {
|
|
this.$refs.headerTop.handleChangeCurrent()
|
|
},
|
|
bindDateChange(e) {
|
|
const date = new Date(e.detail.value)
|
|
let m = date.getMonth() + 1
|
|
if (m < 10) {
|
|
m = '0' + m
|
|
}
|
|
this.thisMonth = m
|
|
this.single = e.detail.value
|
|
let d = this.$util.getThisMonthDay(e.detail.value)
|
|
this.endTime = e.detail.value + '-' + d
|
|
this.onRefresh()
|
|
},
|
|
// 枚举服务区类型 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
|
|
},
|
|
//重新调一遍页面数据的方法
|
|
onRefresh() {
|
|
//客群分析男女的气泡图
|
|
this.getGenderBubbleList()
|
|
//客群消费偏好
|
|
this.getConsterPreferList()
|
|
//客群消费水平
|
|
this.getConsumptionLevelList()
|
|
//业态偏好
|
|
this.getBusinessTypeList()
|
|
// 服务区基本信息
|
|
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
|
|
this.haveFun = {
|
|
car: total.Result_Data.HASPILOTLOUNGE,
|
|
charge: total.Result_Data.HASCHARGE,
|
|
bady: total.Result_Data.HASMOTHER,
|
|
gusetHome: total.Result_Data.HASGUESTROOM
|
|
}
|
|
},
|
|
//当前最近的服务区数据
|
|
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)
|
|
},
|
|
//customer
|
|
// 用async await直接等待接口数据返回之后再对数据直接进行处理 节约时间
|
|
async getCustomer() {
|
|
let time = ''
|
|
const date = new Date(this.single)
|
|
let y = date.getFullYear()
|
|
let m = date.getMonth() + 1
|
|
const nowDate = new Date(this.time)
|
|
let nowYear = nowDate.getFullYear()
|
|
let nowMonth = nowDate.getMonth() + 1
|
|
if (y === nowYear && m === nowMonth) {
|
|
time = this.time
|
|
} else {
|
|
time = this.endTime
|
|
}
|
|
const req = {
|
|
Province_Code: '340000',
|
|
Statistics_Date: time,
|
|
Serverpart_ID: this.serviceInfo.SERVERPART_NAME === '安徽驿达' ? null : this.serviceInfo.Serverpart_ID,
|
|
ShowConsumptionLevel: true,
|
|
ShowConvertRate: true
|
|
}
|
|
console.log('客群req', JSON.parse(JSON.stringify(req)));
|
|
let totalData = await request.$webGet('CommercialApi/Revenue/GetTransactionAnalysis', req)
|
|
console.log('客群data', JSON.parse(JSON.stringify(totalData)));
|
|
this.customer = totalData.Result_Data ? totalData.Result_Data : {}
|
|
|
|
},
|
|
//客群分析男女的气泡图
|
|
async getGenderBubbleList() {
|
|
let time = ''
|
|
const date = new Date(this.single)
|
|
let y = date.getFullYear()
|
|
let m = date.getMonth() + 1
|
|
const nowDate = new Date(this.time)
|
|
let nowYear = nowDate.getFullYear()
|
|
let nowMonth = nowDate.getMonth() + 1
|
|
if (y === nowYear && m === nowMonth) {
|
|
time = this.time
|
|
} else {
|
|
time = this.endTime
|
|
}
|
|
let result = {
|
|
man: '',
|
|
woman: '',
|
|
res: []
|
|
}
|
|
let req
|
|
if (this.serviceInfo.SERVERPART_NAME === '安徽驿达') {
|
|
req = {
|
|
statisticsType: 1,
|
|
provinceCode: '340000',
|
|
statisticsMonth: this.$util.getThisMonth(time)
|
|
}
|
|
} else {
|
|
req = {
|
|
statisticsType: 1,
|
|
provinceCode: '340000',
|
|
serverpartId: this.serviceInfo.Serverpart_ID,
|
|
statisticsMonth: this.$util.getThisMonth(time)
|
|
}
|
|
}
|
|
let totalData = await request.$webGet('CommercialApi/Customer/GetCustomerRatio', req)
|
|
totalData.Result_Data.List.forEach(item => {
|
|
// 判断男性和女性 然后赋值
|
|
if (item.name === '男性') {
|
|
result.man = item.data[0]
|
|
} else if (item.name === '女性') {
|
|
result.woman = item.data[0]
|
|
}
|
|
})
|
|
const bubbleReq = {
|
|
provinceCode: '340000',
|
|
serverpartId: this.serviceInfo.SERVERPART_NAME === '安徽驿达' ? null : this.serviceInfo.Serverpart_ID,
|
|
statisticsMonth: this.$util.getThisMonth(time)
|
|
}
|
|
|
|
let bubbleData = await request.$webGet('CommercialApi/Customer/GetCustomerGroupRatio', bubbleReq)
|
|
result.res = bubbleData.Result_Data.List
|
|
// let res = [
|
|
// {
|
|
// name: "男",
|
|
// data: [[25,60,30],[40,35,17]]
|
|
// },
|
|
// {
|
|
// name: "女",
|
|
// data: [[25,35,17],[35,15,15]]
|
|
// }
|
|
// ]
|
|
this.genderBubbleList = result
|
|
},
|
|
//客群消费偏好
|
|
async getConsterPreferList() {
|
|
let time = ''
|
|
const date = new Date(this.single)
|
|
let y = date.getFullYear()
|
|
let m = date.getMonth() + 1
|
|
const nowDate = new Date(this.time)
|
|
let nowYear = nowDate.getFullYear()
|
|
let nowMonth = nowDate.getMonth() + 1
|
|
if (y === nowYear && m === nowMonth) {
|
|
time = this.time
|
|
} else {
|
|
time = this.endTime
|
|
}
|
|
let req
|
|
if (this.serviceInfo.SERVERPART_NAME === '安徽驿达') {
|
|
req = {
|
|
statisticsType: 1,
|
|
startMonth: this.$util.getThisMonth(time),
|
|
endMonth: this.$util.getThisMonth(time),
|
|
provinceCode: '340000',
|
|
}
|
|
} else {
|
|
req = {
|
|
statisticsType: 1,
|
|
startMonth: this.$util.getThisMonth(time),
|
|
endMonth: this.$util.getThisMonth(time),
|
|
provinceCode: '340000',
|
|
serverpartId: this.serviceInfo.Serverpart_ID || ''
|
|
}
|
|
}
|
|
const data = await request.$webGet('CommercialApi/Customer/GetCustomerSaleRatio', req)
|
|
let res = {
|
|
categories: [],
|
|
series: [
|
|
{ name: "男", data: [] },
|
|
{ name: "女", data: [] }
|
|
],
|
|
max: ''
|
|
}
|
|
if (data.Result_Data) {
|
|
data.Result_Data.CustomerSaleList.forEach(item => {
|
|
res.categories.push(item.BusinessTradeName)
|
|
res.series[0].data.push(item.MaleRatio)
|
|
res.series[1].data.push(item.FemaleRatio)
|
|
})
|
|
res.max = data.Result_Data.MaxSexRatio
|
|
// let res = {
|
|
// categories: ['餐饮','商超','水果饮品','连锁品牌','粽子','小吃'],
|
|
// series: [
|
|
// {name: "男", data: [90,110,165,195,187,172]},
|
|
// {name: "女", data: [190,210,105,35,27,102]}
|
|
// ]
|
|
// }
|
|
this.consterPreferList = res
|
|
} else {
|
|
this.consterPreferList = {}
|
|
}
|
|
|
|
},
|
|
//客群消费水平
|
|
async getConsumptionLevelList() {
|
|
let time = ''
|
|
const date = new Date(this.single)
|
|
let y = date.getFullYear()
|
|
let m = date.getMonth() + 1
|
|
const nowDate = new Date(this.time)
|
|
let nowYear = nowDate.getFullYear()
|
|
let nowMonth = nowDate.getMonth() + 1
|
|
if (y === nowYear && m === nowMonth) {
|
|
time = this.time
|
|
} else {
|
|
time = this.endTime
|
|
}
|
|
const req = {
|
|
provinceCode: '340000',
|
|
serverpartId: this.serviceInfo.SERVERPART_NAME === '安徽驿达' ? null : this.serviceInfo.Serverpart_ID,
|
|
statisticsMonth: this.$util.getThisMonth(time)
|
|
}
|
|
const data = await request.$webGet('CommercialApi/Customer/GetCustomerConsumeRatio', req)
|
|
let res = []
|
|
data.Result_Data.List.forEach(item => {
|
|
res.push({ name: item.name, big: (item.data[3] + item.data[2]).toFixed(2), normal: (item.data[1]).toFixed(2), small: item.data[0].toFixed(2) })
|
|
})
|
|
|
|
// let res=[{name:'男',big:'14.8',normal:'41.7',small:'43.5'},
|
|
// {name:'女',big:'44.1',normal:'31.7',small:'24.2'}]
|
|
this.consumptionLevelList = res
|
|
},
|
|
//业态偏好
|
|
async getBusinessTypeList() {
|
|
let time = ''
|
|
const date = new Date(this.single)
|
|
let y = date.getFullYear()
|
|
let m = date.getMonth() + 1
|
|
const nowDate = new Date(this.time)
|
|
let nowYear = nowDate.getFullYear()
|
|
let nowMonth = nowDate.getMonth() + 1
|
|
if (y === nowYear && m === nowMonth) {
|
|
time = this.time
|
|
} else {
|
|
time = this.endTime
|
|
}
|
|
let req
|
|
if (this.serviceInfo.SERVERPART_NAME === '安徽驿达') {
|
|
req = {
|
|
ProvinceCode: '340000',
|
|
StatisticsDate: time,
|
|
}
|
|
} else {
|
|
req = {
|
|
ProvinceCode: '340000',
|
|
StatisticsDate: time,
|
|
serverpartId: this.serviceInfo.Serverpart_ID
|
|
}
|
|
}
|
|
const data = await request.$webGet('CommercialApi/Revenue/GetBusinessTradeRevenue', req)
|
|
let res = []
|
|
let all = 0
|
|
if (data.Result_Data) {
|
|
data.Result_Data.BusinessTradeRank.forEach((item, index) => {
|
|
if (index <= 4) {
|
|
res.push({ name: `${item.name} ${item.value}%`, value: Number(item.value) })
|
|
all += Number(item.value)
|
|
} else if (index === 5) {
|
|
if (all < 100) {
|
|
res.push({ name: `其他${(100 - all).toFixed(2)}%`, value: Number((100 - all).toFixed(2)) })
|
|
}
|
|
}
|
|
})
|
|
let result = [
|
|
{
|
|
data: res
|
|
}
|
|
]
|
|
|
|
// let res=[
|
|
// {
|
|
// data: [{name:"餐饮 35.6%",value:35.6},
|
|
// {name:"小吃 22.5%",value:22.5},
|
|
// {name:"水果饮品 17.3%",value:17.3},
|
|
// {name:"粽子 15.2%",value:15.2},
|
|
// {name:"商超 5.8%",value:5.8},
|
|
// {name:"其他 3.6%",value:3.6}]
|
|
// }
|
|
// ]
|
|
this.businessTypeList = result
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.main {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
|
|
.charts {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 14px 16px 24px;
|
|
background: #fff;
|
|
|
|
.time {
|
|
margin-bottom: 4px;
|
|
|
|
.thisTime {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 500;
|
|
color: #160002;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.chartsItem {
|
|
.title {
|
|
font-size: 17px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.item {
|
|
.value {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|