<!--
|
* @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>
|
<!-- 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>
|
</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">
|
<!-- 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>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
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
|
},
|
data() {
|
return {
|
|
};
|
},
|
filters: {
|
numsFilter(msg) {
|
return msg || 0;
|
},
|
},
|
created() {
|
},
|
|
mounted() { },
|
methods: {
|
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
// 内容
|
.contents {
|
display: flex;
|
justify-content: center;
|
gap: 10px;
|
|
.contetn_left,
|
.contetn_right {
|
width: 600px;
|
// height: 100%;
|
box-sizing: border-box;
|
gap: 10px;
|
// padding: 16px 0;
|
}
|
|
.contetn_center {
|
width: 660px;
|
gap: 10px;
|
}
|
|
//左右两侧 三个块
|
.contetn_lr-item {
|
gap: 10px;
|
height: 480px;
|
}
|
|
.contetn_center_top {
|
width: 100%;
|
}
|
|
// 中间
|
.contetn_center {
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
// justify-content: space-around;
|
}
|
|
.contetn_center-bottom {
|
height: 315px;
|
}
|
|
//左边 右边 结构一样
|
.contetn_left,
|
.contetn_right {
|
display: flex;
|
flex-direction: column;
|
// justify-content: space-around;
|
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);
|
}
|
}
|
</style>
|
