carwin_report/src/components/HomeChart/JCPM.vue

<template>
  <div class="jcpm" @click="jiaochepaihang">
    <div class="godetail"><img src="../../assets/bargound/shuangjiantou.png" alt="">&nbsp;交车排行</div>
    <dv-scroll-board :config="jc_data" style="width:94%;height:82%;text-align: center;margin: 1% auto;" />
  </div>
</template>
<script>
import * as echarts from 'echarts';
import { jcpmchartInfo } from "../../servuces/prove";
export default {
  data () {
    return {
      jc_data: {
        header: ['#', '店面', '销售顾问', '集客数量', '订单数量', '成交率'],
        data: [],
        rowNum: 3,
        headerBGC: 'rgb(19,54,84)',
        headerHeight: 30,
        align: 'center',
        evenRowBGC: 'rgb(8,27,43)',
        oddRowBGC: 'rgb(19,54,84)',
      }
    }
  },
  mounted () {
    this.getJCPMData();
  },
  methods: {
    getJCPMData () {
      jcpmchartInfo().then(res => {
        const keyindex = {
          'pm': 0,
          'company': 1,
          'xsgw': 2,
          'jksl': 3,
          'ddsl': 4,
          'cjl': 5
        };

        let item_values = [];
        res.data.map(obj => {
          let item_value = [];
          for (let key in obj) {
            let index = keyindex[key]
            item_value[index] = obj[key] + ''
          }
          item_values.push(item_value)
        });
        this.jc_data.data = item_values;
        this.jc_data = { ...this.jc_data }

      })
    },

    jiaochepaihang(){
      this.$router.push('/jiaochepaihangdetail')

    }
  }
}
</script>
<style scoped lang="scss">
.jcpm {
  width: 100%;
  height: 100%;

}
</style>