396 lines
14 KiB
Vue
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>-->
|