修改界面显示

master
夜笙歌 1 year ago
parent c9e49e47db
commit b849bf7710

@ -5,77 +5,77 @@
"value2": "1000",
"value3": "1000",
"value4": "100%",
"value5": "2023-01-01"
"value5": "00:00:01"
},
{
"value1": "A-02",
"value2": "1000",
"value3": "1000",
"value4": "100%",
"value5": "2023-01-01"
"value5": "00:00:01"
},
{
"value1": "A-03",
"value2": "1000",
"value3": "1000",
"value4": "100%",
"value5": "2023-01-01"
"value5": "00:00:01"
},
{
"value1": "A-04",
"value2": "1000",
"value3": "1000",
"value4": "100%",
"value5": "2023-01-01"
"value5": "00:00:01"
},
{
"value1": "A-05",
"value2": "1000",
"value3": "1000",
"value4": "100%",
"value5": "2023-01-01"
"value5": "00:00:01"
},
{
"value1": "A-06",
"value2": "1000",
"value3": "1000",
"value4": "100%",
"value5": "2023-01-01"
"value5": "00:00:01"
},
{
"value1": "A-07",
"value2": "1000",
"value3": "1000",
"value4": "100%",
"value5": "2023-01-01"
"value5": "00:00:01"
},
{
"value1": "A-01",
"value2": "1000",
"value3": "1000",
"value4": "100%",
"value5": "2023-01-01"
"value5": "00:00:01"
},
{
"value1": "A-01",
"value2": "1000",
"value3": "1000",
"value4": "100%",
"value5": "2023-01-01"
"value5": "00:00:01"
},
{
"value1": "A-01",
"value2": "1000",
"value3": "1000",
"value4": "100%",
"value5": "2023-01-01"
"value5": "00:00:01"
},
{
"value1": "A-01",
"value2": "1000",
"value3": "1000",
"value4": "100%",
"value5": "2023-01-01"
"value5": "00:00:01"
}
],
"table2": [
@ -1494,16 +1494,16 @@
],
"ImportAndExportStatistics": {
"x": [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10"
"100",
"200",
"300",
"400",
"500",
"600",
"700",
"800",
"900",
"1000"
],
"y": [
{
@ -1620,7 +1620,7 @@
"C"
],
"y": {
"name": "运行中",
"name": "运行中夹具数量",
"data": [
5,
1,
@ -1628,5 +1628,200 @@
]
}
}
},
"caseShell2": {
"ImportAndExportStatistics": {
"x": [
"100",
"200",
"300",
"400",
"500",
"600",
"700",
"800",
"900",
"1000"
],
"y": [
{
"name": "前板入库数量",
"data": [
100,
300,
300,
100,
700,
145,
357,
146,
752,
283
]
},
{
"name": "后板入库数量",
"data": [
754,
157,
544,
745,
185,
385,
195,
689,
843,
683
]
}
]
},
"table1": [
{
"value1": "A-01",
"value2": "1000",
"value3": "1000",
"value31": "1000",
"value32": "",
"value4": "100%",
"value5": "00:00:01"
},
{
"value1": "A-02",
"value2": "1000",
"value3": "",
"value31": "1000",
"value32": "1000",
"value4": "100%",
"value5": "00:00:01"
},
{
"value1": "A-03",
"value2": "1000",
"value3": "1000",
"value31": "1000",
"value32": "",
"value4": "100%",
"value5": "00:00:01"
},
{
"value1": "A-04",
"value2": "1000",
"value3": "",
"value31": "1000",
"value32": "1000",
"value4": "100%",
"value5": "00:00:01"
},
{
"value1": "A-05",
"value2": "1000",
"value3": "",
"value31": "1000",
"value32": "1000",
"value4": "100%",
"value5": "00:00:01"
},
{
"value1": "A-06",
"value2": "1000",
"value3": "",
"value31": "1000",
"value32": "1000",
"value4": "100%",
"value5": "00:00:01"
},
{
"value1": "A-07",
"value2": "1000",
"value3": "",
"value31": "1000",
"value32": "1000",
"value4": "100%",
"value5": "00:00:01"
},
{
"value1": "A-01",
"value2": "1000",
"value3": "1000",
"value31": "1000",
"value32": "",
"value4": "100%",
"value5": "00:00:01"
},
{
"value1": "A-01",
"value2": "1000",
"value3": "",
"value31": "1000",
"value32": "1000",
"value4": "100%",
"value5": "00:00:01"
},
{
"value1": "A-01",
"value2": "1000",
"value3": "1000",
"value31": "1000",
"value32": "",
"value4": "100%",
"value5": "00:00:01"
},
{
"value1": "A-01",
"value2": "1000",
"value3": "",
"value31": "1000",
"value32": "1000",
"value4": "100%",
"value5": "00:00:01"
}
],
"chart2": {
"x": [
"A-01",
"A-02",
"A-03",
"A-04",
"A-05",
"A-06",
"A-07",
"A-08",
"A-09",
"A-010"
],
"y": [
{
"name": "前板",
"data": [
125,
809,
900,
846,
451,
851,
385,
655,
587,
636
]
},
{
"name": "后板",
"data": [
922,
580,
253,
630,
555,
177,
389,
324,
831,
681
]
}
]
}
}
}

@ -1,6 +1,6 @@
<template>
<div class="app-container">
<div class="headTitle">箱壳后板成型线可视化平台</div>
<div class="headTitle">箱壳前后板自动成型数据监控平台</div>
<div class="topNum team">{{ team }}</div>
<div class="topNum planNum">{{ planNum }}</div>
<div class="topNum practicalNum">{{ practicalNum }}</div>
@ -57,19 +57,19 @@
</div>
<div
class="scrollTableItem">
{{ item.value3 }}
{{ item.value31 }}
</div>
<div
class="scrollTableItem">
{{ item.value4 }}
class="scrollTableItem" :style="'color:'+(item.value3>0?'green':'#0000')">
{{ item.value3 }}
</div>
<div
class="scrollTableItem">
{{ item.value5 }}
class="scrollTableItem" :style="'color:'+(item.value32>0?'green':'#0000')">
{{ item.value32 }}
</div>
<div
class="scrollTableItem">
{{ item.value5 }}
{{ item.value4 }}
</div>
<div
class="scrollTableItem">
@ -92,6 +92,7 @@
<Chart ref="chart4"></Chart>
</div>
<div class="inventoryInfo">内胆库剩余:{{ linerNum }}% 箱壳库剩余:{{ caseNum }}%</div>
<div class="inventoryInfo2">前板总产量:{{ frontNum }} 后板总产量:{{ laterNum }}</div>
</div>
</template>
@ -112,11 +113,13 @@ export default {
linerNum: 50,
caseNum: 44,
meter: 30,
frontNum: 100,
laterNum: 100,
title: [
'工单计划',
'小时统计',
'库存统计',
'型号统计',
'小时产量统计',
'壳胆库存统计',
'生产型号统计',
'发泡夹具状态',
],
titlePosition: [
@ -147,7 +150,7 @@ export default {
differenceValue: 1000,
scrollTableOption: {
step: 0.5, //
limitMoveNum: 5, // this.dataList.length
limitMoveNum: 9999999999999, // this.dataList.length
hoverStop: true, // stop
direction: 1, // 0 1 2 3
openWatch: true, // dom
@ -161,7 +164,7 @@ export default {
},
mounted() {
getData().then(e => {
this.scrollTableData = e.table1
this.scrollTableData = e.caseShell2.table1
this.$refs.chart1.setData({
tooltip: {
trigger: "axis",
@ -178,7 +181,7 @@ export default {
containLabel: true,
},
legend: {
data: e.liner.ImportAndExportStatistics.y.map(val => val.name),
data: e.caseShell2.ImportAndExportStatistics.y.map(val => val.name),
right: 'center',
top: 0,
textStyle: {
@ -190,7 +193,7 @@ export default {
},
xAxis: {
type: "category",
data: e.liner.ImportAndExportStatistics.x,
data: e.caseShell2.ImportAndExportStatistics.x,
axisLine: {
lineStyle: {
color: "white",
@ -220,7 +223,7 @@ export default {
},
series: [
{
name: e.liner.ImportAndExportStatistics.y[0].name,
name: e.caseShell2.ImportAndExportStatistics.y[0].name,
type: "bar",
barWidth: "30%",
barMaxWidth: 50,
@ -238,10 +241,10 @@ export default {
]),
},
},
data: e.liner.ImportAndExportStatistics.y[0].data,
data: e.caseShell2.ImportAndExportStatistics.y[0].data,
},
{
name: e.liner.ImportAndExportStatistics.y[1].name,
name: e.caseShell2.ImportAndExportStatistics.y[1].name,
type: "bar",
barWidth: "30%",
barMaxWidth: 50,
@ -259,7 +262,7 @@ export default {
]),
},
},
data: e.liner.ImportAndExportStatistics.y[1].data,
data: e.caseShell2.ImportAndExportStatistics.y[1].data,
},
],
})
@ -379,9 +382,20 @@ export default {
top: 20,
containLabel: true,
},
legend: {
data: e.caseShell2.chart2.y.map(val => val.name),
right: 'center',
top: 0,
textStyle: {
color: "#fff",
},
itemWidth: 12,
itemHeight: 10,
// itemGap: 35
},
xAxis: {
type: "category",
data: e.liner.inventoryStatistics.x,
data: e.caseShell2.chart2.x,
axisLine: {
lineStyle: {
color: "white",
@ -411,7 +425,7 @@ export default {
},
series: [
{
name: e.liner.inventoryStatistics.y.name,
name: e.caseShell2.chart2.y[0].name,
type: "bar",
barWidth: "30%",
barMaxWidth: 50,
@ -420,22 +434,43 @@ export default {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#4adfff",
color: "#0bca98",
},
{
offset: 1,
color: "#3d7aff",
color: "#16a144",
},
]),
},
},
data: e.caseShell2.chart2.y[0].data,
},
{
name: e.caseShell2.chart2.y[1].name,
type: "bar",
barWidth: "30%",
barMaxWidth: 50,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#0f8ad7",
},
{
offset: 1,
color: "#0b30d9",
},
]),
},
},
data: e.liner.inventoryStatistics.y.data,
data: e.caseShell2.chart2.y[1].data,
},
],
})
this.$refs.chart4.setData({
legend: {
data: ['运行中'],
data: ['运行中夹具数量'],
right: 'center',
top: 0,
textStyle: {
@ -638,6 +673,15 @@ export default {
color: #fff;
letter-spacing: 1px;
}
.inventoryInfo2{
position: absolute;
transform: translateY(-50%);
font-size: 0.9vw;
top: 70.4%;
left: 45%;
color: #fff;
letter-spacing: 1px;
}
.meter {
position: absolute;

File diff suppressed because it is too large Load Diff

@ -104,9 +104,9 @@ export default {
return {
title: [
'箱壳生产计划',
'小时入库统计',
'库存状态',
'泡前库存统计',
'内胆入库统计',
'胆壳库存统计',
'泡前库存统计',
'箱体发泡实时状态',
],
meter:30,
@ -140,7 +140,7 @@ export default {
differenceValue: 1000,
scrollTableOption: {
step: 0.5,
limitMoveNum: 5,
limitMoveNum: 9999999999,
hoverStop: true,
direction: 1,
openWatch: true,
@ -233,27 +233,6 @@ export default {
},
data: e.liner.ImportAndExportStatistics.y[0].data,
},
{
name: e.liner.ImportAndExportStatistics.y[1].name,
type: "bar",
barWidth: "30%",
barMaxWidth: 50,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#4adfff",
},
{
offset: 1,
color: "#3d7aff",
},
]),
},
},
data: e.liner.ImportAndExportStatistics.y[1].data,
},
],
})
this.$refs.chart2.setData({
@ -428,7 +407,7 @@ export default {
})
this.$refs.chart4.setData({
legend: {
data: ['运行中'],
data: ['运行中夹具数量'],
right: 'center',
top: 0,
textStyle: {

@ -553,7 +553,7 @@ export default {
fontSize: 0.75 * vw
},
},
data: [12, 20, 11, 30, 14, 80, 50],
data: [12, 20, 11, 30, 14, 80, 50].sort().reverse(),
},
],
})

Loading…
Cancel
Save