/* *@description:出库监控 *@author: hudw *@date: 2021-08-25 11:42:32 */
<template>
  <div id="monitoring-out-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 class="layout-grid-item-4 column">
        <a-page-header class="grid-item-page-header" title="拣货过程监控" :avatar="baseRequest(`9.svg`)" />
      </div>
      <div class="layout-grid-item-5 column">
        <a-page-header class="grid-item-page-header" title="内复核过程监控" :avatar="baseRequest(`9.svg`)" />
      </div>

      <div class="layout-grid-item-6 column">
        <a-page-header class="grid-item-page-header" title="接口监控" :avatar="baseRequest(`9.svg`)" />
      </div>
      <div class="layout-grid-item-7 column">
        <a-page-header class="grid-item-page-header" title="作业质量监控" :avatar="baseRequest(`9.svg`)" />
      </div>
      <div class="layout-grid-item-8 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-out-warehouse {
  .monitoring-layout-grid {
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: auto 30% 40%;
  }
  .layout-grid-item {
    &-1 {
      grid-column: ~'1/9';
    }
    &-2 {
      grid-column: ~'9/15';
      // grid-row: ~'2/6';
    }
    &-3 {
      grid-column: ~'15/21';

      // grid-row: ~'2/6';
    }
    &-4 {
      grid-column: ~'1/11';

      // grid-row: ~'2/6';
    }
    &-5 {
      grid-column: ~'11/21';

      // grid-row: ~'2/6';
    }
    &-5 {
      grid-column: ~'11/21';

      // grid-row: ~'2/6';
    }
    &-6 {
      grid-column: ~'1/7';
      // grid-row: ~'2/6';
    }
    &-7 {
      grid-column: ~'7/13';
      // grid-row: ~'2/6';
    }
    &-8 {
      grid-column: ~'13/21';

      // grid-row: ~'2/6';
    }
  }
}
</style>
