You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
743 lines
18 KiB
Vue
743 lines
18 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div class="headTitle">京源智能仓储监控平台</div>
|
|
<div v-for="(i,k) in title"
|
|
:style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
|
|
class="title"
|
|
>
|
|
{{ i }}
|
|
</div>
|
|
<div class="table1">
|
|
<div style="background-color: #094170aa">
|
|
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 15%">
|
|
库位
|
|
</div>
|
|
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 64%">
|
|
成品条码
|
|
</div>
|
|
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 10%">
|
|
数量
|
|
</div>
|
|
</div>
|
|
<vue-seamless-scroll
|
|
:class-option="scrollTableOption"
|
|
:data="scrollTableData"
|
|
class="case-item"
|
|
style="height: calc(100% - 30px);overflow: hidden;"
|
|
>
|
|
<div
|
|
v-for="(item, index) in scrollTableData"
|
|
:key="index"
|
|
>
|
|
<div :style='"background-color:" + ((index % 2 === 0)? "#053460aa":"#032d57aa") '>
|
|
<div
|
|
class="scrollTableItem" style="width: 15%"
|
|
>
|
|
{{ item.locationCode }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style="width: 64%"
|
|
>
|
|
{{ item.productBarcode }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style="width: 10%"
|
|
>
|
|
{{ item.outstockAmount }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
<div class="chart1">
|
|
<Chart key="chart1" ref="chart1"></Chart>
|
|
</div>
|
|
<div class="chart2">
|
|
<Chart key="chart2" ref="chart2"></Chart>
|
|
</div>
|
|
<div class="chart3">
|
|
<Chart key="chart3" ref="chart3"></Chart>
|
|
</div>
|
|
<div class="chart4">
|
|
<Chart key="chart4" ref="chart4"></Chart>
|
|
</div>
|
|
<div class="chart5">
|
|
<Chart key="chart5" ref="chart5"></Chart>
|
|
</div>
|
|
<div class="span1">可用库位占比</div>
|
|
<div class="span2">库存占用率</div>
|
|
<div class="info1">
|
|
<div class="infoSpan">当日入库量:</div>
|
|
<div class="infoSum" style="color:#bbc2c6;">{{ topData.dayInstockAmount || 0 }}</div>
|
|
</div>
|
|
<div class="info2">
|
|
<div class="infoSpan">当日出库量:</div>
|
|
<div class="infoSum" style="color:#a68b19;">{{ topData.dayOutstockAmount || 0 }}</div>
|
|
</div>
|
|
<div class="info3">
|
|
<div class="infoSpan">本月入库量:</div>
|
|
<div class="infoSum" style="color:#01c038;">{{ topData.monthInstockAmount || 0 }}</div>
|
|
</div>
|
|
<div class="info4">
|
|
<div class="infoSpan">本月出库量:</div>
|
|
<div class="infoSum" style="color:#c0070c;">{{ topData.monthOutstockAmount || 0 }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
|
import Chart from '@/components/board/Chart'
|
|
import * as echarts from 'echarts'
|
|
import {
|
|
inAndOutStockInfo,
|
|
instockTimeCount,
|
|
locationCount,
|
|
tableInfo, todayInstockAmount,
|
|
workOrderProgress
|
|
} from '@/api/board/secondFloorWarehouse'
|
|
import { parseTime } from '@/utils/ruoyi'
|
|
|
|
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
|
export default {
|
|
name: 'Board1',
|
|
components: {
|
|
vueSeamlessScroll,
|
|
Chart
|
|
},
|
|
data() {
|
|
return {
|
|
topData: {},
|
|
title: [
|
|
'库存总量统计',
|
|
'库位变化',
|
|
'入库时段统计',
|
|
'库位分析'
|
|
],
|
|
titlePosition: [
|
|
{
|
|
top: 19.7,
|
|
left: 5.5
|
|
},
|
|
{
|
|
top: 19.7,
|
|
left: 35.2
|
|
},
|
|
{
|
|
top: 59.8,
|
|
left: 5.5
|
|
},
|
|
{
|
|
top: 59.8,
|
|
left: 35.2
|
|
}
|
|
],
|
|
scrollTableOption: {
|
|
step: 0.5, // 数值越大速度滚动越快
|
|
limitMoveNum: 6, // 开始无缝滚动的数据量 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: 0
|
|
},
|
|
scrollTableData: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getData()
|
|
|
|
window.onresize = () => {
|
|
this.$refs.chart1.chart.resize()
|
|
this.$refs.chart2.chart.resize()
|
|
this.$refs.chart3.chart.resize()
|
|
this.$refs.chart4.chart.resize()
|
|
this.$refs.chart5.chart.resize()
|
|
}
|
|
},
|
|
methods: {
|
|
getData() {
|
|
workOrderProgress().then(e => {
|
|
this.$refs.chart1.setData({
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
grid: {
|
|
borderWidth: 0,
|
|
top: '10%',
|
|
left: '10%',
|
|
right: '10%',
|
|
bottom: '10%'
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
axisLabel: {
|
|
margin: 10,
|
|
color: '#ffffff63'
|
|
},
|
|
|
|
axisTick: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#ffffff1f'
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#ffffff1f'
|
|
}
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#fff3',
|
|
width: 2
|
|
}
|
|
},
|
|
data: e.data.map(v => v.materialName)
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
margin: 10,
|
|
color: '#ffffff63'
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#ffffff1f'
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#ffffff1f'
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'bar',
|
|
barMaxWidth: '40px',
|
|
barWidth: '40%',
|
|
itemStyle: {
|
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
1,
|
|
0,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: '#0a2ad7'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#138dd7'
|
|
}
|
|
],
|
|
false
|
|
)
|
|
},
|
|
data: e.data.map(v => v.totalAmount)
|
|
},
|
|
{
|
|
name: '',
|
|
type: 'pictorialBar',
|
|
barWidth: '40%',
|
|
barMaxWidth: '40px',
|
|
symbolSize: [5, '100%'],
|
|
symbolPosition: 'end',
|
|
symbolOffset: [3, 0],
|
|
barGap: '-100%',
|
|
itemStyle: {
|
|
color: '#138dd7'
|
|
},
|
|
data: e.data.map(v => v.totalAmount)
|
|
}
|
|
]
|
|
})
|
|
})
|
|
inAndOutStockInfo().then(e => {
|
|
this.$refs.chart2.setData({
|
|
grid: {
|
|
top: '10%',
|
|
left: '5%',
|
|
right: '5%',
|
|
bottom: '10%'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
label: {
|
|
show: true
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['出库', '入库'],
|
|
top: '0%',
|
|
textStyle: {
|
|
color: '#ffffff'
|
|
}
|
|
},
|
|
xAxis: {
|
|
data: e.data.map(v => parseTime(v.day,'{m}-{d} {h}:{s}')),
|
|
axisLabel: {
|
|
margin: 10,
|
|
color: '#ffffff63'
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#ffffff1f'
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#ffffff1f'
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
margin: 10,
|
|
color: '#ffffff63'
|
|
},
|
|
|
|
axisTick: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#ffffff1f'
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#ffffff1f'
|
|
}
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#fff3',
|
|
width: 2
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '出库',
|
|
type: 'bar',
|
|
barWidth: '25%',
|
|
barMaxWidth: '40px',
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: '#0a2ad7'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#138dd7'
|
|
}
|
|
],
|
|
false
|
|
)
|
|
}
|
|
},
|
|
data: e.data.map(v => v.outStockAmount)
|
|
},
|
|
{
|
|
name: '入库',
|
|
type: 'bar',
|
|
barWidth: '25%',
|
|
barGap: '20%',
|
|
barMaxWidth: '40px',
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: '#159d40'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#0bcb98'
|
|
}
|
|
],
|
|
false
|
|
)
|
|
}
|
|
},
|
|
data: e.data.map(v => v.instockAmount)
|
|
},
|
|
{
|
|
name: '',
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
type: 'pictorialBar',
|
|
barWidth: '25%',
|
|
barMaxWidth: '40px',
|
|
symbolSize: ['100%', 5],
|
|
symbolPosition: 'end',
|
|
symbolOffset: ['-60%', -3],
|
|
itemStyle: {
|
|
color: '#138dd7'
|
|
},
|
|
data: e.data.map(v => v.outStockAmount)
|
|
},
|
|
{
|
|
name: '',
|
|
type: 'pictorialBar',
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
barWidth: '25%',
|
|
barMaxWidth: '40px',
|
|
symbolSize: ['100%', 5],
|
|
symbolPosition: 'end',
|
|
symbolOffset: ['60%', -3],
|
|
itemStyle: {
|
|
color: '#0bcb98'
|
|
},
|
|
data: e.data.map(v => v.instockAmount)
|
|
}
|
|
]
|
|
})
|
|
})
|
|
instockTimeCount().then(e => {
|
|
this.$refs.chart3.setData({
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
},
|
|
legend: {
|
|
type: 'scroll',
|
|
orient: 'vertical',
|
|
left: '70%',
|
|
align: 'left',
|
|
top: 'middle',
|
|
textStyle: {
|
|
color: '#8C8C8C'
|
|
},
|
|
height: 250
|
|
},
|
|
series: [
|
|
{
|
|
name: '库存情况',
|
|
type: 'pie',
|
|
radius: ['20%', '70%'],
|
|
center: ['35%', '50%'],
|
|
clockwise: false,
|
|
data: [
|
|
{
|
|
value: e.data.halfYearCount,
|
|
name: '半年内'
|
|
},
|
|
{
|
|
value: e.data.oneMonthCount,
|
|
name: '一个月内'
|
|
},
|
|
{
|
|
value: e.data.twoWeekCount
|
|
,
|
|
name: '两个周内'
|
|
},
|
|
{
|
|
value: e.data.oneWeekCount,
|
|
name: '一个周内'
|
|
}
|
|
],
|
|
label: {
|
|
normal: {
|
|
position: 'inner',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 14
|
|
},
|
|
formatter: (e) => {
|
|
return e.percent.toFixed(2) + '%'
|
|
}
|
|
}
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
}
|
|
}
|
|
]
|
|
})
|
|
})
|
|
locationCount().then(e => {
|
|
this.$refs.chart4.setData({
|
|
title: {
|
|
x: 'center',
|
|
y: 'center',
|
|
text: (e.data.availibleRate || 0) * 100 + '%',
|
|
textStyle: {
|
|
color: '#ccc',
|
|
fontSize: 1.5 * vw
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: ['47.5%', '55%'],
|
|
center: ['50%', '50%'],
|
|
startAngle: 225,
|
|
endAngle: -45,
|
|
color: ['#fa9800', 'transparent'],
|
|
data: [
|
|
{
|
|
value: e.data.availibleRate,
|
|
name: ''
|
|
},
|
|
{
|
|
value: 1 - e.data.availibleRate,
|
|
name: ''
|
|
}
|
|
],
|
|
label: {
|
|
show: false
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
}
|
|
}
|
|
]
|
|
})
|
|
this.$refs.chart5.setData({
|
|
title: {
|
|
x: 'center',
|
|
y: 'center',
|
|
text: (e.data.opplyRate || 0) * 100 + '%',
|
|
textStyle: {
|
|
color: '#ccc',
|
|
fontSize: 1.5 * vw
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: ['47.5%', '55%'],
|
|
center: ['50%', '50%'],
|
|
startAngle: 225,
|
|
endAngle: -45,
|
|
color: ['#00f79e', 'transparent'],
|
|
data: [
|
|
{
|
|
value: 1 - e.data.availibleRate,
|
|
name: ''
|
|
},
|
|
{
|
|
value: e.data.availibleRate,
|
|
name: ''
|
|
}
|
|
],
|
|
label: {
|
|
// show: false
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
}
|
|
}
|
|
]
|
|
})
|
|
})
|
|
tableInfo().then(e => {
|
|
console.log(e)
|
|
this.scrollTableData = e.data
|
|
})
|
|
todayInstockAmount().then(e => {
|
|
this.topData = e.data
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
|
|
.app-container {
|
|
background-image: url("../../../assets/board/warehouseBg1.jpg");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.headTitle {
|
|
position: absolute;
|
|
top: 5%;
|
|
left: 50%;
|
|
transform: translate(-50%, -100%);
|
|
font-size: 1.5vw;
|
|
color: #d6eaed;
|
|
letter-spacing: 10px;
|
|
}
|
|
|
|
.title {
|
|
position: absolute;
|
|
transform: translateY(-50%);
|
|
color: #dddddd;
|
|
font-size: 1vw;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.table1 {
|
|
position: absolute;
|
|
top: 66.5%;
|
|
left: 67.3%;
|
|
width: 27.8%;
|
|
height: 27.5%;
|
|
color: #fff
|
|
}
|
|
|
|
.scrollTableItem {
|
|
display: inline-block;
|
|
width: calc(100% / 5);
|
|
text-align: center;
|
|
padding: 14px 0;
|
|
color: #fff9
|
|
}
|
|
|
|
.chart1 {
|
|
position: absolute;
|
|
top: 23%;
|
|
left: 3.8%;
|
|
width: 27.8%;
|
|
height: 32%;
|
|
}
|
|
|
|
.chart2 {
|
|
position: absolute;
|
|
top: 23%;
|
|
left: 33%;
|
|
width: 63.8%;
|
|
height: 32%;
|
|
|
|
}
|
|
|
|
.chart3 {
|
|
position: absolute;
|
|
top: 63%;
|
|
left: 3.8%;
|
|
width: 27.8%;
|
|
height: 32%;
|
|
|
|
}
|
|
|
|
.chart4 {
|
|
position: absolute;
|
|
top: 64.6%;
|
|
left: 33.9%;
|
|
width: 16vw;
|
|
height: 16vw;
|
|
|
|
}
|
|
|
|
.chart5 {
|
|
position: absolute;
|
|
top: 64.6%;
|
|
left: 48.8%;
|
|
width: 16vw;
|
|
height: 16vw;
|
|
|
|
}
|
|
|
|
.span1 {
|
|
position: absolute;
|
|
top: 86.3%;
|
|
left: 41.9%;
|
|
transform: translate(-50%, -50%);
|
|
color: #dddddd;
|
|
font-size: 1vw;
|
|
}
|
|
|
|
.span2 {
|
|
position: absolute;
|
|
top: 86.3%;
|
|
left: 56.8%;
|
|
transform: translate(-50%, -50%);
|
|
color: #dddddd;
|
|
font-size: 1vw;
|
|
}
|
|
|
|
.info1, .info2, .info3, .info4 {
|
|
position: absolute;
|
|
top: 11.9%;
|
|
width: 19.6%;
|
|
height: 5.8%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
.infoSpan {
|
|
position: absolute;
|
|
transform: translate(-100%, -50%);
|
|
top: 50%;
|
|
left: 45%;
|
|
color: #ccc;
|
|
font-size: 1.1vw;
|
|
}
|
|
|
|
.infoSum {
|
|
position: absolute;
|
|
transform: translate(100%, -50%);
|
|
top: 50%;
|
|
left: 47%;
|
|
font-size: 1.1vw;
|
|
}
|
|
}
|
|
|
|
.info1 {
|
|
left: 13.1%;
|
|
}
|
|
|
|
.info2 {
|
|
left: 37.7%;
|
|
}
|
|
|
|
.info3 {
|
|
left: 62.3%;
|
|
}
|
|
|
|
.info4 {
|
|
left: 86.9%;
|
|
}
|
|
|
|
</style>
|