<!--
 * @Description: 双创 地图上方显示面板组件
 * @Author: 王晓颖
 * @Date: 2020-09-17 09:50:32
 -->
<template>
  <div class="overflow-container" style="">
    <panel-board v-for="(value,index) in data" :key="'camera_'+index" :data="value"/>
  </div>
</template>

<script>
import PanelBoard from '@/components/panelBoard/panelBoard'
export default {
  name: 'Camera',
  components: {PanelBoard},
  props: {
    rawData: {
      type: Object,
      default: () => {
        return {
          total: 1621,
          online: 1080
        }
      }
    }
  },
  data () {
    return {
      data: [
        {
          name: '摄像头总数',
          value: 1621,
          unit: '个'
        },
        {
          name: '在线摄像头数',
          value: 1421,
          unit: '个'
        }
      ]
    }
  },
  watch: {
    rawData (val) {
      this.data = [
        {
          name: '摄像头总数',
          value: val.total,
          unit: '个'
        },
        {
          name: '在线摄像头数',
          value: val.online,
          unit: '个'
        }
      ]
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.overflow-container{
  position:absolute;
  top:20px;
  left:0.3rem;
  z-index:100;
  width: 30%;
  display: flex;
  justify-content: start;
  ;
}
</style>