<!--<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>-->
