<template>
  <Block title="告警总数">
    <template v-slot:main>
      <div class="device-waring-container">
        <el-row type="flex" style="height: 50%">
          <el-col class="flex-col" :span="12">
            <div class="index-content">
              <div class="index-icon index-emergent"></div>
              <div class="index-info">
                <div class="index-label">紧急</div>
                <div class="index">
                  <span class="index-num">10</span>
                  次
                </div>
              </div>
            </div>
          </el-col>
          <el-col class="flex-col" :span="12" >
            <div class="index-content">
              <div class="index-icon index-important"></div>
              <div class="index-info">
                <div class="index-label">重要</div>
                <div class="index">
                  <span class="index-num">2</span>
                  次
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" style="height: 50%">
          <el-col class="flex-col" :span="12">
            <div class="index-content">
              <div class="index-icon index-minor"></div>
              <div class="index-info">
                <div class="index-label">次要</div>
                <div class="index">
                  <span class="index-num">110</span>
                  次
                </div>
              </div>
            </div>
          </el-col>
          <el-col class="flex-col" :span="12">
            <div class="index-content">
              <div class="index-icon index-warning"></div>
              <div class="index-info">
                <div class="index-label">警告</div>
                <div class="index">
                  <span class="index-num">10</span>
                  次
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </template>
  </Block>
</template>

<script>
import Block from '@/components/Block/block.vue';

export default {
  components: { Block },
  name: 'DeviceWaring',
  data() {
    return {};
  },
  mounted() {
    this.initData();
  },
  created() {
  },
  methods: {
    async initData() {
    },
  },
};
</script>
<style src="./index.scss" lang="scss" />
