<template>
  <div class="wrap">
    <div v-if="isMobile" class="headWrap">
      <div class="title">KPI.数据看板</div>
      <div class="titleName">{{ current }}-{{supplierName}}</div>
    </div>
    <div v-else class="webHeadWrap" :style="'justify-content:'+(isZd==1 ? 'space-between':'center')">
      <div class="empty" v-if="isZd==1"></div>
      <div class="title">KPI.数据看板<span v-if="isZd==1">--中道救援</span><span v-if="isZd!=1">--{{ current }}</span></div>
      <!--  只有中道账号才显示搜索框  -->
      <div class="searchWrap" v-if="isZd==1">
        <el-date-picker
            v-model="current"
            type="month"
            :clearable="false"
            class="month custom-date-picker"
            @change="monthChangeHandle"
            placeholder="选择月">
        </el-date-picker>
        <el-select
            v-model="supplierId"
            filterable
            remote
            reserve-keyword
            clearable
            placeholder="请输入后选择"
            :remote-method="remoteMethod"
            @change="selectSupplierNameHandle"
            :loading="selectLoading">
          <el-option
              v-for="item in selectOption"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </div>
    </div>
    <van-tabs v-model="active" sticky @click="tabClickHandle">
      <van-tab v-for="(item,index) in tabArr" :key="index" :title="item.name"></van-tab>
      <div v-if="isMobile && !([0,1,2,3].includes(active))" class="tipArrow left">{{ leftArr }}</div>
      <div v-if="isMobile && !([7,8, 9].includes(active))" class="tipArrow right">>>></div>
    </van-tabs>
    <div v-loading="loadingData" :class="{'contentWrap':true,'webcontentWrap':!isMobile}" v-if="active===0">
      <!--<div :class="{'reciceOrder':true,'webCom':!isMobile}">
        <div :class="{'title':true,'webTitle':!isMobile}">接单指标</div>
        <div class="reciceOrderIWrap">
          <div class="left common">
            <div class="num">{{ formatCurrency(indexData?.receiveOrderCount) }}</div>
            <div class="itemTitle">承接案件量</div>
          </div>
          <div class="center common" @click="clickJumpHandle(5)">
            <div class="num" :class="{'numRed': Number(indexData?.refuseOrderRate) >= 5, 'numGreen': Number(indexData?.refuseOrderRate) < 5 }">{{ indexData && indexData.refuseOrderRate }}%</div>
            <div class="itemTitle" style="cursor: pointer">拒单率 ></div>
          </div>
          <div class="right common" @click="clickJumpHandle(6)">
            <div class="num" :class="{'numRed': Number(indexData?.timeoutOrderRate) >= 5, 'numGreen': Number(indexData?.timeoutOrderRate) < 5 }">{{ indexData && indexData.timeoutOrderRate }}%</div>
            <div class="itemTitle"  style="cursor: pointer">超时率 ></div>
          </div>
        </div>
      </div>-->
      <div :class="{'reciceOrder':true,'webCom':!isMobile,'evaluate':isMobile}">
        <div class="title">客户评价</div>
        <div class="reciceOrderIWrap" v-if="indexData">
          <circle-char  ref="Doughnut1"  :data="indexData && indexData.complainOrderRate" :title-text="'投诉率'" :bg-color="Number(indexData?.complainOrderRate || 0) <= 0.1 ? 'green' : 'red'"
                       :is-store="false" @clickComplain="clickJumpHandle(7)"></circle-char>
          <circle-char v-if="false"  ref="Doughnut2" :data="indexData && indexData.pinganFavorableRate" :title-text="'平安好评率'" :is-store="false"
                       :bg-color="Number(indexData?.pinganFavorableRate || 0) >= 99.4 ? 'green' : 'red'"></circle-char>
          <circle-char  ref="Doughnut3" :data="indexData && indexData.urgeRate" :title-text="'催促率'"
                       :bg-color="Number(indexData?.urgeRate || 0) >= 3 ? 'red' : 'green'"></circle-char>
        </div>
      </div>
      <div :class="{'reciceOrder':true,'webCom':!isMobile,'appUse':isMobile}">
        <div class="title">APP使用</div>
        <div class="reciceOrderIWrap" v-if="indexData">
          <circle-char  ref="Doughnut4" :data="indexData && indexData.appRate" :title-text="'APP使用率'" :bg-color="Number(indexData?.appRate || 0) >= 95 ? 'green' : 'red'"
                       :is-store="false"
                       @clickUse="clickJumpHandle(8)"></circle-char>
          <circle-char  ref="Doughnut5" :data="indexData && indexData.threeMinutesContactRate" :title-text="'3′联系客户率'" :bg-color="Number(indexData?.threeMinutesContactRate || 0) >= 90 ? 'green' : 'red'"></circle-char>
          <circle-char  ref="Doughnut6" :data="indexData && indexData.wholeJuheSuccessRate" :title-text="'总聚合成功率'" :is-store="false" :bg-color="Number(indexData?.wholeJuheSuccessRate || 0) >= 80 ? 'green' : 'red'"></circle-char>
        </div>
      </div>
      <div :class="{'reciceOrder':true,'webCom':!isMobile}">
        <div :class="{'title':true,'webTitle':!isMobile}">时效</div>
        <div class="reciceOrderIWrap">
          <div class="left common">
            <div class="num" :class="{'numRed': Number(indexData?.receiving) > 5, 'numGreen': Number(indexData?.receiving) <= 5 }">{{ indexData && indexData.receiving }}</div>
            <div class="itemTitle">接单时效(分)</div>
          </div>
          <div class="line" v-if="false"></div>
          <div class="center common"  v-if="false">
            <div class="num" :class="{'numRed': Number(indexData?.pinganJuheSuccessArriving) > 22, 'numGreen': Number(indexData?.pinganJuheSuccessArriving) <= 22 }">{{ indexData && indexData.pinganJuheSuccessArriving }}</div>
            <div class="itemTitle">平安聚合成功到达时效(分)</div>
          </div>
          <div class="line"></div>
          <div class="right common">
            <div class="num" :class="{'numRed': Number(indexData?.arriving) > 40, 'numGreen': Number(indexData?.arriving) <= 40 }">{{ indexData && indexData.arriving }}</div>
            <div class="itemTitle">到达时效(分)</div>
          </div>
        </div>
      </div>
      <div :class="{'reciceOrder':true,'webCom':!isMobile,'store':isMobile}">
        <div class="scoreTitle">
          <div>
            <span class="title" style="margin-right: 15px">综合打分</span>
            <el-button v-if="!isMobile && isBtn && supplierId" size="mini" type="primary" @click="applicateHandle">信息变更申请</el-button>
          </div>
          <i class="el-icon-question" @click.prevent="showScoreChart = !showScoreChart"></i>
        </div>
        <div class="storeWrap" v-if="indexData">
          <circle-char v-show="showScoreChart"  ref="Doughnut7" :data="indexData && indexData.score" :bg-color="Number(indexData?.score || 0) >= 60 ? 'green' : 'red'" :is-store="true"></circle-char>
          <div  v-show="!showScoreChart"  class="detailScore">
            <div class="left">
<!--              <div><span class="defen">接单得分:</span></div>-->
              <div><span class="defen">接单时效得分:</span></div>
              <div><span class="defen">到达时效得分:</span></div>
              <div><span class="defen">聚合成功率得分:</span></div>
              <div><span class="defen">APP使用率得分:</span></div>
              <div><span class="defen">催促率得分:</span></div>
              <div><span class="defen">投诉率得分:</span></div>
              <div><span class="defen">超时率得分:</span></div>
              <div><span class="defen">拒单率得分:</span></div>
              <div><span class="defen">3'联系率得分:</span></div>
            </div>
            <div class="right">
<!--              <div><span>{{ indexData.orderScore }}</span></div>-->
              <div><span>{{ indexData.orderAgeingScore }}</span></div>
              <div><span>{{ indexData.arriveAgeingScore }}</span></div>
              <div> <span>{{ indexData.polymerizationSuccessScore }}</span></div>
              <div> <span>{{ indexData.appUseScore }}</span></div>
              <div> <span>{{ indexData.urgeScore }}</span></div>
              <div><span>{{ indexData.urgeScore }}</span></div>
              <div> <span>{{ indexData.timeOutScore }}</span></div>
              <div> <span>{{ indexData.refuseOrderScore }}</span></div>
              <div><span>{{ indexData.threeMinutesContactSocre }}</span></div>
            </div>
          </div>
        </div>
      </div>
      <div :class="{'allDataChartWrap':true,'webComAllData':!isMobile,'store':isMobile}">
        <div  class="allDataChart" id="allDataChart" ></div>
      </div>
      <div v-if="isMobile" style="padding: 20px"></div>
    </div>
    <div v-loading="loadingData" class="contentWrap monthTotal" v-if="active===1">
      <div :class="{'tabWrap':true,'webTabWrap':!isMobile}">
        <div v-for="(item,index) in list" :class="activeIndex===index ? 'active' : ''" :key="index"
             @click="changeTab(index)">{{ item.name }}
        </div>
      </div>
      <div :class="{'chartWrapWeb':!isMobile,'comChart':true}">
        <template v-if="isMobile">
          <div v-if="active==1" style="width: 100%">
            <div id="chartWrap" style="width: 100%;height:300px"></div>
          </div>
          <div v-if="activeIndex==2" class="selectWrap">
            <el-select v-model="value" @change="changeHandle">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </div>
        </template>
        <template v-else>
          <div v-if="[0,1].includes(activeIndex)">
            <div id="chartWrap" style="width: 100%;height:300px"></div>
          </div>
          <div v-else style="width: 100%;display: flex;justify-content: space-between">
            <div id="chartWrap" style="width: 47%;height:300px"></div>
            <div class="webSwitch">
              <el-switch
                  @change="switchHandle"
                  class="swithContainer"
                  v-model="swithVal"
                  active-text="拖车"
                  inactive-color="#409EFF"
                  inactive-text="小修">
              </el-switch>
              <div id="chartWrap1" style="width: 100%;height:300px"></div>
            </div>
          </div>
        </template>
      </div>
      <div :class="{'webTab':!isMobile,}">
        <noFit-table v-if="isMobile" :active='active'  :is-mobile='isMobile' :table-data="etlDetailList" :label-list="etlLabelList"></noFit-table>
        <noFit-table v-else :active='active'  :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"></noFit-table>
     </div>
    </div>
    <div v-loading="loadingData" class="contentWrap  monthTotal" v-if="[2,3,4].includes(active)">
      <div class="searchDriverName" v-if="[3,4].includes(active)">
        <el-select
            v-model="driverName"
            filterable
            remote
            clearable
            reserve-keyword
            placeholder="请输入后选择"
            :remote-method="driverremoteMethod"
            @change="getData"
            :loading="driverselectLoading"
            :style="isMobile ? 'width:100%' : 'width:50%'"
        >
          <el-option
              v-for="item in driverselectOption"
              :key="item.id"
              :label="item.name"
              :value="item.name">
          </el-option>
        </el-select>
      </div>
      <div :class="{'tabWrap':true,'webTabWrap':!isMobile,'mobileTab':isMobile}">
        <div v-for="(item,index) in (active===3 ? driverList : list)" :class="activeIndex===index ? 'active' : ''"
             :key="index"
             @click="changeTab(index)">{{ item.name }}
        </div>
      </div>
      <div :class="{'comTab':active !== 3,'comTabActive3':active === 3}">
        <noFit-table :active='active'  :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"></noFit-table>
      </div>
      <el-pagination
          small
          v-if="active !== 2"
          :page-sizes="[20, 50, 100]"
          :current-page.sync="pageNum"
          :page-size.sync="pageSize"
          @current-change="getKpiData"
          @size-change="getKpiData"
          layout="prev, pager, next,sizes"
          :total="total">
      </el-pagination>
    </div>
    <div v-loading="loadingData" class="contentWrap  monthTotal" v-if="[5,6,7,8,9].includes(active)">
      <div :class="{'comTab':true,'detailTable':isMobile}">
        <noFit-table :active='active'  :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"
                     ></noFit-table>
      </div>
      <el-pagination
          v-if="active !== 8"
          small
          :page-sizes="[20, 50, 100]"
          :current-page.sync="pageNum"
          :page-size.sync="pageSize"
          @current-change="getKpiData"
          @size-change="getKpiData"
          layout="prev, pager, next,sizes"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import dayjs from "dayjs";
import {
  getKpiDetailsData,
  getStatisticsKpiByMonth,
  getStatisticsKpi,
  getSupplierId,
  getDriverName,getDriverStatisticsKpi,
  getRecentSupplierKpi,
} from "@/api/kpi.js"
import { getUserBO } from "@/api/order"
// querySupplierDriverStatisticsScore
import {myMixins} from "@/utils/myMixins"
import CircleChar from "@/views/kpi/components/circleChar.vue";
import NoFitTable from "@/views/kpi/components/noFit-table.vue";

export default {
  name: "kpiIndex",
  components: {CircleChar, NoFitTable},
  computed: {},
  mixins: [myMixins],
  data() {
    return {
      active:0,
      activeIndex: 0,
      //
      tabArr: [
        {name: '总览',value:0}, {name: '月/总'}, {name: '日/总'},{name: '月/师傅'}, {name: '日/师傅'},  /*{name: '拒单明细'},*/
        /*{name: '超时明细'},*/ {name: '催促明细'},{name: '投诉明细'}, {name: '不使用APP案件明细'}, {name: '车辆在线情况'} , {name: '聚合失败案件明细'}
      ],
      list: [ {name: '服务评价'}, {name: 'APP使用情况'}, {name: ' 时效 '}],
      // driverList: [{name: '得分总览'},{name: '接单情况'}, {name: '服务评价'}, {name: 'APP使用情况'}, {name: '时效 '}],
    // {name: '接单情况'},
    driverList: [{name: '服务评价'}, {name: 'APP使用情况'}, {name: '时效 '}],//story#7149,要求暂时隐藏得分总览

      startMonthTime: '',
      startTime: '',
      endTime: '',
      indexData: {},
      detailList: [],
      labelList: [],
      etlDetailList: [],
      etlLabelList: [],
      loading: false,
      loadingData: false,
      v1: [],
      v2: [],
      v3: [],
      v4: [],
      v5: [],
      v6: [],
      v7: [],
      v8: [],
      xAxisArr: [],
      isMobile: false,
      isZd: '',
      current:'2024-10',
      supplierName:'',
      value: '1',
      options: [
        {value: '1', label: '师傅接单时效'},
        {value: '2', label: '到达时效'},
      ],
      pageNum: 1,
      pageSize: 20,
      total: 0,
      swithVal: true,
      supplierId:'',
      selectLoading: false,
      selectOption: [],
      driverId:'',//68517
      driverName:'',
      driverselectLoading: false,
      driverselectOption: [],
      leftArr:'<<<',
      showScoreChart:true,
      continueMonthKpi:[],
      isBtn:false,//是否有信息变更申请按钮权限
      source: 'App',
      currentSupplierId: '',
      userId: '',
      enterTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    }
  },
  created() {
    this.checkMobile();
    const urlParams = new URLSearchParams(window.location.search);
    this.isZd = urlParams?.get('isZd') || ''
    this.supplierId = urlParams?.get('supplierId') || ''
    this.isBtn= Number(urlParams?.get('isBtn'))
    this.source = urlParams?.get('source') || 'App'
  },
  async mounted() {
    await this.checkMobile();
    await this.initDate();
    await this.selectSupplierNameHandle();
    await this.getUserInfo();
    document.addEventListener('visibilitychange', async (  ) => {
      let state = document.visibilityState
      if (state == 'hidden') {  // 用户离开了
        if( this.source == 'App' ) {
          this.setLogHandler({
            supplierId: this.currentSupplierId,      // 服务商 id
            userId: this.userId,              // userId
            source: '服务商KPI',
            event: this.source,               // 区分 App 还是 system
            openTime: this.enterTime,   // log 时间，其中 阅读时长是由 enter 和 leave 的时间计算而来
            leaveTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
          });
        }
      }
      if (state == 'visible') {
        this.enterTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
      }
    });


  },
  methods: {
    async getUserInfo() {
      let res = await getUserBO();
      this.userId = res.data.id;
      this.currentSupplierId = res.data.supplierId
      console.log('getUserBO', res)
    },
    applicateHandle() {
      if (window.parent) {
        const hasListener = window.parent.dispatchEvent(new Event('checkCloseDialog'));
        if (hasListener) {
          const data = {
            action: 'closeDialog',
            message: this.supplierId,
            // 其他需要传递的参数
          };
          window.parent.postMessage(data, '*');
          // window.parent.postMessage('closeDialog', '*');
        } else {
          window.history.back();
        }
      }
    },
    monthChangeHandle(value){
      if (value) {
        this.current = dayjs(new Date(value)).format('YYYY-MM')
        const _tempDate = dayjs(new Date(value)).format('YYYY-MM-DD')
        const lastDay = dayjs(_tempDate).endOf('month');
        this.startTime = `${this.current}-01 00:00:00`;
        this.endTime = `${this.current}-${this.padZero(lastDay.date())} 23:59:59`;
        this.startMonthTime=this.getStartTimeFromEndTime(this.endTime)
        this.selectSupplierNameHandle();
        if(this.active===1){
          this.tabClickHandle()
        }
      }
    },
    padZero(num) {
      return num < 10 ? `0${num}` : num;
    },
    async selectSupplierNameHandle(){
      await this.getData()
      if(this.active !== 0){
        return
      }
      this.$refs.Doughnut1.initCircle()
      // this.$refs.Doughnut2.initCircle()
      this.$refs.Doughnut3.initCircle()
      this.$refs.Doughnut4.initCircle()
      this.$refs.Doughnut5.initCircle()
      this.$refs.Doughnut6.initCircle()
      this.$refs.Doughnut7.initCircle()
    },
    async remoteMethod(query) {
      if (query !== '') {
        this.selectLoading = true;
        try {
          const result = await getSupplierId(query);
          this.selectOption = result.data || []
        } catch (error) {
          console.error('Error fetching data:', error);
          this.selectOption = [];
        } finally {
          this.selectLoading = false;
        }
      } else {
        this.selectOption = [];
      }
    },
    async driverremoteMethod(query){
      if (query !== '') {
        this.driverselectLoading = true;
        try {
          const result = await getDriverName(query);
          this.driverselectOption = result.data || []
        } catch (error) {
          this.driverselectOption = [];
        } finally {
          this.driverselectLoading = false;
        }
      } else {
        this.driverselectOption = [];
      }
    },
    async changeHandle() {
      this.v1=[]
      this.v2=[]
      await this.twoTabHanldeData();
      await this.drawLine();
    },
    async switchHandle() {
      await this.getData();
      await this.drawLine1();
    },
    async getData() {
      try {
        this.loadingData = true
        this.indexData = {}
        this.total=0
        this.pageNum=1
        this.v1 = []
        this.v2 = []
        this.v3 = []
        this.v4 = []
        this.v5 = []
        this.v6 = []
        this.v7 = []
        this.v8 = []
        this.xAxisArr = []
        this.etlDetailList=[]
        this.etlLabelList=[]
        this.continueMonthKpi=[]
        await this.getKpiData()
        this.loadingData = false
      } finally {
        this.loadingData = false
      }
    },
    // 格式化承接案件量数据
    formatCurrency(value) {
      if (!value) return '';
      let num = parseInt(value);
      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    },
    formatCurrency1(value) {
      if (!value) return ''; // 如果值为空，返回空字符串
      // 如果值已经包含逗号，直接返回原值
      if (value.toString().includes(',')) {
        return value;
      }
      // 否则，添加千分号
      let num = parseInt(value);
      if (isNaN(num)) return ''; // 如果转换失败，返回空字符串
      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    },
    async clickJumpHandle(type) {
      this.loading = true
      this.active = type;
      await this.tabClickHandle();
    },
    tabClickHandle() {
      this.activeIndex = 0;
      this.detailList = [];
      this.labelList = [];
      this.driverName=''
      this.selectSupplierNameHandle();
      if (this.active === 1) {
        setTimeout(() => {
          this.drawLine()
          if (!this.isMobile && this.activeIndex === 3) {
            this.drawLine1()
          }
        }, 1000)
      }
    },
    drawLine() { // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('chartWrap'))
      let option;
      //接单指标
      /*let series1 = [{
        name: '派遣案件量',
        type: 'bar',
        data: this.v1?.map(item => Number(item?.toString()?.replace(/,/g, ''))),
        yAxisIndex: 0,
        smooth: true,
        barWidth: this.isMobile ? 35 : 60,
        label: {
          show: true, // 显示标签
          position: 'top', // 标签位置在柱形顶部
          formatter: (params) => {
            return params.value.toLocaleString();
          }
        }
      },
        {
          name: '拒单率',
          type: 'line',
          smooth: true,
          data: this.v2,
          yAxisIndex: 1,
          label: {
            show: true,
            position: 'top',
            formatter: '{c}%'
          },
        },
        {
          name: '超时率',
          type: "line",
          data: this.v3,
          yAxisIndex: 1,
          smooth: true,
          label: {
            show: true,
            position: 'top',
            formatter: '{c}%'
          },
        },
        // {
        //   name: '客户取消率',
        //   type: "line",
        //   data: this.v4,
        //   yAxisIndex: 1,
        //   smooth: true,
        //   label: {
        //     show: true,
        //     position: 'top',
        //     formatter: '{c}%'
        //   },
        // },
      ]*/
      let series2 = [
        {
          name: '投诉率',
          type: "line",
          data: this.v2,
          smooth: true,
          yAxisIndex: 0,
          label: {
            show: true,
            position: 'top',
            formatter: '{c}%'
          },
        },
        {
          name: '好评率',
          type: 'line',
          smooth: true,
          data: this.v4,
          yAxisIndex: 0,
          label: {
            show: true,
            position: 'top',
            formatter: '{c}%'
          },
        },
      ]
      /*let series3 = [
        {
          name: 'APP使用率',
          type: 'line',
          data: this.v1,
          yAxisIndex: 0,
          smooth: true,
          label: {
            show: true, // 显示标签
            position: 'top', // 标签位置在柱形顶部
            formatter: '{c}%'
          }
        },
        {
          name: '3′联系客户率',
          type: 'line',
          smooth: true,
          data: this.v2,
          yAxisIndex: 0,
          label: {
            show: true,
            position: 'top',
            formatter: '{c}%'
          },
        },
        {
          name: '平安成功率',
          type: "line",
          data: this.v3,
          yAxisIndex: 0,
          smooth: true,
          label: {
            show: true,
            position: 'top',
            formatter: '{c}%'
          },
        },
        {
          name: '中华成功率',
          type: "line",
          data: this.v4,
          yAxisIndex: 0,
          smooth: true,
          label: {
            show: true,
            position: 'top',
            formatter: '{c}%'
          },
        },
        {
          name: '中道成功率',
          type: "line",
          data: this.v5,
          yAxisIndex: 0,
          smooth: true,
          label: {
            show: true,
            position: 'top',
            formatter: '{c}%'
          },
        },
        {
          name: '总成功率',
          type: "line",
          data: this.v6,
          yAxisIndex: 0,
          smooth: true,
          label: {
            show: true,
            position: 'top',
            formatter: '{c}%'
          },
        },
      ]*/
      /*let series4 = [{
        name: '接单时效(分)',
        type: 'bar',
        data: this.v1,
        yAxisIndex: 1,
        smooth: true,
        barWidth: this.isMobile ? 35 : 60,
        label: {
          show: true, // 显示标签
          position: 'top', // 标签位置在柱形顶部
        }
      },
        {
          name: '3分钟接单率',
          type: 'line',
          smooth: true,
          data: this.v2,
          yAxisIndex: 0,
          label: {
            show: true,
            position: 'top',
            formatter: '{c}%'
          },
        },
      ]*/
      let series4 = [
        {
          name: '接单时效(分)',
          type: 'line',
          smooth: true,
          data: this.v1,
          yAxisIndex: 0,
          label: {
            show: true,
            position: 'top',
          },
        },
      ]
      let series5 = [{
        name: '到达时效（分）',
        type: 'bar',
        data: this.v1,
        yAxisIndex: 1,
        smooth: true,
        barWidth: this.isMobile ? 25 : 10,
        label: {
          show: true, // 显示标签
          position: 'top', // 标签位置在柱形顶部
        }
      },
        {
          name: '聚合成功到达时效',
          type: 'bar',
          data: this.v2,
          yAxisIndex: 1,
          smooth: true,
          barWidth: this.isMobile ? 25 : 50,
          label: {
            show: true, // 显示标签
            position: 'top', // 标签位置在柱形顶部
          }
        },
        {
          name: '40分钟到达率',
          type: 'line',
          smooth: true,
          data: this.v3,
          yAxisIndex: 0,
          label: {
            show: true,
            position: 'top',
            formatter: '{c}%'
          },
        },
      ]
      /*let yAxis1 = [
        {type: 'value'},
        {
          type: 'value',
          axisLabel: {
            formatter: '{value}%'
          }
        },
      ]*/
      let yAxis2 = [
        {
          type: 'value',
          axisLabel: {
            formatter: '{value}%'
          }
        } ]
      /*let yAxis3 = [
        {
          type: 'value',
          axisLabel: {
            formatter: '{value}%'
          }
        },
      ]*/
      let yAxis4 = [
        {type: 'value'},
      ]
      let yAxis5 = [
        {
          type: 'value',
          axisLabel: {
            formatter: '{value}%'
          }
        },
        {type: 'value'},
      ]
      let series = []
      let yAxis = []
      if (this.active === 1) {
       /* if (this.activeIndex === 0) {
          series = series1
          yAxis = yAxis1
        } else*/
          if (this.activeIndex === 0) {
          series = series2
          yAxis = yAxis2
        } else if (this.activeIndex === 1) {
          series = []
          yAxis = []
        } else if (this.activeIndex === 2) {
          if (this.value == 1) {
            series = series4
            yAxis = yAxis4
          } else {
            series = series5
            yAxis = yAxis5
          }
        }
      }
      option = {
        title: {
          text: this.isMobile ? this.getTitle(this.activeIndex) : (this.active === 1 && this.activeIndex === 1) ? '' : '师傅接单时效',
          textStyle: {
            fontSize: 12
          },
        },
        legend: {
          textStyle: {
            fontSize: this.isMobile ? 8 : ''
          },
          right: '1%',
          itemWidth: this.isMobile ? 10 : 18, // 设置图例图标的宽度，从而调整图标大小
          itemHeight: this.isMobile ? 6 : 10,
          width: (this.active == 1 && this.activeIndex == 1) ? '60%' : '100%',
        },
        xAxis: {
          type: 'category',
          data: this.xAxisArr,
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '6%',
          containLabel: true
        },
        yAxis: yAxis,
        series: series,
      };
      option && myChart.setOption(option, true);
    },
    drawLine1() {
      let myChart = echarts.init(document.getElementById('chartWrap1'))
      let option;
      option = {
        title: {
          text: '到达时效',
          textStyle: {
            fontSize: 12
          },
        },
        legend: {
          right: '1%',
          itemWidth: 18, // 设置图例图标的宽度，从而调整图标大小
          itemHeight: 10,
        },
        xAxis: {
          type: 'category',
          data: this.xAxisArr,
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '6%',
          containLabel: true
        },
        yAxis: [
          {type: 'value'},
        ],
        series: [{
          name: '到达时效',
          type: 'line',
          data: this.v3,
          yAxisIndex: 0,
          smooth: true,
          label: {
            show: true, // 显示标签
            position: 'top', // 标签位置在柱形顶部
          }
        },
          {
            name: '平安聚合成功到达时效',
            type: 'line',
            data: this.v4,
            smooth: true,
            yAxisIndex: 0,
            barWidth: 45,
            label: {
              show: true, // 显示标签
              position: 'top', // 标签位置在柱形顶部
            }
          },
          /*{
            name: '40分钟到达率',
            type: 'line',
            smooth: true,
            data: this.v5,
            yAxisIndex: 0,
            label: {
              show: true,
              position: 'top',
              formatter: '{c}%'
            },
          },*/
        ]
      };
      option && myChart.setOption(option, true);
    },
    async allDataChart(){
      let res = await getRecentSupplierKpi({
        startTime: this.startTime,
        endTime: this.endTime,
        statisticsType: 1,
        supplierId: this.supplierId,
        driverId: this.driverId,
        driverName:this.driverName,
      });
      this.continueMonthKpi=res.data;
      // 初始化 v1 ,v2数组，长度为 12，初始值为 0
      let v1 = new Array(12).fill(0);
      let v2 = new Array(12).fill(0);
      if( this.continueMonthKpi.length>0){
        this.continueMonthKpi.forEach(item=>{
          let month = parseInt(item.statisticsDate?.split('-')[1], 10) - 1; // 获取月份，并转换为数组索引
          v1[month] = item.dispatchOrderCount;
          v2[month] = item.orderScore;
        })
      }
      let myChart = echarts.init(document.getElementById('allDataChart'))
      let option = {
        grid: {
          top: '15%',
          bottom: '12%',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {  },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value}',
              rotate: 45,
              margin: 2
            }
          },
          {
            type: 'value',
            axisLabel: {
              formatter: '{value}',
            }
          }
        ],
        series: [
          {
            name: '案件量',
            type: 'bar',
            yAxisIndex: 0,
            data:v1
          },
          {
            name: '总分',
            type: 'line',
            yAxisIndex: 1,
            data: v2
          }
        ]
      };
      option && myChart.setOption(option, true);
    },
    // 通用函数，用于处理百分比数据
    processPercentage(value) {
      value *= 100;
      if (value % 1 !== 0) {
        value = value.toFixed(2);
      }
      return value;
    },
    async getKpiData() {
      try {
        this.loading = true
        if (this.active === 0) {//总览
          await this.allDataChart()
          let res = await getStatisticsKpiByMonth({
            startTime: this.startTime,
            endTime: this.endTime,
            statisticsType: 1,
            supplierId: this.supplierId,
          });
          if(!res.data){
            return
          }
          this.indexData = res.data;
          this.supplierName=res.data?.supplierName
          // 需要处理的属性名数组
          const propertiesToProcess = [
            'refuseOrderRate',
            'timeoutOrderRate',
            'complainOrderRate',
            'customerSatisfaction',
            'threeMinutesContactRate',
            'urgeRate',
            'appRate',
            'polymerizationSuccessRate',
            'pinganFavorableRate',
            'wholeJuheSuccessRate',
          ];
          for (let key in this.indexData){
            if (propertiesToProcess.includes(key)) {
              this.indexData[key] = this.processPercentage(this.indexData[key]);
            }
          }
        } else if ([1, 2].includes(this.active)) {//月总 日总
          let res = await getStatisticsKpi({
            startTime: this.active === 1 ? this.startMonthTime : this.startTime,
            endTime: this.endTime,
            statisticsType: this.active === 1 ? 1 : 2,
            supplierId: this.supplierId,
          })
          this.detailList = res.data?.map(item => {
            item.refuseOrderRate=this.formatPercentage(item.refuseOrderRate) ;
            item.timeoutOrderRate=this.formatPercentage(item.timeoutOrderRate) ;
            item.cancelRate=this.formatPercentage(item.cancelRate) ;
            item.urgeRate=this.formatPercentage(item.urgeRate) ;
            item.favorableRate=this.formatPercentage(item.favorableRate) ;
            item.pinganEvaluateRate = this.formatPercentage(item.pinganEvaluateRate) ;
            item.complainOrderRate=this.formatPercentage(item.complainOrderRate) ;
            item.pinganFavorableRate=this.formatPercentage(item.pinganFavorableRate) ;
            item.customerEvaluateRate=this.formatPercentage(item.customerEvaluateRate) ;
            item.appRate=this.formatPercentage(item.appRate) ;
            item.threeMinutesContactRate=this.formatPercentage(item.threeMinutesContactRate) ;
            item.pinganPolymerizationSuccessRate=this.formatPercentage(item.pinganPolymerizationSuccessRate) ;
            item.zhonghuaPolymerizationSuccessRate=this.formatPercentage(item.zhonghuaPolymerizationSuccessRate) ;
            item.wholeJuheSuccessRate = this.formatPercentage(item.wholeJuheSuccessRate) ;
            item.zdPolymerizationSuccessRate=this.formatPercentage(item.zdPolymerizationSuccessRate) ;
            item.polymerizationSuccessRate=this.formatPercentage(item.polymerizationSuccessRate) ;
            item.threeMinutesReceivingRate=this.formatPercentage(item.threeMinutesReceivingRate) ;
            item.fortyMinutesArrivalRate=this.formatPercentage(item.fortyMinutesArrivalRate) ;
            item.customerSatisfaction=this.formatPercentage(item.customerSatisfaction) ;
            item.trailFortyMinutesArrivalRate=this.formatPercentage(item.trailFortyMinutesArrivalRate) ;
            item.minorFortyMinutesArrivalRate=this.formatPercentage(item.minorFortyMinutesArrivalRate) ;
            let formatVal = dayjs(item.statisticsDate).format('DD');
            let formatVal1 = dayjs(item.statisticsDate).format('M');
            return {...item, date: formatVal, month: formatVal1 + '月'};
          });
          this.loading = false
          this.detailList?.map(item => {
            this.xAxisArr.push(item.month)
            this.xAxisArr = [...new Set(this.xAxisArr)]; // 去重
          })
          await this.twoTabHanldeData()
        } else if ([3,4].includes(this.active)) {//月师傅 日师傅
          let res = await getDriverStatisticsKpi({
            startTime: this.startTime ,
            endTime: this.endTime,
            statisticsType:this.active === 4 ? 1 : 2,
            supplierId: this.supplierId,
            driverId: this.driverId,
            driverName:this.driverName,
            pageNum: this.pageNum,
            pageSize: this.pageSize
          })
          this.total = res.total
          this.detailList = res.data?.map(item => {
            item.refuseOrderRate=this.formatPercentage(item.refuseOrderRate) ;
            item.timeoutOrderRate=this.formatPercentage(item.timeoutOrderRate) ;
            item.cancelRate=this.formatPercentage(item.cancelRate) ;
            item.complainOrderRate=this.formatPercentage(item.complainOrderRate) ;
            item.customerEvaluateRate=this.formatPercentage(item.customerEvaluateRate) ;
            item.appRate=this.formatPercentage(item.appRate) ;
            item.threeMinutesContactRate=this.formatPercentage(item.threeMinutesContactRate) ;
            item.pinganPolymerizationSuccessRate=this.formatPercentage(item.pinganPolymerizationSuccessRate) ;
            item.zhonghuaPolymerizationSuccessRate=this.formatPercentage(item.zhonghuaPolymerizationSuccessRate) ;
            item.zdPolymerizationSuccessRate=this.formatPercentage(item.zdPolymerizationSuccessRate) ;
            item.polymerizationSuccessRate=this.formatPercentage(item.polymerizationSuccessRate) ;
            item.threeMinutesReceivingRate=this.formatPercentage(item.threeMinutesReceivingRate) ;
            item.fortyMinutesArrivalRate=this.formatPercentage(item.fortyMinutesArrivalRate) ;
            item.customerSatisfaction=this.formatPercentage(item.customerSatisfaction) ;
            let formatVal = dayjs(item.statisticsDate).format('DD');
            return {...item, date: formatVal};
          });
          this.loading = false;
         /* if(this.active===5 && !this.driverName){
            this.detailList=[]
            this.total=0
          }*/
          await this.twoTabHanldeData();
        }
    /*    else if (this.active ===7) {
          let res = await querySupplierDriverStatisticsScore({
            startTime: this.startTime ,
            endTime: this.endTime,
            statisticsType: 1,
            supplierId: this.supplierId,
            driverId: this.driverId,
            driverName:this.driverName,
            pageNum: this.pageNum,
            pageSize: this.pageSize
          })
          this.total = res.total
          this.detailList = res.data?.map(item => {
            let formatVal = dayjs(item.statisticsDate).format('DD');
            return {...item, date: formatVal};
          });

          this.loading = false;
        } */
        else if ([ 5,6,7, 8,9].includes(this.active)) {
          this.detailList = []
          this.labelList = []
          let result = await getKpiDetailsData({
            startTime: this.startTime,
            endTime: this.endTime,
            searchType: this.setType(this.active),
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            supplierId:this.supplierId
          });
          this.total = result.total
          this.detailList = result.data?.map(item => {
            let formatVal =item.createTime ? dayjs(item.createTime).format('DD') : '';
            return {...item, date: formatVal};
          });
          this.loading = false
          /*if (this.active === 5) {//拒单明细
            this.labelList = [
              {label: '案件编号', prop: 'orderCode'},
              {label: '服务内容', prop: 'serviceName'},
              {label: '拒单供应商', prop: 'supplierName'},
              {label: '拒单车辆名称', prop: 'vehicleName'},
              {label: '拒单师傅', prop: 'driverName'},
              {label: '拒绝时间', prop: 'time'},
              {label: '拒单原因', prop: 'reason'},
            ]
          } else if (this.active === 6) {//超时明细
            this.labelList = [
              {label: '案件编号', prop: 'orderCode'},
              {label: '服务内容', prop: 'serviceName'},
              {label: '超时供应商', prop: 'supplierName'},
              {label: '超时车辆名称', prop: 'vehicleName'},
              {label: '超时师傅', prop: 'driverName'},
              {label: '超时时间', prop: 'time'},
              {label: '超时原因', prop: 'reason'},
            ]
          } else */
            if (this.active === 5) {//催促明细
            this.labelList = [
              {label: '案件编号', prop: 'orderCode'},
              {label: '二级合同名称', prop: 'contractName'},
              {label: '案件创建时间', prop: 'orderCreateTime'},
              {label: '催促创建时间  ', prop: 'urgeTime'},
              {label: '服务商接单时间  ', prop: 'taskAcceptTime'},
              {label: '备注内容(催促内容)  ', prop: 'urgeRemark'},
              {label: '催促次数', prop: 'urgeCount'},//无催促次数，催促一次生成一条新的
              {label: '服务商名称', prop: 'supplierName'},
              {label: '服务车辆', prop: 'vehicleName'},
              {label: '服务完成状况', prop: 'orderStatusString'},
              {label: '案件完成时间', prop: 'finishTime'},
              {label: '省(B)', prop: 'bprovince'},
              {label: '市(B)', prop: 'bcity'},
              {label: '区(B)', prop: 'area'},
            ]
          } else if (this.active === 6) {//投诉明细
            this.labelList = [
              {label: '案件编号', prop: 'orderCode'},
              {label: '服务内容', prop: 'serviceName'},
              {label: '责任供应商', prop: 'supplierName'},
              {label: '投诉时间', prop: 'complainCreateTime'},
              {label: '投诉类型', prop: 'complainTypeString'},
              {label: '责任供应商扣罚金额', prop: 'compensateFee'},
            ]
          } else if (this.active === 7) {//不使用App案件明细
            this.labelList = [
              {label: '案件编号', prop: 'orderCode'},
              {label: '服务内容', prop: 'serviceName'},
              {label: '供应商', prop: 'supplierName'},
              {label: '车辆', prop: 'driverName'},
              {label: '案件创建时间', prop: 'orderCreateTime'},
              {label: '事发地', prop: 'vehiclePointAddress'},
            ]
          } else if (this.active === 8) {//车辆在线情况
            this.labelList = [
              // {label: '总车辆数', prop: 'totalCount'},
              {label: '在线车辆数(取每日的12点)', prop: 'twelveClockVehicleCount'},
              {label: '在线拖车数(12点)', prop: 'trailCount'},
              {label: '在线小修车数(12点)', prop: 'minorCount'},
              {label: '在线率(在线车辆数/总车辆数)', prop: 'onlineRate'},
              // {label: '车辆平均在线时长', prop: ''},
            ]
          } else if (this.active === 9) {//聚合失败案件明细
            this.labelList = [
              {label: '案件编号', prop: 'orderCode'},
              {label: '服务内容', prop: 'serviceName'},
              {label: '聚合分类', prop: 'workOrderTypeString'},
              {label: '聚合信息', prop: 'rescuePersonName'},
              {label: '创建时间', prop: 'orderCreateTime'},
            ]
          }
        }
      } finally {
        this.loading = false
      }
    },
    formatPercentage(value) {
      let result = value * 100;
      if (Number.isInteger(result)) {
        return result.toString() + '%';
      } else {
        return result.toFixed(2) + '%';
      }
    },
    // 初始化获取当月日期
    initDate() {
      const today = dayjs(); // 获取当前日期
      const currentDay = today.date(); // 获取今天是几号（1-31）
      let targetMonth = today; // 默认目标月份是当前月
      if (currentDay === 1) {
        targetMonth = today.subtract(1, 'month'); // 上个月
      }
      this.current = targetMonth.format('YYYY-MM');
      this.startTime = targetMonth.startOf('month').format('YYYY-MM-DD HH:mm:ss');
      let endTime;
      if (targetMonth.isSame(today, 'month')) {
        endTime = today.subtract(1, 'day').endOf('day');
      } else {
        endTime = targetMonth.endOf('month');
      }
      this.endTime = endTime.format('YYYY-MM-DD HH:mm:ss');
      this.startMonthTime=this.getStartTimeFromEndTime(this.endTime)
    },
    // 获取当月天数
    getDayLen() {
      let date;
      let year;
      let month;
      let d;
      date = new Date();
      year = date.getFullYear();
      month = date.getMonth() + 1;
      d = new Date(year, month, 0);
      return d.getDate();
    },
    //获取近五个月的开始时间
    getStartTimeFromEndTime(endTimeStr) {
     /* const endTime = new Date(endTimeStr);
      endTime.setMonth(endTime.getMonth() - 5); // 减去5个月
      const year = endTime.getFullYear();
      let month = String(endTime.getMonth() + 1).padStart(2, '0'); // 月份+1，并确保为两位数
      let day = '01'; // 因为我们要的是那个月的第一天
      const startTimeStr = `${year}-${month}-${day} `+'00:00:00';
      return startTimeStr;*/
      const startTime = dayjs(endTimeStr).subtract(4, 'month').startOf('month');
      return startTime.format('YYYY-MM-DD HH:mm:ss');
    },
    async changeTab(index) {
      try {
        this.loadingData = true
        this.activeIndex = index
        this.labelList = []
        this.v1 = []
        this.v2 = []
        this.v3 = []
        this.v4 = []
        this.v5 = []
        this.v6 = []
        this.v7 = []
        this.v8 = []
        await this.twoTabHanldeData()
        this.loadingData = false
        if (this.active === 1) {
          await this.drawLine()
          if (!this.isMobile && this.activeIndex === 3) {
            this.drawLine1()
          }
        }
      } finally {
        this.loadingData = false
      }
    },
    // 二级tab切可不调接口，需再次处理数据,1,2,3,4
    twoTabHanldeData() {
      this.etlDetailList=[]
      this.etlLabelList=[]
      if (this.active === 1) {//月总
        const columnObj = {} //创建标题数组中第一个对象
        columnObj.label = 'KPI' //第一个标题名称
        columnObj.prop = 'month' //第一个标题名称对应的字段
        this.etlLabelList.push(columnObj)
        /*if (this.activeIndex === 0) {//接单指标
          this.etlDetailList=[{ 'month': '派遣量' },{ 'month': '承接量' },{ 'month': '完成量' },
            { 'month': '拒单量' },{ 'month': '拒单率(%)' },{ 'month': '超时接单量' },{ 'month': '超时率(%)' },{ 'month': '客户取消率(%)' }]
          let props = 'prop' //自定义字段名称
          this.detailList?.map((item,index) => {
            let _dispatchOrderCount = Number(item.receiveOrderCount) + Number(item.refuseOrderCount)
            item.dispatchOrderCount=this.formatCurrency1( _dispatchOrderCount );
            item.receiveOrderCount=this.formatCurrency1( item.receiveOrderCount);
            item.finishOrderCount=this.formatCurrency1( item.finishOrderCount);
            item.refuseOrderCount=this.formatCurrency1( item.refuseOrderCount);
            item.timeoutOrderCount=this.formatCurrency1( item.timeoutOrderCount);
            this.v1.push(item.dispatchOrderCount)
            this.v2.push(item.refuseOrderRate.replace('%', ''))
            this.v3.push(item.timeoutOrderRate.replace('%', ''))
            this.v4.push(item.cancelRate.replace('%', ''))
            const columnObj = {}
            columnObj.label = item.month // 每一列的标题的名称
            columnObj.prop = props + index //自定义每一列标题字段名称
            this.etlLabelList.push(columnObj)
            let mappings = [ 'dispatchOrderCount', 'receiveOrderCount', 'finishOrderCount','refuseOrderCount',
              'refuseOrderRate', 'timeoutOrderCount', 'timeoutOrderRate','cancelRate' ];
            for (let i = 0; i < mappings.length; i++) {
              this.$set(this.etlDetailList[i], columnObj.prop, item[mappings[i]]);
            }
          })
          this.labelList = [
            {label: '月', prop: 'month'},
            {label: '派遣量', prop: 'dispatchOrderCount'},
            {label: '承接量', prop: 'receiveOrderCount'},
            {label: '完成量', prop: 'finishOrderCount'},
            {label: '拒单量', prop: 'refuseOrderCount'},
            {label: '拒单率(%)', prop: 'refuseOrderRate'},
            {label: '超时接单量', prop: 'timeoutOrderCount'},
            {label: '超时率(%)', prop: 'timeoutOrderRate'},
            {label: '取消率(%)', prop: 'cancelRate'},
          ]
        } else*/
          if (this.activeIndex === 0) {
        // ,{ 'month': '平安好评量' }, { 'month': '平安好评率' }
          this.etlDetailList=[{ 'month': '投诉量' },{ 'month': '投诉率(%)' }]
          let props = 'prop' //自定义字段名称
          this.detailList?.map((item,index) => {
            this.v1.push(item.complainOrderCount)
            this.v2.push(item.complainOrderRate?.replace('%', ''))
            // this.v3.push(item?.pinganFavorableCount)
            // this.v4.push(item.pinganFavorableRate?.replace('%', ''))
            const columnObj = {}
            columnObj.label = item.month // 每一列的标题的名称
            columnObj.prop = props + index //自定义每一列标题字段名称
            this.etlLabelList.push(columnObj)
            // 'pinganFavorableCount','pinganFavorableRate'
            let mappings = [ 'complainOrderCount', 'complainOrderRate' ];
            for (let i = 0; i < mappings.length; i++) {
              this.$set(this.etlDetailList[i], columnObj.prop, item[mappings[i]]);
            }
          })
          this.labelList = [
            {label: '月份', prop: 'month'},
            {label: '投诉量', prop: 'complainOrderCount'},
            {label: '投诉率', prop: 'complainOrderRate'},
          ]
         /* {label: '平安好评量', prop: 'pinganFavorableCount'},
          {label: '平安好评率', prop: 'pinganFavorableRate'},*/
        } else if (this.activeIndex === 1) {
          // { 'month': '平安聚合成功量' },{ 'month': '平安聚合成功率' },
          this.etlDetailList=[{ 'month': 'APP使用量' }, { 'month': 'APP使用率' },
            { 'month': '中华联合聚合成功量' }, { 'month': '中华联合聚合成功率' }, { 'month': '整体聚合成功量' }, { 'month': '整体聚合成功率' }]
          let props = 'prop' //自定义字段名称
          this.detailList?.map((item,index) => {
            this.v1.push(item.appUseCount)
            this.v2.push(item.appRate.replace('%', ''))
            /*this.v3.push(item.pinganJuheSuccessCount)
            this.v4.push(item.pinganPolymerizationSuccessRate.replace('%', ''))*/
            this.v3.push(item.zhonghuaPolymerizationSuccessCount)
            this.v4.push(item.zhonghuaPolymerizationSuccessRate.replace('%', ''))
            this.v5.push(item.wholeJuheSuccessCount)
            this.v6.push(item.wholeJuheSuccessRate.replace('%', ''))
            const columnObj = {}
            columnObj.label = item.month // 每一列的标题的名称
            columnObj.prop = props + index //自定义每一列标题字段名称
            this.etlLabelList.push(columnObj)
            let mappings = [ 'appRate', 'threeMinutesContactRate', 'pinganPolymerizationSuccessRate','zhonghuaPolymerizationSuccessRate','zdPolymerizationSuccessRate','polymerizationSuccessRate' ];
            for (let i = 0; i < mappings.length; i++) {
              this.$set(this.etlDetailList[i], columnObj.prop, item[mappings[i]]);
            }
          })
          /*{label: '平安聚合成功量', prop: 'pinganJuheSuccessCount'},
          {label: '平安聚合成功率', prop: 'pinganPolymerizationSuccessRate'},*/
          this.labelList = [
            {label: '月份', prop: 'month'},
            {label: 'APP使用量', prop: 'appUseCount'},
            {label: 'APP使用率', prop: 'appRate'},
            {label: '中华联合聚合成功量', prop: 'zhonghuaPolymerizationSuccessCount'},
            {label: '中华联合聚合成功率', prop: 'zhonghuaPolymerizationSuccessRate'},
            {label: '整体聚合成功量', prop: 'wholeJuheSuccessCount'},
            {label: '整体聚合成功率', prop: 'wholeJuheSuccessRate'},
          ]
        } else if (this.activeIndex === 2) {
          // ,{'month':'平安聚合成功到达时效'}
          this.etlDetailList=[{ 'month': '接单时效' },{ 'month': '3分钟联系客户率' },{ 'month': '到达时效' }]
          let props = 'prop' //自定义字段名称
          if (this.isMobile) {
            if (this.value == 1) {
              this.detailList?.map(item => {
                this.v1.push(item.receiving)
                this.v2.push(item.threeMinutesContactRate.replace('%', ''))
              })
            } else {
              this.detailList?.map(item => {
                this.v1.push(item.arriving)
                this.v2.push(item.polymerizationSuccessArriving)
                this.v3.push(item.fortyMinutesArrivalRate.replace('%', ''))
              })
            }
            this.detailList?.map((item,index) => {
              const columnObj = {}
              columnObj.label = item.month // 每一列的标题的名称
              columnObj.prop = props + index //自定义每一列标题字段名称
              this.etlLabelList.push(columnObj)
              let mappings = [ 'receiving', 'threeMinutesContactRate', 'arriving','fortyMinutesArrivalRate','polymerizationSuccessArriving'];
              for (let i = 0; i < mappings.length; i++) {
                this.$set(this.etlDetailList[i], columnObj.prop, item[mappings[i]]);
              }
            })
          } else {
            this.detailList?.map(item => {
              this.v1.push(item.receiving)
              this.v2.push(item.threeMinutesContactRate.replace('%', ''))
            })
            if (this.swithVal) {
              this.detailList?.map(item => {
                this.v3.push(item.trailArriving)
                this.v4.push(item.pinganJuheSuccessArriving)
                // this.v5.push(item.trailFortyMinutesArrivalRate  ? item.trailFortyMinutesArrivalRate.replace('%', '') : item.trailFortyMinutesArrivalRate)
              })
            } else {
              this.detailList?.map(item => {
                this.v3.push(item.minorArriving)
                this.v4.push(item.pinganJuheSuccessArriving)
                // this.v5.push(item.minorFortyMinutesArrivalRate  ? item.minorFortyMinutesArrivalRate.replace('%', '') : item.minorFortyMinutesArrivalRate)
              })
            }
          }
            // {label: '平安聚合成功到达时效', prop: 'pinganJuheSuccessArriving'},
          this.labelList = [
            {label: '月份', prop: 'month'},
            {label: '接单时效', prop: 'receiving'},
            {label: '3分钟联系客户率', prop: 'threeMinutesContactRate'},
            {label: '到达时效', prop: 'arriving'},
          ]
        }
      } else if (this.active === 2) {//日总
        /*if (this.activeIndex === 0) {//接单指标
          this.labelList = [
            {label: '日', prop: 'date'},
            {label: '派单量', prop: 'dispatchOrderCount'},
            {label: '接单量', prop: 'receiveOrderCount'},
            // {label: '完成量', prop: 'finishOrderCount'},
            {label: '拒单量', prop: 'refuseOrderCount'},
            {label: '拒单率', prop: 'refuseOrderRate'},
            {label: '超时量', prop: 'timeoutOrderCount'},
            {label: '超时率', prop: 'timeoutOrderRate'},
            // {label: '客户取消率(%)', prop: 'cancelRate'},
          ]
        } else*/
          if (this.activeIndex === 0) {
          this.labelList = [
            {label: '日', prop: 'date'},
            {label: '投诉量', prop: 'complainOrderCount'},
            {label: '投诉率', prop: 'complainOrderRate'},
           /* {label: '好评量', prop: 'favorableCount'},
            {label: '好评率', prop: 'favorableRate'},*/
            {label: '平安评价率', prop: 'pinganEvaluateRate'},
            // {label: '平安好评率', prop: 'pinganFavorableRate'},
          ]
        } else if (this.activeIndex === 1) {
          this.labelList = [
            {label: '日', prop: 'date'},
            {label: 'APP使用量', prop: 'appUseCount'},
            {label: 'APP使用率', prop: 'appRate'},
            {label: '平安聚合成功量', prop: 'pinganJuheSuccessCount'},
            {label: '平安聚合成功率', prop: 'pinganPolymerizationSuccessRate'},
            {label: '中华联合聚合成功量', prop: 'zhonghuaPolymerizationSuccessCount'},
            {label: '中华联合聚合成功率', prop: 'zhonghuaPolymerizationSuccessRate'},
            {label: '整体聚合成功量', prop: 'wholeJuheSuccessCount'},
            {label: '整体聚合成功率', prop: 'wholeJuheSuccessRate'},
          ]
        } else if (this.activeIndex === 2) {
          this.labelList = [
            {label: '日', prop: 'date'},
            {label: '接单时效(分)', prop: 'receiving'},
            {label: '3分钟联系客户率', prop: 'threeMinutesContactRate'},
            {label: '到达时效(分)', prop: 'arriving'},
            // {label: '平安聚合成功到达时效(分)', prop: 'pinganJuheSuccessArriving'},
          ]
        }
      } else if (this.active === 3) {//月师傅
       /* if (this.activeIndex === 0) {
          this.labelList = [
            {label: '师傅姓名', prop: 'driverName'},
            {label: '总分', prop: 'score'},
            {label: '案件总量', prop: 'orderCount'},
            {label: '累计得分', prop: 'cumulativeScore'},
            {label: '两分钟内接单得分', prop: 'twoMinutesAcceptScore'},
            {label: '1分钟内联系客户得分', prop: 'oneMinutesContactCustomerScore'},
            {label: '联系成功得分', prop: 'contactSuccessScore'},
            {label: '准时到达B点得分', prop: 'arriveBScore'},
            {label: '准时到达C点得分', prop: 'arriveCScore'},
            {label: '服务成功得分', prop: 'serviceSuccessScore'},
            {label: '必传照片上传得分', prop: 'uploadPhotoScore'},
            {label: '审核一次通过得分', prop: 'auditScore'},
            {label: '平安案件无评价扣分', prop: 'pinganNoCommentDeduct'},
            {label: '案件差评扣分', prop: 'orderNegativeDeduct'},
            {label: '催促扣分', prop: 'urgeDeduct'},
            {label: '有责车损扣分', prop: 'responsibleDeduct'},
            {label: '有责投诉（非态度类）扣分', prop: 'complaintNoAttitudeDeduct'},
            {label: '有责投诉（态度类）扣分', prop: 'complaintAttitudeDeduct'},
            {label: '拒单扣分', prop: 'rejectDeduct'},
            {label: '超时扣分', prop: 'timeoutDeduct'},
            {label: '聚合成功得分', prop: 'polymerizationSuccessScore'},
            {label: '聚合失败扣分', prop: 'polymerizationFailDeduct'},
            {label: '每月培训得分', prop: 'trainingScore'},
            {label: '新手入列得分', prop: 'listedScore'},
            {label: '星级评分', prop: 'starRank'},
          ]
        }else*/
         /* if (this.activeIndex === 0) {
          this.labelList = [
            {label: '师傅姓名', prop: 'driverName'},
            {label: '派单量', prop: 'dispatchOrderCount'},
            {label: '接单量', prop: 'receiveOrderCount'},
            {label: '拒单量', prop: 'refuseOrderCount'},
            {label: '拒单率(%)', prop: 'refuseOrderRate'},
            {label: '超时量', prop: 'timeoutOrderCount'},
            {label: '超时率(%)', prop: 'timeoutOrderRate'},
          ]
        } else */
          if (this.activeIndex === 0) {
          this.labelList = [
            {label: '师傅姓名', prop: 'driverName'},
            // {label: '承接案件量', prop: 'receiveOrderCount'},
            {label: '投诉量', prop: 'complainOrderCount'},
            {label: '投诉率(%)', prop: 'complainOrderRate'},
            {label: '平安评价量', prop: 'pinganEvaluateCount'},
            {label: '平安评价率(%)', prop: 'pinganEvaluateRate'},
          /*  {label: '平安好评量', prop: 'pinganFavorableCount'},
            {label: '平安好评率(%)', prop: 'pinganFavorableRate'},*/
            // {label: '催促率(%)', prop: 'urgeRate'},
          ]
        } else if (this.activeIndex === 1) {
          this.labelList = [
            {label: '师傅姓名', prop: 'driverName'},
            {label: 'App使用量', prop: 'appUseCount'},
            {label: 'App使用率(%)', prop: 'appRate'},
            // {label: '3′联系客户率(%)', prop: 'threeMinutesContactRate'},
            {label: '平安聚合成功量', prop: 'pinganPolymerizationSuccessCount'},
            {label: '平安聚合成功率(%)', prop: 'pinganPolymerizationSuccessRate'},
            {label: '中华联合聚合成功量', prop: 'zhonghuaPolymerizationSuccessCount'},
            {label: '中华联合聚合成功率(%)', prop: 'zhonghuaPolymerizationSuccessRate'},
            // {label: '中道聚合成功率(%)', prop: 'zdPolymerizationSuccessRate'},
            {label: '整体聚合成功量', prop: 'wholeJuheSuccessCount'},
            {label: '整体聚合成功率(%)', prop: 'wholeJuheSuccessRate'},
            // {label: '日均在线时长(h)', prop: 'onlineDuration'},
          ]
        } else if (this.activeIndex === 2) {
          this.labelList = [
            {label: '师傅姓名', prop: 'driverName'},
            {label: '接单时效(分)', prop: 'receiving'},
            {label: '3′联系客户率(%)', prop: 'threeMinutesReceivingRate'},
            {label: '到达时效(分)', prop: 'arriving'},
            // {label: '40′到达率(%)', prop: 'fortyMinutesArrivalRate'},
            // {label: '平安聚合成功到达时效(分)', prop: 'pinganJuheSuccessArriving'},
          ]
        }
      } else if (this.active === 4) {//日师傅
        /*if (this.activeIndex === 0) {//接单指标
          this.labelList = [
            {label: '日', prop: 'date'},
            {label: '师傅姓名', prop: 'driverName'},
            {label: '派单量', prop: 'dispatchOrderCount'},
            {label: '接单量', prop: 'receiveOrderCount'},
            {label: '拒单量', prop: 'refuseOrderCount'},
            {label: '拒单率(%)', prop: 'refuseOrderRate'},
            {label: '超时量', prop: 'timeoutOrderCount'},
            {label: '超时率(%)', prop: 'timeoutOrderRate'},
          ]
        } else */
        if (this.activeIndex === 0) {
          this.labelList = [
            {label: '日', prop: 'date'},
            {label: '师傅姓名', prop: 'driverName'},
            {label: '投诉量', prop: 'complainOrderCount'},
            {label: '投诉率(%)', prop: 'complainOrderRate'},
            {label: '平安评价量', prop: 'pinganEvaluateCount'},
            {label: '平安评价率(%)', prop: 'pinganEvaluateRate'},
            // {label: '平安好评量', prop: 'pinganFavorableCount'},
            // {label: '平安好评率(%)', prop: 'pinganFavorableRate'},
          ]
        } else if (this.activeIndex === 1) {
          this.labelList = [
            {label: '日', prop: 'date'},
            {label: '师傅姓名', prop: 'driverName'},
            {label: 'App使用量', prop: 'appUseCount'},
            {label: 'App使用率(%)', prop: 'appRate'},
            {label: '平安聚合成功量', prop: 'pinganPolymerizationSuccessCount'},
            {label: '平安聚合成功率(%)', prop: 'pinganPolymerizationSuccessRate'},
            {label: '中华联合聚合成功量', prop: 'zhonghuaPolymerizationSuccessCount'},
            {label: '中华联合聚合成功率(%)', prop: 'zhonghuaPolymerizationSuccessRate'},
            {label: '整体聚合成功量', prop: 'wholeJuheSuccessCount'},
            {label: '整体聚合成功率(%)', prop: 'wholeJuheSuccessRate'},
          ]
        } else if (this.activeIndex === 2) {
          this.labelList = [
            {label: '日', prop: 'date'},
            {label: '师傅姓名', prop: 'driverName'},
            {label: '接单时效(分)', prop: 'receiving'},
            {label: '3′联系客户率(%)', prop: 'threeMinutesReceivingRate'},
            {label: '到达时效(分)', prop: 'arriving'},
            // {label: '平安聚合成功到达时效(分)', prop: 'pinganJuheSuccessArriving'},
          ]
        }
      }
    },
    checkMobile() {
      const userAgent = navigator.userAgent || navigator.vendor || window.opera;
      this.isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
      // this.isMobile = true
    },
    setType(type) {
      switch (type) {
        /*case 5:
          return 1;
        case 6:
          return 2;*/
        case 5:
          return 7;
        case 6:
          return 3;
        case 7:
          return 4;
        case 8:
          return 5;
        case 9:
          return 6;
      }
    },
    getTitle(type) {
      switch (type) {
        case 0:
          return '客户评价';
        case 1:
          return 'APP使用';
        case 2:
          return '时效';
       /* case 3:
          return '时效';*/
      }
    },
  }
  ,
}
</script>
<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";
@import "@/styles/mixin.scss";

.wrap {
  @include wh(100%, 100%);
}

.headWrap {
  @include wh(100%, 56px);
  background: #3E62B9;
  @include flexTwoCenter;
  flex-direction: column;

  .title {
    font-size: 20px;
    color: #FFFFFF;
  }

  .titleName {
    font-family: PingFangSC, PingFang SC;
    @include fontWeightSize(14px, 500);
    color: #BDDAFF;
  }
}

.webHeadWrap {
  @include flexCenter;
  @include wh(100%, 50px);
  background: #3E62B9;
  box-sizing: border-box;
  padding: 0 20px;

  .empty {
    @include wh(250px, 100%);
  }

  .title {
    font-size: 20px;
    color: #FFFFFF;
  }

  .searchWrap {
    display: flex;
    align-items: center;
    position: relative;
    .el-icon-search {
      font-size: 15px;
      color: #4C81F5;
      position: absolute;
      right: 15px;
    }

    ::v-deep .el-input--suffix .el-input__inner {
      height: 32px;
      background: #EFF2F8;
      font-size: 12px;
    }

    ::v-deep .el-input__inner {
      border-radius: 0px 20px 20px 0px;
    }
    ::v-deep .el-input__suffix {
      top: 4px; /* 给清除按钮预留空间 */
    }
  }
}

::v-deep .van-tabs {
  background: white;
}

::v-deep .van-tabs__nav--line.van-tabs__nav--complete {
  background: #5D7FD7;
  padding: 0;
  height: 36px;
}

::v-deep .van-tab--active {
  background: #FFFFFF;
  border-radius: 7px 7px 0px 0px;
  @include sizeWeightCol(13px, 500, #5D7FD7 !important);
  border-bottom: none;
}

::v-deep .van-tabs__line {
  display: none;
}

::v-deep .van-tab {
  border-right: 1px solid #6B97D0;
  @include sizeWeightCol(13px, 500, #ACC1DB);
}

::v-deep .van-col {
  padding: 6px 10px;
  background: #E5E6EB;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;;
}
::v-deep .el-pagination .el-select .el-input{
  width: 80px;
  margin:0
}
.contentWrap {
  @include wh(100%, calc(100% - 120px));
  overflow-y: auto;
  background: #EFF2F8;

  .reciceOrder {
    @include whBg(375px, 146px, #FFFFFF);
    @include sizing4Padding(19px, 25px, 38px, 19px);
    margin-bottom: 10px;
    .scoreTitle{
      @include flexBetCen;
      i{
        cursor: pointer;
        font-size: 14px;
      }
    }
    .storeWrap {
      width: 100%;
      text-align: center;
      .detailScore{
        display: flex;
        justify-content:center;
      }
      .left{
        text-align: right;
        padding-right: 5px;
      }
      .right{
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        text-align: left;
      }
    }

    .title {
      @include sizeWeightCol(14px, bold, #040415);
      margin-bottom: 14px;
    }

    .reciceOrderIWrap {
      @include flexColAround;

      .common {
        @include flexColCen;
      }
    }

    .num {
      @include sizeWeightCol(24px, bold, #040415);
      margin-bottom: 10px;
    }

    .itemTitle {
      @include flexCenter;
      font-size: 12px;
      color: rgba(4, 4, 21, 0.45);
    }

    .img {
      @include whMarLe(8px, 10px, 4px);
    }

    .line {
      border-right: 2px solid #EAE9EC;
    }
  }

  .evaluate, .appUse, .store {
    height: 179px;

    .title {
      margin-bottom: 0 !important;
    }
  }
  .allDataChartWrap{
  /*  width: 375px;
    height: 220px;*/
    @include whBg(375px, 200px, #FFFFFF);

  }
  .allDataChart{
    width: 100%;
    height: 100%;
  }
  .webComAllData{
    width: 420px;
    height: 200px;
    /*width: 375px;
    height: 146px;*/
    float: left;
    margin: 10px;
  }
  .webCom {
    @include whBg(420px, 200px, #FFFFFF);
    float: left;
    margin: 10px;

    .webTitle {
      margin-bottom: 40px !important;
    }
  }
}

.webcontentWrap {
  @include wh(100%, calc(100% - 86px));
}
.tipArrow{
  position: absolute;
  top: 10px;
  color: #FFFFFF;
  font-size: 12px;
}
.left{
  left: 0;
}
.right{
  right: 0px;
}
.tabWrap {
  @include wh(100%, 22px);
  @include flexColAround;
  margin: 10px 0;

  div {
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 7px;
    font-size: 12px;
    @include bgFontColor(#3E3C3C, #F4F4F4);
  }

  .active {
    position: relative;
    opacity: 1;
    @include bgFontColor(#ffffff, #F1B289);
  }

  .active:after {
    content: '';
    display: block;
    @include wh(18px, 2px);
    background: #FFFFFF;
    position: absolute;
    margin-top: 3px;
    left: 50%;
    opacity: 1;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border: 4px solid;
    border-color: #F1B289 transparent transparent transparent;
  }
}
.webTabWrap {
  width: 40% !important;
  .active:after {
    margin-top: 4px;
  }
}

.monthTotal {
  background: #FFFFFF;
  padding-left: 6px;
  .leftMonth {
    .leftItem {
      font-weight: bold;
      border-right: 1px solid #cccccc;
      border-left: 1px solid #cccccc;
      text-align: center;
      padding: 8px 10px;
    }

    .leftItem:nth-child(odd) {
      border-top: 1px solid #cccccc;
      border-bottom: 1px solid #cccccc;
      background-color: #f2f2f2; /* 奇数*/
    }
  }

  .content {
    flex-grow: 1; /* 占据剩余空间 */
    overflow-x: auto; /* 当内容超出宽度时启用水平滚动 */
  }
}
.searchDriverName{
  width: 97%;
  display: flex;
  align-items: center;
  span{
    width: 20%;
  }
  ::v-deep .el-input{
    font-size: 12px;
  }
  ::v-deep .el-input__inner{
    height: 30px;
  }
  ::v-deep .el-input__suffix {
    top: 4px; /* 给清除按钮预留空间 */
  }

}
.comTab {
  width: 100%;
  height: 95%;
}
::v-deep .el-table {
  height: 100%;
}

::v-deep .el-table--scrollable-x .el-table__body-wrapper {
  height: 95% !important;
}
.comTabActive3 ::v-deep .el-table--scrollable-x .el-table__body-wrapper{
  width: 100%;
  //height: 90%;
  //height: 84% !important;
}
.chartWrapWeb, .webTab {
  height: calc(100% - 200px);
  width: 100%;
  box-sizing: border-box;
  padding: 0 40px;
}

.comChart {
  position: relative;

  .selectWrap {
    position: absolute;
    top: 0;
    z-index: 1111;
    left: 38px;
  }

  ::v-deep .el-input__inner {
    padding: 2px;
    width: 98px;
    height: 24px;
    font-size: 12px;
  }

  ::v-deep .el-input__inner {
    right: 2px;
  }

  ::v-deep .el-input__icon {
    line-height: 0;
  }
}

.el-pagination {
  text-align: center;
}

.webSwitch {
  width: 47%;
  position: relative;

  .swithContainer {
    position: absolute;
    z-index: 111;
    left: 60px;
  }
}

::v-deep .el-switch__core {
  font-size: 12px;
  width: 30px !important;
  height: 16px;
}

::v-deep .el-switch__core::after {
  width: 14px;
  height: 14px;
  margin-top: -1px;
}

::v-deep .el-switch.is-checked .el-switch__core::after {
  margin-left: -15px;
}

::v-deep .el-switch__label * {
  font-size: 12px;
}
/* 自定义样式 */
.custom-date-picker ::v-deep .el-input__prefix{
  display: none;
}
.month {
  display: inline-block;
  width: 75px;
  //height: 30px;
  //line-height: 30px;
  text-align: center;
  border-radius: 20px 0px 0px 20px;
  //border-radius: 0px 20px 20px 0px;
  //border: 1px solid #4C81F5;
  font-size: 14px;
  color: #FFFFFF;
  ::v-deep .el-input--suffix .el-input__inner{

  }
  ::v-deep .el-input__inner{
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-radius: 20px 0px 0px 20px !important;
    text-align: center !important;
    font-size: 14px  !important;
    color: #FFFFFF !important;
    border: 1px solid #4C81F5 !important;
    background-color: transparent !important;
  }
  /* 自定义清除按钮样式 */
  .custom-date-picker ::v-deep .el-input__suffix {
    right: 0 !important;
    padding-right: 10px !important;
  }

  .custom-date-picker ::v-deep .el-input__suffix-inner {
    display: flex;
    align-items: center;
  }

  .custom-date-picker ::v-deep .el-input__icon {
    line-height: 1 !important;
  }
}
  .numRed {
    color: red !important;
  }
  .numGreen {
    color: green !important;
  }
</style>
