<template>
  <div>
      <div class="main" v-if="isHaveData">
          <div class="header" :style="{backgroundImage: 'url('+ 'https://eshangtech.com/ShopICO/ahyd-BID/commercial/car.svg' +')'}">
              <div class="analyse">
                  <text class="title">分析</text>
                  <text class="content">{{analyseText}}</text>
              </div>
              <div class="headerTop" :style="{height:(menu.bottom + 6) + 'px'}">
                  <div class="box" :style="{top:(menu.bottom - (menu.height / 2)) + 'px'}">
                      <div class="icon" @click="handleBack">
                          <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"></image>
                      </div>
                      <text class="title">车流画像</text>
                      <!--  占位  -->
                      <div class="seize"></div>
                  </div>
              </div>
              <div class="serviceArea" :style="{top : (menu.bottom + 14) + 'px'}" @click="handleGoSelectService">
                  <div class="picker">
                      <div class="selectService">
                          <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>
                          <view class="select">
                              <view class="content">
                                  <view class="uni-input">{{serviceInfo.SERVERPART_NAME}}</view>
                                  <p class="area">{{serviceInfo.SPREGIONTYPE_NAME}}</p>
                                  <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
                              </view>
                          </view>
                      </div>
                  </div>
                  <div class="other">
                      <div class="label">
                          <div v-for="(item,index) in labelList" :key="index" :class="index===0?'item0 item':index===1?'item1 item':index===2?'item2 item':index===3?'item3 item':index===4?'item4 item':'item'">
                              {{item}}
                          </div>
                      </div>
                  </div>
              </div>
          </div>
          <div class="charts">
              <div class="chartsItem">
                  <div style="display: flex;align-items: center;justify-content: space-between">
                      <p class="title">入区车流分析</p>
                      <div class="item">
                          <text class="value">{{time}}</text>
                      </div>
                  </div>
                  <div  v-if="carData.length>0">
                      <entry-zone :carData="carData" :time="time" :month="thisMonth"/>
                      <analyse :analyseInfo="{analysisins_type: 1102,analysisins_format: 2000}"  />
                  </div>
                  <no-data v-else  :type="'car'"/>
              </div>


              <div class="chartsItem" style="margin-top: 32px">
                  <p class="title">{{thisMonth?thisMonth:'-'}}月入区车辆累计</p>
                  <div>
                      <month-total :data="monthTotalList"/>
                      <analyse :analyseInfo="{analysisins_type: 1103,analysisins_format: 2000}"  />
                  </div>
              </div>

              <div class="chartsItem" style="margin-top: 32px">
                  <div class="time">
                      <text class="thisTime"></text>
                      <div class="select">
                          <picker mode="date" fields="month" :value="single" :end="endData"  @change="bindDateChange" >
                              <view class="time">
                                  <view class="uni-input"  style="background: transparent;padding: 0;height:100%">{{ single }}</view>
                                  <image class="icon" src="/static/images/index/arrow_bottom.svg"></image>
                              </view>
                          </picker>
                      </div>
                  </div>
                  <view class="tab" >
                      <view v-for="(item,index) in tabList" :key="index" :class="selectTab===item.value?'tabItem tabItemActive':'tabItem'" @click="handleChangeTab(item.value)">{{item.name}}</view>
                  </view>


                  <p class="title">{{thisMonth?thisMonth:'-'}}月车辆归属地</p>
                  <div v-if="homePlace.length>0">
                      <home-place :homeData="homePlace" :homeCity="cityPlace" />
                      <analyse :analyseInfo="{analysisins_type: 1103,analysisins_format: 2000}"  />
                  </div>
                  <no-data v-else  :type="'car'"/>
              </div>
              <div class="chartsItem" style="margin-top: 32px">
                  <p class="title">{{thisMonth?thisMonth:'-'}}月车辆类型占比-停留时间（日均）</p>
                  <div v-if="carTypeTimeData.series.length>0">
                      <car-type-time :data="carTypeTimeData"/>
                      <analyse :analyseInfo="{analysisins_type: 1104,analysisins_format: 2000}"  />
                  </div>
                  <no-data v-else  :type="'car'"/>
              </div>
              <div class="chartsItem" style="margin-top: 32px">
                  <p class="title">{{thisMonth?thisMonth:'-'}}月车车辆类型-停留时间（日均）</p>

                  <div  v-if="timeAnalysisData.series.length>0">
                      <time-analysis :data="timeAnalysisData"/>
                      <analyse :analyseInfo="{analysisins_type: 1105,analysisins_format: 2000}"  />
                  </div>
                  <no-data v-else  :type="'car'"/>
              </div>
              <div class="chartsItem" style="margin-top: 32px">
                  <div class="topItem" >
                      <p class="title">{{thisMonth?thisMonth:'-'}}月入区率占比</p>
                      <div class="box" v-if="allEntry">
                          <text class="value">{{allEntry?allEntry:'-'}}%</text>
                          <view class="right">
                              <image class="arrowTop" :src="Number(addAllEntry)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
                              <text class="text">{{addAllEntry?Math.abs(addAllEntry) + '%':'-' + '%'}}</text>
                          </view>
                      </div>
                  </div>
                  <div v-if="percentEntryData.length>0">
                      <percent-entry :data="percentEntryData" />
                      <analyse :analyseInfo="{analysisins_type: 1106,analysisins_format: 2000}"  />
                  </div>
                  <no-data v-else  :type="'car'"/>
              </div>
          </div>
      </div>
      <div v-else class="noData">
          <div class="box">
              <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/noData.svg"></image>
              <p class="text">抱歉,服务区采集样本过小,无法分析</p>
          </div>
      </div>
  </div>
</template>

<script>
import request from '@/util/index.js'
import EntryZone from "./components/car/entryZone.vue";
import HomePlace from "./components/car/homePlace.vue";
import CarTypeTime from "./components/car/carTypeTime.vue";
import timeAnalysis from "./components/car/timeAnalysis.vue";
import PercentEntry from "./components/car/percentEntry.vue";
import MonthTotal from "./components/car/monthTotal.vue";
import NoData from "./components/noData.vue";
import Analyse from "./components/analyse.vue";
export default {
  name: "carPortrait",
    data(){
        const lastDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD', -1)
      return {
        menu:{}, //手机参数
        serviceArray:["123465","123465","123465","123465","123465"], // 选择服务区的列表
        serviceIndex:0, //选中的服务区列表的第几个
        area:'片区', //属于哪个片区
        labelList:[], //标签
        time:'',//当前时间
        Serverpart_ID:'',//服务区id
        chartData:{},
        selectTab: 0,
        tabIsTrue: true,
        tabList:[],//选项卡列表
        carNumAll : 0,//一共的入区车流数
        monthTotalList:[],//月累计
        carData:[],//入区车流的数据
        homePlaceAll:[],//车辆归属地两区总和列表
        homePlace:[],//车辆归属地
        cityPlaceAll:[],//车辆归属地的城市总和列表
        cityPlace:[],//车辆归属地的城市
        carTypeTimeDataAll:[],//车辆类型占比与停留时间总和列表
        carTypeTimeData:[],//车辆类型占比与停留时间
        timeAnalysisData:[],//  车辆价值与停留时间分析
        percentEntryData:[],//入区率占比
        percentEntryDataAll:[],//  入区率占比总的
        serviceInfo:{}, //当前服务区信息
        backType:'',//返回的页面类型
        analyseText:'',//分析的文字
        single:'',//显示时间
        lastDay:lastDay,
        endTime:'',
        thisMonth:'',//几月
        allEntry:'',//一共的入区率占比
        addAllEntry:'',//相较上月增加的入区率
        endData:'',//截止日期
      }
    },
    components: {Analyse, NoData, PercentEntry, CarTypeTime, HomePlace, EntryZone,timeAnalysis,MonthTotal},
    computed:{
      isHaveData(){
         return true
      }
    },
    onLoad(option){
      this.backType = option.type
    },
    onShow(){
        let nowTime = new Date()
        let y = nowTime.getFullYear()
        let month = nowTime.getMonth() + 1
        if (month<10){
            month = '0'+ month
        }
        this.endData = `${y}-${month}`
        let storeTime = uni.getStorageSync('lastDay')
        if (storeTime){
            this.time = storeTime
        }
        this.single = this.$util.getThisMonthHave(this.time)
        const date = new Date(this.single)
        //设置日期选择器的开始时间和结束时间
        let m = date.getMonth() + 1
        if (m<10){
            m = '0' + m
        }
        this.thisMonth = m
        //  获取手机参数对页面进行适配
        let systemInfo = uni.getSystemInfoSync()
        // 把获取到的手机参数保存
        uni.setStorageSync('phoneInfo',systemInfo)
        this.statusBarHeight = Number(systemInfo.statusBarHeight)
        this.menu = uni.getMenuButtonBoundingClientRect()
        // 把获取图表数据的方法统一放在一起 然后去请求接口拿到数据  再分批传到相对应的图标组件
        // 每个图表都是用组件的方式引入的 数据是通过prop传入的
        let storeServiceInfo = uni.getStorageSync('currentService')
        let nearServiceInfo = uni.getStorageSync('nearService')
        if (!storeServiceInfo){
            this.serviceInfo = nearServiceInfo
        }else{
            this.serviceInfo = storeServiceInfo
        }
        //获取服务区基本信息
        this.getServiceInfo()
        //月累计
        this.getMonthTotalList()
        // 入区车流分析
        this.getCarData()
        // 车辆归属地
        this.getHomeData()
        // 车辆类型占比与停留时间
        this.getCarTypeTime()
        // 车辆价值与停留时间分析
        this.getTimeAnalysis('')
        //入区率占比
        this.getPercentEntry()
        //获得标签
        this.getLabelDetail()
    },
    onReady(){

    },
    methods:{
        //获取服务区基本信息
        async getServiceInfo(){
            let id = ''
            let currentService = uni.getStorageSync('currentService')
            let nearService = uni.getStorageSync('nearService')
            if (!currentService){
                id = nearService.Serverpart_ID
            }else{
                id = currentService.Serverpart_ID
            }
            let req = {
                ServerpartId:id
            }
            const total = await request.$webGet('CommercialApi/BaseInfo/GetServerpartInfo',req)
            console.log('totalsdskadja',total)
            let tabList = [{name:'全部',value:0}]
            total.Result_Data.RegionInfo.forEach((item,index)=>{
                tabList.push({name:item.SERVERPART_REGIONNAME,value:index+1})
            })
            this.tabList = tabList
        },
        // 时间选择器改变的时间
        bindDateChange(e){
            const date = new Date(e.detail.value)
            let m = date.getMonth() + 1
            if (m<10){
                m = '0' + m
            }
            this.thisMonth = m
            this.single = e.detail.value
            let d = this.$util.getThisMonthDay(e.detail.value)
            this.endTime = e.detail.value + '-' + d
            this.onRefresh()
        },
        //重新调一遍页面数据的方法
        onRefresh(){
            // 车辆归属地
            this.getHomeData()
            // 车辆类型占比与停留时间
            this.getCarTypeTime()
            // 车辆价值与停留时间分析
            this.getTimeAnalysis('')
            //入区率占比
            this.getPercentEntry()
        },
        //获得标签
        async getLabelDetail(){
            //六个标签
            let req = {
                SearchParameter:{
                    STATISTICS_DATE:this.time,
                    ANALYSISINS_TYPE:1101,
                    ANALYSISINS_FORMAT:1000,
                    ANALYSISINS_STATE:1,
                    SERVERPART_ID:this.serviceInfo.Serverpart_ID,
                },
                PageIndex:1,
                PageSize:10
            }
            //分析的文字
            let reqText = {
                SearchParameter:{
                    STATISTICS_DATE:this.time,
                    ANALYSISINS_TYPE:1101,
                    ANALYSISINS_FORMAT:2000,
                    ANALYSISINS_STATE:1,
                    SERVERPART_ID:this.serviceInfo.Serverpart_ID,
                },
                PageIndex:1,
                PageSize:10
            }
            //六个标签
            const data = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',req)
            let list = []
            data.Result_Data.List.forEach(item=>{
                list.push(item.ANALYSIS_CONTENT)
            })
            this.labelList = list
            //分析的文字
            const total = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',reqText)
            this.analyseText = total.Result_Data.List[0].ANALYSIS_CONTENT
        },
      //当前最近的服务区数据
        async nearestService(){
            let storeServiceInfo = uni.getStorageSync('currentService')
            let nearServiceInfo = uni.getStorageSync('nearService')
            if (storeServiceInfo){
                this.serviceInfo = storeServiceInfo
            }else {
                this.serviceInfo = nearServiceInfo
            }
        },
      //跳转到地图
      handleGoSelectService() {
          uni.navigateTo({
              url:`/pages/map/index?chartType=${true}&page=/pages/commercialBI/carPortrait&serviceInfo=${JSON.stringify(this.serviceInfo)}`
          })
      },
      handleBack(){
            if (this.backType==='userCenter'){
                uni.switchTab({
                    url: '/pages/userCenter/userCenter'
                })
            }else{
                uni.switchTab({
                    url: '/pages/index/index'
                })
            }
      },
      //切换改变选项卡
      // 因为只让接口调用一次 所以要把全部和不同区域的内容要放在同一个列表里面 然后通过选项卡的点击来切换展示哪一块的数据
      handleChangeTab(value){
          let Serverpart_Region = ''
          this.tabList.forEach(item=>{
              if (item.value === value && item.value!==0){
                  Serverpart_Region = item.name
              }
          })
          // if (this.tabIsTrue){
              this.selectTab = value
              // 车辆归属地
              this.homePlace = this.homePlaceAll[this.selectTab]?this.homePlaceAll[this.selectTab]:[]

              this.cityPlace = this.cityPlaceAll[this.selectTab]?this.cityPlaceAll[this.selectTab]:[]
              // 车辆类型占比与停留时间
              this.carTypeTimeData = this.carTypeTimeDataAll[this.selectTab]?this.carTypeTimeDataAll[this.selectTab]:[]
              // 车辆价值与停留时间分析
              this.getTimeAnalysis(Serverpart_Region)
              //入区率占比
              this.getPercentEntry(this.tabList[this.selectTab].name)
          // }

      },
      async getMonthTotalList(){
            const req = {
                StatisticsDate:this.endTime?this.endTime:this.time,
                Serverpart_ID:this.serviceInfo.Serverpart_ID
            }
            const data = await request.$webGet('CommercialApi/BigData/GetMonthAnalysis',req)
            let monthList = []
            let carCount = []
            let moneyCount = []
            let info = []
            data.Result_Data.List.forEach(item=>{
                monthList.push(item.Statistics_Month + '月')
                carCount.push(Number((item.Vehicle_Count / 10000).toFixed(0)))
                moneyCount.push(Number((item.RevenueAmount / 10000).toFixed(0)))
                // showTip要展示的信息
                info.push({
                    allCarCount : item.Vehicle_Count,
                    region:item.RegionList,
                    rate:item.Entry_Rate,
                    money:item.RevenueAmount
                })
            })

            let res = {
                categories: monthList,
                series:[{name:'车流量',data:carCount,type:'column',index:0,info:info},
                    {name:'交易金额',data:moneyCount,type:'line',index:1}]
            }

            this.monthTotalList = res
          // categories: ["小型车","中型车","大货车","新能源车"],
          //     series: [{name:'新能源',data:[30,38,20,10]},
          //     {name:'燃油车',data:[20,17,23,32]},
          //     {name:'停留时间',data:[62,38,50,84]}]

      },
      getCarData(){
        request.$webGet('CommercialApi/Revenue/GetBayonetEntryList',{
          StatisticsDate: this.time,
          Serverpart_ID	:this.serviceInfo.Serverpart_ID,
          ShowAddUpCount:true
        }).then(res=>{
            this.carData = res.Result_Data.List
        })
      },
      getHomeData(){
          const date = new Date(this.endTime?this.endTime:this.time)
          let y = date.getFullYear()
          let m = date.getMonth() + 1
          if (m<10){
              m='0'+m
          }
          let statistic = `${y}${m}`
          request.$webGet('CommercialApi/Revenue/GetBayonetOAList',{
              StatisticsMonth:statistic,
              Serverpart_ID:this.serviceInfo.Serverpart_ID,
              ContainWhole:true
          }).then(res=>{
              console.log('resfdkfjdks',res)
              // 因为只让接口调用一次 所以要把全部和不同区域的内容要放在同一个列表里面 然后通过选项卡的点击来切换展示哪一块的数据
              let result = res.Result_Data.List
              result.forEach(item=>{
                let priceAll = 0
                item.OwnerProvinceList.forEach(subItem=>{
                    priceAll+=Number(subItem.value)
                })
                item.OwnerCityList.forEach(subItem=>{
                    subItem.value = Number(subItem.value)
                    subItem.rate = ((Number(subItem.value) / item.Vehicle_Count)*100)
                })
                item.OwnerProvinceList.forEach(subItem=>{
                    subItem.rate = ((Number(subItem.value) / priceAll)*100).toFixed(2)
                    subItem.name = subItem.name +' '+subItem.rate+'%'
                })
              })
              let dataList = []
              let cityList = []
              result.forEach(item=>{
                  let list = []
                  item.OwnerProvinceList.forEach(subItem=>{
                      list.push({name:subItem.name,value:Number(subItem.value)})
                  })
                  cityList.push(item.OwnerCityList)
                  dataList.push(list)
              })
              //城市
              this.cityPlaceAll = cityList
              console.log('this.cityPlaceAll',this.cityPlaceAll)
              this.cityPlace = cityList[this.selectTab]
              //省份
              this.homePlaceAll = dataList
              console.log('this.homePlaceAll',this.homePlaceAll)
              this.homePlace = dataList[this.selectTab]

          })
      },
      getCarTypeTime(){
          request.$webGet('CommercialApi/Revenue/GetBayonetSTAList',{
              StatisticsDate:this.endTime?this.endTime:this.time,
              Serverpart_ID:this.serviceInfo.Serverpart_ID,
              ContainWhole:true
          }).then(res=>{
              let result = res.Result_Data.List
              let series = []
              result.forEach(item=>{
                  let stayTime = []
                  let carType = []
                  let valueList = []
                  let typeAll = 0
                  item.StayTimesList.forEach(subItem=>{
                      stayTime.push(Number(subItem.value))
                  })
                  item.VehicleCountList.forEach(subItem=>{
                      typeAll+=Number(subItem.value)
                      valueList.push(subItem.value)
                  })

                  item.VehicleCountList.forEach(subItem=>{
                      subItem.rate = ((Number(subItem.value) / typeAll)*100).toFixed(2)
                      carType.push(Number(subItem.rate))
                  })

                  series.push({
                      index:1,
                      name:'停留时间',data:stayTime
                  })
                  series.push({
                      index:0,
                      name:'车辆类型',data:carType,valueList:valueList
                  })
              })
              this.carTypeTimeDataAll[0] ={categories:result[0].Vehicle_Type, series:[series[1],series[0]]}
              this.carTypeTimeDataAll[1] ={categories:result[1].Vehicle_Type, series:[series[3],series[2]]}
              this.carTypeTimeDataAll[2] ={categories:result[2].Vehicle_Type, series:[series[5],series[4]]}
              this.carTypeTimeData = this.carTypeTimeDataAll[this.selectTab]
          })
          // categories: ["小型车","中型车","大货车","新能源车"],
          //     series: [{name:'新能源',data:[30,38,20,10]},
          //     {name:'燃油车',data:[20,17,23,32]},
          //     {name:'停留时间',data:[62,38,50,84]}]
      },
      getTimeAnalysis(data){
        const date = new Date(this.endTime?this.endTime:this.time)
        let y = date.getFullYear()
        let m = date.getMonth()+1
        m = m<10?'0'+m:m
        request.$webGet('CommercialApi/Revenue/GetBayonetSTAnalysis',{
            StartMonth:`${y}${m}`,
            EndMonth:`${y}${m}`,
            Province_Code:'340000',
            Serverpart_ID:this.serviceInfo.Serverpart_ID,
            Serverpart_Region: data,
            TimeSpan: 2
        }).then(res=>{
            let result = res.Result_Data.List
            // this.timeAnalysisData = result
            let categories = [0,2,4,6,8,10,12,14,16,18,20,22]
            let series = []
            result.forEach(item=>{
                let obj = {name:'',data:[]}
                obj.name = item.name
                let valueList = []
                item.data.forEach(subItem=>{
                    valueList.push(Number((subItem[1] * 60).toFixed(0)))
                })
                obj.data = valueList
                series.push(obj)
            })
            let list = {
                categories:categories,
                series:series
            }
            this.timeAnalysisData = list
            console.log('this.timeAnalysisData',this.timeAnalysisData)
        })


        // res = {
        //     categories: ["2018","2019","2020","2021","2022","2023"],
        //     series: [
        //         {name: "成交量A", data: [35,8,25,37,4,20]},
        //         {name: "成交量B", data: [70,40,65,100,44,68]},
        //         {name: "成交量C", data: [100,80,95,150,112,132]}
        //     ]
        // }

      },
      getPercentEntry(type){
          const date = new Date(this.single)
          const nowDate = new Date()
          let nowMonth = nowDate.getMonth() + 1
          let nowYear = nowDate.getFullYear()
          let m = date.getMonth() + 1
          let y = date.getFullYear()
          let endTime = ''
          if (m === nowMonth && nowYear === y){
              endTime = this.time
          }else{
              endTime = this.endTime
          }

          let req = {}
          if (type==='全部' || !type){
              req = {
                  Statistics_Date: this.endTime?endTime:this.time,
                  Province_Code:'340000',
                  Serverpart_ID	:this.serviceInfo.Serverpart_ID,
                  GroupType:2,
                  ShowGrowthRate:true
              }
          }else{
              req = {
                  Statistics_Date: this.endTime?endTime:this.time,
                  Province_Code:'340000',
                  Serverpart_ID	:this.serviceInfo.Serverpart_ID,
                  GroupType:2,
                  ShowGrowthRate:true,
                  Serverpart_Region:type.slice(0,1)
              }
          }
          request.$webGet('CommercialApi/Revenue/GetSPBayonetList',req).then(res=>{
              this.percentEntryData = res.Result_Data.List
              if (this.percentEntryData.length>0){
                  this.allEntry = res.Result_Data.List[0].Entry_Rate
                  this.addAllEntry = res.Result_Data.List[0].Entry_GrowthRate
              }else{
                  this.allEntry = ''
                  this.addAllEntry = ''
              }

          })
      }
    }
}
</script>

<style scoped lang="scss">
.main{
  width:100%;
  background: #fff;
  .header{
    width: 100%;
    height: calc(1.056 * 100vw);
    padding: 0 16px;
    box-sizing: border-box;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    .car{
      width: 100vw;
      height: 100%;
      position: absolute;
      z-index: 0;
      top: 0;left: 0;
    }
    .analyse{
      width: calc(100vw - 32px);
      height: 48px;
      box-sizing: border-box;
      padding: 6px 12px;
      background: #fff;
      margin-top: 16px;
      border-radius: 4px;
      display: flex;
      position: absolute;
      bottom: 16px;
      .title{
        width: 28px;
        height: 18px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #160002;
        line-height: 18px;
        padding: 0 4px;
        text-align: center;
        border-radius: 4px;
        background:rgba(6, 93, 255, 0.1);
      }
      .content{
        width: calc(100% - 46px);
        padding-left: 6px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #786B6C;
        line-height: 18px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 2;
      }
    }

    .headerTop{
      width: 100vw;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999999999999;
      background: linear-gradient(180deg, #A2B9E8 0%, #B2C6ED 100%);
      .box{
        padding: 0 16px;
        position: absolute;
        box-sizing: border-box;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transform: translateY(-50%);
        .icon{
          width: 24px;
          height: 24px;
          .img{
            width: 100%;
            height: 100%;
          }
        }
        .title{
          font-size: 36rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 600;
          color: #1C2130;
          line-height: 56rpx;
        }
        .seize{
          width: 24px;
          height: 24px;
        }
      }
    }
    .serviceArea{
      position: absolute;
      box-sizing: border-box;
      .picker{
        .selectService{
          display: flex;
          align-items: center;
          .img{
            width: 40px;
            height: 40px;
            z-index: 2;
          }
          .select{
            height: 32px;
            background: #F8F8FA;
            border-radius: 0 16px 16px 0;
            transform: translateX(-20px);
            box-sizing: border-box;
            padding-left: 25px;
            display: flex;
            align-items: center;
            .content{
              display: flex;
              align-items: center;
              .uni-input{
                padding: 0;
                background: transparent;
                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;
                line-height: 40px;
                margin-left: 4px;
              }
              .rightArrow{
                width: 24px;
                height: 12px;
              }
            }

          }
        }
      }
      .other{
        margin-top: 12px;
        width: calc(100vw - 32px);
        text-align: center;
        .label{
          height: 54px;
          position: relative;
          .item{
            position: absolute;
            font-size: 32rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 44rpx;
            padding: 4px 12px;
            border-radius: 8rpx 8rpx 0rpx 8rpx;
          }
          .item{
            background: linear-gradient(180deg, #3190FF 0%, #1657FF 100%);
            top: 0px;
          }
          .item0{
            left: 50%;
            top: 50%;
            transform: translateX(-50%);
            z-index:3;
            background: linear-gradient(180deg, rgba(49, 144, 255, 0.8) 0%, rgba(22, 87, 255, 0.8) 100%);
          }
          .item1{
            left: 25%;
            top: 80%;
            z-index:2;
            background: linear-gradient(180deg, rgba(49, 144, 255, 0.7) 0%, rgba(22, 87, 255, 0.7) 100%);
          }
          .item2{
            right: 15%;
            top: 80%;
            z-index:2;
            background: linear-gradient(180deg, rgba(49, 144, 255, 0.6) 0%, rgba(22, 87, 255, 0.6) 100%);
          }
          .item3{
            right: 2%;
            top:100%;
            z-index:1;
            background: linear-gradient(180deg, rgba(49, 144, 255, 0.5) 0%, rgba(22, 87, 255, 0.5) 100%);
          }
          .item4{
            left: 2%;
            top:100%;
            z-index:1;
            background: linear-gradient(180deg, rgba(49, 144, 255, 0.4) 0%, rgba(22, 87, 255, 0.4) 100%);
          }
        }
        .car{
          width: 228px;
          height: 95px;
        }
      }
    }
  }
  .charts{
    width: 100%;
    box-sizing: border-box;
    padding: 28px 16px 0;
    .chartsItem{
        .top{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .title{
                font-size: 34rpx;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #160002;
                line-height: 48rpx;
            }
            .value{
                font-size: 14px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #160002;
                line-height: 20px;
            }
        }
        .topItem{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .title{
                font-size: 17px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #160002;
                line-height: 24px;
            }
            .box{
                display: flex;
                align-items: center;
                .value{
                    font-size: 16px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 600;
                    color: #000;
                    line-height: 20px;
                }
                .right{
                    margin-left: 4px;
                    display: flex;
                    align-items: center;
                    .arrowTop {
                        width: 14px;
                        height: 14px;
                        margin-right: 4px;
                    }
                    .text {
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #782717;
                        line-height: 20px;
                        margin-right: 4px;
                    }
                    .compare {
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #c97e64;
                        line-height: 20px;
                    }
                }
            }
        }
        .time{
            margin-bottom: 4px;
            .thisTime{
                font-size: 14px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 500;
                color: #160002;
            }
            .select{
                margin-left: 8px;
                display: inline-block;
                .time {
                    display: flex;
                    align-items: center;
                    margin-right: 4px;
                    .day {
                        font-size: 32rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #782717;
                        line-height: 44rpx;
                        margin-right: 4px;
                    }
                    .uni-input {
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #ae664e;
                        line-height: 36rpx;
                    }
                    .icon {
                        width: 24px;
                        height: 16px;
                    }
                }
            }
        }
      .tab{
        width: 100%;
        height: 38px;
        background: #F2F1F1;
        border-radius: 4px;
        box-sizing: border-box;
        padding:4px;
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        .tabItem{
          display: flex;
          justify-content: center;
          align-items: center;
          width: calc(100% / 3);
          height: 30px;
          border-radius: 4px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #786B6C;
        }
        .tabItemActive{
          color:#160002;
          background: #FFFFFF;
        }
      }
      .title{
        font-size: 34rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #160002;
        line-height: 48rpx;
      }
      .homePlace{

      }
    }
    .chartsItem:last-child{
      padding-bottom: 32px;
    }
  }
}
.noData{
  width: 100%;
  height: 100vh;
  position: relative;
    .box{
        margin: 30vh auto 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .img{
            width: 20vw;
            height: 24vw;
            margin-bottom: 15px;
        }
        .text{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #6C737A;
            line-height: 20px;
        }
    }

}
</style>
