task#14196，kpi优化

src/api/kpi.js

@@ -36,3 +36,21 @@ 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',
+    method: 'GET',
+    // key
+    params: {
+      key: key ,// 假设后端接口接受名为 'name' 的查询参数
+    }
+  });
+}

src/views/kpi/components/circleChar.vue

@@ -16,7 +16,7 @@ export default {
   mounted() {
     setTimeout(()=>{
       this.drawHandle();
-    },1000)
+    },50)
   },
   methods:{
     handle(){

src/views/kpi/components/noFit-table.vue

@@ -4,10 +4,11 @@
               stripe
               border
               style="width: 100%"
+              height="100%"
               v-loading="loading"
               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">
+                       align="center"  min-width="100" :width="(isMobile && (column.label=='案件编号' || column.label=='服务内容')) ? 70 : 'auto'">
       </el-table-column>
     </el-table>
   </div>
@@ -16,7 +17,7 @@
 <script>
 export default {
   name: "noFit-table",
-  props: ['tableData','labelList','loading'],
+  props: ['tableData','labelList','loading','isMobile'],
   data() {
     return {}
   },
@@ -29,12 +30,17 @@ export default {
 
 <style scoped lang="scss">
 @import "@/styles/mixin.scss";
-::v-deep .el-table thead{
+::v-deep .el-table{
   font-size: 11px;
+}
+::v-deep .el-table thead{
   color: #1D2129;
   font-weight: bold;
 }
 ::v-deep .el-table th.el-table__cell.is-leaf {
   background-color: #E5E6EB;
 }
+::v-deep .el-table .el-table__cell{
+  padding: 4px 0 !important;
+}
 </style>

src/views/kpi/kpiIndex.vue

@@ -2,14 +2,14 @@
   <div class="wrap">
     <div v-if="isMobile" class="headWrap">
       <div class="title">KPI.数据看板</div>
-      <div class="titleName">6月-我是服务商名称</div>
+      <div class="titleName">{{ current }}月-我是服务商名称</div>
     </div>
-    <div v-else class="webHeadWrap">
+    <div v-else class="webHeadWrap" :style="'justify-content:'+(isZd==1 ? 'space-between':'center')">
-      <div class="empty"></div>
+      <div class="empty" v-if="isZd==1"></div>
-      <div class="title">KPI.数据看板</div>
+      <div class="title">KPI.数据看板<span v-if="isZd!=1">--{{ current }}月</span></div>
       <!--  只有中道账号才显示搜索框  -->
-      <div class="searchWrap">
+      <div class="searchWrap" v-if="isZd==1">
-        <span class="month">7月</span>
+        <span class="month">{{ current }}月</span>
         <input class="ipt" maxlength="20" placeholder="请输入服务商名称" v-model="supplierName" />
         <i class="el-icon-search" @click="searchHandle"></i>
       </div>
@@ -26,11 +26,11 @@
             <div class="itemTitle">承接案件量</div>
           </div>
           <div class="center common" @click="clickJumpHandle(5)">
-            <div class="num">{{ indexData.refuseOrderRate }}</div>
+            <div class="num">{{ 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.timeoutOrderRate }}%</div>
             <div class="itemTitle">超时率 ></div>
           </div>
         </div>
@@ -38,18 +38,18 @@
       <div :class="{'reciceOrder':true,'webCom':!isMobile,'evaluate':isMobile}">
         <div class="title">客户评价</div>
         <div class="reciceOrderIWrap">
-          <circle-char :data="indexData.complainOrderRate" :title-text="'投诉率'" :bg-color="'#9485ED'"
+          <circle-char  v-if="indexData"  :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  v-if="indexData" :data="indexData.customerSatisfaction" :title-text="'客户满意度'" :bg-color="'#5DDECF'" ></circle-char>
-          <circle-char :data="indexData.urgeRate" :title-text="'催促率'" :bg-color="'#FFADAD'" ></circle-char>
+          <circle-char  v-if="indexData" :data="indexData.urgeRate" :title-text="'催促率'" :bg-color="'#FFADAD'" ></circle-char>
         </div>
       </div>
       <div  :class="{'reciceOrder':true,'webCom':!isMobile,'appUse':isMobile}">
         <div class="title">APP使用</div>
         <div class="reciceOrderIWrap">
-          <circle-char :data="indexData.appRate" :title-text="'使用率'" :bg-color="'#3AA1FF'" :is-store="false" @clickUse="clickJumpHandle(8)"></circle-char>
+          <circle-char  v-if="indexData" :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  v-if="indexData" :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  v-if="indexData" :data="indexData.polymerizationSuccessRate" :title-text="'总聚合成功率'" :bg-color="'#4ECB73'" ></circle-char>
         </div>
       </div>
       <div :class="{'reciceOrder':true,'webCom':!isMobile}">
@@ -74,79 +74,81 @@
       <div :class="{'reciceOrder':true,'webCom':!isMobile,'store':isMobile}">
         <div class="title">综合打分</div>
         <div class="storeWrap">
-          <circle-char :data="indexData.score" :bg-color="'#00D273'" :is-store="true"></circle-char>
+          <circle-char  v-if="indexData" :data="indexData.score" :bg-color="'#00D273'" :is-store="true"></circle-char>
         </div>
       </div>
       <div v-if="isMobile" style="padding: 30px"></div>
     </div>
     <div class="contentWrap monthTotal" v-if="active===1">
-      <div class="tabWrap">
+      <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 v-if="active===1" class="chartWrap" id="chartWrap" style="width: 100%;height:300px" ></div>
+        <div :class="{'chartWrapWeb':!isMobile}">
-        <div class="comTab">
+          <div v-if="active===1" id="chartWrap" style="width: 100%;height:300px" ></div>
-          <noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
+        </div>
+        <div :class="{'comTab':true,'webTab':!isMobile,'mobileTab':isMobile}">
+          <noFit-table :is-mobile='isMobile'  :table-data="detailList" :label-list="labelList"></noFit-table>
         </div>
       </div>
       <div v-if="isMobile" style="padding: 30px"></div>
     </div>
     <div class="contentWrap  monthTotal" v-if="active===2">
-      <div class="tabWrap">
+      <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">
+      <div :class="{'comTab':true,'webTab':!isMobile,'mobileTab':isMobile}">
-        <noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
+        <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">
+      <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">
+      <div :class="{'comTab':true,'webTab':!isMobile,'mobileTab':isMobile}">
-        <noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
+        <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 class="tabWrap">
+      <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>
-      <div class="comTab">
+      <div :class="{'comTab':true,'webTab':!isMobile}">
-        <noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
+        <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 class="comTab">
+      <div :class="{'comTab':true,'detailTable':isMobile}">
-        <noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
+        <noFit-table :is-mobile='isMobile'  :table-data="detailList" :label-list="labelList"></noFit-table>
       </div>
-      <div v-if="isMobile" style="padding: 30px"></div>
+<!--      <el-pagination
+          small
+          layout="prev, pager, next"
+          :total="50">
+      </el-pagination>-->
     </div>
     <div class="contentWrap  monthTotal" v-if="active===6">
-      <div class="comTab">
+      <div :class="{'comTab':true,'detailTable':isMobile}">
-        <noFit-table :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
+        <noFit-table :is-mobile='isMobile'  :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
       </div>
-      <div v-if="isMobile" style="padding: 30px"></div>
     </div>
     <div class="contentWrap  monthTotal" v-if="active===7">
-      <div class="comTab">
+      <div :class="{'comTab':true,'detailTable':isMobile}">
-        <noFit-table :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
+        <noFit-table :is-mobile='isMobile'  :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
       </div>
-     <div v-if="isMobile" style="padding: 30px"></div>
     </div>
     <div class="contentWrap  monthTotal" v-if="active===8">
-      <div class="comTab">
+      <div :class="{'comTab':true,'detailTable':isMobile}">
-        <noFit-table :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
+        <noFit-table :is-mobile='isMobile'  :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
       </div>
-      <div v-if="isMobile" style="padding: 30px"></div>
     </div>
     <div class="contentWrap  monthTotal" v-if="active===9">
-      <div class="comTab">
+      <div :class="{'comTab':true,'detailTable':isMobile}">
-        <noFit-table :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
+        <noFit-table :is-mobile='isMobile'  :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
       </div>
-      <div v-if="isMobile" style="padding: 30px"></div>
     </div>
  </div>
 </template>
@@ -154,7 +156,7 @@
 <script>
 import * as echarts from 'echarts';
 import dayjs from "dayjs";
-import {getKpiDetailsData,getStatisticsKpiByMonth,getStatisticsKpi,getDriverStatisticsKpi} 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";
@@ -165,7 +167,7 @@ export default {
   mixins: [myMixins],
   data() {
     return {
-      active: 1,
+      active:0,
       activeIndex: 0,
       tabArr: [
         {name: '总览'}, {name: '月/总'}, {name: '日/总'}, {name: '月/师傅'}, {name: '日/师傅'}, {name: '拒单明细'},
@@ -184,33 +186,48 @@ export default {
       v2:[],
       v3:[],
       v4:[],
-      // tableData:[],
+      v5:[],
+      v6:[],
       isMobile: false,
       supplierName: '',
       isZd:'',
+      current:dayjs(new Date()).format('M'),
+      selectLoading: false,
+      selectList: [],
+      options: [],
+      oldOptions: [],
+      svalue: '',
+      checkOptions: [],
     }
   },
   async mounted() {
     this.checkMobile();
-    await this.getDateArr();
+    await this.initDate();
     await this.getData();
-    if(this.active===1 && this.activeIndex===0){
+    if(this.active===1){
-      this.$nextTick(()=>{
+      setTimeout(()=>{
         this.drawLine()
-      })
+      },500)
     }
   },
   created() {
     this.checkMobile();
     // 获取当前 URL
-  /*  const urlParams = new URLSearchParams(window.location.search);
+    const urlParams = new URLSearchParams(window.location.search);
-    this.isZd=urlParams?.get('isZd') || ''*/
+    this.isZd=urlParams?.get('isZd') || ''
+    console.log("urlParams?.get('isZd')",urlParams?.get('isZd'))
   },
   async activated() {
   },
   methods: {
-    searchHandle(){//web端服务商搜索操作
+    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 clickJumpHandle(type){
       this.loading=true
@@ -220,7 +237,6 @@ export default {
     checkMobile() {
       const userAgent = navigator.userAgent || navigator.vendor || window.opera;
       this.isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
-      // console.log("his.isMobile",this.isMobile)
     },
     onClick() {
       this.activeIndex=0;
@@ -233,35 +249,231 @@ export default {
       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()
     },
-    // 获取当月天数
-    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();
-    },
-    // 获取时间区间的数组
-    async getDateArr() {
-      await this.initDate()
-      this.xAxisArr = [];
-      let startTime = new Date(this.startTime).getTime();
-      let endTime = new Date(this.endTime).getTime();
-      let i = 0;
-      let tempTime;
-      do {
-        tempTime = startTime + i * (24*3600*1000);
-        // this.xAxisArr.push(dayjs(tempTime).format('DD'));
-        i++;
-      } while ( tempTime < endTime)
-    },
     drawLine() { // 基于准备好的dom，初始化echarts实例
       let myChart = echarts.init(document.getElementById('chartWrap'))
       let option;
+      //接单指标
+      let series1=[ {
+        name:'派遣案件量',
+        type: 'bar',
+        data:this.v1,
+        yAxisIndex: 0,
+        smooth: true,
+        barWidth: this.isMobile ? 35 : 60,
+        label: {
+          show: true, // 显示标签
+          position: 'top', // 标签位置在柱形顶部
+        }
+      },
+        {
+          name: '拒单率',
+          type: 'line',
+          smooth: true,
+          data:this.v2,
+          yAxisIndex: 1,
+          label: {
+            show: true,
+            position: 'top',
+            formatter: '{c} %'
+          },
+        },
+        {
+          name:'超时率',
+          type:"line",
+          data:this.v3,
+          yAxisIndex: 1,
+          smooth: true,
+          label: {
+            show: true,
+            position: 'top',
+            formatter: '{c} %'
+          },
+        },
+        {
+          name:'客户取消率',
+          type:"line",
+          data:this.v4,
+          yAxisIndex: 1,
+          smooth: true,
+          label: {
+            show: true,
+            position: 'top',
+            formatter: '{c} %'
+          },
+        },
+      ]
+      let series2=[ {
+        name:'客户满意度',
+        type: 'bar',
+        data:this.v1,
+        yAxisIndex: 0,
+        smooth: true,
+        barWidth: this.isMobile ? 35 : 60,
+        label: {
+          show: true, // 显示标签
+          position: 'top', // 标签位置在柱形顶部
+        }
+      },
+        {
+          name: '评价率',
+          type: 'line',
+          smooth: true,
+          data:this.v2,
+          yAxisIndex: 1,
+          label: {
+            show: true,
+            position: 'top',
+            formatter: '{c} %'
+          },
+        },
+        {
+          name:'投诉率',
+          type:"line",
+          data:this.v3,
+          yAxisIndex: 1,
+          smooth: true,
+          label: {
+            show: true,
+            position: 'top',
+            formatter: '{c} %'
+          },
+        },
+      ]
+      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,
+          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} %'
+          },
+        },
+        {
+          name:'中道成功率',
+          type:"line",
+          data:this.v5,
+          yAxisIndex: 1,
+          smooth: true,
+          label: {
+            show: true,
+            position: 'top',
+            formatter: '{c} %'
+          },
+        },
+        {
+          name:'总成功率',
+          type:"line",
+          data:this.v6,
+          yAxisIndex: 1,
+          smooth: true,
+          label: {
+            show: true,
+            position: 'top',
+            formatter: '{c} %'
+          },
+        },
+      ]
+      let series4=[ {
+        name:'派遣案件量',
+        type: 'bar',
+        data:this.v1,
+        yAxisIndex: 0,
+        smooth: true,
+        barWidth: this.isMobile ? 35 : 60,
+        label: {
+          show: true, // 显示标签
+          position: 'top', // 标签位置在柱形顶部
+        }
+      },
+        {
+          name: '拒单率',
+          type: 'line',
+          smooth: true,
+          data:this.v2,
+          yAxisIndex: 1,
+          label: {
+            show: true,
+            position: 'top',
+            formatter: '{c} %'
+          },
+        },
+        {
+          name:'超时率',
+          type:"line",
+          data:this.v3,
+          yAxisIndex: 1,
+          smooth: true,
+          label: {
+            show: true,
+            position: 'top',
+            formatter: '{c} %'
+          },
+        },
+        {
+          name:'客户取消率',
+          type:"line",
+          data:this.v4,
+          yAxisIndex: 1,
+          smooth: true,
+          label: {
+            show: true,
+            position: 'top',
+            formatter: '{c} %'
+          },
+        },
+      ]
+      let 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
+        }
+      }
       option = {
         title: {
           text: '接单时效',
@@ -273,72 +485,24 @@ export default {
           textStyle:{
             fontSize:8
           },
-          right:10
+          itemWidth:10, // 设置图例图标的宽度，从而调整图标大小
+          itemHeight: 6,
+          // right:10
         },
         xAxis: {
           type: 'category',
-          boundaryGap: false,
+          data: this.xAxisArr,
-          data: this.xAxisArr.reverse(),
         },
         yAxis: [
           {type: 'value'},
-          {type: 'value'},
-        ],
-        series: [
           {
-            name:'派遣案件量',
+            type: 'value',
-            type:"line",
+            axisLabel: {
-            data:this.v1,
+              formatter: '{value}%' // 在值后面添加百分比符号
-            yAxisIndex: 0,
-            smooth: true,
-            markArea: {
-              itemStyle: {
-                color: 'rgba(255, 173, 177, 0.4)'
-              },
-              data: [
-                [
-                  {
-                    name: 'value1',
-                    xAxis: '07:30'
-                  },
-                  {
-                    xAxis: '10:00'
-                  }
-                ],
-                [
-                  {
-                    name: 'Evening Peak',
-                    xAxis: '17:30'
-                  },
-                  {
-                    xAxis: '21:15'
-                  }
-                ]
-              ]
             }
           },
-          {
+        ],
-            name: '拒单率',
+        series: series,
-            type: 'line',
-            smooth: true,
-            data:this.v2,
-            yAxisIndex: 1,
-          },
-          {
-            name:'超时率',
-            type:"line",
-            data:this.v3,
-            yAxisIndex: 1,
-            smooth: true
-          },
-          {
-            name:'客户取消率',
-            type:"line",
-            data:this.v4,
-            yAxisIndex: 1,
-            smooth: true
-          },
-        ]
       };
       option && myChart.setOption(option, true);
     },
@@ -347,6 +511,9 @@ export default {
       this.v2=[]
       this.v3=[]
       this.v4=[]
+      this.v5=[]
+      this.v6=[]
+      this.xAxisArr=[]
       try {
         this.loading=true
         if (this.active === 0) {
@@ -359,8 +526,8 @@ export default {
           this.indexData=res.data;
         } else if ([1, 2].includes(this.active)) {
          let res= await getStatisticsKpi({
-            startTime: '2024-05-01 00:00:00',//this.startTime + ' 00:00:00',
+            startTime: '2024-03-01 00:00:00',//this.startTime + ' 00:00:00',
-            endTime: this.endTime + ' 23:59:59',
+            endTime:'2024-07-31 23:59:59' ,//this.endTime + ' 23:59:59',
             statisticsType: this.active===1 ? 1 : 2,
             supplierId:1128,
           })
@@ -370,51 +537,66 @@ export default {
             return {...item,date: formatVal ,month: formatVal1};
           });
           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: 'refuseOrderRate'},
                 {label: '超时接单量', prop: 'timeoutOrderCount'},
-                {label: '超时率', prop: 'timeoutOrderRate'},
+                {label: '超时率（%）', prop: 'timeoutOrderRate'},
-                {label: '取消率', prop: 'cancelrate'},
+                {label: '取消率（%）', prop: 'cancelrate'},
               ]
-              this.detailList?.map(item=>{
-                this.xAxisArr.push(item.month)
-                this.v1.push(item.dispatchOrderCount)
-                this.v2.push(item.refuseOrderRate)
-                this.v3.push(item.timeoutOrderRate)
-                this.v4.push(item.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: 'complainOrderRate'},
-                {label:'客户满意度', prop: ''},
+                {label:'客户满意度', prop: 'customerSatisfaction'},
-                {label: '客户评价率', prop: 'customerEvaluateRate'},
+                {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: '使用率（%）', prop: 'appRate'},
-                {label: '3′联系客户率', prop: 'threeMinutesContactRate'},
+                {label: '3′联系客户率（%）', prop: 'threeMinutesContactRate'},
-                {label: '平安聚合成功率', prop: 'pinganPolymerizationSuccessRate'},
+                {label: '平安聚合成功率（%）', prop: 'pinganPolymerizationSuccessRate'},
-                {label: '中华聚合成功率', prop: 'zhonghuaPolymerizationSuccessRate'},
+                {label: '中华聚合成功率（%）', prop: 'zhonghuaPolymerizationSuccessRate'},
-                {label: '中道聚合成功率', prop: 'zdPolymerizationSuccessRate'},
+                {label: '中道聚合成功率（%）', prop: 'zdPolymerizationSuccessRate'},
-                {label: '总聚合成功率', prop: 'polymerizationSuccessRate'},
+                {label: '总聚合成功率（%）', prop: 'polymerizationSuccessRate'},
               ]
             }else if(this.activeIndex === 3){
               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'},
               ]
             }
@@ -426,39 +608,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: 'timeoutOrderRate'},
-                {label: '客户取消率', prop: 'cancelrate'},
+                {label: '客户取消率（%）', prop: 'cancelrate'},
               ]
             }else if(this.activeIndex === 1){
               this.labelList = [
                 {label: '日', prop: 'date'},
                 {label: '投诉量', prop: 'complainOrderCount'},
-                {label: '投诉率', prop: 'complainOrderRate'},
+                {label: '投诉率（%）', prop: 'complainOrderRate'},
-                {label: '客户评价率', prop: 'customerEvaluateRate'},
+                {label: '客户评价率（%）', prop: 'customerEvaluateRate'},
-                {label: '催促率', prop: 'urgeRate'},
+                {label: '催促率（%）', prop: 'urgeRate'},
               ]
             }else if(this.activeIndex === 2){
               this.labelList = [
                 {label: '日', prop: 'date'},
-                {label: '使用率', prop: 'appRate'},
+                {label: '使用率（%）', prop: 'appRate'},
-                {label: '3′联系客户率', prop: 'threeMinutesContactRate'},
+                {label: '3′联系客户率（%）', prop: 'threeMinutesContactRate'},
-                {label: '平安聚合成功率', prop: 'pinganPolymerizationSuccessRate'},
+                {label: '平安聚合成功率（%）', prop: 'pinganPolymerizationSuccessRate'},
-                {label: '中华聚合成功率', prop: 'zhonghuaPolymerizationSuccessRate'},
+                {label: '中华聚合成功率（%）', prop: 'zhonghuaPolymerizationSuccessRate'},
-                {label: '中道聚合成功率', prop: 'zdPolymerizationSuccessRate'},
+                {label: '中道聚合成功率（%）', prop: 'zdPolymerizationSuccessRate'},
-                {label: '总聚合成功率', prop: 'polymerizationSuccessRate'},
+                {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'},
@@ -481,39 +663,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: 'complainOrderRate'},
                 {label: '客户满意度', prop: 'customerSatisfaction'},
-                {label: '客户评价率', prop: 'customerEvaluateRate'},
+                {label: '客户评价率（%）', prop: 'customerEvaluateRate'},
-                {label: '催促率', prop: 'urgeRate'},
+                {label: '催促率（%）', prop: 'urgeRate'},
               ]
             }else if(this.activeIndex === 2){
               this.labelList = [
                 {label: '师傅姓名', prop: 'driverName'},
                 {label: '承接案件量', prop: 'receiveOrderCount'},
-                {label: 'App使用率', prop: 'appRate'},
+                {label: 'App使用率（%）', prop: 'appRate'},
-                {label: '3′联系客户率', prop: 'threeMinutesContactRate'},
+                {label: '3′联系客户率（%）', prop: 'threeMinutesContactRate'},
-                {label: '平安聚合成功率', prop: 'pinganPolymerizationSuccessRate'},
+                {label: '平安聚合成功率（%）', prop: 'pinganPolymerizationSuccessRate'},
-                {label: '中华聚合成功率', prop: 'zhonghuaPolymerizationSuccessRate'},
+                {label: '中华聚合成功率（%）', prop: 'zhonghuaPolymerizationSuccessRate'},
-                {label: '中道聚合成功率', prop: 'zdPolymerizationSuccessRate'},
+                {label: '中道聚合成功率（%）', prop: 'zdPolymerizationSuccessRate'},
-                {label: '总聚合成功率', prop: 'polymerizationSuccessRate'},
+                {label: '总聚合成功率（%）', prop: 'polymerizationSuccessRate'},
                 {label: '日均在线时长', 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'},
               ]
             }
@@ -527,38 +709,38 @@ 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: 'timeoutOrderRate'},
-                {label: '客户取消率', prop: 'cancelrate'},
+                {label: '客户取消率（%）', prop: 'cancelrate'},
               ]
             }else if(this.activeIndex === 1){
               this.labelList = [
                 {label: '日', prop: 'date'},
                 {label: '投诉量', prop: 'complainOrderCount'},
-                {label: '投诉率', prop: 'complainOrderRate'},
+                {label: '投诉率（%）', prop: 'complainOrderRate'},
                 {label: '客户满意度', prop: 'customerSatisfaction'},
-                {label: '客户评价率', prop: 'customerEvaluateRate'},
+                {label: '客户评价率（%）', prop: 'customerEvaluateRate'},
-                {label: '催促率', prop: 'urgeRate'},
+                {label: '催促率（%）', prop: 'urgeRate'},
               ]
             }else if(this.activeIndex === 2){
               this.labelList = [
                 {label: '日', prop: 'date'},
-                {label: '使用率', prop: 'appRate'},
+                {label: '使用率（%）', prop: 'appRate'},
-                {label: '3′联系客户率', prop: 'threeMinutesContactRate'},
+                {label: '3′联系客户率（%）', prop: 'threeMinutesContactRate'},
-                {label: '平安聚合成功率', prop: 'pinganPolymerizationSuccessRate'},
+                {label: '平安聚合成功率（%）', prop: 'pinganPolymerizationSuccessRate'},
-                {label: '中华聚合成功率', prop: 'zhonghuaPolymerizationSuccessRate'},
+                {label: '中华聚合成功率（%）', prop: 'zhonghuaPolymerizationSuccessRate'},
-                {label: '中道聚合成功率', prop: 'zdPolymerizationSuccessRate'},
+                {label: '中道聚合成功率（%）', prop: 'zdPolymerizationSuccessRate'},
-                {label: '总聚合成功率', prop: 'polymerizationSuccessRate'},
+                {label: '总聚合成功率（%）', prop: 'polymerizationSuccessRate'},
                 {label: '日均在线时长', prop: 'onlineDuration'},
               ]
             }else if(this.activeIndex === 3){
               this.labelList = [
                 {label: '日', prop: 'date'},
                 {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'},
               ]
             }
@@ -572,7 +754,7 @@ export default {
             endTime: this.endTime + ' 23:59:59',
             searchType: this.setType(this.active),
             pageNum: 1,
-            pageSize: 1000
+            pageSize: 300
           });
           this.detailList = result.data?.map(item => {
             let formatVal = dayjs(item.createTime).format('DD');
@@ -631,7 +813,7 @@ export default {
       this.labelList=[]
       this.activeIndex = index
       await this.getData()
-      if(this.active===1 && this.activeIndex===0){
+      if(this.active===1){
         this.$nextTick(()=>{
           this.drawLine()
         })
@@ -662,13 +844,13 @@ export default {
   @include wh(100%,100%);
 }
 .headWrap{
-  @include wh(100%,80px);
+  @include wh(100%,56px);
   background: #3E62B9;
   @include flexTwoCenter;
   flex-direction: column;
   .title{
-    font-family: YouSheBiaoTiHei;
+    //font-family: YouSheBiaoTiHei;
-    font-size: 35px;
+    font-size: 20px;
     color: #FFFFFF;
   }
   .titleName{
@@ -680,7 +862,8 @@ export default {
 .webHeadWrap{
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  //justify-content: space-between;
+  //justify-content: center;
   @include wh(100%,50px);
   background: #3E62B9;
   box-sizing: border-box;
@@ -835,8 +1018,11 @@ export default {
     border-color: #F1B289 transparent transparent transparent;
   }
 }
-.tableWrap{
+.webTabWrap{
-  padding: 0 10px;
+    width: 40% !important;
+    .active:after{
+      margin-top: 5px;
+    }
 }
 .monthTotal{
   background: #FFFFFF;
@@ -864,13 +1050,25 @@ export default {
 .comTab{
   width: 100%;
   height: 100%;
-
 }
-::v-deep .el-table{
+::v-deep  .el-table{
-  font-size:11px;
   height: 100%;
 }
-::v-deep .el-table--scrollable-x .el-table__body-wrapper{
+::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{
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 40px;
+}
 </style>