Yangwl
/
LanJu_UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改消息弹窗样式首页线体图

Browse Source
master
LAPTOP-R6EHHS26\86155 7 months ago
parent a458a4712a
commit ea6bf3b243
3 changed files with 127 additions and 24 deletions
Show Stats Download Patch File Download Diff File

BIN
src/assets/images/alarm.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 726 KiB

141
src/layout/components/Navbar.vue
Unescape Escape View File

@ -156,26 +156,97 @@
:before-close="handleClose"
class="messagedialog"
>
<span slot="title" class="dialog-title">
<div class="titlebox" style="display: flex; align-items: center">
<!-- <i class="el-icon-message-solid" style="color: aqua"></i> -->
<img src="../../assets/images/alarm.gif" width="42" alt="">
<div class="">消息提示</div>
</div>
</span>
<div class="message">
<div class="messagelist">
<div class="itemlist" v-for="(item,index) in commentNum" :key="index" >
<div
class="itemlist"
v-for="(item, index) in messagedata"
:key="index"
>
<!-- <div class="timetip">2024-04-24 08:00:00</div> -->
<div class="item">
<div class="titilebox">
<div class="title">工单未开始超时提醒</div>
<div class="subtitle">上位机未及时执行工单的开始动作</div>
<div class="subtitle">
{{ item.productDateStr
}}{{
item.prodLineName
}}上位机未及时执行工单的开始动作,延迟小时数{{ item.difHours }}
</div>
</div>
<div class="elcollapse">
<el-collapse accordion>
<el-collapse-item>
<template slot="title">
间读详情
</template>
<div>
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
<template slot="title"> 消息详情 </template>
<!-- 订单编码、工单编码、计划生产时间、产品编码、产品名称、数量、单位、线体名称、班次、延迟小时数 -->
<div class="form">
<div class="formlist">
<span class="lablename"> 订单编码: </span>
<span class="lablecontent">
{{ item.workorderCodeSap }}
</span>
<span class="lablename" style="margin-left: 15px">
工单编号:
</span>
<span class="lablecontent">
{{ item.workorderCode }}
</span>
</div>
<div class="formlist">
<span class="lablename"> 计划生产时间: </span>
<span class="lablecontent">
{{ item.productDateStr }}
</span>
<span class="lablename" style="margin-left: 15px">
产品编码:
</span>
<span class="lablecontent">
{{ item.productCode }}
</span>
</div>
<div class="formlist">
<span class="lablename"> 产品名称: </span>
<span class="lablecontent">
{{ item.productName }}
</span>
</div>
<div class="formlist">
<span class="lablename"> 数量: </span>
<span class="lablecontent">
{{ item.quantitySplit }}
</span>
<span class="lablename" style="margin-left: 15px">
单位:
</span>
<span class="lablecontent">
{{ item.unit }}
</span>
</div>
<div class="formlist">
<span class="lablename"> 线体名称: </span>
<span class="lablecontent">
{{ item.prodLineName }}
</span>
<span class="lablename" style="margin-left: 15px">
班次:
</span>
<span class="lablecontent">
{{ item.difHours }}
</span>
</div>
<div class="formlist">
<span class="lablename"> 延迟小时数: </span>
<span class="lablecontent">
{{ item.difHours }}
</span>
</div>
<div>
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
</div>
</el-collapse-item>
</el-collapse>
@ -231,7 +302,7 @@ export default {
commentNum: 0,
queryParams: {},
dialogVisible: false,
messagedata:[],
messagedata: [],
};
},
created() {
@ -297,8 +368,8 @@ export default {
),
});
},
handleClose(){
handleClose() {
this.dialogVisible = false;
},
// 处理报警
editAlarmStatus() {
@ -361,10 +432,12 @@ export default {
/** 获取未读消息数 */
getUnReadList() {
console.log("++未读消息查询++");
getUnReadComment(this.queryParams).then(response => {
if(response.length>0){
this.unReadComments='您有'+response.length+'新的未读消息，请点击查看';
getUnReadComment(this.queryParams).then((response) => {
if (response.length > 0) {
this.unReadComments =
"您有" + response.length + "新的未读消息，请点击查看";
this.commentNum = response.length;
this.messagedata = response;
this.showPrise = true;
} else {
this.showPrise = false;
@ -495,10 +568,11 @@ export default {
.message {
height: 400px;
background-color: #f9f9f9;
overflow-y: scroll;
.messagelist {
padding-top: 10px;
padding-top: 25px;
.itemlist {
width: 85%;
width: 95%;
margin: auto;
.timetip {
text-align: center;
@ -507,12 +581,15 @@ export default {
.item {
border: 1px solid #eeeeee;
width: 100%;
padding: 10px;
padding: 20px;
background-color: #ffffff;
border-radius: 2px;
box-shadow: 0px 0px 0px 2px #f1f1f1;
margin-bottom: 18px;
.titilebox {
margin-bottom: 30px;
padding: 10px;
padding-bottom: 20px;
background-color: rgb(241 241 241 / 70%);
.title {
font-size: 18px;
margin-bottom: 5px;
@ -522,6 +599,26 @@ export default {
margin-bottom: 5px;
}
}
.elcollapse {
background-color: rgb(241 241 241 / 70%);
.form {
// display: flex;
.formlist {
margin-bottom: 2px;
.lablename {
font-size: 14px;
color: #9badc5;
display: inline-block;
min-width: 90px;
}
.lablecontent {
display: inline-block;
font-size: 13px;
min-width: 218px;
}
}
}
}
}
}
}
@ -536,5 +633,11 @@ export default {
::v-deep .messagedialog .el-collapse-item__header {
border-bottom: none;
line-height: 32px;
height: 30px;
font-size: 16px;
}
::v-deep .messagedialog .el-dialog__headerbtn {
font-size: 25px;
top: 27px;
}
</style>

8
src/views/dashboard/crossBarChart.vue
Unescape Escape View File

@ -100,7 +100,7 @@ export default {
},
// backgroundColor: "#031d33",
xAxis: {
name:'箱',
// name:'箱',
show: true,
type: "value",
// data:xData
@ -123,9 +123,9 @@ export default {
inverse: true,
axisLabel: {
show: true,
margin: 15,
margin: 10,
textStyle: {
fontSize: "16",
fontSize: "14",
fontWeight: "bolder",
},
},
@ -149,7 +149,7 @@ export default {
axisLabel: {
textStyle: {
color: "rgba(128, 207, 240, 1)",
fontSize: "16",
fontSize: "14",
},
formatter: function (value) {
return value;

Write Preview
Loading…
Cancel
Save