JNBusiness/ruoyi-ui/src/views/storageLocation/locationSet.vue

<template>
<div style="margin-top: 10px;margin-left: 5px; margin-right: 5px;">
    <el-row>
      <el-col :span="8">
        <el-card class="box-card" style="background-color: yellow;" :body-style="{backgroundColor: '#fff' }">
          <div slot="header" class="clearfix">
            <span>黄色线芯A区</span>
          </div>
          <el-descriptions border :column="2" size="small" v-for="(item,index) in materialDetailA" :key="item.materialBh">
            <el-descriptions-item>
              <template slot="label">
                库位
              </template>
              <span style="font-size: 15px;color: black">{{item.materialBh}}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                状态
              </template>
              <el-button size="mini" type="success" icon="el-icon-check" circle></el-button>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                型号
              </template>
              {{item.materialXingh}}
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                规格
              </template>
              {{item.materialGuig}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                电压等级
              </template>
              {{item.materialDiany}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                米数
              </template>
              {{item.materialMs}}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card" style="background-color: green;" :body-style="{backgroundColor: '#fff' }">
          <div slot="header" class="clearfix">
            <span>绿色线芯B区</span>
          </div>
          <el-descriptions border :column="2" size="small" v-for="(item,index) in materialDetailB" :key="item.materialBh">
            <el-descriptions-item :span="2">
              <template slot="label">
                库位
              </template>
              <span style="font-size: 15px;color: black">{{item.materialBh}}</span>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                型号
              </template>
              {{item.materialXingh}}
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                规格
              </template>
              {{item.materialGuig}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                电压等级
              </template>
              {{item.materialDiany}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                米数
              </template>
              {{item.materialMs}}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card" style="background-color: red;" :body-style="{backgroundColor: '#fff' }">
          <div slot="header" class="clearfix">
            <span>红色线芯C区</span>
          </div>
          <el-descriptions border :column="2" size="small" v-for="(item,index) in materialDetailC" :key="item.materialBh">
            <el-descriptions-item :span="2">
              <template slot="label">
                库位
              </template>
              <span style="font-size: 15px;color: black">{{item.materialBh}}</span>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                型号
              </template>
              {{item.materialXingh}}
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                规格
              </template>
              {{item.materialGuig}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                电压等级
              </template>
              {{item.materialDiany}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                米数
              </template>
              {{item.materialMs}}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
</div>


</template>

<script>
    export default {
        name: "locationSet",
        data() {
          return {
            //线芯摆放库位信息
            materialDetailA: [{materialBh:'A-1', materialXingh: 'YJV', materialGuig: '1*10', materialDiany: '1kV', materialMs: '1.5'},
              {materialBh:'A-2',materialXingh: 'YJV2', materialGuig: '2*10', materialDiany: '2kV', materialMs: '2.5'},
              {materialBh:'A-3',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5'},
              {materialBh:'A-4',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5'},
              {materialBh:'A-5',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5'},
              {materialBh:'A-6',materialXingh: 'YJV2', materialGuig: '2*10', materialDiany: '2kV', materialMs: '2.5'},
              {materialBh:'A-7',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5'},
              {materialBh:'A-8',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5'}],

            materialDetailB: [{materialBh:'B-1',materialXingh: 'YJV', materialGuig: '1*10', materialDiany: '1kV', materialMs: '1.5'},
              {materialBh:'B-2',materialXingh: 'YJV2', materialGuig: '2*10', materialDiany: '2kV', materialMs: '2.5'},
              {materialBh:'B-3',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5'},
              {materialBh:'B-4',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5'},
              {materialBh:'B-5',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5'},
              {materialBh:'B-6',materialXingh: 'YJV2', materialGuig: '2*10', materialDiany: '2kV', materialMs: '2.5'},
              {materialBh:'B-7',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5'},
              {materialBh:'B-8',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5'}],

            materialDetailC: [{materialBh:'C-1',materialXingh: 'YJV', materialGuig: '1*10', materialDiany: '1kV', materialMs: '1.5'},
              {materialBh:'C-2',materialXingh: 'YJV2', materialGuig: '2*10', materialDiany: '2kV', materialMs: '2.5'},
              {materialBh:'C-3',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5'},
              {materialBh:'C-4',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5'},
              {materialBh:'C-5',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5'},
              {materialBh:'C-6',materialXingh: 'YJV2', materialGuig: '2*10', materialDiany: '2kV', materialMs: '2.5'},
              {materialBh:'C-7',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5'},
              {materialBh:'C-8',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5'}],
          }
        }
    }
</script>

<style scoped>

</style>