update
This commit is contained in:
parent
1cbbd00065
commit
aaf7881a73
26
pages.json
26
pages.json
@ -138,6 +138,32 @@
|
|||||||
"navigationBarTitleText": "",
|
"navigationBarTitleText": "",
|
||||||
"navigationStyle": "custom"
|
"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="topTop">
|
||||||
<view class="statistics" @click="goToRevenueStatic">
|
<view class="statistics" @click="goToRevenueStatic">
|
||||||
<image class="staticImg" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/3stStaticIcon.svg"/>
|
<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>
|
<span class="staticUnit">/万元</span>
|
||||||
<view class="moreIcon" @click.stop="changeShowRealBox">
|
<view class="moreIcon" @click.stop="changeShowRealBox">
|
||||||
<image class="noticeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/noticeIcon.svg"/>
|
<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="smallDetailItem" style="margin-right: 14px">
|
||||||
<view class="messageTop">
|
<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>
|
<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>-->
|
<!-- <text class="unit">/万元</text>-->
|
||||||
</view>
|
</view>
|
||||||
<view class="middle" v-if="typeList && typeList.length>0">
|
<view class="middle" v-if="typeList && typeList.length>0">
|
||||||
@ -122,7 +122,7 @@
|
|||||||
<view class="smallDetailItem">
|
<view class="smallDetailItem">
|
||||||
<view class="messageTop">
|
<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>
|
<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>-->
|
<!-- <text class="unit">/万元</text>-->
|
||||||
</view>
|
</view>
|
||||||
<view class="middle">
|
<view class="middle">
|
||||||
@ -148,7 +148,7 @@
|
|||||||
<view class="rightBox">
|
<view class="rightBox">
|
||||||
<view class="noticeItem">
|
<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="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>-->
|
<!-- <span class="noticeSmallText">/万元</span>-->
|
||||||
<text class="noticeMoney">{{currentPeriodData.Royalty_Theory?$util.fmoney($util.getMoney(currentPeriodData.Royalty_Theory / 10000),2):'-'}}</text>
|
<text class="noticeMoney">{{currentPeriodData.Royalty_Theory?$util.fmoney($util.getMoney(currentPeriodData.Royalty_Theory / 10000),2):'-'}}</text>
|
||||||
</view>
|
</view>
|
||||||
@ -1656,6 +1656,7 @@ export default {
|
|||||||
// 隐藏掉小程序本身自带的 tabbar 让自定义的tabbar出现
|
// 隐藏掉小程序本身自带的 tabbar 让自定义的tabbar出现
|
||||||
uni.hideTabBar()
|
uni.hideTabBar()
|
||||||
this.selectVersion = 1
|
this.selectVersion = 1
|
||||||
|
uni.removeStorageSync('springService')
|
||||||
},
|
},
|
||||||
onHide(){
|
onHide(){
|
||||||
// 离开页面投诉建议的悬浮框隐藏掉
|
// 离开页面投诉建议的悬浮框隐藏掉
|
||||||
|
|||||||
@ -281,14 +281,18 @@ export default {
|
|||||||
latitude:'31.832905',
|
latitude:'31.832905',
|
||||||
}
|
}
|
||||||
uni.setStorageSync('currentService',res) //当前选中服务区信息
|
uni.setStorageSync('currentService',res) //当前选中服务区信息
|
||||||
if (this.chartType){
|
if(this.type==='springTravel'){
|
||||||
uni.navigateBack({
|
|
||||||
delta: 1
|
|
||||||
})
|
|
||||||
}else{
|
}else{
|
||||||
|
if (this.chartType){
|
||||||
uni.navigateBack({
|
uni.navigateBack({
|
||||||
delta: 1
|
delta: 1
|
||||||
})
|
})
|
||||||
|
}else{
|
||||||
|
uni.navigateBack({
|
||||||
|
delta: 1
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}else{
|
}else{
|
||||||
this.getListData()
|
this.getListData()
|
||||||
@ -319,7 +323,13 @@ export default {
|
|||||||
let pageList = getCurrentPages()
|
let pageList = getCurrentPages()
|
||||||
if (this.type==='index'){
|
if (this.type==='index'){
|
||||||
this.$util.toNextRoute('navigateTo', `/pages/summaryOfPortraits/index?index=0`)
|
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){
|
if (this.chartType){
|
||||||
uni.navigateBack({
|
uni.navigateBack({
|
||||||
delta: 1
|
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