v3-school-level-big-data-web/src/views/resourceDevice/pageComponent/resourceDangerComponent.vue

<template>
  <div class="resourceDangerComponent">
    <title-page-img-components :propsData="propsData"></title-page-img-components>
    <div class="eCharts-max-big-box">
      <!--<div class="position-button-left">-->
        <!--<p @click="checkButton(1)" :class="buttonType == 1?'left-border-1':'left-border-2'">年度</p>-->
        <!--<p @click="checkButton(2)" :class="buttonType == 1?'center-border-2':(buttonType == 2?'center-border-1':(buttonType == 3?'center-border-3':''))">季度</p>-->
        <!--<p @click="checkButton(3)" :class="buttonType == 3?'right-border-1':'right-border-2'">月度</p>-->
      <!--</div>-->
      <div class="position-text-box">
        <p class="position-text">总数</p>
        <p class="position-num">{{dangerNum}}</p>
        <!--<div class="position-num-box" v-if="yearOverYear>0">-->
          <!--<p class="null-p"></p>-->
          <!--<p class="text-num-p">同比 {{yearOverYear}}% </p>-->
          <!--<img src="@/assets/ZDimages/icom_whpclph_sz@1x.png">-->
          <!--<p class="null-p"></p>-->
        <!--</div>-->
      </div>
      <p class="position-img-box rotate-animation"></p>
      <div id="resourceDangerComponentECharts">

      </div>
    </div>
  </div>
</template>
<script>
  import {
    reportReportBsResourceRateAnalysisList,
  } from "@/api/index";
  import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
  export default {
    name: 'resourceDangerComponent',
    components: {
      titlePageImgComponents
    },
    data () {
      return {
        propsData:{
          title:'资源分类占比统计',
          // checkType:'resourceDangerComponent',//本次暂无
        },
        //eCharts定时器
        eChartsTimer:null,
        // buttonType:1,
        dangerNum:0,
        yearOverYear:0,
      }
    },
    created(){

    },
    mounted() {
      this.timedRefresh();
    },
    methods: {
      timedRefresh(){
        let self = this;
        self.getData();
        //定时动画
        window.clearInterval(self.eChartsTimer);
        self.eChartsTimer = setInterval(function(){
          self.getData();
        },1000*30);
      },
      getData(){
        reportReportBsResourceRateAnalysisList({}).then(response => {
          let dangerNum = 0;
          // this.$set(this,'dangerNum',response.data.dangerNum?response.data.dangerNum:0);
          // this.$set(this,'yearOverYear',response.data.yearOverYear?response.data.yearOverYear:0);
          let list = [];
          for(let i=0;i<response.data.length;i++){
            dangerNum = dangerNum + response.data[i].equNumber;
            list.push({
              name:response.data[i].equType,
              value:response.data[i].equNumber
            });
          }
          if(list[0]){
            this.$set(this,'dangerNum',dangerNum);
            this.eChartsMethod(list);
          }
        })
      },
      checkButton(type){
        if(this.buttonType != type){
          this.$set(this,'buttonType',type);
          this.getData();
        }
      },
      eChartsMethod(list) {
        let option = {
          legend: {
            orient: 'vertical',
            icon:'rect',
            itemWidth:20,
            itemHeight:10,
            itemGap: 30,
            left:343,
            top:50,
            textStyle:{
              // 个
              fontSize:18,
              color: '#fff',
            },
            formatter: (name, value) => {
              let num = null
              const item = list.find(i => {
                if (name == i.name) {
                  num = i.value
                }
              })
              return name +' '+ num
            }
          },
          tooltip: {
            trigger: 'item',
            textStyle:{
              // 个
              fontSize:18,
            },
          },
          color: ['#00E6FF',  '#FF912A',  '#00A6FF', '#254DEB', '#06CA47'],
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['40%', '50%'],
              center: ['30%', '57%'],
              label: {
                show: true,
                position: 'center',
                normal: {
                  formatter: '{yy|{d} %}',
                  rich: {
                    xx: {
                      fontSize: 16,
                      lineHeight: 32,
                      color: '#fff'
                    },
                    yy: {
                      fontSize: 16,
                      fontWeight: 600,
                      lineHeight: 32,
                      color: '#fff'
                    }
                  }
                }
              },
              data: list
            }
          ]
        };
        let echartsBox = this.$echarts.init(document.getElementById('resourceDangerComponentECharts'));
        echartsBox.clear();
        echartsBox.setOption(option);
      }
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.eChartsTimer);
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.eChartsTimer);
    }
  }
</script>
<style scoped lang="scss">
  .resourceDangerComponent{
    height: 431px;
    width:587px;
    .eCharts-max-big-box {
      height:369px;
      background: linear-gradient(180deg, rgba(4, 117, 129, 0.2) 0%, rgba(0, 15, 22, 0) 100%);
      overflow: hidden;
      position: relative;
      .position-button-left {
        z-index:5;
        position: absolute;
        margin:21px 0 0 29px;
        display: flex;
        p{
          width:70px;
          line-height:36px;
          text-align: center;
          color:#fff;
          font-size:18px;
          background-color: #063D40;
          cursor: pointer;
        }
        p:nth-child(1){
          border-top-left-radius:4px;
          border-bottom-left-radius:4px;
        }
        p:nth-child(3){
          border-top-right-radius:4px;
          border-bottom-right-radius:4px;
        }
        .left-border-1{
          border: 1px solid #00E6FF;
          color:#00E6FF;
        }
        .left-border-2{
          border: 1px solid #15827C;
          border-right:none;
        }
        .center-border-1{
          border: 1px solid #00E6FF;
          color:#00E6FF;
        }
        .center-border-2{
          border: 1px solid #15827C;
          border-left:none;
        }
        .center-border-3{
          border: 1px solid #15827C;
          border-right:none;
        }
        .right-border-1{
          border: 1px solid #00E6FF;
          color:#00E6FF;
        }
        .right-border-2{
          border: 1px solid #15827C;
          border-left:none;
        }
      }
      .position-text-box{
        width:140px;
        z-index:5;
        position: absolute;
        top:160px;
        left:106px;
        .position-text{
          text-align: center;
          height:18px;
          line-height:18px;
          font-size:18px;
          color:#fff;
        }
        .position-num{
          margin:12px 0;
          text-align: center;
          height:36px;
          font-size:36px;
          line-height:36px;
          background: -webkit-linear-gradient(0deg, #FFFFFF, #FF912A); /* Chrome, Safari */
          background: linear-gradient(0deg, #FFFFFF, #FF912A); /* 标准语法 */
          -webkit-background-clip: text; /* Chrome, Safari */
          background-clip: text;
          -webkit-text-fill-color: transparent; /* Chrome, Safari */
          color: transparent; /* 其他浏览器 */
          font-family: 'ysFonts', sans-serif;
        }
        .position-num-box{
          text-align: center;
          display: flex;
          .null-p{
            flex:1;
          }
          .text-num-p{
            height:18px;
            line-height:18px;
            font-size:18px;
            color:#fff;
          }
          img{
            margin-left:5px;
            display: block;
            width:11px;
            height:14px;
          }
        }
      }
      .position-img-box{
        position: absolute;
        top:100px;
        left:65px;
        z-index:0;
        height:220px;
        width:220px;
        background: no-repeat;
        background-size: 100%;
        background-image: url("../../../assets/ZDimages/img_tzsb_wq@1x.png");
      }
      .rotate-animation {
        animation: rotate 10s infinite linear;
      }
      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      #resourceDangerComponentECharts{
        width:587px;
        height:369px;
      }
    }
  }
</style>