root/screen-huahong
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

拷贝晟华新大屏

Browse Source
This commit is contained in:
caill
2024-02-19 17:27:25 +08:00
commit dd63a23721
106 changed files with 28667 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/pages/modules/home/left/index.vue Normal file
View File

@@ -0,0 +1,117 @@
<template>
<div class="n_container">
<!-- <div class="style_block" style="left: calc(100% / 3);top:0;"></div>
<div class="style_block" style="background: green;left: calc(100% / 3);top:calc(100% / 3);"></div>
<div class="style_block" style="left: calc(100% / 3);bottom: 0"></div>
<div class="style_block" style="background: green;left: calc(200% / 3);top:0;"></div>
<div class="style_block" style="left: calc(200% / 3);top:calc(100% / 3);"></div>
<div class="style_block" style="background: blue;left: calc(200% / 3);bottom: 0"></div>
<div class="style_block" style="background: yellow;top: calc(100% / 3);bottom: 0"></div> -->
<div class="n_header">
<div class="n_header_h1">
<h1>生产数据</h1>
</div>
<div class="n_header_h2">
<h2>辽宁晟华耐火材料有限公司</h2>
</div>
</div>
<div class="left_bg"></div>
<div class="button_bg"></div>
<div class="n_body_container">
<div class="n_left_wraper">
<left-page></left-page>
</div>
<div class="n_right_wraper">
<right-page></right-page>
</div>
</div>
</div>
</template>
<script>
import leftPage from './left.vue'
import rightPage from './right.vue'
export default {
components: {
leftPage,
rightPage
}
}
</script>
<style lang="stylus" scoped>
.n_container
position relative
width 100%
height 100%
background center / 100% url('../../../../images/bg-home_left.jpg') no-repeat
overflow hidden
.n_header
position absolute
left 0
top 0
width 100%
height 181px
background center / 100% url('../../../../images/bg-top_left.png') no-repeat
.n_header_h1
width: 100%;
height: 100%;
padding-top 26px
h1
font-size: 60px;
font-family: 'YouSheBiaoTiHei';
font-weight: 400;
color: transparent;
line-height: 44px;
opacity: 0.89;
letter-spacing 18px
background: linear-gradient(0deg, #AAD0F6 0%, #D7E7F5 53.3154296875%, #E0EAF6 100%);
filter: drop-shadow(#092F6D 1px 4px 1px);
-webkit-background-clip: text;
background-clip: text;
text-align right
margin-right -9px
.n_header_h2
position absolute
top 18px
left 29px
width 562px
height 31px
h2
font-size: 42px;
font-family: 'YouSheBiaoTiHei';
font-weight: 400;
color: transparent;
line-height: 29px;
background: linear-gradient(0deg, #B6C3D3 0%, #E3E9F2 53.3154296875%, #FEFEFE 100%);
-webkit-background-clip: text;
background-clip: text;
.left_bg
position absolute
left 0
top 111px
width 34px
height 839px
background center / 100% url('../../../../images/bg-left.png') no-repeat
.button_bg
position absolute
left 0
bottom 0
width 100%
height 46px
background center / 100% url('../../../../images/bg-button_left.png') no-repeat
.n_body_container
width 100%
height 100%
padding 125px 0 50px 50px
display: flex;
justify-content: space-between;
align-items: center;
.n_left_wraper
width 935px
height 100%
.n_right_wraper
width calc(100% - 965px)
height 100%
padding-top 5px
</style>

1225
src/pages/modules/home/left/left.vue Normal file
View File

File diff suppressed because it is too large Load Diff

10
src/pages/modules/home/left/right.vue Normal file
View File

@@ -0,0 +1,10 @@
<template>
<div class="right_wraper"></div>
</template>
<style lang="stylus" scoped>
@import '~@style/mixin'
.right_wraper
_wh(100%, 100%)
background center / 100% 100% url('../../../../images/bg-center_left.jpg') no-repeat
</style>

95
src/pages/modules/home/right/index.vue Normal file
View File

@@ -0,0 +1,95 @@
<template>
<div class="n_container">
<div class="n_header">
<div class="n_header_h1">
<h1>控制中心</h1>
</div>
<v-time></v-time>
</div>
<div class="right_bg"></div>
<div class="button_bg"></div>
<div class="n_body_container">
<div class="n_left_wraper">
<left-page></left-page>
</div>
<div class="n_right_wraper">
<right-page></right-page>
</div>
</div>
</div>
</template>
<script>
import leftPage from './left.vue'
import rightPage from './right.vue'
import vTime from '@components/time.vue'
export default {
components: {
leftPage,
rightPage,
vTime
}
}
</script>
<style lang="stylus" scoped>
.n_container
position relative
width 100%
height 100%
background center / 100% url('../../../../images/bg-home_right.jpg') no-repeat
overflow hidden
.n_header
position absolute
left 0
top 0
width 100%
height 181px
background center / 100% url('../../../../images/bg-top_right.png') no-repeat
.n_header_h1
width: 100%;
height: 100%;
padding-top 26px
h1
font-size: 60px;
font-family: 'YouSheBiaoTiHei';
font-weight: 400;
color: transparent;
line-height: 44px;
opacity: 0.89;
letter-spacing 18px
background: linear-gradient(0deg, #AAD0F6 0%, #D7E7F5 53.3154296875%, #E0EAF6 100%);
filter: drop-shadow(#092F6D 1px 4px 1px);
-webkit-background-clip: text;
background-clip: text;
text-align left
padding-left 9px
.right_bg
position absolute
right 0
top 111px
width 34px
height 839px
background center / 100% url('../../../../images/bg-right.png') no-repeat
.button_bg
position absolute
left 0
bottom 0
width 100%
height 46px
background center / 100% url('../../../../images/bg-button_right.png') no-repeat
.n_body_container
width 100%
height 100%
padding 125px 50px 50px 0
display: flex;
justify-content: space-between;
align-items: center;
.n_left_wraper
width calc(100% - 965px)
height 100%
padding-top 5px
.n_right_wraper
width 935px
height 100%
</style>

174
src/pages/modules/home/right/left.vue Normal file
View File

@@ -0,0 +1,174 @@
<template>
<div class="left_wraper">
<div class="table_wraper_1">
<div class="scroll_wrap">
<div class="scroll_title">
<p>生产完成</p>
</div>
<div class="scroll_container_1">
<vue-seamless-scroll :data="productReport" :class-option="defaultOption1">
<ul class="scroll-ul_1">
<li v-for="(e, i) in productReport" :key="i">
<div class="scroll-ul_1_div">{{e.create_time}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div">{{e.number}}</div>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
</div>
<div class="table_wraper_2">
<div class="scroll_wrap">
<div class="scroll_title">
<p>设备状态</p>
</div>
<div class="scroll_container_1">
<vue-seamless-scroll :data="deviceReport" :class-option="defaultOption1">
<ul class="scroll-ul_1 scroll-ul_2">
<li v-for="(e, i) in deviceReport" :key="i">
<div class="scroll-ul_1_div">{{e.failure_time}}</div>
<div class="scroll-ul_1_div">{{e.device_code}}</div>
<div class="scroll-ul_1_div">
<span class="state" :class="'state_' + e.failure_info"></span>
<p class="state_name">{{['关机', '待机', '生产中', '故障'][Number(e.failure_info)]}}</p>
</div>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
</div>
</div>
</template>
<script>
// import { homepageEquipment } from '@js/mork2.js'
import { homepageEquipment } from '@js/getData2.js'
export default {
data () {
return {
interTime: this.$store.getters.setTime,
timer: null,
productReport: [],
deviceReport: []
}
},
computed: {
defaultOption1 () {
return {
step: 0.4, // 数值越大速度滚动越快
limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
}
}
},
created () {
this._homepageEquipment()
this.refresh()
},
destroyed () {
clearInterval(this.timer)
},
methods: {
refresh () {
this.timer = setInterval(() => {
this._homepageEquipment()
}, this.interTime)
},
async _homepageEquipment () {
let res = await homepageEquipment()
this.productReport = [...res.productReport]
this.deviceReport = [...res.deviceReport]
}
}
}
</script>
<style lang="stylus" scoped>
@import '~@style/mixin'
.left_wraper
position relative
_wh(100%, 100%)
background center / 100% 100% url('../../../../images/bg-center_right.jpg') no-repeat
.table_wraper_1
position absolute
top 678px
right 408px
_wh(358px, 195px)
.table_wraper_2
position absolute
top 678px
right 30px
_wh(358px, 195px)
.scroll_wrap
_wh(100%, 100%)
.scroll_title
_wh(100%, 31px)
background center / 100% 100% url('../../../../images/bg-title_3.png') no-repeat
padding 8px 8px 0 39px
p
font-size 20px
font-family: 'YouSheBiaoTiHei';
font-style: italic;
color: transparent;
line-height 20px
background: linear-gradient(0deg, #F9FEFF 0%, #F5FCFF 53.3154296875%, #BAE9FF 100%);
-webkit-background-clip: text;
background-clip: text;
.scroll_container_1
width 100%
height calc(100% - 31px)
overflow hidden
.scroll-ul_1
li
_wh(100%, 40px)
border-bottom 1px solid rgba(122,159,224,0.17)
background-color rgba(31,46,73,0.9)
opacity: 0.9
.scroll-ul_1_div
float left
height 40px
_fj(row, center)
_font(16px, 16px, #B2BBD7,,center)
font-family: 'SourceHanSansCN-Regular';
font-style: italic;
word-wrap break-word
word-break break-all
// white-space nowrap
padding 0 5px
overflow hidden
&:nth-child(1)
width 29%
&:nth-child(2)
width 51%
&:nth-child(3)
width 20%
.state
display block
_wh(20px, 14px)
.state_name
width calc(100% - 20px)
.scroll-ul_2
li
.scroll-ul_1_div
&:nth-child(1)
width 47%
&:nth-child(2)
width 30%
&:nth-child(3)
width 23%
.state_0
background center / 100% 100% url('../../../../images/state_0.png') no-repeat
.state_1
background center / 100% 100% url('../../../../images/state_1.png') no-repeat
.state_2
background center / 100% 100% url('../../../../images/state_2.png') no-repeat
.state_3
background center / 100% 100% url('../../../../images/state_3.png') no-repeat
</style>

1025
src/pages/modules/home/right/right.vue Normal file
View File

File diff suppressed because it is too large Load Diff