yinq
/
aucma-mes-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改界面显示

Browse Source
master
夜笙歌 12 months ago
parent 0feaab957a
commit fdd90fac02
6 changed files with 640 additions and 134 deletions
Show Stats Download Patch File Download Diff File

BIN
src/assets/board/logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

11
src/layout/boardIndex.vue
Unescape Escape View File

@ -3,6 +3,7 @@
<router-view></router-view>
<div class="time" id="time">{{ time }}</div>
<div class="date" id="date">{{ date }}</div>
<div class="logo"></div>
</div>
</template>
@ -55,4 +56,14 @@ export default {
top: 3.2%;
left: 94.1%;
}
.logo{
background-image: url("../assets/board/logo.png");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 8vw;
height:4vw;
position: absolute;
top: -1%;
left: 1%;
}
</style>

10
src/views/board/foaming/index.vue
Unescape Escape View File

@ -1,6 +1,6 @@
<template>
<div class="app-container">
<div class="headTitle">箱壳发泡生产数据监控平台</div>
<div class="headTitle">箱体发泡生产数据监控平台</div>
<div class="topNum planNum">{{ planNum }}</div>
<div class="topNum practicalNum">{{ practicalNum }}</div>
<div class="topNum differenceValue">{{ differenceValue }}</div>
@ -8,6 +8,12 @@
:style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
{{ i }}
</div>
<div style="position: absolute; top: 23%;left: 30%;width:10vw;color: #fff;font-size: 0.8vw;line-height: 1.5vw">
<div>发泡机 - 运行状态：</div>
</div>
<div style="position: absolute; top: 23%;left: 55%;width:10vw;color: #fff;font-size: 0.8vw;line-height: 1.5vw">
<div>发泡机 - 运行状态：</div>
</div>
<div class="supplementInfo">注射压力标准范围：10.0-12.0Mpa A、B组份枪头压力差＜1Mpa</div>
<div class="supplementInfo1">发泡料温度标准范围:18.0-24.0℃</div>
@ -472,7 +478,7 @@ export default {
'生产统计',
'生产统计数据',
'发泡注射压力监控',
'发泡料注料温度健康',
'发泡料注料温度监控',
'泡前库库存',
],
titlePosition: [

31
src/views/board/foaming/index2.vue
Unescape Escape View File

@ -8,8 +8,11 @@
: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 style="position: absolute; top: 23%;left: 30%;width:10vw;color: #fff;font-size: 0.8vw;line-height: 1.5vw">
<div>发泡机 - 运行状态：</div>
</div>
<div style="position: absolute; top: 23%;left: 60%;width:10vw;color: #fff;font-size: 0.8vw;line-height: 1.5vw">
<div>生产节拍：</div>
<div>线体1圈 1s</div>
<div>台车1位 1s</div>
</div>
@ -17,10 +20,10 @@
<div class="supplementInfo">注射压力标准范围：10.0-12.0Mpa A、B组份枪头压力差＜1Mpa</div>
<div class="supplementInfo1">发泡料温度标准范围:18.0-24.0℃</div>
<div style="position: absolute;top: 62%; left: 40%;color:#FFF">
<div style="width: 12px;height: 12px;background-color: #5dfd36;display: inline-block;margin: 0 8px;"></div> 启用
<div style="width: 12px;height: 12px;background-color: #ffffff88;display: inline-block;margin: 0 8px;"></div>停用
<div style="width: 12px;height: 12px;background-color: #1be409;display: inline-block;margin: 0 8px;"></div> 启用
<div style="width: 12px;height: 12px;background-color: #8a8e96;display: inline-block;margin: 0 8px;"></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: #FF8000;display: inline-block;margin: 0 8px;"></div>出模位
<div style="width: 12px;height: 12px;background-color: #ff8000;display: inline-block;margin: 0 8px;"></div>出模位
</div>
<div class="scrollTable">
@ -743,52 +746,52 @@
<!-- </div>-->
</div>
<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: #38a2decc ">
<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>
<div v-for="i in 10"
:style="'height: 9%;line-height:2.6vh;color: #000;text-align: center;background-color:' + (i === 2 ? '#ffffff88' : '#5dfd36')">
:style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color: '+ (i === 2 ? '#bed4ce' : '#1be409')+';text-align: center;background-color:' + (i === 2 ? '#8a8e9688' : '#1be40944')">
<div style="width: 33%;display: inline-block">{{ i }}</div>
<div style="width: 33%;display: inline-block">487JFY</div>
<div style="width: 33%;display: inline-block">15-15</div>
</div>
</div>
<div class="tableTwo">
<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: #38a2decc">
<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>
<div v-for="i in 10"
:style="'height: 9%;line-height:2.6vh;color: #000;text-align: center;background-color:' + (i === 2 ? '#ff0000' : '#5dfd36')">
:style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color:'+ (i === 2 ? '#ff5959' : '#1be409')+';text-align: center;background-color:' + (i === 2 ? '#ff000088' : '#1be40944')">
<div style="width: 33%;display: inline-block">{{ i }}</div>
<div style="width: 33%;display: inline-block">487JFY</div>
<div style="width: 33%;display: inline-block">15-15</div>
</div>
</div>
<div class="tableThree">
<div style="height: 9%;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>
<div v-for="i in 10"
:style="'height: 9%;color: #000;text-align: center;background-color:' + (i === 2 ? '#FF8000' : '#5dfd36')">
:style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color:'+ (i === 2 ? '#ffb769' : '#1be409')+';text-align: center;background-color:' + (i === 2 ? '#ff800088' : '#1be40944')">
<div style="width: 33%;display: inline-block">{{ i }}</div>
<div style="width: 33%;display: inline-block">487JFY</div>
<div style="width: 33%;display: inline-block">15-15</div>
</div>
</div>
<div class="tableFour">
<div style="height: 9%;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>
<div v-for="i in 10"
:style="'height: 9%;color: #000;text-align: center;background-color:' + (i === 2 ? '#ffffff88' : '#5dfd36')">
:style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color:'+ (i === 2 ? '#bed4ce' : '#1be409')+';text-align: center;background-color:' + (i === 2 ? '#8a8e9688' : '#1be40944')">
<div style="width: 33%;display: inline-block">{{ i }}</div>
<div style="width: 33%;display: inline-block">487JFY</div>
<div style="width: 33%;display: inline-block">15-15</div>
@ -816,7 +819,7 @@ export default {
'箱体队列统计',
'生产统计数据',
'发泡注射压力监控',
'发泡料注料温度健康',
'发泡料注料温度监控',
'门体发泡生产统计',
],
titlePosition: [

79
src/views/board/week/index.vue
Unescape Escape View File

@ -10,14 +10,14 @@
<Chart ref="manpowerAttendance"></Chart>
</div>
<div class="classSelect">
<el-select v-model="selectValue" placeholder="请选择">
<el-option
v-for="item in selectOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button>产线1</el-button>
<el-button>产线2</el-button>
<el-button>合计</el-button>
<!-- <el-radio v-model="selectValue" label="1">产线1</el-radio>-->
<!-- <el-radio v-model="selectValue" label="2">产线2</el-radio>-->
<!-- <el-radio v-model="selectValue" label="3">合计</el-radio>-->
</div>
<!--IQC-->
@ -30,17 +30,14 @@
型号
</div>
<div class="scrollTableItem" style="font-weight: bold;">
订单数
计划数量
</div>
<div class="scrollTableItem" style="font-weight: bold;">
完成数
完成数量
</div>
<div class="scrollTableItem" style="font-weight: bold;">
差异值
</div>
<div class="scrollTableItem" style="font-weight: bold;">
清单率
</div>
</div>
<vue-seamless-scroll
:class-option="scrollTableOption"
@ -74,10 +71,6 @@
class="scrollTableItem">
{{ item.value5 }}
</div>
<div
class="scrollTableItem">
{{ item.value6 }}
</div>
</div>
</div>
</vue-seamless-scroll>
@ -116,6 +109,7 @@
<div v-html="safeDayHtml"></div>
<div class="totalNum">总数：{{ totalNum }}</div>
<div class="info1">订单数:1000 完成数:1000 差异值:0 清单率:100%</div>
</div>
</template>
@ -133,21 +127,7 @@ export default {
name: "Liner",
data() {
return {
selectOptions: [
{
value: '1',
label: '老线'
},
{
value: '2',
label: '新线'
},
{
value: '3',
label: '合计'
},
],
selectValue: '2',
selectValue: '1',
title: [
'产量统计',
'三日订单执行情况',
@ -601,7 +581,7 @@ export default {
b: {
color: "#fff",
align: "center",
fontSize: 0.5 * vw,
fontSize: 0.9 * vw,
},
},
formatter: function (params) {
@ -680,7 +660,7 @@ export default {
b: {
color: "#fff",
align: "center",
fontSize: 0.5 * vw,
fontSize: 0.9 * vw,
},
},
formatter: function (params) {
@ -759,7 +739,7 @@ export default {
b: {
color: "#fff",
align: "center",
fontSize: 0.5 * vw,
fontSize: 0.9 * vw,
},
},
formatter: function (params) {
@ -838,7 +818,7 @@ export default {
b: {
color: "#fff",
align: "center",
fontSize: 0.5 * vw,
fontSize: 0.9 * vw,
},
},
formatter: function (params) {
@ -917,7 +897,7 @@ export default {
b: {
color: "#fff",
align: "center",
fontSize: 0.5 * vw,
fontSize: 0.9 * vw,
},
},
formatter: function (params) {
@ -996,7 +976,7 @@ export default {
b: {
color: "#fff",
align: "center",
fontSize: 0.5 * vw,
fontSize: 0.9 * vw,
},
},
formatter: function (params) {
@ -1179,7 +1159,7 @@ export default {
text-overflow: ellipsis;
text-align: center;
display: inline-block;
width: calc(100% / 7);
width: calc(100% / 6);
}
.totalNum {
@ -1191,10 +1171,25 @@ export default {
font-size: 0.8vw;
}
.info1 {
position: absolute;
top: 11.5%;
left: 44.5%;
transform: translateY(-50%);
color: #fff;
font-size: 0.8vw;
}
.classSelect {
position: absolute;
top: 6%;
left: 4%;
width: 5vw;
top: 1%;
left: 15%;
}
.el-radio{
color: #fff !important;
}
.el-button{
background:#00000000 !important;
color: #fff !important;
}
</style>

515
src/views/model/model.vue
Unescape Escape View File

@ -1,5 +1,6 @@
<template>
<div class="app-container">
<div class="test">
<div id="container" class="container"></div>
<div class="tool">
<el-row>
@ -28,7 +29,7 @@
</div>
</el-col>
<el-col :span="3">
<div class="toolItem" @click="click1('工艺流程')">
<div class="toolItem" @click="click2()">
<i class="el-icon-s-tools" style="font-size:2.2vw"></i>
<div class="grid-content bg-purple-light">工艺流程</div>
</div>
@ -66,6 +67,22 @@
<transition name="children">
<production :exit="exit" v-if="show === 'production'"/>
</transition>
<div class="flowChart" v-show="show1">
<div class="flowItem" v-for="(i,k) in flowItemOptions" @click="setNowFlowIndex(k)"
:class="nowFlowIndex === k ? 'wireAnimation' : ''"
:style="`width:${i.width}vw;height:${i.height}vw;top:${i.top}%;left:${i.left}%;background: linear-gradient(to bottom, ${nowFlowIndex === k ? '#00911F': i.bgColor+'66'}, ${nowFlowIndex === k ? '#00370C': i.bgColor});z-index:2;`">
<span>{{ i.text }}</span>
</div>
<div class="wire" v-for="i in wireOptions"
:style="`width:${i.width}vw;height:${i.height}vw;top:${i.top}%;left:${i.left}%;background-color:${i.bgColor};z-index:0;`"></div>
<div class="wire1" v-for="i in wireOptions1"
:style="`width:${i.width}vw;height:${i.height}vw;top:${i.top}%;left:${i.left}%;background-color:${i.bgColor};z-index:0;`"></div>
<div class="arrows" v-for="i in arrowsOptions"
:style="`top:${i.top}%;left:${i.left}%;z-index:1;`"></div>
<div class="arrows1"
style="top: 44.3%;left: 53.7%;z-index: 1;"></div>
</div>
</div>
</div>
</template>
@ -100,6 +117,394 @@ export default {
return {
viewer: null,
show: '',
show1: false,
nowFlowIndex: null,
flowItemOptions: [
// 一层
{
top: 2,
left: 1,
width: 6,
height: 4,
bgColor: '#00aa00',
text: '内胆自助成型'
},
{
top: 2,
left: 9.3,
width: 6,
height: 4,
bgColor: '#00aa00',
text: '内胆预装'
},
{
top: 2,
left: 17.6,
width: 6,
height: 4,
bgColor: '#00aa00',
text: '内胆集存库'
},
// 二层
{
top: 35,
left: 1,
width: 6,
height: 4,
bgColor: '#00aa00',
text: '箱壳自动成型'
},
{
top: 35,
left: 9.3,
width: 6,
height: 4,
bgColor: '#00aa00',
text: '箱壳预装'
},
{
top: 35,
left: 17.6,
width: 6,
height: 4,
bgColor: '#00aa00',
text: '箱壳集存库'
},
// 一二合
{
top: 17,
left: 25.9,
width: 6,
height: 4,
bgColor: '#00aa00',
text: '壳胆组装'
},
{
top: 17,
left: 34.2,
width: 6,
height: 4,
bgColor: '#00aa00',
text: '箱体预装'
},
{
top: 17,
left: 42.5,
width: 6,
height: 4,
bgColor: '#00aa00',
text: '箱体发泡'
},
{
top: 17,
left: 50.8,
width: 6,
height: 4,
bgColor: '#00aa00',
text: '门体安装'
},
{
top: 17,
left: 59.1,
width: 6,
height: 4,
bgColor: '#00aa00',
text: '发泡箱体库'
},
{
top: 17,
left: 67.4,
width: 6,
height: 4,
bgColor: '#00aa00',
text: '焊接'
},
{
top: 17,
left: 75.7,
width: 6,
height: 4,
bgColor: '#00aa00',
text: '抽空灌注'
},
{
top: 17,
left: 84,
width: 6,
height: 4,
bgColor: '#00aa00',
text: '性能检测'
},
{
top: 17,
left: 92.3,
width: 6,
height: 4,
bgColor: '#00aa00',
text: '包装入库'
},
// 三层
{
top: 68,
left: 1,
width: 6,
height: 4,
bgColor: '#00aa00',
text: '门壳自动成型'
},
{
top: 68,
left: 17.6,
width: 6,
height: 4,
bgColor: '#00aa00',
text: '门壳预装'
},
{
top: 68,
left: 34.2,
width: 6,
height: 4,
bgColor: '#00aa00',
text: '门体发泡'
},
{
top: 68,
left: 50.8,
width: 6,
height: 4,
bgColor: '#00aa00',
text: '箱、门匹配输送'
}
],
wireOptions: [
// 一层
{
top: 15,
left: 7,
width: 2,
height: 0.25,
bgColor: '#4472c4',
},
{
top: 15,
left: 15.3,
width: 2,
height: 0.25,
bgColor: '#4472c4',
},
{
top: 15,
left: 23.6,
width: 1,
height: 0.25,
bgColor: '#4472c4',
},
// 二层
{
top: 48,
left: 7,
width: 2,
height: 0.25,
bgColor: '#4472c4',
},
{
top: 48,
left: 15.3,
width: 2,
height: 0.25,
bgColor: '#4472c4',
},
{
top: 48,
left: 23.6,
width: 1,
height: 0.25,
bgColor: '#4472c4',
},
// 一二合
{
top: 31,
left: 24.6,
width: 1,
height: 0.25,
bgColor: '#4472c4',
},
{
top: 31,
left: 31.9,
width: 2,
height: 0.25,
bgColor: '#4472c4',
},
{
top: 31,
left: 40.2,
width: 2,
height: 0.25,
bgColor: '#4472c4',
},
{
top: 31,
left: 48.5,
width: 2,
height: 0.25,
bgColor: '#4472c4',
},
{
top: 31,
left: 56.8,
width: 2,
height: 0.25,
bgColor: '#4472c4',
},
{
top: 31,
left: 65.1,
width: 2,
height: 0.25,
bgColor: '#4472c4',
},
{
top: 31,
left: 73.4,
width: 2,
height: 0.25,
bgColor: '#4472c4',
},
{
top: 31,
left: 81.7,
width: 2,
height: 0.25,
bgColor: '#4472c4',
},
{
top: 31,
left: 90,
width: 2,
height: 0.25,
bgColor: '#4472c4',
},
// 三层
{
top: 80,
left: 7,
width: 10,
height: 0.25,
bgColor: '#4472c4',
},
{
top: 80,
left: 23.6,
width: 10,
height: 0.25,
bgColor: '#4472c4',
},
{
top: 80,
left: 40.2,
width: 10,
height: 0.25,
bgColor: '#4472c4',
},
],
wireOptions1: [
{
top: 15,
left: 24.6,
width: 0.25,
height: 5,
bgColor: '#4472c4',
},
{
top: 46.1,
left: 54.2,
width: 0.25,
height: 3.3,
bgColor: '#4472c4',
},
],
arrowsOptions: [
// 一层
{
top: 13,
left: 8.5,
},
{
top: 13,
left: 16.8,
},
// 二层
{
top: 46.3,
left: 8.5,
},
{
top: 46.3,
left: 16.8,
},
// 一二合
{
top: 29.3,
left: 25.1,
},
{
top: 29.3,
left: 33.4,
},
{
top: 29.3,
left: 41.7,
},
{
top: 29.3,
left: 50,
},
{
top: 29.3,
left: 58.3,
},
{
top: 29.3,
left: 66.6,
},
{
top: 29.3,
left: 74.9,
},
{
top: 29.3,
left: 83.2,
},
{
top: 29.3,
left: 91.5,
},
// 三层
{
top: 78.2,
left: 16.8,
},
{
top: 78.2,
left: 33.4,
},
{
top: 78.2,
left: 50,
},
]
}
},
async mounted() {
@ -109,11 +514,6 @@ export default {
appsecret: 'rXmhoLAiOPNKzbl7g2qxCV8tFwRdYuZM'
}
const viewer = new AMRT.Viewer('container', param)
console.log(viewer)
console.log(viewer.core)
console.log(viewer.core?.Object3D)
// const gui = new dat.GUI()
// console.log(gui)
let num = 0
let modelArr = [
// '1720315475507941376',
@ -147,8 +547,8 @@ export default {
// '1730412089115283456',
// '1730412127476387840',
// '1730412170082127872',
'1730434866786471936',
'1730434916656746496',
// '1730434866786471936',
// '1730434916656746496',
// '1730412271693336576',
// '1730412211886755840',
@ -204,9 +604,20 @@ export default {
methods: {
click1(e) {
this.show = e
this.show1 = false
},
click2() {
if (this.show1 === false) {
this.show1 = true
} else {
this.show1 = false
}
},
exit() {
this.show = ''
},
setNowFlowIndex(k) {
this.nowFlowIndex = k
}
}
};
@ -219,16 +630,16 @@ export default {
.container {
width: 100vw;
height: 100vh
height: 33.33vw;
//height: 100vh;
}
.tool {
position: absolute;
width: 60%;
height: 20vh;
top: 80%;
top: 98%;
left: 50%;
transform: translateX(-50%);
transform: translate(-50%, -100%);
text-align: center;
font-size: 1vw;
@ -243,6 +654,14 @@ export default {
overflow: hidden;
}
.test {
top: 20%;
width: 100vw;
height: 33.33vw;
//height: 100vh;
position: absolute;
}
.children-enter-active {
animation: children-in 1s;
}
@ -261,4 +680,76 @@ export default {
left: 0;
}
}
.flowChart {
width: 96vw;
height: 15vw;
position: absolute;
transform: translateX(-50%);
left: 50%;
top: 1%;
.flowItem {
position: absolute;
border-radius: 0.5vw;
text-align: center;
color: #fff;
font-size: 1.05vw;
border: 0.25vw solid #fff;
span {
display: inline-block;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
width: 90%;
}
}
.wire {
position: absolute;
border-radius: 0.15vw;
}
.wire1 {
position: absolute;
transform: translateX(-100%);
border-radius: 0.15vw;
}
.arrows {
position: absolute;
width: 0;
height: 0;
border-top: 0.4vw solid transparent;
border-bottom: 0.4vw solid transparent;
border-left: 0.8vw solid #4472c4;
}
.arrows1 {
position: absolute;
width: 0;
height: 0;
border-left: 0.4vw solid transparent;
border-right: 0.4vw solid transparent;
border-bottom: 0.8vw solid #4472c4;
}
.wireAnimation {
animation: 2s linear 0s infinite normal none running current_winkle;
}
@keyframes current_winkle {
0% {
border: 0.25vw solid #fff;
}
50% {
border: 0.25vw solid #F70E0E;
}
100% {
border: 0.25vw solid #fff;
}
}
}
</style>

Write Preview
Loading…
Cancel
Save