diantou/src_product/iam/audit/dsc/components/iam-audit-dsc-center-div.vue

<template>
  <a-row>
    <a-col :span="12">
      <a-tabs :default-active-key="activeKey" :class="$style.tabs">
        <a-tab-pane key="1" tab="项目总览">
          <div :class="$style.mainDiv">
            <iam-audit-onepie
              :key="key"
              :unid-id="selectUnidId"
              :plan-year="selectYear"
            ></iam-audit-onepie>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="项目趋势分析" force-render>
          <div :class="$style.mainDiv">
            <iam-audit-twopie
              :key="key"
              :unid-id="selectUnidId"
              :plan-year="selectYear"
            ></iam-audit-twopie>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-col>
    <a-col :span="12">
      <a-tabs :default-active-key="activeKey" :class="$style.tabs">
        <a-tab-pane key="1" tab="审计发现统计">
          <div :class="$style.mainDiv">
            <iam-audit-threepie
              :key="key"
              :unid-id="selectUnidId"
              :plan-year="selectYear"
            ></iam-audit-threepie>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="问题涉及金额" force-render>
          <div :class="$style.mainDiv">
            <iam-audit-fourpie
              :key="key"
              :unid-id="selectUnidId"
              :plan-year="selectYear"
            ></iam-audit-fourpie>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-col>
  </a-row>
</template>

<script>
import components from './_import-components/iam-audit-dsc-center-div-import'
export default {
  name: 'IamAuditDscCenterDiv',
  metaInfo: {
    title: 'IamAuditDscCenterDiv',
  },
  components,
  props: {
    /**
     * 统计的组织ID
     */
    unidId: {
      type: Array,
      default: () => {
        return []
      },
    },
    /**
     * 统计的年份
     */
    planYear: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      activeKey: '1',
      key: 0,
    }
  },
  computed: {
    // 因为props传值不会自动更新，使用计算值
    selectYear() {
      return this.planYear
    },
    // 因为props传值不会自动更新，使用计算值
    selectUnidId() {
      return this.unidId
    },
  },
  watch: {
    selectYear() {
      this.key++
    },
    selectUnidId() {
      this.key++
    },
  },
  created() {},
  methods: {},
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.tabs {
  padding: 10px 25px;
  margin: 0 10px;
  background: #fff;
  border-radius: 10px;
}
.main-div {
  height: 320px;
}
.empty {
  padding-top: 80px;
  margin: 0;
}
</style>