干燥
This commit is contained in:
460
src/pages/modules/firedry/two.vue
Normal file
460
src/pages/modules/firedry/two.vue
Normal file
@@ -0,0 +1,460 @@
|
|||||||
|
<template>
|
||||||
|
<div class="n_container">
|
||||||
|
<div class="n_header">
|
||||||
|
<div class="n_header_h1">
|
||||||
|
<h1>据控制中心</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="n_body_container">
|
||||||
|
<div class="n_body_container_wraper">
|
||||||
|
<div class="box1">
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_tip item_tip_bg_s">
|
||||||
|
<div class="item_tip_left">烧制窑内物料</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_content">
|
||||||
|
<div id="szgz_echart_1" style="width: 100%; height: 100%;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_tip item_tip_bg_s">
|
||||||
|
<div class="item_tip_left">冷却窑内物料</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_content">
|
||||||
|
<div id="szgz_echart_2" style="width: 100%; height: 100%;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box2">
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_tip item_tip_bg_s">
|
||||||
|
<div class="item_tip_left">半成品库存</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_content">
|
||||||
|
<div class="scroll_wrap">
|
||||||
|
<ul class="scroll_tab_1">
|
||||||
|
<li>货位</li>
|
||||||
|
<li>物料编码</li>
|
||||||
|
<li>物料名称</li>
|
||||||
|
<li>数量</li>
|
||||||
|
<li>载具号</li>
|
||||||
|
<li>碾次</li>
|
||||||
|
<li>入库时间</li>
|
||||||
|
</ul>
|
||||||
|
<div class="scroll_container_1">
|
||||||
|
<vue-seamless-scroll :data="array1" :class-option="defaultOption1">
|
||||||
|
<ul class="scroll-ul_1">
|
||||||
|
<li v-for="(e, i) in array1" :key="i">
|
||||||
|
<div class="scroll-ul_1_div">{{e.workorder_code}}</div>
|
||||||
|
<div class="scroll-ul_1_div">{{e.device_name}}</div>
|
||||||
|
<div class="scroll-ul_1_div">{{e.bom}}</div>
|
||||||
|
<div class="scroll-ul_1_div">{{e.material_code}}</div>
|
||||||
|
<div class="scroll-ul_1_div">{{e.plan_qty}}</div>
|
||||||
|
<div class="scroll-ul_1_div">{{e.real_qty}}</div>
|
||||||
|
<div class="scroll-ul_1_div">{{e.total_mix_frequency}}</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</vue-seamless-scroll>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_tip item_tip_bg_s">
|
||||||
|
<div class="item_tip_left">半成品出入库</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_content">
|
||||||
|
<div class="scroll_wrap">
|
||||||
|
<ul class="scroll_tab_1">
|
||||||
|
<li>类别</li>
|
||||||
|
<li>物料编码</li>
|
||||||
|
<li>物料名称</li>
|
||||||
|
<li>数量</li>
|
||||||
|
<li>载具号</li>
|
||||||
|
<li>碾次</li>
|
||||||
|
<li>货位</li>
|
||||||
|
<li>出入时间</li>
|
||||||
|
</ul>
|
||||||
|
<div class="scroll_container_1">
|
||||||
|
<vue-seamless-scroll :data="array1" :class-option="defaultOption1">
|
||||||
|
<ul class="scroll-ul_1">
|
||||||
|
<li v-for="(e, i) in array1" :key="i">
|
||||||
|
<div class="scroll-ul_1_div">{{e.workorder_code}}</div>
|
||||||
|
<div class="scroll-ul_1_div">{{e.device_name}}</div>
|
||||||
|
<div class="scroll-ul_1_div">{{e.bom}}</div>
|
||||||
|
<div class="scroll-ul_1_div">{{e.material_code}}</div>
|
||||||
|
<div class="scroll-ul_1_div">{{e.plan_qty}}</div>
|
||||||
|
<div class="scroll-ul_1_div">{{e.real_qty}}</div>
|
||||||
|
<div class="scroll-ul_1_div">{{e.total_mix_frequency}}</div>
|
||||||
|
<div class="scroll-ul_1_div">{{e.order_status}}</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</vue-seamless-scroll>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'one',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
myCharts1: '',
|
||||||
|
myCharts2: '',
|
||||||
|
array1: [{workorder_code: 'hl00001', device_name: '混碾机1', bom: 'WL001', material_code: '1号混料', plan_qty: '5000', real_qty: '200', total_mix_frequency: '230505001001', order_status: '生产完成', realproducestart_date: '10-11 19:11:00', realproduceend_date: '10-11 19:11:00'}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
defaultOption1 () {
|
||||||
|
return {
|
||||||
|
step: 0.4, // 数值越大速度滚动越快
|
||||||
|
limitMoveNum: 11, // 开始无缝滚动的数据量 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.setEchart1()
|
||||||
|
this.setEchart2()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setEchart1 () {
|
||||||
|
let date = ['碾机1', '碾机2', '碾机3', '碾机4', '碾机5', '碾机6', '碾机7', '碾机8', '碾机9', '碾机10']
|
||||||
|
let data1 = ['500', '600', '700', '800', '500', '600', '700', '800', '900', '1000']
|
||||||
|
let option = {
|
||||||
|
grid: {
|
||||||
|
top: 50,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
// legend: {
|
||||||
|
// icon: 'rect',
|
||||||
|
// textStyle: {
|
||||||
|
// color: '#fff',
|
||||||
|
// fontSize: 14,
|
||||||
|
// lineHeight: 14
|
||||||
|
// },
|
||||||
|
// itemGap: 30.86,
|
||||||
|
// itemWidth: 14.16,
|
||||||
|
// itemHeight: 7.38,
|
||||||
|
// data: [{name: '产量', itemStyle: {color: '#0E90FD'}}]
|
||||||
|
// },
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: '#8FABBF'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
textStyle: {
|
||||||
|
color: '#8FABBF',
|
||||||
|
fontSize: 16
|
||||||
|
},
|
||||||
|
rotate: 50
|
||||||
|
},
|
||||||
|
data: date
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitNumber: 2,
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#8FABBF',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: [8, 4],
|
||||||
|
dashOffset: 4,
|
||||||
|
color: '#8FABBF'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '产量',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '8',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(96,112,128,0.10)',
|
||||||
|
opacity: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#0E90FD',
|
||||||
|
opacity: 0.1
|
||||||
|
}
|
||||||
|
])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: data1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
let echart = document.getElementById('szgz_echart_1')
|
||||||
|
if (this.myCharts1 !== '') {
|
||||||
|
this.myCharts1.dispose()
|
||||||
|
}
|
||||||
|
if (echart !== null) {
|
||||||
|
this.myCharts1 = this.$echarts.init(echart)
|
||||||
|
this.myCharts1.setOption(option)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.myCharts1.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setEchart2 () {
|
||||||
|
let date = ['碾机1', '碾机2', '碾机3', '碾机4', '碾机5', '碾机6', '碾机7', '碾机8', '碾机9', '碾机10']
|
||||||
|
let data1 = ['500', '600', '700', '800', '500', '600', '700', '800', '900', '1000']
|
||||||
|
let option = {
|
||||||
|
grid: {
|
||||||
|
top: 50,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
// legend: {
|
||||||
|
// icon: 'rect',
|
||||||
|
// textStyle: {
|
||||||
|
// color: '#fff',
|
||||||
|
// fontSize: 14,
|
||||||
|
// lineHeight: 14
|
||||||
|
// },
|
||||||
|
// itemGap: 30.86,
|
||||||
|
// itemWidth: 14.16,
|
||||||
|
// itemHeight: 7.38,
|
||||||
|
// data: [{name: '产量', itemStyle: {color: '#0E90FD'}}]
|
||||||
|
// },
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: '#8FABBF'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
textStyle: {
|
||||||
|
color: '#8FABBF',
|
||||||
|
fontSize: 16
|
||||||
|
},
|
||||||
|
rotate: 50
|
||||||
|
},
|
||||||
|
data: date
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitNumber: 2,
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#8FABBF',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: [8, 4],
|
||||||
|
dashOffset: 4,
|
||||||
|
color: '#8FABBF'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '产量',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '8',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(96,112,128,0.10)',
|
||||||
|
opacity: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#0E90FD',
|
||||||
|
opacity: 0.1
|
||||||
|
}
|
||||||
|
])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: data1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
let echart = document.getElementById('szgz_echart_2')
|
||||||
|
if (this.myCharts2 !== '') {
|
||||||
|
this.myCharts2.dispose()
|
||||||
|
}
|
||||||
|
if (echart !== null) {
|
||||||
|
this.myCharts2 = this.$echarts.init(echart)
|
||||||
|
this.myCharts2.setOption(option)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.myCharts2.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" scoped>
|
||||||
|
@import '~@css/mixin'
|
||||||
|
.n_container
|
||||||
|
_wh(100%, 100%)
|
||||||
|
.n_header
|
||||||
|
_wh(100%, 8%)
|
||||||
|
_bis('../../../images/bg_header.jpg')
|
||||||
|
.n_header_h1
|
||||||
|
_wh(100%, 100%)
|
||||||
|
_fj(row, flex-start)
|
||||||
|
_bis('../../../images/top_right.png',auto,,left)
|
||||||
|
h1
|
||||||
|
_font(32px, 1, #fff,,right)
|
||||||
|
padding-bottom 2%
|
||||||
|
letter-spacing 6px
|
||||||
|
font-family "阿里妈妈数黑体" !important
|
||||||
|
padding-left 3px
|
||||||
|
.n_body_container
|
||||||
|
_wh(100%, 92%)
|
||||||
|
padding 40px 20px 20px 0
|
||||||
|
_bis('../../../images/bg_content_r.jpg')
|
||||||
|
.n_body_container_wraper
|
||||||
|
_wh(100%, 100%)
|
||||||
|
_fj()
|
||||||
|
.status_wrap
|
||||||
|
position absolute
|
||||||
|
top 0px
|
||||||
|
right 40px
|
||||||
|
z-index 1
|
||||||
|
_fj(row)
|
||||||
|
.status_item
|
||||||
|
_fj(row)
|
||||||
|
+.status_item
|
||||||
|
margin-left 20px
|
||||||
|
.status_tip
|
||||||
|
_wh(15px, 15px)
|
||||||
|
border-radius 50%
|
||||||
|
margin-right 10px
|
||||||
|
box-shadow 0px 0px 4px 0px rgba(33,121,195,0.88)
|
||||||
|
.status_name
|
||||||
|
_font(16px, 1, #fff)
|
||||||
|
.green
|
||||||
|
background-color $green2
|
||||||
|
.yellow
|
||||||
|
background-color $yellow
|
||||||
|
.red
|
||||||
|
background-color $orange
|
||||||
|
.box1
|
||||||
|
_wh(100%, 58%)
|
||||||
|
_fj(row)
|
||||||
|
.box2
|
||||||
|
_wh(100%, 40%)
|
||||||
|
_fj(row)
|
||||||
|
.item_wrap
|
||||||
|
_wh(49.2%, 100%)
|
||||||
|
+.item_wrap
|
||||||
|
margin 0 .3%
|
||||||
|
margin-top .5%
|
||||||
|
.item_tip
|
||||||
|
_wh(100%, 32px)
|
||||||
|
line-height 32px
|
||||||
|
padding 0 10px
|
||||||
|
.item_tip_bg_s
|
||||||
|
_bis('../../../images/bg_title_s.png')
|
||||||
|
.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
|
||||||
|
_bis('../../../images/bg_title_tip.png', 22px, 22px, left)
|
||||||
|
.item_content
|
||||||
|
_wh(100%, calc(100% - 32px))
|
||||||
|
padding 10px 5px
|
||||||
|
.scroll_wrap
|
||||||
|
_wh(100%, 100%)
|
||||||
|
border 1px solid rgba(8,205,248,0.3)
|
||||||
|
.scroll_tab_1
|
||||||
|
_wh(100%, 40px)
|
||||||
|
border-bottom 1 solid rgba(8,205,248,0.3)
|
||||||
|
li
|
||||||
|
float left
|
||||||
|
width 12.5%
|
||||||
|
_font(14px,40px,#78B1DE,,center)
|
||||||
|
word-wrap break-word
|
||||||
|
word-break break-all
|
||||||
|
white-space nowrap
|
||||||
|
padding 0 5px
|
||||||
|
overflow hidden
|
||||||
|
box-sizing border-box
|
||||||
|
.scroll_container_1
|
||||||
|
width 100%
|
||||||
|
height calc(100% - 40px)
|
||||||
|
overflow hidden
|
||||||
|
.scroll-ul_1
|
||||||
|
li
|
||||||
|
_wh(100%, 44px)
|
||||||
|
border-bottom 1 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_1_div
|
||||||
|
float left
|
||||||
|
_wh(12.5%, 44px)
|
||||||
|
_fj(row, center)
|
||||||
|
_font(14px, 16px, #fff,,center)
|
||||||
|
word-wrap break-word
|
||||||
|
word-break break-all
|
||||||
|
// white-space nowrap
|
||||||
|
padding 0 5px
|
||||||
|
overflow hidden
|
||||||
|
</style>
|
||||||
@@ -20,6 +20,7 @@ const ProcessProductionThree = r => require.ensure([], () => r(require('@page/mo
|
|||||||
const HunnianKunliaoOne = r => require.ensure([], () => r(require('@page/modules/hunniankunliao/one')), 'hunniankunliao')
|
const HunnianKunliaoOne = r => require.ensure([], () => r(require('@page/modules/hunniankunliao/one')), 'hunniankunliao')
|
||||||
const HunnianKunliaoTwo = r => require.ensure([], () => r(require('@page/modules/hunniankunliao/two')), 'hunniankunliao')
|
const HunnianKunliaoTwo = r => require.ensure([], () => r(require('@page/modules/hunniankunliao/two')), 'hunniankunliao')
|
||||||
const FireDryOne = r => require.ensure([], () => r(require('@page/modules/firedry/one')), 'firedry')
|
const FireDryOne = r => require.ensure([], () => r(require('@page/modules/firedry/one')), 'firedry')
|
||||||
|
const FireDryTwo = r => require.ensure([], () => r(require('@page/modules/firedry/two')), 'firedry')
|
||||||
const TakeShapeOne = r => require.ensure([], () => r(require('@page/modules/takeshape/one')), 'takeshape')
|
const TakeShapeOne = r => require.ensure([], () => r(require('@page/modules/takeshape/one')), 'takeshape')
|
||||||
const TakeShapeTwo = r => require.ensure([], () => r(require('@page/modules/takeshape/two')), 'takeshape')
|
const TakeShapeTwo = r => require.ensure([], () => r(require('@page/modules/takeshape/two')), 'takeshape')
|
||||||
const SortPackOne = r => require.ensure([], () => r(require('@page/modules/sortpack/one')), 'takeshape')
|
const SortPackOne = r => require.ensure([], () => r(require('@page/modules/sortpack/one')), 'takeshape')
|
||||||
@@ -76,6 +77,10 @@ export default new Router({
|
|||||||
path: '/firedryone',
|
path: '/firedryone',
|
||||||
component: FireDryOne
|
component: FireDryOne
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/firedrytwo',
|
||||||
|
component: FireDryTwo
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/takeshapeone',
|
path: '/takeshapeone',
|
||||||
component: TakeShapeOne
|
component: TakeShapeOne
|
||||||
|
|||||||
Reference in New Issue
Block a user