1730 lines
43 KiB
Vue
1730 lines
43 KiB
Vue
<template>
|
|
<div>
|
|
<view class="page-body" v-if="showPage">
|
|
<AnhHead
|
|
:today="today"
|
|
:headMsg="headMsg"
|
|
:lastDay="lastDay"
|
|
:groupType="theRequest && theRequest.GroupType"
|
|
:provinceCode="theRequest && theRequest.ProvinceCode"
|
|
@bindDateChange="bindDateChange"
|
|
:isup="isup"
|
|
:nowDay="nowDay"
|
|
:selectDate="theRequest && theRequest.time"
|
|
@toggle="toggleCard"
|
|
></AnhHead>
|
|
<!--营收占比的上面组件 -->
|
|
<view style="background-color: #fff">
|
|
<!--安徽省 昨日营收占比 -->
|
|
<div v-if="theRequest && theRequest.GroupType != 1010">
|
|
<div class="uni-inline-item modle-title">
|
|
<image
|
|
:src="
|
|
theRequest.ProvinceCode == 530000
|
|
? '/static/images/revenue/type-operation530000.svg'
|
|
: '/static/images/revenue/type-operation.png'
|
|
"
|
|
mode="aspectFit"
|
|
></image>
|
|
<text class="strong-text">营收占比</text>
|
|
</div>
|
|
<view class="box-operation">
|
|
<div class="operation-tab-box">
|
|
<div
|
|
class="operation-tab-unit"
|
|
@tap="selectTab('nowTab', 1)"
|
|
v-if="theRequest.ProvinceCode == 340000"
|
|
:class="{ active: nowTab == 1 }"
|
|
>
|
|
经营模式
|
|
</div>
|
|
<div
|
|
class="operation-tab-unit"
|
|
@tap="selectTab('nowTab', 2)"
|
|
:class="{ active: nowTab == 2 }"
|
|
>
|
|
经营业态
|
|
</div>
|
|
<div
|
|
class="operation-tab-unit"
|
|
@tap="selectTab('nowTab', 3)"
|
|
v-if="areaProgress && areaProgress.length > 0"
|
|
:class="{ active: nowTab == 3 }"
|
|
>
|
|
区域营收
|
|
</div>
|
|
<div
|
|
class="operation-tab-unit"
|
|
@tap="selectTab('nowTab', 4)"
|
|
v-if="
|
|
theRequest.ProvinceCode == 340000 &&
|
|
theRequest.GroupType == 1000
|
|
"
|
|
:class="{ active: nowTab == 4 }"
|
|
>
|
|
车流分析
|
|
</div>
|
|
</div>
|
|
<div class="operation-content-box">
|
|
<div
|
|
v-show="nowTab == 1"
|
|
v-if="
|
|
modelProgress &&
|
|
modelProgress.length > 0 &&
|
|
theRequest.ProvinceCode == 340000
|
|
"
|
|
>
|
|
<canvas
|
|
canvas-id="modelCont"
|
|
id="modelCont"
|
|
class="operation-content"
|
|
@touchstart="touchPie($event, 'modelCont')"
|
|
></canvas>
|
|
<div>
|
|
<div
|
|
class="operation-c-list"
|
|
v-for="(item, o) in modelProgress"
|
|
:key="o"
|
|
>
|
|
<div class="operation-cl-unit">
|
|
<text>{{ item.name }} {{ item.bili }}%</text>
|
|
<text>{{ item.data }}元</text>
|
|
</div>
|
|
<div class="progress">
|
|
<div
|
|
class="bgO"
|
|
:style="{ width: item.bili + '%' }"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-show="nowTab == 2"
|
|
v-if="regionProgress && regionProgress.length > 0"
|
|
>
|
|
<canvas
|
|
canvas-id="businessCont"
|
|
id="businessCont"
|
|
class="operation-content"
|
|
@touchstart="touchPie($event, 'businessCont')"
|
|
></canvas>
|
|
<div>
|
|
<div
|
|
class="operation-c-list"
|
|
v-for="(item, o) in regionProgress"
|
|
:key="o"
|
|
>
|
|
<div class="operation-cl-unit">
|
|
<text>{{ item.name }} {{ item.bili }}%</text>
|
|
<text>{{ item.data }}元</text>
|
|
</div>
|
|
<div class="progress">
|
|
<div
|
|
class="bgO"
|
|
:style="{ width: item.bili + '%' }"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-show="nowTab == 3"
|
|
v-if="areaProgress && areaProgress.length > 0"
|
|
>
|
|
<canvas
|
|
canvas-id="areaCont"
|
|
id="areaCont"
|
|
class="operation-content"
|
|
@touchstart="touchPie($event, 'areaCont')"
|
|
></canvas>
|
|
<div>
|
|
<div
|
|
class="operation-c-list"
|
|
v-for="(item, o) in areaProgress"
|
|
:key="o"
|
|
>
|
|
<div class="operation-cl-unit">
|
|
<text>{{ item.name }} {{ item.bili }}%</text>
|
|
<text>{{ item.data }}元</text>
|
|
</div>
|
|
<div class="progress">
|
|
<div
|
|
class="bgO"
|
|
:style="{ width: item.bili + '%' }"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-show="nowTab == 4"
|
|
v-if="bayonetProgress && bayonetProgress.length > 0"
|
|
>
|
|
<div>
|
|
<div
|
|
class="operation-c-list"
|
|
v-for="(item, o) in bayonetProgress"
|
|
:key="o"
|
|
>
|
|
<div class="operation-cl-unit">
|
|
<text>{{ item.name }}</text>
|
|
</div>
|
|
<div
|
|
style="padding: 10rpx"
|
|
class="bayonet-c-list"
|
|
v-for="(child, o) in item.list"
|
|
:key="o"
|
|
>
|
|
<div class="operation-cl-unit1">
|
|
<text class="server">{{ child.name }}</text>
|
|
<text class="type" style="color: #868686"
|
|
>入区流量/断面流量</text
|
|
>
|
|
<text class="carType" style="color: #868686"
|
|
>大/中/小型车</text
|
|
>
|
|
</div>
|
|
<ul class="bayonet-cell-area">
|
|
<li v-for="(childItem, o) in child.list" :key="o">
|
|
<text class="server"
|
|
>{{ childItem.name }}区:<text style="color: #ef884f"
|
|
>{{ childItem.bili }}%</text
|
|
></text
|
|
>
|
|
<text class="type"
|
|
>{{ childItem.data }}/{{ childItem.flow }}</text
|
|
>
|
|
<text class="carType"
|
|
>{{ childItem.LargeVehicle_Count }}/{{
|
|
childItem.MediumVehicle_Count
|
|
}}/{{ childItem.MinVehicle_Count }}</text
|
|
>
|
|
</li>
|
|
</ul>
|
|
<!-- <div class="progress">
|
|
<div class="bgO" :style="{'width':item.bili+'%'}"></div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
</div>
|
|
|
|
<!-- 昨日日结上传 -->
|
|
<div
|
|
class="uni-inline-item modle-title jc-between"
|
|
v-if="regionList.length > 0"
|
|
>
|
|
<view class="uni-inline-item">
|
|
<image
|
|
src="/static/images/revenue/yestoday-region.png"
|
|
mode="aspectFit"
|
|
></image>
|
|
<text class="strong-text">日结上传</text>
|
|
</view>
|
|
<view style="font-size: 26rpx">
|
|
门店上传
|
|
<span class="upload-count">{{ headMsg.uploadState }}</span>
|
|
</view>
|
|
</div>
|
|
<template
|
|
v-if="theRequest && theRequest.GroupType == 1020 && regionList.length"
|
|
>
|
|
<div
|
|
v-for="(item, i) in regionList[0].child"
|
|
:key="i"
|
|
class="region-cell"
|
|
@tap="toDetail(item)"
|
|
>
|
|
<div class="region-cell-unit">
|
|
<text>{{ item.serverpart_Name }}</text>
|
|
<div class="ct01">
|
|
<text class="strong-text">{{
|
|
$util.fmoney(item.cashpay, 2)
|
|
}}</text>
|
|
<text>元</text>
|
|
</div>
|
|
</div>
|
|
<div class="region-cell-unit">
|
|
<text>上传率</text>
|
|
<div class="ct01">
|
|
<text class="strong-text">{{
|
|
item.totalcount > item.uploadcount
|
|
? $util.fmoney(
|
|
(item.uploadcount / item.totalcount) * 100,
|
|
2
|
|
)
|
|
: 100
|
|
}}</text>
|
|
<text>%</text>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="region-cell-unit"
|
|
:class="{
|
|
'ct-red': item.uploadcount != item.totalcount,
|
|
'weisc-ico': item.uploadcount != item.totalcount,
|
|
}"
|
|
>
|
|
{{ item.uploadcount + "/" + item.totalcount }}
|
|
</div>
|
|
<div class="region-cell-image">
|
|
<text class="uni-icon-arrowright uni-icon"></text>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-else-if="theRequest && theRequest.GroupType == 1000">
|
|
<!-- <div class="region-title" :class="{'active':regionShow1}">省内区域</div> -->
|
|
<div v-show="regionShow1">
|
|
<block v-for="(item, i) in regionList" :key="i">
|
|
<div class="region-cell" @tap="toggleRegion(item)">
|
|
<div class="region-cell-unit">
|
|
<text>{{ item.name }}</text>
|
|
<div class="ct01">
|
|
<text class="strong-text">{{
|
|
$util.fmoney(item.cashpay, 2)
|
|
}}</text>
|
|
<text>元</text>
|
|
</div>
|
|
</div>
|
|
<div class="region-cell-unit">
|
|
<text>上传率</text>
|
|
<div class="ct01">
|
|
<text class="strong-text">{{
|
|
item.totalcount > item.uploadcount
|
|
? $util.fmoney(
|
|
(item.uploadcount / item.totalcount) * 100,
|
|
2
|
|
)
|
|
: "100.00"
|
|
}}</text>
|
|
<text>%</text>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="region-cell-unit"
|
|
:class="{ 'ct-red': item.uploadcount != item.totalcount }"
|
|
>
|
|
{{ item.uploadcount + "/" + item.totalcount }}
|
|
</div>
|
|
<div class="region-cell-image">
|
|
<text
|
|
class="uni-icon-arrowright uni-icon"
|
|
:class="{ active: item.show }"
|
|
></text>
|
|
</div>
|
|
</div>
|
|
<ul class="region-cell-area" v-show="item.show">
|
|
<li
|
|
v-for="(child, index) in item.child"
|
|
:class="{ visited: child.visited }"
|
|
:key="index"
|
|
@tap="toDetail(child)"
|
|
>
|
|
<div>{{ child.serverpart_Name }}</div>
|
|
<div>{{ $util.fmoney(child.cashpay, 2) }}<text>元</text></div>
|
|
<div
|
|
:class="{ 'ct-red': child.uploadcount != child.totalcount }"
|
|
>
|
|
{{ child.uploadcount + "/" + child.totalcount }}
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</block>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<shopCell
|
|
v-for="(item, i) in regionList"
|
|
:key="i"
|
|
:item="item"
|
|
@toggleShow="toggleShow"
|
|
:i="i"
|
|
/>
|
|
</template>
|
|
</view>
|
|
<template v-if="theRequest && theRequest.ProvinceCode == 620000">
|
|
<div class="uni-inline-item modle-title">
|
|
<image
|
|
src="/static/images/revenue/product-ranking.png"
|
|
mode="aspectFit"
|
|
></image>
|
|
<text class="strong-text">商品销售排行</text>
|
|
</div>
|
|
<RankContent
|
|
:wechatPushSalesList="wechatPushSalesList"
|
|
v-if="!isLoading"
|
|
></RankContent>
|
|
</template>
|
|
</view>
|
|
<div v-if="!showPage && !isLoading">
|
|
<noFound
|
|
:nodata="!showPage && !isLoading"
|
|
:text="'您暂无' + lastDay + '营收数据'"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from "vuex";
|
|
import uCharts from "@/components/u-charts.js";
|
|
import shopCell from "./components/listUnit.vue";
|
|
import AnhHead from "./components/anhHead.vue";
|
|
import RankContent from "./components/RankContent.vue";
|
|
import anhuiYestodayRevenueData from "./components/anhuiYestodayRevenueData.js";
|
|
var rincanvas = {};
|
|
|
|
export default {
|
|
data() {
|
|
const lastDay = this.$util.cutDate(new Date(), "YYYY-MM-DD", -1);
|
|
|
|
const nowDay = this.$util.cutDate(new Date(), "MM月DD日");
|
|
|
|
return {
|
|
showPage: false,
|
|
opacity: 0, // 背景颜色透明度
|
|
customBarH: this.CustomBar,
|
|
statusBarH: this.StatusBar,
|
|
isLoading: true,
|
|
theRequest: null,
|
|
sevenDate: null,
|
|
lastDay: lastDay, // 该页面的最近有效日期
|
|
nowDay: nowDay,
|
|
headMsg: null,
|
|
today: null, // 今日数据
|
|
regionList: null,
|
|
nowTab: 1,
|
|
regionShow1: true,
|
|
regionProgress: null,
|
|
tradeType: null,
|
|
areaProgress: null,
|
|
bayonetProgress: null,
|
|
modelProgress: null,
|
|
isup: true,
|
|
wechatPushSalesList: null, // 甘肃单品排行数据
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
PushAuthority: (state) => state.userData.PushAuthority,
|
|
ProvinceCode: (state) => state.userData.ProvinceCode,
|
|
}),
|
|
hasSeverpartIndexAuthority() {
|
|
let theRequest = this.theRequest;
|
|
if (this.theRequest && theRequest.ProvinceCode && this.PushAuthority) {
|
|
return this.PushAuthority.some(
|
|
(n) =>
|
|
n.ProvinceCode == theRequest.ProvinceCode && n.ShopAnalysisType == 1
|
|
);
|
|
}
|
|
return false;
|
|
},
|
|
},
|
|
components: {
|
|
shopCell,
|
|
AnhHead,
|
|
RankContent,
|
|
},
|
|
methods: {
|
|
toggleCard(isup) {
|
|
this.isup = !isup;
|
|
this.$forceUpdate();
|
|
},
|
|
bindDateChange(e) {
|
|
// 切换日期 加载选中日期的营收数据
|
|
// let nowDate = this.theRequest.time
|
|
let selectT = new Date(e.detail.value);
|
|
if (selectT <= new Date(this.lastDay)) {
|
|
this.theRequest.time = e.detail.value;
|
|
this.theRequest.month = this.$util.cutDate(e.detail.value, "YYYYMM");
|
|
this.sevenDate = [
|
|
this.$util.cutDate(selectT, "MM.DD", -13),
|
|
this.$util.cutDate(selectT, "MM.DD", -7),
|
|
];
|
|
uni.showLoading({
|
|
title: "正在加载...",
|
|
mask: true,
|
|
});
|
|
this.initData();
|
|
// this.getTender()
|
|
this.todayAmount();
|
|
this.$forceUpdate();
|
|
}
|
|
},
|
|
toDetail(item, provinceId) {
|
|
// 如果当前页面至存在一个初始化的省份编码 则不需要传入参数provinceId
|
|
let date = this.theRequest.time;
|
|
let pcode = provinceId || this.theRequest.ProvinceCode;
|
|
|
|
let severpartIndexPath =
|
|
"/pages/everdayRenven/AnhuiServerpart?ServerpartIds=" +
|
|
item.serverpart_Id +
|
|
"&time=" +
|
|
date +
|
|
"&ProvinceCode=" +
|
|
pcode;
|
|
let serverpartUploadPath =
|
|
"/pages/everdayRenven/detail?id=" +
|
|
item.serverpart_Id +
|
|
"&time=" +
|
|
date +
|
|
"&provinceId=" +
|
|
pcode;
|
|
|
|
// 是否有权限进入服务区营收分析页面
|
|
let canToSeverpartIndex = !provinceId
|
|
? this.hasSeverpartIndexAuthority
|
|
: this.PushAuthority.some((n) => {
|
|
return n.ProvinceCode == provinceId && n.ShopAnalysisType == 1;
|
|
});
|
|
|
|
this.$util.toNextRoute(
|
|
"navigateTo",
|
|
canToSeverpartIndex ? severpartIndexPath : serverpartUploadPath
|
|
);
|
|
|
|
item.visited = true;
|
|
this.$forceUpdate();
|
|
},
|
|
selectTab(name, index) {
|
|
this[name] = index;
|
|
},
|
|
toggleRegion(item) {
|
|
item.show = !item.show ? true : false;
|
|
this.$forceUpdate();
|
|
},
|
|
touchPie(e, id) {
|
|
rincanvas[id].showToolTip(e, {
|
|
format: function (item) {
|
|
return item.name + ":" + item.data;
|
|
},
|
|
});
|
|
},
|
|
todayAmount() {
|
|
let _this = this;
|
|
let theRequest = this.theRequest;
|
|
this.$request
|
|
.$get("getCurRevenue", {
|
|
pushProvinceCode: theRequest.ProvinceCode,
|
|
serverPartId:
|
|
theRequest.GroupType == 1000 ? "" : theRequest.ServerpartIds,
|
|
})
|
|
.then((res) => {
|
|
if (res.ResultCode != 100) return;
|
|
|
|
let avrticket =
|
|
res.Data.TOTALTICKET != 0 && res.Data.TOTALPRICE != 0
|
|
? res.Data.TOTALPRICE / res.Data.TOTALTICKET
|
|
: 0;
|
|
_this.today = {
|
|
timeMoney: this.$util.fmoney(res.Data.TOTALPRICE, 2),
|
|
totalTicketCount: res.Data.TOTALTICKET,
|
|
avrticketCount: this.$util.fmoney(avrticket, 2),
|
|
};
|
|
_this.$forceUpdate();
|
|
});
|
|
},
|
|
|
|
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: this,
|
|
// canvasId: obj.id,
|
|
context: ctx,
|
|
color: obj.colors,
|
|
type: "ring",
|
|
fontSize: 12,
|
|
padding: [15, 15, 25, 15],
|
|
legend: {
|
|
show: false,
|
|
padding: 5,
|
|
lineHeight: 11,
|
|
margin: 0,
|
|
},
|
|
background: "#FFFFFF",
|
|
pixelRatio: 1,
|
|
series: data.series,
|
|
animation: false,
|
|
width: uni.upx2px(686),
|
|
height: uni.upx2px(510),
|
|
dataLabel: true,
|
|
extra: {
|
|
ring: {
|
|
ringWidth: 40,
|
|
labelWidth: 16,
|
|
border: true,
|
|
borderWidth: 1,
|
|
borderColor: "#fff",
|
|
},
|
|
},
|
|
});
|
|
},
|
|
getDetail(obj) {
|
|
let _this = this;
|
|
this.$request
|
|
.$webGet("CommercialApi/Revenue/GetServerpartEndAccountList", {
|
|
Serverpart_ID: obj.ServerpartIds,
|
|
pushProvinceCode: obj.ProvinceCode,
|
|
Statistics_Date: obj.time,
|
|
})
|
|
.then((res) => {
|
|
if (res.Result_Code != 100) return;
|
|
res.Result_Data.ShopEndaccountList.map((n) => {
|
|
n.show = false;
|
|
n.detail = this.getListDetail(n);
|
|
});
|
|
|
|
_this.regionList = res.Result_Data.ShopEndaccountList;
|
|
});
|
|
},
|
|
getListDetail(data) {
|
|
let arr = [];
|
|
let keyJson = {
|
|
SHOWMORE_SIGN: {
|
|
1: "【长款】",
|
|
2: "【异常长款】",
|
|
}, // 长款
|
|
SHOWLESS_SIGN: {
|
|
1: "【短款】",
|
|
2: "【异常短款】",
|
|
}, // 短款
|
|
SHOWABNORMAL_SIGN: {
|
|
1: "【异常校验】",
|
|
}, // 异常日结
|
|
SHOWSCAN_SIGN: {
|
|
1: "【扫】",
|
|
}, // 扫码上传
|
|
SHOWSSUPPLY_SIGN: {
|
|
1: "【补】",
|
|
}, // 账期补录
|
|
SHOWCHECK_SIGN: {
|
|
1: "【稽核检查】",
|
|
}, // 稽核检查
|
|
INTERFACE_SIGN: {
|
|
1: "【接口传输】",
|
|
}, // 接口传输
|
|
};
|
|
var keyCode = [
|
|
"SHOWABNORMAL_SIGN",
|
|
"SHOWCHECK_SIGN",
|
|
"SHOWMORE_SIGN",
|
|
"SHOWLESS_SIGN",
|
|
"SHOWSCAN_SIGN",
|
|
"SHOWSSUPPLY_SIGN",
|
|
"INTERFACE_SIGN",
|
|
];
|
|
keyCode.map((n) => {
|
|
if (keyJson[n][data[n]]) arr.push(keyJson[n][data[n]]);
|
|
});
|
|
return arr;
|
|
},
|
|
toggleShow(i) {
|
|
let item = this.regionList[i];
|
|
item.show = !item.show;
|
|
this.$forceUpdate();
|
|
},
|
|
defaultMsg() {
|
|
let option = null;
|
|
let _this = this;
|
|
if (this.PushAuthority && this.PushAuthority.length > 1) {
|
|
option = this.PushAuthority.find(
|
|
(n) => n.ProvinceCode === _this.ProvinceCode
|
|
);
|
|
} else {
|
|
option = this.PushAuthority[0];
|
|
}
|
|
return {
|
|
...option,
|
|
};
|
|
},
|
|
async initData() {
|
|
// 初始化营收数据
|
|
let _this = this;
|
|
console.log("theRequest", this.theRequest);
|
|
const [
|
|
reginList,
|
|
totalData,
|
|
busniessTypePie,
|
|
busniessTradePie,
|
|
busniessAreaPie,
|
|
bayonetPie,
|
|
] = await anhuiYestodayRevenueData.getData(this.theRequest); // 获取实时数据
|
|
|
|
if (this.theRequest.GroupType !== 1010) {
|
|
this.regionList = reginList; // 营收上传列表 reginListModel[]
|
|
}
|
|
// 组合及格式化 头部卡片总营收数据。
|
|
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(
|
|
this.theRequest.time,
|
|
"MM月DD日"
|
|
); // 当前日期
|
|
totalData.budgetamoutShow = totalData.budgetAmount
|
|
? _this.$util.fmoney(totalData.budgetAmount)
|
|
: 0.0; // 预算总营收
|
|
|
|
busniessTypePie.forEach((n, i) => {
|
|
if (n.name === "自营") {
|
|
// 预算和实际差额
|
|
totalData.diffBudgetTotal = Math.abs(totalData.budgetAmount - n.data);
|
|
// 预算和实际增长额比例
|
|
totalData.diffBili =
|
|
totalData.budgetAmount > 0
|
|
? this.$util.fmoney(
|
|
(totalData.diffBudgetTotal / totalData.budgetAmount) * 100,
|
|
2
|
|
)
|
|
: "100";
|
|
}
|
|
});
|
|
this.headMsg = totalData;
|
|
console.log(this.headMsg);
|
|
// 饼图分析及数据条形分析
|
|
const [progressList, pieList] = this.getProgressData(
|
|
busniessTypePie,
|
|
totalData.cashPay
|
|
);
|
|
this.modelProgress = progressList;
|
|
// 经营类型分析
|
|
var colors1 = ["#FFAC37", "#6B75B8"];
|
|
// console.log(pieList)
|
|
this.showPie({
|
|
id: "modelCont",
|
|
data: pieList,
|
|
colors: colors1,
|
|
});
|
|
// 经营业态
|
|
|
|
// 饼图分析及数据条形分析
|
|
const [tprogressList, tpieList] = this.getProgressData(
|
|
busniessTradePie,
|
|
totalData.cashPay
|
|
);
|
|
|
|
this.regionProgress = tprogressList;
|
|
console.log("this.regionProgress", this.regionProgress);
|
|
console.log("tpieList", tpieList);
|
|
// 经营类型分析
|
|
var colors2 = ["#5E67B4", "#4E5699", "#75B7AD", "#AFB7E6"];
|
|
this.showPie({
|
|
id: "businessCont",
|
|
data: tpieList,
|
|
colors: colors2,
|
|
});
|
|
|
|
// 饼图分析及数据条形分析
|
|
const [aprogressList, apieList] = this.getProgressData(
|
|
busniessAreaPie,
|
|
totalData.cashPay
|
|
);
|
|
this.areaProgress = aprogressList;
|
|
console.log("this.areaProgress", this.areaProgress);
|
|
// 区域营收分析
|
|
var colors3 = [
|
|
"#FFAC37",
|
|
"#d8ece9",
|
|
"#f7f5f6",
|
|
"#b2b7e3",
|
|
"#F4B27A",
|
|
"#F3B1C9",
|
|
"#e0e3f7",
|
|
"#FFE886",
|
|
"#f7f5f6",
|
|
];
|
|
this.showPie({
|
|
id: "areaCont",
|
|
data: apieList,
|
|
colors: colors3,
|
|
});
|
|
|
|
// 安徽省本级显示的内容
|
|
if (
|
|
this.theRequest.GroupType == 1000 &&
|
|
this.theRequest.ProvinceCode == 340000
|
|
) {
|
|
// 显示片区车流量数据分析
|
|
const [bayonetList] = this.getBayonetData(bayonetPie);
|
|
this.bayonetProgress = bayonetList;
|
|
console.log("this.bayonetProgress", this.bayonetProgress);
|
|
}
|
|
|
|
if (reginList.length) {
|
|
this.showPage = true;
|
|
}
|
|
this.isLoading = false;
|
|
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) + "%"];
|
|
}
|
|
},
|
|
});
|
|
|
|
_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];
|
|
},
|
|
getBayonetData(data) {
|
|
var _data1 = [];
|
|
let _this = this;
|
|
|
|
data.forEach((n, i) => {
|
|
var childData = [];
|
|
n.spList.forEach((m, i) => {
|
|
// 获取服务区各个方位的入区信息
|
|
var _list = [];
|
|
m.regionList.forEach((o, i) => {
|
|
_list.push({
|
|
name: o.name,
|
|
data: o.Vehicle_Count,
|
|
flow: o.SectionFlow_Count,
|
|
bili:
|
|
o.SectionFlow_Count == 0
|
|
? 100
|
|
: _this.$util.fmoney(
|
|
(o.Vehicle_Count / o.SectionFlow_Count) * 100,
|
|
2
|
|
),
|
|
MinVehicle_Count: o.MinVehicle_Count,
|
|
MediumVehicle_Count: o.MediumVehicle_Count,
|
|
LargeVehicle_Count: o.LargeVehicle_Count,
|
|
});
|
|
});
|
|
_list.sort(function (a, b) {
|
|
return b.bili - a.bili;
|
|
});
|
|
|
|
childData.push({
|
|
name: m.name,
|
|
data: m.Vehicle_Count, //+Number(data2[n[0]])
|
|
flow: m.SectionFlow_Count,
|
|
bili:
|
|
m.SectionFlow_Count == 0
|
|
? 0
|
|
: _this.$util.fmoney(
|
|
(m.Vehicle_Count / m.SectionFlow_Count) * 100,
|
|
2
|
|
),
|
|
list: _list,
|
|
});
|
|
});
|
|
childData.sort(function (a, b) {
|
|
return b.bili - a.bili;
|
|
});
|
|
|
|
_data1.push({
|
|
name: n.name,
|
|
index: n.index,
|
|
list: childData,
|
|
});
|
|
});
|
|
_data1.sort(function (a, b) {
|
|
return a.index - b.index;
|
|
});
|
|
|
|
return [_data1];
|
|
},
|
|
async getRankContent() {
|
|
// 甘肃需要单品排行显示
|
|
const { ProvinceCode, time } = this.theRequest;
|
|
|
|
const data = await this.$request.$webGet(
|
|
"CommercialApi/Revenue/GetWechatPushSalesList",
|
|
{
|
|
pushProvinceCode: ProvinceCode,
|
|
Statistics_Date: time,
|
|
}
|
|
);
|
|
|
|
if (data.Result_Code === 100 && data.Result_Data.TotalCount > 0) {
|
|
this.wechatPushSalesList = {};
|
|
data.Result_Data.List.forEach((n) => {
|
|
this.wechatPushSalesList[n.Data_Type] = n.GoodsList;
|
|
});
|
|
} else {
|
|
this.wechatPushSalesList = {};
|
|
}
|
|
this.$forceUpdate();
|
|
},
|
|
},
|
|
|
|
onUnload() {
|
|
this.$util.addUserBehaviorNew();
|
|
},
|
|
onPageScroll(options) {
|
|
this.opacity = (options.scrollTop - 30) / 68;
|
|
},
|
|
onLoad(option) {
|
|
console.log("optio1n", option);
|
|
uni.showLoading({
|
|
title: "正在加载...",
|
|
});
|
|
if (option.ProvinceCode) {
|
|
// 从推送进入
|
|
this.theRequest = option;
|
|
option.time = this.$util.cutDate(option.time, "YYYY-MM-DD");
|
|
option.month = this.$util.cutDate(option.time, "YYYYMM");
|
|
|
|
this.initData();
|
|
} else {
|
|
// 默认
|
|
|
|
if (this.PushAuthority.length > 0) {
|
|
this.theRequest = this.defaultMsg() || {};
|
|
this.theRequest.time = this.lastDay;
|
|
this.theRequest.month = this.$util.cutDate(this.lastDay, "YYYYMM");
|
|
this.initData();
|
|
} else {
|
|
uni.hideLoading();
|
|
this.theRequest = null;
|
|
this.isLoading = false;
|
|
this.showPage = false;
|
|
this.opacity = 1;
|
|
}
|
|
}
|
|
this.nowTab = this.theRequest.ProvinceCode == 340000 ? 1 : 2;
|
|
console.log("this.nowTab", this.nowTab);
|
|
this.todayAmount();
|
|
if (this.theRequest.GroupType == 1010) {
|
|
this.getDetail(this.theRequest);
|
|
}
|
|
// 若省份为甘肃，则加载甘肃单品排行
|
|
if (this.theRequest.ProvinceCode == 620000) {
|
|
this.getRankContent();
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-body {
|
|
background: #fff;
|
|
position: relative;
|
|
padding-bottom: 80rpx;
|
|
}
|
|
|
|
.uni-flex-column {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.justify-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.justify-around {
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.uni-icon-arrowright {
|
|
font-size: 32rpx;
|
|
color: #5a5a5a;
|
|
}
|
|
|
|
.uni-icon-arrowright.active {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.ct01 {
|
|
color: #383838;
|
|
}
|
|
|
|
.strong-text {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.ct-red {
|
|
color: #d7565a !important;
|
|
}
|
|
|
|
.new-content {
|
|
background: url("/static/images/revenue/banner.png") no-repeat bottom left;
|
|
height: 383rpx;
|
|
background-size: 100%;
|
|
color: #fff;
|
|
box-sizing: border-box;
|
|
padding-top: 20rpx;
|
|
}
|
|
|
|
.new-content .text-title {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.uni-icon-arrowleft {
|
|
font-size: 38rpx;
|
|
padding: 8rpx 16rpx;
|
|
}
|
|
|
|
.page-title {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-right: 70rpx;
|
|
width: 100%;
|
|
|
|
color: #fff;
|
|
background-color: #3b64a3;
|
|
}
|
|
|
|
.page-title .uni-icon-arrowleft,
|
|
.page-title .uni-icon-arrowleft:before {
|
|
color: #fff;
|
|
}
|
|
|
|
.new-content .header-card {
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center right;
|
|
padding: 0 30rpx;
|
|
color: #bed4f4;
|
|
padding-top: 8rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.head-log {
|
|
position: absolute;
|
|
right: 12rpx;
|
|
top: 0rpx;
|
|
width: 376rpx;
|
|
height: 198rpx;
|
|
}
|
|
|
|
.new-content .top-number {
|
|
padding-top: 28rpx;
|
|
font-size: 76rpx;
|
|
padding-bottom: 16rpx;
|
|
color: #fff;
|
|
padding-left: 4rpx;
|
|
font-family: "Bahnschrift Regular";
|
|
letter-spacing: 2rpx;
|
|
line-height: 1.1;
|
|
transition: all 1s;
|
|
}
|
|
|
|
.new-content .header-today-info {
|
|
align-items: baseline;
|
|
}
|
|
|
|
.new-content .header-today-info text {
|
|
font-family: "Bahnschrift Regular";
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.ml10 {
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.new-content .header-today-info text.fs12,
|
|
text.fs12 {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.ml-135 {
|
|
margin-left: 135rpx;
|
|
}
|
|
|
|
.top-number view {
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.heade-text {
|
|
text-align: right;
|
|
line-height: 1;
|
|
letter-spacing: 0;
|
|
color: #bed4f4;
|
|
font-family: "Bahnschrift Regular";
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* 营收汇总 数据概览卡片 */
|
|
.revenue-card-cont {
|
|
padding: 6rpx 0 32rpx 0;
|
|
border-radius: 12rpx;
|
|
margin: 0 20rpx;
|
|
box-shadow: 0rpx 0rpx 6rpx 0px rgba(224, 224, 224, 0.54);
|
|
}
|
|
|
|
.head-cost-text {
|
|
color: #bed4f4;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.top-revenue-card {
|
|
padding: 16rpx 30rpx 6rpx 30rpx;
|
|
font-family: "Bahnschrift Regular";
|
|
color: #d7b89a;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.top-revenue-card .top-number {
|
|
font-size: 56rpx;
|
|
color: #d0ac8b;
|
|
line-height: 1;
|
|
}
|
|
|
|
.top-revenue-card .upLoad-text {
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.check-unit {
|
|
font-size: 24rpx;
|
|
margin-top: 16rpx;
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.check-price-color {
|
|
font-size: 32rpx;
|
|
color: #868686;
|
|
line-height: 1.2;
|
|
font-family: "Bahnschrift Regular";
|
|
}
|
|
|
|
.check-price-color text {
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
/* end */
|
|
|
|
.modle-title {
|
|
padding-left: 24rpx;
|
|
font-size: 30rpx;
|
|
padding-top: 42rpx;
|
|
padding-bottom: 20rpx;
|
|
}
|
|
|
|
.modle-title .uni-icon-arrowdown {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.modle-title picker {
|
|
color: #000000;
|
|
padding-right: 24rpx;
|
|
position: relative;
|
|
width: 164rpx;
|
|
}
|
|
|
|
.modle-title picker .revenue-date:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 0rpx;
|
|
height: 0rpx;
|
|
border: 0rpx;
|
|
border-left: 12rpx solid transparent;
|
|
border-right: 12rpx solid transparent;
|
|
border-top: 12rpx solid #000;
|
|
right: 22rpx;
|
|
top: 22rpx;
|
|
|
|
display: block;
|
|
border-radius: 6rpx;
|
|
}
|
|
|
|
.upload-count {
|
|
font-family: "Bahnschrift Regular";
|
|
font-size: 32rpx;
|
|
margin-left: 16rpx;
|
|
margin-right: 36rpx;
|
|
}
|
|
|
|
.region-title {
|
|
padding: 20rpx 60rpx 20rpx 80rpx;
|
|
position: relative;
|
|
font-size: 30rpx;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.region-title:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
background: url(/static/images/revenue/select.png) no-repeat center;
|
|
background-size: contain;
|
|
left: 40rpx;
|
|
top: 36rpx;
|
|
}
|
|
|
|
.active.region-title:before {
|
|
background: url(/static/images/revenue/select_active.png) no-repeat center;
|
|
background-size: contain;
|
|
}
|
|
|
|
/*日结上传*/
|
|
.region-cell {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
padding: 26rpx 24rpx 22rpx 42rpx;
|
|
}
|
|
|
|
.region-cell .region-cell-unit {
|
|
flex: 2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: #929292;
|
|
font-size: 26rpx;
|
|
line-height: 1.5;
|
|
text-align: right;
|
|
}
|
|
|
|
.region-cell .region-cell-unit:nth-child(1) {
|
|
flex: 3;
|
|
text-align: left;
|
|
}
|
|
|
|
.region-cell .region-cell-unit:nth-child(3) {
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.region-cell-image {
|
|
width: 48rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
height: 50rpx;
|
|
}
|
|
|
|
.region-cell image {
|
|
width: 14rpx;
|
|
height: 23rpx;
|
|
}
|
|
|
|
/*日结上传服务区*/
|
|
.region-cell-area {
|
|
/* display: none; */
|
|
max-height: 460rpx;
|
|
overflow: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.region-cell-area li.visited view:first-child {
|
|
color: #007aff;
|
|
}
|
|
|
|
.region-cell-area li:after {
|
|
content: "";
|
|
background: url(/static/images/revenue/you-jt.png) no-repeat center;
|
|
width: 14rpx;
|
|
height: 24rpx;
|
|
background-size: contain;
|
|
display: block;
|
|
position: absolute;
|
|
right: 24rpx;
|
|
top: 26rpx;
|
|
}
|
|
|
|
.region-cell-area li:nth-child(2n + 1) {
|
|
background-color: #fcfcfc;
|
|
}
|
|
|
|
.region-cell-area li:nth-child(2n + 1):before {
|
|
content: "";
|
|
background-color: #5596f9;
|
|
width: 8rpx;
|
|
height: 8rpx;
|
|
border-radius: 8rpx;
|
|
display: block;
|
|
position: absolute;
|
|
left: 42rpx;
|
|
}
|
|
|
|
.region-cell-area li:nth-child(2n):before {
|
|
content: "";
|
|
background-color: #fe6d67;
|
|
width: 8rpx;
|
|
height: 8rpx;
|
|
border-radius: 8rpx;
|
|
display: block;
|
|
position: absolute;
|
|
left: 42rpx;
|
|
}
|
|
|
|
.region-cell-area li {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16rpx 72rpx 16rpx 68rpx;
|
|
position: relative;
|
|
text-align: right;
|
|
color: #2e2e2e;
|
|
background-color: #f7f7f7;
|
|
}
|
|
|
|
.region-cell-area li > div {
|
|
flex: 2;
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.region-cell-area li > div:nth-child(1) {
|
|
flex: 3;
|
|
text-align: left;
|
|
}
|
|
|
|
/*车流量分析*/
|
|
.bayonet-cell-area {
|
|
/* display: none; */
|
|
max-height: 460rpx;
|
|
overflow: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.bayonet-cell-area li {
|
|
width: 100%;
|
|
}
|
|
.bayonet-cell-area li .server {
|
|
width: 30%;
|
|
display: inline-block;
|
|
text-align: left;
|
|
padding-left: 15rpx;
|
|
}
|
|
.bayonet-cell-area li .type {
|
|
width: 35%;
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
.bayonet-cell-area li .carType {
|
|
width: 30%;
|
|
display: inline-block;
|
|
text-align: right;
|
|
}
|
|
|
|
.bayonet-cell-area li:nth-child(2n + 1):before {
|
|
content: "";
|
|
background-color: #5596f9;
|
|
width: 8rpx;
|
|
height: 8rpx;
|
|
border-radius: 8rpx;
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 40%;
|
|
}
|
|
|
|
.bayonet-cell-area li:nth-child(2n):before {
|
|
content: "";
|
|
background-color: #fe6d67;
|
|
width: 8rpx;
|
|
height: 8rpx;
|
|
border-radius: 8rpx;
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 40%;
|
|
}
|
|
|
|
.bayonet-cell-area li {
|
|
width: 100%;
|
|
/*display: flex;*/
|
|
/*align-items: center;*/
|
|
/*justify-content: space-around;*/
|
|
position: relative;
|
|
}
|
|
|
|
.bayonet-cell-area li > div {
|
|
flex: 2;
|
|
}
|
|
|
|
.bayonet-cell-area li > div:nth-child(1) {
|
|
flex: 3;
|
|
text-align: left;
|
|
}
|
|
|
|
.bayonet-c-list {
|
|
padding: 16rpx 32rpx;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.bayonet-c-list div:before {
|
|
content: "";
|
|
background: url(/static/images/authority/fwq.png) no-repeat center;
|
|
width: 35rpx;
|
|
height: 35rpx;
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 7px;
|
|
}
|
|
|
|
.modle-title image {
|
|
max-width: 36rpx;
|
|
max-height: 36rpx;
|
|
}
|
|
|
|
.line-tab-unit {
|
|
margin-top: 20rpx;
|
|
/* width: 60rpx; */
|
|
height: 44rpx;
|
|
font-size: 28rpx;
|
|
color: #a9a9a9;
|
|
background: #ececec;
|
|
border-radius: 8rpx;
|
|
text-align: center;
|
|
line-height: 44rpx;
|
|
margin-right: 32rpx;
|
|
padding: 0 10rpx;
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.line-tab-unit.active {
|
|
background-color: #667ed5;
|
|
color: #fff;
|
|
}
|
|
|
|
.revenue-line-box {
|
|
background-color: #fff;
|
|
margin: 0 16rpx;
|
|
border-radius: 20rpx;
|
|
padding: 34rpx 16rpx 34rpx 16rpx;
|
|
box-shadow: 1rpx 0rpx 6rpx 0px rgba(224, 224, 224, 0.54);
|
|
}
|
|
|
|
.revenue-line-box + .revenue-line-box {
|
|
margin-top: 38rpx;
|
|
}
|
|
|
|
.revenue-line-data {
|
|
width: 216rpx;
|
|
height: 144rpx;
|
|
background-color: #f8f8f8;
|
|
border-radius: 12rpx;
|
|
color: #a5a5a5;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
padding-top: 20rpx;
|
|
border: 2rpx solid #f8f8f8;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.revenue-line-data + .revenue-line-data {
|
|
margin-left: 24rpx;
|
|
}
|
|
|
|
.revenue-line-data p:last-child {
|
|
font-size: 40rpx;
|
|
font-family: "Bahnschrift Regular";
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.revenue-line-data.active {
|
|
border: 2rpx solid #889ded;
|
|
background-color: #f1f3fb;
|
|
color: #667ed5;
|
|
}
|
|
|
|
.revenue-line-box .text-title {
|
|
color: #9498a4;
|
|
font-size: 24rpx;
|
|
margin-top: 38rpx;
|
|
}
|
|
|
|
.revenue-line-box .up-text-title {
|
|
color: #6eb92b;
|
|
font-family: "Bahnschrift Regular";
|
|
font-size: 36rpx;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.up-text-title:after {
|
|
content: "";
|
|
margin-left: 12rpx;
|
|
width: 20rpx;
|
|
height: 22rpx;
|
|
display: inline-block;
|
|
background: url("/static/images/revenue/up-arrow.png") no-repeat center;
|
|
background-size: contain;
|
|
}
|
|
|
|
.text-week {
|
|
color: #c2c2c2;
|
|
margin-left: 32rpx;
|
|
}
|
|
|
|
.down-text-title:after {
|
|
content: "";
|
|
margin-left: 12rpx;
|
|
width: 20rpx;
|
|
height: 22rpx;
|
|
display: inline-block;
|
|
background: url("/static/images/revenue/down-arrow.png") no-repeat center;
|
|
background-size: contain;
|
|
}
|
|
|
|
.revenue-line-box .down-text-title {
|
|
color: #f07878;
|
|
font-family: "Bahnschrift Regular";
|
|
font-size: 36rpx;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.revenue-line-box .title {
|
|
color: #000;
|
|
font-size: 28rpx;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.revenue-line-box canvas.operation-content {
|
|
height: 350rpx;
|
|
width: 686rpx;
|
|
margin: 0 auto 0 auto;
|
|
background-color: #fff;
|
|
}
|
|
|
|
/*区域营收占比*/
|
|
/* //.operation-bgfc {
|
|
// background-color: #FCFCFC;
|
|
// padding-bottom: 32rpx;
|
|
//} */
|
|
|
|
.box-operation {
|
|
box-shadow: 1px 2px 6px 0px rgba(224, 224, 224, 0.54);
|
|
margin: 20rpx 32rpx 0 32rpx;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.operation-tab-box {
|
|
background: #f1f1f1;
|
|
border-radius: 8rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.operation-tab-box .operation-tab-unit {
|
|
color: #bababa;
|
|
flex: 30%;
|
|
height: 120rpx;
|
|
line-height: 120rpx;
|
|
position: relative;
|
|
padding-left: 24rpx;
|
|
}
|
|
|
|
.operation-tab-box .operation-tab-unit.active {
|
|
background-color: #fff;
|
|
color: #000000;
|
|
}
|
|
|
|
.operation-tab-box .operation-tab-unit.active:after {
|
|
content: "";
|
|
width: 30rpx;
|
|
height: 126rpx;
|
|
background-color: #fff;
|
|
border-radius: 0 14rpx 0 0;
|
|
position: absolute;
|
|
right: -20rpx;
|
|
transform: rotate(-9deg);
|
|
}
|
|
|
|
.operation-tab-box .operation-tab-unit:after {
|
|
content: "";
|
|
width: 30rpx;
|
|
height: 126rpx;
|
|
border-radius: 0 14rpx 0 0;
|
|
background-color: #f1f1f1;
|
|
box-shadow: 6rpx 8rpx 4rpx rgba(0, 0, 0, 0.15);
|
|
position: absolute;
|
|
right: -20rpx;
|
|
transform: rotate(-9deg);
|
|
z-index: 1;
|
|
}
|
|
|
|
.operation-content-box {
|
|
width: 686rpxrpx;
|
|
overflow: hidden;
|
|
padding-bottom: 16rpx;
|
|
}
|
|
|
|
canvas.operation-content {
|
|
height: 500rpx;
|
|
width: 686rpx;
|
|
margin: 0 auto;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.operation-c-list {
|
|
padding: 16rpx 32rpx;
|
|
}
|
|
.operation-cl-unit {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.operation-cl-unit1 {
|
|
width: 100%;
|
|
font-size: 26rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.operation-cl-unit1 .server {
|
|
width: 30%;
|
|
display: inline-block;
|
|
text-align: left;
|
|
padding-left: 30rpx;
|
|
}
|
|
.operation-cl-unit1 .type {
|
|
width: 40%;
|
|
display: inline-block;
|
|
text-align: left;
|
|
}
|
|
.operation-cl-unit1 .carType {
|
|
width: 30%;
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
|
|
.operation-c-list .progress {
|
|
width: 288rpx;
|
|
height: 12rpx;
|
|
background-color: #f9f9f9;
|
|
border-radius: 4rpx;
|
|
margin-top: 12rpx;
|
|
}
|
|
|
|
.operation-c-list .progress .bgO {
|
|
height: 12rpx;
|
|
border-radius: 4rpx;
|
|
background: -webkit-linear-gradient(right, #ec6332, #ef884f);
|
|
background: -moz-linear-gradient(right, #ec6332, #ef884f);
|
|
background: -o-linear-gradient(right, #ec6332, #ef884f);
|
|
background: linear-gradient(to right, #ec6332, #ef884f);
|
|
}
|
|
|
|
/*排行*/
|
|
.ranking-tab-box {
|
|
margin: 20rpx 32rpx;
|
|
border: 2rpx solid #565656;
|
|
border-radius: 8rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.ranking-tab-box .ranking-tab-unit {
|
|
color: #565656;
|
|
flex: 1;
|
|
height: 64rpx;
|
|
line-height: 60rpx;
|
|
}
|
|
|
|
.ranking-tab-box .ranking-tab-unit.active {
|
|
background-color: #565656;
|
|
color: #fff;
|
|
}
|
|
|
|
.ranking-tab-box .ranking-tab-unit + .ranking-tab-unit {
|
|
border-left: 2rpx solid #565656;
|
|
}
|
|
|
|
.ranking-content {
|
|
/* display: none; */
|
|
min-height: 160rpx;
|
|
}
|
|
|
|
.ranking-content .ranking-list {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #000;
|
|
padding: 24rpx 32rpx;
|
|
}
|
|
|
|
.ranking-content .rank-index {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
text-align: center;
|
|
line-height: 72rpx;
|
|
font-size: 30rpx;
|
|
font-weight: bolder;
|
|
margin-right: 32rpx;
|
|
}
|
|
|
|
.ranking-content .ranking-list:nth-child(1) .rank-index {
|
|
background: url("/static/images/revenue/top1.png") no-repeat center;
|
|
background-size: contain;
|
|
font-size: 0;
|
|
}
|
|
|
|
.ranking-content .ranking-list:nth-child(2) .rank-index {
|
|
background: url(/static/images/revenue/top2.png) no-repeat center;
|
|
background-size: contain;
|
|
font-size: 0;
|
|
}
|
|
|
|
.ranking-content .ranking-list:nth-child(3) .rank-index {
|
|
background: url(/static/images/revenue/top3.png) no-repeat center;
|
|
background-size: contain;
|
|
font-size: 0;
|
|
}
|
|
|
|
.ranking-content .ranking-list-unit {
|
|
font-size: 28rpx;
|
|
flex: 1;
|
|
}
|
|
|
|
.ranking-content .ranking-unit-info {
|
|
/* margin-top: 16rpx; */
|
|
display: flex;
|
|
align-items: center;
|
|
/* font-size: .13rem; */
|
|
}
|
|
|
|
.ranking-content .ranking-unit-info text {
|
|
flex: 2;
|
|
color: #929292;
|
|
}
|
|
|
|
.ranking-content .ranking-unit-info text:nth-child(2) {
|
|
flex: 3;
|
|
}
|
|
|
|
.ranking-content .ranking-unit-info text:nth-child(2n) {
|
|
color: #000;
|
|
}
|
|
|
|
.ranking-ico {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
}
|
|
</style>
|