hjjc-workbench-web/src/views/system/workerComponents/total.vue

<template>
  <el-card class="box-card" shadow="hover">
    <div slot="header" class="clearfix">
      <span style="border-left: 3px solid #338DE3FF;padding-left: 6px;">预算总体执行情况</span>
      <DatePicker transfer :value="select.year" placeholder="选择所属年份" placement="bottom" style="width: 130px;float: right;"
                  type="year" @on-change="changeYear"></DatePicker>
    </div>
    <div class="progress-card">
      <div class="progress-card-item">
        <div class="progress-icon blue">
          <i class="el-icon-coin"></i>
        </div>
        <div class="progress-content">
          <div class="progress-card-item__num">{{moneyFormatter(statistic.progress.money_total_1 || 0)}}</div>
          <div class="progress-card-item__label">年初预算合计金额</div>
        </div>
      </div>
      <div class="progress-card-item">
        <div class="progress-icon green">
          <i class="el-icon-wallet"></i>
        </div>
        <div class="progress-content">
          <div class="progress-card-item__num">{{moneyFormatter(statistic.progress.money_total_2 || 0)}}</div>
          <div class="progress-card-item__label">调整后预算合计金额</div>
        </div>
      </div>
      <div class="progress-card-item">
        <div class="progress-icon orange">
          <i class="el-icon-money"></i>
        </div>
        <div class="progress-content">
          <div class="progress-card-item__num">{{moneyFormatter(statistic.progress.use_money_total || 0)}}</div>
          <div class="progress-card-item__label">已支付金额</div>
        </div>
      </div>
      <div class="progress-card-item execution-item">
        <div class="progress-rate">
          <div class="circular-progress">
            <el-progress
              type="circle"
              :percentage="Number(toper(statistic.progress.money_total_1 || 0,statistic.progress.money_total_2 || 0,statistic.progress.use_money_total || 0))"
              :width="100"
              :stroke-width="10"
              :color="progressColors"
              :show-text="false"
            />
            <div class="progress-center">
              <div class="progress-percentage">{{ toper(statistic.progress.money_total_1 || 0,statistic.progress.money_total_2 || 0,statistic.progress.use_money_total || 0) }}%</div>
            </div>
          </div>
          <div class="progress-card-item__label">执行率</div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import { moneyFormatter } from "@/utils"
import { statistic } from '@/api/dashboard/notice'
export default {
  name:"card1",
  layout:{
    x:0,
    y:0,
    w:4,
    h:5,
    i:"1",
    name:"预算统计",
  },
  data() {
    return {
      select: {
        year: new Date().getFullYear().toString()
      },
      statistic: {
        progress: {}
      }
    }
  },
  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: {
    progressColors() {
      // 根据图片样式，使用蓝色到橙色的渐变
      return [
        { color: '#409EFF', percentage: 0 },
        { color: '#66B1FF', percentage: 25 },
        { color: '#85C1E9', percentage: 50 },
        { color: '#F39C12', percentage: 75 },
        { color: '#E67E22', percentage: 100 }
      ];
    }
  },
  created() {
    this.getStatistic();
  }
}
</script>

<style scoped lang="scss">
.progress-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;

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

    &.execution-item {
      flex: 1.4;
    }

    .progress-icon {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;

      i {
        font-size: 24px;
        color: white;
      }

      &.blue {
        background: linear-gradient(135deg, #409EFF, #66B1FF);
      }

      &.green {
        background: linear-gradient(135deg, #67C23A, #85CE61);
      }

      &.orange {
        background: linear-gradient(135deg, #E6A23C, #EEBE77);
      }
    }

    .progress-content {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .progress-rate {
      display: flex;
      flex-direction: column;
      align-items: center;

      .circular-progress {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;

        .progress-center {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .progress-percentage {
            font-size: 16px;
            font-weight: 700;
            color: #303133;
            line-height: 1;
          }
        }
      }
    }

    &__label {
      font-size: 12px;
      color: #909399;
      margin-top: 5px;
      line-height: 1.2;
    }

    &__num {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 5px;
    }
  }
}
</style>