修改界面显示

master
夜笙歌 12 months ago
parent 97071f801a
commit 0feaab957a

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1000 KiB

After

Width:  |  Height:  |  Size: 948 KiB

@ -9,7 +9,7 @@
:style="'top:' + (titlePosition[k] && titlePosition[k].top || 0) + '%;left:' + (titlePosition[k] && titlePosition[k].left || 0) + '%'"> :style="'top:' + (titlePosition[k] && titlePosition[k].top || 0) + '%;left:' + (titlePosition[k] && titlePosition[k].left || 0) + '%'">
{{ i }} {{ i }}
</div> </div>
<div class="meter">平均节拍{{ meter }}</div> <div class="meter">平均节拍{{ meter }} /</div>
<div class="scrollTable"> <div class="scrollTable">
<div style="background-color: #094170"> <div style="background-color: #094170">
@ -95,11 +95,11 @@ export default {
frontNum: 100, frontNum: 100,
laterNum: 100, laterNum: 100,
title: [ title: [
'生计划', '生计划',
'小时产量统计', '小时产量统计',
'壳胆库存统计', '壳胆库存统计',
'生产型号统计', '生产型号统计',
'发泡夹具状态', '箱体发泡实时状态',
], ],
titlePosition: [ titlePosition: [
{ {

@ -4,6 +4,10 @@
<div class="topNum planNum">{{ planNum }}</div> <div class="topNum planNum">{{ planNum }}</div>
<div class="topNum practicalNum">{{ practicalNum }}</div> <div class="topNum practicalNum">{{ practicalNum }}</div>
<div class="topNum differenceValue">{{ differenceValue }}</div> <div class="topNum differenceValue">{{ differenceValue }}</div>
<div class="title" v-for="(i,k) in title"
:style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
{{ i }}
</div>
<div class="supplementInfo">注射压力标准范围10.0-12.0Mpa AB组份枪头压力差1Mpa</div> <div class="supplementInfo">注射压力标准范围10.0-12.0Mpa AB组份枪头压力差1Mpa</div>
<div class="supplementInfo1">发泡料温度标准范围:18.0-24.0</div> <div class="supplementInfo1">发泡料温度标准范围:18.0-24.0</div>
@ -463,6 +467,40 @@ export default {
planNum: 1000, planNum: 1000,
practicalNum: 1000, practicalNum: 1000,
differenceValue: 1000, differenceValue: 1000,
title: [
'生产计划',
'生产统计',
'生产统计数据',
'发泡注射压力监控',
'发泡料注料温度健康',
'泡前库库存',
],
titlePosition: [
{
top: 11.5,
left: 5.5
},
{
top: 39.2,
left: 5.5
},
{
top: 62.8,
left: 5.5
},
{
top: 11.5,
left: 75
},
{
top: 39.3,
left: 75
},
{
top: 62.9,
left: 75
},
],
scrollTableOption: { scrollTableOption: {
step: 0.5, // step: 0.5, //
limitMoveNum: 5, // this.dataList.length limitMoveNum: 5, // this.dataList.length
@ -958,8 +996,15 @@ export default {
}; };
</script> </script>
<style scoped> <style scoped>
.title {
position: absolute;
transform: translateY(-50%);
color: #dddddd;
font-size: 1vw;
letter-spacing: 2px;
}
.app-container { .app-container {
background-image: url("../../../assets/board/foaming.jpg"); background-image: url("../../../assets/board/foaming1.jpg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 100%; width: 100%;

@ -4,16 +4,23 @@
<div class="topNum planNum">{{ planNum }}</div> <div class="topNum planNum">{{ planNum }}</div>
<div class="topNum practicalNum">{{ practicalNum }}</div> <div class="topNum practicalNum">{{ practicalNum }}</div>
<div class="topNum differenceValue">{{ differenceValue }}</div> <div class="topNum differenceValue">{{ differenceValue }}</div>
<div class="title" v-for="(i,k) in title"
:style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
{{ i }}
</div>
<div style="position: absolute; top: 23%;left: 60%;width:10vw;text-align:center;color: #fff;font-size: 1vw;line-height: 1.5vw">
<div>生产节拍</div>
<div>线体1圈 1s</div>
<div>台车1位 1s</div>
</div>
<div class="supplementInfo">注射压力标准范围10.0-12.0Mpa AB组份枪头压力差1Mpa</div> <div class="supplementInfo">注射压力标准范围10.0-12.0Mpa AB组份枪头压力差1Mpa</div>
<div class="supplementInfo1">发泡料温度标准范围:18.0-24.0</div> <div class="supplementInfo1">发泡料温度标准范围:18.0-24.0</div>
<div style="position: absolute;top: 62%; left: 19%;color:#FFF">正在生产 <div <div style="position: absolute;top: 62%; left: 40%;color:#FFF">
style="width: 12px;height: 12px;background-color: #5dfd36;display: inline-block;border-radius: 50%;"> <div style="width: 12px;height: 12px;background-color: #5dfd36;display: inline-block;margin: 0 8px;"></div> 启用
</div> 停机<div <div style="width: 12px;height: 12px;background-color: #ffffff88;display: inline-block;margin: 0 8px;"></div>停用
style="width: 12px;height: 12px;background-color: #ffffff88;display: inline-block;border-radius: 50%;"></div> <div style="width: 12px;height: 12px;background-color: #ff0000;display: inline-block;margin: 0 8px;"></div> 注料位
注料位置台车<div style="width: 12px;height: 12px;background-color: #ff0000;display: inline-block;border-radius: 50%;"> <div style="width: 12px;height: 12px;background-color: #FF8000;display: inline-block;margin: 0 8px;"></div>出模位
</div> 出模位置台车<div
style="width: 12px;height: 12px;background-color: #FF8000;display: inline-block;border-radius: 50%;"></div>
</div> </div>
<div class="scrollTable"> <div class="scrollTable">
@ -736,7 +743,7 @@
<!-- </div>--> <!-- </div>-->
</div> </div>
<div class="tableOne"> <div class="tableOne">
<div style="height: 9%;line-height:2.6vh;color: #fff;text-align: center;background-color: #38a2de"> <div style="height: 9%;line-height:2.6vh;color: #fff;text-align: center;background-color: #38a2de ">
<div style="width: 33%;display: inline-block">台车号</div> <div style="width: 33%;display: inline-block">台车号</div>
<div style="width: 33%;display: inline-block">型号</div> <div style="width: 33%;display: inline-block">型号</div>
<div style="width: 33%;display: inline-block">产量</div> <div style="width: 33%;display: inline-block">产量</div>
@ -804,6 +811,40 @@ export default {
name: "Liner", name: "Liner",
data() { data() {
return { return {
title: [
'箱体队列',
'箱体队列统计',
'生产统计数据',
'发泡注射压力监控',
'发泡料注料温度健康',
'门体发泡生产统计',
],
titlePosition: [
{
top: 11.5,
left: 5.5
},
{
top: 39.2,
left: 5.5
},
{
top: 62.8,
left: 5.5
},
{
top: 11.5,
left: 75
},
{
top: 39.3,
left: 75
},
{
top: 62.9,
left: 75
},
],
show: 0, show: 0,
planNum: 1000, planNum: 1000,
practicalNum: 1000, practicalNum: 1000,
@ -1484,4 +1525,11 @@ export default {
width: 16.8%; width: 16.8%;
height: 29%; height: 29%;
} }
.title {
position: absolute;
transform: translateY(-50%);
color: #dddddd;
font-size: 1vw;
letter-spacing: 2px;
}
</style> </style>

@ -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>
@ -72,7 +72,7 @@
</div> </div>
</vue-seamless-scroll> </vue-seamless-scroll>
</div> </div>
<div class="meter">平均节拍{{meter}}</div> <div class="meter">平均节拍{{meter}} /</div>
<div class="chart1"> <div class="chart1">
<Chart ref="chart1"></Chart> <Chart ref="chart1"></Chart>
</div> </div>
@ -171,17 +171,6 @@ export default {
top: 20, top: 20,
containLabel: true, containLabel: true,
}, },
legend: {
data: e.liner.ImportAndExportStatistics.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.ImportAndExportStatistics.x, data: e.liner.ImportAndExportStatistics.x,

Loading…
Cancel
Save