修改图表

master
夜笙歌 2 months ago
parent 748315dab7
commit ed42221638

@ -181,7 +181,7 @@ export default {
allowPointSelect: false,
cursor: 'pointer',
depth: 35,
startAngle: 45,y
startAngle: 45,
size: 200,
dataLabels: {
enabled: true,

@ -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;

Loading…
Cancel
Save