update
This commit is contained in:
parent
1cbbd00065
commit
aaf7881a73
26
pages.json
26
pages.json
@ -138,6 +138,32 @@
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "nationalServerpart",
|
||||
"style":
|
||||
{
|
||||
"navigationBarTitleText": "服务区每日营收",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "rankPage",
|
||||
"style":
|
||||
{
|
||||
"navigationBarTitleText": "服务区排名",
|
||||
"enablePullDownRefresh": false,
|
||||
"disableScroll": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "testPage",
|
||||
"style":
|
||||
{
|
||||
"navigationBarTitleText": "测试页面",
|
||||
"enablePullDownRefresh": false,
|
||||
"disableScroll": true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
<view class="topTop">
|
||||
<view class="statistics" @click="goToRevenueStatic">
|
||||
<image class="staticImg" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/3stStaticIcon.svg"/>
|
||||
<text class="staticTitle">{{ `${selectMonth || '-'}月对客营收` }}</text>
|
||||
<text class="staticTitle">{{ `${selectMonth || '-'}月对客销售` }}</text>
|
||||
<span class="staticUnit">/万元</span>
|
||||
<view class="moreIcon" @click.stop="changeShowRealBox">
|
||||
<image class="noticeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/noticeIcon.svg"/>
|
||||
@ -106,7 +106,7 @@
|
||||
<view class="smallDetailItem" style="margin-right: 14px">
|
||||
<view class="messageTop">
|
||||
<view class="type" :style="{background:1<=selectMonth && selectMonth<=3?'#DB573B':4<=selectMonth && selectMonth<=6?'#137BBD':7<=selectMonth && selectMonth<=9?'#3663CB':'#A66A37'}"></view>
|
||||
<text class="typeTitle">自营收入</text>
|
||||
<text class="typeTitle">驿达自营</text>
|
||||
<!-- <text class="unit">/万元</text>-->
|
||||
</view>
|
||||
<view class="middle" v-if="typeList && typeList.length>0">
|
||||
@ -122,7 +122,7 @@
|
||||
<view class="smallDetailItem">
|
||||
<view class="messageTop">
|
||||
<view class="type" :style="{background:1<=selectMonth && selectMonth<=3?'#FFAB30':4<=selectMonth && selectMonth<=6?'#5DC1E0':7<=selectMonth && selectMonth<=9?'#7CADF8':'#DCA858'}"></view>
|
||||
<text class="typeTitle">外租收入</text>
|
||||
<text class="typeTitle">商铺租赁</text>
|
||||
<!-- <text class="unit">/万元</text>-->
|
||||
</view>
|
||||
<view class="middle">
|
||||
@ -148,7 +148,7 @@
|
||||
<view class="rightBox">
|
||||
<view class="noticeItem">
|
||||
<view class="noticeTop" :style="{background:1<=selectMonth && selectMonth<=3?'#DB573B':4<=selectMonth && selectMonth<=6?'#137BBD':7<=selectMonth && selectMonth<=9?'#3663CB':'#A66A37'}"></view>
|
||||
<view class="noticeText">驿达入账</view>
|
||||
<view class="noticeText">营业收入</view>
|
||||
<!-- <span class="noticeSmallText">/万元</span>-->
|
||||
<text class="noticeMoney">{{currentPeriodData.Royalty_Theory?$util.fmoney($util.getMoney(currentPeriodData.Royalty_Theory / 10000),2):'-'}}</text>
|
||||
</view>
|
||||
@ -1656,6 +1656,7 @@ export default {
|
||||
// 隐藏掉小程序本身自带的 tabbar 让自定义的tabbar出现
|
||||
uni.hideTabBar()
|
||||
this.selectVersion = 1
|
||||
uni.removeStorageSync('springService')
|
||||
},
|
||||
onHide(){
|
||||
// 离开页面投诉建议的悬浮框隐藏掉
|
||||
|
||||
@ -281,14 +281,18 @@ export default {
|
||||
latitude:'31.832905',
|
||||
}
|
||||
uni.setStorageSync('currentService',res) //当前选中服务区信息
|
||||
if (this.chartType){
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
if(this.type==='springTravel'){
|
||||
|
||||
}else{
|
||||
if (this.chartType){
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}else{
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
}
|
||||
}else{
|
||||
this.getListData()
|
||||
@ -319,7 +323,13 @@ export default {
|
||||
let pageList = getCurrentPages()
|
||||
if (this.type==='index'){
|
||||
this.$util.toNextRoute('navigateTo', `/pages/summaryOfPortraits/index?index=0`)
|
||||
}else{
|
||||
}else if(this.type==='springTravel'){
|
||||
uni.setStorageSync('springService',res) //当前选中服务区信息
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
else{
|
||||
if (this.chartType){
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
|
||||
613
pages/nationalPage/components/CarAnalysis.vue
Normal file
613
pages/nationalPage/components/CarAnalysis.vue
Normal file
@ -0,0 +1,613 @@
|
||||
<template>
|
||||
<view v-show="show">
|
||||
<div class="" v-show="!loading && pageEmpty">
|
||||
<noFound :nodata="true" :text="'抱歉，服务区采集样本数据过小，无法分析。'" />
|
||||
</div>
|
||||
<div v-show="!loading && !pageEmpty">
|
||||
<div class="customer-content">
|
||||
<div class="tab-btn" v-if="topData.length>1" @tap="tabChange(canvasTab==1?0:1,opt)">
|
||||
查看{{topData[canvasTab?0:1].Serverpart_Region}}区数据</div>
|
||||
<div class="customer-title">入区车流分析</div>
|
||||
<div class="uni-flex jc-between">
|
||||
<div style="flex:1;" class="tab-unit">
|
||||
<div class="tab-title">车流量</div>
|
||||
<div class="tab-number">{{topData[canvasTab].Vehicle_Count}}</div>
|
||||
<div class="tab-rate"><span class="tab-desc">日</span> <span
|
||||
:style="topData[canvasTab].Vehicle_GrowthRate>0? 'color: #2CC260;' : 'color: #F54850;'">{{topData[canvasTab].Vehicle_GrowthRate}}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;" class="tab-unit">
|
||||
<div class="tab-title">入区率</div>
|
||||
<div class="tab-number">{{topData[canvasTab].Entry_Rate}}%</div>
|
||||
<div class="tab-rate"><span class="tab-desc">日</span> <span
|
||||
:style="topData[canvasTab].Entry_GrowthRate>0? 'color: #2CC260;' : 'color: #F54850;'">{{topData[canvasTab].Entry_GrowthRate}}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- <canvas canvas-id="sexCate" id="sexCate" class="operation-cate-content"></canvas> -->
|
||||
<div class="customer-content">
|
||||
<div class="customer-title">各车停留时间</div>
|
||||
<div v-if="chartdata.stayChart[canvasTab] && chartdata.stayChart[canvasTab].data.length>0">
|
||||
<canvas canvas-id="carStay" id="carStay" class="operation-stock-content" @touchend="tap"></canvas>
|
||||
</div>
|
||||
<noFound :nodata="true" :text="'抱歉，服务区采集样本数据过小，无法分析。'" v-else />
|
||||
</div>
|
||||
<div class="customer-content">
|
||||
<div class="customer-title">车辆归属地</div>
|
||||
<div v-if="chartdata.countChart[canvasTab] && !lodingDetail">
|
||||
<view class="operation-pie-content">
|
||||
<!-- <uni-ec-canvas
|
||||
class="operation-stock-content"
|
||||
id="carBelong"
|
||||
ref="carBelong"
|
||||
canvas-id="carBelong"
|
||||
:ec="ec"
|
||||
></uni-ec-canvas> -->
|
||||
<!-- @inited="inited" -->
|
||||
<canvas canvas-id="carBelong" id="carBelong" class="operation-pie-content"
|
||||
@touchend="tap"></canvas>
|
||||
<!-- <qiun-data-charts
|
||||
type="radar"
|
||||
:chartData="radarData"
|
||||
:opts="radaropts"
|
||||
background="none"
|
||||
loadingType="2"
|
||||
/> -->
|
||||
</view>
|
||||
<view class="operation-pie-content">
|
||||
<canvas canvas-id="carFunnel" id="carFunnel" class="operation-pie-content"
|
||||
@touchend="tap"></canvas>
|
||||
<!-- <qiun-data-charts
|
||||
type="funnel"
|
||||
:chartData="funnelData"
|
||||
background="none"
|
||||
:opts="funnelopts"
|
||||
loadingType="0"
|
||||
/> -->
|
||||
</view>
|
||||
</div>
|
||||
<noFound :nodata="true" :text="'抱歉，服务区采集样本数据过小，无法分析。'" v-else />
|
||||
<!-- <div class="analysis-text" v-if="proportionList[canvasTab]">
|
||||
<span class="key-text">分析</span><span>{{proportionList[canvasTab][1]}}</span>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uCharts from '@/components/u-charts.js';
|
||||
import uniEcCanvas from './uni-ec-canvas/uni-ec-canvas.vue';
|
||||
// import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
|
||||
let rincanvas = {}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
pieId: String,
|
||||
barId: String,
|
||||
show: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
funnelData: null,
|
||||
|
||||
radarData: [],
|
||||
topData: [],
|
||||
canvasTab: 0,
|
||||
chartdata: {
|
||||
"stayChart": [],
|
||||
"countChart": []
|
||||
},
|
||||
opt: null,
|
||||
pageEmpty: false,
|
||||
loading: true,
|
||||
lodingDetail: true,
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
refreshData(data) {
|
||||
// 刷新数据
|
||||
rincanvas['carStay'].updateData({
|
||||
series: data.data,
|
||||
categories: data.categories
|
||||
});
|
||||
this.$forceUpdate()
|
||||
},
|
||||
tabChange(name, opt) {
|
||||
this.canvasTab = name
|
||||
|
||||
if (!this.chartdata.stayChart[name]) {
|
||||
this.lodingDetail = true
|
||||
this.getProportion(name, opt) // 获取 各车型停留时间
|
||||
this.getAnalysisDesc(name, opt)
|
||||
} else {
|
||||
if (this.chartdata.countChart[name]) {
|
||||
// 车辆归属地
|
||||
const list = this.chartdata.countChart[name]
|
||||
|
||||
this.showClounm({
|
||||
id: 'carBelong',
|
||||
data: [{
|
||||
name: '归属城市',
|
||||
data: list.OwnerCityList.map(n => {
|
||||
return parseInt(n.value)
|
||||
}),
|
||||
textColor: '#747474',
|
||||
textSize: uni.upx2px(20),
|
||||
formatter: (val) => {
|
||||
|
||||
return parseInt(val)+'辆'
|
||||
}
|
||||
}],
|
||||
categories: list.OwnerCity
|
||||
})
|
||||
//
|
||||
this.showPie({
|
||||
id: 'carFunnel',
|
||||
data: list.OwnerProvinceList.map(n => {
|
||||
return {
|
||||
...n,
|
||||
data: parseFloat(n.value)
|
||||
}
|
||||
}),
|
||||
categories: list.OwnerProvince,
|
||||
})
|
||||
}
|
||||
if (this.chartdata.stayChart[name]) {
|
||||
// 车辆停留时间
|
||||
const {
|
||||
data,
|
||||
categories
|
||||
} = this.chartdata.stayChart[name]
|
||||
this.showMix({
|
||||
id: 'carStay', //+type,
|
||||
data: data,
|
||||
categories: categories
|
||||
})
|
||||
console.log('data123123',data)
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
// 获取 各车型停留时间
|
||||
async getProportion(type, params) {
|
||||
let _this = this
|
||||
_this.opt = params
|
||||
const data = await this.$request.$webGet('CommercialApi/Revenue/GetBayonetSTAList', {
|
||||
Serverpart_Region: this.topData[type].Serverpart_Region,
|
||||
...params
|
||||
})
|
||||
if (data.Result_Code === 100 && data.Result_Data.List.length > 0) {
|
||||
const [list] = data.Result_Data.List
|
||||
|
||||
const showData = [{
|
||||
name: '车型',
|
||||
type: "column",
|
||||
index: 0,
|
||||
data: list.VehicleCountList.map(n => n.value)
|
||||
},
|
||||
{
|
||||
name: '停留时间(分钟)',
|
||||
type: "line",
|
||||
index: 1,
|
||||
"style": "curve",
|
||||
dataPointShape: true,
|
||||
|
||||
data: list.StayTimesList.map(n => parseInt(n.value) + ''),
|
||||
}
|
||||
]
|
||||
_this.showMix({
|
||||
id: 'carStay', //+type,
|
||||
data: showData,
|
||||
categories: list.Vehicle_Type
|
||||
})
|
||||
this.chartdata.stayChart[type] = {
|
||||
data: showData,
|
||||
categories: list.Vehicle_Type
|
||||
}
|
||||
this.$forceUpdate()
|
||||
|
||||
} else {
|
||||
this.chartdata.stayChart[type] = null
|
||||
}
|
||||
},
|
||||
async getAnalysisDesc(type, params) {
|
||||
let _this = this
|
||||
const data = await this.$request.$webGet('CommercialApi/Revenue/GetBayonetOAList', {
|
||||
Serverpart_Region: this.topData[type].Serverpart_Region,
|
||||
statisticsMonth: this.$util.cutDate(params.StatisticsDate, 'YYYYMM'),
|
||||
...params
|
||||
})
|
||||
|
||||
|
||||
if (data.Result_Code === 100 && data.Result_Data.List.length > 0) {
|
||||
const [list] = data.Result_Data.List
|
||||
this.chartdata.countChart[type] = list
|
||||
this.showClounm({
|
||||
id: 'carBelong',
|
||||
data: [{
|
||||
name: '归属城市',
|
||||
data: list.OwnerCityList.map(n => {
|
||||
return parseInt(n.value)
|
||||
}),
|
||||
textColor: '#747474',
|
||||
textSize: uni.upx2px(20),
|
||||
formatter: (val) => {
|
||||
|
||||
return parseInt(val)+'辆'
|
||||
}
|
||||
}],
|
||||
categories: list.OwnerCity
|
||||
})
|
||||
|
||||
this.showPie({
|
||||
id: 'carFunnel',
|
||||
data: list.OwnerProvinceList.map(n => {
|
||||
return {
|
||||
...n,
|
||||
data: parseFloat(n.value)
|
||||
}
|
||||
}),
|
||||
categories: list.OwnerProvince,
|
||||
})
|
||||
|
||||
this.$forceUpdate()
|
||||
} else {
|
||||
this.chartdata.countChart[type] = null
|
||||
}
|
||||
this.lodingDetail = false
|
||||
},
|
||||
// 加载头部信息
|
||||
async getTopData(params) {
|
||||
const data = await this.$request.$webGet('CommercialApi/Revenue/GetBayonetEntryList', {
|
||||
...params
|
||||
})
|
||||
this.loading = false
|
||||
if (data.Result_Data.TotalCount == 0) {
|
||||
this.pageEmpty = true
|
||||
return
|
||||
}
|
||||
this.topData = data.Result_Data.List
|
||||
this.lodingDetail = true
|
||||
this.getProportion(this.canvasTab, params)
|
||||
this.getAnalysisDesc(this.canvasTab, params)
|
||||
},
|
||||
|
||||
tap(e) {
|
||||
rincanvas[e.target.id].touchLegend(e);
|
||||
rincanvas[e.target.id].showToolTip(e);
|
||||
},
|
||||
showPie(obj) {
|
||||
let data = {
|
||||
series: []
|
||||
}
|
||||
data.series = data.series.concat(obj.data)
|
||||
const ctx = uni.createCanvasContext(obj.id, this);
|
||||
rincanvas[obj.id] = new uCharts({
|
||||
// padding: [5,5,5,5],
|
||||
context: ctx,
|
||||
color: ['#6B96F8', '#F6B760', '#677798', '#6BDBAB', '#7a67f8'],
|
||||
type: 'rose',
|
||||
fontSize: 12,
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'bottom',
|
||||
padding: 5,
|
||||
lineHeight: 12,
|
||||
fontSize: uni.upx2px(24),
|
||||
margin: 0,
|
||||
},
|
||||
legendShape: 'square',
|
||||
background: '#FFFFFF',
|
||||
pixelRatio: 1,
|
||||
series: data.series,
|
||||
animation: true,
|
||||
width: uni.upx2px(686),
|
||||
height: uni.upx2px(500),
|
||||
dataLabel: true,
|
||||
extra: {
|
||||
rose: {
|
||||
type: "area",
|
||||
minRadius: 70,
|
||||
activeOpacity: 0.5,
|
||||
activeRadius: 10,
|
||||
// offsetAngle: 0,
|
||||
labelWidth: 15,
|
||||
border: false,
|
||||
borderWidth: 2,
|
||||
borderColor: "#FFFFFF"
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
showClounm(obj) {
|
||||
const ctx = uni.createCanvasContext(obj.id, this);
|
||||
rincanvas[obj.id] = new uCharts({
|
||||
context: ctx,
|
||||
type: "bar",
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
color: ['#6B96F8'],
|
||||
fontSize: 12,
|
||||
background: '#FFFFFF',
|
||||
padding: [30, 24, 12, 12],
|
||||
animation: true,
|
||||
categories: obj.categories,
|
||||
series: obj.data,
|
||||
enableScroll: false, //开启图表拖拽功能
|
||||
xAxis: {
|
||||
boundaryGap: "justify",
|
||||
axisLine: false,
|
||||
// disableGrid: false,
|
||||
min: 0,
|
||||
// axisLine: false,
|
||||
max: 400,
|
||||
// axisLineColor: "#eee"
|
||||
fontSize: uni.upx2px(24),
|
||||
fontColor: '#777777',
|
||||
gridColor: '#eee'
|
||||
},
|
||||
subtitle: {
|
||||
name: '归属城市',
|
||||
color: '#e6e6e6',
|
||||
},
|
||||
yAxis: {
|
||||
data: [{
|
||||
title: '归属城市',
|
||||
position: "left",
|
||||
type:'categories',
|
||||
titleFontSize: uni.upx2px(22),
|
||||
titleFontColor: '#BABABA',
|
||||
// titleOffsetX: uni.upx2px(-40),
|
||||
titleOffsetY: uni.upx2px(-20),
|
||||
fontSize: uni.upx2px(24),
|
||||
fontColor: '#777777',
|
||||
|
||||
}],
|
||||
showTitle:true,
|
||||
axisLineColor: "#eee",
|
||||
fontSize: uni.upx2px(24),
|
||||
},
|
||||
dataLabel: true,
|
||||
width: uni.upx2px(686),
|
||||
height: uni.upx2px(500),
|
||||
extra: {
|
||||
bar: {
|
||||
type: 'group',
|
||||
width: uni.upx2px(48),
|
||||
meterBorde: 1,
|
||||
seriesGap: 4,
|
||||
// meterFillColor: "#FFFFFF",
|
||||
// activeBgColor: "#000000",
|
||||
// activeBgOpacity: 0.08,
|
||||
categoryGap: 4
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
showMix(obj) {
|
||||
let data = {
|
||||
series: []
|
||||
}
|
||||
console.log('obj21123',obj)
|
||||
const ctx = uni.createCanvasContext(obj.id, this);
|
||||
data.series = data.series.concat(obj.data)
|
||||
rincanvas[obj.id] = new uCharts({
|
||||
context: ctx,
|
||||
// canvasId: obj.id,
|
||||
type: 'mix',
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'bottom',
|
||||
// float: 'right',
|
||||
fontSize: 11,
|
||||
lineHeight: 20,
|
||||
margin: 5
|
||||
},
|
||||
color: ['#667ED5', '#FFAB35'],
|
||||
fontSize: 12,
|
||||
background: '#FFFFFF',
|
||||
padding: [30, 12, 12, 12],
|
||||
animation: true,
|
||||
categories: obj.categories,
|
||||
series: data.series,
|
||||
enableScroll: false, //开启图表拖拽功能
|
||||
xAxis: {
|
||||
disabled: false,
|
||||
disableGrid: true,
|
||||
axisLine: false,
|
||||
fontColor: '#777777',
|
||||
labelCount: 5,
|
||||
},
|
||||
yAxis: {
|
||||
data: [{
|
||||
position: "left",
|
||||
title: '车流量(辆)',
|
||||
disabled: false,
|
||||
axisLine: false,
|
||||
titleFontSize: uni.upx2px(22),
|
||||
titleFontColor: '#BABABA',
|
||||
// titleOffsetX: uni.upx2px(-40),
|
||||
titleOffsetY: uni.upx2px(-20),
|
||||
fontSize: uni.upx2px(24),
|
||||
fontColor: '#777777',
|
||||
min: 0,
|
||||
formatter: (val) => {
|
||||
return parseInt(val)
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '(分钟)',
|
||||
position: "right",
|
||||
disabled: false,
|
||||
axisLine: false,
|
||||
min: 0,
|
||||
titleFontSize: uni.upx2px(22),
|
||||
titleFontColor: '#BABABA',
|
||||
// titleOffsetX: uni.upx2px(-40),
|
||||
titleOffsetY: uni.upx2px(-20),
|
||||
fontSize: uni.upx2px(24),
|
||||
fontColor: '#777777',
|
||||
formatter: (val) => {
|
||||
return parseInt(val)
|
||||
}
|
||||
}
|
||||
],
|
||||
showTitle:true,
|
||||
gridType: 'dash',
|
||||
gridColor: '#eee',
|
||||
dashLength: 2,
|
||||
// splitNumber: 3,
|
||||
},
|
||||
dataLabel: false,
|
||||
width: uni.upx2px(686),
|
||||
height: uni.upx2px(480),
|
||||
showBox: true,
|
||||
extra: {
|
||||
mix: {
|
||||
column: {
|
||||
type: 'group',
|
||||
width: uni.upx2px(50),
|
||||
dataLabel: true,
|
||||
},
|
||||
line: {
|
||||
dataPointShapeType: 'hollow',
|
||||
dataPointShape: true,
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.customer-content {
|
||||
margin: 0 30rpx;
|
||||
border-radius: 8rpx;
|
||||
box-shadow: 0 2rpx 10rpx 0 rgba(230, 230, 230, 0.49);
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
margin-bottom: 48rpx;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.customer-title {
|
||||
padding: 0 40rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.operation-cate-content {
|
||||
height: 480rpx;
|
||||
width: 690rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.charts-box {
|
||||
width: 100%;
|
||||
height: 330rpx;
|
||||
}
|
||||
|
||||
.operation-stock-content {
|
||||
height: 440rpx;
|
||||
width: 690rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.operation-pie-content {
|
||||
height: 500rpx;
|
||||
width: 690rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
width: 241rpx;
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: url(../../../static/images/revenue/tab-bg.png) no-repeat right;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.tab-btn::before {
|
||||
content: '';
|
||||
background: url(../../../static/images/revenue/next.png) no-repeat center;
|
||||
background-size: contain;
|
||||
width: 40rpx;
|
||||
height: 16rpx;
|
||||
}
|
||||
|
||||
.analysis-text {
|
||||
color: #9498A4;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
font-size: 24rpx;
|
||||
margin: 0 30rpx 0 30rpx;
|
||||
}
|
||||
|
||||
.key-text {
|
||||
min-width: 50rpx;
|
||||
background: #EA7F56;
|
||||
font-size: 22rpx;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
background: #ea7f56;
|
||||
border-radius: 5rpx;
|
||||
margin-right: 16rpx;
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.tab-unit {
|
||||
padding-left: 40rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-unit+.tab-unit::before {
|
||||
content: '';
|
||||
height: 77rpx;
|
||||
width: 2rpx;
|
||||
background-color: #E6E6E6;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 65rpx;
|
||||
left: -10rpx;
|
||||
|
||||
}
|
||||
|
||||
.tab-title {
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.tab-number {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.tab-title,
|
||||
.tab-desc {
|
||||
color: #ADADAD;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.tab-desc,
|
||||
.tab-rate {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
</style>
|
||||
317
pages/nationalPage/components/CustomerAnalysis.vue
Normal file
317
pages/nationalPage/components/CustomerAnalysis.vue
Normal file
@ -0,0 +1,317 @@
|
||||
<template>
|
||||
<view class="customer-content" v-show="show">
|
||||
<div class="" v-show="!loading && pageEmpty">
|
||||
<noFound :nodata="true" :text="'抱歉，服务区采集样本数据过小，无法分析。'"/>
|
||||
</div>
|
||||
<div v-show="!loading && !pageEmpty">
|
||||
<div class="tab-btn" @tap="tabChange(canvasTab==1?2:1,opt)">{{canvasTab==1 ? '消费能力分析' : '消费人群分析'}}</div>
|
||||
<div class="customer-title">{{canvasTab==1? '消费人群': '消费能力'}}占比</div>
|
||||
<canvas canvas-id="sexCate" id="sexCate" class="operation-cate-content" @touchend="tap"></canvas>
|
||||
<div class="customer-title">年龄层占比</div>
|
||||
<canvas canvas-id="stockShare1" id="stockShare1" class="operation-stock-content" v-show="canvasTab==1" @touchend="tap"></canvas>
|
||||
<canvas canvas-id="stockShare2" id="stockShare2" class="operation-stock-content" v-show="canvasTab==2" @touchend="tap"></canvas>
|
||||
<div class="analysis-text" v-if="proportionList[canvasTab]">
|
||||
<span class="key-text">分析</span><span>{{proportionList[canvasTab][1]}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uCharts from '@/components/u-charts.js';
|
||||
let rincanvas = {}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
pieId: String,
|
||||
barId: String,
|
||||
show: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tab: [
|
||||
{id:1,name:'消费人群分析'},
|
||||
{id:2,name:'消费能力分析'},
|
||||
],
|
||||
canvasTab: 1,
|
||||
proportionList: {
|
||||
1: [],
|
||||
2: []
|
||||
},
|
||||
opt: null,
|
||||
pageEmpty: false,
|
||||
loading: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
refreshData(data) {
|
||||
// 刷新数据
|
||||
rincanvas['sexCate'].updateData({series:data[0]});
|
||||
this.$forceUpdate()
|
||||
},
|
||||
tabChange(name,opt) {
|
||||
this.canvasTab= name
|
||||
|
||||
if (this.proportionList[name].length == 0) {
|
||||
|
||||
this.getProportion(name, opt)
|
||||
} else {
|
||||
|
||||
this.refreshData(this.proportionList[name])
|
||||
}
|
||||
},
|
||||
async getProportion(type, params) {
|
||||
let _this = this
|
||||
_this.opt = params
|
||||
const data = await this.$request.$webGet('Customer/GetCustomerRatio', {
|
||||
statisticsType: type,
|
||||
...params
|
||||
})
|
||||
_this.loading = false
|
||||
if (data.Result_Code === 100 && data.Result_Data.List.length > 0) {
|
||||
|
||||
const list = data.Result_Data.List
|
||||
|
||||
let pieSerise = [{
|
||||
name: list[0].name,
|
||||
data: list[0].data[0],
|
||||
formatter: function(arg) {
|
||||
|
||||
if (typeof arg === 'number') {
|
||||
return [list[0].name, (arg * 100).toFixed(2) + '%']
|
||||
} else {
|
||||
return [arg.name, (arg._proportion_ * 100).toFixed(2) + '%']
|
||||
}
|
||||
// return [list[0].name, (arg * 100).toFixed(2) + '%']
|
||||
}
|
||||
},
|
||||
{
|
||||
name: list[1].name,
|
||||
data: list[1].data[0],
|
||||
formatter: function(arg) {
|
||||
if (typeof arg === 'number') {
|
||||
return [list[1].name, (arg * 100).toFixed(2) + '%']
|
||||
} else {
|
||||
return [arg.name, (arg._proportion_ * 100).toFixed(2) + '%']
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
]
|
||||
let clounm = [{
|
||||
name: list[2].name,
|
||||
data: ([]).concat(list[2].data),
|
||||
formatter: function(arg) {
|
||||
return [ arg + '%']
|
||||
}
|
||||
}]
|
||||
|
||||
_this.proportionList[type] = [
|
||||
pieSerise, await _this.getAnalysisDesc(type,params)
|
||||
]
|
||||
|
||||
_this.showPie({
|
||||
id: 'sexCate',
|
||||
data: pieSerise
|
||||
})
|
||||
_this.showClounm({
|
||||
id: 'stockShare'+type,
|
||||
data: clounm,
|
||||
categories: ['00后', '90后', '80后', '70后'],
|
||||
})
|
||||
|
||||
|
||||
this.$forceUpdate()
|
||||
|
||||
} else {
|
||||
this.pageEmpty = true
|
||||
}
|
||||
},
|
||||
async getAnalysisDesc(analysisType, params) {
|
||||
let _this = this
|
||||
|
||||
const data = await this.$request.$webGet('Customer/GetAnalysisDescDetail', {
|
||||
statisticsType: analysisType,
|
||||
...params
|
||||
})
|
||||
|
||||
return data.Result_Data.Analysis_Content || ''
|
||||
},
|
||||
tap(e) {
|
||||
rincanvas[e.target.id].touchLegend(e);
|
||||
rincanvas[e.target.id].showToolTip(e);
|
||||
},
|
||||
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: ['#667ED5', '#F6B760'],
|
||||
type: 'ring',
|
||||
fontSize: 12,
|
||||
// padding: [15, 15, 25, 15],
|
||||
legend: {
|
||||
show: false,
|
||||
padding: 5,
|
||||
lineHeight: 11,
|
||||
margin: 0,
|
||||
},
|
||||
background: '#FFFFFF',
|
||||
pixelRatio: 1,
|
||||
series: obj.data,
|
||||
animation: false,
|
||||
width: uni.upx2px(666),
|
||||
height: uni.upx2px(480),
|
||||
dataLabel: true,
|
||||
extra: {
|
||||
ring: {
|
||||
ringWidth: 40,
|
||||
labelWidth: 20,
|
||||
border: true,
|
||||
borderWidth: 1,
|
||||
color: '#777',
|
||||
borderColor: '#fff'
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
},
|
||||
showClounm(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,
|
||||
type: 'column',
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
color: ['#78BFB4'],
|
||||
fontSize: 12,
|
||||
background: '#FFFFFF',
|
||||
padding: [30, 12, 12, 12],
|
||||
animation: true,
|
||||
categories: obj.categories,
|
||||
series: data.series,
|
||||
enableScroll: false, //开启图表拖拽功能
|
||||
xAxis: {
|
||||
disabled: false,
|
||||
disableGrid: true,
|
||||
axisLine: false,
|
||||
fontColor: '#777777',
|
||||
labelCount: 5,
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
data: [{
|
||||
disabled: false,
|
||||
axisLine: false,
|
||||
fontColor: '#777777',
|
||||
formatter: (val) => {
|
||||
return parseInt(val) + '%'
|
||||
}
|
||||
}],
|
||||
|
||||
gridType: 'dash',
|
||||
gridColor: '#eee',
|
||||
dashLength: 2,
|
||||
splitNumber: 3,
|
||||
},
|
||||
dataLabel: true,
|
||||
width: uni.upx2px(686),
|
||||
height: uni.upx2px(420),
|
||||
extra: {
|
||||
column: {
|
||||
type: 'group',
|
||||
width: uni.upx2px(50)
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.customer-content {
|
||||
margin: 0 30rpx;
|
||||
border-radius: 8rpx;
|
||||
box-shadow: 0 2rpx 10rpx 0 rgba(230, 230, 230, 0.49);
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
margin-bottom: 48rpx;
|
||||
padding-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.customer-title {
|
||||
padding: 0 20rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.operation-cate-content {
|
||||
height: 480rpx;
|
||||
width: 690rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.operation-stock-content {
|
||||
height: 440rpx;
|
||||
width: 690rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.tab-btn {
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
width: 241rpx;
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: url(../../../static/images/revenue/tab-bg.png) no-repeat right;
|
||||
background-size: contain;
|
||||
}
|
||||
.tab-btn::before {
|
||||
content: '';
|
||||
background: url(../../../static/images/revenue/next.png) no-repeat center;
|
||||
background-size: contain;
|
||||
width: 40rpx;
|
||||
height: 16rpx;
|
||||
}
|
||||
.analysis-text {
|
||||
color: #9498A4;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
font-size: 24rpx;
|
||||
margin: 0 30rpx 0 30rpx;
|
||||
}
|
||||
|
||||
.key-text {
|
||||
min-width: 50rpx;
|
||||
background: #EA7F56;
|
||||
font-size: 22rpx;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
background: #ea7f56;
|
||||
border-radius: 5rpx;
|
||||
margin-right: 16rpx;
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
</style>
|
||||
115
pages/nationalPage/components/ServiceRevenuePie.vue
Normal file
115
pages/nationalPage/components/ServiceRevenuePie.vue
Normal file
@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<uni-ec-canvas
|
||||
class="uni-ec-canvas"
|
||||
id="revenuecharts"
|
||||
ref="revenuecharts"
|
||||
canvas-id="revenuecharts"
|
||||
:ec="ec"
|
||||
@inited="inited"
|
||||
></uni-ec-canvas>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniEcCanvas from './uni-ec-canvas/uni-ec-canvas.vue';
|
||||
export default {
|
||||
props:['data'],
|
||||
components:{
|
||||
uniEcCanvas
|
||||
},
|
||||
computed:{
|
||||
ec(){
|
||||
if(this.data){
|
||||
return {
|
||||
option:{
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c} ({d}%)'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '业态',
|
||||
type: 'pie',
|
||||
selectedMode: 'single',
|
||||
radius: [0, '32%'],
|
||||
center: ['50%','50%'],
|
||||
startAngle: 40,
|
||||
label: {
|
||||
// position: 'inner',
|
||||
formatter: '{b} \n {d}% ',
|
||||
fontSize: 13,
|
||||
color: '#D1D1D1',
|
||||
// show: false,
|
||||
},
|
||||
startAngle: 115,
|
||||
labelLine: {
|
||||
// show: false,
|
||||
length: 62,
|
||||
length2: 12,
|
||||
smooth: true,
|
||||
lineStyle:{
|
||||
color: '#D1D1D1'
|
||||
},
|
||||
|
||||
},
|
||||
data: [
|
||||
...this.data[0]
|
||||
],
|
||||
color:['#FEA427','#7786E3','#75B7AD','#9BC9F8','#FFAC37',]
|
||||
},
|
||||
{
|
||||
name: '业态',
|
||||
type: 'pie',
|
||||
radius: ['48%', '72%'],
|
||||
center: ['50%','50%'],
|
||||
labelLine: {
|
||||
length: 30,
|
||||
},
|
||||
label: {
|
||||
show:false,
|
||||
},
|
||||
|
||||
color: this.data[1].length> 7 ? ['#FFC3CD','#F4A4B2','#FE6582','#FFE7C0','#FEDA9D','#FEC057','#F9C8A0','#FAB176','#ffa25b','#E1C9F7','#CDA6F1',
|
||||
'#E0E2F6','#C5CDF9','#9AA6EF','#D8ECEA','#8FE5B2','#70D599','#ADE5EE'] :
|
||||
['#70D599', '#FFE7C0', '#ADE5EE','#C5CDF9','#e0e3f7', '#AFB7E6', '#F3B1C9' ],
|
||||
|
||||
data: [
|
||||
...this.data[1]
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
inited(chart){
|
||||
let _this =this
|
||||
// console.log('图表初始化完毕')
|
||||
// console.log('chart实例', this.ec)
|
||||
|
||||
chart.on('click',function(params){
|
||||
if(params.componentIndex==0){
|
||||
_this.$emit('selectCate',params.dataIndex+1)
|
||||
}
|
||||
// console.log(params)
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* page {
|
||||
background-color: #fff;
|
||||
} */
|
||||
.uni-ec-canvas{
|
||||
width: 690rpx;
|
||||
height: 526rpx;
|
||||
margin-top: 40rpx;
|
||||
display:block;
|
||||
}
|
||||
|
||||
</style>
|
||||
361
pages/nationalPage/components/anhuiYestodayRevenueData.js
Normal file
361
pages/nationalPage/components/anhuiYestodayRevenueData.js
Normal file
@ -0,0 +1,361 @@
|
||||
import request from '@/util/index.js'
|
||||
const methods = {
|
||||
async getData(obj,isServerPartDetail) { // 获取远程数据
|
||||
let _this = this
|
||||
/* ts 数据类型声明
|
||||
type serverpartRegion = {
|
||||
serverpartname:string,
|
||||
cashpay: string
|
||||
}
|
||||
tyepy reginListModel = {
|
||||
name:string,
|
||||
cashpay:number,
|
||||
child: serverpartRegion[]
|
||||
}
|
||||
*/
|
||||
// let regionList = [] // 营收上传列表 reginListModel[]
|
||||
this.groupType = obj.GroupType
|
||||
const requestParamas = {
|
||||
Statistics_Date: obj.time ,
|
||||
Statistics_Month: obj.month ,
|
||||
Province_Code: obj.ProvinceCode ,
|
||||
pushProvinceCode: obj.ProvinceCode ,
|
||||
Serverpart_ID: obj.GroupType != 1020 ? obj.ServerpartIds : '',
|
||||
SPRegionType_ID: obj.GroupType == 1020 ? obj.ServerpartIds : '',
|
||||
// Revenue_Include: 1
|
||||
}
|
||||
const requestParamasBudget = {
|
||||
Statistics_Date: obj.time ,
|
||||
Statistics_Month: obj.month ,
|
||||
Province_Code: obj.ProvinceCode ,
|
||||
pushProvinceCode: obj.ProvinceCode ,
|
||||
Serverpart_ID: obj.ServerpartIds ? obj.ServerpartIds : ''
|
||||
}
|
||||
this.provinceCode = obj.ProvinceCode
|
||||
// 营收数据
|
||||
const data = await request.$webGet('CommercialApi/Revenue/GetRevenuePushList', requestParamas)
|
||||
if (data.Result_Code != 100) return
|
||||
|
||||
// 在营门店数量统计
|
||||
const busniessCounts = await request.$webGet('CommercialApi/BaseInfo/GetShopCountList', requestParamas)
|
||||
if (busniessCounts.Result_Code != 100) return
|
||||
|
||||
// 业态关系
|
||||
const tradeData = await request.$webGet('CommercialApi/BaseInfo/GetBusinessTradeList', requestParamas)
|
||||
if (tradeData.Result_Code != 100) return
|
||||
|
||||
// 计划营收金额
|
||||
const budgetAmount = await request.$webGet('CommercialApi/Revenue/GetBudgetExpenseList', requestParamasBudget)
|
||||
if (budgetAmount.Result_Code != 100) return
|
||||
|
||||
// 移动支付分账数据
|
||||
const mobileShare = await request.$webGet('CommercialApi/Revenue/GetMobileShare', requestParamas)
|
||||
if (mobileShare.Result_Code != 100) return
|
||||
|
||||
// 万佳商城配送数据
|
||||
const mallDeliver = await request.$webGet('CommercialApi/Revenue/GetMallDeliver', requestParamas)
|
||||
if (mallDeliver.Result_Code != 100) return
|
||||
|
||||
// 片区车流量
|
||||
const bayonetCount = await request.$webGet('CommercialApi/Revenue/GetSPBayonetList', requestParamas)
|
||||
if (bayonetCount.Result_Code != 100) return
|
||||
|
||||
if (isServerPartDetail) { // 是服务区营收推送页面
|
||||
return _this.getSeverpartReginList(data.Result_Data.List, busniessCounts.Result_Data.List,
|
||||
tradeData.Result_Data.List, budgetAmount.Result_Data.List)
|
||||
}
|
||||
return _this.getReginList(data.Result_Data.List, busniessCounts.Result_Data.List,
|
||||
tradeData.Result_Data.List, budgetAmount.Result_Data.List,
|
||||
bayonetCount.Result_Data.List, mobileShare.Result_Data, mallDeliver.Result_Data)
|
||||
// [reginList, totalData, busniessTypePie, busniessTradePie]
|
||||
|
||||
},
|
||||
getTotalShowData(newData, oldData,index) {
|
||||
// <TotalModel>
|
||||
/*
|
||||
type TotalModel = {
|
||||
ticketCount: number // 客单数量 ,
|
||||
totalCount: number// 总数量 ,
|
||||
totalOffAmount: number// 优惠金额 ,
|
||||
mobilePayment: number// 移动支付金额 ,
|
||||
cashPay: number// 实收金额 ,
|
||||
different_Price_Less: number// 短款金额 ,
|
||||
different_Price_More: number// 长款金额 ,
|
||||
}
|
||||
*/
|
||||
|
||||
if (index>0) {
|
||||
oldData.ticketCount += newData.TicketCount
|
||||
oldData.totalCount += newData.TotalCount
|
||||
oldData.totalOffAmount += newData.TotalOffAmount
|
||||
oldData.mobilePayment += newData.MobilePayment
|
||||
oldData.cashPay += newData.CashPay
|
||||
oldData.diffLessPrice += newData.Different_Price_Less
|
||||
oldData.diffMorePrice += newData.Different_Price_More
|
||||
if(newData.BusinessType==1000){ // 商超
|
||||
|
||||
oldData.scCount = oldData.scCount ? oldData.scCount + 1 : 1
|
||||
oldData.scCashPay = oldData.scCashPay ? oldData.scCashPay + newData.CashPay : newData.CashPay
|
||||
}
|
||||
if(newData.BusinessType==3000){ // 餐饮
|
||||
oldData.cyCount = oldData.cyCount ? oldData.cyCount + 1 : 1
|
||||
oldData.cyCashPay = oldData.cyCashPay ? oldData.cyCashPay + newData.CashPay : newData.CashPay
|
||||
}
|
||||
} else {
|
||||
oldData.ticketCount = newData.TicketCount
|
||||
oldData.totalCount = newData.TotalCount
|
||||
oldData.totalOffAmount = newData.TotalOffAmount
|
||||
oldData.mobilePayment = newData.MobilePayment
|
||||
oldData.cashPay = newData.CashPay
|
||||
oldData.diffLessPrice = newData.Different_Price_Less
|
||||
oldData.diffMorePrice = newData.Different_Price_More
|
||||
|
||||
if(newData.BusinessType==1000){ // 商超
|
||||
|
||||
oldData.scCount = 1
|
||||
oldData.scCashPay = newData.CashPay
|
||||
}
|
||||
if(newData.BusinessType==3000){ // 餐饮
|
||||
|
||||
oldData.cyCount = 1
|
||||
oldData.cyCashPay = newData.CashPay
|
||||
}
|
||||
|
||||
}
|
||||
return {...oldData}
|
||||
},
|
||||
getBusniessPie(typeName, item, list) { // 经营模式数据
|
||||
|
||||
const oldData = list.find(m => m.name === item[typeName])
|
||||
if (oldData) {
|
||||
oldData.data = Number((oldData.data+ item.CashPay).toFixed(2))
|
||||
oldData.value = Number((oldData.value+ item.CashPay).toFixed(2))
|
||||
} else {
|
||||
list.push({
|
||||
name: item[typeName],
|
||||
data: item.CashPay,
|
||||
value: item.CashPay,
|
||||
})
|
||||
}
|
||||
|
||||
return [...list]
|
||||
},
|
||||
getBayonetPie(typeName, item, list) { // 车流量数据
|
||||
const regionData = list.find(n => n.name === item["SPRegionType_Name"])
|
||||
if (regionData) {
|
||||
const oldData = regionData.spList.find(m => m.name === item[typeName])
|
||||
if (oldData) {
|
||||
oldData.Vehicle_Count = Number((oldData.Vehicle_Count + item.Vehicle_Count).toFixed(2))
|
||||
oldData.SectionFlow_Count = Number((oldData.SectionFlow_Count + item.SectionFlow_Count).toFixed(2))
|
||||
oldData.MinVehicle_Count = Number((oldData.MinVehicle_Count + item.MinVehicle_Count).toFixed(2))
|
||||
oldData.MediumVehicle_Count = Number((oldData.MediumVehicle_Count + item.MediumVehicle_Count).toFixed(2))
|
||||
oldData.LargeVehicle_Count = Number((oldData.LargeVehicle_Count + item.LargeVehicle_Count).toFixed(2))
|
||||
|
||||
const oldRegion = oldData.regionList.find(o => o.name === item["Serverpart_Region"])
|
||||
if (oldRegion) {
|
||||
oldRegion.Vehicle_Count = Number((oldRegion.Vehicle_Count + item.Vehicle_Count).toFixed(2))
|
||||
oldRegion.SectionFlow_Count = Number((oldRegion.SectionFlow_Count + item.SectionFlow_Count).toFixed(2))
|
||||
oldRegion.MinVehicle_Count = Number((oldRegion.MinVehicle_Count + item.MinVehicle_Count).toFixed(2))
|
||||
oldRegion.MediumVehicle_Count = Number((oldRegion.MediumVehicle_Count + item.MediumVehicle_Count).toFixed(2))
|
||||
oldRegion.LargeVehicle_Count = Number((oldRegion.LargeVehicle_Count + item.LargeVehicle_Count).toFixed(2))
|
||||
}
|
||||
else{
|
||||
oldData.regionList.push({
|
||||
name: item["Serverpart_Region"],
|
||||
Vehicle_Count: item.Vehicle_Count,
|
||||
SectionFlow_Count: item.SectionFlow_Count,
|
||||
MinVehicle_Count: item.MinVehicle_Count,
|
||||
MediumVehicle_Count: item.MediumVehicle_Count,
|
||||
LargeVehicle_Count: item.LargeVehicle_Count,
|
||||
})
|
||||
}
|
||||
} else {
|
||||
regionData.spList.push({
|
||||
name: item[typeName],
|
||||
Vehicle_Count: item.Vehicle_Count,
|
||||
SectionFlow_Count: item.SectionFlow_Count,
|
||||
MinVehicle_Count: item.MinVehicle_Count,
|
||||
MediumVehicle_Count: item.MediumVehicle_Count,
|
||||
LargeVehicle_Count: item.LargeVehicle_Count,
|
||||
regionList: [{
|
||||
name: item["Serverpart_Region"],
|
||||
Vehicle_Count: item.Vehicle_Count,
|
||||
SectionFlow_Count: item.SectionFlow_Count,
|
||||
MinVehicle_Count: item.MinVehicle_Count,
|
||||
MediumVehicle_Count: item.MediumVehicle_Count,
|
||||
LargeVehicle_Count: item.LargeVehicle_Count,
|
||||
}]
|
||||
})
|
||||
}
|
||||
} else {
|
||||
list.push({
|
||||
name: item["SPRegionType_Name"],
|
||||
index: item["SPRegionType_Index"],
|
||||
spList: [{
|
||||
name: item[typeName],
|
||||
Vehicle_Count: item.Vehicle_Count,
|
||||
SectionFlow_Count: item.SectionFlow_Count,
|
||||
MinVehicle_Count: item.MinVehicle_Count,
|
||||
MediumVehicle_Count: item.MediumVehicle_Count,
|
||||
LargeVehicle_Count: item.LargeVehicle_Count,
|
||||
regionList: [{
|
||||
name: item["Serverpart_Region"],
|
||||
Vehicle_Count: item.Vehicle_Count,
|
||||
SectionFlow_Count: item.SectionFlow_Count,
|
||||
MinVehicle_Count: item.MinVehicle_Count,
|
||||
MediumVehicle_Count: item.MediumVehicle_Count,
|
||||
LargeVehicle_Count: item.LargeVehicle_Count,
|
||||
}],
|
||||
}]
|
||||
})
|
||||
}
|
||||
|
||||
return [...list]
|
||||
},
|
||||
getSeverpartReginList(data, shopCountList,tradeList,budgetAmount){
|
||||
let _this = this
|
||||
let totalShow = {} // 总营收数据统计
|
||||
let list = [] // 上传营收列表数据
|
||||
let busniessTypePie = [] // 经营模式饼图统计数据
|
||||
let busniessTradePie = [] // 经营业态饼图统计数据
|
||||
let busniessTradeFathPie = [] // 区域经营饼图统计数据
|
||||
|
||||
data.map(async (n, index) => {
|
||||
n.show = false
|
||||
totalShow = _this.getTotalShowData(n, totalShow,index); // 总营收数据统计
|
||||
// 寻找门店父业态
|
||||
let trade = tradeList.find(t=>t.BUSINESSTRADE_NAME==n.BusinessTrade_Name)
|
||||
if(trade && trade.BUSINESSTRADE_PNAME && trade.BUSINESSTRADE_PNAME.indexOf('其他')==-1 ) {
|
||||
n.tradename = trade.BUSINESSTRADE_PNAME
|
||||
|
||||
}else{
|
||||
n.tradename = '其他'
|
||||
}
|
||||
|
||||
busniessTypePie = _this.getBusniessPie('Business_TypeName', n, busniessTypePie)
|
||||
busniessTradePie = _this.getBusniessPie('BusinessTrade_Name', n, busniessTradePie)
|
||||
busniessTradeFathPie = _this.getBusniessPie('tradename', n, busniessTradeFathPie)
|
||||
})
|
||||
totalShow.serverpartname = data[0].Serverpart_Name
|
||||
totalShow.uploadState = data.length+'/'+ (shopCountList.length ? shopCountList[0].SHOP_BUSINESSCOUNT: 0)
|
||||
totalShow.uploadCount = data.filter(n=>n.Revenue_Upload>0).length
|
||||
totalShow.totalUploadCount = shopCountList.length ? shopCountList[0].SHOP_BUSINESSCOUNT: 0
|
||||
totalShow.budgetAmount = 0
|
||||
if(budgetAmount.length){
|
||||
totalShow.budgetAmount = budgetAmount[0].BUDGET_AMOUNT
|
||||
}
|
||||
return [ totalShow, busniessTypePie, busniessTradePie,busniessTradeFathPie ]
|
||||
},
|
||||
getReginList(data, shopCountList,tradeList,budgetAmount,bayonetCount, mobileShare, mallDeliver) {
|
||||
|
||||
let _this = this
|
||||
let totalShow = {} // 总营收数据统计
|
||||
let list = [] // 上传营收列表数据
|
||||
let busniessTypePie = [] // 经营模式饼图统计数据
|
||||
let busniessTradePie = [] // 经营业态饼图统计数据
|
||||
let busniessAreaPie = [] // 区域经营饼图统计数据
|
||||
let bayonetPie = [] // 区域车流饼图统计数据
|
||||
let totalUploadCount = 0
|
||||
data.map(async (n, index) => {
|
||||
n.show = false
|
||||
|
||||
// 寻找门店父业态
|
||||
let trade = tradeList.find(t=>t.BUSINESSTRADE_NAME==n.BusinessTrade_Name)
|
||||
if(trade && trade.BUSINESSTRADE_PNAME && trade.BUSINESSTRADE_PNAME.indexOf('其他')==-1 ) {
|
||||
n.tradename = trade.BUSINESSTRADE_PNAME
|
||||
|
||||
}else{
|
||||
n.tradename = _this.provinceCode==340000? '其他' : (n.BusinessTrade_Name || '其他')
|
||||
}
|
||||
// 上传营收情况
|
||||
let regin = list.find(m => m.name === n.SPRegionType_Name)
|
||||
let [reginShopCount, serverpartShopCount] = [0, 0]
|
||||
shopCountList.forEach(shop => {
|
||||
if (shop.SPREGIONTYPE_NAME == n.SPRegionType_Name) {
|
||||
reginShopCount += shop.SHOP_BUSINESSCOUNT
|
||||
}
|
||||
if (shop.SERVERPART_ID == n.Serverpart_ID) {
|
||||
serverpartShopCount = shop.SHOP_BUSINESSCOUNT
|
||||
}
|
||||
})
|
||||
|
||||
if (!regin) {
|
||||
totalUploadCount += reginShopCount
|
||||
list.push({
|
||||
name: n.SPRegionType_Name, // 区域名称
|
||||
cashpay: n.CashPay,
|
||||
uploadcount: n.Revenue_Upload>0 ? 1: 0, // 区域上传数量
|
||||
totalcount: reginShopCount,
|
||||
child: [{
|
||||
serverpart_Id: n.Serverpart_ID,
|
||||
serverpart_Name: n.Serverpart_Name,
|
||||
cashpay: n.CashPay,
|
||||
uploadcount: n.Revenue_Upload>0 ? 1: 0,
|
||||
totalcount: serverpartShopCount
|
||||
}]
|
||||
})
|
||||
} else {
|
||||
regin.cashpay += n.CashPay
|
||||
regin.uploadcount += n.Revenue_Upload>0 ? 1: 0
|
||||
let serverpart = regin.child.find(m => m.serverpart_Name === n.Serverpart_Name)
|
||||
if (serverpart) {
|
||||
serverpart.cashpay += n.CashPay
|
||||
serverpart.uploadcount += n.Revenue_Upload>0 ? 1: 0
|
||||
|
||||
} else {
|
||||
regin.child.push({
|
||||
serverpart_Id: n.Serverpart_ID,
|
||||
serverpart_Name: n.Serverpart_Name,
|
||||
cashpay: n.CashPay,
|
||||
uploadcount: n.Revenue_Upload>0 ? 1: 0,
|
||||
totalcount: serverpartShopCount
|
||||
})
|
||||
}
|
||||
|
||||
regin.child.sort((a, b) => b.cashpay - a.cashpay)
|
||||
}
|
||||
totalShow = _this.getTotalShowData(n, totalShow,index); // 总营收数据统计
|
||||
|
||||
busniessTypePie = _this.getBusniessPie('Business_TypeName', n, busniessTypePie)
|
||||
busniessTradePie = _this.getBusniessPie('tradename', n, busniessTradePie)
|
||||
if (this.groupType == 1000){
|
||||
busniessAreaPie = _this.getBusniessPie('SPRegionType_Name', n, busniessAreaPie)
|
||||
}
|
||||
})
|
||||
list.sort((a, b) => b.cashpay - a.cashpay)
|
||||
if (this.groupType == 1000 && _this.provinceCode == 340000) {
|
||||
// 获取移动支付分账数据
|
||||
if (mobileShare) {
|
||||
totalShow.shareShopCount = mobileShare.ShareShop_Count
|
||||
totalShow.royaltyPrice = mobileShare.Royalty_Price
|
||||
totalShow.subRoyaltyPrice = mobileShare.SubRoyalty_Price
|
||||
totalShow.ticketFee = mobileShare.Ticket_Fee
|
||||
}
|
||||
// 获取移动支付分账数据
|
||||
if (mallDeliver) {
|
||||
totalShow.deliverBillCount = mallDeliver.DeliverBill_Count
|
||||
totalShow.deliverPrice = mallDeliver.Deliver_Price
|
||||
totalShow.deliverRate = mallDeliver.Deliver_Rate
|
||||
}
|
||||
// 片区车流量数据
|
||||
bayonetCount.map(async (n, index) => {
|
||||
bayonetPie = _this.getBayonetPie('Serverpart_Name', n, bayonetPie)
|
||||
})
|
||||
}
|
||||
|
||||
totalShow.uploadState = data.filter(n=>n.Revenue_Upload>0).length+'/'+totalUploadCount
|
||||
totalShow.budgetAmount = 0
|
||||
if(_this.provinceCode==620000){
|
||||
const ele = list.find(n=>n.name=="通美公司")
|
||||
totalShow.tmCrashPay = ele ? ele.cashpay :'0.00'
|
||||
}
|
||||
if(budgetAmount.length){
|
||||
totalShow.budgetAmount = budgetAmount[0].BUDGET_AMOUNT
|
||||
}
|
||||
console.log('list',list)
|
||||
return [list, totalShow, busniessTypePie, busniessTradePie,busniessAreaPie,bayonetPie]
|
||||
}
|
||||
}
|
||||
|
||||
export default methods ;
|
||||
|
||||
1179
pages/nationalPage/nationalServerpart.vue
Normal file
1179
pages/nationalPage/nationalServerpart.vue
Normal file
File diff suppressed because it is too large
Load Diff
985
pages/nationalPage/rankPage.vue
Normal file
985
pages/nationalPage/rankPage.vue
Normal file
@ -0,0 +1,985 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="contentPage">
|
||||
<div class="revenueDetail">
|
||||
<div class="revenueDetailTitleBox">
|
||||
<img class="detailLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueDetailLogo.png"/>
|
||||
<img class="detailIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueDetailIcon.png"/>
|
||||
<!-- <text class="modalUnit">{{selectDateText || ''}}</text>-->
|
||||
<text class="modalUnit">{{`/统计到${allDateDay || ''}`}}</text>
|
||||
</div>
|
||||
<div class="revenueContent">
|
||||
<div class="navBigList">
|
||||
<div class="allBox">
|
||||
<div :class="currentScroll==='all'?'scrollItem selectItem':'scrollItem'" @click="handleChangeTime('all')">累计</div>
|
||||
</div>
|
||||
<scroll-view scroll-x="true" class="navList" :scrollIntoView="currentScroll" :scroll-with-animation="true">
|
||||
<div :class="currentScroll==='item'+item.value?'scrollItem selectItem':'scrollItem'" v-for="(item,index) in scrollList" :key="index" :id="'item'+item.value" @click="handleChangeTime(item.value)">{{item.label}}</div>
|
||||
</scroll-view>
|
||||
</div>
|
||||
<!-- <span class="dateText">{{selectDateText || ''}}</span>-->
|
||||
<div class="modalBox">
|
||||
<div class="modalTitleBox">
|
||||
<div class="modalTitleItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">
|
||||
<div class="modalIndex"></div>
|
||||
<text class="modalText">{{ type===1?'对客销售':type===2?'营业收入':type===3?'入区车流':'' }}</text>
|
||||
<text class="modalUnit">{{type===3?'/万辆':'/万元'}}</text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<view class="sortBox">
|
||||
<view class="sortItem" @click="handleChangeSortName(1)">
|
||||
<text class="sortText">{{ `24年${type === 1 ? '销售' : type === 2 ? '营收' : type === 3 ? '车流' : ''}` }}</text>
|
||||
<view class="sortIconBox">
|
||||
<image class="upIcon" :style="{transform: sortName===1?sortType===1?``:`rotate(180deg)`:``}" :src="sortType===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg':sortName===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
|
||||
<image class="bottomIcon" :style="{transform: sortName===1?sortType===1?``:`rotate(180deg)`:'rotate(-180deg)'}":src="sortType===1 && sortName===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="sortItem" @click="handleChangeSortName(2)">
|
||||
<text class="sortText">{{ `23年${type === 1 ? '销售' : type === 2 ? '营收' : type === 3 ? '车流' : ''}` }}</text>
|
||||
<view class="sortIconBox">
|
||||
<image class="upIcon" :style="{transform: sortName===2?sortType===1?``:`rotate(180deg)`:``}" :src="sortType===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg':sortName===2?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
|
||||
<image class="bottomIcon" :style="{transform: sortName===2?sortType===1?``:`rotate(180deg)`:'rotate(-180deg)'}":src="sortType===1 && sortName===2?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="sortItem" @click="handleChangeSortName(3)">
|
||||
<text class="sortText">{{ `${type === 1 ? '销售' : type === 2 ? '营收' : type === 3 ? '车流' : ''}增长` }}</text>
|
||||
<view class="sortIconBox">
|
||||
<image class="upIcon" :style="{transform: sortName===3?sortType===1?``:`rotate(180deg)`:``}" :src="sortType===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg':sortName===3?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
|
||||
<image class="bottomIcon" :style="{transform: sortName===3?sortType===1?``:`rotate(180deg)`:'rotate(-180deg)'}":src="sortType===1 && sortName===3?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="sortItem" @click="handleChangeSortName(4)">
|
||||
<text class="sortText">{{ `${type === 1 ? '销售' : type === 2 ? '营收' : type === 3 ? '车流' : ''}增幅` }}</text>
|
||||
<view class="sortIconBox">
|
||||
<image class="upIcon" :style="{transform: sortName===4?sortType===1?``:`rotate(180deg)`:``}" :src="sortType===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg':sortName===4?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
|
||||
<image class="bottomIcon" :style="{transform: sortName===4?sortType===1?``:`rotate(180deg)`:'rotate(-180deg)'}":src="sortType===1 && sortName===4?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<div class="modalDetail">
|
||||
<!-- <div class="modalDetailTitle">-->
|
||||
<!-- <div class="titleItem" :style="{width: 'calc(100% - 440rpx)',textAlign:'left'}">服务区</div>-->
|
||||
<!-- <div class="titleItem" style="width: 110rpx">2024年</div>-->
|
||||
<!-- <div class="titleItem" style="width: 110rpx">2023年</div>-->
|
||||
<!-- <div class="titleItem" style="width: 110rpx">增长</div>-->
|
||||
<!-- <div class="titleItem" style="width: 110rpx">增幅</div>-->
|
||||
<!-- </div>-->
|
||||
<scroll-view :scroll-y="true" class="typeFirst" >
|
||||
<div class="listItem" v-for="(item,index) in dataList" :key="index">
|
||||
<div class="itemLeft" >
|
||||
<image class="bg" src="https://eshangtech.com/ShopICO/ahyd-BID/car/itemLeftBg.svg"/>
|
||||
<view class="nameBox">
|
||||
<text class="serviceName">{{item.ServerpartName ? item.ServerpartName.split('服务区')[0]:''}}</text>
|
||||
<text class="serviceLabel">服务区</text>
|
||||
</view>
|
||||
</div>
|
||||
<div class="contentRight">
|
||||
<div class="rightTop">
|
||||
<view class="rightTopLeft">
|
||||
<view class="indexBox" :style="{backgroundImage:`url(${index===0?'https://eshangtech.com/ShopICO/ahyd-BID/car/1stBg.svg':index===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/2stBg.svg':index===2?'https://eshangtech.com/ShopICO/ahyd-BID/car/3stBg.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/4stBg.svg'})`}">{{index+1}}</view>
|
||||
</view>
|
||||
<view class="rightTopRight">
|
||||
<text class="entryRateLabel">增幅</text>
|
||||
<div class="entryRateValue">
|
||||
<span :style="{color: type===1?item.RevenueINC.increaseRate>0?'#E83944':'#0E9976': type===2?item.AccountINC.increaseRate>0?'#E83944':'#0E9976': type===3?item.BayonetINC.increaseRate>0?'#E83944':'#0E9976':'-'}">
|
||||
{{type===1?item.RevenueINC.increaseRate>0?'+':'': type===2?item.AccountINC.increaseRate>0?'+':'': type===3?item.BayonetINC.increaseRate>0?'+':'':'-'}}
|
||||
</span>
|
||||
<span :style="{color: type===1?item.RevenueINC.increaseRate>0?'#E83944':'#0E9976': type===2?item.AccountINC.increaseRate>0?'#E83944':'#0E9976': type===3?item.BayonetINC.increaseRate>0?'#E83944':'#0E9976':'-'}">
|
||||
{{type===1?item.RevenueINC.increaseRate?item.RevenueINC.increaseRate:'-' :
|
||||
type===2?item.AccountINC.increaseRate?item.AccountINC.increaseRate:'-' :
|
||||
type===3?item.BayonetINC.increaseRate?item.BayonetINC.increaseRate:'-' :'-'}}%
|
||||
</span>
|
||||
</div>
|
||||
</view>
|
||||
</div>
|
||||
<div class="rightBottom">
|
||||
<view class="rightBottomItem">
|
||||
<text class="itemLabel">{{curYear}}</text>
|
||||
<text class="itemValue">
|
||||
{{type===1?item.RevenueINC.curYearData?$util.getMoney(item.RevenueINC.curYearData / 10000):'0.00':
|
||||
type===2?item.AccountINC.curYearData?$util.getMoney(item.AccountINC.curYearData / 10000):'0.00':
|
||||
type===3?item.BayonetINC.curYearData?$util.getMoney(item.BayonetINC.curYearData / 10000):'0.00':'-'}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="rightBottomItem">
|
||||
<text class="itemLabel">{{ compareYear }}</text>
|
||||
<text class="itemValue">
|
||||
{{type===1?item.RevenueINC.lYearData?$util.getMoney(item.RevenueINC.lYearData / 10000):'0.00':
|
||||
type===2?item.AccountINC.lYearData?$util.getMoney(item.AccountINC.lYearData / 10000):'0.00':
|
||||
type===3?item.BayonetINC.lYearData?$util.getMoney(item.BayonetINC.lYearData / 10000):'0.00':'-'}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="rightBottomItem">
|
||||
<text class="itemLabel">增长</text>
|
||||
<text class="itemValue">
|
||||
{{type===1?item.RevenueINC.increaseData?$util.getMoney(item.RevenueINC.increaseData / 10000):'0.00':
|
||||
type===2?item.RevenueINC.AccountINC?$util.getMoney(item.AccountINC.increaseData / 10000):'0.00':
|
||||
type===3?item.BayonetINC.increaseData?$util.getMoney(item.BayonetINC.increaseData / 10000):'0.00':'-'}}
|
||||
</text>
|
||||
</view>
|
||||
</div>
|
||||
|
||||
<div class="rightBottom" v-if="type!==3">
|
||||
<view class="rightBottomItem">
|
||||
<text class="itemValue">
|
||||
{{item.BayonetINC.curYearData?$util.getMoney(item.BayonetINC.curYearData / 10000):'0.00'}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="rightBottomItem">
|
||||
<text class="itemValue">
|
||||
{{item.BayonetINC.lYearData?$util.getMoney(item.BayonetINC.lYearData / 10000):'0.00'}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="rightBottomItem">
|
||||
<text class="itemValue">
|
||||
{{item.BayonetINC.increaseData?$util.getMoney(item.BayonetINC.increaseData / 10000):'0.00'}}
|
||||
</text>
|
||||
</view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="row" v-for="(item,index) in dataList" :key="index">-->
|
||||
<!-- <div class="valueItem bigFather" :style="{width: 'calc(100% - 430rpx)',textAlign:'left'}">{{item.ServerpartName.split('服务区')[0]}}</div>-->
|
||||
<!-- <div class="compareItem" style="width: 110rpx">-->
|
||||
<!-- {{type===1?item.RevenueINC.curYearData?$util.getMoney(item.RevenueINC.curYearData / 10000):'0.00':-->
|
||||
<!-- type===2?'':-->
|
||||
<!-- type===3?item.BayonetINC.curYearData?$util.getMoney(item.BayonetINC.curYearData / 10000):'0.00':'-'}}-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="compareItem" style="width: 110rpx">-->
|
||||
<!-- {{type===1?item.RevenueINC.lYearData?$util.getMoney(item.RevenueINC.lYearData / 10000):'0.00':-->
|
||||
<!-- type===2?'':-->
|
||||
<!-- type===3?item.BayonetINC.lYearData?$util.getMoney(item.BayonetINC.lYearData / 10000):'0.00':'-'}}-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="compareItem" style="width: 110rpx">-->
|
||||
<!-- <span>{{type===1?item.RevenueINC.increaseData?$util.getMoney(item.RevenueINC.increaseData / 10000):'0.00':-->
|
||||
<!-- type===2?'':-->
|
||||
<!-- type===3?item.BayonetINC.increaseData?$util.getMoney(item.BayonetINC.increaseData / 10000):'0.00':'-'}}</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="addItem" style="width: 110rpx">-->
|
||||
<!-- <span :style="{color: type===1?item.RevenueINC.increaseRate>0?'#E83944':'#0E9976': type===2?'': type===3?item.BayonetINC.increaseRate>0?'#E83944':'#0E9976':'-'}">-->
|
||||
<!-- {{type===1?item.RevenueINC.increaseRate>0?'+':'': type===2?'': type===3?item.BayonetINC.increaseRate>0?'+':'':'-'}}-->
|
||||
<!-- </span>-->
|
||||
<!-- <span :style="{color: type===1?item.RevenueINC.increaseRate>0?'#E83944':'#0E9976': type===2?'': type===3?item.BayonetINC.increaseRate>0?'#E83944':'#0E9976':'-'}">-->
|
||||
<!-- {{type===1?item.RevenueINC.increaseRate?item.RevenueINC.increaseRate:'-' :-->
|
||||
<!-- type===2?'':-->
|
||||
<!-- type===3?item.BayonetINC.increaseRate?item.BayonetINC.increaseRate:'-' :'-'}}%-->
|
||||
<!-- </span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</scroll-view>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import request from '@/util/index.js'
|
||||
export default {
|
||||
name: "rankPage",
|
||||
data(){
|
||||
return {
|
||||
scrollList:[],
|
||||
selectDateText:'',
|
||||
currentScroll:'',
|
||||
lastDay:'',
|
||||
allDateDay:'',
|
||||
dataList:[],
|
||||
type: 0,
|
||||
useInfo:{},
|
||||
curYear:'',
|
||||
compareYear:'',
|
||||
ServerpartIds:'',
|
||||
sortType: 1,// 正序降序 0正序 1降序
|
||||
sortName: 4,// 排序字段 1 24年营收 2 23年营收 3营收增长 4营收增幅
|
||||
}
|
||||
},
|
||||
onLoad(query){
|
||||
if (query.type){
|
||||
this.type = Number(query.type)
|
||||
}
|
||||
this.lastDay = uni.getStorageSync('lastDay')
|
||||
if (query.time){
|
||||
this.currentScroll = 'item'+ query.time
|
||||
}else{
|
||||
this.currentScroll = 'item'+ this.lastDay
|
||||
}
|
||||
|
||||
this.ServerpartIds = query.ServerpartIds
|
||||
|
||||
// 获取用户信息
|
||||
let userInfo = uni.getStorageSync('vuex')
|
||||
userInfo = JSON.parse(userInfo)
|
||||
this.useInfo = JSON.parse(JSON.stringify(userInfo))
|
||||
// 拿到是春运开始的第几天
|
||||
let dayNumber = 0
|
||||
const lastDate = new Date(this.lastDay)
|
||||
let y = lastDate.getFullYear()
|
||||
this.curYear = y
|
||||
this.compareYear = y - 1
|
||||
let lastMonth = lastDate.getMonth() + 1
|
||||
let lastDays = lastDate.getDate()
|
||||
this.allDateDay = `${lastMonth<10?'0'+lastMonth:lastMonth}月${lastDays<10?'0'+lastDays:lastDays}日`
|
||||
// 24年春运开始时间为 1.26
|
||||
if (lastMonth === 1){
|
||||
dayNumber = lastDays - 26 + 1
|
||||
}else{
|
||||
dayNumber = 6 + lastDays + 1
|
||||
}
|
||||
this.howDayNumber = dayNumber
|
||||
let dateList = []
|
||||
for (let i = 1;i<=dayNumber;i++){
|
||||
if (i<7){
|
||||
dateList.push({label:`第${i}天`,value:`2024-01-${26+i-1}`})
|
||||
}else{
|
||||
dateList.push({label:`第${i}天`,value:`2024-02-${i - 7 + 1<10?`0${i - 7 + 1}`:i - 7 + 1}`})
|
||||
}
|
||||
}
|
||||
this.scrollList = dateList
|
||||
this.selectDateText = dateList[dayNumber-1].value
|
||||
|
||||
this.handleGetData()
|
||||
},
|
||||
methods:{
|
||||
// 点击了累计还是选择了日期
|
||||
handleChangeTime(date){
|
||||
if (date==='all'){
|
||||
this.currentScroll = 'all'
|
||||
const time = new Date(this.lastDay)
|
||||
let m = time.getMonth()+1
|
||||
let d = time.getDate()
|
||||
this.allDateDay = `${m<10?'0'+m:m}月${d<10?'0' + d:d}日`
|
||||
}else{
|
||||
this.currentScroll = 'item'+ date
|
||||
const time = new Date(date)
|
||||
let m = time.getMonth()+1
|
||||
let d = time.getDate()
|
||||
this.allDateDay = `${m<10?'0'+m:m}月${d<10?'0' + d:d}日`
|
||||
}
|
||||
|
||||
this.handleGetData(date)
|
||||
|
||||
},
|
||||
// 获取排名信息
|
||||
async handleGetData(date){
|
||||
uni.showLoading({
|
||||
title: '正在加载...'
|
||||
})
|
||||
let time = date?date==='all'?this.lastDay:this.currentScroll.split('item')[1]:this.currentScroll.split('item')[1]
|
||||
const req = {
|
||||
calcType:this.currentScroll==='all'?1:2,
|
||||
pushProvinceCode: this.useInfo.userData.ProvinceCode || '340000',
|
||||
curYear: this.curYear,
|
||||
compareYear: this.compareYear,
|
||||
HolidayType:2,
|
||||
StatisticsDate:time,
|
||||
businessRegion:1,
|
||||
SortStr:`${this.type===1?'revenue':this.type===2?'account':this.type===3?'bayonet':''} ${this.sortType===0?'asc':'desc'}`
|
||||
}
|
||||
// this.dataList
|
||||
const data = await request.$webGet('CommercialApi/Revenue/GetServerpartINCAnalysis',req)
|
||||
console.log('data',data)
|
||||
this.dataList = this.handleGetSort(data.Result_Data.List)
|
||||
uni.hideLoading()
|
||||
},
|
||||
// 修改排序字段
|
||||
handleChangeSortName(value){
|
||||
uni.showLoading({
|
||||
title: '正在加载...'
|
||||
})
|
||||
if (value===this.sortName){
|
||||
if (this.sortType===1){
|
||||
this.sortType=0
|
||||
}else{
|
||||
this.sortType=1
|
||||
}
|
||||
}else{
|
||||
this.sortName = value
|
||||
this.sortType=1
|
||||
}
|
||||
let list = this.handleGetSort(this.dataList)
|
||||
this.dataList = list
|
||||
this.$forceUpdate()
|
||||
uni.hideLoading()
|
||||
},
|
||||
// 排序方法
|
||||
handleGetSort(list){
|
||||
var len = list.length;
|
||||
|
||||
for (var i = 0; i < len - 1; i++) {
|
||||
for (var j = 0; j < len - 1 - i; j++) {
|
||||
// 判断按照那个排序
|
||||
if (this.type===1){
|
||||
// 正序
|
||||
if (this.sortType===0){
|
||||
// 24年营收
|
||||
if (this.sortName===1){
|
||||
if (list[j].RevenueINC.curYearData > list[j + 1].RevenueINC.curYearData) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
// 23年营收
|
||||
}else if(this.sortName===2){
|
||||
if (list[j].RevenueINC.lYearData > list[j + 1].RevenueINC.lYearData) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
// 营收增长
|
||||
}else if(this.sortName===3){
|
||||
if (list[j].RevenueINC.increaseData > list[j + 1].RevenueINC.increaseData) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
// 营收增幅
|
||||
}else if(this.sortName===4){
|
||||
if (list[j].RevenueINC.increaseRate > list[j + 1].RevenueINC.increaseRate ) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
else{
|
||||
// 降序
|
||||
// 24年营收
|
||||
if (this.sortName===1){
|
||||
if (list[j].RevenueINC.curYearData < list[j + 1].RevenueINC.curYearData) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
// 23年营收
|
||||
}else if(this.sortName===2){
|
||||
if (list[j].RevenueINC.lYearData < list[j + 1].RevenueINC.lYearData) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
// 营收增长
|
||||
}else if(this.sortName===3){
|
||||
if (list[j].RevenueINC.increaseData < list[j + 1].RevenueINC.increaseData) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
// 营收增幅
|
||||
}else if(this.sortName===4){
|
||||
if (list[j].RevenueINC.increaseRate < list[j + 1].RevenueINC.increaseRate ) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else if(this.type===2){
|
||||
// 正序
|
||||
if (this.sortType===0){
|
||||
// 24年营收
|
||||
if (this.sortName===1){
|
||||
if (list[j].AccountINC.curYearData > list[j + 1].AccountINC.curYearData) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
// 23年营收
|
||||
}else if(this.sortName===2){
|
||||
if (list[j].AccountINC.lYearData > list[j + 1].AccountINC.lYearData ) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
// 营收增长
|
||||
}else if(this.sortName===3){
|
||||
if (list[j].AccountINC.increaseData > list[j + 1].AccountINC.increaseData ) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
// 营收增幅
|
||||
}else if(this.sortName===4){
|
||||
if (list[j].AccountINC.increaseRate > list[j + 1].AccountINC.increaseRate ) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 降序
|
||||
else{
|
||||
// 24年营收
|
||||
if (this.sortName===1){
|
||||
if (list[j].AccountINC.curYearData < list[j + 1].AccountINC.curYearData) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
// 23年营收
|
||||
}else if(this.sortName===2){
|
||||
if (list[j].AccountINC.lYearData < list[j + 1].AccountINC.lYearData ) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
// 营收增长
|
||||
}else if(this.sortName===3){
|
||||
if (list[j].AccountINC.increaseData < list[j + 1].AccountINC.increaseData ) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
// 营收增幅
|
||||
}else if(this.sortName===4){
|
||||
if (list[j].AccountINC.increaseRate < list[j + 1].AccountINC.increaseRate ) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else if(this.type===3){
|
||||
// 正序
|
||||
if (this.sortType===0){
|
||||
// 24年车流
|
||||
if (this.sortName===1){
|
||||
if (list[j].BayonetINC.curYearData > list[j + 1].BayonetINC.curYearData) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
// 23年营收
|
||||
}else if(this.sortName===2){
|
||||
if (list[j].BayonetINC.lYearData > list[j + 1].BayonetINC.lYearData ) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
// 营收增长
|
||||
}else if(this.sortName===3){
|
||||
if (list[j].BayonetINC.increaseData > list[j + 1].BayonetINC.increaseData ) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
// 营收增幅
|
||||
}else if(this.sortName===4){
|
||||
if (list[j].BayonetINC.increaseRate > list[j + 1].BayonetINC.increaseRate) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}else{
|
||||
// 降序
|
||||
// 24年车流
|
||||
if (this.sortName===1){
|
||||
if (list[j].BayonetINC.curYearData < list[j + 1].BayonetINC.curYearData) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
// 23年营收
|
||||
}else if(this.sortName===2){
|
||||
if (list[j].BayonetINC.lYearData < list[j + 1].BayonetINC.lYearData ) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
// 营收增长
|
||||
}else if(this.sortName===3){
|
||||
if (list[j].BayonetINC.increaseData < list[j + 1].BayonetINC.increaseData ) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
// 营收增幅
|
||||
}else if(this.sortName===4){
|
||||
if (list[j].BayonetINC.increaseRate < list[j + 1].BayonetINC.increaseRate) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return list;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.main{
|
||||
width: 100%;
|
||||
.contentPage{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 32rpx;
|
||||
.revenueDetail{
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 2rpx;
|
||||
margin-top: 24rpx;
|
||||
.revenueDetailTitleBox{
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
background: linear-gradient(360deg, rgba(255,233,229,0) 0%, #FEDEDD 100%);
|
||||
border-radius: 14rpx 14rpx 0rpx 0rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 22rpx;
|
||||
position: relative;
|
||||
.detailLogo{
|
||||
width: 144rpx;
|
||||
height: 74rpx;
|
||||
}
|
||||
.detailIcon{
|
||||
width: 104rpx;
|
||||
height: 104rpx;
|
||||
position: absolute;
|
||||
right: 22rpx;
|
||||
top: 22rpx;
|
||||
}
|
||||
.modalUnit{
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #9A9A9A;
|
||||
line-height: 36rpx;
|
||||
position: absolute;
|
||||
left: 170rpx;
|
||||
top: 26rpx;
|
||||
}
|
||||
}
|
||||
.revenueContent{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 22rpx 24rpx;
|
||||
.navBigList{
|
||||
width: 100%;
|
||||
height: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.allBox{
|
||||
width: 70rpx;
|
||||
height: 100%;
|
||||
.scrollItem{
|
||||
font-size: 28rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #A69E9F;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.selectItem{
|
||||
font-size: 28rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #ED3E48;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
}
|
||||
.navList{
|
||||
width: calc(100% - 80rpx);
|
||||
height: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
padding-bottom: 12rpx;
|
||||
border-bottom: 1px solid #F5F4F4;
|
||||
.scrollItem{
|
||||
font-size: 28rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #A69E9F;
|
||||
line-height: 40rpx;
|
||||
margin-right: 32rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
.selectItem{
|
||||
font-size: 28rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #ED3E48;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dateText{
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #A69E9F;
|
||||
margin: 16rpx 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.modalBox{
|
||||
margin-top: 40rpx;
|
||||
.modalTitleBox{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.modalTitleItem{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.modalIndex{
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
background: #DB6465;
|
||||
border-radius: 50%;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.modalText{
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
line-height: 40rpx;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
.modalUnit{
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #9A9A9A;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
}
|
||||
.moreBox{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.moreText{
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #9A9A9A;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
.moreIcon{
|
||||
width: 24rpx;
|
||||
height: 36rpx;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
.modalTitleItem1{
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.sortBox{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16rpx;
|
||||
.sortItem{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.sortText{
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #9A9A9A;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
.sortIconBox{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 16rpx;
|
||||
.upIcon{
|
||||
width: 16rpx;
|
||||
height: 12rpx;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
.bottomIcon{
|
||||
width: 16rpx;
|
||||
height: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modalDetail{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
.modalDetailTitle{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8rpx 0;
|
||||
.titleItem{
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #9A9A9A;
|
||||
line-height: 32rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.typeFirst{
|
||||
height: calc(100vh - 200px);
|
||||
.row{
|
||||
margin-top: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 32rpx;
|
||||
.valueItem{
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #160002;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
text-indent: 8rpx;
|
||||
}
|
||||
.bigFather{
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
}
|
||||
.bigFather:before{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -8rpx;
|
||||
transform: translateY(-50%);
|
||||
content:'';
|
||||
display: inline-block;
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 50%;
|
||||
background: #DB6465;
|
||||
}
|
||||
.father{
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
}
|
||||
.father:before{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -8rpx;
|
||||
transform: translateY(-50%);
|
||||
content:'';
|
||||
display: inline-block;
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 50%;
|
||||
background: #3188FF;
|
||||
}
|
||||
|
||||
.son{
|
||||
position: relative;
|
||||
}
|
||||
.son:before{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -8rpx;
|
||||
transform: translateY(-50%);
|
||||
content:'';
|
||||
display: inline-block;
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 50%;
|
||||
background: orangered;
|
||||
}
|
||||
.compareItem{
|
||||
font-size: 24rpx;
|
||||
font-family: DINAlternate, DINAlternate;
|
||||
color: #160002;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.addItem{
|
||||
font-size: 24rpx;
|
||||
font-family: DINAlternate, DINAlternate;
|
||||
color: #E83944;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.listItem{
|
||||
width:100%;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 16rpx;
|
||||
background: #F7F7F7;
|
||||
margin-bottom: 24rpx;
|
||||
display: flex;
|
||||
.itemLeft{
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 16rpx;
|
||||
//border: 2rpx solid #E6E6E6;
|
||||
position: relative;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
.bg{
|
||||
position: absolute;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
top: 0;left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.statueBox{
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;right: 0;
|
||||
width: 76rpx;
|
||||
height: 32rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 28rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.nameBox{
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 32rpx;
|
||||
left: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.serviceName{
|
||||
font-size: 30rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #7F020B;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
.serviceLabel{
|
||||
font-size: 20rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #7F020B;
|
||||
line-height: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contentRight{
|
||||
width: calc(100% - 176rpx);
|
||||
margin-left: 16rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.rightTop{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.rightTopLeft{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.indexBox{
|
||||
width: 36rpx;
|
||||
height: 32rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FEFFFF;
|
||||
line-height: 28rpx;
|
||||
text-align: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.areaName{
|
||||
font-size: 28rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #160002;
|
||||
line-height: 40rpx;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
.rightTopRight{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.entryRateLabel{
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #9A9A9A;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
.entryRateValue{
|
||||
font-size: 28rpx;
|
||||
font-family: DINAlternate, DINAlternate;
|
||||
font-weight: bold;
|
||||
color: #E83944;
|
||||
line-height: 32rpx;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.rightBottom{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.rightBottomItem{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.itemLabel{
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #9A9A9A;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
.itemValue{
|
||||
font-size: 28rpx;
|
||||
font-family: DINAlternate, DINAlternate;
|
||||
font-weight: bold;
|
||||
color: #160002;
|
||||
line-height: 32rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.typeSecond{
|
||||
.listValueBox{
|
||||
width: 100%;
|
||||
.row{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-top: 32rpx;
|
||||
.rowItem{
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
font-family: DINAlternate, DINAlternate;
|
||||
color: #160002;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
302
pages/nationalPage/testPage.vue
Normal file
302
pages/nationalPage/testPage.vue
Normal file
@ -0,0 +1,302 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="img" :style="{left:allScreen?'100%':'0%'}" @click="handleShowAllScreen">
|
||||
<qiunDataCharts
|
||||
type="area"
|
||||
:opts="opts"
|
||||
:chartData="res"
|
||||
:animation="false"
|
||||
:canvas2d="true"
|
||||
:inScrollView="true"
|
||||
tooltipFormat="entryCarNumber"
|
||||
:ontouch="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="allScreen" :style="{left:allScreen?'0%':'100%'}" @click="handleShowAllScreen">
|
||||
<qiunDataCharts
|
||||
type="area"
|
||||
:opts="opts2"
|
||||
:chartData="res"
|
||||
:animation="false"
|
||||
tooltipFormat="entryCarNumber"
|
||||
:ontouch="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import qiunDataCharts from "./components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
|
||||
import request from '@/util/index.js'
|
||||
export default {
|
||||
components: {qiunDataCharts},
|
||||
data() {
|
||||
return {
|
||||
opts:{},
|
||||
opts2:{},
|
||||
res:{},
|
||||
allScreen:false
|
||||
}
|
||||
},
|
||||
onLoad(){
|
||||
|
||||
|
||||
|
||||
|
||||
this.handleGetData()
|
||||
},
|
||||
methods:{
|
||||
async handleGetData(){
|
||||
uni.showLoading({
|
||||
title: '正在加载...'
|
||||
})
|
||||
const req = {
|
||||
pushProvinceCode:'340000',
|
||||
StatisticsDate:'2024-02-01',
|
||||
holidayType: 2,
|
||||
curYear:2024,
|
||||
compareYear:2023,
|
||||
}
|
||||
const data = await request.$webGet('CommercialApi/Revenue/GetHolidayCompare',req)
|
||||
console.log('data',data)
|
||||
let dateList = []
|
||||
let dataObj = data.Result_Data
|
||||
let allDateList = ''
|
||||
dataObj.compareList.forEach(item=>{
|
||||
const date = new Date(item.name)
|
||||
let m = date.getMonth() + 1
|
||||
let d = date.getDate()
|
||||
let dateText = `${m}.${d}`
|
||||
item.easyDate = dateText
|
||||
if (allDateList.indexOf(dateText)===-1){
|
||||
if (allDateList){
|
||||
allDateList+=`,${dateText}`
|
||||
}else{
|
||||
allDateList = dateText
|
||||
}
|
||||
}
|
||||
})
|
||||
dataObj.curList.forEach(item=>{
|
||||
const date = new Date(item.name)
|
||||
let m = date.getMonth() + 1
|
||||
let d = date.getDate()
|
||||
let dateText = `${m}.${d}`
|
||||
item.easyDate = dateText
|
||||
if (allDateList.indexOf(dateText)===-1){
|
||||
if (allDateList){
|
||||
allDateList+=`,${dateText}`
|
||||
}else{
|
||||
allDateList = dateText
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
allDateList = allDateList.split(',')
|
||||
dateList = allDateList
|
||||
console.log('dateList',dateList)
|
||||
console.log('dataObj.compareList',dataObj.compareList)
|
||||
console.log('dataObj.curList',dataObj.curList)
|
||||
let max = 0
|
||||
let compareList = []
|
||||
let realCompareList = []
|
||||
|
||||
let curListList = []
|
||||
let realCurList = []
|
||||
|
||||
dataObj.compareList.forEach(item=>{
|
||||
const date = new Date(item.name)
|
||||
let m = date.getMonth() + 1
|
||||
let d = date.getDate()
|
||||
let dateText = `${m}.${d}`
|
||||
item.easyDate = dateText
|
||||
if (allDateList.indexOf(dateText)===-1){
|
||||
if (allDateList){
|
||||
allDateList+=`,${dateText}`
|
||||
}else{
|
||||
allDateList = dateText
|
||||
}
|
||||
}
|
||||
})
|
||||
dataObj.curList.forEach(item=>{
|
||||
const date = new Date(item.name)
|
||||
let m = date.getMonth() + 1
|
||||
let d = date.getDate()
|
||||
let dateText = `${m}.${d}`
|
||||
item.easyDate = dateText
|
||||
if (allDateList.indexOf(dateText)===-1){
|
||||
if (allDateList){
|
||||
allDateList+=`,${dateText}`
|
||||
}else{
|
||||
allDateList = dateText
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
allDateList.forEach(item=>{
|
||||
let beforeValue = dataObj.compareList.filter(filter=> filter.easyDate === item)[0]
|
||||
beforeValue = beforeValue?beforeValue.value:null
|
||||
if (beforeValue){
|
||||
if (Number(beforeValue) / 10000 > max){
|
||||
max = Number(beforeValue) / 10000
|
||||
}
|
||||
compareList.push(Number(beforeValue) / 10000)
|
||||
realCompareList.push(Number(beforeValue))
|
||||
}
|
||||
else{
|
||||
compareList.push(0)
|
||||
realCompareList.push(0)
|
||||
}
|
||||
|
||||
let compareValue = dataObj.curList.filter(filter=> filter.easyDate === item)[0]
|
||||
compareValue = compareValue?compareValue.value:null
|
||||
if (compareValue){
|
||||
if (Number(compareValue) / 10000 > max){
|
||||
max = Number(compareValue) / 10000
|
||||
}
|
||||
curListList.push(Number(compareValue) / 10000)
|
||||
realCurList.push(Number(compareValue))
|
||||
}else{
|
||||
curListList.push(0)
|
||||
realCurList.push(0)
|
||||
}
|
||||
})
|
||||
|
||||
let res = {
|
||||
categories: dateList,
|
||||
series:[
|
||||
{
|
||||
name:`24年`,
|
||||
data:curListList,
|
||||
real:realCurList,
|
||||
},
|
||||
{
|
||||
name:`23年`,
|
||||
data:compareList,
|
||||
real:realCompareList,
|
||||
},
|
||||
],
|
||||
max:Number(max.toFixed(2)),
|
||||
}
|
||||
console.log('res',res)
|
||||
this.res = res
|
||||
|
||||
this.opts = {
|
||||
categories: res.categories,
|
||||
series: res.series,
|
||||
animation: false,
|
||||
rotate: false,
|
||||
rotateLock: false,
|
||||
enableScroll: true,
|
||||
background: "#FFFFFF",
|
||||
color: ["#1E80FF", "#00B6FF","#ACB9CD"],
|
||||
padding: [15, 15, 5, 5],
|
||||
dataLabel: false,
|
||||
legend: {
|
||||
show: true,
|
||||
position: "bottom",
|
||||
lineHeight: 25,
|
||||
float: 'center'
|
||||
|
||||
},
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
itemCount: 7
|
||||
},
|
||||
yAxis: {
|
||||
gridType: "dash",
|
||||
dashLength: 2,
|
||||
splitNumber:4,
|
||||
data: [
|
||||
{
|
||||
min: 0,
|
||||
max:res.max
|
||||
}
|
||||
]
|
||||
},
|
||||
extra: {
|
||||
area: {
|
||||
type: "curve",
|
||||
opacity: 0.2,
|
||||
addLine: true,
|
||||
width: 2,
|
||||
gradient: true,
|
||||
activeType: "hollow"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let phoneInfo = uni.getStorageSync('phoneInfo')
|
||||
console.log('phoneInfo',phoneInfo)
|
||||
this.opts2 = {
|
||||
// width:phoneInfo.screenHeight+'px',
|
||||
// height:(2*phoneInfo.screenWidth)+'px',
|
||||
categories: res.categories,
|
||||
series: res.series,
|
||||
animation: false,
|
||||
rotate: true,
|
||||
rotateLock: false,
|
||||
enableScroll: true,
|
||||
background: "#FFFFFF",
|
||||
color: ["#1E80FF", "#00B6FF","#ACB9CD"],
|
||||
padding: [15, 15, 5, 5],
|
||||
dataLabel: false,
|
||||
legend: {
|
||||
show: true,
|
||||
position: "bottom",
|
||||
lineHeight: 25,
|
||||
float: 'center'
|
||||
|
||||
},
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
itemCount: 10
|
||||
},
|
||||
yAxis: {
|
||||
gridType: "dash",
|
||||
dashLength: 2,
|
||||
splitNumber:4,
|
||||
data: [
|
||||
{
|
||||
min: 0,
|
||||
max:res.max
|
||||
}
|
||||
]
|
||||
},
|
||||
extra: {
|
||||
area: {
|
||||
type: "curve",
|
||||
opacity: 0.2,
|
||||
addLine: true,
|
||||
width: 2,
|
||||
gradient: true,
|
||||
activeType: "hollow"
|
||||
}
|
||||
}
|
||||
}
|
||||
uni.hideLoading()
|
||||
},
|
||||
handleShowAllScreen(){
|
||||
this.allScreen = !this.allScreen
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.main{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
.img{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
.allScreen{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100vh;
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user