|
|
|
@ -1,10 +1,13 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="app-container">
|
|
|
|
|
<!-- <div class="warehouse"></div>-->
|
|
|
|
|
<!-- <div class="warehouse"></div>-->
|
|
|
|
|
<div class="headTitle">京源智能仓储监控平台</div>
|
|
|
|
|
<div class="wareHouse">
|
|
|
|
|
<div v-for="i in wareHouseData" class="list" >
|
|
|
|
|
<div class="item" v-for="ii in i" :style="`background-color: ${ii.locationStatus==='1'?'#75f66e':'#999'};color: ${ii.locationStatus==='1'?'#000':'#fff'}`">{{ ii.locationCode }}</div>
|
|
|
|
|
<div v-for="i in wareHouseData" class="list">
|
|
|
|
|
<div class="item" v-for="ii in i"
|
|
|
|
|
:style="`background-color: ${ii.locationStatus== '1'?'#75f66e':'#999'};color: ${ii.locationStatus=='1'?'#000':'#fff'}`"
|
|
|
|
|
>{{ ii.locationCode }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-for="(i,k) in title"
|
|
|
|
@ -96,28 +99,28 @@
|
|
|
|
|
<div class="span" style="top: 21.7%; left: 55%; color:#7ba9cb;font-size: 0.9vw">单日出库量</div>
|
|
|
|
|
<div class="span" style="top: 21.7%; left: 69.6%; color:#7ba9cb;font-size: 0.9vw">单月入库量</div>
|
|
|
|
|
<div class="span" style="top: 21.7%; left: 83%; color:#7ba9cb;font-size: 0.9vw">单月出库量</div>
|
|
|
|
|
<!-- <div class="span" style="top: 38.7%; left: 42%; color:#7ba9cb;font-size: 0.9vw">仓库1-库位统计</div>-->
|
|
|
|
|
<!-- <div class="span" style="top: 38.7%; left: 87%; color:#7ba9cb;font-size: 0.9vw">仓库2-库位统计</div>-->
|
|
|
|
|
<!-- <div class="span1" style="top: 46.7%; left: 45.5%; color:#7ba9cb;font-size: 0.9vw">空库位</div>-->
|
|
|
|
|
<!-- <div class="span1" style="top: 63%; left: 45.5%; color:#7ba9cb;font-size: 0.9vw">已用库位</div>-->
|
|
|
|
|
<!-- <div class="span1" style="top: 46.7%; left: 90.6%; color:#7ba9cb;font-size: 0.9vw">空库位</div>-->
|
|
|
|
|
<!-- <div class="span1" style="top: 63%; left: 90.6%; color:#7ba9cb;font-size: 0.9vw">已用库位</div>-->
|
|
|
|
|
<!-- <div class="span" style="top: 50.7%; left: 47%; color:#7ba9cb;font-size: 0.9vw">个</div>-->
|
|
|
|
|
<!-- <div class="span" style="top: 67.7%; left: 47%; color:#7ba9cb;font-size: 0.9vw">个</div>-->
|
|
|
|
|
<!-- <div class="span" style="top: 50.7%; left: 92.2%; color:#7ba9cb;font-size: 0.9vw">个</div>-->
|
|
|
|
|
<!-- <div class="span" style="top: 67.7%; left: 92.2%; color:#7ba9cb;font-size: 0.9vw">个</div>-->
|
|
|
|
|
<!-- <div class="span" style="top: 38.7%; left: 42%; color:#7ba9cb;font-size: 0.9vw">仓库1-库位统计</div>-->
|
|
|
|
|
<!-- <div class="span" style="top: 38.7%; left: 87%; color:#7ba9cb;font-size: 0.9vw">仓库2-库位统计</div>-->
|
|
|
|
|
<!-- <div class="span1" style="top: 46.7%; left: 45.5%; color:#7ba9cb;font-size: 0.9vw">空库位</div>-->
|
|
|
|
|
<!-- <div class="span1" style="top: 63%; left: 45.5%; color:#7ba9cb;font-size: 0.9vw">已用库位</div>-->
|
|
|
|
|
<!-- <div class="span1" style="top: 46.7%; left: 90.6%; color:#7ba9cb;font-size: 0.9vw">空库位</div>-->
|
|
|
|
|
<!-- <div class="span1" style="top: 63%; left: 90.6%; color:#7ba9cb;font-size: 0.9vw">已用库位</div>-->
|
|
|
|
|
<!-- <div class="span" style="top: 50.7%; left: 47%; color:#7ba9cb;font-size: 0.9vw">个</div>-->
|
|
|
|
|
<!-- <div class="span" style="top: 67.7%; left: 47%; color:#7ba9cb;font-size: 0.9vw">个</div>-->
|
|
|
|
|
<!-- <div class="span" style="top: 50.7%; left: 92.2%; color:#7ba9cb;font-size: 0.9vw">个</div>-->
|
|
|
|
|
<!-- <div class="span" style="top: 67.7%; left: 92.2%; color:#7ba9cb;font-size: 0.9vw">个</div>-->
|
|
|
|
|
<div class="span" style="top: 87.9%; left: 50.5%; color:#7ba9cb;font-size: 0.9vw">空 库 位:</div>
|
|
|
|
|
<div class="span" style="top: 87.9%; left: 70.2%; color:#7ba9cb;font-size: 0.9vw">已用库位:</div>
|
|
|
|
|
<!-- <div class="span" style="top: 50.6%;right: 53%; color:#7ba9cb;font-size: 1.5vw;letter-spacing: 3px;">99</div>-->
|
|
|
|
|
<!-- <div class="span" style="top: 67.6%;right: 53%; color:#7ba9cb;font-size: 1.5vw;letter-spacing: 3px;">99</div>-->
|
|
|
|
|
<!-- <div class="span" style="top: 50.6%;right: 8%; color:#7ba9cb;font-size: 1.5vw;letter-spacing: 3px;">99</div>-->
|
|
|
|
|
<!-- <div class="span" style="top: 67.6%;right: 8%; color:#7ba9cb;font-size: 1.5vw;letter-spacing: 3px;">99</div>-->
|
|
|
|
|
<div class="span" style="top: 88.2%;right: 40%; color:#7ba9cb;font-size: 1.5vw;letter-spacing: 3px;">99</div>
|
|
|
|
|
<!-- <div class="span" style="top: 50.6%;right: 53%; color:#7ba9cb;font-size: 1.5vw;letter-spacing: 3px;">99</div>-->
|
|
|
|
|
<!-- <div class="span" style="top: 67.6%;right: 53%; color:#7ba9cb;font-size: 1.5vw;letter-spacing: 3px;">99</div>-->
|
|
|
|
|
<!-- <div class="span" style="top: 50.6%;right: 8%; color:#7ba9cb;font-size: 1.5vw;letter-spacing: 3px;">99</div>-->
|
|
|
|
|
<!-- <div class="span" style="top: 67.6%;right: 8%; color:#7ba9cb;font-size: 1.5vw;letter-spacing: 3px;">99</div>-->
|
|
|
|
|
<div class="span" style="top: 88.2%;right: 40%; color:#7ba9cb;font-size: 1.5vw;letter-spacing: 3px;">{{ locationData.notUse }}</div>
|
|
|
|
|
<div class="span" style="top: 88.2%;left: 60%; color:#7ba9cb;font-size: 1vw;letter-spacing: 3px;">个</div>
|
|
|
|
|
<div class="span" style="top: 88.2%;left: 62%; color:#7ba9cb;font-size: 1vw;letter-spacing: 3px;">66%</div>
|
|
|
|
|
<div class="span" style="top: 88.2%;right: 20%; color:#7ba9cb;font-size: 1.5vw;letter-spacing: 3px;">99</div>
|
|
|
|
|
<div class="span" style="top: 88.2%;left: 62%; color:#7ba9cb;font-size: 1vw;letter-spacing: 3px;">{{ locationData.notUseRate }}%</div>
|
|
|
|
|
<div class="span" style="top: 88.2%;right: 20%; color:#7ba9cb;font-size: 1.5vw;letter-spacing: 3px;">{{ locationData.isUse }}</div>
|
|
|
|
|
<div class="span" style="top: 88.2%;left: 80%; color:#7ba9cb;font-size: 1vw;letter-spacing: 3px;">个</div>
|
|
|
|
|
<div class="span" style="top: 88.2%;left: 82%; color:#7ba9cb;font-size: 1vw;letter-spacing: 3px;">66%</div>
|
|
|
|
|
<div class="span" style="top: 88.2%;left: 82%; color:#7ba9cb;font-size: 1vw;letter-spacing: 3px;">{{ locationData.isUseRate }}%</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
@ -143,7 +146,7 @@ export default {
|
|
|
|
|
monthRawInAmount: [0, 0, 0, 0],
|
|
|
|
|
monthRawOutAmount: [0, 0, 0, 0]
|
|
|
|
|
},
|
|
|
|
|
wareHouseData:[],
|
|
|
|
|
wareHouseData: [],
|
|
|
|
|
title: [
|
|
|
|
|
'生产计划',
|
|
|
|
|
'当前库存统计'
|
|
|
|
@ -168,7 +171,8 @@ export default {
|
|
|
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
|
|
|
waitTime: 0
|
|
|
|
|
},
|
|
|
|
|
scrollTableData: []
|
|
|
|
|
scrollTableData: [],
|
|
|
|
|
locationData:{}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
@ -188,23 +192,32 @@ export default {
|
|
|
|
|
})
|
|
|
|
|
locationStatus().then(e => {
|
|
|
|
|
console.log(e)
|
|
|
|
|
let isUse = e.data.filter(v=> v.containerCode).length
|
|
|
|
|
console.log(isUse)
|
|
|
|
|
this.locationData = {
|
|
|
|
|
isUse:isUse,
|
|
|
|
|
notUse:e.data.length - isUse,
|
|
|
|
|
isUseRate : ((isUse / e.data.length)*100).toFixed(0),
|
|
|
|
|
notUseRate : (((e.data.length - isUse) / e.data.length)*100).toFixed(0)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function groupArrayBySize(arr, groupSize) {
|
|
|
|
|
if (!Array.isArray(arr) || typeof groupSize !== 'number' || groupSize <= 0) {
|
|
|
|
|
throw new Error('Invalid input')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const result = [];
|
|
|
|
|
const result = []
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < arr.length; i += groupSize) {
|
|
|
|
|
result.push(arr.slice(i, i + groupSize));
|
|
|
|
|
result.push(arr.slice(i, i + groupSize))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return result;
|
|
|
|
|
return result
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.wareHouseData = groupArrayBySize(e.data, 30);
|
|
|
|
|
this.wareHouseData = groupArrayBySize(e.data, 30)
|
|
|
|
|
})
|
|
|
|
|
productCompleteCount().then(e=>{
|
|
|
|
|
productCompleteCount().then(e => {
|
|
|
|
|
|
|
|
|
|
this.$refs.chart1.setData({
|
|
|
|
|
grid: {
|
|
|
|
@ -230,7 +243,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
data: e.data.map(v => parseTime(v.week,'{m}-{d} {h}:{s}')),
|
|
|
|
|
data: e.data.map(v => parseTime(v.week, '{m}-{d} {h}:{s}')),
|
|
|
|
|
axisLabel: {
|
|
|
|
|
margin: 10,
|
|
|
|
|
color: '#ffffff63'
|
|
|
|
@ -373,7 +386,6 @@ export default {
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
productPlan().then(e => {
|
|
|
|
|
console.log(e)
|
|
|
|
|
this.scrollTableData = e.data.map(v => {
|
|
|
|
|
return {
|
|
|
|
|
taskCode: v.taskCode,
|
|
|
|
@ -461,7 +473,8 @@ export default {
|
|
|
|
|
width: 33.3%;
|
|
|
|
|
height: 32%;
|
|
|
|
|
}
|
|
|
|
|
.wareHouse{
|
|
|
|
|
|
|
|
|
|
.wareHouse {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 37%;
|
|
|
|
|
left: 42.4%;
|
|
|
|
@ -470,11 +483,13 @@ export default {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
.list{
|
|
|
|
|
|
|
|
|
|
.list {
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
.item{
|
|
|
|
|
|
|
|
|
|
.item {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 2%;
|
|
|
|
|
height: 1.5vw;
|
|
|
|
|