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

<template>
  <div>

    <el-drawer
      size="800px"
      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">{{totalMoneyTotal1.toFixed(2)}}</div>
              </div>
              <div class="item">
                <p class="item__title">调整后预算合计金额（元）</p>
                <div class="item__value">{{totalMoneyTotal2.toFixed(2)}}</div>
              </div>
              <div class="item">
                <p class="item__title">已使用（元）</p>
                <div class="item__value">{{totalUseMoneyTotal.toFixed(2)}}</div>
              </div>
              <div class="item">
                <p class="item__title">执行情况</p>
                <el-progress class="item__value" :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">{{totalMoneyTotal1Type.toFixed(2)}}</div>
              </div>
              <div class="item">
                <p class="item__title">调整后预算合计金额（元）</p>
                <div class="item__value">{{totalMoneyTotal2Type.toFixed(2)}}</div>
              </div>
              <div class="item">
                <p class="item__title">已使用（元）</p>
                <div class="item__value">{{totalUseMoneyTotalType.toFixed(2)}}</div>
              </div>
              <div class="item">
                <p class="item__title">执行情况</p>
                <el-progress class="item__value" :percentage="totalPercent"></el-progress>
              </div>
            </div>
          </Card>
        </template>
      </div>
    </el-drawer>
  </div>
</template>

<script>
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: {
    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||0)),0) || 0
    },
    totalMoneyTotal2Type () {
      return this.selectedTypes.reduce((pre,cur)=>(pre+Number(cur.update_money||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">
.content {
  padding: 0 20px;

  .item {
    display: flex;

    padding: 10px 0;
    &__title {
      width: 200px;
      font-weight: 600;

      padding-right: 20px;
    }
    &__value {
      flex: 1;
    }

    & + & {
      margin-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>