task#14196，data动态数据添加

src/api/kpi.js

@@ -4,7 +4,7 @@ export function getStatisticsKpiByMonth(data){
   return request({
     url: '/supplier/supplierKPI/querySupplierStatisticsKpiByMonth',
     method:'POST',
-    contentType: 'application/json',
+    // contentType: 'application/json',
     data
   })
 }
@@ -13,7 +13,7 @@ export function getStatisticsKpi(data){
   return request({
     url: '/supplier/supplierKPI/querySupplierStatisticsKpi',
     method:'POST',
-    contentType: 'application/json',
+    // contentType: 'application/json',
     data
   })
 }
@@ -23,7 +23,7 @@ export function getDriverStatisticsKpi(data){
   return request({
     url: '/supplier/supplierKPI/querySupplierDriverStatisticsKpi',
     method:'POST',
-    contentType: 'application/json',
+    // contentType: 'application/json',
     data
   })
 }
@@ -32,7 +32,7 @@ export function getKpiDetailsData(data){
   return request({
     url: '/supplier/supplierKPI/querySupplierKpiDetailsData',
     method:'POST',
-    contentType: 'application/json',
+    // contentType: 'application/json',
     data
   })
 }

src/views/kpi/components/circleChar.vue

@@ -14,14 +14,16 @@ export default {
     }
   },
   mounted() {
+    setTimeout(()=>{
       this.drawHandle();
+    },100)
   },
   methods:{
     handle(){
       if(this.titleText == '投诉率'){
-        console.log(this.titleText)
+        this.$emit('clickComplain')
       }else if(this.titleText == '使用率'){
-        console.log(this.titleText)
+        this.$emit('clickUse')
       }
     },
     // 绘制 总分图表

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

@@ -0,0 +1,40 @@
+<template>
+  <div class="wrap">
+    <el-table :data="tableData"
+              stripe
+              border
+              style="width: 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">
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "noFit-table",
+  props: ['tableData','labelList','loading'],
+  data() {
+    return {}
+  },
+  mounted() {
+
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+::v-deep .el-table thead{
+  font-size: 11px;
+  color: #1D2129;
+  font-weight: bold;
+}
+::v-deep .el-table th.el-table__cell.is-leaf {
+  background-color: #E5E6EB;
+}
+</style>

src/views/kpi/kpiIndex.vue

@@ -4,60 +4,59 @@
       <div class="title">KPI.数据看板</div>
       <div class="titleName">4月-我是服务商名称</div>
     </div>
-    <van-tabs v-model="active" sticky >
+    <van-tabs v-model="active" sticky @click="onClick">
-      <van-tab v-for="(item,index) in tabArr" :key="index"  :title="item.name">
+      <van-tab v-for="(item,index) in tabArr"  :key="index"  :title="item.name"></van-tab>
-
-      </van-tab>
     </van-tabs>
     <div class="contentWrap" v-if="active===0">
       <div class="reciceOrder">
         <div class="title">接单指标</div>
         <div class="reciceOrderIWrap">
           <div class="left common">
-            <div class="num">116</div>
+            <div class="num">{{ indexData.receiveOrderCount }}</div>
             <div class="itemTitle">承接案件量</div>
           </div>
-          <div class="center common">
+          <div class="center common" @click="active = 5">
-            <div class="num">35%</div>
+            <div class="num">{{ indexData.refuseOrderRate }}</div>
-            <div class="itemTitle">拒单率 <img src="@/assets/arrow_rht.png" class="img"/></div>
+            <div class="itemTitle">拒单率 ></div>
           </div>
-          <div class="right common">
+          <div class="right common" @click="active = 5">
-            <div class="num">35%</div>
+            <div class="num">{{ indexData.timeoutOrderRate }}</div>
-            <div class="itemTitle">超时率 <img src="@/assets/arrow_rht.png" class="img"/></div>
+            <div class="itemTitle">超时率 ></div>
           </div>
         </div>
       </div>
       <div class="reciceOrder evaluate">
         <div class="title">客户评价</div>
         <div class="reciceOrderIWrap">
-          <circle-char :data="1.28" :title-text="'投诉率'" :bg-color="'#9485ED'" :is-store="false"></circle-char>
+          <circle-char :data="indexData.complainOrderRate" :title-text="'投诉率'" :bg-color="'#9485ED'"
-          <circle-char :data="98.9" :title-text="'客户满意度'" :bg-color="'#5DDECF'" ></circle-char>
+                       :is-store="false" @clickComplain="active = 7"></circle-char>
-          <circle-char :data="56" :title-text="'催促率'" :bg-color="'#FFADAD'" ></circle-char>
+          <circle-char :data="indexData.customerSatisfaction" :title-text="'客户满意度'" :bg-color="'#5DDECF'" ></circle-char>
+          <circle-char :data="indexData.urgeRate" :title-text="'催促率'" :bg-color="'#FFADAD'" ></circle-char>
         </div>
       </div>
       <div class="reciceOrder appUse">
         <div class="title">APP使用</div>
         <div class="reciceOrderIWrap">
-          <circle-char :data="1.28" :title-text="'使用率'" :bg-color="'#3AA1FF'" :is-store="false"></circle-char>
+          <circle-char :data="indexData.appRate" :title-text="'使用率'" :bg-color="'#3AA1FF'" :is-store="false" @clickUse="active = 8"></circle-char>
-          <circle-char :data="9.9" :title-text="'联系客户率'" :bg-color="'#5D7FD7'" ></circle-char>
+          <circle-char :data="indexData.threeMinutesContactRate" :title-text="'3′联系客户率'" :bg-color="'#5D7FD7'" ></circle-char>
-          <circle-char :data="65.89" :title-text="'总聚合成功率'" :bg-color="'#4ECB73'" ></circle-char>
+          <circle-char :data="indexData.polymerizationSuccessRate" :title-text="'总聚合成功率'" :bg-color="'#4ECB73'" ></circle-char>
         </div>
       </div>
       <div class="reciceOrder ageing">
         <div class="title">时效</div>
         <div class="reciceOrderIWrap">
           <div class="left common">
-            <div class="num">0:02:24</div>
+            <div class="num">{{indexData.receiving}}</div>
             <div class="itemTitle">接单时效(分)</div>
           </div>
           <div class="line"></div>
           <div class="center common">
-            <div class="num">0:02:24</div>
+            <div class="num">{{ indexData.polymerizationSuccessArriving }}</div>
             <div class="itemTitle">集合成功到达时效</div>
           </div>
           <div class="line"></div>
           <div class="right common">
-            <div class="num">0:02:24</div>
+            <div class="num">{{ indexData.arriving }}</div>
             <div class="itemTitle">到达时效</div>
           </div>
         </div>
@@ -65,7 +64,7 @@
       <div class="reciceOrder store">
         <div class="title">综合打分</div>
         <div class="storeWrap">
-          <circle-char :data="98" :bg-color="'#00D273'" :is-store="true"></circle-char>
+          <circle-char :data="indexData.score" :bg-color="'#00D273'" :is-store="true"></circle-char>
         </div>
       </div>
       <div style="padding: 30px"></div>
@@ -148,9 +147,6 @@
         <div v-for="(item,index) in list" :class="activeIndex===index ? 'active' : ''" :key="index" @click="changeTab(index)">{{item.name}}</div>
       </div>
       <div>
-<!--        <div class="leftMonth">
-          <div class="leftItem" v-for="(item,i) in leftList" :key="i">{{item}}</div>
-        </div>-->
         <div class=" rightData">
           <common-table :table-data="tableData"></common-table>
         </div>
@@ -158,48 +154,71 @@
       </div>
 
     </div>
+    <div class="contentWrap  monthTotal" v-if="active===5">
+      <div>
+        <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>
+        <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>
+        <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>
+        <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>
+        <noFit-table :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
+      </div>
+      <div style="padding: 30px"></div>
+    </div>
  </div>
 </template>
 
 <script>
 import * as echarts from 'echarts';
 import dayjs from "dayjs";
-// getStatisticsKpiByMonth
+// ,getDriverStatisticsKpi
-import {getKpiDetailsData,getDriverStatisticsKpi} from "@/api/kpi.js"
+import {getKpiDetailsData,getStatisticsKpiByMonth,getStatisticsKpi,getDriverStatisticsKpi} from "@/api/kpi.js"
 import {myMixins} from "@/utils/myMixins"
 import CircleChar from "@/views/kpi/components/circleChar.vue";
 import CommonTable from "@/views/kpi/components/common-table.vue";
+import NoFitTable from "@/views/kpi/components/noFit-table.vue";
 export default {
   name: "kpiIndex",
-  components: { CircleChar,CommonTable },
+  components: { CircleChar,CommonTable,NoFitTable },
   computed: {},
   mixins: [myMixins],
   data() {
     return {
-      active: 1,
+      active: 0,
       activeIndex: 0,
       tabArr: [
         {name: '总览'}, {name: '月/总'}, {name: '日/总'}, {name: '月/师傅'}, {name: '日/师傅'}, {name: '拒单明细'},
         {name: '超时明细'}, {name: '投诉明细'}, {name: '不使用APP案件明细'}, {name: '车辆在线情况'}
       ],
       list: [{name: '接单指标'}, {name: '客户评价'}, {name: 'APP使用'}, {name: ' 时效 '}],
-      tableData:[
-        { label:'日',prop: 'date',date:'1'},
-        { label:'派遣案件量',prop: 'date',date:'2'},
-        { label:'派遣案件量',prop: 'date',date:'3'},
-        { label:'派遣案件量',prop: 'date',date:'4'},
-        { label:'派遣案件量',prop: 'date',date:'5'},
-        { label:'派遣案件量',prop: 'date',date:'6'},
-        { label:'派遣案件量',prop: 'date',date:'7'},
-        { label:'派遣案件量',prop: 'date',date:'8'},
-        { label:'派遣案件量',prop: 'date',date:'9'},
-        { label:'派遣案件量',prop: 'date',date:'10'},
-      ],
       startTime:'',
       endTime:'',
+      indexData:{},
       dateArr:[],
       dateKeyArr:[],
-      xAxisArr:[]
+      xAxisArr:[],
+      detailList:[],
+      labelList:[],
+      loading:false,
     }
   },
   async mounted() {
@@ -209,7 +228,7 @@ export default {
       })
     }
     await this.getDateArr();
-    // await this.getData();
+    await this.getData();
   },
   created() {
 
@@ -217,6 +236,9 @@ export default {
   async activated() {
   },
   methods: {
+    onClick() {
+      this.getData();
+    },
     // 初始化获取当月日期
     initDate() {
       this.startTime = dayjs(new Date()).format('YYYY-MM') + '-01'
@@ -333,27 +355,102 @@ export default {
       option && myChart.setOption(option, true);
     },
     async getData(){
-      let res=await getDriverStatisticsKpi({
+      try {
+        this.loading=true
+        if (this.active === 0) {
+          let res = await getStatisticsKpiByMonth({
+            startTime: this.startTime + ' 00:00:00',
+            endTime: this.endTime + ' 23:59:59',
+            statisticsType: 1,
+            supplierId:1128,
+          });
+          // console.log("res", res)
+          this.indexData=res.data;
+        } else if ([1, 2].includes(this.active)) {
+          await getStatisticsKpi({
             startTime: this.startTime + ' 00:00:00',
             endTime: this.endTime + ' 23:59:59',
             statisticsType: 1
-      });
+          })
-      console.log("res",res)
+        } else if ([3, 4].includes(this.active)) {
-     /* let res=await getStatisticsKpiByMonth({
+          await getDriverStatisticsKpi({
             startTime: this.startTime + ' 00:00:00',
             endTime: this.endTime + ' 23:59:59',
             statisticsType: 1
-      });
+          })
-      console.log("res",res)*/
+        } else if ([5, 6, 7, 8, 9].includes(this.active)) {
-      let res1=await getKpiDetailsData({
+          this.detailList = []
-        monthDate:'2024-06',
+          this.labelList = []
+          let result = await getKpiDetailsData({
             startTime: this.startTime + ' 00:00:00',
             endTime: this.endTime + ' 23:59:59',
-        searchType:1,
+            searchType: this.setType(this.active),
             pageNum: 1,
-        pageSize:10
+            pageSize: 1000
           });
-      console.log("res1",res1)
+          this.detailList = result.data
+          this.loading=false
+          if (this.active === 5) {//拒单明细
+            this.labelList = [
+              {label: '案件编号', prop: 'orderCode'},
+              {label: '服务内容', prop: 'serviceName'},
+              {label: '拒单师傅车号', prop: 'plateNumber'},
+              {label: '拒单师傅名称', prop: 'driverName'},
+              {label: '手机号', prop: 'driverPhone'},
+              {label: '上游接单来源', prop: 'reason'},
+              {label: '中道派单时间', prop: 'reason'},
+              {label: '拒绝原因', prop: 'reason'},
+            ]
+          } else if (this.active === 6) {//超时明细
+            this.labelList = [
+              {label: '案件编号', prop: 'orderCode'},
+              {label: '服务内容', prop: 'serviceName'},
+              {label: '超时师傅车号', prop: 'plateNumber'},
+              {label: '超时师傅名称', prop: 'driverName'},
+              {label: '手机号', prop: 'driverPhone'},
+              {label: '上游接单来源', prop: 'reason'},
+              {label: '中道派单时间', prop: 'reason'},
+            ]
+          } else if (this.active === 7) {//投诉明细
+            this.labelList = [
+              {label: '案件编号', prop: 'orderCode'},
+              {label: '服务内容', prop: 'serviceName'},
+              {label: '接单车号', prop: 'plateNumber'},
+              {label: '接单师傅', prop: 'driverName'},
+              {label: '手机号', prop: 'driverPhone'},
+              {label: '客户投诉内容', prop: 'reason'},
+            ]
+          } else if (this.active === 8) {//不使用App案件明细
+            // console.log("不使用App案件明细")
+            this.labelList = [
+              {label: '案件编号', prop: 'orderCode'},
+              {label: '服务内容', prop: 'serviceName'},
+              {label: '接单师傅手机号', prop: 'driverName'},
+            ]
+          } else if (this.active === 9) {//车辆在线情况
+            this.labelList = [
+              {label: '日期', prop: 'vehicleCount'},
+              {label: '在线车辆数量', prop: 'vehicleCount'},
+            ]
+          }
+        }
+      } finally {
+        this.loading=false
+      }
+    },
+    setType(type){
+      switch (type){
+        case 5:
+          return 1;
+        case 6:
+          return 2;
+        case 7:
+          return 3;
+        case 8:
+          return 4;
+        case 9:
+          return 5;
+      }
     },
     changeTab(index) {
       this.activeIndex = index