zy-largeScreen-3/src/components/PriceProportion.vue

<template>
  <div class="points-ranking__wrap">
    <div class="points-ranking" ref="CategoryProportion"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { post, timerCommon } from './../http/http'
export default {
  name: 'CategoryProportion',
  inject: ['parentDutyId', 'hosId', 'dutyId'],
  data () {
    return {
      total: 0,
      sign: 'lastWeek',
      timer: null,
      myChart: null,
      gradeRankingList: []
    }
  },
  methods: {
    // 画图
    draw () {
      this.myChart = echarts.init(this.$refs.CategoryProportion)
      const option = {
        color: ['#006FFF', '#00D5EA'], // 颜色数组
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: 16,
          left: 8,
          textStyle: {
            color: '#fff', // 全局文字颜色
            fontSize: 14
          }
        },
        grid: {
          left: 0,
          top: 0,
          bottom: 0,
          right: 0
        },
        graphic: [{
          type: 'text',
          left: 'center',
          top: '50%',
          style: {
            text: `总费用\n${this.total}元`, // 换行显示
            textAlign: 'center',
            textVerticalAlign: 'middle',
            fill: '#949494', // 文字颜色
            fontSize: 20
          }
        }],
        series: [
          {
            name: '',
            type: 'pie',
            center: ['50%', '58%'],
            radius: ['35%', '50%'],
            avoidLabelOverlap: true,
            label: {
              show: true,
              color: 'rgba(255, 255, 255, 0.85)',
              formatter: (params) => {
                return `${params.name}\n${params.value}元`
              },
              textStyle: {
                lineHeight: 14
              }
            },
            labelLine: {
              show: true,
              lineStyle: {
                color: '#265A8A'
              }
            },
            data: this.gradeRankingList
          }
        ]
      }
      this.myChart.setOption(option)
    },
    // 获取数据
    async getData () {
      this.$emit('signEmit', this.sign)
      let startTime
      let endTime

      if (this.sign === 'lastWeek') {
        startTime = this.$moment().subtract(1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
        endTime = this.$moment().subtract(1, 'week').endOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
      } else if (this.sign === 'lastMonth') {
        startTime = this.$moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
        endTime = this.$moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
      }
      const result = await post(
        '/itsm/report/index',
        {
          parentDutyId: this.parentDutyId,
          hosId: this.hosId,
          dutyId: this.dutyId,
          startDate: startTime,
          endDate: endTime,
          type: 'itsmPriceProportion'
        }
      )
      result.data = result.data || []
      if (result.data.length) {
        this.gradeRankingList = [
          { name: '总工时', value: result.data[0].work_price || 0, percent: result.data[0].workPercent || '0%' },
          { name: '总耗材', value: result.data[0].sum_price || 0, percent: result.data[0].sumPercent || '0%' }
        ]
        this.total = this.gradeRankingList.reduce((pre, cur) => pre + cur.value, 0)
      } else {
        this.gradeRankingList = []
        this.total = 0
      }
      this.draw()
      this.polling()
    },
    // 轮询请求
    polling () {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        if (this.sign === 'lastWeek') {
          this.sign = 'lastMonth'
        } else if (this.sign === 'lastMonth') {
          this.sign = 'lastWeek'
        }
        this.getData()
      }, timerCommon)
    }
  },
  mounted () {
    this.getData()
  },
  beforeDestroy () {
    clearTimeout(this.timer)
  }
}
</script>

<style lang="less" scoped>
.points-ranking__wrap {
  height: 3.7rem;
  overflow: hidden;
  position: relative;
  .points-ranking {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>