|
|
|
@ -1,32 +1,47 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div id="data-view">
|
|
|
|
|
<dv-full-screen-container>
|
|
|
|
|
<div class="main-header">
|
|
|
|
|
<div class="mh-left">
|
|
|
|
|
<v-scale-screen width="1920" height="1080" :fullScreen="true">
|
|
|
|
|
<div class="app-container home" style="">
|
|
|
|
|
<div class="head">
|
|
|
|
|
<div class="head-content">
|
|
|
|
|
<div class="title">成品包装线生产看板</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="head-logo">
|
|
|
|
|
<img src="../../../assets/images/logo.png" alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mh-middle">成品包装线生产看板</div>
|
|
|
|
|
<div class="mh-right">{{currentDateTime}}
|
|
|
|
|
<div class="back">
|
|
|
|
|
<el-button
|
|
|
|
|
@click="back()"
|
|
|
|
|
type="primary"
|
|
|
|
|
icon="el-icon-s-home"
|
|
|
|
|
></el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<dv-border-box-1 class="main-container">
|
|
|
|
|
<div class="content-top">
|
|
|
|
|
<div class="timebox">
|
|
|
|
|
<div class="time">
|
|
|
|
|
{{ currentDateTime }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="mc-top">
|
|
|
|
|
<Top-Left-Cmp :data="valueForTopLeftCmp"/>
|
|
|
|
|
<Top-Middle-Cmp :data="valueForTopMiddleCmp" />
|
|
|
|
|
<Top-right-Cmp />
|
|
|
|
|
<div class="mc-left">
|
|
|
|
|
<Top-Left-Cmp :data="valueForTopLeftCmp"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mc-middle">
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mc-right">
|
|
|
|
|
<Top-Middle-Cmp :data="valueForTopMiddleCmp" style="height: 100%;"/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mc-bottom">
|
|
|
|
|
<BottomRightTable1 :tableData="BottomRightTableValue"/>
|
|
|
|
|
<BottomRightTable1 :tableData="BottomRightTableValue" style="height: 600px; margin-top: 50px"/>
|
|
|
|
|
<!-- 设置 .mc-bottom 的高度,你可以根据实际情况调整 -->
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- <div class="mc-bottom">-->
|
|
|
|
|
<!-- <BottomRightTable1 v-for="index in 4" :key="index+4" :tableIndex="index" :tableData="BottomRightTable2Value"/>-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
</dv-border-box-1>
|
|
|
|
|
|
|
|
|
|
</dv-full-screen-container>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</v-scale-screen>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
@ -104,100 +119,92 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="less">
|
|
|
|
|
#data-view {
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
|
|
|
|
.app-container {
|
|
|
|
|
padding: 0px 24px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
.home {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-color: #030409;
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
|
|
|
|
#dv-full-screen-container {
|
|
|
|
|
background-image: url("../../../assets/images/bg-finishproduct.png");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
box-shadow: 0 0 3px blue;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.main-header {
|
|
|
|
|
height: 80px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: flex-end;
|
|
|
|
|
|
|
|
|
|
.mh-left {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
background: url("../../../assets/images/bg-finishproduct.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-color: #050711;
|
|
|
|
|
.head {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 74px;
|
|
|
|
|
position: relative;
|
|
|
|
|
.head-content {
|
|
|
|
|
height: 74px;
|
|
|
|
|
background-image: url("../../../assets/images/bg-head.png");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
.title {
|
|
|
|
|
font-size: 42px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mh-middle {
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
.head-logo {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0px;
|
|
|
|
|
top: 1px;
|
|
|
|
|
img {
|
|
|
|
|
height: 38px;
|
|
|
|
|
// width: ;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mh-left, .mh-right {
|
|
|
|
|
width: 200px;
|
|
|
|
|
.back {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0px;
|
|
|
|
|
top: 5px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.main-container {
|
|
|
|
|
height: calc(~"100% - 80px");
|
|
|
|
|
margin-left:0px;
|
|
|
|
|
.mc-top, .mc-bottom ,mc-bottom-1 {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding: 30px;
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
.content-top {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
position: relative;
|
|
|
|
|
.timebox {
|
|
|
|
|
width: 480px;
|
|
|
|
|
height: 100px;
|
|
|
|
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: -17px;
|
|
|
|
|
right: 0px;
|
|
|
|
|
.time {
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
line-height: 71px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.content {
|
|
|
|
|
margin-top: 63px;
|
|
|
|
|
display: block;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
.mc-top {
|
|
|
|
|
height: 40%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mc-bottom-1, .mc-bottom-2 {
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.top-left-cmp, .bottom-left-container {
|
|
|
|
|
width: 32%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.top-middle-cmp, .top-right-cmp {
|
|
|
|
|
width: 34%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bottom-left-container {
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.border-box-content {
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mcb-decoration-1, .mcb-decoration-2 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
margin-left: -2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mcb-decoration-1 {
|
|
|
|
|
top: 5%;
|
|
|
|
|
transform: rotate(180deg);
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
.mc-left {
|
|
|
|
|
flex: 2; // 占据剩余的空间
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mcb-decoration-2 {
|
|
|
|
|
top: 50%;
|
|
|
|
|
.mc-middle {
|
|
|
|
|
flex: 1; // 占据剩余的空间
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bottom-left-chart-1, .bottom-left-chart-2 {
|
|
|
|
|
width: 50%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
.mc-right {
|
|
|
|
|
flex: 2; // 占据剩余的空间
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bottom-right-container {
|
|
|
|
|
width: 68%;
|
|
|
|
|
padding-left: 30px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|