WAREAMS/ruoyi-ui/src/views/ams/inv/locationView/index.vue

<template>
    <el-container>
      <el-header style="height: 40px">
        <div>
          <div class="divLeft colorYellow">
            任务中
          </div>
          <div class="divLeft colorGreen">
            空
          </div>
          <div class="divLeft colorRed">
            占用
          </div>
<!--          <div class="divLeft">-->
<!--            库存<icon-svg name="steel" class="site-sidebar__menu-icon"></icon-svg>-->
<!--          </div>-->
          <div class="divLeft">
            空托盘<svg-icon class-name="pallet-icon" icon-class="pallet" @click.stop="click" />
          </div>
        </div>
      </el-header>
      <el-main>
        <el-card v-for="zone in locationZoneList" v-bind:key="zone.zoneName" class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold">{{zone.zoneName}}</span>
          </div>
          <div class="divBoxCol" v-for="col in zone.basLocationGuiColDTOS">
            <div v-for="o in col.baseLocationGuiDTOList" v-bind:key="o.id" class="text item divBox" @click="changeLocation(o)">
              <div class="divMinBox" v-show="o.locationNo!=null">
                {{o.locationNo}}<!--(<font class="pointcss">{{o.agvStation}}</font>)-->
              </div>
              <div>
                <div v-show="o.isEmpty=='Y'" :class="{'locDiv': true,'colorGreen': true, 'colorYellow': o.stockStatus!='00'}">
                </div>
                <div v-show="o.isEmpty=='N'" :class="{'locDiv': true,'colorRed': o.isEmptyPlate != 'Y', 'colorYellow': o.stockStatus!='00'}">
                  <div class="divMinFontBox" v-show="o.isEmpty=='N' && o.isEmptyPlate != 'Y' ">
                    <div style="color: #FFFFFF;font-size:10px;">{{o.lotatt07}}&nbsp;&nbsp; </div>
                    <div v-show="o.sku!=null" style="color: #FFFFFF;font-size:10px;">{{o.sku}}</div>
                    <div v-show="o.lotatt02!=null" style="color: #FFFFFF;font-size:10px;">{{o.lotatt02}}</div>
<!--                    <div v-show="o.lotatt05!=null" style="color: #FFFFFF">{{o.lotatt05}}</div>-->
<!--                    <div v-show="o.lotatt08!=null" style="color: #FFFFFF">{{o.lotatt08}}</div>-->
                  </div>
                  <div class="divMinFontBoxEmptyPlate" v-show="o.isEmptyPlate == 'Y'">
                    <svg-icon class-name="pallet-icon" icon-class="pallet" @click.stop="click" style="width: 60px;height: 35px;">{{o.id}}</svg-icon>
                    <div style="color: #191970;font-size:12px;">{{o.skuName}}&nbsp;&nbsp;</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-main>
    </el-container>
</template>
<script>
import { locationInvView } from "@/api/ams/locationView";

  export default {
    data () {
      return {
        dataForm: {
          zoneId: ''
        },
        queryParams: {
          zoneId: '',
          warehouseId: ''
        },
        locationZoneList: [],
        locationList: {'a': [1, 2, 3]},
        locationClearVisible: false
      }
    },
    mounted () {
    },
    activated () {
    },
    created () {
      this.getDataList()
      this.timer = setInterval(this.getDataList, 5000)
    },
    beforeDestroy () {
      clearInterval(this.timer)
    },
    methods: {
      getDataList () {
        this.dataListLoading = true
        locationInvView(this.queryParams).then(response => {
          this.locationZoneList = response.data
        })
        this.dataListLoading = false
      },
      changeLocation(o){
        // alert(o.locationNo);
      }
    }
  }
</script>

<style>

.pointcss{
  color: hotpink;
}

.divBoxCol {
  width: 150px;
  display: block;
  float: left;
}

.divBox {
  width: 130px;
  height: 90px;
  display: block;
  float: left;
  margin-left: 2px;
}

.divMinBox {
  margin-top: 0px;
  height: 15px;
  width: 100%;
  text-align: center;
  font-weight: bold;
}

.divMinFontBox {
  margin-top: 2px;
  height: 10px;
  width: 100%;
  text-align: center;
  /*font-size: 1px;*/
}

.locDiv {
  float: left;
  display: inline-block;
  width: 130px;
  height: 70px;
  margin-top: 1px;
  text-align: center;
  margin-left: 1px;
  border: solid 1px;
}

.colorGreen {
  background-color: #19a708;
}

.colorRed {
  background-color: #c73c2d;
}

.colorYellow {
  background-color: #e2cd0f;
}

.divLeft {
  border-top: 1px;
  border-color: #2b373d;
  text-align: left;
  display: inline-block;
  height: 30px;
  width: 80px;
  text-align: center;
  margin-top: 10px;
  padding-top: 5px;
}

.box-card{
  width: 100%;
  display:inline-block;
  overflow: hidden;
}
</style>