<template>
  <div class="content">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>服务力看板</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- gmv目标 gmv数据 -->
    <div class="gmv-board">
      <div class="card-module gmv-goal">
        <p class="stock-title">
          <span class="card-title">近14天库存率</span>
          <span>参照时间：{{ freshTime }}</span>
        </p>
        <div class="stock-table">
          <el-table border :data="tableData1">
            <el-table-column label="城市" prop="city"></el-table-column>
            <el-table-column label="保洁" prop="bj_rate"></el-table-column>
            <el-table-column label="品类" prop="pl_rate"></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="card-module gmv-data">
        <div class="month-wrapper">
          <div class="card-title">服务力指标数据</div>
          <div class="month-select">
            <div @click="lastMonth">
              <i class="el-icon-arrow-left"></i>
              上月
            </div>
            <div class="current-month">{{ current }}</div>
            <div :class="[isMax?'disable-select':'']" @click="nextMonth">
              下月
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </div>
        <div class="data-progress">
          <div class="progress-1">
            <p>
              <span class="bold-font">{{ wholeData.current_bj }}</span>单
            </p>
            <p class="up-arrow" v-if="wholeData.bj_increase.substr(0,1)=='+'">{{ wholeData.bj_increase }}↑</p>
            <p class="down-arrow" v-else>
              {{ wholeData.bj_increase }}
              <span v-if="wholeData.bj_increase.substr(0,1)=='-'">↓</span>
            </p>
            <p>保洁当月单量</p>
          </div>
          <div class="progress-2">
            <p>
              <span class="bold-font">{{ wholeData.curr_date_bj }}</span><span v-if="wholeData.curr_date_bj">单</span>
            </p>
            <p class="up-arrow" v-if="wholeData.bj_date_increase.substr(0,1)=='+'">{{ wholeData.bj_date_increase }}↑</p>
            <p class="down-arrow" v-else>
              {{ wholeData.bj_date_increase }}
              <span v-if="wholeData.bj_date_increase.substr(0,1)=='-'">↓</span>
            </p>
            <p>保洁当日单量</p>
          </div>
          <div class="progress-3">
            <p>{{ wholeData.jingxuan_rate }}</p>

            <p>鲸选单占比</p>
          </div>
          <div class="progress-4">
            <p>{{ wholeData['档期满载率'] }}</p>

            <p>档期满载率</p>
          </div>
          <div class="progress-5">
            <p>{{ wholeData['人均订单'] }}单</p>

            <p>人均订单</p>
          </div>
        </div>
        <div style="display:flex;justify-content:space-between;">
          <div class="data-progress " style="flex:2;">
            <div class="progress-4">
              <p>{{ wholeData['全天班占比'] }}</p>
              <p>全天班人数占比</p>
            </div>
            <div class="progress-5">
              <p>{{ wholeData['白班占比'] }}</p>

              <p>白班人数占比</p>
            </div>
          </div>
          <div class="data-progress progress-bottom" style="flex:3;margin-left:18px;">
            <div class="progress-1">
              <p>
                <span class="bold-font">{{ wholeData.current_pl }}</span>单
              </p>
              <p class="up-arrow" v-if="wholeData.pl_increase.substr(0,1)=='+'">{{ wholeData.pl_increase }}↑</p>
              <p class="down-arrow" v-else>
                {{ wholeData.pl_increase }}
                <span v-if="wholeData.pl_increase.substr(0,1)=='-'">↓</span>
              </p>
              <p>品类当月单量</p>
            </div>
            <div class="progress-2">
              <p>
                <span class="bold-font">{{ wholeData.curr_date_pl }}</span><span v-if="wholeData.curr_date_pl">单</span>
              </p>
              <p class="up-arrow" v-if="wholeData.pl_date_increase.substr(0,1)=='+'">
                {{ wholeData.pl_date_increase }}↑</p>
              <p class="down-arrow" v-else>
                {{ wholeData.pl_date_increase }}
                <span v-if="wholeData.pl_date_increase.substr(0,1)=='-'">↓</span>
              </p>
              <p>品类当日单量</p>
            </div>
            <div class="progress-3">
              <p>{{ wholeData['人均工时'] }}</p>
              <p>人均工时</p>
            </div>
          </div>

        </div>

      </div>
    </div>
    <!-- 各城市汇总服务人数 -->
    <div class="sale-board card-module">
      <el-table height="260" ref="servantTable" :data="[tableServantCount]">
        <el-table-column label="各城市服务力汇总">
          <el-table-column v-for="(item,index) in tableServantCount" :label="item.name" :key="item.name">
            <el-table-column label="保洁">
              <template slot-scope="scope">
                {{ item.bj }}
              </template>
            </el-table-column>
            <el-table-column label="品类">
              <template slot-scope="scope">
                {{ item.pl }}
              </template>
            </el-table-column>
            <el-table-column label="保姆">
              <template slot-scope="scope">
                {{ item.bm }}
              </template>
            </el-table-column>
            <el-table-column label="总计">
              <template slot-scope="scope">
                {{ item.total }}
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>

    <!-- 复购情况 -->
    <div class="sale-board card-module">
      <el-table :data="tableData2" height="380">
        <el-table-column label="服务站指标">
          <el-table-column label="城市" prop="city"></el-table-column>
          <el-table-column label="服务站" prop="station" width="200px"></el-table-column>
          <el-table-column label="在职人数" prop="worker_line"></el-table-column>
          <el-table-column label="当月入职" prop="new_entry"></el-table-column>
          <el-table-column label="当月解约" prop="new_cancel"></el-table-column>
          <el-table-column label="解约率" prop="turnover_rate"></el-table-column>
          <el-table-column label="转介绍人数" prop="introduce"></el-table-column>

          <el-table-column label="当日单量" prop="day_order"></el-table-column>
          <el-table-column label="环比昨日" prop="ring_last"></el-table-column>
          <el-table-column label="当月单量" prop="trade_order"></el-table-column>
          <el-table-column label="环比上月" prop="ring_ratio"></el-table-column>
          <el-table-column label="服务能力客诉" prop="ticket_count"></el-table-column>
          <el-table-column label="客诉率" prop="ticket_rate"></el-table-column>
          <el-table-column label="7日无订单人数" prop="no_order"></el-table-column>
          <el-table-column label="保底成本" prop="base_cost"></el-table-column>
          <el-table-column label="3日无订单人数" prop="three_day_no_order"></el-table-column>
          <el-table-column label="鲸选单占比" prop="jingxuan_rate"></el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-bottom:10px;">
      <el-card shadow="hover">
        <!-- 搜索 -->
        <el-form :inline="true" size="small" v-model="listQuery1">
          <el-form-item label="城市">
            <el-select v-model="listQuery1.city" clearable placeholder="请选择城市" @change="cityChange1" multiple filterable>
              <el-option v-for="(item,index) in cityList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务站">
            <el-select v-model="listQuery1.serviceStation" clearable placeholder="请选择服务站">
              <el-option v-for="(item,index) in stationList1" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="时间颗粒度">
            <el-select v-model="listQuery1.timeType" placeholder="请选择时间颗粒度">
              <el-option label="天" value="2"></el-option>
              <el-option label="月" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围" v-if="listQuery1.timeType==2">
            <el-date-picker v-model="listQuery1.createTime" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                            :picker-options="pickerOptions" @change="dateChange"></el-date-picker>
          </el-form-item>
          <el-form-item label="时间范围" v-if="listQuery1.timeType==1">
            <el-date-picker v-model="listQuery1.createTime1" type="monthrange" range-separator="至"
                            start-placeholder="开始月份" end-placeholder="结束月份" value-format="yyyy-MM"
                            :picker-options="pickerOptions1" @change="dateChange1"></el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="getCleanPerCapitalOrderQuality">查询</el-button>
          </el-form-item>
        </el-form>
        <!-- style="overflow-x: auto;" -->
        <div class="module-wrapper">
          <div class="card-left">
            <!-- <div id="mainChart" :style="'width:'+mywidth_1+'px'"></div> -->
            <div id="mainChart"></div>
          </div>
          <div class="card-right">
            <div id="mainChart1"></div>
          </div>
        </div>
      </el-card>
    </div>

    <el-card shadow="hover">
      <el-form :inline="true" size="small" v-model="listQuery2">
        <el-form-item label="城市">
          <el-select v-model="listQuery2.city" clearable placeholder="请选择城市" @change="cityChange2" multiple filterable>
            <el-option v-for="(item,index) in cityList" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务站">
          <el-select v-model="listQuery2.serviceStation" clearable placeholder="请选择服务站" multiple>
            <el-option v-for="(item,index) in stationList2" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="门店">
          <el-select v-model="listQuery2.shopName" clearable placeholder="请选择门店">
            <el-option v-for="(item,index) in shopList2" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="商品类型">
          <el-select v-model="listQuery2.productType" placeholder="请选择业务线" clearable>
            <el-option label="保洁" :value="1"></el-option>
            <el-option label="品类" :value="2"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="类型">
          <el-select v-model="listQuery2.stationType" placeholder="请选择类型" clearable>
            <el-option label="保洁" :value="1"></el-option>
            <el-option label="品类" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始日期">
          <el-date-picker v-model="listQuery2.startTime" type="date" placeholder="请选择开始日期"
                          value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="getStationAndShopStock">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="module-wrapper">
        <div shadow="hover" class="card-left" style="flex:1.5">
          <div>
            <div id="mainChart2"></div>
          </div>
        </div>

        <!-- 服务站库存剩余率看板/门店库存剩余率看板 -->
        <div shadow="hover" class="card-right">
          <!-- <div style="margin:0 0 10px 0;">
            <el-select v-model="productType" placeholder="请选择业务线" clearable>
              <el-option label="保洁" :value="1"></el-option>
              <el-option label="品类" :value="2"></el-option>
            </el-select>
          </div> -->

          <!-- :span-method="objectSpanMethod" -->
          <el-table :data="tableData3" height="300">
            <el-table-column label="服务站库存剩余率看板" header-align="center">
              <el-table-column label="服务站" prop="station_name"></el-table-column>
              <el-table-column label="1-3天" prop="seven_day_radio"></el-table-column>
              <el-table-column label="4-14天" prop="fourteen_day_radio"></el-table-column>
              <el-table-column label="15天以上" prop="fifteen_day_radio"></el-table-column>
            </el-table-column>
          </el-table>
          <el-table :data="tableData4" height="300">
            <el-table-column label="门店库存剩余率看板" header-align="center">
              <el-table-column label="门店" prop="shop_name"></el-table-column>
              <el-table-column label="1-3天" prop="seven_day_radio"></el-table-column>
              <el-table-column label="4-14天" prop="fourteen_day_radio"></el-table-column>
              <el-table-column label="15天以上" prop="fifteen_day_radio"></el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
    <!-- <el-card shadow="hover" style=" margin-top:10px">
      <el-form :inline="true" size="small" v-model="listQuery3">
        <el-form-item label="城市">
          <el-select v-model="listQuery3.city" clearable placeholder="请选择城市" @change="cityChange3">
            <el-option v-for="(item,index) in cityList" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务站">
          <el-select v-model="listQuery3.serviceStation" clearable placeholder="请选择服务站">
            <el-option
              v-for="(item,index) in stationList3"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="门店">
          <el-select v-model="listQuery3.shopName" clearable placeholder="请选择门店">
            <el-option v-for="(item,index) in shopList3" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="开始日期">
          <el-date-picker
            v-model="listQuery3.createTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            @change="dateChange3"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="getOrderHeatMap">查询</el-button>
        </el-form-item>
      </el-form>
      <div id="container" class="map"></div>
    </el-card> -->
  </div>
</template>

<script>
import Service from "../script/api/service";

export default {
  name: "saleGmv",
  data() {
    return {
      productType: 1,
      map: "",
      count: "",
      channelList: [],
      isMax: true,
      current: "",
      gmvTarget: {
        totalTargetNumber: 10000000,
        startYm: "2021-09",
        endYm: "2021-10",
        completionRatio: "60%",
      },
      gmvDataSale: {},
      gmvDataService: {},
      buyAgenDatas: {},
      mywidth_1: 900,
      cityList: [],
      stationList: [],
      allStationList: [],
      allShop: [],
      stationList1: [],
      listQuery1: {
        city: [],
        serviceStation: '',
        timeType: "2",
        createTime: [],
        createTime1: [],
      },
      tableData1: [],
      freshTime: "",
      listQuery2: {
        city: [],
        serviceStation: [],
        shopName: "",
        stationType: 1,
        productType: 1,
        startTime: "",
      },
      stationList2: [],
      shopList2: [],
      listQuery3: {
        city: "",
        serviceStation: "",
        shopName: "",
        createTime: [],
      },
      stationList3: [],
      shopList3: [],
      tableData3: [],
      tableData4: [],
      tableData2: [],
      tableServantCount: [],
      wholeData: {
        bj_date_increase: "",
        bj_increase: "",
        curr_date_bj: "",
        curr_date_pl: "",
        current_bj: "",
        current_pl: "",
        jingxuan_rate: "",
        pl_date_increase: "",
        pl_increase: "",
        人均工时: "",
        人均订单: "",
        全天班占比: "",
        档期满载率: "",
        白班占比: "",
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近半个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      pickerOptions1: {
        shortcuts: [
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 12);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.cityList = JSON.parse(window.localStorage.getItem("allHmCity"));

    // this.listQuery1.city = this.cityList[0];
    // this.listQuery2.city = this.cityList[0];
    // this.listQuery3.city = this.cityList[0];
    // this.allStationList = JSON.parse(
    //   window.localStorage.getItem("allHmStation")
    // );

    let allHmStation = JSON.parse(window.localStorage.getItem("allHmStation"));
    let allList = [];
    let allShop = [];
    allHmStation.forEach(item => {
      let list = (item.station_names).split(',');
      allList = allList.concat(list);
      if (item.shop_names != null) {
        let shoplist = (item.shop_names).split(',');
        allShop = allShop.concat(shoplist);
      }


    });
    this.allStationList = allList;
    this.allShop = allShop;
    this.stationList1 = this.allStationList;
    this.stationList2 = this.allStationList;
    this.shopList2 = allShop;


    // this.cityChange1(this.listQuery1.city);
    // this.cityChange2(this.listQuery2.city);
    // this.cityChange3(this.listQuery3.city);
    let currentTime = new Date().getTime();
    let currentDate = this.formateDay(
      new Date(currentTime - 3600 * 1000 * 24)
    );

    let startDate = this.formateDay(
      new Date(currentTime - 3600 * 1000 * 24 * 14)
    );
    let startDate2 = this.formateDay(
      new Date(currentTime - 3600 * 1000 * 24 * 30)
    );
    let startDate3 = this.formateDay(
      new Date(currentTime - 3600 * 1000 * 24 * 14)
    );
    let beginMonth = this.formateMonth(
      new Date(currentTime - 3600 * 1000 * 24 * 365)
    );
    let endMonth = this.formateMonth(new Date());
    this.listQuery1.createTime = [startDate, currentDate];
    this.listQuery1.createTime1 = [beginMonth, endMonth];
    let today = new Date();
    let year = today.getFullYear();
    let month = today.getMonth() + 1;
    month = month >= 10 ? month : "0" + month;

    this.current = year + "-" + month;
    this.listQuery2.startTime = currentDate;
    //  this.listQuery3.createTime = [startDate2, currentDate];
    this.listQuery3.createTime = [startDate3, currentDate];
    this.get14DayStock();
    this.getServiceGoalData();
    this.getCleanPerCapitalOrderQuality();
    this.getStationAndShopStock();
    // this.getOrderHeatMap();

    // this.getCSGmvTarget();
    // this.getCSGmvData();
    // this.getCSTrendchart();
    // this.initHotMap();
  },
  methods: {
    get14DayStock() {
      Service.$axiosService14DayStock()
        .then((res) => {
          // console.log(res);
          this.tableData1 = res.data.data;
          this.freshTime = res.data.data[0].import_time;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getChannel() {
      Service.$axiosGetChannel().then((res) => {
        if (res.data.errno == "0") {
          this.channelList = res.data.data;
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },
    getStationAndShopStock() {
      if (this.isEmptyObjVue(this.listQuery2.startTime)) {
        this.$message.warning("请选择日期");
        return false;
      }
      let params = {
        city: this.listQuery2.city.join(','),
        serviceStation: this.listQuery2.serviceStation.join(','),
        shopName: this.listQuery2.shopName,
        // productType:this.listQuery2.productType,
        stationType: this.listQuery2.stationType,
        startTime: this.listQuery2.startTime,
      };
      Service.$axiosStationAndShopStock(params).then((res) => {
        // console.log(res);
        if (res.data.errno == 0) {
          this.tableData3 = res.data.data.residualRadio.station;
          this.tableData4 = res.data.data.residualRadio.shopInfo;
          this.initEchart2(
            res.data.data.stockRadio,
            "mainChart2",
            "服务站与门店库存"
          );
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },
    getServantCount() {
      //遍历tableData2 获取各城市服务力汇总
      this.tableServantCount = [];
      if (this.tableData2 === null || this.tableData2.length == 0) return;
      var sh = {name: "上海", bj: 0, pl: 0, bm: 0, total: 0};
      var bj = {name: "北京", bj: 0, pl: 0, bm: 0, total: 0};
      var sz = {name: "深圳", bj: 0, pl: 0, bm: 0, total: 0};
      var nj = {name: "南京", bj: 0, pl: 0, bm: 0, total: 0};
      var hz = {name: "杭州", bj: 0, pl: 0, bm: 0, total: 0};
      var suz = {name: "苏州", bj: 0, pl: 0, bm: 0, total: 0};
      var qd = {name: "青岛", bj: 0, pl: 0, bm: 0, total: 0};
      var cd = {name: "成都", bj: 0, pl: 0, bm: 0, total: 0};
      var cq = {name: "重庆", bj: 0, pl: 0, bm: 0, total: 0};
      var gz = {name: "广州", bj: 0, pl: 0, bm: 0, total: 0};
      this.tableServantCount = [sh, bj, sz, nj, hz, suz, qd, cd, cq, gz];
      this.tableData2.forEach((item) => {
        if (item.city == "上海") {
          this.setServantCount(sh, item);
        } else if (item.city == "北京") {
          this.setServantCount(bj, item);
        } else if (item.city == "南京") {
          this.setServantCount(nj, item);
        } else if (item.city == "深圳") {
          this.setServantCount(sz, item);
        } else if (item.city == '杭州') {
          this.setServantCount(hz, item);
        } else if (item.city == '苏州') {
          this.setServantCount(suz, item);
        } else if (item.city == '青岛') {
          console.log("city==>" + item.city)
          this.setServantCount(qd, item);
        } else if (item.city == '成都') {
          console.log("city==>" + item.city)
          this.setServantCount(cd, item);
        } else if (item.city == '重庆') {
          console.log("city==>" + item.city)
          this.setServantCount(cq, item);
        } else if (item.city == '广州') {
          console.log("city==>" + item.city)
          this.setServantCount(gz, item);
        }
      });

      console.info(this.tableServantCount);
    },
    setServantCount(city, station) {
      city.total = city.total + parseInt(station.worker_line);
      if (station.station.indexOf("品类") >= 0)
        city.pl = city.pl + parseInt(station.worker_line);
      else if (station.station.indexOf("保姆") >= 0)
        city.bm = city.bm + parseInt(station.worker_line);
      else city.bj = city.bj + parseInt(station.worker_line);
    },
    getServiceGoalData() {
      Service.$axiosServiceGoalData({month: this.current}).then((res) => {
        // console.log(res);
        if (res.data.errno == 0) {
          this.tableData2 = res.data.data.stationIndex;
          this.getServantCount();
          if (res.data.data.servicePowerIndex == null) {
            if (this.wholeData == null) this.wholeData = {bj_increase: ""};
          } else {
            this.wholeData = res.data.data.servicePowerIndex;
            this.wholeData.bj_date_increase = res.data.data.servicePowerIndex
              .bj_date_increase
              ? res.data.data.servicePowerIndex.bj_date_increase
              : " ";
            this.wholeData.pl_date_increase = res.data.data.servicePowerIndex
              .pl_date_increase
              ? res.data.data.servicePowerIndex.pl_date_increase
              : " ";
          }
          // this.initEchart2(
          //   res.data.data.stockRadio,
          //   "mainChart2",
          //   "服务站与门店库存"
          // );
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },
    formatNumber(nStr) {
      nStr += ""; //数字转换为字符
      let x, x1, x2;
      if (nStr.indexOf(".") != -1) {
        x = nStr.split("."); //按照小数点分隔
        x1 = x[0]; //整数部分
        x2 = x.length > 1 ? "." + x[1] : ""; //小数部分
      } else {
        x1 = nStr;
        x2 = "";
      }

      const rgx = /(\d+)(\d{3})/; //正则式定义
      while (rgx.test(x1)) {
        //正则式匹配
        x1 = x1.replace(rgx, "$1" + "," + "$2"); //正则式替换
      }
      return x1 + x2;
    },

    getCSGmvData(date) {
      let temp = {
        // yearMonth: moment(new Date()).format("YYYY-MM")
        yearMonth: this.current,
      };

      Service.$axiosGetCSGmvData(temp)
        .then((res) => {
          // console.log(res);
          this.gmvDataSale = res.data.data.gmvDataSale;
          this.gmvDataService = res.data.data.gmvDataService;
          this.buyAgenDatas = res.data.data.buyAgenDatas;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getCSGmvTarget() {
      Service.$axiosGetCSGmvTarget()
        .then((res) => {
          this.gmvTarget = res.data.data;
          this.initFinishCircle();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    initMainChart(id) {
      var chartDom = document.getElementById(id);
      var myChart = this.$echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "销售gmv趋势图",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            // boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "邮件营销",
            type: "line",
            stack: "总量",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "联盟广告",
            type: "line",
            stack: "总量",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "视频广告",
            type: "line",
            stack: "总量",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "直接访问",
            type: "line",
            stack: "总量",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "搜索引擎",
            type: "line",
            stack: "总量",
            label: {
              show: true,
              position: "top",
            },
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      };

      option && myChart.setOption(option);
    },
    initFinishCircle() {
      var chartDom = document.getElementById("finishCircle");
      var myChart = this.$echarts.init(chartDom);
      var option;
      // let value=((gmvTarget.completionRatio)*100);
      // console.log(this.gmvTarget.completionRatio);
      let value = Number(
        this.gmvTarget.completionRatio.replace("%", "")
      ).toFixed(0);
      option = {
        series: [
          {
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false,
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 1,
                borderColor: "#464646",
              },
            },
            axisLine: {
              lineStyle: {
                width: 30,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: [
              {
                value: value,
                name: "完成进度",
                title: {
                  offsetCenter: ["0%", "-10%"],
                },
                detail: {
                  offsetCenter: ["0%", "10%"],
                },
              },
            ],
            title: {
              fontSize: 14,
            },
            detail: {
              width: 50,
              height: 14,
              fontSize: 14,
              color: "auto",
              borderColor: "auto",
              borderRadius: 20,
              borderWidth: 1,
              formatter: "{value}%",
            },
          },
        ],
      };

      // option && myChart.setOption(option);

      myChart.setOption(option, true);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    insertLog(requestParm, url) {
      // 插入导出日志
      let userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
      Service.$axiosExportLog({
        functionName: "报表统计-销售报表",
        systemName: "报表系统",
        requestParm: JSON.stringify(requestParm),
        requestUrl: process.env.baseUrl + url,
        userId: userInfo.id,
        userName: userInfo.userName,
      })
        .then((res) => {
          // console.log("导出日志" + res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getbuzLine_levelone_1(e) {
      console.log(e);
      let temparr = [];
      if (e.length > 0) {
        e.forEach(function (d) {
          temparr = temparr.concat(d.listchild);
        });
      }
      this.levelOneList_a = temparr;
      this.listQuery.levelOnes = [];
      this.listQuery.levelTwos = [];
      this.levelTwoList_a = [];
    },

    getbuzLine_leveltwo_1(e) {
      console.log(e);
      let temparr = [];
      if (e.length > 0) {
        e.forEach(function (d) {
          temparr = temparr.concat(d.listchild);
        });
      }
      this.levelTwoList_a = temparr;
      this.listQuery.levelTwos = [];
    },
    //--------------------------11
    getbuzLine_levelone_2(e) {
      console.log(e);
      let temparr = [];
      if (e.length > 0) {
        e.forEach(function (d) {
          temparr = temparr.concat(d.listchild);
        });
      }
      this.levelOneList_b = temparr;
      this.listQuery1.levelOnes = [];
      this.listQuery1.levelTwos = [];
      this.levelTwoList_b = [];
    },
    getbuzLine_leveltwo_2(e) {
      console.log(e);
      let temparr = [];
      if (e.length > 0) {
        e.forEach(function (d) {
          temparr = temparr.concat(d.listchild);
        });
      }
      this.levelTwoList_b = temparr;
      this.listQuery1.levelTwos = [];
    },

    dateChange(e) {
      if (e != null) {
        let start = new Date(e[0]).getTime();
        let end = new Date(e[1]).getTime();
        let isOvertime = end - start - 3600 * 1000 * 24 * 30 > 0;
        if (isOvertime) {
          this.$message.warning("选中时间范围不能超过一个月");
          this.listQuery1.createTime = null;
        }
      }
    },
    dateChange1(e) {
      if (e != null) {
        let start =
          new Date(e[0]).getFullYear() * 12 + new Date(e[0]).getMonth();
        let end = new Date(e[1]).getFullYear() * 12 + new Date(e[1]).getMonth();
        let isOvertime = end - start - 12 > 0;
        if (isOvertime) {
          this.$message.warning("选中时间范围不能超过一年");
          this.listQuery1.createTime1 = null;
        }
      }
    },
    dateChange3(e) {
      if (e != null) {
        let start = new Date(e[0]).getTime();
        let end = new Date(e[1]).getTime();
        let isOvertime = end - start - 3600 * 1000 * 24 * 365 > 0;
        if (isOvertime) {
          this.$message.warning("选中时间范围不能超过一年");
          this.listQuery3.createTime = null;
        }
      }
    },

    cityChange(value) {
      this.listQuery.storeNames = "";
      let currentStation = this.allStationList.filter((item) => {
        return item.city == value;
      });
      this.stationList = currentStation[0].station_names.split(",");
    },
    cityChange2(value) {
      this.listQuery2.serviceStation = [];
      this.listQuery2.shopName = '';
      // let currentStation = this.allStationList.filter((item) => {
      //   return item.city == value;
      // });

      // this.stationList2 = currentStation[0].station_names.split(",");
      // this.shopList2 = currentStation[0].shop_names.split(",");

      let allHmStation = JSON.parse(window.localStorage.getItem("allHmStation"));
      if (value.length == 0) {
        this.stationList2 = this.allStationList;
        this.shopList2 = this.allShop;
      } else {
        let currentStation = allHmStation.filter(item => {
          return value.includes(item.city);
          ;
        });
        let allList = [];
        let allShop = [];
        currentStation.forEach(item => {
          let list = item.station_names.split(',');
          allList = allList.concat(list);
          let shoplist = item.shop_names.split(',');
          allShop = allShop.concat(shoplist);
        });
        this.stationList2 = allList;
        this.shopList2 = allShop;
      }
    },
    cityChange3(value) {
      this.listQuery3.serviceStation = "";
      this.listQuery3.shopName = "";
      let currentStation = this.allStationList.filter((item) => {
        return item.city == value;
      });

      this.stationList3 = currentStation[0].station_names.split(",");
      this.shopList3 = currentStation[0].shop_names.split(",");
    },
    cityChange1(value) {
      this.listQuery1.serviceStation = '';
      // let currentStation = this.allStationList.filter((item) => {
      //   return item.city == value;
      // });
      // this.stationList1 = currentStation[0].station_names.split(",");
      let allHmStation = JSON.parse(window.localStorage.getItem("allHmStation"));
      if (value.length == 0) {
        this.stationList1 = this.allStationList;
      } else {
        let currentStation = allHmStation.filter(item => {
          return value.includes(item.city);
          ;
        });
        let allList = [];
        currentStation.forEach(item => {
          let list = item.station_names.split(',');
          allList = allList.concat(list);
        });
        this.stationList1 = allList;
      }
    },
    querySearch() {
      // startTime: !this.isEmptyObjVue(this.listQuery.createTime) ? this.listQuery.createTime[0] + ' 00:00:00' : '',
      // endTime: !this.isEmptyObjVue(this.listQuery.createTime) ? this.listQuery.createTime[1] + ' 23:59:59' : '',
    },
    getCleanPerCapitalOrderQuality() {
      let params = {};
      if (this.listQuery1.timeType == 2) {
        if (this.isEmptyObjVue(this.listQuery1.createTime)) {
          this.$message.warning("请选择日期");
          return false;
        }

        params = {
          startTime: !this.isEmptyObjVue(this.listQuery1.createTime)
            ? this.listQuery1.createTime[0]
            : "",
          endTime: !this.isEmptyObjVue(this.listQuery1.createTime)
            ? this.listQuery1.createTime[1]
            : "",
          city: this.listQuery1.city.join(','),
          serviceStation: this.listQuery1.serviceStation,
          timeType: "2",
        };
      } else {
        if (this.isEmptyObjVue(this.listQuery1.createTime1)) {
          this.$message.warning("请选择日期");
          return false;
        }
        params = {
          startMonth: !this.isEmptyObjVue(this.listQuery1.createTime1)
            ? this.listQuery1.createTime1[0]
            : "",
          endMonth: !this.isEmptyObjVue(this.listQuery1.createTime1)
            ? this.listQuery1.createTime1[1]
            : "",
          city: this.listQuery1.city.join(','),
          serviceStation: this.listQuery1.serviceStation,
          timeType: "1",
        };
      }

      Service.$axiosCleanPerCapitalOrderQuality(params).then((res) => {
        // console.log(res);
        if (res.data.errno == 0) {
          this.initEchart(res.data.data, "mainChart", "保洁人均单量");
          this.initEchart(res.data.data, "mainChart1", "品类人均工时");
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },
    getMonthlySaleReportData() {
      let tempbusinessLine = [];
      let templevelOnes = [];
      let templevelTwos = [];
      this.listQuery1.bizline.forEach(function (e) {
        tempbusinessLine.push(e.businessLine);
      });
      this.listQuery1.levelOnes.forEach(function (e) {
        templevelOnes.push(e.levelOne);
      });
      this.listQuery1.levelTwos.forEach(function (e) {
        templevelTwos.push(e.levelTwo);
      });

      let params = {
        beginMonth: !this.isEmptyObjVue(this.listQuery1.createTime)
          ? this.listQuery1.createTime[0]
          : "",
        endMonth: !this.isEmptyObjVue(this.listQuery1.createTime)
          ? this.listQuery1.createTime[1]
          : "",
        city: this.listQuery1.city.join(','),
        storeNames: this.listQuery1.storeNames.join(","),
        businessLine: tempbusinessLine.join(","),
        levelOnes: templevelOnes.join(","),
        levelTwos: templevelTwos.join(","),
      };
      Service.$axiosGetMonthlySaleReportData(params).then((res) => {
        if (res.data.errno == "0") {
          this.initEchart(res.data.data, "mainChart1", "月度销售报表");

          // 插入日志

          this.insertLog(
            params,
            "/reportservice/report/getMonthlySaleReportData"
          );
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },
    initEchart(res, chartName, name) {
      var myChart = this.$echarts.init(document.getElementById(chartName));

      let dateList =
        this.listQuery1.timeType == 2 ? res.everyDay : res.everyMonth;
      let yAxisList = [];
      let legendList = [];
      if (name == "保洁人均单量") {
        legendList = ["总单量", "鲸选单量", "人均单量1", "人均单量2"];
        let yAxisItem1 = {
          name: "总单量",
          stack: "Total",
          type: "bar",
          data: res.bjOrders,
        };
        let yAxisItem2 = {
          name: "鲸选单量",
          stack: "Total",
          type: "bar",
          data: res.jingxuanOrders,
        };
        let yAxisItem3 = {
          name: "人均单量1",
          type: "line",
          yAxisIndex: 1,
          data: res.avgOrders1,
        };
        let yAxisItem4 = {
          name: "人均单量2",
          type: "line",
          yAxisIndex: 1,
          data: res.avgOrders2,
        };
        yAxisList = [yAxisItem1, yAxisItem2, yAxisItem3, yAxisItem4];
      } else {
        legendList = [
          "总工时",
          "人均工时1(工单总工时/出勤人数)",
          "人均工时2(工单总工时/出勤人次)",
        ];
        let yAxisItem1 = {
          name: "总工时",
          type: "bar",
          data: res.plOrders,
        };
        let yAxisItem2 = {
          name: "人均工时1(工单总工时/出勤人数)",
          type: "line",
          yAxisIndex: 1,
          data: res.perAvgWorkTime1,
        };
        let yAxisItem3 = {
          name: "人均工时2(工单总工时/出勤人次)",
          type: "line",
          yAxisIndex: 1,
          data: res.perAvgWorkTime2,
        };

        yAxisList = [yAxisItem1, yAxisItem2, yAxisItem3];
      }
      let option;
      if (name == "保洁人均单量") {
        option = {
          title: {
            text: name,
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          legend: {
            data: legendList,
            bottom: 0,
          },
          toolbox: {
            feature: {
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ["line", "bar"]},
              restore: {show: true},
              saveAsImage: {show: true},
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              // boundaryGap: false,
              data: dateList,
              axisLabel: {interval: 0, rotate: 30},
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "总单量",
              axisLabel: {
                formatter: "{value} 单",
              },
            },

            {
              type: "value",
              name: "人均单量",

              axisLabel: {
                formatter: "{value} 单",
              },
            },
          ],
          series: yAxisList,
        };
      } else {
        option = {
          title: {
            text: name,
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          legend: {
            data: legendList,
            bottom: 0,
          },
          toolbox: {
            feature: {
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ["line", "bar"]},
              restore: {show: true},
              saveAsImage: {show: true},
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              // boundaryGap: false,
              data: dateList,
              axisLabel: {interval: 0, rotate: 30},
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "总工时",
              axisLabel: {
                formatter: "{value} 小时",
              },
            },

            {
              type: "value",
              name: "人均工时",

              axisLabel: {
                formatter: "{value} 小时",
              },
            },
          ],
          series: yAxisList,
        };
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option, true);
      // myChart.resize();
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    initEchart2(data, chartName, name) {
      // console.log(data);
      let list1 = data.server_stock_radio; //服务站
      let list2 = data.productStockRadio; //门店
      list1 = list1.map((item) => {
        return Number(item.replace("%", ""));
      });
      list2 = list2.map((item) => {
        return Number(item.replace("%", ""));
      });
      // console.log(list1);
      // console.log(list2);
      var myChart = this.$echarts.init(document.getElementById(chartName));

      let dateList = data.dates;

      let legendList = ["服务站库存剩余率", "门店库存剩余率"];

      let option = {
        title: {
          text: name,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: legendList,
          bottom: 0,
        },
        toolbox: {
          feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ["line", "bar"]},
            restore: {show: true},
            saveAsImage: {show: true},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            // boundaryGap: false,
            data: dateList,
            axisLabel: {rotate: 30},
          },
        ],
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}%",
          },
        },
        //  yAxis: [
        //         {
        //           type: "value",
        //           name: "实销额/退款额",
        //           axisLabel: {
        //             formatter: "{value} 元"
        //           }
        //         },

        //         {
        //           type: "value",
        //           name: "单量",

        //           axisLabel: {
        //             formatter: "{value} 单"
        //           }
        //         }
        //       ],
        series: [
          {name: "服务站库存剩余率", type: "line", data: list1},
          {name: "门店库存剩余率", type: "line", data: list2},
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option, true);
      // myChart.resize();
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

    //获取上个月
    getPreMonth(date) {
      var arr = date.split("-");
      var year = arr[0]; //获取当前日期的年份
      var month = arr[1]; //获取当前日期的月份
      var day = arr[2]; //获取当前日期的日
      var days = new Date(year, month, 0);
      days = days.getDate(); //获取当前日期中月的天数
      var year2 = year;
      var month2 = parseInt(month) - 1;
      if (month2 == 0) {
        year2 = parseInt(year2) - 1;
        month2 = 12;
      }
      var day2 = day;
      var days2 = new Date(year2, month2, 0);
      days2 = days2.getDate();
      if (day2 > days2) {
        day2 = days2;
      }
      if (month2 < 10) {
        month2 = "0" + month2;
      }
      var t2 = year2 + "-" + month2 + "-" + day2;
      return t2;
    },

    //获取下个月
    getNextMonth(date) {
      var arr = date.split("-");
      var year = arr[0]; //获取当前日期的年份
      var month = arr[1]; //获取当前日期的月份
      var day = arr[2]; //获取当前日期的日
      var days = new Date(year, month, 0);
      days = days.getDate(); //获取当前日期中的月的天数
      var year2 = year;
      var month2 = parseInt(month) + 1;
      if (month2 == 13) {
        year2 = parseInt(year2) + 1;
        month2 = 1;
      }
      var day2 = day;
      var days2 = new Date(year2, month2, 0);
      days2 = days2.getDate();
      if (day2 > days2) {
        day2 = days2;
      }
      if (month2 < 10) {
        month2 = "0" + month2;
      }

      var t2 = year2 + "-" + month2 + "-" + day2;
      return t2;
    },
    lastMonth() {
      let date = this.current + "-01";
      let last = this.getPreMonth(date);
      let str = last.substr(0, 7);

      this.current = str;
      this.isMax = false;

      this.getServiceGoalData();
    },
    nextMonth() {
      if (this.isMax) {
        return false;
      } else {
        let date = this.current + "-01";
        // console.log(date);
        let next = this.getNextMonth(date);
        // console.log(next);
        let today = new Date();
        let currentMonth =
          new Date(date).getFullYear() * 12 + new Date(date).getMonth() + 1;
        let totalMonth = today.getFullYear() * 12 + today.getMonth();
        // console.log(currentMonth, totalMonth);
        if (currentMonth >= totalMonth) {
          // console.log("isMax");

          this.isMax = true;
        }
        let str = next.substr(0, 7);

        this.current = str;

        this.getServiceGoalData();
      }
    },
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },

    initHotMap(points, district) {
      var points = points;
      var district = district;
      // console.log(points);
      // console.log(district);
      let map = new AMap.Map("container", {
        zoom: 9,
        animateEnable: true,
        mapStyle: "amap://styles/grey",
      });
      var count = points.length;

      function clusterMarkers() {
        var markerList = [];
        var marker = new AMap.Marker({
          map: map,
        });
        markerList.push(marker);
        return markerList;
      }

      var clusterIndexSet = {
        city: {
          minZoom: 2,
          maxZoom: 10,
        },
        district: {
          minZoom: 10,
          maxZoom: 12,
        },
        area: {
          minZoom: 12,
          maxZoom: 15,
        },
        community: {
          minZoom: 15,
          maxZoom: 22,
        },
      };

      function getStyle(context) {
        var clusterData = context.clusterData; // 聚合中包含数据
        var index = context.index; // 聚合的条件
        var count = context.count; // 聚合中点的总数
        var marker = context.marker; // 聚合绘制点 Marker 对象
        var color = ["8,60,156", "66,130,198", "107,174,214", "78,200,211"];
        var indexs = ["city", "district", "area", "community"];
        var i = indexs.indexOf(index["mainKey"]);
        var text = clusterData[0][index["mainKey"]];
        var size = Math.round(30 + Math.pow(count / points.length, 1 / 5) * 70);
        if (i <= 2) {
          var extra = '<span class="showCount">' + context.count + "单</span>";
          text = '<span class="showName">' + text + "</span>";
          text += extra;
        } else {
          size = 12 * text.length + 20;
        }
        var style = {
          bgColor: "rgba(" + color[i] + ",.8)",
          borderColor: "rgba(" + color[i] + ",1)",
          text: text,
          size: size,
          index: i,
          color: "#ffffff",
          textAlign: "center",
          boxShadow: "0px 0px 5px rgba(0,0,0,0.8)",
        };
        return style;
      }

      function getPosition(context) {
        var key = context.index.mainKey;
        var dataItem = context.clusterData && context.clusterData[0];
        var districtName = dataItem[key];
        if (!district[districtName]) {
          return null;
        }
        var center = district[districtName].center.split(",");
        var centerLnglat = new AMap.LngLat(center[0], center[1]);
        return centerLnglat;
      }

      function _customRender(data) {
        const keys = Object.keys(data.clusterData);
        let markers = [];
        for (var i = 0; i < keys.length; i++) {
          var key = keys[i];
          var cluster = data.clusterData[key];
          var position = cluster.data[0].lnglat;
          var marker = new AMap.LabelMarker({
            position: position,
            text: {
              content: cluster.data.length.toString(),
              style: {
                fillColor: "#ffffff",
              },
            },
          });
          markers.push(marker);
        }
        return {
          type: "type",
          layer: null,
          markers: markers,
        };
      }

      // 自定义聚合点样式
      function _renderClusterMarker(context) {
        var clusterData = context.clusterData; // 聚合中包含数据
        var index = context.index; // 聚合的条件
        var count = context.count; // 聚合中点的总数
        var marker = context.marker; // 聚合点标记对象
        var styleObj = getStyle(context);
        // 自定义点标记样式
        var div = document.createElement("div");
        div.className = "amap-cluster";
        div.style.backgroundColor = styleObj.bgColor;
        div.style.width = styleObj.size + "px";
        if (styleObj.index <= 2) {
          div.style.height = styleObj.size + "px";
          // 自定义点击事件
          context.marker.on("click", function (e) {
            // console.log(e);
            var curZoom = map.getZoom();
            if (curZoom < 20) {
              curZoom += 1;
            }
            map.setZoomAndCenter(curZoom, e.lnglat);
          });
        }
        div.style.border = "solid 1px " + styleObj.borderColor;
        div.style.borderRadius = styleObj.size + "px";
        div.innerHTML = styleObj.text;
        div.style.color = styleObj.color;
        div.style.textAlign = styleObj.textAlign;
        div.style.boxShadow = styleObj.boxShadow;
        context.marker.setContent(div);
        // 自定义聚合点标记显示位置
        var position = getPosition(context);
        if (position) {
          context.marker.setPosition(position);
        }
        context.marker.setAnchor("center");
      }

      var cluster = new AMap.IndexCluster(map, points, {
        renderClusterMarker: _renderClusterMarker,
        clusterIndexSet: clusterIndexSet,
      });
    },
    getOrderHeatMap() {
      if (this.isEmptyObjVue(this.listQuery3.createTime)) {
        this.$message.warning("请选择日期");
        return false;
      }

      let params = {
        startTime: !this.isEmptyObjVue(this.listQuery3.createTime)
          ? this.listQuery3.createTime[0]
          : "",
        endTime: !this.isEmptyObjVue(this.listQuery3.createTime)
          ? this.listQuery3.createTime[1]
          : "",
        city: this.listQuery3.city,
        serviceStation: this.listQuery3.serviceStation,
        shopName: this.listQuery3.shopName,
      };

      Service.$axiosOrderHeatMap(params).then((res) => {
        if (res.data.errno == 0) {
          let points = res.data.data.points;
          // let district=res.data.data.district;
          let district = JSON.parse(res.data.data.district);

          this.initHotMap(points, district);
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },
    requestFullscreen() {
      const docElm = document.documentElement;
      if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
      } else if (docElm.msRequestFullscreen) {
        docElm.msRequestFullscreen();
      } else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
      } else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
      }
    },
    exitFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.crumbs {
  margin: 0 0 10px 0;
}

#finishCircle {
  min-width: 300px;
  min-height: 300px;
  margin: -30px auto;
  /* padding: 20px; */
}

h1,
h2 {
  font-weight: normal;
}

.el-card {
  overflow-x: scroll;
  min-width: 1200px;
  border-radius: 8px;
}

.module-wrapper {
  display: flex;
  min-width: 1200px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.card-left {
  flex: 1;
  margin-right: 10px;
}

.card-right {
  flex: 1;
}

#mainChart,
#mainChart1,
#mainChart2 {
  /* min-width: 900px; */
  height: 600px;
  margin: 0 auto;
  padding: 10px;
}

.gmv-board,
.sale-board {
  margin: 0 0 10px;
  min-width: 1200px;
}

/* .sale-board {
  height: 300px;
  overflow-y: scroll;
} */
.stock-table {
  height: 300px;
  overflow-y: scroll;
}

.card-module {
  border-radius: 8px;
  background: #fff;
  padding: 20px;
  border: 1px solid #ebeef5;
}

.gmv-board {
  display: flex;
  justify-content: space-between;
}

.gmv-goal {
  margin-right: 10px;
  flex: 1;
}

.gmv-data {
  flex: 2;
}

.grey-line {
  color: #999;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
}

.data-progress {
  border-radius: 12px;
  min-height: 116px;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  margin: 20px 0 0;
  font-size: 13px;
  background: #4dd99b;
  /* background: linear-gradient(315deg, #4dd99b 0%, #79d54e 100%); */
  /* max-width: 800px; */
}

.progress-bottom {
  background: #79d54e;
  /* background: linear-gradient(45deg, #4dd99b 0%, #79d54e 100%); */
}

.data-progress > div {
  flex: 1;
  height: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 24px 0;
  box-sizing: border-box;
}

/* .progress-1 {
  background: linear-gradient(270deg, #22b7ff 0%, #09afff 100%);
}
.progress-2 {
  background: #3abfff;
}
.progress-3 {
  background: #6bcfff;
}
.progress-4 {
  background: #79D2FD;
}
.progress-5 {
  background: #84D7FF;
} */
.bold-font {
  font-weight: bold;
  font-size: 24px;
}

.up-arrow {
  color: #ef583b;
  font-size: 12px;
}

.down-arrow {
  color: #000;
  font-size: 12px;
}

.sale-detail {
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: #333;
  font-size: 13px;
}

.sale-item {
  height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.sale-item .el-button--text {
  padding-bottom: 0;
  color: #333;
}

.sale-item p:first-child {
  font-weight: bold;
  font-size: 14px;
}

.blue-font {
  color: #09afff;
  font-size: 15px;
}

.month-wrapper {
  display: flex;
  justify-content: space-between;
}

.month-select {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.month-select:hover {
  cursor: pointer;
}

.current-month {
  margin: 0 10px;
  color: #09afff;
  font-size: 16px;
}

.month-select .current-month:hover {
  cursor: default;
}

.disable-select {
  color: gray;
}

.stock-title {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #aaa;
  align-items: flex-end;
  margin-bottom: 10px;
}

.card-title {
  color: #333;
  font-size: 16px;
}

#container {
  height: 900px;
  width: 100%;
}
</style>
<style>
.amap-cluster {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
}

.showName {
  font-size: 14px;
}

.showCount,
.showName {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 80%;
}
</style>
