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

src/layout/components/Navbar.vue

@@ -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 slot="title"> 消息详情 </template>
-                      间读详情
+                    <!-- 订单编码、工单编码、计划生产时间、产品编码、产品名称、数量、单位、线体名称、班次、延迟小时数 -->
-                    </template>
+                    <div class="form">
-                    <div>
+                      <div class="formlist">
-                      与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
+                        <span class="lablename"> 订单编码: </span>
-                    </div>
+                        <span class="lablecontent">
-                    <div>
+                          {{ 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>
                   </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 => {
+      getUnReadComment(this.queryParams).then((response) => {
-        if(response.length>0){
+        if (response.length > 0) {
-          this.unReadComments='您有'+response.length+'新的未读消息，请点击查看';
+          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>

src/views/dashboard/crossBarChart.vue

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