prod
This commit is contained in:
@@ -10,23 +10,28 @@ export const storageMonitor = () => {
|
||||
'point_id': '1597551506607968256',
|
||||
'point_code': 'YZJHJ04',
|
||||
'point_name': '压制机旧料盅货架04',
|
||||
'point_status': '1',
|
||||
'material_id': 1556534702800769024,
|
||||
'material_code': 'HW00001',
|
||||
'material_name': '木质花纹2cm',
|
||||
'vehicle_code': '1M3000009',
|
||||
'ivt_qty': 1000.000000,
|
||||
'ivt_weight': 800.000000,
|
||||
'instorage_time': '2023-2-27 16:07:09',
|
||||
'standing_time': 20,
|
||||
'standing_status': null,
|
||||
'warn_time': '5',
|
||||
'is_full': '1'
|
||||
}
|
||||
],
|
||||
'materialTask': [
|
||||
{
|
||||
'point_id': '1518061204965298176',
|
||||
'point_code': 'YZJ0904',
|
||||
'point_name': '压制机9料盅位4',
|
||||
'point_id': '1597551506607968256',
|
||||
'point_code': 'YZJHJ04',
|
||||
'point_name': '压制机旧料盅货架04',
|
||||
'point_status': '1',
|
||||
'material_id': 1556534702800769024,
|
||||
'material_code': 'HW00001',
|
||||
'material_name': '木质花纹2cm',
|
||||
'vehicle_code': '1M3000009',
|
||||
'ivt_qty': 1000.000000,
|
||||
@@ -34,7 +39,46 @@ export const storageMonitor = () => {
|
||||
'instorage_time': '2023-2-27 16:07:09',
|
||||
'standing_time': 20,
|
||||
'standing_status': '静置完成',
|
||||
'warn_time': '5'
|
||||
'warn_time': '5',
|
||||
'is_full': '是'
|
||||
}
|
||||
],
|
||||
'productionList': [
|
||||
{
|
||||
'point_id': '1597551506607968256',
|
||||
'point_code': 'YZJHJ04',
|
||||
'point_name': '压制机旧料盅货架04',
|
||||
'point_status': '1',
|
||||
'material_id': 1556534702800769024,
|
||||
'material_code': 'HW00001',
|
||||
'material_name': '木质花纹2cm',
|
||||
'vehicle_code': '1M3000009',
|
||||
'ivt_qty': 1000.000000,
|
||||
'ivt_weight': 800.000000,
|
||||
'instorage_time': '2023-2-27 16:07:09',
|
||||
'standing_time': 20,
|
||||
'standing_status': null,
|
||||
'warn_time': '5',
|
||||
'is_full': '1'
|
||||
}
|
||||
],
|
||||
'materialList': [
|
||||
{
|
||||
'point_id': '1597551506607968256',
|
||||
'point_code': 'YZJHJ04',
|
||||
'point_name': '压制机旧料盅货架04',
|
||||
'point_status': '1',
|
||||
'material_id': 1556534702800769024,
|
||||
'material_code': 'HW00001',
|
||||
'material_name': '木质花纹2cm',
|
||||
'vehicle_code': '1M3000009',
|
||||
'ivt_qty': 1000.000000,
|
||||
'ivt_weight': 800.000000,
|
||||
'instorage_time': '2023-2-27 16:07:09',
|
||||
'standing_time': 20,
|
||||
'standing_status': '静置完成',
|
||||
'warn_time': '5',
|
||||
'is_full': '是'
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -48,40 +92,67 @@ export const productionStatistics = () => {
|
||||
let res = {
|
||||
'finishedTask': [
|
||||
{
|
||||
'realqty': '130',
|
||||
'planqty': '300',
|
||||
'workorder_procedure': '2'
|
||||
'workorder_procedure': '今日压制量',
|
||||
'real_qty': 130
|
||||
},
|
||||
{
|
||||
'realqty': '160',
|
||||
'planqty': '200',
|
||||
'workorder_procedure': '3'
|
||||
'workorder_procedure': '今日干燥量',
|
||||
'real_qty': 160
|
||||
},
|
||||
{
|
||||
'realqty': '70',
|
||||
'planqty': '100',
|
||||
'workorder_procedure': '4'
|
||||
'workorder_procedure': '今日成品量',
|
||||
'real_qty': 70
|
||||
}
|
||||
],
|
||||
'planRes': [
|
||||
{
|
||||
'workorder_procedure': '压制',
|
||||
'plan_qty': 300,
|
||||
'real_qty': 130
|
||||
},
|
||||
{
|
||||
'workorder_procedure': '干燥',
|
||||
'plan_qty': 200,
|
||||
'real_qty': 160
|
||||
},
|
||||
{
|
||||
'workorder_procedure': '包装',
|
||||
'plan_qty': 100,
|
||||
'real_qty': 70
|
||||
}
|
||||
],
|
||||
'materialTask': [
|
||||
{
|
||||
'plan_qty': '600',
|
||||
'real_qty': '360'
|
||||
}
|
||||
],
|
||||
'productionTask': [
|
||||
{
|
||||
'workorder_id': '1597564588067524613',
|
||||
'label': '烧制工序',
|
||||
'label': '烧制',
|
||||
'device_name': '混料机3',
|
||||
'material_code': 'HW00001',
|
||||
'material_name': '木质花纹2cm',
|
||||
'cust_name': '新余钢铁',
|
||||
'plan_qty': 100,
|
||||
'real_qty': 80,
|
||||
'order_status': '5',
|
||||
'order_status': '完成',
|
||||
'shift_type': '烧制白班',
|
||||
'realproducestart_date': '2023-2-27 12:40:00'
|
||||
}
|
||||
],
|
||||
'materialTask': [
|
||||
},
|
||||
{
|
||||
'realqty': '360',
|
||||
'planqty': '600'
|
||||
'workorder_id': '1597564588067524608',
|
||||
'label': '压制',
|
||||
'device_name': '混料机3',
|
||||
'material_code': 'HW00001',
|
||||
'material_name': '木质花纹2cm',
|
||||
'cust_name': '新余钢铁',
|
||||
'plan_qty': 100,
|
||||
'real_qty': 0,
|
||||
'order_status': '暂停',
|
||||
'shift_type': '压制白班',
|
||||
'realproducestart_date': '2023-2-27 09:15:00'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<section>
|
||||
<t-header index='2'></t-header>
|
||||
<t-header index='1'></t-header>
|
||||
<section>
|
||||
<div class="con1">
|
||||
<div class="c-title c-left">
|
||||
@@ -21,7 +21,7 @@
|
||||
<div class="c-title c-right" style="marginLeft: 1.5rem;">
|
||||
<span>今日成品量：</span>
|
||||
<div class="num">
|
||||
<div class="bg" v-for="item in showNum2" :key="item" :class="{dot: item === '.'}">{{item}}</div>
|
||||
<div class="bg" v-for="item in showNum3" :key="item" :class="{dot: item === '.'}">{{item}}</div>
|
||||
</div>
|
||||
<span>吨</span>
|
||||
</div>
|
||||
@@ -30,8 +30,8 @@
|
||||
<div class="con2">
|
||||
<div class="title">原料计划完成情况</div>
|
||||
<div class="desc">
|
||||
<div>计划生产：<span>12</span>吨</div>
|
||||
<div>已生产：<span>2</span>吨</div>
|
||||
<div>计划生产：<span>{{planqty}}</span>吨</div>
|
||||
<div>已生产：<span>{{realqty}}</span>吨</div>
|
||||
</div>
|
||||
<div class="item_content_0">
|
||||
<div id="echart_d01" style="width: 100%; height: 100%"></div>
|
||||
@@ -94,7 +94,9 @@ export default {
|
||||
materData: [],
|
||||
deviceData: [],
|
||||
resData: {},
|
||||
taskData: []
|
||||
taskData: [],
|
||||
realqty: '',
|
||||
planqty: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -132,18 +134,24 @@ export default {
|
||||
let res = await productionStatistics()
|
||||
this.resData = res
|
||||
this.taskData = [...res.productionTask]
|
||||
this.realqty = res.materialTask[0].real_qty
|
||||
this.planqty = res.materialTask[0].plan_qty
|
||||
this.showNum1 = (res.finishedTask[0].real_qty + '').split('')
|
||||
this.showNum2 = (res.finishedTask[1].real_qty + '').split('')
|
||||
this.showNum3 = (res.finishedTask[2].real_qty + '').split('')
|
||||
this.setEchart01()
|
||||
this.setEchart05()
|
||||
},
|
||||
setEchart01 () {
|
||||
// let data = [100, 30, 80, 50]
|
||||
let data = []
|
||||
data.push(this.resData.materialTask[0].realqty)
|
||||
data.push(this.resData.materialTask[0].planqty)
|
||||
data.push(this.resData.materialTask[0].real_qty)
|
||||
data.push(this.resData.materialTask[0].plan_qty)
|
||||
var option = {
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
right: 0,
|
||||
right: 'right',
|
||||
top: '8%',
|
||||
data: ['未完成重量', '已经完成重量', '重量3', '重量4'],
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
@@ -176,10 +184,10 @@ export default {
|
||||
var data05d0 = []
|
||||
var data05d1 = []
|
||||
var data05d2 = []
|
||||
this.resData.finishedTask.map(el => {
|
||||
this.resData.planRes.map(el => {
|
||||
data05d0.push(el.workorder_procedure)
|
||||
data05d1.push(el.planqty)
|
||||
data05d2.push(el.realqty)
|
||||
data05d1.push(el.plan_qty)
|
||||
data05d2.push(el.real_qty)
|
||||
})
|
||||
let option = {
|
||||
grid: {
|
||||
@@ -665,8 +673,9 @@ export default {
|
||||
position absolute
|
||||
top .3rem
|
||||
left .25rem
|
||||
height 375px
|
||||
height 360px
|
||||
width 95%
|
||||
margin-bottom .1rem
|
||||
.con4
|
||||
float left
|
||||
margin-left .49rem
|
||||
|
||||
823
src/pages/StorageMonitor2.vue
Normal file
823
src/pages/StorageMonitor2.vue
Normal file
@@ -0,0 +1,823 @@
|
||||
<template>
|
||||
<section>
|
||||
<t-header index='2'></t-header>
|
||||
<div class="content clearfix">
|
||||
<div class="con1">
|
||||
<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="{lock:e.lock_type ==='01'}">
|
||||
<div class="yard_group_p" @click="getInfo1(e)">
|
||||
<p class="fontselect">{{e.struct_code}}</p>
|
||||
<div v-if="e.struct_url == '1'" class="machine_1"></div>
|
||||
<div class="ingbox" :style="{height:(Number(e.show_struct_qty)/1000*60+'px')}" :class="{blue:e.struct_status ==='01',green:e.struct_status ==='02',yellow:e.struct_status ==='03',red:e.struct_status ==='04',gray:e.struct_status ==='05'}"></div>
|
||||
</div>
|
||||
<div v-show="code1 === e.sequence_number" class="locate-wrap clearfix">
|
||||
<div :class="e.aline">
|
||||
<div class="foldcricle0 foldcricle1"></div>
|
||||
<div class="foldline0 foldline1"></div>
|
||||
</div>
|
||||
<div :class="e.bline">
|
||||
<div class="foldline0 foldline2"></div>
|
||||
<div class="foldcricle0 foldcricle2"></div>
|
||||
</div>
|
||||
<div class="clearfix locate-content" :class="e.coordinate">
|
||||
<div class="tan_pline">
|
||||
<p class="tan_p">货位：{{e.struct_code}}</p>
|
||||
<p class="tan_p">载具：{{e.storagevehicle_code}}</p>
|
||||
<p class="tan_p">物料：{{e.material_code}}</p>
|
||||
<p class="tan_p">名称：{{e.material_name}}</p>
|
||||
<p class="tan_p">重量：{{e.ivt_qty}}</p>
|
||||
<p class="tan_p">入库时间：{{e.instorage_time}}</p>
|
||||
<p class="tan_p">静置(h)：{{e.finish_times}}</p>
|
||||
</div>
|
||||
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="corridor_2"> </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="{lock:e.lock_type ==='01'}">
|
||||
<div class="yard_group_p" @click="getInfo1(e)">
|
||||
<p class="fontselect">{{e.struct_code}}</p>
|
||||
<div v-if="e.struct_url == '1'" class="machine_1"></div>
|
||||
<div class="ingbox" :style="{height:(Number(e.show_struct_qty)/1000*60+'px')}" :class="{blue:e.struct_status ==='01',green:e.struct_status ==='02',yellow:e.struct_status ==='03',red:e.struct_status ==='04',gray:e.struct_status ==='05'}"></div>
|
||||
</div>
|
||||
<div v-show="code1 === e.sequence_number" class="locate-wrap clearfix">
|
||||
<div :class="e.aline">
|
||||
<div class="foldcricle0 foldcricle1"></div>
|
||||
<div class="foldline0 foldline1"></div>
|
||||
</div>
|
||||
<div :class="e.bline">
|
||||
<div class="foldline0 foldline2"></div>
|
||||
<div class="foldcricle0 foldcricle2"></div>
|
||||
</div>
|
||||
<div class="clearfix locate-content" :class="e.coordinate">
|
||||
<div class="tan_pline">
|
||||
<p class="tan_p">货位：{{e.struct_code}}</p>
|
||||
<p class="tan_p">载具：{{e.storagevehicle_code}}</p>
|
||||
<p class="tan_p">物料：{{e.material_code}}</p>
|
||||
<p class="tan_p">名称：{{e.material_name}}</p>
|
||||
<p class="tan_p">重量：{{e.ivt_qty}}</p>
|
||||
<p class="tan_p">入库时间：{{e.instorage_time}}</p>
|
||||
<p class="tan_p">静置(h)：{{e.finish_times}}</p>
|
||||
</div>
|
||||
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="corridor_2"> </div>
|
||||
<div class="yard_group clearfix">
|
||||
<div class="yard_group_ul yard_group_ul_3">
|
||||
<div class="yard_group_cell" v-for="(e, i) in group03" :key="i" :class="{lock:e.lock_type ==='01'}">
|
||||
<div class="yard_group_p" @click="getInfo1(e)">
|
||||
<p class="fontselect">{{e.struct_code}}</p>
|
||||
<div v-if="e.struct_url == '1'" class="machine_1"></div>
|
||||
<div class="ingbox" :style="{height:(Number(e.show_struct_qty)/1000*60+'px')}" :class="{blue:e.struct_status ==='01',green:e.struct_status ==='02',yellow:e.struct_status ==='03',red:e.struct_status ==='04',gray:e.struct_status ==='05'}"></div>
|
||||
</div>
|
||||
<div v-show="code1 === e.sequence_number" class="locate-wrap clearfix">
|
||||
<div :class="e.aline">
|
||||
<div class="foldcricle0 foldcricle1"></div>
|
||||
<div class="foldline0 foldline1"></div>
|
||||
</div>
|
||||
<div :class="e.bline">
|
||||
<div class="foldline0 foldline2"></div>
|
||||
<div class="foldcricle0 foldcricle2"></div>
|
||||
</div>
|
||||
<div class="clearfix locate-content" :class="e.coordinate">
|
||||
<div class="tan_pline">
|
||||
<p class="tan_p">货位：{{e.struct_code}}</p>
|
||||
<p class="tan_p">载具：{{e.storagevehicle_code}}</p>
|
||||
<p class="tan_p">物料：{{e.material_code}}</p>
|
||||
<p class="tan_p">名称：{{e.material_name}}</p>
|
||||
<p class="tan_p">重量：{{e.ivt_qty}}</p>
|
||||
<p class="tan_p">入库时间：{{e.instorage_time}}</p>
|
||||
<p class="tan_p">静置(h)：{{e.finish_times}}</p>
|
||||
</div>
|
||||
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tag_block">
|
||||
<div class="tag_type">
|
||||
<div class="type_color green"></div>
|
||||
<div class="tag_text">静置中</div>
|
||||
</div>
|
||||
<div class="tag_type">
|
||||
<div class="type_color blue"></div>
|
||||
<div class="tag_text">空盅</div>
|
||||
</div>
|
||||
<div class="tag_type">
|
||||
<div class="type_color gray"></div>
|
||||
<div class="tag_text">禁用</div>
|
||||
</div>
|
||||
<div class="tag_type">
|
||||
<div class="type_color yellow"></div>
|
||||
<div class="tag_text">静置完成</div>
|
||||
</div>
|
||||
<div class="tag_type">
|
||||
<div class="type_color red"></div>
|
||||
<div class="tag_text">强制完成</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="con-b con3">
|
||||
<div class="block_h2">
|
||||
<h2>原料库存</h2>
|
||||
</div>
|
||||
<div class="list_scroll_title">
|
||||
<span>货位</span><span>物料编码</span><span>物料名称</span><span>重量</span><span>已静置时间</span><span>状态</span>
|
||||
</div>
|
||||
<vue-seamless-scroll :data="array1" :class-option="classOption" class="content-block-scroll">
|
||||
<ul class="content-block-scroll-ul">
|
||||
<li v-for="(e, i) in array1" :key="i">
|
||||
<span>{{e.point_name}}</span><span>{{e.material_id}}</span><span>{{e.material_name}}</span><span>{{e.ivt_weight}}</span><span>{{e.standing_time}}</span><span>{{e.standing_status}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
<div class="con-b con3">
|
||||
<div class="block_h2">
|
||||
<h2>成品库存</h2>
|
||||
</div>
|
||||
<div class="list_scroll_title">
|
||||
<span>货位</span><span>物料编码</span><span>物料名称</span><span>库存数</span><span>是否满托</span><span>托盘号</span>
|
||||
</div>
|
||||
<vue-seamless-scroll :data="array2" :class-option="classOption" class="content-block-scroll">
|
||||
<ul class="content-block-scroll-ul">
|
||||
<li v-for="(e, i) in array2" :key="i">
|
||||
<span>{{e.point_name}}</span><span>{{e.material_id}}</span><span>{{e.material_name}}</span><span>{{e.ivt_qty}}</span><span>{{e.is_full}}</span><span>{{e.vehicle_code}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import THeader from '@components/header.vue'
|
||||
import * as echarts from 'echarts'
|
||||
import { storageMonitor } from '@js/getData1'
|
||||
export default {
|
||||
name: 'StorageMonitor',
|
||||
components: {
|
||||
THeader
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
materArr1: [],
|
||||
materArr2: [],
|
||||
structArr: [],
|
||||
array1: [],
|
||||
array2: [],
|
||||
group01: [],
|
||||
group02: [],
|
||||
group03: [],
|
||||
code1: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// classOption () {
|
||||
// return {
|
||||
// step: 0.4,
|
||||
// limitMoveNum: 6
|
||||
// }
|
||||
// }
|
||||
classOption () {
|
||||
return {
|
||||
step: 0.2, // 数值越大速度滚动越快
|
||||
limitMoveNum: 3, // 开始无缝滚动的数据量 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 () {
|
||||
// lock_type 00空闲，01锁定
|
||||
// struct_status 00为空，01为空盅，02为静置中，03为静置完成，04为强制完成，05为禁用
|
||||
// 编号排布
|
||||
// 12排
|
||||
let pai1 = []
|
||||
let pai2 = []
|
||||
let pai12 = []
|
||||
for (let i = 1; i <= 20; i++) {
|
||||
if (i <= 10) {
|
||||
pai1.push({sequence_number: i * 2 - 1, coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
|
||||
pai2.push({sequence_number: i * 2, coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
|
||||
} else {
|
||||
pai1.push({sequence_number: i * 2 - 1, coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
|
||||
pai2.push({sequence_number: i * 2, coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
|
||||
}
|
||||
}
|
||||
pai12 = pai1.concat(pai2)
|
||||
this.group01 = pai12
|
||||
// 34排
|
||||
let pai3 = []
|
||||
let pai4 = []
|
||||
let pai34 = []
|
||||
for (let i = 21; i <= 38; i++) {
|
||||
if (i <= 30) {
|
||||
pai3.push({sequence_number: i * 2 - 1, coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
|
||||
pai4.push({sequence_number: i * 2, coordinate: 'coordinate3', aline: 'aline3', bline: 'bline3', show: 0})
|
||||
} else {
|
||||
pai3.push({sequence_number: i * 2 - 1, coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
|
||||
pai4.push({sequence_number: i * 2, coordinate: 'coordinate3', aline: 'aline3', bline: 'bline3', show: 0})
|
||||
}
|
||||
}
|
||||
pai34 = pai3.concat(pai4)
|
||||
this.group02 = pai34
|
||||
// 56排
|
||||
let pai5 = []
|
||||
let pai6 = []
|
||||
let pai56 = []
|
||||
for (let i = 39; i <= 46; i++) {
|
||||
if (i <= 4) {
|
||||
pai5.push({sequence_number: i * 2 - 1, coordinate: 'coordinate3', aline: 'aline3', bline: 'bline3', show: 0})
|
||||
pai6.push({sequence_number: i * 2, coordinate: 'coordinate3', aline: 'aline3', bline: 'bline3', show: 0})
|
||||
} else {
|
||||
pai5.push({sequence_number: i * 2 - 1, coordinate: 'coordinate3', aline: 'aline3', bline: 'bline3', show: 0})
|
||||
pai6.push({sequence_number: i * 2, coordinate: 'coordinate3', aline: 'aline3', bline: 'bline3', show: 0})
|
||||
}
|
||||
}
|
||||
pai56 = pai5.concat(pai6)
|
||||
this.group03 = pai56
|
||||
// end
|
||||
// 加载echarts图表
|
||||
this.initData()
|
||||
// this.refresh()
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
refresh () {
|
||||
this.timer = setInterval(() => {
|
||||
this.code1 = ''
|
||||
this.initData()
|
||||
}, this.interTime)
|
||||
},
|
||||
async initData () {
|
||||
let res = await storageMonitor()
|
||||
this.array1 = res.materialList
|
||||
this.array2 = res.productionList
|
||||
},
|
||||
// getdata(e) {
|
||||
// // getdata(21),22,23
|
||||
// // this.code1 = this.code1 === id ? '' : id
|
||||
|
||||
// // list：【
|
||||
// id:xxx,
|
||||
// show: false
|
||||
// 】
|
||||
// e.show = true
|
||||
// {show: true}
|
||||
// show:false
|
||||
// },
|
||||
getInfo1 (e) {
|
||||
this.code1 = this.code1 === e.sequence_number ? '' : e.sequence_number
|
||||
},
|
||||
closebtn () {
|
||||
this.code1 = ''
|
||||
},
|
||||
getEchart1 () {
|
||||
var finishArr = []
|
||||
var materArr = []
|
||||
this.materArr1.map(el => {
|
||||
finishArr.push(el.finished_qty)
|
||||
materArr.push(el.material_code)
|
||||
})
|
||||
var option = {
|
||||
legend: {
|
||||
top: 10,
|
||||
right: 10,
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 12,
|
||||
lineHeight: 20
|
||||
},
|
||||
itemGap: 20,
|
||||
itemHeight: 8,
|
||||
data: ['完成物料']
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
// data: ['1号砖', '2号砖', '3号砖', '4号砖', '5号砖', '6号砖', '7号砖'],
|
||||
data: materArr,
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
// yAxis: {
|
||||
// type: 'value'
|
||||
// },
|
||||
yAxis: {
|
||||
// splitNumber: 5,
|
||||
// 设置坐标轴字体颜色和宽度
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: '完成物料',
|
||||
// data: [10, 50, 30, 20, 60, 70, 80],
|
||||
data: finishArr,
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// color: '#fff',
|
||||
// distance: 15
|
||||
// },
|
||||
color: '#dc33e6'
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
var echart = document.getElementById('echarts1')
|
||||
var myChart = echarts.init(echart)
|
||||
myChart.setOption(option)
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize()
|
||||
})
|
||||
},
|
||||
getEchart3 () {
|
||||
var statusqtyArr = []
|
||||
this.materArr2.map(el => {
|
||||
statusqtyArr.push(el.status__qty)
|
||||
})
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(document.getElementById('echarts3'))
|
||||
var option = {
|
||||
color: ['#30EBC9 ', '#E2BB0E', '#FF0000'],
|
||||
legend: {
|
||||
top: 40,
|
||||
right: 160,
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 12,
|
||||
lineHeight: 20
|
||||
},
|
||||
itemGap: 20,
|
||||
itemHeight: 8,
|
||||
data: ['状态汇总']
|
||||
// data: ['静置中', '静置完成', '强制完成']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
position: 'top',
|
||||
offset: -10,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
boundaryGap: [0, 0.4]
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '状态汇总',
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
// data: [120, 200, 150],
|
||||
data: statusqtyArr,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'right',
|
||||
// color: '#fff'
|
||||
// },
|
||||
color: function (params) {
|
||||
// 注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
|
||||
var colorList = ['#30EBC9 ', '#E2BB0E', '#FF0000']
|
||||
return colorList[params.dataIndex]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option)
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@css/mixin'
|
||||
.cgreen
|
||||
color #30EBC9 !important
|
||||
.cyellow
|
||||
color #E2BB0E !important
|
||||
.cred
|
||||
color #FF0000 !important
|
||||
.status1
|
||||
color #32C5FF
|
||||
.status2
|
||||
color #F7B502
|
||||
.content
|
||||
width 100%
|
||||
padding .15rem .54rem 0
|
||||
.con1
|
||||
position relative
|
||||
// height 5.7rem
|
||||
height 570px
|
||||
.tag_block
|
||||
position absolute
|
||||
// bottom .1rem
|
||||
bottom 10px
|
||||
right .3rem
|
||||
.tag_type
|
||||
display inline-block
|
||||
padding-left .3rem
|
||||
.type_color
|
||||
display inline-block
|
||||
width .1rem
|
||||
height .1rem
|
||||
border-radius 50%
|
||||
.tag_text
|
||||
display inline-block
|
||||
font-size .14rem
|
||||
line-height .2rem
|
||||
.blue
|
||||
background #32C5FF !important
|
||||
.green
|
||||
background #30EBC9 !important
|
||||
.gray
|
||||
background #516282 !important
|
||||
.yellow
|
||||
background #E2BB0E !important
|
||||
.orange
|
||||
background #F96700 !important
|
||||
.red
|
||||
background #FF0000 !important
|
||||
.lock
|
||||
border .02rem solid #f00 !important
|
||||
.yard-wrap
|
||||
// height 6.95rem
|
||||
height 100%
|
||||
width 100%
|
||||
// padding .1rem 0
|
||||
.yard_group
|
||||
width 100%
|
||||
// height 1.8rem
|
||||
height 180px
|
||||
clear both
|
||||
.yard_group_ul
|
||||
float left
|
||||
display grid
|
||||
grid-gap 0
|
||||
justify-items center
|
||||
align-items center
|
||||
margin-top -.01rem
|
||||
.yard_group_ul_1
|
||||
width 100%
|
||||
position absolute
|
||||
grid-template-columns repeat(20, 100% / 20)
|
||||
// grid-template-rows repeat(2, 1.8rem / 2)
|
||||
grid-template-rows repeat(2, 90px)
|
||||
.yard_group_ul_2
|
||||
width 90%
|
||||
grid-template-columns repeat(18, 100% / 18)
|
||||
// grid-template-rows repeat(2, 1.8rem / 2)
|
||||
grid-template-rows repeat(2, 90px)
|
||||
.yard_group_ul_3
|
||||
width 40%
|
||||
grid-template-columns repeat(8, 100% / 8)
|
||||
// grid-template-rows repeat(2, 1.8rem / 2)
|
||||
grid-template-rows repeat(2, 90px)
|
||||
.yard_group_cell
|
||||
position relative
|
||||
display inline-block
|
||||
width 100%
|
||||
// height calc(1.8rem / 2)
|
||||
height 90px
|
||||
box-sizing border-box
|
||||
border .01rem solid #32C5FF
|
||||
background #000F2B
|
||||
border-radius 8px
|
||||
.yard_group_p
|
||||
// height calc(1.8rem / 2)
|
||||
height 90px
|
||||
p
|
||||
font-size 12px
|
||||
// line-height 0.28rem
|
||||
line-height 28px
|
||||
height 28px
|
||||
-webkit-text-size-adjust none
|
||||
text-align center
|
||||
white-space nowrap
|
||||
img
|
||||
display block
|
||||
width 60%
|
||||
// height 0.6rem
|
||||
height 60px
|
||||
margin 0 auto
|
||||
.machine_1
|
||||
position absolute
|
||||
width 60%
|
||||
width 100%
|
||||
height 60px
|
||||
overflow hidden
|
||||
background center center / 100% 100% url(../assets/images/zhong.png) no-repeat
|
||||
margin 0 auto
|
||||
z-index 98
|
||||
// left 50%
|
||||
// margin-left -30%
|
||||
opacity 0.5
|
||||
.ingbox
|
||||
position absolute
|
||||
bottom 0
|
||||
width 100%
|
||||
z-index 97 //
|
||||
.corridor_2
|
||||
width 100%
|
||||
// line-height .1rem
|
||||
line-height 10px
|
||||
text-align center
|
||||
.locate-wrap
|
||||
position absolute
|
||||
width 100%
|
||||
.locate-content
|
||||
position absolute
|
||||
width 2.4rem
|
||||
height 2.8rem
|
||||
z-index 99
|
||||
background center center / 100% 100% url(../assets/images/popover_1.png) no-repeat
|
||||
padding .36rem .3rem
|
||||
.tan_pline
|
||||
width 100%
|
||||
margin 0 auto
|
||||
.tan_p
|
||||
font-size .14rem
|
||||
line-height .26rem
|
||||
height .26rem
|
||||
overflow hidden
|
||||
color #fff
|
||||
.close_btn
|
||||
position absolute
|
||||
top 3%
|
||||
right 10%
|
||||
margin-right -.25rem
|
||||
font-size .14rem
|
||||
line-height .34rem
|
||||
padding 0 .16rem
|
||||
border-radius 5px
|
||||
cursor pointer
|
||||
.con-b
|
||||
width 49%
|
||||
// height 3.45rem
|
||||
height 345px
|
||||
overflow hidden
|
||||
position relative
|
||||
background center center / 100% 100% url(../assets/images/sctj_bg3.png) no-repeat
|
||||
margin-top .1rem
|
||||
float left
|
||||
.con2
|
||||
margin-right .2rem
|
||||
#echarts1
|
||||
// margin-left 2rem
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
z-index 9
|
||||
#echarts3
|
||||
// margin-left 2rem
|
||||
position absolute
|
||||
top -30px
|
||||
// left 60px
|
||||
left .60rem
|
||||
z-index 10
|
||||
.title
|
||||
position absolute
|
||||
top .15rem
|
||||
left .25rem
|
||||
.con3
|
||||
padding 0 .27rem 0 .27rem
|
||||
.block_h2
|
||||
h2
|
||||
font-size .16rem
|
||||
line-height .22rem
|
||||
margin .15rem 0 .15rem 0
|
||||
.list_scroll_title
|
||||
width 100%
|
||||
background #262F52
|
||||
span
|
||||
display inline-block
|
||||
width 16.6%
|
||||
text-align center
|
||||
line-height .32rem
|
||||
font-size 14px
|
||||
// float left
|
||||
.content-block-scroll
|
||||
width 100%
|
||||
height calc(100% - 0.6rem)
|
||||
overflow hidden
|
||||
.content-block-scroll-ul
|
||||
li
|
||||
width 100%
|
||||
&:nth-child(2n)
|
||||
background rgba(38,47,82,0.50)
|
||||
span
|
||||
display inline-block
|
||||
width 16.6%
|
||||
padding 0 .1rem
|
||||
font-size 12px
|
||||
text-align center
|
||||
line-height .38rem
|
||||
box-sizing border-box
|
||||
// float left
|
||||
.foldcricle0
|
||||
position absolute
|
||||
z-index 102
|
||||
width .24rem
|
||||
height .24rem
|
||||
background center center / 100% 100% url(../assets/images/dot.png) no-repeat
|
||||
.foldcricle2
|
||||
top .50rem
|
||||
left .55rem
|
||||
.foldcricle1
|
||||
top 0
|
||||
left -0.1rem
|
||||
.foldline0
|
||||
position absolute
|
||||
z-index 102
|
||||
border 1px dashed #32C5FF
|
||||
height 1px
|
||||
.foldline1
|
||||
width .30rem
|
||||
top .12rem
|
||||
left .09rem
|
||||
.foldline2
|
||||
width .60rem
|
||||
top .38rem
|
||||
left .24rem
|
||||
transform rotate(60deg)
|
||||
.coordinate1
|
||||
left .9rem
|
||||
top -.14rem
|
||||
.coordinate2
|
||||
right .86rem
|
||||
top -.14rem
|
||||
.coordinate3
|
||||
left .9rem
|
||||
bottom .86rem
|
||||
.aline1
|
||||
position absolute
|
||||
z-index 102
|
||||
top -.70rem
|
||||
left .88rem
|
||||
.bline1
|
||||
position absolute
|
||||
top -.70rem
|
||||
left .93rem
|
||||
.aline2
|
||||
position absolute
|
||||
z-index 102
|
||||
transform rotate(180deg)
|
||||
top -.50rem
|
||||
left 0px
|
||||
.bline2
|
||||
position absolute
|
||||
z-index 102
|
||||
transform rotate(60deg)
|
||||
top -1.01rem
|
||||
right 1.38rem
|
||||
.aline3
|
||||
position absolute
|
||||
z-index 102
|
||||
transform rotate(0deg)
|
||||
bottom .7rem
|
||||
left .88rem
|
||||
.bline3
|
||||
position absolute
|
||||
z-index 102
|
||||
transform rotate(-120deg)
|
||||
bottom .2rem
|
||||
left 1.38rem
|
||||
// .foldcricle0
|
||||
// position absolute
|
||||
// z-index 102
|
||||
// width 24px
|
||||
// height 24px
|
||||
// background center center / 100% 100% url(../assets/images/dot.png) no-repeat
|
||||
// .foldcricle2
|
||||
// top 50px
|
||||
// left 55px
|
||||
// .foldcricle1
|
||||
// top 0
|
||||
// left -0.1rem
|
||||
// .foldline0
|
||||
// position absolute
|
||||
// z-index 102
|
||||
// border 1px dashed #32C5FF
|
||||
// height 1px
|
||||
// .foldline1
|
||||
// width 30px
|
||||
// top 12px
|
||||
// left 9px
|
||||
// .foldline2
|
||||
// width 60px
|
||||
// top 38px
|
||||
// left 24px
|
||||
// transform rotate(60deg)
|
||||
// .coordinate1
|
||||
// left 38px
|
||||
// top -14px
|
||||
// .coordinate2
|
||||
// right 53px
|
||||
// top -14px
|
||||
// .coordinate3
|
||||
// left 38px
|
||||
// bottom 66px
|
||||
// .aline1
|
||||
// position absolute
|
||||
// z-index 102
|
||||
// top -70px
|
||||
// left 88px
|
||||
// .bline1
|
||||
// position absolute
|
||||
// top -70px
|
||||
// left 88px
|
||||
// .aline2
|
||||
// position absolute
|
||||
// z-index 102
|
||||
// transform rotate(180deg)
|
||||
// top -50px
|
||||
// left 0px
|
||||
// .bline2
|
||||
// position absolute
|
||||
// z-index 102
|
||||
// transform rotate(60deg)
|
||||
// top -100px
|
||||
// right 138px
|
||||
// .aline3
|
||||
// position absolute
|
||||
// z-index 102
|
||||
// transform rotate(0deg)
|
||||
// bottom 50px
|
||||
// left 88px
|
||||
// .bline3
|
||||
// position absolute
|
||||
// z-index 102
|
||||
// transform rotate(-120deg)
|
||||
// bottom -2px
|
||||
// left 138px
|
||||
</style>
|
||||
@@ -4,7 +4,7 @@ import Router from 'vue-router'
|
||||
const Test = r => require.ensure([], () => r(require('@page/Test')), 'Test2')
|
||||
const Setup = r => require.ensure([], () => r(require('@page/Setup')), 'Setup')
|
||||
const HomePage = r => require.ensure([], () => r(require('@page/HomePage')), 'HomePage')
|
||||
const StorageMonitor = r => require.ensure([], () => r(require('@page/StorageMonitor')), 'StorageMonitor')
|
||||
const StorageMonitor = r => require.ensure([], () => r(require('@page/StorageMonitor2')), 'StorageMonitor')
|
||||
const DeviceMonitor = r => require.ensure([], () => r(require('@page/DeviceMonitor')), 'DeviceMonitor')
|
||||
const LogisticsTech = r => require.ensure([], () => r(require('@page/LogisticsTech')), 'LogisticsTech')
|
||||
const ProdCount = r => require.ensure([], () => r(require('@page/ProdCount2')), 'ProdCount')
|
||||
|
||||
Reference in New Issue
Block a user