修改网络请求
夜笙歌
1 year ago
parent
3e86dc18f8
commit
4d04db92df
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 725 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 954 KiB |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,892 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<div class="warehouse"></div>
|
||||||
|
<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: #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.value1 }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="scrollTableItem">
|
||||||
|
{{ item.value2 }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="scrollTableItem">
|
||||||
|
{{ item.value3 }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="scrollTableItem">
|
||||||
|
{{ item.value4 }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="scrollTableItem">
|
||||||
|
{{ item.value5 }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</vue-seamless-scroll>
|
||||||
|
</div>
|
||||||
|
<div class="chart1">
|
||||||
|
<HighChart key="chart1" ref="chart1"></HighChart>
|
||||||
|
</div>
|
||||||
|
<div class="chart2">
|
||||||
|
<HighChart key="chart2" ref="chart2"></HighChart>
|
||||||
|
</div>
|
||||||
|
<div class="chart3">
|
||||||
|
<HighChart key="chart3" ref="chart3"></HighChart>
|
||||||
|
</div>
|
||||||
|
<div class="chart4">
|
||||||
|
<HighChart key="chart4" ref="chart4"></HighChart>
|
||||||
|
</div>
|
||||||
|
<div class="chart5">
|
||||||
|
<Chart key="chart5" ref="chart5"></Chart>
|
||||||
|
</div>
|
||||||
|
<div class="chart6">
|
||||||
|
<Chart key="chart6" ref="chart6"></Chart>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="num1 num1_1" style="top: 11.9%;left: 17.4%;color:#5fc2f2">1</div>
|
||||||
|
<div class="num1 num1_2" style="top: 11.9%;left:20.9%;color:#5fc2f2">0</div>
|
||||||
|
<div class="num1 num1_3" style="top: 11.9%;left:24.4%;color:#5fc2f2">0</div>
|
||||||
|
<div class="num1 num1_4" style="top: 11.9%;left:27.9%;color:#5fc2f2">0</div>
|
||||||
|
<div class="num1 num1_5" style="top: 11.9%;left:50%;color:#59ee7b">1</div>
|
||||||
|
<div class="num1 num1_6" style="top: 11.9%;left:53.5%;color:#59ee7b">0</div>
|
||||||
|
<div class="num1 num1_7" style="top: 11.9%;left:57%;color:#59ee7b">0</div>
|
||||||
|
<div class="num1 num1_8" style="top: 11.9%;left:60.5%;color:#59ee7b">0</div>
|
||||||
|
<div class="num1 num1_9" style="top: 11.9%;left:82.5%;color:#f60008">1</div>
|
||||||
|
<div class="num1 num1_10" style="top: 11.9%;left:86.1%;color:#f60008">0</div>
|
||||||
|
<div class="num1 num1_11" style="top: 11.9%;left:89.6%;color:#f60008">0</div>
|
||||||
|
<div class="num1 num1_12" style="top: 11.9%;left:93.1%;color:#f60008">0</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||||
|
import Chart from '@/components/board/Chart'
|
||||||
|
import HighChart from '@/components/board/HighChart'
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
|
||||||
|
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
||||||
|
export default {
|
||||||
|
name: 'Board1',
|
||||||
|
components: {
|
||||||
|
vueSeamlessScroll,
|
||||||
|
Chart,
|
||||||
|
HighChart
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
title: [
|
||||||
|
'原料库出库数量:',
|
||||||
|
'辅料库出库数量:',
|
||||||
|
'半成品入库数量:',
|
||||||
|
'库存占比',
|
||||||
|
'调度任务',
|
||||||
|
'成品库可用库存占比',
|
||||||
|
'成品库订单库存统计',
|
||||||
|
],
|
||||||
|
titlePosition: [
|
||||||
|
{
|
||||||
|
top: 11.5,
|
||||||
|
left: 7.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
top: 11.5,
|
||||||
|
left: 40
|
||||||
|
},
|
||||||
|
{
|
||||||
|
top: 11.5,
|
||||||
|
left: 72.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
top: 19.4,
|
||||||
|
left: 5.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
top: 59.8,
|
||||||
|
left: 5.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
top: 59.8,
|
||||||
|
left: 37
|
||||||
|
},
|
||||||
|
{
|
||||||
|
top: 59.8,
|
||||||
|
left: 68.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: Array(100).fill('').map(function (i, k) {
|
||||||
|
return {
|
||||||
|
value1: k + 1,
|
||||||
|
value2: '出库',
|
||||||
|
value3: '物料1',
|
||||||
|
value4: '000' + k,
|
||||||
|
value5: '2024.03.04',
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
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: 'Browser share',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
'name': '材料1',
|
||||||
|
y: 30.0,
|
||||||
|
h: 30.0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '材料2',
|
||||||
|
y: 26.8,
|
||||||
|
h: 26.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': '材料3',
|
||||||
|
y: 15,
|
||||||
|
h: 15
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '材料4',
|
||||||
|
y: 12.8,
|
||||||
|
h: 12.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': '材料5',
|
||||||
|
y: 8.5,
|
||||||
|
h: 8.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': '材料6',
|
||||||
|
y: 6.2,
|
||||||
|
h: 6.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': '材料7',
|
||||||
|
y: 0.7,
|
||||||
|
h: 0.7
|
||||||
|
}
|
||||||
|
].sort((a, b) => a.y - b.y)
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
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: 'Browser share',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
'name': '材料1',
|
||||||
|
y: 30.0,
|
||||||
|
h: 30.0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '材料2',
|
||||||
|
y: 26.8,
|
||||||
|
h: 26.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': '材料3',
|
||||||
|
y: 15,
|
||||||
|
h: 15
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '材料4',
|
||||||
|
y: 12.8,
|
||||||
|
h: 12.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': '材料5',
|
||||||
|
y: 8.5,
|
||||||
|
h: 8.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': '材料6',
|
||||||
|
y: 6.2,
|
||||||
|
h: 6.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': '材料7',
|
||||||
|
y: 0.7,
|
||||||
|
h: 0.7
|
||||||
|
}
|
||||||
|
].sort((a, b) => a.y - b.y)
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
this.$refs.chart3.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: 'Browser share',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
'name': '材料1',
|
||||||
|
y: 30.0,
|
||||||
|
h: 30.0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '材料2',
|
||||||
|
y: 26.8,
|
||||||
|
h: 26.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': '材料3',
|
||||||
|
y: 15,
|
||||||
|
h: 15
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '材料4',
|
||||||
|
y: 12.8,
|
||||||
|
h: 12.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': '材料5',
|
||||||
|
y: 8.5,
|
||||||
|
h: 8.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': '材料6',
|
||||||
|
y: 6.2,
|
||||||
|
h: 6.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': '材料7',
|
||||||
|
y: 0.7,
|
||||||
|
h: 0.7
|
||||||
|
}
|
||||||
|
].sort((a, b) => a.y - b.y)
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
this.$refs.chart4.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: 'Browser share',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
'name': '材料1',
|
||||||
|
y: 30.0,
|
||||||
|
h: 30.0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '材料2',
|
||||||
|
y: 26.8,
|
||||||
|
h: 26.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': '材料3',
|
||||||
|
y: 15,
|
||||||
|
h: 15
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '材料4',
|
||||||
|
y: 12.8,
|
||||||
|
h: 12.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': '材料5',
|
||||||
|
y: 8.5,
|
||||||
|
h: 8.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': '材料6',
|
||||||
|
y: 6.2,
|
||||||
|
h: 6.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': '材料7',
|
||||||
|
y: 0.7,
|
||||||
|
h: 0.7
|
||||||
|
}
|
||||||
|
].sort((a, b) => a.y - b.y)
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
this.$refs.chart5.setData({
|
||||||
|
title: {
|
||||||
|
x: 'center',
|
||||||
|
y: 'center',
|
||||||
|
text: "75%",
|
||||||
|
textStyle: {
|
||||||
|
color: '#ccc',
|
||||||
|
fontSize: 2 * vw,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "pie",
|
||||||
|
radius: ["47.5%", "55%"],
|
||||||
|
center: ["50%", "50%"],
|
||||||
|
startAngle: 225,
|
||||||
|
endAngle: -45,
|
||||||
|
color: ['#fa9800', "transparent"],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 75,
|
||||||
|
name: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 25,
|
||||||
|
name: ''
|
||||||
|
},
|
||||||
|
],
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
normal: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
this.$refs.chart6.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: ['物料1', '物料2', '物料3'],
|
||||||
|
},
|
||||||
|
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",
|
||||||
|
barWidth: "40%",
|
||||||
|
itemStyle: {
|
||||||
|
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#0a2ad7",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#138dd7",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
},
|
||||||
|
data: [1, 2, 3],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
type: "pictorialBar",
|
||||||
|
barWidth: "40%",
|
||||||
|
symbolSize: [5, '100%'],
|
||||||
|
symbolPosition: 'end',
|
||||||
|
symbolOffset: [3, 0],
|
||||||
|
barGap: '-100%',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#138dd7'
|
||||||
|
},
|
||||||
|
data: [1, 2, 3],
|
||||||
|
},
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
window.onresize = () => {
|
||||||
|
this.$refs.chart1.resize()
|
||||||
|
this.$refs.chart2.resize()
|
||||||
|
this.$refs.chart3.resize()
|
||||||
|
this.$refs.chart4.resize()
|
||||||
|
this.$refs.chart5.chart.resize()
|
||||||
|
this.$refs.chart6.chart.resize()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
|
||||||
|
.app-container {
|
||||||
|
background-image: url("../../../assets/board/warehouseBg3_1.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table1 {
|
||||||
|
position: absolute;
|
||||||
|
top: 62.9%;
|
||||||
|
left: 3.4%;
|
||||||
|
width: 30.2%;
|
||||||
|
height: 30%;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollTableItem {
|
||||||
|
display: inline-block;
|
||||||
|
width: calc(100% / 5);
|
||||||
|
text-align: center;
|
||||||
|
padding: 14px 0;
|
||||||
|
color: #4e99c5
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: 49.6%;
|
||||||
|
width: 23%;
|
||||||
|
height: 32%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart4 {
|
||||||
|
position: absolute;
|
||||||
|
top: 22.5%;
|
||||||
|
left: 72.7%;
|
||||||
|
width: 23%;
|
||||||
|
height: 32%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart5 {
|
||||||
|
position: absolute;
|
||||||
|
top: 60.7%;
|
||||||
|
left: 40%;
|
||||||
|
width: 20vw;
|
||||||
|
height: 20vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart6 {
|
||||||
|
position: absolute;
|
||||||
|
top: 63%;
|
||||||
|
left: 66.5%;
|
||||||
|
width: 30%;
|
||||||
|
height: 32%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.span {
|
||||||
|
position: absolute;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.span1 {
|
||||||
|
position: absolute;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,563 +0,0 @@
|
|||||||
<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">
|
|
||||||
<HighChart key="chart3" ref="chart3"></HighChart>
|
|
||||||
</div>
|
|
||||||
<div class="chart4">
|
|
||||||
<HighChart key="chart4" ref="chart4"></HighChart>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="num1 num1_1" style="top: 11.9%;left: 13.4%;color:#5fc2f2">{{ topData.furawInStock[0] }}</div>
|
|
||||||
<div class="num1 num1_2" style="top: 11.9%;left:15.7%;color:#5fc2f2">{{ topData.furawInStock[1] }}</div>
|
|
||||||
<div class="num1 num1_3" style="top: 11.9%;left:18%;color:#5fc2f2">{{ topData.furawInStock[2] }}</div>
|
|
||||||
<div class="num1 num1_4" style="top: 11.9%;left:20.4%;color:#5fc2f2">{{ topData.furawInStock[3] }}</div>
|
|
||||||
|
|
||||||
<div class="num1 num1_5" style="top: 11.9%;left:32.2%;color:#59ee7b">{{ topData.productInStock[0] }}</div>
|
|
||||||
<div class="num1 num1_6" style="top: 11.9%;left:34.6%;color:#59ee7b">{{ topData.productInStock[1] }}</div>
|
|
||||||
<div class="num1 num1_7" style="top: 11.9%;left:36.9%;color:#59ee7b">{{ topData.productInStock[2] }}</div>
|
|
||||||
<div class="num1 num1_8" style="top: 11.9%;left:39.2%;color:#59ee7b">{{ topData.productInStock[3] }}</div>
|
|
||||||
|
|
||||||
<div class="num1 num1_9" style="top: 11.9%;left:51.1%;color:#f60008">{{ topData.productOutStock[0] }}</div>
|
|
||||||
<div class="num1 num1_10" style="top: 11.9%;left:53.4%;color:#f60008">{{ topData.productOutStock[1] }}</div>
|
|
||||||
<div class="num1 num1_11" style="top: 11.9%;left:55.7%;color:#f60008">{{ topData.productOutStock[2] }}</div>
|
|
||||||
<div class="num1 num1_12" style="top: 11.9%;left:58.1%;color:#f60008">{{ topData.productOutStock[3] }}</div>
|
|
||||||
|
|
||||||
<div class="num1 num1_13" style="top: 11.9%;left:69.9%;color:#59ee7b">{{ topData.rawInStock[0] }}</div>
|
|
||||||
<div class="num1 num1_14" style="top: 11.9%;left:72.3%;color:#59ee7b">{{ topData.rawInStock[1] }}</div>
|
|
||||||
<div class="num1 num1_15" style="top: 11.9%;left:74.6%;color:#59ee7b">{{ topData.rawInStock[2] }}</div>
|
|
||||||
<div class="num1 num1_16" style="top: 11.9%;left:76.9%;color:#59ee7b">{{ topData.rawInStock[3] }}</div>
|
|
||||||
|
|
||||||
<div class="num1 num1_17" style="top: 11.9%;left:88.7%;color:#f60008">{{ topData.rawOutStock[0] }}</div>
|
|
||||||
<div class="num1 num1_18" style="top: 11.9%;left:91%;color:#f60008">{{ topData.rawOutStock[1] }}</div>
|
|
||||||
<div class="num1 num1_19" style="top: 11.9%;left:93.4%;color:#f60008">{{ topData.rawOutStock[2] }}</div>
|
|
||||||
<div class="num1 num1_20" style="top: 11.9%;left:95.7%;color:#f60008">{{ topData.rawOutStock[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 { fifthPanake, locationCount } from '@/api/board/fifthFloorWarehouse'
|
|
||||||
|
|
||||||
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
|
||||||
export default {
|
|
||||||
name: 'Board1',
|
|
||||||
components: {
|
|
||||||
vueSeamlessScroll,
|
|
||||||
Chart,
|
|
||||||
HighChart
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
topData: {
|
|
||||||
furawInStock: [0, 0, 0, 0],
|
|
||||||
productInStock: [0, 0, 0, 0],
|
|
||||||
productOutStock: [0, 0, 0, 0],
|
|
||||||
rawInStock: [0, 0, 0, 0],
|
|
||||||
rawOutStock: [0, 0, 0, 0]
|
|
||||||
},
|
|
||||||
title: [
|
|
||||||
'原料库入库数量:',
|
|
||||||
'成品入库数量:',
|
|
||||||
'成品出库数量:',
|
|
||||||
'辅料入库数量:',
|
|
||||||
'辅料出库数量:',
|
|
||||||
'库存占比'
|
|
||||||
],
|
|
||||||
titlePosition: [
|
|
||||||
{
|
|
||||||
top: 11.5,
|
|
||||||
left: 3.5
|
|
||||||
},
|
|
||||||
{
|
|
||||||
top: 11.5,
|
|
||||||
left: 22.5
|
|
||||||
},
|
|
||||||
{
|
|
||||||
top: 11.5,
|
|
||||||
left: 41.3
|
|
||||||
},
|
|
||||||
{
|
|
||||||
top: 11.5,
|
|
||||||
left: 60.3
|
|
||||||
},
|
|
||||||
{
|
|
||||||
top: 11.5,
|
|
||||||
left: 79.1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
top: 19.4,
|
|
||||||
left: 5.5
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.getData()
|
|
||||||
|
|
||||||
window.onresize = () => {
|
|
||||||
this.$refs.chart1.resize()
|
|
||||||
this.$refs.chart2.resize()
|
|
||||||
this.$refs.chart3.resize()
|
|
||||||
this.$refs.chart4.resize()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getData() {
|
|
||||||
locationCount().then(e => {
|
|
||||||
this.topData.furawInStock = [...[0, 0, 0, 0], ...(e.data.furawInStock || 0).toString().split('')].slice(-4)
|
|
||||||
this.topData.productInStock = [...[0, 0, 0, 0], ...(e.data.productInStock || 0).toString().split('')].slice(-4)
|
|
||||||
this.topData.productOutStock = [...[0, 0, 0, 0], ...(e.data.productOutStock || 0).toString().split('')].slice(-4)
|
|
||||||
this.topData.rawInStock = [...[0, 0, 0, 0], ...(e.data.rawInStock || 0).toString().split('')].slice(-4)
|
|
||||||
this.topData.rawOutStock = [...[0, 0, 0, 0], ...(e.data.rawOutStock || 0).toString().split('')].slice(-4)
|
|
||||||
})
|
|
||||||
fifthPanake().then(e => {
|
|
||||||
console.log(e)
|
|
||||||
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: e.data.emptyLocationPercentage * 100,
|
|
||||||
h: e.data.emptyLocationPercentage * 100
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '非空料箱',
|
|
||||||
y: (1 - e.data.emptyLocationPercentage) * 100,
|
|
||||||
h: (1 - e.data.emptyLocationPercentage) * 100
|
|
||||||
}
|
|
||||||
].sort((a, b) => a.y - b.y)
|
|
||||||
}]
|
|
||||||
})
|
|
||||||
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: e.data.opplyLocationPercentage * 100,
|
|
||||||
h: e.data.opplyLocationPercentage * 100
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '未使用',
|
|
||||||
y: (1 - e.data.opplyLocationPercentage) * 100,
|
|
||||||
h: (1 - e.data.opplyLocationPercentage) * 100
|
|
||||||
}
|
|
||||||
].sort((a, b) => a.y - b.y)
|
|
||||||
}]
|
|
||||||
})
|
|
||||||
|
|
||||||
let total = e.data.productStocks.map(v => parseFloat(v.totalAmount)).reduce((a, b) => a + b, 0)
|
|
||||||
this.$refs.chart3.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: e.data.productStocks.map(v => {
|
|
||||||
return {
|
|
||||||
name: v.productId,
|
|
||||||
y: v.totalAmount,
|
|
||||||
h: parseFloat(((v.totalAmount / total) * 100).toFixed(2))
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}]
|
|
||||||
})
|
|
||||||
let total1 = e.data.wmsRawStocks.map(v => parseFloat(v.totalAmount)).reduce((a, b) => a + b, 0)
|
|
||||||
this.$refs.chart4.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: e.data.wmsRawStocks.map(v => {
|
|
||||||
return {
|
|
||||||
name: v.materialId,
|
|
||||||
y: v.totalAmount,
|
|
||||||
h: parseFloat(((v.totalAmount / total1) * 100).toFixed(2))
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}]
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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: 62.5%;
|
|
||||||
left: 3.4%;
|
|
||||||
width: 23%;
|
|
||||||
height: 32%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart4 {
|
|
||||||
position: absolute;
|
|
||||||
top: 62.5%;
|
|
||||||
left: 26.5%;
|
|
||||||
width: 23%;
|
|
||||||
height: 32%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.span {
|
|
||||||
position: absolute;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.span1 {
|
|
||||||
position: absolute;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue