2024-06-25 18:14:37 +08:00
|
|
|
<template>
|
|
|
|
|
<section class="container">
|
|
|
|
|
<t-header title="压制生产看板"></t-header>
|
|
|
|
|
<div class="content">
|
2024-06-26 15:05:19 +08:00
|
|
|
<div class="zd-row yj_wraper">
|
2024-06-25 18:14:37 +08:00
|
|
|
<div class="yj_item" v-for="(e, i) in dataList1" :key="'yj' + i">
|
2024-06-26 15:05:19 +08:00
|
|
|
<div class="zd-row jccenter yj_name">{{ e.device_code }}</div>
|
2024-06-25 18:14:37 +08:00
|
|
|
<div class="yj_info_wraper">
|
2024-06-26 15:05:19 +08:00
|
|
|
<div class="zd-row yj_info">
|
2024-06-25 18:14:37 +08:00
|
|
|
<div class="yj_info_p2">压机状态:</div>
|
|
|
|
|
<div class="yj_info_p1">{{ e.status }}</div>
|
|
|
|
|
</div>
|
2024-06-26 15:05:19 +08:00
|
|
|
<div class="zd-row yj_info">
|
|
|
|
|
<div class="yj_info_p2">当前产品:</div>
|
|
|
|
|
<div class="yj_info_p1">{{ e.status }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="zd-row yj_info">
|
|
|
|
|
<div class="yj_info_p2">泥料:</div>
|
|
|
|
|
<div class="yj_info_p1">{{ e.status }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="zd-row yj_info">
|
|
|
|
|
<div class="yj_info_p2">当班产量:</div>
|
|
|
|
|
<div class="yj_info_p1">{{ e.status }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="zd-row yj_info">
|
|
|
|
|
<div class="yj_info_p2">布料仓余量:</div>
|
|
|
|
|
<div class="yj_info_p1">{{ e.status }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="zd-row yj_info">
|
|
|
|
|
<div class="yj_info_p2">缓存线泥料余量:</div>
|
|
|
|
|
<div class="yj_info_p1">{{ e.status }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="zd-row yj_info">
|
|
|
|
|
<div class="yj_info_p2">当班合格率:</div>
|
|
|
|
|
<div class="yj_info_p1">{{ e.status }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="zd-row num_wraper">
|
|
|
|
|
<div class="left_wrap">
|
|
|
|
|
<div class="title_wrap_1">
|
|
|
|
|
<p>成型工序</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item_wrap">
|
|
|
|
|
<div class="zd-row num_wrap_1">
|
|
|
|
|
<div class="echart_wrap">
|
|
|
|
|
<div id="echart_d1" style="width: 100%; height: 100%"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="zd-row num_content">
|
|
|
|
|
<div class="zd-row flexcol jccenter num_item">
|
|
|
|
|
<div class="yj_info_p2">日计划量</div>
|
|
|
|
|
<div class="yj_info_p1">1000 吨</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="zd-row flexcol jccenter num_item">
|
|
|
|
|
<div class="yj_info_p2">日完成量</div>
|
|
|
|
|
<div class="yj_info_p1">1000 吨</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="zd-row num_wrap_1">
|
|
|
|
|
<div class="echart_wrap">
|
|
|
|
|
<div id="echart_d2" style="width: 100%; height: 100%"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="zd-row num_content">
|
|
|
|
|
<div class="zd-row flexcol jccenter num_item">
|
|
|
|
|
<div class="yj_info_p2">月计划量</div>
|
|
|
|
|
<div class="yj_info_p1">1000 吨</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="zd-row flexcol jccenter num_item">
|
|
|
|
|
<div class="yj_info_p2">月完成量</div>
|
|
|
|
|
<div class="yj_info_p1">1000 吨</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="zd-row num_wrap_2">
|
|
|
|
|
<div class="zd-row pass_item">
|
|
|
|
|
<p class="pass_p1">日合格率</p>
|
|
|
|
|
<p class="pass_p2">20%</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="zd-row pass_item">
|
|
|
|
|
<p class="pass_p1">日合格率</p>
|
|
|
|
|
<p class="pass_p2">20%</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="left_wrap right_wrap">
|
|
|
|
|
<div class="title_wrap_1 title_wrap_2">
|
|
|
|
|
<p>缓存线泥料</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item_wrap">
|
|
|
|
|
<div class="zd-row nl_wrap">
|
|
|
|
|
<div class="zd-row cur_nl_wrap">
|
|
|
|
|
<div class="yj_info_p2">当前缓存线泥料种类</div>
|
|
|
|
|
<div class="yj_info_p1">20</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="zd-row cur_nl_wrap cur_nl_wrap_1">
|
|
|
|
|
<div class="yj_info_p2">当前缓存线泥料总重</div>
|
|
|
|
|
<div class="yj_info_p1">20</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="data_wrap">
|
|
|
|
|
<ul class="scroll_tab">
|
|
|
|
|
<li>序号</li>
|
|
|
|
|
<li>泥料编码</li>
|
|
|
|
|
<li>泥料名称</li>
|
|
|
|
|
<li>泥料重量</li>
|
|
|
|
|
<li>排料时间</li>
|
|
|
|
|
<li>停留时间</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<div class="scroll_container">
|
|
|
|
|
<vue-seamless-scroll :data="dataList2" :class-option="defaultOption1">
|
|
|
|
|
<ul class="scroll-ul">
|
|
|
|
|
<li v-for="(e, i) in dataList2" :key="i">
|
|
|
|
|
<div class="zd-row jccenter scroll-item">{{i+1}}</div>
|
|
|
|
|
<div class="zd-row jccenter scroll-item">{{e.material_code}}</div>
|
|
|
|
|
<div class="zd-row jccenter scroll-item">{{e.material_name}}</div>
|
|
|
|
|
<div class="zd-row jccenter scroll-item">{{e.qty}}</div>
|
|
|
|
|
<div class="zd-row jccenter scroll-item">{{e.time}}</div>
|
|
|
|
|
<div class="zd-row jccenter scroll-item">{{e.time1}}</div>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</vue-seamless-scroll>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-06-25 18:14:37 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<footer></footer>
|
|
|
|
|
</section>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import THeader from '@components/header.vue'
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
THeader
|
|
|
|
|
},
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
2024-06-26 15:05:19 +08:00
|
|
|
dataList1: [],
|
|
|
|
|
dataList2: [{material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}, {material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}, {material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}, {material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}, {material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}, {material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
defaultOption1 () {
|
|
|
|
|
return {
|
|
|
|
|
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)
|
|
|
|
|
}
|
2024-06-25 18:14:37 +08:00
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created () {
|
|
|
|
|
for (let i = 0; i < 8; i++) {
|
|
|
|
|
this.dataList1.push({device_code: `${i + 1}号压机`, status: '开机'})
|
|
|
|
|
}
|
2024-06-26 15:05:19 +08:00
|
|
|
},
|
|
|
|
|
mounted () {
|
|
|
|
|
this.setEchart1()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
setEchart1 () {
|
|
|
|
|
let value = 10
|
|
|
|
|
let title = '%'
|
|
|
|
|
let text = '完成率'
|
|
|
|
|
let option = {
|
|
|
|
|
title: [
|
|
|
|
|
{
|
|
|
|
|
text: '{a|' + value + '}{b|' + title + '}\n{c|' + text + '}',
|
|
|
|
|
x: 'center',
|
|
|
|
|
y: 'center',
|
|
|
|
|
textStyle: {
|
|
|
|
|
rich: {
|
|
|
|
|
a: {
|
|
|
|
|
fontSize: 22,
|
|
|
|
|
color: '#00D9FF',
|
|
|
|
|
fontFamily: 'SourceHanSansCN',
|
|
|
|
|
foontWeight: '700'
|
|
|
|
|
},
|
|
|
|
|
b: {
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
color: '#ffffff',
|
|
|
|
|
fontFamily: 'SourceHanSansCN',
|
|
|
|
|
foontWeight: '700',
|
|
|
|
|
padding: [10, 0, 0, 3]
|
|
|
|
|
},
|
|
|
|
|
c: {
|
|
|
|
|
color: '#FFFFFF',
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
fontWeight: '700',
|
|
|
|
|
fontFamily: 'SourceHanSansCN',
|
|
|
|
|
padding: [10, 0, 0, 0]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
polar: {
|
|
|
|
|
radius: ['85%', '100%'],
|
|
|
|
|
center: ['50%', '50%']
|
|
|
|
|
},
|
|
|
|
|
angleAxis: {
|
|
|
|
|
max: 100,
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
radiusAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
show: true,
|
|
|
|
|
axisLabel: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{name: '',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
roundCap: true,
|
|
|
|
|
showBackground: true,
|
|
|
|
|
backgroundStyle: {
|
|
|
|
|
color: '#0a2543'
|
|
|
|
|
},
|
|
|
|
|
data: [value],
|
|
|
|
|
coordinateSystem: 'polar',
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: '#00dfff'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
if (document.getElementById('echart_d1') == null) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
this.$echarts.dispose(document.getElementById('echart_d1'))
|
|
|
|
|
let echart = this.$echarts.init(document.getElementById('echart_d1'))
|
|
|
|
|
echart.setOption(option)
|
|
|
|
|
window.addEventListener('resize', () => {
|
|
|
|
|
echart.resize()
|
|
|
|
|
})
|
|
|
|
|
}
|
2024-06-25 18:14:37 +08:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="stylus" scoped>
|
|
|
|
|
.container
|
2024-06-26 15:05:19 +08:00
|
|
|
position relative
|
2024-06-25 18:14:37 +08:00
|
|
|
width 100%
|
|
|
|
|
height 100%
|
|
|
|
|
.content
|
|
|
|
|
width 100%
|
|
|
|
|
height calc(100% - 1rem)
|
2024-06-26 15:05:19 +08:00
|
|
|
padding .25rem .33rem .38rem .33rem
|
2024-06-25 18:14:37 +08:00
|
|
|
footer
|
|
|
|
|
position absolute
|
|
|
|
|
left 0
|
|
|
|
|
bottom 0
|
|
|
|
|
width 100%
|
|
|
|
|
height .38rem
|
|
|
|
|
background center bottom / auto 100% url(../assets/images/screen1/bottom.png) no-repeat
|
|
|
|
|
.yj_wraper
|
|
|
|
|
width 100%
|
2024-06-26 15:05:19 +08:00
|
|
|
height calc(55% - .15rem)
|
|
|
|
|
margin-bottom .15rem
|
|
|
|
|
padding .31rem .16rem .2rem .16rem
|
2024-06-25 18:14:37 +08:00
|
|
|
background center / 100% 100% url(../assets/images/screen1/item_8.png) no-repeat
|
|
|
|
|
.yj_item
|
|
|
|
|
width 11.6%
|
|
|
|
|
background-color #001536
|
|
|
|
|
.yj_name
|
2024-06-26 15:05:19 +08:00
|
|
|
height .45rem
|
2024-06-25 18:14:37 +08:00
|
|
|
font-size .18rem
|
|
|
|
|
line-height .18rem
|
|
|
|
|
color #78B1DE
|
|
|
|
|
letter-spacing .02rem
|
|
|
|
|
text-align center
|
|
|
|
|
font-weight 700
|
|
|
|
|
background center / 100% 100% url(../assets/images/screen1/item_4.png) no-repeat
|
|
|
|
|
.yj_info_wraper
|
2024-06-26 15:05:19 +08:00
|
|
|
height calc(100% - .45rem)
|
2024-06-25 18:14:37 +08:00
|
|
|
padding .1rem
|
|
|
|
|
.yj_info
|
|
|
|
|
height calc(100% / 7)
|
|
|
|
|
background center bottom / 100% 3px url(../assets/images/screen1/line_1.png) no-repeat
|
|
|
|
|
.yj_info_p1
|
|
|
|
|
font-size: .18rem;
|
|
|
|
|
line-height: .18rem;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
letter-spacing: 1.88px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
.yj_info_p2
|
|
|
|
|
font-size: .14rem
|
|
|
|
|
line-height: .14rem
|
|
|
|
|
color: #84B0DA;
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-weight: 700;
|
2024-06-26 15:05:19 +08:00
|
|
|
.num_wraper
|
|
|
|
|
width 100%
|
|
|
|
|
height 45%
|
|
|
|
|
.left_wrap
|
|
|
|
|
width 30%
|
|
|
|
|
height 100%
|
|
|
|
|
margin-right .32rem
|
|
|
|
|
background-color rgba(6,11,24,0.70)
|
|
|
|
|
.right_wrap
|
|
|
|
|
width calc(70% - .32rem)
|
|
|
|
|
.title_wrap_1
|
|
|
|
|
height .34rem
|
|
|
|
|
background center bottom / 100% 100% url(../assets/images/screen1/bg_title_s.png) no-repeat
|
|
|
|
|
padding-left .1rem
|
|
|
|
|
p
|
|
|
|
|
font-size: .18rem;
|
|
|
|
|
line-height .34rem
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
text-shadow: 0 0 9px #159AFF;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
padding-left .28rem
|
|
|
|
|
background left center / .22rem .22rem url(../assets/images/screen1/bg_title_tip.png) no-repeat
|
|
|
|
|
.title_wrap_2
|
|
|
|
|
background-image url(../assets/images/screen1/bg_title_j.png)
|
|
|
|
|
.item_wrap
|
|
|
|
|
height calc(100% - .34rem)
|
|
|
|
|
padding .1rem .3rem .2rem .3rem
|
|
|
|
|
.num_wrap_1
|
|
|
|
|
height calc(42% - .1rem)
|
|
|
|
|
background bottom center / 100% 3px url(../assets/images/screen1/line_2.png) no-repeat
|
|
|
|
|
pdding-bottom .1rem
|
|
|
|
|
margin-bottom .1rem
|
|
|
|
|
.num_wrap_2
|
|
|
|
|
height 16%
|
|
|
|
|
.echart_wrap
|
|
|
|
|
width 1.1rem
|
|
|
|
|
height 1.1rem
|
|
|
|
|
background center / 100% 100% url(../assets/images/screen1/item_3.png) no-repeat
|
|
|
|
|
padding .16rem
|
|
|
|
|
.num_content
|
|
|
|
|
width calc(100% - 1.34rem)
|
|
|
|
|
height 100%
|
|
|
|
|
.num_item
|
|
|
|
|
width 45%
|
|
|
|
|
height 55%
|
|
|
|
|
background center / 100% 100% url(../assets/images/screen1/item_4.png) no-repeat
|
|
|
|
|
.yj_info_p2
|
|
|
|
|
margin-bottom .1rem
|
|
|
|
|
.pass_item
|
|
|
|
|
width 48%
|
|
|
|
|
height 100%
|
|
|
|
|
background center / 100% 100% url(../assets/images/screen1/item_5.png) no-repeat
|
|
|
|
|
padding 0 .1rem 0 .2rem
|
|
|
|
|
.pass_p1
|
|
|
|
|
font-size .16rem
|
|
|
|
|
color #fff
|
|
|
|
|
.pass_p2
|
|
|
|
|
font-size .18rem
|
|
|
|
|
color #00D5FF
|
|
|
|
|
.nl_wrap
|
|
|
|
|
height .5rem
|
|
|
|
|
margin .1rem 0 .14rem 0
|
|
|
|
|
.cur_nl_wrap
|
|
|
|
|
width 45%
|
|
|
|
|
height 100%
|
|
|
|
|
background center / 100% 100% url(../assets/images/screen1/item_9.png) no-repeat
|
|
|
|
|
padding 0 .3rem
|
|
|
|
|
.yj_info_p2
|
|
|
|
|
color #fff
|
|
|
|
|
font-size .18rem
|
|
|
|
|
.yj_info_p1
|
|
|
|
|
font-size .24rem
|
|
|
|
|
font-family 'YouSheBiaoTiHei'
|
|
|
|
|
.cur_nl_wrap_1
|
|
|
|
|
background-image url(../assets/images/screen1/item_10.png)
|
|
|
|
|
.data_wrap
|
|
|
|
|
height calc(100% - .74rem)
|
|
|
|
|
border 1px solid rgba(8,205,248,0.3)
|
|
|
|
|
.scroll_tab
|
|
|
|
|
width 100%
|
|
|
|
|
height .4rem
|
|
|
|
|
li
|
|
|
|
|
float left
|
|
|
|
|
width 18%
|
|
|
|
|
font-size .14rem
|
|
|
|
|
line-height .4rem
|
|
|
|
|
color #78B1DE
|
|
|
|
|
text-align center
|
|
|
|
|
font-family 'SourceHanSansCN-Regular'
|
|
|
|
|
&:nth-child(1)
|
|
|
|
|
width 10%
|
|
|
|
|
.scroll_container
|
|
|
|
|
width 100%
|
|
|
|
|
height calc(100% - .4rem)
|
|
|
|
|
overflow hidden
|
|
|
|
|
.scroll-ul
|
|
|
|
|
li
|
|
|
|
|
width 100%
|
|
|
|
|
height .44rem
|
|
|
|
|
// border-bottom 1px solid rgba(122,159,224,0.17)
|
|
|
|
|
box-shadow: inset 0px 1px 0px 0px rgba(13,89,115,0.3)
|
|
|
|
|
&:nth-child(even)
|
|
|
|
|
background rgba(1,24,52,0.60)
|
|
|
|
|
.scroll-item
|
|
|
|
|
float left
|
|
|
|
|
width 18%
|
|
|
|
|
height .44rem
|
|
|
|
|
font-size .14rem
|
|
|
|
|
line-height .14rem
|
|
|
|
|
color #fff
|
|
|
|
|
text-align center
|
|
|
|
|
font-family: 'SourceHanSansCN-Regular';
|
|
|
|
|
overflow hidden
|
|
|
|
|
&:nth-child(1)
|
|
|
|
|
width 10%
|
2024-06-25 18:14:37 +08:00
|
|
|
</style>
|
