station-test-ui/src/views/device/hyd_equipment/alarm.vue

<template>

    <!-- 设备数量 -->
    <div class="layout-1">
      <el-row :gutter="8">
        <el-col class="gutter-row item item1" :span="4" v-show="is_show" >
         <a href="javascript:void(0);" @click="search()"> 
           <div class="gutter-box" :style="item1Style">
            <div class="today-add">
              <span>总设备数量</span>
            </div>
            <div class="count">
              <div>
                <span class="number">
                  <i class="el-icon-loading" v-if="showLoading"></i>
                  <countTo v-else :startVal="startVal" :endVal="total" :duration="duration"></countTo>
                </span>
              </div>
              <span class="text">设备总数</span>
            </div>
          </div>
          </a>
        </el-col>
        <el-col class="gutter-row item item1" :span="4" v-for="(item,index) in list" :key="index" >
          <a href="javascript:void(0);" @click="search(item.id)"> 
           <div class="gutter-box" :style="item.style">
            <div class="today-add">
              <span>{{item.name}}设备数量</span>
            </div>
            <div class="count">
              <div>
                <span class="number">
                  <i class="el-icon-loading" v-if="showLoading"></i>
                  <countTo v-else :startVal="startVal" :endVal="item.total" :duration="duration"></countTo>
                </span>
              </div>
              <span class="text">{{item.name}}总数</span>
            </div>
          </div>
          </a>
        </el-col>
      </el-row>
    </div>
</template>

<script>
import countTo from "vue-count-to";
import { parseTime } from '@/utils'
import viewDialog from "./component/viewDialog"
import exportAlarm from "./component/exportAlarm"
import exportDialog from "./component/exportDialog"
import { action } from '@/directive/permission/index.js'
export default {
  name: "alarm_realtimeAlarm",
  mixins: [exportAlarm],
  directives: { action },
  components: {
    countTo,
  },
    props:[
        'countList',
    ],
  data() {
    return {
      duration: 3000,
      showLoading: true,
      startVal: 0,
      list:[],
      is_show:false,
    
      item1Style: { "background-color": "#32c5d2" },
      itemStyleList:[
         { "background-color": "#4caf50" },
         { "background-color": "#7ba7bd" },
         { "background-color": "#e7505a" },
         { "background-color": "#4cb563" },
      ]
      
    };
  },
  computed: {

    total: function() {
        let list = this.list;
        let total =0;
        list.forEach((item) => {
            
            total = total+item.total;
            
        });
      return total;
    },
    online: function() {
      return this.statusCount.alarm + this.statusCount.normal;
    }
  },
  created(){
  },
  mounted() {
    this.getEquTotal();
  },
  methods: {
    //获取设备类别
    getEquTotal(){
        this.$http.get("getTotalByEquipmentType").then(response => {
            this.list =[];
          let list =response.data;
          list.forEach((item,index,array)=>{
              item.style = this.itemStyleList[index];
              this.list.push(item);
          });
           this.is_show=true;
        }); 
        this.showLoading=false;
    },
    search(name)
    {
       
        this.$emit('eq_type',name)
    }

  },

  
};
</script>

<style lang='scss' scoped>
@import "./alarm.scss";
</style>