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

修改看板接口

Browse Source
master
夜笙歌 3 months ago
parent 6ebd69a44b
commit d3ad7cd8db
2 changed files with 282 additions and 322 deletions
Show Stats Download Patch File Download Diff File

85
hw-ui/src/views/board/production/firstFloor.vue
Unescape Escape View File

@ -2,15 +2,54 @@
<div class="app-container">
<div class="headTitle">京源生产监控平台</div>
<div class="centerImg"></div>
<div class="status" style="top: 75%;left: 60%">当前楼层：3F</div>
<div class="status" style="top: 75%;left: 85%">状态：
<span style="color: #67C23A">出库中</span>
<div class="status" style="top: 72%;left: 57%">当前楼层：{{ tsjData.currentFloor }}F</div>
<div class="status" style="top: 72%;left: 91%">状态：
<span style="color: #67C23A">{{ tsjData.elevatorStatus }}</span>
</div>
<div class="status" style="top: 85%;left: 60%">起始楼层：
<span style="color: #F56C6C">1F</span>
<div class="status" style="top: 72%;left: 74%">目标楼层：
<span style="color: #F56C6C">{{ tsjData.targetFloor }}F</span>
</div>
<div class="status" style="top: 85%;left: 85%">目标楼层：
<span style="color: #F56C6C">3F</span>
<div class="table1">
<div style="background-color: #1077bc19;height: 50px;line-height: 50px;">
<div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 33%">
起始楼层
</div>
<div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 33%">
目标楼层
</div>
<div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 33%">
任务状态
</div>
</div>
<vue-seamless-scroll
:class-option="scrollTableOption"
:data="scrollTableData1"
class="case-item"
style="height: calc(100% - 50px);overflow: hidden;font-size: 0.8vw"
>
<div
v-for="(item, index) in scrollTableData1"
:key="index"
>
<div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
<div
class="scrollTableItem" style="width: 33%"
>
{{ item.data1 }}F
</div>
<div
class="scrollTableItem" style="width: 33%"
>
{{ item.data2 }}F
</div>
<div
class="scrollTableItem" style="width: 33%"
>
{{ item.data3 }}
</div>
</div>
</div>
</vue-seamless-scroll>
</div>
<div v-for="(i,k) in title"
:style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
@ -125,6 +164,12 @@ export default {
},
data() {
return {
tsjData: {
'currentFloor': '3',
'targetFloor': '3',
'elevatorStatus': '空闲',
'wcsTaskList': []
},
LineStatus: true,
topData: {
planAmount: [0, 0, 0, 0],
@ -191,6 +236,23 @@ export default {
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 0
},
scrollTableData1:[
{
data1:1,
data2:3,
data3:'完成',
},
{
data1:1,
data2:3,
data3:'取消',
},
{
data1:2,
data2:3,
data3:'完成',
},
],
scrollTableData: [ {
"createBy": "admin",
"createTime": "2024-11-24 20:11:12",
@ -322,10 +384,10 @@ export default {
.table1 {
position: absolute;
top: 14.5%;
left: 3.3%;
width: 23.8%;
height: 45.5%;
top: 76.5%;
left: 53%;
width: 43%;
height: 18.5%;
color: #fff;
font-size: 0.8vw
}
@ -380,6 +442,7 @@ export default {
position: absolute;
transform: translate(-50%, -50%);
font-size: 1.5vw;
white-space: nowrap;
color: #eee;
}

519
hw-ui/src/views/board/warehouse/firstFloor.vue
Unescape Escape View File

@ -14,19 +14,34 @@
<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;">
库位编号
A项电压(V)
</div>
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
时间
B项电压(V)
</div>
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
C项电压(V)
</div>
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
A项电流(A)
</div>
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
B项电流(A)
</div>
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
C项电流(V)
</div>
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
仪表值(kW·h)
</div>
</div>
<vue-seamless-scroll
@ -43,27 +58,52 @@
<div
class="scrollTableItem"
>
{{ item.taskCode }}
{{ item.monitorId }}
</div>
<div
class="scrollTableItem"
>
{{ item.monitorName }}
</div>
<div
class="scrollTableItem"
>
{{ item.collectTime }}
</div>
<div
class="scrollTableItem"
>
{{ item.va }}
</div>
<div
class="scrollTableItem"
>
{{ item.vb }}
</div>
<div
class="scrollTableItem"
>
{{ item.vc }}
</div>
<div
class="scrollTableItem"
>
入库
{{ item.ia }}
</div>
<div
class="scrollTableItem"
>
{{ item.materialName }}
{{ item.ib }}
</div>
<div
class="scrollTableItem"
>
{{ item.locationCode }}
{{ item.ic }}
</div>
<div
class="scrollTableItem"
>
{{ item.applylate }}
{{ item.zxyg }}
</div>
</div>
</div>
@ -110,7 +150,7 @@ export default {
' ',
' ',
' ',
'库存占比'
' '
],
titlePosition: [
{
@ -148,7 +188,39 @@ export default {
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 0
},
scrollTableData: [],
scrollTableData: [
{
'createBy': null,
'createTime': null,
'updateBy': null,
'updateTime': null,
'remark': null,
'objid': 463400,
'monitorId': 'E0004_3500',
'monitorName': '空压机',
'address': null,
'collectTime': '2024-12-04 12:56:33',
'recordTime': '2024-12-04T12:56:39.000+08:00',
'glys': 0.912,
'zxyg': 62.94,
'activePower': 0.00,
'reactivePower': 0.00,
'consumption': null,
'collectType': null,
'deptId': null,
'userId': null,
'monitorSubset': null,
'onlineState': null,
'startTime': null,
'endTime': null,
'vc': 229.90,
'vb': 230.10,
'va': 229.40,
'ia': 0.02,
'ib': 0.01,
'ic': 0.01
}
],
scrollTableData1: []
}
},
@ -156,322 +228,147 @@ export default {
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))
let data = [
{
'is_ammeter': '否',
'expendPercentage': '7%',
'monitorId': 'E0004_3400',
'monitorName': '折弯1',
'expend': 2.83,
'meterValue': 11.24,
'timeRange': '2024-11-04 至 2024-12-04'
},
{
'is_ammeter': '否',
'expendPercentage': '0%',
'monitorId': 'E0004_3300',
'monitorName': '折弯2',
'expend': 0.00,
'meterValue': 2.80,
'timeRange': '2024-11-04 至 2024-12-04'
},
{
'is_ammeter': '否',
'expendPercentage': '27%',
'monitorId': 'E0004_0400',
'monitorName': '激光下料',
'expend': 10.44,
'meterValue': 36.81,
'timeRange': '2024-11-04 至 2024-12-04'
},
{
'is_ammeter': '否',
'expendPercentage': '0%',
'monitorId': 'E0004_0200',
'monitorName': '烘干机',
'expend': 0.20,
'meterValue': 1.19,
'timeRange': '2024-11-04 至 2024-12-04'
},
{
'is_ammeter': '否',
'expendPercentage': '41%',
'monitorId': 'E0004_3500',
'monitorName': '空压机',
'expend': 15.53,
'meterValue': 62.93,
'timeRange': '2024-11-04 至 2024-12-04'
},
{
'is_ammeter': '否',
'expendPercentage': '22%',
'monitorId': 'E0004_0300',
'monitorName': '除尘系统',
'expend': 8.30,
'meterValue': 33.09,
'timeRange': '2024-11-04 至 2024-12-04'
}
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
}
]
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'
},
legend: {
reversed: true,
itemStyle: {
color: '#fff'
itemWidth: 12,
itemHeight: 10
// itemGap: 35
},
xAxis: {
type: 'category',
data: data.map(v => v.monitorName),
axisLine: {
lineStyle: {
color: 'white'
}
},
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 即可禁用图例点击事件
}
}
}
axisLabel: {
// interval: 0,
// rotate: 40,
textStyle: {
fontFamily: 'Microsoft YaHei'
}
},
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'
}
},
yAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: 'white'
}
},
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
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.3)'
}
},
legend: {
reversed: true,
axisLabel: {}
},
series: [
{
name: '消耗',
type: 'bar',
barWidth: '15%',
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 即可禁用图例点击事件
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#fccb05'
},
{
offset: 1,
color: '#f5804d'
}
}
}
}
},
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)
}
]
})
data: data.map(v => v.expend)
}
]
})
}
}
@ -571,7 +468,7 @@ export default {
.scrollTableItem {
display: inline-block;
width: calc(100% / 5);
width: calc(100% / 10);
text-align: center;
padding: 14px 0;
color: #4e99c5

Write Preview
Loading…
Cancel
Save