平面库区优化

huanghongfeng

2024-05-11 ccb5c15ee5cf72d8567997ae25fce6518fb63ae0

 ´úÂë¹ÜÀí/WMS/WMS_Client/src/views/Home.vue

@@ -1,22 +1,25 @@
<template>
  <div>
    <el-button type="success" style="width: 10%;height: 50px;" v-on:click="selList()">刷新</el-button>
  </div>
  <div v-for="(index,inst) in datalist.length" :key="inst" style="padding: 10px;">
    <h1 style="border-bottom: 1px dashed silver; padding: 5px;;height: 52px;">
      <span v-if="inst==0">叠盘区</span>
      <span v-else-if="inst==1">上料区</span>
      <span v-else-if="inst==2">下料区</span>
      <span v-else-if="inst==3">外协区</span>
      <span v-else-if="inst==4">托盘叠放区</span>
      <span v-else>{{inst-3}}库区</span>
      <span style="margin-left: 40px;">
  <div class="fixed-row">
    <el-button type="success" style="width: 10%;height: 40px;font-size: 35px;" v-on:click="selList()">刷新</el-button>
    <span style="margin-left: 40px;">
        <el-button  circle style="background-color: #409eff;color: #000;">有货</el-button>
        <el-button  circle style="background-color: lightgreen;color: #000;">空货位</el-button>
        <el-button  circle style="background-color: yellow;color: #000;">出入库占用</el-button>
        <el-button  circle style="background-color: red;color: #000;">异常</el-button>
        <el-button  circle style="background-color: #C0C4CC;color: #000;">禁用</el-button>
      </span>
  </div>
  <div style="height: 50px;">
    
  </div>
  <div v-for="(index,inst) in datalist.length" :key="inst" style="padding: 10px;">
    <h1 style="border-bottom: 1px dashed silver; padding: 5px;;height: 52px;">
      <span v-if="inst==0">托盘叠放区</span>
      <span v-else-if="inst==1">上料区</span>
      <span v-else-if="inst==2">下料区</span>
      <span v-else-if="inst==3">外协区</span>
      <span v-else-if="inst==4">叠盘区</span>
      <span v-else>{{inst-3}}库区</span>
    </h1>
  <div class="table-container">
    <div class="scrollable-table">
@@ -26,9 +29,11 @@
          :style="{ 'background-color': getBackgroundColor(items.enable,items.location_state) }">
            <el-tooltip class="item" effect="dark" placement="right" >
              <template #content v-if="items.stationType!=='' && items.bindSN !== '' && items.stationType!==null && items.bindSN !== null">
                <div>库位编号：{{ items.stationCode }}</div>
                <div>物料类型(图号)： {{ items.stationType }}</div>
                <div>炉号： {{ items.heatNumber }}</div>
                <div>车轮SN号：{{ items.bindSN }}</div>
                <div>钢坯号：{{ items.billetID }}</div>
              </template>
              <template #content v-else>
                <div>目前暂无信息</div>
@@ -94,8 +99,12 @@
          return 'yellow';
        case 'OutBusy':
          return 'yellow';
        case 'Busy':
          return 'yellow';
        case 'Abnormal':
          return 'red';
        case 'Abnormal':
          return 'yellow';
        default:
          return 'transparent';
      }
@@ -154,4 +163,11 @@
.table-container::-webkit-scrollbar-thumb {
  background-color: #ccc; 
}

.fixed-row {
  position: fixed;
  width: 100%; /* è®©è¡Œçš„宽度占满整个视窗 */
  background-color: #fff; /* å¦‚果需要，设置背景色 */
  z-index: 3; /* ç¡®ä¿å›ºå®šè¡Œåœ¨å…¶ä»–内容之上 */
}
</style>