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

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

<script>
import echarts from 'echarts'
import { post, timerCommon } from './../http/http'
export default {
  name: 'DeptPrice',
  inject: ['parentDutyId', 'hosId', 'dutyId'],
  data () {
    return {
      sign: 'lastWeek',
      timer: null,
      myChart: null,
      gradeRankingListNum: [],
      gradeRankingListName: []
    }
  },
  methods: {
    // 画图
    draw () {
      this.myChart = echarts.init(this.$refs.DeptPrice)
      var colorArray = [
        {
          top: '#6B97BD', // 第一
          bottom: '#364C5F'
        },
        {
          top: '#6B97BD', // 第二
          bottom: '#364C5F'
        },
        {
          top: '#6AB87D', // 第三
          bottom: '#3D7057'
        },
        {
          top: '#A09163', // 第四
          bottom: '#504932'
        },
        {
          top: '#6B97BD', // 第五
          bottom: '#364C5F'
        }
      ]
      const option = {
        tooltip: {
          show: false,
          formatter: '{b}:{c}'
        },
        grid: {
          left: 28,
          top: 0,
          bottom: 10,
          containLabel: true
        },
        xAxis: {
          type: 'value',
          show: false,
          position: 'top',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          },
          splitLine: {
            show: false
          }
        },
        yAxis: [
          {
            type: 'category',
            axisTick: {
              show: false,
              alignWithLabel: false,
              length: 5
            },
            splitLine: {
              // 网格线
              show: false
            },
            inverse: 'true', // 排序
            axisLabel: {
              margin: 16,
              color: 'rgba(255,255,255,0.85)'
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff'
              }
            },
            data: this.gradeRankingListName
          }
        ],
        series: [
          {
            name: 'xxx',
            type: 'bar',
            label: {
              normal: {
                show: true,
                // position: [300, 0],
                position: 'right',
                formatter: '{c}',
                textStyle: {
                  color: '#fff'
                }
              }
            },
            itemStyle: {
              normal: {
                show: true,
                color: function (params) {
                  const num = colorArray.length
                  return {
                    type: 'linear',
                    colorStops: [
                      {
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top
                      },
                      {
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top
                      },
                      {
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top
                      },
                      {
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top
                      },
                      {
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top
                      },
                      {
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top
                      }
                    ]
                  }
                },
                barBorderRadius: 70,
                borderWidth: 0,
                borderColor: '#333'
              }
            },
            barGap: '0%',
            barCategoryGap: '70%',
            barWidth: 8,
            data: this.gradeRankingListNum
          }
        ]
      }
      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: 'itsmDeptPrice'
        }
      )
      this.gradeRankingListNum = []
      this.gradeRankingListName = []
      if (result.data.length > 0) {
        result.data.forEach(item => {
          this.gradeRankingListNum.push(item.price || 0) // 获取到的数据
          this.gradeRankingListName.push(item.name || '') // 获取到的名称
        })
      }
      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>