640 lines
20 KiB
Vue
640 lines
20 KiB
Vue
<template>
|
|
<view class="main">
|
|
<view class="header">
|
|
<view class="top" :style="{height:(menu.bottom + 6)+'px'}">
|
|
<image :style="{top:(menu.top + ((menu.height - 24)/2))+'px'}" @click="handleBack" class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"></image>
|
|
</view>
|
|
<view class="message">
|
|
<view class="left">
|
|
<p class="pageTitle">片区月度计划</p>
|
|
<div class="picker">
|
|
<div class="selectService" @click="handleShowPopup">
|
|
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/plan/fixed.svg"></image>
|
|
<view class="select">
|
|
<view class="name">{{selectAreaName}}</view>
|
|
<p class="area">片区</p>
|
|
<div style="width: 24px;height: 12px"></div>
|
|
<image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/plan/orangeArrow.svg"></image>
|
|
</view>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
<view class="right">
|
|
<image class="month" :src="monthImgList[selectMonth - 1]"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="serviceList">
|
|
<view class="tabs">
|
|
<view :class="selectTab===item.value?'tabItem selectItem':'tabItem'" v-for="(item,index) in tabList" :key="index" @click="changeTab(item.value)">{{item.label}}</view>
|
|
</view>
|
|
<view class="list">
|
|
<scroll-view v-if="serviceDetailShowList.length>0" scroll-y="true" style="width: 100%;height: 100%">
|
|
<view class="listItem" v-for="(item,index) in serviceDetailShowList" :key="index" @click="goPage(item)">
|
|
<view>
|
|
<view class="top">
|
|
<view class="left">
|
|
<p class="title">{{item.Serverpart_Name}}</p>
|
|
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/plan/orangeArrow.svg"></image>
|
|
</view>
|
|
<view class="right">
|
|
<image class="imgType" src="https://eshangtech.com/ShopICO/ahyd-BID/plan/store.svg"></image>
|
|
<image class="imgType" src="https://eshangtech.com/ShopICO/ahyd-BID/plan/luggage.svg"></image>
|
|
<image class="imgType" src="https://eshangtech.com/ShopICO/ahyd-BID/plan/food.svg"></image>
|
|
</view>
|
|
</view>
|
|
<view class="detail">
|
|
<view class="left">
|
|
<p class="money">{{item.Revenue_Amount}}</p>
|
|
<span class="monthSuccess">本月已完成<span class="unit">/元</span></span>
|
|
</view>
|
|
<view class="right">
|
|
<p class="add" :style="{color:item.Growth_Rate>0?'#E83944':'#049E77'}">{{item.Growth_Rate>0?'+':''}}{{item.Growth_Rate}}%</p>
|
|
<span class="text">比计划</span>
|
|
</view>
|
|
</view>
|
|
<view class="progress">
|
|
<view class="have" :style="{width:item.Budget_Degree + '%'}"></view>
|
|
</view>
|
|
<view class="other">
|
|
<span class="success">计划完成<span class="unit">/元</span></span>
|
|
<span class="money">{{item.Budget_Amount}}</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="noData" v-else>
|
|
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/noData.svg"></image>
|
|
<text>暂无数据</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<uniPopup type="bottom" :round="true" :show="showPop" @hidePopup="hidePopup">
|
|
<view class="popup" :style="{height:selectTab!==2?'60vh':'78vh'}">
|
|
<view class="top">
|
|
<text class="popupTitle">选择片区</text>
|
|
<image @click="hidePopup" class="close" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/close.svg"></image>
|
|
</view>
|
|
<view class="areaList">
|
|
<view @click="handleChangeArea(item)" :class="selectAreaValue===item.value?'selectItem item':'item'" v-for="(item,index) in areaList" :key="index">{{item.label}}<text class="unit">片区</text></view>
|
|
</view>
|
|
</view>
|
|
</uniPopup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import request from '@/util/index.js'
|
|
import uniPopup from '@/components/uni-popup'
|
|
import Store from "../../store/store";
|
|
export default {
|
|
components:{
|
|
uniPopup
|
|
},
|
|
data(){
|
|
return{
|
|
menu:{},
|
|
monthImgList:[
|
|
"https://eshangtech.com/ShopICO/ahyd-BID/plan/month1.svg",
|
|
"https://eshangtech.com/ShopICO/ahyd-BID/plan/month2.svg",
|
|
"https://eshangtech.com/ShopICO/ahyd-BID/plan/month3.svg",
|
|
"https://eshangtech.com/ShopICO/ahyd-BID/plan/month4.svg",
|
|
"https://eshangtech.com/ShopICO/ahyd-BID/plan/month5.svg",
|
|
"https://eshangtech.com/ShopICO/ahyd-BID/plan/month6.svg",
|
|
"https://eshangtech.com/ShopICO/ahyd-BID/plan/month7.svg",
|
|
"https://eshangtech.com/ShopICO/ahyd-BID/plan/month8.svg",
|
|
"https://eshangtech.com/ShopICO/ahyd-BID/plan/month9.svg",
|
|
"https://eshangtech.com/ShopICO/ahyd-BID/plan/month10.svg",
|
|
"https://eshangtech.com/ShopICO/ahyd-BID/plan/month11.svg",
|
|
"https://eshangtech.com/ShopICO/ahyd-BID/plan/month12.svg",
|
|
],// 月份图片数组
|
|
selectMonth:'',
|
|
searchTime:'',// 搜索的时间
|
|
lastDay:'',// 首页时间
|
|
tabList:[{label:'全部服务区',value:1},{label:'高于预期',value:2},{label:'低于预期',value:3}],
|
|
selectTab:1,// 选中的tab
|
|
serviceDetailList:[{},{},{},{},{},{}],
|
|
showPop:false,// 是否显示popup
|
|
selectAreaValue:'',// 选择的片区value
|
|
selectAreaName:'',// 选择的片区名字
|
|
areaList:[],// 片区选择列表
|
|
serviceDetailShowList:[],// 显示在页面上的列表
|
|
}
|
|
},
|
|
onLoad(query){
|
|
// query 里面有片区id 和 searchTime
|
|
console.log('query',query)
|
|
// 获取手机参数对页面进行适配
|
|
this.menu = uni.getMenuButtonBoundingClientRect()
|
|
// 先拿到首页的时间 作为调用接口的统一时间 存的lastDay存当前月份的具体日期切换回本月的日期判断有用
|
|
// 如果有传入的时间 优先使用传入时间 反之用首页的时间
|
|
if (query.search){
|
|
this.searchTime = query.search
|
|
}else{
|
|
this.searchTime = uni.getStorageSync('lastDay')
|
|
}
|
|
this.lastDay = uni.getStorageSync('lastDay')
|
|
const date = new Date(this.searchTime)
|
|
let m = date.getMonth() + 1
|
|
// 设置初始时间
|
|
this.selectMonth = m
|
|
this.selectAreaValue = query.id
|
|
// 拿到片区列表
|
|
this.getAreaList()
|
|
// 获取片区下面的服务区详情
|
|
this.handleAreaMonthPlan()
|
|
},
|
|
methods:{
|
|
// tab选项卡的改变触发筛选数据
|
|
changeTab(value){
|
|
this.selectTab = value
|
|
if (value===1){
|
|
this.serviceDetailShowList = this.serviceDetailList
|
|
}else if (value===2){
|
|
this.serviceDetailShowList = this.serviceDetailList.filter(item=>item.Growth_Rate>0)
|
|
}else if (value===3){
|
|
this.serviceDetailShowList = this.serviceDetailList.filter(item=>item.Growth_Rate<0)
|
|
}
|
|
},
|
|
// 拿到列表数据
|
|
async handleAreaMonthPlan(){
|
|
uni.showLoading({title:'正在加载'})
|
|
const req = {
|
|
StatisticsDate:this.searchTime,
|
|
ProvinceCode:'340000',
|
|
StatisticsType:4,
|
|
SPRegionTypeID:this.selectAreaValue
|
|
}
|
|
const data = await request.$webGet('CommercialApi/Revenue/GetProvinceRevenueBudget',req)
|
|
this.serviceDetailList = data.Result_Data.RegionBudgetList
|
|
// 对数组中的实际营收额和计划营收额进行格式化处理
|
|
this.serviceDetailList.forEach(item=>{
|
|
for (let key in item){
|
|
for (let key in item){
|
|
if (key==='Budget_Amount' || key==='Revenue_Amount'){
|
|
item[key] = this.$util.fmoney(item[key])
|
|
}
|
|
}
|
|
}
|
|
})
|
|
// 因为会有筛选 所以要有一个全部的数组 和一个显示的数组
|
|
this.serviceDetailShowList = this.serviceDetailList
|
|
uni.hideLoading()
|
|
},
|
|
handleBack(){
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
},
|
|
// 是否显示弹出框
|
|
handleShowPopup(){
|
|
this.showPop = true
|
|
},
|
|
// 弹出框点击蒙层关闭
|
|
hidePopup(){
|
|
this.showPop = false
|
|
},
|
|
// 修改当前选中的片区 改变片区之后 重新调用拿到列表的数据
|
|
handleChangeArea(item){
|
|
// 选择的片区名称和片区id
|
|
this.selectAreaValue = item.value
|
|
this.selectAreaName = item.label
|
|
// 切换片区之后 选项卡变为第一项
|
|
this.handleAreaMonthPlan()
|
|
this.selectTab = 1
|
|
// 关闭弹出框方法
|
|
this.hidePopup()
|
|
},
|
|
// 片区列表
|
|
async getAreaList(){
|
|
uni.showLoading({
|
|
title: '正在加载...'
|
|
})
|
|
const total = await request.$webGet(`CommercialApi/BaseInfo/GetSPRegionList`,{Province_Code:Store.state.userData.ProvinceCode})
|
|
uni.hideLoading()
|
|
if (total.Result_Code===100){
|
|
let list = []
|
|
total.Result_Data.List.forEach(item=>{
|
|
list.push({label:item.name.split('片区')[0],value:item.value})
|
|
})
|
|
this.areaList = list
|
|
this.areaList.forEach(item=>{
|
|
if (item.value === this.selectAreaValue){
|
|
this.selectAreaValue = item.value
|
|
this.selectAreaName = item.label
|
|
}
|
|
})
|
|
}
|
|
},
|
|
// 点击跳转详情页
|
|
goPage(item){
|
|
this.$util.toNextRoute('navigateTo', '/pages/plan/servicePlanMonth?id='+item.Serverpart_ID+'&search='+this.searchTime+'&obj=' + JSON.stringify(item) +'&selectAreaValue='
|
|
+this.selectAreaValue)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '/static/public/font/stylesheet.css';
|
|
.main{
|
|
width: 100%;
|
|
height: 100vh;
|
|
.header{
|
|
width: 100%;
|
|
height: 222px;
|
|
background: linear-gradient(180deg, #FF6D40 0%, rgba(255,132,91,0.84) 44%, #FFEDBE 100%);;
|
|
.top{
|
|
width: 100%;
|
|
position: relative;
|
|
.img{
|
|
width: 24px;
|
|
height: 24px;
|
|
position: absolute;
|
|
left: 16px;
|
|
}
|
|
}
|
|
.message{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
.left{
|
|
.pageTitle{
|
|
font-family: Alimama ShuHeiTi;
|
|
color: #160002;
|
|
font-size: 28px;
|
|
line-height: 39px;
|
|
text-shadow: 0 4px 8px rgba(129,36,7,0.2);
|
|
background: linear-gradient(180deg, #ffffff 40%, #FFBEAA 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
margin: 12px 0 0 16px;
|
|
}
|
|
.picker{
|
|
margin: 20px 0 0 16px;
|
|
.selectService{
|
|
display: flex;
|
|
align-items: center;
|
|
.img{
|
|
width: 40px;
|
|
height: 40px;
|
|
z-index: 2;
|
|
}
|
|
.select{
|
|
height: 32px;
|
|
min-width: 110px;
|
|
background: #F8F8FA;
|
|
border-radius: 0 16px 16px 0;
|
|
transform: translateX(-20px);
|
|
box-sizing: border-box;
|
|
padding-left: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
.name{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
}
|
|
.area{
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
margin-left: 2px;
|
|
}
|
|
.rightArrow{
|
|
position: absolute;
|
|
right: 2px;
|
|
width: 24px;
|
|
height: 12px;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right{
|
|
height: 100%;
|
|
margin: 0 16px 0 0;
|
|
.month{
|
|
width: 110px;
|
|
height: 98px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.serviceList{
|
|
width: 100%;
|
|
height: calc(100vh - 212px);
|
|
background: #fff;
|
|
transform: translateY(-16px);
|
|
border-radius: 16px 16px 2px 2px;
|
|
box-sizing: border-box;
|
|
padding: 16px 16px 0 16px;
|
|
.tabs{
|
|
width: 100%;
|
|
height: 38px;
|
|
background: #F4F2F2;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
padding: 4px;
|
|
.tabItem{
|
|
width: calc((100vw - 16px) / 3);
|
|
text-align: center;
|
|
line-height: 30px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
}
|
|
.selectItem{
|
|
color: #FF6D40;
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
.list{
|
|
width: 100%;
|
|
height: calc(100% - 66px);
|
|
margin-top: 12px;
|
|
::-webkit-scrollbar {width: 0;height: 0;background-color: transparent;}
|
|
.listItem{
|
|
width: 100%;
|
|
background: linear-gradient(314deg, #FFF7E4 0%, #F5F2FF 32%, #FFFAFA 54%, #FFF6F3 70%, #FFE4D9 100%);
|
|
border-radius: 8px;
|
|
margin-bottom: 12px;
|
|
box-sizing: border-box;
|
|
padding: 16px;
|
|
.top{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.left{
|
|
display: flex;
|
|
align-items: center;
|
|
.title{
|
|
font-size: 18px;
|
|
font-family: Alimama ShuHeiTi;
|
|
color: #611A04;
|
|
line-height: 26px;
|
|
}
|
|
.icon{
|
|
width: 14px;
|
|
height: 14px;
|
|
margin-left: 7px;
|
|
}
|
|
}
|
|
.right{
|
|
display: flex;
|
|
align-items: center;
|
|
.imgType{
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-right: 8px;
|
|
}
|
|
.imgType:last-child{
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
.detail{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 16px;
|
|
.left{
|
|
.money{
|
|
font-size: 20px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #160002;
|
|
line-height: 24px;
|
|
}
|
|
.monthSuccess{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 20px;
|
|
.unit{
|
|
color: #A69E9F;
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
}
|
|
.right{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
.add{
|
|
font-size: 24px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #049E77;
|
|
line-height: 24px;
|
|
margin-bottom: 2px;
|
|
}
|
|
.text{
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #A69E9F;
|
|
line-height: 18px;
|
|
}
|
|
}
|
|
}
|
|
.progress{
|
|
width: 100%;
|
|
height: 10px;
|
|
border-radius: 5px;
|
|
margin-top: 18px;
|
|
background: #FBD9CD;
|
|
position: relative;
|
|
overflow: hidden;
|
|
.have{
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;top: 0;
|
|
background: #FF6D40;
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
.other{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 4px;
|
|
.success{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 20px;
|
|
.unit{
|
|
color: #A69E9F;
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
.money{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
}
|
|
.noData{
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.img{
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.popup{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 16px;
|
|
.top{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.popupTitle{
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 22px;
|
|
}
|
|
.close{
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
.areaList{
|
|
width: 100%;
|
|
height: calc(60vh - 70px);
|
|
margin-top: 12px;
|
|
overflow-y: scroll;
|
|
.item{
|
|
width: 100%;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
padding:9px 12px;
|
|
box-sizing: border-box;
|
|
.unit{
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 18px;
|
|
}
|
|
}
|
|
.selectItem{
|
|
background: RGBA(243, 235, 255, 0.5);
|
|
}
|
|
}
|
|
.serviceList{
|
|
.tab{
|
|
width: 100%;
|
|
height: 38px;
|
|
background: #F3F1F5;
|
|
border-radius: 4px;
|
|
margin-top: 16px;
|
|
box-sizing: border-box;
|
|
padding: 4px;
|
|
.tabItem{
|
|
display: inline-block;
|
|
width: 50%;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 30px;
|
|
}
|
|
.selectTabItem{
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
.list{
|
|
margin-top: 12px;
|
|
height: calc(78vh - 130px);
|
|
overflow-y: scroll;
|
|
.item{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.person{
|
|
margin-top: 12px;
|
|
text-align: left;
|
|
.value{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 20px;
|
|
margin-bottom: 2px;
|
|
}
|
|
.label{
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 18px;
|
|
}
|
|
.icon{
|
|
margin-bottom:-2px;
|
|
width: 16px;
|
|
height: 19px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.meetList{
|
|
margin-top: 16px;
|
|
height: calc(60vh - 80px);
|
|
overflow-y: scroll;
|
|
.message{
|
|
display: flex;
|
|
align-items: flex-start;
|
|
.icon{
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-top: 2px;
|
|
}
|
|
.value{
|
|
display: inline-block;
|
|
text-align: left;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 20px;
|
|
margin-left: 8px;
|
|
width: 90%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|