cz-hjjc-ht/src/views/system/workerComponents/total.vue

<template>
  <el-card class="box-card" shadow="hover">
    <div slot="header" class="clearfix">
      <SvgIcon style="color: #3171f4;width: 22px;height: 22px;" icon-class="calendar-check"></SvgIcon>
      <span style="padding-left: 15px;">预算总体执行情况</span>
      <DatePicker transfer :value="select.year" placeholder="选择所属年份" placement="bottom" style="width: 130px;margin-left: auto;"
                  type="year" @on-change="changeYear"></DatePicker>
    </div>
    <div class="progress-card">
      <div class="progress-card-item">
        <div class="worker-progress__icon icon-yuan">
          <SvgIcon icon-class="yuan"></SvgIcon>
        </div>
        <div class="progress-card-item__num">{{moneyFormatter(statistic.progress.money_total_1 || 0)}}</div>
        <div class="progress-card-item__label">年初预算合计金额</div>
      </div>
      <div class="progress-card-item">
        <div class="worker-progress__icon icon-zhangdan">
          <SvgIcon icon-class="zhangdan"></SvgIcon>
        </div>
        <div class="progress-card-item__num">{{moneyFormatter(statistic.progress.money_total_2 || 0)}}</div>
        <div class="progress-card-item__label">调整后预算合计金额</div>
      </div>
      <div class="progress-card-item">
        <div class="worker-progress__icon icon-zhifu">
          <SvgIcon icon-class="zhifu"></SvgIcon>
        </div>
        <div class="progress-card-item__num">{{moneyFormatter(statistic.progress.use_money_total || 0)}}</div>
        <div class="progress-card-item__label">已支付金额</div>
      </div>
      <div class="progress-card-item">
        <MyProgress width="145px" height="145px" title="执行率" :chart-data="[{value:statistic.progress.money_total_2 ? statistic.progress.money_total_2 : statistic.progress.money_total_1,name:'合计金额'},{value:statistic.progress.use_money_total,name:'已用金额'}]" ></MyProgress>
<!--        <el-progress :width="145" type="circle" stroke-width="20" :format="per => `${per}%\n执行率`" :percentage="40"></el-progress>-->
<!--        <div class="progress-card-item__num">-->
<!--          {{toper(statistic.progress.money_total_1 || 0,statistic.progress.money_total_2 || 0,statistic.progress.use_money_total || 0)}}%-->
<!--        </div>-->
<!--        <div class="progress-card-item__label">执行率</div>-->
      </div>
    </div>
  </el-card>
</template>

<script>
import MyProgress from "@/components/Progress";
import SvgIcon from "@/components/SvgIcon";
import { moneyFormatter } from "@/utils"
import { statistic } from '@/api/dashboard/notice'
export default {
  components: {
    SvgIcon,
    MyProgress
  },
  name:"card1",
  layout:{
    x:0,
    y:0,
    w:4,
    h:5,
    i:"1",
    name:"预算统计",
  },
  data() {
    return {
      select: {
        year: new Date().getFullYear().toString()
      },
      statistic: {
        progress: {
          money_total_1: 0,
          money_total_2: 0,
          use_money_total: 0
        }
      }
    }
  },
  methods: {
    moneyFormatter,
    toper(m1, m2, m3) {
      if (m2 != 0) {
        return ((m3 / m2) * 100).toFixed(2);
      } else if (m1 != 0) {
        return ((m3 / m1) * 100).toFixed(2);
      } else
        return 0
    },
    changeYear(e) {
      this.select.year = e;
      this.getStatistic()
    },
    async getStatistic() {
      if(/^\/system/.test(this.$route.path)) return

      const res = await statistic(this.select,true)
      this.statistic = res
      this.$emit('send-data',res)
    },
  },
  computed: {},
  created() {
    this.getStatistic();
  }
}
</script>

<style scoped lang="scss">
.clearfix {
  display: flex;
  align-items: center;
}
.progress-card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;

  &-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    &__label {
      font-size: 15px;
      color: #000000;
      padding-top: 20px;
    }

    &__num {
      font-size: 20px;
      line-height: 7px;
      color: #000000;
      font-weight: bold;
      padding-top: 18px;
    }

    .worker-progress__icon {
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 72px;
      height: 72px;

      svg {
        border-radius: 100%;
        width: 40px;
        height: 40px;

      }
    }
    .icon-yuan {
      background: #56b7f9;
      color: #fff;
      filter: drop-shadow(0px 6px 6px rgba(43,188,255,0.5));
      svg {
        color: #56b7f9;
        background: #fff;
      }
    }
    .icon-zhangdan {
      background: #446df6;
      filter: drop-shadow(0px 6px 6px rgba(54,117,255,0.5));
      svg {
        color: #fff;
        width: 36px;
      }
    }
    .icon-zhifu {
      background: #f2a93f;
      filter: drop-shadow(0px 6px 6px rgba(255,164,45,0.5));
      svg {
        color: #fff;
        width: 36px;
      }
    }
  }
}
::v-deep .el-progress--circle .el-progress__text {
  white-space: break-spaces;
}
</style>
<style>
.progress-card-item > .icon-yuan > svg > use {
  transform: scale(0.55);
  transform-origin: center;
}
</style>