diantou/src_custom/spicdecisionsupportcenter/components/spic-audit-dsc-top-div.vue

<template>
  <a-row>
    <a-col
      v-for="(one, index) in ['sjdws', 'fgl', 'sjwts', 'yzgwt', 'zgzwt', 'wtje']"
      :key="one"
      :span="4"
      :class="one + '-col'"
    >
      <div :class="$style.mainDiv" @click="fnOpenModel(one)">
        <div :class="$style.leftDiv">
          <span :class="$style.cardtitle">
            <span :class="$style.number">{{ number[index] }}</span>
            <br />
            <span :class="$style.title">{{ title[index] }}</span>
          </span>
        </div>
        <div :class="$style.rightDiv">
          <!-- <a-avatar :style="{ backgroundColor: bgcolor[index] }" :class="$style.avatar" :size="65">
            <template v-slot:icon>
              <sd-icon
                :style="{
                  marginLeft: index === 0 ? '5px' : '0px',
                  marginTop: index === 3 ? '20px' : '0px',
                }"
                :type="icon[index]"
                theme="fill"
              >
              </sd-icon>
            </template>
          </a-avatar> -->
        </div>
      </div>
    </a-col>
  </a-row>
</template>

<script>
import axios from '@/common/services/axios-instance'
import iamAuditDscService from './iam-audit-dsc-service'
import components from './_import-components/spic-audit-dsc-top-div-import'

export default {
  name: 'SpicAuditDscTopDiv',
  metaInfo: {
    title: 'SpicAuditDscTopDiv',
  },
  components,
  props: {
    /**
     * 统计的组织ID
     */
    unidId: {
      type: Array,
      default: () => {
        return []
      },
    },
    /**
     * 统计的年份
     */
    planYear: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      icon: [
        'sd-audit-dsc-user-icon',
        'sd-audit-dsc-project-all-icon',
        'sd-audit-dsc-project-start-icon',
        'sd-audit-dsc-gzdg-icon',
        'sd-audit-dsc-find-icon',
        'sd-audit-dsc-rectify-icon',
      ],
      title: [
        '本年度审计项目数',
        '近3年度审计覆盖率',
        '审计问题发现数量',
        '到期整改的问题数量',
        '整改中问题数量',
        '问题涉及金额（万元）',
      ],
      bgcolor: ['#bb7ec4', '#ffb648', '#ff4a55', '#00a389', '#54c5eb', '#bb7ec4'],
      number: [],
    }
  },
  computed: {
    // 因为props传值不会自动更新，使用计算值
    selectYear() {
      return this.planYear
    },
    // 因为props传值不会自动更新，使用计算值
    selectUnidId() {
      if (this.unidId.length > 0) {
        return this.unidId[0].id
      } else {
        return null
      }
    },
    // 因为props传值不会自动更新，使用计算值
    selectUnidText() {
      if (this.unidId.length > 0) {
        return this.unidId[0].name
      } else {
        return null
      }
    },
  },
  watch: {
    // 年份和组织变化时，重新加载数据
    selectYear() {
      this.getData()
    },
    selectUnidId() {
      this.getData()
    },
  },
  created() {
    // 创建时获取内容
    this.getData()
  },
  methods: {
    /**
     * 打开对应的模块
     */
    fnOpenModel(type) {
      debugger
      // 审计单位数量
      if (type === 'sjdws') {
        window.open(
          '#/spic-audit-dsc-unit-list?params={"unitNames":"\'' +
            this.selectUnidText +
            '\'","planYear":"' +
            this.selectYear +
            '","type":"unit","unitId":"' +
            this.selectUnidId +
            '"}&type=auditedunitlist'
        )
      }
      // 近三年审计单位覆盖率
      if (type === 'fgl') {
        window.open(
          '#/spic-audit-dsc-three-coverage-list?params={"unitNames":"\'' +
            this.selectUnidText +
            '\'","planYear":"' +
            this.selectYear +
            '","type":"fourunit","isTwoUnit":"1","unitId":"' +
            this.selectUnidId +
            '"}&type=fourYearCoverage' +
            '&year=' +
            this.selectYear
        )
      }
      // 审计发现问题数
      if (type === 'sjwts') {
        const param = {}
        param.unitId = this.selectUnidId
        param.planYear = this.selectYear
        window.open(
          '#/spic-audit-dsc-find-list?params=' +
            encodeURIComponent(JSON.stringify(param)) +
            '&type=findqusetionlist'
        )
      }
      // 已整改问题数
      if (type === 'yzgwt') {
        window.open(
          '#/spic-audit-dsc-rectify-list?params={"unitNames":"\'' +
            this.selectUnidText +
            '\'","planYear":"' +
            this.selectYear +
            '","type":"rect","unitId":"' +
            this.selectUnidId +
            '"}&type=rectlist'
        )
      }
      // 已整改问题数
      if (type === 'zgzwt') {
        window.open(
          '#/spic-audit-dsc-rectify-list?params={"unitNames":"\'' +
            this.selectUnidText +
            '\'","planYear":"' +
            this.selectYear +
            '","type":"recting","unitId":"' +
            this.selectUnidId +
            '"}&type=rectinglist'
        )
      }
      // 已整改问题数量
      if (type === 'wtje') {
        window.open(
          '#/spic-audit-dsc-find-list?params={"unitNames":"\'' +
            this.selectUnidText +
            '\'","planYear":"' +
            this.selectYear +
            '","unitId":"' +
            this.selectUnidId +
            '"}&type=amountlist'
        )
      }
    },
    /**
     * 初始化数据
     */
    getData() {
      this.number = []
      // 获取整体数量
      const params = {
        unitId: this.selectUnidId,
        planYear: this.selectYear,
        type: 1,
      }
      if (this.selectUnidId) {
        iamAuditDscService.getAllNumResult(params).then((res) => {
          // 按顺序将内容写入
          const data = res.data
          console.log('顶部总体数量数据', data)

          // 本年度单位审计数量
          this.number.push(data.UNIT_NUM)
          // 近4年度审计覆盖率（待定）
          this.number.push(data.PERCENT)
          // 审计问题发现数
          this.number.push(data.FIND_NUM)
          // 已整改的问题数
          this.number.push(data.RECT_NUM)
          // 整改中的问题数
          this.number.push(data.RECTING_NUM)
          // 问题涉及金额
          this.number.push(data.AMOUNT)
        })
      }
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.main-div {
  display: flex;
  height: 105px;
  margin: 0 10px;
  cursor: pointer;
  background: #fff;
  border-radius: 10px;
  .left-div {
    width: 70%;
    padding-left: 22px;
    color: #fff;
    .title {
      height: 45%;
      text-align: left;
      font-weight: 600;
      // line-height: 60px;
    }
    .number {
      text-align: center;
      height: 35%;
      font-size: 40px;
      font-weight: 600;
      line-height: 60px;
    }
    .cardtitle {
      text-align: center;
      display: inline-block;
    }
  }

  .right-div {
    width: 30%;
    .avatar {
      margin-top: 20px;
    }
  }
}
:global(yzgwt-col) {
  .main-div {
    cursor: not-allowed;
  }
}
:global(.sjdws-col) {
  :global(.main-div_spic-audit-dsc-top-div_custom) {
    background-image: url('../imagess/top-img.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .right-div {
    width: 30%;
    background-image: url('../imagess/num.png');
    background-size: 60px 60px;
    background-position: left center;
    background-repeat: no-repeat;
  }
}
:global(.fgl-col) {
  :global(.main-div_spic-audit-dsc-top-div_custom) {
    background-image: url('../imagess/top-img2.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .right-div {
    width: 30%;
    background-image: url('../imagess/num2.png');
    background-size: 60px 60px;
    background-position: left center;
    background-repeat: no-repeat;
  }
}
:global(.sjwts-col) {
  :global(.main-div_spic-audit-dsc-top-div_custom) {
    background-image: url('../imagess/top-img3.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .right-div {
    width: 30%;
    background-image: url('../imagess/num3.png');
    background-size: 60px 60px;
    background-position: left center;
    background-repeat: no-repeat;
  }
}
:global(.yzgwt-col) {
  :global(.main-div_spic-audit-dsc-top-div_custom) {
    background-image: url('../imagess/top-img4.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .right-div {
    width: 30%;
    background-image: url('../imagess/num4.png');
    background-size: 60px 60px;
    background-position: left center;
    background-repeat: no-repeat;
  }
}
:global(.zgzwt-col) {
  :global(.main-div_spic-audit-dsc-top-div_custom) {
    background-image: url('../imagess/top-img5.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .right-div {
    width: 30%;
    background-image: url('../imagess/num5.png');
    background-size: 60px 60px;
    background-position: left center;
    background-repeat: no-repeat;
  }
}
:global(.wtje-col) {
  :global(.main-div_spic-audit-dsc-top-div_custom) {
    background-image: url('../imagess/top-img6.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .right-div {
    width: 30%;
    background-image: url('../imagess/num6.png');
    background-size: 60px 60px;
    background-repeat: no-repeat;

    background-position: left center;
  }
}
</style>