From 6c70d3c75d92ed2bff4bc0b3ccfa7c7684fa2d71 Mon Sep 17 00:00:00 2001
From: cclu <1106109051@qq.com>
Date: Mon, 5 Feb 2024 18:45:42 +0800
Subject: [PATCH] update

---
 pages.json                                    |   4 +-
 pages/commercialBI/map.vue                    | 467 ++++++++++++++-
 pages/commercialBI/specialCase.vue            | 563 ++++++++++++------
 .../js_sdk/u-charts/config-ucharts.js         |  18 +-
 pages/nationalPage/springTravel.vue           |   2 +-
 pages/nationalPage/testPage.vue               | 392 ++++++------
 6 files changed, 1049 insertions(+), 397 deletions(-)

diff --git a/pages.json b/pages.json
index 0733249..2fcabba 100644
--- a/pages.json
+++ b/pages.json
@@ -274,7 +274,9 @@
                 {
                     "path": "map",
                     "style": {
-                        "navigationBarTitleText": ""
+                        "navigationBarTitleText": "",
+                        "navigationStyle": "custom",
+                        "disableScroll": true
                     }
                 },
                 {
diff --git a/pages/commercialBI/map.vue b/pages/commercialBI/map.vue
index 94b080a..b1e7419 100644
--- a/pages/commercialBI/map.vue
+++ b/pages/commercialBI/map.vue
@@ -1,9 +1,78 @@
 <template>
-  <view class="mapView">
-    <map  id="myMap" :longitude="longitude" :latitude="latitude" :markers="markers" class="map" show-location></map>
+  <view class="main">
+    <view class="header" :style="{height:menu.height + menu.top + 'px',top:0+'px'}">
+      <image :style="{bottom: ((statusBarHeight-24)/4)+'px' }" class="backArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg" @click="handleBack"/>
+    </view>
+    <view class="mapView">
+      <map id="myMap" :longitude="longitude" :latitude="latitude" :markers="markers" class="map" show-location></map>
+    </view>
+
+    <view class="listBox" :style="{height:showMore?`calc(100vh - ${menu.bottom + 14}px)`:'calc(100vh - 680rpx)',transform:showMore?`translateY(-${340 - menu.bottom - 14}px)`:'translateY(-32rpx)'}">
+      <view class="listTop"></view>
+      <view class="contentList">
+        <view class="expand" @click="handleChangeShowMore">
+          <img class="showMore" :style="{transform: showMore?'rotate(90deg)':'rotate(-90deg)'}" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/goMore.svg"/>
+        </view>
+        <view class="contentTop">
+          <span class="listTitle">商家营收</span>
+
+<!--          <view class="typeChangeBox">-->
+<!--            <view :class="pageType===1?'normal select':'normal'" @click="handleChangeType(1)">按天统计</view>-->
+<!--            <view :class="pageType===2?'normal select':'normal'" @click="handleChangeType(2)">累计统计</view>-->
+<!--          </view>-->
+        </view>
+
+<!--        <view class="navBigList" v-if="pageType===1">-->
+<!--          &lt;!&ndash;            <div class="allBox">&ndash;&gt;-->
+<!--          &lt;!&ndash;              <div :class="currentScroll==='all'?'scrollItem selectItem':'scrollItem'" @click="handleChangeTime('all')">累计</div>&ndash;&gt;-->
+<!--          &lt;!&ndash;            </div>&ndash;&gt;-->
+<!--          <scroll-view scroll-x="true" class="navList" :scrollIntoView="currentScroll" :scroll-with-animation="true">-->
+<!--            <view :class="currentScroll==='item'+item.value?'scrollItem selectItem':'scrollItem'" v-for="(item,index) in scrollList" :key="index" :id="'item'+item.value" @click="handleChangeTime(item.value)">{{item.label}}</view>-->
+<!--          </scroll-view>-->
+<!--        </view>-->
+
+<!--        <view class="listTitle">-->
+<!--          <view class="titleItem"></view>-->
+<!--        </view>-->
+        <scroll-view v-if="dataList && dataList.length>0" scroll-y="true"  class="list" :style="{height:showMore?'calc(100% - 40px)':'calc(100% - 40px)'}">
+            <view class="listItem" v-for="(item,index) in dataList" :key="index">
+              <view class="leftItem">
+                <img class="img" :src="item.Brand_ICO?item.Brand_ICO:'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/defaultShopIcon.png'"/>
+              </view>
+              <view class="rightItem">
+                <view class="itemTop">
+                  <view class="itemTitle">{{ item.Brand_Name || '' }}</view>
+                  <span class="type">{{item.BrandType_Name || ''}}</span>
+                </view>
+                <view class="itemBox" v-if="item.Bussiness_Name">
+                  <img class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/shop.svg"/>
+                  <span class="name">{{item.Bussiness_Name || ''}}</span>
+                </view>
+                <view class="itemBox" v-if="item.Bussiness_Time">
+                  <img class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/time.svg"/>
+                  <span class="name">{{item.Bussiness_Time || ''}}</span>
+                </view>
+                <view class="otherItem">
+                  <span class="other">{{item.Bussiness_State==='1000'?'运营中':'已暂停'}}</span>
+                  <span class="other">{{item.Business_Trade|| ''}}</span>
+                </view>
+                <view class="curRevenue">
+                  <span class="label">实时营收：</span>
+                  <span class="value">{{item.CurRevenue?$util.getMoney(item.CurRevenue):''}}</span>
+                </view>
+              </view>
+            </view>
+        </scroll-view>
+        <view v-else class="noDataBox" :style="{height:showMore?'calc(100% - 40px)':'calc(100% - 40px)'}">
+          <img class="noDataImg" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/noData.svg"/>
+          <text class="noDataText">暂无数据</text>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 <script>
+import request from '@/util/index.js'
 export default {
   name: "map",
   data(){
@@ -11,13 +80,35 @@ export default {
       longitude:'',
       latitude:'',
       markers:{},// 标点
-      id:''
+      id:'',
+      statusBarHeight:0,
+      menu:{},
+      pageType: 1,
+      currentScroll:'',
+      scrollList:[],
+      nowDay:'',
+      dataList:[],//
+      showMore: false,// 是否展开
+      curYear:'',
+      compareYear:''
     }
   },
   onLoad(query){
+    //  获取手机参数对页面进行适配
+    let systemInfo = uni.getSystemInfoSync()
+    this.statusBarHeight = Number(systemInfo.statusBarHeight)
+    this.menu = uni.getMenuButtonBoundingClientRect()
+
     console.log('query',query)
-    this.longitude = query.longitude
-    this.latitude = query.latitude
+    if (!query.longitude || !query.latitude){
+      let seat = uni.getStorageSync('seatInfo')
+      this.longitude = seat.longitude
+      this.latitude = seat.latitude
+    }else{
+      this.longitude = query.longitude
+      this.latitude = query.latitude
+    }
+
     this.id=query.id
     let markers = []
     markers.push({
@@ -28,6 +119,103 @@ export default {
     })
     // }
     this.markers = markers
+
+    const date = new Date()
+    let y = date.getFullYear()
+    let m = date.getMonth() + 1
+    let d = date.getDate()
+    if (m<10){
+      m = '0' + m
+    }
+    if (d<10){
+      d = '0' + d
+    }
+    // this.nowDay = `${y}-${m}-${d}`
+    // this.currentScroll = 'item'+ this.nowDay
+    // 拿到是春运开始的第几天
+    let dayNumber = 0
+    this.curYear = y
+    this.compareYear = y - 1
+    // 24年春运开始时间为 1.26
+    let mNumber = date.getMonth() + 1
+    let dNumber = date.getDate()
+    if (mNumber === 1){
+      dayNumber = mNumber - 26 + 1
+    }else{
+      dayNumber = 6 + dNumber
+    }
+    this.howDayNumber = dayNumber
+    console.log('dayNumber',dayNumber)
+    // let dateList = []
+    // for (let i = 1;i<=dayNumber;i++){
+    //   if (i<7){
+    //     dateList.push({label:`第${i}天`,value:`2024-01-${26+i-1}`})
+    //   }else{
+    //     dateList.push({label:`第${i}天`,value:`2024-02-${i - 7 + 1<10?`0${i - 7 + 1}`:i - 7 + 1}`})
+    //   }
+    // }
+    // this.scrollList = dateList
+    // 请求页面数据
+    this.handleGetData()
+  },
+  methods:{
+    handleBack(){
+      uni.navigateBack({
+        delta: 1
+      });
+    },
+    handleChangeType(value){
+      this.pageType = value
+    },
+    handleChangeTime(date){
+      this.currentScroll = 'item'+ date
+      this.handleGetData()
+    },
+    async handleGetData(date){
+      uni.showLoading({
+        title:'加载中'
+      })
+      let time = date?
+          date==='all'?this.nowDay:
+              this.currentScroll.split('item')[1]:
+          this.currentScroll.split('item')[1]
+
+      let req = {
+        ProvinceCode:'340000',
+        Serverpart_ID:this.id,
+        Statistics_Date:time,
+      }
+      let data = await request.$webGet('CommercialApi/BaseInfo/GetBrandAnalysis',req)
+      if (data.Result_Code===100){
+        let list = data.Result_Data.ShopBrandList
+        let resList = []
+        list.forEach(item=>{
+          if (item.CurRevenue){
+            resList.push(item)
+          }
+        })
+
+        this.dataList = this.handleSortList(resList)
+        console.log('dataList',this.dataList)
+      }
+      uni.hideLoading()
+    },
+    handleChangeShowMore(){
+      this.showMore = !this.showMore
+    },
+    handleSortList(list){
+      var len = list.length;
+      for (var i = 0; i < len - 1; i++) {
+        for (var j = 0; j < len - 1 - i; j++) {
+          if (list[j].CurRevenue < list[j + 1].CurRevenue){
+            var temp = list[j];
+            list[j] = list[j + 1];
+            list[j + 1] = temp;
+          }
+        }
+      }
+      return list
+    }
   }
 }
 </script>
@@ -35,12 +223,273 @@ export default {
 
 
 <style scoped lang="scss">
-.mapView{
-  width: 100vw;
+.main{
+  width: 100%;
   height: 100vh;
-  .map{
+  background: #fff;
+  .header{
+    position: fixed;
     width: 100%;
-    height: 100%;
+    padding: 0 16px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    z-index: 2;
+    .backArrow{
+      width: 24px;
+      height: 24px;
+      margin-right: 16px;
+      position: absolute;
+    }
+  }
+  .mapView{
+    width: 100vw;
+    height: 680rpx;
+    .map{
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .listBox{
+    width: 100%;
+    background: #fff;
+    border-radius: 32rpx 32rpx 0 0;
+    transform: translateY(-32rpx);
+    padding: 4rpx;
+    box-sizing: border-box;
+    position: relative;
+    .listTop{
+      position: absolute;
+      top: 4rpx;left: 4rpx;
+      width: calc(100% - 8rpx);
+      height: 212rpx;
+      border-radius: 32rpx 32rpx 0 0;
+      overflow: hidden;
+      background: linear-gradient(360deg, rgba(230,238,255,0) 0%, #E6EEFF 100%);;
+    }
+    .contentList{
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 4rpx;left: 4rpx;
+      box-sizing: border-box;
+      padding: 28rpx 30rpx;
+      .expand{
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .showMore{
+          width: 32rpx;
+          height: 32rpx;
+        }
+      }
+      .contentTop{
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .listTitle{
+          font-size: 32rpx;
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 600;
+          color: #1E2535;
+          line-height: 44rpx;
+        }
+        .typeChangeBox{
+          display: flex;
+          align-items: center;
+          background: #FFFFFF;
+          border-radius: 6rpx;
+          box-sizing: border-box;
+          padding: 4rpx;
+          .normal{
+            font-size: 24rpx;
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            color: #786B6C;
+            line-height: 36rpx;
+            padding: 6rpx 16rpx;
+          }
+          .select{
+            font-size: 24rpx;
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            color: #160002;
+            line-height: 36rpx;
+            background: #EFEFF5;
+            border-radius: 6rpx;
+          }
+        }
+      }
+      .navBigList{
+        width: 100%;
+        height: 40rpx;
+        display: flex;
+        align-items: center;
+        margin-top: 32rpx;
+        .navList{
+          width: 100%;
+          height: 40rpx;
+          display: flex;
+          align-items: center;
+          white-space: nowrap;
+          padding-bottom: 24rpx;
+          border-bottom: 1px solid #F5F4F4;
+          .scrollItem{
+            font-size: 28rpx;
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            color: #A69E9F;
+            line-height: 40rpx;
+            margin-right: 32rpx;
+            display: inline-block;
+          }
+          .selectItem{
+            font-size: 28rpx;
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 600;
+            color: #2363FF;
+            line-height: 40rpx;
+          }
+        }
+      }
+      //.listTitle{
+      //  display: flex;
+      //  align-items: center;
+      //  .titleItem{
+      //    font-size: 28rpx;
+      //    font-family: PingFangSC, PingFang SC;
+      //    font-weight: 400;
+      //    color: #A69E9F;
+      //    line-height: 40rpx;
+      //  }
+      //}
+      .list{
+        width: 100%;
+        margin-top: 16rpx;
+        .listItem{
+          width: 100%;
+          box-sizing: border-box;
+          padding: 32rpx 24rpx;
+          border-radius: 16rpx;
+          background: #F8F9F9;
+          display: flex;
+          //align-items: center;
+          margin-bottom: 24rpx;
+          .leftItem{
+            width: 120rpx;
+            height: 120rpx;
+            border-radius: 16rpx;
+            overflow: hidden;
+            margin-right: 24rpx;
+            .img{
+              width: 100%;
+              height: 100%;
+            }
+          }
+          .rightItem{
+            width: calc(100% - 144rpx);
+            .itemTop{
+              width: 100%;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              .itemTitle{
+                font-size: 34rpx;
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 400;
+                color: #160002;
+                line-height: 48rpx;
+                margin-bottom: 4rpx;
+              }
+              .type{
+                display: inline-block;
+                padding: 2rpx 8rpx;
+                background: #EDF0F4;
+                border-radius: 4rpx;
+                font-size: 24rpx;
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 400;
+                color: #786B6C;
+                line-height: 36rpx;
+              }
+            }
+            .itemBox{
+              display: flex;
+              //align-items: center;
+              margin-bottom: 4rpx;
+              .icon{
+                width: 32rpx;
+                height: 32rpx;
+                margin-right: 8rpx;
+                margin-top: 4rpx;
+              }
+              .name{
+                font-size: 24rpx;
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 400;
+                color: #786B6C;
+                line-height: 36rpx;
+              }
+            }
+            .otherItem{
+              display: flex;
+              align-items: center;
+              .other{
+                display: inline-block;
+                padding: 2rpx 8rpx;
+                background: #EDF0F4;
+                border-radius: 4rpx;
+                font-size: 24rpx;
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 400;
+                color: #786B6C;
+                line-height: 36rpx;
+                margin-right: 16rpx;
+              }
+            }
+            .curRevenue{
+              display: flex;
+              align-items: center;
+              margin-top: 24rpx;
+              justify-content: flex-end;
+              //justify-content: space-between;
+              .label{
+                font-size: 24rpx;
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 400;
+                color: #786B6C;
+                line-height: 36rpx;
+              }
+              .value{
+                font-size: 40rpx;
+                font-family: DINAlternate, DINAlternate;
+                font-weight: bold;
+                color: #FACB7F;
+                line-height: 40rpx;
+              }
+            }
+          }
+        }
+      }
+      .noDataBox{
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        .noDataImg{
+          width: 120rpx;
+          height: 120rpx;
+        }
+        .noDataText{
+
+        }
+      }
+    }
   }
 }
+
 </style>
diff --git a/pages/commercialBI/specialCase.vue b/pages/commercialBI/specialCase.vue
index 42e3198..dca0086 100644
--- a/pages/commercialBI/specialCase.vue
+++ b/pages/commercialBI/specialCase.vue
@@ -1,21 +1,21 @@
 <template>
   <div class="main">
     <div class="top">
-        <image class="bg" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/specialBg.png"/>
+        <img class="bg" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/specialBg.png"/>
         <div class="header" :style="{height:menu.height + 'px',top:menu.top+'px'}">
           <image class="backArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg" @click="handleBack"/>
           <div class="timeSelect">
-            <img class="selectIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectDate.png"/>
+<!--            <img class="selectIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectDate.png"/>-->
             <picker mode="date" :value="searchText"  :end="lastDay" @change="bindDateChange" >
               <view class="time">
                 <view class="text">{{ searchText }}</view>
-                <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/arrow_bottom.svg"></image>
+                <img class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/timeDown.png"/>
               </view>
             </picker>
           </div>
         </div>
         <div class="topBox">
-          <div class="boxLeft" style="width: 100%">
+          <div class="boxLeft">
             <div class="headerTitle">实时分析</div>
 <!--            注: 1个小时入区流量比5月同一时间流量增幅150%以上且每小时入区车辆超过100辆-->
               <span class="notice" v-if="selectTab===1">{{ `注: 1个小时入区流量比${showMonth}月同一时间流量增幅150%以上且每小时入区车辆超过100辆` }}</span>
@@ -23,166 +23,96 @@
           </div>
           <div class="boxRight">
             <span class="day">{{showDay}}</span>
-            <image class="dayBox" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/dayBox.png"/>
+            <img class="dayBox" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/dateBg.png"/>
           </div>
         </div>
     </div>
 
     <div class="content">
       <div class="contentTab">
-        <div :class="selectTab===1?'selectTab tabItem':'tabItem'" @click="handleTab(1)">{{`${startTime}时入区车流预警`}}</div>
-        <div :class="selectTab===2?'selectTab tabItem':'tabItem'" @click="handleTab(2)">{{endTime===24?`${endTime - 1}-0时入区车流排行`:`0-${startTime}时入区车流排行`}}</div>
+        <div :class="selectTab===1?'selectTab tabItem':'tabItem'" @click="handleTab(1)">
+          <span>{{`${startTime}时入区车流预警`}}</span>
+        </div>
+        <div :class="selectTab===2?'selectTab2 tabItem':'tabItem'" @click="handleTab(2)">
+          <span>
+            {{endTime===24?`${endTime - 1}-0时入区车流排行`:`0-${startTime}时入区车流排行`}}
+          </span>
+        </div>
       </div>
 <!--      <div class="noticeBox">-->
 
 <!--      </div>-->
-
-      <scroll-view  class="listBigBox" :scroll-y="true">
-        <div class="listItem" v-for="(item,index) in tableList" :key="index" >
-          <div class="itemLeft" >
-            <image class="bg" src="https://eshangtech.com/ShopICO/ahyd-BID/car/itemLeftBg.svg"/>
-            <view class="nameBox">
-              <text class="serviceName">{{item.name}}</text>
-              <text class="serviceLabel">{{item.SERVERPART_REGION + '区'}}</text>
-            </view>
+      <div class="contentList">
+        <div class="sortBox">
+          <div class="sortItem" :style="{width:'calc(100% - 330rpx)'}">服务区</div>
+          <div class="sortItem">
+            <span class="sortItemText" @click="handleChangeSort(1)">当月</span>
+            <img class="sortIcon" :style="{transform:sortType===1?'':`rotate(-180deg)`}" :src="sortNumber===1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectSortIcon.png':'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/sortIcon.png'"/>
           </div>
-          <div class="contentRight">
-            <div class="rightTop">
-              <view class="rightTopLeft">
-                <view class="indexBox" :style="{backgroundImage:`url(${index===0?'https://eshangtech.com/ShopICO/ahyd-BID/car/1stBg.svg':index===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/2stBg.svg':index===2?'https://eshangtech.com/ShopICO/ahyd-BID/car/3stBg.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/4stBg.svg'})`}">{{index+1}}</view>
-<!--                <text class="areaName">{{item.SPRegionType_Name||'-'}}</text>-->
-              </view>
-              <view class="rightTopRight">
-                <image class="addIcon" :src="Number(item.VEHICLE_RATE)>100?'/static/images/examine/add.svg':Number(item.VEHICLE_RATE)===100?'':'/static/images/examine/reduce.svg'"/>
-                <span class="add">{{item.VEHICLE_RATE}}%</span>
+          <div class="sortItem">
+            <span class="sortItemText" @click="handleChangeSort(2)">月均</span>
+            <img class="sortIcon" :style="{transform:sortType===1?'':`rotate(-180deg)`}" :src="sortNumber===2?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectSortIcon.png':'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/sortIcon.png'"/>
+          </div>
+          <div class="sortItem">
+            <span class="sortItemText" @click="handleChangeSort(3)">增幅</span>
+            <img class="sortIcon" :style="{transform:sortType===1?'':`rotate(-180deg)`}" :src="sortNumber===3?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectSortIcon.png':'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/sortIcon.png'"/>
+          </div>
+        </div>
+        <div class="unitBox" v-if="selectTab===2">
+          <span class="unit">单位：万辆</span>
+        </div>
+
+        <scroll-view  class="listBigBox" :style="{height:selectTab===1?'calc(100ch - 320px)':'calc(100ch - 356px)'}" :scroll-y="true">
+          <div class="listItem" v-for="(item,index) in tableList" :key="index" >
+            <div class="itemLeft" >
+              <image class="bg" src="https://eshangtech.com/ShopICO/ahyd-BID/car/itemLeftBg.svg"/>
+              <view class="nameBox">
+                <text class="serviceName">{{item.name}}</text>
+                <text class="serviceLabel">{{item.SERVERPART_REGION + '区'}}</text>
               </view>
             </div>
-            <div class="rightBottom">
-              <view class="rightBottomItem">
-                <text class="itemLabel">当前车流 /辆</text>
-                <text class="itemValue">{{ item.VEHICLE_COUNT  || '-'}}</text>
-              </view>
-              <view class="rightBottomItem">
-                <text class="itemLabel">月均车流 /辆</text>
-                <text class="itemValue">{{item.MONTHVEHICLE_COUNT || '-'}}</text>
-              </view>
-              <view class="rightBottomItem">
-                <text class="itemLabel"></text>
+            <div class="contentRight">
+              <div class="rightTop">
+                <view class="rightTopLeft">
+                  <img class="NoIcon" v-if="index<=2" :src="index===0?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/No1.png':index===1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/No2.png':index===2?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/No3.png':''"/>
+                  <view class="otherIcon" v-else>{{index+1}}</view>
+<!--                  <view class="indexBox" :style="{backgroundImage:`url(${index===0?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/No1.svg':index===1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/No2.svg':index===2?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/No3.svg':''})`}">{{index+1}}</view>-->
+                  <!--                <text class="areaName">{{item.SPRegionType_Name||'-'}}</text>-->
+                </view>
+                <view class="rightTopRight">
+                  <view class="valueItem">{{item.VEHICLE_COUNT?item.VEHICLE_COUNT<100?`${item.VEHICLE_COUNT}(辆)`:selectTab===2?$util.getMoney(item.VEHICLE_COUNT / 10000):$util.getMoneyNoDecimal(item.VEHICLE_COUNT):''}}</view>
+                  <view class="valueItem">{{item.MONTHVEHICLE_COUNT?item.MONTHVEHICLE_COUNT<100?`${item.MONTHVEHICLE_COUNT}(辆)`:selectTab===2?$util.getMoney(item.MONTHVEHICLE_COUNT / 10000):$util.getMoneyNoDecimal(item.MONTHVEHICLE_COUNT):''}}</view>
+                  <view class="valueItem">
+                    <span :style="{color:item.VEHICLE_RATE>0?'red':item.VEHICLE_RATE<0?'#0E9976':''}">{{item.VEHICLE_RATE>0?'+':item.VEHICLE_RATE<0?'':''}}</span>
+                    <span :style="{color:item.VEHICLE_RATE>0?'red':item.VEHICLE_RATE<0?'#0E9976':''}">{{item.VEHICLE_RATE?item.VEHICLE_RATE+'%':'-'}}</span>
+                  </view>
+<!--                  <image class="addIcon" :src="Number(item.VEHICLE_RATE)>100?'/static/images/examine/add.svg':Number(item.VEHICLE_RATE)===100?'':'/static/images/examine/reduce.svg'"/>-->
+<!--                  <span class="add">{{item.VEHICLE_RATE}}%</span>-->
+                </view>
+              </div>
+              <div class="rightBottom">
+                <span class="distance">{{item.SERVERPART_DISTANCE?item.SERVERPART_DISTANCE+'km':''}}</span>
+                <span class="address">{{item.OWNERUNIT_NAME?item.OWNERUNIT_NAME+'km':''}}</span>
+<!--                <view class="rightBottomItem">-->
+<!--                  <text class="itemLabel">当前车流 /辆</text>-->
+<!--                  <text class="itemValue">{{ item.VEHICLE_COUNT  || '-'}}</text>-->
+<!--                </view>-->
+<!--                <view class="rightBottomItem">-->
+<!--                  <text class="itemLabel">月均车流 /辆</text>-->
+<!--                  <text class="itemValue">{{item.MONTHVEHICLE_COUNT || '-'}}</text>-->
+<!--                </view>-->
                 <view class="goMap" @click="handleGoMap(item)">
                   <image class="mapIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/car/navigation.svg"/>
                   <text class="mapText">导航</text>
                 </view>
-              </view>
 
+              </div>
             </div>
           </div>
-        </div>
-      </scroll-view>
-
-
-<!--      <div class="contentList" v-if="selectTab===1">-->
-<!--        <div class="contentItem" :style="{borderBottom:index + 1===tableList.length?'0px solid #EEEEEE':'1px solid #EEEEEE'}" v-for="(item,index) in tableList" :key="index">-->
-<!--          <div class="index">-->
-<!--            <div class="boxBg" v-if="index<=2"></div>-->
-<!--            <span class="indexText" :style="{fontWeight:index<=2?'bold':'normal',color:index<=2?'#160002':'#786B6C'}">{{index + 1}}</span>-->
-<!--          </div>-->
-<!--          <div class="serviceBox">-->
-<!--            <span class="name">{{item.name}}</span>-->
-<!--            <span class="position">{{item.SERVERPART_REGION}}区</span>-->
-<!--          </div>-->
-<!--          <div class="numberBox">-->
-<!--            <span class="number">{{item.VEHICLE_COUNT}}</span>-->
-<!--            <span class="unit">/辆</span>-->
-<!--          </div>-->
-<!--          <div class="addBox">-->
-<!--            <image class="addIcon" :src="Number(item.VEHICLE_RATE)>100?'/static/images/examine/add.svg':Number(item.VEHICLE_RATE)===100?'':'/static/images/examine/reduce.svg'"/>-->
-<!--            <span class="add">{{item.VEHICLE_RATE}}%</span>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--      </div>-->
-
-<!--      <div class="contentList" v-if="selectTab===2">-->
-<!--        <div class="contentItem" v-for="(item,index) in tableList" :key="index">-->
-<!--          <div class="index">-->
-<!--            <div class="boxBg" v-if="index<=2"></div>-->
-<!--            <span class="indexText" :style="{fontWeight:index<=2?'bold':'normal'}">{{index + 1}}</span>-->
-<!--          </div>-->
-<!--          <div class="serviceBox">-->
-<!--            <span class="name">{{item.name}}</span>-->
-<!--            <span class="position">{{item.SERVERPART_REGION}}区</span>-->
-<!--          </div>-->
-<!--          <div class="numberBox">-->
-<!--            <span class="number">{{item.VEHICLE_COUNT}}</span>-->
-<!--            <span class="unit">/辆</span>-->
-<!--          </div>-->
-<!--          <div class="addBox">-->
-<!--            <image v-if="item.VEHICLE_RATE!==0" class="addIcon"  :src="Number(item.VEHICLE_RATE)>100?'/static/images/examine/add.svg':Number(item.VEHICLE_RATE)===100?'':'/static/images/examine/reduce.svg'"/>-->
-<!--            <span class="add">{{item.VEHICLE_RATE===0?'-':item.VEHICLE_RATE+'%'}}</span>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--      </div>-->
-
+        </scroll-view>
+      </div>
     </div>
   </div>
-
-
-
-
-
-<!--  <div class="main">-->
-<!--      <div style="width: 100%;height: 40px;display: flex;align-items: center">-->
-<!--          <div class="select">-->
-<!--              <div class="time">-->
-<!--                  <view class="uni-input"  style="background: transparent;padding: 0;height:100%">{{ single }}</view>-->
-<!--              </div>-->
-<!--              &lt;!&ndash;  时间选择器  &ndash;&gt;-->
-<!--              &lt;!&ndash;          <picker mode="date" fields="day" :value="single" :end="endData"  @change="bindDateChange" >&ndash;&gt;-->
-<!--              &lt;!&ndash;              <view class="time">&ndash;&gt;-->
-<!--              &lt;!&ndash;                  <view class="uni-input"  style="background: transparent;padding: 0;height:100%">{{ single }}</view>&ndash;&gt;-->
-<!--              &lt;!&ndash;                  <image class="icon" src="/static/images/index/arrow_bottom.svg"></image>&ndash;&gt;-->
-<!--              &lt;!&ndash;              </view>&ndash;&gt;-->
-<!--              &lt;!&ndash;          </picker>&ndash;&gt;-->
-<!--          </div>-->
-<!--      </div>-->
-
-<!--      <div class="list">-->
-<!--          <div class="tabs">-->
-<!--              <div :class="selectTab===1?'selectTab':'tabItem'"  @click="handleTab(1)">{{`${startTime}时入区车流预警`}}</div>-->
-<!--                &lt;!&ndash;  凌晨12点到1点之间查看 应该是23时到0时 这里做了个判断  &ndash;&gt;-->
-<!--              <div :class="selectTab===2?'selectTab':'tabItem'"  @click="handleTab(2)">{{endTime===24?`${endTime - 1}-0时入区车流排行`:`0-${startTime}时入区车流排行`}}</div>-->
-<!--          </div>-->
-<!--          <div style="width: 100%;border-bottom: 1px solid #ccc;margin-top: 10px;padding-bottom: 4px">-->
-<!--              <p class="notice" v-if="selectTab===1">注: 1个小时入区流量比4月同一时间流量增幅150%以上且每小时入区车辆超过100辆</p>-->
-<!--              <p class="notice" v-if="selectTab===2">注: 前20个从今日零时起至今流量与月均同时段增幅情况</p>-->
-<!--          </div>-->
-
-<!--        <div style="height: calc(100vh - 130px);overflow: scroll;}">-->
-<!--            <div v-if="selectTab===1" class="item" v-for="(item,index) in firstData" :key="index">-->
-<!--                <div class="box" >-->
-<!--                    <text>{{index + 1}}、</text>-->
-<!--                    <div class="name">{{item.name}}<div class="normal">{{item.SERVERPART_REGION}}区</div></div>-->
-<!--                    <div class="enter">{{startTime}}时入区: {{item.VEHICLE_COUNT }}辆</div>-->
-<!--                    <div class="add">-->
-<!--                        <image class="addIcon" :src="Number(item.VEHICLE_RATE)>100?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':Number(item.VEHICLE_RATE)===100?'':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>-->
-<!--                        <text :class="item.VEHICLE_RATE  > 150?'orangeRed':''"> {{ item.VEHICLE_RATE }}%</text>-->
-<!--                    </div>-->
-<!--                </div>-->
-<!--            </div>-->
-
-<!--            <div v-if="selectTab===2" class="item" v-for="(item,index) in secondData" :key="index">-->
-<!--                <div class="box">-->
-<!--                    <text>{{index + 1}}、</text>-->
-<!--                    <div class="name">{{item.name}}<text class="normal">{{item.SERVERPART_REGION}}区</text></div>-->
-<!--                    <div class="enter">今日入区: {{item.VEHICLE_COUNT }}辆</div>-->
-<!--                    <div class="add">-->
-<!--                        <image class="addIcon" :src="Number(item.VEHICLE_RATE)>100?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':Number(item.VEHICLE_RATE)===100?'':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>-->
-<!--                        <text :class="item.VEHICLE_RATE  > 150?'orangeRed':''"> {{ item.VEHICLE_RATE }}%</text>-->
-<!--                    </div>-->
-<!--                </div>-->
-<!--            </div>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--  </div>-->
 </template>
 
 <script>
@@ -203,15 +133,39 @@ export default {
         menu:'',
         searchText:'',
         showMonth:'',// 上个月
-        showDay:''// 顶部右侧显示的日期
+        showDay:'',// 顶部右侧显示的日期
+        seat:{},// 当前用户的经纬度位置
+        serviceList:[],// 服务区列表
+        sortType: 1,// 1正序 2倒序
+        sortNumber: 1,// 1当月 2月均 3增幅
       }
     },
-    onLoad(){
+    async onLoad(){
       //  获取手机参数对页面进行适配
       let systemInfo = uni.getSystemInfoSync()
       this.statusBarHeight = Number(systemInfo.statusBarHeight)
       this.menu = uni.getMenuButtonBoundingClientRect()
 
+
+      this.seat = uni.getStorageSync('seatInfo')
+      let _this = this
+      console.log('this.seat11',this.seat)
+      if (this.seat){
+        //获取用户的经纬度位置存在stroge里面
+        wx.getFuzzyLocation({
+          type:'gcj02',
+          altitude:true,
+          success: (res) =>{
+            let seatInfo = {
+              latitude:res.latitude,
+              longitude:res.longitude
+            }
+            uni.setStorageSync('seatInfo', seatInfo);
+            _this.seat = seatInfo
+          }
+        })
+      }
+
       // let storeTime = uni.getStorageSync('lastDay')
       // if (storeTime){
       //   this.time = storeTime
@@ -246,7 +200,9 @@ export default {
       }
       // this.startTime = 19
       //传入的时间用在最上面的选择器上
-      this.handleTab(1)
+      await this.handleGetServiceList()
+
+      await this.handleTab(1)
     },
     methods:{
         // 查看服务区详情
@@ -260,7 +216,7 @@ export default {
           const total = await request.$webGet('CommercialApi/BaseInfo/GetServerpartInfo',req)
           console.log('total',total)
           uni.navigateTo({
-            url:`/pages/commercialBI/map?longitude=${total.Result_Data.ServerpartInfo.SERVERPART_X}&latitude=${total.Result_Data.ServerpartInfo.SERVERPART_Y}&id=${item.SERVERPART_ID}`
+            url:`/pages/commercialBI/map?longitude=${total.Result_Data.ServerpartInfo?total.Result_Data.ServerpartInfo.SERVERPART_X:''}&latitude=${total.Result_Data.ServerpartInfo?total.Result_Data.ServerpartInfo.SERVERPART_Y:''}&id=${item.SERVERPART_ID}`
           })
           uni.hideLoading()
         },
@@ -271,12 +227,15 @@ export default {
           this.showMonth = m
           const d = date.getDate()
           this.searchText = e.detail.value
-          this.showDay = d
+          this.showDay = d<10?'0'+d:d
           // 改变时间重新调数据的方法
           this.onRefresh()
         },
         handleTab(val){
             this.selectTab = val
+          uni.showLoading({
+            title:'正在加载'
+          })
             if (val === 2 ){
                 const req= {
                   StatisticsDate:this.searchText,
@@ -288,7 +247,9 @@ export default {
                     res.Result_Data.List.forEach(item=>{
                         item.name  = item.SERVERPART_NAME.split('服务区')[0]
                     })
-                    this.tableList = res.Result_Data.List
+                    this.tableList = this.handleList(res.Result_Data.List,this.serviceList)
+                  this.tableList = this.handleSortList(this.tableList)
+                  uni.hideLoading()
                   console.log('this.tableList',this.tableList)
                 })
             }else if(val === 1 ){
@@ -302,18 +263,110 @@ export default {
                     res.Result_Data.List.forEach(item=>{
                         item.name  = item.SERVERPART_NAME.split('服务区')[0]
                     })
-                    this.tableList = res.Result_Data.List
+                    this.tableList = this.handleList(res.Result_Data.List,this.serviceList)
+                    this.tableList = this.handleSortList(this.tableList)
+                  uni.hideLoading()
                   console.log('this.tableList',this.tableList)
                 })
             }
+
         },
         onRefresh(){
             this.handleTab(this.selectTab)
         },
-      handleBack(){
+        handleBack(){
         uni.navigateBack({
           delta: 1
         });
+      },
+        //  拿到服务区列表的方法
+        async handleGetServiceList(){
+          const req = {
+            Province_Code:'340000',
+            longitude:this.seat.longitude,
+            latitude:this.seat.latitude
+          }
+          const data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartList',req)
+          this.serviceList = data.Result_Data.List
+        },
+        // 数据数组拼上服务区数据
+        handleList(list,filterList){
+          let res = []
+          if (list && list.length>0){
+            list.forEach((item=>{
+              let filter = filterList.filter(filterItem=> filterItem.SERVERPART_ID===item.SERVERPART_ID)
+              if (filter && filter.length>0){
+                let filterRes = filter[0]
+                item.SERVERPART_DISTANCE = filterRes.SERVERPART_DISTANCE
+                item.OWNERUNIT_NAME = filterRes.OWNERUNIT_NAME
+              }
+              res.push(item)
+            }))
+          }
+          return res
+        },
+        // 点击切换排序方法
+      handleChangeSort(value){
+        if (this.sortNumber===value){
+          if (this.sortType===1){
+            this.sortType = 2
+          }else{
+            this.sortType = 1
+          }
+        }else{
+          this.sortNumber = value
+        }
+        this.tableList = this.handleSortList(this.tableList)
+      },
+      // 手动排序
+      handleSortList(list){
+        var len = list.length;
+        for (var i = 0; i < len - 1; i++) {
+          for (var j = 0; j < len - 1 - i; j++) {
+            if (this.sortType === 1){
+              if (this.sortNumber ===1){
+                if (list[j].VEHICLE_COUNT < list[j + 1].VEHICLE_COUNT) { // 比较相邻元素大小并交换位置
+                  var temp = list[j];
+                  list[j] = list[j + 1];
+                  list[j + 1] = temp;
+                }
+              }else if(this.sortNumber===2){
+                if (list[j].MONTHVEHICLE_COUNT < list[j + 1].MONTHVEHICLE_COUNT) { // 比较相邻元素大小并交换位置
+                  var temp = list[j];
+                  list[j] = list[j + 1];
+                  list[j + 1] = temp;
+                }
+              }else if(this.sortNumber===3){
+                if (list[j].VEHICLE_RATE < list[j + 1].VEHICLE_RATE) { // 比较相邻元素大小并交换位置
+                  var temp = list[j];
+                  list[j] = list[j + 1];
+                  list[j + 1] = temp;
+                }
+              }
+            }else{
+              if (this.sortNumber ===1){
+                if (list[j].VEHICLE_COUNT > list[j + 1].VEHICLE_COUNT) { // 比较相邻元素大小并交换位置
+                  var temp = list[j];
+                  list[j] = list[j + 1];
+                  list[j + 1] = temp;
+                }
+              }else if(this.sortNumber===2){
+                if (list[j].MONTHVEHICLE_COUNT > list[j + 1].MONTHVEHICLE_COUNT) { // 比较相邻元素大小并交换位置
+                  var temp = list[j];
+                  list[j] = list[j + 1];
+                  list[j + 1] = temp;
+                }
+              }else if(this.sortNumber===3){
+                if (list[j].VEHICLE_RATE > list[j + 1].VEHICLE_RATE) { // 比较相邻元素大小并交换位置
+                  var temp = list[j];
+                  list[j] = list[j + 1];
+                  list[j + 1] = temp;
+                }
+              }
+            }
+          }
+        }
+        return list
       }
     }
 }
@@ -356,11 +409,15 @@ export default {
           align-items: center;
           .text{
             margin: 0 5px;
-            color: #fff;
+            font-size: 32rpx;
+            font-family: AlimamaShuHeiTi;
+            font-weight: bold;
+            color: #FFFFFF;
+            line-height: 40rpx;
           }
           .icon{
-            width: 18px;
-            height: 18px;
+            width: 32rpx;
+            height: 32rpx;
           }
         }
       }
@@ -371,8 +428,10 @@ export default {
       top: 100px;
       width: calc(100% - 32px);
       display: flex;
+      justify-content: space-between;
       align-items: center;
       .boxLeft{
+        width: calc(100% - 200rpx);
         .headerTitle{
           font-size: 24px;
           font-family: AlimamaShuHeiTi;
@@ -388,19 +447,18 @@ export default {
           color: #FFFFFF;
           line-height: 16px;
           display: inline-block;
-          width: 70%;
         }
       }
       .boxRight{
-        width: 70px;
-        height: 50px;
+        width: 112rpx;
+        height: 112rpx;
         position: relative;
         .day{
-          font-size: 24px;
-          font-family: DINAlternate-Bold, DINAlternate;
+          font-size: 48rpx;
+          font-family: DINAlternate, DINAlternate;
           font-weight: bold;
-          color: #21ADBA;
-          line-height: 28px;
+          color: #4983FD;
+          line-height: 56rpx;
           position: absolute;
           top: 50%;left: 50%;
           transform: translate(-50%,-7px);
@@ -420,29 +478,100 @@ export default {
     width: 100%;
     height: calc(100vh - 212px);
     box-sizing: border-box;
-    padding: 16px;
+    //padding: 16px;
+    transform: translateY(-32rpx);
+    border-radius: 32rpx 32rpx 0 0;
+    background: #fff;
+    overflow: hidden;
     .contentTab{
       width: 100%;
-      height: 38px;
+      height: 108rpx;
       border-radius: 4px;
-      background: #F3F1F5;
+      background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectTab.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
       box-sizing: border-box;
-      padding: 4px;
       display: flex;
       .tabItem{
-        width: 50%;
+        width: 44%;
         height: 100%;
         text-align: center;
-        font-size: 14px;
-        font-family: PingFangSC-Regular, PingFang SC;
+        font-size: 30rpx;
+        font-family: PingFangSC, PingFang SC;
         font-weight: 400;
         color: #786B6C;
-        line-height: 30px;
-        border-radius: 4px;
+        line-height: 30rpx;
+        padding: 32rpx 26rpx;
+        box-sizing: border-box;
       }
       .selectTab{
-        background: #fff;
-        color: #21ADBA!important;
+        width: 56%;
+        font-size: 32rpx;
+        line-height: 32rpx;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 600;
+        color: #160002;
+        background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectLeftTab.png");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        white-space: nowrap;
+      }
+      .selectTab2{
+        width: 56%;
+        font-size: 32rpx;
+        line-height: 32rpx;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 600;
+        color: #160002;
+        background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectTabRight.png");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        white-space: nowrap;
+      }
+    }
+    .contentList{
+      width: 100%;
+      box-sizing: border-box;
+      padding: 0 32rpx;
+      .sortBox{
+        width: 100%;
+        display: flex;
+        align-items: center;
+        margin-bottom: 24rpx;
+        position: relative;
+        .sortItem{
+          width: 110rpx;
+          font-size: 28rpx;
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 400;
+          color: #A69E9F;
+          line-height: 40rpx;
+          .sortItemText{
+            font-size: 28rpx;
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            color: #A69E9F;
+            line-height: 40rpx;
+          }
+          .sortIcon{
+            width: 24rpx;
+            height: 24rpx;
+            margin-left: 4rpx;
+          }
+        }
+
+      }
+      .unitBox{
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+        .unit{
+          font-size: 24rpx;
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 400;
+          color: #786B6C;
+          line-height: 36rpx;
+        }
       }
     }
     .noticeBox{
@@ -547,7 +676,7 @@ export default {
     }
     .listBigBox{
       width: 100%;
-      height: calc(100ch - 300px);
+
       margin-top: 24rpx;
       box-sizing: border-box;
       padding-bottom: 12px;
@@ -625,6 +754,25 @@ export default {
             .rightTopLeft{
               display: flex;
               align-items: center;
+              .NoIcon{
+                width: 40rpx;
+                height: 40rpx;
+              }
+              .otherIcon{
+                width: 32rpx;
+                height: 32rpx;
+                background: linear-gradient(141deg, #BABCC3 0%, #CBCCD1 45%, #B5B6BA 100%);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 24rpx;
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 500;
+                color: #FFFFFF;
+                line-height: 24rpx;
+                border-radius: 50%;
+              }
+
               .indexBox{
                 width: 36rpx;
                 height: 32rpx;
@@ -649,6 +797,17 @@ export default {
             .rightTopRight{
                 display: flex;
                 align-items: center;
+                .valueItem{
+                  width: 110rpx;
+                  font-size: 28rpx;
+                  font-family: PingFangSC, PingFang SC;
+                  font-weight: 500;
+                  color: #9A9A9A;
+                  text-align: center;
+                }
+
+
+
                 .addIcon{
                   width: 14px;
                   height: 14px;
@@ -665,6 +824,48 @@ export default {
           .rightBottom{
             display: flex;
             justify-content: space-between;
+            align-items: center;
+            .distance{
+              display: inline-block;
+              width: 94rpx;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              font-size: 24rpx;
+              font-family: PingFangSC, PingFang SC;
+              font-weight: 400;
+              color: #786B6C;
+              line-height: 36rpx;
+            }
+            .address{
+              font-size: 24rpx;
+              font-family: PingFangSC, PingFang SC;
+              font-weight: 400;
+              color: #786B6C;
+              line-height: 36rpx;
+              display: inline-block;
+              width: 200rpx;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
+            .goMap{
+              display: flex;
+              align-items: center;
+              padding: 4rpx 16rpx;
+              background: #4e92f6;
+              box-sizing: border-box;
+              border-radius: 8rpx;
+              .mapIcon{
+                width: 30rpx;
+                height: 30rpx;
+                margin-right: 8rpx;
+              }
+              .mapText{
+                color: #fff;
+              }
+            }
+
             .rightBottomItem{
               display: flex;
               flex-direction: column;
@@ -684,24 +885,8 @@ export default {
                 line-height: 32rpx;
                 margin-top: 8rpx;
               }
-              .goMap{
-                display: flex;
-                align-items: center;
-                padding: 4rpx 16rpx;
-                background: #4e92f6;
-                box-sizing: border-box;
-                border-radius: 8rpx;
-                .mapIcon{
-                  width: 30rpx;
-                  height: 30rpx;
-                  margin-right: 8rpx;
-                }
-                .mapText{
-                  color: #fff;
-                }
-              }
-            }
 
+            }
           }
         }
       }
diff --git a/pages/nationalPage/components/qiun-data-charts/js_sdk/u-charts/config-ucharts.js b/pages/nationalPage/components/qiun-data-charts/js_sdk/u-charts/config-ucharts.js
index b8655f6..a544698 100644
--- a/pages/nationalPage/components/qiun-data-charts/js_sdk/u-charts/config-ucharts.js
+++ b/pages/nationalPage/components/qiun-data-charts/js_sdk/u-charts/config-ucharts.js
@@ -202,9 +202,9 @@ const cfu = {
 			  }
 			  let curData = opts.series.filter(subItem=> subItem.name === '24年')[0].real[index]
 			  let compareData = opts.series.filter(subItem=> subItem.name === '23年')[0].real[index]
-			  let add = (((curData/compareData)-1)*100).toFixed(2)
+			  let add = Number(((curData/compareData)-1)*100).toFixed(2)
 			  if (index<day){
-				  return `${item.name}：${getMoney(data / 10000,2)}万元，${add>0?'+':add<0?'':''}${add?add+'%':''}，${realDate?realDate:''}`
+				  return `${item.name}：${getMoney(data / 10000,2)}万元${add>0?'，+':add<0?'，':''}${add?add+'%':''}，${realDate?realDate:''}`
 			  }else{
 				  return ' '
 			  }
@@ -220,7 +220,19 @@ const cfu = {
 		  let day = opts.series.filter(subItem=> subItem.name === item.name)[0].howDayNumber
 		  console.log('data',data)
 		  console.log('day',day)
-		  return item.name + "：" + getMoney(data / 10000,2) + '万元'
+		  let curData = opts.series.filter(subItem=> subItem.name === '24年')[0].real[index]
+		  let compareData = opts.series.filter(subItem=> subItem.name === '23年')[0].real[index]
+		  let add = Number(((curData/compareData)-1)*100).toFixed(2)
+		  if (item.name==='24年'){
+			  if (data){
+				  return `${item.name}：${data?getMoney(data / 10000,2):''}万元${add>0?'，+':add<0?'，':''}${add?add+'%':''}`
+			  }else{
+				  return ' '
+			  }
+		  }else{
+			  return `${item.name}：${data?getMoney(data / 10000,2):''}万元`
+		  }
+
 	  },
 	  entryCarNumberXFormat:function (value,index,opts){
 		return value
diff --git a/pages/nationalPage/springTravel.vue b/pages/nationalPage/springTravel.vue
index cf8f72f..c216cd8 100644
--- a/pages/nationalPage/springTravel.vue
+++ b/pages/nationalPage/springTravel.vue
@@ -610,7 +610,7 @@
                       <span :style="{color:leaseDailyAdd>0?'#E83944':leaseDailyAdd<0?'#0E9976':''}">{{`${leaseDailyAdd || '-'}%`}}</span>
                     </div>
                   </div>
-                </div>
+                </div> 
 
                 <div class="typeSecond" v-if="pageType===2">
                   <div class="listValueBox">
diff --git a/pages/nationalPage/testPage.vue b/pages/nationalPage/testPage.vue
index 0f5b34a..c530318 100644
--- a/pages/nationalPage/testPage.vue
+++ b/pages/nationalPage/testPage.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="main" >
-    <scroll-view  scroll-y="true" class="img" :style="{left:allScreen?'100%':'0'}">
+    <div  class="img" :style="{left:allScreen?'100%':'0'}">
       <div class="imgContent">
         <div class="imgTop">
-          <span class="unit">单位：万元</span>
+          <span class="unit">单位：万元<span style="color: red">(可左滑查看)</span></span>
           <div class="searchAllScreen">
             <img class="allScreenIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/allScreenIcon.png"/>
             <span class="text" @click="handleShowAllScreen">全屏</span>
@@ -16,69 +16,71 @@
             :animation="false"
             :canvas2d="true"
             :inScrollView="true"
-            :pageScrollTop="ScrollTop"
             tooltipFormat="entryCarNumber"
             :ontouch="true"
-
         />
       </div>
-      <div class="noticeBox">
-        <div class="boxBg"></div>
-        <div class="contentBox">
-          <img class="contentIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/imgDesc.png"/>
-          <div class="contentText">
-            根据历史大数据显示：<br/>
-            <div style="text-indent: 2rem;font-size: 24rpx">
-              服务区会在春运前至农历小年夜前（<span class="red">农历二十二</span>）到底回程小高峰，然后流量逐步回落至春运最低点（<span class="red">除夕夜</span>），大年初二开始随着出行自驾游的高峰来临，流量逐步放大，会在初六达到整个春运最高峰，随后流量逐步回落至次低点（<span class="red">元宵节</span>），在正月十六出现一波返程小高峰后，流量逐步回复正常。
+
+      <scroll-view scroll-y="true" class="scrollView">
+        <div class="noticeBox">
+          <div class="boxBg"></div>
+          <div class="contentBox">
+            <img class="contentIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/imgDesc.png"/>
+            <div class="contentText">
+              根据历史大数据显示：<br/>
+              <div style="text-indent: 2rem;font-size: 24rpx">
+                服务区会在春运前至农历小年夜前（<span class="red">农历二十二</span>）到底回程小高峰，然后流量逐步回落至春运最低点（<span class="red">除夕夜</span>），大年初二开始随着出行自驾游的高峰来临，流量逐步放大，会在初六达到整个春运最高峰，随后流量逐步回落至次低点（<span class="red">元宵节</span>），在正月十六出现一波返程小高峰后，流量逐步回复正常。
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <div class="allPkBox">
-        <div class="boxBg"></div>
-        <div class="pkContent">
-          <div class="contentTop">
-            <img class="titleImg" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/allDataTitle.png" />
-          </div>
-          <div class="pkBox">
-            <div class="leftBox">
-              <text class="value">{{giveTrendObj.curYearRevenue?$util.getMoney(giveTrendObj.curYearRevenue / 10000):'0.00'}}</text>
-              <text class="label">2024年/万元</text>
+        <div class="allPkBox">
+          <div class="boxBg"></div>
+          <div class="pkContent">
+            <div class="contentTop">
+              <img class="titleImg" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/allDataTitle.png" />
             </div>
-            <div class="rightBox">
-              <text class="value">{{giveTrendObj.lYearRevenue?$util.getMoney(giveTrendObj.lYearRevenue / 10000):'0.00'}}</text>
-              <text class="label">2023年/万元</text>
+            <div class="pkBox">
+              <div class="leftBox">
+                <text class="value">{{giveTrendObj.curYearRevenue?$util.getMoney(giveTrendObj.curYearRevenue / 10000):'0.00'}}</text>
+                <text class="label">2024年/万元</text>
+              </div>
+              <div class="rightBox">
+                <text class="value">{{giveTrendObj.lYearRevenue?$util.getMoney(giveTrendObj.lYearRevenue / 10000):'0.00'}}</text>
+                <text class="label">2023年/万元</text>
+              </div>
+              <img class="pkLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/vs.png"/>
             </div>
-            <img class="pkLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/vs.png"/>
-          </div>
-          <div class="pkBox">
-            <div class="leftBox revenueLeft">
-              <text class="value">{{giveTrendObj.curYearAccount?$util.getMoney(giveTrendObj.curYearAccount / 10000):'0.00'}}</text>
-              <text class="label">2024年/万元</text>
+            <div class="pkBox">
+              <div class="leftBox revenueLeft">
+                <text class="value">{{giveTrendObj.curYearAccount?$util.getMoney(giveTrendObj.curYearAccount / 10000):'0.00'}}</text>
+                <text class="label">2024年/万元</text>
+              </div>
+              <div class="rightBox revenueRight">
+                <text class="value">{{giveTrendObj.lYearAccount?$util.getMoney(giveTrendObj.lYearAccount / 10000):'0.00'}}</text>
+                <text class="label">2023年/万元</text>
+              </div>
+              <img class="pkLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueVS.png"/>
             </div>
-            <div class="rightBox revenueRight">
-              <text class="value">{{giveTrendObj.lYearAccount?$util.getMoney(giveTrendObj.lYearAccount / 10000):'0.00'}}</text>
-              <text class="label">2023年/万元</text>
+            <div class="pkBox" style="margin-bottom: 20px">
+              <div class="leftBox carLeft">
+                <text class="value">{{giveTrendObj.curYearBayonet?$util.getMoney(giveTrendObj.curYearBayonet / 10000):'0.00'}}</text>
+                <text class="label">2024年/万辆</text>
+              </div>
+              <div class="rightBox carRight">
+                <text class="value">{{giveTrendObj.lYearBayonet?$util.getMoney(giveTrendObj.lYearBayonet / 10000):'0.00'}}</text>
+                <text class="label">2023年/万辆</text>
+              </div>
+              <img class="pkLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/carVS.png"/>
             </div>
-            <img class="pkLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueVS.png"/>
-          </div>
-          <div class="pkBox" style="margin-bottom: 20px">
-            <div class="leftBox carLeft">
-              <text class="value">{{giveTrendObj.curYearBayonet?$util.getMoney(giveTrendObj.curYearBayonet / 10000):'0.00'}}</text>
-              <text class="label">2024年/万辆</text>
-            </div>
-            <div class="rightBox carRight">
-              <text class="value">{{giveTrendObj.lYearBayonet?$util.getMoney(giveTrendObj.lYearBayonet / 10000):'0.00'}}</text>
-              <text class="label">2023年/万辆</text>
-            </div>
-            <img class="pkLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/carVS.png"/>
           </div>
         </div>
-      </div>
+      </scroll-view>
 
 
-    </scroll-view>
+
+    </div>
 
     <div class="allScreen" :style="{left:allScreen?'0':'100%'}" >
       <div class="bigBox">
@@ -462,7 +464,7 @@ export default {
         justify-content: space-between;
         .unit{
           margin-left: 24rpx;
-          font-size: 28rpx;
+          font-size: 24rpx;
           font-family: PingFangSC-Regular, PingFang SC;
           font-weight: 400;
           color: #A69E9F;
@@ -491,166 +493,168 @@ export default {
       }
     }
 
-    .noticeBox{
-      width: 100%;
-      height: 400rpx;
-      background: #fff;
-      box-sizing: border-box;
-      border-radius: 16rpx;
-      padding: 4rpx;
+    .scrollView{
+      height: calc(100% - 312px);
       margin-top: 24rpx;
-      position: relative;
-      .boxBg{
-        z-index: 1;
-        position: absolute;
-        top: 4rpx;left: 4rpx;
-        width: calc(100% - 8rpx);
-        height: 192rpx;
-        background: linear-gradient(360deg, rgba(255,233,229,0) 0%, #FFF1F1 100%);
-        border-radius: 16rpx;
-      }
-      .contentBox{
-        position: absolute;
-        z-index: 2;
-        width: calc(100% - 8rpx);
-        height: 100%;
-        box-sizing: border-box;
-        padding: 22rpx;
-        .contentIcon{
-          width: 180rpx;
-          height: 44rpx;
-        }
-        .contentText{
-          font-size: 24rpx;
-          font-family: PingFangSC, PingFang SC;
-          font-weight: 400;
-          color: #160002;
-          line-height: 40rpx;
-          //margin-top: 16rpx;
-          .red{
-            color: red;
-          }
-        }
-      }
-    }
-
-    .allPkBox{
-      width: 100%;
-      height: 625rpx;
-      margin-top: 32rpx;
-      background: #fff;
-      box-sizing: border-box;
-      border-radius: 16rpx;
-      padding: 4rpx;
-      position: relative;
-      .boxBg{
-        z-index: 1;
-        position: absolute;
-        top: 4rpx;left: 4rpx;
-        width: calc(100% - 8rpx);
-        height: 192rpx;
-        background: linear-gradient(360deg, rgba(255,233,229,0) 0%, #FFF1F1 100%);
-        border-radius: 16rpx;
-      }
-      .pkContent{
+      .noticeBox{
         width: 100%;
+        height: 400rpx;
+        background: #fff;
         box-sizing: border-box;
-        position: absolute;
-        z-index: 2;
-        padding: 22rpx;
-        .contentTop{
-          width: 100%;
-          .titleImg{
-            width: 144rpx;
-            height: 74rpx;
+        border-radius: 16rpx;
+        padding: 4rpx;
+        position: relative;
+        .boxBg{
+          z-index: 1;
+          position: absolute;
+          top: 4rpx;left: 4rpx;
+          width: calc(100% - 8rpx);
+          height: 192rpx;
+          background: linear-gradient(360deg, rgba(255,233,229,0) 0%, #FFF1F1 100%);
+          border-radius: 16rpx;
+        }
+        .contentBox{
+          position: absolute;
+          z-index: 2;
+          width: calc(100% - 8rpx);
+          height: 100%;
+          box-sizing: border-box;
+          padding: 22rpx;
+          .contentIcon{
+            width: 180rpx;
+            height: 44rpx;
+          }
+          .contentText{
+            font-size: 24rpx;
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            color: #160002;
+            line-height: 40rpx;
+            //margin-top: 16rpx;
+            .red{
+              color: red;
+            }
           }
         }
-        .pkBox{
+      }
+      .allPkBox{
+        width: 100%;
+        height: 625rpx;
+        margin-top: 32rpx;
+        background: #fff;
+        box-sizing: border-box;
+        border-radius: 16rpx;
+        padding: 4rpx;
+        position: relative;
+        .boxBg{
+          z-index: 1;
+          position: absolute;
+          top: 4rpx;left: 4rpx;
+          width: calc(100% - 8rpx);
+          height: 192rpx;
+          background: linear-gradient(360deg, rgba(255,233,229,0) 0%, #FFF1F1 100%);
+          border-radius: 16rpx;
+        }
+        .pkContent{
           width: 100%;
-          height: 140rpx;
-          position: relative;
           box-sizing: border-box;
-          margin-bottom: 32rpx;
-          .pkLogo{
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%,-50%);
-            width: 88rpx;
-            height: 88rpx;
+          position: absolute;
+          z-index: 2;
+          padding: 22rpx;
+          .contentTop{
+            width: 100%;
+            .titleImg{
+              width: 144rpx;
+              height: 74rpx;
+            }
           }
-          .leftBox,.rightBox{
-            width: 50%;
-            height: 100%;
+          .pkBox{
+            width: 100%;
+            height: 140rpx;
+            position: relative;
             box-sizing: border-box;
-            padding: 24rpx 32rpx;
-            display: flex;
-            flex-direction: column;
-            position: absolute;
-          }
-          .leftBox{
-            left: 0;top: 0;
-            background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/leftRed.png");
-            background-repeat: no-repeat;
-            background-size: 100% 100%;
-            .value{
-              font-size: 44rpx;
-              //font-family: DINAlternate, DINAlternate;
-              color: #FFFFFF;
-              font-weight: bold;
-              line-height: 52rpx;
+            margin-bottom: 32rpx;
+            .pkLogo{
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%,-50%);
+              width: 88rpx;
+              height: 88rpx;
             }
-            .label{
-              font-size: 28rpx;
-              font-family: PingFangSC, PingFang SC;
-              color: #FFFFFF;
-              font-weight: 400;
-              line-height: 40rpx;
+            .leftBox,.rightBox{
+              width: 50%;
+              height: 100%;
+              box-sizing: border-box;
+              padding: 24rpx 32rpx;
+              display: flex;
+              flex-direction: column;
+              position: absolute;
             }
-          }
-          .rightBox{
-            right: 0;top: 0;
-            background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/rightPink.png");
-            background-repeat: no-repeat;
-            background-size: 100% 100%;
-            align-items: flex-end;
-            .value{
-              font-size: 44rpx;
-              //font-family: DINAlternate, DINAlternate;
-              font-weight: bold;
-              color: #FF5A3C;
-              line-height: 52rpx;
+            .leftBox{
+              left: 0;top: 0;
+              background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/leftRed.png");
+              background-repeat: no-repeat;
+              background-size: 100% 100%;
+              .value{
+                font-size: 44rpx;
+                //font-family: DINAlternate, DINAlternate;
+                color: #FFFFFF;
+                font-weight: bold;
+                line-height: 52rpx;
+              }
+              .label{
+                font-size: 28rpx;
+                font-family: PingFangSC, PingFang SC;
+                color: #FFFFFF;
+                font-weight: 400;
+                line-height: 40rpx;
+              }
             }
-            .label{
-              font-size: 28rpx;
-              font-family: PingFangSC, PingFang SC;
-              font-weight: 400;
-              color: #FF5A3C;
-              line-height: 40rpx;
+            .rightBox{
+              right: 0;top: 0;
+              background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/rightPink.png");
+              background-repeat: no-repeat;
+              background-size: 100% 100%;
+              align-items: flex-end;
+              .value{
+                font-size: 44rpx;
+                //font-family: DINAlternate, DINAlternate;
+                font-weight: bold;
+                color: #FF5A3C;
+                line-height: 52rpx;
+              }
+              .label{
+                font-size: 28rpx;
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 400;
+                color: #FF5A3C;
+                line-height: 40rpx;
+              }
             }
-          }
-          .revenueLeft{
-            background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueLeft.png");
-          }
-          .revenueRight{
-            background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueRight.png");
-            .value{
-              color: #D48F00;
+            .revenueLeft{
+              background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueLeft.png");
             }
-            .label{
-              color: #D48F00;
+            .revenueRight{
+              background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueRight.png");
+              .value{
+                color: #D48F00;
+              }
+              .label{
+                color: #D48F00;
+              }
             }
-          }
-          .carLeft{
-            background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/carLeft.png");
-          }
-          .carRight{
-            background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/carRight.png");
-            .value{
-              color: #3873DD;
+            .carLeft{
+              background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/carLeft.png");
             }
-            .label{
-              color: #3873DD;
+            .carRight{
+              background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/carRight.png");
+              .value{
+                color: #3873DD;
+              }
+              .label{
+                color: #3873DD;
+              }
             }
           }
         }