<template>
  <div class="right-chart-2">
    <cmpTitle :title="title"></cmpTitle>
    <div class="rc1-chart-container">
      <div class="left">
        <div v-if="!parking" class="number">434</div>
        <div v-if="parking" class="number">54</div>
        <div>设备总数</div>
      </div>
      <div class="right">
        <dv-active-ring-chart class="chart" :config="config1" />
        <Label-Tag :config="labelConfig" />
      </div>
    </div>
  </div>
</template>

<script>
  import LabelTag from './LabelTag'
  import cmpTitle from "../common/cmpTitle.vue"
  import {getUserInfo} from "../../../util/util.js"
export default {
  components:{
    LabelTag,
     cmpTitle
  },
  name: 'RightChart2',
  props:['title'],
  data () {
    return {
      labelConfig: {
        data: ['绑定', '未绑定',]
      },
      parking: false,
      config1: {
        data: [
          {
            name: '绑定',
            value: 156
          },
          {
            name: '未绑定',
            value: 415
          }
        ],
        color: ['#00baff', '#3de7c9'],
        radius: '65%',
        activeRadius: '70%',
        lineWidth: 10,
        style:{
          fontSize:10
        },
      
      },

    }
  },
  mounted() {
	if(getUserInfo()){
		this.parking = true;
	}
  }
}
</script>

<style lang="less">
.right-chart-2 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  .rc1-chart-container {
    flex: 1;
    display: flex;
  }

  .left {
    width: 30%;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .number {
      font-size: 34px;
      color: #096dd9;
      font-weight: bold;
      margin-bottom: 30px;
    }
  }

  .right {
    width: 70%;
    height: calc(~"100% - 30px");
    box-sizing: border-box;
  }
  .chart{
    height:100%;
    .active-ring-name {
      font-size: 14px !important;
    }
  }
  .chart-name {
    position: absolute;
    right: 70px;
    text-align: right;
    font-size: 16px;
    font-weight: bold;
    top: 0;
  }
}
</style>
