From 0aa9f3ec048881cc6900a9bbb3b2ee57de4e5c4e Mon Sep 17 00:00:00 2001
From: zhouxueli <2841188632@qq.com>
Date: Wed, 10 Jul 2024 21:19:53 +0800
Subject: [PATCH] =?UTF-8?q?story#4506,=20KPI=E6=BC=94=E7=A4=BA=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96-240709?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/kpi.js                           |  19 +-
 src/views/kpi/components/noFit-table.vue |  84 +++++-
 src/views/kpi/kpiIndex.vue               | 316 +++++++++++++++++------
 3 files changed, 317 insertions(+), 102 deletions(-)

diff --git a/src/api/kpi.js b/src/api/kpi.js
index 2e7641a2..93229db1 100644
--- a/src/api/kpi.js
+++ b/src/api/kpi.js
@@ -36,14 +36,7 @@ export function getKpiDetailsData(data){
     data
   })
 }
-/*export function getSupplierId(data){
-  return request({
-    url: '/supplier/select/supplier',
-    method:'GET',
-    // contentType: 'application/json',
-    data
-  })
-}*/
+// 关键词搜索服务商名称
 export function getSupplierId(key) {
   return request({
     url: '/supplier/select/supplier',
@@ -53,3 +46,13 @@ export function getSupplierId(key) {
     }
   });
 }
+// supplier/select/driver 关键词搜索司机名称
+export function getDriverName(key) {
+  return request({
+    url: '/supplier/select/driver',
+    method: 'GET',
+    params: {
+      key: key ,
+    }
+  });
+}
\ No newline at end of file
diff --git a/src/views/kpi/components/noFit-table.vue b/src/views/kpi/components/noFit-table.vue
index 2cb12bad..c161ea7e 100644
--- a/src/views/kpi/components/noFit-table.vue
+++ b/src/views/kpi/components/noFit-table.vue
@@ -8,9 +8,16 @@
               v-loading="loading"
               :cell-style="setTableCellStyle"
               class="custom-table">
-      <el-table-column v-for="column in labelList" :key="column.prop" :prop="column.prop" :label="column.label"
-                       align="center"  min-width="100" :width="(isMobile && (column.label=='案件编号' || column.label=='服务内容')) ? 70 : 'auto'">
-      </el-table-column>
+      <template v-if="active===1">
+        <el-table-column v-for="item in labelList" :key="item.prop" :label="item.label" :prop="item.prop" align="center">
+          <template slot-scope="scope">{{scope.row[item.prop]}}  </template>
+        </el-table-column>
+      </template>
+      <template v-else>
+        <el-table-column v-for="column in labelList" :key="column.prop" :prop="column.prop" :label="column.label"
+                         align="center"  min-width="100" :width="(isMobile && (column.label=='案件编号' || column.label=='服务内容')) ? 70 : 'auto'">
+        </el-table-column>
+      </template>
     </el-table>
   </div>
 </template>
@@ -18,7 +25,7 @@
 <script>
 export default {
   name: "noFit-table",
-  props: ['tableData', 'labelList', 'loading', 'isMobile'],
+  props: ['tableData', 'labelList', 'loading', 'isMobile','active'],
   data() {
     return {}
   },
@@ -26,12 +33,67 @@ export default {
   },
   methods: {
     setTableCellStyle({ row, column,columnIndex }) {
+      // 月总表格被转置，原始方法失效，重新定义对比
+      if(this.active===1){
+        if(row.month == '3′接单率(%)'){
+          if(columnIndex){
+            let res=row[column.property]
+            const rate = parseFloat(res && res.replace('%', ''));
+            if(rate < 95){
+              return {backgroundColor: '#F1B289'}
+            }
+          }
+        }
+        if(row.month == '接单时效(分)'){
+          if(columnIndex){
+            let res=row[column.property]
+            if(res > 5){
+              return {backgroundColor: '#F1B289'}
+            }
+          }
+        }
+        if(row.month == '到达时效(分)'){
+          if(columnIndex){
+            let res=row[column.property]
+            if(res > 40){
+              return {backgroundColor: '#F1B289'}
+            }
+          }
+        }
+        if(row.month == '总聚合成功率(%)'){
+          if(columnIndex){
+            let res=row[column.property]
+            const rate = parseFloat(res && res.replace('%', ''));
+            if(rate < 80){
+              return {backgroundColor: '#F1B289'}
+            }
+          }
+        }
+        if(row.month == '使用率(%)'){
+          if(columnIndex){
+            let res=row[column.property]
+            const rate = parseFloat(res && res.replace('%', ''));
+            if(rate < 95){
+              return {backgroundColor: '#F1B289'}
+            }
+          }
+        }
+        if(row.month == '投诉率(%)'){
+          if(columnIndex){
+            let res=row[column.property]
+            const rate = parseFloat(res && res.replace('%', ''));
+            if(rate > 0.1){
+              return {backgroundColor: '#F1B289'}
+            }
+          }
+        }
+      }
       // 接单率
       if(column.property=='threeMinutesReceivingRate'){
         if(columnIndex){
           const rate = parseFloat(row.threeMinutesReceivingRate && row.threeMinutesReceivingRate.replace('%', ''));
           if(rate < 95){
-            return {backgroundColor: '#88C9F2'}
+            return {backgroundColor: '#F1B289'}
           }
         }
       }
@@ -39,7 +101,7 @@ export default {
       if(column.property=='receiving'){
         if(columnIndex){
           if(row.receiving > 5){
-            return {backgroundColor: '#88C9F2'}
+            return {backgroundColor: '#F1B289'}
           }
         }
       }
@@ -47,7 +109,7 @@ export default {
       if(column.property=='arriving'){
         if(columnIndex){
           if(row.arriving > 40){
-            return {backgroundColor: '#88C9F2'}
+            return {backgroundColor: '#F1B289'}
           }
         }
       }
@@ -56,7 +118,7 @@ export default {
         if(columnIndex){
           const rate = parseFloat(row.polymerizationSuccessRate && row.polymerizationSuccessRate.replace('%', ''));
           if(rate < 80){
-            return {backgroundColor: '#88C9F2'}
+            return {backgroundColor: '#F1B289'}
           }
         }
       }
@@ -65,7 +127,7 @@ export default {
         if(columnIndex){
           const rate = parseFloat(row.appRate && row.appRate.replace('%', ''));
           if(rate < 95){
-            return {backgroundColor: '#88C9F2'}
+            return {backgroundColor: '#F1B289'}
           }
         }
       }
@@ -74,7 +136,7 @@ export default {
         if(columnIndex){
           const rate = parseFloat(row.urgeRate && row.urgeRate.replace('%', ''));
           if(rate > 3){
-            return {backgroundColor: '#88C9F2'}
+            return {backgroundColor: '#F1B289'}
           }
         }
       }
@@ -83,7 +145,7 @@ export default {
         if(columnIndex){
           const rate = parseFloat(row.complainOrderRate.replace('%', ''));
           if(rate > 0.1){
-            return {backgroundColor: '#88C9F2'}
+            return {backgroundColor: '#F1B289'}
           }
         }
       }
diff --git a/src/views/kpi/kpiIndex.vue b/src/views/kpi/kpiIndex.vue
index 7f174b4b..211f1480 100644
--- a/src/views/kpi/kpiIndex.vue
+++ b/src/views/kpi/kpiIndex.vue
@@ -6,7 +6,7 @@
     </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">--{{ current }}月</span></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">
         <span class="month">{{ current }}月</span>
@@ -31,6 +31,8 @@
     </div>
     <van-tabs v-model="active" sticky @click="onClick">
       <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 && !([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}">
@@ -93,10 +95,25 @@
         </div>
       </div>
       <div :class="{'reciceOrder':true,'webCom':!isMobile,'store':isMobile}">
-        <div class="title">综合打分</div>
-        <div class="storeWrap" v-if="indexData">
-          <circle-char  ref="Doughnut7" :data="indexData && indexData.score" :bg-color="'#00D273'" :is-store="true"></circle-char>
+        <div class="scoreTitle">
+          <span class="title">综合打分</span>
+          <i class="el-icon-question" @click.prevent="showScoreChart = !showScoreChart"></i>
         </div>
+        <div class="storeWrap" v-if="indexData">
+          <circle-char v-if="showScoreChart"  ref="Doughnut7" :data="indexData && indexData.score" :bg-color="'#00D273'" :is-store="true"></circle-char>
+          <div v-else>
+            <div><span class="defen">接单得分:</span>{{ indexData.orderScore }}</div>
+            <div><span class="defen">接单时效得分:</span>{{ indexData.orderAgeingScore }}</div>
+            <div><span class="defen">到达时效得分:</span>{{ indexData.arriveAgeingScore }}</div>
+            <div><span class="defen">聚合成功率得分:</span>{{ indexData.polymerizationSuccessScore }}</div>
+            <div><span class="defen">APP使用率得分:</span>{{ indexData.appUseScore }}</div>
+            <div><span class="defen">催促率得分:</span>{{ indexData.urgeScore }}</div>
+            <div><span class="defen">投诉率得分:</span>{{ indexData.complainScore }}</div>
+          </div>
+        </div>
+      </div>
+      <div>
+
       </div>
       <div v-if="isMobile" style="padding: 20px"></div>
     </div>
@@ -143,12 +160,30 @@
         </template>
       </div>
       <div :class="{'webTab':!isMobile,}">
-        <noFit-table :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"></noFit-table>
-      </div>
+        <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-input placeholder="请输入师傅名称" v-model.trim="driverName" @change="getData" />
+        <el-select
+            v-model="driverName"
+            filterable
+            remote
+            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.id">
+          </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' : ''"
@@ -157,22 +192,23 @@
         </div>
       </div>
       <div :class="{'comTab':true}">
-        <noFit-table :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"></noFit-table>
+        <noFit-table :active='active'  :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"></noFit-table>
       </div>
       <el-pagination
-          v-if="active !== 2"
           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"
+          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 :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"
+        <noFit-table :active='active'  :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"
                      :loading="loading"></noFit-table>
       </div>
       <el-pagination
@@ -196,7 +232,8 @@ import {
   getStatisticsKpiByMonth,
   getStatisticsKpi,
   getDriverStatisticsKpi,
-  getSupplierId
+  getSupplierId,
+  getDriverName
 } from "@/api/kpi.js"
 import {myMixins} from "@/utils/myMixins"
 import CircleChar from "@/views/kpi/components/circleChar.vue";
@@ -223,6 +260,8 @@ export default {
       indexData: {},
       detailList: [],
       labelList: [],
+      etlDetailList: [],
+      etlLabelList: [],
       loading: false,
       loadingData: false,
       v1: [],
@@ -242,7 +281,7 @@ export default {
         {value: '2', label: '到达时效'},
       ],
       pageNum: 1,
-      pageSize: 10,
+      pageSize: 20,
       total: 0,
       swithVal: true,
       supplierId:'',//1128
@@ -250,6 +289,10 @@ export default {
       selectOption: [],
       driverId:'',//68517
       driverName:'',
+      driverselectLoading: false,
+      driverselectOption: [],
+      leftArr:'<<<',
+      showScoreChart:true
     }
   },
   async mounted() {
@@ -261,6 +304,9 @@ export default {
     this.checkMobile();
     const urlParams = new URLSearchParams(window.location.search);
     this.isZd = urlParams?.get('isZd') || ''
+   /* if(!this.isMobile && this.isZd && this.isZd==1){
+      this.supplierId='1127'
+    }*/
   },
   async activated() {
   },
@@ -293,11 +339,26 @@ export default {
         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 searchHandle() {//web端服务商搜索操作
       console.log("搜索按钮")
     },
     async changeHandle() {
-      await this.getData();
+      await this.twoTabHanldeData();
       await this.drawLine();
     },
     async switchHandle() {
@@ -317,6 +378,8 @@ export default {
         this.v5 = []
         this.v6 = []
         this.xAxisArr = []
+        this.etlDetailList=[]
+        this.etlLabelList=[]
         await this.getKpiData()
         this.loadingData = false
       } finally {
@@ -822,11 +885,14 @@ export default {
             item.threeMinutesReceivingRate=this.formatPercentage(item.threeMinutesReceivingRate) ;
             item.fortyMinutesArrivalRate=this.formatPercentage(item.fortyMinutesArrivalRate) ;
             item.customerSatisfaction=this.formatPercentage(item.customerSatisfaction) ;
-            console.log("")
             let formatVal = dayjs(item.statisticsDate).format('DD');
             return {...item, date: formatVal};
           });
           this.loading = false;
+          if(this.active===4 && !this.driverName){
+            this.detailList=[]
+            this.total=0
+          }
           await this.twoTabHanldeData();
         } else if ([5, 6, 7, 8, 9].includes(this.active)) {
           this.detailList = []
@@ -872,8 +938,8 @@ export default {
               {label: '服务内容', prop: 'serviceName'},
               {label: '接单车号', prop: 'plateNumber'},
               {label: '接单师傅', prop: 'driverName'},
-              {label: '手机号', prop: 'driverPhone'},
-              {label: '客户投诉内容', prop: 'reason'},
+              {label: '投诉时间', prop: 'complainCreateTime'},
+              {label: '投诉类型', prop: 'complainTypeString'},
             ]
           } else if (this.active === 8) {//不使用App案件明细
             // console.log("不使用App案件明细")
@@ -881,11 +947,19 @@ export default {
               {label: '案件编号', prop: 'orderCode'},
               {label: '服务内容', prop: 'serviceName'},
               {label: '接单师傅手机号', prop: 'driverPhone'},
+              {label: '工单创建时间', prop: 'orderCreateTime'},
+              {label: '事发地', prop: 'vehiclePointAddress'},
             ]
           } else if (this.active === 9) {//车辆在线情况
             this.labelList = [
               {label: '日期', prop: 'date'},
-              {label: '在线车辆数量', prop: 'vehicleCount'},
+              {label: '0点在线车辆数量', prop: 'zeroClockVehicleCount'},
+              {label: '8点在线车辆数量', prop: 'eightClockVehicleCount'},
+              {label: '12点在线车辆数量', prop: 'twelveClockVehicleCount'},
+              {label: '16点在线车辆数量', prop: 'sixteenClockVehicleCount'},
+              {label: '20点在线车辆数量', prop: 'twentyClockVehicleCount'},
+              {label: '22点在线车辆数量', prop: 'twentyTwoClockVehicleCount'},
+
             ]
           }
         }
@@ -959,13 +1033,31 @@ export default {
     },
     // 二级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.detailList?.map(item => {
+          this.etlDetailList=[{ 'month': '派遣量' },{ 'month': '承接量' },{ 'month': '完成量' },
+            { 'month': '拒单量' },{ 'month': '拒单率(%)' },{ 'month': '超时接单量' },{ 'month': '超时率(%)' },{ 'month': '客户取消率(%)' }]
+          let props = 'prop' //自定义字段名称
+          this.detailList?.map((item,index) => {
             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'},
@@ -973,43 +1065,66 @@ export default {
             {label: '承接量', prop: 'receiveOrderCount'},
             {label: '完成量', prop: 'finishOrderCount'},
             {label: '拒单量', prop: 'refuseOrderCount'},
-            {label: '拒单率（%）', prop: 'refuseOrderRate'},
+            {label: '拒单率(%)', prop: 'refuseOrderRate'},
             {label: '超时接单量', prop: 'timeoutOrderCount'},
-            {label: '超时率（%）', prop: 'timeoutOrderRate'},
-            {label: '取消率（%）', prop: 'cancelRate'},
+            {label: '超时率(%)', prop: 'timeoutOrderRate'},
+            {label: '取消率(%)', prop: 'cancelRate'},
           ]
         } else if (this.activeIndex === 1) {
-          this.detailList?.map(item => {
+          this.etlDetailList=[{ 'month': '投诉量' },{ 'month': '投诉率(%)' },{ 'month': '客户满意度(%)' }, { 'month': '客户评价率(%)' }]
+          let props = 'prop' //自定义字段名称
+          this.detailList?.map((item,index) => {
             this.v1.push(item.customerEvaluateRate.replace('%', ''))
             this.v2.push(item.customerSatisfaction.replace('%', ''))
             this.v3.push(item.complainOrderRate.replace('%', ''))
+            const columnObj = {}
+            columnObj.label = item.month // 每一列的标题的名称
+            columnObj.prop = props + index //自定义每一列标题字段名称
+            this.etlLabelList.push(columnObj)
+            let mappings = [ 'complainOrderCount', 'complainOrderRate', 'customerSatisfaction','customerEvaluateRate' ];
+            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: 'customerSatisfaction'},
-            {label: '客户评价率（%）', prop: 'customerEvaluateRate'},
+            {label: '投诉率(%)', prop: 'complainOrderRate'},
+            {label: '客户满意度(%)', prop: 'customerSatisfaction'},
+            {label: '客户评价率(%)', prop: 'customerEvaluateRate'},
           ]
         } else if (this.activeIndex === 2) {
-          this.detailList?.map(item => {
+          this.etlDetailList=[{ 'month': '使用率(%)' },{ 'month': '3′联系客户率(%)' },{ 'month': '平安聚合成功率(%)' }, { 'month': '中华聚合成功率(%)' }
+            ,{ 'month': '中道聚合成功率（%' }, { 'month': '总聚合成功率(%)' }]
+          let props = 'prop' //自定义字段名称
+          this.detailList?.map((item,index) => {
             this.v1.push(item.appRate.replace('%', ''))
             this.v2.push(item.threeMinutesContactRate.replace('%', ''))
             this.v3.push(item.pinganPolymerizationSuccessRate.replace('%', ''))
             this.v4.push(item.zhonghuaPolymerizationSuccessRate.replace('%', ''))
             this.v5.push(item.zdPolymerizationSuccessRate.replace('%', ''))
             this.v6.push(item.polymerizationSuccessRate.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]]);
+            }
           })
           this.labelList = [
             {label: '月', prop: 'month'},
-            {label: '使用率（%）', prop: 'appRate'},
-            {label: '3′联系客户率（%）', prop: 'threeMinutesContactRate'},
-            {label: '平安聚合成功率（%）', prop: 'pinganPolymerizationSuccessRate'},
-            {label: '中华聚合成功率（%）', prop: 'zhonghuaPolymerizationSuccessRate'},
-            {label: '中道聚合成功率（%）', prop: 'zdPolymerizationSuccessRate'},
-            {label: '总聚合成功率（%）', prop: 'polymerizationSuccessRate'},
+            {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.etlDetailList=[{ 'month': '接单时效(分)' },{ 'month': '3′接单率(%)' },{ 'month': '到达时效(分)' }, { 'month': '40′到达率(%)' },{'month':'聚合成功到达时效(分)'}]
+          let props = 'prop' //自定义字段名称
           if (this.isMobile) {
             if (this.value == 1) {
               this.detailList?.map(item => {
@@ -1023,6 +1138,16 @@ export default {
                 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', 'threeMinutesReceivingRate', '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)
@@ -1045,9 +1170,9 @@ export default {
           this.labelList = [
             {label: '月', prop: 'month'},
             {label: '接单时效(分)', prop: 'receiving'},
-            {label: '3′接单率（%）', prop: 'threeMinutesReceivingRate'},
+            {label: '3′接单率(%)', prop: 'threeMinutesReceivingRate'},
             {label: '到达时效(分)', prop: 'arriving'},
-            {label: '40′到达率（%）', prop: 'fortyMinutesArrivalRate'},
+            {label: '40′到达率(%)', prop: 'fortyMinutesArrivalRate'},
             {label: '聚合成功到达时效(分)', prop: 'polymerizationSuccessArriving'},
           ]
         }
@@ -1059,39 +1184,39 @@ export default {
             {label: '承接案件量', prop: 'receiveOrderCount'},
             {label: '完成量', prop: 'finishOrderCount'},
             {label: '拒单量', prop: 'refuseOrderCount'},
-            {label: '拒单率（%）', prop: 'refuseOrderRate'},
+            {label: '拒单率(%)', prop: 'refuseOrderRate'},
             {label: '超时接单量', prop: 'timeoutOrderCount'},
-            {label: '超时率（%）', prop: 'timeoutOrderRate'},
-            {label: '客户取消率（%）', prop: 'cancelRate'},
+            {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'},
+            {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'},
+            {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: '3′接单率(%)', prop: 'threeMinutesReceivingRate'},
             {label: '小修到达时效(分)', prop: 'minorArriving'},
             {label: '拖车到达时效(分)', prop: 'trailArriving'},
             {label: '困境到达时效(分)', prop: 'dilemmaArriving'},
             {label: '到达时效(分)', prop: 'arriving'},
-            {label: '40′到达率（%）', prop: 'fortyMinutesArrivalRate'},
+            {label: '40′到达率(%)', prop: 'fortyMinutesArrivalRate'},
             {label: '小修聚合成功到达时效(分)', prop: 'minorPolymerizationSuccessArriving'},
             {label: '拖车聚合成功到达时效(分)', prop: 'trailPolymerizationSuccessArriving'},
             {label: '聚合成功到达时效(分)', prop: 'polymerizationSuccessArriving'},
@@ -1103,39 +1228,39 @@ export default {
             {label: '师傅姓名', prop: 'driverName'},
             {label: '承接案件量', prop: 'receiveOrderCount'},
             {label: '拒单量', prop: 'refuseOrderCount'},
-            {label: '拒单率（%）', prop: 'refuseOrderRate'},
+            {label: '拒单率(%)', prop: 'refuseOrderRate'},
             {label: '超时接单量', prop: 'timeoutOrderCount'},
-            {label: '超时率（%）', prop: 'timeoutOrderRate'},
+            {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'},
+            {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: 'App使用率(%)', prop: 'appRate'},
+            {label: '3′联系客户率(%)', prop: 'threeMinutesContactRate'},
+            {label: '平安聚合成功率(%)', prop: 'pinganPolymerizationSuccessRate'},
+            {label: '中华聚合成功率(%)', prop: 'zhonghuaPolymerizationSuccessRate'},
+            {label: '中道聚合成功率(%)', prop: 'zdPolymerizationSuccessRate'},
+            {label: '总聚合成功率(%)', prop: 'polymerizationSuccessRate'},
             {label: '日均在线时长(h)', prop: 'onlineDuration'},
           ]
         } else if (this.activeIndex === 3) {
           this.labelList = [
             {label: '师傅姓名', prop: 'driverName'},
             {label: '接单时效(分)', prop: 'receiving'},
-            {label: '3′接单率（%）', prop: 'threeMinutesReceivingRate'},
+            {label: '3′接单率(%)', prop: 'threeMinutesReceivingRate'},
             {label: '到达时效(分)', prop: 'arriving'},
-            {label: '40′到达率（%）', prop: 'fortyMinutesArrivalRate'},
+            {label: '40′到达率(%)', prop: 'fortyMinutesArrivalRate'},
             {label: '聚合成功到达时效(分)', prop: 'polymerizationSuccessArriving'},
           ]
         }
@@ -1143,42 +1268,46 @@ export default {
         if (this.activeIndex === 0) {//接单指标
           this.labelList = [
             {label: '日', prop: 'date'},
+            {label: '师傅姓名', prop: 'driverName'},
             {label: '派遣案件量', prop: 'dispatchOrderCount'},
             {label: '承接案件量', prop: 'receiveOrderCount'},
             {label: '完成量', prop: 'finishOrderCount'},
             {label: '拒单量', prop: 'refuseOrderCount'},
-            {label: '拒单率（%）', prop: 'refuseOrderRate'},
+            {label: '拒单率(%)', prop: 'refuseOrderRate'},
             {label: '超时接单量', prop: 'timeoutOrderCount'},
-            {label: '超时率（%）', prop: 'timeoutOrderRate'},
-            {label: '客户取消率（%）', prop: 'cancelRate'},
+            {label: '超时率(%)', prop: 'timeoutOrderRate'},
+            {label: '客户取消率(%)', prop: 'cancelRate'},
           ]
         } else if (this.activeIndex === 1) {
           this.labelList = [
             {label: '日', prop: 'date'},
+            {label: '师傅姓名', prop: 'driverName'},
             {label: '投诉量', prop: 'complainOrderCount'},
-            {label: '投诉率（%）', prop: 'complainOrderRate'},
-            {label: '客户满意度（%）', prop: 'customerSatisfaction'},
-            {label: '客户评价率（%）', prop: 'customerEvaluateRate'},
-            {label: '催促率（%）', prop: 'urgeRate'},
+            {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: 'driverName'},
+            {label: '使用率(%)', prop: 'appRate'},
+            {label: '3′联系客户率(%)', prop: 'threeMinutesContactRate'},
+            {label: '平安聚合成功率(%)', prop: 'pinganPolymerizationSuccessRate'},
+            {label: '中华聚合成功率(%)', prop: 'zhonghuaPolymerizationSuccessRate'},
+            {label: '中道聚合成功率(%)', prop: 'zdPolymerizationSuccessRate'},
+            {label: '总聚合成功率(%)', prop: 'polymerizationSuccessRate'},
             {label: '日均在线时长(h)', prop: 'onlineDuration'},
           ]
         } else if (this.activeIndex === 3) {
           this.labelList = [
             {label: '日', prop: 'date'},
+            {label: '师傅姓名', prop: 'driverName'},
             {label: '接单时效(分)', prop: 'receiving'},
-            {label: '3′接单率（%）', prop: 'threeMinutesReceivingRate'},
+            {label: '3′接单率(%)', prop: 'threeMinutesReceivingRate'},
             {label: '到达时效(分)', prop: 'arriving'},
-            {label: '40′到达率（%）', prop: 'fortyMinutesArrivalRate'},
+            {label: '40′到达率(%)', prop: 'fortyMinutesArrivalRate'},
             {label: '聚合成功到达时效(分)', prop: 'polymerizationSuccessArriving'},
           ]
         }
@@ -1335,10 +1464,21 @@ export default {
     @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;
+      .defen{
+        display: inline-block;
+        width: 92px;
+        text-align: right;
+      }
     }
 
     .title {
@@ -1396,13 +1536,25 @@ export default {
 .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;
@@ -1431,12 +1583,10 @@ export default {
     border-color: #F1B289 transparent transparent transparent;
   }
 }
-
 .webTabWrap {
   width: 40% !important;
-
   .active:after {
-    margin-top: 5px;
+    margin-top: 4px;
   }
 }