From 0dd54330af7536e5917ec47430173e2f963ddf4e Mon Sep 17 00:00:00 2001
From: zhouxueli <2841188632@qq.com>
Date: Mon, 8 Jul 2024 09:36:09 +0800
Subject: [PATCH] =?UTF-8?q?task#14196=EF=BC=8CkpiWEB=E7=AB=AF=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/kpi.js             |    3 +-
 src/views/kpi/kpiIndex.vue | 1576 ++++++++++++++++++++++--------------
 2 files changed, 983 insertions(+), 596 deletions(-)

diff --git a/src/api/kpi.js b/src/api/kpi.js
index 1d8842d8..2e7641a2 100644
--- a/src/api/kpi.js
+++ b/src/api/kpi.js
@@ -48,9 +48,8 @@ export function getSupplierId(key) {
   return request({
     url: '/supplier/select/supplier',
     method: 'GET',
-    // key
     params: {
-      key: key ,// 假设后端接口接受名为 'name' 的查询参数
+      key: key ,
     }
   });
 }
diff --git a/src/views/kpi/kpiIndex.vue b/src/views/kpi/kpiIndex.vue
index ab33ab80..0cd29f32 100644
--- a/src/views/kpi/kpiIndex.vue
+++ b/src/views/kpi/kpiIndex.vue
@@ -10,27 +10,42 @@
       <!--  只有中道账号才显示搜索框  -->
       <div class="searchWrap" v-if="isZd==1">
         <span class="month">{{ current }}月</span>
-        <input class="ipt" maxlength="20" placeholder="请输入服务商名称" v-model="supplierName" />
+        <el-select
+            v-model="supplierId"
+            filterable
+            remote
+            reserve-keyword
+            placeholder="请输入后选择"
+            :remote-method="remoteMethod"
+            @change="getData"
+            :loading="selectLoading">
+          <el-option
+              v-for="item in selectOption"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+          </el-option>
+        </el-select>
         <i class="el-icon-search" @click="searchHandle"></i>
       </div>
     </div>
     <van-tabs v-model="active" sticky @click="onClick">
-      <van-tab v-for="(item,index) in tabArr"  :key="index"  :title="item.name"></van-tab>
+      <van-tab v-for="(item,index) in tabArr" :key="index" :title="item.name"></van-tab>
     </van-tabs>
-    <div :class="{'contentWrap':true,'webcontentWrap':!isMobile}" v-if="active===0">
+    <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">{{ indexData.receiveOrderCount }}</div>
+            <div class="num">{{ indexData && indexData.receiveOrderCount }}</div>
             <div class="itemTitle">承接案件量</div>
           </div>
           <div class="center common" @click="clickJumpHandle(5)">
-            <div class="num">{{ indexData.refuseOrderRate }}%</div>
+            <div class="num">{{ indexData && indexData.refuseOrderRate }}%</div>
             <div class="itemTitle">拒单率 ></div>
           </div>
           <div class="right common" @click="clickJumpHandle(6)">
-            <div class="num">{{ indexData.timeoutOrderRate }}%</div>
+            <div class="num">{{ indexData && indexData.timeoutOrderRate }}%</div>
             <div class="itemTitle">超时率 ></div>
           </div>
         </div>
@@ -38,35 +53,41 @@
       <div :class="{'reciceOrder':true,'webCom':!isMobile,'evaluate':isMobile}">
         <div class="title">客户评价</div>
         <div class="reciceOrderIWrap" v-if="indexData">
-          <circle-char   :data="indexData.complainOrderRate" :title-text="'投诉率'" :bg-color="'#9485ED'"
-                        :is-store="false" @clickComplain="clickJumpHandle(7)"></circle-char>
-          <circle-char  :data="indexData.customerSatisfaction" :title-text="'客户满意度'" :bg-color="'#5DDECF'" ></circle-char>
-          <circle-char  :data="indexData.urgeRate" :title-text="'催促率'" :bg-color="'#FFADAD'" ></circle-char>
+          <circle-char :data="indexData && indexData.complainOrderRate" :title-text="'投诉率'" :bg-color="'#9485ED'"
+                       :is-store="false" @clickComplain="clickJumpHandle(7)"></circle-char>
+          <circle-char :data="indexData && indexData.customerSatisfaction" :title-text="'客户满意度'"
+                       :bg-color="'#5DDECF'"></circle-char>
+          <circle-char :data="indexData && indexData.urgeRate" :title-text="'催促率'"
+                       :bg-color="'#FFADAD'"></circle-char>
         </div>
       </div>
-      <div  :class="{'reciceOrder':true,'webCom':!isMobile,'appUse':isMobile}">
+      <div :class="{'reciceOrder':true,'webCom':!isMobile,'appUse':isMobile}">
         <div class="title">APP使用</div>
         <div class="reciceOrderIWrap" v-if="indexData">
-          <circle-char  :data="indexData.appRate" :title-text="'使用率'" :bg-color="'#3AA1FF'" :is-store="false" @clickUse="clickJumpHandle(8)"></circle-char>
-          <circle-char  :data="indexData.threeMinutesContactRate" :title-text="'3′联系客户率'" :bg-color="'#5D7FD7'" ></circle-char>
-          <circle-char  :data="indexData.polymerizationSuccessRate" :title-text="'总聚合成功率'" :bg-color="'#4ECB73'" ></circle-char>
+          <circle-char :data="indexData && indexData.appRate" :title-text="'使用率'" :bg-color="'#3AA1FF'"
+                       :is-store="false"
+                       @clickUse="clickJumpHandle(8)"></circle-char>
+          <circle-char :data="indexData && indexData.threeMinutesContactRate" :title-text="'3′联系客户率'"
+                       :bg-color="'#5D7FD7'"></circle-char>
+          <circle-char :data="indexData && indexData.polymerizationSuccessRate" :title-text="'总聚合成功率'"
+                       :bg-color="'#4ECB73'"></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">{{indexData.receiving}}</div>
+            <div class="num">{{ indexData && indexData.receiving }}</div>
             <div class="itemTitle">接单时效(分)</div>
           </div>
           <div class="line"></div>
           <div class="center common">
-            <div class="num">{{ indexData.polymerizationSuccessArriving }}</div>
+            <div class="num">{{ indexData && indexData.polymerizationSuccessArriving }}</div>
             <div class="itemTitle">集合成功到达时效</div>
           </div>
           <div class="line"></div>
           <div class="right common">
-            <div class="num">{{ indexData.arriving }}</div>
+            <div class="num">{{ indexData && indexData.arriving }}</div>
             <div class="itemTitle">到达时效</div>
           </div>
         </div>
@@ -74,100 +95,107 @@
       <div :class="{'reciceOrder':true,'webCom':!isMobile,'store':isMobile}">
         <div class="title">综合打分</div>
         <div class="storeWrap" v-if="indexData">
-          <circle-char  :data="indexData.score" :bg-color="'#00D273'" :is-store="true"></circle-char>
+          <circle-char :data="indexData && indexData.score" :bg-color="'#00D273'" :is-store="true"></circle-char>
         </div>
       </div>
-      <div v-if="isMobile" style="padding: 30px"></div>
+      <div v-if="isMobile" style="padding: 20px"></div>
     </div>
-    <div class="contentWrap monthTotal" v-if="active===1">
+    <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>
-        <div :class="{'chartWrapWeb':!isMobile}">
-          <div v-if="active===1" id="chartWrap" style="width: 100%;height:300px" ></div>
-        </div>
-        <div :class="{'comTab':true,'webTab':!isMobile,'mobileTab':isMobile}">
-          <noFit-table :is-mobile='isMobile'  :table-data="detailList" :label-list="labelList"></noFit-table>
+        <div v-for="(item,index) in list" :class="activeIndex===index ? 'active' : ''" :key="index"
+             @click="changeTab(index)">{{ item.name }}
         </div>
       </div>
-      <div v-if="isMobile" style="padding: 30px"></div>
+      <div :class="{'chartWrapWeb':!isMobile,'comChart':true}">
+        <template v-if="isMobile">
+          <div v-if="active===1" id="chartWrap" style="width: 100%;height:300px"></div>
+          <div v-if="isMobile && activeIndex==3" 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,2].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 :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"></noFit-table>
+      </div>
     </div>
-    <div class="contentWrap  monthTotal" v-if="active===2">
-      <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="{'comTab':true,'webTab':!isMobile,'mobileTab':isMobile}">
-        <noFit-table :is-mobile='isMobile'  :table-data="detailList" :label-list="labelList"></noFit-table>
-      </div>
-      <div v-if="isMobile" style="padding: 30px"></div>
-    </div>
-    <div class="contentWrap  monthTotal" v-if="active===3">
-      <div :class="{'tabWrap':true,'webTabWrap':!isMobile}">
-        <div v-for="(item,index) in driverList" :class="activeIndex===index ? 'active' : ''" :key="index" @click="changeTab(index)">{{item.name}}</div>
-      </div>
-      <div :class="{'comTab':true,'webTab':!isMobile,'mobileTab':isMobile}">
-        <noFit-table :is-mobile='isMobile'  :table-data="detailList" :label-list="labelList"></noFit-table>
-      </div>
-      <div v-if="isMobile" style="padding: 30px"></div>
-    </div>
-    <div class="contentWrap  monthTotal" v-if="active===4">
+    <div v-loading="loadingData" class="contentWrap  monthTotal" v-if="[2,3,4].includes(active)">
       <div :class="{'tabWrap':true,'webTabWrap':!isMobile,'mobileTab':isMobile}">
-        <div v-for="(item,index) in list" :class="activeIndex===index ? 'active' : ''" :key="index" @click="changeTab(index)">{{item.name}}</div>
+        <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':true,'webTab':!isMobile}">
-        <noFit-table :is-mobile='isMobile'  :table-data="detailList" :label-list="labelList"></noFit-table>
+      <div :class="{'comTab':true}">
+        <noFit-table :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"></noFit-table>
       </div>
-      <div v-if="isMobile" style="padding: 30px"></div>
     </div>
-    <div class="contentWrap  monthTotal" v-if="active===5">
+    <div v-loading="loadingData" class="contentWrap  monthTotal" v-if="[5,6,7,8,9].includes(active)">
       <div :class="{'comTab':true,'detailTable':isMobile}">
-        <noFit-table :is-mobile='isMobile'  :table-data="detailList" :label-list="labelList"></noFit-table>
+        <noFit-table :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"
+                     :loading="loading"></noFit-table>
       </div>
-<!--      <el-pagination
+      <el-pagination
+          v-if="active !== 9"
           small
+          :current-page.sync="pageNum"
+          :page-size.sync="pageSize"
+          @current-change="getKpiData"
+          @size-change="getKpiData"
           layout="prev, pager, next"
-          :total="50">
-      </el-pagination>-->
+          :total="total">
+      </el-pagination>
     </div>
-    <div class="contentWrap  monthTotal" v-if="active===6">
-      <div :class="{'comTab':true,'detailTable':isMobile}">
-        <noFit-table :is-mobile='isMobile'  :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
-      </div>
-    </div>
-    <div class="contentWrap  monthTotal" v-if="active===7">
-      <div :class="{'comTab':true,'detailTable':isMobile}">
-        <noFit-table :is-mobile='isMobile'  :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
-      </div>
-    </div>
-    <div class="contentWrap  monthTotal" v-if="active===8">
-      <div :class="{'comTab':true,'detailTable':isMobile}">
-        <noFit-table :is-mobile='isMobile'  :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
-      </div>
-    </div>
-    <div class="contentWrap  monthTotal" v-if="active===9">
-      <div :class="{'comTab':true,'detailTable':isMobile}">
-        <noFit-table :is-mobile='isMobile'  :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
-      </div>
-    </div>
- </div>
+  </div>
 </template>
 
 <script>
 import * as echarts from 'echarts';
 import dayjs from "dayjs";
-import {getKpiDetailsData,getStatisticsKpiByMonth,getStatisticsKpi,getDriverStatisticsKpi,getSupplierId} from "@/api/kpi.js"
+import {
+  getKpiDetailsData,
+  getStatisticsKpiByMonth,
+  getStatisticsKpi,
+  getDriverStatisticsKpi,
+  getSupplierId
+} from "@/api/kpi.js"
 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 },
+  components: {CircleChar, NoFitTable},
   computed: {},
   mixins: [myMixins],
   data() {
     return {
-      active:0,
+      active: 0,
       activeIndex: 0,
       tabArr: [
         {name: '总览'}, {name: '月/总'}, {name: '日/总'}, {name: '月/师傅'}, {name: '日/师傅'}, {name: '拒单明细'},
@@ -175,88 +203,123 @@ export default {
       ],
       list: [{name: '接单指标'}, {name: '客户评价'}, {name: 'APP使用'}, {name: ' 时效 '}],
       driverList: [{name: '接单情况'}, {name: '服务评价'}, {name: 'APP使用情况'}, {name: '时效 '}],
-      startTime:'',
-      endTime:'',
-      indexData:{},
-      xAxisArr:[],
-      detailList:[],
-      labelList:[],
-      loading:false,
-      v1:[],
-      v2:[],
-      v3:[],
-      v4:[],
-      v5:[],
-      v6:[],
+      startMonthTime: '',
+      startTime: '',
+      endTime: '',
+      indexData: {},
+      detailList: [],
+      labelList: [],
+      loading: false,
+      loadingData: false,
+      v1: [],
+      v2: [],
+      v3: [],
+      v4: [],
+      v5: [],
+      v6: [],
+      xAxisArr: [],
       isMobile: false,
-      supplierName: '',
-      isZd:'',
-      current:dayjs(new Date()).format('M'),
+      isZd: '',
+      current: dayjs(new Date()).format('M'),
+      value: '1',
+      options: [
+        {value: '1', label: '师傅接单时效'},
+        {value: '2', label: '到达时效'},
+      ],
+      pageNum: 1,
+      pageSize: 10,
+      total: 0,
+      swithVal: true,
+      supplierId: 1128,
       selectLoading: false,
-      selectList: [],
-      options: [],
-      oldOptions: [],
-      svalue: '',
-      checkOptions: [],
+      selectOption: [],
     }
   },
   async mounted() {
-    this.checkMobile();
+    await this.checkMobile();
     await this.initDate();
     await this.getData();
-    if(this.active===1){
-      setTimeout(()=>{
-        this.drawLine()
-      },500)
-    }
   },
   created() {
     this.checkMobile();
-    // 获取当前 URL
     const urlParams = new URLSearchParams(window.location.search);
-    this.isZd=urlParams?.get('isZd') || ''
-    console.log("urlParams?.get('isZd')",urlParams?.get('isZd'))
+    this.isZd = urlParams?.get('isZd') || ''
   },
   async activated() {
   },
   methods: {
-    async searchHandle(){//web端服务商搜索操作
-      console.log("this.svalue",this.svalue)
-      try {
-        const response = await getSupplierId(this.svalue);
-        console.log(response.data);
-      } catch (error) {
-        console.error('请求失败:', error);
+    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 clickJumpHandle(type){
-      this.loading=true
-      this.active=type;
+    async searchHandle() {//web端服务商搜索操作
+      console.log("搜索按钮")
+    },
+    async changeHandle() {
+      await this.getData();
+      await this.drawLine();
+    },
+    async switchHandle() {
+      await this.getData();
+      await this.drawLine1();
+    },
+    async getData() {
+      try {
+        this.loadingData = true
+        this.indexData = {}
+        this.v1 = []
+        this.v2 = []
+        this.v3 = []
+        this.v4 = []
+        this.v5 = []
+        this.v6 = []
+        this.xAxisArr = []
+        await this.getKpiData()
+        this.loadingData = false
+      } finally {
+        this.loadingData = false
+      }
+    },
+    async clickJumpHandle(type) {
+      this.loading = true
+      this.active = type;
       await this.onClick();
     },
-    checkMobile() {
-      const userAgent = navigator.userAgent || navigator.vendor || window.opera;
-      this.isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
-    },
     onClick() {
-      this.activeIndex=0;
-      this.detailList=[];
-      this.labelList=[];
+      this.activeIndex = 0;
+      this.detailList = [];
+      this.labelList = [];
       this.getData();
-    },
-    // 初始化获取当月日期
-    initDate() {
-      this.startTime = '2024-06-01' //dayjs(new Date()).format('YYYY-MM') + '-01'
-      this.endTime = '2024-06-30'//dayjs(new Date()).format('YYYY-MM') + '-' + this.getDayLen()
+      if (this.active === 1) {
+        setTimeout(() => {
+          this.drawLine()
+          if (!this.isMobile && this.activeIndex === 3) {
+            this.drawLine1()
+          }
+        }, 500)
+      }
     },
     drawLine() { // 基于准备好的dom，初始化echarts实例
+      // console.log("执行图表加载")
       let myChart = echarts.init(document.getElementById('chartWrap'))
       let option;
       //接单指标
-      let series1=[ {
-        name:'派遣案件量',
+      let series1 = [{
+        name: '派遣案件量',
         type: 'bar',
-        data:this.v1,
+        data: this.v1,
         yAxisIndex: 0,
         smooth: true,
         barWidth: this.isMobile ? 35 : 60,
@@ -269,43 +332,43 @@ export default {
           name: '拒单率',
           type: 'line',
           smooth: true,
-          data:this.v2,
+          data: this.v2,
           yAxisIndex: 1,
           label: {
             show: true,
             position: 'top',
-            formatter: '{c} %'
+            formatter: '{c}%'
           },
         },
         {
-          name:'超时率',
-          type:"line",
-          data:this.v3,
+          name: '超时率',
+          type: "line",
+          data: this.v3,
           yAxisIndex: 1,
           smooth: true,
           label: {
             show: true,
             position: 'top',
-            formatter: '{c} %'
+            formatter: '{c}%'
           },
         },
         {
-          name:'客户取消率',
-          type:"line",
-          data:this.v4,
+          name: '客户取消率',
+          type: "line",
+          data: this.v4,
           yAxisIndex: 1,
           smooth: true,
           label: {
             show: true,
             position: 'top',
-            formatter: '{c} %'
+            formatter: '{c}%'
           },
         },
       ]
-      let series2=[ {
-        name:'客户满意度',
+      let series2 = [{
+        name: '客户评价率',
         type: 'bar',
-        data:this.v1,
+        data: this.v1,
         yAxisIndex: 0,
         smooth: true,
         barWidth: this.isMobile ? 35 : 60,
@@ -315,109 +378,109 @@ export default {
         }
       },
         {
-          name: '评价率',
-          type: 'line',
-          smooth: true,
-          data:this.v2,
+          name: '投诉率',
+          type: "line",
+          data: this.v3,
           yAxisIndex: 1,
+          smooth: true,
           label: {
             show: true,
             position: 'top',
-            formatter: '{c} %'
+            formatter: '{c}%'
           },
         },
         {
-          name:'投诉率',
-          type:"line",
-          data:this.v3,
-          yAxisIndex: 1,
+          name: '客户满意度',
+          type: 'line',
           smooth: true,
+          data: this.v2,
+          yAxisIndex: 1,
           label: {
             show: true,
             position: 'top',
-            formatter: '{c} %'
+            formatter: '{c}%'
           },
         },
       ]
-      let series3=[
-       {
-        name:'APP使用率',
-        type: 'line',
-        data:this.v1,
-        yAxisIndex: 0,
-        smooth: true,
-        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: 1,
+          data: this.v2,
+          yAxisIndex: 0,
           label: {
             show: true,
             position: 'top',
-            formatter: '{c} %'
+            formatter: '{c}%'
           },
         },
         {
-          name:'平安成功率',
-          type:"line",
-          data:this.v3,
-          yAxisIndex: 1,
+          name: '平安成功率',
+          type: "line",
+          data: this.v3,
+          yAxisIndex: 0,
           smooth: true,
           label: {
             show: true,
             position: 'top',
-            formatter: '{c} %'
+            formatter: '{c}%'
           },
         },
         {
-          name:'中华成功率',
-          type:"line",
-          data:this.v4,
-          yAxisIndex: 1,
+          name: '中华成功率',
+          type: "line",
+          data: this.v4,
+          yAxisIndex: 0,
           smooth: true,
           label: {
             show: true,
             position: 'top',
-            formatter: '{c} %'
+            formatter: '{c}%'
           },
         },
         {
-          name:'中道成功率',
-          type:"line",
-          data:this.v5,
-          yAxisIndex: 1,
+          name: '中道成功率',
+          type: "line",
+          data: this.v5,
+          yAxisIndex: 0,
           smooth: true,
           label: {
             show: true,
             position: 'top',
-            formatter: '{c} %'
+            formatter: '{c}%'
           },
         },
         {
-          name:'总成功率',
-          type:"line",
-          data:this.v6,
-          yAxisIndex: 1,
+          name: '总成功率',
+          type: "line",
+          data: this.v6,
+          yAxisIndex: 0,
           smooth: true,
           label: {
             show: true,
             position: 'top',
-            formatter: '{c} %'
+            formatter: '{c}%'
           },
         },
       ]
-      let series4=[ {
-        name:'派遣案件量',
+      let series4 = [{
+        name: '接单时效(分)',
         type: 'bar',
-        data:this.v1,
-        yAxisIndex: 0,
+        data: this.v1,
+        yAxisIndex: 1,
         smooth: true,
         barWidth: this.isMobile ? 35 : 60,
         label: {
@@ -426,341 +489,285 @@ export default {
         }
       },
         {
-          name: '拒单率',
+          name: '3分钟接单率',
           type: 'line',
           smooth: true,
-          data:this.v2,
-          yAxisIndex: 1,
+          data: this.v2,
+          yAxisIndex: 0,
           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} %'
+            formatter: '{c}%'
           },
         },
       ]
-      let series=[]
-      if(this.active===1){
-        if(this.activeIndex===0){
-          series=series1
-        }else if(this.activeIndex===1){
-          series=series2
-        }else if(this.activeIndex===2){
-          series=series3
-        }else if(this.activeIndex===3){
-          series=series4
+      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}%'
+          }
+        },
+        {
+          type: 'value',
+          axisLabel: {
+            formatter: '{value}%'
+          }
+        },
+      ]
+      let yAxis3 = [
+        {
+          type: 'value',
+          axisLabel: {
+            formatter: '{value}%'
+          }
+        },
+      ]
+      let yAxis4 = [
+        {
+          type: 'value',
+          axisLabel: {
+            formatter: '{value}%'
+          }
+        },
+        {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 === 1) {
+          series = series2
+          yAxis = yAxis2
+        } else if (this.activeIndex === 2) {
+          series = series3
+          yAxis = yAxis3
+        } else if (this.activeIndex === 3) {
+          if (this.value == 1) {
+            series = series4
+            yAxis = yAxis4
+          } else {
+            series = series5
+            yAxis = yAxis5
+          }
         }
       }
       option = {
         title: {
-          text: '接单时效',
-          textStyle:{
-            fontSize:12
+          text: this.isMobile ? this.getTitle(this.activeIndex) : '师傅接单时效',
+          textStyle: {
+            fontSize: 12
           },
         },
         legend: {
-          textStyle:{
-            fontSize:8
+          textStyle: {
+            fontSize: this.isMobile ? 8 : ''
           },
-          itemWidth:10, // 设置图例图标的宽度，从而调整图标大小
-          itemHeight: 6,
-          // right:10
+          right: '1%',
+          itemWidth: this.isMobile ? 10 : 18, // 设置图例图标的宽度，从而调整图标大小
+          itemHeight: this.isMobile ? 6 : 10,
+          width: (this.active == 1 && this.activeIndex == 2) ? '60%' : '100%',
         },
         xAxis: {
           type: 'category',
           data: this.xAxisArr,
         },
-        yAxis: [
-          {type: 'value'},
-          {
-            type: 'value',
-            axisLabel: {
-              formatter: '{value}%' // 在值后面添加百分比符号
-            }
-          },
-        ],
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '6%',
+          containLabel: true
+        },
+        yAxis: yAxis,
         series: series,
       };
       option && myChart.setOption(option, true);
     },
-    async getData(){
-      this.v1=[]
-      this.v2=[]
-      this.v3=[]
-      this.v4=[]
-      this.v5=[]
-      this.v6=[]
-      this.xAxisArr=[]
+    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',
+            axisLabel: {
+              formatter: '{value}%'
+            }
+          },
+          {type: 'value'},
+        ],
+        series: [{
+          name: '到达时效（分）',
+          type: 'bar',
+          data: this.v3,
+          yAxisIndex: 1,
+          smooth: true,
+          barWidth: 50,
+          label: {
+            show: true, // 显示标签
+            position: 'top', // 标签位置在柱形顶部
+          }
+        },
+          {
+            name: '聚合成功到达时效',
+            type: 'bar',
+            data: this.v4,
+            yAxisIndex: 1,
+            smooth: true,
+            barWidth: 50,
+            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 getKpiData() {
       try {
-        this.loading=true
+        this.loading = true
         if (this.active === 0) {
           let res = await getStatisticsKpiByMonth({
-            startTime: this.startTime + ' 00:00:00',
-            endTime: this.endTime + ' 23:59:59',
+            startTime: this.startTime,
+            endTime: this.endTime,
             statisticsType: 1,
-            supplierId:1128,
+            supplierId: this.supplierId,
           });
-          this.indexData=res.data;
+          this.indexData = res.data;
         } else if ([1, 2].includes(this.active)) {
-         let res= await getStatisticsKpi({
-            startTime: '2024-03-01 00:00:00',//this.startTime + ' 00:00:00',
-            endTime:'2024-07-31 23:59:59' ,//this.endTime + ' 23:59:59',
-            statisticsType: this.active===1 ? 1 : 2,
-            supplierId:1128,
+          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 => {
             let formatVal = dayjs(item.statisticsDate).format('DD');
             let formatVal1 = dayjs(item.statisticsDate).format('MM');
-            return {...item,date: formatVal ,month: formatVal1};
+            return {...item, date: formatVal, month: formatVal1};
           });
-          this.loading=false
-          this.detailList?.map(item=>{
+          this.loading = false
+          this.detailList?.map(item => {
             this.xAxisArr.unshift(item.month)
           })
-          if(this.active===1){
-            if (this.activeIndex === 0) {//接单指标
-              this.detailList?.map(item=>{
-                this.v1.unshift(item.dispatchOrderCount)
-                this.v2.unshift(item.refuseOrderRate)
-                this.v3.unshift(item.timeoutOrderRate)
-                this.v4.unshift(item.cancelrate)
-              })
-              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 === 1){
-              this.detailList?.map(item=>{
-                this.v1.unshift(item.customerSatisfaction)
-                this.v2.unshift(item.customerEvaluateRate)
-                this.v3.unshift(item.complainOrderRate)
-              })
-              this.labelList = [
-                {label: '月', prop: 'month'},
-                {label: '投诉量', prop: 'complainOrderCount'},
-                {label: '投诉率（%）', prop: 'complainOrderRate'},
-                {label:'客户满意度', prop: 'customerSatisfaction'},
-                {label: '客户评价率（%）', prop: 'customerEvaluateRate'},
-              ]
-            }else if(this.activeIndex === 2){
-              this.detailList?.map(item=>{
-                this.v1.unshift(item.appRate)
-                this.v2.unshift(item.threeMinutesContactRate)
-                this.v3.unshift(item.pinganPolymerizationSuccessRate)
-                this.v4.unshift(item.zhonghuaPolymerizationSuccessRate)
-                this.v5.unshift(item.zdPolymerizationSuccessRate)
-                this.v6.unshift(item.polymerizationSuccessRate)
-              })
-              this.labelList = [
-                {label: '月', prop: 'month'},
-                {label: '使用率（%）', prop: 'appRate'},
-                {label: '3′联系客户率（%）', prop: 'threeMinutesContactRate'},
-                {label: '平安聚合成功率（%）', prop: 'pinganPolymerizationSuccessRate'},
-                {label: '中华聚合成功率（%）', prop: 'zhonghuaPolymerizationSuccessRate'},
-                {label: '中道聚合成功率（%）', prop: 'zdPolymerizationSuccessRate'},
-                {label: '总聚合成功率（%）', prop: 'polymerizationSuccessRate'},
-              ]
-            }else if(this.activeIndex === 3){
-              this.labelList = [
-                {label: '月', prop: 'month'},
-                {label: '接单时效(分)', prop: 'receiving'},
-                {label: '3′接单率（%）', prop: 'threeMinutesReceivingRate'},
-                {label: '到达时效(分)', prop: 'arriving'},
-                {label: '40′到达率（%）', prop: 'fortyMinutesArrivalRate'},
-                {label: '聚合成功到达时效', prop: 'polymerizationSuccessArriving'},
-              ]
-            }
-          }else{
-            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 === 1){
-              this.labelList = [
-                {label: '日', prop: 'date'},
-                {label: '投诉量', prop: 'complainOrderCount'},
-                {label: '投诉率（%）', prop: 'complainOrderRate'},
-                {label: '客户评价率（%）', prop: 'customerEvaluateRate'},
-                {label: '催促率（%）', prop: 'urgeRate'},
-              ]
-            }else if(this.activeIndex === 2){
-              this.labelList = [
-                {label: '日', prop: 'date'},
-                {label: '使用率（%）', prop: 'appRate'},
-                {label: '3′联系客户率（%）', prop: 'threeMinutesContactRate'},
-                {label: '平安聚合成功率（%）', prop: 'pinganPolymerizationSuccessRate'},
-                {label: '中华聚合成功率（%）', prop: 'zhonghuaPolymerizationSuccessRate'},
-                {label: '中道聚合成功率（%）', prop: 'zdPolymerizationSuccessRate'},
-                {label: '总聚合成功率（%）', prop: 'polymerizationSuccessRate'},
-              ]
-            }else if(this.activeIndex === 3){
-              this.labelList = [
-                {label: '日', prop: 'date'},
-                {label: '接单时效(分)', prop: 'receiving'},
-                {label: '3′接单率（%）', prop: 'threeMinutesReceivingRate'},
-                {label: '小修到达时效(分)', prop: 'minorArriving'},
-                {label: '拖车到达时效(分)', prop: 'trailArriving'},
-                {label: '困境到达时效(分)', prop: 'dilemmaArriving'},
-                {label: '到达时效(分)', prop: 'arriving'},
-                {label: '40′到达率（%）', prop: 'fortyMinutesArrivalRate'},
-                {label: '小修聚合成功到达时效(分)', prop: 'minorPolymerizationSuccessArriving'},
-                {label: '拖车聚合成功到达时效(分)', prop: 'trailPolymerizationSuccessArriving'},
-                {label: '聚合成功到达时效', prop: 'polymerizationSuccessArriving'},
-              ]
-            }
-          }
+          await this.twoTabHanldeData()
         } else if ([3, 4].includes(this.active)) {
-          let res=await getDriverStatisticsKpi({
-            startTime: this.startTime + ' 00:00:00',
-            endTime: this.endTime + ' 23:59:59',
-            statisticsType: this.active===3 ? 1 : 2,
-            driverId:68517,
+          let res = await getDriverStatisticsKpi({
+            startTime: this.startTime ,
+            endTime: this.endTime,
+            statisticsType: this.active === 3 ? 1 : 2,
+            driverId: 68517,
           })
-          console.log("res===",res)
-          if(this.active===3){//师傅月数据
-            this.detailList = res.data
-            this.loading=false;
-            if (this.activeIndex === 0) {
-              this.labelList = [
-                {label: '师傅姓名', prop: 'driverName'},
-                {label: '承接案件量', prop: 'receiveOrderCount'},
-                {label: '拒单量', prop: 'refuseOrderCount'},
-                {label: '拒单率（%）', prop: 'refuseOrderRate'},
-                {label: '超时接单量', prop: 'timeoutOrderCount'},
-                {label: '超时率（%）', prop: 'timeoutOrderRate'},
-              ]
-            }else if(this.activeIndex === 1){
-              this.labelList = [
-                {label: '师傅姓名', prop: 'driverName'},
-                {label: '承接案件量', prop: 'receiveOrderCount'},
-                {label: '投诉量', prop: 'complainOrderCount'},
-                {label: '投诉率（%）', prop: 'complainOrderRate'},
-                {label: '客户满意度', prop: 'customerSatisfaction'},
-                {label: '客户评价率（%）', prop: 'customerEvaluateRate'},
-                {label: '催促率（%）', prop: 'urgeRate'},
-              ]
-            }else if(this.activeIndex === 2){
-              this.labelList = [
-                {label: '师傅姓名', prop: 'driverName'},
-                {label: '承接案件量', prop: 'receiveOrderCount'},
-                {label: 'App使用率（%）', prop: 'appRate'},
-                {label: '3′联系客户率（%）', prop: 'threeMinutesContactRate'},
-                {label: '平安聚合成功率（%）', prop: 'pinganPolymerizationSuccessRate'},
-                {label: '中华聚合成功率（%）', prop: 'zhonghuaPolymerizationSuccessRate'},
-                {label: '中道聚合成功率（%）', prop: 'zdPolymerizationSuccessRate'},
-                {label: '总聚合成功率（%）', prop: 'polymerizationSuccessRate'},
-                {label: '日均在线时长', prop: 'onlineDuration'},
-              ]
-            }else if(this.activeIndex === 3){
-              this.labelList = [
-                {label: '师傅姓名', prop: 'driverName'},
-                {label: '接单时效(分)', prop: 'receiving'},
-                {label: '3′接单率（%）', prop: 'threeMinutesReceivingRate'},
-                {label: '到达时效(分)', prop: 'arriving'},
-                {label: '40′到达率（%）', prop: 'fortyMinutesArrivalRate'},
-                {label: '聚合成功到达时效', prop: 'polymerizationSuccessArriving'},
-              ]
-            }
-          }else{//师傅日数据
-            this.detailList = res.data
-            this.loading=false;
-            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 === 1){
-              this.labelList = [
-                {label: '日', prop: 'date'},
-                {label: '投诉量', prop: 'complainOrderCount'},
-                {label: '投诉率（%）', prop: 'complainOrderRate'},
-                {label: '客户满意度', prop: 'customerSatisfaction'},
-                {label: '客户评价率（%）', prop: 'customerEvaluateRate'},
-                {label: '催促率（%）', prop: 'urgeRate'},
-              ]
-            }else if(this.activeIndex === 2){
-              this.labelList = [
-                {label: '日', prop: 'date'},
-                {label: '使用率（%）', prop: 'appRate'},
-                {label: '3′联系客户率（%）', prop: 'threeMinutesContactRate'},
-                {label: '平安聚合成功率（%）', prop: 'pinganPolymerizationSuccessRate'},
-                {label: '中华聚合成功率（%）', prop: 'zhonghuaPolymerizationSuccessRate'},
-                {label: '中道聚合成功率（%）', prop: 'zdPolymerizationSuccessRate'},
-                {label: '总聚合成功率（%）', prop: 'polymerizationSuccessRate'},
-                {label: '日均在线时长', prop: 'onlineDuration'},
-              ]
-            }else if(this.activeIndex === 3){
-              this.labelList = [
-                {label: '日', prop: 'date'},
-                {label: '接单时效(分)', prop: 'receiving'},
-                {label: '3′接单率（%）', prop: 'threeMinutesReceivingRate'},
-                {label: '到达时效(分)', prop: 'arriving'},
-                {label: '40′到达率（%）', prop: 'fortyMinutesArrivalRate'},
-                {label: '聚合成功到达时效', prop: 'polymerizationSuccessArriving'},
-              ]
-            }
-          }
-          console.log("res",res)
+          this.detailList = res.data
+          this.loading = false;
+          await this.twoTabHanldeData();
         } else if ([5, 6, 7, 8, 9].includes(this.active)) {
           this.detailList = []
           this.labelList = []
           let result = await getKpiDetailsData({
-            startTime: this.startTime + ' 00:00:00',
-            endTime: this.endTime + ' 23:59:59',
+            startTime: this.startTime,
+            endTime: this.endTime,
             searchType: this.setType(this.active),
-            pageNum: 1,
-            pageSize: 300
+            pageNum: this.pageNum,
+            pageSize: this.pageSize
           });
+          this.total = result.total
           this.detailList = result.data?.map(item => {
             let formatVal = dayjs(item.createTime).format('DD');
-            return {...item,date: formatVal };
+            return {...item, date: formatVal};
           });
-          this.loading=false
+          this.loading = false
           if (this.active === 5) {//拒单明细
             this.labelList = [
               {label: '案件编号', prop: 'orderCode'},
@@ -768,8 +775,8 @@ export default {
               {label: '拒单师傅车号', prop: 'plateNumber'},
               {label: '拒单师傅名称', prop: 'driverName'},
               {label: '手机号', prop: 'driverPhone'},
-              {label: '上游接单来源', prop: 'reason'},
-              {label: '中道派单时间', prop: 'reason'},
+              {label: '上游接单来源', prop: 'workSource'},
+              {label: '中道派单时间', prop: 'dispatchTime'},
               {label: '拒绝原因', prop: 'reason'},
             ]
           } else if (this.active === 6) {//超时明细
@@ -779,8 +786,8 @@ export default {
               {label: '超时师傅车号', prop: 'plateNumber'},
               {label: '超时师傅名称', prop: 'driverName'},
               {label: '手机号', prop: 'driverPhone'},
-              {label: '上游接单来源', prop: 'reason'},
-              {label: '中道派单时间', prop: 'reason'},
+              {label: '上游接单来源', prop: 'workSource'},
+              {label: '中道派单时间', prop: 'dispatchTime'},
             ]
           } else if (this.active === 7) {//投诉明细
             this.labelList = [
@@ -806,21 +813,294 @@ export default {
           }
         }
       } finally {
-        this.loading=false
+        this.loading = false
       }
     },
+    checkMobile() {
+      const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+      this.isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
+    },
+    // 初始化获取当月日期
+    initDate() {
+      this.startTime = dayjs(new Date()).format('YYYY-MM') + '-01 00:00:00'
+      this.endTime = dayjs(new Date()).format('YYYY-MM') + '-' + this.getDayLen()+' 23:59:59'
+      this.startMonthTime=this.getStartTimeFromEndTime(this.endTime)
+      console.log(this.startTime,this.endTime,this.startMonthTime)
+    },
+    // 获取当月天数
+    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;
+    },
     async changeTab(index) {
-      this.labelList=[]
-      this.activeIndex = index
-      await this.getData()
-      if(this.active===1){
-        this.$nextTick(()=>{
-          this.drawLine()
-        })
+      try {
+        this.loadingData = true
+        this.activeIndex = index
+        this.labelList = []
+        this.v1 = []
+        this.v2 = []
+        this.v3 = []
+        this.v4 = []
+        this.v5 = []
+        this.v6 = []
+        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
       }
     },
-    setType(type){
-      switch (type){
+    // 二级tab切可不调接口，需再次处理数据,1,2,3,4
+    twoTabHanldeData() {
+      if (this.active === 1) {
+        if (this.activeIndex === 0) {//接单指标
+          this.detailList?.map(item => {
+            this.v1.unshift(item.dispatchOrderCount)
+            this.v2.unshift(item.refuseOrderRate)
+            this.v3.unshift(item.timeoutOrderRate)
+            this.v4.unshift(item.cancelrate)
+          })
+          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 === 1) {
+          this.detailList?.map(item => {
+            this.v1.unshift(item.customerEvaluateRate)
+            this.v2.unshift(item.customerSatisfaction)
+            this.v3.unshift(item.complainOrderRate)
+          })
+          this.labelList = [
+            {label: '月', prop: 'month'},
+            {label: '投诉量', prop: 'complainOrderCount'},
+            {label: '投诉率（%）', prop: 'complainOrderRate'},
+            {label: '客户满意度', prop: 'customerSatisfaction'},
+            {label: '客户评价率（%）', prop: 'customerEvaluateRate'},
+          ]
+        } else if (this.activeIndex === 2) {
+          this.detailList?.map(item => {
+            this.v1.unshift(item.appRate)
+            this.v2.unshift(item.threeMinutesContactRate)
+            this.v3.unshift(item.pinganPolymerizationSuccessRate)
+            this.v4.unshift(item.zhonghuaPolymerizationSuccessRate)
+            this.v5.unshift(item.zdPolymerizationSuccessRate)
+            this.v6.unshift(item.polymerizationSuccessRate)
+          })
+          this.labelList = [
+            {label: '月', prop: 'month'},
+            {label: '使用率（%）', prop: 'appRate'},
+            {label: '3′联系客户率（%）', prop: 'threeMinutesContactRate'},
+            {label: '平安聚合成功率（%）', prop: 'pinganPolymerizationSuccessRate'},
+            {label: '中华聚合成功率（%）', prop: 'zhonghuaPolymerizationSuccessRate'},
+            {label: '中道聚合成功率（%）', prop: 'zdPolymerizationSuccessRate'},
+            {label: '总聚合成功率（%）', prop: 'polymerizationSuccessRate'},
+          ]
+        } else if (this.activeIndex === 3) {
+          if (this.isMobile) {
+            if (this.value == 1) {
+              this.detailList?.map(item => {
+                this.v1.unshift(item.receiving)
+                this.v2.unshift(item.threeMinutesReceivingRate)
+              })
+            } else {
+              this.detailList?.map(item => {
+                this.v1.unshift(item.arriving)
+                this.v2.unshift(item.polymerizationSuccessArriving)
+                this.v3.unshift(item.fortyMinutesArrivalRate)
+              })
+            }
+          } else {
+            this.detailList?.map(item => {
+              this.v1.unshift(item.receiving)
+              this.v2.unshift(item.threeMinutesReceivingRate)
+              this.v5.unshift(item.fortyMinutesArrivalRate)
+            })
+            if (this.swithVal) {
+              this.detailList?.map(item => {
+                this.v3.unshift(item.trailArriving)
+                this.v4.unshift(item.trailPolymerizationSuccessArriving)
+
+              })
+            } else {
+              this.detailList?.map(item => {
+                this.v3.unshift(item.minorArriving)
+                this.v4.unshift(item.minorPolymerizationSuccessArriving)
+              })
+            }
+          }
+          this.labelList = [
+            {label: '月', prop: 'month'},
+            {label: '接单时效(分)', prop: 'receiving'},
+            {label: '3′接单率（%）', prop: 'threeMinutesReceivingRate'},
+            {label: '到达时效(分)', prop: 'arriving'},
+            {label: '40′到达率（%）', prop: 'fortyMinutesArrivalRate'},
+            {label: '聚合成功到达时效', prop: 'polymerizationSuccessArriving'},
+          ]
+        }
+      } 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 === 1) {
+          this.labelList = [
+            {label: '日', prop: 'date'},
+            {label: '投诉量', prop: 'complainOrderCount'},
+            {label: '投诉率（%）', prop: 'complainOrderRate'},
+            {label: '客户评价率（%）', prop: 'customerEvaluateRate'},
+            {label: '催促率（%）', prop: 'urgeRate'},
+          ]
+        } else if (this.activeIndex === 2) {
+          this.labelList = [
+            {label: '日', prop: 'date'},
+            {label: '使用率（%）', prop: 'appRate'},
+            {label: '3′联系客户率（%）', prop: 'threeMinutesContactRate'},
+            {label: '平安聚合成功率（%）', prop: 'pinganPolymerizationSuccessRate'},
+            {label: '中华聚合成功率（%）', prop: 'zhonghuaPolymerizationSuccessRate'},
+            {label: '中道聚合成功率（%）', prop: 'zdPolymerizationSuccessRate'},
+            {label: '总聚合成功率（%）', prop: 'polymerizationSuccessRate'},
+          ]
+        } else if (this.activeIndex === 3) {
+          this.labelList = [
+            {label: '日', prop: 'date'},
+            {label: '接单时效(分)', prop: 'receiving'},
+            {label: '3′接单率（%）', prop: 'threeMinutesReceivingRate'},
+            {label: '小修到达时效(分)', prop: 'minorArriving'},
+            {label: '拖车到达时效(分)', prop: 'trailArriving'},
+            {label: '困境到达时效(分)', prop: 'dilemmaArriving'},
+            {label: '到达时效(分)', prop: 'arriving'},
+            {label: '40′到达率（%）', prop: 'fortyMinutesArrivalRate'},
+            {label: '小修聚合成功到达时效(分)', prop: 'minorPolymerizationSuccessArriving'},
+            {label: '拖车聚合成功到达时效(分)', prop: 'trailPolymerizationSuccessArriving'},
+            {label: '聚合成功到达时效', prop: 'polymerizationSuccessArriving'},
+          ]
+        }
+      } else if (this.active === 3) {
+        if (this.activeIndex === 0) {
+          this.labelList = [
+            {label: '师傅姓名', prop: 'driverName'},
+            {label: '承接案件量', prop: 'receiveOrderCount'},
+            {label: '拒单量', prop: 'refuseOrderCount'},
+            {label: '拒单率（%）', prop: 'refuseOrderRate'},
+            {label: '超时接单量', prop: 'timeoutOrderCount'},
+            {label: '超时率（%）', prop: 'timeoutOrderRate'},
+          ]
+        } else if (this.activeIndex === 1) {
+          this.labelList = [
+            {label: '师傅姓名', prop: 'driverName'},
+            {label: '承接案件量', prop: 'receiveOrderCount'},
+            {label: '投诉量', prop: 'complainOrderCount'},
+            {label: '投诉率（%）', prop: 'complainOrderRate'},
+            {label: '客户满意度', prop: 'customerSatisfaction'},
+            {label: '客户评价率（%）', prop: 'customerEvaluateRate'},
+            {label: '催促率（%）', prop: 'urgeRate'},
+          ]
+        } else if (this.activeIndex === 2) {
+          this.labelList = [
+            {label: '师傅姓名', prop: 'driverName'},
+            {label: '承接案件量', prop: 'receiveOrderCount'},
+            {label: 'App使用率（%）', prop: 'appRate'},
+            {label: '3′联系客户率（%）', prop: 'threeMinutesContactRate'},
+            {label: '平安聚合成功率（%）', prop: 'pinganPolymerizationSuccessRate'},
+            {label: '中华聚合成功率（%）', prop: 'zhonghuaPolymerizationSuccessRate'},
+            {label: '中道聚合成功率（%）', prop: 'zdPolymerizationSuccessRate'},
+            {label: '总聚合成功率（%）', prop: 'polymerizationSuccessRate'},
+            {label: '日均在线时长', prop: 'onlineDuration'},
+          ]
+        } else if (this.activeIndex === 3) {
+          this.labelList = [
+            {label: '师傅姓名', prop: 'driverName'},
+            {label: '接单时效(分)', prop: 'receiving'},
+            {label: '3′接单率（%）', prop: 'threeMinutesReceivingRate'},
+            {label: '到达时效(分)', prop: 'arriving'},
+            {label: '40′到达率（%）', prop: 'fortyMinutesArrivalRate'},
+            {label: '聚合成功到达时效', prop: 'polymerizationSuccessArriving'},
+          ]
+        }
+      } else if (this.active === 4) {
+        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 === 1) {
+          this.labelList = [
+            {label: '日', prop: 'date'},
+            {label: '投诉量', prop: 'complainOrderCount'},
+            {label: '投诉率（%）', prop: 'complainOrderRate'},
+            {label: '客户满意度', prop: 'customerSatisfaction'},
+            {label: '客户评价率（%）', prop: 'customerEvaluateRate'},
+            {label: '催促率（%）', prop: 'urgeRate'},
+          ]
+        } else if (this.activeIndex === 2) {
+          this.labelList = [
+            {label: '日', prop: 'date'},
+            {label: '使用率（%）', prop: 'appRate'},
+            {label: '3′联系客户率（%）', prop: 'threeMinutesContactRate'},
+            {label: '平安聚合成功率（%）', prop: 'pinganPolymerizationSuccessRate'},
+            {label: '中华聚合成功率（%）', prop: 'zhonghuaPolymerizationSuccessRate'},
+            {label: '中道聚合成功率（%）', prop: 'zdPolymerizationSuccessRate'},
+            {label: '总聚合成功率（%）', prop: 'polymerizationSuccessRate'},
+            {label: '日均在线时长', prop: 'onlineDuration'},
+          ]
+        } else if (this.activeIndex === 3) {
+          this.labelList = [
+            {label: '日', prop: 'date'},
+            {label: '接单时效(分)', prop: 'receiving'},
+            {label: '3′接单率（%）', prop: 'threeMinutesReceivingRate'},
+            {label: '到达时效(分)', prop: 'arriving'},
+            {label: '40′到达率（%）', prop: 'fortyMinutesArrivalRate'},
+            {label: '聚合成功到达时效', prop: 'polymerizationSuccessArriving'},
+          ]
+        }
+      }
+    },
+    setType(type) {
+      switch (type) {
         case 5:
           return 1;
         case 6:
@@ -833,53 +1113,71 @@ export default {
           return 5;
       }
     },
-  },
+    getTitle(type) {
+      switch (type) {
+        case 0:
+          return '接单时效';
+        case 1:
+          return '客户评价';
+        case 2:
+          return 'APP使用';
+        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%);
+
+.wrap {
+  @include wh(100%, 100%);
 }
-.headWrap{
-  @include wh(100%,56px);
+
+.headWrap {
+  @include wh(100%, 56px);
   background: #3E62B9;
   @include flexTwoCenter;
   flex-direction: column;
-  .title{
-    //font-family: YouSheBiaoTiHei;
+
+  .title {
     font-size: 20px;
     color: #FFFFFF;
   }
-  .titleName{
+
+  .titleName {
     font-family: PingFangSC, PingFang SC;
-    @include fontWeightSize(14px,500);
+    @include fontWeightSize(14px, 500);
     color: #BDDAFF;
   }
 }
-.webHeadWrap{
-  display: flex;
-  align-items: center;
-  //justify-content: space-between;
-  //justify-content: center;
-  @include wh(100%,50px);
+
+.webHeadWrap {
+  @include flexCenter;
+  @include wh(100%, 50px);
   background: #3E62B9;
   box-sizing: border-box;
   padding: 0 20px;
-  .empty{
-    @include wh(250px,100%);
+
+  .empty {
+    @include wh(250px, 100%);
   }
-  .title{
+
+  .title {
     font-size: 20px;
     color: #FFFFFF;
   }
-  .searchWrap{
+
+  .searchWrap {
     display: flex;
     align-items: center;
     position: relative;
-    .month{
+
+    .month {
       display: inline-block;
       width: 45px;
       height: 30px;
@@ -887,125 +1185,153 @@ export default {
       text-align: center;
       border-radius: 20px 0px 0px 20px;
       border: 1px solid #4C81F5;
-      font-size:14px ;
+      font-size: 14px;
       color: #FFFFFF;
     }
-    .ipt{
-      display: inline-block;
-      width: 250px;
-      height: 32px;
-      line-height: 32px;
-      background: #E6EEFF;
-      border-radius: 0px 20px 20px 0px;
-      border: 1px solid #4C81F5;
-      padding: 0;
-    }
-    .el-icon-search{
+
+    .el-icon-search {
       font-size: 15px;
       color: #4C81F5;
       position: absolute;
-      right:15px;
+      right: 15px;
+    }
+
+    ::v-deep .el-input--suffix .el-input__inner {
+      height: 32px;
+      background: #EFF2F8;
+    }
+
+    ::v-deep .el-input__inner {
+      border-radius: 0px 20px 20px 0px;
     }
   }
 }
-::v-deep .van-tabs__nav--line.van-tabs__nav--complete{
+
+::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{
+
+::v-deep .van-tab--active {
   background: #FFFFFF;
   border-radius: 7px 7px 0px 0px;
-  @include sizeWeightCol(13px,500,#5D7FD7 !important);
+  @include sizeWeightCol(13px, 500, #5D7FD7 !important);
 }
-::v-deep .van-tabs__line{
+
+::v-deep .van-tabs__line {
   display: none;
 }
-::v-deep .van-tab{
+
+::v-deep .van-tab {
   border-right: 1px solid #6B97D0;
-  @include sizeWeightCol(13px,500,#ACC1DB);
+  @include sizeWeightCol(13px, 500, #ACC1DB);
 }
-::v-deep .van-col{
+
+::v-deep .van-col {
   padding: 6px 10px;
   background: #E5E6EB;
   border-right: 1px solid #ccc;
   border-bottom: 1px solid #ccc;;
 }
-.contentWrap{
-  @include wh(100%,calc(100% - 140px));
+
+.contentWrap {
+  @include wh(100%, calc(100% - 120px));
   overflow-y: auto;
   background: #EFF2F8;
-  .reciceOrder{
-    @include whBg(375px,146px,#FFFFFF);
-    @include sizing4Padding(19px,25px,38px,19px);
+
+  .reciceOrder {
+    @include whBg(375px, 146px, #FFFFFF);
+    @include sizing4Padding(19px, 25px, 38px, 19px);
     margin-bottom: 10px;
-    .storeWrap{
+
+    .storeWrap {
       width: 100%;
       text-align: center;
     }
-    .title{
-      @include sizeWeightCol(14px,bold,#040415);
+
+    .title {
+      @include sizeWeightCol(14px, bold, #040415);
       margin-bottom: 14px;
     }
-    .reciceOrderIWrap{
+
+    .reciceOrderIWrap {
       @include flexColAround;
-      .common{
+
+      .common {
         @include flexColCen;
       }
     }
-    .num{
-      @include sizeWeightCol(24px,bold,#040415);
+
+    .num {
+      @include sizeWeightCol(24px, bold, #040415);
       margin-bottom: 10px;
     }
-    .itemTitle{
+
+    .itemTitle {
       @include flexCenter;
       font-size: 12px;
-      color: rgba(4, 4, 21,0.45);
+      color: rgba(4, 4, 21, 0.45);
     }
-    .img{
-      @include whMarLe(8px,10px,4px);
+
+    .img {
+      @include whMarLe(8px, 10px, 4px);
     }
-    .line{
+
+    .line {
       border-right: 2px solid #EAE9EC;
     }
   }
-  .evaluate,.appUse,.store{
+
+  .evaluate, .appUse, .store {
     height: 179px;
-    .title{
+
+    .title {
       margin-bottom: 0 !important;
     }
   }
-  .webCom{
-    @include whBg(420px,200px,#FFFFFF);
+
+  .webCom {
+    @include whBg(420px, 200px, #FFFFFF);
     float: left;
     margin: 10px;
-    .webTitle{
+
+    .webTitle {
       margin-bottom: 40px !important;
     }
   }
 }
-.webcontentWrap{
-  @include wh(100%,calc(100% - 86px));
+
+.webcontentWrap {
+  @include wh(100%, calc(100% - 86px));
 }
-.tabWrap{
-  @include wh(100%,22px);
+
+.tabWrap {
+  @include wh(100%, 22px);
   @include flexColAround;
   margin: 10px 0;
-  div{
+
+  div {
     padding: 2px 8px;
     border-radius: 7px;
     font-size: 12px;
-    @include bgFontColor(#3E3C3C,#F4F4F4);
+    @include bgFontColor(#3E3C3C, #F4F4F4);
   }
+
   .active {
     position: relative;
     opacity: 1;
-    @include bgFontColor(#ffffff,#F1B289);
+    @include bgFontColor(#ffffff, #F1B289);
   }
+
   .active:after {
     content: '';
     display: block;
-    @include wh(18px,2px);
+    @include wh(18px, 2px);
     background: #FFFFFF;
     position: absolute;
     margin-top: 3px;
@@ -1018,57 +1344,119 @@ export default {
     border-color: #F1B289 transparent transparent transparent;
   }
 }
-.webTabWrap{
-    width: 40% !important;
-    .active:after{
-      margin-top: 5px;
-    }
+
+.webTabWrap {
+  width: 40% !important;
+
+  .active:after {
+    margin-top: 5px;
+  }
 }
-.monthTotal{
+
+.monthTotal {
   background: #FFFFFF;
   padding-left: 6px;
   //height: auto !important;
-  .leftMonth{
-    .leftItem{
+  .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){
+
+    .leftItem:nth-child(odd) {
       border-top: 1px solid #cccccc;
       border-bottom: 1px solid #cccccc;
       background-color: #f2f2f2; /* 奇数*/
     }
   }
+
   .content {
     flex-grow: 1; /* 占据剩余空间 */
     overflow-x: auto; /* 当内容超出宽度时启用水平滚动 */
   }
 }
-.comTab{
+
+.comTab {
   width: 100%;
+  height: 95%;
+}
+
+::v-deep .el-table {
   height: 100%;
 }
-::v-deep  .el-table{
-  height: 100%;
+
+::v-deep .el-table--scrollable-x .el-table__body-wrapper {
+  height: 95% !important;
 }
-::v-deep  .el-table--scrollable-x .el-table__body-wrapper{
-  height: 100% !important;
-}
-/*.detailTable{
-  height: 100%;
-  ::v-deep  .el-table{
-    height: 100%;
-  }
-  ::v-deep  .el-table--scrollable-x .el-table__body-wrapper{
-    height: 100% !important;
-  }
-}*/
-.chartWrapWeb,.webTab{
+
+.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;
+}
 </style>