diantou/src_custom/spicdecisionsupportcenter/components/components/iam-audit-onepie.vue

<template>
  <sd-echart :options="onepie" autoresize :class="$style.onepieClass" />
</template>

<script>
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import iamAuditDscService from '../iam-audit-dsc-service'
import components from './_import-components/iam-audit-onepie-import'

export default {
  name: 'IamAuditOnepie',
  metaInfo: {
    title: 'IamAuditOnepie',
  },
  components,
  props: {
    /**
     * 统计的组织ID
     */
    unidId: {
      type: Array,
      default: () => {
        return []
      },
    },
    /**
     * 统计的年份
     */
    planYear: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      leftactiveKey: '1',
      rightactiveKey: '1',
      onepie: {
        color: ['#bb7ec4', '#ffb74a', '#ff4a55', '#54c5eb', '#8675ff', '#dce0fa'],
        textStyle: {
          color: '#8a8a8a',
          fontSize: 13,
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          right: '150px',
          icon: 'circle',
          top: 50,
          textStyle: {
            color: '#8a8a8a',
            lineHeight: 18,
          },
        },
        series: [
          {
            type: 'pie',
            left: '-300px',
            top: 15,
            radius: [60, 90],
            data: [],
            avoidLabelOverlap: true,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
            label: {
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              padding: [0, -50],
              formatter: '{b}\n',
            },
            labelLine: {
              length2: '70px',
            },
          },
        ],
      },
    }
  },
  computed: {
    // 因为props传值不会自动更新，使用计算值
    selectYear() {
      return this.planYear
    },
    // 因为props传值不会自动更新，使用计算值
    selectUnidId() {
      if (this.unidId.length > 0) {
        return this.unidId[0].id
      } else {
        return null
      }
    },
    description() {
      if (!this.selectYear | !this.selectUnidId) {
        return '未选择年份以及审计机构'
      } else {
        return '暂无数据'
      }
    },
  },
  created() {
    // 获取项目总览
    this.getData()
  },
  methods: {
    getData() {
      // 获取项目总览
      const params = {
        unitId: this.selectUnidId,
        planYear: this.selectYear,
      }
      iamAuditDscService.getOverallResult(params).then((res) => {
        // { value: 1048, name: 'Search Engine' }
        // 准备
        this.onepie.series[0].data.push({
          value: parseFloat(res.data.PREPARE_NUM),
          name: '准备 ' + res.data.PREPARE_NUM,
          tooltip: {
            formatter: () => {
              return res.data.PREPARE_PERCENT
            },
          },
        })
        // 实施
        this.onepie.series[0].data.push({
          value: parseFloat(res.data.EXEC_NUM),
          name: '实施 ' + res.data.EXEC_NUM,
          tooltip: {
            formatter: () => {
              return res.data.EXEC_PERCENT
            },
          },
        })
        // 报告
        this.onepie.series[0].data.push({
          value: parseFloat(res.data.REPORT_NUM),
          name: '报告 ' + res.data.REPORT_NUM,
          tooltip: {
            formatter: () => {
              return res.data.REPORT_PERCENT
            },
          },
        })
        // 关闭
        this.onepie.series[0].data.push({
          value: parseFloat(res.data.CLOSED_NUM),
          name: '关闭 ' + res.data.CLOSED_NUM,
          tooltip: {
            formatter: () => {
              return res.data.CLOSED_PERCENT
            },
          },
        })
        // 归档
        this.onepie.series[0].data.push({
          value: parseFloat(res.data.ARCHIVE_NUM),
          name: '归档 ' + res.data.ARCHIVE_NUM,
          tooltip: {
            formatter: () => {
              return res.data.ARCHIVE_PERCENT
            },
          },
        })
        // 未启动
        this.onepie.series[0].data.push({
          value: parseFloat(res.data.TODO_NUM),
          name: '未启动 ' + res.data.TODO_NUM,
          tooltip: {
            formatter: () => {
              return res.data.TODO_PERCENT
            },
          },
          label: {
            padding: [0, -70],
          },
        })
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.onepie-class {
  width: 100%;
  height: 320px;
}
</style>