<!--
|
* @Author: daidai
|
* @Date: 2022-03-04 09:23:59
|
* @LastEditors: Please set LastEditors
|
* @LastEditTime: 2022-05-07 11:05:02
|
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue
|
-->
|
<template>
|
<div class="contents">
|
<div class="contetn_left">
|
<div class="pagetab">
|
<div class="item">实时监测</div>
|
</div>
|
<!-- 巷道任务信息 -->
|
<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">
|
<!-- 日周月出入库信息和库存有货数量 -->
|
<ItemWrap class="contetn_center_top contetn_lr-item" title="出入库统计与库存信息">
|
<inventory-stats />
|
</ItemWrap>
|
<!-- 日出入库柱形图对比 -->
|
<ItemWrap class="contetn_left-bottom contetn_lr-item" title="报警信息" style="padding: 0 10px 16px 10px">
|
<daily-inout-chart />
|
</ItemWrap>
|
</div>
|
<div class="contetn_right">
|
<!-- 货位状态 -->
|
<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'
|
import dailyInoutChart from './daily-inout-chart.vue'
|
import sc01LocationStatus from './sc01-location-status.vue'
|
import sc02LocationStatus from './sc02-location-status.vue'
|
export default {
|
components: {
|
sc01TaskInfo,
|
sc02TaskInfo,
|
inventoryStats,
|
dailyInoutChart,
|
sc01LocationStatus,
|
sc02LocationStatus
|
},
|
computed: {
|
...mapState('setting', ['currentTask', 'currentLocation'])
|
},
|
filters: {
|
numsFilter(msg) {
|
return msg || 0;
|
},
|
},
|
created() {
|
},
|
|
mounted() { },
|
methods: {},
|
|
};
|
</script>
|
<style lang="scss" scoped>
|
// 内容
|
.contents {
|
display: flex;
|
justify-content: center;
|
gap: 10px;
|
height: 100%;
|
|
.contetn_left,
|
.contetn_right {
|
width: 600px;
|
box-sizing: border-box;
|
gap: 10px;
|
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; // 恢复原来的固定高度
|
}
|
|
.contetn_center_top {
|
width: 100%;
|
}
|
|
// 中间
|
.contetn_center {
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
}
|
|
.contetn_center-bottom {
|
height: 315px;
|
}
|
|
//左边 右边 结构一样
|
.contetn_left,
|
.contetn_right {
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
position: relative;
|
}
|
}
|
|
.labels {
|
flex-shrink: 0;
|
font-size: 24px;
|
color: rgba(255, 255, 255, 0.6);
|
float: left;
|
margin-right: 11.5%;
|
}
|
|
.labelsd {
|
flex-shrink: 0;
|
font-size: 24px;
|
color: rgba(255, 255, 255, 0.6);
|
float: left;
|
margin-left: 6%;
|
}
|
|
@keyframes rotating {
|
0% {
|
-webkit-transform: rotate(0) scale(1);
|
transform: rotate(0) scale(1);
|
}
|
|
50% {
|
-webkit-transform: rotate(180deg) scale(1.1);
|
transform: rotate(180deg) scale(1.1);
|
}
|
|
100% {
|
-webkit-transform: rotate(360deg) scale(1);
|
transform: rotate(360deg) scale(1);
|
}
|
}
|
|
// 任务内容区域
|
.task-content {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
}
|
</style>
|
