ylj/ahyd_DIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
cclu 2023-12-13 18:34:07 +08:00
parent d977b6e328
commit 0003a55c0a
14 changed files with 1541 additions and 410 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
pages.json
View File

@ -132,6 +132,18 @@
}
]
},
{
"root": "pages/revenueStatistics",
"pages": [
{
"path": "index",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
}
]
},
{
"root": "pages/newamine",
"pages": [

19
pages/commercialBI/businessPortrait.vue
View File

@ -4,7 +4,8 @@
<commercial-type :have="3"/>
</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"/>
:serverpartName="serviceInfo.SERVERPART_NAME" :spregionTypeName="serviceInfo.SPREGIONTYPE_NAME" :serviceInfo="serviceInfo"
:topLeftBg="topLeftBg" :topLeftColor="topLeftColor" :iconObj="iconObj" :haveIconObj="haveIconObj" :detailBoxBg="detailBoxBg"/>
<div class="charts">
<div class="chartsItem">
@ -104,8 +105,22 @@ export default {
labelList:['女性','高消费','喜爱奶茶','浙江','20-30岁','江苏'],//标签
title:'交易画像',//页面标题
bgColor:'180deg, #FFBA07 0%, #F38309 100%',
bgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/commercial/businessPortraitBg.svg',//背景图片路径
bgUrl: '/static/images/newCommercialBI/businessPortraitBg.svg',//背景图片路径
page:'/pages/commercialBI/businessPortrait',
detailBoxBg:'linear-gradient(136deg, #F6F2E9 0%, #FFFFFF 100%);',
topLeftBg:'linear-gradient(180deg, rgba(255, 186, 7, 0.2) 0%, rgba(243, 131, 9, 0.2) 100%)',// 类别背景
topLeftColor:'#F38609',// 类别文字颜色
iconObj:{
car:'/static/images/newCommercialBI/businessCar.svg',
charge:'/static/images/newCommercialBI/businessCharge.svg',
bady:'/static/images/newCommercialBI/businessBady.svg',
guestRoom:'/static/images/newCommercialBI/businessGuestRoom.svg'
},
haveIconObj:{
have:'/static/images/newCommercialBI/businessHave.svg',
noHave:'/static/images/newCommercialBI/businessNoHave.svg'
},
time: '',//跳转携带的时间
menu: {},//手机配置信息
transactionList:[],//交易分析数据

113
pages/commercialBI/carPortrait.vue
View File

@ -2,10 +2,10 @@
<div>
<div style="position: fixed;right: 0;top: 15%;z-index:99999999999">
<!-- 组件通过传入的have去判断组件在哪个页面 然后哪个页面的标志就不显示 -->
<commercial-type :have="0"/>
<commercial-type :have="0" :time="searchText"/>
</div>
<div class="main" v-if="isHaveData">
<div v-if="!isShowAllProvince" class="header" :style="{backgroundImage: 'url('+ 'https://eshangtech.com/ShopICO/ahyd-BID/commercial/car.svg' +')'}">
<div v-if="!isShowAllProvince" class="header" :style="{backgroundImage: 'url('+ '/static/images/newCommercialBI/car.svg' +')'}">
<div class="analyse" v-if="analyseText">
<text class="title">分析</text>
<text class="content">{{analyseText}}</text>
@ -33,10 +33,41 @@
</view>
</div>
</div>
<div class="other">
<div class="label">
<div v-for="(item,index) in labelList" :key="index" :class="index===0?'item0 item':index===1?'item1 item':index===2?'item2 item':index===3?'item3 item':index===4?'item4 item':'item'">
{{item}}
<!-- <div class="other">-->
<!-- <div class="label">-->
<!-- <div v-for="(item,index) in labelList" :key="index" :class="index===0?'item0 item':index===1?'item1 item':index===2?'item2 item':index===3?'item3 item':index===4?'item4 item':'item'">-->
<!-- {{item}}-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<div class="detailBox">
<div class="detailTop">
<div class="topLeft">A类</div>
<div class="topRight">
<span class="rightText">查看更多</span>
<img class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
</div>
</div>
<div class="functionList">
<div class="functionItem">
<image class="haveFun" src="/static/images/newCommercialBI/carHave.svg"/>
<image class="carIcon" src="/static/images/newCommercialBI/carCarIcon.svg"/>
<text class="funText">司机之家</text>
</div>
<div class="functionItem">
<image class="haveFun" src="/static/images/newCommercialBI/carHave.svg"/>
<image class="carIcon" src="/static/images/newCommercialBI/carCharge.svg"/>
<text class="funText">充电桩</text>
</div>
<div class="functionItem">
<image class="haveFun" src="/static/images/newCommercialBI/carHave.svg"/>
<image class="carIcon" src="/static/images/newCommercialBI/carBady.svg"/>
<text class="funText">母婴室</text>
</div>
<div class="functionItem">
<image class="haveFun" src="/static/images/newCommercialBI/carHave.svg"/>
<image class="carIcon" src="/static/images/newCommercialBI/carGuestRoom.svg"/>
<text class="funText">客房</text>
</div>
</div>
</div>
@ -1173,12 +1204,14 @@ export default {
min-height: 100vh;
.header{
width: 100%;
height: calc(1.056 * 100vw);
height: 648rpx;
//height: calc(1.056 * 100vw);
padding: 0 16px;
box-sizing: border-box;
position: relative;
background-repeat: no-repeat;
background-size: cover;
//background-size: cover;
background-size: 100% 100%;
.car{
width: 100vw;
height: 100%;
@ -1369,6 +1402,70 @@ export default {
height: 95px;
}
}
.detailBox{
width: 340rpx;
height: 312rpx;
background: linear-gradient(136deg, #F0F6FF 0%, #FFFFFF 100%);
border-radius: 16rpx;
margin-top: 32rpx;
box-sizing: border-box;
padding: 24rpx 32rpx;
.detailTop{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.topLeft{
background: linear-gradient(180deg, rgba(49, 144, 255, 0.2) 0%, rgba(22, 87, 255, 0.2) 100%);
border-radius: 8rpx;
padding: 0 16rpx;
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #1E67FF;
line-height: 40rpx;
}
.topRight{
display: flex;
align-items: center;
.rightText{
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #A69E9F;
line-height: 40rpx;
}
.moreIcon{
width: 24rpx;
height: 24rpx;
}
}
}
.functionList{
.functionItem{
margin-top: 16rpx;
display: flex;
align-items: center;
.haveFun{
width: 32rpx;
height: 32rpx;
margin-right: 18rpx;
}
.carIcon{
width: 32rpx;
height: 32rpx;
margin-right: 4rpx;
}
.funText{
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #6C737A;
line-height: 40rpx;
}
}
}
}
}
}
.headerTop{

38
pages/commercialBI/commercialType.vue
View File

@ -2,6 +2,7 @@
<div class="typeBigList">
<div class="item" v-for="(item,index) in showTypeList" :key="index" @click="handleGo(item.url)">
<image class="icon" :src="item.img"/>
<text class="text">{{item.text}}</text>
</div>
</div>
</template>
@ -13,11 +14,13 @@ export default {
data(){
return {
typeList:[
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/car.svg',url:'/pages/commercialBI/carPortrait'},
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/guest.svg',url:'/pages/commercialBI/guestPortrait'},
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/business_icon.svg',url:'/pages/commercialBI/managePortrait'},
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/trade.svg',url:'/pages/commercialBI/businessPortrait'},
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/brand.svg',url:'/pages/commercialBI/formatPortrait'},
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/car.svg',url:'/pages/commercialBI/carPortrait',text:'车流'},
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/guest.svg',url:'/pages/commercialBI/guestPortrait',text:'客群'},
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/business_icon.svg',url:'/pages/commercialBI/managePortrait',text:'经营'},
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/trade.svg',url:'/pages/commercialBI/businessPortrait',text:'交易'},
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/brand.svg',url:'/pages/commercialBI/formatPortrait',text:'品牌'},
{img:'/static/images/newCommercialBI/newExamineIcon.svg',url:`/pages/newamine/index?come=index&type=${1}&time=${this.time}`,text:'考核'},
{img:'/static/images/newCommercialBI/inspectionIcon.svg',url:`/pages/newamine/index?come=index&type=${2}&time=${this.time}`,text:'巡检'},
],
showTypeList:[],
selectIndex: 5,
@ -28,6 +31,10 @@ export default {
have:{
type:Number,
default:5
},
time:{
type: String,
default: ''
}
},
watch:{
@ -74,21 +81,30 @@ export default {
.typeBigList{
position: fixed;
right: 0;
top: 15%;
top: 12%;
.item{
width: 45px;
height: 40px;
width: 150rpx;
height: 80rpx;
border-radius: 20px 0 0 20px;
box-sizing: border-box;
padding: 14rpx;
background: rgba(255,255,255,0.8);
display: flex;
align-items: center;
margin-bottom: 10px;
border: 1px solid #ccc;
.icon{
width: 30px;
height: 30px;
width: 52.5rpx;
height: 52.5rpx;
border-radius: 50%;
margin-left: 10px;
margin-right: 10rpx;
}
.text{
font-size: 24rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 36rpx;
}
}
}

145
pages/commercialBI/components/headerTop.vue
View File

@ -24,17 +24,49 @@
</view>
</div>
</div>
<div class="label">
<div :class="index===0?'labelItem labelItem0':index===1?'labelItem labelItem1':index===2?'labelItem labelItem2':index===3?'labelItem labelItem3':
index===4?'labelItem labelItem4':index===5?'labelItem labelItem5':''" v-for="(item,index) in labelList" :key="index"
:style="{background: 'linear-gradient('+bgColor+')'}"
>{{ item }}</div>
<div class="detailBox" :style="{background: detailBoxBg}">
<div class="detailTop">
<div class="topLeft" :style="{background:topLeftBg,color:topLeftColor}">A类</div>
<div class="topRight">
<span class="rightText">查看更多</span>
<img class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
</div>
</div>
<div class="analyse" v-if="analyseText">
<text class="title">分析</text>
<text class="content">{{analyseText}}</text>
<div class="functionList">
<div class="functionItem">
<image class="haveFun" :src="haveIconObj.have"/>
<image class="carIcon" :src="iconObj.car"/>
<text class="funText">司机之家</text>
</div>
<div class="functionItem">
<image class="haveFun" :src="haveIconObj.have"/>
<image class="carIcon" :src="iconObj.charge"/>
<text class="funText">充电桩</text>
</div>
<div class="functionItem">
<image class="haveFun" :src="haveIconObj.have"/>
<image class="carIcon" :src="iconObj.bady"/>
<text class="funText">母婴室</text>
</div>
<div class="functionItem">
<image class="haveFun" :src="haveIconObj.have"/>
<image class="carIcon" :src="iconObj.guestRoom"/>
<text class="funText">客房</text>
</div>
</div>
</div>
<!-- <div class="label">-->
<!-- <div :class="index===0?'labelItem labelItem0':index===1?'labelItem labelItem1':index===2?'labelItem labelItem2':index===3?'labelItem labelItem3':-->
<!-- index===4?'labelItem labelItem4':index===5?'labelItem labelItem5':''" v-for="(item,index) in labelList" :key="index"-->
<!-- :style="{background: 'linear-gradient('+bgColor+')'}"-->
<!-- >{{ item }}</div>-->
<!-- </div>-->
</div>
<!-- <div class="analyse" v-if="analyseText">-->
<!-- <text class="title">分析</text>-->
<!-- <text class="content">{{analyseText}}</text>-->
<!-- </div>-->
</div>
</template>
@ -86,8 +118,36 @@ export default {
analyseInfo:{
type:Object,
default:()=>{}
},
iconObj:{
type:Object,
default:{
car:'',
charge:'',
bady:'',
guestRoom:''
}
},
haveIconObj:{
type:Object,
default:{
have:'',
noHave:'',
}
},
topLeftBg:{
type:String,
default:''
},
topLeftColor:{
type:String,
default:''
},
detailBoxBg:{
type:String,
default:''
},
},
data() {
return {
labelList:[],
@ -172,12 +232,14 @@ export default {
<style scoped lang="scss">
.header{
width: 100%;
height: calc(1.056 * 100vw);
height: 648rpx;
//height: calc(1.056 * 100vw);
box-sizing: border-box;
position: relative;
padding: 0 16px;
background-repeat: no-repeat;
background-size: cover;
//background-size: cover;
background-size: 100% 100%;
.headerTop{
width: 100vw;
position: fixed;
@ -271,6 +333,69 @@ export default {
}
}
}
.detailBox{
width: 340rpx;
height: 312rpx;
border-radius: 16rpx;
margin-top: 32rpx;
box-sizing: border-box;
padding: 24rpx 32rpx;
.detailTop{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.topLeft{
background: linear-gradient(180deg, rgba(49, 144, 255, 0.2) 0%, rgba(22, 87, 255, 0.2) 100%);
border-radius: 8rpx;
padding: 0 16rpx;
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #1E67FF;
line-height: 40rpx;
}
.topRight{
display: flex;
align-items: center;
.rightText{
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #A69E9F;
line-height: 40rpx;
}
.moreIcon{
width: 24rpx;
height: 24rpx;
}
}
}
.functionList{
.functionItem{
margin-top: 16rpx;
display: flex;
align-items: center;
.haveFun{
width: 32rpx;
height: 32rpx;
margin-right: 18rpx;
}
.carIcon{
width: 32rpx;
height: 32rpx;
margin-right: 4rpx;
}
.funText{
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #6C737A;
line-height: 40rpx;
}
}
}
}
.label{
width: calc(60% + 20px);
height: 127px;

20
pages/commercialBI/guestPortrait.vue
View File

@ -4,7 +4,8 @@
<commercial-type :have="1"/>
</div>
<header-top :bgUrl="bgUrl" :menu="menu" :topBg="topBg" :bgColor="bgColor" :title="title" :page="page" :backType="backType" :analyseInfo="analyseInfo"
:serverpartName="serviceInfo.SERVERPART_NAME" :spregionTypeName="serviceInfo.SPREGIONTYPE_NAME" :serviceInfo="serviceInfo"/>
:serverpartName="serviceInfo.SERVERPART_NAME" :spregionTypeName="serviceInfo.SPREGIONTYPE_NAME" :serviceInfo="serviceInfo"
:topLeftBg="topLeftBg" :topLeftColor="topLeftColor" :iconObj="iconObj" :haveIconObj="haveIconObj" :detailBoxBg="detailBoxBg"/>
<div class="charts">
<div class="chartsItem">
@ -84,8 +85,23 @@ export default {
topBg:'linear-gradient(180deg, #A1D0C1 0%, #B1D9CD 100%);',//顶部组件的悬浮背景色
title:'客群画像',//页面标题
bgColor:'180deg, #30C8ED 0%, #0B9353 100%',//标签背景颜色
bgUrl:'https://eshangtech.com/ShopICO/ahyd-BID/commercial/guestPortraitBg.svg',//背景图片路径
bgUrl:'/static/images/newCommercialBI/guestPortraitBg.svg',//背景图片路径
page:'/pages/commercialBI/guestPortrait',
detailBoxBg:'linear-gradient(136deg, #ECF6F6 0%, #FFFFFF 100%);',
topLeftBg:'linear-gradient(180deg, rgba(48, 200, 237, 0.2) 0%, rgba(11, 147, 83, 0.2) 100%)',// 类别背景
topLeftColor:'#0E9760',// 类别文字颜色
iconObj:{
car:'/static/images/newCommercialBI/carGuest.svg',
charge:'/static/images/newCommercialBI/chargeGuest.svg',
bady:'/static/images/newCommercialBI/badyGuest.svg',
guestRoom:'/static/images/newCommercialBI/guestRoomGuest.svg'
},
haveIconObj:{
have:'/static/images/newCommercialBI/haveGuest.svg',
noHave:'/static/images/newCommercialBI/noHaveGuest.svg'
},
time:'',//跳转携带的时间
menu:{},//手机配置信息
customer:{}, // 客群分析第一个

18
pages/commercialBI/managePortrait.vue
View File

@ -4,7 +4,8 @@
<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"/>
:serverpartName="serviceInfo.SERVERPART_NAME" :spregionTypeName="serviceInfo.SPREGIONTYPE_NAME" :serviceInfo="serviceInfo"
:topLeftBg="topLeftBg" :topLeftColor="topLeftColor" :iconObj="iconObj" :haveIconObj="haveIconObj" :detailBoxBg="detailBoxBg"/>
<div class="charts">
<div class="chartsItem">
@ -205,8 +206,21 @@ export default {
selectTab:0,//当前选中
title:'经营画像',//页面标题
bgColor: '180deg, #996CFF 0%, #5D43F8 100%',
bgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/commercial/managePortraitBg.svg',//背景图片路径
bgUrl: '/static/images/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:'/static/images/newCommercialBI/carPortrait.svg',
charge:'/static/images/newCommercialBI/chargePortraitBg.svg',
bady:'/static/images/newCommercialBI/babyPortrait.svg',
guestRoom:'/static/images/newCommercialBI/guestRoomPortrait.svg'
},
haveIconObj:{
have:'/static/images/newCommercialBI/havePortrait.svg',
noHave:'/static/images/newCommercialBI/noHavePortrait.svg'
},
time: '',//跳转携带的时间
menu: {},//手机配置信息
revenueList:[],//营收分析

123
pages/index/components/rateCharts.vue
View File

@ -1,11 +1,122 @@
<script setup>
</script>
<template>
$END$
<view class="rateMain">
<image v-if="preferPath" style="width: 144rpx;height: 144rpx" :src="preferPath"></image>
<canvas style="width: 144rpx;height: 144rpx;position:fixed;left: 100%" canvas-id="rate" id="rate"/>
</view>
</template>
<style scoped>
<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
name: "rateCharts",
data(){
return {
preferPath:'',
}
},
props:{
success:{
type: Array,
default:[]
},
colorList:{
type: Array,
default:[]
}
},
watch:{
success:{
handler(value){
this.preferPath = ''
let sum = value[0] + value[1]
let firstRate = Number(((value[0] / sum)*100).toFixed(2))
let secondRate = 100 - Number(firstRate)
let res = {
series:[{
data:[{name:'驿站营收',value:firstRate},{name:'未完成',value:secondRate}]
}]
}
this.drawCharts('rate',res)
},
}
},
methods:{
drawCharts(id,data){
const ctx = uni.createCanvasContext(id, this);
let _this = this
uChartsInstance[id] = new uCharts({
type: "ring",
context: ctx,
width: 72,
height: 72,
series: data.series,
animation: false,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: _this.colorList,
padding: [5,5,5,5],
dataLabel: false,
enableScroll: false,
legend: {
show: false,
position: "right",
lineHeight: 25
},
title: {
name: '分润占比',
fontSize: 10,
color: "#A69E9F"
},
extra: {
ring: {
ringWidth: 10,
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: -90,
labelWidth: 15,
border: false,
borderWidth: 3,
customRadius:34,
borderColor: "#FFFFFF"
}
}
});
setTimeout( ()=>{
this.canvasToTempImage('rate')
},500)
},
canvasToTempImage(id){
uni.canvasToTempFilePath({
canvasId:id,
complete:(res)=>{
if (res.tempFilePath){
uni.getFileSystemManager().readFile({
filePath: res.tempFilePath,
encoding: 'base64',
success: res => {
let base64 = 'data:image/png;base64,' + res.data;
this.preferPath = base64
}
})
}
}
},this)
},
}
}
</script>
<style lang="scss" scoped>
.rateMain{
width: 100%;
height: 100%;
.month{
width: 136rpx;
height: 136rpx;
position: fixed;
left: 100%;
}
}
</style>

325
pages/index/index.vue
View File

@ -26,16 +26,18 @@
<!-- ,height:loadMore?'200px':'38px'-->
<div class="storeDetail" :style="{ top: menu.bottom + 13 + 'px',left:0 + 'px'}">
<swiper class="detailBox" previous-margin="40rpx" next-margin="20rpx" :style="{height: loadMore?`1030rpx`:`508rpx`}" @change="handleChangeSelect" :current="selectDetail">
<swiper class="detailBox" previous-margin="40rpx" next-margin="20rpx" :style="{height: loadMore?`1290rpx`:`770rpx`}" @change="handleChangeSelect" :current="selectDetail">
<block v-for="(item,index) in nowMonth" :key="index">
<swiper-item :item-id="index" :data-item-id="index" :class="selectMonth===index+1?'detailItemBox':'noSelectItemBox'">
<view class="box" :style="{height: loadMore?selectMonth===index+1 ?`1030rpx`:'230px':selectMonth===index+1?`508rpx`:'230px',background:0<=index && index<=2?'#FEB39F':3<=index && index<=5?'#8AC9EA':6<=index && index<=8?'#93B2EF':'#DDB795'}">
<view class="box" :style="{height: loadMore?selectMonth===index+1 ?`1290rpx`:'770rpx':selectMonth===index+1?`770rpx`:'456rpx',background:0<=index && index<=2?'#FEB39F':3<=index && index<=5?'#8AC9EA':6<=index && index<=8?'#93B2EF':'#DDB795'}">
<view class="top" :style="{background:0<=index && index<=2?'linear-gradient(135deg, #FFE5CA 0%, #FFFFFF 29%, #FFFFFF 69%, #FFDCD5 100%)':3<=index && index<=5?'linear-gradient(135deg, #D4F7FF 0%, #FFFFFF 29%, #FFFFFF 69%, #CEECFF 100%)':6<=index && index<=8?'linear-gradient(135deg, #D5E8FF 0%, #FFFFFF 29%, #FFFFFF 69%, #D3E0FF 100%)':'linear-gradient(135deg, #FEEBD1 0%, #FFFFFF 29%, #FFFFFF 69%, #FFE7D4 100%)'}">
<view style="display: inline-block" @click="goToRevenueStatic">
<view class="statistics">
<image class="staticImg" :src="1<=selectMonth && selectMonth<=3?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex/1stStaticIcon.svg':4<=selectMonth && selectMonth<=6?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex/2stStaticIcon.svg':7<=selectMonth && selectMonth<=9?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex/3stStaticIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/newIndex/4stStaticIcon.svg'"/>
<text class="staticTitle">营收统计</text>
<image class="staticIcon" :src="1<=selectMonth && selectMonth<=3?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex/1stStaticMore.svg':4<=selectMonth && selectMonth<=6?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex/2stStaticMore.svg':7<=selectMonth && selectMonth<=9?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex/3stStaticMore.svg':'https://eshangtech.com/ShopICO/ahyd-BID/newIndex/4stStaticMore.svg'"/>
</view>
</view>
<view class="revenueBox" v-show="selectMonth===index+1">
<view class="revenueTop">
<view class="revenueTopLeft">
@ -59,6 +61,7 @@
<text class="rightNav">同比</text>
</view>
<view class="newBox">
<view class="progress" @click="handleShowHaveNoticeBox" :style="{background:1<=selectMonth && selectMonth<=3?'#FFAB30':4<=selectMonth && selectMonth<=6?'#5DC1E0':7<=selectMonth && selectMonth<=9?'#7CADF8':'#DCA858'}">
<view class="have" :style="{width:progressObj.owner+'%',background:1<=selectMonth && selectMonth<=3?'#DB573B':4<=selectMonth && selectMonth<=6?'#137BBD':7<=selectMonth && selectMonth<=9?'#3663CB':'#A66A37'}"></view>
<view class="haveNoticeBox" v-if="showHaveNotice" @click.stop="handleShowHaveNoticeBox">
@ -67,7 +70,6 @@
</view>
</view>
<view class="message">
<view class="smallDetailItem" style="margin-right: 14px">
<view class="messageTop">
@ -99,6 +101,24 @@
</view>
</view>
</view>
<view class="moneyRate">
<view class="leftBox">
<rateCharts :success="moneyRateList" :colorList="['#A66A37','#DCA858']"/>
</view>
<view class="rightBox">
<view class="noticeItem">
<view class="noticeTop"></view>
<view class="noticeText">驿站营收<span class="noticeSmallText">/万元</span></view>
<view class="noticeMoney">3,512.54</view>
</view>
<view class="noticeItem">
<view class="noticeTop" style="background: #DCA858"></view>
<view class="noticeText">商家营收<span class="noticeSmallText">/万元</span></view>
<view class="noticeMoney">2,615.68</view>
</view>
</view>
</view>
</view>
</view>
<view class="revenueBox" v-show="selectMonth!==index+1">
<view class="revenueTop">
@ -335,37 +355,59 @@
<!-- </view>-->
</view>
<view class="timeBox">
<image class="timeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/1stTimeIcon.svg"/>
<image class="timeIcon" src="/static/images/newIndex2/1stTypeImg.svg"/>
<!-- v-show="selectMonth===nowMonth"-->
<text class="timeText" >{{lastDay}}</text>
</view>
<image class="typeImg" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/1stTypeImg.svg"/>
</view>
<view class="report" @click="handleGoOperate">
<text class="reportTitle">经营报表</text>
<image class="timeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/2stTimeIcon.svg"/>
<image class="typeImg" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/2stTypeImg.svg"/>
<view class="report" >
<text class="reportTitle">服务区信息</text>
<image class="timeIcon" src="/static/images/newIndex2/2stTypeImg.svg"/>
<image class="typeImg" src="/static/images/newIndex2/serviceCar.svg"/>
</view>
</view>
<view class="secondView">
<view class="funItemView" @click="changeShowPortrait" style="margin-right: 9px;background-image: url('https://eshangtech.com/ShopICO/ahyd-BID/newIndex/funThird.svg')">
<text class="funItemTitle" style="color: #287D66;">数智统计</text>
<image class="timeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/3stTimeIcon.svg"/>
<view class="funItemView" @click="handleGoOperate" style="background: url('/static/images/newIndex2/newRevenueBg.svg')">
<text class="funItemTitle" style="color: #0086C6;">经营报表</text>
<image class="timeIcon" src="/static/images/newIndex2/3stTypeImg.svg"/>
<image class="typeImg" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/3stTypeImg.svg"/>
</view>
<view class="funItemView" @click="handleFestival" style="margin-right: 9px;background-image: url('https://eshangtech.com/ShopICO/ahyd-BID/newIndex/funFourth.svg')">
<text class="funItemTitle" style="color: #D25E00;">经营品牌库</text>
<image class="timeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/4stTimeIcon.svg"/>
<image class="typeImg" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/4stTypeImg.svg"/>
<view class="funItemView" @click="handleFestival" style="margin-right: 9px;background-image: url('/static/images/newIndex2/brandHouse.svg')">
<text class="funItemTitle" style="color: #3F66DA;">经营品牌库</text>
<image class="timeIcon" src="/static/images/newIndex2/4stTypeImg.svg"/>
<image class="typeImg" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/2stTypeImg.svg"/>
<!-- <image class="typeImg" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/4stTypeImg.svg"/>-->
</view>
<view class="funItemView" style="background-image: url('https://eshangtech.com/ShopICO/ahyd-BID/newIndex/funFifth.svg')" @click="handleMoney">
<text class="funItemTitle" style="color: #7C46CD;">财务报表</text>
<image class="timeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/5stTimeIcon.svg"/>
<image class="timeIcon" src="/static/images/newIndex2/5stTypeImg.svg"/>
<image class="typeImg" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/5stTypeImg.svg"/>
</view>
</view>
<view class="secondView" style="margin-top: 18rpx">
<view class="funItemView" @click="changeShowPortrait" style="margin-right: 9px;background-image: url('/static/images/newIndex2/statisticsBg.svg')">
<text class="funItemTitle" style="color: #287D66;">数智统计</text>
<image class="timeIcon" src="/static/images/newIndex2/6stTypeImg.svg"/>
<image class="typeImg" src="/static/images/newIndex2/computer.svg"/>
</view>
<view class="funItemView" @click="handleGoExamine(1)" style="margin-right: 9px;background-image: url('/static/images/newIndex2/sceneBg.svg')">
<text class="funItemTitle" style="color: #EA7E28;">现场管理</text>
<image class="timeIcon" src="/static/images/newIndex2/7stTypeImg.svg"/>
<image class="typeImg" src="/static/images/newIndex2/officeBag.svg"/>
</view>
<view class="funItemView" @click="goToNational" style="background-image: url('/static/images/newIndex2/newFestivalBg.svg')">
<text class="funItemTitle" style="color: #F15454;">节日特刊</text>
<image class="timeIcon" src="/static/images/newIndex2/8stTypeImg.svg"/>
<image class="typeImg" src="/static/images/newIndex2/festivalPage.svg"/>
</view>
</view>
</view>
<!-- 四个画像-->
@ -418,71 +460,41 @@
</div>
</div>
</view>
<!-- 营收占比-->
<view class="proportion">
<view class="proportionTitle">营收占比</view>
<view class="contentPropor">
<view class="tabs">
<view
v-for="(item, index) in propOfRevenList"
:key="index"
:class="selectTab === item.value ? 'active tabItem' : 'tabItem'"
@click="handleSelectTab(item.value)">
{{ item.name }}
</view>
</view>
<view class="chart">
<div v-show="selectTab===1" v-if="regionProgress.length>0">
<div>
<div class="operation-c-list" v-for="(item,o) in regionProgress" :key="o">
<div class="top">
<div class="left">
<div class="icon">
<image :src="o===0?'https://eshangtech.com/ShopICO/ahyd-BID/index/No1.svg':o===1?'https://eshangtech.com/ShopICO/ahyd-BID/index/No2.svg':o===2?'https://eshangtech.com/ShopICO/ahyd-BID/index/No3.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/No4.svg'"></image>
<text>{{o+1}}</text>
<!-- 人流预警-->
<view class="peopleWarning" >
<div class="carWarningTop">
<div class="warningBox">
<image class="warningIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/personIcon.svg"/>
<div class="trafficBox">
<text class="trafficCar" style="color: #075FF0">人流预警</text>
<image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/personMoreIcon.svg"/>
</div>
<p class="name">{{item.name}}</p>
</div>
<p class="price">{{$util.fmoney(item.value,2)}}</p>
<div class="moreStoreBox" @click="handleGoWarning">
<!-- <span class="moreText">更多记录</span>-->
<!-- <image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>-->
</div>
<div class="bottom">
<div class="bar">
<div class="progress" :style="{width:item.percentage+'%'}"></div>
</div>
<p class="number">{{item.percentage+'%'}}</p>
<div class="contentList" >
<div class="contentItem" v-for="(item,index) in warningList" :key="index">
<div class="index" >
<div class="boxBg" v-if="index<=2"></div>
<span class="indexText" :style="{fontWeight:index<=2?'bold':'normal',color:index<=2?'#160002':'#786B6C'}">{{index + 1}}</span>
</div>
<div class="serviceBox">
<span class="name">{{item.name}}</span>
<span class="position">{{item.SERVERPART_REGION}}区</span>
</div>
<div class="numberBox">
<span class="number">{{item.VEHICLE_COUNT}}</span>
<span class="unit">/人</span>
</div>
<div class="addBox">
<image class="addIcon" :src="Number(item.VEHICLE_RATE)>100?'/static/images/examine/add.svg':Number(item.VEHICLE_RATE)===100?'':'/static/images/examine/reduce.svg'"/>
<span class="add">{{item.VEHICLE_RATE}}%</span>
</div>
</div>
</div>
</div>
<div v-show="selectTab===2" v-if="areaProgress.length>0">
<div>
<div class="operation-c-list" v-for="(item,o) in areaProgress" :key="o">
<div class="top">
<div class="left">
<div class="icon">
<image :src="o===0?'https://eshangtech.com/ShopICO/ahyd-BID/index/No1.svg':o===1?'https://eshangtech.com/ShopICO/ahyd-BID/index/No2.svg':o===2?'https://eshangtech.com/ShopICO/ahyd-BID/index/No3.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/No4.svg'"></image>
<text>{{o+1}}</text>
</div>
<p class="name">{{item.name}}</p>
</div>
<p class="price">{{$util.fmoney(item.value,2)}}</p>
</div>
<div class="bottom">
<div class="bar">
<div class="progress" :style="{width:item.percentage+'%'}"></div>
</div>
<p class="number">{{item.percentage+'%'}}</p>
</div>
</div>
</div>
</div>
</view>
</view>
</view>
<!-- 自营计划-->
@ -575,46 +587,77 @@
</view>
</view>
<!-- 营收占比-->
<view class="proportion">
<view class="proportionTitle">营收占比</view>
<!-- 人流预警-->
<view class="peopleWarning" v-if="false">
<div class="carWarningTop">
<div class="warningBox">
<image class="warningIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/personIcon.svg"/>
<div class="trafficBox">
<text class="trafficCar">人流预警</text>
<image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/personMoreIcon.svg"/>
<view class="contentPropor">
<view class="tabs">
<view
v-for="(item, index) in propOfRevenList"
:key="index"
:class="selectTab === item.value ? 'active tabItem' : 'tabItem'"
@click="handleSelectTab(item.value)">
{{ item.name }}
</view>
</view>
<view class="chart">
<div v-show="selectTab===1" v-if="regionProgress.length>0">
<div>
<div class="operation-c-list" v-for="(item,o) in regionProgress" :key="o">
<div class="top">
<div class="left">
<div class="icon">
<image :src="o===0?'https://eshangtech.com/ShopICO/ahyd-BID/index/No1.svg':o===1?'https://eshangtech.com/ShopICO/ahyd-BID/index/No2.svg':o===2?'https://eshangtech.com/ShopICO/ahyd-BID/index/No3.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/No4.svg'"></image>
<text>{{o+1}}</text>
</div>
<p class="name">{{item.name}}</p>
</div>
<p class="price">{{$util.fmoney(item.value,2)}}</p>
</div>
<div class="bottom">
<div class="bar">
<div class="progress" :style="{width:item.percentage+'%'}"></div>
</div>
<p class="number">{{item.percentage+'%'}}</p>
</div>
</div>
<div class="moreStoreBox" @click="handleGoWarning">
<!-- <span class="moreText">更多记录</span>-->
<!-- <image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>-->
</div>
</div>
<div class="contentList" >
<div class="contentItem" v-for="(item,index) in warningList" :key="index">
<div class="index">
<div class="boxBg" v-if="index<=2"></div>
<span class="indexText" :style="{fontWeight:index<=2?'bold':'normal',color:index<=2?'#160002':'#786B6C'}">{{index + 1}}</span>
<div v-show="selectTab===2" v-if="areaProgress.length>0">
<div>
<div class="operation-c-list" v-for="(item,o) in areaProgress" :key="o">
<div class="top">
<div class="left">
<div class="icon">
<image :src="o===0?'https://eshangtech.com/ShopICO/ahyd-BID/index/No1.svg':o===1?'https://eshangtech.com/ShopICO/ahyd-BID/index/No2.svg':o===2?'https://eshangtech.com/ShopICO/ahyd-BID/index/No3.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/No4.svg'"></image>
<text>{{o+1}}</text>
</div>
<div class="serviceBox">
<span class="name">{{item.name}}</span>
<span class="position">{{item.SERVERPART_REGION}}区</span>
<p class="name">{{item.name}}</p>
</div>
<div class="numberBox">
<span class="number">{{item.VEHICLE_COUNT}}</span>
<span class="unit">/人</span>
<p class="price">{{$util.fmoney(item.value,2)}}</p>
</div>
<div class="bottom">
<div class="bar">
<div class="progress" :style="{width:item.percentage+'%'}"></div>
</div>
<p class="number">{{item.percentage+'%'}}</p>
</div>
<div class="addBox">
<image class="addIcon" :src="Number(item.VEHICLE_RATE)>100?'/static/images/examine/add.svg':Number(item.VEHICLE_RATE)===100?'':'/static/images/examine/reduce.svg'"/>
<span class="add">{{item.VEHICLE_RATE}}%</span>
</div>
</div>
</div>
</view>
</view>
</view>
<!-- 巡检考核-->
<view class="patrolInspection">
<view class="patrolInspection" v-if="false">
<view class="patrolTitle">巡检考核</view>
<view class="contentBox">
@ -687,8 +730,8 @@
</view>
</view>
</view>
<!--欢度国庆-->
<div class="nationalDay" @click="goToNational">
<!--节日特刊-->
<div class="nationalDay" v-if="false" @click="goToNational">
<div class="national">
<div class="nationalTop">
<div class="nationalTopLeft">
@ -766,9 +809,10 @@ import uniPopup from "../../components/uni-popup.vue";
import Tabbar from "../../components/tabbar/tabbar.vue";
import anhuiYestodayRevenueData from "../everdayRenven/components/anhuiYestodayRevenueData";
import MonthCharts from "./components/monthCharts.vue";
import RateCharts from "./components/rateCharts.vue";
var rincanvas = {};
export default {
components: {MonthCharts, Tabbar,uniPopup},
components: {RateCharts, MonthCharts, Tabbar,uniPopup},
data() {
const lastDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD', -1)
const nowDay = this.$util.cutDate(new Date(), 'MM月DD日')
@ -876,6 +920,7 @@ export default {
trafficCurrentObj:{},// 当前月
showMonthDetail:false,//月度车流的显示框
yesObjCompared:'',//昨日营收的比较值
moneyRateList:[]
}
},
watch:{
@ -970,6 +1015,9 @@ export default {
},
onLoad(option){
const _this = this
setTimeout(()=>{
_this.moneyRateList = [3512.54,2615.68]
},3000)
// 顶部显示的时间
this.single = timestampToTimeMonth((new Date(this.lastDay).getTime()))
// 获取手机参数对页面进行适配 主要是用于拿到胶囊的位置
@ -1092,6 +1140,10 @@ export default {
this.nationalDayList[1].value = data.Result_Data.sumEntryCount?this.$util.fmoney(Number((data.Result_Data.sumEntryCount / 10000).toFixed(2))):''
this.nationalDayList[2].value = data.Result_Data.GrowthList[0].Entry_GrowthRate>0?'+' + data.Result_Data.GrowthList[0].Entry_GrowthRate + '%':'-' + data.Result_Data.GrowthList[0].Entry_GrowthRate + '%'
},
// 跳转到营收统计
goToRevenueStatic(){
this.$util.toNextRoute('navigateTo', `/pages/revenueStatistics/index?time=${this.lastDay}`)
},
goToNational(){
this.$util.toNextRoute('navigateTo', `/pages/nationalPage/index?time=${this.lastDay}`)
},
@ -2112,7 +2164,7 @@ $iphoneHeight: env(safe-area-inset-bottom);
background: rgba(254, 192, 168,0.8);
.top{
width: 100%;
height: 436rpx;
height: 700rpx;
background: linear-gradient(135deg, #FFE5CA 0%, #FFFFFF 29%, #FFFFFF 69%, #FFDCD5 100%);
border-bottom-right-radius: 32rpx;
border-bottom-left-radius: 32rpx;
@ -2228,12 +2280,17 @@ $iphoneHeight: env(safe-area-inset-bottom);
margin-right: 64rpx;
}
}
.newBox{
width: 100%;
box-sizing: border-box;
padding: 32rpx 16rpx;
background: linear-gradient(135deg, #FFE3BA 0%, #FFF5E5 40%, #FFF1DB 78%, #FFDABC 100%); border-radius: 16rpx;
margin-top: 32rpx;
.progress{
width: 100%;
height: 24rpx;
border-radius: 12rpx;
background: #FFAB30;
margin-top: 24rpx;
//overflow: hidden;
position: relative;
.have{
@ -2334,6 +2391,58 @@ $iphoneHeight: env(safe-area-inset-bottom);
}
}
}
.moneyRate{
width: 100%;
box-sizing: border-box;
margin-top: 40rpx;
height: 144rpx;
display: flex;
align-items: center;
.leftBox{
width: 144rpx;
height: 144rpx;
margin-right: 16rpx;
}
.rightBox{
flex: 1;
display: flex;
align-items: center;
.noticeItem{
width: 50%;
.noticeTop{
width: 24rpx;
height: 12rpx;
background: #A66A37;
border-radius: 6rpx;
margin-bottom: 8rpx;
}
.noticeText{
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 40rpx;
margin-bottom: 6rpx;
.noticeSmallText{
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #A69E9F;
line-height: 40rpx;
margin-left: 4rpx;
}
}
.noticeMoney{
font-size: 36rpx;
font-family: DINAlternate, DINAlternate;
font-weight: bold;
color: #160002;
line-height: 44rpx;
}
}
}
}
}
}
}
.bottom{
@ -2543,7 +2652,7 @@ $iphoneHeight: env(safe-area-inset-bottom);
align-items: center;
justify-content: center;
position: absolute;
left: 0;bottom: 10px;
left: 0;bottom: 8px;
.noShowMore{
width: 25px;
height: 14px;
@ -3365,7 +3474,7 @@ $iphoneHeight: env(safe-area-inset-bottom);
.funBox{
width: calc(100% - 64rpx);
margin-left: 32rpx;
height: 378rpx;
height: 530rpx;
margin-bottom: 16px;
.firstBox{
display: flex;
@ -4001,7 +4110,7 @@ $iphoneHeight: env(safe-area-inset-bottom);
.boxBg{
width: 12px;
height: 12px;
background: #10BFCE;
background: #589CFF;
filter: blur(4px);
position: absolute;
top: 0;left: 0;

1
pages/revenue/component/otherCharts.vue
View File

@ -109,6 +109,7 @@ export default {
uni.canvasToTempFilePath({
canvasId:id,
complete:(res)=>{
console.log('res',res)
if (res.tempFilePath){
uni.getFileSystemManager().readFile({
filePath: res.tempFilePath,

627
pages/revenueStatistics/index.vue
View File

@ -1,11 +1,626 @@
<script setup>
</script>
<template>
$END$
<view class="main">
<view class="top">
<view class="header" :style="{height: menu.bottom + 5 +'px'}">
<view class="headerContent" :style="{height: (menu.bottom - menu.top) + 'px'}">
<image class="leftIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"/>
<view class="headerTimeBox">
<picker mode="date" fields="month" :value="searchText" :end="lastDay" @change="bindDateChange" >
<view class="time">
<image class="timeIcon" src="/static/images/newIndex2/timeIcon.svg"/>
<view class="text">{{ searchText }}</view>
<image class="icon" src="/static/images/newIndex2/timeUpDown.svg"></image>
</view>
</picker>
</view>
</view>
</view>
<view class="pageTitle" :style="{top: menu.bottom + 5 + 12 +'px'}">营收统计</view>
</view>
<view class="content">
<view class="revenueBox ydRevenue">
<view class="revenueBoxHeader">
<view class="headerTitle">驿达营收</view>
<image class="revenueImg" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/revenueItemBg.png"/>
<view class="revenueContent">
<view class="sumBox">
<image class="sumLogo" src="/static/images/newIndex2/sumLogo.svg"/>
<view class="sumText">
<view class="sumMoney">15,583.9</view>
<view class="sumUnit">总计<span class="unit">/元</span></view>
</view>
</view>
<view class="revenueAmount">
<view class="amountItem">
<view class="itemTop">
<view class="itemTopLeft">
<image class="leftIcon" src="/static/images/newIndex2/amountReceived.svg"/>
<view class="itemTitle">到账合计</view>
<view class="itemUnit">/元</view>
</view>
<view class="itemTopRight">7126.85</view>
</view>
<view class="itemBottom">
<view class="itemBottomItem">
<view class="bottomItemTitle">业主自营</view>
<view class="bottomItemValue">3178</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">自营提成</view>
<view class="bottomItemValue">241.84</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">合租经营</view>
<view class="bottomItemValue">2586.45</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">固定租金</view>
<view class="bottomItemValue">1120.56</view>
</view>
</view>
</view>
<view class="amountItem" style="margin-top: 56rpx">
<view class="itemTop">
<view class="itemTopLeft">
<image class="leftIcon" src="/static/images/newIndex2/amountEntry.svg"/>
<view class="itemTitle">入账合计</view>
<view class="itemUnit">/元</view>
</view>
<view class="itemTopRight">7126.85</view>
</view>
<view class="itemBottom">
<view class="itemBottomItem">
<view class="bottomItemTitle">业主自营</view>
<view class="bottomItemValue">3178</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">自营提成</view>
<view class="bottomItemValue">241.84</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">合租经营</view>
<view class="bottomItemValue">2586.45</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">固定租金</view>
<view class="bottomItemValue">1120.56</view>
</view>
</view>
</view>
<view class="amountItem" style="margin-top: 56rpx">
<view class="itemTop">
<view class="itemTopLeft">
<image class="leftIcon" src="/static/images/newIndex2/receivable.svg"/>
<view class="itemTitle">应收合计</view>
<view class="itemUnit">/元</view>
</view>
<view class="itemTopRight">7126.85</view>
</view>
<view class="itemBottom">
<view class="itemBottomItem">
<view class="bottomItemTitle">业主自营</view>
<view class="bottomItemValue">3178</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">自营提成</view>
<view class="bottomItemValue">241.84</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">合租经营</view>
<view class="bottomItemValue">2586.45</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">固定租金</view>
<view class="bottomItemValue">1120.56</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="revenueBox merchantRevenue" style="margin-top: 24rpx">
<view class="revenueBoxHeader">
<view class="headerTitle">商家营收</view>
<image class="revenueImg" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/entryAdd.png"/>
<view class="revenueContent">
<view class="sumBox">
<image class="sumLogo" src="/static/images/newIndex2/merchantsSum.svg"/>
<view class="sumText">
<view class="sumMoney">4,930.12</view>
<view class="sumUnit">总计<span class="unit">/元</span></view>
</view>
</view>
<view class="revenueAmount">
<view class="amountItem">
<view class="itemTop">
<view class="itemTopLeft">
<image class="leftIcon" src="/static/images/newIndex2/merchantsAmount.svg"/>
<view class="itemTitle">到账合计</view>
<view class="itemUnit">/元</view>
</view>
<view class="itemTopRight">7126.85</view>
</view>
<view class="itemBottom">
<view class="itemBottomItem">
<view class="bottomItemTitle">业主自营</view>
<view class="bottomItemValue">3178</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">自营提成</view>
<view class="bottomItemValue">241.84</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">合租经营</view>
<view class="bottomItemValue">2586.45</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">固定租金</view>
<view class="bottomItemValue">1120.56</view>
</view>
</view>
</view>
<view class="amountItem" style="margin-top: 56rpx">
<view class="itemTop">
<view class="itemTopLeft">
<image class="leftIcon" src="/static/images/newIndex2/merchantsEntry.svg"/>
<view class="itemTitle">入账合计</view>
<view class="itemUnit">/元</view>
</view>
<view class="itemTopRight">7126.85</view>
</view>
<view class="itemBottom">
<view class="itemBottomItem">
<view class="bottomItemTitle">业主自营</view>
<view class="bottomItemValue">3178</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">自营提成</view>
<view class="bottomItemValue">241.84</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">合租经营</view>
<view class="bottomItemValue">2586.45</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">固定租金</view>
<view class="bottomItemValue">1120.56</view>
</view>
</view>
</view>
<view class="amountItem" style="margin-top: 56rpx">
<view class="itemTop">
<view class="itemTopLeft">
<image class="leftIcon" src="/static/images/newIndex2/merchantsReceivable.svg"/>
<view class="itemTitle">应收合计</view>
<view class="itemUnit">/元</view>
</view>
<view class="itemTopRight">7126.85</view>
</view>
<view class="itemBottom">
<view class="itemBottomItem">
<view class="bottomItemTitle">业主自营</view>
<view class="bottomItemValue">3178</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">自营提成</view>
<view class="bottomItemValue">241.84</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">合租经营</view>
<view class="bottomItemValue">2586.45</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">固定租金</view>
<view class="bottomItemValue">1120.56</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="revenueBox otherData" style="margin-top: 24rpx">
<view class="revenueBoxHeader">
<view class="headerTitle">其他数据</view>
<image class="revenueImg" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/expenditure.png"/>
<view class="revenueContent">
<view class="revenueAmount">
<view class="amountItem">
<view class="itemTop">
<view class="itemTopLeft">
<image class="leftIcon" src="/static/images/newIndex2/itemQuantity.svg"/>
<view class="itemTitle">项目数量</view>
<view class="itemUnit">/个</view>
</view>
<view class="itemTopRight">499</view>
</view>
<view class="itemBottom">
<view class="itemBottomItem">
<view class="bottomItemTitle">业主自营</view>
<view class="bottomItemValue">102</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">自营提成</view>
<view class="bottomItemValue">44</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">合租经营</view>
<view class="bottomItemValue">220</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">固定租金</view>
<view class="bottomItemValue">123</view>
</view>
</view>
</view>
<view class="amountItem" style="margin-top: 56rpx">
<view class="itemTop">
<view class="itemTopLeft">
<image class="leftIcon" src="/static/images/newIndex2/itemRate.svg"/>
<view class="itemTitle">项目占比</view>
<view class="itemUnit">/%</view>
</view>
<view class="itemTopRight">100%</view>
</view>
<view class="itemBottom">
<view class="itemBottomItem">
<view class="bottomItemTitle">业主自营</view>
<view class="bottomItemValue">12%</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">自营提成</view>
<view class="bottomItemValue">9%</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">合租经营</view>
<view class="bottomItemValue">45%</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">固定租金</view>
<view class="bottomItemValue">25%</view>
</view>
</view>
</view>
<view class="amountItem" style="margin-top: 56rpx">
<view class="itemTop">
<view class="itemTopLeft">
<image class="leftIcon" src="/static/images/newIndex2/customersRate.svg"/>
<view class="itemTitle">对客占比</view>
<view class="itemUnit">/%</view>
</view>
<view class="itemTopRight">100%</view>
</view>
<view class="itemBottom">
<view class="itemBottomItem">
<view class="bottomItemTitle">业主自营</view>
<view class="bottomItemValue">44.59%</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">自营提成</view>
<view class="bottomItemValue">3.41%</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">合租经营</view>
<view class="bottomItemValue">36%</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">固定租金</view>
<view class="bottomItemValue">16%</view>
</view>
</view>
</view>
<view class="amountItem" style="margin-top: 56rpx">
<view class="itemTop">
<view class="itemTopLeft">
<image class="leftIcon" src="/static/images/newIndex2/comprehensive.svg"/>
<view class="itemTitle">综合提成</view>
<view class="itemUnit">/%</view>
</view>
<view class="itemTopRight">100%</view>
</view>
<view class="itemBottom">
<view class="itemBottomItem">
<view class="bottomItemTitle">业主自营</view>
<view class="bottomItemValue">0%</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">自营提成</view>
<view class="bottomItemValue">0%</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">合租经营</view>
<view class="bottomItemValue">32.4%</view>
</view>
<view class="itemBottomItem">
<view class="bottomItemTitle">固定租金</view>
<view class="bottomItemValue">77.6%</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data(){
return {
statusBarHeight:'',
menu:{},
lastDay:'',
searchText:''
}
},
onLoad(option){
console.log('option',option)
// 获取手机参数对页面进行适配 主要是用于拿到胶囊的位置
let systemInfo = uni.getSystemInfoSync()
this.statusBarHeight = Number(systemInfo.statusBarHeight)
uni.setStorageSync('phoneInfo',systemInfo)
this.menu = uni.getMenuButtonBoundingClientRect()
console.log('statusBarHeight',this.statusBarHeight)
console.log('menu',this.menu)
if (option.time){
const date = new Date(option.time)
let y = date.getFullYear()
let m = date.getMonth() + 1
if (m<10){
m = '0'+m
}
this.lastDay = option.time
this.searchText = `${y}-${m}`
}
<style scoped>
}
}
</script>
<style scoped lang="scss">
@import '/static/public/revenueStatistics/stylesheet.css';
.main{
height: 100%;
background: #f5f5f5;
.top{
width: 100%;
height: 560rpx;
position: relative;
background: linear-gradient(#FF7F37 0%, #FDA03E 60%, #F5F5F5 100%);;
.header{
position: fixed;
top: 0;left: 0;
width: 100%;
z-index: 9999;
background: linear-gradient(#FF9434 0%,#FE9139 100%);
box-sizing: border-box;
.headerContent{
width: 100%;
box-sizing: border-box;
padding: 0 32rpx;
position: absolute;
bottom: 5px;
display: flex;
align-items: center;
.leftIcon{
width: 24px;
height: 24px;
}
.headerTimeBox{
margin-left: 24rpx;
.time{
display: flex;
align-items: center;
.timeIcon{
width: 40rpx;
height: 40rpx;
margin-right: 8rpx;
}
.text{
font-size: 32rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 600;
color: #FFFFFF;
line-height: 44rpx;
}
.icon{
width: 24rpx;
height: 24rpx;
margin-left: 16rpx;
}
}
}
}
}
.pageTitle{
font-size: 56rpx;
font-family: Alimama ShuHeiTi;
font-weight: bold;
color: #FFFFFF;
line-height: 68rpx;
position: absolute;
left: 32rpx;
}
}
.content{
width: 100%;
box-sizing: border-box;
padding: 0 32rpx 48rpx;
transform: translateY(-260rpx);
.revenueBox{
width: 100%;
background:#fff;
border-radius: 24rpx;
box-sizing: border-box;
padding: 4rpx;
.revenueBoxHeader{
width: 100%;
height: 500px;
border-radius: 12rpx 12rpx 0 0;
box-sizing: border-box;
padding: 22rpx 24rpx;
position: relative;
overflow: hidden;
.headerTitle{
font-size: 36rpx;
font-family: Alimama ShuHeiTi;
font-weight: bold;
line-height: 44rpx;
}
.revenueImg{
position: absolute;
right: 0;top: 0;
width: 266rpx;
height: 208rpx;
}
.revenueContent{
position: absolute;
z-index: 2;
width: calc(100% - 48rpx);
.sumBox{
width: 100%;
box-sizing: border-box;
padding: 32rpx 24rpx;
background: #fff;
border-radius: 12rpx;
margin-top: 22rpx;
display: flex;
justify-content: space-between;
.sumLogo{
width: 96rpx;
height: 96rpx;
}
.sumText{
display: flex;
flex-direction: column;
align-items: flex-end;
.sumMoney{
font-size: 40rpx;
font-family: DINAlternate, DINAlternate;
font-weight: bold;
color: #160002;
line-height: 48rpx;
}
.sumUnit{
margin-top: 8rpx;
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 40rpx;
.unit{
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #A69E9F;
line-height: 40rpx;
margin-left: 4rpx;
}
}
}
}
.revenueAmount{
width: 100%;
margin-top: 62rpx;
.amountItem{
.itemTop{
display: flex;
align-items: center;
justify-content: space-between;
.itemTopLeft{
display: flex;
align-items: center;
.leftIcon{
width: 72rpx;
height: 72rpx;
margin-right: 16rpx;
}
.itemTitle{
font-size: 32rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 44rpx;
}
.itemUnit{
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #A69E9F;
margin-left: 4rpx;
line-height: 40rpx;
}
}
.itemTopRight{
font-size: 40rpx;
font-family: DINAlternate, DINAlternate;
font-weight: bold;
color: #160002;
line-height: 40rpx;
}
}
.itemBottom{
margin-top: 24rpx;
.itemBottomItem{
width: 25%;
display: inline-block;
.bottomItemTitle{
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #A69E9F;
line-height: 40rpx;
margin-bottom: 4rpx;
}
.bottomItemValue{
font-size: 32rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 40rpx;
}
}
}
}
}
}
}
}
.ydRevenue{
.revenueBoxHeader{
background: linear-gradient(#FCF3E5 0%, #FDF6EC 22%,#FFFFFF 30%, #FFFFFF 100%);
.headerTitle{
color: #EC6C00;
}
}
}
.merchantRevenue{
.revenueBoxHeader{
background: linear-gradient(#E9F5F9 0%, #E9F5F9 22%,#FFFFFF 30%, #FFFFFF 100%);
.headerTitle{
color: #018ABD;
}
}
}
.otherData{
.revenueBoxHeader{
height: 530px;
background: linear-gradient(#F1F7FF 0%, #FFFFFF 20% , #FFFFFF 100%);
}
}
}
}
</style>

2
static/public/font2/stylesheet.css
View File

@ -1,6 +1,6 @@
@font-face {
font-family: 'Alimama ShuHeiTi';
src:url("/static/public/font2/uj4HAtspu5eH.woff");
src:url("/static/public/font2/tzfy1e4Fbqbs.woff");
font-weight: bold;
font-style: normal;
font-display: swap;

2
static/public/revenueStatistics/stylesheet.css
View File

@ -1,6 +1,6 @@
@font-face {
font-family: 'Alimama ShuHeiTi';
src:url("/static/public/font2/tzfy1e4Fbqbs.woff");
src:url("/static/public/revenueStatistics/uKTjcNOXuZpJ.woff");
font-weight: bold;
font-style: normal;
font-display: swap;