<!--
 * @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="upon" >物联监测设备</div>
    <div class="left" id ="main2">
      <Chars :options="option"/>
    </div>
    <div class="right">
      <div class="onehang" style="margin-top: 15%">
        <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 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
    },
    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: 0 },
                { value: 0 },
                { value: 0 },
                { value: 0 },
              ]
            }
          ]
        }
      };
    },
    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;
  }
  .upon{
    position: fixed;
    width: 30%;
    text-align: center;
    font-size: 24px;
  }
</style>
