carwin_report/src/components/HomeChart/CZTJ.vue

<template>
  <div class="cztj" >
    <div class="godetail"  @click="chanzhitongji"><img src="../../assets/bargound/shuangjiantou.png" alt="">&nbsp;产值统计</div>
    <dv-scroll-board :config="cztj_data" style="width:94%;height:30%;text-align: center;margin: 12px auto;flex: 1;" />
    <div class="klfxtwosmallbox">
      <div class="klfxtwosmallbox1">
        <p @click="ruchangtaici">入场台次</p>
        <p><span style="color: rgb(44,214,204);font-size: 1.2rem;">{{tc_data.total}}</span>台</p>
        <span class="iconfont icon-cheliangshuliang" style="font-size: 2.8rem;"></span>
      </div>
      <div class="klfxtwosmallbox2">
        <p @click="ruchangchanzhi">入厂产值</p>
        <p><span style="color: rgb(209,177,50);font-size: 1.2rem;">{{tc_data.total_amount}}</span>万</p>
        <span class="iconfont icon-xindiantu" style="font-size: 3.5rem;"></span>
      </div>
    </div>
    <div id="cztjchart">
      <div>
        <p><span>首保</span><span>{{tc_data.sb_count}}</span></p>
        <p><span>索赔</span><span>{{tc_data.sp_count}}</span></p>
        <p><span>定保</span><span>{{tc_data.db_count}}</span></p>
        <p><span>一般维修</span><span>{{tc_data.ws_count}}</span></p>
        <p><span>事故</span><span>{{tc_data.bp_count}}</span></p>

      </div>
      <div>
        <p><span>首保</span><span>{{tc_data.sb_amount}}万</span></p>
        <p><span>索赔</span><span>{{tc_data.sp_amount}}万</span></p>
        <p><span>定保</span><span>{{tc_data.db_amount}}万</span></p>
        <p><span>一般维修</span><span>{{tc_data.ws_amount}}万</span></p>
        <p><span>事故</span><span>{{tc_data.bp_amount}}万</span></p>
      </div>
    </div>

  </div>
</template>
<script>
import { cztjchartInfo, rctcchartInfo } from "../../servuces/prove";
export default {
  data () {
    return {
      cztj_data: {
        header: ['/', '索赔', '一般维修', '定保', '事故', '首保'],
        data: [],
        rowNum: 3,
        headerBGC: 'rgb(19,54,84)',
        headerHeight: 28,
        align: 'center',
        evenRowBGC: 'rgb(8,27,43)',
        oddRowBGC: 'rgb(19,54,84)',
      },
      tc_data: {}
    }
  },
  mounted () {
    this.getCZTJData();
    this.getTCData();
  },
  methods: {
    getCZTJData () {
      cztjchartInfo().then(res => {
        const keyindex = {
          'name': 0,
          'sp': 1,
          'wx': 2,
          'db': 3,
          'bp': 4,
          'sb': 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.cztj_data.data = item_values;
        this.cztj_data = { ...this.cztj_data }

      })
    },
    getTCData () {
      rctcchartInfo().then(res => {
          this.tc_data = res.data;
      })
    },
    chanzhitongji(){
      this.$router.push('/chanzhitongjidetail')
      
    },
    ruchangtaici(){
      this.$router.push('/ruchangtaicidetail')

    },
    ruchangchanzhi(){
      this.$router.push('/ruchangchanzhidetail')

    }
  }
}
</script>
<style scoped lang="scss">
.cztj {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .klfxtwosmallbox {
    display: flex;
    justify-content: space-around;
    font-size: 1rem;

    .klfxtwosmallbox1,
    .klfxtwosmallbox2 {
      width: 44%;
      padding: 2%;
      border: 1px solid rgb(69, 166, 196);
      position: relative;


      .icon-cheliangshuliang {
        position: absolute;
        right: 5%;
        top: 15%;
        color: rgb(47, 218, 226);
      }

      .icon-xindiantu {
        position: absolute;
        right: 5%;
        top: 5%;
        color: rgb(47, 218, 226);
      }

    }
  }

  #cztjchart {
    width: 100%;
    height: 34%;
    display: flex;
    justify-content: space-around;

    div {
      width: 46%;
      height: 100%;
      background-image: url(../../assets//bargound//chanzhitongjibiankuang.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 3% 3% 10px 4%;
      font-size: .6rem;
      display: flex;
      justify-content: space-between;
      flex-direction: column;

      p {
        display: flex;
        justify-content: space-between;

        span:nth-child(1) {
          width: 50%;

        }

        span:nth-child(2) {
          max-width: 40%;
          min-width: 15%;
        }
      }
    }
  }
}
</style>