528 lines
15 KiB
Vue
528 lines
15 KiB
Vue
|
<template>
|
|||
|
|
<section>
|
|||
|
|
<t-header :title="title"></t-header>
|
|||
|
|
<div class="goods_shelves">
|
|||
|
|
<div class="tags">
|
|||
|
|
<div class="fontselect tag tag1">静置中</div>
|
|||
|
|
<div class="fontselect tag tag2">禁用</div>
|
|||
|
|
<div class="fontselect tag tag3">静置完成</div>
|
|||
|
|
<div class="fontselect tag tag4">强制完成</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="yard-wrap">
|
|||
|
|
<div class="yard_group clearfix">
|
|||
|
|
<div class="yard_group_ul yard_group_ul_1">
|
|||
|
|
<div class="yard_group_cell" v-for="(e, i) in group01" :key="i" :class="e.disabled === true ? 'syellow' : e.bgcolor">
|
|||
|
|
<div class="yard_group_p">
|
|||
|
|
<p class="fontselect">{{e.struct_name}}</p>
|
|||
|
|
<p class="fontselect">wl01</p>
|
|||
|
|
</div>
|
|||
|
|
<!-- <button class="primary" :class="e.disabled === true ? 'syellow' : e.bgcolor" @click="getInfo($event, e)">
|
|||
|
|
<span class="scaleFont">{{e.struct_name}}</span>
|
|||
|
|
</button>
|
|||
|
|
<div v-show="e.disabled" class="locate-wrap clearfix" :style="{'left': coordinateX,'top': coordinateY}">
|
|||
|
|
<div class="locate-content">
|
|||
|
|
<div class="tan_pline">
|
|||
|
|
<p class="tan_p">货位：{{equipInfo.struct_name}}</p>
|
|||
|
|
<p class="tan_p">托盘：{{equipInfo.tray_name}}</p>
|
|||
|
|
<p class="tan_p">订单号：{{equipInfo.order_code}}</p>
|
|||
|
|
<p class="tan_p">类型: {{['待入', '待出', '库存'][Number(equipInfo.ios_type)]}}</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="tan_tables">
|
|||
|
|
<table>
|
|||
|
|
<tr>
|
|||
|
|
<th width="25%">规格</th>
|
|||
|
|
<th width="15%">数量</th>
|
|||
|
|
<th width="15%">重量</th>
|
|||
|
|
<th width="45%">物料名称</th>
|
|||
|
|
</tr>
|
|||
|
|
<tr v-for="(e, i) in equipArr" :key="i">
|
|||
|
|
<td>{{e.material_spec}}</td>
|
|||
|
|
<td>{{e.ivt_num}}</td>
|
|||
|
|
<td>{{e.ivt_qty}}</td>
|
|||
|
|
<td>{{e.material_name}}</td>
|
|||
|
|
</tr>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div> -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- <div class="corridor_1"><p>A<br>G<br>V<br><br>过<br><br>道</p></div> -->
|
|||
|
|
</div>
|
|||
|
|
<div class="corridor_2">AGV 过 道</div>
|
|||
|
|
<div class="yard_group clearfix">
|
|||
|
|
<div class="yard_group_ul yard_group_ul_2">
|
|||
|
|
<div class="yard_group_cell" v-for="(e, i) in group02" :key="i" :class="e.disabled === true ? 'syellow' : e.bgcolor">
|
|||
|
|
<div class="yard_group_p">
|
|||
|
|
<p class="fontselect">{{e.struct_name}}</p>
|
|||
|
|
<p class="fontselect">wl01</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- <div class="corridor_1 corridor_3"><p>A<br>G<br>V<br><br>过<br><br>道</p></div> -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="echarts_container clearfix">
|
|||
|
|
<div class="echarts_item item1">
|
|||
|
|
<!-- <h2>标题</h2> -->
|
|||
|
|
<!-- <div id="echart_d1"></div> -->
|
|||
|
|
<div id="echart_d1" style="width: 620px;height:240px;"></div>
|
|||
|
|
<!-- <div id="echart_d2" style="width: 620px;height:240px;"></div> -->
|
|||
|
|
</div>
|
|||
|
|
<div class="echarts_item item2">
|
|||
|
|
<!-- <h2>出入库数量对比</h2> -->
|
|||
|
|
<!-- <div id="echart_d2"></div> -->
|
|||
|
|
<div id="echart_d2" style="width: 620px;height:240px;"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="echarts_item item3">
|
|||
|
|
<h2 class="title3">作业信息</h2>
|
|||
|
|
<div class="echart_item c-box3">
|
|||
|
|
<ul class="scroll_tab">
|
|||
|
|
<li>作业时间</li>
|
|||
|
|
<li>物料</li>
|
|||
|
|
<li>出入类型</li>
|
|||
|
|
<li>数量</li>
|
|||
|
|
<li>单位</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="scroll_container">
|
|||
|
|
<vue-seamless-scroll :data="array" :class-option="defaultOption">
|
|||
|
|
<ul class="content-block-scroll-ul">
|
|||
|
|
<li v-for="(e, i) in array" :key="i">
|
|||
|
|
<!-- <div>2019-07-11 09:12:31</div> -->
|
|||
|
|
<div>1</div>
|
|||
|
|
<div>20.5AH</div>
|
|||
|
|
<div>入库</div>
|
|||
|
|
<div>350</div>
|
|||
|
|
<div>只</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</vue-seamless-scroll>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import THeader from '@components/header.vue'
|
|||
|
|
import * as echarts from 'echarts'
|
|||
|
|
export default {
|
|||
|
|
name: 'FlatStore',
|
|||
|
|
components: {
|
|||
|
|
THeader
|
|||
|
|
},
|
|||
|
|
data () {
|
|||
|
|
return {
|
|||
|
|
title: '天能智能车间恒温库可视化看板',
|
|||
|
|
group01: [],
|
|||
|
|
group02: [],
|
|||
|
|
array: [],
|
|||
|
|
arr5: [
|
|||
|
|
['product', '入库数', '出库数'],
|
|||
|
|
['1号物料', 13, 5],
|
|||
|
|
['2号物料', 12, 8],
|
|||
|
|
['3号物料', 10, 6],
|
|||
|
|
['4号物料', 25, 20]
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
defaultOption () {
|
|||
|
|
return {
|
|||
|
|
step: 0.2, // 数值越大速度滚动越快
|
|||
|
|
limitMoveNum: 2, // 开始无缝滚动的数据量 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.getEchart1()
|
|||
|
|
this.getEchart2()
|
|||
|
|
// 53\47\9
|
|||
|
|
// 29\29\3
|
|||
|
|
for (let i = 1; i < 4; i++) {
|
|||
|
|
for (let j = 1; j < 30; j++) {
|
|||
|
|
if (i === j) {
|
|||
|
|
this.group01.push({struct_name: i + '-' + j + '-1', disabled: 1, bgcolor: 'green'})
|
|||
|
|
} else {
|
|||
|
|
this.group01.push({struct_name: i + '-' + j + '-1'})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
for (let i = 3; i > 0; i--) {
|
|||
|
|
for (let j = 29; j > 0; j--) {
|
|||
|
|
if (i === j) {
|
|||
|
|
this.group02.push({struct_name: i + '-' + j + '-1', disabled: 1, bgcolor: 'green'})
|
|||
|
|
} else {
|
|||
|
|
this.group02.push({struct_name: i + '-' + j + '-1'})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
for (let i = 0; i < 15; i++) {
|
|||
|
|
let j = {
|
|||
|
|
title: '无缝滚动第几条啊啊啊-' + i,
|
|||
|
|
time: '2020-04-10'
|
|||
|
|
}
|
|||
|
|
this.array.push(j)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getEchart1 () {
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var myChart = echarts.init(document.getElementById('echart_d1'))
|
|||
|
|
// 指定图表的配置项和数据
|
|||
|
|
var option = {
|
|||
|
|
title: {
|
|||
|
|
text: '静置状态总览', // 标题
|
|||
|
|
top: '12px',
|
|||
|
|
left: '20px',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#F3953E',
|
|||
|
|
fontSize: '18'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
// itemGap: 25,
|
|||
|
|
data: ['静置完成', '静置中'],
|
|||
|
|
align: 'right',
|
|||
|
|
top: 20,
|
|||
|
|
right: 20,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#ffffff'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
data: ['1号物料', '2号物料', '3号物料', '4号物料'],
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#fff'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// xAxis: {
|
|||
|
|
// type: 'category',
|
|||
|
|
// axisLine: {
|
|||
|
|
// lineStyle: {
|
|||
|
|
// color: '#fff'
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
yAxis: {
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#fff'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
name: '静置完成',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 40,
|
|||
|
|
stack: '静置情况',
|
|||
|
|
data: [15, 20, 36, 0],
|
|||
|
|
// itemStyle: {
|
|||
|
|
// normal: {color: '#FF8849'}
|
|||
|
|
// }
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'inside',
|
|||
|
|
formatter: function (params) {
|
|||
|
|
if (params.value !== 0) {
|
|||
|
|
return params.value
|
|||
|
|
} else {
|
|||
|
|
return ''
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
name: '静置中',
|
|||
|
|
type: 'bar',
|
|||
|
|
stack: '静置情况',
|
|||
|
|
data: [40, 0, 18, 0],
|
|||
|
|
// itemStyle: {
|
|||
|
|
// normal: {color: '#3FBB49'}
|
|||
|
|
// }
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'inside',
|
|||
|
|
formatter: function (params) {
|
|||
|
|
if (params.value !== 0) {
|
|||
|
|
return params.value
|
|||
|
|
} else {
|
|||
|
|
return ''
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
},
|
|||
|
|
getEchart2 () {
|
|||
|
|
let data = this.arr5
|
|||
|
|
var option1 = {
|
|||
|
|
tooltip: {},
|
|||
|
|
dataset: {
|
|||
|
|
source: data
|
|||
|
|
},
|
|||
|
|
color: ['#0755F1', '#F6B042'],
|
|||
|
|
title: {
|
|||
|
|
text: '出入库数量对比', // 标题
|
|||
|
|
top: '12px',
|
|||
|
|
left: '20px',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#F3953E',
|
|||
|
|
fontSize: '18'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
// itemGap: 25,
|
|||
|
|
data: ['入库数', '出库数'],
|
|||
|
|
align: 'right',
|
|||
|
|
top: 20,
|
|||
|
|
right: 20,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#ffffff'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#fff'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
// 设置坐标轴字体颜色和宽度
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#fff'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// Declare several bar series, each will be mapped
|
|||
|
|
// to a column of dataset.source by default.
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
barGap: '0%',
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
barBorderRadius: 15,
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|||
|
|
offset: 0,
|
|||
|
|
color: '#F18349' // 0% 处的颜色
|
|||
|
|
}, {
|
|||
|
|
offset: 0.6,
|
|||
|
|
color: '#F5AC41' // 60% 处的颜色
|
|||
|
|
}, {
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#F9CB48' // 100% 处的颜色
|
|||
|
|
}], false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
barBorderRadius: 15,
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|||
|
|
offset: 0,
|
|||
|
|
// color: '#8AD46F' // 0% 处的颜色
|
|||
|
|
color: '#1268f3' // 0% 处的颜色
|
|||
|
|
}, {
|
|||
|
|
offset: 0.6,
|
|||
|
|
// color: '#5AC990' // 60% 处的颜色
|
|||
|
|
color: '#08a4fa' // 60% 处的颜色
|
|||
|
|
}, {
|
|||
|
|
offset: 1,
|
|||
|
|
// color: '#5BBCB8' // 100% 处的颜色
|
|||
|
|
color: '#01ccfe' // 100% 处的颜色
|
|||
|
|
}], false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
var echart1 = document.getElementById('echart_d2')
|
|||
|
|
var myChart1 = echarts.init(echart1)
|
|||
|
|
myChart1.setOption(option1)
|
|||
|
|
}
|
|||
|
|
// setHeight () {
|
|||
|
|
// let cwidth = document.getElementById('content_block_1').offsetWidth
|
|||
|
|
// let cheight = document.getElementById('content_block_1').offsetHeight
|
|||
|
|
// let el1 = document.getElementById('echart_d1')
|
|||
|
|
// let el2 = document.getElementById('echart_d2')
|
|||
|
|
// el1.style.width = cwidth
|
|||
|
|
// el1.style.height = cheight
|
|||
|
|
// el2.style.width = cwidth
|
|||
|
|
// el2.style.height = cheight
|
|||
|
|
// }
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="stylus" scoped>
|
|||
|
|
.goods_shelves
|
|||
|
|
height 7.4rem
|
|||
|
|
margin .2rem .1rem .1rem .1rem
|
|||
|
|
padding .1rem
|
|||
|
|
border .02rem solid #2e67ba
|
|||
|
|
box-shadow #419df7 0px 0px .1rem
|
|||
|
|
overflow hidden
|
|||
|
|
.tags
|
|||
|
|
height .25rem
|
|||
|
|
.tag
|
|||
|
|
float left
|
|||
|
|
width .6rem
|
|||
|
|
height .25rem
|
|||
|
|
font-size .14rem
|
|||
|
|
line-height .25rem
|
|||
|
|
text-align center
|
|||
|
|
border-radius 3px
|
|||
|
|
margin-right .2rem
|
|||
|
|
.tag1, .green
|
|||
|
|
background-color #67c23a
|
|||
|
|
.tag2, .gray
|
|||
|
|
background-color #909399
|
|||
|
|
.tag3, .orange
|
|||
|
|
background-color #ffc200
|
|||
|
|
.tag4, .red
|
|||
|
|
background-color #ff0000
|
|||
|
|
.yard-wrap
|
|||
|
|
height 6.95rem
|
|||
|
|
width 100%
|
|||
|
|
padding .1rem 0
|
|||
|
|
.yard_group
|
|||
|
|
width 100%
|
|||
|
|
height 3.175rem
|
|||
|
|
clear both
|
|||
|
|
.yard_group_ul
|
|||
|
|
float left
|
|||
|
|
display grid
|
|||
|
|
grid-gap 0
|
|||
|
|
justify-items center
|
|||
|
|
align-items center
|
|||
|
|
border-top .01rem solid #ffffff
|
|||
|
|
border-left .01rem solid #ffffff
|
|||
|
|
margin-top -.01rem
|
|||
|
|
overflow hidden
|
|||
|
|
.yard_group_ul_1
|
|||
|
|
// width 18.26rem
|
|||
|
|
width 100%
|
|||
|
|
grid-template-columns repeat(29, 100% / 29)
|
|||
|
|
grid-template-rows repeat(3, 3.175rem / 3)
|
|||
|
|
.yard_group_ul_2
|
|||
|
|
// width 16.19rem
|
|||
|
|
width 100%
|
|||
|
|
grid-template-columns repeat(29, 100% / 29)
|
|||
|
|
grid-template-rows repeat(3, 3.175rem / 3)
|
|||
|
|
.yard_group_cell
|
|||
|
|
display inline-block
|
|||
|
|
width 100%
|
|||
|
|
height calc(3.175rem / 3)
|
|||
|
|
border-right .01rem solid #ffffff
|
|||
|
|
border-bottom .01rem solid #ffffff
|
|||
|
|
.yard_group_p
|
|||
|
|
height calc(3.175rem / 3)
|
|||
|
|
p
|
|||
|
|
font-size 12px
|
|||
|
|
line-height calc(3.175rem / 6)
|
|||
|
|
-webkit-text-size-adjust none
|
|||
|
|
text-align center
|
|||
|
|
white-space nowrap
|
|||
|
|
// transform scale(0.66)
|
|||
|
|
.corridor_1
|
|||
|
|
display:flex;
|
|||
|
|
align-items:center;
|
|||
|
|
justify-content:center;
|
|||
|
|
width calc(100% - 18.26rem)
|
|||
|
|
height 3.6rem
|
|||
|
|
float right
|
|||
|
|
text-align center
|
|||
|
|
p
|
|||
|
|
font-size .18rem
|
|||
|
|
.corridor_2
|
|||
|
|
width 100%
|
|||
|
|
font-size .18rem
|
|||
|
|
line-height .4rem
|
|||
|
|
text-align center
|
|||
|
|
.corridor_3
|
|||
|
|
width calc(100% - 16.19rem)
|
|||
|
|
.echarts_container
|
|||
|
|
width 100%
|
|||
|
|
height calc(100% - 8.45rem)
|
|||
|
|
padding .1rem
|
|||
|
|
margin-bottom .1rem
|
|||
|
|
.echarts_item
|
|||
|
|
float left
|
|||
|
|
width calc((100% - .3rem) / 3)
|
|||
|
|
height 100%
|
|||
|
|
background-color rgb(4 30 66)
|
|||
|
|
overflow hidden
|
|||
|
|
h2
|
|||
|
|
font-size .14rem
|
|||
|
|
line-height .3rem
|
|||
|
|
background center left / .15rem .15rem url(../assets/images/tip.png) no-repeat
|
|||
|
|
padding-left .2rem
|
|||
|
|
.item2
|
|||
|
|
margin 0 .15rem
|
|||
|
|
.echart_item
|
|||
|
|
width 100%
|
|||
|
|
height calc(100% - .4rem)
|
|||
|
|
overflow hidden
|
|||
|
|
.scroll_tab
|
|||
|
|
li
|
|||
|
|
float left
|
|||
|
|
width 20%
|
|||
|
|
font-size .14rem
|
|||
|
|
line-height .3rem
|
|||
|
|
.scroll_container
|
|||
|
|
width 100%
|
|||
|
|
height calc(100% - .6rem)
|
|||
|
|
overflow hidden
|
|||
|
|
.content-block-scroll-ul
|
|||
|
|
li
|
|||
|
|
div
|
|||
|
|
float left
|
|||
|
|
width 20%
|
|||
|
|
font-size .14rem
|
|||
|
|
line-height .3rem
|
|||
|
|
color red
|
|||
|
|
.title3
|
|||
|
|
color #F3953E
|
|||
|
|
margin 12px 0 0 20px
|
|||
|
|
font-size 18px
|
|||
|
|
.c-box3
|
|||
|
|
margin-left 20px
|
|||
|
|
</style>
|