<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-25 09:18:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-bottom.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
    };
  },
  created() {
    this.getData()
  },
  mounted() {
  },
  beforeDestroy() {
    this.clearData()

  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    getData() {
      this.pageflag = true
      // this.pageflag =false

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

        } else {
          this.pageflag = false
          this.$Message({
            text: res.msg,
            type: 'warning'
          })
        }
      })
    },
    init() {
      this.options = {
        title: {
          text: ["总数 1 "].join("\n"),
          // subtext: 'Fake Data',
          // left: 'center'
          textStyle: {
            color: "#ffffff",
            lineHeight: 20,
          }
        },
        color:
            [
              "#fc8452",
              "#fac858",
              "#73c0de",
              "#3ba272",
              "#5470c6",
              "#5470c6",
              "#91cc75",
              "#ee6666",
              "#9a60b4",
              "#ea7ccc"

            ],
        tooltip: {
          trigger: 'item'
        },
        // legend: {
        //   orient: 'vertical',
        //   left: 'left'
        // },
        series: [
          {
            width: "100%",
            height: "100%",
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              {value: 1, name: '产品预警'},
              {value: 0, name: '资质预警'},
              {value: 0, name: '其他预警'},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              formatter: "   {b|{b}}   \n   {c|{c}个}   {per|{d}%} ",
              //   position: "outside",
              rich: {
                b: {
                  color: "#fff",
                  fontSize: 12,
                  lineHeight: 26,
                },
                c: {
                  color: "#31ABE3",
                  fontSize: 14,
                },
                d: {
                  color: "#31ABE3",
                  fontSize: 14,
                },
                per: {
                  color: "#31ABE3",
                  fontSize: 14,
                },
              },
            }
          }
        ]
      };
    },
  },
};
</script>
<style lang='scss' scoped>
</style>
