xins
/
HwMes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改看板

Browse Source
master
夜笙歌 4 months ago
parent fedf9d47dd
commit 68da7e57f4
2 changed files with 199 additions and 318 deletions
Show Stats Download Patch File Download Diff File

1
hw-ui/src/views/board/production/secondFloor.vue
Unescape Escape View File

@ -216,6 +216,7 @@ export default {
this.scrollTableData = e.data.map((v, k) => { this.scrollTableData = e.data.map((v, k) => {
return { return {
no: k + 1, no: k + 1,
materialName:v.materialName,
orderCode: v.orderCode, orderCode: v.orderCode,
planAmount: v.planAmount, planAmount: v.planAmount,
completeAmount: v.completeAmount, completeAmount: v.completeAmount,

516
hw-ui/src/views/board/warehouse/fourthFloor.vue
Unescape Escape View File

@ -8,12 +8,12 @@
{{ i }} {{ i }}
</div> </div>
<div class="chart1"> <div class="chart1">
<!-- <HighChart key="chart1" ref="chart1"></HighChart>--> <!-- <HighChart key="chart1" ref="chart1"></HighChart>-->
<Chart key="chart1" ref="chart1"></Chart> <Chart key="chart1" ref="chart1"></Chart>
</div> </div>
<!-- <div class="chart2">--> <!-- <div class="chart2">-->
<!-- <HighChart key="chart2" ref="chart2"></HighChart>--> <!-- <HighChart key="chart2" ref="chart2"></HighChart>-->
<!-- </div>--> <!-- </div>-->
<div class="chart3"> <div class="chart3">
<Chart key="chart3" ref="chart3"></Chart> <Chart key="chart3" ref="chart3"></Chart>
</div> </div>
@ -160,13 +160,7 @@ import vueSeamlessScroll from 'vue-seamless-scroll'
import Chart from '@/components/board/Chart' import Chart from '@/components/board/Chart'
import HighChart from '@/components/board/HighChart' import HighChart from '@/components/board/HighChart'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { import {} from '@/api/board/fourthFloorWarehouse'
bomInfo,
inAndOutInfo,
productInAndOutInfo,
purchaseInfo,
stockPercentage
} from '@/api/board/fourthFloorWarehouse'
import { parseTime } from '@/utils/ruoyi' import { parseTime } from '@/utils/ruoyi'
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100 const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
@ -237,343 +231,229 @@ export default {
window.onresize = () => { window.onresize = () => {
this.$refs.chart1.resize() this.$refs.chart1.resize()
this.$refs.chart2.resize()
this.$refs.chart3.resize() this.$refs.chart3.resize()
} }
}, },
methods: { methods: {
getData() { getData() {
inAndOutInfo().then(e => { let e = {
console.log(e) data: {
this.topData.num1= [...[0, 0, 0, 0], ...(e.data.inStocks.find(v=>v.warehouseId===111)?.outstockAmount || 0).toString().split('')].slice(-4) 'rawInstockAmount': 28,
this.topData.num2= [...[0, 0, 0, 0], ...(e.data.rawOutstocks?.find(v=>v.warehouseId===111)?.outstockAmount || 0).toString().split('')].slice(-4) 'rawOutstockAmount': 14,
this.topData.num3= [...[0, 0, 0, 0], ...(e.data.inStocks.find(v=>v.warehouseId===131)?.outstockAmount || 0).toString().split('')].slice(-4) 'productInstockAmount': 8
})
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({ }
tooltip: { this.topData.num1 = [...[0, 0, 0, 0], ...(e.data.rawInstockAmount || 0).toString().split('')].slice(-4)
trigger: 'item' this.topData.num2 = [...[0, 0, 0, 0], ...(e.data.rawOutstockAmount || 0).toString().split('')].slice(-4)
}, this.topData.num3 = [...[0, 0, 0, 0], ...(e.data.productInstockAmount || 0).toString().split('')].slice(-4)
grid: { this.$refs.chart1.setData({
borderWidth: 0, tooltip: {
top: '10%', trigger: 'item'
left: '10%', },
right: '10%', grid: {
bottom: '10%' borderWidth: 0,
top: '10%',
left: '10%',
right: '10%',
bottom: '10%'
},
yAxis: {
type: 'category',
axisLabel: {
margin: 10,
color: '#ffffff63'
}, },
yAxis: {
type: 'category',
axisLabel: {
margin: 10,
color: '#ffffff63'
},
axisTick: { axisTick: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#ffffff1f' 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: [ splitLine: {
{ show: true,
name: '', lineStyle: {
type: 'bar', type: 'dashed',
barMaxWidth: '40px', color: '#ffffff1f'
barWidth: '40%',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0,
color: '#0a2ad7'
},
{
offset: 1,
color: '#138dd7'
}
],
false
)
},
data:[11,22,3]
},
{
name: '',
type: 'pictorialBar',
barWidth: '40%',
barMaxWidth: '40px',
symbolSize: [5, '100%'],
symbolPosition: 'end',
symbolOffset: [3, 0],
barGap: '-100%',
itemStyle: {
color: '#138dd7'
},
data:[11,22,3]
} }
] },
}) axisLine: {
let num11 = e.data.noProductstockAmount + e.data.productstockAmount lineStyle: {
let num12 = e.data.productstockAmount color: '#fff3',
let num12_1 width: 2
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: { data: [1, 2, 3]
enabled: false },
xAxis: {
type: 'value',
axisLabel: {
margin: 10,
color: '#ffffff63'
}, },
chart: { axisLine: {
type: 'pie', show: false
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: { axisTick: {
reversed: true, show: true,
itemStyle: { lineStyle: {
color: '#fff' color: '#ffffff1f'
} }
}, },
plotOptions: { splitLine: {
pie: { show: true,
allowPointSelect: false, lineStyle: {
cursor: 'pointer', type: 'dashed',
depth: 35, color: '#ffffff1f'
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: [
{
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: [11, 22, 3]
}, },
series: [ {
{ name: '',
type: 'pie', type: 'pictorialBar',
name: '占比', barWidth: '40%',
data: [ barMaxWidth: '40px',
{ symbolSize: [5, '100%'],
'name': '已使用', symbolPosition: 'end',
y: num12_1, symbolOffset: [3, 0],
h: num12_1 barGap: '-100%',
}, itemStyle: {
{ color: '#138dd7'
name: '未使用', },
y: num12_1, data: [11, 22, 3]
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.scrollTableData = []
this.$refs.chart3.setData({ this.scrollTableData1 = []
tooltip: { this.$refs.chart3.setData({
trigger: 'axis', tooltip: {
axisPointer: { trigger: 'axis',
// 坐标轴指示器，坐标轴触发有效 axisPointer: {
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' // 坐标轴指示器，坐标轴触发有效
} type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '2%',
right: '4%',
bottom: '14%',
top: '16%',
containLabel: true
},
legend: {
x: 'center',
top: 12,
textStyle: {
color: '#fff'
}, },
grid: { itemWidth: 12,
left: '2%', itemHeight: 10
right: '4%', // itemGap: 35
bottom: '14%', },
top: '16%', xAxis: {
containLabel: true type: 'category',
data: e.data.map(v => parseTime(v.day, '{m}-{d}')),
axisLine: {
lineStyle: {
color: 'white'
}
}, },
legend: { axisLabel: {
x: 'center', // interval: 0,
top: 12, // rotate: 40,
textStyle: { textStyle: {
color: '#fff' fontFamily: 'Microsoft YaHei'
}, }
itemWidth: 12, }
itemHeight: 10 },
// itemGap: 35
yAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: 'white'
}
}, },
xAxis: { splitLine: {
type: 'category', show: true,
data: e.data.map(v => parseTime(v.day, '{m}-{d}')), lineStyle: {
axisLine: { color: 'rgba(255,255,255,0.3)'
lineStyle: {
color: 'white'
}
},
axisLabel: {
// interval: 0,
// rotate: 40,
textStyle: {
fontFamily: 'Microsoft YaHei'
}
} }
}, },
axisLabel: {}
yAxis: { },
type: 'value', series: [
axisLine: { {
show: false, name: '入库',
lineStyle: { type: 'bar',
color: 'white' barWidth: '15%',
} itemStyle: {
}, normal: {
splitLine: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
show: true, {
lineStyle: { offset: 0,
color: 'rgba(255,255,255,0.3)' color: '#fccb05'
},
{
offset: 1,
color: '#f5804d'
}
])
} }
}, },
axisLabel: {} data: e.data.map(v => v.instockAmount)
}, },
series: [ {
{ name: '出库',
name: '入库', type: 'bar',
type: 'bar', barWidth: '15%',
barWidth: '15%', itemStyle: {
itemStyle: { normal: {
normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
{ offset: 0,
offset: 0, color: '#8bd46e'
color: '#fccb05' },
}, {
{ offset: 1,
offset: 1, color: '#09bcb7'
color: '#f5804d' }
} ])
]) }
}
},
data: e.data.map(v => v.instockAmount)
}, },
{ data: e.data.map(v => v.outStockAmount)
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)
}
]
})
}) })
} }
} }

Write Preview
Loading…
Cancel
Save