488 lines
20 KiB
Vue
488 lines
20 KiB
Vue
<template>
|
|
<div class="main">
|
|
<div class="thisMonth" v-if="type==='month'">
|
|
<div class="titleTop">
|
|
<p class="title">本月自营计划</p>
|
|
<div class="question" @click="handleShowNotice">
|
|
<image src="/static/images/index/noticeQuestion.svg"></image>
|
|
</div>
|
|
<div v-if="showNotice" class="titleTopNotice">这里是注解文字,这里是注解文字,这里是注解文字,这里是注解文字,这里是注解文字</div>
|
|
<div v-if="showNotice" class="meng" @click="handleNoShowNotice"></div>
|
|
</div>
|
|
<view class="box">
|
|
<view class="top">
|
|
<view class="big">
|
|
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/thisMonth.svg"></image>
|
|
</view>
|
|
<view class="text">
|
|
<view class="textTop">
|
|
<view class="left">
|
|
<p class="number">{{plan.percentageMonth?plan.percentageMonth + '%':'-'}}</p>
|
|
<p v-if="plan.percentageMonth>=100" class="desc"><image class="success" src="/static/images/index/successMonth.svg"></image></p>
|
|
</view>
|
|
<view class="right">
|
|
<text class="comparePlan">比计划： </text>
|
|
<view class="box2">
|
|
<image class="addIcon" :src="Number(monthAdd)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
|
|
<p class="text">{{monthAdd?monthAdd + '%':'-'}}</p>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<div class="progressPlan">
|
|
<div class="trans" :style="{width:plan.percentageMonth + '%'}"></div>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
<view class="bottom">
|
|
<view class="success" style="margin-right: 39px">
|
|
<p class="text">本月已完成<text class="unit">/元</text></p>
|
|
<p class="money">{{plan.RevenueMonth_Amount?plan.RevenueMonth_Amount:'-'}}</p>
|
|
</view>
|
|
<view class="success">
|
|
<p class="text">本月计划<text class="unit">/元</text></p>
|
|
<p class="money">{{plan.BudgetMonth_Amount?plan.BudgetMonth_Amount:'-'}}</p>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</div>
|
|
<div class="thisYear" style="margin-top: 0px" v-if="type==='year'">
|
|
<div class="titleTop">
|
|
<p class="title">年度自营计划</p>
|
|
<div class="question" @click="handleShowNoticeYear">
|
|
<image src="/static/images/index/noticeQuestion.svg"></image>
|
|
</div>
|
|
<div v-if="showNoticeYear" class="titleTopNotice">这里是注解文字,这里是注解文字,这里是注解文字,这里是注解文字,这里是注解文字</div>
|
|
<div v-if="showNoticeYear" class="meng" @click="handleNoShowNoticeYear"></div>
|
|
</div>
|
|
<view class="box">
|
|
<view class="top">
|
|
<view class="big">
|
|
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/planYear.svg"></image>
|
|
</view>
|
|
<view class="text">
|
|
<view class="textTop">
|
|
<view class="left">
|
|
<p class="number">{{plan.percentageYear?plan.percentageYear + '%':'-'}}</p>
|
|
<p v-if="plan.percentageYear>=100" class="desc" style="color: #4E68FF"><image class="success" src="/static/images/index/yearSuccess.svg"></image></p>
|
|
</view>
|
|
<view class="right">
|
|
<text class="comparePlan">比计划： </text>
|
|
<div class="box2">
|
|
<image class="addIcon" :src="Number(yearAdd)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
|
|
<p class="text">{{yearAdd?yearAdd + '%':''}}</p>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
<div class="progressPlan">
|
|
<div class="transYear" :style="{width:plan.percentageYear + '%'}"></div>
|
|
<!-- <image class="img" :style="{width: plan.percentageYear + '%'}" src="https://eshangtech.com/ShopICO/ahyd-BID/index/progress_blue.png"></image>-->
|
|
<!-- <div class=pro :style="{width:(100 - plan.percentageYear)+ '%'}"></div>-->
|
|
</div>
|
|
</view>
|
|
</view>
|
|
<view class="bottom">
|
|
<view class="success" style="margin-right: 39px">
|
|
<p class="text">年度已完成<text class="unit">/元</text></p>
|
|
<p class="money">{{plan.RevenueYear_Amount?plan.RevenueYear_Amount:'-'}}</p>
|
|
</view>
|
|
<view class="success">
|
|
<p class="text">年度计划<text class="unit">/元</text></p>
|
|
<p class="money">{{plan.BudgetYear_Amount?plan.BudgetYear_Amount:'-'}}</p>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</div>
|
|
|
|
<div class="list" v-for="(item,index) in dataList" :key="index">
|
|
<div class="top">
|
|
<div class="left">
|
|
<image class="icon" :src="type==='month'?'/static/images/commercial/planMonth.svg':'/static/images/commercial/planYear.svg'"></image>
|
|
<p class="title">{{item.title}}</p>
|
|
</div>
|
|
<div class="value" :style="{color:type==='year'?'#4962FF':''}">{{item.value}}%</div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="have" :style="{width:item.value + '%',background: type==='month'?'#FF8E5B':'#778CFD'}"></div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="success">
|
|
<p>本月已完成<text>/元</text></p>
|
|
<p class="money">{{item.monthSuccess}}</p>
|
|
</div>
|
|
<div class="success">
|
|
<p>本月计划<text>/元</text></p>
|
|
<p class="money">{{item.planMonth}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import request from '@/util/index.js'
|
|
export default {
|
|
name: "planMonth",
|
|
data(){
|
|
return {
|
|
plan:{},
|
|
monthAdd:'',
|
|
yearAdd:'',
|
|
lastDay:'',
|
|
type:'month',
|
|
showNotice:false,
|
|
showNoticeYear:false,
|
|
dataList:[{title:'合肥片区',value:84.03,monthSuccess:'36,830,433.12',planMonth:'65,768,321.76'},{title:'安庆片区',value:57.14,monthSuccess:'36,830,433.12',planMonth:'65,768,321.76'}]
|
|
}
|
|
},
|
|
onLoad(option){
|
|
this.lastDay = option.lastDay
|
|
this.type = option.type
|
|
if (this.type==='month'){
|
|
uni.setNavigationBarTitle({
|
|
title: '本月自营计划',
|
|
})
|
|
}else if(this.type==='year'){
|
|
uni.setNavigationBarTitle({
|
|
title: '年度自营计划',
|
|
})
|
|
}
|
|
|
|
this.monthYearPlan()
|
|
|
|
},
|
|
methods:{
|
|
monthYearPlan(){
|
|
const monthDate= {
|
|
Province_Code:'340000',
|
|
Statistics_Date:this.lastDay
|
|
}
|
|
request.$webGet('CommercialApi/Revenue/GetRevenueBudget',monthDate).then(res=>{
|
|
// 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
|
|
this.plan = res.Result_Data
|
|
this.plan.percentageMonth = (res.Result_Data.RevenueMonth_Amount / res.Result_Data.BudgetMonth_Amount*100).toFixed(2)
|
|
this.plan.percentageYear = (res.Result_Data.RevenueYear_Amount / res.Result_Data.BudgetYear_Amount*100).toFixed(2)
|
|
let date = new Date(this.lastDay)
|
|
let nowDay = date.getDate()
|
|
let day = this.$util.getThisMonthDay(this.lastDay)
|
|
//一天应该的增长率
|
|
let oneDay = 100/day
|
|
// 到了当天的应该有的百分比
|
|
let thisDayShould= oneDay*nowDay
|
|
this.monthAdd = (this.plan.percentageMonth - thisDayShould).toFixed(2)
|
|
this.yearAdd = (((res.Result_Data.RevenueYear_Amount - res.Result_Data.RevenueYear_PlanAmount)/res.Result_Data.BudgetYear_Amount)*100).toFixed(2)
|
|
//处理数据
|
|
this.plan.RevenueMonth_Amount = this.$util.fmoney(res.Result_Data.RevenueMonth_Amount)
|
|
this.plan.BudgetMonth_Amount = this.$util.fmoney(res.Result_Data.BudgetMonth_Amount)
|
|
this.plan.RevenueYear_Amount = this.$util.fmoney(res.Result_Data.RevenueYear_Amount)
|
|
this.plan.BudgetYear_Amount = this.$util.fmoney(res.Result_Data.BudgetYear_Amount)
|
|
})
|
|
},
|
|
handleShowNotice(){
|
|
this.showNotice = true
|
|
},
|
|
handleNoShowNotice(){
|
|
this.showNotice = false
|
|
},
|
|
handleShowNoticeYear(){
|
|
this.showNoticeYear = true
|
|
},
|
|
handleNoShowNoticeYear(){
|
|
this.showNoticeYear = false
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.main{
|
|
padding: 0 16px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
.thisMonth,.thisYear{
|
|
width: 100%;
|
|
margin-top: 12px;
|
|
margin-bottom: 12px;
|
|
.titleTop{
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
.title {
|
|
font-size: 32rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 44rpx;
|
|
}
|
|
.question{
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-left: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.titleTopNotice{
|
|
position: absolute;
|
|
padding: 12px;
|
|
left:35%;
|
|
top: 0;
|
|
width: 50vw;
|
|
background: #FFFFFF;
|
|
box-shadow: 0 10px 10px 0 rgba(22,0,2,0.1);
|
|
z-index: 9999;
|
|
}
|
|
.meng{
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: fixed;
|
|
top: 0;left: 0;
|
|
}
|
|
}
|
|
.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{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 12px;
|
|
background: #F5F5F5;
|
|
margin-bottom: 12px;
|
|
.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: 14px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #150002;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
.value{
|
|
font-size: 14px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #FF6D40;
|
|
line-height: 16px;
|
|
}
|
|
}
|
|
.progress{
|
|
width: 100%;
|
|
height: 8px;
|
|
background: #fff;
|
|
border-radius: 6px;
|
|
margin: 8px 0 16px;
|
|
position: relative;
|
|
.have{
|
|
position: absolute;
|
|
height: 100%;
|
|
border-radius: 6px;
|
|
top: 0;left: 0;
|
|
}
|
|
}
|
|
.bottom {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
margin-top: 16px;
|
|
.success {
|
|
width: 50%;
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |