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

<template>
  <div class="cageDangerComponent">
    <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="cageDangerComponentECharts">

      </div>
    </div>
  </div>
</template>
<script>
  import {
    reportReportBsEquipDangerList,
  } from "@/api/index";
  import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
  export default {
    name: 'cageDangerComponent',
    components: {
      titlePageImgComponents
    },
    data () {
      return {
        propsData:{
          title:'笼位实验室隐患统计',
          // checkType:'cageDangerComponent',
        },
        //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(){
        reportReportBsEquipDangerList({dangerType:2,statisticsType:this.buttonType}).then(response => {
          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.subjectList.length;i++){
            list.push({
              name:response.data.subjectList[i].subjectName,
              value:response.data.subjectList[i].dangerNum
            });
          }
          if(list[0]){
            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:100,
            textStyle:{
              // 个
              fontSize:18,
              color: '#fff',
            },
          },
          tooltip: {
            trigger: 'item',
            textStyle:{
              // 个
              fontSize:18,
            },
          },
          color: ['#00E6FF',  '#FF912A',  '#00A6FF', '#254DEB', '#06CA47'],
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['40%', '50%'],
              center: ['30%', '57%'],
              label: {
                show: false
              },
              data: list
            }
          ]
        };
        let echartsBox = this.$echarts.init(document.getElementById('cageDangerComponentECharts'));
        echartsBox.clear();
        echartsBox.setOption(option);
      }
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.eChartsTimer);
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.eChartsTimer);
    }
  }
</script>
<style scoped lang="scss">
  .cageDangerComponent{
    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);
        }
      }
      #cageDangerComponentECharts{
        width:587px;
        height:369px;
      }
    }
  }
</style>