renmingwang
2026-03-25 6d56bf4daf08c4c7c6d193d98ed0b547dc473451
ÏîÄ¿´úÂë/´óÆÁ/src/views/indexs/index.vue
@@ -11,13 +11,12 @@
      <div class="pagetab">
        <div class="item">实时监测</div>
      </div>
      <!-- SC01巷道任务信息 -->
      <ItemWrap class="contetn_left-bottom contetn_lr-item" title="SC01巷道任务信息" style="padding: 0 10px 16px 0px">
        <sc01-task-info />
      </ItemWrap>
      <!-- SC02巷道任务信息 -->
      <ItemWrap class="contetn_left-bottom contetn_lr-item" title="SC02巷道任务信息">
        <sc02-task-info />
      <!-- å··é“任务信息 -->
      <ItemWrap class="contetn_left-bottom contetn_lr-item" title="巷道任务信息" style="padding: 0 10px 16px 0px; height: 92%;">
        <div class="task-content">
          <sc01-task-info v-if="currentTask === 'sc01'" />
          <sc02-task-info v-else-if="currentTask === 'sc02'" />
        </div>
      </ItemWrap>
    </div>
    <div class="contetn_center">
@@ -26,24 +25,24 @@
        <inventory-stats />
      </ItemWrap>
      <!-- æ—¥å‡ºå…¥åº“柱形图对比 -->
      <ItemWrap class="contetn_left-bottom contetn_lr-item" title="日出入库对比" style="padding: 0 10px 16px 10px">
      <ItemWrap class="contetn_left-bottom contetn_lr-item" title="报警信息" style="padding: 0 10px 16px 10px">
        <daily-inout-chart />
      </ItemWrap>
    </div>
    <div class="contetn_right">
      <!-- SC01货位状态 -->
      <ItemWrap class="contetn_left-bottom contetn_lr-item" title="SC01货位状态">
        <sc01-location-status />
      </ItemWrap>
      <!-- SC02货位状态 -->
      <ItemWrap class="contetn_left-bottom contetn_lr-item" title="SC02货位状态">
        <sc02-location-status />
      <!-- è´§ä½çŠ¶æ€ -->
      <ItemWrap class="contetn_left-bottom contetn_lr-item" title="货位状态" style="padding: 0 10px 16px 0px; height: 92%;">
        <div class="task-content">
          <sc01-location-status v-if="currentLocation === 'sc01'" />
          <sc02-location-status v-else-if="currentLocation === 'sc02'" />
        </div>
      </ItemWrap>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import sc01TaskInfo from './sc01-task-info.vue'
import sc02TaskInfo from './sc02-task-info.vue'
import inventoryStats from './inventory-stats.vue'
@@ -59,10 +58,8 @@
    sc01LocationStatus,
    sc02LocationStatus
  },
  data() {
    return {
    };
  computed: {
    ...mapState('setting', ['currentTask', 'currentLocation'])
  },
  filters: {
    numsFilter(msg) {
@@ -73,9 +70,8 @@
  },
  mounted() { },
  methods: {
  methods: {},
  },
};
</script>
<style lang="scss" scoped>
@@ -84,25 +80,34 @@
  display: flex;
  justify-content: center;
  gap: 10px;
  height: 100%;
  .contetn_left,
  .contetn_right {
    width: 600px;
    // height: 100%;
    box-sizing: border-box;
    gap: 10px;
    // padding: 16px 0;
    display: flex;
    flex-direction: column;
  }
  .contetn_center {
    width: 660px;
    gap: 10px;
    display: flex;
    flex-direction: column;
  }
  // å·¦ä¾§SC01任务信息 - ä¿æŒä¸Žå…¶ä»–区域相同的高度
  .contetn_left-item {
    height: px; // æ¢å¤åŽŸæ¥çš„å›ºå®šé«˜åº¦ï¼Œå’Œå³ä¾§å•ä¸ªå—çš„é«˜åº¦ä¸€è‡´
    flex-shrink: 0; // é˜²æ­¢åŽ‹ç¼©
  }
  //左右两侧 ä¸‰ä¸ªå—
  .contetn_lr-item {
    gap: 10px;
    height: 480px;
    height: 480px; // æ¢å¤åŽŸæ¥çš„å›ºå®šé«˜åº¦
  }
  .contetn_center_top {
@@ -114,7 +119,6 @@
    display: flex;
    flex-direction: column;
    gap: 10px;
    // justify-content: space-around;
  }
  .contetn_center-bottom {
@@ -126,7 +130,6 @@
  .contetn_right {
    display: flex;
    flex-direction: column;
    // justify-content: space-around;
    gap: 10px;
    position: relative;
  }
@@ -164,4 +167,11 @@
    transform: rotate(360deg) scale(1);
  }
}
</style>
// ä»»åŠ¡å†…å®¹åŒºåŸŸ
.task-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>