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

601 lines
26 KiB
Vue

<!--<template>-->
<!-- <view class="main">-->
<!-- <view class="heard">-->
<!-- <image class="headerBg" src="/static/images/plan/blueBack.png"></image>-->
<!-- <view>-->
<!-- <image @click="handleBack" class="allowLeft" :style="{top: menu.top +((menu.height - 24) / 2) + 'px'}" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"/>-->
<!-- </view>-->
<!-- <view class="content">-->
<!-- <view class="block"></view>-->
<!-- <p class="title">年度经营计划</p>-->
<!-- &lt;!&ndash; 选择月份 &ndash;&gt;-->
<!-- <view class="monthTabs">-->
<!-- <scroll-view class="big" :show-scrollbar="false" scroll-with-animation scroll-x="true" enable-flex :scrollIntoView="selectMonthId" >-->
<!-- <div :id="'item'+item.value" :class="selectMonth===item.value?'monthItem selectItem':'monthItem'" v-for="(item,index) in monthList" :key="index" @click="handleSelectMonth(item.value)">{{item.label}}</div>-->
<!-- </scroll-view>-->
<!-- </view>-->
<!-- <view class="monthDetailList">-->
<!-- <swiper class="swiper" previous-margin="40rpx" next-margin="40rpx" @change="handleDetailScroll" :current="selectDetail">-->
<!-- <block v-for="(item,index) in swiperList" :key="index">-->
<!-- <swiper-item class="swiper-item" :item-id="index" :data-item-id="index" bindtap='clickChange'>-->
<!-- <view class="box">-->
<!-- <view :class="selectDetail===index?'detail':'detail noShow'">-->
<!-- <view class="item" v-if="selectDetail===index">-->
<!-- <view class="itemTop">-->
<!-- <view class="left">-->
<!-- <image class="logo" src="/static/images/plan/monthLogo.svg"></image>-->
<!-- <view class="detailContent">-->
<!-- <view class="top">-->
<!-- <span class="money">{{detail.Revenue_Amount || '-'}}</span>-->
<!-- <image v-if="detail.Budget_Degree>100" class="icon" src="/static/images/index/yearSuccess.svg"></image>-->
<!-- </view>-->
<!-- <p class="text">本月已完成<text class="unit">/</text></p>-->
<!-- </view>-->
<!-- </view>-->
<!-- <view class="right">-->
<!-- <p class="add" :style="{color:detail.Growth_Rate>0?'#E83944':'#049E77'}">{{detail.Growth_Rate>0?'+':'-'}}{{detail.Growth_Rate || '-'}}%</p>-->
<!-- <text class="compare">比计划</text>-->
<!-- </view>-->
<!-- </view>-->
<!-- <view class="itemBottom" :style="{marginTop: selectDetail===index?'24px':'4px'}">-->
<!-- <view class="progress">-->
<!-- <view class="have" :style="{width: detail.Budget_Degree + '%'}"></view>-->
<!-- </view>-->
<!-- <view class="text">-->
<!-- <span class="success">计划完成<span class="unit">/</span></span>-->
<!-- <span class="target">{{ detail.Budget_Amount || '-' }}</span>-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<!-- <view class="item" v-if="selectDetail!==index">-->
<!-- <view class="itemTop">-->
<!-- <view class="left">-->
<!-- <image class="logo" src="/static/images/plan/monthLogo.svg"></image>-->
<!-- <view class="detailContent">-->
<!-- <view class="top">-->
<!-- <span class="money">{{'-'}}</span>-->
<!-- <image v-if="detail.Budget_Degree>100" class="icon" src="/static/images/index/yearSuccess.svg"></image>-->
<!-- </view>-->
<!-- <p class="text">本月已完成<text class="unit">/</text></p>-->
<!-- </view>-->
<!-- </view>-->
<!-- <view class="right">-->
<!-- <p class="add" :style="{color:detail.Growth_Rate>0?'#E83944':'#049E77'}">{{detail.Growth_Rate>0?'+':'-'}}{{ '-'}}%</p>-->
<!-- <text class="compare">比计划</text>-->
<!-- </view>-->
<!-- </view>-->
<!-- <view class="itemBottom" :style="{marginTop: selectDetail===index?'24px':'4px'}">-->
<!-- <view class="progress">-->
<!-- <view class="have" :style="{width: detail.Budget_Degree + '%'}"></view>-->
<!-- </view>-->
<!-- <view class="text">-->
<!-- <span class="success">计划完成<span class="unit">/</span></span>-->
<!-- <span class="target">{{ '-' }}</span>-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<!-- </swiper-item>-->
<!-- </block>-->
<!-- </swiper>-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<!-- <view class="serviceList">-->
<!-- <scroll-view class="list" scroll-y="true">-->
<!-- <view class="item" v-for="(item,index) in detail.RegionBudgetList" :key="index" @click="goPage(item.Serverpart_ID)">-->
<!-- <view class="top">-->
<!-- <p class="title">{{ item.Serverpart_Name || ''}}</p>-->
<!-- <image class="icon" src="/static/images/plan/blueArrow.svg"></image>-->
<!-- </view>-->
<!-- <view class="detail">-->
<!-- <view class="left">-->
<!-- <view class="money">-->
<!-- <span class="num">{{ item.Revenue_Amount }}</span>-->
<!-- <image class="icon" src="/static/images/index/yearSuccess.svg"></image>-->
<!-- </view>-->
<!-- <view class="text">本月已完成<span class="unit">/</span></view>-->
<!-- </view>-->
<!-- <view class="right">-->
<!-- <p class="add" :style="{color:item.Growth_Rate>0?'#E83944':'#049E77'}"><span>{{item.Growth_Rate>0?'+':''}}</span>{{item.Growth_Rate || '-'}}%</p>-->
<!-- <p class="text">比计划</p>-->
<!-- </view>-->
<!-- </view>-->
<!-- <view class="progress">-->
<!-- <view class="box">-->
<!-- <view class="have" :style="{width:item.Budget_Degree + '%'}"></view>-->
<!-- </view>-->
<!-- <view class="other">-->
<!-- <view>-->
<!-- <span class="unit">计划完成</span>-->
<!-- <span class="type">/</span>-->
<!-- </view>-->
<!-- <view class="money">{{item.Budget_Amount || ''}}</view>-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<!-- </scroll-view>-->
<!-- </view>-->
<!-- </view>-->
<!--</template>-->
<!--<script>-->
<!--import request from '@/util/index.js'-->
<!--export default{-->
<!-- name: "yearPlan",-->
<!-- data(){-->
<!-- return {-->
<!-- monthList:[{label:'1月',value:1},{label:'2月',value:2},{label:'3月',value:3},{label:'4月',value:4},{label:'5月',value:5},{label:'6月',value:6},{label:'7月',value:7}, {label:'8月',value:8},{label:'9月',value:9},{label:'10月',value:10},{label:'11月',value:11},{label:'12月',value:12}],-->
<!-- selectMonth:0,// 选中的月份-->
<!-- selectMonthId:'',// 选中月份的id-->
<!-- swiperList:[{label:1111},{label:2222},{label:3333},{label:4444},{label:5555},{label:6666},{label:7777},{label:8888},{label:9999},{label:1010}, {label:11111111},{label:1212}],-->
<!-- selectDetail:0,// 选中的月份详情卡片-->
<!-- serviceList:[{},{},{},{},{},{}],-->
<!-- menu:{},-->
<!-- detail:{},// 页面请求到的数据-->
<!-- }-->
<!-- },-->
<!-- onLoad(){-->
<!-- // 获取手机参数对页面进行适配-->
<!-- this.menu = uni.getMenuButtonBoundingClientRect()-->
<!-- // 先拿到首页的时间 作为调用接口的统一时间 存的lastDay存当前月份的具体日期切换回本月的日期判断有用-->
<!-- this.searchTime = uni.getStorageSync('lastDay')-->
<!-- this.lastDay = uni.getStorageSync('lastDay')-->
<!-- // 拿到当前时间-->
<!-- const date = new Date(this.searchTime)-->
<!-- let month = date.getMonth() + 1-->
<!-- // 滚动的月份列表-->
<!-- this.monthList = this.monthList.filter(item=>item.value<=month)-->
<!-- // 详情卡片的滑动列表-->
<!-- this.swiperList = this.swiperList.filter((item,index)=>index<month)-->
<!-- // 根据月份显示的详情卡片-->
<!-- this.selectDetail = month - 1-->
<!-- // // 拿到片区详情完成列表-->
<!-- // this.handleAreaDetailList()-->
<!-- },-->
<!-- onReady(){-->
<!-- this.getThisMonth()-->
<!-- },-->
<!-- methods:{-->
<!-- // 横向月份选择器的初始值-->
<!-- getThisMonth(){-->
<!-- const date = new Date()-->
<!-- const month = date.getMonth() + 1-->
<!-- this.selectMonth = month-->
<!-- this.selectMonthId = `item${month}`-->
<!-- },-->
<!-- // 点击月份切换月份-->
<!-- handleSelectMonth(value){-->
<!-- this.selectMonth = value-->
<!-- this.selectMonthId = `item${value}`-->
<!-- this.selectDetail = value - 1-->
<!-- },-->
<!-- // 月份信息详情的滚动-->
<!-- handleDetailScroll(e){-->
<!-- const date = new Date(this.lastDay)-->
<!-- let year = date.getFullYear()-->
<!-- let month = date.getMonth() + 1-->
<!-- let day = date.getDate()-->
<!-- this.selectDetail = e.detail.current-->
<!-- this.selectMonth = this.selectDetail + 1-->
<!-- this.selectMonthId = `item${this.selectDetail<5?1:this.selectDetail}`-->
<!-- if (month === this.selectMonth){-->
<!-- this.searchTime = `${year}-${month}-${day}`-->
<!-- }else{-->
<!-- let m = this.selectMonth-->
<!-- if (m<10){-->
<!-- m = '0' + m-->
<!-- }-->
<!-- let d = this.$util.getThisMonthDay(`${year}-${m}`)-->
<!-- this.searchTime = `${year}-${m}-${d}`-->
<!-- }-->
<!-- this.handleAreaDetailList()-->
<!-- },-->
<!-- async handleAreaDetailList(){-->
<!-- uni.showLoading({title:'正在加载'})-->
<!-- console.log('this.searchTime',this.searchTime)-->
<!-- const req = {-->
<!-- StatisticsDate: this.searchTime,-->
<!-- ProvinceCode:'340000',-->
<!-- StatisticsType:1-->
<!-- }-->
<!-- const data = await request.$webGet('CommercialApi/Revenue/GetProvinceRevenueBudget',req)-->
<!-- for (let key in data.Result_Data){-->
<!-- if (key==='Budget_Amount' || key==='Revenue_Amount'){-->
<!-- data.Result_Data[key] = this.$util.fmoney(data.Result_Data[key])-->
<!-- }-->
<!-- }-->
<!-- data.Result_Data.RegionBudgetList.forEach(item=>{-->
<!-- for (let key in item){-->
<!-- if (key==='Budget_Amount' || key==='Revenue_Amount'){-->
<!-- item[key] = this.$util.fmoney(item[key])-->
<!-- }-->
<!-- }-->
<!-- })-->
<!-- this.detail = data.Result_Data-->
<!-- uni.hideLoading()-->
<!-- console.log('this.detail',this.detail)-->
<!-- },-->
<!-- goPage(id){-->
<!-- this.$util.toNextRoute('navigateTo', '/pages/commercialBI/areaPlanMonth?id='+id+'&search='+this.se)-->
<!-- }-->
<!-- }-->
<!--}-->
<!--</script>-->
<!--<style scoped lang="scss">-->
<!--@import '/static/public/font/stylesheet.css';-->
<!--.main{-->
<!-- width: 100%;-->
<!-- .heard{-->
<!-- width: 100%;-->
<!-- height: 366px;-->
<!-- position: relative;-->
<!-- .content{-->
<!-- width: 100%;-->
<!-- height: 100%;-->
<!-- position: absolute;-->
<!-- box-sizing: border-box;-->
<!-- top: 0;left: 0;-->
<!-- z-index: 2;-->
<!-- .block{-->
<!-- width: 100%;-->
<!-- height: 83px;-->
<!-- }-->
<!-- .title{-->
<!-- font-size: 28px;-->
<!-- font-family: "Alimama ShuHeiTi";-->
<!-- color: #160002;-->
<!-- line-height: 39px;-->
<!-- font-weight: 600;-->
<!-- text-shadow: 0 4px 8px rgba(2,32,202,0.2);-->
<!-- background: linear-gradient(180deg, #fff 50%, #B0BBFF 100%);-->
<!-- -webkit-background-clip: text;-->
<!-- -webkit-text-fill-color: transparent;-->
<!-- margin: 14px 24px;-->
<!-- }-->
<!-- .monthTabs{-->
<!-- width: calc(100% - 32px);-->
<!-- height: 34px;-->
<!-- border-radius: 17px;-->
<!-- box-sizing: border-box;-->
<!-- border: 1px solid #798DFF;-->
<!-- background: linear-gradient(180deg, #4762FF 0%, #778EFF 100%);-->
<!-- overflow: hidden;-->
<!-- padding: 2px 0;-->
<!-- margin-top: 16px;-->
<!-- margin-left: 16px;-->
<!-- .big{-->
<!-- width: 100%;-->
<!-- height: 100%;-->
<!-- white-space: nowrap;-->
<!-- .monthItem{-->
<!-- display: inline-block;-->
<!-- font-size: 14px;-->
<!-- padding: 2px 16px;-->
<!-- font-family: PingFangSC-Semibold, PingFang SC;-->
<!-- font-weight: 600;-->
<!-- color: #B8C2FF;-->
<!-- line-height: 24px;-->
<!-- margin-right: 4px;-->
<!-- text-align: center;-->
<!-- border-radius: 12px;-->
<!-- }-->
<!-- .selectItem{-->
<!-- background: #fff;-->
<!-- }-->
<!-- .monthItem:first-child{-->
<!-- margin-left: 4px;-->
<!-- }-->
<!-- }-->
<!-- }-->
<!-- .monthDetailList{-->
<!-- width: 100%;-->
<!-- height: 140px;-->
<!-- margin-top: 12px;-->
<!-- .swiper{-->
<!-- width: 100%;-->
<!-- height: 100%;-->
<!-- .swiper-item{-->
<!-- .box{-->
<!-- width: 100%;-->
<!-- height: 100%;-->
<!-- .detail{-->
<!-- width: calc(100% - 20px);-->
<!-- height: 100%;-->
<!-- background: linear-gradient(314deg, #D8EAFF 0%, #F3F5FF 32%, #F5FCFF 54%, #F0F7FF 70%, #D3D9FF 100%);-->
<!-- margin-left: 10px;-->
<!-- border-radius: 8px;-->
<!-- box-sizing: border-box;-->
<!-- padding: 16px;-->
<!-- .item{-->
<!-- .itemTop{-->
<!-- width: 100%;-->
<!-- display: flex;-->
<!-- justify-content: space-between;-->
<!-- .left{-->
<!-- display: flex;-->
<!-- .logo{-->
<!-- width: 44px;-->
<!-- height: 44px;-->
<!-- margin-right: 8px;-->
<!-- }-->
<!-- .detailContent{-->
<!-- .top{-->
<!-- display: flex;-->
<!-- align-items: center;-->
<!-- margin-bottom: 2px;-->
<!-- .money{-->
<!-- font-size: 18px;-->
<!-- font-family: DINAlternate-Bold, DINAlternate;-->
<!-- font-weight: bold;-->
<!-- color: #160002;-->
<!-- line-height: 24px;-->
<!-- }-->
<!-- .icon{-->
<!-- width: 15px;-->
<!-- height: 15px;-->
<!-- margin-left: 6px;-->
<!-- }-->
<!-- }-->
<!-- .text{-->
<!-- font-size: 14px;-->
<!-- font-family: PingFangSC-Regular, PingFang SC;-->
<!-- font-weight: 400;-->
<!-- color: #786B6C;-->
<!-- line-height: 20px;-->
<!-- .unit{-->
<!-- font-size: 14px;-->
<!-- font-family: PingFangSC-Regular, PingFang SC;-->
<!-- font-weight: 400;-->
<!-- color: #A69E9F;-->
<!-- line-height: 20px;-->
<!-- margin-left: 2px;-->
<!-- }-->
<!-- }-->
<!-- }-->
<!-- }-->
<!-- .right{-->
<!-- text-align: right;-->
<!-- .add{-->
<!-- font-size: 18px;-->
<!-- font-family: DINAlternate-Bold, DINAlternate;-->
<!-- font-weight: bold;-->
<!-- line-height: 24px;-->
<!-- }-->
<!-- .compare{-->
<!-- font-size: 14px;-->
<!-- font-family: PingFangSC-Regular, PingFang SC;-->
<!-- font-weight: 400;-->
<!-- color: #A69E9F;-->
<!-- line-height: 18px;-->
<!-- }-->
<!-- }-->
<!-- }-->
<!-- .itemBottom{-->
<!-- margin-top: 24px;-->
<!-- .progress{-->
<!-- width: 100%;-->
<!-- height: 10px;-->
<!-- background: #ccc;-->
<!-- border-radius: 5px;-->
<!-- position: relative;-->
<!-- overflow: hidden;-->
<!-- .have{-->
<!-- height: 100%;-->
<!-- position: absolute;-->
<!-- left: 0;-->
<!-- top: 0;-->
<!-- background: #576EFF;-->
<!-- border-radius: 5px;-->
<!-- }-->
<!-- }-->
<!-- .text{-->
<!-- margin-top: 4px;-->
<!-- width: 100%;-->
<!-- display: flex;-->
<!-- justify-content: space-between;-->
<!-- align-items: center;-->
<!-- .success{-->
<!-- font-size: 14px;-->
<!-- font-family: PingFangSC-Regular, PingFang SC;-->
<!-- font-weight: 400;-->
<!-- color: #786B6C;-->
<!-- line-height: 20px;-->
<!-- .unit{-->
<!-- font-size: 14px;-->
<!-- font-family: PingFangSC-Regular, PingFang SC;-->
<!-- font-weight: 400;-->
<!-- color: #A69E9F;-->
<!-- line-height: 20px;-->
<!-- margin-left: 2px;-->
<!-- }-->
<!-- }-->
<!-- .target{-->
<!-- font-size: 14px;-->
<!-- font-family: PingFangSC-Regular, PingFang SC;-->
<!-- font-weight: 400;-->
<!-- color: #160002;-->
<!-- line-height: 20px;-->
<!-- }-->
<!-- }-->
<!-- }-->
<!-- }-->
<!-- }-->
<!-- .noShow{-->
<!-- height: 112px;-->
<!-- margin-top: 14px;-->
<!-- }-->
<!-- }-->
<!-- }-->
<!-- }-->
<!-- }-->
<!-- }-->
<!-- .headerBg{-->
<!-- position: absolute;-->
<!-- top: 0;-->
<!-- left: 0;-->
<!-- width: 100%;-->
<!-- height: 100%;-->
<!-- z-index: 1;-->
<!-- }-->
<!-- .allowLeft{-->
<!-- position: absolute;-->
<!-- width: 24px;-->
<!-- height: 24px;-->
<!-- left: 16px;-->
<!-- }-->
<!-- }-->
<!-- .serviceList{-->
<!-- width: 100%;-->
<!-- height: calc(100vh - 366px);-->
<!-- transform: translateY(-16px);-->
<!-- border-radius: 8px;-->
<!-- z-index: 6;-->
<!-- position: relative;-->
<!-- background: #fff;-->
<!-- box-sizing: border-box;-->
<!-- padding:16px 16px 0;-->
<!-- .list{-->
<!-- width: 100%;-->
<!-- height: 100%;-->
<!-- ::-webkit-scrollbar {width: 0;height: 0;background-color: transparent;}-->
<!-- .item{-->
<!-- width: 100%;-->
<!-- height: 178px;-->
<!-- background: linear-gradient(314deg, #EDF7FF 0%, #F3F5FF 32%, #F5FCFF 54%, #F0F7FF 70%, #D7DDFF 100%);-->
<!-- border-radius: 8px;-->
<!-- margin-bottom: 12px;-->
<!-- box-sizing: border-box;-->
<!-- padding: 16px;-->
<!-- .top{-->
<!-- display: flex;-->
<!-- align-items: center;-->
<!-- .title{-->
<!-- font-size: 18px;-->
<!-- font-family: Alimama ShuHeiTi;-->
<!-- color: #1A33BC;-->
<!-- line-height: 26px;-->
<!-- }-->
<!-- .icon{-->
<!-- width: 15px;-->
<!-- height: 15px;-->
<!-- opacity: 0.8;-->
<!-- margin-left: 7px;-->
<!-- }-->
<!-- }-->
<!-- .detail{-->
<!-- margin-top: 16px;-->
<!-- width: 100%;-->
<!-- display: flex;-->
<!-- justify-content: space-between;-->
<!-- .left{-->
<!-- .money{-->
<!-- display: flex;-->
<!-- align-items: center;-->
<!-- margin-bottom: 2px;-->
<!-- .num{-->
<!-- font-size: 20px;-->
<!-- font-family: DINAlternate-Bold, DINAlternate;-->
<!-- font-weight: bold;-->
<!-- color: #160002;-->
<!-- line-height: 24px;-->
<!-- margin-right: 4px;-->
<!-- }-->
<!-- .icon{-->
<!-- width: 16px;-->
<!-- height: 16px;-->
<!-- }-->
<!-- }-->
<!-- .text{-->
<!-- 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;-->
<!-- 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{-->
<!-- margin-top: 16px;-->
<!-- .box{-->
<!-- width: 100%;-->
<!-- height: 10px;-->
<!-- border-radius: 5px;-->
<!-- background: #ccc;-->
<!-- overflow: hidden;-->
<!-- position: relative;-->
<!-- .have{-->
<!-- position: absolute;-->
<!-- height: 100%;-->
<!-- background: rgba(87, 110, 255, 1);-->
<!-- border-radius: 5px;-->
<!-- left: 0;top: 0;-->
<!-- }-->
<!-- }-->
<!-- .other{-->
<!-- width: 100%;-->
<!-- margin-top: 4px;-->
<!-- display: flex;-->
<!-- justify-content: space-between;-->
<!-- align-items: center;-->
<!-- .unit{-->
<!-- font-size: 14px;-->
<!-- font-family: PingFangSC-Regular, PingFang SC;-->
<!-- font-weight: 400;-->
<!-- color: #786B6C;-->
<!-- line-height: 20px;-->
<!-- }-->
<!-- .type{-->
<!-- font-size: 14px;-->
<!-- font-family: PingFangSC-Regular, PingFang SC;-->
<!-- font-weight: 400;-->
<!-- color: #A69E9F;-->
<!-- line-height: 20px;-->
<!-- margin-left: 2px;-->
<!-- }-->
<!-- .money{-->
<!-- font-size: 14px;-->
<!-- font-family: PingFangSC-Regular, PingFang SC;-->
<!-- font-weight: 400;-->
<!-- color: #160002;-->
<!-- line-height: 20px;-->
<!-- }-->
<!-- }-->
<!-- }-->
<!-- }-->
<!-- }-->
<!-- }-->
<!--}-->
<!--</style>-->