v3-lab-web/src/views/iotDevice/iotHome/numberStatistics.vue

<!--数量统计-->
<template>
  <div class="iotHome-numberStatistics">
    <div class="number-big-box">
      <img src="@/assets/ZDimages/iotDevice/home_iot_icon.png">
      <div>
        <p>{{newData.iotDeviceCount}}</p>
        <p>物联设备</p>
      </div>
      <p class="border-right-p"></p>
    </div>
    <div class="number-big-box ">
      <img class="right-icon" src="@/assets/ZDimages/iotDevice/home_hardware_icon.png">
      <div>
        <p>{{newData.hardwareCount}}</p>
        <p>硬件设备</p>
      </div>
      <p class="border-right-p"></p>
    </div>
    <div class="statistics-box">
      <div id="number-statistics-box">

      </div>
      <div class="button-box">
        <div class="button-for-box" :class="checkValue === index ? 'checkValue':''"
             v-for="(item,index) in newList" :key="index">
          <span v-if="checkValue === index" class="iconfont iconfont-a icon-xuanzhong2"></span>
          <span v-if="checkValue !== index" class="iconfont iconfont-b icon-danxuankuang"></span>
          <p>{{item.name}}：</p>
          <p>{{item.value}}%</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { iotStatisticsDevices } from "@/api/iotDevice/index";
  export default {
    name: 'numberStatistics',
    data(){
      return{
        newData:{
          iotDeviceCount:'',
          hardwareCount:'',
        },
        newList:[
          { name:'在线设备',value:'' },{ name:'离线设备',value:'' },
        ],
        checkValue:0,
      }
    },
    created(){
    },
    mounted(){
      this.iotStatisticsDevices();
    },
    methods:{
      iotStatisticsDevices(){
        iotStatisticsDevices({}).then(response => {
          this.$set(this,'newData',{
            iotDeviceCount:response.data.iotDeviceCount,
            hardwareCount:response.data.hardwareCount,
          });
          this.$set(this,'newList',[
            { name:'在线设备',value:response.data.onlineRate },{ name:'离线设备',value:response.data.offlineRate },
          ]);
          this.$nextTick(()=>{
            this.checkButton(this.newList[0].value,this.newList[0].name,0);
          })
        })
      },
      checkButton(num,text,index){
        this.$set(this,'checkValue',index);
        this.eChartsDraw(num,text);
      },
      eChartsDraw(num,text){
        let myChart = this.$echarts.init(document.getElementById('number-statistics-box'));
        let Green = {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: '#99da69' // 0% 处的颜色
          }, {
            offset: 1,
            color: '#01babc' // 100% 处的颜色
          }],
          globalCoord: false // 缺省为 false
        };
        let option = {
          backgroundColor: '#fff',
          title: {
            text: num +'%',
            subtext: text,
            x: 'center',
            y: 36,
            textStyle: {
              fontSize:14,
              fontWeight:'normal',
              color: ['#67828c']
            },
            subtextStyle: {
              color: '#67828c',
              fontSize: 12,
              align: 'center',
            }
          },
          series: [{
            //渐变圆环
            name: "",
            type: "pie",
            radius: ["60%", "75%"],
            startAngle: 180,
            hoverAnimation: false,
            avoidLabelOverlap: true,
            z: 0,
            zlevel: 0,
            label: {
              show: false,
              normal: {show: false}
            },
            data: [{
              value: 0,
              name: "",
              itemStyle: {
                normal: {
                  color: Green
                }
              }
            }]
          },
            {
              //仪表盘样式
              name: "",
              type: "gauge",
              radius: "75%",
              startAngle: 310,
              clockwise:true,
              splitNumber: 50,
              hoverAnimation: true,
              axisTick: {
                show: false
              },
              splitLine: {
                length: 8,
                lineStyle: {
                  width: 1,
                  color: "#fff"
                }
              },
              axisLabel: {
                show: false
              },
              pointer: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  opacity: 0
                }
              },
              detail: {
                show: false
              },
              data: [{
                value: num,
                name: ""
              }]
            },
            {
              //进度圆环
              name: 'Line 1',
              type: 'pie',
              startAngle: 180,
              clockWise: true,
              radius:['80%','85%'],
              itemStyle: {
                normal: {
                  label: {
                    show: true
                  },
                  labelLine: {
                    show: false
                  },
                }
              },
              hoverAnimation: false,

              data: [{
                value:  num ,
                itemStyle: {
                  normal: {
                    color: '#20da97'
                  }
                }
              },{//画中间的图标
                name: "",
                value: 0,
                label: {
                  position:'inside',
                  width: 16,
                  height: 16,
                  borderRadius: 20,
                  padding: 11
                }
              }, {
                value: 100 - num ,
                name: 'invisible',
                itemStyle: {
                  normal: {
                    color: 'transparent', //未完成的圆环的颜色
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    }
                  }
                }
              }
              ]
            }
          ]
        };
        myChart.setOption(option);
      },
    },
  }
</script>

<style scoped lang="scss">
  .iotHome-numberStatistics{
    display: flex;
    .number-big-box{
      display: flex;
      img{
        width:60px;
        height:60px;
        margin:30px 40px 30px 80px;
      }
      .right-icon{
        width:50px;
        height:50px;
        margin:40px 40px 30px 80px;
      }
      div{
        width:200px;
        margin-right:60px;
        p{
          line-height:30px;
          font-size:18px;
          text-align: center;
          font-weight:700;
          color:#666;
        }
        p:nth-child(1){
          margin-top:30px;
        }
        p:nth-child(2){

        }
      }
      .border-right-p{
        width:1px;
        height:60px;
        margin:30px 0;
        background-color: #999;
      }
    }
    .statistics-box{
      flex:1;
      display: flex;
      #number-statistics-box{
        /*flex:1;*/
        height:120px;
        width:200px;
        margin-left:100px;
      }
      .button-box{
        margin-left:60px;
        padding:20px 0 0;
        .checkValue{
          p{
            /*color:#20DA97!important;*/
          }
        }
        .button-for-box{
          display: flex;
          p{
            line-height:40px;
            color:#999;
          }
          img{
            width:20px;
            height:20px;
            margin:10px;
          }
          .iconfont-a{
            font-size:22px;
            color:#20DA97;
            margin:10px;
          }
          .iconfont-b{
            font-size:23px;
            color:#999;
            margin:8px 9px;
          }
        }
      }
    }
  }
</style>