修改界面显示

master
夜笙歌 10 months ago
parent c9e49e47db
commit b849bf7710

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

File diff suppressed because it is too large Load Diff

@ -104,9 +104,9 @@ export default {
return { return {
title: [ title: [
'箱壳生产计划', '箱壳生产计划',
'小时入库统计', '内胆入库统计',
'库存状态', '胆壳库存统计',
'泡前库存统计', '泡前库存统计',
'箱体发泡实时状态', '箱体发泡实时状态',
], ],
meter:30, meter:30,
@ -140,7 +140,7 @@ export default {
differenceValue: 1000, differenceValue: 1000,
scrollTableOption: { scrollTableOption: {
step: 0.5, step: 0.5,
limitMoveNum: 5, limitMoveNum: 9999999999,
hoverStop: true, hoverStop: true,
direction: 1, direction: 1,
openWatch: true, openWatch: true,
@ -233,27 +233,6 @@ export default {
}, },
data: e.liner.ImportAndExportStatistics.y[0].data, 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({ this.$refs.chart2.setData({
@ -428,7 +407,7 @@ export default {
}) })
this.$refs.chart4.setData({ this.$refs.chart4.setData({
legend: { legend: {
data: ['运行中'], data: ['运行中夹具数量'],
right: 'center', right: 'center',
top: 0, top: 0,
textStyle: { textStyle: {

@ -553,7 +553,7 @@ export default {
fontSize: 0.75 * vw 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