/* *@description:库内监控 *@author: hudw *@date: 2021-08-25 11:42:32 */
<template>
  <div id="monitoring-internal-warehouse" class="monitoring-layout">
    <div class="monitoring-layout-grid">
      <div class="layout-grid-item-1 column">
        <a-page-header
          class="grid-item-page-header"
          title="库内作业监控"
          :avatar="baseRequest(`7.svg`)"
          :sub-title="`更新时间:${$moment().format('YYYY-MM-DD HH:mm')}`"
        />
        <div class="layout-grid-item-body" style="flex: 1;align-items: center;">
          <a-statistic
            v-for="(item, index) in section_1"
            :key="index"
            :title="item.title"
            :value="item.value"
            style="margin-right: 50px"
          />
        </div>
      </div>
      <div class="layout-grid-item-2 column">
        <a-page-header class="grid-item-page-header" title="库存监控" :avatar="baseRequest(`8.svg`)" />
      </div>
      <div class="layout-grid-item-3 column">
        <a-page-header class="grid-item-page-header" title="库存效期监控" :avatar="baseRequest(`9.svg`)" />
      </div>
    </div>
  </div>
</template>
<script>
import '../style/index.less'
import { section_1, section_2, section_3, section_4, section_5 } from './js/config.js'
function baseRequest(fileName) {
  return {
    props: { size: 20, shape: 'square', src: require('@/views/kzyWMS/monitoringWMS/internal/img/' + fileName) }
  }
}
export default {
  data() {
    return {
      section_1
    }
  },
  mounted() {},
  methods: {
    baseRequest
  }
}
</script>
<style lang="less">
#monitoring-internal-warehouse {
  .monitoring-layout-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
  }
  .layout-grid-item {
    &-1 {
      grid-column: ~'1/3';
    }
      &-2, &-3 {
      grid-row: ~'2/6';
    }
  }
}
</style>
