|
|
|
|
@ -0,0 +1,670 @@
|
|
|
|
|
<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="chart1">
|
|
|
|
|
<HighChart key="chart1" ref="chart1"></HighChart>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="chart2">
|
|
|
|
|
<HighChart key="chart2" ref="chart2"></HighChart>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="chart3">
|
|
|
|
|
<Chart key="chart3" ref="chart3"></Chart>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="table1">
|
|
|
|
|
<div style="background-color: #1077bc19">
|
|
|
|
|
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
|
|
|
|
|
任务编号
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
|
|
|
|
|
任务类型
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
|
|
|
|
|
物料名称
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
|
|
|
|
|
库位编号
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
|
|
|
|
|
时间
|
|
|
|
|
</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)? "#1077bc19":"#1077bc05") '>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem"
|
|
|
|
|
>
|
|
|
|
|
{{ item.taskCode }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem"
|
|
|
|
|
>
|
|
|
|
|
入库
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem"
|
|
|
|
|
>
|
|
|
|
|
{{ item.materialName }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem"
|
|
|
|
|
>
|
|
|
|
|
{{ item.locationCode }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem"
|
|
|
|
|
>
|
|
|
|
|
{{ item.applylate }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</vue-seamless-scroll>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="table2">
|
|
|
|
|
<div style="background-color: #1077bc19">
|
|
|
|
|
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
|
|
|
|
|
订单
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
|
|
|
|
|
物料
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
|
|
|
|
|
物料需求
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
|
|
|
|
|
Bom分解
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
|
|
|
|
|
时间
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<vue-seamless-scroll
|
|
|
|
|
:class-option="scrollTableOption"
|
|
|
|
|
:data="scrollTableData1"
|
|
|
|
|
class="case-item"
|
|
|
|
|
style="height: calc(100% - 30px);overflow: hidden;"
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
v-for="(item, index) in scrollTableData1"
|
|
|
|
|
:key="index"
|
|
|
|
|
>
|
|
|
|
|
<div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem"
|
|
|
|
|
>
|
|
|
|
|
{{ item.orderCode }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem"
|
|
|
|
|
>
|
|
|
|
|
{{ item.materialName }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem"
|
|
|
|
|
>
|
|
|
|
|
{{ item.saleAmount }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem"
|
|
|
|
|
>
|
|
|
|
|
<!-- {{ item.value4 }}-->
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem"
|
|
|
|
|
>
|
|
|
|
|
{{ item.releaseTime }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</vue-seamless-scroll>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="num1 num1_1" style="top: 11.9%;left:17.4%;color:#5fc2f2">{{ topData.num1[0] }}</div>
|
|
|
|
|
<div class="num1 num1_2" style="top: 11.9%;left:21%;color:#5fc2f2">{{ topData.num1[1] }}</div>
|
|
|
|
|
<div class="num1 num1_3" style="top: 11.9%;left:24.5%;color:#5fc2f2">{{ topData.num1[2] }}</div>
|
|
|
|
|
<div class="num1 num1_4" style="top: 11.9%;left:28.1%;color:#5fc2f2">{{ topData.num1[3] }}</div>
|
|
|
|
|
<div class="num1 num1_5" style="top: 11.9%;left:50%;color:#59ee7b">{{ topData.num2[0] }}</div>
|
|
|
|
|
<div class="num1 num1_6" style="top: 11.9%;left:53.6%;color:#59ee7b">{{ topData.num2[1] }}</div>
|
|
|
|
|
<div class="num1 num1_7" style="top: 11.9%;left:57%;color:#59ee7b">{{ topData.num2[2] }}</div>
|
|
|
|
|
<div class="num1 num1_8" style="top: 11.9%;left:60.7%;color:#59ee7b">{{ topData.num2[3] }}</div>
|
|
|
|
|
<div class="num1 num1_9" style="top: 11.9%;left:82.6%;color:#f60008">{{ topData.num3[0] }}</div>
|
|
|
|
|
<div class="num1 num1_10" style="top: 11.9%;left:86.2%;color:#f60008">{{ topData.num3[1] }}</div>
|
|
|
|
|
<div class="num1 num1_11" style="top: 11.9%;left:89.7%;color:#f60008">{{ topData.num3[2] }}</div>
|
|
|
|
|
<div class="num1 num1_12" style="top: 11.9%;left:93.2%;color:#f60008">{{ topData.num3[3] }}</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<!--// 柱状图 每个烘房耗电量 x轴 保留 - 后的 y轴 expend-->
|
|
|
|
|
<!-- 质量接口 柱状图 +折线图 合格率和数量 -->
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
|
|
|
|
import Chart from '@/components/board/Chart'
|
|
|
|
|
import HighChart from '@/components/board/HighChart'
|
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
|
import {
|
|
|
|
|
bomInfo,
|
|
|
|
|
inAndOutInfo,
|
|
|
|
|
productInAndOutInfo,
|
|
|
|
|
purchaseInfo,
|
|
|
|
|
stockPercentage
|
|
|
|
|
} from '@/api/board/firstFloorWarehouse'
|
|
|
|
|
import { parseTime } from '@/utils/ruoyi'
|
|
|
|
|
|
|
|
|
|
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
|
|
|
|
export default {
|
|
|
|
|
name: 'Board1',
|
|
|
|
|
components: {
|
|
|
|
|
vueSeamlessScroll,
|
|
|
|
|
Chart,
|
|
|
|
|
HighChart
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
topData: {
|
|
|
|
|
num1: [0, 0, 0, 0],
|
|
|
|
|
num2: [0, 0, 0, 0],
|
|
|
|
|
num3: [0, 0, 0, 0]
|
|
|
|
|
},
|
|
|
|
|
title: [
|
|
|
|
|
'原料库入库数量:',
|
|
|
|
|
'原料库出库数量:',
|
|
|
|
|
'半成品入库数量:',
|
|
|
|
|
' ',
|
|
|
|
|
' ',
|
|
|
|
|
'库存占比'
|
|
|
|
|
],
|
|
|
|
|
titlePosition: [
|
|
|
|
|
{
|
|
|
|
|
top: 11.5,
|
|
|
|
|
left: 7.5
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 11.5,
|
|
|
|
|
left: 40.3
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 11.5,
|
|
|
|
|
left: 72.8
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 11.5,
|
|
|
|
|
left: 60.3
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 11.5,
|
|
|
|
|
left: 79.1
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 19.4,
|
|
|
|
|
left: 5.5
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
scrollTableOption: {
|
|
|
|
|
step: 0.5, // 数值越大速度滚动越快
|
|
|
|
|
limitMoveNum: 22, // 开始无缝滚动的数据量 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: [],
|
|
|
|
|
scrollTableData1: []
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.getData()
|
|
|
|
|
|
|
|
|
|
window.onresize = () => {
|
|
|
|
|
this.$refs.chart1.resize()
|
|
|
|
|
this.$refs.chart2.resize()
|
|
|
|
|
this.$refs.chart3.resize()
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
getData() {
|
|
|
|
|
inAndOutInfo().then(e => {
|
|
|
|
|
console.log(e)
|
|
|
|
|
this.topData.num1= [...[0, 0, 0, 0], ...(e.data.inStocks.find(v=>v.warehouseId===111)?.outstockAmount || 0).toString().split('')].slice(-4)
|
|
|
|
|
this.topData.num2= [...[0, 0, 0, 0], ...(e.data.rawOutstocks?.find(v=>v.warehouseId===111)?.outstockAmount || 0).toString().split('')].slice(-4)
|
|
|
|
|
this.topData.num3= [...[0, 0, 0, 0], ...(e.data.inStocks.find(v=>v.warehouseId===131)?.outstockAmount || 0).toString().split('')].slice(-4)
|
|
|
|
|
})
|
|
|
|
|
stockPercentage().then(e => {
|
|
|
|
|
let num1 = e.data.nostockAmount + e.data.stockAmount
|
|
|
|
|
let num2 = e.data.stockAmount
|
|
|
|
|
let num2_1
|
|
|
|
|
let num3 = e.data.nostockAmount
|
|
|
|
|
let num3_1
|
|
|
|
|
if (num1 === 0) {
|
|
|
|
|
num2_1 = 50
|
|
|
|
|
num3_1 = 50
|
|
|
|
|
} else {
|
|
|
|
|
num2_1 = parseFloat(((num2 / num1) * 100).toFixed(2))
|
|
|
|
|
num3_1 = parseFloat(((num3 / num1) * 100).toFixed(2))
|
|
|
|
|
}
|
|
|
|
|
this.$refs.chart1.setData({
|
|
|
|
|
title: {
|
|
|
|
|
text: '原料库存占比',
|
|
|
|
|
style: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
credits: {
|
|
|
|
|
enabled: false
|
|
|
|
|
},
|
|
|
|
|
chart: {
|
|
|
|
|
type: 'pie',
|
|
|
|
|
animation: false,
|
|
|
|
|
backgroundColor: null,
|
|
|
|
|
events: {
|
|
|
|
|
load: function() {
|
|
|
|
|
let each = Highcharts.each,
|
|
|
|
|
points = this.series[0].points
|
|
|
|
|
each(points, function(p, i) {
|
|
|
|
|
p.graphic.attr({
|
|
|
|
|
translateY: -p.shapeArgs.ran
|
|
|
|
|
})
|
|
|
|
|
p.graphic.side1.attr({
|
|
|
|
|
translateY: -p.shapeArgs.ran
|
|
|
|
|
})
|
|
|
|
|
p.graphic.side2.attr({
|
|
|
|
|
translateY: -p.shapeArgs.ran
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
options3d: {
|
|
|
|
|
enabled: true,
|
|
|
|
|
alpha: 60,
|
|
|
|
|
beta: 0
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
reversed: true,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
plotOptions: {
|
|
|
|
|
pie: {
|
|
|
|
|
allowPointSelect: false,
|
|
|
|
|
cursor: 'pointer',
|
|
|
|
|
depth: 35,
|
|
|
|
|
startAngle: 45,
|
|
|
|
|
size: 200,
|
|
|
|
|
dataLabels: {
|
|
|
|
|
enabled: true,
|
|
|
|
|
formatter: function() {
|
|
|
|
|
return this.point.options.name + '<br>' + this.point.options.h + '%'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
showInLegend: false,
|
|
|
|
|
point: {
|
|
|
|
|
events: {
|
|
|
|
|
legendItemClick: function(e) {
|
|
|
|
|
return false // 直接 return false 即可禁用图例点击事件
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
type: 'pie',
|
|
|
|
|
name: '占比',
|
|
|
|
|
data: [
|
|
|
|
|
{
|
|
|
|
|
'name': '已使用',
|
|
|
|
|
y: num2_1,
|
|
|
|
|
h: Math.min(num2_1, 50)
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '未使用',
|
|
|
|
|
y: num3_1,
|
|
|
|
|
h: Math.min(num3_1, 50)
|
|
|
|
|
}
|
|
|
|
|
].sort((a, b) => a.y - b.y)
|
|
|
|
|
}]
|
|
|
|
|
})
|
|
|
|
|
let num11 = e.data.noProductstockAmount + e.data.productstockAmount
|
|
|
|
|
let num12 = e.data.productstockAmount
|
|
|
|
|
let num12_1
|
|
|
|
|
let num13 = e.data.noProductstockAmount
|
|
|
|
|
let num13_1
|
|
|
|
|
if (num11 === 0) {
|
|
|
|
|
num12_1 = 50
|
|
|
|
|
num13_1 = 50
|
|
|
|
|
} else {
|
|
|
|
|
num12_1 = parseFloat(((num12 / num11) * 100).toFixed(2))
|
|
|
|
|
num13_1 = parseFloat(((num13 / num11) * 100).toFixed(2))
|
|
|
|
|
}
|
|
|
|
|
this.$refs.chart2.setData({
|
|
|
|
|
title: {
|
|
|
|
|
text: '成品库存占比',
|
|
|
|
|
style: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
credits: {
|
|
|
|
|
enabled: false
|
|
|
|
|
},
|
|
|
|
|
chart: {
|
|
|
|
|
type: 'pie',
|
|
|
|
|
startAngle: Math.PI / 6,
|
|
|
|
|
animation: false,
|
|
|
|
|
backgroundColor: null,
|
|
|
|
|
events: {
|
|
|
|
|
load: function() {
|
|
|
|
|
let each = Highcharts.each,
|
|
|
|
|
points = this.series[0].points
|
|
|
|
|
each(points, function(p, i) {
|
|
|
|
|
p.graphic.attr({
|
|
|
|
|
translateY: -p.shapeArgs.ran
|
|
|
|
|
})
|
|
|
|
|
p.graphic.side1.attr({
|
|
|
|
|
translateY: -p.shapeArgs.ran
|
|
|
|
|
})
|
|
|
|
|
p.graphic.side2.attr({
|
|
|
|
|
translateY: -p.shapeArgs.ran
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
options3d: {
|
|
|
|
|
enabled: true,
|
|
|
|
|
alpha: 60,
|
|
|
|
|
beta: 0
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
reversed: true,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
plotOptions: {
|
|
|
|
|
pie: {
|
|
|
|
|
allowPointSelect: false,
|
|
|
|
|
cursor: 'pointer',
|
|
|
|
|
depth: 35,
|
|
|
|
|
startAngle: 45,
|
|
|
|
|
size: 200,
|
|
|
|
|
dataLabels: {
|
|
|
|
|
enabled: true,
|
|
|
|
|
formatter: function() {
|
|
|
|
|
return this.point.options.name + '<br>' + this.point.options.h + '%'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
showInLegend: false,
|
|
|
|
|
point: {
|
|
|
|
|
events: {
|
|
|
|
|
legendItemClick: function(e) {
|
|
|
|
|
return false // 直接 return false 即可禁用图例点击事件
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
type: 'pie',
|
|
|
|
|
name: '占比',
|
|
|
|
|
data: [
|
|
|
|
|
{
|
|
|
|
|
'name': '已使用',
|
|
|
|
|
y: num12_1,
|
|
|
|
|
h: num12_1
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '未使用',
|
|
|
|
|
y: num12_1,
|
|
|
|
|
h: num12_1
|
|
|
|
|
}
|
|
|
|
|
].sort((a, b) => a.y - b.y)
|
|
|
|
|
}]
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
purchaseInfo().then(e => {
|
|
|
|
|
this.scrollTableData = e.data
|
|
|
|
|
})
|
|
|
|
|
bomInfo().then(e => {
|
|
|
|
|
this.scrollTableData1 = e.data
|
|
|
|
|
})
|
|
|
|
|
productInAndOutInfo().then(e => {
|
|
|
|
|
this.$refs.chart3.setData({
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
axisPointer: {
|
|
|
|
|
// 坐标轴指示器，坐标轴触发有效
|
|
|
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: '2%',
|
|
|
|
|
right: '4%',
|
|
|
|
|
bottom: '14%',
|
|
|
|
|
top: '16%',
|
|
|
|
|
containLabel: true
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
x: 'center',
|
|
|
|
|
top: 12,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
},
|
|
|
|
|
itemWidth: 12,
|
|
|
|
|
itemHeight: 10
|
|
|
|
|
// itemGap: 35
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
data: e.data.map(v => parseTime(v.day, '{m}-{d}')),
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: 'white'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
// interval: 0,
|
|
|
|
|
// rotate: 40,
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontFamily: 'Microsoft YaHei'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: 'value',
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: false,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: 'white'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: 'rgba(255,255,255,0.3)'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {}
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '入库',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
barWidth: '15%',
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: '#fccb05'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: '#f5804d'
|
|
|
|
|
}
|
|
|
|
|
])
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: e.data.map(v => v.instockAmount)
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '出库',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
barWidth: '15%',
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: '#8bd46e'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: '#09bcb7'
|
|
|
|
|
}
|
|
|
|
|
])
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: e.data.map(v => v.outStockAmount)
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
|
|
|
|
|
.app-container {
|
|
|
|
|
background-image: url("../../../assets/board/warehouseBg3.jpg");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.warehouse {
|
|
|
|
|
background-image: url("../../../assets/board/warehouse1.png");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 18%;
|
|
|
|
|
height: 27.8%;
|
|
|
|
|
top: 65%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.headTitle {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 5%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%, -100%);
|
|
|
|
|
font-size: 1.5vw;
|
|
|
|
|
color: #d6eaed;
|
|
|
|
|
letter-spacing: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.num1 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
font-size: 1.5vw;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
color: #dddddd;
|
|
|
|
|
font-size: 1vw;
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.chart1 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 22.5%;
|
|
|
|
|
left: 3.4%;
|
|
|
|
|
width: 23%;
|
|
|
|
|
height: 32%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chart2 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 22.5%;
|
|
|
|
|
left: 26.5%;
|
|
|
|
|
width: 23%;
|
|
|
|
|
height: 32%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chart3 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 22.5%;
|
|
|
|
|
left: 50.4%;
|
|
|
|
|
width: 46%;
|
|
|
|
|
height: 32%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.span {
|
|
|
|
|
position: absolute;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.span1 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.table1 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 62.9%;
|
|
|
|
|
left: 3.4%;
|
|
|
|
|
width: 45.7%;
|
|
|
|
|
height: 32%;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.table2 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 62.9%;
|
|
|
|
|
left: 50.4%;
|
|
|
|
|
width: 45.7%;
|
|
|
|
|
height: 32%;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.scrollTableItem {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: calc(100% / 5);
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding: 14px 0;
|
|
|
|
|
color: #4e99c5
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
夜笙歌
7 months ago
