1109 lines
49 KiB
Vue
1109 lines
49 KiB
Vue
<template>
|
||
<div class="main">
|
||
<div style="position: fixed;right: 0;top: 20%;z-index:99999999999">
|
||
<commercial-type :have="2"/>
|
||
</div>
|
||
<header-top :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :analyseInfo="analyseInfo" :topBg="topBg" :page="page" :backType="backType"
|
||
:serverpartName="serviceInfo.SERVERPART_NAME" :spregionTypeName="serviceInfo.SPREGIONTYPE_NAME" :serviceInfo="serviceInfo"
|
||
:topLeftBg="topLeftBg" :topLeftColor="topLeftColor" :iconObj="iconObj" :haveIconObj="haveIconObj" :detailBoxBg="detailBoxBg"
|
||
:haveFun="haveFun"/>
|
||
|
||
<div class="charts">
|
||
<div class="chartsItem">
|
||
<p class="title">营收分析</p>
|
||
<revenue-analysis :data="monthDetail"/>
|
||
</div>
|
||
<div class="chartsItem" style="margin-top: 32px">
|
||
<p class="title">合同保底</p>
|
||
<contract-guarantee :data="contractList"/>
|
||
</div>
|
||
<!-- <div class="chartsItem" style="margin-top: 32px">-->
|
||
<!-- <p class="title">客流客单交易</p>-->
|
||
<!-- <contract-guarantee :data="orderTransaction"/>-->
|
||
<!-- </div>-->
|
||
<div class="chartsItem" style="margin-top: 32px">
|
||
<p class="title">同比分析</p>
|
||
<view class="tab" >
|
||
<view v-for="(item,index) in tabList" :key="index" :class="selectTab===item.value?'tabItem tabItemActive':'tabItem'" @click="handleChangeTab(item.value)">{{item.name}}</view>
|
||
</view>
|
||
<div class="subItem">
|
||
<p class="title">{{selectTab===0?'营收同比':selectTab===1?'客单同比':selectTab===2?'均价同比':''}}</p>
|
||
<div class="money">
|
||
<div class="top">
|
||
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/blueMoney.svg"></image>
|
||
<p class="sumMoney">{{revenue.data?revenue.data:'-'}}</p>
|
||
</div>
|
||
<div class="bottom">
|
||
<image class="icon" :src="revenue.add>0?'https://eshangtech.com/ShopICO/ahyd-BID/commercial/addArrow.svg':revenue.add<0?'https://eshangtech.com/ShopICO/ahyd-BID/commercial/decline.svg':''"></image>
|
||
<p class="add">{{revenue.add?revenue.add+'%':'-'}}</p>
|
||
<p class="text">(相比去年同日)</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="subItem">
|
||
<div style="display: flex;align-items: center;justify-content: space-between">
|
||
<p class="title" style="margin-top: 20px">{{selectTab===0?'营收特征分析':selectTab===1?'客单对比':selectTab===2?'均价对比':''}}</p>
|
||
<text v-if="selectTab===0" style="margin-top: 12px">单位: 万元</text>
|
||
<text v-if="selectTab===1" style="margin-top: 12px">单位: 笔</text>
|
||
<text v-if="selectTab===2" style="margin-top: 12px">单位: 元</text>
|
||
</div>
|
||
<div v-if="moneyCompareList.series.length>0">
|
||
<money-compare :data="moneyCompareList"/>
|
||
</div>
|
||
<no-data v-else/>
|
||
</div>
|
||
<div class="subItem ">
|
||
<div style="display: flex;align-items: center;justify-content: space-between">
|
||
<p class="title" style="margin-top: 20px">营收同比分析</p>
|
||
<text style="margin-top: 12px">单位: 万元</text>
|
||
</div>
|
||
<div v-if="trendsList.series.length>0">
|
||
<revenue-trends :data="trendsList"/>
|
||
</div>
|
||
<no-data v-else/>
|
||
</div>
|
||
<analyse :analyseInfo="{analysisins_type: selectTab===0?1305:selectTab===1?1306:selectTab===2?1307:'',analysisins_format: 2000}"/>
|
||
</div>
|
||
<div class="chartsItem" style="margin-top: 32px">
|
||
<p class="title">{{month}}月营收类型比例</p>
|
||
<div class="progress">
|
||
<div class="top">
|
||
<div class="left">
|
||
<text class="title">自营</text>
|
||
<text class="value" style="margin-left: 4px">{{revenueType.own?revenueType.own:''}}%</text>
|
||
</div>
|
||
<div class="right">
|
||
<text class="value">{{revenueType.ectocyst?revenueType.ectocyst:''}}%</text>
|
||
<text class="title" style="margin-left: 4px">外包</text>
|
||
</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="first" :style="{width:revenueType.own+'%'}"></div>
|
||
<div class="second" :style="{width:revenueType.ectocyst+'%'}"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chartsItem" style="margin-top: 32px">
|
||
<div class="titleTop">
|
||
<p class="title">本月自营计划</p>
|
||
<div class="question" @click.stop="handleShowNotice">
|
||
<image src="https://eshangtech.com/ShopICO/ahyd-BID/index/noticeQuestion.svg"></image>
|
||
</div>
|
||
<div v-if="showNotice" class="titleTopNotice">{{monthNoticeText}}</div>
|
||
<div v-if="showNotice" class="meng" @click.stop="handleNoShowNotice"></div>
|
||
</div>
|
||
<view class="box" @click="handleGoServiceInfo('month')">
|
||
<view class="top">
|
||
<view class="big">
|
||
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/thisMonth.svg"></image>
|
||
</view>
|
||
<view class="text">
|
||
<view class="textTop">
|
||
<view class="left">
|
||
<p class="number">{{plan.percentageMonth?plan.percentageMonth + '%':'-'}}</p>
|
||
<p v-if="plan.percentageMonth>=100" class="desc"><image class="success" src="https://eshangtech.com/ShopICO/ahyd-BID/index/successMonth.svg"></image></p>
|
||
</view>
|
||
<view class="right">
|
||
<text class="comparePlan">比计划： </text>
|
||
<view class="box2">
|
||
<image class="addIcon" :src="plan.MonthGrowth_Rate>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
|
||
<p class="text">{{monthAdd?monthAdd + '%':'-'}}</p>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<div class="progressPlan">
|
||
<div class="trans" :style="{width:plan.percentageMonth + '%'}"></div>
|
||
<!-- <div class=pro :style="{width:(100 - plan.percentageMonth)+ '%'}"></div>-->
|
||
<!-- <view class="trans" :style="{width: plan.percentageMonth + '%'}"></view>-->
|
||
<!-- <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/index/progress_orange.png"></image>-->
|
||
<!-- <div class=pro :style="{width:(100 - plan.percentageMonth)+ '%'}"></div>-->
|
||
</div>
|
||
</view>
|
||
</view>
|
||
<view class="bottom">
|
||
<view class="success" style="margin-right: 39px">
|
||
<p class="text">本月已完成<text class="unit">/元</text></p>
|
||
<p class="money">{{plan.RevenueMonth_Amount?plan.RevenueMonth_Amount:'-'}}</p>
|
||
</view>
|
||
<view class="success">
|
||
<p class="text">本月计划<text class="unit">/元</text></p>
|
||
<p class="money">{{plan.BudgetMonth_Amount?plan.BudgetMonth_Amount:'-'}}</p>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</div>
|
||
<div class="chartsItem" style="margin-top: 32px">
|
||
<div class="titleTop">
|
||
<p class="title">年度自营计划</p>
|
||
<div class="question" @click.stop="handleShowNoticeYear">
|
||
<image src="https://eshangtech.com/ShopICO/ahyd-BID/index/noticeQuestion.svg"></image>
|
||
</div>
|
||
<div v-if="showNoticeYear" class="titleTopNotice">{{yearNoticeText}}</div>
|
||
<div v-if="showNoticeYear" class="meng" @click.stop="handleNoShowNoticeYear"></div>
|
||
</div>
|
||
<view class="box" @click="handleGoServiceInfo('year')">
|
||
<view class="top">
|
||
<view class="big">
|
||
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/planYear.svg"></image>
|
||
</view>
|
||
<view class="text">
|
||
<view class="textTop">
|
||
<view class="left">
|
||
<p class="number">{{plan.percentageYear?plan.percentageYear + '%':'-'}}</p>
|
||
<p v-if="plan.percentageYear>=100" class="desc" style="color: #4E68FF"><image class="success" src="https://eshangtech.com/ShopICO/ahyd-BID/index/yearSuccess.svg"></image></p>
|
||
</view>
|
||
<view class="right">
|
||
<text class="comparePlan">比计划： </text>
|
||
<div class="box2">
|
||
<image class="addIcon" :src="plan.YearGrowth_Rate>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
|
||
<p class="text">{{yearAdd?yearAdd + '%':''}}</p>
|
||
</div>
|
||
</view>
|
||
</view>
|
||
<div class="progressPlan">
|
||
<div class="transYear" :style="{width:plan.percentageYear + '%'}"></div>
|
||
<!-- <image class="img" :style="{width: plan.percentageYear + '%'}" src="https://eshangtech.com/ShopICO/ahyd-BID/index/progress_blue.png"></image>-->
|
||
<!-- <div class=pro :style="{width:(100 - plan.percentageYear)+ '%'}"></div>-->
|
||
</div>
|
||
</view>
|
||
</view>
|
||
<view class="bottom">
|
||
<view class="success" style="margin-right: 39px">
|
||
<p class="text">年度已完成<text class="unit">/元</text></p>
|
||
<p class="money">{{plan.RevenueYear_Amount?plan.RevenueYear_Amount:'-'}}</p>
|
||
</view>
|
||
<view class="success">
|
||
<p class="text">年度计划<text class="unit">/元</text></p>
|
||
<p class="money">{{plan.BudgetYear_Amount?plan.BudgetYear_Amount:'-'}}</p>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import headerTop from "./components/headerTop.vue";
|
||
import RevenueAnalysis from "./components/manager/revenueAnalysis.vue";
|
||
import ContractGuarantee from "./components/manager/contractGuarantee.vue";
|
||
import MoneyCompare from "./components/manager/moneyCompare.vue";
|
||
import analyse from "./components/analyse.vue";
|
||
import RevenueTrends from "./components/manager/revenueTrends.vue";
|
||
import request from '@/util/index.js'
|
||
import NoData from "./components/noData.vue";
|
||
import commercialType from "./commercialType.vue";
|
||
|
||
export default {
|
||
name: "businessPortrait",
|
||
components: {NoData, RevenueTrends, MoneyCompare, ContractGuarantee, RevenueAnalysis, headerTop,analyse,commercialType},
|
||
data() {
|
||
return {
|
||
topBg:'linear-gradient(180deg, #D9CCEF 0%, #DED3F2 100%);',
|
||
labelList:['女性','高消费','喜爱奶茶','浙江','20-30岁','江苏'],//标签
|
||
tabList:[{name:'营收金额',value:0},{name:'客单量',value:1},{name:'客单均价',value:2}],//选项卡列表
|
||
selectTab:0,//当前选中
|
||
title:'经营画像',//页面标题
|
||
bgColor: '180deg, #996CFF 0%, #5D43F8 100%',
|
||
bgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/managePortraitBg.svg',//背景图片路径
|
||
page:'/pages/commercialBI/managePortrait',
|
||
detailBoxBg:'linear-gradient(136deg, #F3EFFE 0%, #FFFFFF 100%);',
|
||
topLeftBg:'linear-gradient(180deg, rgba(153, 108, 255, 0.2) 0%, rgba(93, 67, 248, 0.2) 100%)',// 类别背景
|
||
topLeftColor:'#6347F9',// 类别文字颜色
|
||
iconObj:{
|
||
car:'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carPortrait.svg',
|
||
charge:'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/chargePortraitBg.svg',
|
||
bady:'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/babyPortrait.svg',
|
||
guestRoom:'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/guestRoomPortrait.svg'
|
||
},
|
||
haveIconObj:{
|
||
have:'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/havePortrait.svg',
|
||
noHave:'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/noHavePortrait.svg'
|
||
},
|
||
time: '',//跳转携带的时间
|
||
menu: {},//手机配置信息
|
||
revenueList:[],//营收分析
|
||
contractList:{},//合同保底
|
||
orderTransaction:{},//客流客单交易
|
||
revenueAll:[],//三组的营收信息
|
||
revenue:{},//营收信息
|
||
moneyCompareList:{},//营收对比
|
||
trendsList:[],//营收趋势
|
||
revenueType:{},//营收占比
|
||
plan:{},//月度和年度接口的返回参数 一起的
|
||
monthAdd:'',//月每天的相对增加
|
||
yearAdd:'', // 年度计划增加的百分比
|
||
showNotice:false,
|
||
showNoticeYear:false,
|
||
serviceInfo:{}, //当前服务区信息
|
||
backType:'',//返回的页面类型
|
||
analyseInfo:{
|
||
analysisins_type: 1301
|
||
},
|
||
monthNoticeText:'',
|
||
yearNoticeText:'',
|
||
lastDay:'',
|
||
month:'',
|
||
haveFun:{},
|
||
monthDetail:{},// 月度汇总信息 头部的内容
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
let serviceInfo = JSON.parse(option.serviceInfo)
|
||
this.backType = option.type
|
||
this.serviceInfo = serviceInfo
|
||
//跳转的时候带上时间
|
||
this.time = option.time
|
||
},
|
||
onShow(){
|
||
let storeTime = uni.getStorageSync('lastDay')
|
||
this.lastDay = uni.getStorageSync('lastDay')
|
||
if (storeTime){
|
||
this.time = storeTime
|
||
}
|
||
let date = new Date(this.time)
|
||
let m = date.getMonth() + 1
|
||
if (m<10){
|
||
m = '0' + m
|
||
}
|
||
this.month = m
|
||
let storeServiceInfo = uni.getStorageSync('currentService')
|
||
if (storeServiceInfo){
|
||
this.serviceInfo = storeServiceInfo
|
||
}
|
||
// 获取手机参数对页面进行适配
|
||
let systemInfo = uni.getSystemInfoSync()
|
||
// 把获取到的手机参数保存
|
||
uni.setStorageSync('phoneInfo', systemInfo)
|
||
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||
if (!storeServiceInfo){
|
||
this.nearestService()
|
||
}
|
||
//营收分析
|
||
this.getRevenueList()
|
||
//客流客单交易
|
||
// this.getOrderTransaction()
|
||
//营收对比
|
||
this.getMoneyCompareList()
|
||
//营收趋势
|
||
this.getTrendsList()
|
||
//营收占比
|
||
this.getRevenueType()
|
||
//月度计划、年度计划
|
||
this.monthYearPlan()
|
||
//问号显示的内容
|
||
this.handleNoticeMonth()
|
||
this.handleNoticeYear()
|
||
// 服务区基本信息
|
||
this.getServiceInfo()
|
||
// 月度汇总信息
|
||
this.getSummaryMonth()
|
||
},
|
||
onUnload() {
|
||
this.$util.addUserBehavior()
|
||
},
|
||
methods:{
|
||
//获取服务区基本信息
|
||
async getServiceInfo(){
|
||
let req = {
|
||
ServerpartId:this.serviceInfo.Serverpart_ID
|
||
}
|
||
const total = await request.$webGet('CommercialApi/BaseInfo/GetServerpartInfo',req)
|
||
this.haveFun = {
|
||
car:total.Result_Data.HASPILOTLOUNGE,
|
||
charge:total.Result_Data.HASCHARGE ,
|
||
bady:total.Result_Data.HASMOTHER ,
|
||
gusetHome:total.Result_Data.HASGUESTROOM
|
||
}
|
||
},
|
||
// 拿到服务区详情页需要的数据 然后带着跳转过去
|
||
handleGoServiceInfo(type){
|
||
let serviceInfo = this.serviceInfo
|
||
|
||
let num = serviceInfo.SERVERPART_NAME.indexOf('服务区')
|
||
if (num!==-1){
|
||
serviceInfo.name = serviceInfo.SERVERPART_NAME.slice(0,num)
|
||
serviceInfo.unit = serviceInfo.SERVERPART_NAME.slice(num,100)
|
||
}else{
|
||
serviceInfo.name = serviceInfo.SERVERPART_NAME
|
||
}
|
||
if (type==='month'){
|
||
let service = {
|
||
Budget_Amount:this.plan.BudgetMonth_Amount,
|
||
Budget_Degree:this.plan.MonthBudget_Degree,
|
||
Growth_Rate:this.plan.MonthGrowth_Rate,
|
||
Revenue_Amount:this.plan.RevenueMonth_Amount,
|
||
Serverpart_ID:serviceInfo.Serverpart_ID,
|
||
Serverpart_Name:serviceInfo.SERVERPART_NAME,
|
||
name:serviceInfo.name,
|
||
unit:serviceInfo.unit
|
||
}
|
||
const date = new Date(this.time)
|
||
let month = date.getMonth() + 1
|
||
if (this.serviceInfo.Serverpart_ID){
|
||
uni.navigateTo({
|
||
url:`/pages/commercialBI/serviceDetail?serviceInfo=${JSON.stringify(service)}&month=${month}&type=month`
|
||
})
|
||
}else{
|
||
this.$util.toNextRoute('navigateTo', `/pages/commercialBI/planMonth?lastDay=${this.lastDay}&type=${type}`)
|
||
}
|
||
}else{
|
||
let service = {
|
||
Budget_Amount:this.plan.BudgetYear_Amount,
|
||
Budget_Degree:this.plan.YearBudget_Degree,
|
||
Growth_Rate:this.yearAdd,
|
||
Revenue_Amount:this.plan.RevenueYear_Amount,
|
||
Serverpart_ID:serviceInfo.Serverpart_ID,
|
||
Serverpart_Name:serviceInfo.SERVERPART_NAME,
|
||
name:serviceInfo.name,
|
||
unit:serviceInfo.unit
|
||
}
|
||
if (this.serviceInfo.Serverpart_ID){
|
||
uni.navigateTo({
|
||
url:`/pages/commercialBI/serviceDetail?serviceInfo=${JSON.stringify(service)}&type=year`
|
||
})
|
||
}else{
|
||
this.$util.toNextRoute('navigateTo', `/pages/commercialBI/planMonth?lastDay=${this.lastDay}&type=${type}`)
|
||
}
|
||
}
|
||
},
|
||
async handleNoticeMonth(){
|
||
let date = new Date(this.lastDay)
|
||
let y = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
if(m<10){
|
||
m = '0'+m
|
||
}
|
||
//本月的
|
||
let req = {
|
||
SearchParameter:{
|
||
STATISTICS_DATE:`${y}-${m}`,
|
||
ANALYSISINS_TYPE:'1011',
|
||
ANALYSISINS_FORMAT:'3000'
|
||
},
|
||
PageIndex:1,
|
||
PageSize:10
|
||
}
|
||
const data = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',req)
|
||
this.monthNoticeText = data.Result_Data.List[0].ANALYSIS_CONTENT
|
||
|
||
|
||
},
|
||
async handleNoticeYear(){
|
||
let date = new Date(this.lastDay)
|
||
let y = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
if(m<10){
|
||
m = '0'+m
|
||
}
|
||
//本年
|
||
let reqYear = {
|
||
SearchParameter:{
|
||
STATISTICS_DATE:`${y}`,
|
||
ANALYSISINS_TYPE:'1012',
|
||
ANALYSISINS_FORMAT:'3000'
|
||
},
|
||
PageIndex:1,
|
||
PageSize:10
|
||
}
|
||
const totalData = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',reqYear)
|
||
this.yearNoticeText = totalData.Result_Data.List[0].ANALYSIS_CONTENT
|
||
},
|
||
async nearestService(){
|
||
let seat = uni.getStorageSync('seatInfo');
|
||
let req = {
|
||
longitude:seat.longitude,
|
||
Province_Code:'340000',
|
||
latitude:seat.latitude,
|
||
}
|
||
const data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartList',req)
|
||
let res = {
|
||
SERVERPART_NAME:data.Result_Data.List[0].SERVERPART_NAME,//服务区
|
||
SPREGIONTYPE_NAME:data.Result_Data.List[0].SPREGIONTYPE_NAME,//片区
|
||
Serverpart_ID:data.Result_Data.List[0].SERVERPART_ID,
|
||
longitude:data.Result_Data.List[0].SERVERPART_X,
|
||
latitude:data.Result_Data.List[0].SERVERPART_Y,
|
||
}
|
||
uni.setStorageSync('currentService',res)
|
||
},
|
||
handleShowNotice(){
|
||
this.showNotice = true
|
||
},
|
||
handleNoShowNotice(){
|
||
this.showNotice = false
|
||
},
|
||
handleShowNoticeYear(){
|
||
this.showNoticeYear = true
|
||
},
|
||
handleNoShowNoticeYear(){
|
||
this.showNoticeYear = false
|
||
},
|
||
async getSummaryMonth(){
|
||
console.log('this.time',this.time)
|
||
const date = new Date(this.time)
|
||
let y = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
if (m<10){
|
||
m = '0'+m
|
||
}
|
||
const req= {
|
||
pushProvinceCode:'340000',
|
||
StatisticsMonth:`${y}${m}`,
|
||
}
|
||
const data = await request.$webGet('CommercialApi/Revenue/GetSummaryRevenueMonth',req)
|
||
console.log('data22222',data)
|
||
this.monthDetail = data.Result_Data.MonthRevenueModel
|
||
},
|
||
|
||
async getRevenueList(){
|
||
let req = {
|
||
statisticsDate:this.time,
|
||
provinceCode:'340000',
|
||
Serverpart_ID:this.serviceInfo.Serverpart_ID ||'',
|
||
SPRegionType_ID:this.serviceInfo.SPRegionType_ID || ''
|
||
}
|
||
let totalData = await request.$webGet('CommercialApi/Contract/GetContractAnalysis',req)
|
||
this.revenueList = {
|
||
ContractProfitLoss:totalData.Result_Data.ContractProfitLoss,
|
||
ShopCount:totalData.Result_Data.ShopCount,
|
||
SalesPerSquareMeter:totalData.Result_Data.SalesPerSquareMeter,
|
||
ExpiredShopCount:totalData.Result_Data.ExpiredShopCount,
|
||
ContractList:totalData.Result_Data.ContractList
|
||
}
|
||
this.contractList = {
|
||
title:'完成率',
|
||
value:totalData.Result_Data.ContractCompletionDegree
|
||
}
|
||
this.orderTransaction = {
|
||
title:'转化率',
|
||
value:totalData.Result_Data.ConvertRate
|
||
}
|
||
},
|
||
//拿到合同列表
|
||
// async getContractList(){
|
||
// let req = {
|
||
// statisticsDate:this.time,
|
||
// provinceCode:'340000',
|
||
// Serverpart_ID:this.serviceInfo.Serverpart_ID,
|
||
// SPRegionType_ID:this.serviceInfo.SPRegionType_ID
|
||
// }
|
||
// let totalData = await request.$webGet('CommercialApi/Contract/GetContractAnalysis',req)
|
||
//
|
||
//
|
||
// },
|
||
// getOrderTransaction(){
|
||
// let res = {
|
||
// title: '转化率',
|
||
// value: 50.5
|
||
// }
|
||
// this.orderTransaction = res
|
||
// },
|
||
//选项卡改变
|
||
handleChangeTab(value){
|
||
this.selectTab = value
|
||
this.revenue = this.revenueAll[this.selectTab]
|
||
this.moneyCompareList = this.revenue.list
|
||
},
|
||
async getMoneyCompareList(){
|
||
let req = {
|
||
StatisticsDate:this.time,
|
||
ServerpartId:this.serviceInfo.Serverpart_ID || ''
|
||
}
|
||
const data = await request.$webGet('CommercialApi/Revenue/GetRevenueCompare',req)
|
||
let RevenueAmount = [] //营收金额 除以10000的金额
|
||
let normalAmount = [] //不除以10000的金额
|
||
let compareWordDay = [] //对比工作日
|
||
let RevenueMax = 0
|
||
let TicketCountList = [] // 客单量
|
||
let TicketMax = 0
|
||
let AvgTicketAmountList = [] // 客单均价
|
||
let AvgTicketMax = 0
|
||
data.Result_Data.RevenueAmountList.forEach(item=>{
|
||
let list = []
|
||
let listNormal = []
|
||
let qoqAddList = [] //环比增加
|
||
item.data.forEach(subItem=>{
|
||
let number = (subItem[1] / 10000 ).toFixed(2)
|
||
if (number>RevenueMax){
|
||
RevenueMax = number
|
||
}
|
||
list.push(number)
|
||
qoqAddList.push(subItem[2])
|
||
listNormal.push(subItem[1])
|
||
})
|
||
normalAmount.push({name:item.name,data:listNormal})
|
||
RevenueAmount.push({name:item.name,data:list,qoqAdd:qoqAddList,holiday: item.value})
|
||
})
|
||
data.Result_Data.TicketCountList.forEach(item=>{
|
||
let list = []
|
||
let qoqAddList = [] //环比增加
|
||
item.data.forEach(subItem=>{
|
||
let number = (subItem[1]).toFixed(0)
|
||
if (number > TicketMax){
|
||
TicketMax = Number(number)
|
||
}
|
||
qoqAddList.push(subItem[2])
|
||
list.push(number)
|
||
})
|
||
TicketCountList.push({name:item.name,data:list,qoqAdd:qoqAddList,holiday: item.value})
|
||
})
|
||
data.Result_Data.AvgTicketAmountList .forEach(item=>{
|
||
let list = []
|
||
let qoqAddList = [] //环比增加
|
||
item.data.forEach(subItem=>{
|
||
let number = (subItem[1]).toFixed(2)
|
||
if (number>AvgTicketMax){
|
||
AvgTicketMax = number
|
||
}
|
||
list.push(number)
|
||
qoqAddList.push(subItem[2])
|
||
})
|
||
AvgTicketAmountList.push({name:item.name,data:list,qoqAdd:qoqAddList,holiday: item.value})
|
||
})
|
||
// 因为有三个选项卡 把三种情况要展示的内容 放在一个对象里面 三个对象放一个数组里面 点击选项卡切换显示的对象就可以了
|
||
this.revenueAll = [
|
||
{
|
||
data:this.$util.fmoney(data.Result_Data.RevenueAmount),
|
||
add:data.Result_Data.RevenueAmountYOYRate,
|
||
list:{
|
||
categories: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
|
||
series: RevenueAmount,
|
||
normal:normalAmount,
|
||
max:RevenueMax,
|
||
type:0
|
||
},
|
||
},
|
||
{
|
||
data:this.$util.noDecimal(data.Result_Data.TicketCount),
|
||
add:data.Result_Data.TicketCountYOYRate ,
|
||
list:{
|
||
categories: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
|
||
series: TicketCountList,
|
||
max:TicketMax,
|
||
type:1
|
||
},
|
||
},
|
||
{
|
||
data:this.$util.fmoney(data.Result_Data.AvgTicketAmount),
|
||
add:data.Result_Data.AvgTicketAmountRate ,
|
||
list:{
|
||
categories: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
|
||
series: AvgTicketAmountList,
|
||
max:AvgTicketMax,
|
||
type:2
|
||
},
|
||
}
|
||
]
|
||
this.revenue = this.revenueAll[this.selectTab]
|
||
// let res = {
|
||
// categories: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
|
||
// series: [
|
||
// {
|
||
// name: "平日平均",
|
||
// data: [7,10,8,5,8,8,9,8,5,6,7,7]
|
||
// },
|
||
// {
|
||
// name: "周末平均",
|
||
// data: [5,8,8,7,6,6,6,8,7,7,6,7]
|
||
// },
|
||
// {
|
||
// name: "节假日平均",
|
||
// data: [5,10,4,4,7,8,6,5,5,6,10,7]
|
||
// }
|
||
// ]
|
||
// }
|
||
this.moneyCompareList = this.revenue.list
|
||
},
|
||
async getTrendsList(){
|
||
let date = new Date(this.time)
|
||
let y = date.getFullYear()
|
||
// 查今年去年两年的数据
|
||
let req = {
|
||
ProvinceCode:'340000',
|
||
StatisticsDate:y,
|
||
StatisticsType:1,
|
||
ServerpartId:this.serviceInfo.Serverpart_ID || ''
|
||
}
|
||
let yesReq = {
|
||
ProvinceCode:'340000',
|
||
StatisticsDate:y - 1,
|
||
StatisticsType:1,
|
||
ServerpartId:this.serviceInfo.Serverpart_ID || ''
|
||
}
|
||
const data = await request.$webGet('CommercialApi/Revenue/GetRevenueTrend',req)
|
||
const yesData = await request.$webGet('CommercialApi/Revenue/GetRevenueTrend',yesReq)
|
||
let list = []
|
||
let max = 0
|
||
data.Result_Data.List.forEach(item=>{
|
||
item.value = Number((item.value/10000).toFixed(1))
|
||
if (Number(item.value) > max){
|
||
max = Number(item.value)
|
||
}
|
||
list.push(item.value)
|
||
})
|
||
let yesList = []
|
||
yesData.Result_Data.List.forEach(item=>{
|
||
item.value = Number((item.value/10000).toFixed(1))
|
||
yesList.push(item.value)
|
||
})
|
||
let res={
|
||
categories: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
|
||
series:[{
|
||
name: "今年",
|
||
data: list
|
||
},{
|
||
name: "去年",
|
||
data: yesList
|
||
}],
|
||
max:max
|
||
}
|
||
// let res={
|
||
// categories: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
|
||
// series:[{
|
||
// name: "",
|
||
// data: [3,4,5,4.8,5,4.2,4.5,5,5.5,5.7,8,9]
|
||
// }]
|
||
// }
|
||
this.trendsList = res
|
||
},
|
||
async getRevenueType(){
|
||
const date = new Date(this.time)
|
||
let y = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
if (m<10){
|
||
m = '0'+ m
|
||
}
|
||
const req = {
|
||
pushProvinceCode:'340000',
|
||
Statistics_StartDate:`${y}-${m}-01`,
|
||
Statistics_Date:this.time,
|
||
Serverpart_ID:this.serviceInfo.Serverpart_ID || ''
|
||
}
|
||
const data = await request.$webGet('CommercialApi/Revenue/GetSummaryRevenue',req)
|
||
let all = 0
|
||
data.Result_Data.BusinessTypeList.forEach(item=>{
|
||
all +=Number(item.value)
|
||
})
|
||
data.Result_Data.BusinessTypeList.forEach(item=>{
|
||
item.rate = ((Number(item.value) / all)*100).toFixed(2)
|
||
})
|
||
let res={
|
||
own:data.Result_Data.BusinessTypeList[1].rate,
|
||
ectocyst:data.Result_Data.BusinessTypeList[0].rate
|
||
}
|
||
this.revenueType = res
|
||
},
|
||
monthYearPlan(){
|
||
const monthDate= {
|
||
Province_Code:'340000',
|
||
Serverpart_ID:this.serviceInfo.Serverpart_ID || '',
|
||
Statistics_Date:this.time
|
||
}
|
||
request.$webGet('CommercialApi/Revenue/GetRevenueBudget',monthDate).then(res=>{
|
||
// 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
|
||
this.plan = res.Result_Data
|
||
this.plan.percentageMonth = (res.Result_Data.RevenueMonth_Amount / res.Result_Data.BudgetMonth_Amount*100).toFixed(2)
|
||
// this.plan.percentageMonth = 80
|
||
this.plan.percentageYear = (res.Result_Data.RevenueYear_Amount / res.Result_Data.BudgetYear_Amount*100).toFixed(2)
|
||
// let date = new Date(this.time)
|
||
// let nowDay = date.getDate()
|
||
// let day = this.$util.getThisMonthDay(this.time)
|
||
// //一天应该的增长率
|
||
// let oneDay = 100/day
|
||
// // 到了当天的应该有的百分比
|
||
// let thisDayShould= oneDay*nowDay
|
||
// 由于显示的时候 正负号由图片表示 所以要区绝对值展现在页面上
|
||
this.monthAdd = Math.abs(this.plan.MonthGrowth_Rate)
|
||
this.yearAdd = Math.abs(this.plan.YearGrowth_Rate)
|
||
//处理数据 保留小数
|
||
this.plan.RevenueMonth_Amount = this.$util.fmoney(res.Result_Data.RevenueMonth_Amount)
|
||
this.plan.BudgetMonth_Amount = this.$util.fmoney(res.Result_Data.BudgetMonth_Amount)
|
||
this.plan.RevenueYear_Amount = this.$util.fmoney(res.Result_Data.RevenueYear_Amount)
|
||
this.plan.BudgetYear_Amount = this.$util.fmoney(res.Result_Data.BudgetYear_Amount)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.main {
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
.charts{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 28px 16px 24px;
|
||
background: #fff;
|
||
.chartsItem{
|
||
.titleTop{
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 44rpx;
|
||
}
|
||
.question{
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-left: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
image{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.titleTopNotice{
|
||
position: absolute;
|
||
padding: 12px;
|
||
left:35%;
|
||
width: 50vw;
|
||
background: #FFFFFF;
|
||
box-shadow: 0 10px 10px 0 rgba(22,0,2,0.1);
|
||
}
|
||
.meng{
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;left: 0;
|
||
}
|
||
}
|
||
.title{
|
||
font-size: 17px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 24px;
|
||
.unit{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 20px;
|
||
margin-left: 4px;
|
||
}
|
||
}
|
||
.progress{
|
||
width:calc(100vw - 32px);
|
||
margin-top: 12px;
|
||
.top{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.left,.right{
|
||
display: flex;
|
||
align-items: center;
|
||
.title{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
}
|
||
.value{
|
||
font-size: 18px;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #160002;
|
||
}
|
||
}
|
||
}
|
||
.bottom{
|
||
width: 100%;
|
||
height: 14px;
|
||
position: relative;
|
||
.first{
|
||
height: 100%;
|
||
position: absolute;
|
||
left: 0;top: 0;
|
||
background: #1E80FF;
|
||
border-radius: 2px 0 0 2px;
|
||
}
|
||
.first:after{
|
||
position: absolute;
|
||
content:'';
|
||
right: 0;top: 0;
|
||
background: #fff;
|
||
width: 1px;
|
||
height: 100%;
|
||
z-index:111;
|
||
}
|
||
.second{
|
||
height: 100%;
|
||
position: absolute;
|
||
right: 0;top: 0;
|
||
background: #00C2FF;
|
||
border-radius: 0 2px 2px 0 ;
|
||
}
|
||
.second:before{
|
||
position: absolute;
|
||
content:'';
|
||
left: 0;top: 0;
|
||
background: #fff;
|
||
width: 1px;
|
||
height: 100%;
|
||
z-index:111;
|
||
}
|
||
}
|
||
}
|
||
.box {
|
||
width: 100%;
|
||
padding: 12px 16px;
|
||
box-sizing: border-box;
|
||
border-radius: 8px;
|
||
background: #f5f2f2;
|
||
margin-top: 12px;
|
||
.top {
|
||
width: 100%;
|
||
display: flex;
|
||
.big {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: #ffffff;
|
||
border-radius: 8px;
|
||
border: 1px solid #ebebeb;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 8px;
|
||
.icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
}
|
||
.text {
|
||
width: calc(100% - 60px);
|
||
padding: 2px 0;
|
||
.textTop{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.left{
|
||
display: flex;
|
||
align-items: center;
|
||
.number {
|
||
font-size: 36rpx;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #150002;
|
||
line-height: 40rpx;
|
||
}
|
||
.desc{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 8px;
|
||
font-size: 14px;
|
||
color: #FF7043;
|
||
.success{
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 4px;
|
||
}
|
||
}
|
||
}
|
||
.right{
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
.comparePlan{
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #a69e9f;
|
||
line-height: 36rpx;
|
||
white-space: nowrap;
|
||
}
|
||
.box2{
|
||
display: flex;
|
||
align-items: center;
|
||
.text{
|
||
font-size: 14px;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
color: #150002;
|
||
font-weight: bold;
|
||
|
||
line-height: 40rpx;
|
||
}
|
||
.addIcon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 2px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.progressPlan{
|
||
width: 100%;
|
||
height: 8px;
|
||
border-radius: 5px;
|
||
background: #fff;
|
||
margin-top: 8px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
.trans{
|
||
height: 8px;
|
||
position: absolute;
|
||
left: 0;top: 0;
|
||
border-top-right-radius: 4px;
|
||
border-bottom-right-radius: 4px;
|
||
background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_orange.png")no-repeat 100% 100%;
|
||
}
|
||
.transYear{
|
||
height: 8px;
|
||
position: absolute;
|
||
left: 0;top: 0;
|
||
border-top-right-radius: 4px;
|
||
border-bottom-right-radius: 4px;
|
||
background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_blue.png")no-repeat 100% 100%;
|
||
}
|
||
//.img{
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// position: absolute;
|
||
// top: 0;
|
||
// left: 0;
|
||
// z-index:1;
|
||
//}
|
||
//.pro{
|
||
// height: 100%;
|
||
// position: absolute;
|
||
// top: 0;right: 0;
|
||
// background: #fff;
|
||
// z-index:2;
|
||
//}
|
||
|
||
}
|
||
}
|
||
}
|
||
.bottom {
|
||
display: flex;
|
||
margin-top: 16px;
|
||
padding-left: 48px;
|
||
.success {
|
||
.text {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786b6c;
|
||
line-height: 40rpx;
|
||
margin-bottom: 2px;
|
||
.unit {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #a69e9f;
|
||
line-height: 40rpx;
|
||
margin-left: 2px;
|
||
}
|
||
}
|
||
.money {
|
||
font-size: 28rpx;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.tab{
|
||
width: 100%;
|
||
height: 38px;
|
||
background: #F2F1F1;
|
||
border-radius: 4px;
|
||
box-sizing: border-box;
|
||
padding:4px;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
margin-top: 12px;
|
||
.tabItem{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: calc(100% / 3);
|
||
height: 30px;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
}
|
||
.tabItemActive{
|
||
color: #160002;
|
||
background: #FFFFFF;
|
||
}
|
||
}
|
||
.subItem{
|
||
width:100%;
|
||
.title{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 20px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.money{
|
||
width:calc(100% - 32px);
|
||
padding: 18px 16px;
|
||
background: #F7F7F7;
|
||
border-radius: 4px;
|
||
.top{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 4px;
|
||
.icon{
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 8px;
|
||
}
|
||
.sumMoney{
|
||
font-size: 20px;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #341D00;
|
||
line-height: 24px;
|
||
}
|
||
}
|
||
.bottom{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 24px;
|
||
.icon{
|
||
width: 14px;
|
||
height: 14px;
|
||
margin-right: 4px;
|
||
}
|
||
.add{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #FA5151;
|
||
line-height: 20px;
|
||
margin-right: 4px;
|
||
}
|
||
.text{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #A69E9F;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|