task#14196，kpi页面

package-lock.json

@@ -2195,9 +2195,9 @@
       }
     },
     "@vue/vue-loader-v15": {
-      "version": "npm:vue-loader@15.10.1",
+      "version": "npm:vue-loader@15.11.1",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.1.tgz",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.11.1.tgz",
-      "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
+      "integrity": "sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q==",
       "dev": true,
       "requires": {
         "@vue/component-compiler-utils": "^3.1.0",
@@ -2581,6 +2581,14 @@
         "lodash": "^4.17.14"
       }
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
+      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -2616,6 +2624,11 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+    },
     "babel-loader": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.3.0.tgz",
@@ -2667,6 +2680,27 @@
         "@babel/helper-define-polyfill-provider": "^0.4.2"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -3511,8 +3545,7 @@
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
-      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
+      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg=="
-      "dev": true
     },
     "debug": {
       "version": "4.3.4",
@@ -3540,8 +3573,7 @@
     "deepmerge": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
-      "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
+      "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
-      "dev": true
     },
     "default-gateway": {
       "version": "6.0.3",
@@ -3794,6 +3826,22 @@
       "integrity": "sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==",
       "dev": true
     },
+    "echarts": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.5.0.tgz",
+      "integrity": "sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.5.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -3806,6 +3854,19 @@
       "integrity": "sha512-6s7NVJz+sATdYnIwhdshx/N/9O6rvMxmhVoDSDFdj6iA45gHR8EQje70+RYsF4GeB+k0IeNSBnP7yG9ZXJFr7A==",
       "dev": true
     },
+    "element-ui": {
+      "version": "2.15.14",
+      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.14.tgz",
+      "integrity": "sha512-2v9fHL0ZGINotOlRIAJD5YuVB8V7WKxrE9Qy7dXhRipa035+kF7WuU/z+tEmLVPBcJ0zt8mOu1DKpWcVzBK8IA==",
+      "requires": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      }
+    },
     "emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -4819,8 +4880,7 @@
     "he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
-      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
-      "dev": true
     },
     "highlight.js": {
       "version": "10.7.3",
@@ -5448,8 +5508,7 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-      "dev": true
     },
     "lodash.debounce": {
       "version": "4.0.8",
@@ -6025,6 +6084,11 @@
       "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
       "dev": true
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -7067,6 +7131,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.22.4",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.4.tgz",
@@ -7783,6 +7852,11 @@
         }
       }
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
+    },
     "thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
@@ -8171,7 +8245,6 @@
       "version": "2.7.14",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
       "integrity": "sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==",
-      "dev": true,
       "requires": {
         "de-indent": "^1.0.2",
         "he": "^1.2.0"
@@ -8716,6 +8789,21 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.5.0.tgz",
+      "integrity": "sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }

package.json

@@ -12,6 +12,7 @@
     "amfe-flexible": "^2.2.1",
     "axios": "^1.4.0",
     "core-js": "^3.8.3",
+    "echarts": "^5.2.2",
     "less": "^4.1.3",
     "less-loader": "^11.1.3",
     "qs": "^6.11.2",
@@ -20,7 +21,9 @@
     "vant": "^2.12.54",
     "vue": "^2.6.14",
     "vue-router": "^3.0.7",
-    "vuex": "^3.6.2"
+    "vuex": "^3.6.2",
+    "element-ui": "^2.15.9",
+    "dayjs": "^1.8.14"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -49,7 +52,7 @@
       "parser": "@babel/eslint-parser"
     },
     "rules": {},
-    "globals":{
+    "globals": {
       "AMap": "true"
     }
   },

src/api/kpi.js

@@ -0,0 +1,38 @@
+import request from '@/utils/http'
+// 首页服务商接口
+export function getStatisticsKpiByMonth(data){
+  return request({
+    url: '/supplier/supplierKPI/querySupplierStatisticsKpiByMonth',
+    method:'POST',
+    contentType: 'application/json',
+    data
+  })
+}
+//服务商kpi
+export function getStatisticsKpi(data){
+  return request({
+    url: '/supplier/supplierKPI/querySupplierStatisticsKpi',
+    method:'POST',
+    contentType: 'application/json',
+    data
+  })
+}
+
+//  司机Kpi
+export function getDriverStatisticsKpi(data){
+  return request({
+    url: '/supplier/supplierKPI/querySupplierDriverStatisticsKpi',
+    method:'POST',
+    contentType: 'application/json',
+    data
+  })
+}
+//   各种详情数据
+export function getKpiDetailsData(data){
+  return request({
+    url: '/supplier/supplierKPI/querySupplierKpiDetailsData',
+    method:'POST',
+    contentType: 'application/json',
+    data
+  })
+}

src/main.js

@@ -2,12 +2,17 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import Vant from 'vant';
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
 import 'vant/lib/index.css';
 import "lib-flexible/flexible";
 import "@/utils/rem.js"
 import store from './store'
+
 Vue.config.productionTip = false
+
 Vue.use(Vant);
+Vue.use(ElementUI);
 new Vue({
   store,
   router,

src/router/index.js

@@ -1,7 +1,7 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
 Vue.use(VueRouter);
-
+import kpiRouter from './kpi-router'
 const routes = [
     {
       path: '/',
@@ -199,6 +199,7 @@ const routes = [
             title:'维保申请'
         }
     },
+    ...kpiRouter,
   ]
 
 const router = new VueRouter({

src/router/kpi-router.js

@@ -0,0 +1,11 @@
+const kpiRouter = [
+    {
+        path: '/kpiIndex',
+        name: 'kpiIndex',
+        component: () => import('@/views/kpi/kpiIndex'),
+        meta:{
+            title: 'kpi首页',
+        }
+    },
+]
+export default kpiRouter

src/styles/mixin.scss

@@ -2,6 +2,11 @@
     font-size: $size;
     font-weight: $weight;
 }
+@mixin sizeWeightCol($size,$weight,$col){
+    font-size: $size;
+    font-weight: $weight;
+    color: $col;
+}
 @mixin bgFontColor($color,$bgcolor){
     color:$color;
     background: $bgcolor;
@@ -23,6 +28,14 @@
     width: $w;
     height: $h;
 }
+@mixin whMarLe($w,$h,$l){
+    @include wh($w,$h);
+    margin-left: $l;
+}
+@mixin whBg($w,$h,$bg){
+    @include wh($w,$h);
+    background: $bg;
+}
 @mixin flexColumn{
     display: flex;
     flex-direction: column;
@@ -35,6 +48,10 @@
     @include flexColumn;
     justify-content: space-around;
 }
+@mixin flexColCen(){
+    @include flexColumn;
+    align-items: center;
+}
 @mixin flexColBet(){
     display: flex;
     justify-content: space-between;

src/views/kpi/components/circleChar.vue

@@ -0,0 +1,98 @@
+<template>
+<div class="wrap">
+  <div id="supplierScore" ref="supplierScore" style="width: 100%;height: 125px" @click="handle"></div>
+</div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: "circleChar",
+  props:['data','bgColor','titleText','isStore'],
+  data(){
+    return{
+    }
+  },
+  mounted() {
+    this.drawHandle();
+  },
+  methods:{
+    handle(){
+      if(this.titleText == '投诉率'){
+        console.log(this.titleText)
+      }else if(this.titleText == '使用率'){
+        console.log(this.titleText)
+      }
+    },
+    // 绘制 总分图表
+    drawHandle() {
+      let supplierScoreChart = echarts.init(this.$refs.supplierScore)
+      let option;
+      let arrow=(this.titleText == '投诉率' || this.titleText == '使用率') ? '>' : ''
+      const gaugeData = [
+        {
+          value: this.data,
+          name: this.isStore ? '' : this.titleText+arrow,
+          title: {
+            offsetCenter: ['0%', '20%']
+          },
+          detail: {
+            valueAnimation: true,
+            offsetCenter: ['0%', this.isStore ? '10%' : '-25%']
+
+          }
+        }
+      ];
+      option = {
+        series: [
+          {
+            type: 'gauge',
+            startAngle: 90,
+            endAngle: -270,
+            pointer: {
+              show: false
+            },
+            progress: {
+              show: true,
+              // width:6,
+              itemStyle:{
+                color:this.bgColor
+              }
+            },
+           /* axisLine: {
+              lineStyle: {
+                width:12,
+              }
+            },*/
+            splitLine: { show: false},
+            axisTick: { show: false},
+            axisLabel: {show: false},
+            data: gaugeData,
+            title: {
+              fontSize: 11,
+              color:'rgba(4, 4, 21,0.45)'
+            },
+            detail: {
+              color:this.isStore ? this.bgColor : '#040415',
+              fontSize: this.isStore ? 43 :19,
+              formatter: this.isStore ? '{value}' : '{value}%'
+            }
+          }
+        ]
+      };
+      // 绘制图表
+      option && supplierScoreChart.setOption(option, true);
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+.wrap{
+  @include flexCenter;
+}
+.img{
+  @include whMarLe(12px,10px,4px);
+}
+</style>

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

@@ -0,0 +1,45 @@
+<template>
+  <div class="wrap">
+    <el-table :data="tableData"
+              stripe
+              border
+              style="width: 100%"
+              class="custom-table">
+      <el-table-column
+          v-for="(column,i) in tableData"
+          :key="i"
+          :prop="column.prop"
+          :label="column.label"
+          :fixed="i===0"
+          :width="i===0 ? '40' :'80'"
+          align="center"
+      >
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "commonTable",
+  props: ['tableData'],
+  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

@@ -0,0 +1,546 @@
+<template>
+  <div class="wrap">
+    <div class="headWrap">
+      <div class="title">KPI.数据看板</div>
+      <div class="titleName">4月-我是服务商名称</div>
+    </div>
+    <van-tabs v-model="active" sticky >
+      <van-tab v-for="(item,index) in tabArr" :key="index"  :title="item.name">
+
+      </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="itemTitle">承接案件量</div>
+          </div>
+          <div class="center common">
+            <div class="num">35%</div>
+            <div class="itemTitle">拒单率 <img src="@/assets/arrow_rht.png" class="img"/></div>
+          </div>
+          <div class="right common">
+            <div class="num">35%</div>
+            <div class="itemTitle">超时率 <img src="@/assets/arrow_rht.png" class="img"/></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="98.9" :title-text="'客户满意度'" :bg-color="'#5DDECF'" ></circle-char>
+          <circle-char :data="56" :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="9.9" :title-text="'联系客户率'" :bg-color="'#5D7FD7'" ></circle-char>
+          <circle-char :data="65.89" :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="itemTitle">接单时效(分)</div>
+          </div>
+          <div class="line"></div>
+          <div class="center common">
+            <div class="num">0:02:24</div>
+            <div class="itemTitle">集合成功到达时效</div>
+          </div>
+          <div class="line"></div>
+          <div class="right common">
+            <div class="num">0:02:24</div>
+            <div class="itemTitle">到达时效</div>
+          </div>
+        </div>
+      </div>
+      <div class="reciceOrder store">
+        <div class="title">综合打分</div>
+        <div class="storeWrap">
+          <circle-char :data="98" :bg-color="'#00D273'" :is-store="true"></circle-char>
+        </div>
+      </div>
+      <div style="padding: 30px"></div>
+    </div>
+    <div class="contentWrap active2" v-if="active===1">
+      <div class="tabWrap">
+        <div v-for="(item,index) in list" :class="activeIndex===index ? 'active' : ''" :key="index" @click="changeTab(index)">{{item.name}}</div>
+      </div>
+      <div v-if="activeIndex===0">
+        <div class="chartWrap" id="chartWrap" style="width: 100%;height:300px" ></div>
+        <div class="tableWrap" id="tableWrap">
+          <table>
+            <thead>
+            <tr>
+              <th></th>
+              <th>1</th>
+              <th>2</th>
+              <th>3</th>
+              <th>4</th>
+              <th>本月</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+              <td>派遣</td>
+              <td>数据</td>
+              <td>数据</td>
+              <td>数据</td>
+              <td>数据</td>
+              <td>数据</td>
+            </tr>
+            <tr>
+              <td>承接</td>
+              <td>数据</td>
+              <td>数据</td>
+              <td>数据</td>
+              <td>数据</td>
+              <td>数据</td>
+            </tr>
+            <tr>
+              <td>完成</td>
+              <td>数据</td>
+              <td>数据</td>
+              <td>数据</td>
+              <td>数据</td>
+              <td>数据</td>
+            </tr>
+            <tr>
+              <td>拒单</td>
+              <td>30.89%</td>
+              <td>30.89%</td>
+              <td>30.89%</td>
+              <td>30.89%</td>
+              <td>30.89%</td>
+            </tr>
+            <tr>
+              <td>超时</td>
+              <td>30.89%</td>
+              <td>30.89%</td>
+              <td>30.89%</td>
+              <td>30.89%</td>
+              <td>30.89%</td>
+            </tr>
+            <tr>
+              <td>取消率</td>
+              <td>数据</td>
+              <td>数据</td>
+              <td>数据</td>
+              <td>数据</td>
+              <td>数据</td>
+            </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div style="padding: 30px"></div>
+    </div>
+    <div class="contentWrap  monthTotal" v-if="active===2">
+      <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="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>
+        <div style="padding: 30px"></div>
+      </div>
+
+    </div>
+ </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import dayjs from "dayjs";
+// getStatisticsKpiByMonth
+import {getKpiDetailsData,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";
+export default {
+  name: "kpiIndex",
+  components: { CircleChar,CommonTable },
+  computed: {},
+  mixins: [myMixins],
+  data() {
+    return {
+      active: 1,
+      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:'',
+      dateArr:[],
+      dateKeyArr:[],
+      xAxisArr:[]
+    }
+  },
+  async mounted() {
+    if(this.active===1 && this.activeIndex===0){
+      this.$nextTick(()=>{
+        this.drawLine()
+      })
+    }
+    await this.getDateArr();
+    // await this.getData();
+  },
+  created() {
+
+  },
+  async activated() {
+  },
+  methods: {
+    // 初始化获取当月日期
+    initDate() {
+      this.startTime = dayjs(new Date()).format('YYYY-MM') + '-01'
+      this.endTime = 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.dateArr = [];
+      this.dateKeyArr = [];*/
+      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.dateArr.push(dayjs(tempTime).format('YYYY-MM-DD'));
+        this.xAxisArr.push(dayjs(tempTime).format('DD'));
+        // this.dateKeyArr.push(dayjs(tempTime).format('YYYY-MM-DD 00:00:00'));
+        i++;
+        // console.log(" this.dateArr", this.dateArr)
+
+        // console.log(" this.dateKeyArr", this.dateKeyArr)
+
+      } while ( tempTime < endTime)
+      // console.log(" this.xAxisArr", this.xAxisArr)
+    },
+    drawLine() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById('chartWrap'))
+      let option;
+      option = {
+        title: {
+          text: '接单情况',
+          left: 10,
+          textStyle: {
+            fontSize: 15
+          },
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['1月', '2月', '3月', '4月', '本月']
+        },
+        /* yAxis: [{
+                name: '工时(小时)',
+                type: 'value'
+              },{
+                name: '通话(小时)',
+                type: 'value'
+              }],*/
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            formatter: '{value}'
+          },
+          axisPointer: {
+            snap: true
+          }
+        },
+        visualMap: {
+          show: false
+        },
+        series: [
+          {
+            name: '派遣案件量',
+            type: 'line',
+            smooth: true,
+            // prettier-ignore
+            // 折线的数据
+            data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
+            markArea: {
+              itemStyle: {
+                color: 'rgba(255, 173, 177, 0.4)'
+              },
+              // 柱形图数据
+              data: [
+                [
+                  {
+                    name: 'zhouzhou ',
+                    xAxis: '1月'
+                  },
+                  {
+                    xAxis: '2月'
+                  }
+                ],
+                [
+                  {
+                    name: 'Evening Peak',
+                    xAxis: '4月'
+                  },
+                  {
+                    xAxis: '本月'
+                  }
+                ]
+              ]
+            }
+          },
+        ]
+      };
+      option && myChart.setOption(option, true);
+    },
+    async getData(){
+      let res=await getDriverStatisticsKpi({
+        startTime:this.startTime+' 00:00:00',
+        endTime:this.endTime+' 23:59:59',
+        statisticsType:1
+      });
+      console.log("res",res)
+     /* let res=await getStatisticsKpiByMonth({
+        startTime:this.startTime+' 00:00:00',
+        endTime:this.endTime+' 23:59:59',
+        statisticsType:1
+      });
+      console.log("res",res)*/
+      let res1=await getKpiDetailsData({
+        monthDate:'2024-06',
+        startTime:this.startTime+' 00:00:00',
+        endTime:this.endTime+' 23:59:59',
+        searchType:1,
+        pageNum:1,
+        pageSize:10
+      });
+      console.log("res1",res1)
+    },
+    changeTab(index) {
+      this.activeIndex = index
+      if(this.active===1 && this.activeIndex===0){
+        this.$nextTick(()=>{
+          this.drawLine()
+        })
+      }
+    },
+  },
+}
+</script>
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+th, td {
+  border: 1px solid #ddd;
+  padding: 8px 10px;
+  text-align: center;
+}
+th{
+  background-color: #f2f2f2;
+}
+@import "@/styles/common.scss";
+@import "@/styles/mixin.scss";
+.wrap{
+  @include wh(100%,100%);
+}
+.headWrap{
+  @include wh(100%,100px);
+  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;
+  @include flexTwoCenter;
+  flex-direction: column;
+  .title{
+    font-family: YouSheBiaoTiHei;
+    font-size: 35px;
+    color: #FFFFFF;
+  }
+  .titleName{
+    font-family: PingFangSC, PingFang SC;
+    @include fontWeightSize(14px,500);
+    color: #BDDAFF;
+  }
+}
+::v-deep .van-tabs__nav--line.van-tabs__nav--complete{
+  background: #5D7FD7;
+  padding: 0;
+  height: 36px;
+}
+::v-deep .van-tab--active{
+  background: #FFFFFF;
+  border-radius: 7px 7px 0px 0px;
+  @include sizeWeightCol(13px,500,#5D7FD7 !important);
+}
+::v-deep .van-tabs__line{
+  display: none;
+}
+::v-deep .van-tab{
+  border-right: 1px solid #6B97D0;
+  @include sizeWeightCol(13px,500,#ACC1DB);
+}
+::v-deep .van-col{
+  padding: 6px 10px;
+  background: #E5E6EB;
+  border-right: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;;
+}
+.contentWrap{
+  @include wh(100%,calc(100% - 140px));
+  overflow-y: auto;
+  background: #EFF2F8;
+  .reciceOrder{
+    @include whBg(100%,146px,#FFFFFF);
+    @include sizing4Padding(19px,25px,38px,19px);
+    margin-bottom: 10px;
+    .storeWrap{
+      width: 100%;
+      text-align: center;
+    }
+    .title{
+      @include sizeWeightCol(14px,bold,#040415);
+      margin-bottom: 14px;
+    }
+    .reciceOrderIWrap{
+      @include flexColAround;
+      .common{
+        @include flexColCen;
+      }
+    }
+    .num{
+      @include sizeWeightCol(24px,bold,#040415);
+      margin-bottom: 10px;
+    }
+    .itemTitle{
+      @include flexCenter;
+      font-size: 12px;
+      color: rgba(4, 4, 21,0.45);
+    }
+    .img{
+      @include whMarLe(8px,10px,4px);
+    }
+    .line{
+      border-right: 2px solid #EAE9EC;
+    }
+  }
+  .evaluate,.appUse,.store{
+    height: 179px;
+    .title{
+      margin-bottom: 0 !important;
+    }
+  }
+  .ageing{
+    height: 146px;
+  }
+}
+.active2{
+  background: #FFFFFF;
+  td:first-child {
+    padding: 0px !important;
+  }
+  tr:nth-child(odd) td:first-child{
+    font-weight: bold;
+  }
+  tr:nth-child(even) td:first-child {
+    background-color: #f2f2f2; /* 偶数行第一个单元格为白色 */
+    font-weight: bold;
+  }
+}
+.tabWrap{
+  @include wh(100%,22px);
+  @include flexColAround;
+  margin: 10px 0;
+  div{
+    padding: 2px 8px;
+    border-radius: 7px;
+    font-size: 12px;
+    @include bgFontColor(#3E3C3C,#F4F4F4);
+  }
+  .active {
+    position: relative;
+    opacity: 1;
+    @include bgFontColor(#ffffff,#F1B289);
+  }
+  .active:after {
+    content: '';
+    display: block;
+    @include wh(18px,2px);
+    background: #FFFFFF;
+    position: absolute;
+    margin-top: 3px;
+    left: 50%;
+    opacity: 1;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border: 4px solid;
+    border-color: #F1B289 transparent transparent transparent;
+  }
+}
+.tableWrap{
+  padding: 0 10px;
+}
+.monthTotal{
+  background: #FFFFFF;
+  padding-left: 6px;
+  .leftMonth{
+    .leftItem{
+      font-weight: bold;
+      border-right: 1px solid #cccccc;
+      border-left: 1px solid #cccccc;
+      text-align: center;
+      padding: 8px 10px;
+    }
+    .leftItem:nth-child(odd){
+      border-top: 1px solid #cccccc;
+      border-bottom: 1px solid #cccccc;
+      background-color: #f2f2f2; /* 奇数*/
+    }
+  }
+  .content {
+    flex-grow: 1; /* 占据剩余空间 */
+    overflow-x: auto; /* 当内容超出宽度时启用水平滚动 */
+  }
+}
+</style>

yarn.lock

@@ -287,6 +287,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.10.tgz#e37634f9a12a1716136c44624ef54283cabd3f55"
   integrity sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==
 
+"@babel/parser@^7.23.5":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.7.tgz#9a5226f92f0c5c8ead550b750f5608e766c8ce85"
+  integrity sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.22.5.tgz#87245a21cd69a73b0b81bcda98d443d6df08f05e"
@@ -1613,6 +1618,17 @@
     postcss "^8.4.14"
     source-map "^0.6.1"
 
+"@vue/compiler-sfc@2.7.16":
+  version "2.7.16"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz#ff81711a0fac9c68683d8bb00b63f857de77dc83"
+  integrity sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==
+  dependencies:
+    "@babel/parser" "^7.23.5"
+    postcss "^8.4.14"
+    source-map "^0.6.1"
+  optionalDependencies:
+    prettier "^1.18.2 || ^2.0.0"
+
 "@vue/component-compiler-utils@^3.1.0", "@vue/component-compiler-utils@^3.3.0":
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz#f9f5fb53464b0c37b2c8d2f3fbfe44df60f61dc9"
@@ -1942,6 +1958,13 @@ astral-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
   integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
 
+async-validator@~1.8.1:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.8.5.tgz#dc3e08ec1fd0dddb67e60842f02c0cd1cec6d7f0"
+  integrity sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==
+  dependencies:
+    babel-runtime "6.x"
+
 async@^2.6.4:
   version "2.6.4"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
@@ -1980,6 +2003,11 @@ axios@^1.4.0:
     form-data "^4.0.0"
     proxy-from-env "^1.1.0"
 
+babel-helper-vue-jsx-merge-props@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
+  integrity sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg==
+
 babel-loader@^8.2.2:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.3.0.tgz#124936e841ba4fe8176786d6ff28add1f134d6a8"
@@ -2021,6 +2049,14 @@ babel-plugin-polyfill-regenerator@^0.5.2:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.4.2"
 
+babel-runtime@6.x:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  integrity sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -2463,6 +2499,11 @@ core-js-compat@^3.31.0, core-js-compat@^3.8.3:
   dependencies:
     browserslist "^4.21.9"
 
+core-js@^2.4.0:
+  version "2.6.12"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
+  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
+
 core-js@^3.8.3:
   version "3.32.0"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.32.0.tgz#7643d353d899747ab1f8b03d2803b0312a0fb3b6"
@@ -2634,6 +2675,11 @@ csstype@^3.1.0:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
+dayjs@^1.8.14:
+  version "1.11.11"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.11.tgz#dfe0e9d54c5f8b68ccf8ca5f72ac603e7e5ed59e"
+  integrity sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==
+
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
@@ -2665,7 +2711,7 @@ deep-is@^0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
-deepmerge@^1.5.2:
+deepmerge@^1.2.0, deepmerge@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
   integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==
@@ -2813,6 +2859,14 @@ easy-stack@1.0.1:
   resolved "https://registry.yarnpkg.com/easy-stack/-/easy-stack-1.0.1.tgz#8afe4264626988cabb11f3c704ccd0c835411066"
   integrity sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==
 
+echarts@^5.2.2:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.5.0.tgz#c13945a7f3acdd67c134d8a9ac67e917830113ac"
+  integrity sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==
+  dependencies:
+    tslib "2.3.0"
+    zrender "5.5.0"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -2823,6 +2877,18 @@ electron-to-chromium@^1.4.477:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.487.tgz#e2ef8b15f2791bf68fa6f38f2656f1a551d360ae"
   integrity sha512-XbCRs/34l31np/p33m+5tdBrdXu9jJkZxSbNxj5I0H1KtV2ZMSB+i/HYqDiRzHaFx2T5EdytjoBRe8QRJE2vQg==
 
+element-ui@^2.15.9:
+  version "2.15.14"
+  resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.15.14.tgz#3c34df79467636592812d720d2e6784e7a6ec2ea"
+  integrity sha512-2v9fHL0ZGINotOlRIAJD5YuVB8V7WKxrE9Qy7dXhRipa035+kF7WuU/z+tEmLVPBcJ0zt8mOu1DKpWcVzBK8IA==
+  dependencies:
+    async-validator "~1.8.1"
+    babel-helper-vue-jsx-merge-props "^2.0.0"
+    deepmerge "^1.2.0"
+    normalize-wheel "^1.0.1"
+    resize-observer-polyfill "^1.5.0"
+    throttle-debounce "^1.0.1"
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
@@ -4398,6 +4464,11 @@ normalize-url@^6.0.1:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
   integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
 
+normalize-wheel@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
+  integrity sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -5137,6 +5208,11 @@ regenerate@^1.4.2:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
+regenerator-runtime@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
+
 regenerator-runtime@^0.14.0:
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
@@ -5204,6 +5280,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
+resize-observer-polyfill@^1.5.0, resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
@@ -5775,6 +5856,11 @@ thread-loader@^3.0.0:
     neo-async "^2.6.2"
     schema-utils "^3.0.0"
 
+throttle-debounce@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz#51853da37be68a155cb6e827b3514a3c422e89cd"
+  integrity sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==
+
 thunky@^1.0.2:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
@@ -5807,6 +5893,11 @@ tr46@~0.0.3:
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
   integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
 
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslib@^2.0.3, tslib@^2.3.0:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.1.tgz#fd8c9a0ff42590b25703c0acb3de3d3f4ede0410"
@@ -5939,6 +6030,7 @@ vary@~1.1.2:
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
+
 vue-eslint-parser@^8.0.1:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz#5d31129a1b3dd89c0069ca0a1c88f970c360bd0d"
@@ -5984,6 +6076,14 @@ vue-style-loader@^4.1.0, vue-style-loader@^4.1.3:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
+vue-template-compiler@^2.6.11:
+  version "2.7.16"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz#c81b2d47753264c77ac03b9966a46637482bb03b"
+  integrity sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==
+  dependencies:
+    de-indent "^1.0.2"
+    he "^1.2.0"
+
 vue-template-compiler@^2.6.14:
   version "2.7.14"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz#4545b7dfb88090744c1577ae5ac3f964e61634b1"
@@ -5997,6 +6097,14 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue@^2.6.12:
+  version "2.7.16"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.16.tgz#98c60de9def99c0e3da8dae59b304ead43b967c9"
+  integrity sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==
+  dependencies:
+    "@vue/compiler-sfc" "2.7.16"
+    csstype "^3.1.0"
+
 vue@^2.6.14:
   version "2.7.14"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.14.tgz#3743dcd248fd3a34d421ae456b864a0246bafb17"
@@ -6286,3 +6394,10 @@ yorkie@^2.0.0:
     is-ci "^1.0.10"
     normalize-path "^1.0.0"
     strip-indent "^2.0.0"
+
+zrender@5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.5.0.tgz#54d0d6c4eda81a96d9f60a9cd74dc48ea026bc1e"
+  integrity sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==
+  dependencies:
+    tslib "2.3.0"