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

<template>
  <span>
    <a-empty
      v-show="!hasData | !selectYear | !selectUnidId"
      :class="$style.empty"
      :description="description"
    ></a-empty>
    <sd-echart
      v-show="hasData && selectYear && selectUnidId"
      :class="$style.onepieClass"
      :options="chartData"
      autoresize
    />
  </span>
</template>

<script>
import 'echarts/lib/chart/line'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import iamAuditDscService from '../iam-audit-dsc-service'
import components from './_import-components/iam-audit-twopie-import'

export default {
  name: 'IamAuditTwopie',
  metaInfo: {
    title: 'IamAuditOnepie',
  },
  components,
  props: {
    /**
     * 统计的组织ID
     */
    unidId: {
      type: Array,
      default: () => {
        return []
      },
    },
    /**
     * 统计的年份
     */
    planYear: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      hasData: false, // 是否检查出数据
      chartData: {
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            let res = params[0].name
            for (var i = 0, l = params.length; i < l; i++) {
              const seriesId = JSON.parse(params[i].seriesId)
              res +=
                '<br/>' +
                params[i].marker +
                seriesId.NAME +
                ' ' +
                seriesId.TYPE_CN +
                ' : ' +
                params[i].value
            }
            return res
          },
        },
        legend: {
          type: 'scroll',
          data: [],
          bottom: 0,
        },
        grid: {
          left: 20,
          right: 20,
          bottom: 30,
          top: 30,
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: 'value',
        },
        series: [],
      },
    }
  },
  computed: {
    // 因为props传值不会自动更新，使用计算值
    selectYear() {
      return this.planYear
    },
    // 因为props传值不会自动更新，使用计算值
    selectUnidId() {
      if (this.unidId.length > 0) {
        return this.unidId[0].name
      } else {
        return null
      }
    },
    description() {
      if (!this.selectYear | !this.selectUnidId) {
        return '未选择年份以及审计机构'
      } else {
        return '暂无数据'
      }
    },
  },
  created() {
    // 获取项目总览
    this.getData()
  },
  methods: {
    getData() {
      // 如果没有选时间或组织机构，则直接返回
      if (!this.selectYear | !this.selectUnidId) {
        return
      }
      // 获取项目总览
      const columns = ['0_NAME', '0_TYPE_CN']
      for (let i = parseFloat(this.selectYear) - 2; i < parseFloat(this.selectYear) + 3; i++) {
        columns.push(i + '')
      }
      const params = {
        columns: columns.join(','),
        maxResults: 9999,
        startPosition: 0,
        expressions: [],
        dateStart: parseFloat(this.selectYear) - 2 + '',
        dateEnd: parseFloat(this.selectYear) + 2 + '',
        unitNames: "'" + this.selectUnidId + "'",
        pageIndex: 0,
        pageSize: 9999,
        unitIds: "'" + this.unidId[0].id + "'",
      }
      iamAuditDscService.getProjectTrends(params).then((res) => {
        if (res.data.data.length === 0) {
          return
        }
        this.hasData = true
        const chartData = {
          legend: [],
          xAxis: [],
          series: [],
        }
        let startYear = parseFloat(this.selectYear) - 2
        const endYear = parseFloat(this.selectYear) + 2
        while (startYear <= endYear) {
          chartData.xAxis.push(startYear.toString())
          startYear++
        }
        res.data.data.forEach((item, index) => {
          chartData.legend.push(item['0_TYPE_CN'])
          const seriesData = chartData.xAxis.map((year) => {
            return item[year] ? item[year] : 0
          })
          chartData.series.push({
            name: item['0_TYPE_CN'],
            type: 'line',
            stack: index,
            data: seriesData,
            id: JSON.stringify({
              NAME: item['0_NAME'],
              TYPE_CN: item['0_TYPE_CN'],
              TYPE: item['0_TYPE'],
            }),
          })
        })

        this.chartData.legend.data = chartData.legend
        this.chartData.xAxis.data = chartData.xAxis
        this.chartData.series = chartData.series
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.onepie-class {
  width: 100%;
  height: 300px;
}
.empty {
  padding-top: 80px;
  margin: 0;
}
</style>