<!--
 * @Author: your name
 * @Date: 2022-04-11 15:07:47
 * @LastEditTime: 2022-04-14 18:00:06
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
-->
<template>
  <div style="display:flex; ">
    <div class="left" id ="main2">
      <Chars :options="option"/>
    </div>
    <div class="right">
      <div class="onehang" style="margin-top: 20%">
        <div class="onemax"></div>
        <div class="one">用户数量</div>
        <div class="one">特殊用户</div>
      </div>
      <div class="onehang">
        <div class="onemax" ><div class="xiaoone" style="background: #ff7f50 "></div>居民用户</div>
        <div class="one">{{datanum.jmNum}}</div>
        <div class="one">{{datanum.jmtNum}}</div>
      </div>
      <div class="onehang">
        <div class="onemax"><div class="xiaoone" style="background:#32cd32"> </div>商业用户</div>
        <div class="one">{{datanum.syNum}}</div>
        <div class="one">{{datanum.sytNum}}</div>
      </div>
      <div class="onehang">
        <div class="onemax"><div class="xiaoone" style="background: #6495ed"></div>工业用户</div>
        <div class="one">{{datanum.gyNum}}</div>
        <div class="one">{{datanum.gytNum}}</div>
      </div>

    </div>
  </div>
</template>

<script>
  import Chars from "../../../../components/allCharsCom/Chars";
  import { summaryUser } from "@/api/supervise/summary";
  export default {
  components: {
    Chars
  },
    props:{
      annual: {
        type: String,
        default: 2025,
      },
      companyInfoId: {
        type: String,
        default: 23,
      },
    },
  data() {
    return {

      total:4,
      limit:2,
      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 4,
        enterpriseId:null,
        nickName: null
      },
      // 特殊用户管控表格数据
      specialuserList: [],
      arr: [],
      datanum:{
        jmNum:0,
        gyNum:0,
        syNum:0,
        jmtNum:0,
        gytNum:0,
        sytNum:0,
      },
      option:{
        color: ['#ff7f50', '#32cd32', '#6495ed' ],
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048 },
              { value: 735 },
              { value: 580 },
            ]
          }
        ]
      }
    };
  },
  created() {
    this.getnum();
  },
  methods: {

    //特殊用户
    getnum(){
      summaryUser().then(res => {
          if(res.code == 200){
            this.datanum = res.data;
            var data = [
              { value: res.data.jmNum },
              { value: res.data.syNum },
              { value: res.data.gyNum }
            ]
            this.option.series[0].data = data;
          }
          console.log(this.option)
          var myChart =  this.$echarts.init(document.getElementById('main2'));
          myChart.setOption(this.option);
      })
    }
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
  .left{
    width: 40%;
    height: 30vh;
  }
  .right{
    width: 55%;
    height: 30vh;
  }
  .onehang{
    width: 100%;
    font-size: 14px;
    display: flex;
  }
  .one{
    height: 40px;
    width: 30%;
    text-align: center;
  }
  .onemax{
    height: 40px;
    width: 40%;
    text-align: center;
    display: flex;
  }
  .xiaoone{
    height: 12px;
    width: 20px;
    margin-top: 4px;
    margin-right: 5px;
  }
</style>
