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

入库看吧

Browse Source
This commit is contained in:
xiangxy
2024-04-18 11:13:48 +08:00
parent bfbf95f944
commit e49cdfcd31
6 changed files with 1088 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

436
src/pages/modules/InStore.vue Normal file
View File

@@ -0,0 +1,436 @@
<template>
<section class="bg">
<t-header title="宜宾高测原料入库看板">
</t-header>
<div class="container">
<div class="sec sec1">
<div class="four_wrap">
<div class="item_tip item_tip_bg_l">
<div class="item_tip_left">库存情况</div>
</div>
<div class="item_content con01">
<div class="lbox">
<div id="echart_d01" style="width: 100%; height: 100%"></div>
</div>
<div class="rbox">
<div class="rbox-con">
<div class="title">总库存</div>
<div class="desc"><span>12000</span><span>条</span></div>
<div class="desc"><span>2000</span><span>吨</span></div>
</div>
<div class="rbox-con">
<div class="title">待入库存</div>
<div class="desc"><span>2000</span><span>条</span></div>
<div class="desc"><span>50</span><span>吨</span></div>
</div>
</div>
</div>
</div>
<div class="four_wrap">
<div class="item_tip item_tip_bg_l">
<div class="item_tip_left">货位占用</div>
</div>
<div class="item_content con01">
<div class="lbox">
<div class="list-con" style="width: 100%; height: 100%;">
<div class="li">
<p class="li-left">货位数:<span>400</span>个</p>
<p class="li-right">已使用:<span>200</span>个</p>
</div>
<div class="li">
<p class="li-left">剩余数:<span>200</span>个</p>
</div>
<div class="li">
<p class="li-left">空托位数:<span>20</span>个</p>
<p class="li-right">剩余:<span>10</span>个</p>
</div>
<div class="li">
<p class="li-left">空托盘垛:<span>10</span>垛</p>
<p class="li-right">数量:<span>60</span>个</p>
</div>
</div>
</div>
<div class="rbox">
<div class="rbox-con">
<!-- <div class="title">总库存</div>
<div class="desc"><span>12000</span><span>条</span></div>
<div class="desc"><span>2000</span><span>吨</span></div> -->
</div>
<div class="rbox-con">
<!-- <div class="title">待入库存</div>
<div class="desc"><span>2000</span><span>条</span></div>
<div class="desc"><span>50</span><span>吨</span></div> -->
</div>
</div>
</div>
</div>
</div>
<div class="sec sec2">
<div class="four_wrap">
<div class="item_tip item_tip_bg_l">
<div class="item_tip_left">库内物料</div>
</div>
<div class="item_content">
<div class="scroll_wrap">
<ul class="scroll_tab_2">
<li>序号</li>
<li>托盘号</li>
<li>物料编码</li>
<li>名称</li>
<li>数量(条)</li>
<li>重量(kg)</li>
<li>供应商</li>
</ul>
<div class="scroll_container_2">
<vue-seamless-scroll :data="ProductionTask" :class-option="defaultOption2">
<ul class="scroll-ul_2">
<li v-for="(e, i) in ProductionTask" :key="i" :class="['green', 'red'][Number(e.state)]">
<div class="scroll-ul_2_div">{{i + 1}}</div>
<div class="scroll-ul_2_div">{{e.palletSN}}</div>
<div class="scroll-ul_2_div">{{e.productName}}</div>
<div class="scroll-ul_2_div">{{e.productDescription}}</div>
<div class="scroll-ul_2_div">{{e.qty}}</div>
<div class="scroll-ul_2_div">{{e.incomingWeight}}</div>
<div class="scroll-ul_2_div">{{e.supplierName}}</div>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
</div>
</div>
<div class="four_wrap">
<div class="item_tip item_tip_bg_l">
<div class="item_tip_left">未入库物料</div>
</div>
<div class="item_content">
<div class="scroll_wrap">
<ul class="scroll_tab_2">
<li>序号</li>
<li>托盘号</li>
<li>物料编码</li>
<li>名称</li>
<li>数量(条)</li>
<li>重量(kg)</li>
<li>供应商</li>
</ul>
<div class="scroll_container_2">
<vue-seamless-scroll :data="ProductionTask" :class-option="defaultOption2">
<ul class="scroll-ul_2">
<li v-for="(e, i) in ProductionTask" :key="i" :class="['green', 'red'][Number(e.state)]">
<div class="scroll-ul_2_div">{{i + 1}}</div>
<div class="scroll-ul_2_div">{{e.palletSN}}</div>
<div class="scroll-ul_2_div">{{e.productName}}</div>
<div class="scroll-ul_2_div">{{e.productDescription}}</div>
<div class="scroll-ul_2_div">{{e.qty}}</div>
<div class="scroll-ul_2_div">{{e.incomingWeight}}</div>
<div class="scroll-ul_2_div">{{e.supplierName}}</div>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="bottom"></section>
</section>
</template>
<script>
import THeader from '@components/header3.vue'
import { cockpitpress } from '@js/getData1'
// import {cockpitpress} from '@js/mork1.js'
export default {
name: 'ProdCount',
components: {
THeader
},
data () {
return {
timeOut: null,
interTime: this.$store.getters.setTime,
timer: null,
ProductionTask: [],
ShiftProductionList: [],
resData: {},
myCharts01: ''
}
},
computed: {
defaultOption2 () {
return {
timer1: null,
timer2: null,
step: 0.4, // 数值越大速度滚动越快
limitMoveNum: 6, // 开始无缝滚动的数据量 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)
}
}
},
mounted () {
this.setEchart01()
this.initData()
this.refresh()
},
beforeDestroy () {
clearInterval(this.timer)
clearInterval(this.timeOut)
},
methods: {
refresh () {
this.timer = setInterval(() => {
this.initData()
}, this.interTime)
},
async initData () {
let res = await cockpitpress()
clearInterval(this.timeOut)
this.resData = res
this.ProductionTask = res.ProductionTask
this.ShiftProductionList = res.ShiftProductionList
},
setEchart01 () {
let data = [
{
value: 10,
name: '1号砖'
},
{
value: 20,
name: '2号砖'
},
{
value: 30,
name: '3号砖'
},
{
value: 40,
name: '4号砖'
},
{
value: 50,
name: '5号砖'
},
{
value: 60,
name: '6号砖'
}
]
// let dataName = []
// this.resData.mixProduction.map(el => {
// dataName.push(el.name)
// })
// let data = this.resData.mixProduction
var option = {
legend: {
// orient: 'vertical',
orient: 'horizontal',
top: '3%',
// right: 0,
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: 16
},
itemGap: 10.86,
itemWidth: 14.16,
itemHeight: 7.38,
// data: dataName
data: ['1号砖', '2号砖', '3号砖', '4号砖', '5号砖', '6号砖']
},
color: ['#0966E8', '#39E083', '#ffee0e', '#f975aa', '#32c5ff', '#f7b502'],
series: [
{
type: 'pie',
radius: ['43%', '70%'],
label: {
normal: {
show: true,
// position: 'inner',
formatter: '{d}%',
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: 12
}
}
},
labelLine: {
show: true
},
data: data
}
]
}
let echart = document.getElementById('echart_d01')
this.myCharts01 = this.$echarts.init(echart)
this.myCharts01.setOption(option)
window.addEventListener('resize', () => {
this.myCharts01.resize()
})
}
}
}
</script>
<style lang="stylus" scoped>
// @import '~@css/mixin'
@import '../../css/mixin'
// @import '~@style/mixin'
.bg
_wh(100%, 100%)
overflow hidden
.container
display flex
align-items center
justify-content center
flex-direction column
_wh(100%, calc(100% - 138px))
padding 30px 25.09px 0
overflow hidden
clear both
.sec
width 100%
height 50%
.sec1
display flex
justify-content space-between
.sec2
display flex
.bottom
_wh(100%, 38px)
background center bottom / 1906px 100% url(../../images/screen1/bottom.png) no-repeat
.blue
color #32C5FF !important
.green
color #30EBC9 !important
.gray
color #516282 !important
.yellow
color #E2BB0E !important
.orange
color #F96700 !important
.red
color #FF0000 !important
.con01
width 48%
display flex
.lbox
width 70%
.rbox
width 30%
.rbox-con
height 50%
.title
font-size 32px
background #548ddd
color #ffffff
text-indent 10px
.desc
font-size 30px
span
display inline-block
line-height 62px
&:nth-child(1)
width 80%
text-align left
color #f7b502
font-weight bold
text-indent 10px
&:nth-child(2)
width 20%
text-align center
color #ffffff
.four_wrap
// _wh(100%, calc(39% - 20px))
margin-top 40px
height 88%
width 50%
padding 0 1%
.scroll-ul_1
width 100%
li
width 100%
line-height 40px
span
_font(16px, 1, #fff,,)
.scroll_th
color #2ef6ff
.item_tip
_wh(100%, 32px)
line-height 32px
padding 0 10px
.item_tip_bg_l
background center center / 100% 100% url(../../images/screen1/bg_title_j.png) no-repeat
.item_tip_left
_wh(60%, 100%)
font-family "SourceHanSansCN"
_font(18px, inherit, #fff, 700, left)
letter-spacing 2px
text-shadow 0 0 9px #159AFF
padding-left 34px
background center left / 22px 22px url(../../images/screen1/bg_title_tip.png) no-repeat
.item_content
_wh(100%, calc(100% - 37px))
margin-top 7px
.scroll_wrap
_wh(100%, 100%)
border 1px solid rgba(8,205,248,0.3)
.scroll_tab_2
_wh(100%, 40px)
border-bottom 1px solid rgba(8,205,248,0.3)
li
float left
width 14%
_font(14px,40px,#78B1DE,,center)
word-wrap break-word
word-break break-all
white-space nowrap
padding 0 2px
overflow hidden
box-sizing border-box
.scroll_container_2
width 100%
// height calc(100% - 40px)
// height 230px
overflow hidden
.scroll-ul_2
li
_wh(100%, 44px)
border-bottom 1px solid rgba(8,205,248,0.3)
&:nth-child(even)
background rgba(1,24,52,0.60)
box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
.scroll-ul_2_div
float left
_wh(14%, 44px)
_fj(center)
_font(12px, 44px, #fff,,center)
word-wrap break-word
word-break break-all
white-space nowrap
padding 0 2px
overflow hidden
.lbox
.list-con
.li
display flex
color #fff
font-weight bold
font-size 36px
line-height 100px
justify-content space-between
padding 0 20px
span
color #f7b502
margin 0 20px
.li-right
margin-left 20px
</style>

408
src/pages/modules/Prod.vue Normal file
View File

@@ -0,0 +1,408 @@
<template>
<section class="bg">
<t-header title="宜宾高测生产看板">
</t-header>
<div class="container">
<div class="four_wrap">
<div class="item_tip item_tip_bg_l">
<div class="item_tip_left">普通回温库物料</div>
</div>
<div class="item_content">
<div class="scroll_wrap">
<ul class="scroll_tab_2">
<li>序号</li>
<li>货号</li>
<li>供应商</li>
<li>型号</li>
<li>回温批次</li>
<li>数量(托)</li>
<li>需回温时间(h)</li>
<li>已回温时间(h)</li>
<li>状态</li>
</ul>
<div class="scroll_container_2">
<vue-seamless-scroll :data="ProductionTask" :class-option="defaultOption2">
<ul class="scroll-ul_2">
<li v-for="(e, i) in ProductionTask" :key="i" :class="['green', 'red'][Number(e.state)]">
<div class="scroll-ul_2_div">{{i + 1}}</div>
<div class="scroll-ul_2_div">{{e.productName}}</div>
<div class="scroll-ul_2_div">{{e.supplierName}}</div>
<div class="scroll-ul_2_div">{{e.productDescription}}</div>
<div class="scroll-ul_2_div">{{e.batch}}</div>
<div class="scroll-ul_2_div">{{e.number}}</div>
<div class="scroll-ul_2_div">{{e.standingTime}}</div>
<div class="scroll-ul_2_div">{{e.usedTime}}</div>
<div class="scroll-ul_2_div">{{e.state}}</div>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
</div>
</div>
<div class="four_wrap">
<div class="item_tip item_tip_bg_l">
<div class="item_tip_left">快速回温库物料</div>
</div>
<div class="item_content">
<div class="scroll_wrap">
<ul class="scroll_tab_2">
<li>序号</li>
<li>货号</li>
<li>供应商</li>
<li>型号</li>
<li>回温批次</li>
<li>数量(托)</li>
<li>需回温时间(h)</li>
<li>已回温时间(h)</li>
<li>状态</li>
</ul>
<div class="scroll_container_2">
<vue-seamless-scroll :data="ProductionTask" :class-option="defaultOption2">
<ul class="scroll-ul_2">
<li v-for="(e, i) in ProductionTask" :key="i" :class="['green', 'red'][Number(e.state)]">
<div class="scroll-ul_2_div">{{i + 1}}</div>
<div class="scroll-ul_2_div">{{e.productName}}</div>
<div class="scroll-ul_2_div">{{e.supplierName}}</div>
<div class="scroll-ul_2_div">{{e.productDescription}}</div>
<div class="scroll-ul_2_div">{{e.batch}}</div>
<div class="scroll-ul_2_div">{{e.number}}</div>
<div class="scroll-ul_2_div">{{e.standingTime}}</div>
<div class="scroll-ul_2_div">{{e.usedTime}}</div>
<div class="scroll-ul_2_div">{{e.state}}</div>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
</div>
</div>
</div>
<section class="bottom"></section>
</section>
</template>
<script>
import THeader from '@components/header3.vue'
import { cockpitpress } from '@js/getData1'
// import {cockpitpress} from '@js/mork1.js'
export default {
name: 'ProdCount',
components: {
THeader
},
data () {
return {
timeOut: null,
interTime: this.$store.getters.setTime,
timer: null,
ProductionTask: [],
ShiftProductionList: [],
resData: {}
}
},
computed: {
defaultOption2 () {
return {
timer1: null,
timer2: null,
step: 0.4, // 数值越大速度滚动越快
limitMoveNum: 6, // 开始无缝滚动的数据量 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)
}
}
},
mounted () {
this.initData()
this.refresh()
},
beforeDestroy () {
clearInterval(this.timer)
clearInterval(this.timeOut)
},
methods: {
refresh () {
this.timer = setInterval(() => {
this.initData()
}, this.interTime)
},
async initData () {
let res = await cockpitpress()
clearInterval(this.timeOut)
this.resData = res
this.ProductionTask = res.ProductionTask
this.ShiftProductionList = res.ShiftProductionList
}
}
}
</script>
<style lang="stylus" scoped>
// @import '~@css/mixin'
@import '../../css/mixin'
// @import '~@style/mixin'
.bg
_wh(100%, 100%)
overflow hidden
.container
_wh(100%, calc(100% - 138px))
padding 30px 25.09px 0
overflow hidden
clear both
.bottom
_wh(100%, 38px)
background center bottom / 1906px 100% url(../../images/screen1/bottom.png) no-repeat
.blue
color #32C5FF !important
.green
color #30EBC9 !important
.gray
color #516282 !important
.yellow
color #E2BB0E !important
.orange
color #F96700 !important
.red
color #FF0000 !important
.con1
width 100%
height 123px
overflow hidden
position relative
background center center / 100% 100% url(../../images/screen1/sctj_top.png) no-repeat
margin 5px 0
text-align center
display flex
justify-content space-between
align-items center
.cbox
width 30%
display flex
align-items center
justify-content center
div
font-size 24px
color #32C5FF
.icon1
display inline-block
width 19px
height 19px
overflow hidden
position relative
background center center / 100% 100% url(../../images/screen1/sctj_icon.png) no-repeat
margin-right 20px
.num
display flex
align-items center
.bg
width 44px
height 60px
background rgba(50,197,255,0.10)
display flex
align-items center
justify-content center
margin-right 10px
font-size 50px
color #F7B502
.dot
background none
width 14px
.center_wrapper
_wh(100%, calc(50% - 69px))
_fj(row)
.con2
width 70%
height calc(100% - 34px)
.title
// _wh(calc(100% - 34px), 32px)
_wh(100%, 32px)
margin 17px 0
padding-left 18px
_font(18px, 32px, #fff,,left)
letter-spacing: 2px;
text-shadow: 0 0 9px #159aff;
background center center / 100% 100% url(../../images/screen1/bg_title_l.png) no-repeat
.item_content_0
// _wh(calc(100% - 44px), calc(100% - 112px))
_wh(calc(100% - 44px), 100%)
height 100%
// margin 17px auto
float right
.tltxt
position relative
top -3px
.dotIncon
display inline-block
width 26px
height 26px
position relative
top 3px
left -6px
background center center / 100% 100% url(../../images/screen1/bg_title_tip.png) no-repeat
.con3
width 30%
height calc(100% - 34px)
position relative
.title
font-family: "SourceHanSansCN";
position absolute
_wh(calc(100% - 34px), 32px)
margin 17px 0
right 0
padding-left 18px
_font(18px, 32px, #fff,,left)
letter-spacing: 2px;
text-shadow: 0 0 9px #159aff;
background center center / 100% 100% url(../../images/screen1/bg_title_s.png) no-repeat
.item_content_1
_wh(calc(100% - 44px), 100%)
margin 60px auto
float right
// .con4
// _wh(100%, calc(50% - 85px))
// margin-top 66px
// overflow hidden
// position relative
// .block_h2
// _wh(calc(100% - 0px), 32px)
// margin 17px 0 10px 0
// padding-left 18px
// background center center / 100% 100% url(../../images/screen1/bg_title_j.png) no-repeat
// color #fff
// h2
// _font(16px, 32px, #fff,,left)
// .list_scroll_title
// _wh(calc(100% - 0px), 32px)
// margin 0 auto
// background #262F52
// line-height 32px
// color #fff
// span
// display inline-block
// width 5%
// text-align center
// line-height 32px
// font-size 14px
// &:nth-child(4)
// width 16%
// &:nth-child(5)
// width 6.5%
// &:nth-child(6)
// width 6.5%
// &:nth-child(7)
// width 8%
// &:nth-child(14)
// width 9%
// &:nth-child(15)
// width 9%
// .content-block-scroll
// _wh(calc(100% - 0px), calc(100% - 113px))
// margin 0 auto 25px auto
// overflow hidden
// .content-block-scroll-ul
// width 100%
// li
// width 100%
// height 38px
// _fj(row, center)
// &:nth-child(2n)
// background rgba(38,47,82,0.50)
// span
// display inline-block
// width 5%
// font-size 12px
// // padding 0 10px
// text-align center
// line-height 38px
// box-sizing border-box
// &:nth-child(4)
// width 16%
// &:nth-child(5)
// width 6.5%
// &:nth-child(6)
// width 6.5%
// &:nth-child(7)
// width 8%
// &:nth-child(14)
// width 9%
// &:nth-child(15)
// width 9%
.four_wrap
// _wh(100%, calc(39% - 20px))
margin-top 40px
height 44%
// padding 10px 15px
// background-image linear-gradient(to bottom, #050c1b, #16243c)
// border 2px solid #16243c
// border-top-left-radius 10px
// border-top-right-radius 10px
.scroll-ul_1
width 100%
li
width 100%
line-height 40px
span
_font(16px, 1, #fff,,)
.scroll_th
color #2ef6ff
.item_tip
_wh(100%, 32px)
line-height 32px
padding 0 10px
.item_tip_bg_l
background center center / 100% 100% url(../../images/screen1/bg_title_j.png) no-repeat
.item_tip_left
_wh(60%, 100%)
font-family "SourceHanSansCN"
_font(18px, inherit, #fff, 700, left)
letter-spacing 2px
text-shadow 0 0 9px #159AFF
padding-left 34px
background center left / 22px 22px url(../../images/screen1/bg_title_tip.png) no-repeat
.item_content
_wh(100%, calc(100% - 37px))
margin-top 7px
.scroll_wrap
_wh(100%, 100%)
border 1px solid rgba(8,205,248,0.3)
.scroll_tab_2
_wh(100%, 40px)
border-bottom 1px solid rgba(8,205,248,0.3)
li
float left
width 11%
_font(14px,40px,#78B1DE,,center)
word-wrap break-word
word-break break-all
white-space nowrap
padding 0 2px
overflow hidden
box-sizing border-box
.scroll_container_2
width 100%
// height calc(100% - 40px)
height 230px
overflow hidden
.scroll-ul_2
li
_wh(100%, 44px)
border-bottom 1px solid rgba(8,205,248,0.3)
&:nth-child(even)
background rgba(1,24,52,0.60)
box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
.scroll-ul_2_div
float left
_wh(11%, 44px)
_fj(center)
_font(12px, 44px, #fff,,center)
word-wrap break-word
word-break break-all
white-space nowrap
padding 0 2px
overflow hidden
</style>

225
src/pages/modules/Weight.vue Normal file
View File

@@ -0,0 +1,225 @@
<template>
<section class="bg">
<t-header title="宜宾高测原料入库看板">
</t-header>
<div class="container">
<div class="sec sec1">
<div class="four_wrap">
<div class="item_tip item_tip_bg_l">
<div class="item_tip_left">托盘信息</div>
</div>
<div class="item_content con01">
<div class="lbox">
<div class="list-con" style="width: 100%; height: 100%;">
<div class="li">
<p class="li-left">母托盘：<span>M100001</span></p>
<p class="li-right">子托盘：<span>Z100001</span></p>
</div>
<div class="li">
<p class="li-left">物料编码： <span>WL001</span></p>
</div>
<div class="li">
<p class="li-left">物料名称：<span>方形晶棒 10*10*190</span></p>
</div>
<div class="li">
<p class="li-left">总数量(条)：<span>60</span></p>
<p class="li-right">总重量(kg)：<span>1250</span></p>
</div>
<div class="li">
<p class="li-left">入库类型：<span>采购</span></p>
<p class="li-right">场 地：<span>XX仓库</span></p>
</div>
<div class="li">
<p class="li-left">供应商：<span>XX有限责任公司</span></p>
</div>
</div>
</div>
</div>
</div>
<div class="four_wrap">
<div class="item_tip item_tip_bg_l">
<div class="item_tip_left">检测信息</div>
</div>
<div class="item_content con01">
<div class="lbox">
<div class="list-con" style="width: 100%; height: 100%;">
<div class="li">
<p class="li-left">货位数:<span>400</span>个</p>
<p class="li-right">已使用:<span>400</span>个</p>
</div>
<div class="li">
<p class="li-left">货位数:<span>400</span>个</p>
</div>
<div class="li">
<p class="li-left">货位数:<span>400</span>个</p>
<p class="li-right">已使用:<span>400</span>个</p>
</div>
<div class="li">
<p class="li-left">货位数:<span>400</span>个</p>
<p class="li-right">已使用:<span>400</span>个</p>
</div>
<div class="bottom-con">
<div>
<div class="tipImg"></div>
</div>
<div>
<p>外形检测超宽异常！</p>
<p>错误码：0001</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="bottom"></section>
</section>
</template>
<script>
import THeader from '@components/header3.vue'
import { cockpitpress } from '@js/getData1'
// import {cockpitpress} from '@js/mork1.js'
export default {
name: 'ProdCount',
components: {
THeader
},
data () {
return {
timeOut: null,
interTime: this.$store.getters.setTime,
timer: null,
ProductionTask: [],
ShiftProductionList: [],
resData: {}
}
},
computed: {
defaultOption2 () {
return {
timer1: null,
timer2: null,
step: 0.4, // 数值越大速度滚动越快
limitMoveNum: 6, // 开始无缝滚动的数据量 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)
}
}
},
mounted () {
this.initData()
this.refresh()
},
beforeDestroy () {
clearInterval(this.timer)
clearInterval(this.timeOut)
},
methods: {
refresh () {
this.timer = setInterval(() => {
this.initData()
}, this.interTime)
},
async initData () {
let res = await cockpitpress()
clearInterval(this.timeOut)
this.resData = res
this.ProductionTask = res.ProductionTask
this.ShiftProductionList = res.ShiftProductionList
}
}
}
</script>
<style lang="stylus" scoped>
// @import '~@css/mixin'
@import '../../css/mixin'
// @import '~@style/mixin'
.bg
_wh(100%, 100%)
overflow hidden
.container
display flex
align-items center
flex-direction column
_wh(100%, calc(100% - 138px))
padding 30px 25.09px 0
overflow hidden
clear both
.sec
width 100%
.sec1
display flex
justify-content space-between
.sec2
display flex
.bottom
_wh(100%, 38px)
background center bottom / 1906px 100% url(../../images/screen1/bottom.png) no-repeat
.blue
color #32C5FF !important
.green
color #30EBC9 !important
.gray
color #516282 !important
.yellow
color #E2BB0E !important
.orange
color #F96700 !important
.red
color #FF0000 !important
.four_wrap
// _wh(100%, calc(39% - 20px))
margin-top 40px
height 88%
width 50%
padding 0 1%
.item_tip
_wh(100%, 32px)
line-height 32px
padding 0 10px
.item_tip_bg_l
background center center / 100% 100% url(../../images/screen1/bg_title_j.png) no-repeat
.item_tip_left
_wh(60%, 100%)
font-family "SourceHanSansCN"
_font(18px, inherit, #fff, 700, left)
letter-spacing 2px
text-shadow 0 0 9px #159AFF
padding-left 34px
background center left / 22px 22px url(../../images/screen1/bg_title_tip.png) no-repeat
.item_content
_wh(100%, calc(100% - 37px))
margin-top 7px
.lbox
.list-con
.li
display flex
color #fff
font-weight bold
font-size 36px
line-height 120px
justify-content space-between
padding 0 20px
span
color #f7b502
margin 0 20px
.li-right
margin-left 20px
.bottom-con
display flex
justify-content space-between
margin-top 50px
p
font-size 40px
color pink
font-weight bold
text-align center
</style>

6
src/pages/modules/home/index.vue
View File

@@ -5,7 +5,7 @@
<h1>生产监控中心</h1>
</div>
<div class="n_header_h2" >
<h2>高测新材料科技有限公司</h2>
<h2>宜宾高测新材料科技有限公司</h2>
</div>
<v-time></v-time>
<div class="exit_btn" :style="expand ? {opacity: 1} : {opacity: 0.1}">
@@ -125,8 +125,8 @@
</template>
<script>
// import { screenTableData } from '@js/mork2.js'
import { screenTableData } from '@js/getData2.js'
import { screenTableData } from '@js/mork2.js'
// import { screenTableData } from '@js/getData2.js'
import symbol1 from '@img/symbol_1.png'
import symbol2 from '@img/symbol_2.png'
import symbol3 from '@img/symbol_3.png'