修改界面显示

master
夜笙歌 9 months ago
parent 38dfc39df5
commit 229cc6cdbe

Binary file not shown.

After

Width:  |  Height:  |  Size: 770 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 876 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 MiB

@ -1,6 +1,6 @@
<template>
<div class="app-container">
<div class="headTitle">京源生产监控平台</div>
<div class="headTitle">1</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 }}

@ -5,6 +5,26 @@
:style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
{{ i }}
</div>
<div class="title1">班组</div>
<div class="title2">上线数量</div>
<div class="nowClass">总装</div>
<div class="num">1122</div>
<div class="info1Title">产品条码</div>
<div class="info1">B23120783055009802101</div>
<div class="info2Title">扫描时间</div>
<div class="info2">2023/12/7 12:01:53</div>
<div class="info3Title">产品型号</div>
<div class="info3">发泡箱体,BCD-530WPG,标准白</div>
<div class="info4Title">订单编号</div>
<div class="info4">11232394</div>
<div class="info5Title">订单数量</div>
<div class="info5">300</div>
<div class="info6Title">上线数量</div>
<div class="info6">63</div>
<div class="info7Title">提示信息</div>
<div class="info7">扫描成功</div>
<div class="scrollTable">
<div style="background-color: #094170">
@ -74,9 +94,6 @@
<div class="chart2">
<Chart ref="chart2"></Chart>
</div>
<div class="chart3">
<Chart ref="chart3"></Chart>
</div>
</div>
</template>
@ -95,27 +112,22 @@ export default {
data() {
return {
title: [
'工单计划',
'泡后库存',
'小时产量',
'库存统计',
'当日小时产量统计',
'当日型号产量统计',
'表格',
],
titlePosition: [
{
top: 11.5,
left: 5.5
},
{
top: 55.4,
top: 31.3,
left: 5.5
},
{
top: 11.5,
left: 52.7
top: 31.3,
left: 52.8
},
{
top: 55.4,
left: 52.7
top: 62.2,
left: 5.5
},
],
scrollTableOption: {
@ -285,75 +297,6 @@ export default {
},
],
})
this.$refs.chart3.setData({
tooltip: {
trigger: "axis",
axisPointer: {
//
type: "shadow", // 线'line' | 'shadow'
},
},
grid: {
left: "0",
right: "4%",
bottom: "0",
top: 20,
containLabel: true,
},
xAxis: {
type: "category",
data: e.chart3.x,
axisLine: {
lineStyle: {
color: "white",
},
},
axisLabel: {
// interval: 0,
// rotate: 40,
textStyle: {
fontFamily: "Microsoft YaHei",
},
},
},
yAxis: {
type: "value",
axisLine: {
show: false,
lineStyle: {
color: "white",
},
},
splitLine: {
show: false,
},
axisLabel: {},
},
series: [
{
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.chart3.y.data,
},
],
})
})
},
methods: {}
@ -361,7 +304,7 @@ export default {
</script>
<style scoped>
.app-container {
background-image: url("../../../assets/board/pourInto.jpg");
background-image: url("../../../assets/board/finalAssembly.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
@ -392,10 +335,10 @@ export default {
.scrollTable {
position: absolute;
top: 15%;
left: 4%;
width: 45%;
height: 36%;
top: 66%;
left: 3.7%;
width: 92.5%;
height: 30%;
}
@ -413,25 +356,198 @@ export default {
.chart1 {
position: absolute;
top: 58.5%;
top: 34.5%;
left: 3.6%;
width: 45.5%;
height: 35%;
height: 22.5%;
}
.chart2 {
position: absolute;
top: 15%;
top: 34.5%;
left: 51%;
width: 45.5%;
height: 35%;
height: 22.5%;
}
.chart3 {
.title1 {
position: absolute;
top: 58.5%;
left: 51%;
width: 45.5%;
height: 35%;
top: 12.5%;
left: 12.7%;
transform: translate(-50%, -50%);
font-size: 1.2vw;
color: #d6eaed;
}
.title2 {
position: absolute;
top: 12.5%;
left: 87.2%;
transform: translate(-50%, -50%);
font-size: 1.2vw;
color: #d6eaed;
}
.nowClass {
position: absolute;
top: 20%;
left: 12.7%;
transform: translate(-50%, -50%);
font-size: 1.2vw;
color: #d6eaed;
}
.num {
position: absolute;
top: 20%;
left: 87.2%;
transform: translate(-50%, -50%);
font-size: 1.2vw;
color: #d6eaed;
}
.info1Title {
position: absolute;
top: 9%;
left: 23.5%;;
width: 8.5%;
font-size: 1.1vw;
color: #55c280;
text-align: center;
}
.info1 {
position: absolute;
top: 9%;
left: 32%;
width: 18%;
font-size: 1.2vw;
color: #d6eaed;
text-align: center;
}
.info2Title {
position: absolute;
top: 9%;
left: 50%;
width: 8.5%;
font-size: 1.1vw;
color: #55c280;
text-align: center;
}
.info2 {
position: absolute;
top: 9%;
left: 58.5%;
width: 18%;
font-size: 1.2vw;
color: #d6eaed;
text-align: center;
}
.info3Title {
position: absolute;
top: 13.5%;
left: 23.5%;;
width: 8.5%;
font-size: 1.1vw;
color: #55c280;
text-align: center;
}
.info3 {
position: absolute;
top: 13.5%;
left: 32%;
width: 18%;
font-size: 1.2vw;
color: #d6eaed;
text-align: center;
}
.info4Title {
position: absolute;
top: 13.5%;
left: 50%;
width: 8.5%;
font-size: 1.1vw;
color: #55c280;
text-align: center;
}
.info4 {
position: absolute;
top: 13.5%;
left: 58.5%;
width: 18%;
font-size: 1.2vw;
color: #d6eaed;
text-align: center;
}
.info5Title {
position: absolute;
top: 18%;
left: 23.5%;;
width: 8.5%;
font-size: 1.1vw;
color: #55c280;
text-align: center;
}
.info5 {
position: absolute;
top: 18%;
left: 32%;
width: 18%;
font-size: 1.2vw;
color: #d6eaed;
text-align: center;
}
.info6Title {
position: absolute;
top: 18%;
left: 50%;
width: 8.5%;
font-size: 1.1vw;
color: #55c280;
text-align: center;
}
.info6 {
position: absolute;
top: 18%;
left: 58.5%;
width: 18%;
font-size: 1.2vw;
color: #d6eaed;
text-align: center;
}
.info7Title {
position: absolute;
top: 22.5%;
left: 23.5%;;
width: 8.5%;
font-size: 1.1vw;
color: #55c280;
text-align: center;
}
.info7 {
position: absolute;
top: 22.5%;
left: 32%;
width: 18%;
font-size: 1.2vw;
color: #d6eaed;
text-align: center;
}
</style>

@ -14,6 +14,7 @@
<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="foamingMachine"></div>
<div class="supplementInfo">注射压力标准范围10.0-14.0Mpa AB组份枪头压力差1Mpa</div>
<div class="supplementInfo1">发泡料温度标准范围:18.0-24.0</div>
@ -937,7 +938,7 @@ export default {
},
xAxis: {
type: "category",
data: e.chart7.x,
data: e.chart3.x,
axisLine: {
lineStyle: {
color: "white",
@ -967,7 +968,7 @@ export default {
},
series: [
{
name: e.chart7.y.name,
name: e.chart3.y.name,
type: "bar",
barWidth: "33%",
label: {
@ -992,7 +993,7 @@ export default {
borderRadius: 2,
},
},
data: e.chart7.y.data,
data: e.chart3.y.data,
},
],
})
@ -1009,6 +1010,17 @@ export default {
font-size: 1vw;
letter-spacing: 2px;
}
.foamingMachine{
background-image: url("../../../assets/board/foamingMachine.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
transform: translateX(-50%);
top: 35%;
left: 50%;
width: 36vw;
height: 12vw;
}
.app-container {
background-image: url("../../../assets/board/foaming1.jpg");
background-repeat: no-repeat;

@ -18,6 +18,7 @@
<div>线体1圈 1s</div>
<div>台车1位 1s</div>
</div>
<div class="foamingMachine"></div>
<div class="supplementInfo">注射压力标准范围10.0-14.0Mpa AB组份枪头压力差1Mpa</div>
<div class="supplementInfo1">发泡料温度标准范围:18.0-24.0</div>
@ -1348,6 +1349,17 @@ export default {
};
</script>
<style scoped>
.foamingMachine{
background-image: url("../../../assets/board/foamingMachine.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
transform: translateX(-50%);
top: 35%;
left: 50%;
width: 36vw;
height: 12vw;
}
.app-container {
background-image: url("../../../assets/board/foaming1.jpg");
background-repeat: no-repeat;

File diff suppressed because it is too large Load Diff

@ -58,6 +58,7 @@
<div class="el-login-footer">
<!-- <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>-->
</div>
<div class="logo"></div>
</div>
</template>
@ -141,7 +142,8 @@ export default {
Cookies.remove('rememberMe');
}
this.$store.dispatch("Login", this.loginForm).then(() => {
this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
this.$router.push({path: this.redirect || "/"}).catch(() => {
});
}).catch(() => {
this.loading = false;
if (this.captchaEnabled) {
@ -156,14 +158,27 @@ export default {
</script>
<style rel="stylesheet/scss" lang="scss">
.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%;
}
.login {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-image: url("../assets/images/login-background.jpg");
background-image: url("../assets/images/login-background.png");
background-size: cover;
}
.title {
margin: 0px auto 30px auto;
text-align: center;
@ -175,32 +190,39 @@ export default {
background: #ffffff;
width: 400px;
padding: 25px 25px 5px 25px;
.el-input {
height: 38px;
input {
height: 38px;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
}
}
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.login-code {
width: 33%;
height: 38px;
float: right;
img {
cursor: pointer;
vertical-align: middle;
}
}
.el-login-footer {
height: 40px;
line-height: 40px;
@ -213,6 +235,7 @@ export default {
font-size: 12px;
letter-spacing: 1px;
}
.login-code-img {
height: 38px;
}

@ -63,6 +63,8 @@
<div class="el-register-footer">
<span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>
</div>
<div class="logo"></div>
</div>
</template>
@ -146,12 +148,23 @@ export default {
</script>
<style rel="stylesheet/scss" lang="scss">
.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%;
}
.register {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-image: url("../assets/images/login-background.jpg");
background-image: url("../assets/images/login-background.png");
background-size: cover;
}
.title {

Loading…
Cancel
Save