<template>
  <div>
    <view class="page-body" v-if="showPage">
      <AnhHead :today="today" :headMsg="headMsg" :lastDay="lastDay" :groupType="theRequest && theRequest.GroupType"
        :provinceCode="theRequest && theRequest.ProvinceCode" @bindDateChange="bindDateChange" :isup="isup"
        :nowDay="nowDay" :selectDate="theRequest && theRequest.time" @toggle="toggleCard"></AnhHead>
      <!--营收占比的上面组件	-->
      <view style="background-color: #fff">
        <!--安徽省 昨日营收占比 -->
        <div v-if="theRequest && theRequest.GroupType != 1010">
          <div class="uni-inline-item modle-title">
            <image :src="theRequest.ProvinceCode == 530000
              ? '/static/images/revenue/type-operation530000.svg'
              : '/static/images/revenue/type-operation.png'
              " mode="aspectFit"></image>
            <text class="strong-text">营收占比</text>
          </div>
          <view class="box-operation">
            <div class="operation-tab-box">
              <div class="operation-tab-unit" @tap="selectTab('nowTab', 1)" v-if="theRequest.ProvinceCode == 340000"
                :class="{ active: nowTab == 1 }">
                经营模式
              </div>
              <div class="operation-tab-unit" @tap="selectTab('nowTab', 2)" :class="{ active: nowTab == 2 }">
                经营业态
              </div>
              <div class="operation-tab-unit" @tap="selectTab('nowTab', 3)"
                v-if="areaProgress && areaProgress.length > 0" :class="{ active: nowTab == 3 }">
                区域营收
              </div>
              <div class="operation-tab-unit" @tap="selectTab('nowTab', 4)" v-if="
                theRequest.ProvinceCode == 340000 &&
                theRequest.GroupType == 1000
              " :class="{ active: nowTab == 4 }">
                车流分析
              </div>
            </div>
            <div class="operation-content-box">
              <div v-show="nowTab == 1" v-if="
                modelProgress &&
                modelProgress.length > 0 &&
                theRequest.ProvinceCode == 340000
              ">
                <canvas canvas-id="modelCont" id="modelCont" class="operation-content"
                  @touchstart="touchPie($event, 'modelCont')"></canvas>
                <div>
                  <div class="operation-c-list" v-for="(item, o) in modelProgress" :key="o">
                    <div class="operation-cl-unit">
                      <text>{{ item.name }} {{ item.bili }}%</text>
                      <text>{{ item.data }}元</text>
                    </div>
                    <div class="progress">
                      <div class="bgO" :style="{ width: item.bili + '%' }"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-show="nowTab == 2" v-if="regionProgress && regionProgress.length > 0">
                <canvas canvas-id="businessCont" id="businessCont" class="operation-content"
                  @touchstart="touchPie($event, 'businessCont')"></canvas>
                <div>
                  <div class="operation-c-list" v-for="(item, o) in regionProgress" :key="o">
                    <div class="operation-cl-unit">
                      <text>{{ item.name }} {{ item.bili }}%</text>
                      <text>{{ item.data }}元</text>
                    </div>
                    <div class="progress">
                      <div class="bgO" :style="{ width: item.bili + '%' }"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-show="nowTab == 3" v-if="areaProgress && areaProgress.length > 0">
                <canvas canvas-id="areaCont" id="areaCont" class="operation-content"
                  @touchstart="touchPie($event, 'areaCont')"></canvas>
                <div>
                  <div class="operation-c-list" v-for="(item, o) in areaProgress" :key="o">
                    <div class="operation-cl-unit">
                      <text>{{ item.name }} {{ item.bili }}%</text>
                      <text>{{ item.data }}元</text>
                    </div>
                    <div class="progress">
                      <div class="bgO" :style="{ width: item.bili + '%' }"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-show="nowTab == 4" v-if="bayonetProgress && bayonetProgress.length > 0">
                <div>
                  <div class="operation-c-list" v-for="(item, o) in bayonetProgress" :key="o">
                    <div class="operation-cl-unit">
                      <text>{{ item.name }}</text>
                    </div>
                    <div style="padding: 10rpx" class="bayonet-c-list" v-for="(child, o) in item.list" :key="o">
                      <div class="operation-cl-unit1">
                        <text class="server">{{ child.name }}</text>
                        <text class="type" style="color: #868686">入区流量/断面流量</text>
                        <text class="carType" style="color: #868686">大/中/小型车</text>
                      </div>
                      <ul class="bayonet-cell-area">
                        <li v-for="(childItem, o) in child.list" :key="o">
                          <text class="server">{{ childItem.name }}区:<text style="color: #ef884f">{{ childItem.bili
                          }}%</text></text>
                          <text class="type">{{ childItem.data }}/{{ childItem.flow }}</text>
                          <text class="carType">{{ childItem.LargeVehicle_Count }}/{{
                            childItem.MediumVehicle_Count
                            }}/{{ childItem.MinVehicle_Count }}</text>
                        </li>
                      </ul>
                      <!-- <div class="progress">
												<div class="bgO" :style="{'width':item.bili+'%'}"></div>
											</div> -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </view>
        </div>

        <!-- 昨日日结上传 -->
        <div class="uni-inline-item modle-title jc-between" v-if="regionList.length > 0">
          <view class="uni-inline-item">
            <image src="/static/images/revenue/yestoday-region.png" mode="aspectFit"></image>
            <text class="strong-text">日结上传</text>
          </view>
          <view style="font-size: 26rpx">
            门店上传&nbsp;&nbsp;
            <span class="upload-count">{{ headMsg.uploadState }}</span>
          </view>
        </div>
        <template v-if="theRequest && theRequest.GroupType == 1020 && regionList.length">
          <div v-for="(item, i) in regionList[0].child" :key="i" class="region-cell" @tap="toDetail(item)">
            <div class="region-cell-unit">
              <text>{{ item.serverpart_Name }}</text>
              <div class="ct01">
                <text class="strong-text">{{
                  $util.fmoney(item.cashpay, 2)
                }}</text>
                <text>元</text>
              </div>
            </div>
            <div class="region-cell-unit">
              <text>上传率</text>
              <div class="ct01">
                <text class="strong-text">{{
                  item.totalcount > item.uploadcount
                    ? $util.fmoney(
                      (item.uploadcount / item.totalcount) * 100,
                      2
                    )
                    : 100
                }}</text>
                <text>%</text>
              </div>
            </div>
            <div class="region-cell-unit" :class="{
              'ct-red': item.uploadcount != item.totalcount,
              'weisc-ico': item.uploadcount != item.totalcount,
            }">
              {{ item.uploadcount + "/" + item.totalcount }}
            </div>
            <div class="region-cell-image">
              <text class="uni-icon-arrowright uni-icon"></text>
            </div>
          </div>
        </template>
        <template v-else-if="theRequest && theRequest.GroupType == 1000">
          <!-- <div class="region-title" :class="{'active':regionShow1}">省内区域</div> -->
          <div v-show="regionShow1">
            <block v-for="(item, i) in regionList" :key="i">
              <div class="region-cell" @tap="toggleRegion(item)">
                <div class="region-cell-unit">
                  <text>{{ item.name }}</text>
                  <div class="ct01">
                    <text class="strong-text">{{
                      $util.fmoney(item.cashpay, 2)
                    }}</text>
                    <text>元</text>
                  </div>
                </div>
                <div class="region-cell-unit">
                  <text>上传率</text>
                  <div class="ct01">
                    <text class="strong-text">{{
                      item.totalcount > item.uploadcount
                        ? $util.fmoney(
                          (item.uploadcount / item.totalcount) * 100,
                          2
                        )
                        : "100.00"
                    }}</text>
                    <text>%</text>
                  </div>
                </div>
                <div class="region-cell-unit" :class="{ 'ct-red': item.uploadcount != item.totalcount }">
                  {{ item.uploadcount + "/" + item.totalcount }}
                </div>
                <div class="region-cell-image">
                  <text class="uni-icon-arrowright uni-icon" :class="{ active: item.show }"></text>
                </div>
              </div>
              <ul class="region-cell-area" v-show="item.show">
                <li v-for="(child, index) in item.child" :class="{ visited: child.visited }" :key="index"
                  @tap="toDetail(child)">
                  <div>{{ child.serverpart_Name }}</div>
                  <div>{{ $util.fmoney(child.cashpay, 2) }}<text>元</text></div>
                  <div :class="{ 'ct-red': child.uploadcount != child.totalcount }">
                    {{ child.uploadcount + "/" + child.totalcount }}
                  </div>
                </li>
              </ul>
            </block>
          </div>
        </template>
        <template v-else>
          <shopCell v-for="(item, i) in regionList" :key="i" :item="item" @toggleShow="toggleShow" :i="i" />
        </template>
      </view>
      <template
        v-if="theRequest && theRequest.ProvinceCode == '620000' || theRequest.ProvinceCode == '530000' || theRequest.ProvinceCode == '734100'">
        <div class="uni-inline-item modle-title">
          <image src="/static/images/revenue/product-ranking.png" mode="aspectFit"></image>
          <text class="strong-text">商品销售排行</text>
        </div>
        <RankContent :wechatPushSalesList="wechatPushSalesList" v-if="!isLoading"></RankContent>
      </template>
    </view>
    <div v-if="!showPage && !isLoading">
      <noFound :nodata="!showPage && !isLoading" :text="'您暂无' + lastDay + '营收数据'" />
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import uCharts from "@/components/u-charts.js";
import shopCell from "./components/listUnit.vue";
import AnhHead from "./components/anhHead.vue";
import RankContent from "./components/RankContent.vue";
import anhuiYestodayRevenueData from "./components/anhuiYestodayRevenueData.js";
var rincanvas = {};

export default {
  data() {
    const lastDay = this.$util.cutDate(new Date(), "YYYY-MM-DD", -1);

    const nowDay = this.$util.cutDate(new Date(), "MM月DD日");

    return {
      showPage: false,
      opacity: 0, // 背景颜色透明度
      customBarH: this.CustomBar,
      statusBarH: this.StatusBar,
      isLoading: true,
      theRequest: null,
      sevenDate: null,
      lastDay: lastDay, // 该页面的最近有效日期
      nowDay: nowDay,
      headMsg: null,
      today: null, // 今日数据
      regionList: null,
      nowTab: 1,
      regionShow1: true,
      regionProgress: null,
      tradeType: null,
      areaProgress: null,
      bayonetProgress: null,
      modelProgress: null,
      isup: true,
      wechatPushSalesList: null, // 甘肃单品排行数据
    };
  },
  computed: {
    ...mapState({
      PushAuthority: (state) => state.userData.PushAuthority,
      ProvinceCode: (state) => state.userData.ProvinceCode,
    }),
    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;
    },
  },
  components: {
    shopCell,
    AnhHead,
    RankContent,
  },
  methods: {
    toggleCard(isup) {
      this.isup = !isup;
      this.$forceUpdate();
    },
    bindDateChange(e) {
      // 切换日期 加载选中日期的营收数据
      // let nowDate = this.theRequest.time
      let selectT = new Date(e.detail.value);
      if (selectT <= new Date(this.lastDay)) {
        this.theRequest.time = e.detail.value;
        this.theRequest.month = this.$util.cutDate(e.detail.value, "YYYYMM");
        this.sevenDate = [
          this.$util.cutDate(selectT, "MM.DD", -13),
          this.$util.cutDate(selectT, "MM.DD", -7),
        ];
        uni.showLoading({
          title: "正在加载...",
          mask: true,
        });
        this.initData();
        // this.getTender()
        this.todayAmount();
        this.$forceUpdate();
      }
    },
    toDetail(item, provinceId) {
      // 如果当前页面至存在一个初始化的省份编码 则不需要传入参数provinceId
      let date = this.theRequest.time;
      let pcode = provinceId || this.theRequest.ProvinceCode;

      let severpartIndexPath =
        "/pages/everdayRenven/AnhuiServerpart?ServerpartIds=" +
        item.serverpart_Id +
        "&time=" +
        date +
        "&ProvinceCode=" +
        pcode;
      let serverpartUploadPath =
        "/pages/everdayRenven/detail?id=" +
        item.serverpart_Id +
        "&time=" +
        date +
        "&provinceId=" +
        pcode;

      // 是否有权限进入服务区营收分析页面
      let canToSeverpartIndex = !provinceId
        ? this.hasSeverpartIndexAuthority
        : this.PushAuthority.some((n) => {
          return n.ProvinceCode == provinceId && n.ShopAnalysisType == 1;
        });

      this.$util.toNextRoute(
        "navigateTo",
        canToSeverpartIndex ? severpartIndexPath : serverpartUploadPath
      );

      item.visited = true;
      this.$forceUpdate();
    },
    selectTab(name, index) {
      this[name] = index;
    },
    toggleRegion(item) {
      item.show = !item.show ? true : false;
      this.$forceUpdate();
    },
    touchPie(e, id) {
      rincanvas[id].showToolTip(e, {
        format: function (item) {
          return item.name + ":" + item.data;
        },
      });
    },
    todayAmount() {
      let _this = this;
      let theRequest = this.theRequest;
      this.$request
        .$get("getCurRevenue", {
          pushProvinceCode: theRequest.ProvinceCode,
          serverPartId:
            theRequest.GroupType == 1000 ? "" : theRequest.ServerpartIds,
        })
        .then((res) => {
          if (res.ResultCode != 100) return;

          let avrticket =
            res.Data.TOTALTICKET != 0 && res.Data.TOTALPRICE != 0
              ? res.Data.TOTALPRICE / res.Data.TOTALTICKET
              : 0;
          _this.today = {
            timeMoney: this.$util.fmoney(res.Data.TOTALPRICE, 2),
            totalTicketCount: res.Data.TOTALTICKET,
            avrticketCount: this.$util.fmoney(avrticket, 2),
          };
          _this.$forceUpdate();
        });
    },

    showPie(obj) {
      let data = {
        series: [],
      };
      const ctx = uni.createCanvasContext(obj.id, this);
      data.series = data.series.concat(obj.data);
      rincanvas[obj.id] = new uCharts({
        // 小程序图表工具
        // $this: this,
        // canvasId: obj.id,
        context: ctx,
        color: obj.colors,
        type: "ring",
        fontSize: 12,
        padding: [15, 15, 25, 15],
        legend: {
          show: false,
          padding: 5,
          lineHeight: 11,
          margin: 0,
        },
        background: "#FFFFFF",
        pixelRatio: 1,
        series: data.series,
        animation: false,
        width: uni.upx2px(686),
        height: uni.upx2px(510),
        dataLabel: true,
        extra: {
          ring: {
            ringWidth: 40,
            labelWidth: 16,
            border: true,
            borderWidth: 1,
            borderColor: "#fff",
          },
        },
      });
    },
    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;
        });
    },
    getListDetail(data) {
      let arr = [];
      let keyJson = {
        SHOWMORE_SIGN: {
          1: "【长款】",
          2: "【异常长款】",
        }, // 长款
        SHOWLESS_SIGN: {
          1: "【短款】",
          2: "【异常短款】",
        }, // 短款
        SHOWABNORMAL_SIGN: {
          1: "【异常校验】",
        }, // 异常日结
        SHOWSCAN_SIGN: {
          1: "【扫】",
        }, // 扫码上传
        SHOWSSUPPLY_SIGN: {
          1: "【补】",
        }, // 账期补录
        SHOWCHECK_SIGN: {
          1: "【稽核检查】",
        }, // 稽核检查
        INTERFACE_SIGN: {
          1: "【接口传输】",
        }, // 接口传输
      };
      var keyCode = [
        "SHOWABNORMAL_SIGN",
        "SHOWCHECK_SIGN",
        "SHOWMORE_SIGN",
        "SHOWLESS_SIGN",
        "SHOWSCAN_SIGN",
        "SHOWSSUPPLY_SIGN",
        "INTERFACE_SIGN",
      ];
      keyCode.map((n) => {
        if (keyJson[n][data[n]]) arr.push(keyJson[n][data[n]]);
      });
      return arr;
    },
    toggleShow(i) {
      let item = this.regionList[i];
      item.show = !item.show;
      this.$forceUpdate();
    },
    defaultMsg() {
      let option = null;
      let _this = this;
      if (this.PushAuthority && this.PushAuthority.length > 1) {
        option = this.PushAuthority.find(
          (n) => n.ProvinceCode === _this.ProvinceCode
        );
      } else {
        option = this.PushAuthority[0];
      }
      return {
        ...option,
      };
    },
    async initData() {
      // 初始化营收数据
      let _this = this;
      console.log("theRequest", this.theRequest);
      const [
        reginList,
        totalData,
        busniessTypePie,
        busniessTradePie,
        busniessAreaPie,
        bayonetPie,
      ] = await anhuiYestodayRevenueData.getData(this.theRequest); // 获取实时数据

      if (this.theRequest.GroupType !== 1010) {
        this.regionList = reginList; // 营收上传列表 reginListModel[]
      }
      // 组合及格式化 头部卡片总营收数据。
      totalData.tickave =
        totalData.ticketCount > 0
          ? this.$util.fmoney(totalData.cashPay / totalData.ticketCount, 2)
          : 0;
      totalData.countave =
        totalData.totalCount > 0
          ? this.$util.fmoney(totalData.cashPay / totalData.totalCount, 2)
          : 0;

      totalData.totalMoneyShow = this.$util.fmoney(totalData.cashPay); // 营收总数据格式化
      totalData.dayOfShow = this.$util.cutDate(
        this.theRequest.time,
        "MM月DD日"
      ); // 当前日期
      totalData.budgetamoutShow = totalData.budgetAmount
        ? _this.$util.fmoney(totalData.budgetAmount)
        : 0.0; // 预算总营收

      busniessTypePie.forEach((n, i) => {
        if (n.name === "自营") {
          // 预算和实际差额
          totalData.diffBudgetTotal = Math.abs(totalData.budgetAmount - n.data);
          // 预算和实际增长额比例
          totalData.diffBili =
            totalData.budgetAmount > 0
              ? this.$util.fmoney(
                (totalData.diffBudgetTotal / totalData.budgetAmount) * 100,
                2
              )
              : "100";
        }
      });
      this.headMsg = totalData;
      console.log(this.headMsg);
      // 饼图分析及数据条形分析
      const [progressList, pieList] = this.getProgressData(
        busniessTypePie,
        totalData.cashPay
      );
      this.modelProgress = progressList;
      // 经营类型分析
      var colors1 = ["#FFAC37", "#6B75B8"];
      // console.log(pieList)
      this.showPie({
        id: "modelCont",
        data: pieList,
        colors: colors1,
      });
      // 经营业态

      // 饼图分析及数据条形分析
      const [tprogressList, tpieList] = this.getProgressData(
        busniessTradePie,
        totalData.cashPay
      );

      this.regionProgress = tprogressList;
      console.log("this.regionProgress", this.regionProgress);
      console.log("tpieList", tpieList);
      // 经营类型分析
      var colors2 = ["#5E67B4", "#4E5699", "#75B7AD", "#AFB7E6"];
      this.showPie({
        id: "businessCont",
        data: tpieList,
        colors: colors2,
      });

      // 饼图分析及数据条形分析
      const [aprogressList, apieList] = this.getProgressData(
        busniessAreaPie,
        totalData.cashPay
      );
      this.areaProgress = aprogressList;
      console.log("this.areaProgress", this.areaProgress);
      // 区域营收分析
      var colors3 = [
        "#FFAC37",
        "#d8ece9",
        "#f7f5f6",
        "#b2b7e3",
        "#F4B27A",
        "#F3B1C9",
        "#e0e3f7",
        "#FFE886",
        "#f7f5f6",
      ];
      this.showPie({
        id: "areaCont",
        data: apieList,
        colors: colors3,
      });

      // 安徽省本级显示的内容
      if (
        this.theRequest.GroupType == 1000 &&
        this.theRequest.ProvinceCode == 340000
      ) {
        // 显示片区车流量数据分析
        const [bayonetList] = this.getBayonetData(bayonetPie);
        this.bayonetProgress = bayonetList;
        console.log("this.bayonetProgress", this.bayonetProgress);
      }

      if (reginList.length) {
        this.showPage = true;
      }
      this.isLoading = false;
      uni.hideLoading();
    },
    getProgressData(data, total) {
      var _data1 = [];
      var _data2 = [];
      let _this = this;
      data.forEach((n, i) => {
        _data1.push({
          ...n,
          textColor: "#999",
          formatter: function (arg) {
            if (typeof arg === "number") {
              return [n.name, (arg * 100).toFixed(2) + "%"];
            } else {
              return [arg.name, (arg._proportion_ * 100).toFixed(2) + "%"];
            }
          },
        });

        _data2.push({
          name: n.name,
          num: n.data,
          data: _this.$util.fmoney(n.data, 2), //+Number(data2[n[0]])
          bili: _this.$util.fmoney((n.data / total) * 100, 2),
        });
      });
      _data1.sort(function (a, b) {
        return b.data - a.data;
      });
      _data2.sort(function (a, b) {
        return b.num - a.num;
      });
      return [_data2, _data1];
    },
    getBayonetData(data) {
      var _data1 = [];
      let _this = this;

      data.forEach((n, i) => {
        var childData = [];
        n.spList.forEach((m, i) => {
          // 获取服务区各个方位的入区信息
          var _list = [];
          m.regionList.forEach((o, i) => {
            _list.push({
              name: o.name,
              data: o.Vehicle_Count,
              flow: o.SectionFlow_Count,
              bili:
                o.SectionFlow_Count == 0
                  ? 100
                  : _this.$util.fmoney(
                    (o.Vehicle_Count / o.SectionFlow_Count) * 100,
                    2
                  ),
              MinVehicle_Count: o.MinVehicle_Count,
              MediumVehicle_Count: o.MediumVehicle_Count,
              LargeVehicle_Count: o.LargeVehicle_Count,
            });
          });
          _list.sort(function (a, b) {
            return b.bili - a.bili;
          });

          childData.push({
            name: m.name,
            data: m.Vehicle_Count, //+Number(data2[n[0]])
            flow: m.SectionFlow_Count,
            bili:
              m.SectionFlow_Count == 0
                ? 0
                : _this.$util.fmoney(
                  (m.Vehicle_Count / m.SectionFlow_Count) * 100,
                  2
                ),
            list: _list,
          });
        });
        childData.sort(function (a, b) {
          return b.bili - a.bili;
        });

        _data1.push({
          name: n.name,
          index: n.index,
          list: childData,
        });
      });
      _data1.sort(function (a, b) {
        return a.index - b.index;
      });

      return [_data1];
    },
    async getRankContent() {
      // 甘肃需要单品排行显示
      const { ProvinceCode, time } = this.theRequest;

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

      console.log('getRankContentgetRankContentgetRankContentgetRankContent', 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();
    },
  },

  onUnload() {
    this.$util.addUserBehaviorNew();
  },
  onPageScroll(options) {
    this.opacity = (options.scrollTop - 30) / 68;
  },
  onLoad(option) {
    console.log("optio1n", option);
    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");

      this.initData();
    } else {
      // 默认

      if (this.PushAuthority.length > 0) {
        this.theRequest = this.defaultMsg() || {};
        this.theRequest.time = this.lastDay;
        this.theRequest.month = this.$util.cutDate(this.lastDay, "YYYYMM");
        this.initData();
      } else {
        uni.hideLoading();
        this.theRequest = null;
        this.isLoading = false;
        this.showPage = false;
        this.opacity = 1;
      }
    }
    this.nowTab = this.theRequest.ProvinceCode == 340000 ? 1 : 2;
    console.log("this.nowTab", this.nowTab);
    this.todayAmount();
    if (this.theRequest.GroupType == 1010) {
      this.getDetail(this.theRequest);
    }
    console.log('this.theRequestthis.theRequestthis.theRequest', this.theRequest);

    // 若省份为甘肃，则加载甘肃单品排行 
    // 再加个云南、建工  要字符串 
    if (this.theRequest.ProvinceCode == "620000" || this.theRequest.ProvinceCode == "530000" || this.theRequest.ProvinceCode == "734100") {
      this.getRankContent();
    }
  },
};
</script>

<style scoped>
.page-body {
  background: #fff;
  position: relative;
  padding-bottom: 80rpx;
}

.uni-flex-column {
  flex-direction: column;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.uni-icon-arrowright {
  font-size: 32rpx;
  color: #5a5a5a;
}

.uni-icon-arrowright.active {
  transform: rotate(90deg);
}

.ct01 {
  color: #383838;
}

.strong-text {
  font-weight: 700;
}

.ct-red {
  color: #d7565a !important;
}

.new-content {
  background: url("/static/images/revenue/banner.png") no-repeat bottom left;
  height: 383rpx;
  background-size: 100%;
  color: #fff;
  box-sizing: border-box;
  padding-top: 20rpx;
}

.new-content .text-title {
  flex: 1;
  text-align: center;
  font-weight: 600;
}

.uni-icon-arrowleft {
  font-size: 38rpx;
  padding: 8rpx 16rpx;
}

.page-title {
  display: flex;
  align-items: center;
  padding-right: 70rpx;
  width: 100%;

  color: #fff;
  background-color: #3b64a3;
}

.page-title .uni-icon-arrowleft,
.page-title .uni-icon-arrowleft:before {
  color: #fff;
}

.new-content .header-card {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center right;
  padding: 0 30rpx;
  color: #bed4f4;
  padding-top: 8rpx;
  position: relative;
}

.head-log {
  position: absolute;
  right: 12rpx;
  top: 0rpx;
  width: 376rpx;
  height: 198rpx;
}

.new-content .top-number {
  padding-top: 28rpx;
  font-size: 76rpx;
  padding-bottom: 16rpx;
  color: #fff;
  padding-left: 4rpx;
  font-family: "Bahnschrift Regular";
  letter-spacing: 2rpx;
  line-height: 1.1;
  transition: all 1s;
}

.new-content .header-today-info {
  align-items: baseline;
}

.new-content .header-today-info text {
  font-family: "Bahnschrift Regular";
  font-size: 30rpx;
}

.ml10 {
  margin-left: 20rpx;
}

.new-content .header-today-info text.fs12,
text.fs12 {
  font-size: 24rpx;
}

.ml-135 {
  margin-left: 135rpx;
}

.top-number view {
  line-height: 1.2;
}

.heade-text {
  text-align: right;
  line-height: 1;
  letter-spacing: 0;
  color: #bed4f4;
  font-family: "Bahnschrift Regular";
  display: flex;
  align-items: center;
}

/* 营收汇总 数据概览卡片 */
.revenue-card-cont {
  padding: 6rpx 0 32rpx 0;
  border-radius: 12rpx;
  margin: 0 20rpx;
  box-shadow: 0rpx 0rpx 6rpx 0px rgba(224, 224, 224, 0.54);
}

.head-cost-text {
  color: #bed4f4;
  font-size: 28rpx;
}

.top-revenue-card {
  padding: 16rpx 30rpx 6rpx 30rpx;
  font-family: "Bahnschrift Regular";
  color: #d7b89a;
  align-items: flex-end;
}

.top-revenue-card .top-number {
  font-size: 56rpx;
  color: #d0ac8b;
  line-height: 1;
}

.top-revenue-card .upLoad-text {
  font-size: 32rpx;
}

.check-unit {
  font-size: 24rpx;
  margin-top: 16rpx;
  flex: 1;
  text-align: center;
}

.check-price-color {
  font-size: 32rpx;
  color: #868686;
  line-height: 1.2;
  font-family: "Bahnschrift Regular";
}

.check-price-color text {
  font-size: 22rpx;
}

/* end */

.modle-title {
  padding-left: 24rpx;
  font-size: 30rpx;
  padding-top: 42rpx;
  padding-bottom: 20rpx;
}

.modle-title .uni-icon-arrowdown {
  font-size: 24rpx;
}

.modle-title picker {
  color: #000000;
  padding-right: 24rpx;
  position: relative;
  width: 164rpx;
}

.modle-title picker .revenue-date:before {
  content: "";
  position: absolute;
  width: 0rpx;
  height: 0rpx;
  border: 0rpx;
  border-left: 12rpx solid transparent;
  border-right: 12rpx solid transparent;
  border-top: 12rpx solid #000;
  right: 22rpx;
  top: 22rpx;

  display: block;
  border-radius: 6rpx;
}

.upload-count {
  font-family: "Bahnschrift Regular";
  font-size: 32rpx;
  margin-left: 16rpx;
  margin-right: 36rpx;
}

.region-title {
  padding: 20rpx 60rpx 20rpx 80rpx;
  position: relative;
  font-size: 30rpx;
  font-weight: bolder;
}

.region-title:before {
  content: "";
  position: absolute;
  width: 20rpx;
  height: 20rpx;
  background: url(/static/images/revenue/select.png) no-repeat center;
  background-size: contain;
  left: 40rpx;
  top: 36rpx;
}

.active.region-title:before {
  background: url(/static/images/revenue/select_active.png) no-repeat center;
  background-size: contain;
}

/*日结上传*/
.region-cell {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 26rpx 24rpx 22rpx 42rpx;
}

.region-cell .region-cell-unit {
  flex: 2;
  display: flex;
  flex-direction: column;
  color: #929292;
  font-size: 26rpx;
  line-height: 1.5;
  text-align: right;
}

.region-cell .region-cell-unit:nth-child(1) {
  flex: 3;
  text-align: left;
}

.region-cell .region-cell-unit:nth-child(3) {
  line-height: 50rpx;
}

.region-cell-image {
  width: 48rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 50rpx;
}

.region-cell image {
  width: 14rpx;
  height: 23rpx;
}

/*日结上传服务区*/
.region-cell-area {
  /* display: none; */
  max-height: 460rpx;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.region-cell-area li.visited view:first-child {
  color: #007aff;
}

.region-cell-area li:after {
  content: "";
  background: url(/static/images/revenue/you-jt.png) no-repeat center;
  width: 14rpx;
  height: 24rpx;
  background-size: contain;
  display: block;
  position: absolute;
  right: 24rpx;
  top: 26rpx;
}

.region-cell-area li:nth-child(2n + 1) {
  background-color: #fcfcfc;
}

.region-cell-area li:nth-child(2n + 1):before {
  content: "";
  background-color: #5596f9;
  width: 8rpx;
  height: 8rpx;
  border-radius: 8rpx;
  display: block;
  position: absolute;
  left: 42rpx;
}

.region-cell-area li:nth-child(2n):before {
  content: "";
  background-color: #fe6d67;
  width: 8rpx;
  height: 8rpx;
  border-radius: 8rpx;
  display: block;
  position: absolute;
  left: 42rpx;
}

.region-cell-area li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 72rpx 16rpx 68rpx;
  position: relative;
  text-align: right;
  color: #2e2e2e;
  background-color: #f7f7f7;
}

.region-cell-area li>div {
  flex: 2;
  font-size: 22rpx;
}

.region-cell-area li>div:nth-child(1) {
  flex: 3;
  text-align: left;
}

/*车流量分析*/
.bayonet-cell-area {
  /* display: none; */
  max-height: 460rpx;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.bayonet-cell-area li {
  width: 100%;
}

.bayonet-cell-area li .server {
  width: 30%;
  display: inline-block;
  text-align: left;
  padding-left: 15rpx;
}

.bayonet-cell-area li .type {
  width: 35%;
  display: inline-block;
  text-align: center;
}

.bayonet-cell-area li .carType {
  width: 30%;
  display: inline-block;
  text-align: right;
}

.bayonet-cell-area li:nth-child(2n + 1):before {
  content: "";
  background-color: #5596f9;
  width: 8rpx;
  height: 8rpx;
  border-radius: 8rpx;
  display: block;
  position: absolute;
  left: 0;
  top: 40%;
}

.bayonet-cell-area li:nth-child(2n):before {
  content: "";
  background-color: #fe6d67;
  width: 8rpx;
  height: 8rpx;
  border-radius: 8rpx;
  display: block;
  position: absolute;
  left: 0;
  top: 40%;
}

.bayonet-cell-area li {
  width: 100%;
  /*display: flex;*/
  /*align-items: center;*/
  /*justify-content: space-around;*/
  position: relative;
}

.bayonet-cell-area li>div {
  flex: 2;
}

.bayonet-cell-area li>div:nth-child(1) {
  flex: 3;
  text-align: left;
}

.bayonet-c-list {
  padding: 16rpx 32rpx;
  width: 100%;
  position: relative;
}

.bayonet-c-list div:before {
  content: "";
  background: url(/static/images/authority/fwq.png) no-repeat center;
  width: 35rpx;
  height: 35rpx;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 7px;
}

.modle-title image {
  max-width: 36rpx;
  max-height: 36rpx;
}

.line-tab-unit {
  margin-top: 20rpx;
  /* width: 60rpx; */
  height: 44rpx;
  font-size: 28rpx;
  color: #a9a9a9;
  background: #ececec;
  border-radius: 8rpx;
  text-align: center;
  line-height: 44rpx;
  margin-right: 32rpx;
  padding: 0 10rpx;
  font-size: 22rpx;
}

.line-tab-unit.active {
  background-color: #667ed5;
  color: #fff;
}

.revenue-line-box {
  background-color: #fff;
  margin: 0 16rpx;
  border-radius: 20rpx;
  padding: 34rpx 16rpx 34rpx 16rpx;
  box-shadow: 1rpx 0rpx 6rpx 0px rgba(224, 224, 224, 0.54);
}

.revenue-line-box+.revenue-line-box {
  margin-top: 38rpx;
}

.revenue-line-data {
  width: 216rpx;
  height: 144rpx;
  background-color: #f8f8f8;
  border-radius: 12rpx;
  color: #a5a5a5;
  font-size: 24rpx;
  text-align: center;
  padding-top: 20rpx;
  border: 2rpx solid #f8f8f8;
  box-sizing: border-box;
}

.revenue-line-data+.revenue-line-data {
  margin-left: 24rpx;
}

.revenue-line-data p:last-child {
  font-size: 40rpx;
  font-family: "Bahnschrift Regular";
  line-height: 1.2;
}

.revenue-line-data.active {
  border: 2rpx solid #889ded;
  background-color: #f1f3fb;
  color: #667ed5;
}

.revenue-line-box .text-title {
  color: #9498a4;
  font-size: 24rpx;
  margin-top: 38rpx;
}

.revenue-line-box .up-text-title {
  color: #6eb92b;
  font-family: "Bahnschrift Regular";
  font-size: 36rpx;
  line-height: 1.5;
}

.up-text-title:after {
  content: "";
  margin-left: 12rpx;
  width: 20rpx;
  height: 22rpx;
  display: inline-block;
  background: url("/static/images/revenue/up-arrow.png") no-repeat center;
  background-size: contain;
}

.text-week {
  color: #c2c2c2;
  margin-left: 32rpx;
}

.down-text-title:after {
  content: "";
  margin-left: 12rpx;
  width: 20rpx;
  height: 22rpx;
  display: inline-block;
  background: url("/static/images/revenue/down-arrow.png") no-repeat center;
  background-size: contain;
}

.revenue-line-box .down-text-title {
  color: #f07878;
  font-family: "Bahnschrift Regular";
  font-size: 36rpx;
  line-height: 1.5;
}

.revenue-line-box .title {
  color: #000;
  font-size: 28rpx;
  font-weight: bolder;
}

.revenue-line-box canvas.operation-content {
  height: 350rpx;
  width: 686rpx;
  margin: 0 auto 0 auto;
  background-color: #fff;
}

/*区域营收占比*/
/* 	//.operation-bgfc {
	//	background-color: #FCFCFC;
	//	padding-bottom: 32rpx;
	//} */

.box-operation {
  box-shadow: 1px 2px 6px 0px rgba(224, 224, 224, 0.54);
  margin: 20rpx 32rpx 0 32rpx;
  border-radius: 12rpx;
}

.operation-tab-box {
  background: #f1f1f1;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

.operation-tab-box .operation-tab-unit {
  color: #bababa;
  flex: 30%;
  height: 120rpx;
  line-height: 120rpx;
  position: relative;
  padding-left: 24rpx;
}

.operation-tab-box .operation-tab-unit.active {
  background-color: #fff;
  color: #000000;
}

.operation-tab-box .operation-tab-unit.active:after {
  content: "";
  width: 30rpx;
  height: 126rpx;
  background-color: #fff;
  border-radius: 0 14rpx 0 0;
  position: absolute;
  right: -20rpx;
  transform: rotate(-9deg);
}

.operation-tab-box .operation-tab-unit:after {
  content: "";
  width: 30rpx;
  height: 126rpx;
  border-radius: 0 14rpx 0 0;
  background-color: #f1f1f1;
  box-shadow: 6rpx 8rpx 4rpx rgba(0, 0, 0, 0.15);
  position: absolute;
  right: -20rpx;
  transform: rotate(-9deg);
  z-index: 1;
}

.operation-content-box {
  width: 686rpxrpx;
  overflow: hidden;
  padding-bottom: 16rpx;
}

canvas.operation-content {
  height: 500rpx;
  width: 686rpx;
  margin: 0 auto;
  background-color: #fff;
}

.operation-c-list {
  padding: 16rpx 32rpx;
}

.operation-cl-unit {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.operation-cl-unit1 {
  width: 100%;
  font-size: 26rpx;
  display: flex;
  justify-content: space-between;
}

.operation-cl-unit1 .server {
  width: 30%;
  display: inline-block;
  text-align: left;
  padding-left: 30rpx;
}

.operation-cl-unit1 .type {
  width: 40%;
  display: inline-block;
  text-align: left;
}

.operation-cl-unit1 .carType {
  width: 30%;
  display: inline-block;
  text-align: center;
}

.operation-c-list .progress {
  width: 288rpx;
  height: 12rpx;
  background-color: #f9f9f9;
  border-radius: 4rpx;
  margin-top: 12rpx;
}

.operation-c-list .progress .bgO {
  height: 12rpx;
  border-radius: 4rpx;
  background: -webkit-linear-gradient(right, #ec6332, #ef884f);
  background: -moz-linear-gradient(right, #ec6332, #ef884f);
  background: -o-linear-gradient(right, #ec6332, #ef884f);
  background: linear-gradient(to right, #ec6332, #ef884f);
}

/*排行*/
.ranking-tab-box {
  margin: 20rpx 32rpx;
  border: 2rpx solid #565656;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  text-align: center;
}

.ranking-tab-box .ranking-tab-unit {
  color: #565656;
  flex: 1;
  height: 64rpx;
  line-height: 60rpx;
}

.ranking-tab-box .ranking-tab-unit.active {
  background-color: #565656;
  color: #fff;
}

.ranking-tab-box .ranking-tab-unit+.ranking-tab-unit {
  border-left: 2rpx solid #565656;
}

.ranking-content {
  /* display: none; */
  min-height: 160rpx;
}

.ranking-content .ranking-list {
  display: flex;
  align-items: center;
  color: #000;
  padding: 24rpx 32rpx;
}

.ranking-content .rank-index {
  width: 72rpx;
  height: 72rpx;
  text-align: center;
  line-height: 72rpx;
  font-size: 30rpx;
  font-weight: bolder;
  margin-right: 32rpx;
}

.ranking-content .ranking-list:nth-child(1) .rank-index {
  background: url("/static/images/revenue/top1.png") no-repeat center;
  background-size: contain;
  font-size: 0;
}

.ranking-content .ranking-list:nth-child(2) .rank-index {
  background: url(/static/images/revenue/top2.png) no-repeat center;
  background-size: contain;
  font-size: 0;
}

.ranking-content .ranking-list:nth-child(3) .rank-index {
  background: url(/static/images/revenue/top3.png) no-repeat center;
  background-size: contain;
  font-size: 0;
}

.ranking-content .ranking-list-unit {
  font-size: 28rpx;
  flex: 1;
}

.ranking-content .ranking-unit-info {
  /* margin-top: 16rpx; */
  display: flex;
  align-items: center;
  /* font-size: .13rem; */
}

.ranking-content .ranking-unit-info text {
  flex: 2;
  color: #929292;
}

.ranking-content .ranking-unit-info text:nth-child(2) {
  flex: 3;
}

.ranking-content .ranking-unit-info text:nth-child(2n) {
  color: #000;
}

.ranking-ico {
  width: 72rpx;
  height: 72rpx;
}
</style>
