669 lines
25 KiB
Vue
669 lines
25 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="https://eshangtech.com/ShopICO/ahyd-BID/index/noticeQuestion.svg"></image>
|
||
</div>
|
||
<div v-if="showNotice" class="titleTopNotice">{{ monthNoticeText }}</div>
|
||
<div v-if="showNotice" class="meng" @click="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">{{ info.Budget_Degree ? info.Budget_Degree + '%' : '-' }}</p>
|
||
<p v-if="info.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(info.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">{{ info.Growth_Rate ? Math.abs(info.Growth_Rate) + '%' : '-' }}</p>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<div class="progressPlan">
|
||
<div class="trans" :style="{ width: info.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">{{ info.Revenue_Amount ? info.Revenue_Amount : '-' }}</p>
|
||
</view>
|
||
<view class="success">
|
||
<p class="text">本月计划<text class="unit">/元</text></p>
|
||
<p class="money">{{ info.Budget_Amount ? info.Budget_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="https://eshangtech.com/ShopICO/ahyd-BID/index/noticeQuestion.svg"></image>
|
||
</div>
|
||
<div v-if="showNoticeYear" class="titleTopNotice">{{ yearNoticeText }}</div>
|
||
<div v-if="showNoticeYear" class="meng" @click="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">{{ info.Budget_Degree ? info.Budget_Degree + '%' : '-' }}</p>
|
||
<p v-if="info.Budget_Degree >= 100" class="desc" style="color: #4E68FF">
|
||
<image class="success"
|
||
src="https://eshangtech.com/ShopICO/ahyd-BID/index/yearSuccess.svg"></image>
|
||
</p>
|
||
</view>
|
||
<view class="right">
|
||
<text class="comparePlan">比计划： </text>
|
||
<div class="box2">
|
||
<image class="addIcon"
|
||
:src="Number(info.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">{{ info.Growth_Rate ? Math.abs(info.Growth_Rate) + '%' : '' }}</p>
|
||
</div>
|
||
</view>
|
||
</view>
|
||
<div class="progressPlan">
|
||
<div class="transYear" :style="{ width: info.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">{{ info.Revenue_Amount ? info.Revenue_Amount : '-' }}</p>
|
||
</view>
|
||
<view class="success">
|
||
<p class="text">年度计划<text class="unit">/元</text></p>
|
||
<p class="money">{{ info.Budget_Amount ? info.Budget_Amount : '-' }}</p>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</div>
|
||
|
||
<div class="listBox">
|
||
<div class="list" v-for="(item, index) in dataList" :key="index" @click="handleGoDetail(item)">
|
||
<div class="top">
|
||
<div class="left">
|
||
<p class="title" v-if="type === 'month'"><text class="name">{{ item.name }}</text>{{ item.unit
|
||
}}</p>
|
||
<p class="title" v-if="type === 'year'"><text class="name">{{ item.Statistics_Month }}</text>月
|
||
</p>
|
||
<div class="value" :style="{ color: type === 'year' ? '#4962FF' : '' }">{{ 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 + '%', background: type === 'month' ? '#FF8E5B' : '#778CFD' }">
|
||
</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="success">
|
||
<text class="text">已完成:</text>
|
||
<text class="money">{{ item.Revenue_Amount }}</text>
|
||
</div>
|
||
<div class="success">
|
||
<text class="text">计划: </text>
|
||
<text class="money">{{ item.Budget_Amount }}</text>
|
||
</div>
|
||
</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: [],
|
||
info: {
|
||
Budget_Degree: 0,
|
||
Growth_Rate: 0,
|
||
Budget_Amount: '',
|
||
Revenue_Amount: ''
|
||
},
|
||
monthNoticeText: '',
|
||
yearNoticeText: ''
|
||
}
|
||
},
|
||
|
||
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: '年度自营计划',
|
||
})
|
||
}
|
||
uni.showLoading({
|
||
title: '正在加载...'
|
||
})
|
||
// 方法传入type用于结果的判断
|
||
this.getPlanListData(option.type)
|
||
// 问号显示的内容
|
||
this.handleNoticeMonth()
|
||
this.handleNoticeYear()
|
||
},
|
||
onUnload() {
|
||
this.$util.addUserBehavior()
|
||
},
|
||
methods: {
|
||
async handleNoticeMonth() {
|
||
let date = new Date(this.lastDay)
|
||
let y = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
if (m < 10) {
|
||
m = '0' + m
|
||
}
|
||
//本月的
|
||
let req = {
|
||
SearchParameter: {
|
||
STATISTICS_DATE: `${y}-${m}`,
|
||
ANALYSISINS_TYPE: '1011',
|
||
ANALYSISINS_FORMAT: '3000'
|
||
},
|
||
PageIndex: 1,
|
||
PageSize: 10
|
||
}
|
||
const data = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList', req)
|
||
this.monthNoticeText = data.Result_Data.List[0].ANALYSIS_CONTENT
|
||
},
|
||
async handleNoticeYear() {
|
||
let date = new Date(this.lastDay)
|
||
let y = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
if (m < 10) {
|
||
m = '0' + m
|
||
}
|
||
//本年
|
||
let reqYear = {
|
||
SearchParameter: {
|
||
STATISTICS_DATE: `${y}`,
|
||
ANALYSISINS_TYPE: '1012',
|
||
ANALYSISINS_FORMAT: '3000'
|
||
},
|
||
PageIndex: 1,
|
||
PageSize: 10
|
||
}
|
||
const totalData = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList', reqYear)
|
||
this.yearNoticeText = totalData.Result_Data.List[0].ANALYSIS_CONTENT
|
||
},
|
||
//跳转到详情页
|
||
handleGoDetail(item) {
|
||
if (this.type === 'year') {
|
||
uni.navigateTo({
|
||
url: `/pages/commercialBI/planDetail?type=${this.type}&month=${item.Statistics_Month}`
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: `/pages/commercialBI/planDetail?type=${this.type}&item=${JSON.stringify(item)}&id=${item.Serverpart_ID}`
|
||
})
|
||
}
|
||
},
|
||
async getPlanListData(type) {
|
||
let req = {
|
||
StatisticsDate: this.lastDay,
|
||
ProvinceCode: '340000',
|
||
StatisticsType: type === 'month' ? 1 : type === 'year' ? 2 : ''
|
||
}
|
||
const data = await request.$webGet('CommercialApi/Revenue/GetProvinceRevenueBudget', req)
|
||
uni.hideLoading()
|
||
data.Result_Data.RegionBudgetList.forEach(item => {
|
||
if (type === 'month') {
|
||
let num = item.Serverpart_Name.indexOf('片区')
|
||
if (num !== -1) {
|
||
item.name = item.Serverpart_Name.slice(0, num)
|
||
item.unit = item.Serverpart_Name.slice(num, 100)
|
||
} else {
|
||
item.name = item.Serverpart_Name
|
||
}
|
||
}
|
||
item.Revenue_Amount = this.$util.fmoney(item.Revenue_Amount)
|
||
item.Budget_Amount = this.$util.fmoney(item.Budget_Amount)
|
||
})
|
||
this.info = data.Result_Data
|
||
this.info.Budget_Amount = this.$util.fmoney(this.info.Budget_Amount)
|
||
this.info.Revenue_Amount = this.$util.fmoney(this.info.Revenue_Amount)
|
||
this.dataList = data.Result_Data.RegionBudgetList
|
||
},
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.listBox {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding-bottom: calc(8px + env(safe-area-inset-bottom));
|
||
|
||
.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;
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.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>
|