消息弹窗样式优化

src/layout/components/Navbar.vue

@@ -35,21 +35,32 @@
             class="exceptionHandling"
             :class="{ warnTxt: (typeList && typeList.length) || 0 }"
             @click="getAlarmData(true)"
-	          ><i class="el-icon-message"></i>{{
+            ><i class="el-icon-message"></i
-	            (typeList && typeList.length > 0 && typeList.length) || ""
+            >{{ (typeList && typeList.length > 0 && typeList.length) || "" }}
-	          }}
           </span>
         </el-tooltip>
 
         <el-tooltip :content="unReadComments" effect="dark" v-if="showPrise">
-          <el-badge :value="commentNum" class="item" style="margin-right: 10px;">
+          <el-badge :value="commentNum" class="item" style="margin-right: 10px">
-            <i class="el-icon-bell right-menu-item hover-effect" 
+            <i
-            style="line-height: 50px;color:#FF4D4F;font-size: 25px;padding-right: 0px;margin-top: -9px;" 
+              class="el-icon-bell right-menu-item hover-effect"
-            @click="gotoComment"></i> 
+              style="
+                line-height: 50px;
+                color: #ff4d4f;
+                font-size: 25px;
+                padding-right: 0px;
+                margin-top: -9px;
+              "
+              @click="gotoComment"
+            ></i>
           </el-badge>
         </el-tooltip>
         <el-tooltip :content="unReadComments" effect="dark" v-else>
-            <i class="el-icon-bell right-menu-item hover-effect" style="line-height: 50px;color:grey;font-size: 25px;" @click="gotoComment"></i> 
+          <i
+            class="el-icon-bell right-menu-item hover-effect"
+            style="line-height: 50px; color: grey; font-size: 25px"
+            @click="gotoComment"
+          ></i>
         </el-tooltip>
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
@@ -137,6 +148,43 @@
         <el-button @click="open1 = false">取 消</el-button>
       </div>
     </el-dialog>
+    <!-- 消息弹窗 -->
+    <el-dialog
+      title="消息提示"
+      :visible.sync="dialogVisible"
+      width="40%"
+      :before-close="handleClose"
+      class="messagedialog"
+    >
+      <div class="message">
+        <div class="messagelist">
+          <div class="itemlist" v-for="(item,index) in commentNum"  :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>
+              <div class="elcollapse">
+                <el-collapse accordion>
+                  <el-collapse-item>
+                    <template slot="title">
+                      间读详情
+                    </template>
+                    <div>
+                      与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
+                    </div>
+                    <div>
+                      在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -150,7 +198,7 @@ import SizeSelect from "@/components/SizeSelect";
 import Search from "@/components/HeaderSearch";
 import RuoYiGit from "@/components/RuoYi/Git";
 import RuoYiDoc from "@/components/RuoYi/Doc";
-import { getUnReadComment} from '@/api/plan/workorder';
+import { getUnReadComment } from "@/api/plan/workorder";
 import {
   listNotice,
   getNotice,
@@ -160,6 +208,7 @@ import {
 } from "@/api/system/notice";
 //import { listData, editAlarmStatus } from "@/api/energy/exception/data.js";
 import { changePoolName } from "@/api/system/user";
+import Index from "./TagsView/index.vue";
 export default {
   dicts: ["alarmType", "alarmStatus"],
   data() {
@@ -178,9 +227,11 @@ export default {
       // 非多个禁用
       multiple1: true,
       showPrise: false,
-      unReadComments: '您有0新的未读消息，请点击查看',
+      unReadComments: "您有0新的未读消息，请点击查看",
-      commentNum:0,
+      commentNum: 0,
-      queryParams:{}
+      queryParams: {},
+      dialogVisible: false,
+      messagedata:[],
     };
   },
   created() {
@@ -245,6 +296,9 @@ export default {
           [this.$createElement("el-button", {}, ["点击查看"])]
         ),
       });
+    },
+    handleClose(){
+
     },
     // 处理报警
     editAlarmStatus() {
@@ -307,21 +361,23 @@ export default {
     /** 获取未读消息数 */
     getUnReadList() {
       console.log("++未读消息查询++");
-      getUnReadComment(this.queryParams).then(response => {
+      getUnReadComment(this.queryParams).then((response) => {
-        if(response>0){
+        if (response > 0) {
-          this.unReadComments='您有'+response+'新的未读消息，请点击查看';
+          this.unReadComments = "您有" + response + "新的未读消息，请点击查看";
           this.commentNum = response;
+          console.log(response,'ssssss',)
           this.showPrise = true;
-        }else{
+        } else {
           this.showPrise = false;
         }
       });
     },
     /** 跳转到【消息】 */
     gotoComment() {
-      alert("301")
+      // alert("301");
       this.showPrise = false;
-    }
+      this.dialogVisible = true;
+    },
   },
 };
 </script>
@@ -350,7 +406,7 @@ export default {
   background: #fff;
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
   .exceptionHandling {
-/*  line-height: 50px;
+    /*  line-height: 50px;
     display: inline-block;
     color: black;*/
     vertical-align: text-bottom;
@@ -436,4 +492,50 @@ export default {
     }
   }
 }
+.messagedialog {
+  .message {
+    height: 400px;
+    background-color: #f9f9f9;
+    .messagelist {
+      padding-top: 10px;
+      .itemlist {
+        width: 85%;
+        margin: auto;
+        .timetip {
+          text-align: center;
+          margin-bottom: 10px;
+        }
+        .item {
+          border: 1px solid #eeeeee;
+          width: 100%;
+          padding: 10px;
+          background-color: #ffffff;
+          border-radius: 2px;
+          box-shadow: 0px 0px 0px 2px #f1f1f1;
+          .titilebox {
+            margin-bottom: 30px;
+            .title {
+              font-size: 18px;
+              margin-bottom: 5px;
+            }
+            .subtitle {
+              font-size: 16px;
+              margin-bottom: 5px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+::v-deep .messagedialog .el-dialog__body {
+  padding: 0;
+}
+::v-deep .messagedialog .el-dialog__header {
+  border-bottom: 1px solid #eeeeee;
+}
+::v-deep .messagedialog .el-collapse-item__header {
+  border-bottom: none;
+  line-height: 32px;
+}
 </style>