1360 lines
35 KiB
Vue
1360 lines
35 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.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) {
|
||
console.log(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.formatter = function (arg) {
|
||
if (typeof arg === "number") {
|
||
return [n.name, (arg * 100).toFixed(2) + "%"];
|
||
} else {
|
||
return [arg.name, (arg._proportion_ * 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]])
|
||
formatter: function (arg) {
|
||
if (typeof arg === "number") {
|
||
return [n[1], (arg * 100).toFixed(2) + "%"];
|
||
} else {
|
||
return [arg.name, (arg._proportion_ * 100).toFixed(2) + "%"];
|
||
}
|
||
// return [n[1], (arg * 100).toFixed(2) + '%']
|
||
},
|
||
});
|
||
}
|
||
});
|
||
_data1.sort(function (a, b) {
|
||
return b.data - a.data;
|
||
});
|
||
|
||
return _data1;
|
||
},
|
||
showPie(obj) {
|
||
let data = {
|
||
series: [],
|
||
};
|
||
const ctx = uni.createCanvasContext(obj.id, this);
|
||
data.series = data.series.concat(obj.data);
|
||
rincanvas[obj.id] = new uCharts({
|
||
// $this: _self,
|
||
// canvasId: obj.id,
|
||
context: ctx,
|
||
color: 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: {
|
||
ring: {
|
||
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) => {
|
||
console.log("GetServerpartBrand", 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)
|
||
);
|
||
console.log("list", list);
|
||
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.0;
|
||
totalData.diffBudgetTotal = Math.abs(
|
||
totalData.budgetAmount - totalData.cashPay
|
||
);
|
||
totalData.diffBili =
|
||
totalData.budgetAmount > 0
|
||
? this.$util.fmoney(
|
||
(totalData.diffBudgetTotal / totalData.budgetAmount) * 100,
|
||
2
|
||
)
|
||
: "100";
|
||
|
||
this.sMsg = totalData;
|
||
// 饼图分析及数据条形分析
|
||
const [progressList, pieList] = this.getProgressData(
|
||
busniessTypePie,
|
||
totalData.cashPay
|
||
);
|
||
console.log("progressList", progressList);
|
||
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",
|
||
formatter: function (arg) {
|
||
if (typeof arg === "number") {
|
||
return [n.name, (arg * 100).toFixed(2) + "%"];
|
||
} else {
|
||
return [arg.name, (arg._proportion_ * 100).toFixed(2) + "%"];
|
||
}
|
||
},
|
||
});
|
||
console.log("n", n);
|
||
_data2.push({
|
||
name: n.name,
|
||
num: n.data,
|
||
data: _this.$util.fmoney(n.data, 2), //+Number(data2[n[0]])
|
||
bili: total > 0 ? _this.$util.fmoney((n.data / total) * 100, 2) : 0,
|
||
});
|
||
});
|
||
_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 0.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 0.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, 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>
|