task#14196，kpi页面

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>