hjjc-workbench-web/src/views/dashboard/components/carryStatic.vue

<template>
  <div>

    <el-drawer
      size="880px"
      title="执行统计"
      :visible.sync="drawer"
      direction="rtl">
      <div style="padding: 0 20px;">
        <template v-if="type === 1">
          <Card>
            <el-checkbox :indeterminate="isIndeterminate"
                         v-model="checkAll"
                         @change="e => {
                         departmentSelect = e ? departments.map(i => (i.plan_department_id)) : [];
                         isIndeterminate = false;
                       }">全选</el-checkbox>
            <el-checkbox-group v-model="departmentSelect"
                               size="small"
                               @change="e => {
                               let count = e.length;
                               checkAll = count === departments.length;
                               isIndeterminate = count > 0 && count < departments.length;
                             }">
              <el-checkbox v-for="item in departments" :label="item.plan_department_id" :key="item.plan_department_id">{{item.plan_department ? item.plan_department.name : item.plan_department_id}}</el-checkbox>
            </el-checkbox-group>
          </Card>

          <Card style="margin-top: 20px;">
            <div class="content">
              <div class="item">
                <p class="item__title">年初预算合计金额（元）</p>
                <div class="item__value">{{moneyFormatter(totalMoneyTotal1)}}</div>
              </div>
              <div class="item">
                <p class="item__title">调整后预算合计金额（元）</p>
                <div class="item__value">{{moneyFormatter(totalMoneyTotal2)}}</div>
              </div>
              <div class="item">
                <p class="item__title">已使用（元）</p>
                <div class="item__value">{{moneyFormatter(totalUseMoneyTotal)}}</div>
              </div>
              <div class="item">
                <p class="item__title">执行情况</p>
                <el-progress class="item__value" text-inside :stroke-width="20" :percentage="totalPercent"></el-progress>
              </div>
            </div>
          </Card>
        </template>
        <template v-else>
          <Card>
            <el-checkbox :indeterminate="isIndeterminate2"
                         v-model="checkAll2"
                         @change="e => {
                         typeSelect = e ? types.map(i => (i.id)) : [];
                         isIndeterminate = false;
                       }">全选</el-checkbox>
            <el-checkbox-group v-model="typeSelect"
                               size="small"
                               @change="e => {
                               let count = e.length;
                               checkAll2 = count === types.length;
                               isIndeterminate2 = count > 0 && count < types.length;
                             }">
              <el-checkbox v-for="item in types" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </Card>

          <Card style="margin-top: 20px;">
            <div class="content">
              <div class="item">
                <p class="item__title">年初预算合计金额（元）</p>
                <div class="item__value">{{moneyFormatter(totalMoneyTotal1Type)}}</div>
              </div>
              <div class="item">
                <p class="item__title">调整后预算合计金额（元）</p>
                <div class="item__value">{{moneyFormatter(totalMoneyTotal2Type)}}</div>
              </div>
              <div class="item">
                <p class="item__title">已使用（元）</p>
                <div class="item__value">{{moneyFormatter(totalUseMoneyTotalType)}}</div>
              </div>
              <div class="item">
                <p class="item__title">执行情况</p>
                <el-progress class="item__value" text-inside :stroke-width="20" :percentage="totalPercent"></el-progress>
              </div>
            </div>
          </Card>
        </template>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { moneyFormatter } from "@/utils"
import { typeCarry } from "@/api/dashboard/notice"
export default {
  props: {
    departments: Array,
    year: [Number,String]
  },
  data() {
    return {
      type: 1,//1科室2类型
      drawer: false,
      isIndeterminate: false,
      checkAll: false,

      departmentSelect: [],


      isIndeterminate2: false,
      checkAll2: false,
      types: [],
      typeSelect: [],
    }
  },
  methods: {
    moneyFormatter,
    show () {
      this.drawer = true
    },
    hide () {
      this.drawer = false
    },
    setType (type) {
      this.type = type
    }
  },
  computed: {
    selectedDepartments () {
      return this.departments.filter(i => this.departmentSelect.find(j => j === i.plan_department_id))
    },
    totalMoneyTotal1 () {
     return this.selectedDepartments.reduce((pre,cur)=>(pre+Number(cur.money_total_1||0)),0) || 0
    },
    totalMoneyTotal2 () {
      return this.selectedDepartments.reduce((pre,cur)=>(pre+Number(cur.money_total_2||0)),0) || 0
    },
    totalUseMoneyTotal () {
      return this.selectedDepartments.reduce((pre,cur)=>(pre+Number(cur.use_money_total||0)),0) || 0
    },
    totalPercent () {
      if (this.type === 1) {
        return (Number(this.totalMoneyTotal2 !== 0) ? (Math.round(Number(this.totalUseMoneyTotal) / Number(this.totalMoneyTotal2) * 10000)/100) : (Math.round(Number(this.totalUseMoneyTotal) / Number(this.totalMoneyTotal1) * 10000)/100)) || 0
      } else {
        return (Number(this.totalMoneyTotal2Type !== 0) ? (Math.round(Number(this.totalUseMoneyTotalType) / Number(this.totalMoneyTotal2Type) * 10000)/100) : (Math.round(Number(this.totalUseMoneyTotalType) / Number(this.totalMoneyTotal1Type) * 10000)/100)) || 0
      }
    },

    selectedTypes () {
      return this.types.filter(i => this.typeSelect.find(j => j === i.id))
    },
    totalMoneyTotal1Type () {
      return this.selectedTypes.reduce((pre,cur)=>(pre+Number(cur.money_total_1||0)),0) || 0
    },
    totalMoneyTotal2Type () {
      return this.selectedTypes.reduce((pre,cur)=>(pre+Number(cur.money_total_2||0)),0) || 0
    },
    totalUseMoneyTotalType () {
      return this.selectedTypes.reduce((pre,cur)=>(pre+Number(cur.use_money_total||0)),0) || 0
    },
  },
  watch: {
    year: {
      handler:function(val) {
        typeCarry({
          year: val
        }).then(res => {
          this.types = res
          console.log(res)
        })
      },
      immediate: true
    }
  }
}
</script>

<style scoped lang="scss">
$color: linear-gradient(to top left, #ff6641, #ec3634),
linear-gradient(to top left, #4bfbb2, #49f2ac),
linear-gradient(to top left, #efd458, #ba840a),
linear-gradient(to top left, #05e6ff, #0069fe),
linear-gradient(to top left, #a5ffff, #8fccd9),
linear-gradient(to top left, #fca7ff, #7a519a),
linear-gradient(to top left, #a4e829, #06ac2e);

@for $index from 1 through length($color) {
  .card#{$index} {
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: nth($color, $index);
    grid-area: card#{$index};
    border-radius: 4px;
    filter: drop-shadow(0 2px 8px #0004);

    padding: 20px;

    .item__title {
      font-weight: 600;
      text-align: center;

      padding-bottom: 20px;
      position: relative;

      &::after {
        content: '';
        height: 2px;
        background: linear-gradient(to right,#fff 40%,#0000);

        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
      }
    }
    .item__value {
      text-align: center;
      flex: 1;
      padding-top: 20px;
    }
  }
}
.content {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-gap: 20px;

  padding: 20px 0;
  .item__title {
    text-align: center;
  }
  .item__value {
    font-weight: 600;
    font-size: 17px;
    text-align: center;

    padding-top: 20px;
  }
}

::v-deep .el-checkbox {
  display: block;
  margin-bottom: 6px;
}
::v-deep .el-checkbox-group {
  max-height: 300px;
  overflow-y: scroll;

  margin-left: 20px;
}
</style>