<template>
  <show-item>
    {{'报警设备汇总'}}
    <template #container>
      <div class="progressBox">
        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
      </div>
      <div class="progressBox">
        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
      </div>
      <div class="progressBox">
        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
      </div>
      <div class="progressBox">
        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
      </div>
    </template>
  </show-item>
</template>

<script>

import progressBar from '@/views/zhangqiu/components/progressBar.vue'
import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
import showItem from '@/views/zhangqiu/components/showItem.vue'
export default {
  name: 'DeviceAlarmSum',
  components: {showItem, ProgressBar, progressBar },
  data() {
    return {
      deviceAlarm: [
        {
          title: '井盖测试仪',
          context: '',
        },
        {
          title: '燃气智能监测终端',
          context: '',
        },
        {
          title: '可燃气体监测',
          context: '',
        },
        {
          title: '燃气管盯',
          context: '',
        }
      ]
    }
  },
  created() {
    this.getWellPercent()
    this.getGasPercent()
    this.getGasdectorPercent()
    this.getTubePercent()
  },
  methods: {
    getWellPercent() {
      this.deviceAlarm[0].context = '10'
    },
    getGasPercent() {
      this.deviceAlarm[1].context = '70'
    },
    getGasdectorPercent() {
      this.deviceAlarm[2].context = '50'
    },
    getTubePercent() {
      this.deviceAlarm[3].context = '45'
    }
  }
}
</script>

<style lang="scss">
.showItem{
  display: flex;
  .progressBox{
    margin-top: 15px;
  }
}
</style>