From 1a1e4d4a759e7adc1ab271e99b3620b4c419a091 Mon Sep 17 00:00:00 2001
From: cclu <1106109051@qq.com>
Date: Wed, 24 May 2023 18:56:24 +0800
Subject: [PATCH] update

---
 App.vue                                 |    1 -
 common/utils.js                         |   35 +
 pages.json                              |    8 +-
 pages/commercialBI/areaPlanMonth.vue    |  395 --------
 pages/commercialBI/servicePlanMonth.vue |  644 ------------
 pages/commercialBI/yearPlan.vue         | 1210 ++++++++++++-----------
 pages/index/index.vue                   |   19 +-
 pages/plan/areaPlanMonth.vue            |  626 ++++++++++++
 pages/plan/servicePlanMonth.vue         | 1045 ++++++++++++++++++++
 pages/projectWarning/detail.vue         |    1 +
 10 files changed, 2340 insertions(+), 1644 deletions(-)
 delete mode 100644 pages/commercialBI/areaPlanMonth.vue
 delete mode 100644 pages/commercialBI/servicePlanMonth.vue
 create mode 100644 pages/plan/areaPlanMonth.vue
 create mode 100644 pages/plan/servicePlanMonth.vue

diff --git a/App.vue b/App.vue
index 330480f..9871e57 100644
--- a/App.vue
+++ b/App.vue
@@ -95,7 +95,6 @@
 
 <style>
 	@import url("./common/uni.css");
-
 	/*每个页面公共css */
 	page {
 		font-size: 26rpx;
diff --git a/common/utils.js b/common/utils.js
index a07ad95..864c7b8 100644
--- a/common/utils.js
+++ b/common/utils.js
@@ -195,6 +195,40 @@ function addUserBehavior(obj) {
 
 	})
 }
+function addUserBehaviorNew(obj) {
+
+	var pages = getCurrentPages() // 获取加载的页面
+	let len = pages.length
+	if (len) {
+		var currentPage = pages[len - 1] // 获取当前页面的对象
+		var nowRoute = '/' + currentPage.route // 当前页面url
+		if (obj) {
+			obj.outtoRoute = (obj.outtoRoute === '' || obj.outtoRoute) ? obj.outtoRoute : nowRoute
+			obj.intoRoute = obj.intoRoute ? obj.intoRoute.split('?')[0] : ''
+		} else {
+			obj = {}
+			obj.outtoRoute = nowRoute
+			obj.intoRoute = len > 1 ? '/' + pages[len - 2].route : '/pages/index/index'
+		}
+	}
+	obj.visitChannels = store.state.visitChannels
+	let userDate = store.state.userData
+	console.log('userDate123',userDate)
+	let req = {
+		userName:userDate.UserName,
+		phoneNumber:userDate.Membership_Phone,
+		userId:userDate.UserId ? userDate.UserId:'',
+		wechatAppId:'wx4fb5da2b8d9e0e43',
+		intoRoute:obj.intoRoute,
+		outtoRoute:obj.outtoRoute,
+		visitChannels:obj.visitChannels,
+		behaviorRecordDesc:''
+	}
+	console.log('req',req)
+	request.$webGet('CommercialApi/UserBehavior/AddUserBehavior',req).then(() => {
+
+	})
+}
 /*
 	根据关键字获取相应的枚举选项，文档见 https://api.eshangtech.com/EShangApiMain/swagger/ui/index#!/FrameWork/FrameWork_GetFieldEnumByField
 	params:{FieldExplainField,FieldEnumStatus}
@@ -467,6 +501,7 @@ export default {
 	changeStringToDate,
 	toNextRoute,
 	addUserBehavior,
+	addUserBehaviorNew,
 	getFieldEnumByField, // 获取枚举参数
 	// calculateDistance,
 	// bMapToQQMap,
diff --git a/pages.json b/pages.json
index bcb9bb3..3e21bc8 100644
--- a/pages.json
+++ b/pages.json
@@ -156,7 +156,13 @@
                         "navigationBarTitleText": "",
                         "navigationStyle": "custom"
                     }
-                },
+                }
+            ]
+        },
+        {
+            "root": "pages/plan",
+            "pages": [
+
                 {
                     "path": "areaPlanMonth",
                     "style": {
diff --git a/pages/commercialBI/areaPlanMonth.vue b/pages/commercialBI/areaPlanMonth.vue
deleted file mode 100644
index 18c0710..0000000
--- a/pages/commercialBI/areaPlanMonth.vue
+++ /dev/null
@@ -1,395 +0,0 @@
-<!--<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>-->
diff --git a/pages/commercialBI/servicePlanMonth.vue b/pages/commercialBI/servicePlanMonth.vue
deleted file mode 100644
index 21f397b..0000000
--- a/pages/commercialBI/servicePlanMonth.vue
+++ /dev/null
@@ -1,644 +0,0 @@
-<!--<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>-->
-<!--      <p class="pageTitle">服务区月度计划</p>-->
-
-<!--      <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">-->
-<!--                    <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 class="itemTop" :style="{marginTop: selectDetail===index?'16px':'4px'}">-->
-<!--                      <view class="left">-->
-<!--                        <view class="detailContent">-->
-<!--                          <view class="top">-->
-<!--                            <span class="money">7,321,433,546</span>-->
-<!--                            <image 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">+8.24%</p>-->
-<!--                        <text class="compare">比计划</text>-->
-<!--                      </view>-->
-<!--                    </view>-->
-<!--                    <view class="itemBottom" :style="{marginTop: selectDetail===index?'20px':'4px'}">-->
-<!--                      <view class="progress">-->
-<!--                        <view class="have" style="width: 78%"></view>-->
-<!--                      </view>-->
-<!--                      <view class="text">-->
-<!--                        <span class="success">计划完成<span class="unit">/元</span></span>-->
-<!--                        <span class="target">8,000,000,000</span>-->
-<!--                      </view>-->
-<!--                    </view>-->
-<!--                  </view>-->
-<!--                </view>-->
-<!--                <image class="detailLogo" src="/static/images/plan/detailLogo.svg"></image>-->
-<!--              </view>-->
-<!--            </swiper-item>-->
-<!--          </block>-->
-<!--        </swiper>-->
-<!--      </view>-->
-<!--    </view>-->
-
-<!--    <view class="detail">-->
-<!--      <view class="box" v-for="(item,index) in detailList" :key="index">-->
-<!--        <p class="title">主营业务收入</p>-->
-<!--        <view class="top">-->
-<!--          <image class="icon" src="/static/images/plan/mainWork.svg"></image>-->
-<!--          <view class="sum">-->
-<!--            <span class="money">1,7,000,000</span>-->
-<!--            <span class="text">总计<span class="unit">/元</span></span>-->
-<!--          </view>-->
-<!--          <image class="meng" src="/static/images/plan/mainWorkMeng.png"></image>-->
-<!--        </view>-->
-<!--        <view class="smallTitle">-->
-<!--          <span class="type">自营收入<span class="unit">/元</span></span>-->
-<!--          <span class="money">14,462,951</span>-->
-<!--        </view>-->
-<!--        <view class="subItem" v-for="(subItem,index) in item.list" :key="index">-->
-<!--          <view class="link" v-if="index + 1 !== item.list.length"></view>-->
-<!--          <view class="subTop">-->
-<!--            <image class="icon" src="/static/images/plan/subStore.svg"></image>-->
-<!--            <span class="text">便利店</span>-->
-<!--          </view>-->
-<!--          <view class="subBox">-->
-<!--            <view class="subType">-->
-<!--              <view class="upper">-->
-<!--                <view class="icon" ></view>-->
-<!--                <span class="subTitle">实际</span>-->
-<!--                <span class="unit">/元</span>-->
-<!--              </view>-->
-<!--              <span class="value">8,231,532</span>-->
-<!--            </view>-->
-<!--            <view class="subTypeNoAfter" >-->
-<!--              <view class="upper">-->
-<!--                <view class="icon" style="opacity: 0.4"></view>-->
-<!--                <span class="subTitle">计划</span>-->
-<!--                <span class="unit">/元</span>-->
-<!--              </view>-->
-<!--              <span class="value">7,000,000</span>-->
-<!--            </view>-->
-<!--            <view class="progress">-->
-<!--              <view class="reality" :style="{width:'48px'}"></view>-->
-<!--              <view class="plan"></view>-->
-<!--              <view class="add">-->
-<!--                <image class="addIcon" src="/static/images/plan/add.svg"></image>-->
-<!--                <span class="value">+20.24%</span>-->
-<!--              </view>-->
-<!--            </view>-->
-<!--          </view>-->
-<!--        </view>-->
-<!--      </view>-->
-<!--    </view>-->
-<!--  </view>-->
-<!--</template>-->
-<!--<script>-->
-<!--export default {-->
-<!--  data(){-->
-<!--    return{-->
-<!--      menu:{},-->
-<!--      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,// 放大的月份详情-->
-<!--      detailList:[{list:[1,2,3]},{list:[1,2,3]},{list:[1,2,3]},{list:[1,2,3]}]-->
-<!--    }-->
-<!--  },-->
-<!--  onLoad(){-->
-<!--    //  获取手机参数对页面进行适配-->
-<!--    this.menu = uni.getMenuButtonBoundingClientRect()-->
-<!--    console.log('menu',this.menu)-->
-<!--    // 先拿到首页的时间 作为调用接口的统一时间  存的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.selectDetail = month-->
-<!--  },-->
-<!--  onReady(){-->
-<!--    this.getThisMonth()-->
-<!--  },-->
-<!--  methods:{-->
-<!--    getThisMonth(){-->
-<!--      const date = new Date(this.searchTime)-->
-<!--      const month = date.getMonth() + 1-->
-<!--      this.selectMonth = month-->
-<!--      this.selectMonthId = `item${month}`-->
-<!--    },-->
-<!--    handleDetailScroll(e){-->
-<!--      this.selectDetail = e.detail.current-->
-<!--    }-->
-<!--  }-->
-<!--}-->
-<!--</script>-->
-<!--<style scoped lang="scss">-->
-<!--@import '/static/public/font/stylesheet.css';-->
-<!--.main{-->
-<!--  width: 100%;-->
-<!--  height: 100vh;-->
-<!--  display: flex;-->
-<!--  flex-direction: column;-->
-<!--  .header{-->
-<!--    width: 100%;-->
-<!--    padding-bottom: 32px;-->
-<!--    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;-->
-<!--      }-->
-<!--    }-->
-<!--    .pageTitle{-->
-<!--      font-size: 28px;-->
-<!--      font-family: Alimama ShuHeiTi;-->
-<!--      color: #160002;-->
-<!--      line-height: 39px;-->
-<!--      text-shadow: 0  4px 8px rgba(129,36,7,0.2);-->
-<!--      background: linear-gradient(180deg, #FEFFFE 40%, #FFBEAA 100%);-->
-<!--      -webkit-background-clip: text;-->
-<!--      -webkit-text-fill-color: transparent;-->
-<!--      margin: 12px 0 0 16px;-->
-<!--    }-->
-<!--    .monthTabs{-->
-<!--      width: calc(100% - 32px);-->
-<!--      height: 34px;-->
-<!--      border-radius: 17px;-->
-<!--      box-sizing: border-box;-->
-<!--      border: 1px solid #FFA98D;-->
-<!--      background: linear-gradient(180deg, #FC6C3F 0%, #FFAC91 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: #FFCFC0;-->
-<!--          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: 188px;-->
-<!--      margin-top: 12px;-->
-<!--      .swiper{-->
-<!--        width: 100%;-->
-<!--        height: 188px;-->
-<!--        .swiper-item{-->
-<!--          .box{-->
-<!--            width: 100%;-->
-<!--            height: 100%;-->
-<!--            position: relative;-->
-<!--            .detail{-->
-<!--              position: absolute;-->
-<!--              z-index:2;-->
-<!--              width: calc(100% - 20px);-->
-<!--              height: 100%;-->
-<!--              background: linear-gradient(314deg, #FFF7E4 0%, #F5F2FF 32%, #FFFAFA 54%, #FFF6F3 70%, #FFE4D9 100%);              margin-left: 10px;-->
-<!--              border-radius: 8px;-->
-<!--              box-sizing: border-box;-->
-<!--              padding: 16px;-->
-<!--              margin-top: 16px;-->
-<!--              .item{-->
-<!--                width: 100%;-->
-<!--                height: 100%;-->
-<!--                z-index:3;-->
-<!--                .picker{-->
-<!--                  .selectService{-->
-<!--                    display: flex;-->
-<!--                    align-items: center;-->
-<!--                    .img{-->
-<!--                      width: 40px;-->
-<!--                      height: 40px;-->
-<!--                      z-index: 2;-->
-<!--                    }-->
-<!--                    .select{-->
-<!--                      height: 32px;-->
-<!--                      min-width: 110px;-->
-<!--                      background: linear-gradient(270deg, #FFE8DE 0%, #FFDFD1 100%);-->
-<!--                      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;-->
-<!--                      }-->
-
-<!--                    }-->
-<!--                  }-->
-<!--                }-->
-<!--                .itemTop{-->
-<!--                  margin-top: 16px;-->
-<!--                  width: 100%;-->
-<!--                  display: flex;-->
-<!--                  justify-content: space-between;-->
-<!--                  .left{-->
-<!--                    display: flex;-->
-<!--                    .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;-->
-<!--                      color: #E83944;-->
-<!--                      line-height: 24px;-->
-<!--                    }-->
-<!--                    .compare{-->
-<!--                      font-size: 14px;-->
-<!--                      font-family: PingFangSC-Regular, PingFang SC;-->
-<!--                      font-weight: 400;-->
-<!--                      color: #A69E9F;-->
-<!--                      line-height: 18px;-->
-<!--                    }-->
-<!--                  }-->
-<!--                }-->
-<!--                .itemBottom{-->
-<!--                  .progress{-->
-<!--                    width: 100%;-->
-<!--                    height: 10px;-->
-<!--                    background: #FBD9CD;-->
-<!--                    border-radius: 5px;-->
-<!--                    position: relative;-->
-<!--                    .have{-->
-<!--                      height: 100%;-->
-<!--                      position: absolute;-->
-<!--                      left: 0;-->
-<!--                      top: 0;-->
-<!--                      background: #FF6D40;-->
-<!--                      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: 151px;-->
-<!--              margin-top: 30px;-->
-<!--            }-->
-<!--            .detailLogo{-->
-<!--              width: 97px;-->
-<!--              height: 103px;-->
-<!--              position: absolute;-->
-<!--              z-index:1;-->
-<!--              top: 0;right: 47px;-->
-<!--              //opacity: 0.4;-->
-<!--            }-->
-<!--          }-->
-<!--        }-->
-<!--      }-->
-<!--    }-->
-<!--  }-->
-<!--  .detail{-->
-<!--    width: 100%;-->
-<!--    flex: 1;-->
-<!--    transform: translateY(-16px);-->
-<!--    background: #fff;-->
-<!--    border-radius: 16px 16px 2px 2px;-->
-<!--    .box{-->
-<!--      width: 100%;-->
-<!--      background: #fff;-->
-<!--      border-radius: 16px 16px 2px 2px;-->
-<!--      box-sizing: border-box;-->
-<!--      padding: 24px 16px 16px;-->
-<!--      position: relative;-->
-<!--      .title{-->
-<!--        font-size: 17px;-->
-<!--        font-family: PingFangSC-Semibold, PingFang SC;-->
-<!--        font-weight: 600;-->
-<!--        color: #160002;-->
-<!--        line-height: 24px;-->
-<!--      }-->
-<!--      .top{-->
-<!--        width: 100%;-->
-<!--        display: flex;-->
-<!--        align-items: center;-->
-<!--        justify-content: space-between;-->
-<!--        margin-top: 12px;-->
-<!--        position: relative;-->
-<!--        border-bottom: 1px solid #EEEEEE;-->
-<!--        padding-bottom: 16px;-->
-<!--        .icon{-->
-<!--          width: 48px;-->
-<!--          height: 48px;-->
-<!--        }-->
-<!--        .sum{-->
-<!--          display: flex;-->
-<!--          flex-direction: column;-->
-<!--          align-items: flex-end;-->
-<!--          .money{-->
-<!--            font-size: 20px;-->
-<!--            font-family: DINAlternate-Bold, DINAlternate;-->
-<!--            font-weight: bold;-->
-<!--            color: #160002;-->
-<!--            line-height: 24px;-->
-<!--          }-->
-<!--          .text{-->
-<!--            font-size: 14px;-->
-<!--            font-family: PingFangSC-Regular, PingFang SC;-->
-<!--            font-weight: 400;-->
-<!--            color: #160002;-->
-<!--            line-height: 20px;-->
-<!--            margin-top: 4px;-->
-<!--            .unit{-->
-<!--              font-size: 14px;-->
-<!--              font-family: PingFangSC-Regular, PingFang SC;-->
-<!--              font-weight: 400;-->
-<!--              color: #A69E9F;-->
-<!--              line-height: 20px;-->
-<!--              margin-left: 2px;-->
-<!--            }-->
-<!--          }-->
-<!--        }-->
-<!--        .meng{-->
-<!--          position: absolute;-->
-<!--          width: 80px;-->
-<!--          height: 80px;-->
-<!--          right: 0;top: -30px;-->
-<!--        }-->
-<!--      }-->
-<!--      .smallTitle{-->
-<!--        width: 100%;-->
-<!--        display: flex;-->
-<!--        justify-content: space-between;-->
-<!--        margin-top: 16px;-->
-<!--        margin-bottom: 16px;-->
-<!--        .type{-->
-<!--          font-size: 14px;-->
-<!--          font-family: PingFangSC-Semibold, PingFang SC;-->
-<!--          font-weight: 600;-->
-<!--          color: #160002;-->
-<!--          line-height: 20px;-->
-<!--          .unit{-->
-<!--            font-weight: 400;-->
-<!--            color: #A69E9F;-->
-<!--            margin-left: 2px;-->
-<!--          }-->
-<!--        }-->
-<!--        .money{-->
-<!--          font-size: 16px;-->
-<!--          font-family: DINAlternate-Bold, DINAlternate;-->
-<!--          font-weight: bold;-->
-<!--          color: #160002;-->
-<!--          line-height: 20px;-->
-<!--        }-->
-<!--      }-->
-<!--      .subItem{-->
-<!--        margin-bottom: 20px;-->
-<!--        position: relative;-->
-<!--        .link{-->
-<!--          position: absolute;-->
-<!--          left: 12px;top: 24px;-->
-<!--          width: 2px;-->
-<!--          height: 110px;-->
-<!--          background: #E6E6E6;-->
-<!--        }-->
-<!--        .subTop{-->
-<!--          width: 100%;-->
-<!--          display: flex;-->
-<!--          align-items: center;-->
-<!--          margin-bottom: 6px;-->
-<!--          .icon{-->
-<!--            width: 24px;-->
-<!--            height: 24px;-->
-<!--          }-->
-<!--          .text{-->
-<!--            font-size: 28rpx;-->
-<!--            font-family: PingFangSC-Regular, PingFang SC;-->
-<!--            font-weight: 400;-->
-<!--            color: #160002;-->
-<!--            margin-left: 8px;-->
-<!--            line-height: 24px;-->
-<!--          }-->
-<!--        }-->
-<!--        .subBox{-->
-<!--          width: calc(100vw - 64px);-->
-<!--          height: 80px;-->
-<!--          background: #F5F5F5;-->
-<!--          box-sizing: border-box;-->
-<!--          margin-left: 32px;-->
-<!--          border-radius: 8rpx;-->
-<!--          display: flex;-->
-<!--          .subType,.subTypeNoAfter{-->
-<!--            width: 33%;-->
-<!--            height: 100%;-->
-<!--            box-sizing: border-box;-->
-<!--            padding: 16px 12px;-->
-<!--            position: relative;-->
-<!--            .upper{-->
-<!--              display: flex;-->
-<!--              align-items: center;-->
-<!--              margin-bottom: 16rpx;-->
-<!--              .icon{-->
-<!--                width: 12rpx;-->
-<!--                height: 12rpx;-->
-<!--                border-radius: 50%;-->
-<!--                background: #FF7D35-->
-<!--              }-->
-<!--              .subTitle{-->
-<!--                font-size: 28rpx;-->
-<!--                font-family: PingFangSC-Regular, PingFang SC;-->
-<!--                font-weight: 400;-->
-<!--                color: #160002;-->
-<!--                line-height: 40rpx;-->
-<!--                margin-left: 4px;-->
-<!--              }-->
-<!--              .unit{-->
-<!--                font-size: 28rpx;-->
-<!--                font-family: PingFangSC-Regular, PingFang SC;-->
-<!--                font-weight: 400;-->
-<!--                color: #A69E9F;-->
-<!--                line-height: 40rpx;-->
-<!--                margin-left: 2px;-->
-<!--              }-->
-<!--            }-->
-<!--            .value{-->
-<!--              font-size: 32rpx;-->
-<!--              font-family: DINAlternate-Bold, DINAlternate;-->
-<!--              font-weight: bold;-->
-<!--              color: #160002;-->
-<!--              line-height: 40rpx;-->
-<!--            }-->
-<!--          }-->
-<!--          .subType:after{-->
-<!--            content:'';-->
-<!--            width: 1px;-->
-<!--            height: 50px;-->
-<!--            background: #E6E6E6;-->
-<!--            border-radius: 1px;-->
-<!--            position: absolute;-->
-<!--            right: 0;top: 15px;-->
-<!--          }-->
-<!--          .progress{-->
-<!--            width: 34%;-->
-<!--            height: 100%;-->
-<!--            box-sizing: border-box;-->
-<!--            padding: 16px 10px;-->
-<!--            .reality{-->
-<!--              height: 6px;-->
-<!--              background: #FF7D35;-->
-<!--              border-radius: 4px;-->
-<!--            }-->
-<!--            .plan{-->
-<!--              width: 40px;-->
-<!--              height: 6px;-->
-<!--              background: #FF7D35;-->
-<!--              border-radius: 4px;-->
-<!--              opacity: 0.4;-->
-<!--              margin-top: 4px;-->
-<!--            }-->
-<!--            .add{-->
-<!--              margin-top: 12px;-->
-<!--              display: flex;-->
-<!--              align-items: center;-->
-<!--              .addIcon{-->
-<!--                width: 14px;-->
-<!--                height: 14px;-->
-<!--              }-->
-<!--              .value{-->
-<!--                font-size: 32rpx;-->
-<!--                font-family: DINAlternate-Bold, DINAlternate;-->
-<!--                font-weight: bold;-->
-<!--                color: #E83944;-->
-<!--                line-height: 40rpx;-->
-<!--                margin-left: 2px;-->
-<!--              }-->
-<!--            }-->
-<!--          }-->
-<!--        }-->
-<!--      }-->
-<!--    }-->
-<!--  }-->
-<!--}-->
-<!--</style>-->
diff --git a/pages/commercialBI/yearPlan.vue b/pages/commercialBI/yearPlan.vue
index e15596e..8ae9698 100644
--- a/pages/commercialBI/yearPlan.vue
+++ b/pages/commercialBI/yearPlan.vue
@@ -1,600 +1,622 @@
-<!--<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>-->
+<template>
+  <view class="main">
+      <view class="heard">
+          <image class="headerBg" src="https://eshangtech.com/ShopICO/ahyd-BID/plan/blueBack.png"></image>
+          <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="content">
+              <view class="block"></view>
+              <p class="title">年度经营计划</p>
+            <!--  选择月份  -->
+            <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 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="https://eshangtech.com/ShopICO/ahyd-BID/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="https://eshangtech.com/ShopICO/ahyd-BID/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>-->
+          </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="https://eshangtech.com/ShopICO/ahyd-BID/plan/blueArrow.svg"></image>
+            </view>
+            <view class="detail">
+              <view class="left">
+                <view class="money">
+                  <span class="num">{{ item.Revenue_Amount }}</span>
+                  <image v-if="item.Budget_Degree>100" 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}`-->
-<!--        }-->
+<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:{},// 页面请求到的数据
+          searchTime:'',
+        }
+    },
+    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){
+        // 月份详情卡片滚动改变选中的月份和选中的滑动id
+        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){
+          if (month<10){
+            month = '0' + month
+          }
+          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:'正在加载'})
+        // 用全局的时间 改变时间调用接口就可以拿到新数据 不用在接口里面修改时间字段
+        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()
+      },
+      // 跳转
+      goPage(id){
+        this.$util.toNextRoute('navigateTo', '/pages/plan/areaPlanMonth?id='+id+'&search='+this.searchTime)
+      },
+      handleBack(){
+        uni.navigateBack({
+          delta: 1
+        });
+      }
+    }
+}
+</script>
 
-<!--        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;
+    .top{
+      width: 100%;
+      position: relative;
+      .img{
+        width: 24px;
+        height: 24px;
+        position: absolute;
+        left: 16px;
+        z-index: 3;
+      }
+    }
+    .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;
+                }
+              }
+            }
+        }
+      }
 
-<!--<style scoped lang="scss">-->
-<!--@import '/static/public/font/stylesheet.css';-->
+    }
+    .headerBg{
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+    }
+    .allowLeft{
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      left: 16px;
+    }
+  }
 
-<!--.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>-->
+  .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>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 62cbccb..f74a88d 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -7,7 +7,7 @@
           <image class="dateIcon" src="/static/images/index/dateTime.svg"></image>
 <!--          <picker mode="date" :value="single"  @change="bindDateChange" >-->
           <picker mode="date" :value="single"  :end="endData" @change="bindDateChange" >
-            <view class="time"> 
+            <view class="time">
               <text class="day">{{ thisDay }}</text>
               <view class="uni-input"  style="background: transparent;padding: 0;height:100%">{{ single }}</view>
               <image class="icon" src="/static/images/index/arrow_bottom.svg"></image>
@@ -780,14 +780,15 @@ export default {
       this.showNoticeYear = false
     },
     handlePlanPageGo(type){
-        if (!this.isReturn){
-            this.$util.toNextRoute('navigateTo', `/pages/commercialBI/planMonth?lastDay=${this.lastDay}&type=${type}`)
-        }else{
-            uni.showToast({
-                title: '暂无权限请联系管理员',
-                icon: 'none'
-            })
-        }
+      this.$util.toNextRoute('navigateTo', `/pages/commercialBI/yearPlan`)
+        // if (!this.isReturn){
+        //     this.$util.toNextRoute('navigateTo', `/pages/commercialBI/planMonth?lastDay=${this.lastDay}&type=${type}`)
+        // }else{
+        //     uni.showToast({
+        //         title: '暂无权限请联系管理员',
+        //         icon: 'none'
+        //     })
+        // }
     },
     handlePage(){
         if (!this.isReturn){
diff --git a/pages/plan/areaPlanMonth.vue b/pages/plan/areaPlanMonth.vue
new file mode 100644
index 0000000..2a94339
--- /dev/null
+++ b/pages/plan/areaPlanMonth.vue
@@ -0,0 +1,626 @@
+<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 scroll-y="true" style="width: 100%;height: 100%">
+            <view class="listItem" v-for="(item,index) in serviceDetailShowList" :key="index" @click="goPage(item)">
+              <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>
+          </scroll-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){
+        console.log(111)
+        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:'正在加载'})
+      console.log('this.searchTime',this.searchTime)
+      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()
+      console.log('this.serviceDetailList',this.serviceDetailList)
+    },
+    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=>{
+          console.log('item',item)
+          if (item.value === this.selectAreaValue){
+            this.selectAreaValue = item.value
+            this.selectAreaName = item.label
+          }
+        })
+        console.log('this.areaList',this.areaList)
+      }
+    },
+    // 点击跳转详情页
+    goPage(item){
+      console.log('item',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;
+          }
+        }
+      }
+    }
+  }
+  .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>
diff --git a/pages/plan/servicePlanMonth.vue b/pages/plan/servicePlanMonth.vue
new file mode 100644
index 0000000..e64b646
--- /dev/null
+++ b/pages/plan/servicePlanMonth.vue
@@ -0,0 +1,1045 @@
+<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>
+      <p class="pageTitle">服务区月度计划</p>
+
+      <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">
+                    <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">{{selectServiceName || '-'}}</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 class="itemTop" :style="{marginTop: selectDetail===index?'16px':'4px'}">
+                      <view class="left">
+                        <view class="detailContent">
+                          <view class="top">
+                            <span class="money">{{serviceDetailObj.RevenueMonth_Amount || '-'}}</span>
+                            <!--                            <image 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:serviceDetailObj.MonthGrowth_Rate >0?'#E83944':'#049E77'}">{{serviceDetailObj.MonthGrowth_Rate >0?'+':''}}{{serviceDetailObj.MonthGrowth_Rate|| '-' }}%</p>
+                        <text class="compare">比计划</text>
+                      </view>
+                    </view>
+                    <view class="itemBottom" :style="{marginTop: selectDetail===index?'20px':'4px'}">
+                      <view class="progress">
+                        <view class="have" :style="{width:serviceDetailObj.MonthBudget_Degree + '%'}"></view>
+                      </view>
+                      <view class="text">
+                        <span class="success">计划完成<span class="unit">/元</span></span>
+                        <span class="target">{{serviceDetailObj.BudgetMonth_Amount || '-'}}</span>
+                      </view>
+                    </view>
+                  </view>
+                  <view class="item" v-if="selectDetail!==index">
+                    <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">{{'-'}}</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 class="itemTop" :style="{marginTop: selectDetail===index?'16px':'4px'}">
+                      <view class="left">
+                        <view class="detailContent">
+                          <view class="top">
+                            <span class="money">{{'-'}}</span>
+<!--                            <image 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:serviceDetailObj.MonthGrowth_Rate >0?'#E83944':'#049E77'}">{{''}}{{'-' }}%</p>
+                        <text class="compare">比计划</text>
+                      </view>
+                    </view>
+                    <view class="itemBottom" :style="{marginTop: selectDetail===index?'20px':'4px'}">
+                      <view class="progress">
+                        <view class="have" :style="{width:serviceDetailObj.MonthBudget_Degree + '%'}"></view>
+                      </view>
+                      <view class="text">
+                        <span class="success">计划完成<span class="unit">/元</span></span>
+                        <span class="target">{{'-'}}</span>
+                      </view>
+                    </view>
+                  </view>
+                  <image class="detailLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/plan/detailLogo.svg"></image>
+                </view>
+              </view>
+            </swiper-item>
+          </block>
+        </swiper>
+      </view>
+    </view>
+
+    <view class="detail" :style="{height:`calc(100vh - 321px - ${menu.bottom + 6}px)`}">
+      <scroll-view scroll-y="true" style="height: calc(100% - 16px);width: 100%">
+        <view class="box" v-for="(item,index) in detailList" :key="index">
+          <p class="title">{{item.node.ACCOUNT_CODE}}</p>
+          <view class="top">
+            <image class="icon" :src="item.node.ACCOUNT_CODE==='营业收入'?'https://eshangtech.com/ShopICO/ahyd-BID/plan/mainWork.svg':item.node.ACCOUNT_CODE==='营业成本'?'https://eshangtech.com/ShopICO/ahyd-BID/plan/cost.svg':item.node.ACCOUNT_CODE==='毛利率'?'https://eshangtech.com/ShopICO/ahyd-BID/plan/gross.svg':''"></image>
+            <view class="sum">
+              <span class="money">{{item.node.REVENUE_AMOUNT || '-'}}</span>
+              <span class="text">总计<span class="unit">/元</span></span>
+            </view>
+            <image class="meng" :src="item.node.ACCOUNT_CODE==='营业收入'?'https://eshangtech.com/ShopICO/ahyd-BID/plan/mainWorkMeng.png':item.node.ACCOUNT_CODE==='营业成本'?'https://eshangtech.com/ShopICO/ahyd-BID/plan/costBg.png':item.node.ACCOUNT_CODE==='毛利率'?'https://eshangtech.com/ShopICO/ahyd-BID/plan/grossBg.png':''"></image>
+          </view>
+          <view v-for="(subItem,subIndex) in item.children" :key="subIndex">
+            <view class="smallTitle">
+              <span class="type">{{subItem.node.ACCOUNT_CODE}}<span class="unit">/元</span></span>
+              <span class="money">{{subItem.node.REVENUE_AMOUNT || '-'}}</span>
+            </view>
+            <view class="subItem" v-for="(thirdItem,thirdIndex) in subItem.children" :key="thirdIndex">
+              <view class="link" v-if="thirdIndex + 1 !== subItem.children.length"></view>
+              <view class="subTop">
+                <image class="icon" :src="`https://eshangtech.com/ShopICO/ahyd-BID/plan/${item.node.ACCOUNT_CODE==='营业收入'?thirdItem.node.ACCOUNT_CODE==='便利店'?'store'
+              :thirdItem.node.ACCOUNT_CODE==='餐饮（含小吃）'?'mainWorkFood'
+              :thirdItem.node.ACCOUNT_CODE==='客房及其他'?'mainWorkRoom':''
+              :item.node.ACCOUNT_CODE==='营业成本'?thirdItem.node.ACCOUNT_CODE==='便利店'?'costStore'
+              :thirdItem.node.ACCOUNT_CODE==='餐饮销售成本'?'costFood'
+              :thirdItem.node.ACCOUNT_CODE==='员工餐成本'?'costBook'
+              :thirdItem.node.ACCOUNT_CODE==='客房'?'costRoom':''
+              :item.node.ACCOUNT_CODE==='毛利率'?thirdItem.node.ACCOUNT_CODE==='综合毛利率 (不含员工餐)'?'grossAdd'
+              :thirdItem.node.ACCOUNT_CODE==='综合毛利率 (含员工餐)'?'grossUser'
+              :thirdItem.node.ACCOUNT_CODE==='便利店'?'grossStore'
+              :thirdItem.node.ACCOUNT_CODE==='餐饮'?'grossFood':'':''}.svg`"></image>
+                <span class="text">{{thirdItem.node.ACCOUNT_CODE}}</span>
+              </view>
+              <view class="subBox">
+                <view class="subType">
+                  <view class="upper">
+                    <view class="icon" :style="{background:item.node.ACCOUNT_CODE==='营业收入'?'#FF7D35':item.node.ACCOUNT_CODE==='营业成本'?'#1E80FF':'#7242DE'}"></view>
+                    <span class="subTitle">实际</span>
+                    <span class="unit">/元</span>
+                  </view>
+                  <span class="value">{{thirdItem.node.REVENUE_AMOUNT || '-'}}</span>
+                </view>
+                <view class="subTypeNoAfter">
+                  <view class="upper">
+                    <view class="icon" :style="{opacity: 0.4,background:item.node.ACCOUNT_CODE==='营业收入'?'#FF7D35':item.node.ACCOUNT_CODE==='营业成本'?'#1E80FF':'#7242DE'}"></view>
+                    <span class="subTitle">计划</span>
+                    <span class="unit">/元</span>
+                  </view>
+                  <span class="value">{{thirdItem.node.BUDGETDETAIL_AMOUNT || '-'}}</span>
+                </view>
+                <view class="progress">
+                  <view class="reality" v-if="thirdItem.node.Budget_Degree" :style="{width:thirdItem.node.Budget_Degree>=100?'100%':thirdItem.node.Budget_Degree + '%'}"></view>
+                  <view class="plan"></view>
+                  <view class="add">
+                    <image v-if="thirdItem.node.Budget_Degree" class="addIcon" :src="thirdItem.node.Budget_Degree>0?'https://eshangtech.com/ShopICO/ahyd-BID/plan/add.svg':'https://eshangtech.com/ShopICO/ahyd-BID/plan/reduce.svg'"></image>
+                    <span class="value" :style="{color:thirdItem.node.Budget_Degree>0?'#E83944':thirdItem.node.Budget_Degree<0?'#049E77':'#ccc'}">{{thirdItem.node.Budget_Degree  || '-'}}%</span>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </scroll-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="selectServiceId===item.value?'selectItem item':'item'" v-for="(item,index) in serviceList" :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'
+export default {
+  components:{
+    uniPopup
+  },
+  data(){
+    return{
+      menu:{},
+      serviceList:[],// 服务区选择列表
+      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,// 放大的月份详情
+      detailList:[{list:[1,2,3]},{list:[1,2,3]},{list:[1,2,3]},{list:[1,2,3]}],
+      serviceId:'',// 服务区ID
+      showPop:false,// 是否显示popup
+      selectAreaValue:'',// 选择的片区ID
+      selectServiceId:'',// 选择的服务区id
+      selectServiceName:'',// 选择的服务区名称
+      serviceDetailObj:{},// 服务区的详细信息
+    }
+  },
+  onLoad(query){
+    console.log(query)
+    // query 有id searchTime 片区名称和片区内码
+    //  获取手机参数对页面进行适配
+    this.menu = uni.getMenuButtonBoundingClientRect()
+    // 先拿到首页的时间 作为调用接口的统一时间  存的lastDay存当前月份的具体日期切换回本月的日期判断有用
+    if (query.search){
+      this.searchTime = query.search
+    }else{
+      this.searchTime = uni.getStorageSync('lastDay')
+    }
+    // 两个是一起的 一个有另一个一定有
+    if (query.selectAreaValue){
+      this.selectAreaValue = query.selectAreaValue
+    }
+    if (query.obj){
+      this.serviceDetailObj = JSON.parse(query.obj)
+      this.selectServiceName = this.serviceDetailObj.Serverpart_Name.split('服务区')[0]
+      this.selectServiceId = this.serviceDetailObj.Serverpart_ID
+    }
+    this.lastDay = uni.getStorageSync('lastDay')
+    // 拿到当前时间
+    console.log('this.searchTime',this.searchTime)
+    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
+    // 拿到服务区id
+    this.serviceId = query.id
+    // 拿到服务区列表
+    this.getServiceList()
+    this.getServiceDetail()
+  },
+  onReady(){
+    this.getThisMonth()
+  },
+  methods:{
+    getThisMonth(){
+      const date = new Date(this.searchTime)
+      const month = date.getMonth() + 1
+      this.selectMonth = month
+      this.selectMonthId = `item${month}`
+    },
+    handleDetailScroll(e){
+      console.log('e.detail.current',e.detail.current)
+      this.selectDetail = e.detail.current
+      this.selectMonth = e.detail.current + 1
+      const date = new Date(this.lastDay)
+      let y = date.getFullYear()
+      let m = date.getMonth() + 1
+      let d = date.getDate()
+      if (m === e.detail.current + 1){
+        this.searchTime=this.lastDay
+      }else{
+        let month = e.detail.current + 1
+        if (month<10){
+          month = '0' + month
+        }
+        this.searchTime = `${y}-${month}`
+      }
+      // 拿到列表
+      this.getServiceDetail()
+      // 拿到卡片详情
+      this.handleServiceDetail()
+    },
+    handleBack(){
+      uni.navigateBack({
+        delta: 1
+      });
+    },
+    async getServiceDetail(){
+      let req = {}
+      const date = new Date(this.searchTime)
+      let y = date.getFullYear()
+      let m = date.getMonth() + 1
+
+      const nowDate = new Date(this.lastDay)
+      let nowY = nowDate.getFullYear()
+      let nowM = nowDate.getMonth() + 1
+      if (m === nowM && y === nowY){
+        if (m<10){
+          m = '0' + m
+        }
+        req = {
+          BUDGETPROJECT_YEAR: y,
+          STATISTICS_MONTH:`${y}${m}`,
+          SERVERPART_ID:this.serviceId,
+          ACCOUNT_CODE:'6001,6401,6402',
+          STATISTICS_DATE: this.lastDay
+        }
+      }else{
+        if (m<10){
+          m = '0' + m
+        }
+        req = {
+          BUDGETPROJECT_YEAR: y,
+          STATISTICS_MONTH:`${y}${m}`,
+          SERVERPART_ID:this.serviceId,
+          ACCOUNT_CODE:'6001,6401,6402',
+        }
+      }
+      const totalData = await request.$webGet('CommercialApi/Budget/GetBudgetProjectDetailList',req)
+      console.log(totalData)
+      this.detailList = totalData.Result_Data.List
+      // 千分号格式化处理数字
+      this.detailList.forEach(item=>{
+        if (item.children){
+          item.children = this.editData(item.children)
+          if (item.node.ShowRevenue_Amount){
+            item.node.REVENUE_AMOUNT  = item.node.REVENUE_AMOUNT  ? this.$util.fmoney(item.node.REVENUE_AMOUNT ):''
+            item.node.REVENUE_AMOUNT = this.$util.fmoney(item.node.REVENUE_AMOUNT)
+          }
+        }else{
+          if (item.node.REVENUE_AMOUNT){
+            item.node.REVENUE_AMOUNT  = item.node.REVENUE_AMOUNT  ? this.$util.fmoney(item.node.REVENUE_AMOUNT ):''
+            item.node.REVENUE_AMOUNT = this.$util.fmoney(item.node.REVENUE_AMOUNT)
+          }else{
+            item.node.REVENUE_AMOUNT  = '-'
+          }
+        }
+      })
+      console.log('this.detailList',this.detailList)
+    },
+    // 获取服务区详情信息
+    async handleServiceDetail(){
+      uni.showLoading({title:'正在加载'})
+      let reqTime = ''
+      const date = new Date(this.searchTime)
+      let y = date.getFullYear()
+      let m = date.getMonth() + 1
+
+      const nowDate = new Date(this.lastDay)
+      let nowY = nowDate.getFullYear()
+      let nowM = nowDate.getMonth() + 1
+      if (m === nowM && y === nowY){
+        reqTime= this.lastDay
+      }else{
+        let d = this.$util.getThisMonthDay(this.searchTime)
+        reqTime=`${y}-${m}-${d}`
+      }
+      let req = {
+        Province_Code:'340000',
+        Statistics_Date:reqTime,
+        Serverpart_ID:this.selectServiceId,
+        SPRegionType_ID:this.selectAreaValue
+      }
+      const data = await request.$webGet('CommercialApi/Revenue/GetRevenueBudget',req)
+      this.serviceDetailObj = data.Result_Data
+      for (let key in this.serviceDetailObj){
+        for (let key in this.serviceDetailObj){
+          if (key==='RevenueMonth_Amount' || key==='BudgetMonth_Amount'){
+            this.serviceDetailObj[key] = this.$util.fmoney(this.serviceDetailObj[key])
+          }
+        }
+      }
+      uni.hideLoading()
+    },
+    // 点击月份切换月份
+    handleSelectMonth(value){
+      this.selectMonth = value
+      this.selectMonthId = `item${value}`
+      this.selectDetail = value - 1
+    },
+    // 递归处理数据
+    editData(value){
+      value.forEach(item=>{
+        if (item.children){
+          item.children = this.editData(item.children)
+          if (item.node.ShowRevenue_Amount){
+            item.node.REVENUE_AMOUNT  = item.node.REVENUE_AMOUNT  ? this.$util.fmoney(item.node.REVENUE_AMOUNT ) :''
+            item.node.REVENUE_AMOUNT = this.$util.fmoney(item.node.REVENUE_AMOUNT)
+          }
+        }else{
+          item.children = [{},{},{}]
+          if (item.node.REVENUE_AMOUNT ){
+            item.node.REVENUE_AMOUNT  = item.node.REVENUE_AMOUNT  ? this.$util.fmoney(item.node.REVENUE_AMOUNT ) :''
+            item.node.REVENUE_AMOUNT = this.$util.fmoney(item.node.REVENUE_AMOUNT)
+          }else{
+            item.node.REVENUE_AMOUNT  = '-'
+          }
+        }
+      })
+      return value
+    },
+    // 是否显示弹出框
+    handleShowPopup(){
+      this.showPop = true
+    },
+    // 弹出框点击蒙层关闭
+    hidePopup(){
+      this.showPop = false
+    },
+    // 修改当前选中的片区
+    handleChangeArea(item){
+      // 选择的片区名称和片区id
+      this.selectServiceId = item.value
+      this.selectServiceName = item.label.split('服务区')[0]
+      this.handleServiceDetail()
+      // 关闭弹出框方法
+      this.hidePopup()
+    },
+    async getServiceList(){
+      const req = {
+        StatisticsDate:this.searchTime,
+        ProvinceCode:'340000',
+        StatisticsType:4,
+        SPRegionTypeID:this.selectAreaValue
+      }
+      const data = await request.$webGet('CommercialApi/Revenue/GetProvinceRevenueBudget',req)
+      let list = []
+      data.Result_Data.RegionBudgetList.forEach(item=>{
+        list.push({label:item.Serverpart_Name,value:item.Serverpart_ID})
+      })
+      this.serviceList = list
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+@import '/static/public/font/stylesheet.css';
+.main{
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  .header{
+    width: 100%;
+    padding-bottom: 32px;
+    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;
+      }
+    }
+    .pageTitle{
+      font-size: 28px;
+      font-family: Alimama ShuHeiTi;
+      color: #160002;
+      line-height: 39px;
+      text-shadow: 0  4px 8px rgba(129,36,7,0.2);
+      background: linear-gradient(180deg, #FEFFFE 40%, #FFBEAA 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      margin: 12px 0 0 16px;
+    }
+    .monthTabs{
+      width: calc(100% - 32px);
+      height: 34px;
+      border-radius: 17px;
+      box-sizing: border-box;
+      border: 1px solid #FFA98D;
+      background: linear-gradient(180deg, #FC6C3F 0%, #FFAC91 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: #FFCFC0;
+          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: 188px;
+      margin-top: 12px;
+      .swiper{
+        width: 100%;
+        height: 188px;
+        .swiper-item{
+          .box{
+            width: 100%;
+            height: 100%;
+            .detail{
+              position: relative;
+              width: calc(100% - 20px);
+              height: 100%;
+              background: linear-gradient(314deg, #FFF7E4 0%, #F5F2FF 32%, #FFFAFA 54%, #FFF6F3 70%, #FFE4D9 100%);              margin-left: 10px;
+              border-radius: 8px;
+              box-sizing: border-box;
+              padding: 16px;
+              margin-top: 16px;
+              z-index: 1;
+              .detailLogo{
+                width: 97px;
+                height: 103px;
+                position: absolute;
+                z-index:1;
+                top: 16px;right: 30px;
+                opacity: 0.6;
+              }
+              .item{
+                position: absolute;
+                top: 0; left: 0;
+                width: 100%;
+                height: 100%;
+                box-sizing: border-box;
+                padding: 16px;
+                z-index: 99;
+                .picker{
+                  .selectService{
+                    display: flex;
+                    align-items: center;
+                    .img{
+                      width: 40px;
+                      height: 40px;
+                      z-index: 2;
+                    }
+                    .select{
+                      height: 32px;
+                      min-width: 110px;
+                      background: linear-gradient(270deg, #FFE8DE 0%, #FFDFD1 100%);
+                      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;
+                      }
+
+                    }
+                  }
+                }
+                .itemTop{
+                  margin-top: 16px;
+                  width: 100%;
+                  display: flex;
+                  justify-content: space-between;
+                  .left{
+                    display: flex;
+                    .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;
+                      color: #E83944;
+                      line-height: 24px;
+                    }
+                    .compare{
+                      font-size: 14px;
+                      font-family: PingFangSC-Regular, PingFang SC;
+                      font-weight: 400;
+                      color: #A69E9F;
+                      line-height: 18px;
+                    }
+                  }
+                }
+                .itemBottom{
+                  .progress{
+                    width: 100%;
+                    height: 10px;
+                    background: #FBD9CD;
+                    border-radius: 5px;
+                    position: relative;
+                    overflow: hidden;
+                    .have{
+                      height: 100%;
+                      position: absolute;
+                      left: 0;
+                      top: 0;
+                      background: #FF6D40;
+                      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: 151px;
+              margin-top: 30px;
+            }
+
+          }
+        }
+      }
+    }
+  }
+  .detail{
+    width: 100%;
+    transform: translateY(-16px);
+    background: #fff;
+    border-radius: 16px 16px 2px 2px;
+    padding-top: 16px;
+    box-sizing: border-box;
+    .box{
+      width: 100%;
+      background: #fff;
+      border-radius: 16px 16px 2px 2px;
+      box-sizing: border-box;
+      padding: 8px 16px 16px;
+      position: relative;
+      .title{
+        font-size: 17px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #160002;
+        line-height: 24px;
+      }
+      .top{
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 12px;
+        position: relative;
+        border-bottom: 1px solid #EEEEEE;
+        padding-bottom: 16px;
+        .icon{
+          width: 48px;
+          height: 48px;
+        }
+        .sum{
+          display: flex;
+          flex-direction: column;
+          align-items: flex-end;
+          .money{
+            font-size: 20px;
+            font-family: DINAlternate-Bold, DINAlternate;
+            font-weight: bold;
+            color: #160002;
+            line-height: 24px;
+          }
+          .text{
+            font-size: 14px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #160002;
+            line-height: 20px;
+            margin-top: 4px;
+            .unit{
+              font-size: 14px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #A69E9F;
+              line-height: 20px;
+              margin-left: 2px;
+            }
+          }
+        }
+        .meng{
+          position: absolute;
+          width: 80px;
+          height: 80px;
+          right: 0;top: -30px;
+        }
+      }
+      .smallTitle{
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        margin-top: 16px;
+        margin-bottom: 16px;
+        .type{
+          font-size: 14px;
+          font-family: PingFangSC-Semibold, PingFang SC;
+          font-weight: 600;
+          color: #160002;
+          line-height: 20px;
+          .unit{
+            font-weight: 400;
+            color: #A69E9F;
+            margin-left: 2px;
+          }
+        }
+        .money{
+          font-size: 16px;
+          font-family: DINAlternate-Bold, DINAlternate;
+          font-weight: bold;
+          color: #160002;
+          line-height: 20px;
+        }
+      }
+      .subItem{
+        margin-bottom: 20px;
+        position: relative;
+        .link{
+          position: absolute;
+          left: 12px;top: 24px;
+          width: 2px;
+          height: 110px;
+          background: #E6E6E6;
+        }
+        .subTop{
+          width: 100%;
+          display: flex;
+          align-items: center;
+          margin-bottom: 6px;
+          .icon{
+            width: 24px;
+            height: 24px;
+          }
+          .text{
+            font-size: 28rpx;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #160002;
+            margin-left: 8px;
+            line-height: 24px;
+          }
+        }
+        .subBox{
+          width: calc(100vw - 64px);
+          height: 80px;
+          background: #F5F5F5;
+          box-sizing: border-box;
+          margin-left: 32px;
+          border-radius: 8rpx;
+          display: flex;
+          .subType,.subTypeNoAfter{
+            width: 33%;
+            height: 100%;
+            box-sizing: border-box;
+            padding: 16px 12px;
+            position: relative;
+            .upper{
+              display: flex;
+              align-items: center;
+              margin-bottom: 16rpx;
+              .icon{
+                width: 12rpx;
+                height: 12rpx;
+                border-radius: 50%;
+              }
+              .subTitle{
+                font-size: 28rpx;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #160002;
+                line-height: 40rpx;
+                margin-left: 4px;
+              }
+              .unit{
+                font-size: 28rpx;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #A69E9F;
+                line-height: 40rpx;
+                margin-left: 2px;
+              }
+            }
+            .value{
+              font-size: 27rpx;
+              font-family: DINAlternate-Bold, DINAlternate;
+              font-weight: bold;
+              color: #160002;
+              line-height: 40rpx;
+            }
+          }
+          .subType:after{
+            content:'';
+            width: 1px;
+            height: 50px;
+            background: #E6E6E6;
+            border-radius: 1px;
+            position: absolute;
+            right: 0;top: 15px;
+          }
+          .progress{
+            width: 34%;
+            height: 100%;
+            box-sizing: border-box;
+            padding: 16px 10px;
+            .reality{
+              height: 6px;
+              background: #FF7D35;
+              border-radius: 4px;
+            }
+            .plan{
+              width: 40px;
+              height: 6px;
+              background: #FF7D35;
+              border-radius: 4px;
+              opacity: 0.4;
+              margin-top: 4px;
+            }
+            .add{
+              margin-top: 12px;
+              display: flex;
+              align-items: center;
+              .addIcon{
+                width: 14px;
+                height: 14px;
+              }
+              .value{
+                font-size: 32rpx;
+                font-family: DINAlternate-Bold, DINAlternate;
+                font-weight: bold;
+                line-height: 40rpx;
+                margin-left: 2px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .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>
diff --git a/pages/projectWarning/detail.vue b/pages/projectWarning/detail.vue
index f816bfc..2e2af28 100644
--- a/pages/projectWarning/detail.vue
+++ b/pages/projectWarning/detail.vue
@@ -123,6 +123,7 @@ export default {
     },
   //页面关闭
   onUnload() {
+    console.log('页面关闭')
     // 记录用户行为
     this.$util.addUserBehaviorNew()
   },