ahyd_DIB/pages/commercialBI/serviceDetail.vue
2023-04-23 14:12:25 +08:00

1225 lines
53 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="main">
<div class="top">
<p class="title" v-if="type==='month'">{{serviceInfo.name}}服务区自营计划</p>
<p class="title" v-if="type==='year'">{{serviceInfo.name}}服务区年度自营计划</p>
<div class="select">
<picker mode="date" fields="month" :value="single" :end="endData" @change="bindDateChange" >
<view class="time">
<view class="uni-input" style="background: transparent;padding: 0;height:100%">{{ single }}</view>
<image class="icon" src="/static/images/index/arrow_bottom.svg"></image>
</view>
</picker>
</div>
</div>
<view class="box" v-if="type==='month'">
<view class="top">
<view class="big">
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/thisMonth.svg"></image>
</view>
<view class="text">
<view class="textTop">
<view class="left">
<p class="number">{{serviceInfo.Budget_Degree?serviceInfo.Budget_Degree + '%':'-'}}</p>
<p v-if="serviceInfo.Budget_Degree>=100" class="desc"><image class="success" src="/static/images/index/successMonth.svg"></image></p>
</view>
<view class="right">
<text class="comparePlan">比计划: </text>
<view class="box2">
<image class="addIcon" :src="Number(serviceInfo.Growth_Rate)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
<p class="text">{{serviceInfo.Growth_Rate ?Math.abs(serviceInfo.Growth_Rate) + '%':'-'}}</p>
</view>
</view>
</view>
<div class="progressPlan">
<div class="trans" :style="{width:serviceInfo.Budget_Degree > 100 ? '100%' : serviceInfo.Budget_Degree + '%'}"></div>
</div>
</view>
</view>
<view class="bottom">
<view class="success" style="margin-right: 39px">
<p class="text">本月已完成<text class="unit">/元</text></p>
<p class="money">{{serviceInfo.Revenue_Amount ?serviceInfo.Revenue_Amount :'-'}}</p>
</view>
<view class="success">
<p class="text">本月计划<text class="unit">/元</text></p>
<p class="money">{{serviceInfo.Budget_Amount ?serviceInfo.Budget_Amount :'-'}}</p>
</view>
</view>
</view>
<view class="box" v-if="type==='year'">
<view class="top">
<view class="big">
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/planYear.svg"></image>
</view>
<view class="text">
<view class="textTop">
<view class="left">
<p class="number">{{serviceInfo.Budget_Degree?serviceInfo.Budget_Degree + '%':'-'}}</p>
<p v-if="serviceInfo.Budget_Degree>=100" class="desc" style="color: #4E68FF"><image class="success" src="/static/images/index/yearSuccess.svg"></image></p>
</view>
<view class="right">
<text class="comparePlan">比计划: </text>
<div class="box2">
<image class="addIcon" :src="Number(serviceInfo.Growth_Rate)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
<p class="text">{{serviceInfo.Growth_Rate?Math.abs(serviceInfo.Growth_Rate) + '%':''}}</p>
</div>
</view>
</view>
<div class="progressPlan">
<div class="transYear" :style="{width:serviceInfo.Budget_Degree + '%'}"></div>
<!-- <image class="img" :style="{width: plan.percentageYear + '%'}" src="https://eshangtech.com/ShopICO/ahyd-BID/index/progress_blue.png"></image>-->
<!-- <div class=pro :style="{width:(100 - plan.percentageYear)+ '%'}"></div>-->
</div>
</view>
</view>
<view class="bottom">
<view class="success" style="margin-right: 39px">
<p class="text">年度已完成<text class="unit">/元</text></p>
<p class="money">{{serviceInfo.Revenue_Amount?serviceInfo.Revenue_Amount:'-'}}</p>
</view>
<view class="success">
<p class="text">年度计划<text class="unit">/元</text></p>
<p class="money">{{serviceInfo.Budget_Amount?serviceInfo.Budget_Amount:'-'}}</p>
</view>
</view>
</view>
<p class="title" style="margin-top: 12px">{{month}}月预算完成度</p>
<div class="list" v-if="type==='month'" >
<div class="item" >
<!-- 三级遍历数组展示 -->
<div class="firstBox" v-for="(item,index) in dataList" :key="index" >
<div class="valueBox" v-if="item.node.ShowRevenue_Amount" style="display: flex;justify-content: space-between">
<p class="firstTitle">{{item.node.ACCOUNT_CODE}}</p>
<div>
<p v-if="item.node.BUDGETDETAIL_AMOUNT" class="value" style="color:#a69e9f">{{item.node.BUDGETDETAIL_AMOUNT?item.node.BUDGETDETAIL_AMOUNT:''}}<text v-if="item.node.BUDGETDETAIL_AMOUNT!=='-'" style="margin-left: 4px;color:#a69e9f">{{item.node.ACCOUNT_CODE==='毛利率'?'%':'元'}}</text><text v-if="item.node.BUDGETDETAIL_AMOUNT!=='-'" class="type" style="margin-left: 4px">(计划)</text></p>
<p class="value">{{item.node.REVENUE_AMOUNT?item.node.REVENUE_AMOUNT:'-' }}<text v-if="item.node.REVENUE_AMOUNT" style="margin-left: 4px">{{item.node.ACCOUNT_CODE==='毛利率'?'%':'元'}}</text><text v-if="item.node.REVENUE_AMOUNT" class="type" style="margin-left: 4px">(实际)</text></p>
<view class="addBox" v-if="item.node.ShowGrowth_Rate">
<image class="addIcon" :src="item.node.Growth_Rate>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':item.node.Growth_Rate<0?'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg':''"></image>
<p class="text" style="margin-left: 4px">{{item.node.Growth_Rate?Math.abs(item.node.Growth_Rate) + '%':'-'}}</p>
<text class="type" style="margin-left: 4px">{{item.node.Growth_Rate>0?'(提升)':item.node.Growth_Rate<0?'(降低)':''}}</text>
</view>
</div>
</div>
<text class="firstTitle" v-if="!item.node.ShowRevenue_Amount ">{{item.node.ACCOUNT_CODE}}</text>
<div class="valueBox" v-if="item.node.BUDGETDETAIL_AMOUNT && !item.node.ShowRevenue_Amount">
<p class="value" style="color:#a69e9f">{{item.node.BUDGETDETAIL_AMOUNT }}<text style="margin-left: 4px;color:#a69e9f">{{item.node.ACCOUNT_CODE==='毛利率'?'%':'元'}}</text><text class="type" style="margin-left: 4px">(计划)</text></p>
<p class="value" v-if="item.node.ShowGrowth_Rate">{{item.node.REVENUE_AMOUNT?item.node.REVENUE_AMOUNT:'-' }}<text v-if="item.node.REVENUE_AMOUNT!=='-'" style="margin-left: 4px">{{item.node.ACCOUNT_CODE==='毛利率'?'%':'元'}}</text><text v-if="item.node.REVENUE_AMOUNT!=='-'" class="type" style="margin-left: 4px">(实际)</text></p>
<view class="addBox" v-if="item.node.ShowGrowth_Rate">
<image class="addIcon" :src="item.node.Growth_Rate>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':item.node.Growth_Rate<0?'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg':''"></image>
<p class="text" style="margin-left: 4px">{{item.node.Growth_Rate?Math.abs(item.node.Growth_Rate) + '%':'-' }}</p>
<text class="type" style="margin-left: 4px">{{item.node.Growth_Rate>0?'(提升)':item.node.Growth_Rate<0?'(降低)':'-'}}</text>
</view>
</div>
<div v-if="item.children.length>0" class="subBox" v-for="(subItem,subIndex) in item.children" :key="subIndex"
:style="subItem.children?'':'display:flex;justify-content: space-between'">
<div class="valueBox" v-if="subItem.node.ShowRevenue_Amount" style="display: flex;justify-content: space-between">
<p class="subTitle">{{subItem.node.ACCOUNT_CODE}}</p>
<div >
<p v-if="subItem.node.BUDGETDETAIL_AMOUNT" class="value" style="color:#a69e9f">{{subItem.node.BUDGETDETAIL_AMOUNT?subItem.node.BUDGETDETAIL_AMOUNT:''}}<text v-if="subItem.node.BUDGETDETAIL_AMOUNT!=='-'" style="margin-left: 4px;color:#a69e9f">{{item.node.ACCOUNT_CODE==='毛利率'?'%':'元'}}</text><text v-if="subItem.node.BUDGETDETAIL_AMOUNT!=='-'" class="type" style="margin-left: 4px">(计划)</text></p>
<p class="value">{{subItem.node.REVENUE_AMOUNT?subItem.node.REVENUE_AMOUNT:'-' }}<text v-if="subItem.node.REVENUE_AMOUNT" style="margin-left: 4px">{{item.node.ACCOUNT_CODE==='毛利率'?'%':'元'}}</text><text v-if="subItem.node.REVENUE_AMOUNT" class="type" style="margin-left: 4px">(实际)</text></p>
<view class="addBox" v-if="subItem.node.ShowGrowth_Rate">
<image class="addIcon" :src="subItem.node.Growth_Rate>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':subItem.node.Growth_Rate<0?'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg':''"></image>
<p class="text" style="margin-left: 4px">{{subItem.node.Growth_Rate?Math.abs(subItem.node.Growth_Rate) + '%':'-'}}</p>
<text class="type" style="margin-left: 4px">{{subItem.node.Growth_Rate>0?'(提升)':subItem.node.Growth_Rate<0?'(降低)':''}}</text>
</view>
</div>
</div>
<p class="subTitle" v-if="!subItem.node.ShowRevenue_Amount ">{{subItem.node.ACCOUNT_CODE}}</p>
<div class="valueBox" v-if="subItem.node.BUDGETDETAIL_AMOUNT && !subItem.node.ShowRevenue_Amount">
<p class="value" style="color:#a69e9f">{{subItem.node.BUDGETDETAIL_AMOUNT?subItem.node.BUDGETDETAIL_AMOUNT:''}}<text v-if="subItem.node.BUDGETDETAIL_AMOUNT!=='-'" style="margin-left: 4px;color:#a69e9f">{{item.node.ACCOUNT_CODE==='毛利率'?'%':'元'}}</text><text v-if="subItem.node.BUDGETDETAIL_AMOUNT!=='-'" class="type" style="margin-left: 4px">(计划)</text></p>
<p v-if="subItem.node.ShowGrowth_Rate" class="value">{{subItem.node.REVENUE_AMOUNT?subItem.node.REVENUE_AMOUNT:'-' }}<text v-if="subItem.node.REVENUE_AMOUNT" style="margin-left: 4px">{{item.node.ACCOUNT_CODE==='毛利率'?'%':'元'}}</text><text v-if="subItem.node.REVENUE_AMOUNT" class="type" style="margin-left: 4px">(实际)</text></p>
<view class="addBox" v-if="subItem.node.ShowGrowth_Rate">
<image class="addIcon" :src="subItem.node.Growth_Rate>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':subItem.node.Growth_Rate<0?'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg':''"></image>
<p class="text" style="margin-left: 4px">{{subItem.node.Growth_Rate?Math.abs(subItem.node.Growth_Rate) + '%':'-'}}</p>
<text class="type" style="margin-left: 4px">{{subItem.node.Growth_Rate>0?'(提升)':subItem.node.Growth_Rate<0?'(降低)':''}}</text>
</view>
</div>
<div v-if="subItem.children.length>0" class="thirdBox" v-for="(thirdItem,thirdIndex) in subItem.children" :key="thirdIndex">
<text class="thirdTitle">{{thirdItem.node.ACCOUNT_CODE}}</text>
<div class="valueBox" v-if="thirdItem.node.BUDGETDETAIL_AMOUNT">
<p class="value" style="color:#a69e9f">{{thirdItem.node.BUDGETDETAIL_AMOUNT}}<text style="margin-left: 4px;color:#a69e9f" v-if="thirdItem.node.BUDGETDETAIL_AMOUNT!=='-'">{{item.node.ACCOUNT_CODE==='毛利率'?'%':'元'}}</text><text v-if="thirdItem.node.BUDGETDETAIL_AMOUNT!=='-'" class="type" style="margin-left: 4px">(计划)</text></p>
<p class="value" v-if="thirdItem.node.ShowGrowth_Rate">{{thirdItem.node.REVENUE_AMOUNT?thirdItem.node.REVENUE_AMOUNT:'-' }}<text v-if="thirdItem.node.REVENUE_AMOUNT" style="margin-left: 4px">{{item.node.ACCOUNT_CODE==='毛利率'?'%':'元'}}</text><text v-if="thirdItem.node.REVENUE_AMOUNT" class="type" style="margin-left: 4px">(实际)</text></p>
<view class="addBox" v-if="thirdItem.node.ShowGrowth_Rate">
<image class="addIcon" :src="thirdItem.node.Growth_Rate>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':thirdItem.node.Growth_Rate<0?'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg':''"></image>
<p class="text" style="margin-left: 4px">{{thirdItem.node.Growth_Rate?Math.abs(thirdItem.node.Growth_Rate) + '%':'-'}}</p>
<text class="type" style="margin-left: 4px">{{thirdItem.node.Growth_Rate>0?'(提升)':thirdItem.node.Growth_Rate<0?'(降低)':''}}</text>
</view>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="margin-top: 12px">
<div v-if="type==='year'" class="monthList" v-for="(item,index) in dataList" :key="index" @click="handleYearItem(item)">
<div class="top">
<div class="left">
<p class="title" ><text class="name">{{item.Statistics_Month}}</text></p>
<div class="value" >{{item.Budget_Degree}}%</div>
</div>
<div class="right">
<text class="comparePlan">比计划 </text>
<div class="box2">
<image class="addIcon" :src="Number(item.Growth_Rate)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
<p class="text">{{item.Growth_Rate?Math.abs(item.Growth_Rate) + '%':''}}</p>
</div>
</div>
</div>
<div class="progress">
<div class="have" :style="{width:item.Budget_Degree + '%'}"></div>
</div>
<div class="bottom">
<div class="success">
<p class="text">已完成:</p>
<text class="money">{{item.Revenue_Amount}}</text>
</div>
<div class="success">
<p class="text">计划: </p>
<text class="money">{{item.Budget_Amount }}</text>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import request from '@/util/index.js'
export default {
name: "serviceDetail",
data(){
return{
serviceInfo:{},
month:'',
dataList:[],
single:'',//显示时间
endData:'',//截止日期
type:'',
isSelect:false,
optionTime:''
}
},
onLoad(option){
console.log('option',option)
if (option.select){
this.isSelect = true
}
if (option.type === 'month'){
this.type = option.type
if (option.month){
this.optionTime = option.month
this.month = option.month
}
if (!this.month){
const date = new Date()
this.month = date.getMonth() + 1
}
if (this.month<10){
this.month = '0' + this.month
}
this.serviceInfo = JSON.parse(option.serviceInfo)
this.serviceInfo.Budget_Degree =this.$util.fmoney(this.serviceInfo.Budget_Degree)
this.getData()
}else {
this.type = option.type
this.serviceInfo = JSON.parse(option.serviceInfo)
this.getYearData()
}
},
onShow(){
if (this.type === 'month'){
uni.setNavigationBarTitle({
title: `${this.month}${this.serviceInfo.SERVERPART_NAME || this.serviceInfo.Serverpart_Name}计划`,
})
}else{
uni.setNavigationBarTitle({
title: `${this.serviceInfo.SERVERPART_NAME || this.serviceInfo.Serverpart_Name}年度计划`,
})
}
if (this.month){
const date = new Date()
let y = date.getFullYear()
let time = `${y}-${this.month}`
this.single = this.$util.getThisMonthHave(time)
}else{
let storeTime = uni.getStorageSync('lastDay')
if (storeTime){
this.time = storeTime
}
this.single = this.$util.getThisMonthHave(this.time)
}
let nowTime = new Date()
let y = nowTime.getFullYear()
let month = nowTime.getMonth() + 1
if (month<10){
month = '0'+ month
}
// 结束月份 给时间选择器
this.endData = `${y}-${month}`
},
onUnload() {
this.$util.addUserBehavior()
},
methods:{
handleYearItem(item){
let currentService = uni.getStorageSync('currentService')
let service = {
Budget_Amount:item.Budget_Amount,
Budget_Degree:item.Budget_Degree,
Growth_Rate:item.Growth_Rate,
Revenue_Amount:item.Revenue_Amount,
Serverpart_ID:currentService.Serverpart_ID,
Serverpart_Name:currentService.SERVERPART_NAME
}
let num = service.Serverpart_Name.indexOf('服务区')
if (num!==-1){
service.name = service.Serverpart_Name.slice(0,num)
service.unit = service.Serverpart_Name.slice(num,100)
}else{
service.name = service.Serverpart_Name
}
let month = item.Statistics_Month
uni.navigateTo({
url:`/pages/commercialBI/serviceDetail?serviceInfo=${JSON.stringify(service)}&month=${month}&type=month`
})
},
// 时间选择器改变的时间
bindDateChange(e){
const date = new Date(e.detail.value)
let m = date.getMonth() + 1
if (m<10){
m = '0' + m
}
this.month = m
this.single = e.detail.value
let d = this.$util.getThisMonthDay(e.detail.value)
this.endTime = e.detail.value + '-' + d
this.getData(e.detail.value)
//修改顶部服务区数据的方法
this.getServiceDate(e.detail.value)
if (this.type === 'month'){
uni.setNavigationBarTitle({
title: `${this.month}${this.serviceInfo.SERVERPART_NAME || this.serviceInfo.Serverpart_Name}计划`,
})
}else{
uni.setNavigationBarTitle({
title: `${this.serviceInfo.SERVERPART_NAME || this.serviceInfo.Serverpart_Name}年度计划`,
})
}
},
// 获取服务区信息
async getServiceDate(time){
let reqTime
let date = new Date(time)
let currentDate = new Date()
let nowMonth = currentDate.getMonth() + 1
let y = date.getFullYear()
let m = date.getMonth() + 1
if (m === nowMonth){
let nowYear = currentDate.getFullYear()
let nodDay = currentDate.getDate()
if (nowMonth<10){
nowMonth = '0' + nowMonth
}
if (nodDay<10){
nodDay = '0' + nodDay
}
reqTime = `${nowYear}-${nowMonth}-${nodDay}`
}else{
let howDay = this.$util.getThisMonthDay(time)
if (m<10){
m = '0' + m
}
reqTime = `${y}-${m}-${howDay}`
}
let req = {
Province_Code:'340000',
Statistics_Date:reqTime,
Serverpart_ID:this.serviceInfo.Serverpart_ID,
SPRegionType_ID:this.serviceInfo.SPRegionType_ID
}
const data = await request.$webGet('CommercialApi/Revenue/GetRevenueBudget',req)
let service = {
Budget_Amount:this.$util.fmoney(data.Result_Data.BudgetMonth_Amount),
Budget_Degree:data.Result_Data.MonthBudget_Degree,
Growth_Rate:data.Result_Data.MonthGrowth_Rate,
Revenue_Amount:this.$util.fmoney(data.Result_Data.RevenueMonth_Amount),
Serverpart_ID:this.serviceInfo.Serverpart_ID,
Serverpart_Name:this.serviceInfo.Serverpart_Name
}
let num = service.Serverpart_Name.indexOf('服务区')
if (num!==-1){
service.name = service.Serverpart_Name.slice(0,num)
service.unit = service.Serverpart_Name.slice(num,100)
}else{
service.name = service.Serverpart_Name
}
this.serviceInfo = service
},
async getYearData(){
let storeServiceInfo = uni.getStorageSync('currentService')
let lastDay = uni.getStorageSync('lastDay')
let req = {
StatisticsDate: lastDay,
ProvinceCode:'340000',
StatisticsType:3,
SPRegionTypeID:storeServiceInfo.SPRegionType_ID,
ServerpartID:storeServiceInfo.Serverpart_ID
}
const totalData = await request.$webGet('CommercialApi/Revenue/GetProvinceRevenueBudget',req)
this.dataList = totalData.Result_Data.RegionBudgetList
},
async getData(changeTime){
let time = uni.getStorageSync('lastDay')
let date = ''
if (changeTime){
date = new Date(changeTime)
}else{
date = new Date(time)
}
const nowDate = new Date()
let nowMonth = nowDate.getMonth() + 1
let y = date.getFullYear()
let m = this.month
let req = {}
if (nowMonth === Number(m) ){
req = {
BUDGETPROJECT_YEAR: y,
STATISTICS_MONTH:`${y}${m}`,
SERVERPART_ID:this.serviceInfo.Serverpart_ID,
ACCOUNT_CODE:'6001,6401,6402',
STATISTICS_DATE: time
}
}else{
let reqDate
let m
if (changeTime){
reqDate = new Date(changeTime)
m = reqDate.getMonth() + 1
if (m<10){
m = '0' + m
}
}else{
reqDate = new Date()
m = this.month
}
let y = reqDate.getFullYear()
req = {
BUDGETPROJECT_YEAR: y,
STATISTICS_MONTH: `${y}${m}`,
SERVERPART_ID:this.serviceInfo.Serverpart_ID,
ACCOUNT_CODE:'6001,6401,6402',
}
}
const totalData = await request.$webGet('CommercialApi/Budget/GetBudgetProjectDetailList',req)
this.dataList = totalData.Result_Data.List
// 千分号格式化处理数字
this.dataList.forEach(item=>{
if (item.children){
item.children = this.editData(item.children)
if (item.node.ShowRevenue_Amount){
item.node.BUDGETDETAIL_AMOUNT = item.node.BUDGETDETAIL_AMOUNT ? this.$util.fmoney(item.node.BUDGETDETAIL_AMOUNT):''
item.node.REVENUE_AMOUNT = this.$util.fmoney(item.node.REVENUE_AMOUNT)
}
}else{
if (item.node.BUDGETDETAIL_AMOUNT){
item.node.BUDGETDETAIL_AMOUNT = item.node.BUDGETDETAIL_AMOUNT ? this.$util.fmoney(item.node.BUDGETDETAIL_AMOUNT):''
item.node.REVENUE_AMOUNT = this.$util.fmoney(item.node.REVENUE_AMOUNT)
}else{
item.node.BUDGETDETAIL_AMOUNT = '-'
}
}
})
// 强制刷新 感觉没用 放一下保险
this.$forceUpdate()
},
// 递归处理数据
editData(value){
value.forEach(item=>{
if (item.children){
item.children = this.editData(item.children)
if (item.node.ShowRevenue_Amount){
item.node.BUDGETDETAIL_AMOUNT = item.node.BUDGETDETAIL_AMOUNT ? this.$util.fmoney(item.node.BUDGETDETAIL_AMOUNT) :''
item.node.REVENUE_AMOUNT = this.$util.fmoney(item.node.REVENUE_AMOUNT)
}
}else{
if (item.node.BUDGETDETAIL_AMOUNT){
item.node.BUDGETDETAIL_AMOUNT = item.node.BUDGETDETAIL_AMOUNT ? this.$util.fmoney(item.node.BUDGETDETAIL_AMOUNT) :''
item.node.REVENUE_AMOUNT = this.$util.fmoney(item.node.REVENUE_AMOUNT)
}else{
item.node.BUDGETDETAIL_AMOUNT = '-'
}
}
})
return value
}
}
}
</script>
<style scoped lang="scss">
.main{
width: 100%;
min-height: 100vh;
box-sizing: border-box;
padding: 0 16px;
.title{
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
}
.top{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.title{
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
}
.select{
margin-left: 8px;
display: inline-block;
.time {
display: flex;
align-items: center;
margin-right: 4px;
.day {
font-size: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #782717;
line-height: 44rpx;
margin-right: 4px;
}
.uni-input {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ae664e;
line-height: 36rpx;
}
.icon {
width: 24px;
height: 16px;
}
}
}
}
.box {
width: 100%;
padding: 12px 16px;
box-sizing: border-box;
border-radius: 8px;
background: #f5f2f2;
margin-top: 12px;
.top {
width: 100%;
display: flex;
.big {
width: 40px;
height: 40px;
background: #ffffff;
border-radius: 8px;
border: 1px solid #ebebeb;
display: flex;
justify-content: center;
align-items: center;
margin-right: 8px;
.icon {
width: 20px;
height: 20px;
}
}
.text {
width: calc(100% - 60px);
padding: 2px 0;
.textTop{
display: flex;
align-items: center;
justify-content: space-between;
.left{
display: flex;
align-items: center;
.number {
font-size: 36rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #150002;
line-height: 40rpx;
}
.desc{
display: flex;
align-items: center;
margin-left: 8px;
font-size: 14px;
color: #FF7043;
.success{
width: 20px;
height: 20px;
margin-right: 4px;
}
}
}
.right{
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
.comparePlan{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a69e9f;
line-height: 36rpx;
white-space: nowrap;
}
.box2{
display: flex;
align-items: center;
.text{
font-size: 14px;
font-family: DINAlternate-Bold, DINAlternate;
color: #150002;
font-weight: bold;
line-height: 40rpx;
}
.addIcon {
width: 16px;
height: 16px;
margin-right: 2px;
}
}
}
}
.progressPlan{
width: 100%;
height: 8px;
border-radius: 5px;
background: #fff;
margin-top: 8px;
position: relative;
overflow: hidden;
.trans{
height: 8px;
position: absolute;
left: 0;top: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_orange.png")no-repeat 100% 100%;
}
.transYear{
height: 8px;
position: absolute;
left: 0;top: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_blue.png")no-repeat 100% 100%;
}
//.img{
// width: 100%;
// height: 100%;
// position: absolute;
// top: 0;
// left: 0;
// z-index:1;
//}
//.pro{
// height: 100%;
// position: absolute;
// top: 0;right: 0;
// background: #fff;
// z-index:2;
//}
}
}
}
.bottom {
display: flex;
margin-top: 16px;
padding-left: 48px;
.success {
.text {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786b6c;
line-height: 40rpx;
margin-bottom: 2px;
.unit {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a69e9f;
line-height: 40rpx;
margin-left: 2px;
}
}
.money {
font-size: 28rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: 600;
color: #160002;
line-height: 40rpx;
}
}
}
}
.list{
margin-top: 12px;
padding-bottom: 12px;
.item{
width: 100%;
box-sizing: border-box;
padding: 12px;
background: #F5F5F5;
margin-bottom: 12px;
border-radius: 8px;
.bigTitle{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a69e9f;
.name{
color: #150002;
font-size: 18px;
}
}
.firstBox{
margin-top: 8px;
.valueBox{
display: inline-block;
text-align: right;
.firstTitle{
display: inline-block;
width: 180px;
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 22px;
text-align: left;
}
.addBox{
display: flex;
align-items: center;
justify-content: flex-end;
.addIcon {
width: 16px;
height: 16px;
margin-right: 2px;
}
.type{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a69e9f;
line-height: 18px;
white-space: nowrap;
}
}
.value{
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
color: #160002;
line-height: 22px;
padding-left: 10px;
.type{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a69e9f;
line-height: 18px;
white-space: nowrap;
}
}
}
.firstTitle{
display: inline-block;
width: 180px;
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 22px;
}
.boxTop{
display: flex;
justify-content: space-between;
.firstTitle{
display: inline-block;
width: 180px;
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 22px;
}
.amount{
display: inline-block;
text-align: right;
.addBox{
display: flex;
align-items: center;
justify-content: flex-end;
.addIcon {
width: 16px;
height: 16px;
margin-right: 2px;
}
.type{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a69e9f;
line-height: 18px;
white-space: nowrap;
}
}
.value{
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
color: #160002;
line-height: 22px;
padding-left: 10px;
.type{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a69e9f;
line-height: 18px;
white-space: nowrap;
}
}
}
}
.valueBox{
display: inline-block;
text-align: right;
.addBox{
display: flex;
align-items: center;
justify-content: flex-end;
.addIcon {
width: 16px;
height: 16px;
margin-right: 2px;
}
.type{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a69e9f;
line-height: 18px;
white-space: nowrap;
}
}
.value{
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
color: #160002;
line-height: 22px;
padding-left: 10px;
.type{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a69e9f;
line-height: 18px;
white-space: nowrap;
}
}
}
.subBox{
margin-top: 4px;
.valueBox{
display: inline-block;
text-align: right;
.subTitle{
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 22px;
padding-left: 10px;
display: inline-block;
width: 120px;
text-align: left;
}
.addBox{
display: flex;
align-items: center;
justify-content: flex-end;
.addIcon {
width: 16px;
height: 16px;
margin-right: 2px;
}
.type{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a69e9f;
line-height: 18px;
white-space: nowrap;
}
}
.value{
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
color: #160002;
line-height: 22px;
padding-left: 10px;
.type{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a69e9f;
line-height: 18px;
white-space: nowrap;
}
}
}
.subTitle{
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 22px;
padding-left: 10px;
display: inline-block;
width: 120px;
}
.boxTop{
display: flex;
justify-content: space-between;
.subTitle{
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 22px;
padding-left: 10px;
display: inline-block;
width: 120px;
}
}
.thirdBox{
display: flex;
justify-content: space-between;
margin-bottom: 8px;
.thirdTitle{
font-size: 12px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 22px;
padding-left: 30px;
display: inline-block;
width: 130px;
}
.boxTop{
display: flex;
justify-content: space-between;
.thirdTitle{
font-size: 12px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 22px;
padding-left: 30px;
display: inline-block;
width: 130px;
}
.amount{
display: inline-block;
text-align: right;
.addBox{
display: flex;
align-items: center;
justify-content: flex-end;
.addIcon {
width: 16px;
height: 16px;
margin-right: 2px;
}
.type{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a69e9f;
line-height: 18px;
white-space: nowrap;
}
}
.value{
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
color: #160002;
line-height: 22px;
padding-left: 10px;
.type{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a69e9f;
line-height: 18px;
white-space: nowrap;
}
}
}
}
.valueBox{
display: inline-block;
text-align: right;
.addBox{
display: flex;
align-items: center;
justify-content: flex-end;
.addIcon {
width: 16px;
height: 16px;
margin-right: 2px;
}
.type{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a69e9f;
line-height: 18px;
white-space: nowrap;
}
}
.value{
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
color: #160002;
line-height: 22px;
padding-left: 10px;
.type{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a69e9f;
line-height: 18px;
white-space: nowrap;
}
}
}
.top{
display: flex;
align-items: center;
.thirdTitle{
font-size: 12px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 22px;
padding-left: 30px;
}
.right{
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
.comparePlan{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a69e9f;
white-space: nowrap;
}
.box2{
display: flex;
align-items: center;
.text{
font-size: 14px;
font-family: DINAlternate-Bold, DINAlternate;
color: #150002;
font-weight: bold;
line-height: 40rpx;
}
.addIcon {
width: 16px;
height: 16px;
margin-right: 2px;
}
}
}
}
.progressPlan{
width: calc(100% - 30px);
box-sizing: border-box;
margin-left: 30px;
height: 8px;
border-radius: 5px;
background: #fff;
margin-top: 8px;
position: relative;
overflow: hidden;
.trans{
height: 8px;
position: absolute;
left: 0;top: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_orange.png")no-repeat 100% 100%;
}
.transYear{
height: 8px;
position: absolute;
left: 0;top: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_blue.png")no-repeat 100% 100%;
}
}
}
}
}
}
}
.monthList{
width: 100%;
box-sizing: border-box;
padding: 12px;
background: #F5F5F5;
margin-bottom: 12px;
border-radius: 8px;
.top{
display: flex;
align-items: center;
justify-content: space-between;
.left{
display: flex;
align-items: center;
.icon{
width: 20px;
height: 20px;
margin-right: 8px;
}
.title{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a69e9f;
line-height: 18px;
.name{
color: #150002;
font-size: 18px;
}
}
.value{
font-size: 14px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #FF6D40;
line-height: 16px;
margin-left: 4px;
}
}
.right{
display: flex;
align-items: center;
.comparePlan{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a69e9f;
line-height: 36rpx;
white-space: nowrap;
}
.box2{
display: flex;
align-items: center;
.text{
font-size: 14px;
font-family: DINAlternate-Bold, DINAlternate;
color: #150002;
font-weight: bold;
line-height: 40rpx;
}
.addIcon {
width: 16px;
height: 16px;
margin-right: 2px;
}
}
}
}
.progress{
width: 100%;
height: 8px;
background: #fff;
border-radius: 6px;
margin: 8px 0 16px;
position: relative;
overflow: hidden;
.have{
position: absolute;
height: 100%;
border-radius: 6px;
top: 0;left: 0;
background:#778CFD;
}
}
.bottom {
display: flex;
justify-content: space-between;
margin-top: 16px;
.success {
width: calc(50% - 4px);
display: flex;
align-items: center;
.text{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a69e9f;
line-height: 20px;
}
.money {
margin-left: 8px;
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #a69e9f;
line-height: 20px;
}
}
}
}
}
</style>