ahyd_DIB/pages/commercialBI/areaPlanMonth.vue
2023-05-23 20:26:52 +08:00

396 lines
14 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(1)">-->
<!-- <image class="img" src="/static/images/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="/static/images/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 scroll-y="true" style="width: 100%;height: 100%">-->
<!-- <view class="listItem" v-for="(item,index) in serviceDetailList" :key="index">-->
<!-- <view class="top">-->
<!-- <view class="left">-->
<!-- <p class="title">新桥服务区</p>-->
<!-- <image class="icon" src="/static/images/plan/orangeArrow.svg"></image>-->
<!-- </view>-->
<!-- <view class="right">-->
<!-- <image class="imgType" src="/static/images/plan/store.svg"></image>-->
<!-- <image class="imgType" src="/static/images/plan/luggage.svg"></image>-->
<!-- <image class="imgType" src="/static/images/plan/food.svg"></image>-->
<!-- </view>-->
<!-- </view>-->
<!-- <view class="detail">-->
<!-- <view class="left">-->
<!-- <p class="money">5,321,433,546</p>-->
<!-- <span class="monthSuccess">本月已完成<span class="unit">/</span></span>-->
<!-- </view>-->
<!-- <view class="right">-->
<!-- <p class="add">-20.24%</p>-->
<!-- <span class="text">比计划</span>-->
<!-- </view>-->
<!-- </view>-->
<!-- <view class="progress">-->
<!-- <view class="have" :style="{width:78 + '%'}"></view>-->
<!-- </view>-->
<!-- <view class="other">-->
<!-- <span class="success">计划完成<span class="unit">/</span></span>-->
<!-- <span class="money">8,000,000,000</span>-->
<!-- </view>-->
<!-- </view>-->
<!-- </scroll-view>-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<!--</template>-->
<!--<script>-->
<!--import request from '@/util/index.js'-->
<!--export default {-->
<!-- data(){-->
<!-- return{-->
<!-- menu:{},-->
<!-- monthImgList:[-->
<!-- "/static/images/plan/month1.svg",-->
<!-- "/static/images/plan/month2.svg",-->
<!-- "/static/images/plan/month3.svg",-->
<!-- "/static/images/plan/month4.svg",-->
<!-- "/static/images/plan/month5.svg",-->
<!-- "/static/images/plan/month6.svg",-->
<!-- "/static/images/plan/month7.svg",-->
<!-- "/static/images/plan/month8.svg",-->
<!-- "/static/images/plan/month9.svg",-->
<!-- "/static/images/plan/month10.svg",-->
<!-- "/static/images/plan/month11.svg",-->
<!-- "/static/images/plan/month12.svg",-->
<!-- ],// 月份图片数组-->
<!-- selectMonth:'',-->
<!-- searchTime:'',// 搜索的时间-->
<!-- lastDay:'',// 首页时间-->
<!-- tabList:[{label:'全部服务区',value:1},{label:'高于预期',value:2},{label:'低于预期',value:3}],-->
<!-- selectTab:1,// 选中的tab-->
<!-- serviceDetailList:[{},{},{},{},{},{}],-->
<!-- id:'',// 片区编码-->
<!-- }-->
<!-- },-->
<!-- onLoad(query){-->
<!-- 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.id = query.id-->
<!-- this.handleAreaMonthPlan()-->
<!-- },-->
<!-- methods:{-->
<!-- changeTab(value){-->
<!-- this.selectTab = value-->
<!-- },-->
<!-- async handleAreaMonthPlan(){-->
<!-- const req = {-->
<!-- StatisticsDate:this.searchTime,-->
<!-- ProvinceCode:'340000',-->
<!-- StatisticsType:4,-->
<!-- SPRegionTypeID:this.id-->
<!-- }-->
<!-- const data = await request.$webGet('CommercialApi/Revenue/GetProvinceRevenueBudget',req)-->
<!-- console.log('data',data)-->
<!-- },-->
<!-- handleBack(){-->
<!-- uni.navigateBack({-->
<!-- delta: 1-->
<!-- });-->
<!-- }-->
<!-- }-->
<!--}-->
<!--</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;-->
<!-- .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;-->
<!-- }-->
<!-- }-->
<!-- }-->
<!-- }-->
<!-- }-->
<!--}-->
<!--</style>-->