<template>
  <div>
    <div style="position: fixed;right: 0;top: 15%;z-index:99999999999">
    <!--  组件通过传入的have去判断组件在哪个页面 然后哪个页面的标志就不显示  -->
      <commercial-type :have="0"/>
    </div>
          <div class="main" v-if="isHaveData">
              <div v-if="!isShowAllProvince" class="header" :style="{backgroundImage: 'url('+ 'https://eshangtech.com/ShopICO/ahyd-BID/commercial/car.svg' +')'}">
                  <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'}">
                      <div class="box" :style="{top:(menu.bottom - (menu.height / 2)) + 'px'}">
                          <div class="icon" @click="handleBack">
                              <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"></image>
                          </div>
                          <text class="title">车流画像</text>
                          <!--  占位  -->
                          <div class="seize"></div>
                      </div>
                  </div>
                  <div class="serviceArea" :style="{top : (menu.bottom + 14) + 'px'}" @click="handleGoSelectService">
                      <div class="picker">
                          <div class="selectService">
                              <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>
                              <view class="select">
                                  <view class="content">
                                      <view class="uni-input">{{serviceInfo.SERVERPART_NAME}}</view>
                                      <p class="area" 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="other">
                          <div class="label">
                              <div v-for="(item,index) in labelList" :key="index" :class="index===0?'item0 item':index===1?'item1 item':index===2?'item2 item':index===3?'item3 item':index===4?'item4 item':'item'">
                                  {{item}}
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
              <div v-if="isShowAllProvince" class="headerTop" >
                <div class="header" :style="{height:menu.height + 'px',top:menu.top+'px'}">
                  <image class="backArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg" @click="handleBack"/>
                  <div class="timeSelect">
                    <img class="selectIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/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>
                  </div>
                </div>

                <div class="picker" :style="{top:(menu.bottom + 24)+'px'}" @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>
              <div class="charts" v-if="!isShowAllProvince">
                    <div class="chartsItem">
                        <div style="display: flex;align-items: center;justify-content: space-between">
                            <p class="title">昨日入区车流</p>
                            <div class="item">
                                <text class="value">{{time}}</text>
                            </div>
                        </div>
                        <div v-if="carData.length>0">
                            <entry-zone :carData="carData" :time="time" :month="thisMonth" />
                            <analyse :analyseInfo="{analysisins_type: 1102,analysisins_format: 2000}"  />
                        </div>
                        <no-data v-if="!carData.length"  :type="'car'"/>
                    </div>

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

                    <div class="chartsItem" style="margin-top: 32px">
                        <div class="time">
                            <text class="thisTime"></text>
                            <div class="select">
                                <picker mode="date" fields="month" :value="single" :end="endData"  @change="bindDateChange" >
                                    <view class="time">
                                        <view class="uni-input"  style="background: transparent;padding: 0;height:100%">{{ single }}</view>
                                        <image class="icon" src="/static/images/index/arrow_bottom.svg"></image>
                                    </view>
                                </picker>
                            </div>
                        </div>
                        <view class="tab" 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">{{thisMonth?thisMonth:'-'}}月车辆归属地</p>
                        <div v-if="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>
                        <no-data v-if="!homePlace.length"  :type="'car'"/>
                    </div>

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

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

                    <div class="chartsItem" style="margin-top: 32px">
                        <div class="topItem" >
                            <p class="title">{{thisMonth?thisMonth:'-'}}月入区车型占比</p>
                            <div class="box" v-if="allEntry">
                                <text class="value">{{allEntry?allEntry:'-'}}%</text>
                                <view class="right" 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.length>0">
                            <percent-entry :data="percentEntryData" />
                            <analyse :analyseInfo="{analysisins_type: 1106,analysisins_format: 2000}"  />
                        </div>
                        <no-data v-if="!percentEntryData.length"  :type="'car'"/>
                    </div>
                </div>
              <div v-else class="otherCharts">
                  <div class="list">
                    <span class="itemTitle">车流数据</span>
                    <div class="listItem" v-for="(item,index) in regionList" :key="index" @click="handleNoneChild(item)">
                      <image class="bg" :src="item.bg"/>
                      <div class="listBox" :style="{borderBottom:item.showChild?'1px solid #D9DBE0':'0px solid #D9DBE0'}">
                        <div class="itemTop">
                          <div class="itemLeft">
                            <div style="display: flex;align-items: center">
                              <img class="itemFixed" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/fixedIcon.svg"/>
                              <span class="serverName">{{item.name.split('管理中心')[0]}}</span>
                            </div>
                          </div>
                          <img class="itemRight" :style="{transform:item.showChild?'':'rotate(-90deg)'}" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/arrow_bottom.svg"/>
                        </div>
                        <div class="itemDetail">
                          <div class="message" style="width: 30%">
                            <span class="value">{{item.entry}}</span>
                            <span class="label">入区流量</span>
                          </div>
                          <div class="message" style="width: 30%">
                            <span class="value">{{item.flow}}</span>
                            <span class="label">断面流量</span>
                          </div>
                          <div class="message" style="flex-direction: initial;width: 40%;justify-content: flex-start">
<!--                            <div style="width: 40px;height: 40px;background: red"></div>-->
                            <!--                          <EntryRate :data="item.entryList" style="width: 40px;height: 40px"/>-->
                            <canvas class="cirRate" :canvas-id=index />
                            <div style="display: flex;flex-direction: column;">
                              <span class="value" style="color: red">{{item.flowRate}}</span>
                              <span class="label">入区率</span>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="childList" v-if="item.showChild" @click.stop="">
                        <div class="childItem" v-for="(subItem,subIndex) in item.spList" :key="subIndex" :style="{borderBottom: subIndex===item.spList.length -1 ?'0px solid #EEEEEE':'1px solid #EEEEEE'}">
                          <div class="childTop">
                            <div class="topLeft">
                              <div class="imgBox">
                                <image class="topIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/mapIcon.svg"/>
                              </div>
                              <span class="serviceName">{{subItem.name}}</span>
                            </div>
                            <image class="topRight" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
                          </div>
                          <div class="childDetail" v-for="(thirdItem,thirdIndex) in subItem.regionList" :key="thirdIndex">
                            <div class="thirdItem">
                              <div class="serviceFixed">{{thirdItem.name}}区</div>
                              <div class="itemType">
                                <div class="typeValue">{{thirdItem.LargeVehicle_Count}}/{{thirdItem.MediumVehicle_Count}}/{{thirdItem.MinVehicle_Count}}</div>
                                <div class="typeLabel">大/中/小型车</div>
                              </div>
                              <div class="itemType">
                                <div class="typeValue">{{thirdItem.Vehicle_Count}}/{{thirdItem.SectionFlow_Count}}</div>
                                <div class="typeLabel">入区/断面</div>
                              </div>
                              <div class="itemType" :style="{width: 'calc((100% - 40px)*0.2)'}">
                                <div class="typeValue" :style="{color:thirdItem.entryRate>30 || thirdItem.entryRate<5?'red':''}">{{thirdItem.entryRate!==0 && thirdItem.Vehicle_Count< thirdItem.SectionFlow_Count ? `${thirdItem.entryRate}%`:'-'}}</div>
                                <div class="typeLabel">入区率</div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                    </div>






<!--                      <div class="listItem" v-for="(item,index) in regionList" :key="index" @click="handleNoneChild(item)">-->
<!--                          <div class="itemTop">-->
<!--                              <div class="itemLeft">-->
<!--                                  <span class="serverName">{{item.name}}</span>-->
<!--                                  <span class="value">{{item.entry}} / {{item.flow}}</span>-->
<!--&lt;!&ndash;                                <span class="value">1,000,000 / 1,000,000</span>&ndash;&gt;-->
<!--                              </div>-->
<!--                              <div class="itemCenter">-->
<!--                                  <span class="serverName">入区率</span>-->
<!--                                  <span class="value">{{item.flowRate}}</span>-->
<!--                              </div>-->
<!--                              <div class="itemRight">-->
<!--                                <div style="height: 100%;display: flex;align-items: center;">-->
<!--                                  <image :style="{transform:item.showChild?`rotate(90deg)`:''}" class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>-->
<!--                                </div>-->
<!--                              </div>-->
<!--                            <div class="other">-->

<!--                            </div>-->
<!--                          </div>-->
<!--                          <block v-if="item.showChild">-->
<!--                            <scroll-view scroll-y="true" style="height: 400px">-->
<!--                              <div class="serviceItem" v-for="(subItem,subIndex) in item.spList" :key="subIndex" :style="{background:subIndex%2===0?'#FCFCFC':'#f7f7f7'}" @click.stop="()=>{}">-->
<!--                                <div class="subItemTop">-->
<!--                                  <div class="serviceItemLeft">-->
<!--                                    <div style="display: flex;align-items: center">-->
<!--                                      <image class="leftIcon" src="/static/images/authority/serverpart.png"/>-->
<!--                                      <span class="name">{{subItem.name}}</span>-->
<!--                                    </div>-->
<!--                                  </div>-->
<!--                                  <div class="serviceItemCenter">-->
<!--                                    <span class="title">入区流量/断面流量</span>-->
<!--                                  </div>-->
<!--                                  <div class="serviceItemRight">-->
<!--                                    <span class="text">大/中/小车型</span>-->
<!--                                  </div>-->
<!--                                </div>-->
<!--                                <div class="subItemBottom">-->
<!--                                  <div class="subBottomItem" v-for="(thirdItem,thirdIndex) in subItem.regionList" :key="thirdIndex">-->
<!--                                    <div class="subBottomItemTop">-->
<!--                                      <div class="topLeft">-->
<!--                                        <span :class="thirdIndex===0?'position0':'position1'">{{thirdItem.name}}区</span>-->
<!--                                        <span  v-if="thirdItem.entryRate!==0 && thirdItem.Vehicle_Count<thirdItem.SectionFlow_Count">:</span>-->
<!--                                        <span class="rate" :style="{color:thirdItem.entryRate>30 || thirdItem.entryRate<5?'red':''}" v-if="thirdItem.entryRate!==0 && thirdItem.Vehicle_Count<thirdItem.SectionFlow_Count">{{thirdItem.entryRate}}%</span>-->
<!--                                      </div>-->
<!--                                      <div class="topCenter">-->
<!--                                        <span>{{thirdItem.Vehicle_Count}}/{{thirdItem.SectionFlow_Count}}</span>-->
<!--                                      </div>-->
<!--                                      <div class="topRight">-->
<!--                                        <span>{{thirdItem.LargeVehicle_Count}}/{{thirdItem.MediumVehicle_Count}}/{{thirdItem.MinVehicle_Count}}</span>-->
<!--                                      </div>-->
<!--                                    </div>-->
<!--                                  </div>-->
<!--                                </div>-->
<!--                              </div>-->
<!--                            </scroll-view>-->
<!--                          </block>-->
<!--                      </div>-->
                  </div>
              </div>
          </div>
  </div>
</template>

<script>
import request from '@/util/index.js'
import EntryZone from "./components/car/entryZone.vue";
import HomePlace from "./components/car/homePlace.vue";
import CarTypeTime from "./components/car/carTypeTime.vue";
import timeAnalysis from "./components/car/timeAnalysis.vue";
import PercentEntry from "./components/car/percentEntry.vue";
import MonthTotal from "./components/car/monthTotal.vue";
import NoData from "./components/noData.vue";
import Analyse from "./components/analyse.vue";
import CommercialType from "./commercialType.vue";
import shopCell from "../everdayRenven/components/listUnit.vue";
import EntryRate from "./components/car/entryRate.vue";
import anhuiYestodayRevenueData from "../everdayRenven/components/anhuiYestodayRevenueData";
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,
        theRequest: null,
        headMsg:null,
        searchEndTime:'',
        searchText:'',// 展示全省情況时显示的日期内容
      }
    },
    components: {
      shopCell,
      CommercialType,EntryRate,
      Analyse, NoData, PercentEntry, CarTypeTime, HomePlace, EntryZone,timeAnalysis,MonthTotal},
    computed:{
      isHaveData(){
         return true
      }
    },
    onLoad(option){
      this.backType = option.type
    },
    onShow(){
      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
        const date = new Date(this.time)
        //设置日期选择器的开始时间和结束时间
        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: `${y}${m}`,
          time: `${y}-${m}-${d}`,
        }
      if (this.serviceInfo.SERVERPART_NAME==='安徽驿达'){
        this.isShowAllProvince = true
      }
      if (this.isShowAllProvince === true){
        this.getDetail(this.theRequest)
      }else{
        //获取服务区基本信息
        this.getServiceInfo()
        //月累计
        this.getMonthTotalList()
        // 入区车流分析
        this.getCarData()
        // 车辆归属地
        this.getHomeData()
        // 车辆类型占比与停留时间
        this.getCarTypeTime()
        // 车辆价值与停留时间分析
        this.getTimeAnalysis('')
        //入区率占比
        this.getPercentEntry()
        //获得标签
        this.getLabelDetail()
      }

    },
    onReady(){

    },
    onHide(){
      this.isShowAllProvince = false
    },
    onUnload() {
        this.$util.addUserBehavior()
        this.carTypeList.forEach(item=>{
          item.select = false
        })
        this.selectProvinceName = ''
        this.carType = ''
        this.searchText=''
    },
    methods:{
      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){
        this.regionList.forEach(item=>{
          if (item.name === obj.name){
            item.showChild = !item.showChild
          }
        })
      },
        async getDetail(obj) {
          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':''
          })
          console.log('bayonetPie',bayonetPie)
            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=>{
            console.log('item',item)
            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)
          })
          console.log('this.regionList',this.regionList)
          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.tabList = tabList
            }
        },
        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}`,
          }
          await this.getDetail(this.theRequest)
          this.searchText = e.detail.value
        },
        // 时间选择器改变的时间
        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/commercialBI/carPortrait&serviceInfo=${JSON.stringify(this.serviceInfo)}`
          })
      },
      handleBack(){
            // 因为首页 和 用户页面都可以跳进来 做个判断
            if (this.backType==='userCenter'){
                uni.switchTab({
                    url: '/pages/userCenter/userCenter'
                })
            }else{
                uni.switchTab({
                    url: '/pages/index/index'
                })
            }
      },
      //切换改变选项卡
      // 因为只让接口调用一次 所以要把全部和不同区域的内容要放在同一个列表里面 然后通过选项卡的点击来切换展示哪一块的数据
      handleChangeTab(value){
          let Serverpart_Region = ''
          this.tabList.forEach(item=>{
              if (item.value === value && item.value!==0){
                  Serverpart_Region = item.name
              }
          })
          // if (this.tabIsTrue){
              this.selectTab = value
              // 车辆归属地
              this.homePlace = this.homePlaceAll[this.selectTab]?this.homePlaceAll[this.selectTab]:[]
              this.cityPlace = this.cityPlaceAll[this.selectTab]?this.cityPlaceAll[this.selectTab]:[]
              // 车辆类型占比与停留时间
              this.carTypeTimeData = this.carTypeTimeDataAll[this.selectTab]?this.carTypeTimeDataAll[this.selectTab]:[]
              // 车辆价值与停留时间分析
              this.getTimeAnalysis(Serverpart_Region)
              //入区率占比
              this.getPercentEntry(this.tabList[this.selectTab].name)
          // }

      },
      async getMonthTotalList(){
          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 = []
            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
          // 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(){
          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]:[]

          })
      },

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

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

          }
        }
      }
      .other{
        margin-top: 12px;
        width: calc(100vw - 32px);
        text-align: center;
        .label{
          height: 54px;
          position: relative;
          .item{
            position: absolute;
            font-size: 32rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 44rpx;
            padding: 4px 12px;
            border-radius: 8rpx 8rpx 0rpx 8rpx;
          }
          .item{
            background: linear-gradient(180deg, #3190FF 0%, #1657FF 100%);
            top: 0px;
          }
          .item0{
            left: 50%;
            top: 50%;
            transform: translateX(-50%);
            z-index:3;
            background: linear-gradient(180deg, rgba(49, 144, 255, 0.8) 0%, rgba(22, 87, 255, 0.8) 100%);
          }
          .item1{
            left: 25%;
            top: 80%;
            z-index:2;
            background: linear-gradient(180deg, rgba(49, 144, 255, 0.7) 0%, rgba(22, 87, 255, 0.7) 100%);
          }
          .item2{
            right: 15%;
            top: 80%;
            z-index:2;
            background: linear-gradient(180deg, rgba(49, 144, 255, 0.6) 0%, rgba(22, 87, 255, 0.6) 100%);
          }
          .item3{
            right: 2%;
            top:100%;
            z-index:1;
            background: linear-gradient(180deg, rgba(49, 144, 255, 0.5) 0%, rgba(22, 87, 255, 0.5) 100%);
          }
          .item4{
            left: 2%;
            top:100%;
            z-index:1;
            background: linear-gradient(180deg, rgba(49, 144, 255, 0.4) 0%, rgba(22, 87, 255, 0.4) 100%);
          }
        }
        .car{
          width: 228px;
          height: 95px;
        }
      }
    }
  }
  .headerTop{
    width: 100%;
    height: 152px;
    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;
      }
      .timeSelect{
        display: flex;
        align-items: center;
        .selectIcon{
          width: 16px;
          height: 16px;
        }
        .time{
          display: flex;
          align-items: center;
          .text{
            margin: 0 5px;
            color: #fff;
          }
          .icon{
            width: 18px;
            height: 18px;
          }
        }
      }
    }
    .picker{
      position: absolute;
      left: 16px;
      .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;
            }
          }

        }
      }
    }
  }


  .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;
    }
  }
  .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: 24px;
      box-sizing: border-box;
      padding-bottom: 12px;
      .itemTitle{
        display: block;
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #160002;
        margin-bottom: 12px;
      }
      .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: 2px 8px;
              background: rgba(26, 95, 255, 0.1);
              border-radius: 14px;
              .itemFixed{
                width: 12px;
                height: 14px;
                margin-right: 4px;
              }
              .serverName{
                font-size: 16px;
                font-family: Alimama ShuHeiTi;
                color: #1A5FFF;
                line-height: 22px
              }
            }
            .itemRight{
              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{
          margin-top: 20px;
          border-radius: 8px 8px 0 0;
          box-sizing: border-box;
          margin-left: 16px;
          width: calc(100% - 32px);
          .childItem{
            width: 100%;
            border-bottom: 1px solid #EEEEEE;
            margin-bottom: 8px;
            .childTop{
              width: 100%;
              margin-bottom: 12px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .topLeft{
                display: flex;
                align-items: center;
                .imgBox{
                  width: 28px;
                  height: 28px;
                  border-radius: 50%;
                  border: 1px solid #FFFFFF;
                  overflow: hidden;
                  .topIcon{
                    width: 100%;
                    height: 100%;
                  }
                }
                .serviceName{
                  font-size: 16px;
                  font-family: PingFangSC-Semibold, PingFang SC;
                  font-weight: 600;
                  color: #160002;
                  line-height: 22px;
                  margin-left: 6px;
                }
              }
              .topRight{
                width: 16px;
                height: 16px;
              }
            }
            .childDetail{
              .thirdItem{
                width: 100%;
                margin-bottom: 12px;
                display: flex;
                align-items: flex-start;
                .serviceFixed{
                  display: inline-block;
                  width: 40px;
                  box-sizing: border-box;
                  white-space: nowrap;
                  font-size: 14px;
                  font-family: PingFangSC-Semibold, PingFang SC;
                  font-weight: 600;
                  color: #160002;
                  line-height: 18px;
                }
                .itemType{
                  display: inline-block;
                  width: calc((100% - 40px)*0.4);
                  white-space: nowrap;
                  .typeValue{
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #160002;
                    line-height: 20px;
                  }
                  .typeLabel{
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #786B6C;
                    line-height: 18px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
.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>
