ahyd_DIB/pages/index/index.vue

<template>
  <view class="main">
    <view class="header" :style="{height:loadMore?'510px':'328px'}">
      <div class="headerTop" :style="{ height: menu.bottom + 5 + 'px'}">
        <view class="selectTime" :style="{ top: menu.top + (menu.height - 22) / 2 + 'px' }">
          <image class="dateIcon" src="/static/images/index/dateTime.svg"></image>
<!--          <picker mode="date" :value="single"  @change="bindDateChange" >-->
          <picker mode="date" :value="single"  :end="endData" @change="bindDateChange" >
            <view class="time">
              <text class="day">{{ thisDay }}</text>
              <view class="uni-input"  style="background: transparent;padding: 0;height:100%">{{ single }}</view>
              <image class="icon" src="/static/images/index/arrow_bottom.svg"></image>
            </view>
          </picker>
        </view>
      </div>
      <div class="storeDetail"  :style="{ top: menu.bottom + 13 + 'px',height:loadMore?'198px':'46px'}">
        <p class="storeName">门店上传<span class="num">{{showTableData.Revenue_Upload?showTableData.Revenue_Upload:'-'}}</span>/{{allShopCount?allShopCount:'-'}}</p>
        <div class="detailBox">
          <div class="detailTop">
            <div class="top">
              <div class="left">
                <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/home/indexIcon.svg"/>
                <div class="money">
                  <div class="moneyTop" @click="handlePage">
                    <p class="price">{{showTableData.CashPay || '0.00'}}</p>
                    <image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/home/indexMore.svg"/>
                  </div>
                  <p class="text">昨日累计<span class="unit">/元</span></p>
                </div>
              </div>
              <div class="right">
                <p class="add">{{showTableData.compared?showTableData.compared>0?`+${showTableData.compared}%`:showTableData.compared+'%':'-'}}</p>
                <p class="addText">比昨日</p>
              </div>
            </div>
            <div class="bottom">
              <div class="bottomItem">
                <p class="total">{{monthAmountAdd?monthAmountAdd:'-'}}</p>
                <p class="totalLabel">本月累计<span class="labelUnit">/元</span></p>
              </div>
              <div class="bottomItem">
                <p class="total">{{yearAmountAdd?yearAmountAdd:'-'}}</p>
                <p class="totalLabel">年度累计<span class="labelUnit">/元</span></p>
              </div>
            </div>
          </div>
          <div class="detailBottom" :style="{height: loadMore?'208px':'46px'}">
            <div class="searchBox" v-if="!loadMore" @click="handleChangeLoadMore">
              <text class="searchText">查看更多</text>
              <image class="searchIcon" :style="{transform: loadMore?'':'rotate(180deg)'}" src="https://eshangtech.com/ShopICO/ahyd-BID/home/downLoad.svg"/>
            </div>
            <div class="otherDetail" v-else>
              <view class="detail">
                <view class="detailItem">
                  <p class="price">{{ showTableData.Different_Price_More?showTableData.Different_Price_More:'-' }}</p>
                  <p class="itemName">长款金额<text class="itemUnit">/元</text></p>
                </view>
                <view class="detailItem">
                  <p class="price">{{ showTableData.Different_Price_Less?showTableData.Different_Price_Less:'-' }}</p>
                  <p class="itemName">短款金额<text class="itemUnit">/元</text></p>
                </view>
                <view class="detailItem">
                  <p class="price">{{showTableData.TotalOffAmount?showTableData.TotalOffAmount:'-' }}</p>
                  <p class="itemName">优惠金额<text class="itemUnit">/元</text></p>
                </view>
                <view class="detailItem">
                  <p class="price" :style="{color:isBig?'red':''}">{{showTableData.Revenue_Upload?showTableData.Revenue_Upload:'-'}}/{{allShopCount?allShopCount:'-'}}</p>
                  <div class="itemName" style="display: flex;align-items: center">
                    <text>门店上传</text>
                    <div v-if="Number(showTableData.Revenue_Upload)<Number(allShopCount)" class="prompt" style="margin-left: 5px" @click="handleStoreUpload">!</div>
                  </div>
                </view>
                <view class="detailItem">
                  <p class="price">{{ showTableData.TotalCount?showTableData.TotalCount:'-' }}</p>
                  <p class="itemName">商品出售<text class="itemUnit">/件</text></p>
                </view>
                <view class="detailItem">
                  <p class="price">{{ showTableData.countave?showTableData.countave:'-' }}</p>
                  <p class="itemName">商品均价<text class="itemUnit">/元</text></p>
                </view>
                <view class="detailItem">
                  <p class="price" v-if="carInfo.Vehicle_Count">{{carInfo.Vehicle_Count?carInfo.Vehicle_Count:'-'}}</p>
                  <p class="price" v-else style="color:red;font-size: 14px;font-weight: 400">第三方未传</p>
                  <p class="itemName">日均入区<text class="itemUnit">/辆</text></p>
                </view>
                <view class="detailItem">
                  <p class="price">{{carInfo.Entry_Rate?carInfo.Entry_Rate :'-' }}</p>
                  <p class="itemName">入区率<text class="itemUnit">/%</text></p>
                </view>
                <view class="detailItem">
                  <p class="price">{{carInfo.Stay_Times?carInfo.Stay_Times:'-' }}</p>
                  <p class="itemName">停留时长<text class="itemUnit">/分钟</text></p>
                </view>
              </view>
            </div>
            <image v-if="loadMore" @click="handleChangeLoadMore" class="noShowMore" src="https://eshangtech.com/ShopICO/ahyd-BID/home/downLoad.svg"/>
          </div>
        </div>
      </div>
    </view>

    <view class="funEntry">
      <div class="funList">
        <div class="funItem" v-for="(item,index) in tabTypeList" :key="index" @click="handleGoTab(item)">
          <image class="funItemIcon" :src="item.imgUrl"/>
          <text class="funItemText">{{item.name}}</text>
        </div>
      </div>

      <div class="otherFunBox">
        <div class="otherFunItem" style="height:calc(((100vw - 9px)/2)/2.31);background-image: url('https://eshangtech.com/ShopICO/ahyd-BID/home/basic.svg')" @click="handleGoOtherFun(1)">
          <p class="itemTitle">基础信息</p>
          <image class="itemImg" src="https://eshangtech.com/ShopICO/ahyd-BID/home/food.svg"/>
          <div class="nowBox">
            <text class="nowText">立即查看</text>
            <image class="searchIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/home/blueArrow.svg"/>
          </div>
        </div>

        <div class="otherFunItem" style="height:calc(((100vw - 9px)/2)/2.31);background-image: url('https://eshangtech.com/ShopICO/ahyd-BID/home/examine.svg');margin-left: 9px" @click="handleGoOtherFun(2)">
          <p class="itemTitle" style="color: #5534D9">考核管理</p>
          <image class="itemImg" src="https://eshangtech.com/ShopICO/ahyd-BID/home/mark.svg"/>
          <div class="nowBox">
            <text class="nowText" style="color: #907DE8">立即查看</text>
            <image class="searchIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/home/purpleArrow.svg"/>
          </div>
        </div>
      </div>
    </view>


    <view class="carWarning" v-if="special">
      <div class="warningBox">
        <image class="warningIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/home/carIcon.svg"/>
        <div class="trafficBox">
          <text class="trafficCar">车流预警</text>
        </div>
      </div>
      <div class="waringList">
        <div class="waringItem">
          <div class="warningIndex">
            <div class="indexBg"></div>
            <text>1</text>
          </div>
          <div class="serviceName">丰乐<span class="serviceUnit">西区</span></div>
          <div class="carNumber">1026<span class="numberUnit">/辆</span></div>
          <div class="addBox">
            <image class="addIcon"/>
            <text class="addText">743%</text>
          </div>
        </div>
      </div>
    </view>


    <div class="flowRank">
      <div class="flowTop">
        <div class="bigTab">
          <div class="tabItem" v-for="(item,index) in bigTab" :key="index" @click="handleChangeBigSelect(item.value)">
            <image class="tabItemIcon" :src="item.imgUrl"/>
            <text :class="selectBigTab===item.value?'selectTabItem':'tabItemText'">{{item.text}}</text>
          </div>
        </div>
      </div>

      <div class="flowDetail" v-if="selectBigTab===1">
        <div class="detailTop">
          <div class="smallTab">
            <div @click="handleChangeSmallSelect(item.value)" :class="selectSmallTab === item.value?'selectSmallItem smallTabItem':'smallTabItem'" v-for="(item,index) in smallTab" :key="index">{{item.text}}</div>
          </div>
        </div>

        <div class="detailList">
          <div class="detailItem" v-for="(item,index) in showTrafficList" :key="index">
            <div class="itemLeft">
              <span class="itemIndex" :style="{color: index===0?'#F0432C':index===1?'#FF842F':index===2?'#FFAC21':'#786B6C'}">{{index+1<10?`0${index+1}`:index+1}}</span>
              <div class="itemBox">
                <span class="itemName">{{item.Serverpart_Name}}</span>
                <span class="itemArea">{{item.Serverpart_Region}}区</span>
              </div>
            </div>
            <div class="itemRight">
              <span class="carNumber">{{selectSmallTab===1?item.Vehicle_Count:selectSmallTab===2?item.SectionFlow_Count:item.Entry_Rate}}</span>
              <span class="carUnit">{{selectSmallTab!==3?'/辆':'%'}}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="flowDetail" v-if="selectBigTab===2">
        <div class="thisYear" style="margin-top: 0" @click="handlePlanPageGo('year')">
          <div class="titleTop">
            <p class="title">年度自营计划</p>
            <div class="question" @click.stop="handleShowNoticeYear">
              <image src="/static/images/index/noticeQuestion.svg"></image>
            </div>
            <div v-if="showNoticeYear" class="titleTopNotice">{{yearNoticeText}}</div>
            <div v-if="showNoticeYear" class="meng" @click.stop="handleNoShowNoticeYear"></div>
          </div>
          <view class="box">
            <view class="top">
              <view class="big">
                <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/planYear.svg"></image>
              </view>
              <view class="text">
                <view class="textTop">
                  <view class="left">
                    <p class="number">{{plan.percentageYear?plan.percentageYear + '%':'-'}}</p>
                    <p v-if="plan.percentageYear>=100" class="desc" style="color: #4E68FF"><image class="success" src="/static/images/index/yearSuccess.svg"></image></p>
                  </view>
                  <view class="right">
                    <text class="comparePlan">比计划： </text>
                    <div class="box2">
                      <image class="addIcon" :src="Number(yearAdd)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
                      <p class="text">{{yearAdd?Math.abs(yearAdd) + '%':''}}</p>
                    </div>
                  </view>
                </view>
                <div class="progressPlan">
                  <div class="transYear" :style="{width:plan.percentageYear + '%'}"></div>
                </div>
              </view>
            </view>
            <view class="bottom">
              <view class="success" style="margin-right: 39px">
                <p class="text">年度已完成<text class="unit">/元</text></p>
                <p class="money">{{plan.RevenueYear_Amount?plan.RevenueYear_Amount:'-'}}</p>
              </view>
              <view class="success">
                <p class="text">年度计划<text class="unit">/元</text></p>
                <p class="money">{{plan.BudgetYear_Amount?plan.BudgetYear_Amount:'-'}}</p>
              </view>
            </view>
          </view>
        </div>

        <div class="thisMonth" @click="handlePlanPageGo('month')">
          <div class="titleTop">
            <p class="title">本月自营计划</p>
            <div class="question" @click.stop="handleShowNotice">
              <image src="/static/images/index/noticeQuestion.svg"></image>
            </div>
            <div v-if="showNotice" class="titleTopNotice">{{monthNoticeText}}</div>
            <div v-if="showNotice" class="meng" @click.stop="handleNoShowNotice"></div>
          </div>
          <view class="box">
            <view class="top">
              <view class="big">
                <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/thisMonth.svg"></image>
              </view>
              <view class="text">
                <view class="textTop">
                  <view class="left">
                    <p class="number">{{plan.percentageMonth?plan.percentageMonth + '%':'-'}}</p>
                    <p v-if="plan.percentageMonth>=100" class="desc"><image class="success" src="/static/images/index/successMonth.svg"></image></p>
                  </view>
                  <view class="right">
                    <text class="comparePlan">比计划： </text>
                    <view class="box2">
                      <image class="addIcon" :src="Number(monthAdd)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
                      <p class="text">{{monthAdd?Math.abs(monthAdd) + '%':'-'}}</p>
                    </view>
                  </view>
                </view>
                <div class="progressPlan">
                  <div class="trans" :style="{width:plan.percentageMonth + '%'}"></div>
                </div>
              </view>
            </view>
            <view class="bottom">
              <view class="success" style="margin-right: 39px">
                <p class="text">本月已完成<text class="unit">/元</text></p>
                <p class="money">{{plan.RevenueMonth_Amount?plan.RevenueMonth_Amount:'-'}}</p>
              </view>
              <view class="success">
                <p class="text">本月计划<text class="unit">/元</text></p>
                <p class="money">{{plan.BudgetMonth_Amount?plan.BudgetMonth_Amount:'-'}}</p>
              </view>
            </view>
          </view>
        </div>

        <div class="propOfReven">
          <p class="title">营收占比</p>
          <view class="tabs">
            <view
                v-for="(item, index) in propOfRevenList"
                :key="index"
                :class="selectTab === item.value ? 'active tabItem' : 'tabItem'"
                @click="handleSelectTab(item.value)">
              {{ item.name }}
            </view>
          </view>
          <view class="chart">
                  <!--  1、2、3就是对应的第几个标题选中 老项目复制的 -->
            <div v-show="selectTab===1" v-if="modelProgress.length > 0 && theRequest.ProvinceCode==340000">
              <div>
                <div class="operation-c-list" v-for="(item,o) in modelProgress" :key="o">
                  <div class="top">
                    <div class="left">
                      <div class="icon">
                        <image :src="o===0?'https://eshangtech.com/ShopICO/ahyd-BID/index/No1.svg':o===1?'https://eshangtech.com/ShopICO/ahyd-BID/index/No2.svg':o===2?'https://eshangtech.com/ShopICO/ahyd-BID/index/No3.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/No4.svg'"></image>
                        <text>{{o+1}}</text>
                      </div>
                      <p class="name">{{item.name}}</p>
                    </div>
                    <p class="price">{{item.value}}</p>
                  </div>
                  <div class="bottom">
                    <div class="bar">
                      <div class="progress" :style="{width:item.percentage+'%'}"></div>
                    </div>
                    <p class="number">{{item.percentage+'%'}}</p>
                  </div>
                </div>
              </div>
            </div>
            <div v-show="selectTab===2" v-if="regionProgress.length>0">
              <div>
                <div class="operation-c-list" v-for="(item,o) in regionProgress" :key="o">
                  <div class="top">
                    <div class="left">
                      <div class="icon">
                        <image :src="o===0?'https://eshangtech.com/ShopICO/ahyd-BID/index/No1.svg':o===1?'https://eshangtech.com/ShopICO/ahyd-BID/index/No2.svg':o===2?'https://eshangtech.com/ShopICO/ahyd-BID/index/No3.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/No4.svg'"></image>
                        <text>{{o+1}}</text>
                      </div>
                      <p class="name">{{item.name}}</p>
                    </div>
                    <p class="price">{{item.value}}</p>
                  </div>
                  <div class="bottom">
                    <div class="bar">
                      <div class="progress" :style="{width:item.percentage+'%'}"></div>
                    </div>
                    <p class="number">{{item.percentage+'%'}}</p>
                  </div>
                </div>
              </div>
            </div>
            <div v-show="selectTab===3" v-if="areaProgress.length>0">
              <div>
                <div class="operation-c-list" v-for="(item,o) in areaProgress" :key="o">
                  <div class="top">
                    <div class="left">
                      <div class="icon">
                        <image :src="o===0?'https://eshangtech.com/ShopICO/ahyd-BID/index/No1.svg':o===1?'https://eshangtech.com/ShopICO/ahyd-BID/index/No2.svg':o===2?'https://eshangtech.com/ShopICO/ahyd-BID/index/No3.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/No4.svg'"></image>
                        <text>{{o+1}}</text>
                      </div>
                      <p class="name">{{item.name}}</p>
                    </div>
                    <p class="price">{{item.value}}</p>
                  </div>
                  <div class="bottom">
                    <div class="bar">
                      <div class="progress" :style="{width:item.percentage+'%'}"></div>
                    </div>
                    <p class="number">{{item.percentage+'%'}}</p>
                  </div>
                </div>
              </div>
            </div>
          </view>
        </div>
      </div>

    </div>

<!--      <view class="other">-->
<!--        <view v-if="user.Membership_Id" >-->
<!--          <view class="topTitle">-->
<!--            <p class="title">对客营收</p>-->
<!--            <view style="display: flex;flex-direction: column;text-align: right">-->
<!--              <text class="smallTitle">{{monthAmountAdd?monthAmountAdd:'-'}}<text class="month">({{thisMonth?thisMonth:'-'}}月累计)</text></text>-->
<!--              <text class="smallTitle">{{yearAmountAdd?yearAmountAdd:'-'}}<text class="month">(年度累计)</text></text>-->
<!--            </view>-->
<!--        &lt;!&ndash; 移位置 不确定会不会加回去 先注释  &ndash;&gt;-->
<!--&lt;!&ndash;            <span class="text">门店上传: <text style="margin-left: 4px" :style="{color:isBig?'red':''}">{{showTableData.Revenue_Upload?showTableData.Revenue_Upload:'-'}}/{{allShopCount?allShopCount:'-'}}</text></span>&ndash;&gt;-->
<!--          </view>-->
<!--          <view class="box" @click="handlePage">-->
<!--            <view class="priceBox">-->
<!--              <p class="allPrice">{{showTableData.CashPay || '0.00'}}</p>-->
<!--              <image class="start" src="https://ahyd.eshangtech.com/UploadImageDir/ahyd_DIB/index/start.svg"></image>-->
<!--            </view>-->
<!--          </view>-->
<!--          <view class="addBox">-->
<!--&lt;!&ndash;            <text class="smallTitle">{{plan.RevenueMonth_Amount?plan.RevenueMonth_Amount:'-'}}<text class="month">({{thisMonth?thisMonth:'-'}}月累计)</text></text>&ndash;&gt;-->
<!--            <view class="right">-->
<!--                <image class="arrowTop" :src="Number(showTableData.compared)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>-->
<!--                <text class="text">{{showTableData.compared?Math.abs(showTableData.compared) + '%':'-' + '%'}}</text>-->
<!--                <text class="compare">(相比昨日)</text>-->
<!--            </view>-->
<!--          </view>-->
<!--        </view>-->
<!--        <view v-if="!user.Membership_Id" class="title" style="font-size: 16px"  @click="handleReg">去授权 </view>-->
<!--        <view class="type">-->
<!--          <view class="item">-->
<!--            <view class="leftImg">-->
<!--              <image src="/static/images/index/average.svg"></image>-->
<!--            </view>-->
<!--            <view class="right">-->
<!--              <p class="typeName">客单交易<text class="unit">/笔</text></p>-->
<!--              <p class="price">{{showTableData.TicketCount?showTableData.TicketCount:'-'}}</p>-->
<!--            </view>-->
<!--          </view>-->
<!--          <view class="item">-->
<!--            <view class="leftImg">-->
<!--              <image src="/static/images/index/business.svg"></image>-->
<!--            </view>-->
<!--            <view class="right">-->
<!--              <p class="typeName">客单均价<text class="unit">/元</text></p>-->
<!--              <p class="price">{{showTableData.averagePrice?showTableData.averagePrice:'-'}}</p>-->
<!--            </view>-->
<!--          </view>-->
<!--        </view>-->
<!--        <view class="detail" v-if="!loadMore">-->
<!--          <view class="detailItem">-->
<!--            <p class="itemName">-->
<!--              长款金额<text class="itemUnit">/元</text>-->
<!--            </p>-->
<!--            <p class="price">{{ showTableData.Different_Price_More?showTableData.Different_Price_More:'-' }}</p>-->
<!--          </view>-->
<!--          <view class="detailItem">-->
<!--            <p class="itemName">-->
<!--              短款金额<text class="itemUnit">/元</text>-->
<!--            </p>-->
<!--            <p class="price">{{ showTableData.Different_Price_Less?showTableData.Different_Price_Less:'-' }}</p>-->
<!--          </view>-->
<!--          <view class="detailItem">-->
<!--            <p class="itemName">-->
<!--              优惠金额<text class="itemUnit">/元</text>-->
<!--            </p>-->
<!--            <p class="price">{{showTableData.TotalOffAmount?showTableData.TotalOffAmount:'-' }}</p>-->
<!--          </view>-->
<!--            <view class="detailItem">-->
<!--                <div class="itemName" style="display: flex;align-items: center">-->
<!--                    <text>门店上传</text>-->
<!--                    <div v-if="Number(showTableData.Revenue_Upload)<Number(allShopCount)" class="prompt" style="margin-left: 5px" @click="handleStoreUpload">!</div>-->
<!--                </div>-->
<!--                <p class="price" :style="{color:isBig?'red':''}">{{showTableData.Revenue_Upload?showTableData.Revenue_Upload:'-'}}/{{allShopCount?allShopCount:'-'}}</p>-->
<!--            </view>-->
<!--&lt;!&ndash;          <view class="detailItem">&ndash;&gt;-->
<!--&lt;!&ndash;            <p class="itemName">&ndash;&gt;-->
<!--&lt;!&ndash;              分润到账<text class="itemUnit">/元</text>&ndash;&gt;-->
<!--&lt;!&ndash;            </p>&ndash;&gt;-->
<!--&lt;!&ndash;            <p class="price">{{detailTypeList[1].yesterValue?detailTypeList[1].yesterValue:'-' }}</p>&ndash;&gt;-->
<!--&lt;!&ndash;          </view>&ndash;&gt;-->
<!--          <view class="detailItem">-->
<!--            <p class="itemName">-->
<!--              商品出售<text class="itemUnit">/件</text>-->
<!--            </p>-->
<!--            <p class="price">{{ showTableData.TotalCount?showTableData.TotalCount:'-' }}</p>-->
<!--          </view>-->
<!--          <view class="detailItem">-->
<!--            <p class="itemName">-->
<!--              商品均价<text class="itemUnit">/元</text>-->
<!--            </p>-->
<!--            <p class="price">{{ showTableData.countave?showTableData.countave:'-' }}</p>-->
<!--          </view>-->
<!--          <view class="detailItem">-->
<!--            <p class="itemName">-->
<!--              日均入区<text class="itemUnit">/辆</text>-->
<!--            </p>-->
<!--            <p class="price" v-if="carInfo.Vehicle_Count">{{carInfo.Vehicle_Count?carInfo.Vehicle_Count:'-'}}</p>-->
<!--            <p class="price" v-else style="color:red;font-size: 14px;font-weight: 400">第三方未传</p>-->
<!--          </view>-->
<!--          <view class="detailItem">-->
<!--            <p class="itemName">-->
<!--              入区率<text class="itemUnit">/%</text>-->
<!--            </p>-->
<!--            <p class="price">{{carInfo.Entry_Rate?carInfo.Entry_Rate :'-' }}</p>-->
<!--          </view>-->
<!--          <view class="detailItem">-->
<!--            <p class="itemName">-->
<!--              停留时长<text class="itemUnit">/分钟</text>-->
<!--            </p>-->
<!--            <p class="price">{{carInfo.Stay_Times?carInfo.Stay_Times:'-' }}</p>-->
<!--          </view>-->

<!--        </view>-->
<!--      </view>-->
<!--        <div  class="more" @click="handleChangeLoadMore">-->
<!--            <image :class="loadMore?'img':'img rate'" src="/static/images/index/downArrow.svg"></image>-->
<!--        </div>-->
<!--    </view>-->
<!--    &lt;!&ndash;  首页除顶部外,剩下的部分是自适应的高度,但是上移本身高度不变内容变了就会在底部留白,所以计算好内容的高度 在切换是否展示的时候 改变高度&ndash;&gt;-->
<!--    &lt;!&ndash;  暂无更优法  &ndash;&gt;-->
<!--    <view class="menu">-->
<!--      <image class="topBg" src="https://eshangtech.com/ShopICO/ahyd-BID/index/menuBg.png"></image>-->
<!--      <view class="content">-->
<!--        <div class="tabType">-->
<!--          <view v-for="(item, index) in tabTypeList" :key="index" class="item" @click="handleGoTab(item)">-->
<!--            <view class="big">-->
<!--              <image class="img" :src="item.imgUrl"></image>-->
<!--            </view>-->
<!--            <text class="name">{{ item.name }}</text>-->
<!--          </view>-->
<!--        </div>-->
<!--&lt;!&ndash;        <div class="detailType">&ndash;&gt;-->
<!--&lt;!&ndash;          <view v-for="(item, index) in detailTypeList" :key="index" class="item">&ndash;&gt;-->
<!--&lt;!&ndash;            <view class="box">&ndash;&gt;-->
<!--&lt;!&ndash;              <p class="title">&ndash;&gt;-->
<!--&lt;!&ndash;                {{ item.name }}<text class="unit">{{ item.unit }}</text>&ndash;&gt;-->
<!--&lt;!&ndash;              </p>&ndash;&gt;-->
<!--&lt;!&ndash;              <p class="money" v-if="index===0 || index===2">{{ item.value }}</p>&ndash;&gt;-->
<!--&lt;!&ndash;              <p class="money" v-else>{{ item.yesterValue }}</p>&ndash;&gt;-->
<!--&lt;!&ndash;              <view v-if="index === 0 || index === 2" class="active">&ndash;&gt;-->
<!--&lt;!&ndash;                <image v-if="Number(item.add)!==0" class="addIcon" :src="Number(item.add)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>&ndash;&gt;-->
<!--&lt;!&ndash;                <text v-if="Number(item.add)!==0" class="add" :style="{color:Number(item.add)<0?'#07C160':'#FA5151'}">{{ item.add?Math.abs(item.add):'' }}</text>&ndash;&gt;-->
<!--&lt;!&ndash;                <text v-if="Number(item.add)!==0" class="yesterday">(相比昨日)</text>&ndash;&gt;-->
<!--&lt;!&ndash;              </view>&ndash;&gt;-->
<!--&lt;!&ndash;              <view class="otherBox" v-else>&ndash;&gt;-->
<!--&lt;!&ndash;                <view class="other">本月累计</view>&ndash;&gt;-->
<!--&lt;!&ndash;                <text class="month">{{ item.value }}</text>&ndash;&gt;-->
<!--&lt;!&ndash;              </view>&ndash;&gt;-->
<!--&lt;!&ndash;              <image :src="item.imgIcon" class="imgIcon"></image>&ndash;&gt;-->
<!--&lt;!&ndash;            </view>&ndash;&gt;-->
<!--&lt;!&ndash;          </view>&ndash;&gt;-->
<!--&lt;!&ndash;        </div>&ndash;&gt;-->


<!--        <div class="thisMonth" @click="handlePlanPageGo('month')">-->
<!--          <div class="titleTop">-->
<!--            <p class="title">本月自营计划</p>-->
<!--            <div class="question" @click.stop="handleShowNotice">-->
<!--              <image src="/static/images/index/noticeQuestion.svg"></image>-->
<!--            </div>-->
<!--            <div v-if="showNotice" class="titleTopNotice">{{monthNoticeText}}</div>-->
<!--            <div v-if="showNotice" class="meng" @click.stop="handleNoShowNotice"></div>-->
<!--          </div>-->
<!--          <view class="box">-->
<!--            <view class="top">-->
<!--              <view class="big">-->
<!--                <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/thisMonth.svg"></image>-->
<!--              </view>-->
<!--              <view class="text">-->
<!--                <view class="textTop">-->
<!--                  <view class="left">-->
<!--                    <p class="number">{{plan.percentageMonth?plan.percentageMonth + '%':'-'}}</p>-->
<!--                    <p v-if="plan.percentageMonth>=100" class="desc"><image class="success" src="/static/images/index/successMonth.svg"></image></p>-->
<!--                  </view>-->
<!--                  <view class="right">-->
<!--                    <text class="comparePlan">比计划： </text>-->
<!--                    <view class="box2">-->
<!--                      <image class="addIcon" :src="Number(monthAdd)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>-->
<!--                      <p class="text">{{monthAdd?Math.abs(monthAdd) + '%':'-'}}</p>-->
<!--                    </view>-->
<!--                  </view>-->
<!--                </view>-->
<!--                <div class="progressPlan">-->
<!--                  <div class="trans" :style="{width:plan.percentageMonth + '%'}"></div>-->
<!--                  &lt;!&ndash;                  <div class=pro :style="{width:(100 - plan.percentageMonth)+ '%'}"></div>&ndash;&gt;-->
<!--                  &lt;!&ndash;                  <view class="trans" :style="{width: plan.percentageMonth + '%'}"></view>&ndash;&gt;-->
<!--                  &lt;!&ndash;                    <image class="img"  src="https://eshangtech.com/ShopICO/ahyd-BID/index/progress_orange.png"></image>&ndash;&gt;-->
<!--                  &lt;!&ndash;                  <div class=pro :style="{width:(100 - plan.percentageMonth)+ '%'}"></div>&ndash;&gt;-->
<!--                </div>-->
<!--              </view>-->
<!--            </view>-->
<!--            <view class="bottom">-->
<!--              <view class="success" style="margin-right: 39px">-->
<!--                <p class="text">本月已完成<text class="unit">/元</text></p>-->
<!--                <p class="money">{{plan.RevenueMonth_Amount?plan.RevenueMonth_Amount:'-'}}</p>-->
<!--              </view>-->
<!--              <view class="success">-->
<!--                <p class="text">本月计划<text class="unit">/元</text></p>-->
<!--                <p class="money">{{plan.BudgetMonth_Amount?plan.BudgetMonth_Amount:'-'}}</p>-->
<!--              </view>-->
<!--            </view>-->
<!--          </view>-->
<!--        </div>-->
<!--        <div class="thisYear" style="margin-top: 0px" @click="handlePlanPageGo('year')">-->
<!--          <div class="titleTop">-->
<!--            <p class="title">年度自营计划</p>-->
<!--            <div class="question" @click.stop="handleShowNoticeYear">-->
<!--              <image src="/static/images/index/noticeQuestion.svg"></image>-->
<!--            </div>-->
<!--            <div v-if="showNoticeYear" class="titleTopNotice">{{yearNoticeText}}</div>-->
<!--            <div v-if="showNoticeYear" class="meng" @click.stop="handleNoShowNoticeYear"></div>-->
<!--          </div>-->
<!--          <view class="box">-->
<!--            <view class="top">-->
<!--              <view class="big">-->
<!--                <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/planYear.svg"></image>-->
<!--              </view>-->
<!--              <view class="text">-->
<!--                <view class="textTop">-->
<!--                  <view class="left">-->
<!--                    <p class="number">{{plan.percentageYear?plan.percentageYear + '%':'-'}}</p>-->
<!--                    <p v-if="plan.percentageYear>=100" class="desc" style="color: #4E68FF"><image class="success" src="/static/images/index/yearSuccess.svg"></image></p>-->
<!--                  </view>-->
<!--                  <view class="right">-->
<!--                    <text class="comparePlan">比计划： </text>-->
<!--                    <div class="box2">-->
<!--                      <image class="addIcon" :src="Number(yearAdd)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>-->
<!--                      <p class="text">{{yearAdd?Math.abs(yearAdd) + '%':''}}</p>-->
<!--                    </div>-->
<!--                  </view>-->
<!--                </view>-->
<!--                <div class="progressPlan">-->
<!--                  <div class="transYear" :style="{width:plan.percentageYear + '%'}"></div>-->
<!--                  &lt;!&ndash;                  <image class="img" :style="{width: plan.percentageYear + '%'}"  src="https://eshangtech.com/ShopICO/ahyd-BID/index/progress_blue.png"></image>&ndash;&gt;-->
<!--                  &lt;!&ndash;                  <div class=pro :style="{width:(100 - plan.percentageYear)+ '%'}"></div>&ndash;&gt;-->
<!--                </div>-->
<!--              </view>-->
<!--            </view>-->
<!--            <view class="bottom">-->
<!--              <view class="success" style="margin-right: 39px">-->
<!--                <p class="text">年度已完成<text class="unit">/元</text></p>-->
<!--                <p class="money">{{plan.RevenueYear_Amount?plan.RevenueYear_Amount:'-'}}</p>-->
<!--              </view>-->
<!--              <view class="success">-->
<!--                <p class="text">年度计划<text class="unit">/元</text></p>-->
<!--                <p class="money">{{plan.BudgetYear_Amount?plan.BudgetYear_Amount:'-'}}</p>-->
<!--              </view>-->
<!--            </view>-->
<!--          </view>-->
<!--        </div>-->



<!--        <div class="propOfReven">-->
<!--          <p class="title">营收占比</p>-->
<!--          <view class="tabs">-->
<!--            <view-->
<!--                v-for="(item, index) in propOfRevenList"-->
<!--                :key="index"-->
<!--                :class="selectTab === item.value ? 'active tabItem' : 'tabItem'"-->
<!--                @click="handleSelectTab(item.value)">-->
<!--              {{ item.name }}-->
<!--            </view>-->
<!--          </view>-->

<!--          <view class="chart">-->
<!--          &lt;!&ndash;  1、2、3就是对应的第几个标题选中 老项目复制的 &ndash;&gt;-->
<!--            <div v-show="selectTab===1" v-if="modelProgress.length > 0 && theRequest.ProvinceCode==340000">-->
<!--              <div>-->
<!--                <div class="operation-c-list" v-for="(item,o) in modelProgress" :key="o">-->
<!--                  <div class="top">-->
<!--                    <div class="left">-->
<!--                      <div class="icon">-->
<!--                        <image :src="o===0?'https://eshangtech.com/ShopICO/ahyd-BID/index/No1.svg':o===1?'https://eshangtech.com/ShopICO/ahyd-BID/index/No2.svg':o===2?'https://eshangtech.com/ShopICO/ahyd-BID/index/No3.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/No4.svg'"></image>-->
<!--                        <text>{{o+1}}</text>-->
<!--                      </div>-->
<!--                      <p class="name">{{item.name}}</p>-->
<!--                    </div>-->
<!--                    <p class="price">{{item.value}}</p>-->
<!--                  </div>-->
<!--                  <div class="bottom">-->
<!--                    <div class="bar">-->
<!--                      <div class="progress" :style="{width:item.percentage+'%'}"></div>-->
<!--                    </div>-->
<!--                    <p class="number">{{item.percentage+'%'}}</p>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div v-show="selectTab===2" v-if="regionProgress.length>0">-->
<!--              <div>-->
<!--                <div class="operation-c-list" v-for="(item,o) in regionProgress" :key="o">-->
<!--                  <div class="top">-->
<!--                    <div class="left">-->
<!--                      <div class="icon">-->
<!--                        <image :src="o===0?'https://eshangtech.com/ShopICO/ahyd-BID/index/No1.svg':o===1?'https://eshangtech.com/ShopICO/ahyd-BID/index/No2.svg':o===2?'https://eshangtech.com/ShopICO/ahyd-BID/index/No3.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/No4.svg'"></image>-->
<!--                        <text>{{o+1}}</text>-->
<!--                      </div>-->
<!--                      <p class="name">{{item.name}}</p>-->
<!--                    </div>-->
<!--                    <p class="price">{{item.value}}</p>-->
<!--                  </div>-->
<!--                  <div class="bottom">-->
<!--                    <div class="bar">-->
<!--                      <div class="progress" :style="{width:item.percentage+'%'}"></div>-->
<!--                    </div>-->
<!--                    <p class="number">{{item.percentage+'%'}}</p>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div v-show="selectTab===3" v-if="areaProgress.length>0">-->
<!--              <div>-->
<!--                <div class="operation-c-list" v-for="(item,o) in areaProgress" :key="o">-->
<!--                  <div class="top">-->
<!--                    <div class="left">-->
<!--                      <div class="icon">-->
<!--                        <image :src="o===0?'https://eshangtech.com/ShopICO/ahyd-BID/index/No1.svg':o===1?'https://eshangtech.com/ShopICO/ahyd-BID/index/No2.svg':o===2?'https://eshangtech.com/ShopICO/ahyd-BID/index/No3.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/No4.svg'"></image>-->
<!--                        <text>{{o+1}}</text>-->
<!--                      </div>-->
<!--                      <p class="name">{{item.name}}</p>-->
<!--                    </div>-->
<!--                    <p class="price">{{item.value}}</p>-->
<!--                  </div>-->
<!--                  <div class="bottom">-->
<!--                    <div class="bar">-->
<!--                      <div class="progress" :style="{width:item.percentage+'%'}"></div>-->
<!--                    </div>-->
<!--                    <p class="number">{{item.percentage+'%'}}</p>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </view>-->
<!--        </div>-->

<!--      </view>-->
<!--    </view>-->
<!--&lt;!&ndash;      isShow&ndash;&gt;-->
    <div class="notice" v-if="special" style="background: rgba(203, 26, 26, 1)">
        <view class="left">
          <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/dangerous.svg"></image>
          <view class="text">
            <p class="name">五一流量预警</p>
<!--            <p class="desc"></p>-->
          </view>
        </view>
        <view class="right" @click="handleSearch('special')">去查看</view>
    </div>

      <div class="notice" v-if="isShow" style="bottom: 200px;">
          <view class="left">
              <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/warning.svg"></image>
              <view class="text">
                  <p class="name">{{isShowTitle}}个投诉建议</p>
              </view>
          </view>
          <view class="right" @click="handleSearch('other')">去查看</view>
      </div>
<!--    <uni-popup ref="popup" :show="popupShow"  :type="popupType" :round="popup" @hidePopup="closePop">-->
<!--        <div class="popupIndex">-->
<!--          <div class="popupTop">未上传门店: </div>-->
<!--          <div class="bodyList">-->
<!--              <div class="item" v-for="(item,index) in bodyList" :key="index">-->
<!--                  <div class="index">{{index + 1<10 ? '0' + (index + 1):index + 1}}</div>-->
<!--                  <div class="title">{{item.Serverpart_Name}}{{item.ShopName}}</div>-->
<!--              </div>-->
<!--          </div>-->
<!--        </div>-->
<!--    </uni-popup>-->
    <Tabbar ref="tabbar" :page="page"></Tabbar>
  </view>
</template>

<script>
import {getThisDay, handleYesterday, timestampToTime} from "../../util/dateTime";
import {
  mapActions,
  mapGetters,
  mapState
} from 'vuex';
import request from '@/util/index.js'
import uCharts from '@/components/u-charts.js';
import uniPopup from "../../components/uni-popup.vue";
import Tabbar from "../../components/tabbar/tabbar.vue";
import anhuiYestodayRevenueData from "../everdayRenven/components/anhuiYestodayRevenueData";
var rincanvas = {};
export default {
  components: {Tabbar,uniPopup},
  data() {
    const lastDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD', -1)
    const nowDay = this.$util.cutDate(new Date(), 'MM月DD日')
    return {
      statusBarHeight:'',// 每个手机的状态栏高度
      page:'/pages/index/index',
      bodyList:[],//列表
      menu:'', // 胶囊按钮高度
      startDate:'',// 开始时间
      endData:'', // 结束时间
      popupType:'center',
      popupShow:false,
      popup:true,
      selectBigTab:1,
      bigTab:[{imgUrl:'https://eshangtech.com/ShopICO/ahyd-BID/home/carTab.svg',text:'车流统计',value:1},
        {imgUrl:'https://eshangtech.com/ShopICO/ahyd-BID/home/revenueTab.svg',text:'经营统计',value:2}],
      smallTab:[{text:'服务区流量排名',value:1},{text:'断面流量排名',value:2},{text:'驶入率排名',value:3}],
      selectSmallTab:1,
      tabTypeList:[
        { imgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/home/customer.svg', path: '/pages/commercialBI/guestPortrait', name: '客群统计' },
        { imgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/home/operate.svg', path: '/pages/commercialBI/managePortrait', name: '经营统计' },
        { imgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/home/trade.svg', path: '/pages/commercialBI/businessPortrait', name: '交易统计' },
        { imgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/home/format.svg', path: '/pages/commercialBI/formatPortrait', name: '业态统计' }],

      detailTypeList:[{ name: '分润门店', unit: '/个', value: '-',yesterValue:'-', add: '', imgIcon: '/static/images/index/store.svg' },
        { name: '驿达分润', unit: '/元', value: '-',yesterValue:'-', imgIcon: '/static/images/index/yidaFenrun.svg' },
        { name: '订单配送', unit: '/单', value: '-',yesterValue:'-', add: '', imgIcon: '/static/images/index/orderDelivery.svg' },
        { name: '采购金额', unit: '/元', value: '-',yesterValue:'-', imgIcon: '/static/images/index/purchaseAmount.svg' },],
      propOfRevenList:[ { name: '经营模式', value: 1 },
        { name: '经营业态', value: 2 },
        { name: '区域经营', value: 3 }],
      selectTab:1, // 选项卡的指针
      monthAmountAdd:'',//月累计
      yearAmountAdd:'',//年累计
      mobileData :{}, // 移动支付分账接口返回的数据
      single:'', // 时间选择器选择的时间
      monthAdd:'',//月每天的相对增加
      yearAdd:'', // 年度计划增加的百分比
      thisDay:'', // 显示的星期几
      isBig:false,//判断门店上传的前一个数字是否比后一个数字大
      allShopCount:0,//门店总数
      theRequest: null,
      lastDay: lastDay, // 该页面的最近有效日期
      nowDay: nowDay, // 当天时间
      buyPriceYes:'',//昨日采购金额
      regionList: null,
      nowTab: 1,
      showNotice:false,
      showNoticeYear:false,
      priceMove:false,//价格出现的动画效果
      carInfo:{},//车流信息
      regionProgress: null,
      areaProgress: null,
      modelProgress: null,
      showTableData:{},
      monthPrice:0,//月度累计分润
      yesterdayBillCount:0,//昨日累计配送
      lastDayBillCount:0,//当前日的配送
      buyPriceMonth:0,//月度的采购金额
      totalData:null,
      option:{},//onLoad里面的option
      isShow:false, //投诉建议是否显示
      isShowTitle:0,//投诉建议条数
      isShowId:0,//投诉id
      plan:{},//月度和年度接口的返回参数 一起的
      ShareShopCountYes:0,//昨日的店铺数
      yesterdayAllPay:0,//前一天的营收总额
      noChangeLastDay: lastDay,
      wechatPushSalesList: null, // 甘肃单品排行数据
      seat:{},//用户经纬度信息
      nearServiceInfo:{
          SERVERPART_NAME:"广德服务区",
          SPREGIONTYPE_NAME:"芜湖片区",
          Serverpart_ID:524
      },//最近服务区的有用信息
      monthNoticeText:'',
      yearNoticeText:'',
      thisMonth:0,//拿到当前月份
      isSuccess:false,//首页这些接口是否全部调用成功
      isReturn : true,
      isSuggestion:false,//可不可以看意见
      loadMore:false,// 是否展示更多
      special:false,
      allTrafficList:[],// 车流数据数组
      showTrafficList:[],// 显示在页面上车流数据
    }
  },
  watch:{
    user:{
        // 新用户刚进来的时候可能onLoad会执行不了 监听他的user变化确保能请求
      handler:function (value){
          let userInfo = uni.getStorageSync('vuex')
          userInfo = JSON.parse(userInfo)
          if (this.isReturn===true){
              // 无权限就会跳转到无数据的页面
              if (userInfo.userData.AuthorityInfo['89a1f248-2113-4d57-84b1-c2e6edb9e8ee']===1){
                  this.isReturn = false
              }else{
                  uni.redirectTo({
                      url:`/pages/commercialBI/noData?type=noAuthor`
                  })
              }

              if (userInfo.userData.AuthorityInfo['e2fb458b-d1bd-48fa-805e-fc93dc71efb7'] === 1 || userInfo.userData.AuthorityInfo['ea2fc404-d924-4c88-98de-1f4d96137745'] === 1){
                  this.getSuggestion()
              }
              // 拿到用户当前的经纬度位置
              this.seat = uni.getStorageSync('seatInfo')
              if (!this.seat){
                  //获取用户的经纬度位置存在stroge里面
                  wx.getFuzzyLocation({
                      type:'gcj02',
                      altitude:true,
                      success: (res) =>{
                          let seatInfo = {
                              latitude:res.latitude,
                              longitude:res.longitude
                          }
                          uni.setStorageSync('seatInfo', seatInfo);
                          this.seat = seatInfo
                      }
                  })
              }else{
                  //拿到最近服务区的数据
                  this.nearestService()
              }
              if (!this.isReturn){
                  this.getData(this.option)
                  this.handleNoticeMonth()
                  this.handleNoticeYear()
              }
          }
      },
      deep:true
    },
    seat:{
        handler(value){
            if (value.latitude && value.longitude){
                this.nearestService()
            }
        }
    }
  },
  computed: {
    ...mapState({
      'PushAuthority': (state) => state.userData.PushAuthority,
      'ProvinceCode': (state) => state.userData.ProvinceCode,
      toDoMsg:(state)=>{return state.toDoMsg},
    }),
    hasSeverpartIndexAuthority() {
      let theRequest = this.theRequest
      if (this.theRequest && theRequest.ProvinceCode && this.PushAuthority) {
        return this.PushAuthority.some(n =>
            n.ProvinceCode == theRequest.ProvinceCode && n.ShopAnalysisType == 1
        )
      }
      return false
    },
    ...mapGetters({'user':'getUser'})
  },
   onLoad(option){
   // 处理页面显示的时间
   this.single = timestampToTime((new Date(this.lastDay).getTime()))
   //  获取手机参数对页面进行适配 主要是用于拿到胶囊的位置
   let systemInfo = uni.getSystemInfoSync()
   this.statusBarHeight = Number(systemInfo.statusBarHeight)
   this.menu = uni.getMenuButtonBoundingClientRect()
   // 获取最近有效日期的时间，以昨天为主
   const date = new Date(this.lastDay)
   //设置日期选择器的开始时间和结束时间
   let y = date.getFullYear()
   let m = date.getMonth() + 1
   let d = date.getDate()
   let howDay
   let day
   if (d - 8 <0){
      let k = 8 - d
      m = m - 1
     if (m<10){
       m = '0' + m
     }
     const time = `${y}-${m}`
      howDay = this.$util.getThisMonthDay(time)
      this.startDate = `${y}-${m}-${howDay - k}`
   }else{
       if (m<10){
           m = '0' + m
       }
       if (d - 8 <10){
           day = d - 8
           day = '0' + day
       }else{
           day = d - 8
       }
      this.startDate = `${y}-${m}-${day}`
   }
   this.endData = new Date()
   this.thisDay = getThisDay(date.getDay())
   this.thisMonth = this.$util.getThisTimeMonth(this.lastDay)
      // 把时间存起来给全部页面都能拿到
      uni.setStorageSync('lastDay',this.lastDay)
      // 小程序进来存起来的用户信息
      let userInfo = uni.getStorageSync('vuex')
      userInfo = JSON.parse(userInfo)
       //判断权限
       if (userInfo.userData.AuthorityInfo['89a1f248-2113-4d57-84b1-c2e6edb9e8ee']===1){
          this.isReturn = false
       }else{
           uni.redirectTo({
               url:`/pages/commercialBI/noData?type=noAuthor`
           })
       }
     if (!this.isReturn){
       let userInfo = uni.getStorageSync('vuex')
       userInfo = JSON.parse(userInfo)
         // 判断是否有投诉建议的悬浮框弹出
         if (userInfo.userData.AuthorityInfo['e2fb458b-d1bd-48fa-805e-fc93dc71efb7'] === 1 || userInfo.userData.AuthorityInfo['ea2fc404-d924-4c88-98de-1f4d96137745'] === 1){
           this.getSuggestion()
         }
         //拿到option的值
         this.option = option
         // 获取数据的方法
         if (this.user.Membership_Id){
             this.getData(option)
         }
         // 判断缓存中是否有位置信息 没有的话 向用户请求 拿到用户当前位置
         // 拿到当前位置之后去请求离当前位置最近的服务区 作为第一次进入小程序自动选中的服务区
         // 在用户选择服务区之后就会有当前服务区
         this.seat = uni.getStorageSync('seatInfo')
         if (!this.seat){
             //获取用户的经纬度位置存在stroge里面
             wx.getFuzzyLocation({
                 type:'gcj02',
                 altitude:true,
                 success: (res) =>{
                     let seatInfo = {
                         latitude:res.latitude,
                         longitude:res.longitude
                     }
                     uni.setStorageSync('seatInfo', seatInfo);
                     this.seat = seatInfo
                 }
             })
         }else{
             //拿到最近服务区的数据
             this.nearestService()
         }
         //问号显示的内容 月份的数据请求 和 年份的数据请求
         this.handleNoticeMonth()
         this.handleNoticeYear()
         setTimeout(()=>{
             if (!this.isSuccess){
                 uni.showToast({
                     title: '加载失败,请下拉刷新重新加载',
                     icon: 'none',
                     duration: 3000
                 })
             }
         },10000)
     }
   },
  onShow(){
    // 隐藏掉小程序本身自带的 tabbar 让自定义的tabbar出现
    uni.hideTabBar()
  },
  onHide(){
    // 离开页面投诉建议的悬浮框隐藏掉
    this.isShow = false
    this.selectTab = 1
  },
  onUnload() {
     this.$util.addUserBehavior()
  },
  onPullDownRefresh:function(){
      if (!this.isReturn){
          this.getData(this.option)
      }
      uni.stopPullDownRefresh();
  },
  methods:{
    ...mapActions(['memberLogin','getLoginCode']),
    handleGoOtherFun(val){
      if (val===1){
        this.$util.toNextRoute('navigateTo', `/pages/map/detail?isPicker=${true}&come=index`)
      }else if(val===2){
        this.$util.toNextRoute('navigateTo', '/pages/examine/index?come=index')
      }
    },
    async handleGetTrafficList(){
      uni.showLoading({
        title: '正在加载...'
      })
      const requestParams = {
        Statistics_Date: this.lastDay,
        Province_Code: '340000',
        GroupType: 1
      }
      console.log('requestParams',requestParams)
      const bayonetCount = await request.$webGet('CommercialApi/Revenue/GetSPBayonetList', requestParams)
      let res = bayonetCount.Result_Data.List
      console.log('res',res)
      res.forEach((item=>{
        if (item.Vehicle_Count===null || item.SectionFlow_Count===null || item.Entry_Rate===null || item.Entry_Rate>100){
          item.Vehicle_Count = 0
          item.SectionFlow_Count = 0
          item.Entry_Rate = 0
        }
      }))
      let allList = []// 全部的
      let list1 = JSON.parse(JSON.stringify(res)) // 服务区流量排名
      let list2 = JSON.parse(JSON.stringify(res)) // 断面流量排名
      let list3 = JSON.parse(JSON.stringify(res)) // 驶入率排名

      for (let i=0;i<=list1.length - 1;i++){
        for (let j=0;j<=list1.length - i - 1 ;j++){
          if (list1[j] && list1[j + 1] && list1[j].Vehicle_Count!==null  && list1[j+1].Vehicle_Count!==null){
            if (list1[j].Vehicle_Count < list1[j+1].Vehicle_Count ){
              let temp = list1[j]
              list1[j] = list1[j + 1]
              list1[j + 1] = temp
            }
          }
        }
      }
      for (let i=0;i<=list2.length-1;i++){
        for (let j=0;j<=list2.length - i - 1;j++){
          if (list2[j] && list2[j + 1] && list2[j].SectionFlow_Count!==null && list2[j+1].SectionFlow_Count !==null ){
            if (list2[j].SectionFlow_Count < list2[j+1].SectionFlow_Count){
              let temp = list2[j]
              list2[j] = list2[j + 1]
              list2[j + 1] = temp
            }
          }
        }
      }
      for (let i=0;i<=list3.length-1;i++){
        for (let j=0;j<=list3.length - i - 1;j++){
          if (list3[j] && list3[j + 1] && list3[j].Entry_Rate!==null && list3[j+1].Entry_Rate!==null ){
            if (list3[j].Entry_Rate < list3[j+1].Entry_Rate){
              let temp = list3[j]
              list3[j] = list3[j + 1]
              list3[j + 1] = temp
            }
          }
        }
      }

      allList.push(list1.slice(0,20))
      allList.push(list2.slice(0,20))
      allList.push(list3.slice(0,20))
      this.allTrafficList = allList
      this.showTrafficList = this.allTrafficList[0]
      console.log('this.allTrafficList',this.allTrafficList)
      uni.hideLoading()
    },
    handleChangeLoadMore(){
        this.loadMore = !this.loadMore
    },
    handleChangeBigSelect(val){
      this.selectBigTab = val
    },
    handleChangeSmallSelect(val){
      console.log('val',val)
      this.selectSmallTab = val
      this.showTrafficList = this.allTrafficList[val-1]
    },
      //门店上传后面感叹号的点击事件
    handleStoreUpload(){
        this.popupShow = true
    },
    closePop(){
        this.popupShow = false
    },
    async getSuggestion(){
      let req = {
        ModuleGuids:'e2fb458b-d1bd-48fa-805e-fc93dc71efb7,ea2fc404-d924-4c88-98de-1f4d96137745',
        ProvinceCode:'340000'
      }
      const data = await request.$webGet('CommercialApi/Suggestion/GetMemberUnreadData',req)
      if (data.Result_Data.data){
          if (data.Result_Data.data !== '0'){
              this.isShow = true
              this.isShowTitle = data.Result_Data.data
              this.isShowId = data.Result_Data.key
          }
      }
    },
    async handleNoticeMonth(){
      let date = new Date(this.lastDay)
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      if(m<10){
        m = '0'+m
      }
      //本月的
      let req = {
        SearchParameter:{
          // STATISTICS_DATE:`${y}-${m}`,
          ANALYSISINS_TYPE:'1011',
          ANALYSISINS_FORMAT:'3000'
        },
        PageIndex:1,
        PageSize:10
      }
      const data = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',req)
      this.monthNoticeText = data.Result_Data.List[0]?data.Result_Data.List[0].ANALYSIS_CONTENT:''
    },
    async handleNoticeYear(){
      let date = new Date(this.lastDay)
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      if(m<10){
        m = '0'+m
      }
      //本年
      let reqYear = {
        SearchParameter:{
          // STATISTICS_DATE:`${y}`,
          ANALYSISINS_TYPE:'1012',
          ANALYSISINS_FORMAT:'3000'
        },
        PageIndex:1,
        PageSize:10
      }
      const totalData = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',reqYear)
        if (totalData.Result_Data.List[0]){
            this.yearNoticeText = totalData.Result_Data.List[0].ANALYSIS_CONTENT
        }
    },
    async nearestService(){
        let seat = uni.getStorageSync('seatInfo');
        let req = {
            longitude:seat.longitude,
            Province_Code:'340000',
            latitude:seat.latitude,
        }
        const data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartList',req)
        // let res = {
        //     SERVERPART_NAME:data.Result_Data.List[0].SERVERPART_NAME,//服务区
        //     SPREGIONTYPE_NAME:data.Result_Data.List[0].SPREGIONTYPE_NAME,//片区
        //     SPRegionType_ID:data.Result_Data.List[0].SPREGIONTYPE_ID,//片区id
        //     Serverpart_ID:data.Result_Data.List[0].SERVERPART_ID,//服务区id
        //     longitude:data.Result_Data.List[0].SERVERPART_X,
        //     latitude:data.Result_Data.List[0].SERVERPART_Y,
        // }
        let res = {
          SERVERPART_NAME: '安徽驿达',//服务区
          SPREGIONTYPE_NAME: '安徽驿达',//片区
          Serverpart_ID: null,
          SPRegionType_ID: null,
          longitude:'117.200927',
          latitude:'31.832905',
        }
        uni.setStorageSync('nearService',res)
        this.nearServiceInfo = res
    },
    handleShowNotice(){
      this.showNotice = true
    },
    handleNoShowNotice(){
      this.showNotice = false
    },
    handleShowNoticeYear(){
      this.showNoticeYear = true
    },
    handleNoShowNoticeYear(){
      this.showNoticeYear = false
    },
    handlePlanPageGo(type){
      // this.$util.toNextRoute('navigateTo', `/pages/commercialBI/yearPlan`)
        if (!this.isReturn){
            this.$util.toNextRoute('navigateTo', `/pages/commercialBI/planMonth?lastDay=${this.lastDay}&type=${type}`)
        }else{
            uni.showToast({
                title: '暂无权限请联系管理员',
                icon: 'none'
            })
        }
    },
    handlePage(){
        if (!this.isReturn){
            this.$util.toNextRoute('navigateTo', `/pages/everdayRenven/index?time=${this.lastDay}`)
        }else{
            uni.showToast({
                title: '暂无权限请联系管理员',
                icon: 'none'
            })
        }
    },
    handleGoTab(item){
      console.log('this.isReturn',this.isReturn)
      console.log('item',item)
      if (!this.isReturn){
          this.$util.toNextRoute('navigateTo', `${item.path}?time=${this.lastDay}&serviceInfo=${JSON.stringify(this.nearServiceInfo)}`)
      } else{
          uni.showToast({
              title: '暂无权限请联系管理员',
              icon: 'none'
          })
      }
    },
    // option是请求的参数  type是否是切换时间
    getData(option,type){
      //老代码
      if (this.user.Membership_Id){
        uni.showLoading({
          title: '正在加载...'
        })
      }
      //判断是否从推送进来
      if (option.ProvinceCode) { // 从推送进入
        this.theRequest = option
        option.time = this.$util.cutDate(option.time, 'YYYY-MM-DD')
        option.month = this.$util.cutDate(option.time, 'YYYYMM')
        if (!type){
          this.lastDay = this.$util.cutDate(option.time, 'YYYY-MM-DD')
          //修改时间选择器里面的时间
          this.single = timestampToTime((new Date(this.lastDay).getTime()))
          //显示当前选择的时间是星期几
          const date = new Date(this.lastDay)
          this.thisDay = getThisDay(date.getDay())
        }
        // 老项目的请求数据的那部分
        this.initData()
        //根据新页面请求数据的方法
        this.initYesterdayData()
        //车流分析
        this.getCarInfo()
        //月度计划、年度计划
        this.monthYearPlan()
        //拿到未上传门点列表
        this.getUnUpLoadList()
        // 拿到车流数据
        this.handleGetTrafficList()
      } else if (this.user.Membership_Id){ // 默认
        // 不是从推送进来 走正常的请求方法
        // if (!this.PushAuthority){return}
        // if (this.PushAuthority.length > 0) {

        // 定义initData中的入参
        this.theRequest = this.defaultMsg() || {}
        this.theRequest.time = this.lastDay
        this.theRequest.month = this.$util.cutDate(this.lastDay, 'YYYYMM')
        // 请求数据的方法 initData是老项目中的接口，形参true传入 可以让两个没用到的接口不调用
        this.initData()
        // 请求用的到的 昨日的数据
        this.initYesterdayData()
        //车流分析
        this.getCarInfo()
        //月度计划、年度计划
        this.monthYearPlan()
        //拿到未上传门点列表
        this.getUnUpLoadList()
        // 拿到车流数据
        this.handleGetTrafficList()
      }

      // 老代码 不知道干啥用的
      this.nowTab = this.theRequest.ProvinceCode == 340000 ? 1 : 2
      if (this.theRequest.GroupType == 1010) {
        this.getDetail(this.theRequest)
      }
      // 若省份为甘肃，则加载甘肃单品排行
      if (this.theRequest.ProvinceCode == 620000) {

        this.getRankContent()
      }
    },
    handleReg(){
      this.$util.toNextRoute('redirectTo', '/pages/register/register')
    },
    handleSearch(type){
        if (type ==='special'){
            if(!this.isReturn){
                this.special=false
                this.$util.toNextRoute('navigateTo', '/pages/commercialBI/specialCase')
            }
        }else{
            let req = {
                SuggestionIds:this.isShowId
            }
            request.$webGet('CommercialApi/Suggestion/RecordReadingLog',req).then(()=>{
                this.$util.toNextRoute('navigateTo', '/pages/suggestion/suggestion')
            })
        }

    },
    // 改变时间触发的方法 ，改变页面的内容数据
    onRefresh(type){
      // 有权限就让他刷新 不没权限的时候下拉刷新不会调用
      if (!this.isReturn){
        this.getData(this.option,type)
      }
    },
    getUnUpLoadList(){
        let req = {pushProvinceCode:'340000',
            Statistics_Date:this.lastDay}
        request.$webGet('CommercialApi/Revenue/GetRevenuePushList',req).then(res=>{
          let list = []
          res.Result_Data.List.forEach(item=>{
              if (item.Revenue_Upload === 0 || !item.Revenue_Upload){
                  list.push(item)
              }
          })
          this.bodyList = list
          this.allShopCount =  res.Result_Data.List.length
        })
    },
    monthYearPlan(){
      const monthDate= {
        Province_Code:'340000',
        Statistics_Date:this.lastDay
      }
      request.$webGet('CommercialApi/Revenue/GetRevenueBudget',monthDate).then(res=>{
        // 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
        this.plan = res.Result_Data
        this.plan.percentageMonth = res.Result_Data.MonthBudget_Degree
        this.plan.percentageYear =  res.Result_Data.YearBudget_Degree

        this.monthAdd = this.plan.MonthGrowth_Rate
        this.yearAdd = res.Result_Data.YearGrowth_Rate
        //处理数据
        this.plan.RevenueMonth_Amount = this.$util.fmoney(res.Result_Data.RevenueMonth_Amount)
        this.plan.BudgetMonth_Amount = this.$util.fmoney(res.Result_Data.BudgetMonth_Amount)
        this.plan.RevenueYear_Amount = this.$util.fmoney(res.Result_Data.RevenueYear_Amount)
        this.plan.BudgetYear_Amount = this.$util.fmoney(res.Result_Data.BudgetYear_Amount)
      })
    },
    getCarInfo(){
        const data = {
          Statistics_Date:this.lastDay,
          Province_Code:'340000'
        }
        request.$webGet('CommercialApi/Revenue/GetAvgBayonetAnalysis',data).then(res=>{
          // 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
          this.carInfo = res.Result_Data
          this.carInfo.Vehicle_Count = res.Result_Data.Vehicle_Count?res.Result_Data.Vehicle_Count:'-'
        })
    },
    async initYesterdayData(){
        let flag1 = false
        let flag2 = false
        let flag3 = false
        let _this = this
        // 传入最近的有效日期就可以拿到当前有效日期的前一天的日期
        let yesterday = handleYesterday(this.lastDay)
        if ((yesterday.substr(yesterday.length-1,1)) === '0'){
            let date = new Date(this.lastDay)
            let y = date.getFullYear()
            let m = date.getMonth() //不加1 反正要减1
            let day = this.$util.getThisMonthDay(this.lastDay)
            yesterday = `${y}-${m}-${day}`
        }
       // 定义入参 除了改变时间 别的和老项目一致
       //  const data  = {
       //    Statistics_Date:yesterday,
       //    Statistics_Month:this.theRequest.month,
       //    Province_Code:this.theRequest.ProvinceCode,
       //    pushProvinceCode:this.theRequest.ProvinceCode,
       //    Serverpart_ID:this.theRequest.ServerpartIds?this.theRequest.ServerpartIds:'',
       //    SPRegionType_ID:this.theRequest.GroupType==1020?this.theRequest.ServerpartIds:''
       //  }
       //  request.$webGet('CommercialApi/Revenue/GetRevenuePushList',data).then(res=>{
       //    // 计算月总额 拿到昨日的全部对客营收 并拿到相对于昨日的增长比
       //    let cashPay = 0
       //    res.Result_Data.List.forEach(item=>{
       //      cashPay= Number(item.CashPay) + cashPay
       //    })
       //    // 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
       //    _this.yesterdayAllPay = cashPay
       //      flag1 = true
       //  })
        //昨日的分润门店
        // request.$webGet('CommercialApi/Revenue/GetMobileShare',data).then(res=>{
        //   // 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
        //   this.ShareShopCountYes = res.Result_Data.ShareShop_Count
        // })
         const date = new Date(this.lastDay)
         const y = date.getFullYear()
         let  m = date.getMonth() + 1
         if (m<10){
           m = '0' + m
         }
         //一个月分润门店
         // 如果前一天是上个月 那么拿到的月份还是上一个月的月份 然后结束时间就是前一天 开始时间是月份开始的第一天
         const monthDate={
           Province_Code:'340000',
           StatisticsStartDate:`${y}-${m}-01`,
           StatisticsEndDate:this.lastDay,
         }
         // request.$webGet('CommercialApi/Revenue/GetMobileShare',monthDate).then(res=>{
         //   // 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
         //   this.monthPrice = res.Result_Data.Royalty_Price
         // })
         //这一日的订单配送
         const todayData = {
           Province_Code:'340000',
           Statistics_Date: this.lastDay,
           ShowCompareRate:true
         }
         const data = await request.$webGet('CommercialApi/Revenue/GetMallDeliver',todayData)
         this.lastDayBillCount = data.Result_Data
         this.detailTypeList[2].value = this.lastDayBillCount.DeliverBill_Count
         this.detailTypeList[2].add = this.lastDayBillCount.DeliverBillGrowth_Count
         this.detailTypeList[3].value = this.$util.fmoney(this.lastDayBillCount.MonthDeliver_Price)
         this.detailTypeList[3].yesterValue = this.$util.fmoney(this.lastDayBillCount.Deliver_Price)
         flag2 = true
         //     .then(res=>{
         //     // 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
         //     this.lastDayBillCount = res.Result_Data
         //     this.detailTypeList[2].value = this.lastDayBillCount.DeliverBill_Count
         //     this.detailTypeList[2].add = this.lastDayBillCount.DeliverBillGrowth_Count
         //     this.detailTypeList[3].value = this.$util.fmoney(this.lastDayBillCount.MonthDeliver_Price)
         //     this.detailTypeList[3].yesterValue = this.$util.fmoney(this.lastDayBillCount.Deliver_Price)
         //     flag2 = true
         // })
         // 暂时调用不到的方法
         //昨日的订单配送
         // const deliveData = {
         //   Province_Code:'340000',
         //   Statistics_Date: yesterday
         // }
         // request.$webGet('CommercialApi/Revenue/GetMallDeliver',deliveData).then(res=>{
         //   // 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
         //   this.yesterdayBillCount = res.Result_Data.DeliverBill_Count
         // })
         // //昨日采购金额
         // const buyPriceYes = {
         //   Province_Code:'340000',
         //   Statistics_Date: yesterday
         // }
         // request.$webGet('CommercialApi/Revenue/GetMallDeliver',buyPriceYes).then(res=>{
         //   // 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
         //   this.buyPriceYes = res.Result_Data.Deliver_Price
         // })

         // //一个月的采购金额
         // const buyPrice = {
         //   Province_Code:'340000',
         //   StatisticsStartDate:`${y}-${m}-01`,
         //   StatisticsEndDate:this.lastDay
         // }
         // request.$webGet('CommercialApi/Revenue/GetMallDeliver',buyPrice).then(res=>{
         //   // 赋值给data中的这个对象 在请求完之后会进行统一f的数据处理
         //   this.buyPriceMonth = res.Result_Data.Deliver_Price
         // })
         // 获取营收推送汇总数据
         const allPriceData = {
           pushProvinceCode:'340000',
           Statistics_Date:this.lastDay,
           ShowCompareRate: true,
           ShowYearRevenue: true
         }
         request.$webGet('CommercialApi/Revenue/GetSummaryRevenue',allPriceData).then(res=>{
           flag3 = true
           // 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
           let result = res.Result_Data
           for(let key in result){
             if (key!=='RevenuePushModel' && key!=='GrowthRate' && key!=='MonthRevenueAmount' && key!=='YearRevenueAmount'){
               let all = 0
               // 先算出全部的总额数量 用来计算百分比
               result[key].forEach(item=>{
                all += Number(item.value)
               })
               // 把百分比计算出来加到每一项中
               result[key].map(item=>{
                 item.percentage = ((Number(item.value)/all)*100).toFixed(2)
               })
               // 格式化掉处理的数据
               result[key].forEach(item=>{
                 item.value = _this.$util.fmoney(item.value)
               })
             }
           }
           this.monthAmountAdd = this.$util.fmoney(result.MonthRevenueAmount)
           this.yearAmountAdd = result.YearRevenueAmount?this.$util.fmoney(result.YearRevenueAmount):'-'
           this.modelProgress = result.BusinessTypeList
           this.regionProgress = result.BusinessTradeList
           this.areaProgress = result.SPRegionList
           this.showTableData = result.RevenuePushModel
           this.showTableData.compared = result.GrowthRate
             // 只有接口全面通了 才可以处理数据显示
           console.log('flag2',flag2)
           console.log('flag3',flag3)
             if (flag2 && flag3 ){
                 this.todayAmount()
             }
         })
    },
    defaultMsg() {
      let option = null
      let _this = this
      if (this.PushAuthority && this.PushAuthority.length > 1) {
        option = this.PushAuthority.find(n => n.ProvinceCode === _this.ProvinceCode)
      }else if(this.user.Membership_Id){
        option = {GroupType: 1000,
          ProvinceCode: 340000,
          ServerpartIds: "",
          ShopAnalysisType: 1}
      }else {

      }
      return {
        ...option
      }
    },
    handleSelectTab(value){
      this.selectTab = value
    },
    // 顶部的时间组件切换时间触发的方法
    bindDateChange(e){
      let isOnRefresh = false
      let startTime = new Date(this.startDate).getTime()
      let endTime = new Date(this.noChangeLastDay).getTime() - 8 * 3600 * 1000 //结束时间戳
      const date = new Date(e.detail.value).getTime() - 8 * 3600 * 1000
      let startDate = new Date(this.startDate)
      let startMonth = startDate.getMonth() + 1
      let startDay = startDate.getDate()
      let endDate = new Date(this.noChangeLastDay)
      let endMonth = endDate.getMonth() + 1
      let endDay = endDate.getDate()
        // 判断是否是在限制的时间内
      if (date > endTime || date < startTime){
        isOnRefresh = false
      }else{
        isOnRefresh = true
      }
      // 符合要求的时间可以请求数据 不符合的弹出提示
      if (isOnRefresh){
        this.single = timestampToTime(date)
        this.lastDay = e.detail.value
        uni.setStorageSync('lastDay',this.lastDay)
        this.thisDay = getThisDay(new Date(e.detail.value).getDay())
        this.onRefresh(true)
      }else{
        uni.showModal({
          title: `数据看板仅支持查看${startMonth}.${startDay}-${endMonth}.${endDay}的数据,更多数据请登陆商业综合平台查看`,
          icon:'none',
          showCancel: false,
          duration:3000
        });
      }
    },
    async initData() { // 初始化营收数据
      // const data = {
      //   pushProvinceCode:'340000',
      //   Statistics_Date:this.lastDay
      // }

      // //获取服务区门店商家数量列表（根据省份、服务区、区域、统计日期查询）
      // const totalData = await request.$webGet('CommercialApi/BaseInfo/GetShopCountList',data)
      // let all = 0
      // totalData.Result_Data.List.forEach(item=>{
      //   all+=item.SHOP_REVENUECOUNT
      // })
      // // this.allShopCount = all

      //获取移动支付分账数据
      const shareData = {
        Province_Code: '340000',
        Statistics_Date: this.lastDay,
        ShowCompareRate: true
      }
      const mobileShareData = await request.$webGet('CommercialApi/Revenue/GetMobileShare',shareData)
      this.mobileData = mobileShareData.Result_Data


        //mobileData 是移动支付分账接口返回来的全部数据
        this.detailTypeList[0].value = this.mobileData.ShareShop_Count
        this.detailTypeList[0].add = this.mobileData.ShareShopGrowth_Count
        this.detailTypeList[1].value = this.$util.fmoney(this.mobileData.MonthRoyalty_Price)
        this.detailTypeList[1].yesterValue = this.$util.fmoney(this.mobileData.Royalty_Price)  //返回数据可能有问题
      // 让金额的动画效果出来 设置在class里面
      this.priceMove = true
      //处理数据的方法
    },
      // 请求完最后处理数据的方法 拿到项目就已经是有一堆请求的了 只能最后处理数据
     todayAmount() {
       let _this = this
       // 由于处理数据的时间 必须在全部接口请求完毕 所以加个延时器
      setTimeout(()=>{
        // 由于页面大部分的内容采用渲染的格式 这样的方法是最快的对原数据进行赋值  对照data里面的几个主要的数组看就能看明白
        // 门店上传的前后数字计算来决定样式
        if(this.showTableData.Revenue_Upload >= this.allShopCount){
          this.isBig = false
        }else{
          this.isBig = true
        }
        // 计算相对于昨日的增长率
        // this.showTableData.compared = (((Number(this.showTableData.CashPay) - this.yesterdayAllPay) / this.yesterdayAllPay) * 100).toFixed(2)
        // 客单均价
        this.showTableData.averagePrice = (Number(this.showTableData.CashPay) / Number(this.showTableData.TicketCount)).toFixed(2)
        // 商品均价
        this.showTableData.countave = (Number(this.showTableData.CashPay) / Number(this.showTableData.TotalCount)).toFixed(2)
        // 处理所有数据 变成有千分号和小数点的数据
        for (let key in this.showTableData){
          if (key==='uploadState' || key==='Revenue_Upload'){
            this.showTableData[key] = this.showTableData[key]
          }else if(key ==='TicketCount'){
            this.showTableData[key] = this.$util.noDecimal(this.showTableData[key],0)
          }else{
            this.showTableData[key] = this.$util.fmoney(this.showTableData[key], 2)
          }
        }
        uni.hideLoading()
        this.isSuccess = true
        _this.$forceUpdate()
      })
    },
    getDetail(obj) {
      let _this = this
      this.$request.$webGet('CommercialApi/Revenue/GetServerpartEndAccountList', {
        Serverpart_ID: obj.ServerpartIds,
        pushProvinceCode: obj.ProvinceCode,
        Statistics_Date: obj.time,

      }).then(res => {
        if (res.Result_Code != 100) return
        res.Result_Data.ShopEndaccountList.map(n => {
          n.show = false
          n.detail = this.getListDetail(n)
        })

        _this.regionList = res.Result_Data.ShopEndaccountList
      })
    },
    async getRankContent() { // 甘肃需要单品排行显示
      const {
        ProvinceCode,
        time
      } = this.theRequest

      const data = await this.$request.$webGet('CommercialApi/Revenue/GetWechatPushSalesList', {
        pushProvinceCode: ProvinceCode,
        Statistics_Date: time
      })

      if (data.Result_Code === 100 && data.Result_Data.TotalCount > 0) {
        this.wechatPushSalesList = {}
        data.Result_Data.List.forEach(n => {
          this.wechatPushSalesList[n.Data_Type]= n.GoodsList
        })

      } else {
        this.wechatPushSalesList = {}
      }
      this.$forceUpdate()
    },
  }
}
</script>

<style scoped lang="scss">
$iphoneHeight: env(safe-area-inset-bottom);
.main {
  width: 100%;
  box-sizing: border-box;
  padding-bottom: calc( 45px + env(safe-area-inset-bottom));
  .header {
    width: 100%;
    background: linear-gradient(315deg, #FF8670 0%, #FFDCA8 100%);
    box-sizing: border-box;
    padding: 0 16px;
    position: relative;
    //.headerBg {
    //  width: 100%;
    //  height: 100%;
    //  position: absolute;
    //  left: 0;
    //  top: 0;
    //}
    .headerTop{
      width: 100%;
      background: linear-gradient(315deg, #FFAF95 0%, #FFD6A6  100%);
      position: fixed;
      top: 0;left:0;
      box-sizing: border-box;
      padding: 0 15px;
      z-index:9999999;
      .selectTime {
        position: absolute;
        display: flex;
        align-items: center;
        .dateIcon {
          width: 16px;
          height: 16px;
          margin-right: 4px;
        }
        .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: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ae664e;
            line-height: 36rpx;
          }
          .icon {
            width: 24px;
            height: 16px;
          }
        }
      }
    }
    .storeDetail{
      width: calc(100% - 32px);
      position: absolute;
      .storeName{
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #782717;
        line-height: 20px;
        .num{
          font-weight: 600;
          margin-left: 8px;
        }
      }
      .detailBox{
        width: 100%;
        border-radius: 8px;
        background: rgba(254, 255, 254, 0.3);
        margin-top: 8px;
        .detailTop{
          width: 100%;
          height: 152px;
          border-radius: 8px;
          background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/home/headerBg.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          //background: linear-gradient(134deg, #FFE9CC 0%, #FFEFE0 30%, #FFE8E3 72%, #FFD0C6 100%);
          box-sizing: border-box;
          padding: 16px;
          .top{
            display: flex;
            justify-content: space-between;
            .left{
              display: flex;
              .icon{
                width: 48px;
                height: 48px;
                margin-right: 8px;
              }
              .money{
                .moneyTop{
                  display: flex;
                  align-items: center;
                  .price{
                    font-size: 20px;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: bold;
                    color: #782717;
                    line-height: 28px;
                  }
                  .moreIcon{
                    width: 16px;
                    height: 16px;
                    margin-left: 5px;
                  }
                }
                .text{
                  font-size: 14px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #934E3F;
                  line-height: 20px;
                  .unit{
                    color: #C99E90;
                    margin-left: 2px;
                  }
                }
              }
            }
            .right{
              display: flex;
              flex-direction: column;
              align-items: flex-end;
              .add{
                font-size: 20px;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #E62C3B;
                line-height: 28px
              }
              .addText{
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #C99E90;
                line-height: 20px;
              }
            }
          }
          .bottom{
            width: 100%;
            display: flex;
            margin-top: 25px;
            .bottomItem{
              width: 50%;
              .total{
                font-size: 18px;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #782717;
                line-height: 24px
              }
              .totalLabel{
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #934E3F;
                line-height: 20px;
                .labelUnit{
                  color: #C99E90;
                  margin-left: 4px;
                }
              }
            }
          }
        }
        .detailBottom{
          width: 100%;
          position: relative;
          .searchBox{
            width: 100%;
            height: 46px;
            box-sizing: border-box;
            padding: 0 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .searchText{
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #AD6753;
              line-height: 20px;
            }
            .searchIcon{
              width: 26px;
              height: 14px;
            }
          }
          .otherDetail{
            width: 100%;
            height: 100%;
            .detail{
              width: 100%;
              height: 190px;
              box-sizing: border-box;
              padding: 16px 0;
              border-radius: 8rpx;
              margin-top: 12px;
              .detailItem {
                width: 33%;
                box-sizing: border-box;
                padding-left: 16px;
                height: 42px;
                text-align: left;
                float: left;
                margin-bottom: 16px;
                .itemName {
                  font-size: 14px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #782717;
                  opacity: 0.8;
                  line-height: 40rpx;
                  margin-bottom: 2px;
                  .prompt{
                    width: 12px;
                    height: 12px;
                    border: 1px solid #782717;
                    border-radius:50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 10px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 600;
                    color: #782717;
                  }
                  .itemUnit {
                    font-size: 28rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #C8806C;
                    line-height: 40rpx;
                    margin-left: 2px;
                  }
                }
                .price {
                  font-size: 16px;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #782717;
                  line-height: 40rpx;
                }
              }
            }
          }
          .noShowMore{
            width: 25px;
            height: 14px;
            position: absolute;
            left: 50%;bottom: 12px;
            transform: translateX(-7px);
          }
        }
      }
    }
    .other {
      width: calc(100% - 32px);
      position: absolute;
      top: 104px;
      .topTitle{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        .title {
          font-size: 28rpx;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #782717;
          line-height: 40rpx;
        }
        .text {
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #782717;
          line-height: 40rpx;
          margin-left: 8px;
        }
        .smallTitle{
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #782717;
          line-height: 20px;
          margin-right: 4px;
          .month{
            margin-left: 4px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #c97e64;
            line-height: 20px;
          }
        }
      }

      @keyframes allPriceAnimation {
        0%{
          transform: translateY(30px);
        }
        100%{
          transform: translateY(0px);
        }
      }

      .box {
        display: flex;
        align-items: center;
        .priceBox{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          margin: 6px 0 0;
          .allPrice {
            font-size: 56rpx;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #782717;
            line-height: 64rpx;
            margin-top: 4px;
          }
          .allPriceMove{
            animation: allPriceAnimation 2s;
          }
        }
        .start {
          width: 14px;
          height: 14px;
          margin-left: 8px;
        }
      }

      .addBox {
        width: 100%;
        margin-top: 6px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .smallTitle{
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #782717;
          line-height: 20px;
          margin-right: 4px;
          .month{
            margin-left: 4px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #c97e64;
            line-height: 20px;
          }
        }
        .right{
          display: flex;
          align-items: center;
          .arrowTop {
            width: 14px;
            height: 14px;
            margin-right: 4px;
          }
          .text {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #782717;
            line-height: 20px;
            margin-right: 4px;
          }
          .compare {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #c97e64;
            line-height: 20px;
          }
        }
      }
      .type {
        width: 100%;
        height: 45px;
        margin-top: 8px;
        .item {
          width: 50%;
          display: flex;
          align-items: center;
          float: left;
          .leftImg {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 8px;
            background: #fff;
            image {
              width: 100%;
              height: 100%;
            }
          }
          .right {
            .typeName {
              font-size: 28rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #782717;
              line-height: 40rpx;
              .unit {
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #c97a63;
                line-height: 40rpx;
                margin-left: 4px;
              }
            }
            .price {
              font-size: 36rpx;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #782717;
              line-height: 44rpx;
              margin-top: 2px;
            }
          }
        }
      }
      .detail {
        width: 100%;
        height: 190px;
        box-sizing: border-box;
        padding: 16px 0;
        background: linear-gradient(135deg, #fff2df 0%, #ffe3e5 100%);
        box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
        border-radius: 8rpx;
        margin-top: 12px;
        margin-bottom: 16px;
        .detailItem {
          width: 33%;
          box-sizing: border-box;
          padding-left: 16px;
          height: 42px;
          text-align: left;
          float: left;
          margin-bottom: 16px;
          .itemName {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #782717;
            opacity: 0.8;
            line-height: 40rpx;
            margin-bottom: 2px;
            .prompt{
              width: 12px;
              height: 12px;
              border: 1px solid #782717;
              border-radius:50%;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 10px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 600;
              color: #782717;
            }
            .itemUnit {
              font-size: 28rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #c99f8f;
              line-height: 40rpx;
            }
          }
          .price {
            font-size: 16px;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #782717;
            line-height: 40rpx;
          }
        }
      }
    }
    .more{
      width: calc(100% - 32px);
      display: flex;
      justify-content: center;
      position: absolute;
      bottom: 12px;
      padding-bottom: 12px;
      .img{
        width: 16px;
        height: 16px;
      }
      .rate{
        transform: rotate(180deg)!important;
      }
    }
  }
  .funEntry{
    width: 100%;
    //height: 208px;
    background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/home/funEntryBg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 20px 0 0 0;
    .funList{
      width: 100%;
      box-sizing: border-box;
      padding: 0 16px;
      display: flex;
      .funItem{
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .funItemIcon{
          width: 48px;
          height: 48px;
          border-radius: 10px;
          margin-bottom: 4px;
        }
        .funItemText{
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #160002;
          line-height: 20px;
        }
      }
    }
    .otherFunBox{
      width: 100%;
      box-sizing: border-box;
      padding: 0 16px;
      display: flex;
      margin-top: 20px;
      .otherFunItem{
        width: calc((100% - 9px)/2);
        height: 72px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        .itemTitle{
          position: absolute;
          left: 12px;
          top: 10px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 600;
          color: #0D4CDE;
          line-height: 22px
        }
        .itemImg{
          position: absolute;
          top: 18px;right: 17px;
          width: 35px;
          height: 35px;
        }
        .nowBox{
          position: absolute;
          bottom: 14px;
          left: 12px;
          display: flex;
          align-items: center;
          .nowText{
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #638EEB;
            line-height: 12px
          }
          .searchIcon{
            width: 12px;
            height: 12px;
            margin-left: 4px;
          }
        }
      }
    }
  }

  .carWarning{
    width: calc(100% - 32px);
    margin-left: 16px;
    height: 159px;
    background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/home/warningBg.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    .warningBox{
      width: 150px;
      height: 36px;
      position: relative;
      .warningIcon{
        position: absolute;
        left: 0;top: 0;
        width: 36px;
        height: 36px;
        z-index: 2;
      }
      .trafficBox{
        position: absolute;
        left: 28px;top: 3px;
        z-index: 1;
        width: 112px;
        height: 30px;
        background: #D4F0F5;
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
        box-sizing: border-box;
        padding: 4px 16px;
        .trafficCar{
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 600;
          color: #007DA5;
          line-height: 16px;
        }
      }
    }
    .waringList{
      margin-top: 13px;
      .waringItem{
        width: 100%;
        display: flex;
        align-items: center;
        .warningIndex{
          width: 12px;
          height: 12px;
          position: relative;
          .indexBg{
            width: 12px;
            height: 12px;
            background: #10BFCE;
            filter: blur(4px);
            display: inline-block;
            position: absolute;
            top: 0;left: 0;
          }
          text{
            position: absolute;
            top: -6px;
            left: 1px;
            z-index: 2;
            font-size: 14px;
            font-family: DingTalk-JinBuTi, DingTalk;
            font-weight: normal;
            color: #160002;
          }
        }
        .serviceName{
          width: 40%;
          margin-left: 12px;
          display: inline-block;
          font-size: 14px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #160002;
          line-height: 20px;
          .serviceUnit{
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #786B6C;
            line-height: 18px;
          }
        }
        .carNumber{
          width: 40%;
          display: inline-block;
          font-size: 16px;
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: bold;
          color: #160002;
          line-height: 20px;
          .numberUnit{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #A69E9F;
            line-height: 20px;
            margin-left: 2px;
          }
        }
        .addBox{
          width: calc(20% - 24px);
          display: flex;
          align-items: center;
          .addIcon{
            width: 14px;
            height: 14px;
          }
          .addText{
            font-size: 16px;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #E83944;
            line-height: 20px;
          }
        }
      }
    }
  }

  .flowRank{
    width: 100%;
    border-top-right-radius: 16px;
    border-top-left-radius: 16px;
    margin-top: 20px;
    padding-bottom: 20px;
    background: #fff;
    .flowTop{
      width: 100%;
      height: 58px;
      background: linear-gradient(180deg, rgba(0, 83, 255, 0.1) 0%, rgba(0,83,255,0) 100%);
      box-sizing: border-box;
      border-top-right-radius: 16px;
      border-top-left-radius: 16px;
      padding: 16px;
      .bigTab{
        display: flex;
        .tabItem{
          display: flex;
          align-items: center;
          margin-right: 33px;
          .tabItemIcon{
            width: 30px;
            height: 20px;
          }
          .tabItemText{
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #786B6C;
            line-height: 26px;
          }
          .selectTabItem{
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 600;
            color: #190002;
          }
        }
      }
    }

    .flowDetail{
      width: calc(100% - 32px);
      margin-left: 16px;
      .detailTop{
        width: 100%;
        height: 32px;
        border-bottom: 1px solid #F2F4F6;
        .smallTab{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .smallTabItem{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #786B6C;
            line-height: 20px;
          }
          .selectSmallItem{
            color: #160002!important;
            font-weight: 600!important;
            position: relative;
          }
          .selectSmallItem:after{
            position: absolute;
            content:'';
            width: 18px;
            height: 3px;
            background: #116AFF;
            border-radius: 2px;
            left: 50%;
            bottom: -12px;
            transform: translateX(-9px);
          }
        }
      }
      .detailList{
        width: 100%;
        .detailItem{
          width: 100%;
          box-sizing: border-box;
          padding: 8px 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .itemLeft{
            display: flex;
            align-items: center;
            .itemIndex{
              font-size: 16px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #786B6C;
              line-height: 20px;
            }
            .itemBox{
              margin-left: 12px;
              .itemName{
                font-size: 14px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #160002;
                line-height: 20px
              }
              .itemArea{
                margin-left: 4px;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #786B6C;
                line-height: 18px;
              }
            }
          }
          .itemRight{
            display: flex;
            align-items: center;
            .carNumber{
              font-size: 16px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #160002;
              line-height: 20px;
            }
            .carUnit{
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #A69E9F;
              line-height: 18px;
              margin-left: 2px;
            }
          }
        }
      }
      .thisMonth,.thisYear{
        width: 100%;
        margin-top: 20px;
        padding-bottom: 24px;
        .titleTop{
          display: flex;
          align-items: center;
          position: relative;
          .title {
            font-size: 32rpx;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #160002;
            line-height: 44rpx;
          }
          .question{
            width: 16px;
            height: 16px;
            margin-left: 4px;
            display: flex;
            align-items: center;
            image{
              width: 100%;
              height: 100%;
            }
          }
          .titleTopNotice{
            position: absolute;
            padding: 12px;
            left:35%;
            width: 50vw;
            background: #FFFFFF;
            box-shadow: 0 10px 10px 0 rgba(22,0,2,0.1);
          }
          .meng{
            width: 100vw;
            height: 100vh;
            position: fixed;
            top: 0;left: 0;
          }
        }
        .box {
          width: 100%;
          padding: 12px 16px;
          box-sizing: border-box;
          border-radius: 8px;
          background: #f5f2f2;
          margin-top: 12px;
          .top {
            width: 100%;
            display: flex;
            .big {
              width: 40px;
              height: 40px;
              background: #ffffff;
              border-radius: 8px;
              border: 1px solid #ebebeb;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-right: 8px;
              .icon {
                width: 20px;
                height: 20px;
              }
            }
            .text {
              width: calc(100% - 60px);
              padding: 2px 0;
              .textTop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                .left{
                  display: flex;
                  align-items: center;
                  .number {
                    font-size: 36rpx;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: bold;
                    color: #150002;
                    line-height: 40rpx;
                  }
                  .desc{
                    display: flex;
                    align-items: center;
                    margin-left: 8px;
                    font-size: 14px;
                    color: #FF7043;
                    .success{
                      width: 20px;
                      height: 20px;
                      margin-right: 4px;
                    }
                  }
                }
                .right{
                  flex: 1;
                  display: flex;
                  justify-content: flex-end;
                  align-items: center;
                  .comparePlan{
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #a69e9f;
                    line-height: 36rpx;
                    white-space: nowrap;
                  }
                  .box2{
                    display: flex;
                    align-items: center;
                    .text{
                      font-size: 14px;
                      font-family: DINAlternate-Bold, DINAlternate;
                      color: #150002;
                      font-weight: bold;

                      line-height: 40rpx;
                    }
                    .addIcon {
                      width: 16px;
                      height: 16px;
                      margin-right: 2px;
                    }
                  }
                }
              }

              .progressPlan{
                width: 100%;
                height: 8px;
                border-radius: 5px;
                background: #fff;
                margin-top: 8px;
                position: relative;
                overflow: hidden;
                .trans{
                  height: 8px;
                  position: absolute;
                  left: 0;top: 0;
                  border-top-right-radius: 4px;
                  border-bottom-right-radius: 4px;
                  background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_orange.png")no-repeat 100% 100%;
                }
                .transYear{
                  height: 8px;
                  position: absolute;
                  left: 0;top: 0;
                  border-top-right-radius: 4px;
                  border-bottom-right-radius: 4px;
                  background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_blue.png")no-repeat 100% 100%;
                }
                //.img{
                //  width: 100%;
                //  height: 100%;
                //  position: absolute;
                //  top: 0;
                //  left: 0;
                //  z-index:1;
                //}
                //.pro{
                //  height: 100%;
                //  position: absolute;
                //  top: 0;right: 0;
                //  background: #fff;
                //  z-index:2;
                //}

              }
            }
          }
          .bottom {
            display: flex;
            margin-top: 16px;
            padding-left: 48px;
            .success {
              .text {
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #786b6c;
                line-height: 40rpx;
                margin-bottom: 2px;
                .unit {
                  font-size: 28rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #a69e9f;
                  line-height: 40rpx;
                  margin-left: 2px;
                }
              }
              .money {
                font-size: 28rpx;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: 600;
                color: #160002;
                line-height: 40rpx;
              }
            }
          }
        }
      }
      .propOfReven{
        width: 100%;
        margin-top: 28px;
        .title {
          font-size: 32rpx;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #160002;
          line-height: 44rpx;
          text-align: left;
          margin-bottom: 12px;
        }
        .tabs {
          width: 100%;
          height: 38px;
          box-sizing: border-box;
          padding: 4px;
          background: #f2f1f1;
          border-radius: 4px;
          display: flex;
          justify-content: space-between;
          .tabItem {
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #786b6c;
            padding: 5px 26px;
            line-height: 40rpx;
          }
          .active {
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #160002;
            line-height: 40rpx;
            background: #fff;
            border-radius: 4px;
          }
        }
        .chart {
          width: 100%;
          margin-top: 12px;
          .operation-c-list{
            width:100%;
            margin-bottom: 12px;
            .top{
              width: 100%;
              margin-bottom: 2px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .left{
                display: flex;
                justify-content: space-between;
                .icon{
                  width: 20px;
                  height: 20px;
                  position: relative;
                  margin-right: 8px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  image{
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;left: 0;
                  }
                  text{
                    z-index:99;
                    font-size: 24rpx;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: bold;
                    color: #FFFFFF;
                  }
                }
                .name{
                  font-size: 32rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #160002;
                  line-height: 40rpx;
                }
              }
              .price{
                font-size: 32rpx;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: 600;
                color: #160002;
                line-height: 40rpx;
              }
            }
            .bottom{
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .bar{
                width: 70%;
                height: 8px;
                background: #F5F2F2;
                border-radius: 5px;
                position: relative;
                .progress{
                  height: 100%;
                  background: #1777FF;
                  border-radius: 5px;
                  opacity: 0.9;
                  position: absolute;
                  top: 0;left: 0;
                }
              }
              .number{
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #786B6C;
                line-height: 40rpx;
              }
            }
          }
        }
      }
    }
  }

  .menu {
    width: 100vw;
    position: relative;
    box-sizing: border-box;
    padding-top: 16px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    overflow: hidden;
    background: #fff;
    top: -16px;
    z-index: 1;

    .topBg {
      position: absolute;
      width: 100vw;
      height: 104px;
      top: 0;
      left: 0;
      z-index: 2;
    }
    .content {
      padding: 0 16px;
      margin: 0 auto;
      z-index: 3;
      .tabType{
        width: 100%;
        display: flex;
        justify-content: space-between;
        .item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .big {
            width: 48px;
            height: 48px;
            background: #ffffff;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 8px;
            z-index: 10;
            .img {
              width: 30px;
              height: 30px;
            }
          }
          .name {
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #160002;
            line-height: 32rpx;
          }
        }
      }
      .detailType{
        width: 100%;
        margin-top: 24px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        .item {
          width: calc((100% - 8px) / 2);
          padding: 12px;
          box-sizing: border-box;
          background: #f9f6f6;
          margin-bottom: 8px;
          border-radius: 8px;
          .box {
            width: 100%;
            height: 100%;
            position: relative;
            .imgIcon {
              width: 30px;
              height: 30px;
              position: absolute;
              top: 0;
              right: 0;
            }
            .otherBox{
              display: flex;
              justify-content: space-between;
              .other {
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #a69e9f;
                line-height: 36rpx;
                margin-left: 2px;
              }
              .month{
                font-size: 24rpx;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #160002;
                line-height: 40rpx;
              }
            }

            .title {
              font-size: 28rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #786b6c;
              line-height: 40rpx;
              .unit {
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #a69e9f;
                line-height: 40rpx;
                margin-left: 2px;
              }
            }
            .money {
              font-size: 32rpx;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #160002;
              line-height: 40rpx;
              margin-top: 2px;
              margin-bottom: 12px;
            }
            .active {
              display: flex;
              align-items: center;
              .addIcon {
                width: 16px;
                height: 16px;
                margin-right: 2px;
              }
              .add {
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #fa5151;
                line-height: 32rpx;
              }
              .yesterday {
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #a69e9f;
                line-height: 36rpx;
                margin-left: 2px;
              }
            }
          }
        }
        .item:nth-of-type(1),
        .item:nth-of-type(3) {
          margin-right: 8px;
        }
        .item:nth-of-type(3),
        .item:nth-of-type(4) {
          margin-bottom: 0px;
        }
      }
      .propOfReven{
        width: 100%;
        margin-top: 28px;
        .title {
          font-size: 32rpx;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #160002;
          line-height: 44rpx;
          text-align: left;
          margin-bottom: 12px;
        }
        .tabs {
          width: 100%;
          height: 38px;
          box-sizing: border-box;
          padding: 4px;
          background: #f2f1f1;
          border-radius: 4px;
          display: flex;
          justify-content: space-between;
          .tabItem {
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #786b6c;
            padding: 5px 26px;
            line-height: 40rpx;
          }
          .active {
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #160002;
            line-height: 40rpx;
            background: #fff;
            border-radius: 4px;
          }
        }
        .chart {
          width: 100%;
          margin-top: 12px;
          .operation-c-list{
            width:100%;
            margin-bottom: 12px;
            .top{
              width: 100%;
              margin-bottom: 2px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .left{
                display: flex;
                justify-content: space-between;
                .icon{
                  width: 20px;
                  height: 20px;
                  position: relative;
                  margin-right: 8px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  image{
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;left: 0;
                  }
                  text{
                    z-index:99;
                    font-size: 24rpx;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: bold;
                    color: #FFFFFF;
                  }
                }
                .name{
                  font-size: 32rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #160002;
                  line-height: 40rpx;
                }
              }
              .price{
                font-size: 32rpx;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: 600;
                color: #160002;
                line-height: 40rpx;
              }
            }
            .bottom{
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .bar{
                width: 70%;
                height: 8px;
                background: #F5F2F2;
                border-radius: 5px;
                position: relative;
                .progress{
                  height: 100%;
                  background: #1777FF;
                  border-radius: 5px;
                  opacity: 0.9;
                  position: absolute;
                  top: 0;left: 0;
                }
              }
              .number{
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #786B6C;
                line-height: 40rpx;
              }
            }
          }
        }
      }
      .thisMonth,.thisYear{
        width: 100%;
        margin-top: 28px;
        padding-bottom: 24px;
        .titleTop{
          display: flex;
          align-items: center;
          position: relative;
          .title {
            font-size: 32rpx;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #160002;
            line-height: 44rpx;
          }
          .question{
            width: 16px;
            height: 16px;
            margin-left: 4px;
            display: flex;
            align-items: center;
            image{
              width: 100%;
              height: 100%;
            }
          }
          .titleTopNotice{
            position: absolute;
            padding: 12px;
            left:35%;
            width: 50vw;
            background: #FFFFFF;
            box-shadow: 0 10px 10px 0 rgba(22,0,2,0.1);
          }
          .meng{
            width: 100vw;
            height: 100vh;
            position: fixed;
            top: 0;left: 0;
          }
        }
        .box {
          width: 100%;
          padding: 12px 16px;
          box-sizing: border-box;
          border-radius: 8px;
          background: #f5f2f2;
          margin-top: 12px;
          .top {
            width: 100%;
            display: flex;
            .big {
              width: 40px;
              height: 40px;
              background: #ffffff;
              border-radius: 8px;
              border: 1px solid #ebebeb;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-right: 8px;
              .icon {
                width: 20px;
                height: 20px;
              }
            }
            .text {
              width: calc(100% - 60px);
              padding: 2px 0;
              .textTop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                .left{
                  display: flex;
                  align-items: center;
                  .number {
                    font-size: 36rpx;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: bold;
                    color: #150002;
                    line-height: 40rpx;
                  }
                  .desc{
                    display: flex;
                    align-items: center;
                    margin-left: 8px;
                    font-size: 14px;
                    color: #FF7043;
                    .success{
                      width: 20px;
                      height: 20px;
                      margin-right: 4px;
                    }
                  }
                }
                .right{
                  flex: 1;
                  display: flex;
                  justify-content: flex-end;
                  align-items: center;
                  .comparePlan{
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #a69e9f;
                    line-height: 36rpx;
                    white-space: nowrap;
                  }
                  .box2{
                    display: flex;
                    align-items: center;
                    .text{
                      font-size: 14px;
                      font-family: DINAlternate-Bold, DINAlternate;
                      color: #150002;
                      font-weight: bold;

                      line-height: 40rpx;
                    }
                    .addIcon {
                      width: 16px;
                      height: 16px;
                      margin-right: 2px;
                    }
                  }
                }
              }

              .progressPlan{
                width: 100%;
                height: 8px;
                border-radius: 5px;
                background: #fff;
                margin-top: 8px;
                position: relative;
                overflow: hidden;
                .trans{
                  height: 8px;
                  position: absolute;
                  left: 0;top: 0;
                  border-top-right-radius: 4px;
                  border-bottom-right-radius: 4px;
                  background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_orange.png")no-repeat 100% 100%;
                }
                .transYear{
                  height: 8px;
                  position: absolute;
                  left: 0;top: 0;
                  border-top-right-radius: 4px;
                  border-bottom-right-radius: 4px;
                  background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_blue.png")no-repeat 100% 100%;
                }
                //.img{
                //  width: 100%;
                //  height: 100%;
                //  position: absolute;
                //  top: 0;
                //  left: 0;
                //  z-index:1;
                //}
                //.pro{
                //  height: 100%;
                //  position: absolute;
                //  top: 0;right: 0;
                //  background: #fff;
                //  z-index:2;
                //}

              }
            }
          }
          .bottom {
            display: flex;
            margin-top: 16px;
            padding-left: 48px;
            .success {
              .text {
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #786b6c;
                line-height: 40rpx;
                margin-bottom: 2px;
                .unit {
                  font-size: 28rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #a69e9f;
                  line-height: 40rpx;
                  margin-left: 2px;
                }
              }
              .money {
                font-size: 28rpx;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: 600;
                color: #160002;
                line-height: 40rpx;
              }
            }
          }
        }
      }
    }
  }
  .notice{
    position: fixed;
    bottom: 120px;
    left: 5%;
    width: 90%;
    padding: 10px 10px;
    box-sizing: border-box;
    border-radius: 10px;
    z-index:999999;
    background: #2c71f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      align-items: center;
      .icon {
        width: 40px;
        height: 40px;
        margin-right: 10px;
      }
      .text {
        margin-left: 8px;
        .name {
          font-size: 14px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffffff;
          line-height: 20px;
        }
        .desc {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #B5CDFC;
          line-height: 18px;
        }
      }
    }
    .right {
      border: 1px solid #fff;
      padding: 2px 6px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      border-radius: 11px;
      color: #ffffff;
    }
  }
  .popupIndex {
    position: fixed;
    top: 30%;
    left: 10%;
    width: 80%;
    height: 250px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    padding: 0 16px;
    box-sizing: border-box;
    .popupTop{
      box-sizing: border-box;
      height: 60px;
      font-size: 15px;
      font-weight: 600;
      color: #333;
      text-align: left;
      width: 100%;
      padding: 16px 0;
      background-color: #fff;
    }
    .bodyList{
      width: 100%;
      height: 190px;
      box-sizing: border-box;
      .item{
        width: 100%;
        border-bottom: 1px solid #efefef;
        padding: 5px 0;
        display: flex;
        align-items: center;
        .index{
          height: 16px;
          color: #E1B582;
          border: 1px solid #E1B582;
          border-radius: 4px;
          padding: 0 6px;
          margin-right: 6px;
          font-size: 12px;
          line-height: 16px;
        }
      }
    }
  }
}

</style>