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

先传一版

Browse Source
This commit is contained in:
cclu 2023-11-22 19:45:58 +08:00
parent 4383a48d0b
commit d7525d0584
13 changed files with 22630 additions and 724 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pages/operatingStatements/detail.vue
View File

@ -127,7 +127,9 @@ import request from '@/util/index.js'
serverpartId: obj.id,
provinceCode: obj.pcode,
SearchKeyName:_this.pageOption.searchKey,
SearchKeyValue:_this.pageOption.searchValue
SearchKeyValue:_this.pageOption.searchValue,
BusinessType:_this.pageOption.BusinessTypeValue?_this.pageOption.BusinessTypeValue:'',
SettlementMode:_this.pageOption.SettlementModeValue?_this.pageOption.SettlementModeValue:'',
}).then(res=>{
console.log('res',res)
if(res.Result_Code==100) {

306
pages/operatingStatements/index.vue
View File

@ -2,6 +2,7 @@
<view class="page-body">
<!-- 日期筛选 -->
<div class="ai-center screen-box" style="padding-bottom: 8rpx">
<!-- <view class="searchBtn" @click="handleSelect">查询筛选</view>-->
<!-- 搜索框内容 -->
<div style="display: flex;align-items: center;justify-content: space-between;padding: 10rpx 0">
<div class="search_box">
@ -9,7 +10,7 @@
<input v-model="searchText" confirm-type="search" @confirm="getList" placeholder="请输入关键字" class="select_input" clear/>
<img src="/static/images/recons/delete.svg" alt="" class="delete" @click="handleDelete">
</div>
<div class="select_btn" @click="handleSelect" v-if="false">
<div class="select_btn" @click="handleSelect" >
<img src="/static/images/recons/select_icon.svg" alt="" class="select_icon">
筛选
</div>
@ -26,7 +27,21 @@
<text class="uni-icon uni-icon-arrowdown"></text>
</picker>
</div>
<!-- BusinessType【经营模式】 SettlementMode【结算模式】 -->
<!-- <view class="searchBox">-->
<!-- <view class="searchItem">-->
<!-- <span class="searchLabel">经营模式</span>-->
<!-- <picker mode="selector" :range="BusinessTypeList" :value="BusinessTypeIndex" range-key="label">-->
<!-- {{BusinessTypeList[BusinessTypeIndex].label}}-->
<!-- </picker>-->
<!-- </view>-->
<!-- <view class="searchItem">-->
<!-- <span class="searchLabel">结算模式</span>-->
<!-- <picker mode="selector" :range="SettlementModeList" :value="SettlementModeIndex" range-key="label">-->
<!-- {{SettlementModeList[SettlementModeIndex].label}}-->
<!-- </picker>-->
<!-- </view>-->
<!-- </view>-->
</div>
<template v-if="!pageData.isLoading && pageData.msg && pageData.msg.Total_Revenue">
<view class="uni-flex ai-center head-card" >
@ -68,12 +83,22 @@
<text>经营报表</text>
</view>
<view class="modleText" v-if="pageData.msg.SearchResult">
<div v-if="BusinessTypeValue!==0 || SettlementModeValue!==0">
<span class="text">{{pageData.msg.SearchResult[0]}}</span>
<view class="text" v-if="BusinessTypeValue!==0">{{`经营模式: ${BusinessTypeList.filter(item=> item.value===BusinessTypeValue)[0].label}`}}</view>
<view class="text" v-if="SettlementModeValue!==0">{{`结算模式: ${SettlementModeList.filter(item=> item.value===SettlementModeValue)[0].label}`}}</view>
</div>
<div v-else>
<div v-for="(item,index) in pageData.msg.SearchResult" :key="index">
<span class="text" v-for="(subItem,subIndex) in item" :key="subIndex">
<span class="text" style="color:red" v-if="item.length>1 && subItem.indexOf('：')===-1">{{searchText}}</span>
{{subItem}}
</span>
</div>
</div>
</view>
<view class="bg-white" v-if="ServerpartList.length>0">
<view class="region-area-title uni-flex ai-center jc-between" v-show="pageData.msg.Province_ExternalAmount" :class="{'active':pageData.insideShow}" @tap="pageData.insideShow=!pageData.insideShow">
@ -155,28 +180,65 @@
<uni-popup ref="popup" type="bottom" style="background: #fff" :maskClick="false">
<div class="popupBox" style="box-sizing:border-box;height: 170px">
<div class="popupBox" style="box-sizing:border-box;height: 430px">
<div style="display: flex;align-items: center;justify-content: space-between">
<text class="title">请选择查询项</text>
<text class="title">查询配置</text>
<img src="/static/images/recons/delete.svg" alt="" class="delete" @click="handleClosePopup">
</div>
<div class="checkBox" v-if="isScreen">
<checkbox-group @change="handleChangeCheckBox">
<label>
<checkbox value="MerchantName" :checked="checkBoxValue.filter(item=>item==='MerchantName').length>0"/>商户
</label>
<label>
<checkbox value="Brand" :checked="checkBoxValue.filter(item=>item==='Brand').length>0"/>品牌
</label>
<label>
<checkbox value="Shop" :checked="checkBoxValue.filter(item=>item==='Shop').length>0"/>门店
</label>
</checkbox-group>
<div class="popupContent">
<div class="search_box">
<img src="/static/images/recons/search_icon.svg" alt="" class="search_icon">
<input v-model="searchText" confirm-type="search" @confirm="getList" placeholder="可以查询门店/服务区/品牌/商家等信息" class="select_input" clear/>
<img src="/static/images/recons/delete.svg" alt="" class="delete" @click="handleDelete">
</div>
<view class="popupTitle">日期选择</view>
<view class="timeList">
<view :class="selectTime===item.value?'timeItem timeSelectItem':'timeItem'" v-for="(item,index) in timeTypeList" :key="index" @click="handleChangeTime(item.value)">{{item.label}}</view>
</view>
<view class="timeList">
<view :class="selectTimeOther?'timeItem timeSelectItem':'timeItem'" @click="handleTimeOther">自定义</view>
</view>
<view class="popupTitle">经营模式</view>
<view class="timeList">
<view :class="BusinessTypeValue===item.value?'timeItem timeSelectItem':'timeItem'" v-for="(item,index) in BusinessTypeList" :key="index" @click="handleChangeBusiness(item.value)">{{item.label}}</view>
</view>
<view class="popupTitle">结算模式</view>
<view class="timeList">
<view :class="SettlementModeValue===item.value?'timeItem timeSelectItem':'timeItem'" v-for="(item,index) in SettlementModeList" :key="index" @click="handleChangeSettlement(item.value)">{{item.label}}</view>
</view>
</div>
<!-- <div class="checkBox" v-if="isScreen">-->
<!-- <checkbox-group @change="handleChangeCheckBox">-->
<!-- <label>-->
<!-- <checkbox value="MerchantName" :checked="checkBoxValue.filter(item=>item==='MerchantName').length>0"/>商户-->
<!-- </label>-->
<!-- <label>-->
<!-- <checkbox value="Brand" :checked="checkBoxValue.filter(item=>item==='Brand').length>0"/>品牌-->
<!-- </label>-->
<!-- <label>-->
<!-- <checkbox value="Shop" :checked="checkBoxValue.filter(item=>item==='Shop').length>0"/>门店-->
<!-- </label>-->
<!-- </checkbox-group>-->
<!-- </div>-->
<div class="btn" @click="handleConfirmCheckChange">确认</div>
</div>
</uni-popup>
<uni-popup ref="timePopup" type="center" style="background: #fff">
<div class="timePopup">
<div style="display: flex;margin-left: 10%">
<picker mode="date" @change="handleChangeTimePopup($event,0)" :value="searchTimePopup[0]" :end="pageData.endDate" start="2018-12-01" class="screen-unit">
<text style="font-size: 32rpx">{{searchTimePopup[0]}}</text>
<text class="uni-icon uni-icon-arrowdown"></text>
</picker>
<text class="mr20">至</text>
<picker mode="date" @change="handleChangeTimePopup($event,0)" :value="searchTimePopup[1]" :end="pageData.endDate" start="2018-12-01" class="screen-unit">
<text style="font-size: 32rpx">{{searchTimePopup[1]}}</text>
<text class="uni-icon uni-icon-arrowdown"></text>
</picker>
</div>
<div class="btn" @click="handleTimePopup">确认</div>
</div>
</uni-popup>
</view>
</template>
@ -184,6 +246,7 @@
<script>
import {mapState} from 'vuex'
import request from '@/util/index.js'
import {wrapTreeNode} from "../../util/dateTime";
export default {
data() {
@ -209,20 +272,72 @@
searchText:'',// 搜索框内容
requestText:'',// 已经请求过接口的查询框内容
isScreen:false,// 显示popup里面的内容
checkBoxValue:['MerchantName','Brand','Shop'],// 查询的字段放接口里的
checkChange:['MerchantName','Brand','Shop'],// checkBox里面选择了 但是没点确定的
checkBoxValue:['MerchantName','Brand','Shop','Serverpart'],// 查询的字段放接口里的
checkChange:['MerchantName','Brand','Shop','Serverpart'],// checkBox里面选择了 但是没点确定的
BusinessTypeList:[],// 经营模式列表
BusinessTypeValue:0,// 经营模式的选择项
SettlementModeList:[],// 结算模式列表
SettlementModeValue:0,// 结算模式的选择项
timeTypeList:[{label:'近1周',value:1},{label:'近1月',value:2},{label:'近3月',value:3},{label:'近半年',value:4}],
selectTime:0,
selectTimeOther:false,
timePopup:false,
searchTimePopup: [null,null],
}
},
computed:{
...mapState({'ProvinceCode':(state)=>{return state.userData.ProvinceCode}}),
},
methods: {
// 自定义时间选框里面的选择
handleChangeTimePopup(e,index){
console.log('e',e)
console.log('index',index)
this.searchTimePopup[index] = e.detail.value
this.$forceUpdate()
},
// 自定义时间选框的确定
handleTimePopup(){
console.log('this.searchTimePopup',this.searchTimePopup)
this.pageData.searchTime = this.searchTimePopup
this.$refs.timePopup.close()
},
// 选择了经营模式
handleChangeSettlement(value){
this.SettlementModeValue = value
},
// 选择了经营模式
handleChangeBusiness(value){
this.BusinessTypeValue = value
},
// 选择了自定义时间
handleTimeOther(){
this.searchTimePopup = JSON.parse(JSON.stringify(this.pageData.searchTime))
this.$refs.timePopup.open()
this.selectTimeOther = true
this.selectTime = 0
},
// 改变选择的时间
handleChangeTime(value){
this.selectTimeOther = false
this.selectTime = value
},
async handleEnumeration(text){
const req ={
FieldExplainField: text,
sessionName: text,
FieldEnumStatus:true
}
const data = await request.$webGet('EShangApiMain/FrameWork/GetFieldEnumTree',req)
let list = wrapTreeNode(data.Result_Data.List)
console.log('list',list)
return list
},
handleChangeCheckBox(e){
this.checkChange = e.detail.value
},
handleConfirmCheckChange(){
this.checkBoxValue = this.checkChange
console.log('checkBoxValue',this.checkBoxValue)
this.$refs.popup.close()
this.isScreen= false
this.getList()
@ -231,6 +346,10 @@
this.checkChange = this.checkBoxValue
this.$refs.popup.close()
this.isScreen= false
this.BusinessTypeValue = 0
this.SettlementModeValue = 0
this.selectTime = 0
this.getList()
},
handleDelete(){
this.searchText = ''
@ -238,7 +357,6 @@
handleSelect(){
this.$refs.popup.open()
this.isScreen= true
console.log('111')
},
toTrend(){
this.$util.toNextRoute('navigateTo','/pages/operatingStatements/operatingTrend?time='+this.pageData.searchTime[1])
@ -265,7 +383,10 @@
},
toDetail(item){
console.log('item',item)
this.$util.toNextRoute('navigateTo', '/pages/operatingStatements/detail?pcode='+item.Province_Code+'&id=' + item.Serverpart_Id + '&st=' + this.pageData.searchTime[0]+ '&et=' + this.pageData.searchTime[1]+'&searchKey='+JSON.parse(JSON.stringify(this.checkBoxValue)) + '&searchValue='+this.requestText)
this.$util.toNextRoute('navigateTo', '/pages/operatingStatements/detail?pcode='+item.Province_Code+'&id=' +
item.Serverpart_Id + '&st=' + this.pageData.searchTime[0]+ '&et=' + this.pageData.searchTime[1]+
'&searchKey='+JSON.parse(JSON.stringify(this.checkBoxValue)) + '&searchValue='+this.requestText+
'&BusinessTypeValue='+this.BusinessTypeValue+'&SettlementModeValue='+this.SettlementModeValue)
item.visited = true
this.$forceUpdate()
},
@ -284,14 +405,19 @@
searchName = item
}
})
// _this.$request.$webGet('WeChat/GetRevenueReport',{
request.$webGet('CommercialApi/Revenue/GetRevenueReport',{
let req;
req = {
startTime: searchTime[0],
endTime: searchTime[1],
SearchKeyName:searchName,
SearchKeyValue:this.searchText
SearchKeyValue:this.searchText,
BusinessType:this.BusinessTypeValue?this.BusinessTypeValue:'',
SettlementMode:this.SettlementModeValue?this.SettlementModeValue:'',
// additionalCode: this.ProvinceCode=='330000' ? '451200,630000' :''
}).then(res=>{
}
console.log('req',req)
// _this.$request.$webGet('WeChat/GetRevenueReport',{
request.$webGet('CommercialApi/Revenue/GetRevenueReport',req).then(res=>{
console.log('res',res)
if(res.Result_Code==100) {
_this.pageData.msg = res.Result_Data
@ -307,15 +433,15 @@
}
// _this.pageData.msg.SearchResult
if (this.BusinessTypeValue === 0 && this.SettlementModeValue === 0){
if (res.Result_Data.SearchResult){
let newList = []
res.Result_Data.SearchResult.forEach(item=>{
console.log('item.split(this.searchText)',item.split(this.searchText))
newList.push(item.split(this.searchText))
_this.pageData.msg.SearchResult = newList
})
}
}
_this.ServerpartList = res.Result_Data.revenueRegionModels
}else if(res.Result_Code==200 || res.Result_Code==999){
_this.noDataText = '暂无数据'
@ -331,10 +457,12 @@
uni.hideLoading()
_this.pageData.isLoading =false
_this.$forceUpdate()
console.log('this.BusinessTypeValue',this.BusinessTypeValue)
console.log('this.SettlementModeValue',this.SettlementModeValue)
})
}
},
onLoad(query) {
async onLoad(query) {
// uni.showLoading({
// title:'正在加载...',
// mask:true
@ -366,6 +494,9 @@
this.pageData.searchTime = time
}
}
this.BusinessTypeList = await this.handleEnumeration('BUSINESS_TYPE')
this.SettlementModeList = await this.handleEnumeration('SETTLEMENT_MODES')
console.log('BusinessTypeList',this.BusinessTypeList)
this.getList()
}
}
@ -423,10 +554,71 @@
background: #fff;
box-sizing: border-box;
padding: 24rpx;
.popupContent{
margin-top: 24rpx;
.search_box {
position: relative;
width: 100%;
height: 72rpx;
background: #F2F4F5;
display: flex;
flex-direction: row;
align-items: center;
border-radius: 36rpx;
img {
width: 35rpx;
height: 35rpx;
margin: auto 16rpx auto 24rpx;
}
.select_input {
width: 80%;
border: none;
height: 40rpx;
font-size: 28rpx;
}
.delete{
width: 20px;
height: 20px;
position: absolute;
right: 0%;
z-index: 99;
}
}
.popupTitle{
font-size: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: bold;
line-height: 40rpx;
margin-top: 24rpx;
}
.timeList{
width: 100%;
display: flex;
align-items: center;
flex-flow: wrap;
justify-content: space-between;
padding: 12rpx 0;
.timeItem{
width: 22%;
box-sizing: border-box;
text-align: center;
background: #ffffff;
border: 1rpx solid #efefef;
margin-bottom: 8rpx;
}
.timeSelectItem{
background: #e8f3fd;
border: 1rpx solid #e8f3fd;
color: #4D95F0;
}
}
}
.title{
font-size: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
font-weight: bold;
line-height: 40rpx;
}
.delete{
@ -450,6 +642,28 @@
padding-bottom: 0px!important;
}
.timePopup{
width: 80vw;
height: 130px;
background: #fff;
box-sizing: border-box;
border-radius: 16rpx;
padding: 24rpx;
display: flex;
flex-direction: column;
justify-content: center;
.btn{
width: calc(100% - 48px);
margin-left: 24px;
padding: 15rpx 0;
text-align: center;
border-radius: 16rpx;
color:#fff;
background: #0A98D5;
margin-top: 30rpx;
}
}
.screen-box {
background-color: #fff;
padding: 0 20rpx;
@ -458,6 +672,36 @@
left: 0;
z-index: 9;
}
.screen-box .searchBtn{
margin-top: 12rpx;
box-sizing: border-box;
padding: 2rpx 10rpx;
border-radius: 6rpx;
background: rgba(22, 155, 213, 1);
color: #fff;
display: inline-block;
}
.screen-box .searchBox{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.screen-box .searchBox .searchItem{
display: flex;
width: 50%;
align-items: center;
}
.searchBox .searchItem .searchLabel{
margin-right: 16rpx;
font-size: 16px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
line-height: 40rpx;
}
.screen-box .screen-unit {
display: flex;
align-items: center;
@ -484,7 +728,7 @@
vertical-align: middle;
}
.head-card {
padding: 40rpx 26rpx;
padding: 12rpx 26rpx 40rpx;
background-color: #fff;
}
.head-card>view {

646
pages/revenue/data.js
View File

File diff suppressed because it is too large Load Diff

21284
pages/revenue/expenditureData.js Normal file
View File

File diff suppressed because it is too large Load Diff

757
pages/revenue/expenditureDetail.vue
View File

@ -1,138 +1,187 @@
<template>
<view class="main">
<view class="meng" v-if="showMeng" @click="handleAllNotice"></view>
<view class="header">
<view class="headerTop" :style="{top: menu.top + 'px',height:menu.height + 'px'}">
<view class="headerTop" :style="{height:(menu.top+menu.height) + 'px'}">
<image @click="handleBack" class="backIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"></image>
<text class="pageTitle">支出详情</text>
</view>
<view class="incomeTab" :style="{top:(menu.bottom + 18) + 'px'}">
<view class="detailType" :style="{top:(menu.bottom + 18) + 'px'}">
<picker :range="typeList" :value="typeValue" range-key="label" @change="handleChangeType">
<span class="typeText">{{ typeList[typeValue].label }}</span>
<image class="downIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/3stDownArrow.svg"/>
</picker>
<view class="timeBox" >
<picker mode="date" fields="month" :value="single" :start="startDate" :end="endData" @change="bindDateChange" >
<text class="timeText">{{single}}</text>
<image class="timeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/3stDownArrow.svg"/>
</picker>
</view>
</view>
<view class="incomeTab" :style="{top:(menu.bottom + 60) + 'px'}">
<view :class="selectTab===item.value?'selectItem incomeItem':'incomeItem'" v-for="(item,index) in pageTab" :key="index"
@click="handleChangePageTab(item.value)">{{item.label}}</view>
</view>
</view>
<view class="contentDetail">
<view class="detailItem">
<view class="detailItem" v-for="(item,index) in pageList" :key="index">
<view class="itemTop">
<view class="itemTitle">服务区自营小计</view>
<view class="itemTitle">{{item.itemTitle}}</view>
<image class="monthSumBg" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/expenditure.png"/>
<view class="itemBox">
<view class="leftChar">
<OtherCharts :success="number" :colorList="['#1679FF', '#E7F1FF']"/>
<text class="rateText">39.67%</text>
<view class="progressBox">
<view class="progressTop">
<span class="progressLabel">本月占比:</span>
<span class="progressValue">{{`${item.monthRate||'-'}%`}}</span>
</view>
<view class="rightDetail">
<view class="messageBox">
<view class="success">
<text class="revenueValue">119.01</text>
<text class="revenueLabel">2022年完成<text class="revenueUnit">/万元</text></text>
</view>
<view class="rateBox">
<text class="rateValue">32.54%</text>
<text class="rateLabel">成本比</text>
<view class="progress">
<view class="have" :style="{width:item.monthRate>100?'100%':`${item.monthRate}%`}"></view>
</view>
</view>
<view class="messageBox" style="margin-top: 32rpx">
<view class="success">
<text class="revenueValue">119.01</text>
<text class="revenueLabel">2022年完成<text class="revenueUnit">/万元</text></text>
</view>
<view class="rateBox">
<text class="rateValue">32.54%</text>
<text class="rateLabel">成本比</text>
</view>
<view class="progressBox" style="margin-top: 12px">
<view class="progressTop">
<span class="progressLabel">累计完成进度占比:</span>
<span class="progressValue">{{`${item.accumulateRate||'-'}%`}}</span>
</view>
<view class="progress">
<view class="have" :style="{width:item.accumulateRate>100?'100%':`${item.accumulateRate}%`}"></view>
</view>
</view>
</view>
<view class="contentBox">
<view class="contentItem" v-for="(item,index) in 3" :key="index">
<view class="topItem">
<view class="index" :style="{background:`url(${index===0?'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/secondBg.svg':index===1?'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/thirdBg.svg':'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/otherBg.svg'})`}">{{index + 1}}</view>
<view class="smallItemName">餐饮小吃</view>
<view class="listBox" v-if="item.list && item.list.length>0">
<view class="listBoxItem" v-for="(subItem,subIndex) in item.list[typeValue]" :key="subIndex">
<view class="subItemTop">
<view class="index" :style="{background:`url(${subIndex===0?'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/secondBg.svg':subIndex===1?'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/thirdBg.svg':'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/otherBg.svg'})`}">{{subIndex + 1}}</view>
<span class="subItemName">{{subItem.name}}</span>
<view class="notice" @click="handleShowNotice(index,subIndex,-1,-1)">?</view>
<view class="noticeBox" v-if="firstIndex===index && secondIndex===subIndex && !(thirdIndexs>=0) && !(fourthIndexs>=0)" @click="handleCancelNotice">
<view>
<view class="noticeItem">
<span class="noticeLabel">本月预算:</span>
<span class="noticeValue">{{subItem.budgetMonth||'-'}}万元</span>
</view>
<view class="noticeItem">
<span class="noticeLabel">年度预算:</span>
<span class="noticeValue">{{subItem.budgetYear||'-'}}万元</span>
</view>
<view class="noticeItem">
<span class="noticeLabel">本月执行:</span>
<span class="noticeValue">{{subItem.monthExecute||'-'}}万元</span>
</view>
<view class="noticeItem">
<span class="noticeLabel">累计执行:</span>
<span class="noticeValue">{{subItem.accumulateExecute||'-'}}万元</span>
</view>
</view>
</view>
</view>
<view class="subItemBottom" v-if="subItem.monthRate || subItem.accumulateRate">
<view class="bottomItem">
<view class="smallItem">
<text class="smallItemValue">46.47</text>
<text class="smallItemLabel">2022年完成<text class="unit">/万元</text></text>
</view>
<view class="smallItem">
<text class="smallItemValue">100.00</text>
<text class="smallItemLabel">2023年预计<text class="unit">/万元</text></text>
</view>
<view class="otherItem">
<text class="otherValue">46.47%</text>
<text class="otherLabel">完成率</text>
</view>
</view>
<span v-if="subItem.monthRate" class="bottomLabel">本月占比:</span>
<span v-if="subItem.monthRate" class="bottomValue">{{`${subItem.monthRate||'-'}%`}}</span>
</view>
<view class="bottomItem" style="text-align: right">
<span v-if="subItem.accumulateRate" class="bottomLabel">累计占比:</span>
<span v-if="subItem.accumulateRate" class="bottomValue">{{`${subItem.accumulateRate||'-'}%`}}</span>
</view>
</view>
<view class="detailItem">
<view class="itemTop">
<view class="itemTitle">分公司收入小计</view>
<image class="monthSumBg" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/expenditure.png"/>
<view class="itemBox">
<view class="leftChar">
<OtherCharts :success="number" :colorList="['#1679FF', '#E7F1FF']"/>
<text class="rateText">39.67%</text>
<view class="thirdItemBox" v-if="subItem.list && subItem.list.length>0">
<view class="thirdItem" v-for="(thirdItem,thirdIndex) in subItem.list[typeValue]" :key="thirdIndex">
<view class="thirdItemTop">
<view class="index" :style="{backgroundImage:`url(${thirdIndex===0?'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/thirdFirst.svg':thirdIndex===1?'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/thirdSecond.svg':'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/thirdOther.svg'})`}">{{thirdIndex + 1}}</view>
<span class="subItemName">{{thirdItem.name}}</span>
<view class="notice" @click="handleShowNotice(index,subIndex,thirdIndex,-1)">?</view>
<view class="noticeBox" v-if="firstIndex===index && secondIndex===subIndex && thirdIndexs===thirdIndex&& thirdIndexs===thirdIndex && !(fourthIndexs>=0)" @click="handleCancelNotice">
<view>
<view class="noticeItem">
<span class="noticeLabel">本月预算:</span>
<span class="noticeValue">{{thirdItem.budgetMonth||'-'}}万元</span>
</view>
<view class="rightDetail">
<view class="messageBox">
<view class="success">
<text class="revenueValue">119.01</text>
<text class="revenueLabel">2022年完成<text class="revenueUnit">/万元</text></text>
<view class="noticeItem">
<span class="noticeLabel">年度预算:</span>
<span class="noticeValue">{{thirdItem.budgetYear||'-'}}万元</span>
</view>
<view class="rateBox">
<text class="rateValue">32.54%</text>
<text class="rateLabel">成本比</text>
<view class="noticeItem">
<span class="noticeLabel">本月执行:</span>
<span class="noticeValue">{{thirdItem.monthExecute||'-'}}万元</span>
</view>
</view>
<view class="messageBox" style="margin-top: 32rpx">
<view class="success">
<text class="revenueValue">119.01</text>
<text class="revenueLabel">2022年完成<text class="revenueUnit">/万元</text></text>
</view>
<view class="rateBox">
<text class="rateValue">32.54%</text>
<text class="rateLabel">成本比</text>
<view class="noticeItem">
<span class="noticeLabel">累计执行:</span>
<span class="noticeValue">{{thirdItem.accumulateExecute||'-'}}万元</span>
</view>
</view>
</view>
</view>
</view>
<view class="contentBox">
<view class="contentItem" v-for="(item,index) in 3" :key="index">
<view class="topItem">
<view class="index" :style="{background:`url(${index===0?'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/secondBg.svg':index===1?'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/thirdBg.svg':'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/otherBg.svg'})`}">{{index + 1}}</view>
<view class="smallItemName">餐饮小吃</view>
</view>
<view class="thirdItemBottom" v-if="thirdItem.monthRate || thirdItem.accumulateRate">
<view class="bottomItem">
<view class="smallItem">
<text class="smallItemValue">46.47</text>
<text class="smallItemLabel">2022年完成<text class="unit">/万元</text></text>
<span v-if="thirdItem.monthRate" class="bottomLabel">本月占比:</span>
<span v-if="thirdItem.monthRate" class="bottomValue">{{`${thirdItem.monthRate||'-'}%`}}</span>
</view>
<view class="smallItem">
<text class="smallItemValue">100.00</text>
<text class="smallItemLabel">2023年预计<text class="unit">/万元</text></text>
<view class="bottomItem" style="text-align: right">
<span v-if="thirdItem.accumulateRate" class="bottomLabel">累计占比:</span>
<span v-if="thirdItem.accumulateRate" class="bottomValue">{{`${thirdItem.accumulateRate||'-'}%`}}</span>
</view>
<view class="otherItem">
<text class="otherValue">46.47%</text>
<text class="otherLabel">完成率</text>
</view>
<view class="fourthItemBox" v-if="thirdItem.list && thirdItem.list.length>0">
<view class="fourthItem" v-for="(fourthItem,fourthIndex) in thirdItem.list[typeValue]" :key="fourthIndex">
<view class="fourthItemTop">
<view class="index" :style="{backgroundImage:`url(${fourthIndex===0?'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/fourthFirst.svg':fourthIndex===1?'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/fourthSecond.svg':'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/fourthther.svg'})`}">{{fourthIndex + 1}}</view>
<span class="subItemName">{{fourthItem.name}}</span>
<view class="notice" @click="handleShowNotice(index,subIndex,thirdIndex,fourthIndex)">?</view>
<view class="noticeBox" v-if="firstIndex===index && secondIndex===subIndex && thirdIndexs===thirdIndex && fourthIndexs===fourthIndex" @click="handleCancelNotice">
<view>
<view class="noticeItem">
<span class="noticeLabel">本月预算:</span>
<span class="noticeValue">{{fourthItem.budgetMonth||'-'}}万元</span>
</view>
<view class="noticeItem">
<span class="noticeLabel">年度预算:</span>
<span class="noticeValue">{{fourthItem.budgetYear||'-'}}万元</span>
</view>
<view class="noticeItem">
<span class="noticeLabel">本月执行:</span>
<span class="noticeValue">{{fourthItem.monthExecute||'-'}}万元</span>
</view>
<view class="noticeItem">
<span class="noticeLabel">累计执行:</span>
<span class="noticeValue">{{fourthItem.accumulateExecute||'-'}}万元</span>
</view>
</view>
</view>
</view>
<view class="fourthItemBottom" v-if="fourthItem.monthRate || fourthItem.accumulateRate">
<view class="bottomItem">
<span v-if="fourthItem.monthRate" class="bottomLabel">本月占比:</span>
<span v-if="fourthItem.monthRate" class="bottomValue">{{`${fourthItem.monthRate||'-'}%`}}</span>
</view>
<view class="bottomItem" style="text-align: right">
<span v-if="fourthItem.accumulateRate" class="bottomLabel">累计占比:</span>
<span v-if="fourthItem.accumulateRate" class="bottomValue">{{`${fourthItem.accumulateRate||'-'}%`}}</span>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import OtherCharts from "./component/otherCharts.vue";
import outData from './expenditureData'
export default {
components:{OtherCharts},
@ -142,11 +191,45 @@ export default {
statusBarHeight: null,
menu:{},
number:0,
pageTab:[{label:'管理费用',value:1},{label:'销售费用',value:2},{label:'运营成本',value:3},{label:'其他费用',value:4}],
selectTab:1
pageTab:[{label:'运营成本',value:1},{label:'管理费用',value:2},{label:'销售费用',value:3},{label:'财务费用',value:4}],
selectTab:1,
typeList:[{label:'按告警情况排序',value:0},{label:'按累计完成进度占比数排序',value:1},{label:'按本月完成进度占比数排序',value:2}],
typeValue: 2,
pageData: {},// 页面数据
pageList: [],// 页面遍历的数据
single:'', // 时间选择器选择的时间
month:'',// 当前月份
startDate:'',// 开始时间
endData:'', // 结束时间
firstIndex:null,
secondIndex:null,
thirdIndexs:null,
fourthIndexs:null,
showMeng:false
}
},
onLoad(){
onLoad(query){
this.selectTab = Number(query.type)
if (query.month){
this.month = Number(query.month)
outData.forEach(item=>{
if (item.month === Number(query.month)){
this.pageData = item
this.pageList = this.selectTab===1?item.costList:this.selectTab===2?item.managerList:this.selectTab===3?item.sellingList:this.selectTab===4?item.financialList:''
console.log('pageData',this.pageData)
console.log('pageList',this.pageList)
}
})
}
const date = new Date()
let y = date.getFullYear()
let m = date.getMonth()+1
this.thisYear = y
this.startDate = `${y}-07`
this.endData = `${y}-10`
this.single = `${y}-${this.month}`
// 获取手机参数对页面进行适配
let systemInfo = uni.getSystemInfoSync()
this.windowHeight = systemInfo.windowHeight
@ -166,7 +249,49 @@ export default {
});
},
handleChangePageTab(value){
console.log('value',value)
this.selectTab = value
this.pageList = this.selectTab===1?this.pageData.costList:this.selectTab===2?this.pageData.managerList:this.selectTab===3?this.pageData.sellingList:this.selectTab===4?this.pageData.financialList:''
},
// 改变类型的方法
handleChangeType(e){
console.log('e',e)
this.typeValue = Number(e.detail.value)
},
// 修改时间的事件
bindDateChange(e){
console.log('e',e)
this.single = e.detail.value
const date = new Date(this.single)
const y = date.getMonth() + 1
this.month = y
outData.forEach(item=>{
if (item.month === y){
this.pageData = item
this.pageList = this.selectTab===1?item.costList:this.selectTab===2?item.managerList:this.selectTab===3?item.sellingList:this.selectTab===4?item.financialList:''
}
})
},
handleShowNotice(index,subIndex,thirdIndex,fourthIndex){
this.firstIndex = index
this.secondIndex = subIndex
this.thirdIndexs = thirdIndex
this.fourthIndexs = fourthIndex
this.showMeng = true
},
handleCancelNotice(){
this.showMeng = false
this.firstIndex = '-'
this.secondIndex = '-'
this.thirdIndexs = '-'
this.fourthIndexs = '-'
},
handleAllNotice(){
this.showMeng = false
this.firstIndex = null
this.secondIndex = null
this.thirdIndexs = null
this.fourthIndexs = null
}
}
}
@ -177,15 +302,24 @@ export default {
.main{
width: 100%;
min-height: 100vh;
.meng{
width: 100vw;
height: 100vh;
position: fixed;
top: 0;left: 0;
z-index: 20;
}
.header{
width: 100%;
height: 328rpx;
height: 395rpx;
background: linear-gradient(180deg, #D4E5FD 0%, #F5F5F5 100%);
.headerTop{
width: 100%;
position: absolute;
position: fixed;
display: flex;
align-items: center;
align-items: flex-end;
z-index: 99;
background: linear-gradient(180deg, #D4E5FD 0%, #DEE9F9 100%);
.backIcon{
width: 48rpx;
height: 48rpx;
@ -202,6 +336,43 @@ export default {
transform: translateX(-50%);
}
}
.detailType{
width: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 0 32rpx;
.typeText{
font-size: 32rpx;
font-family: Alimama ShuHeiTi;
font-weight: bold;
color: #7CADF8;
line-height: 68rpx;
}
.downIcon{
width: 12px;
height: 12px;
margin-left: 8px;
}
.timeBox{
display: flex;
align-items: center;
.timeText{
font-size: 32rpx;
font-family: Alimama ShuHeiTi;
font-weight: bold;
color: #7CADF8;
line-height: 68rpx;
}
.timeIcon{
margin-left: 6px;
width: 24rpx;
height: 24rpx;
}
}
}
.incomeTab{
width: 100%;
position: absolute;
@ -258,7 +429,6 @@ export default {
margin-bottom: 24rpx;
.itemTop{
width: 100%;
height: 400rpx;
box-sizing: border-box;
padding: 22rpx 24rpx;
background: linear-gradient(180deg, #F1F7FF 0%, #FDFEFF 100%);
@ -285,92 +455,57 @@ export default {
background: #fff;
border-radius: 12rpx;
box-sizing: border-box;
padding: 32rpx;
padding: 16rpx 32rpx;
margin-top: 22rpx;
.progressBox{
width: 100%;
.progressTop{
width: 100%;
display: flex;
.leftChar{
width: 224rpx;
height: 100%;
margin-bottom: 8rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.rateText{
font-size: 40rpx;
font-family: DINAlternate-Bold, DINAlternate;
justify-content: space-between;
.progressLabel{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 40rpx;
}
.progressValue{
font-size: 36rpx;
font-family: Alimama ShuHeiTi;
font-weight: bold;
color: #1679FF;
line-height: 48rpx;
line-height: 44rpx;
}
}
.rightDetail{
flex: 1;
.messageBox{
display: flex;
justify-content: space-between;
.success{
display: flex;
flex-direction: column;
.revenueValue{
font-size: 32rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #160002;
line-height: 36rpx;
}
.revenueLabel{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 36rpx;
margin-top: 4rpx;
.revenueUnit{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #A69E9F;
line-height: 36rpx;
margin-left: 4rpx;
}
}
}
.rateBox{
display: flex;
flex-direction: column;
.rateValue{
font-size: 32rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #E83944;
line-height: 36rpx;
}
.rateLabel{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 36rpx;
margin-top: 4rpx;
}
}
}
}
}
}
.contentBox{
.progress{
margin-top: 8px;
width: 100%;
background: #fff;
box-sizing: border-box;
padding: 0 24rpx;
.contentItem{
height: 12px;
border-radius: 6px;
background: #E7F1FF;
position: relative;
overflow: hidden;
.have{
position: absolute;
top: 0;left: 0;
border-radius: 6px;
background: #1679FF;
height: 100%;
}
}
}
}
.listBox{
width: 100%;
.topItem{
margin-top: 12px;
.listBoxItem{
position: relative;
margin-bottom: 12rpx;
.subItemTop{
display: flex;
align-items: center;
margin-bottom: 24rpx;
.index{
display: inline-block;
width: 36rpx;
@ -384,65 +519,279 @@ export default {
box-sizing: border-box;
padding-right: 4rpx;
}
.smallItemName{
.subItemName{
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 40rpx;
margin-left: 4rpx;
margin-left: 8px;
}
.notice{
margin-left: 8rpx;
width: 12px;
height: 12px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #A69E9F;
border-radius: 50%;
color: #A69E9F;
font-size: 12px;
font-weight: 500;
position: relative;
z-index: 21;
}
.noticeBox{
position: absolute;
top: 10px;
z-index: 99;
background: #fff;
border-radius: 12rpx;
box-sizing: border-box;
padding: 12rpx 0;
display: block;
width: 300px;
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
.noticeTitle{
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 40rpx;
margin-left: 8px;
}
.noticeItem{
display: inline-block;
width: 140px;
color: #A69E9F;
font-size: 12px;
font-weight: 500;
box-sizing: border-box;
padding-left: 24rpx;
}
}
.bottomItem{
}
.subItemBottom{
width: 100%;
display: flex;
justify-content: space-between;
padding-bottom: 32rpx;
border-bottom: 1px solid #F7F4F4;
.smallItem{
display: flex;
flex-direction: column;
.smallItemValue{
margin-bottom: 4rpx;
font-size: 32rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #160002;
line-height: 36rpx;
}
.smallItemLabel{
font-size: 24rpx;
align-items: center;
.bottomItem{
width: 50%;
.bottomLabel{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 36rpx;
.unit{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #A69E9F;
line-height: 36rpx;
line-height: 32rpx;
}
.bottomValue{
font-size: 30rpx;
font-family: Alimama ShuHeiTi;
font-weight: bold;
color: #1679FF;
line-height: 32rpx;
margin-left: 4rpx;
}
}
}
.otherItem{
.thirdItemBox{
width: 100%;
box-sizing: border-box;
padding-left: 24rpx;
.thirdItemTop{
position: relative;
display: flex;
flex-direction: column;
.otherValue{
font-size: 32rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #E83944;
line-height: 36rpx;
margin-bottom: 4rpx;
}
.otherLabel{
align-items: center;
.index{
display: inline-block;
width: 40rpx;
height: 40rpx;
font-size: 24rpx;
line-height: 40rpx;
text-align: center;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FEFFFF;
box-sizing: border-box;
background-size: 100% 100%;
}
.subItemName{
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 40rpx;
margin-left: 8px;
}
.notice{
margin-left: 8rpx;
width: 12px;
height: 12px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #A69E9F;
border-radius: 50%;
color: #A69E9F;
font-size: 12px;
font-weight: 500;
position: relative;
z-index: 21;
}
.noticeBox{
position: absolute;
top: 10px;
z-index: 99;
background: #fff;
border-radius: 12rpx;
box-sizing: border-box;
padding: 12rpx 0;
display: block;
width: 300px;
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
.noticeTitle{
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 40rpx;
margin-left: 8px;
}
.noticeItem{
display: inline-block;
width: 140px;
color: #A69E9F;
font-size: 12px;
font-weight: 500;
box-sizing: border-box;
padding-left: 24rpx;
}
}
}
.thirdItemBottom{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.bottomItem{
width: 50%;
.bottomLabel{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 36rpx;
line-height: 32rpx;
}
.bottomValue{
font-size: 30rpx;
font-family: Alimama ShuHeiTi;
font-weight: bold;
color: #1679FF;
line-height: 32rpx;
margin-left: 4rpx;
}
}
}
.fourthItemBox{
width: 100%;
box-sizing: border-box;
padding-left: 24rpx;
.fourthItemTop{
position: relative;
display: flex;
align-items: center;
.index{
display: inline-block;
width: 40rpx;
height: 40rpx;
font-size: 24rpx;
line-height: 40rpx;
text-align: center;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FEFFFF;
box-sizing: border-box;
background-size: 100% 100%;
}
.subItemName{
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 40rpx;
margin-left: 8px;
}
.notice{
margin-left: 8rpx;
width: 12px;
height: 12px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #A69E9F;
border-radius: 50%;
color: #A69E9F;
font-size: 12px;
font-weight: 500;
position: relative;
z-index: 21;
}
.noticeBox{
position: absolute;
top: 10px;
z-index: 99;
background: #fff;
border-radius: 12rpx;
box-sizing: border-box;
padding: 12rpx 0;
display: block;
width: 300px;
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
.noticeTitle{
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 40rpx;
margin-left: 8px;
}
.noticeItem{
display: inline-block;
width: 140px;
color: #A69E9F;
font-size: 12px;
font-weight: 500;
box-sizing: border-box;
padding-left: 24rpx;
}
}
}
.fourthItemBottom{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.bottomItem{
width: 50%;
.bottomLabel{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 32rpx;
}
.bottomValue{
font-size: 30rpx;
font-family: Alimama ShuHeiTi;
font-weight: bold;
color: #1679FF;
line-height: 32rpx;
margin-left: 4rpx;
}
}
}
}
}
}

142
pages/revenue/incomeDetail.vue
View File

@ -19,6 +19,7 @@
</picker>
</view>
</view>
<view class="incomeTab" :style="{top:(menu.bottom + 60) + 'px'}">
<view :class="selectTab===item.value?'selectItem incomeItem':'incomeItem'" v-for="(item,index) in pageTab" :key="index"
@click="handleChangePageTab(item.value)">{{item.label}}</view>
@ -28,9 +29,32 @@
<view class="contentDetail">
<view class="detailItem" v-for="(item,index) in pageList" :key="index">
<view class="itemTop">
<view class="titleTop">
<view class="itemTitle">{{item.itemTitle}}</view>
<view class="notice" @click="handleShowNotice(index)">?</view>
<view class="noticeBox" v-if="firstIndex===index && item.list[typeValue].length>0" @click="handleCancelNotice">
<view v-for="(subItem,subIndex) in item.list[typeValue]" :key="subIndex">
<view class="noticeTitle">{{subItem.name}}</view>
<view class="noticeItem">
<span class="noticeLabel">本月预算:</span>
<span class="noticeValue">{{subItem.budgetMonth||'-'}}万元</span>
</view>
<view class="noticeItem">
<span class="noticeLabel">年度预算:</span>
<span class="noticeValue">{{subItem.budgetYear||'-'}}万元</span>
</view>
<view class="noticeItem">
<span class="noticeLabel">本月执行:</span>
<span class="noticeValue">{{subItem.monthExecute||'-'}}万元</span>
</view>
<view class="noticeItem">
<span class="noticeLabel">累计执行:</span>
<span class="noticeValue">{{subItem.accumulateExecute||'-'}}万元</span>
</view>
</view>
</view>
</view>
<image class="monthSumBg" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/allInCome.png"/>
<view class="itemBox">
<view class="progressBox">
<view class="progressTop">
@ -58,34 +82,15 @@
<view class="subItemTop">
<view class="index" :style="{background:`url(${subIndex===0?'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/secondBg.svg':subIndex===1?'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/thirdBg.svg':'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/otherBg.svg'})`}">{{subIndex + 1}}</view>
<span class="subItemName">{{subItem.name}}</span>
<view class="notice" @click="handleShowNotice(index,subIndex)">?</view>
<view class="noticeBox" v-if="firstIndex===index && secondIndex === subIndex" @click="handleCancelNotice">
<view class="noticeItem">
<span class="noticeLabel">本月预算:</span>
<span class="noticeValue">{{subItem.budgetMonth||'-'}}万元</span>
</view>
<view class="noticeItem">
<span class="noticeLabel">年度预算:</span>
<span class="noticeValue">{{subItem.budgetYear||'-'}}万元</span>
</view>
<view class="noticeItem">
<span class="noticeLabel">本月执行:</span>
<span class="noticeValue">{{subItem.monthExecute||'-'}}万元</span>
</view>
<view class="noticeItem">
<span class="noticeLabel">累计执行:</span>
<span class="noticeValue">{{subItem.accumulateExecute||'-'}}万元</span>
</view>
</view>
</view>
<view class="subItemBottom">
<view class="subItemBottom" v-if="subItem.monthRate || subItem.accumulateRate">
<view class="bottomItem">
<span class="bottomLabel">本月占比:</span>
<span class="bottomValue">{{`${subItem.monthRate||'-'}%`}}</span>
<span v-if="subItem.monthRate" class="bottomLabel">本月占比:</span>
<span v-if="subItem.monthRate" class="bottomValue">{{`${subItem.monthRate||'-'}%`}}</span>
</view>
<view class="bottomItem" style="text-align: right">
<span class="bottomLabel">累计占比:</span>
<span class="bottomValue">{{`${subItem.accumulateRate||'-'}%`}}</span>
<span v-if="subItem.accumulateRate" class="bottomLabel">累计占比:</span>
<span v-if="subItem.accumulateRate" class="bottomValue">{{`${subItem.accumulateRate||'-'}%`}}</span>
</view>
</view>
</view>
@ -110,7 +115,7 @@ export default {
pageTab:[{label:'自营收入',value:1},{label:'其他收入',value:2}],
selectTab: 0,
typeList:[{label:'按告警情况排序',value:0},{label:'按累计完成进度占比数排序',value:1},{label:'按本月完成进度占比数排序',value:2}],
typeValue: 0,
typeValue: 2,
pageData: {},// 页面数据
pageList: [],// 页面遍历的数据
single:'', // 时间选择器选择的时间
@ -189,22 +194,19 @@ export default {
console.log('pageList',this.pageList)
},
// 显示提示框
handleShowNotice(index,subIndex){
handleShowNotice(index){
this.firstIndex = index
this.secondIndex = subIndex
this.showMeng = true
},
// 取消显示提示框
handleCancelNotice(){
this.firstIndex = null
this.secondIndex = null
this.showMeng = false
},
// 关闭页面最大的蒙层
handleAllNotice(){
this.showMeng = false
this.firstIndex = null
this.secondIndex = null
}
}
}
@ -347,6 +349,53 @@ export default {
background: linear-gradient(180deg, #FEF4E6 0%, #FDFAF4 100%);
border-radius: 12rpx 12rpx 0rpx 0rpx;
position: relative;
.titleTop{
display: flex;
align-items: center;
.notice{
margin-left: 8rpx;
width: 12px;
height: 12px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #A69E9F;
border-radius: 50%;
color: #A69E9F;
font-size: 12px;
font-weight: 500;
position: relative;
z-index: 9;
}
.noticeBox{
position: absolute;
top: 10px;
z-index: 9;
background: #fff;
border-radius: 12rpx;
box-sizing: border-box;
padding: 12rpx 0;
display: block;
width: 300px;
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
.noticeTitle{
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 40rpx;
margin-left: 8px;
}
.noticeItem{
display: inline-block;
width: 140px;
color: #A69E9F;
font-size: 12px;
font-weight: 500;
box-sizing: border-box;
padding-left: 24rpx;
}
}
.itemTitle{
font-size: 36rpx;
font-family: Alimama ShuHeiTi;
@ -354,6 +403,7 @@ export default {
color: #EC6C00;
line-height: 44rpx;
}
}
.monthSumBg{
position: absolute;
width: 320rpx;
@ -441,38 +491,6 @@ export default {
line-height: 40rpx;
margin-left: 8px;
}
.notice{
margin-left: 8rpx;
width: 12px;
height: 12px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #A69E9F;
border-radius: 50%;
color: #A69E9F;
font-size: 12px;
font-weight: 500;
}
.noticeBox{
position: absolute;
bottom: -10px;
z-index: 9;
background: #fff;
border-radius: 12rpx;
box-sizing: border-box;
padding: 12rpx;
display: block;
width: 300px;
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
.noticeItem{
display: inline-block;
width: 140px;
color: #A69E9F;
font-size: 12px;
font-weight: 500;
}
}
}
.subItemBottom{
width: 100%;

85
pages/revenue/index.vue
View File

@ -332,7 +332,7 @@
</view>
<view class="itemDetailSubtotal">
<view class="itemSmallBox">
<view class="xian"></view>
<!-- <view class="xian"></view>-->
<view class="itemSmallTop">
<view class="leftBox">
<view class="smallIcon">
@ -371,11 +371,11 @@
<view class="rightTopItem">
<view class="itemDetail">
<!-- <view class="detailValue" style="font-size: 26rpx">{{$util.fmoney(item.ThisYearTotal/10000,2)}}</view>-->
<view class="detailValue" style="font-size: 26rpx">{{currentResult.selfThisYear || '-'}}</view>
<view class="detailValue" >{{currentResult.selfThisYear || '-'}}</view>
<view class="detailTitle">本年累计<text class="detailTitleUnit">/万元</text></view>
</view>
<view class="itemDetail">
<view class="detailValue" style="font-size: 26rpx;display: flex;align-items: center">
<view class="detailValue" style="text-align: right">
<!-- {{$util.fmoney(item.ThisMonthIncome/10000,2)}}-->
{{currentResult.selfThisMonth || '-'}}
</view>
@ -391,10 +391,10 @@
<view class="detailValue">{{currentResult.selfThisYearBudget || '-'}}</view>
<view class="detailTitle">年度预算<text class="detailTitleUnit">/万元</text></view>
</view>
<view class="itemRight">
<view class="itemRight" style="text-align: right">
<!-- <view class="rightValue">{{ `${item.ThisMonthIncomeRate||''}%` }}</view>-->
<view class="rightValue">{{ `${currentResult.selfThisMonthRate || '-'}%` }}</view>
<view class="rightLabel" style="display: flex;align-items: center">本月占比</view>
<view class="rightLabel">本月占比</view>
</view>
</view>
</view>
@ -430,7 +430,7 @@
</view>
<view class="itemSmallBox">
<view class="xian"></view>
<!-- <view class="xian"></view>-->
<view class="itemSmallTop">
<view class="leftBox">
<view class="smallIcon">
@ -470,15 +470,15 @@
<view class="rightTopItem">
<view class="itemDetail">
<!-- <view class="detailValue" style="font-size: 26rpx">{{$util.fmoney(item.ThisYearTotal/10000,2)}}</view>-->
<view class="detailValue" style="font-size: 26rpx">{{currentResult.otherThisYear || '-'}}</view>
<view class="detailValue" >{{currentResult.otherThisYear || '-'}}</view>
<view class="detailTitle">本年累计<text class="detailTitleUnit">/万元</text></view>
</view>
<view class="itemDetail">
<view class="detailValue" style="font-size: 26rpx;display: flex;align-items: center">
<view class="itemDetail" >
<view class="detailValue" style="text-align: right">
<!-- {{$util.fmoney(item.ThisMonthIncome/10000,2)}}-->
{{currentResult.otherThisMonth || '-'}}
</view>
<view class="detailTitle">
<view class="detailTitle" style="text-align: right">
{{ `${thisMonth}月累计` }}
<text class="detailTitleUnit">/万元</text>
</view>
@ -490,10 +490,10 @@
<view class="detailValue">{{currentResult.otherThisYearBudget || '-'}}</view>
<view class="detailTitle">年度预算<text class="detailTitleUnit">/万元</text></view>
</view>
<view class="itemRight">
<view class="itemRight" style="text-align: right">
<!-- <view class="rightValue">{{ `${item.ThisMonthIncomeRate||''}%` }}</view>-->
<view class="rightValue">{{ `${currentResult.otherThisMonthRate||'-'}%` }}</view>
<view class="rightLabel" style="display: flex;align-items: center">本月占比</view>
<view class="rightValue" >{{ `${currentResult.otherThisMonthRate||'-'}%` }}</view>
<view class="rightLabel" >本月占比</view>
</view>
</view>
</view>
@ -556,7 +556,7 @@
<view class="rateText">支出比</view>
</view>
</view>
<view class="rightBoxTop">
<view class="rightBoxTop" style="margin-top: 16px">
<view class="itemTop">
<!-- <text class="itemTopValue">{{$util.fmoney(pageDetail.Cost.ThisYearBudget/10000,2) }}</text>-->
<text class="itemTopValue">{{currentResult.expenditureThisYearBudget}}</text>
@ -580,7 +580,7 @@
</view>
<view class="smallTitle">{{ item.name }}</view>
</view>
<view class="leftRight" @click="handleGoExpenditure">
<view class="leftRight" @click="handleGoExpenditure(index+1)">
<text class="more">查看更多</text>
<image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/moreIcon.svg" />
</view>
@ -982,7 +982,7 @@ export default {
expenditureCostThisRate:'10.44%',// 营业成本小计本月占比
},
{
name:'其他费用小计',// 名称
name:'财务费用小计',// 名称
expenditureCostRate:59.46,// 营业成本小计完成率
expenditureCostThisYear:'437.00',// 营业成本小计本年累计
expenditureCostThisMonth:'-36.00',// 营业成本小计本月累计
@ -1069,7 +1069,7 @@ export default {
expenditureCostThisRate:'9.91%',// 营业成本小计本月占比
},
{
name:'其他费用小计',// 名称
name:'财务费用小计',// 名称
expenditureCostRate:60.40,// 营业成本小计完成率
expenditureCostThisYear:'456.00',// 营业成本小计本年累计
expenditureCostThisMonth:'18.00',// 营业成本小计本月累计
@ -1264,9 +1264,9 @@ export default {
});
},
// 进入支出详情
handleGoExpenditure(){
handleGoExpenditure(type){
uni.navigateTo({
url: '/pages/revenue/expenditureDetail'
url: `/pages/revenue/expenditureDetail?month=${this.thisMonth}&type=${type}`
});
},
// 请求数据的方法
@ -2278,20 +2278,20 @@ export default {
}
.itemSmallDetail{
width: calc(100% - 116rpx - 28rpx);
width: calc(100% - 48rpx);
height: 248rpx;
margin-top: 30rpx;
background: #F9F5F1;
border-radius: 8rpx;
margin-left: 116rpx;
margin-left: 24rpx;
box-sizing: border-box;
padding: 32rpx 16rpx 32rpx 30rpx;
display: flex;
justify-content: space-between;
.itemSmallLeftBox{
width: 128rpx;
width: 224rpx;
height: 100%;
border-radius: 8rpx;
box-sizing: border-box;
padding: 32rpx 48rpx 0;
.leftValue{
display: inline-block;
margin-top: 8rpx;
@ -2324,7 +2324,9 @@ export default {
}
}
.itemSmallRightBox{
width: calc(100% - 168rpx);
width: calc(100% - 224rpx);
box-sizing: border-box;
padding: 32rpx;
.rightTopItem{
width: 100%;
display: flex;
@ -2333,7 +2335,7 @@ export default {
display: inline-block;
width: 50%;
.detailValue{
font-size: 26rpx;
font-size: 32rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #160002;
@ -2364,7 +2366,7 @@ export default {
}
}
.detailTitle{
font-size: 22rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
@ -2404,14 +2406,14 @@ export default {
display: inline-block;
width: 50%;
.rightValue{
font-size: 26rpx;
font-size: 32rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #E83944;
line-height: 36rpx;
}
.rightLabel{
font-size: 22rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
@ -2448,8 +2450,8 @@ export default {
}
.smallSum{
width: calc(100% - 116rpx - 28rpx);
margin-left: 116rpx;
width: calc(100% - 48rpx);
margin-left: 24rpx;
.smallSumItem{
margin-top: 24rpx;
width: 100%;
@ -2601,10 +2603,11 @@ export default {
}
.rightBox{
width: calc(100% - 224rpx);
box-sizing: border-box;
padding: 32rpx;
.rightBoxTop{
width: 100%;
box-sizing: border-box;
padding: 32rpx;
display: flex;
justify-content: space-between;
align-items: center;
@ -2710,20 +2713,20 @@ export default {
}
.itemSmallDetail{
width: calc(100% - 100rpx - 28rpx);
width: calc(100% - 48rpx);
height: 248rpx;
margin-top: 30rpx;
background: #F8FAFD;
border-radius: 8rpx;
margin-left: 100rpx;
margin-left: 24rpx;
box-sizing: border-box;
padding: 32rpx 30rpx;
display: flex;
justify-content: space-between;
.itemSmallLeftBox{
width: 128rpx;
width: 224rpx;
height: 100%;
border-radius: 8rpx;
box-sizing: border-box;
padding: 32rpx 48rpx 0;
.leftValue{
margin-top: 4rpx;
font-size: 40rpx;
@ -2734,9 +2737,9 @@ export default {
}
}
.itemSmallRightBox{
width: calc(100% - 148rpx);
padding-left: 12rpx;
width: calc(100% - 224rpx);
box-sizing: border-box;
padding: 32rpx;
.rightTopItem{
width: 100%;
display: flex;
@ -2750,7 +2753,7 @@ export default {
line-height: 36rpx;
}
.detailTitle{
font-size: 22rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
@ -2768,7 +2771,7 @@ export default {
text-align: right;
}
.rightLabel{
font-size: 22rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;

1
static/images/revenueBox/fourthFirst.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1700641776701" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6212" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M781.186088 616.031873q17.338645 80.573705 30.59761 145.848606 6.119522 27.537849 11.219124 55.075697t9.689243 49.976096 7.649402 38.247012 4.079681 19.888446q3.059761 20.398406-9.179283 27.027888t-27.537849 6.629482q-5.099602 0-14.788845-3.569721t-14.788845-5.609562l-266.199203-155.027888q-72.414343 42.836653-131.569721 76.494024-25.498008 14.278884-50.486056 28.557769t-45.386454 26.517928-35.187251 20.398406-19.888446 10.199203q-10.199203 5.099602-20.908367 3.569721t-19.378486-7.649402-12.749004-14.788845-2.039841-17.848606q1.01992-4.079681 5.099602-19.888446t9.179283-37.737052 11.729084-48.446215 13.768924-54.055777q15.298805-63.23506 34.677291-142.788845-60.175299-52.015936-108.111554-92.812749-20.398406-17.338645-40.286853-34.167331t-35.697211-30.59761-26.007968-22.438247-11.219124-9.689243q-12.239044-11.219124-20.908367-24.988048t-6.629482-28.047809 11.219124-22.438247 20.398406-10.199203l315.155378-28.557769 117.290837-273.338645q6.119522-16.318725 17.338645-28.047809t30.59761-11.729084q10.199203 0 17.848606 4.589641t12.749004 10.709163 8.669323 12.239044 5.609562 10.199203l114.231076 273.338645 315.155378 29.577689q20.398406 5.099602 28.557769 12.239044t8.159363 22.438247q0 14.278884-8.669323 24.988048t-21.928287 26.007968z" p-id="6213" fill="#FF7831"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

1
static/images/revenueBox/fourthSecond.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1700641776701" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6212" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M781.186088 616.031873q17.338645 80.573705 30.59761 145.848606 6.119522 27.537849 11.219124 55.075697t9.689243 49.976096 7.649402 38.247012 4.079681 19.888446q3.059761 20.398406-9.179283 27.027888t-27.537849 6.629482q-5.099602 0-14.788845-3.569721t-14.788845-5.609562l-266.199203-155.027888q-72.414343 42.836653-131.569721 76.494024-25.498008 14.278884-50.486056 28.557769t-45.386454 26.517928-35.187251 20.398406-19.888446 10.199203q-10.199203 5.099602-20.908367 3.569721t-19.378486-7.649402-12.749004-14.788845-2.039841-17.848606q1.01992-4.079681 5.099602-19.888446t9.179283-37.737052 11.729084-48.446215 13.768924-54.055777q15.298805-63.23506 34.677291-142.788845-60.175299-52.015936-108.111554-92.812749-20.398406-17.338645-40.286853-34.167331t-35.697211-30.59761-26.007968-22.438247-11.219124-9.689243q-12.239044-11.219124-20.908367-24.988048t-6.629482-28.047809 11.219124-22.438247 20.398406-10.199203l315.155378-28.557769 117.290837-273.338645q6.119522-16.318725 17.338645-28.047809t30.59761-11.729084q10.199203 0 17.848606 4.589641t12.749004 10.709163 8.669323 12.239044 5.609562 10.199203l114.231076 273.338645 315.155378 29.577689q20.398406 5.099602 28.557769 12.239044t8.159363 22.438247q0 14.278884-8.669323 24.988048t-21.928287 26.007968z" p-id="6213" fill="#FE9F17"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

1
static/images/revenueBox/fourthther.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1700641776701" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6212" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M781.186088 616.031873q17.338645 80.573705 30.59761 145.848606 6.119522 27.537849 11.219124 55.075697t9.689243 49.976096 7.649402 38.247012 4.079681 19.888446q3.059761 20.398406-9.179283 27.027888t-27.537849 6.629482q-5.099602 0-14.788845-3.569721t-14.788845-5.609562l-266.199203-155.027888q-72.414343 42.836653-131.569721 76.494024-25.498008 14.278884-50.486056 28.557769t-45.386454 26.517928-35.187251 20.398406-19.888446 10.199203q-10.199203 5.099602-20.908367 3.569721t-19.378486-7.649402-12.749004-14.788845-2.039841-17.848606q1.01992-4.079681 5.099602-19.888446t9.179283-37.737052 11.729084-48.446215 13.768924-54.055777q15.298805-63.23506 34.677291-142.788845-60.175299-52.015936-108.111554-92.812749-20.398406-17.338645-40.286853-34.167331t-35.697211-30.59761-26.007968-22.438247-11.219124-9.689243q-12.239044-11.219124-20.908367-24.988048t-6.629482-28.047809 11.219124-22.438247 20.398406-10.199203l315.155378-28.557769 117.290837-273.338645q6.119522-16.318725 17.338645-28.047809t30.59761-11.729084q10.199203 0 17.848606 4.589641t12.749004 10.709163 8.669323 12.239044 5.609562 10.199203l114.231076 273.338645 315.155378 29.577689q20.398406 5.099602 28.557769 12.239044t8.159363 22.438247q0 14.278884-8.669323 24.988048t-21.928287 26.007968z" p-id="6213" fill="#BCC2C9"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

1
static/images/revenueBox/thirdFirst.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1700641887469" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7424" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M514.048 128q79.872 0 149.504 30.208t121.856 82.432 82.432 122.368 30.208 150.016q0 78.848-30.208 148.48t-82.432 121.856-121.856 82.432-149.504 30.208-149.504-30.208-121.856-82.432-82.432-121.856-30.208-148.48q0-79.872 30.208-150.016t82.432-122.368 121.856-82.432 149.504-30.208z" p-id="7425" fill="#FF7831"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 654 B

1
static/images/revenueBox/thirdOther.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1700641887469" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7424" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M514.048 128q79.872 0 149.504 30.208t121.856 82.432 82.432 122.368 30.208 150.016q0 78.848-30.208 148.48t-82.432 121.856-121.856 82.432-149.504 30.208-149.504-30.208-121.856-82.432-82.432-121.856-30.208-148.48q0-79.872 30.208-150.016t82.432-122.368 121.856-82.432 149.504-30.208z" p-id="7425" fill="#BCC2C9"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 654 B

1
static/images/revenueBox/thirdSecond.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1700641887469" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7424" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M514.048 128q79.872 0 149.504 30.208t121.856 82.432 82.432 122.368 30.208 150.016q0 78.848-30.208 148.48t-82.432 121.856-121.856 82.432-149.504 30.208-149.504-30.208-121.856-82.432-82.432-121.856-30.208-148.48q0-79.872 30.208-150.016t82.432-122.368 121.856-82.432 149.504-30.208z" p-id="7425" fill="#FEAC37"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 654 B