上传项目

Xxxu

2020-07-07 4f953ffc89fc95f83b152e914c5e65938b440f17

 src/views/modules/home/user-base-info/user-base-info-led-chart.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,184 @@
<template>
    <div>
        <div id='ledChart' style='height:150px;width:100%'></div>
    </div>
</template>
<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      onlineNum: 0,
      outlineNum: 0,
      dataList: []
    }
  },
  activated () {
    this.getLedList()
  },
  methods: {
    getLedList () {
      this.$http({
        url: this.$http.adornUrl('/pole/polelightemit/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': 0,
          'limit': 9999
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
        } else {
          this.dataList = []
        }
      }).then(() => {
        // æŸ¥è¯¢æ¯ä¸ªled屏幕状态
        var ids = this.dataList.map(item => {
          return item.lightemitId
        })
        this.$http({
          url: this.$http.adornUrl('/pole/polelightemit/ledStatus'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({data}) => {
          if (data && data.code === 0) {
            var resultMap = data.result
            this.dataList.forEach(item => {
              item.screenOpen = resultMap[item.lightemitId]
            })
            this.onlineNum = 0
            this.outlineNum = 0

            for (var i = 0; i < this.dataList.length; i++) {
              if (this.dataList[i].screenOpen === 'true') {
                this.onlineNum++
              } else {
                this.outlineNum++
              }
            }
            this.drawChart()
          } else {
            // this.$message.error(data.msg)
          }
        })
      })
    },
    drawChart () {
      var ledChartOption = {
        color: ['#09BAFE', '#FC0A15'],
        title: {
          text: 'LED/台',
          left: 'center',
          top: '45%',
          textStyle: {
            color: 'white',
            fontSize: 13,
            align: 'center'
          }
        },

        graphic: [
          {
            type: 'group',
            left: '15%',
            top: '15%',
            children: [
              {
                type: 'text',
                z: 100,
                style: {
                  fill: '#FC0A15',
                  text: [this.outlineNum].join('\n'),
                  font: '14px Microsoft YaHei'
                }
              }
            ]
          },
          {
            type: 'group',
            left: '70%',
            top: '15%',
            children: [
              {
                type: 'text',
                z: 100,
                left: 50,
                top: 500,
                style: {
                  fill: '#09BAFE',
                  text: [this.onlineNum].join('\n'),
                  font: '14px Microsoft YaHei'
                }
              }
            ]
          }
        ],

        tooltip: {
          trigger: 'item',
          // formatter: '{a} <br/>{b}: {c} ({d}%)',
          formatter: '{a} <br/>{b}: {c}',
          position: function (point, params, dom, rect, size) {
            // å…¶ä¸­point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
            var x = point[0]
            var y = point[1]
            var boxWidth = size.contentSize[0]
            var boxHeight = size.contentSize[1]
            var posX = 0 // x坐标位置
            var posY = 0 // y坐标位置

            if (x < boxWidth) {
              // å·¦è¾¹æ”¾ä¸å¼€
              posX = 5
            } else {
              // å·¦è¾¹æ”¾çš„下
              posX = x - boxWidth
            }

            if (y < boxHeight) {
              // ä¸Šè¾¹æ”¾ä¸å¼€
              posY = 5
            } else {
              // ä¸Šè¾¹æ”¾å¾—下
              posY = y - boxHeight
            }

            return [posX, posY]
          }
        },
        series: [
          {
            name: 'LED在线数量',
            type: 'pie',
            radius: ['55%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false,
                textStyle: {
                  fontSize: '5',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{ value: this.onlineNum, name: '在线' }, { value: this.outlineNum, name: '不在线' }]
          }
        ]
      }

      var ledChart = echarts.init(document.getElementById('ledChart'))
      ledChart.setOption(ledChartOption)
    }
  }
}
</script>
<style>
</style>