<!--
  Description: 报警统计-总体报警
  Author: 李亚光
  Date: 2023-07-08
 -->
<script lang="ts" setup name="AlarmCount">
import layout from './layout.vue'
const alarmData = ref<any[]>([
  {
    name: '正在报警',
    value: '7',
    unit: '个',
  },
  {
    name: '今日报警',
    value: '2',
    unit: '个',
  },
  {
    name: '本周报警',
    value: '12',
    unit: '个',
  },
  {
    name: '本月报警',
    value: '25',
    unit: '个',
  },
  {
    name: '全年报警',
    value: '208',
    unit: '个',
  },
])
</script>

<template>
  <layout title="报警总体情况">
    <template #content>
      <div class="alarm-container">
        <div v-for="item in alarmData" :key="item.name" class="alarm-item">
          <div class="top">
            {{ item.name }}
          </div>
          <div class="bottom">
            <span class="value"> {{ item.value }}</span>
            <span class="unit"> {{ item.unit }}</span>
          </div>
        </div>
      </div>
    </template>
  </layout>
</template>

<style lang="scss" scoped>
.alarm-container {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;

  .alarm-item {
    border: 2px solid #ccc;
    border-left: 4px solid #f24d4d;
    width: 18%;
    padding: 10px;

    .top {
      padding-left: 10px;
    }

    .bottom {
      text-align: center;

      .value {
        font-size: 18px;
        font-weight: 700;
      }
    }
  }
}
</style>