yiliangyiyun-pc-jj/src/views/home/left-center.vue

<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-04-28 09:46:18
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <Echart
    id="leftCenter"
    :options="options"
    class="left_center_inner"
    v-if="pageflag"
    ref="charts"
  />
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script>
// import { currentGET } from 'api/modules'
export default {
  data() {
    return {
      options: {},
      countUserNumData: {
        lockNum: 0,
        onlineNum: 0,
        offlineNum: 0,
        totalNum: 0,
      },
      pageflag: true,
      timer: null,
      a:1
    }
  },
  created() {
    this.getData()
  },
  mounted() {},
  beforeDestroy() {
    this.clearData()
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    getData() {
      let that = this
      this.pageflag = true
      setTimeout(function () {
        
        that.countUserNumData = {
          lockNum: that.a++,
          offlineNum: 55,
          onlineNum: 162,
          totalNum: 218,
        }
        that.$nextTick(() => {
          that.init()
          that.switper()
        })
      }, 1000)
      // this.pageflag =false

      // currentGET('big1').then(res => {
      //   //只打印一次
      //   if (!this.timer) {
      //     console.log('设备总览', res);
      //   }
      //   if (res.success) {
      //     this.countUserNumData = res.data
      //     this.$nextTick(() => {
      //       this.init()
      //       this.switper()
      //     })

      //   } else {
      //     this.pageflag = false
      //     this.$Message({
      //       text: res.msg,
      //       type: 'warning'
      //     })
      //   }
      // })
    },
    //轮询
    switper() {
      if (this.timer) {
        return
      }
      let looper = (a) => {
        this.getData()
      }
      this.timer = setInterval(looper, 1000)
      let myChart = this.$refs.charts.chart
      myChart.on('mouseover', (params) => {
        this.clearData()
      })
      myChart.on('mouseout', (params) => {
        this.timer = setInterval(looper, 1000)
      })
    },
    init() {
      debugger
      let total = this.countUserNumData.totalNum
      let colors = ['#ECA444', '#33A1DB', '#56B557']
      let piedata = {
        name: '用户总览',
        type: 'pie',
        radius: ['42%', '65%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 4,
          borderColor: 'rgba(0,0,0,0)',
          borderWidth: 2,
        },

        color: colors,
        data: [
          // {
          //   value: 0,
          //   name: "告警",
          //   label: {
          //     shadowColor: colors[0],
          //   },
          // },
          {
            value: this.countUserNumData.lockNum,
            name: '锁定',
            label: {
              shadowColor: colors[0],
            },
          },
          {
            value: this.countUserNumData.onlineNum,
            name: '在线',
            label: {
              shadowColor: colors[2],
            },
          },
          {
            value: this.countUserNumData.offlineNum,
            name: '离线',
            label: {
              shadowColor: colors[1],
            },
          },
        ],
      }
      this.options = {
        title: {
          // zlevel: 0,
          text: ['{value|' + total + '}', '{name|总数}'].join('\n'),
          top: 'center',
          left: 'center',
          textStyle: {
            rich: {
              value: {
                color: '#ffffff',
                fontSize: 24,
                fontWeight: 'bold',
                lineHeight: 20,
              },
              name: {
                color: '#ffffff',
                lineHeight: 20,
              },
            },
          },
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0,0,0,.6)',
          borderColor: 'rgba(147, 235, 248, .8)',
          textStyle: {
            color: '#FFF',
          },
        },
        legend: {
          show: false,
          top: '5%',
          left: 'center',
        },
        series: [
          //展示圆点
          {
            ...piedata,
            tooltip: { show: true },
            label: {
              formatter: '   {b|{b}}   \n   {c|{c}个}   {per|{d}%}  ',
              //   position: "outside",
              rich: {
                b: {
                  color: '#fff',
                  fontSize: 12,
                  lineHeight: 26,
                },
                c: {
                  color: '#31ABE3',
                  fontSize: 14,
                },
                per: {
                  color: '#31ABE3',
                  fontSize: 14,
                },
              },
            },
            labelLine: {
              length: 20, // 第一段线 长度
              length2: 36, // 第二段线 长度
              show: true,
              emphasis: {
                show: true,
              },
            },
          },
          {
            ...piedata,
            tooltip: { show: true },
            itemStyle: {},
            label: {
              backgroundColor: 'auto', //圆点颜色，auto：映射的系列色
              height: 0,
              width: 0,
              lineHeight: 0,
              borderRadius: 2.5,
              shadowBlur: 8,
              shadowColor: 'auto',
              padding: [2.5, -2.5, 2.5, -2.5],
            },
            labelLine: {
              length: 20, // 第一段线 长度
              length2: 36, // 第二段线 长度
              show: false,
            },
          },
        ],
      }
    },
  },
}
</script>
<style lang='scss' scoped>
</style>