<template>
  <div>
    <div class="main" v-if="isHaveData">
      <view class="YDBox" v-if="isShowAllProvince">
        <div class="headerTopBox" :style="{backgroundImage:serviceInfo.SERVERPART_NAME==='安徽驿达'?'linear-gradient(180deg, #A8BFED 0%, #F0F5FF 100%)':'url('+ 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/car.svg' +')',height:serviceInfo.SERVERPART_NAME==='安徽驿达'?(menu.bottom + 62)+'px':'324px'}">
          <div class="header" :style="{height:menu.height + 'px',top:menu.top+'px'}" v-if="false">
            <image class="backArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg" @click="handleBack"/>
            <div class="picker"  @click="handleGoSelectService">
              <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" v-if="serviceInfo.Serverpart_ID">{{serviceInfo.SPREGIONTYPE_NAME}}</p>
                    <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
                  </view>
                </view>
              </div>
            </div>
          </div>
          <!--                      <view class="sliderBox" :style="{top:(menu.bottom + 19)+'px'}">-->
          <!--                        <SliderPage :index="1"/>-->
          <!--                      </view>-->
          <!--                      <div class="timeSelect" :style="{top:(menu.bottom + 64)+'px'}">-->
          <!--                        <view style="display: flex;align-items: center">-->
          <!--                          <img class="selectIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectDateIcon.svg"/>-->
          <!--                          <picker mode="date" :value="searchText"  :end="lastDay" @change="changeAllProvinceSearch" >-->
          <!--                            <view class="time">-->
          <!--                              <view class="text">{{ searchText }}</view>-->
          <!--                              <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/arrow_bottom.svg"></image>-->
          <!--                            </view>-->
          <!--                          </picker>-->
          <!--                        </view>-->
          <!--                      </div>-->

        </div>
        <div class="otherCharts">
          <div class="list">
            <view class="listTop">
              <view class="topLeft">
                <image class="carIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/carIcon.svg"/>
                <span class="itemTitle">车流数据</span>
              </view>

              <div class="timeSelect" >
                <view style="display: flex;align-items: center">
                  <img class="selectIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/car/dateIcon.svg"/>
                  <picker mode="date" fields="month" :value="searchText"  :end="lastDay" @change="changeAllProvinceSearch" >
                    <view class="time">
                      <view class="text">{{ searchTextMonth }}</view>
                      <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/car/dateMore.svg"></image>
                    </view>
                  </picker>
                </view>
              </div>
            </view>

            <view class="sortBox">
              <view class="sortItem" @click="handleChangeSortName(1)">
                <text class="sortText">营收金额</text>
                <view class="sortIconBox">
                  <image class="upIcon" :style="{transform: sortName===1?sortType===1?``:`rotate(180deg)`:``}" :src="sortType===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg':sortName===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
                  <image class="bottomIcon" :style="{transform: sortName===1?sortType===1?``:`rotate(180deg)`:'rotate(-180deg)'}":src="sortType===1 && sortName===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
                </view>
              </view>

              <view class="sortItem" @click="handleChangeSortName(2)">
                <text class="sortText">单车价值</text>
                <view class="sortIconBox">
                  <image class="upIcon" :style="{transform: sortName===2?sortType===1?``:`rotate(180deg)`:``}" :src="sortType===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg':sortName===2?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
                  <image class="bottomIcon" :style="{transform: sortName===2?sortType===1?``:`rotate(180deg)`:'rotate(-180deg)'}":src="sortType===1 && sortName===2?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
                </view>
              </view>

              <view class="sortItem" @click="handleChangeSortName(3)">
                <text class="sortText">入区数量</text>
                <view class="sortIconBox">
                  <image class="upIcon" :style="{transform: sortName===3?sortType===1?``:`rotate(180deg)`:``}" :src="sortType===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg':sortName===3?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
                  <image class="bottomIcon" :style="{transform: sortName===3?sortType===1?``:`rotate(180deg)`:'rotate(-180deg)'}":src="sortType===1 && sortName===3?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
                </view>
              </view>

              <view class="sortItem" @click="handleChangeSortName(4)">
                <text class="sortText">入区率</text>
                <view class="sortIconBox">
                  <image class="upIcon" :style="{transform: sortName===4?sortType===1?``:`rotate(180deg)`:``}" :src="sortType===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg':sortName===4?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
                  <image class="bottomIcon" :style="{transform: sortName===4?sortType===1?``:`rotate(180deg)`:'rotate(-180deg)'}":src="sortType===1 && sortName===4?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
                </view>
              </view>

            </view>

            <scroll-view  class="listBigBox" :scroll-y="true">
              <div class="listItem" v-for="(item,index) in regionList" :key="index" @click="handleNoneChild(item,index)">
                <div class="itemLeft" >
                  <image class="bg" src="https://eshangtech.com/ShopICO/ahyd-BID/car/itemLeftBg.svg"/>
                  <view class="statueBox" :style="{backgroundImage:`url(${item.RevenueAmount?'https://eshangtech.com/ShopICO/ahyd-BID/car/statusHaveBg.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/statusNoHaveBg.svg'})`}">{{item.RevenueAmount?'营业中':'休息中'}}</view>
                  <view class="nameBox">
                    <text class="serviceName">{{item.Serverpart_Name ? item.Serverpart_Name.split('服务区')[0]:''}}</text>
                    <text class="serviceLabel">服务区</text>
                  </view>
                </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">
                      <text class="entryRateLabel">入区率</text>
                      <text class="entryRateValue">{{ item.Entry_Rate || '-' }}%</text>
                    </view>
                  </div>
                  <div class="rightBottom">
                    <view class="rightBottomItem">
                      <text class="itemLabel">营收 /万元</text>
                      <text class="itemValue">{{ $util.fmoney($util.getMoney(item.RevenueAmount/10000),2)  }}</text>
                    </view>
                    <view class="rightBottomItem">
                      <text class="itemLabel">单车 /元</text>
                      <text class="itemValue">{{item.AvgVehicleAmount || '-'}}</text>
                    </view>
                    <view class="rightBottomItem">
                      <text class="itemLabel">入区 /万辆</text>
                      <text class="itemValue">{{ $util.fmoney($util.getMoney(item.Vehicle_Count/10000),2)  }}</text>
                    </view>
                  </div>
                </div>
              </div>
              <view class="load-more" v-if="allRegionList && allRegionList.length>10*selectIndexPage">
                <text @click="handleGetMore">{{'点击加载更多'}}</text>
              </view>
            </scroll-view>
          </div>
        </div>
      </view>
      <view class="swiperBox" v-else>
        <view class="swiperItem" >
<!--          :style="{height:`calc(100vh - ${menu.bottom + 62}px)`}"-->
          <scroll-view scroll-y="true" style="height: 100vh" @scroll="handleScroll">
            <div class="header" :style="{backgroundImage: 'url('+ 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/car.svg' +')',height:648+'rpx'}">
              <div class="analyse" v-if="analyseText">
                <text class="title">分析</text>
                <text class="content">{{analyseText}}</text>
              </div>
              <div class="headerTop" :style="{height:(menu.bottom + 6) + 'px'}" v-if="false">
                <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>-->
                  <!--                          <view class="sliderBox" :style="{top:46+'px'}">-->
                  <!--                            <SliderPage :index="1"/>-->
                  <!--                          </view>-->
                  <div class="pickerTop" @click="handleGoSelectService">
                    <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" v-if="serviceInfo.Serverpart_ID">{{serviceInfo.SPREGIONTYPE_NAME}}</p>
                          <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
                        </view>
                      </view>
                    </div>
                  </div>

                  <!--  占位  -->
                  <div class="seize"></div>
                </div>
              </div>
              <div class="serviceArea" :style="{top : menu.bottom + 70 + 'px'}" >
                <div class="detailBox">
                  <div class="detailTop">
                    <div class="topLeft">{{serviceTypeObj[serviceInfoObj.SERVERPART_TYPE]}}</div>
                  </div>
                  <div class="functionList">
                    <div class="functionItem">
                      <image class="haveFun" :src="haveFun.car?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carHave.svg':'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carNoHave.svg'"/>
                      <image class="carIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carCarIcon.svg"/>
                      <text class="funText">司机之家</text>
                    </div>
                    <div class="functionItem">
                      <image class="haveFun" :src="haveFun.charge?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carHave.svg':'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carNoHave.svg'"/>
                      <image class="carIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carCharge.svg"/>
                      <text class="funText">充电桩</text>
                    </div>
                    <div class="functionItem">
                      <image class="haveFun" :src="haveFun.bady?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carHave.svg':'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carNoHave.svg'"/>
                      <image class="carIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carBady.svg"/>
                      <text class="funText">母婴室</text>
                    </div>
                    <div class="functionItem">
                      <image class="haveFun" :src="haveFun.gusetHome?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carHave.svg':'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carNoHave.svg'"/>
                      <image class="carIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carGuestRoom.svg"/>
                      <text class="funText">客房</text>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="charts" @click.stop="handleClick($event)">
              <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 && carData.length>0">
                  <entry-zone :carData="carData" :time="time" :month="thisMonth" />
                  <analyse :analyseInfo="{analysisins_type: 1102,analysisins_format: 2000}"  />
                </div>
                <no-data v-if="!carData"  :type="'car'"/>
              </div>

              <div class="chartsItem" style="margin-top: 32px">
                <p class="title">月度车流累计</p>
                <div>
                  <month-total :monthData="monthTotalList" :scrollTop="scrollTop"/>
                  <analyse :analyseInfo="{analysisins_type: 1107,analysisins_format: 2000}"  />
                </div>
              </div>

              <div class="chartsItem" style="margin-top: 32px;height: 640px">
                <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="https://eshangtech.com/ShopICO/ahyd-BID/index/arrow_bottom.svg"></image>
                      </view>
                    </picker>
                  </div>
                </div>
                <view class="tab" v-if="serviceInfo.Serverpart_ID">
                  <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" style="margin-bottom: 32px">车辆归属地</p>
                <div v-if="homePlace && homePlace.length>0">
                  <home-place :selectProvinceName="selectProvinceName" :selectValue="selectValue" :homeData="homePlace" :homeCity="cityPlace" @getHomeDate="getHomeData"/>
                  <div style="display: flex">
                    <!--                      <div class="selectType" >-->
                    <!--                        <view  :class="allProvince?'item itemSelect':'item itemUnSelect'" @click="handleAllProvince">全部省份</view>-->
                    <!--                      </div>-->
                    <div class="selectType">
                      <div :class="carType===item.value?'item itemSelect':'item itemUnSelect'" v-for="(item,index) in carTypeList" :key="index" @click="handleCarType(item)">
                        <div class="text">{{item.name}}</div>
                      </div>
                    </div>
                  </div>

                  <analyse :analyseInfo="{analysisins_type: 1103,analysisins_format: 2000}"  />
                </div>
                <div style="height: 450px" v-if="!homePlace" >
                  <no-data :type="'car'"/>
                </div>
              </div>

              <div class="chartsItem" style="margin-top: 32px;height:280px">
                <p class="title">车型停留分析/日均</p>
                <div v-if="carTypeTimeData.series && carTypeTimeData.series.length>0">
                  <car-type-time :data="carTypeTimeData"/>
                  <analyse :analyseInfo="{analysisins_type: 1104,analysisins_format: 2000}"  />
                </div>
                <no-data v-if="!carTypeTimeData.series"  :type="'car'"/>
              </div>

              <div class="chartsItem" style="margin-top: 32px;height:280px">
                <p class="title" style="margin-bottom: 16px">车型停留分布图/日均</p>
                <div>
                  <time-analysis :data="timeAnalysisData"/>
                  <analyse :analyseInfo="{analysisins_type: 1105,analysisins_format: 2000}"  />
                </div>
<!--                <no-data v-if="!timeAnalysisData.series"  :type="'car'"/>-->
              </div>

              <div class="chartsItem" style="margin-top: 32px">
                <div class="topItem" >
                  <p class="title">入区车型占比</p>
                  <div class="box" v-if="allEntry">
                    <text class="value">{{allEntry?allEntry:'-'}}%</text>
                    <view class="right" v-if="addAllEntry">
                      <text class="compare">(较上月)</text>
                      <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 && percentEntryData.length>0">
                  <percent-entry :data="percentEntryData" />
                  <analyse :analyseInfo="{analysisins_type: 1106,analysisins_format: 2000}"  />
                </div>
                <no-data v-if="!percentEntryData "  :type="'car'"/>
              </div>
            </div>
          </scroll-view>
        </view>
      </view>



    </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";
import EntryRate from "./components/car/entryRate.vue";
import SliderPage from "./components/sliderPage.vue";
import {getFieldEnum} from "../../../util/dateTime/index";
export default {
  name: "carPortrait",
  data(){
      const lastDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD', -1)
      return {
        menu:{}, //手机参数
        serviceArray:[], // 选择服务区的列表
        serviceIndex:0, //选中的服务区列表的第几个
        area:'片区', //属于哪个片区
        labelList:[], //标签
        time:'',//当前时间
        Serverpart_ID:'',//服务区id
        chartData:{},
        selectTab: 0,
        tabIsTrue: true,
        tabList:[],//选项卡列表
        carTypeList:[],//车型选项卡
        carNumAll : 0,//一共的入区车流数
        monthTotalList:{},//月累计
        carData:[],//入区车流的数据
        homePlaceAll:[],//车辆归属地两区总和列表
        homePlace:[],//车辆归属地
        cityPlaceAll:[],//车辆归属地的城市总和列表
        cityPlace:[],//车辆归属地的城市
        carTypeTimeDataAll:[{},{},{}],//车辆类型占比与停留时间总和列表
        carTypeTimeData:[],//车辆类型占比与停留时间
        timeAnalysisData:[],//  车辆价值与停留时间分析
        percentEntryData:[],//入区率占比
        percentEntryDataAll:[],//  入区率占比总的
        serviceInfo:{}, //当前服务区信息
        backType:'',//返回的页面类型
        analyseText:'',//分析的文字
        statusBarHeight:'',
        single:'',//显示时间
        lastDay:lastDay,
        endTime:'',
        thisMonth:'',//几月
        allEntry:'',//一共的入区率占比
        addAllEntry:'',//相较上月增加的入区率
        endData:'',//截止日期
        isFirst:true,//是不是第一次调用
        carType:'',// 车辆类型
        selectProvinceName:'',// 点击的省份名称
        selectValue:'',// 点击的省份值
        allProvince:true,// 是否选择了全省
        isShowAllProvince:false,// 是否展示全省的情况
        regionList: null,// 显示在页面的数据列表
        allRegionList: [],// 全部页面数据列表
        selectIndexPage: 1,// 页数
        theRequest: null,
        headMsg:null,
        searchEndTime:'',
        searchText:'',// 展示全省情況时显示的日期内容
        searchTextMonth:'',// 展示全省情況时显示的日期内容
        haveFun:{},
        serviceTypeObj:{},// 服务区类型对象
        serviceInfoObj:{},
        carSwiperList:[],
        currentSwiper:1,
        monthCategoriesList:[],// 月度累计的月份
        monthSeriesList:[],// 月度累计的数据
        sortType: 1,// 正序降序 0正序  1降序
        sortName: 3,// 排序字段 1营收金额 2单车数量 3入区数量 4入区率
        scrollTop:0
      }
    },
    components: {
      EntryRate,MonthTotal,
      Analyse, NoData, PercentEntry, CarTypeTime, HomePlace, EntryZone,timeAnalysis,SliderPage},
    computed:{
      isHaveData(){
         return true
      }
    },
    props:{
      selectIndex:{
        type:Number,
        default:0
      },
      serviceInfo:{
        type:Object,
        default: ()=>{}
      }
    },
    watch:{
      selectIndex:{
        handler(value){
          if (value===1){
            this.handleGetPageData()
          }
        },
        immediate:true
      }
    },
    created(){
      // // this.isShowAllProvince = option.mustAllProvince
      // // this.backType = option.type
      // // 服务区类型枚举
      // this.handleServiceType()
      // // 造滑动框模块
      // this.carSwiperList = ['previous','','next']
    },
    mounted(){
      //   this.currentSwiper=1
      //   this.carTypeList.forEach(item=>{
      //     item.select = false
      //   })
      //   this.selectProvinceName = ''
      //   this.carType = ''
      //   this.isFirst = true
      //   // 总的来说商业bi的五个页面都是 往组件里面传值 就可以出现图表和要求的东西
      //   // 外面的一层页面主要用于处理数据
      //   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)
      //   this.searchText = this.time
      //   this.searchTextMonth = this.$util.getThisMonthHave(this.time)
      //   const date = new Date(this.time)
      //   //设置日期选择器的开始时间和结束时间
      //   let searchYear = date.getFullYear()
      //   let m = date.getMonth() + 1
      //   if (m<10){
      //       m = '0' + m
      //   }
      //   let d =  date.getDate()
      //   if (d<10){
      //     d = '0'+ d
      //   }
      // this.thisMonth = m
      //
      // let systemInfo = uni.getSystemInfoSync()
      //   //  获取手机参数对页面进行适配
      // this.statusBarHeight = Number(systemInfo.statusBarHeight)
      //   // 把获取到的手机参数保存
      //   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.theRequest = {
      //     GroupType: 1000,
      //     ProvinceCode: 340000,
      //     ServerpartIds: "",
      //     ShopAnalysisType: 0,
      //     month: `${searchYear}${m}`,
      //     time: `${searchYear}-${m}-${d}`,
      //   }
      // if (this.serviceInfo.SERVERPART_NAME==='安徽驿达' || this.isShowAllProvince==='true'){
      //   this.isShowAllProvince = true
      // }
      // if (this.isShowAllProvince === true){
      //   this.serviceInfo.SERVERPART_NAME = '安徽驿达'
      //   this.serviceInfo.Serverpart_ID = undefined
      //   this.getDetail()
      // }else{
      //   //月累计
      //   this.getMonthTotalList()
      //   //获取服务区基本信息
      //   this.getServiceInfo()
      //   // 入区车流分析
      //   this.getCarData()
      //   // 车辆归属地
      //   this.getHomeData()
      //   // 车辆类型占比与停留时间
      //   this.getCarTypeTime()
      //   // 车辆价值与停留时间分析
      //   this.getTimeAnalysis('')
      //   //入区率占比
      //   this.getPercentEntry()
      //   //获得标签
      //   this.getLabelDetail()
      // }

    },
    onHide(){
      this.isShowAllProvince = false
    },
    onUnload() {
        this.$util.addUserBehavior()
        this.carTypeList.forEach(item=>{
          item.select = false
        })
        this.selectProvinceName = ''
        this.carType = ''
        this.searchText=''
      this.searchTextMonth = ''
    },
    methods:{
      handleGetMore(){
        this.selectIndexPage +=1
        this.regionList = this.allRegionList.slice(0,this.selectIndexPage * 10)
      },
      handleClick(e){
        // console.log('click',e)
      },
      handleScroll(e){
        // console.log('e',e)
        this.scrollTop = e.detail.scrollTop
      },
      // 修改排序字段
      handleChangeSortName(value){
        if (value===this.sortName){
          if (this.sortType===1){
            this.sortType=0
          }else{
            this.sortType=1
          }
        }else{
          this.sortName = value
          this.sortType=1
        }
        this.getDetail()
      },
      // 获取页面数据
      handleGetPageData(){
        // 服务区类型枚举
        this.handleServiceType()
        // 造滑动框模块
        this.carSwiperList = ['previous','','next']

        this.currentSwiper=1
        this.carTypeList.forEach(item=>{
          item.select = false
        })
        this.selectProvinceName = ''
        this.carType = ''
        this.isFirst = true
        // 总的来说商业bi的五个页面都是 往组件里面传值 就可以出现图表和要求的东西
        // 外面的一层页面主要用于处理数据
        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)
        this.searchText = this.time
        this.searchTextMonth = this.$util.getThisMonthHave(this.time)
        const date = new Date(this.time)
        //设置日期选择器的开始时间和结束时间
        let searchYear = date.getFullYear()
        let m = date.getMonth() + 1
        if (m<10){
          m = '0' + m
        }
        let d =  date.getDate()
        if (d<10){
          d = '0'+ d
        }
        this.thisMonth = m

        let systemInfo = uni.getSystemInfoSync()
        //  获取手机参数对页面进行适配
        this.statusBarHeight = Number(systemInfo.statusBarHeight)
        // 把获取到的手机参数保存
        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.theRequest = {
          GroupType: 1000,
          ProvinceCode: 340000,
          ServerpartIds: "",
          ShopAnalysisType: 0,
          month: `${searchYear}${m}`,
          time: `${searchYear}-${m}-${d}`,
        }
        if (this.serviceInfo.SERVERPART_NAME==='安徽驿达' || this.isShowAllProvince==='true'){
          this.isShowAllProvince = true
        }
        if (this.isShowAllProvince === true){
          this.serviceInfo.SERVERPART_NAME = '安徽驿达'
          this.serviceInfo.Serverpart_ID = undefined
          this.getDetail()
        }else{
          //月累计
          this.getMonthTotalList()
          //获取服务区基本信息
          this.getServiceInfo()
          // 入区车流分析
          this.getCarData()
          // 车辆归属地
          this.getHomeData()
          // 车辆类型占比与停留时间
          this.getCarTypeTime()
          // 车辆价值与停留时间分析
          this.getTimeAnalysis('')
          //入区率占比
          this.getPercentEntry()
          //获得标签
          this.getLabelDetail()
        }
      },
      // 滚动轮播图
      changeSwiper(e){
        console.log('e',e)
        this.currentSwiper = e.detail.current
        let value = this.carSwiperList[Number(e.detail.current)]
        if (value==='previous'){
          uni.redirectTo({
            url:`/pages/map/detail`
          })
        }else if(value==='next'){
          uni.redirectTo({
            url:`/pages/commercialBI/guestPortrait`
          })
        }
      },
      // 点击查看更多跳转
      handleGoServiceMessage(){
        this.$util.toNextRoute('navigateTo', `/pages/map/detail`)
        // this.$util.toNextRoute('navigateTo', `/pages/summaryOfPortraits/index?index=0`)
      },
      // 枚举服务区类型 SERVERPART_TYPE
      async handleServiceType(){
        const data = await getFieldEnum({ FieldExplainField: 'SERVERPART_TYPE' });
        console.log('data',data)
        let obj = {}
        data.forEach(item=>{
          obj[Number(item.value)] = item.label
        })
        console.log('obj',obj)
        this.serviceTypeObj = obj
      },
      showScoreAnimation1(copyRightItems,id) {
        /*
       cxt_arc.arc(x, y, r, sAngle, eAngle, counterclockwise);
       x                        Number      圆的x坐标
       y                        Number      圆的y坐标
       r                        Number      圆的半径
       sAngle                Number      起始弧度，单位弧度（在3点钟方向）
       eAngle                Number      终止弧度
       counterclockwise        Boolean      可选。指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针。
       */
        let that = this
        // 页面渲染完成
        // 这部分是灰色底层
        let cxt_arc = wx.createCanvasContext(id) //创建并返回绘图上下文context对象。
        cxt_arc.setLineWidth(6) //绘线的宽度
        cxt_arc.setStrokeStyle('#C5D6FF') //绘线的颜色，底色
        cxt_arc.setLineCap('round') //线条端点样式
        cxt_arc.beginPath() //开始一个新的路径
        cxt_arc.arc(20, 20, 16, 0, 2 * Math.PI, false) //设置一个原点(53,53)，半径为50的圆的路径到当前路径
        cxt_arc.stroke() //对当前路径进行描边
        //这部分是绿色部分
        cxt_arc.setLineWidth(6)
        cxt_arc.setStrokeStyle('#1A5FFF')//可修改所需颜色
        cxt_arc.setLineCap('round')
        cxt_arc.beginPath() //开始一个新的路径
        cxt_arc.arc(
            20,
            20,
            16,
            (-Math.PI * 1) / 2,
            2 * Math.PI * (copyRightItems / 100) - (Math.PI * 1) / 2,
            false
        )
        cxt_arc.stroke() //对当前路径进行描边
        cxt_arc.draw()
      },
      handleNoneChild(obj,selectIndex){
        this.regionList.forEach((item,index)=>{
          if (item.name === obj.name && index===selectIndex){
            item.showChild = !item.showChild
          }
        })
        this.$forceUpdate()
      },
        async getDetail() {
          uni.showLoading({
            title:'加载中'
          })
          this.regionList=[]
          const date = new Date(this.searchText)
          const y = date.getFullYear()
          let m = date.getMonth() + 1
          if (m<10){
            m = '0' + m
          }
          let req
          if (this.serviceInfo.SERVERPART_NAME==='安徽驿达'){
            req = {
              StatisticsMonth:`${y}${m}`,
              SortStr:`${this.sortName===1?'RevenueAmount':this.sortName===2?'AvgVehicleAmount':this.sortName===3?'Vehicle_Count':'Entry_Rate'}${this.sortType===1?' desc':''}`
            }
          }else{
            req = {
              StatisticsMonth:`${y}${m}`,
              Serverpart_ID	:this.serviceInfo.Serverpart_ID || "",
              SortStr:`${this.sortName===1?'RevenueAmount':this.sortName===2?'AvgVehicleAmount':this.sortName===3?'Vehicle_Count':'Entry_Rate'}${this.sortType===1?' desc':''}`
            }
          }
          request.$webGet('CommercialApi/BigData/GetProvinceMonthAnalysis',req).then(res=>{
            console.log('res',res)
            this.carData = res.Result_Data.List
            this.carData.forEach(item=>{
              item.Serverpart_ID = this.serviceInfo.Serverpart_ID
              item.showChild = false
            })
            this.allRegionList = this.carData
            this.regionList = this.carData.slice(0,this.selectIndexPage * 10)
            console.log('this.carData',this.carData)
            uni.hideLoading()
            // let sumObj = {
            //   Serverpart_Name:'',
            //   Serverpart_Region:'',
            //   SectionFlow_Count:0,
            //   Vehicle_Count:0,
            //   showChild:false
            // }
            // this.carData.forEach(item=>{
            //   sumObj.Serverpart_Name = item.Serverpart_Name
            //   sumObj.Serverpart_Region = item.Serverpart_Region
            //   sumObj.SectionFlow_Count += item.SectionFlow_Count
            //   sumObj.Vehicle_Count += item.Vehicle_Count
            // })
            // if (sumObj.Vehicle_Count && sumObj.SectionFlow_Count){
            //   sumObj.Entry_Rate = ((sumObj.Vehicle_Count / sumObj.SectionFlow_Count)*100).toFixed(2)
            // }
            // console.log('sumObj',sumObj)
            // sumObj.Vehicle_Count = this.$util.fmoney(this.$util.getMoney(sumObj.Vehicle_Count / 10000),2)
            // this.regionList = [sumObj]
          })


          // uni.showLoading({
          //   title: '正在加载...'
          // })
          // const requestParamas = {
          //   Statistics_Date: obj.time ,
          //   Statistics_Month: obj.month ,
          //   Province_Code: obj.ProvinceCode ,
          //   pushProvinceCode: obj.ProvinceCode ,
          //   Serverpart_ID: obj.GroupType != 1020 ? obj.ServerpartIds : '',
          //   SPRegionType_ID: obj.GroupType == 1020 ? obj.ServerpartIds : '',
          //   // Revenue_Include: 1
          // }
          //
          // const bayonetCount = await request.$webGet('CommercialApi/Revenue/GetSPBayonetList', requestParamas)
          // const res = bayonetCount.Result_Data.List
          // let bayonetPie = [] // 区域车流饼图统计数据
          // res.map(async (n, index) => {
          //   bayonetPie = anhuiYestodayRevenueData.getBayonetPie('Serverpart_Name', n, bayonetPie)
          // })
          // bayonetPie.forEach((item,index)=>{
          //     let entryNum = 0 // 该片区总计的入区车流
          //     let flowNum = 0 // 该片区总计的断面流量
          //     let entryNumNoZero = 0 //
          //     let flowNumNoZero = 0 //
          //     item.spList.forEach(subItem=>{
          //         entryNum+=subItem.Vehicle_Count
          //         flowNum+=subItem.SectionFlow_Count
          //       if (subItem.regionList && subItem.regionList.length>0){
          //         subItem.regionList.forEach(thirdItem=>{
          //           if (thirdItem.SectionFlow_Count===0 || thirdItem.Vehicle_Count===0){
          //             thirdItem.entryRate = 0
          //           }else{
          //             thirdItem.entryRate = Number(((thirdItem.Vehicle_Count / thirdItem.SectionFlow_Count)*100).toFixed(2))
          //           }
          //
          //           if (thirdItem.Vehicle_Count<thirdItem.SectionFlow_Count && thirdItem.Vehicle_Count!==0 && thirdItem.SectionFlow_Count!==0){
          //             entryNumNoZero+=thirdItem.Vehicle_Count
          //             flowNumNoZero+=thirdItem.SectionFlow_Count
          //           }
          //         })
          //       }
          //     })
          //     item.entry = entryNum
          //     item.flow = flowNum
          //     item.flowRate =flowNumNoZero? ((entryNumNoZero / flowNumNoZero)*100).toFixed(2) + '%':'-'
          //     item.showChild = false
          //     item.entryList = [{name:'已入区',value:Number(item.flowRate.split('%')[0])},{name:'未入区',value:100 - item.flowRate.split('%')[0]}]
          //     item.bg = item.name.indexOf('皖中')!==-1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/Middle.png':item.name.indexOf('皖西')!==-1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/west.png':item.name.indexOf('皖东')!==-1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/east.png':item.name.indexOf('皖南')!==-1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/south.png':item.name.indexOf('皖北')!==-1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/north.png':''
          // })
          // if (bayonetPie && bayonetPie.length>0){
          //   for (let i=0;i<=bayonetPie.length-1;i++){
          //     for (let j=0;j<=bayonetPie.length - i - 1;j++){
          //       if (bayonetPie[j] && bayonetPie[j + 1] && bayonetPie[j].entry && bayonetPie[j+1].entry){
          //         if (bayonetPie[j].entry < bayonetPie[j+1].entry){
          //           let temp = bayonetPie[j]
          //           bayonetPie[j] = bayonetPie[j + 1]
          //           bayonetPie[j + 1] = temp
          //         }
          //       }
          //     }
          //   }
          // }
          //
          // bayonetPie.forEach(item=>{
          //   if (item.spList && item.spList.length>0){
          //     for (let i=0;i<=item.spList.length-1;i++){
          //       for (let j=0;j<=item.spList.length - i - 1;j++){
          //         if (item.spList[j] && item.spList[j + 1] && item.spList[j].Vehicle_Count && item.spList[j+1].Vehicle_Count){
          //           if (item.spList[j].Vehicle_Count < item.spList[j+1].Vehicle_Count){
          //             let temp = item.spList[j]
          //             item.spList[j] = item.spList[j + 1]
          //             item.spList[j + 1] = temp
          //           }
          //         }
          //       }
          //     }
          //   }
          // })
          // this.regionList = bayonetPie
          // this.regionList.forEach((item,index)=>{
          //   const number = Number(item.flowRate.split('%')[0])
          //   this.showScoreAnimation1(number,index)
          // })
          // uni.hideLoading()
        },
        //车型选择
        handleCarType(selectItem){
          if (selectItem.value===this.carType){
            this.carType=''
          }else{
            this.carType = selectItem.value
          }
          this.selectProvinceName = ''
          this.selectValue = ''
          this.getHomeData(this.carType)
        },
        handleGetHome(ProvinceName,allCount,isCancel){
          if (isCancel){
            this.selectValue = allCount
            this.selectProvinceName = ''
            this.getHomeData(this.carType)
          }else{
            this.selectValue = allCount
            if (ProvinceName.indexOf(',')!==-1){
              this.selectProvinceName = '其他'
              this.getCityList(ProvinceName,this.selectValue)
            }else{
              this.selectProvinceName = ProvinceName
              this.getCityList(this.selectProvinceName,this.selectValue)
            }
          }
        },

        //获取服务区基本信息
        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
            }
            if (id){
              let req = {
                ServerpartId:id
              }
              const total = await request.$webGet('CommercialApi/BaseInfo/GetServerpartInfo',req)
              // 每次调用接口不能破坏tabList的数据格式
              let tabList = [{name:'全部',value:0}]
              total.Result_Data.RegionInfo.forEach((item,index)=>{
                tabList.push({name:item.SERVERPART_REGIONNAME,value:index+1})
              })
              this.serviceInfoObj = total.Result_Data
              this.tabList = tabList
              this.haveFun = {
                car:total.Result_Data.HASPILOTLOUNGE,
                charge:total.Result_Data.HASCHARGE ,
                bady:total.Result_Data.HASMOTHER ,
                gusetHome:total.Result_Data.HASGUESTROOM
              }
              console.log('total',total)
              console.log('this.haveFun',this.haveFun)
            }
        },
        async changeAllProvinceSearch(e){
          const date = new Date(e.detail.value)
          const y = date.getFullYear()
          let m = date.getMonth() + 1
          if (m<10){
            m = '0'+m
          }
          let d = date.getDate()
          if (d<10){
            d = '0'+d
          }
          this.theRequest = {
            GroupType: 1000,
            ProvinceCode: 340000,
            ServerpartIds: "",
            ShopAnalysisType: 0,
            month: `${y}${m}`,
            time: `${y}-${m}-${d}`,
          }
          this.searchText = e.detail.value
          this.searchTextMonth = e.detail.value
          await this.getDetail()
        },
        // 时间选择器改变的时间
        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]?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/commercialBINew/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(){
          let time
          let nowYear
          let yerYear
          if (this.endTime){
              const date  = new Date(this.endTime)
              let y = date.getFullYear() - 1
              let m = date.getMonth() + 1
              if (m<10){
                  m = '0'+ m
              }
              let d = date.getDate()
              time = `${y}-${m}-${d}`
              nowYear = y + 1
              yerYear = y
          }else{
              const date  = new Date(this.time)
              let y = date.getFullYear() - 1
              let m = date.getMonth() + 1
              if (m<10){
                  m = '0'+ m
              }
              let d = date.getDate()
              time = `${y}-${m}-${d}`
              nowYear = y + 1
              yerYear = y
          }
            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 carCountMax = 0
            let moneyCount = []
            let monetCountMax = 0
            let info = []
            data.Result_Data.List.forEach(item=>{
                monthList.push(item.Statistics_Month + '月')
                if (carCountMax<item.Vehicle_Count){
                    carCountMax = item.Vehicle_Count
                }
                if (monetCountMax<item.RevenueAmount){
                    monetCountMax = item.RevenueAmount
                }
                if (item.Vehicle_Count === 0){
                    carCount.push(0)
                }else{
                    carCount.push(Number((item.Vehicle_Count / 10000)))
                }
                moneyCount.push(Number((item.RevenueAmount / 10000)))
                // showTip要展示的信息
                info.push({
                    allCarCount : item.Vehicle_Count,
                    region:item.RegionList,
                    rate:item.Entry_Rate,
                    money:item.RevenueAmount,
                    year:nowYear
                })
            })


            const reqYes = {
                StatisticsDate:time,
                Serverpart_ID:this.serviceInfo.Serverpart_ID
            }
            const dataYes = await request.$webGet('CommercialApi/BigData/GetMonthAnalysis',reqYes)
              let monthListYes = []
              let carCountYes = []
              let carCountMaxYes = 0
              let moneyCountYes = []
              let monetCountMaxYes = 0
              let infoYes = []
        console.log('dataYes.Result_Data',dataYes.Result_Data)
            dataYes.Result_Data.List.forEach(item=>{
              monthListYes.push(item.Statistics_Month + '月')
                  if (carCountMaxYes<item.Vehicle_Count){
                      carCountMaxYes = item.Vehicle_Count
                  }
                  if (monetCountMaxYes<item.RevenueAmount){
                      monetCountMaxYes = item.RevenueAmount
                  }
                  if (item.Vehicle_Count === 0){
                      carCountYes.push(0)
                  }else{
                      carCountYes.push(Number((item.Vehicle_Count / 10000)))
                  }
                moneyCountYes.push(Number((item.RevenueAmount / 10000)))
                  // showTip要展示的信息
                infoYes.push({
                      allCarCount : item.Vehicle_Count,
                      region:item.RegionList,
                      rate:item.Entry_Rate,
                      money:item.RevenueAmount,
                      year:yerYear
                  })
              })

            let res = {
                categories: monthList,
                series:[{name:`${nowYear}年车流量`,data:carCount,type:'column',index:0,info:info,max:carCountMax / 10000,year:nowYear},
                    {name:`${yerYear}年车流量`,data:carCountYes,type:'column',index:0,info:infoYes,max:carCountMaxYes / 10000,year:yerYear},
                    {name:`${nowYear}年交易额`,data:moneyCount,type:'line',index:1,info:info,max:monetCountMax / 10000,year:nowYear},
                    {name:`${yerYear}年交易额`,data:moneyCountYes,type:'line',index:1,info:infoYes,max:monetCountMaxYes / 10000,year:yerYear}]
            }
            this.monthTotalList = res
        this.monthCategoriesList = monthList
        this.monthSeriesList = res.series
        this.$forceUpdate()
        console.log('this.monthTotalList',this.monthTotalList)
          // 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!==0?this.serviceInfo.Serverpart_ID:null,
          ShowAddUpCount:true
        }).then(res=>{
            this.carData = res.Result_Data.List
          res.Result_Data.List.forEach(item=>{
            item.Serverpart_ID = this.serviceInfo.Serverpart_ID
          })
        })
      },
      getHomeData(){
        uni.showLoading({
          title:'加载中....'
        })
          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}`
          let req
              req = {
                  StatisticsMonth:statistic,
                  Serverpart_ID:this.serviceInfo.Serverpart_ID,
                  ContainWhole:true,
                  VehicleType:this.carType|| '',
                  ProvinceName:this.selectProvinceName ,
                  isExclude:this.selectProvinceName.indexOf(',') !== -1,
              }
          request.$webGet('CommercialApi/Revenue/GetBayonetOAList',req).then(res=>{
              if (this.isFirst){
                  let list = []
                  res.Result_Data.OtherData.forEach(item=>{
                      list.push({name:item,value:item})
                  })
                  this.carTypeList =list
                  this.isFirst = false
              }

              // 因为只让接口调用一次 所以要把全部和不同区域的内容要放在同一个列表里面 然后通过选项卡的点击来切换展示哪一块的数据
              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
              this.cityPlace = cityList[this.selectTab]?cityList[this.selectTab]:[]
              //省份
              this.homePlaceAll = dataList
              this.homePlace = dataList[this.selectTab]?dataList[this.selectTab]:[]
            console.log('this.homePlace',this.homePlace)
          })
        uni.hideLoading()
      },

      getCityList(ProvinceName,allCount){
        uni.showLoading({
          title: '正在加载...'
        })
        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}`
        const req = {
          StatisticsMonth:statistic,
          ProvinceName:ProvinceName ,
          Serverpart_ID:this.serviceInfo.Serverpart_ID,
          VehicleType: this.carType || '',
          isExclude:ProvinceName.indexOf(',') !== -1,
          ContainWhole:true
        }
        request.$webGet('CommercialApi/Revenue/GetBayonetProvinceOAList',req).then(res=>{
          let result = res.Result_Data.List
          result.forEach(item=>{
            item.OwnerCityList.forEach(subItem=>{
              subItem.value = Number(subItem.value)
              subItem.rate = ((Number(subItem.value) / allCount)*100)
            })
          })
          this.cityPlace = res.Result_Data.List[0] ? res.Result_Data.List[0].OwnerCityList : []
          uni.hideLoading()
        })
      },

      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 = []
              if (result && result.length>0){
                  result.forEach(item=>{
                      let stayTime = []
                      let stayTimeMax = 0
                      let carType = []
                      let valueList = []
                      let typeAll = 0
                      item.StayTimesList.forEach(subItem=>{
                          if (stayTimeMax<Number(subItem.value)){
                              stayTimeMax = Number(subItem.value)
                          }
                          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,
                          max:stayTimeMax
                      })
                      series.push({
                          index:0,
                          name:'车辆类型',data:carType,valueList:valueList
                      })
                  })
                  if (result.length === 1){
                      this.carTypeTimeDataAll[0] ={categories:result[0].Vehicle_Type?result[0].Vehicle_Type:[], series:[series[1],series[0]]}
                  }  else if(result.length === 2){
                      this.carTypeTimeDataAll[0] ={categories:result[0].Vehicle_Type?result[0].Vehicle_Type:[], series:[series[1],series[0]]}
                      this.carTypeTimeDataAll[1] ={categories:result[1].Vehicle_Type?result[1].Vehicle_Type:[], series:[series[3],series[2]]}
                  }else if(result.length === 3){
                      this.carTypeTimeDataAll[0] ={categories:result[0].Vehicle_Type?result[0].Vehicle_Type:[], series:[series[1],series[0]]}
                      this.carTypeTimeDataAll[1] ={categories:result[1].Vehicle_Type?result[1].Vehicle_Type:[], series:[series[3],series[2]]}
                      this.carTypeTimeDataAll[2] ={categories:result[2].Vehicle_Type?result[2].Vehicle_Type:[], series:[series[5],series[4]]}
                  }
                  this.carTypeTimeData = this.carTypeTimeDataAll[this.selectTab]?this.carTypeTimeDataAll[this.selectTab]:[]
              }else{
                  this.carTypeTimeDataAll = []
                  this.carTypeTimeData = []
              }
          })
          // 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 = []
            let max = 0
            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
                valueList.forEach(item=>{
                    if (item>max){
                        max = item
                    }
                })
                series.push(obj)
            })
            let list = {
                categories:categories,
                series:series,
                max:max
            }
            this.timeAnalysisData = list
        })
        // 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?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 && 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">
@import '/static/public/font/stylesheet.css';
.main{
  width:100%;
  background: #fff;
  .YDBox{
    .headerTopBox{
      width: 100%;
      //height: 152px;
      height: 324px;
      box-sizing: border-box;
      position: relative;
      background: linear-gradient(90deg, #60AAFF 0%,#3E74FF 100%);
      .header{
        position: absolute;
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        .backArrow{
          width: 24px;
          height: 24px;
          margin-right: 16px;
        }
        .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;
                }
              }

            }
          }
        }
      }
      .sliderBox{
        width: 100%;
        position: absolute;
        left: 0;
      }
      .timeSelect{
        position: absolute;
        left: 16px;
        .selectIcon{
          width: 16px;
          height: 16px;
        }
        .time{
          display: flex;
          align-items: center;
          .text{
            margin: 0 5px;
            color: #fff;
          }
          .icon{
            width: 18px;
            height: 18px;
          }
        }
      }
    }
    .otherCharts{
      width: 100%;
      box-sizing: border-box;
      padding: 0 16px;
      /*日结上传*/
      .chartsTop {
        width: 100%;
        box-sizing: border-box;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left{
          display: flex;
          justify-content: flex-start;
          .serviceArea{
            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;
                    }
                  }

                }
              }
            }
          }

        }
        .right{
          .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;
            }
          }
        }
      }
      .list{
        margin-top: 32rpx;
        box-sizing: border-box;
        padding-bottom: 12px;
        .listTop{
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 12px;
          .topLeft{
            display: flex;
            align-items: center;
            .carIcon{
              width: 48rpx;
              height: 48rpx;
              margin-right: 12rpx;
            }
            .itemTitle{
              font-size: 32rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              color: #160002;
              line-height: 44rpx;
            }
          }

          .timeSelect{
            border-radius: 28rpx;
            padding: 12rpx 16rpx;
            background: #E9EFFF;
            .selectIcon{
              width: 16px;
              height: 16px;
            }
            .time{
              display: flex;
              align-items: center;
              .text{
                font-size: 26rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #2363FF;
                line-height: 36rpx;
                margin-left: 10rpx;
              }
              .icon{
                width: 18px;
                height: 12px;
              }
            }
          }
        }
        .sortBox{
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 16rpx;
          .sortItem{
            display: flex;
            align-items: center;
            .sortText{
              font-size: 24rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #9A9A9A;
              line-height: 36rpx;
            }
            .sortIconBox{
              display: flex;
              flex-direction: column;
              margin-left: 16rpx;
              .upIcon{
                width: 16rpx;
                height: 12rpx;
                margin-bottom: 4rpx;
              }
              .bottomIcon{
                width: 16rpx;
                height: 12rpx;
              }
            }
          }
        }
        .listBigBox{
          width: 100%;
          height: calc(100ch - 250px);
          //margin-top: 24px;
          box-sizing: border-box;
          padding-bottom: 12px;
          .listItem{
            width:100%;
            padding: 24rpx;
            box-sizing: border-box;
            border-radius: 16rpx;
            background: #F7F7F7;
            margin-bottom: 24rpx;
            display: flex;
            .itemLeft{
              width: 160rpx;
              height: 160rpx;
              border-radius: 16rpx;
              //border: 2rpx solid #E6E6E6;
              position: relative;
              background-repeat: no-repeat;
              background-size: cover;
              .bg{
                position: absolute;
                width: 160rpx;
                height: 160rpx;
                top: 0;left: 0;
                z-index: 1;
              }
              .statueBox{
                position: absolute;
                z-index: 2;
                top: 0;right: 0;
                width: 76rpx;
                height: 32rpx;
                font-size: 20rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 28rpx;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                text-align: center;
              }
              .nameBox{
                position: absolute;
                z-index: 2;
                top: 32rpx;
                left: 20rpx;
                display: flex;
                flex-direction: column;
                .serviceName{
                  font-size: 30rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 500;
                  color: #7F020B;
                  line-height: 30rpx;
                }
                .serviceLabel{
                  font-size: 20rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 500;
                  color: #7F020B;
                  line-height: 20rpx;
                }
              }
            }
            .contentRight{
              width: calc(100% - 176rpx);
              margin-left: 16rpx;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .rightTop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                .rightTopLeft{
                  display: flex;
                  align-items: center;
                  .indexBox{
                    width: 36rpx;
                    height: 32rpx;
                    font-size: 24rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #FEFFFF;
                    line-height: 28rpx;
                    text-align: center;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                  }
                  .areaName{
                    font-size: 28rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #160002;
                    line-height: 40rpx;
                    margin-left: 8rpx;
                  }
                }
                .rightTopRight{
                  .entryRateLabel{
                    font-size: 24rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #9A9A9A;
                    line-height: 32rpx;
                  }
                  .entryRateValue{
                    font-size: 28rpx;
                    font-family: DINAlternate, DINAlternate;
                    font-weight: bold;
                    color: #E83944;
                    line-height: 32rpx;
                    margin-left: 4rpx;
                  }
                }
              }
              .rightBottom{
                display: flex;
                justify-content: space-between;
                .rightBottomItem{
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  .itemLabel{
                    font-size: 24rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #9A9A9A;
                    line-height: 36rpx;
                  }
                  .itemValue{
                    font-size: 28rpx;
                    font-family: DINAlternate, DINAlternate;
                    font-weight: bold;
                    color: #160002;
                    line-height: 32rpx;
                    margin-top: 8rpx;
                  }
                }
              }
            }
          }
          .load-more {
            text-align: center;
            width: 100%;
            height: 80rpx;
            color: #9999;
            font-size: 24rpx;
          }
          //.listItem{
          //  margin-bottom: 12px;
          //  border: 1px solid #D9DBE0;
          //  border-radius: 8px;
          //  position: relative;
          //  .bg{
          //    position: absolute;
          //    right: 0;top: 0;
          //    width: 97px;
          //    height: 97px;
          //  }
          //  .listBox{
          //    width: 100%;
          //    box-sizing: border-box;
          //    padding: 12px 16px;
          //    background: linear-gradient(314deg, #EAEFFF 0%, #F3F5FF 32%, #F5FCFF 50%, #F0F7FF 67%, #DBE5FF 100%);
          //    border-bottom: 1px solid #D9DBE0;
          //    border-radius: 8px;
          //    .itemTop{
          //      width: 100%;
          //      display: flex;
          //      justify-content: space-between;
          //      align-items: center;
          //      .itemLeft{
          //        display: inline-block;
          //        padding: 4px 12px;
          //        background: rgba(26, 95, 255, 0.1);
          //        border-radius: 14px;
          //        .itemFixed{
          //          width: 12px;
          //          height: 14px;
          //          margin-right: 4px;
          //        }
          //        .serverName{
          //          font-size: 16px;
          //          font-family: DINAlternate-Bold, DINAlternate;
          //          font-weight: bold;
          //          white-space: nowrap;
          //          color: #1A5FFF;
          //          line-height: 22px
          //        }
          //      }
          //      .itemRight{
          //        display: flex;
          //        align-items: center;
          //        .entryRate{
          //          display: flex;
          //          flex-direction: column;
          //          .entryValue{
          //            font-size: 16px;
          //            font-family: DINAlternate-Bold, DINAlternate;
          //            font-weight: bold;
          //            color: red;
          //            line-height: 24px;
          //            white-space: nowrap;
          //          }
          //          .entryLabel{
          //            font-size: 14px;
          //            font-family: PingFangSC-Regular, PingFang SC;
          //            font-weight: 400;
          //            color: #786B6C;
          //            line-height: 20px;
          //          }
          //        }
          //        .img{
          //          width: 26px;
          //          height: 14px;
          //        }
          //
          //      }
          //    }
          //    .itemDetail{
          //      margin-top: 16px;
          //      width: 100%;
          //      display: flex;
          //      justify-content: space-between;
          //      align-items: center;
          //      .message{
          //        display: flex;
          //        flex-direction: column;
          //        .cirRate{
          //          width: 40px;
          //          height: 40px;
          //        }
          //        .label{
          //          font-size: 14px;
          //          font-family: PingFangSC-Regular, PingFang SC;
          //          font-weight: 400;
          //          color: #786B6C;
          //          line-height: 20px
          //        }
          //        .value{
          //          font-size: 20px;
          //          font-family: DINAlternate-Bold, DINAlternate;
          //          font-weight: bold;
          //          color: #160002;
          //          line-height: 24px;
          //          white-space: nowrap;
          //        }
          //      }
          //    }
          //  }
          //  .childList{
          //    border-radius: 8px 8px 0 0;
          //    box-sizing: border-box;
          //    margin-left: 16px;
          //    width: calc(100% - 32px);
          //    display: flex;
          //    align-items: center;
          //    justify-content: space-between;
          //    padding: 8px;
          //    .childItem{
          //      width: calc(100% / 3);
          //      display: flex;
          //      flex-direction: column;
          //      .childLabel{
          //        font-size: 14px;
          //        font-family: PingFangSC-Regular, PingFang SC;
          //        font-weight: 400;
          //        color: #786B6C;
          //        line-height: 20px
          //      }
          //      .childValue{
          //        font-size: 18px;
          //        font-family: DINAlternate-Bold, DINAlternate;
          //        font-weight: bold;
          //        color: #160002;
          //        line-height: 24px;
          //      }
          //    }
          //  }
          //}
        }
      }
    }
  }
  .swiperBox{
    width: 100%;
    .swiperItem{
      width: 100%;
      .header{
        width: 100%;
        //height: calc(1.056 * 100vw);
        padding: 0 16px;
        box-sizing: border-box;
        position: relative;
        background-repeat: no-repeat;
        //background-size: cover;
        background-size: 100% 648rpx;
        background-position: 100% 100%;
        .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;
            align-items: center;
            transform: translateY(-50%);
            .icon{
              width: 24px;
              height: 24px;
              .img{
                width: 100%;
                height: 100%;
              }
            }
            .sliderBox{
              width: 100vw;
              box-sizing: border-box;
              padding: 0 16rpx;
              position: absolute;
              z-index: 9;
              left: 0;
            }
            .pickerTop{
              margin-left: 16rpx;
              .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;
                    }
                  }

                }
              }
            }
            .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;
          .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;
            }
          }
          .detailBox{
            width: 340rpx;
            height: 312rpx;
            background: linear-gradient(136deg, #F0F6FF 0%, #FFFFFF 100%);
            border-radius: 16rpx;
            box-sizing: border-box;
            padding: 24rpx 32rpx;
            .detailTop{
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .topLeft{
                background: linear-gradient(180deg, rgba(49, 144, 255, 0.2) 0%, rgba(22, 87, 255, 0.2) 100%);
                border-radius: 8rpx;
                padding: 0 16rpx;
                font-size: 28rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #1E67FF;
                line-height: 40rpx;
              }
              .topRight{
                display: flex;
                align-items: center;
                .rightText{
                  font-size: 28rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  color: #A69E9F;
                  line-height: 40rpx;
                }
                .moreIcon{
                  width: 24rpx;
                  height: 24rpx;
                  margin-left: 4rpx;
                }
              }
            }
            .functionList{
              .functionItem{
                margin-top: 16rpx;
                display: flex;
                align-items: center;
                .haveFun{
                  width: 32rpx;
                  height: 32rpx;
                  margin-right: 18rpx;
                }
                .carIcon{
                  width: 32rpx;
                  height: 32rpx;
                  margin-right: 4rpx;
                }
                .funText{
                  font-size: 28rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  color: #6C737A;
                  line-height: 40rpx;
                }
              }
            }
          }
        }
      }
      .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: #a69e9f;
                  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;
                }
              }
            }
          }
          .selectType{
            width: 100%;
            display: flex;
            align-items: center;
            margin: 12px  auto;
            .item{
              border-radius: 4px;
              padding:2px 6px;
              margin-right: 6px;
              margin-bottom: 6px;
              box-sizing: border-box;
              .icon{
                width: 10px;
                height: 10px;
                margin-right: 4px;
              }
              .text{
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #786B6C;
              }
            }
            .itemSelect{
              border:1px solid #ccc;
              background: rgba(237, 239, 244, 0.2);
            }
            .itemUnSelect{
              border:1px solid #ccc;
              background: rgba(202, 208, 218, 0.5);
            }
          }
          .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>
