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

<template>
  <div :class="$style.mainDiv">
    <div :class="$style.title">问题整改情况</div>
    <a-row>
      <a-col :span="5">
        <div :class="[$style.pietitle]">
          <sd-echart :options="leftpie" autoresize :class="$style.onepieClass"/></div
      ></a-col>
      <a-col :span="5">
        <div :class="[$style.pietitle]">
          <sd-echart :options="rightpie" autoresize :class="$style.onepieClass" /> </div
      ></a-col>
      <a-col :span="14">
        <!-- <div style="padding-left: 200px" :class="[$style.pietitle]">需要整改的问题</div> -->
        <sd-echart :options="onepie" autoresize :class="$style.onepieClass" />
      </a-col>
    </a-row>
  </div>
</template>

<script>
import 'echarts/lib/component/title'
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-dsc-bottom-div-import'

export default {
  name: 'IamAuditDscBottomDiv',
  metaInfo: {
    title: 'IamAuditDscBottomDiv',
  },
  components: {
    ...components,
  },
  props: {
    /**
     * 统计的组织ID
     */
    unidId: {
      type: Array,
      default: () => {
        return []
      },
    },
    /**
     * 统计的年份
     */
    planYear: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      leftactiveKey: '1',
      rightactiveKey: '1',
      total: 0,
      leftpie: {
        legend: {
          show: false,
        },
        color: ['#fff', '#8675ff', '#dce0fa'],
        series: [
          {
            left: 100,
            top: 65,
            type: 'pie',
            radius: [1111, 1111],
            label: {
              show: true,
              position: 'center',
              fontSize: 30,
              fontWeight: '600',
              color: '#8675ff',
            },
            emphasis: {
              disabled: true,
              scale: true,
              scaleSize: 0,
            },
            tooltip: {
              show: false,
            },
            labelLine: {
              show: true,
            },
            data: [],
          },
          {
            top: 65,
            left: 100,
            type: 'pie',
            radius: [73, 90],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            legendHoverLink: false,
            emphasis: {
              scale: true,
              scaleSize: 0,
            },
            labelLine: {
              show: false,
            },
            data: [],
          },
          {
            type: 'pie',
            top: -270,
            left: 100,
            radius: [1111, 1111],
            label: {
              show: true,
              position: 'center',
              fontSize: 15,
              fontWeight: '600',
              color: 'rgba(0, 0, 0, 0.65)',
            },
            emphasis: {
              disabled: true,
              scale: true,
              scaleSize: 0,
            },
            tooltip: {
              show: false,
            },
            labelLine: {
              show: true,
            },
            data: [{ value: 0, name: '整改完成率' }],
          },
        ],
      },
      rightpie: {
        legend: {
          show: false,
        },

        color: ['#fff', '#54c5eb', '#dce0fa'],
        series: [
          {
            top: 65,
            type: 'pie',
            radius: [1111, 1111],
            label: {
              show: true,
              position: 'center',
              fontSize: 30,
              fontWeight: '600',
              color: '#54c5eb',
            },
            emphasis: {
              disabled: true,
              scale: true,
              scaleSize: 0,
            },
            tooltip: {
              show: false,
            },
            labelLine: {
              show: true,
            },
            data: [],
          },
          {
            top: 65,
            type: 'pie',
            radius: [73, 90],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            legendHoverLink: false,
            emphasis: {
              scale: true,
              scaleSize: 0,
            },
            labelLine: {
              show: false,
            },
            data: [],
          },
          {
            type: 'pie',
            top: -270,
            radius: [1111, 1111],
            label: {
              show: true,
              position: 'center',
              fontSize: 15,
              fontWeight: '600',
              color: 'rgba(0, 0, 0, 0.65)',
            },
            emphasis: {
              disabled: true,
              scale: true,
              scaleSize: 0,
            },
            tooltip: {
              show: false,
            },
            labelLine: {
              show: true,
            },
            data: [{ value: 0, name: '到期整改率' }],
          },
        ],
      },
      onepie: {
        color: ['#000', '#bb7ec4', '#ffb74a', '#ff4a55', '#54c5eb', '#dce0fa'],
        textStyle: {
          color: '#8a8a8a',
          fontSize: 13,
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          right: 170,
          icon: 'circle',
          top: 90,
          textStyle: {
            width: 1000,
            backgroundColor: {
              image: require('./backgroundimg.png'),
            },
            color: '#8a8a8a',
            lineHeight: 25,
            padding: [0, 20, 0, 0],
          },
          data: [],
        },
        series: [
          {
            type: 'pie',
            top: 68,
            left: -500,
            radius: [1111, 1111],
            label: {
              show: true,
              position: 'center',
              fontSize: 20,
              fontWeight: 'bold',
            },
            emphasis: {
              disabled: true,
              scale: true,
              scaleSize: 0,
            },
            tooltip: {
              show: false,
            },
            labelLine: {
              show: true,
            },
            data: [],
          },
          {
            type: 'pie',
            left: -500,
            top: 70,
            radius: [60, 90],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
            label: {
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              padding: [0, -65],
              formatter: (params) => {
                return (
                  params.data.name.split('\u2003')[0] +
                  ' ' +
                  Math.round(this.total * (params.percent / 100)) +
                  '\n'
                )
              },
            },
            labelLine: {
              length2: '80px',
            },
          },
          {
            type: 'pie',
            top: -270,
            left: -500,
            radius: [1111, 1111],
            label: {
              show: true,
              position: 'center',
              fontSize: 15,
              fontWeight: '600',
              color: 'rgba(0, 0, 0, 0.65)',
            },
            emphasis: {
              disabled: true,
              scale: true,
              scaleSize: 0,
            },
            tooltip: {
              show: false,
            },
            labelLine: {
              show: true,
            },
            data: [{ value: 0, name: '需要整改的问题' }],
          },
        ],
      },
    }
  },
  computed: {
    // 因为props传值不会自动更新，使用计算值
    selectYear() {
      return this.planYear
    },
    // 因为props传值不会自动更新，使用计算值
    selectUnidId() {
      if (this.unidId.length > 0) {
        return this.unidId[0].id
      } else {
        return null
      }
    },
  },
  created() {
    // 获取项目总览
    this.getData()
  },
  methods: {
    getData() {
      // 获取项目总览
      const params = {
        unitId: this.selectUnidId,
        planYear: this.selectYear,
      }
      iamAuditDscService.getQuestionRectResult(params).then((res) => {
        // 设置整改完成率
        this.leftpie.series[0].data.push({ value: 0, name: res.data.COMPLATE_PERCENT })
        this.leftpie.series[1].data.push({
          value: parseFloat(res.data.COMPLATE_PERCENT.replace('%', '')),
        })
        this.leftpie.series[1].data.push({
          value: 100 - parseFloat(res.data.COMPLATE_PERCENT.replace('%', '')),
        })
        // 设置到期整改率
        this.rightpie.series[0].data.push({ value: 0, name: res.data.BECOME_PERCENT })
        this.rightpie.series[1].data.push({
          value: parseFloat(res.data.BECOME_PERCENT.replace('%', '')),
        })
        this.rightpie.series[1].data.push({
          value: 100 - parseFloat(res.data.BECOME_PERCENT.replace('%', '')),
        })
        // 设置总条数
        this.onepie.series[0].data.push({ value: 0, name: res.data.TOTAL + '条' })
        this.total = res.data.TOTAL
        this.onepie.legend.data.push({
          name:
            '已整改\u2003\u2003\u2003\u2003\u2003' +
            res.data.DONE_PERCENT +
            (res.data.DONE_PERCENT.length === 2
              ? '\u2003\u2003\u2003\u2003\u2002'
              : '\u2003\u2003\u2003\u2003') +
            res.data.DONE_RATE +
            '万元',
        })
        // { value: 1048, name: 'Search Engine' }
        // 已整改
        this.onepie.series[1].data.push({
          value: parseFloat(res.data.DONE_PERCENT.replace('%', '')),
          name:
            '已整改\u2003\u2003\u2003\u2003\u2003' +
            res.data.DONE_PERCENT +
            (res.data.DONE_PERCENT.length === 2
              ? '\u2003\u2003\u2003\u2003\u2002'
              : '\u2003\u2003\u2003\u2003') +
            res.data.DONE_RATE +
            '万元',
          tooltip: {
            formatter: () => {
              return res.data.DONE_PERCENT
            },
          },
        })
        // 整改中
        this.onepie.legend.data.push({
          name:
            '整改中\u2003\u2003\u2003\u2003\u2003' +
            res.data.DOING_PERCENT +
            (res.data.DOING_PERCENT.length === 2
              ? '\u2003\u2003\u2003\u2003\u2002'
              : '\u2003\u2003\u2003\u2003') +
            res.data.DOING_RATE +
            '万元',
        })
        this.onepie.series[1].data.push({
          value: parseFloat(res.data.DOING_PERCENT.replace('%', '')),
          name:
            '整改中\u2003\u2003\u2003\u2003\u2003' +
            res.data.DOING_PERCENT +
            (res.data.DOING_PERCENT.length === 2
              ? '\u2003\u2003\u2003\u2003\u2002'
              : '\u2003\u2003\u2003\u2003') +
            res.data.DOING_RATE +
            '万元',
          tooltip: {
            formatter: () => {
              return res.data.DOING_PERCENT
            },
          },
        })
        // 超期未整改
        this.onepie.legend.data.push({
          name:
            '超期未整改\u2003\u2003\u2003' +
            res.data.EXPIRE_PERCENT +
            (res.data.EXPIRE_PERCENT.length === 2
              ? '\u2003\u2003\u2003\u2003\u2002'
              : '\u2003\u2003\u2003\u2003') +
            res.data.EXPIRE_RATE +
            '万元',
        })
        this.onepie.series[1].data.push({
          value: parseFloat(res.data.EXPIRE_PERCENT.replace('%', '')),
          name:
            '超期未整改\u2003\u2003\u2003' +
            res.data.EXPIRE_PERCENT +
            (res.data.EXPIRE_PERCENT.length === 2
              ? '\u2003\u2003\u2003\u2003\u2002'
              : '\u2003\u2003\u2003\u2003') +
            res.data.EXPIRE_RATE +
            '万元',
          tooltip: {
            formatter: () => {
              return res.data.EXPIRE_PERCENT
            },
          },
          label: {
            padding: [0, -90],
          },
          labelLine: {
            length2: 115,
          },
        })
        // 风险接受
        this.onepie.legend.data.push({
          name:
            '风险接受\u2003\u2003\u2003\u2003' +
            res.data.RISK_PERCENT +
            (res.data.RISK_PERCENT.length === 2
              ? '\u2003\u2003\u2003\u2003\u2002'
              : '\u2003\u2003\u2003\u2003') +
            res.data.RISK_RATE +
            '万元',
        })
        this.onepie.series[1].data.push({
          value: parseFloat(res.data.RISK_PERCENT.replace('%', '')),
          name:
            '风险接受\u2003\u2003\u2003\u2003' +
            res.data.RISK_PERCENT +
            (res.data.RISK_PERCENT.length === 2
              ? '\u2003\u2003\u2003\u2003\u2002'
              : '\u2003\u2003\u2003\u2003') +
            res.data.RISK_RATE +
            '万元',
          tooltip: {
            formatter: () => {
              return res.data.RISK_PERCENT
            },
          },
          label: {
            padding: [0, -80],
          },
          labelLine: {
            length2: 105,
          },
        })
        // 未整改
        this.onepie.legend.data.push({
          name:
            '未整改\u2003\u2003\u2003\u2003\u2003' +
            res.data.TODO_PERCENT +
            (res.data.TODO_PERCENT.length === 2
              ? '\u2003\u2003\u2003\u2003\u2002'
              : '\u2003\u2003\u2003\u2003') +
            res.data.TODO_RATE +
            '万元',
        })
        this.onepie.series[1].data.push({
          value: parseFloat(res.data.TODO_PERCENT.replace('%', '')),
          name:
            '未整改\u2003\u2003\u2003\u2003\u2003' +
            res.data.TODO_PERCENT +
            (res.data.TODO_PERCENT.length === 2
              ? '\u2003\u2003\u2003\u2003\u2002'
              : '\u2003\u2003\u2003\u2003') +
            res.data.TODO_RATE +
            '万元',
          tooltip: {
            formatter: () => {
              return res.data.TODO_PERCENT
            },
          },
        })
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.main-div {
  height: 380px;
  margin: 0 10px;
  background: #fff;
  border-radius: 10px;
  .title {
    padding: 25px 0 10px 0;
    margin: 0 25px;
    font-weight: 600;
    border-bottom: 1px solid #e8e8e8;
  }
}
.onepie-class {
  width: 100%;
  height: 330px;
}
.pietitle {
  height: 50px;
  font-weight: bold;
  line-height: 75px;
}
</style>