task#14196，添加响应式判断，师傅表格数据调整

public/index.html

@@ -29,5 +29,32 @@
         }
     </script>
     <script src="https://webapi.amap.com/maps?v=1.4.15&key=2560bbf04daef66c810c5e6a97e8c508&plugin=AMap.Polyline"></script>
+
+    <script>
+        // VConsole 默认会挂载到 `window.VConsole` 上
+        // let vConsole = new window.VConsole();
+        (function (doc, win) {
+            let docEl = doc.documentElement
+            let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
+            recalc = function () {
+                var clientWidth = docEl.clientWidth;
+                console.log("clientWidth",clientWidth)
+                if (!clientWidth) return;
+                if (clientWidth < 400) {
+                    clientWidth = 400;
+                }
+                docEl.style.fontSize = 20 * (clientWidth / 700) + 'px';
+            };
+            if (!doc.addEventListener) return;
+            var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+            if (isMobile) {// 是移动端不变
+
+            }else{
+                win.addEventListener(resizeEvt, recalc, false);
+                doc.addEventListener('DOMContentLoaded', recalc, false);
+            }
+            console.log("isMobile",isMobile)
+        })(document, window);
+    </script>
   </body>
 </html>

src/views/kpi/components/circleChar.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="wrap">
-  <div id="supplierScore" ref="supplierScore" style="width: 100%;height: 125px" @click="handle"></div>
+  <div id="supplierScore" ref="supplierScore" class="chart" @click="handle"></div>
 </div>
 </template>
 
@@ -97,4 +97,8 @@ export default {
 .img{
   @include whMarLe(12px,10px,4px);
 }
+.chart{
+  width: 100%;
+  height: 125px;
+}
 </style>

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

@@ -21,7 +21,7 @@ export default {
     return {}
   },
   mounted() {
-
+    // console.log("tableData",this.tableData)
   },
   methods: {}
 }

src/views/kpi/kpiIndex.vue

@@ -2,7 +2,7 @@
   <div class="wrap">
     <div class="headWrap">
       <div class="title">KPI.数据看板</div>
-      <div class="titleName">4月-我是服务商名称</div>
+      <div class="titleName">6月-我是服务商名称</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>
@@ -138,6 +138,8 @@
             </tr>
             </tbody>
           </table>
+                    <common-table :table-data="tableData"></common-table>
+
         </div>
       </div>
       <div style="padding: 30px"></div>
@@ -146,40 +148,82 @@
       <div class="tabWrap">
         <div v-for="(item,index) in list" :class="activeIndex===index ? 'active' : ''" :key="index" @click="changeTab(index)">{{item.name}}</div>
       </div>
-      <div>
-        <div class=" rightData">
-          <common-table :table-data="tableData"></common-table>
+      <div class="comTab" v-if="activeIndex===0">
+        <noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
+      </div>
+      <div class="comTab" v-if="activeIndex===1">
+        <noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
+      </div>
+      <div class="comTab" v-if="activeIndex===2">
+        <noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
+      </div>
+      <div class="comTab" v-if="activeIndex===3">
+        <noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
       </div>
       <div style="padding: 30px"></div>
     </div>
-
+    <div class="contentWrap  monthTotal" v-if="active===3">
+      <div class="tabWrap">
+        <div v-for="(item,index) in driverList" :class="activeIndex===index ? 'active' : ''" :key="index" @click="changeTab(index)">{{item.name}}</div>
+      </div>
+      <div class="comTab" v-if="activeIndex===0">
+        <noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
+      </div>
+      <div class="comTab" v-if="activeIndex===1">
+        <noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
+      </div>
+      <div class="comTab" v-if="activeIndex===2">
+        <noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
+      </div>
+      <div class="comTab" v-if="activeIndex===3">
+        <noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
+      </div>
+      <div style="padding: 30px"></div>
+    </div>
+    <div class="contentWrap  monthTotal" v-if="active===4">
+      <div class="tabWrap">
+        <div v-for="(item,index) in list" :class="activeIndex===index ? 'active' : ''" :key="index" @click="changeTab(index)">{{item.name}}</div>
+      </div>
+      <div class="comTab" v-if="activeIndex===0">
+        <noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
+      </div>
+      <div class="comTab" v-if="activeIndex===1">
+        <noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
+      </div>
+      <div class="comTab" v-if="activeIndex===2">
+        <noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
+      </div>
+      <div class="comTab" v-if="activeIndex===3">
+        <noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
+      </div>
+      <div style="padding: 30px"></div>
     </div>
     <div class="contentWrap  monthTotal" v-if="active===5">
-      <div>
+      <div class="comTab">
         <noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
       </div>
       <div style="padding: 30px"></div>
     </div>
     <div class="contentWrap  monthTotal" v-if="active===6">
-      <div>
+      <div class="comTab">
         <noFit-table :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
       </div>
       <div style="padding: 30px"></div>
     </div>
     <div class="contentWrap  monthTotal" v-if="active===7">
-      <div>
+      <div class="comTab">
         <noFit-table :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
       </div>
      <div style="padding: 30px"></div>
     </div>
     <div class="contentWrap  monthTotal" v-if="active===8">
-      <div>
+      <div class="comTab">
         <noFit-table :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
       </div>
       <div style="padding: 30px"></div>
     </div>
     <div class="contentWrap  monthTotal" v-if="active===9">
-      <div>
+      <div class="comTab">
         <noFit-table :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
       </div>
       <div style="padding: 30px"></div>
@@ -203,13 +247,14 @@ export default {
   mixins: [myMixins],
   data() {
     return {
-      active: 0,
+      active: 2,
       activeIndex: 0,
       tabArr: [
         {name: '总览'}, {name: '月/总'}, {name: '日/总'}, {name: '月/师傅'}, {name: '日/师傅'}, {name: '拒单明细'},
         {name: '超时明细'}, {name: '投诉明细'}, {name: '不使用APP案件明细'}, {name: '车辆在线情况'}
       ],
       list: [{name: '接单指标'}, {name: '客户评价'}, {name: 'APP使用'}, {name: ' 时效 '}],
+      driverList: [{name: '师傅接单情况'}, {name: '师傅服务评价'}, {name: '师傅APP使用情况'}, {name: '师傅时效 '}],
       startTime:'',
       endTime:'',
       indexData:{},
@@ -222,13 +267,13 @@ export default {
     }
   },
   async mounted() {
+    await this.getDateArr();
+    await this.getData();
     if(this.active===1 && this.activeIndex===0){
       this.$nextTick(()=>{
         this.drawLine()
       })
     }
-    await this.getDateArr();
-    await this.getData();
   },
   created() {
 
@@ -237,6 +282,9 @@ export default {
   },
   methods: {
     onClick() {
+      this.activeIndex=0;
+      this.detailList=[];
+      this.labelList=[];
       this.getData();
     },
     // 初始化获取当月日期
@@ -279,8 +327,7 @@ export default {
       } while ( tempTime < endTime)
       // console.log(" this.xAxisArr", this.xAxisArr)
     },
-    drawLine() {
-      // 基于准备好的dom，初始化echarts实例
+    drawLine() { // 基于准备好的dom，初始化echarts实例
       let myChart = echarts.init(document.getElementById('chartWrap'))
       let option;
       option = {
@@ -366,19 +413,160 @@ export default {
           });
           this.indexData=res.data;
         } else if ([1, 2].includes(this.active)) {
-          await getStatisticsKpi({
+         let res= await getStatisticsKpi({
             startTime: this.startTime + ' 00:00:00',
             endTime: this.endTime + ' 23:59:59',
             statisticsType: this.active===1 ? 1 : 2,
             supplierId:1128,
           })
+          this.detailList = res.data?.map(item => {
+            let formatVal = dayjs(item.statisticsDate).format('DD');
+            return {...item,date: formatVal  };
+          });
+          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: '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 ([3, 4].includes(this.active)) {
-          await getDriverStatisticsKpi({
+          let res=await getDriverStatisticsKpi({
             startTime: this.startTime + ' 00:00:00',
             endTime: this.endTime + ' 23:59:59',
             statisticsType: this.active===3 ? 1 : 2,
             supplierId:1128,
           })
+          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: 'customerEvaluateRate'},
+                {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: 'polymerizationSuccessRate'},
+              ]
+            }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: ''},
+                {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: 'polymerizationSuccessRate'},
+              ]
+            }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)
         } else if ([5, 6, 7, 8, 9].includes(this.active)) {
           this.detailList = []
           this.labelList = []
@@ -439,6 +627,16 @@ export default {
         this.loading=false
       }
     },
+    async changeTab(index) {
+      this.labelList=[]
+      this.activeIndex = index
+      await this.getData()
+      if(this.active===1 && this.activeIndex===0){
+        this.$nextTick(()=>{
+          this.drawLine()
+        })
+      }
+    },
     setType(type){
       switch (type){
         case 5:
@@ -453,14 +651,6 @@ export default {
           return 5;
       }
     },
-    changeTab(index) {
-      this.activeIndex = index
-      if(this.active===1 && this.activeIndex===0){
-        this.$nextTick(()=>{
-          this.drawLine()
-        })
-      }
-    },
   },
 }
 </script>
@@ -484,7 +674,7 @@ th{
   @include wh(100%,100%);
 }
 .headWrap{
-  @include wh(100%,100px);
+  @include wh(100%,60px);
   background: #3E62B9;
   //background: radial-gradient( 235% 49% at 50% 50%, rgba(74,122,220,0.94) 100%, rgba(74,122,220,0.94) 100%, rgba(74,122,220,0.94) 100%);
   opacity: 0.88;
@@ -528,8 +718,11 @@ th{
   @include wh(100%,calc(100% - 140px));
   overflow-y: auto;
   background: #EFF2F8;
+  display: flex;
+  flex-wrap: wrap;
   .reciceOrder{
-    @include whBg(100%,146px,#FFFFFF);
+    //146px
+    @include whBg(375px,179px,#FFFFFF);
     @include sizing4Padding(19px,25px,38px,19px);
     margin-bottom: 10px;
     .storeWrap{
@@ -569,7 +762,7 @@ th{
     }
   }
   .ageing{
-    height: 146px;
+    height: 179px;
   }
 }
 .active2{
@@ -622,6 +815,7 @@ th{
 .monthTotal{
   background: #FFFFFF;
   padding-left: 6px;
+  height: auto !important;
   .leftMonth{
     .leftItem{
       font-weight: bold;
@@ -641,4 +835,7 @@ th{
     overflow-x: auto; /* 当内容超出宽度时启用水平滚动 */
   }
 }
+.comTab{
+  width: 100%;
+}
 </style>