diantou/src_custom/spicdecisionsupportcenter/components/iam-audit-dsc-bottom-div.vue

<template>
  <div :class="$style.mainDiv">
    <div :class="$style.title">
      <span v-html="title"></span>
      <div :class="$style.year">
        <a-date-picker
          v-model="planYear"
          :class="$style.yearSelect"
          allow-clear
          mode="year"
          picker="YYYY"
          format="YYYY"
          :input-read-only="true"
          :open="yearOpen"
          placeholder="选择年份"
          @panelChange="panelChange"
          @openChange="openChange"
        />
      </div>
    </div>
    <a-row>
      <a-col :span="24">
        <div :class="[$style.pietitle]">
          <sd-echart
            ref="echartss"
            :options="options || leftpie"
            autoresize
            :class="$style.onepieClass"/></div
      ></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: {
    years: {
      type: [String, Number],
      default: null,
    },
    options: {
      type: Object,
      default: () => null,
    },
    /**
     * 标题
     *
     * */
    title: {
      type: String,
      default: null,
    },
    /**
     * 统计的组织ID
     */
    unidId: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      planYear: undefined,
      yearOpen: false,
      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
      }
    },
  },
  watch: {
    years: {
      handler: function(oldVal, newVal) {
        this.planYear = this.years
        console.log(this.years, 'newVal---')
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    // 获取项目总览
    // this.planYear = new Date().getFullYear().toString()
    // this.getData()
  },
  mounted() {
    this.$nextTick(() => {
      const chart = this.$refs.echartss?.chart
      if (chart) {
        chart.on('click', (e) => {
          this.$emit('echartClick', e)
        })
        chart.on('legendselectchanged', (params) => {
          const isSelected = params.selected[params.name]

          this.$emit('changeLegend', params)
        })
      }
    })
  },
  methods: {
    /**
     * 打开或关闭年度选择
     */
    openChange(open) {
      this.yearOpen = open
    },
    /**
     * 年份选择时，关闭弹窗
     */
    panelChange(value) {
      console.log('关闭年份选择器-------', value)
      this.planYear = value.format('YYYY')
      this.yearOpen = !this.yearOpen
      this.$emit('getYear', this.planYear)
    },
    getData() {
      // 获取项目总览
      const params = {
        unitId: this.selectUnidId,
        planYear: this.selectYear,
      }
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.main-div {
  height: 380px;
  margin: 0 10px;
  background: #fff;
  border-radius: 10px;
  .title {
    font-size: 18px;
    padding: 25px 0 10px 25px;
    margin: 0;
    font-weight: 700;
    // border-bottom: 1px solid #e8e8e8;
    position: relative;
    &::before {
      position: absolute;
      left: 0;
      bottom: 0;
      content: '';
      width: 8px;
      height: 70%;
      background-color: #e73030;
    }
    .year {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      margin-right: 15px;
      .year-select {
        display: block;
        width: 120px;
        margin-top: 15px;
        :global(.ant-calendar-picker-input) {
          cursor: pointer;
        }
      }
    }
  }
}
.onepie-class {
  width: 100%;
  height: 330px;
}
.pietitle {
  height: 50px;
  font-weight: bold;
  line-height: 75px;
}
</style>