新看板
This commit is contained in:
@@ -130,3 +130,17 @@ div, p {
|
||||
-khtml-user-select:none;/*早期浏览器*/
|
||||
user-select:none;
|
||||
}
|
||||
|
||||
.zd-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flexcol {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.jccenter {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
BIN
src/assets/images/screen1/item_10.png
Normal file
BIN
src/assets/images/screen1/item_10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 12 KiB |
BIN
src/assets/images/screen1/item_9.png
Normal file
BIN
src/assets/images/screen1/item_9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
@@ -71,7 +71,6 @@ header
|
||||
position relative
|
||||
width 100%
|
||||
height 1rem
|
||||
position relative
|
||||
background center center / 100% 100% url(../assets/images/screen1/header.png) no-repeat
|
||||
p
|
||||
font-family "YouSheBiaoTiHei"
|
||||
|
||||
@@ -2,14 +2,128 @@
|
||||
<section class="container">
|
||||
<t-header title="压制生产看板"></t-header>
|
||||
<div class="content">
|
||||
<div class="yj_wraper">
|
||||
<div class="zd-row yj_wraper">
|
||||
<div class="yj_item" v-for="(e, i) in dataList1" :key="'yj' + i">
|
||||
<div class="fontV yj_name">{{ e.device_code }}</div>
|
||||
<div class="zd-row jccenter yj_name">{{ e.device_code }}</div>
|
||||
<div class="yj_info_wraper">
|
||||
<div class="yj_info">
|
||||
<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 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -26,25 +140,131 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
dataList1: []
|
||||
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)
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
for (let i = 0; i < 8; i++) {
|
||||
this.dataList1.push({device_code: `${i + 1}号压机`, status: '开机'})
|
||||
}
|
||||
},
|
||||
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()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.container
|
||||
position relative
|
||||
width 100%
|
||||
height 100%
|
||||
.content
|
||||
width 100%
|
||||
height calc(100% - 1rem)
|
||||
padding .3rem .33rem
|
||||
padding .25rem .33rem .38rem .33rem
|
||||
footer
|
||||
position absolute
|
||||
left 0
|
||||
@@ -54,21 +274,15 @@ footer
|
||||
background center bottom / auto 100% url(../assets/images/screen1/bottom.png) no-repeat
|
||||
.yj_wraper
|
||||
width 100%
|
||||
height calc(50% - .16rem)
|
||||
margin-bottom .32rem
|
||||
padding .31rem .16rem .31rem .16rem
|
||||
height calc(55% - .15rem)
|
||||
margin-bottom .15rem
|
||||
padding .31rem .16rem .2rem .16rem
|
||||
background center / 100% 100% url(../assets/images/screen1/item_8.png) no-repeat
|
||||
display flex
|
||||
justify-content space-between
|
||||
.fontV
|
||||
display flex
|
||||
justify-content center
|
||||
align-items center
|
||||
.yj_item
|
||||
width 11.6%
|
||||
background-color #001536
|
||||
.yj_name
|
||||
height .5rem
|
||||
height .45rem
|
||||
font-size .18rem
|
||||
line-height .18rem
|
||||
color #78B1DE
|
||||
@@ -77,14 +291,11 @@ footer
|
||||
font-weight 700
|
||||
background center / 100% 100% url(../assets/images/screen1/item_4.png) no-repeat
|
||||
.yj_info_wraper
|
||||
height calc(100% - .5rem)
|
||||
height calc(100% - .45rem)
|
||||
padding .1rem
|
||||
.yj_info
|
||||
height calc(100% / 7)
|
||||
background center bottom / 100% 3px url(../assets/images/screen1/line_1.png) no-repeat
|
||||
display flex
|
||||
justify-content space-between
|
||||
align-items center
|
||||
.yj_info_p1
|
||||
font-size: .18rem;
|
||||
line-height: .18rem;
|
||||
@@ -99,4 +310,120 @@ footer
|
||||
letter-spacing: 2px;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
.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%
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user