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

修改看板接口

Browse Source
master
夜笙歌 8 months ago
parent 26b6c1ceb7
commit 12c49b6b77
9 changed files with 1307 additions and 636 deletions
Show Stats Download Patch File Download Diff File

26
hw-ui/src/api/board/fourthFloorProduction.js
Unescape Escape View File

@ -0,0 +1,26 @@
import request from '@/utils/request'
// 工单计划
export function energyFourthFloorData(query) {
return request({
url: 'ems/EmsBoard/energyFourthFloorData',
method: 'get',
params: query
})
}
export function getLatestProductOrderWithPlans(query) {
return request({
url: 'mes/FourthMesBorder/getLatestProductOrderWithPlans',
method: 'get',
params: query
})
}
export function getQualityAndAvailablePercentage(query) {
return request({
url: 'mes/FourthMesBorder/getQualityAndAvailablePercentage',
method: 'get',
params: query
})
}

46
hw-ui/src/views/board/production/fifthFloor.vue
Unescape Escape View File

@ -78,21 +78,21 @@
<div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 12%">
编号
</div>
<div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 36%">
<div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 25%">
订单号
</div>
<div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 15%">
工序名称
</div>
<div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 14%">
<div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 18%">
开始时间
</div>
<div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 14%">
<div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 18%">
结束时间
</div>
<div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 12%">
生产用时
</div>
<div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 12%">
计划用时
</div>
</div>
<vue-seamless-scroll
:class-option="scrollTableOption"
@ -111,29 +111,33 @@
{{ item.processId }}
</div>
<div
class="scrollTableItem" style="width: 36%"
class="scrollTableItem" style="width: 25%"
>
{{ item.planCode }}
</div>
<div
class="scrollTableItem" style="width: 15%"
>
{{ item.processName }}
</div>
<div
class="scrollTableItem" style="width: 14%"
class="scrollTableItem" style="width: 18%"
>
{{ item.planAmount }}
{{
parseTime(item.realBeginTime,'{m}-{d} {h}:{i}:{s}')
}}
</div>
<div
class="scrollTableItem" style="width: 14%"
class="scrollTableItem" style="width: 18%"
>
{{ item.completeAmount }}
{{
parseTime(item.realEndTime,'{m}-{d} {h}:{i}:{s}')
}}
</div>
<div
class="scrollTableItem" style="width: 12%"
>
{{ item.quantityAmount }}
</div>
<div
class="scrollTableItem" style="width: 12%"
>
{{ item.finishingRate }}%
{{ (Math.abs(new Date(item.realEndTime) - new Date(item.realBeginTime))/(1000*60*60)).toFixed(2) }}时
</div>
</div>
</div>
@ -351,7 +355,6 @@ export default {
})
})
orderTime().then(e => {
// console.log(e)
// this.$refs.chart2.setData({
// tooltip: {
@ -453,7 +456,7 @@ export default {
}
},
grid: {
top: '5%',
top: '15%',
left: '3%',
right: '4%',
bottom: '3%',
@ -462,7 +465,7 @@ export default {
yAxis: [
{
type: 'value',
name: '次数',
name: '时长(分钟）',
position: 'left'
},
{
@ -471,7 +474,7 @@ export default {
],
xAxis: {
type: 'category',
data: e.data.map(v => v.processId.toString())
data: e.data.map(v => v.processName)
},
series: [
{
@ -554,6 +557,7 @@ export default {
left: 67.3%;
width: 29.5%;
height: 50.5%;
font-size: 0.7vw;
color: #fff;
}

623
hw-ui/src/views/board/production/fourthFloor.vue
Unescape Escape View File

@ -1,28 +1,28 @@
<template>
<div class="app-container">
<div class="headTitle">京源生产监控平台</div>
<div class="time">{{
time
}}
</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"
>
<!-- <div class="time">{{
time
}}
</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">
<Chart key="chart1" ref="chart1"></Chart>
</div>
<div class="chart2">
<div v-for="(i,k) in 10" class="item">
<div style="top: 25%;left:5%" class="block">人员{{ k }}</div>
<div style="top: 50%;left:5%" class="block">工序：切割</div>
<div style="top: 75%;left:5%" class="block">产品计划数量：10000</div>
<div style="text-align: right;top: 25%;right:5%" class="block">8888</div>
<div style="text-align: right;top: 50%;right:5%" class="block">88%</div>
<div v-for="(i, k) in scrollTableData" class="item">
<div style="top: 25%;left:5%" class="block">人员：{{ i.userName }}</div>
<div style="top: 50%;left:5%" class="block">工序：{{i.processName}}</div>
<div style="top: 75%;left:5%" class="block">产品计划数量：{{i.planAmount}}</div>
<div style="text-align: right;top: 25%;right:5%" class="block">{{i.completeAmount}}</div>
<div style="text-align: right;top: 50%;right:5%" class="block">{{i.processPercentage}}</div>
<div style="text-align: right;top: 75%;right:5%;width: 50%;height: 0.8vw" class="block">
<el-progress :format="()=>{return ''}" :percentage="88"></el-progress>
<el-progress :format="() => { return '' }" :percentage="parseFloat(i.processPercentage)"></el-progress>
</div>
</div>
</div>
@ -30,19 +30,22 @@
<Chart key="chart3" ref="chart3"></Chart>
</div>
<div class="chart4_1">
<!-- <Chart key="chart4_1" ref="chart4_1"></Chart>-->
<el-progress :width="12*vw" type="circle" :percentage="55" :format="(e)=>` `" :stroke-width="vw" style="margin-top: 50%;margin-left: 50%;transform: translate(-50%,-50%)"></el-progress>
<div class="span">10%<br>良率</div>
<!-- <Chart key="chart4_1" ref="chart4_1"></Chart>-->
<el-progress :width="12 * vw" type="circle" :percentage="parseFloat(data1.passRate)" :format="(e) => ` `"
:stroke-width="vw" style="margin-top: 50%;margin-left: 50%;transform: translate(-50%,-50%)"></el-progress>
<div class="span">{{ data1.passRate }}<br>良率</div>
</div>
<div class="chart4_2">
<!-- <Chart key="chart4_2" ref="chart4_2"></Chart>-->
<el-progress :width="12*vw" type="circle" :percentage="55" :format="(e)=>` `" :stroke-width="vw" style="margin-top: 50%;margin-left: 50%;transform: translate(-50%,-50%)"></el-progress>
<div class="span">10%<br>不良率</div>
<!-- <Chart key="chart4_2" ref="chart4_2"></Chart>-->
<el-progress :width="12 * vw" type="circle" :percentage="parseFloat(data1.failureRate)" :format="(e) => ` `"
:stroke-width="vw" style="margin-top: 50%;margin-left: 50%;transform: translate(-50%,-50%)"></el-progress>
<div class="span">{{ data1.failureRate }}<br>不良率</div>
</div>
<div class="chart4_3">
<!-- <Chart key="chart4_3" ref="chart4_3"></Chart>-->
<el-progress :width="12*vw" type="circle" :percentage="55" :format="(e)=>` `" :stroke-width="vw" style="margin-top: 50%;margin-left: 50%;transform: translate(-50%,-50%)"></el-progress>
<div class="span">10%<br>物料利用率</div>
<!-- <Chart key="chart4_3" ref="chart4_3"></Chart>-->
<el-progress :width="12 * vw" type="circle" :percentage="parseFloat(data1.availableRate)" :format="(e) => ` `"
:stroke-width="vw" style="margin-top: 50%;margin-left: 50%;transform: translate(-50%,-50%)"></el-progress>
<div class="span">{{ data1.availableRate }}<br>物料利用率</div>
</div>
<div class="chart5">
<Chart key="chart5" ref="chart5"></Chart>
@ -55,12 +58,9 @@ import vueSeamlessScroll from 'vue-seamless-scroll'
import Chart from '@/components/board/Chart'
import * as echarts from 'echarts'
import {
deviceTimeCount,
dustAnalysis,
getDayProduction,
getHourProduction, getLineStatus, selectLatestWorkOrder,
workOrderProgress
} from '@/api/board/secondFloorProduction'
energyFourthFloorData, getLatestProductOrderWithPlans, getQualityAndAvailablePercentage
} from '@/api/board/fourthFloorProduction'
import { parseTime } from '@/utils/ruoyi'
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
@ -72,7 +72,7 @@ export default {
},
data() {
return {
vw:(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth)/100,
vw: (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) / 100,
LineStatus: true,
topData: {
planAmount: [0, 0, 0, 0],
@ -93,15 +93,15 @@ export default {
],
titlePosition: [
{
top: 11.3,
top: 11.8,
left: 5.5
},
{
top: 11.3,
left: 75
top: 11.8,
left: 68.4
},
{
top: 70.3,
top: 60,
left: 5.5
},
{
@ -113,11 +113,11 @@ export default {
left: 75
},
{
top: 11.3,
top: 11.8,
left: 30.5
},
{
top: 11.3,
top: 11.8,
left: 45
},
{
@ -139,7 +139,14 @@ export default {
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 0
},
scrollTableData: []
scrollTableData: [],
data1: {
"passRate": "99.7%",
"failureRate": "0.3%",
"availableRate": "98.6%"
}
}
},
mounted() {
@ -156,287 +163,264 @@ export default {
},
methods: {
getData() {
workOrderProgress().then(e => {
this.scrollTableData = e.data.map((v, k) => {
return {
no: k + 1,
orderCode: v.orderCode,
planAmount: v.planAmount,
completeAmount: v.completeAmount,
quantityAmount: parseFloat(v.planAmount) - parseFloat(v.completeAmount),
finishingRate: parseFloat(v.completeAmount) === 0 ? 0 : (parseFloat(v.completeAmount) / parseFloat(v.completeAmount)) * 100
}
energyFourthFloorData().then(e=>{
this.$refs.chart5.setData({
// color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
grid: {
left: -100,
top: 50,
bottom: 10,
right: 10,
containLabel: true,
},
tooltip: {
trigger: "item",
formatter: "{b} : {c} ({d}%)",
},
legend: {
type: "scroll",
orient: "vartical",
// x: "right",
top: "center",
right: "15",
// bottom: "0%",
itemWidth: 16,
itemHeight: 8,
itemGap: 16,
textStyle: {
color: "#A3E2F4",
fontSize: 12,
fontWeight: 0,
},
},
polar: {},
angleAxis: {
interval: 1,
type: "category",
data: [],
z: 10,
axisLine: {
show: false,
lineStyle: {
color: "#0B4A6B",
width: 1,
type: "solid",
},
},
axisLabel: {
interval: 0,
show: true,
color: "#0B4A6B",
margin: 8,
fontSize: 16,
},
},
radiusAxis: {
min: 40,
max: 120,
interval: 20,
axisLine: {
show: false,
lineStyle: {
color: "#0B3E5E",
width: 1,
type: "solid",
},
},
axisLabel: {
formatter: "{value} %",
show: false,
padding: [0, 0, 20, 0],
color: "#0B3E5E",
fontSize: 16,
},
splitLine: {
lineStyle: {
color: "#0B3E5E",
width: 2,
type: "solid",
},
},
},
calculable: true,
series: [
{
stack: "a",
type: "pie",
radius: ["20%", "80%"],
roseType: "area",
zlevel: 10,
label: {
normal: {
show: true,
formatter: "{c}",
textStyle: {
fontSize: 12,
},
position: "outside",
},
emphasis: {
show: true,
},
},
labelLine: {
normal: {
show: true,
length: 20,
length2: 55,
},
emphasis: {
show: false,
},
},
data: e.rows.map(v=>{
return {
value: v.meterValue,
name: v.monitorName,
}
})
},
],
})
})
this.$refs.chart1.setData({
tooltip: {},
radar: {
indicator: [
{ name: '打磨', max: 6500 },
{ name: '折弯', max: 16000 },
{ name: '组装', max: 30000 },
{ name: '下料', max: 38000 },
{ name: '机加', max: 52000 },
{ name: '1', max: 25000 }
]
},
series: [
{
name: '时间',
type: 'radar',
// areaStyle: {normal: {}},
data: [
{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: '时间'
getLatestProductOrderWithPlans().then(e=>{
this.scrollTableData = e.data.mesProductPlanList
this.$refs.chart1.setData({
tooltip: {},
radar: {
indicator: e.data.baseProcessInfoList.map(e => {
return {
name: e.processName,
max: 100
}
]
}
]
})
this.$refs.chart3.setData({
tooltip: {
trigger: 'item'
},
grid: {
borderWidth: 0,
top: '10%',
left: '10%',
right: '10%',
bottom: '10%'
},
yAxis: {
type: 'category',
axisLabel: {
margin: 10,
color: '#ffffff63'
})
},
series: [
{
name: '时间',
type: 'radar',
// areaStyle: {normal: {}},
data: [
{
value: e.data.baseProcessInfoList.map(e => parseFloat(e.processPercentage)),
name: '时间'
}
]
}
]
})
let chartData=e.data
this.$refs.chart3.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'
axisTick: {
show: true,
lineStyle: {
color: '#ffffff1f'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#ffffff1f'
}
},
axisLine: {
lineStyle: {
color: '#fff3',
width: 2
}
},
data: ['计划', '实际', '差异']
},
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'
}
}
},
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',
barMaxWidth: '40px',
barWidth: '40%',
itemStyle: {
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
)
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0,
color: '#0a2ad7'
},
{
offset: 1,
color: '#138dd7'
}
],
false
)
},
data: [chartData.planAmount, chartData.completeAmount, chartData.planAmount-chartData.completeAmount]
},
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]
}
]
{
name: '',
type: 'pictorialBar',
barWidth: '40%',
barMaxWidth: '40px',
symbolSize: [5, '100%'],
symbolPosition: 'end',
symbolOffset: [3, 0],
barGap: '-100%',
itemStyle: {
color: '#138dd7'
},
data: [chartData.planAmount, chartData.completeAmount, chartData.planAmount-chartData.completeAmount]
}
]
})
})
this.$refs.chart5.setData({
color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
grid: {
left: -100,
top: 50,
bottom: 10,
right: 10,
containLabel: true,
},
tooltip: {
trigger: "item",
formatter: "{b} : {c} ({d}%)",
},
legend: {
type: "scroll",
orient: "vartical",
// x: "right",
top: "center",
right: "15",
// bottom: "0%",
itemWidth: 16,
itemHeight: 8,
itemGap: 16,
textStyle: {
color: "#A3E2F4",
fontSize: 12,
fontWeight: 0,
},
},
polar: {},
angleAxis: {
interval: 1,
type: "category",
data: [],
z: 10,
axisLine: {
show: false,
lineStyle: {
color: "#0B4A6B",
width: 1,
type: "solid",
},
},
axisLabel: {
interval: 0,
show: true,
color: "#0B4A6B",
margin: 8,
fontSize: 16,
},
},
radiusAxis: {
min: 40,
max: 120,
interval: 20,
axisLine: {
show: false,
lineStyle: {
color: "#0B3E5E",
width: 1,
type: "solid",
},
},
axisLabel: {
formatter: "{value} %",
show: false,
padding: [0, 0, 20, 0],
color: "#0B3E5E",
fontSize: 16,
},
splitLine: {
lineStyle: {
color: "#0B3E5E",
width: 2,
type: "solid",
},
},
},
calculable: true,
series: [
{
stack: "a",
type: "pie",
radius: ["20%", "80%"],
roseType: "area",
zlevel: 10,
label: {
normal: {
show: true,
formatter: "{c}",
textStyle: {
fontSize: 12,
},
position: "outside",
},
emphasis: {
show: true,
},
},
labelLine: {
normal: {
show: true,
length: 20,
length2: 55,
},
emphasis: {
show: false,
},
},
data: [
{
value: 10,
name: "设备1",
},
{
value: 5,
name: "设备2",
},
{
value: 15,
name: "设备3",
},
{
value: 25,
name: "设备4",
},
{
value: 20,
name: "设备5",
},
{
value: 35,
name: "设备6",
},
],
},
],
getQualityAndAvailablePercentage().then(e=>{
console.log(e)
this.data1 = e.data
})
}
@ -444,7 +428,6 @@ export default {
}
</script>
<style lang="less" scoped>
.app-container {
background-image: url("../../../assets/board/productionBg4.jpg");
background-repeat: no-repeat;
@ -454,7 +437,8 @@ export default {
position: absolute;
top: 0;
left: 0;
&::-webkit-scrollbar{
&::-webkit-scrollbar {
display: none;
}
}
@ -565,16 +549,18 @@ export default {
width: 15%;
height: 31.5%;
overflow: hidden;
.span{
.span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
color: #20a0ff;
text-align: center;
font-size: 1.5vw;
}
}
.chart4_2 {
position: absolute;
top: 63.3%;
@ -582,16 +568,18 @@ export default {
width: 15%;
height: 31.5%;
overflow: hidden;
.span{
.span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
color: #20a0ff;
text-align: center;
font-size: 1.5vw;
}
}
.chart4_3 {
position: absolute;
top: 63.3%;
@ -599,11 +587,12 @@ export default {
width: 15%;
height: 31.5%;
overflow: hidden;
.span{
.span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
color: #20a0ff;
text-align: center;
font-size: 1.5vw;

654
hw-ui/src/views/board/production/fourthFloor2.vue
Unescape Escape View File

@ -0,0 +1,654 @@
<template>
<div class="app-container">
<div class="headTitle">京源生产监控平台</div>
<div class="time">{{
time
}}
</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">
<Chart key="chart1" ref="chart1"></Chart>
</div>
<div class="chart2">
<div v-for="(i,k) in 10" class="item">
<div style="top: 25%;left:5%" class="block">人员{{ k }}</div>
<div style="top: 50%;left:5%" class="block">工序：切割</div>
<div style="top: 75%;left:5%" class="block">产品计划数量：10000</div>
<div style="text-align: right;top: 25%;right:5%" class="block">8888</div>
<div style="text-align: right;top: 50%;right:5%" class="block">88%</div>
<div style="text-align: right;top: 75%;right:5%;width: 50%;height: 0.8vw" class="block">
<el-progress :format="()=>{return ''}" :percentage="88"></el-progress>
</div>
</div>
</div>
<div class="chart3">
<Chart key="chart3" ref="chart3"></Chart>
</div>
<div class="chart4_1">
<!-- <Chart key="chart4_1" ref="chart4_1"></Chart>-->
<el-progress :width="12*vw" type="circle" :percentage="55" :format="(e)=>` `" :stroke-width="vw" style="margin-top: 50%;margin-left: 50%;transform: translate(-50%,-50%)"></el-progress>
<div class="span">10%<br>良率</div>
</div>
<div class="chart4_2">
<!-- <Chart key="chart4_2" ref="chart4_2"></Chart>-->
<el-progress :width="12*vw" type="circle" :percentage="55" :format="(e)=>` `" :stroke-width="vw" style="margin-top: 50%;margin-left: 50%;transform: translate(-50%,-50%)"></el-progress>
<div class="span">10%<br>不良率</div>
</div>
<div class="chart4_3">
<!-- <Chart key="chart4_3" ref="chart4_3"></Chart>-->
<el-progress :width="12*vw" type="circle" :percentage="55" :format="(e)=>` `" :stroke-width="vw" style="margin-top: 50%;margin-left: 50%;transform: translate(-50%,-50%)"></el-progress>
<div class="span">10%<br>物料利用率</div>
</div>
<div class="chart5">
<Chart key="chart5" ref="chart5"></Chart>
</div>
</div>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import Chart from '@/components/board/Chart'
import * as echarts from 'echarts'
import {
deviceTimeCount,
dustAnalysis,
getDayProduction,
getHourProduction, getLineStatus, selectLatestWorkOrder,
workOrderProgress
} from '@/api/board/secondFloorProduction'
import { parseTime } from '@/utils/ruoyi'
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
name: 'Board1',
components: {
vueSeamlessScroll,
Chart
},
data() {
return {
vw:(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth)/100,
LineStatus: true,
topData: {
planAmount: [0, 0, 0, 0],
completeAmount: [0, 0, 0, 0],
diff: [0, 0, 0, 0]
},
time: parseTime(new Date(), '{y}-{m}-{d} 星期{a} {h}:{i}:{s}'),
title: [
'工序生产进度',
'工序名称对比',
'七日产量对比',
' ',
' ',
' ',
' ',
' ',
' '
],
titlePosition: [
{
top: 11.3,
left: 5.5
},
{
top: 11.3,
left: 75
},
{
top: 70.3,
left: 5.5
},
{
top: 63,
left: 30.5
},
{
top: 63,
left: 75
},
{
top: 11.3,
left: 30.5
},
{
top: 11.3,
left: 45
},
{
top: 11.3,
left: 59.5
},
{
top: 25,
left: 44
}
],
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: []
}
},
mounted() {
setInterval(() => {
this.time = parseTime(new Date(), '{y}-{m}-{d} 星期{a} {h}:{i}:{s}')
}, 1000)
this.getData()
window.onresize = () => {
this.$refs.chart1.chart.resize()
this.$refs.chart3.chart.resize()
this.$refs.chart5.chart.resize()
}
},
methods: {
getData() {
workOrderProgress().then(e => {
this.scrollTableData = e.data.map((v, k) => {
return {
no: k + 1,
orderCode: v.orderCode,
planAmount: v.planAmount,
completeAmount: v.completeAmount,
quantityAmount: parseFloat(v.planAmount) - parseFloat(v.completeAmount),
finishingRate: parseFloat(v.completeAmount) === 0 ? 0 : (parseFloat(v.completeAmount) / parseFloat(v.completeAmount)) * 100
}
})
})
this.$refs.chart1.setData({
tooltip: {},
radar: {
indicator: [
{ name: '打磨', max: 6500 },
{ name: '折弯', max: 16000 },
{ name: '组装', max: 30000 },
{ name: '下料', max: 38000 },
{ name: '机加', max: 52000 },
{ name: '1', max: 25000 }
]
},
series: [
{
name: '时间',
type: 'radar',
// areaStyle: {normal: {}},
data: [
{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: '时间'
}
]
}
]
})
this.$refs.chart3.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',
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]
},
{
name: '',
type: 'pictorialBar',
barWidth: '40%',
barMaxWidth: '40px',
symbolSize: [5, '100%'],
symbolPosition: 'end',
symbolOffset: [3, 0],
barGap: '-100%',
itemStyle: {
color: '#138dd7'
},
data:[11,22,3]
}
]
})
this.$refs.chart5.setData({
color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
grid: {
left: -100,
top: 50,
bottom: 10,
right: 10,
containLabel: true,
},
tooltip: {
trigger: "item",
formatter: "{b} : {c} ({d}%)",
},
legend: {
type: "scroll",
orient: "vartical",
// x: "right",
top: "center",
right: "15",
// bottom: "0%",
itemWidth: 16,
itemHeight: 8,
itemGap: 16,
textStyle: {
color: "#A3E2F4",
fontSize: 12,
fontWeight: 0,
},
},
polar: {},
angleAxis: {
interval: 1,
type: "category",
data: [],
z: 10,
axisLine: {
show: false,
lineStyle: {
color: "#0B4A6B",
width: 1,
type: "solid",
},
},
axisLabel: {
interval: 0,
show: true,
color: "#0B4A6B",
margin: 8,
fontSize: 16,
},
},
radiusAxis: {
min: 40,
max: 120,
interval: 20,
axisLine: {
show: false,
lineStyle: {
color: "#0B3E5E",
width: 1,
type: "solid",
},
},
axisLabel: {
formatter: "{value} %",
show: false,
padding: [0, 0, 20, 0],
color: "#0B3E5E",
fontSize: 16,
},
splitLine: {
lineStyle: {
color: "#0B3E5E",
width: 2,
type: "solid",
},
},
},
calculable: true,
series: [
{
stack: "a",
type: "pie",
radius: ["20%", "80%"],
roseType: "area",
zlevel: 10,
label: {
normal: {
show: true,
formatter: "{c}",
textStyle: {
fontSize: 12,
},
position: "outside",
},
emphasis: {
show: true,
},
},
labelLine: {
normal: {
show: true,
length: 20,
length2: 55,
},
emphasis: {
show: false,
},
},
data: [
{
value: 10,
name: "设备1",
},
{
value: 5,
name: "设备2",
},
{
value: 15,
name: "设备3",
},
{
value: 25,
name: "设备4",
},
{
value: 20,
name: "设备5",
},
{
value: 35,
name: "设备6",
},
],
},
],
})
}
}
}
</script>
<style lang="less" scoped>
.app-container {
background-image: url("../../../assets/board/productionBg4.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
&::-webkit-scrollbar{
display: none;
}
}
.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;
}
.num1 {
position: absolute;
font-size: 2vw;
transform: translate(-50%, -50%);
}
.time {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.5vw;
color: #eee;
}
.centerImg {
position: absolute;
top: 50%;
left: 50%;
width: 30%;
height: 23.96vw;
background-image: url("../../../assets/board/center.png");
background-repeat: no-repeat;
background-size: 100% 100%;
transform: translate(-50%, -50%);
}
.table1 {
position: absolute;
top: 14.5%;
left: 3.3%;
width: 23.8%;
height: 45.5%;
color: #fff;
font-size: 0.8vw
}
.scrollTableItem {
display: inline-block;
width: calc(100% / 6);
text-align: center;
padding: 4px 0;
color: #fff9
}
.chart1 {
position: absolute;
top: 14.5%;
left: 66.5%;
width: 30%;
height: 40%;
}
.chart2 {
//position: absolute;
//top: 66%;
//left: 3.3%;
//width: 23.8%;
//height: 29%;
position: absolute;
top: 14.5%;
left: 3.3%;
width: 30.3%;
height: 40.1%;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
}
.chart3 {
position: absolute;
top: 63.3%;
left: 3.3%;
width: 46%;
height: 31.5%;
}
.chart4_1 {
position: absolute;
top: 63.3%;
left: 50.6%;
width: 15%;
height: 31.5%;
overflow: hidden;
.span{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #20a0ff;
text-align: center;
font-size: 1.5vw;
}
}
.chart4_2 {
position: absolute;
top: 63.3%;
left: 66%;
width: 15%;
height: 31.5%;
overflow: hidden;
.span{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #20a0ff;
text-align: center;
font-size: 1.5vw;
}
}
.chart4_3 {
position: absolute;
top: 63.3%;
left: 81.5%;
width: 15%;
height: 31.5%;
overflow: hidden;
.span{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #20a0ff;
text-align: center;
font-size: 1.5vw;
}
}
.chart5 {
position: absolute;
top: 14.5%;
left: 34.9%;
width: 30.3%;
height: 40.1%;
}
.state {
position: absolute;
transform: translate(-50%, -50%);
top: 25%;
left: 50%;
width: 1.5vw;
height: 1.5vw;
border-radius: 50%;
background-color: #ffff00;
}
.status {
position: absolute;
top: 16%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.5vw;
color: #eee;
}
.item {
position: relative;
width: 100%;
height: 5vw;
border-bottom: 1px solid #ccc2;
.block {
position: absolute;
color: #ccc;
transform: translateY(-50%);
}
}
</style>

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

@ -8,23 +8,26 @@
{{ i }}
</div>
<div class="table1">
<div style="background-color: #094170">
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 12%">
<div style="background-color: #094170;font-size: 0.7vw">
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 10%">
编号
</div>
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 36%">
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 23%">
生产工单
</div>
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 14%">
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 23%">
成品名称
</div>
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 12%">
计划数量
</div>
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 14%">
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 12%">
实际数量
</div>
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 12%">
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 10%">
差异值
</div>
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 12%">
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 10%">
完成率
</div>
</div>
@ -40,32 +43,37 @@
>
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
<div
class="scrollTableItem" style="width: 12%"
class="scrollTableItem" style="width: 10%"
>
{{ item.no }}
</div>
<div
class="scrollTableItem" style="width:36%"
class="scrollTableItem" style="width:23%;font-size: 0.5vw"
>
{{ item.orderCode }}
</div>
<div
class="scrollTableItem" style="width: 14%"
class="scrollTableItem" style="width:23%;font-size: 0.6vw"
>
{{ item.materialName }}
</div>
<div
class="scrollTableItem" style="width: 12%"
>
{{ item.planAmount }}
</div>
<div
class="scrollTableItem" style="width: 14%"
class="scrollTableItem" style="width: 12%"
>
{{ item.completeAmount }}
</div>
<div
class="scrollTableItem" style="width: 12%"
class="scrollTableItem" style="width: 10%"
>
{{ item.quantityAmount }}
</div>
<div
class="scrollTableItem" style="width: 12%"
class="scrollTableItem" style="width: 10%"
>
{{ item.finishingRate }}%
</div>
@ -180,7 +188,7 @@ export default {
],
scrollTableOption: {
step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 22, // 开始无缝滚动的数据量 this.dataList.length
limitMoveNum: 16, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
@ -204,6 +212,7 @@ export default {
methods: {
getData() {
workOrderProgress().then(e => {
console.log(e)
this.scrollTableData = e.data.map((v, k) => {
return {
no: k + 1,
@ -211,7 +220,7 @@ export default {
planAmount: v.planAmount,
completeAmount: v.completeAmount,
quantityAmount: parseFloat(v.planAmount) - parseFloat(v.completeAmount),
finishingRate: parseFloat(v.completeAmount) === 0 ? 0 : (parseFloat(v.completeAmount) / parseFloat(v.completeAmount)) * 100
finishingRate: parseFloat(v.completeAmount) === 0 ? 0 :( (parseFloat(v.completeAmount) / parseFloat(v.planAmount)) * 100).toFixed(2)
}
})
})

2
hw-ui/src/views/board/production/thirdFloor.vue
Unescape Escape View File

@ -499,7 +499,7 @@ export default {
}
},
xAxis: {
data: e.data.map(v => v.materialId),
data: e.data.map(v => parseTime(v.week,'{h}:{s}')),
axisLabel: {
margin: 10,
color: '#ffffff63'

180
hw-ui/src/views/board/warehouse/fifthFloor.vue
Unescape Escape View File

@ -206,13 +206,13 @@ export default {
data: [
{
'name': '空料箱',
y: e.data.emptyLocationPercentage * 100,
h: e.data.emptyLocationPercentage * 100
y: parseFloat((e.data.emptyLocationPercentage * 100).toFixed(2)),
h: Math.min(parseFloat((e.data.emptyLocationPercentage * 100).toFixed(2)),50)
},
{
name: '非空料箱',
y: (1 - e.data.emptyLocationPercentage) * 100,
h: (1 - e.data.emptyLocationPercentage) * 100
y: parseFloat(((1 - e.data.emptyLocationPercentage) * 100).toFixed(2)),
h: Math.min(parseFloat(((1 - e.data.emptyLocationPercentage) * 100).toFixed(2)),50)
}
].sort((a, b) => a.y - b.y)
}]
@ -291,13 +291,13 @@ export default {
data: [
{
'name': '已使用',
y: e.data.opplyLocationPercentage * 100,
h: e.data.opplyLocationPercentage * 100
y: parseFloat((e.data.opplyLocationPercentage * 100).toFixed(2)),
h: Math.min(parseFloat((e.data.opplyLocationPercentage * 100).toFixed(2)),50)
},
{
name: '未使用',
y: (1 - e.data.opplyLocationPercentage) * 100,
h: (1 - e.data.opplyLocationPercentage) * 100
y: parseFloat(((1 - e.data.opplyLocationPercentage) * 100).toFixed(2)),
h: Math.min(parseFloat(((1 - e.data.opplyLocationPercentage) * 100).toFixed(2)),50)
}
].sort((a, b) => a.y - b.y)
}]
@ -305,87 +305,6 @@ export default {
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: {
@ -452,13 +371,94 @@ export default {
}
}
},
series: [
{
type: 'pie',
name: '占比',
data: e.data.productStocks.map(v => {
return {
name: v.materialName,
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,
name: v.materialName,
y: v.totalAmount,
h: parseFloat(((v.totalAmount / total1) * 100).toFixed(2))
}

369
hw-ui/src/views/board/warehouse/secondFloor.vue
Unescape Escape View File

@ -10,13 +10,13 @@
<div class="table1">
<div style="background-color: #094170aa">
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 33%">
柜体名称
库位
</div>
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 33%">
规格型号
成品条码
</div>
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 33%">
完成时长
数量
</div>
</div>
<vue-seamless-scroll
@ -33,7 +33,7 @@
<div
class="scrollTableItem" style="width: 33%"
>
{{ item.productId }}
{{ item.locationCode }}
</div>
<div
class="scrollTableItem" style="width: 33%"
@ -43,7 +43,7 @@
<div
class="scrollTableItem" style="width: 33%"
>
{{ item.time }}
{{ item.outstockAmount }}
</div>
</div>
</div>
@ -96,6 +96,7 @@ import {
tableInfo, todayInstockAmount,
workOrderProgress
} from '@/api/board/secondFloorWarehouse'
import { parseTime } from '@/utils/ruoyi'
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
@ -133,7 +134,7 @@ export default {
],
scrollTableOption: {
step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 22, // 开始无缝滚动的数据量 this.dataList.length
limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
@ -141,15 +142,7 @@ export default {
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 0
},
scrollTableData: Array(4).fill('').map(function(i, k) {
return {
value1: k + 1,
value2: '出库',
value3: '物料1',
value4: '000' + k,
value5: '2024.03.04'
}
})
scrollTableData: []
}
},
mounted() {
@ -203,7 +196,7 @@ export default {
width: 2
}
},
data: e.data.map(v => v.productId)
data: e.data.map(v => v.materialName)
},
xAxis: {
type: 'value',
@ -273,6 +266,173 @@ export default {
]
})
})
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,'{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: {
@ -418,183 +578,10 @@ export default {
})
})
tableInfo().then(e => {
this.scrollTableData = e.data.map(v => {
return {
productId: v.productId,
productBarcode: v.productBarcode,
time: v.endTime
}
})
})
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 => v.productId),
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)
}
]
})
console.log(e)
this.scrollTableData = e.data
})
todayInstockAmount().then(e => {
console.log(e)
this.topData = e.data
})
}

4
hw-ui/src/views/board/warehouse/thirdFloor.vue
Unescape Escape View File

@ -121,6 +121,7 @@ import vueSeamlessScroll from 'vue-seamless-scroll'
import Chart from '@/components/board/Chart'
import * as echarts from 'echarts'
import { locationStatus, monthRawAmount, productCompleteCount, productPlan } from '@/api/board/thirdFloorWarehouse'
import { parseTime } from '@/utils/ruoyi'
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
@ -183,6 +184,7 @@ export default {
console.log(e)
})
productCompleteCount().then(e=>{
console.log(e)
this.$refs.chart1.setData({
grid: {
@ -208,7 +210,7 @@ export default {
}
},
xAxis: {
data: e.data.map(v => v.materialId),
data: e.data.map(v => parseTime(v.week,'{h}:{s}')),
axisLabel: {
margin: 10,
color: '#ffffff63'

Write Preview
Loading…
Cancel
Save