|
|
@ -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;
|
|
|
|