1210 lines
30 KiB
Vue
1210 lines
30 KiB
Vue
<template>
|
|
<view :style="showUnUpLoad ? 'overflow:hideen;height:100vh;':'height:100%;width:750rpx;'" class="page-body"
|
|
scroll-with-animation v-if="showPage">
|
|
<div class="box-card" :style="'opacity:'+(1-opacity)+';'">
|
|
<div class="box-top-title">
|
|
<span class="box-center-title">{{sMsg.serverpartname}}</span>
|
|
<picker mode="date" @change="bindDateChange" :value="theRequest&&theRequest.time" start="2021/01/01"
|
|
class="title-clock">
|
|
<view>{{searchDate}} <text class="uni-icon uni-icon-arrowdown"></text></view>
|
|
</picker>
|
|
|
|
</div>
|
|
<view class="top-card">
|
|
<div class="box-center-box">
|
|
|
|
<div class="uni-flex ai-center jc-between">
|
|
<div class="main-amount-title">对客营收(元)</div>
|
|
<div class="tab-unit" @tap="showPop">
|
|
<span>上传门店：</span>
|
|
<span class="tab-unit-num"
|
|
:class="{'priceRed':sMsg.uploadCount!==sMsg.totalUploadCount}">{{sMsg.uploadCount}}</span>
|
|
<span class="tab-unit-num "
|
|
:class="{'more-btn':sMsg.uploadCount!==sMsg.totalUploadCount}">{{sMsg.totalUploadCount}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="uni-flex ai-base jc-between">
|
|
|
|
<span class="center-num">{{sMsg.totalMoneyShow}}</span>
|
|
|
|
<span class="budgetamount">
|
|
<text class="budget-title">计划营收(元):</text>
|
|
<text :class="sMsg.budgetAmount< sMsg.cashPay ? 'up-text-title':'down-text-title'">
|
|
{{sMsg.budgetamoutShow}}
|
|
<span style="font-size: 24rpx;margin-left: 12rpx;">{{sMsg.diffBili}}%</span>
|
|
</text>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="uni-flex jc-between box-center-box">
|
|
|
|
<div class="check-unit">
|
|
<text>长款金额</text>
|
|
<div class="check-price-color">{{$util.fmoney(sMsg.diffMorePrice,2)}} <text>元</text></div>
|
|
</div>
|
|
<div class="check-unit">
|
|
<text>短款金额</text>
|
|
<div class="check-price-color">{{$util.fmoney(sMsg.diffLessPrice,2)}} <text>元</text></div>
|
|
</div>
|
|
<div class="check-unit">
|
|
<text>客单交易</text>
|
|
<div class="check-price-color">{{$util.fmoney(sMsg.ticketCount,0)}} <text>笔</text></div>
|
|
</div>
|
|
<div class="check-unit">
|
|
<text>客单均价</text>
|
|
<div class="check-price-color">{{$util.fmoney(sMsg.tickave,2)}} <text>元</text></div>
|
|
</div>
|
|
</div>
|
|
<div class="uni-flex jc-between box-center-box mt8">
|
|
<div class="check-unit">
|
|
<text>优惠金额</text>
|
|
<div class="check-price-color">{{$util.fmoney(sMsg.totalOffAmount,2)}} <text>元</text></div>
|
|
</div>
|
|
<div class="check-unit">
|
|
<text>移动支付</text>
|
|
<div class="check-price-color">{{$util.fmoney(sMsg.mobilePayment,2)}} <text>元</text></div>
|
|
</div>
|
|
<div class="check-unit">
|
|
<text>商品出售</text>
|
|
<div class="check-price-color">{{$util.fmoney(sMsg.totalCount,0)}} <text>件</text></div>
|
|
</div>
|
|
<div class="check-unit">
|
|
<text>商品均价</text>
|
|
<div class="check-price-color">{{$util.fmoney(sMsg.countave,2)}} <text>元</text></div>
|
|
</div>
|
|
</div>
|
|
|
|
</view>
|
|
|
|
</div>
|
|
<cover-view class="fixed-box page-title" :style="'transform: translateY('+fixedY+'px);opacity:'+opacity+';'">
|
|
<cover-view>{{sMsg.serverpartname || ''}}</cover-view>
|
|
<cover-view class="price-text" style="width: 200rpx;text-align: right;">¥ {{sMsg.totalMoneyShow}}
|
|
</cover-view>
|
|
</cover-view>
|
|
|
|
<template v-if="cateBrandList.length">
|
|
<template v-if="theRequest.ProvinceCode=='340000'">
|
|
<view class="uni-flex ai-center analysis-tabs">
|
|
<!-- <view @tap="changeTab(3)" class="tab" :class="{'active': nowTab==3}">经营模式</view> -->
|
|
<view @tap="changeTab(4)" class="tab" :class="{'active': nowTab==4}">车流分析</view>
|
|
<view @tap="changeTab(1)" class="tab" :class="{'active': nowTab==1}">经营分析</view>
|
|
<view @tap="changeTab(2)" class="tab" :class="{'active': nowTab==2}">客群分析</view>
|
|
</view>
|
|
|
|
<!-- <view class="pie-content" v-show="nowTab==3">
|
|
<div class="pie-title">经营模式占比</div>
|
|
<view class="operation-model-content">
|
|
<canvas canvas-id="modelCount" v-if="operationModel.length>0" id="modelCount"
|
|
class="operation-model-content" @click="touchPie($event,'modelCount')" />
|
|
</view>
|
|
</view> -->
|
|
</template>
|
|
|
|
<view v-show="nowTab==1">
|
|
<!-- 安徽省 -->
|
|
<div class="pie-content">
|
|
<div class="model-busniess">经营业态占比</div>
|
|
<ServiceRevenuePie ref="serviceRevenuePie" v-if="ServiceRevenueData.length==2 && nowTab==1"
|
|
:data="ServiceRevenueData" @selectCate="selectCate" />
|
|
<!-- 其余省份 -->
|
|
<!-- <canvas v-else-if="sellData.length>0" canvas-id="sellCate" id="sellCate" class="operation-cate-content" @click="touchPie($event,'sellCate')"></canvas> -->
|
|
<div class="model-busniess">
|
|
<div>经营模式占比</div>
|
|
<div class="progress-content">
|
|
<div class="progress-left" :style="'width: '+operationModel[0].bili+'%;'"></div>
|
|
<div class="progress-right" :style="'width: '+operationModel[1].bili+'%;'"></div>
|
|
</div>
|
|
<div class="uni-flex jc-between">
|
|
<div style="color: #667ED5;">{{operationModel[0].name}}: <span
|
|
style="font-size: 32rpx;">{{operationModel[0].bili}}</span>%</div>
|
|
<div style="color: #F3AF50;" v-if="operationModel[1].name">{{operationModel[1].name}}: <span
|
|
style="font-size: 32rpx;">{{operationModel[1].bili}}</span>%</div>
|
|
</div>
|
|
<div class="uni-flex jc-between">
|
|
<div><span style="font-size: 32rpx;">{{operationModel[0].data}}</span>元</div>
|
|
<div v-if="operationModel[1].data"><span
|
|
style="font-size: 32rpx;">{{operationModel[1].data}}</span>元</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 品牌列表 -->
|
|
<div class="shop-box">
|
|
<scroll-view scroll-x class="tab-shop" scroll-with-animation :scroll-left="scrollLeft">
|
|
<div v-for="(n,i) in cateBrandList" :key="i" :id="`tabNum${i}`" class="cate-name"
|
|
:class="{'active': nowShop==i}" @click="selectCate(i)">{{n.Bussiness_Name}}</div>
|
|
</scroll-view>
|
|
<div class="tab-content" v-if="cateBrandList.length">
|
|
<div class="shop-card" v-for="(m,i) in cateBrandList[nowShop].listBrandModel" :key="i"
|
|
@click="toBrandPage(m,i)">
|
|
<div>
|
|
<image v-if="m.Brand_ICO" :src="m.Brand_ICO" mode="aspectFit"></image>
|
|
<image v-else src="/static/images/revenue/home.png" mode="aspectFit"></image>
|
|
</div>
|
|
<div class="shop-name">{{m.Brand_Name}}</div>
|
|
<div class="price-num">¥ {{m.Revenue_Amount ? $util.fmoney(m.Revenue_Amount,2) : '0.00'}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</view>
|
|
|
|
<view class="" v-show="nowTab==2">
|
|
<CustomerAnalysis ref="customerAna" :show="nowTab==2" />
|
|
</view>
|
|
<view class="" v-show="nowTab==4">
|
|
<CarAnalysis ref="carAna" :show="nowTab==4" />
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<view style="height: 350rpx;" v-else>
|
|
<noFound :nodata="'true'" :text="noDataText" />
|
|
</view>
|
|
|
|
<cover-view class="uni-mask" :style="showUnUpLoad ? ' display:block;':'opacity:0; display: none;'"
|
|
@click="closePop" :catchtouchmove="showUnUpLoad? 'return':''"></cover-view>
|
|
<cover-view class="uni-popup uni-popup-middle" :style="showUnUpLoad ? 'display:flex;':'display: none;'"
|
|
:catchtouchmove="showUnUpLoad? 'return':''">
|
|
|
|
<cover-view class="header-top" v-if="unUploadList.length>0">{{sMsg.serverpartname}}未上传门店</cover-view>
|
|
<cover-view class="pop-body">
|
|
<cover-view class="uni-flex pop-row" v-for="(c,i) in unUploadList" :key="i">
|
|
<cover-view class="uni-flex ai-center">
|
|
<cover-view class="pop-index">{{i>8 ? i+1 :'0'+(i+1)}}</cover-view>
|
|
<cover-view class="inline-item">{{c.ServerpartShop_Name}}</cover-view>
|
|
</cover-view>
|
|
<cover-view class="pop-row-bottom"></cover-view>
|
|
</cover-view>
|
|
</cover-view>
|
|
|
|
</cover-view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uCharts from '@/components/u-charts/u-charts.js';
|
|
import ServiceRevenuePie from './components/ServiceRevenuePie.vue'
|
|
import CustomerAnalysis from './components/CustomerAnalysis.vue'
|
|
import CarAnalysis from './components/CarAnalysis.vue'
|
|
import anhuiYestodayRevenueData from './components/anhuiYestodayRevenueData.js'
|
|
let rincanvas = {}
|
|
var _self;
|
|
export default {
|
|
data() {
|
|
const lastDay = this.$util.cutDate(new Date(), 'YYYY/MM/DD ', -1)
|
|
|
|
return {
|
|
lastDay: lastDay + '23:59:59', // 该页面的最近有效日期
|
|
noDataText: '抱歉,该服务区暂无品牌分析数据',
|
|
scrollLeft: 0,
|
|
theRequest: {},
|
|
showAll: false,
|
|
showHeight: uni.upx2px(484) + 'px',
|
|
searchDate: '',
|
|
sellData: [],
|
|
scrollTop: 0,
|
|
pageData: {},
|
|
cateBrandList: [],
|
|
// ringColor: ['#FFAC37', '#d8ece9', '#e0e3f7', '#f7f5f6', '#b2b7e3'],
|
|
nowShop: 0,
|
|
showPage: false,
|
|
fixedY: -68,
|
|
opacity: 0,
|
|
sMsg: null, // 头部数据
|
|
showUnUpLoad: false, //未上传门店弹出框
|
|
upcouts: null, // 上传门店数量
|
|
unUploadList: [], // 未上传门店列表
|
|
todayUpList: [], // 未上传门店列表
|
|
ServiceRevenueData: [],
|
|
nowTab: 1,
|
|
operationModel: [], // 安徽经营模式
|
|
}
|
|
},
|
|
components: {
|
|
ServiceRevenuePie,
|
|
CustomerAnalysis,
|
|
CarAnalysis
|
|
},
|
|
onLoad(option) {
|
|
_self = this
|
|
uni.showLoading({
|
|
title: '正在加载...'
|
|
})
|
|
|
|
if (option.ProvinceCode) {
|
|
// this.nowTab = option.ProvinceCode == 340000 ? 3 : 1
|
|
option.time = this.$util.cutDate(option.time, 'YYYY-MM-DD')
|
|
option.month = this.$util.cutDate(option.time, 'YYYYMM')
|
|
this.searchDate = this.$util.cutDate(option.time, 'MM月DD日')
|
|
this.theRequest = option
|
|
this.initData(option)
|
|
this.getData(option)
|
|
}
|
|
},
|
|
methods: {
|
|
changeTab(value) {
|
|
this.nowTab = value
|
|
if (value == 2) {
|
|
|
|
let opt = this.theRequest
|
|
const params = {
|
|
serverpartId: opt.ServerpartIds,
|
|
pushprovinceCode: opt.ProvinceCode,
|
|
statisticsMonth: this.$util.cutDate(opt.time, 'YYYYMM', -30)
|
|
}
|
|
this.$refs['customerAna'].tabChange(1, params)
|
|
}
|
|
if (value == 4) {
|
|
let opt = this.theRequest
|
|
const params = {
|
|
serverpart_Id: opt.ServerpartIds,
|
|
pushprovinceCode: opt.ProvinceCode,
|
|
StatisticsDate: opt.time
|
|
}
|
|
this.$refs['carAna'].getTopData(params)
|
|
}
|
|
|
|
},
|
|
closePop() {
|
|
this.showUnUpLoad = false
|
|
},
|
|
|
|
bindDateChange(e) {
|
|
let values = e.detail.value
|
|
let selectT = new Date(e.detail.value)
|
|
this.unUploadList = []
|
|
if (selectT <= new Date(this.lastDay)) {
|
|
let opt = this.theRequest
|
|
opt.time = values
|
|
opt.month = this.$util.cutDate(opt.time, 'YYYYMM')
|
|
this.searchDate = this.$util.cutDate(values, 'MM月DD日')
|
|
this.changeTab(this.nowTab)
|
|
uni.showLoading({
|
|
title: '正在加载'
|
|
})
|
|
this.initData(opt)
|
|
this.getData(opt)
|
|
this.$forceUpdate()
|
|
} else {
|
|
uni.showToast({
|
|
title: '请选择有效日期',
|
|
icon: 'none',
|
|
})
|
|
}
|
|
},
|
|
|
|
showFixed(options) {
|
|
|
|
this.scrollTop = options.scrollTop
|
|
|
|
let selfHeight = uni.upx2px(396)
|
|
|
|
if (options.scrollTop > selfHeight) {
|
|
if (this.fixedY !== 0) {
|
|
// console.log( 0)
|
|
this.fixedY = 0
|
|
this.opacity = 1
|
|
this.$forceUpdate()
|
|
}
|
|
} else {
|
|
if (this.fixedY !== -selfHeight) {
|
|
this.fixedY = 0 - selfHeight
|
|
this.opacity = 0
|
|
this.$forceUpdate()
|
|
}
|
|
}
|
|
|
|
},
|
|
toBrandPage(item, index) {
|
|
let theRequest = this.theRequest
|
|
let nowShop = this.nowShop
|
|
|
|
let btid = this.cateBrandList[nowShop].Business_Trade
|
|
|
|
let pages =
|
|
`/pages/everdayRenven/serviceDetail?bid=${item.Brand_Id}&shopid=${item.ServerpartShop_Id}&id=${theRequest.ServerpartIds}&time=${theRequest.time}&provinceId=${theRequest.ProvinceCode}&btid=${item.Business_Trade}`
|
|
this.$util.toNextRoute('navigateTo', pages)
|
|
},
|
|
async selectCate(index) {
|
|
|
|
if (index == this.nowShop) return
|
|
this.nowShop = index
|
|
this.showAll = false
|
|
let leftWidthSum = 0;
|
|
for (var i = 0; i <= index; i++) {
|
|
let nowElement = await this.getWidth('tabNum' + i)
|
|
leftWidthSum = leftWidthSum + nowElement.width
|
|
}
|
|
let winWidth = uni.getSystemInfoSync().windowWidth
|
|
winWidth = (winWidth - 60) / 1.5
|
|
this.scrollLeft = leftWidthSum > winWidth ? (leftWidthSum - winWidth) : 0
|
|
|
|
this.$forceUpdate()
|
|
},
|
|
getWidth(id) { //得到元素的宽高
|
|
return new Promise((res, rej) => {
|
|
uni.createSelectorQuery().select("#" + id).fields({
|
|
size: true,
|
|
scrollOffset: true
|
|
}, (data) => {
|
|
res(data)
|
|
// console.log(data)
|
|
}).exec()
|
|
})
|
|
},
|
|
operationFn() { //昨日营收占比
|
|
let _this = this;
|
|
|
|
// 业态营收占比
|
|
let colors1 = ['#FFAC37', '#d8ece9', '#e0e3f7', '#f7f5f6', '#b2b7e3'];
|
|
let list = []
|
|
let list2 = []
|
|
_this.pageData.listBusinessModel.map((m, i) => {
|
|
if (m.Revenue_Amount != 0) {
|
|
let n = {
|
|
name: m.Bussiness_Name,
|
|
data: m.Revenue_Amount
|
|
}
|
|
let n2 = {
|
|
name: m.Bussiness_Name,
|
|
value: m.Revenue_Amount
|
|
}
|
|
list2.push(n2)
|
|
n.textColor = '#D1D1D1'
|
|
|
|
n.textSize = uni.upx2px(26)
|
|
n.format = function(arg) {
|
|
return [n.name, (arg * 100).toFixed(2) + '%']
|
|
}
|
|
list.push(n)
|
|
}
|
|
|
|
})
|
|
if (list2.length > 0) {
|
|
_this.ServiceRevenueData.push(list2)
|
|
_this.sellData = list
|
|
|
|
}
|
|
if (_this.pageData.listCurBusinessModel && _this.pageData.listCurBusinessModel.length > 0) {
|
|
let list = []
|
|
_this.pageData.listCurBusinessModel.map(m => {
|
|
if (m.Revenue_Amount != 0) {
|
|
let n = {
|
|
name: m.Bussiness_Name,
|
|
value: m.Revenue_Amount
|
|
}
|
|
list.push(n)
|
|
}
|
|
})
|
|
_this.ServiceRevenueData.push(list)
|
|
}
|
|
if (list.length > 0) {
|
|
_this.showPie({
|
|
id: 'sellCate',
|
|
data: list,
|
|
colors: colors1,
|
|
});
|
|
|
|
}
|
|
},
|
|
operationBusniess(arr, data) { // 生成业态营收占比数据
|
|
var _data1 = [];
|
|
var _data2 = [];
|
|
let _this = this
|
|
arr.forEach((n, i) => {
|
|
if (data[n[0]] > 0) {
|
|
let num = Number(data[n[0]])
|
|
_data1.push({
|
|
name: n[1],
|
|
textColor: '#999',
|
|
data: data[n[0]], //+Number(data2[n[0]])
|
|
format: function(arg) {
|
|
|
|
return [n[1], (arg * 100).toFixed(2) + '%']
|
|
}
|
|
});
|
|
}
|
|
});
|
|
_data1.sort(function(a, b) {
|
|
return b.data - a.data
|
|
})
|
|
|
|
return _data1;
|
|
},
|
|
showPie(obj) {
|
|
let data = {
|
|
series: []
|
|
}
|
|
data.series = data.series.concat(obj.data)
|
|
rincanvas[obj.id] = new uCharts({
|
|
$this: _self,
|
|
canvasId: obj.id,
|
|
colors: obj.colors,
|
|
type: 'ring',
|
|
padding: obj.id != 'modelCount' ? [15, 15, 25, 0] : '',
|
|
legend: {
|
|
show: false,
|
|
},
|
|
title: {
|
|
name: data.series[0].name,
|
|
fontSize: uni.upx2px(26),
|
|
color: '#666666',
|
|
// offsetY: uni.upx2px(-16),
|
|
},
|
|
animation: false,
|
|
subtitle: {
|
|
name: '¥' + this.$util.fmoney(data.series[0].data, 2),
|
|
color: '#666666',
|
|
fontSize: uni.upx2px(30),
|
|
offsetX: uni.upx2px(16),
|
|
},
|
|
fontSize: 12,
|
|
background: '#FFFFFF',
|
|
pixelRatio: 1,
|
|
series: data.series,
|
|
animation: true,
|
|
width: obj.id != 'modelCount' ? uni.upx2px(720) : uni.upx2px(666),
|
|
height: obj.id != 'modelCount' ? uni.upx2px(586) : uni.upx2px(480),
|
|
dataLabel: true,
|
|
disablePieStroke: true,
|
|
dataPointShape: false,
|
|
extra: {
|
|
pie: {
|
|
ringWidth: obj.id != 'modelCount' ? uni.upx2px(90) : 40,
|
|
labelWidth: uni.upx2px(40),
|
|
activeOpacity: 1,
|
|
activeRadius: 10
|
|
},
|
|
tooltip: {
|
|
showBox: false,
|
|
bgColor: '#000',
|
|
bgOpacity: 0.4,
|
|
}
|
|
},
|
|
});
|
|
|
|
},
|
|
touchPie(e, id, opt) {
|
|
|
|
let touches = null
|
|
if (id == "modelCount" && e.currentTarget.offsetTop < 100) {
|
|
e.currentTarget.offsetTop = e.currentTarget.offsetTop + uni.upx2px(620)
|
|
}
|
|
let index = rincanvas[id].getCurrentDataIndex(e)
|
|
if (index == -1) return
|
|
let item = id != "modelCount" ? this.sellData[index] : this.operationModel[index]
|
|
if (id != "modelCount") {
|
|
this.sellData.map(n => {
|
|
n.textColor = "#d1d1d1"
|
|
})
|
|
item.textColor = "#999"
|
|
this.nowShop = index + 1
|
|
|
|
}
|
|
let showData = {
|
|
title: {
|
|
name: item.name,
|
|
fontSize: uni.upx2px(26),
|
|
color: '#666666',
|
|
offsetY: uni.upx2px(-16),
|
|
},
|
|
series: id != "modelCount" ? this.sellData : this.operationModel,
|
|
animation: false,
|
|
subtitle: {
|
|
name: '￥' + this.$util.fmoney(item.data, 2),
|
|
color: '#666666',
|
|
fontSize: uni.upx2px(30),
|
|
offsetY: uni.upx2px(-16),
|
|
},
|
|
}
|
|
rincanvas[id].updateData(showData);
|
|
rincanvas[id].showToolTip(e);
|
|
},
|
|
showPop() {
|
|
let list = this.unUploadList
|
|
if (list.length || this.todayUpList.length) {
|
|
this.showUnUpLoad = true
|
|
this.$forceUpdate()
|
|
}
|
|
},
|
|
getData(theRequest) {
|
|
let _this = this
|
|
this.$request.$webGet('CommercialApi/Revenue/GetServerpartBrand', {
|
|
Serverpart_Id: theRequest.ServerpartIds,
|
|
statictics_Time: theRequest.time,
|
|
pushProvinceCode: theRequest.ProvinceCode
|
|
}).then(res => {
|
|
|
|
if (res.Result_Code != 100) return
|
|
|
|
_this.pageData = res.Result_Data
|
|
if (res.Result_Data.listBusinessModel) {
|
|
let list = JSON.parse(JSON.stringify(res.Result_Data.listBusinessModel))
|
|
if (list.length > 0) {
|
|
|
|
let all = {
|
|
Bussiness_Name: '全部',
|
|
|
|
listBrandModel: []
|
|
}
|
|
list.map(n => {
|
|
all.listBrandModel.push(...n.listBrandModel)
|
|
})
|
|
all.listBrandModel.sort((a, b) => {
|
|
if (a.Revenue_Amount < b.Revenue_Amount) {
|
|
return 1
|
|
} else {
|
|
return -1
|
|
}
|
|
})
|
|
_this.cateBrandList = [all, ...list]
|
|
_this.operationFn()
|
|
return
|
|
}
|
|
return
|
|
}
|
|
_this.cateBrandList = []
|
|
|
|
})
|
|
|
|
},
|
|
// 获取头部卡片 展示信息
|
|
|
|
async initData(theRequest) {
|
|
let _this = this
|
|
const [totalData, busniessTypePie, busniessTradePie, busniessTradeFathPie] =
|
|
await anhuiYestodayRevenueData.getData(theRequest, true)
|
|
|
|
|
|
totalData.tickave = totalData.ticketCount > 0 ? this.$util.fmoney(totalData.cashPay / totalData
|
|
.ticketCount, 2) : 0
|
|
totalData.countave = totalData.totalCount > 0 ? this.$util.fmoney(totalData.cashPay / totalData
|
|
.totalCount, 2) : 0
|
|
|
|
totalData.totalMoneyShow = this.$util.fmoney(totalData.cashPay)
|
|
// totalData.dayOfShow = this.$util.cutDate(theRequest.time, 'MM月DD日')
|
|
totalData.budgetamoutShow = totalData.budgetAmount ? _this.$util.fmoney(totalData.budgetAmount) : 0.00
|
|
totalData.diffBudgetTotal = Math.abs(totalData.budgetAmount - totalData.cashPay)
|
|
totalData.diffBili = totalData.budgetAmount > 0 ? this.$util.fmoney((headMsg.diffBudgetTotal /
|
|
totalData.budgetAmount) * 100, 2) : '100'
|
|
|
|
this.sMsg = totalData
|
|
// 饼图分析及数据条形分析
|
|
const [progressList, pieList] = this.getProgressData(busniessTypePie, totalData.cashPay)
|
|
|
|
this.operationModel = progressList
|
|
// 经营类型分析
|
|
var colors1 = ['#FFAC37', '#6B75B8'];
|
|
this.showPie({
|
|
id: 'modelCount',
|
|
data: pieList,
|
|
colors: colors1,
|
|
});
|
|
// 经营业态
|
|
// this.ServiceRevenueData = []
|
|
this.ServiceRevenueData = [busniessTradeFathPie, busniessTradePie]
|
|
if (totalData.uploadCount !== totalData.totalUploadCount) {
|
|
this.getUnUpLoadShops(theRequest)
|
|
|
|
}
|
|
this.showPage = true
|
|
uni.hideLoading()
|
|
},
|
|
getProgressData(data, total) {
|
|
var _data1 = [];
|
|
var _data2 = [];
|
|
let _this = this
|
|
data.forEach((n, i) => {
|
|
_data1.push({
|
|
...n,
|
|
textColor: '#999',
|
|
format: function(arg) {
|
|
return [n.name, (arg * 100).toFixed(2) + '%']
|
|
}
|
|
});
|
|
|
|
_data2.push({
|
|
name: n.name,
|
|
num: n.data,
|
|
data: _this.$util.fmoney(n.data, 2), //+Number(data2[n[0]])
|
|
bili: _this.$util.fmoney((n.data / total) * 100, 2)
|
|
});
|
|
|
|
});
|
|
_data1.sort(function(a, b) {
|
|
return b.data - a.data
|
|
})
|
|
_data2.sort(function(a, b) {
|
|
return b.num - a.num
|
|
})
|
|
return [_data2, _data1];
|
|
},
|
|
getUnUpLoadShops(theRequest) {
|
|
let _this = this
|
|
_this.$request.$webGet('CommercialApi/Revenue/GetUnUpLoadShops', {
|
|
Statistics_Date: theRequest.time,
|
|
pushProvinceCode: theRequest.ProvinceCode,
|
|
Serverpart_ID: theRequest.ServerpartIds
|
|
}).then(res => {
|
|
//
|
|
if (res.Result_Code != 100) {
|
|
return false
|
|
}
|
|
let _data = res.Result_Data
|
|
_this.unUploadList = _data.List
|
|
|
|
|
|
})
|
|
},
|
|
|
|
},
|
|
onPageScroll(e) {
|
|
this.showFixed(e)
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-body {
|
|
background-color: #fff;
|
|
padding-bottom: 20rpx;
|
|
box-sizing: border-box;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.mt8 {
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
cover-view.page-title {
|
|
color: #fff;
|
|
}
|
|
|
|
.page-title {
|
|
background-color: #fcfcfc;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 110rpx;
|
|
padding: 0 24rpx;
|
|
justify-content: space-between;
|
|
|
|
color: #000;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.page-title text:last-child {
|
|
color: #383838;
|
|
}
|
|
|
|
.fixed-box {
|
|
background-color: #686D8F;
|
|
/* background: linear-gradient(to right, #686D8F, #A1ACC6); */
|
|
transition: all .2s;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 999;
|
|
box-sizing: border-box;
|
|
color: #fff;
|
|
}
|
|
|
|
/* 业态 */
|
|
.operation-cate-content {
|
|
height: 585rpx;
|
|
width: 690rpx;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.operation-model-content {
|
|
height: 480rpx;
|
|
width: 690rpx;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* 门店 */
|
|
.shop-box {
|
|
margin: 32rpx 20rpx;
|
|
border-radius: 8rpx;
|
|
background-color: #F6F8FA;
|
|
padding: 36rpx 20rpx;
|
|
|
|
}
|
|
|
|
.tab-shop {
|
|
|
|
color: #999999;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tab-shop .cate-name {
|
|
padding-right: 16rpx;
|
|
font-size: 26rpx;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.tab-shop .cate-name+.cate-name::before {
|
|
content: '|';
|
|
color: #eeeeee;
|
|
padding-right: 16rpx;
|
|
}
|
|
|
|
.tab-shop .cate-name.active {
|
|
color: #000;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
|
|
}
|
|
|
|
.tab-content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 24rpx;
|
|
transition: all 0.5s cubic-bezier(0, 1, 0.5, 1);
|
|
margin: 24rpx auto 0 auto;
|
|
overflow: hidden;
|
|
height: inherit;
|
|
width: inherit;
|
|
}
|
|
|
|
.pie-content {
|
|
margin: 0 30rpx;
|
|
border-radius: 12rpx;
|
|
box-shadow: 0 2rpx 10rpx 0 rgba(230, 230, 230, 0.49);
|
|
background-color: #fff;
|
|
position: relative;
|
|
margin-bottom: 48rpx;
|
|
padding-top: 32rpx;
|
|
padding-bottom: 30rpx;
|
|
}
|
|
|
|
.pie-title {
|
|
padding: 0 20rpx;
|
|
line-height: 80rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
/* 门店卡片 */
|
|
.shop-card {
|
|
width: 210rpx;
|
|
height: 227rpx;
|
|
border-radius: 8rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
padding-top: 20rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
.shop-card:nth-child(6n-5) {
|
|
background: url(/static/images/revenue/shop-card.png) no-repeat center 50%, linear-gradient(-35deg, #ed7c77, #d6524c);
|
|
background-size: contain;
|
|
}
|
|
|
|
.shop-card:nth-child(6n-4) {
|
|
background: url(/static/images/revenue/shop-card.png) no-repeat center 50%, linear-gradient(-35deg, #d1bea8, #ba9d7b);
|
|
margin-left: 18rpx;
|
|
background-size: contain;
|
|
}
|
|
|
|
.shop-card:nth-child(6n-3) {
|
|
background: url(/static/images/revenue/shop-card.png) no-repeat center 50%, linear-gradient(-35deg, #929cc0, #aab3d0);
|
|
margin-left: 18rpx;
|
|
background-size: contain;
|
|
}
|
|
|
|
.shop-card:nth-child(6n-2) {
|
|
background: url(/static/images/revenue/shop-card.png) no-repeat center 50%, linear-gradient(-35deg, #779cb1, #a3bbc9);
|
|
background-size: contain;
|
|
margin-left: 0rpx;
|
|
}
|
|
|
|
.shop-card:nth-child(6n-1) {
|
|
background: url(/static/images/revenue/shop-card.png) no-repeat center 50%, linear-gradient(-35deg, #c08d80, #e8cbc7);
|
|
margin-left: 18rpx;
|
|
background-size: contain;
|
|
}
|
|
|
|
.shop-card:nth-child(6n) {
|
|
background: url(/static/images/revenue/shop-card.png) no-repeat center 50%, linear-gradient(-35deg, #5cbe9c, #95d5bf);
|
|
margin-left: 18rpx;
|
|
background-size: contain;
|
|
margin-left: 18rpx;
|
|
}
|
|
|
|
.shop-card .shop-name {
|
|
font-size: 24rpx;
|
|
text-shadow: 0 2rpx 2rpx #A9a5a0;
|
|
line-height: 1.4;
|
|
max-height: 62rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.shop-card image {
|
|
border-radius: 50%;
|
|
border: 2rpx solid #fff;
|
|
background-color: #FFFFFF;
|
|
width: 62rpx;
|
|
height: 62rpx;
|
|
}
|
|
|
|
.shop-card .price-num {
|
|
|
|
font-size: 38rpx;
|
|
font-family: Bahnschrift Regular;
|
|
}
|
|
|
|
.box-card {
|
|
padding: 24upx 24upx 0;
|
|
background-color: #fff;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
transition: all .2s;
|
|
background: url(../../static/images/effective/bg-top.png) no-repeat center;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: top center;
|
|
|
|
}
|
|
|
|
.top-card {
|
|
background: linear-gradient(to top, #989fb9, #686d8f);
|
|
margin-top: 24upx;
|
|
padding: 32upx 0 32rpx 0;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.budgetamount {
|
|
margin-left: 14rpx;
|
|
color: #fff;
|
|
font-family: 'Bahnschrift Regular';
|
|
}
|
|
|
|
.budget-title {
|
|
color: #DEE1F1;
|
|
padding: 4rpx 6rpx 2rpx 6rpx;
|
|
border-radius: 2rpx;
|
|
margin-right: 4rpx;
|
|
}
|
|
|
|
.up-text-title,
|
|
.down-text-title {
|
|
font-size: 32rpx;
|
|
font-family: 'Bahnschrift Regular';
|
|
/* line-height: 1.2; */
|
|
}
|
|
|
|
.up-text-title:after {
|
|
content: "";
|
|
margin-left: 6rpx;
|
|
width: 16rpx;
|
|
height: 18rpx;
|
|
display: inline-block;
|
|
background: url('/static/images/revenue/up-arrow.png') no-repeat center;
|
|
background-size: contain;
|
|
|
|
}
|
|
|
|
.down-text-title:after {
|
|
content: "";
|
|
margin-left: 6rpx;
|
|
width: 16rpx;
|
|
height: 18rpx;
|
|
display: inline-block;
|
|
background: url('/static/images/revenue/down-arrow.png') no-repeat center;
|
|
background-size: contain;
|
|
|
|
}
|
|
|
|
.box-top-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.title-clock {
|
|
color: #999;
|
|
font-size: 24upx;
|
|
text-align: right;
|
|
}
|
|
|
|
/*
|
|
.more-btn,.weisc-ico {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 8upx;
|
|
color: #dd7575;
|
|
font-size: 30upx;
|
|
} */
|
|
.more-btn:after {
|
|
content: '';
|
|
display: inline-block;
|
|
margin-left: 8upx;
|
|
width: 10upx;
|
|
height: 20upx;
|
|
background: url(../../static/images/effective/sj.png) no-repeat center;
|
|
background-size: contain;
|
|
}
|
|
|
|
.box-center-title {
|
|
font-size: 24upx;
|
|
color: #010101;
|
|
border-radius: 24upx;
|
|
padding: 0 16upx;
|
|
background-color: #DEDEDE;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.uni-icon-arrowdown {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.box-center-box {
|
|
/* margin-bottom: 16rpx; */
|
|
padding: 0 24rpx;
|
|
}
|
|
|
|
.center-title {
|
|
color: #DEDEDE;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.center-num {
|
|
font-size: 64rpx;
|
|
color: #fff;
|
|
font-family: Bahnschrift Regular;
|
|
}
|
|
|
|
.check-unit,
|
|
.budgetamount {
|
|
font-size: 24rpx;
|
|
color: #DEE1F1;
|
|
text-align: center;
|
|
}
|
|
|
|
.main-amount-title {
|
|
|
|
color: #DEE1F1;
|
|
font-size: 24rpx;
|
|
/* flex: 1; */
|
|
}
|
|
|
|
.tab-unit {
|
|
background-color: #3A3E5B;
|
|
border-radius: 24rpx 0 0 24rpx;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
position: relative;
|
|
right: -12px;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.check-price-color {
|
|
color: #fff;
|
|
font-size: 34rpx;
|
|
font-family: Bahnschrift Regular;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.check-price-color text {
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.tab-icon2 {
|
|
font-size: 26rpx;
|
|
color: #DEDEDE;
|
|
flex: 1;
|
|
}
|
|
|
|
.tab-unit-num {
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.tab-unit-num+.tab-unit-num:before {
|
|
content: '/';
|
|
margin: 0 4rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.priceGreen,
|
|
.priceGreen.tab-unit-num {
|
|
color: #7CB9A5;
|
|
/* font-size: 28rpx; */
|
|
}
|
|
|
|
.priceRed,
|
|
.tab-unit-num.priceRed {
|
|
color: #DD7575;
|
|
/* font-size: 28rpx; */
|
|
}
|
|
|
|
/* 弹出内容 */
|
|
.uni-mask {
|
|
position: absolute;
|
|
z-index: 998;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background: #000;
|
|
height: calc(100vh);
|
|
width: 750rpx;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.uni-popup {
|
|
position: fixed;
|
|
z-index: 999;
|
|
background: #ffffff;
|
|
box-shadow: 0 0 30upx rgba(0, 0, 0, .1);
|
|
}
|
|
|
|
.uni-popup-middle {
|
|
/* overflow: hidden; */
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-width: 400upx;
|
|
min-height: 400upx;
|
|
border-radius: 16upx;
|
|
top: 30%;
|
|
left: 50%;
|
|
transform: translate(-50%, -20%);
|
|
justify-content: flex-start;
|
|
padding: 0 30upx 30upx 30upx;
|
|
}
|
|
|
|
.header-top {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
text-align: left;
|
|
width: 100%;
|
|
padding: 32rpx 0;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.pop-body {
|
|
width: 600rpx;
|
|
max-height: 600rpx;
|
|
overflow-y: auto;
|
|
background-color: #fff;
|
|
padding-bottom: 8rpx;
|
|
}
|
|
|
|
.pop-row {
|
|
padding: 24rpx 10rpx 24rpx 0;
|
|
font-size: 24rpx;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
}
|
|
|
|
.pop-row .pop-row-bottom {
|
|
|
|
position: absolute;
|
|
height: 2rpx;
|
|
width: 100%;
|
|
background-color: #efefef;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.pop-index {
|
|
color: #DF7F42;
|
|
border: 1rpx solid #DF7F42;
|
|
border-radius: 8rpx;
|
|
padding: 2rpx 12rpx 0 12rpx;
|
|
margin-right: 12rpx;
|
|
font-size: 24rpx;
|
|
line-height: 30rpx;
|
|
height: 30rpx;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* .customer-title {
|
|
color: #525280;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
background: url(../../static/images/revenue/customer-bg.png) no-repeat center;
|
|
background-size: contain;
|
|
border-radius: 12rpx;
|
|
margin-top: 24rpx;
|
|
height: 104rpx;
|
|
line-height: 104rpx;
|
|
padding: 0 32rpx;
|
|
font-family: 'FZZhengHeiS-DB-GB Regular', 'FZZhengHeiS-DB-GB Regular-Regular';
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
} */
|
|
.uni-icon-arrowright {
|
|
border: 1rpx solid #606060;
|
|
border-radius: 50%;
|
|
color: #606060;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.analysis-tabs {
|
|
margin: 24rpx auto;
|
|
width: 708rpx;
|
|
overflow: hidden;
|
|
/* color: #777777; */
|
|
border: 1rpx solid #647bd1;
|
|
border-radius: 39rpx;
|
|
display: flex;
|
|
}
|
|
|
|
.tab {
|
|
text-align: center;
|
|
flex: 1;
|
|
height: 76rpx;
|
|
line-height: 76rpx;
|
|
}
|
|
|
|
.tab.active {
|
|
background: #f2f4f9;
|
|
color: #647BD1;
|
|
}
|
|
|
|
// 经营模式占比
|
|
.model-busniess {
|
|
margin: 12rpx 30rpx;
|
|
font-family: 'Bahnschrift Regular';
|
|
|
|
}
|
|
|
|
.model-busniess view {
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.model-busniess .progress-content {
|
|
width: 100%;
|
|
height: 28rpx;
|
|
border-radius: 2rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 30rpx;
|
|
margin-bottom: 4rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.model-busniess .progress-left {
|
|
background-color: #667ED5;
|
|
}
|
|
.model-busniess .progress-right {
|
|
background-color: #F3AF50;
|
|
}
|
|
</style>
|