预警通知 二版

mes-ui/mes-ui-admin-vue3/src/views/Home/Index.vue

@@ -1,8 +1,25 @@
 <template>
-  <el-card class="hl-card" style="min-height: 80vh">
+  <el-card class="hl-card" style="min-height: 80vh; position: relative">
     <template #header>
       <span>首页</span>
     </template>
+    <div class="warn" v-if="showWarning">
+      <div class="warntitle">
+        <span> 设计预警通知</span>
+        <span @click="closeWran"> <el-icon>
+            <CloseBold />
+          </el-icon></span>
+      </div>
+      <div class="warncenter" v-for="item in 5" :key="item">
+        <span><img :src="warnimg" alt="" /></span>
+        <div class="warntext">
+          <span>铸造工艺设计负责人: <span class="warnname">薛小宝</span> 请注意!</span>
+          <span class="warnbh">项目编号【{{ item}}】的图纸设计即将超时，请及时完成。</span>
+        </div>
+      </div>
+
+    </div>
+
     <div>
       <el-card shadow="never">
         <el-skeleton :loading="loading" animated>
@@ -167,14 +184,16 @@
 </template>
 <script lang="ts" setup>
 import { set } from 'lodash-es'
-import { EChartsOption } from 'echarts'
+import { EChartsOption, format } from 'echarts'
 import { formatTime } from '@/utils'
 import { ElNotification } from 'element-plus'
 import { useUserStore } from '@/store/modules/user'
 import { useWatermark } from '@/hooks/web/useWatermark'
+import { CloseBold } from '@element-plus/icons-vue'
 import avatarImg from '@/assets/imgs/smile.png'
 import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
 import { pieOptions, barOptions } from './echarts-data'
+import warnimg from '/src/assets/imgs/warnicon.png'
 
 defineOptions({ name: 'Home' })
 
@@ -384,8 +403,8 @@ const getAllApi = async () => {
 
 getAllApi()
 
-const openwarn = () =>{
+const openwarn = () => {
- ElNotification({
+  ElNotification({
     title: `设计预警通知`,
     message: `铸造工艺设计负责人: <span class="bordercolor">${`薛小宝`} </span>请注意!<br/>
     项目编号【<span class="bordercolor">${`2546845`} </span>】的图纸设计即将超时，请及时完成。`,
@@ -396,20 +415,67 @@ const openwarn = () =>{
     customClass: 'my-notification'
   })
 }
+
+const showWarning = ref(false)
+const closeWran = () => {
+  showWarning.value = false
+}
 onMounted(() => {
- openwarn()
+  // showWarning.value = true
+  // openwarn()
 })
 </script>
 <style lang="scss">
+.warn {
+  position: absolute;
+  top: 0;
+  right: 10px;
+  z-index: 5000;
+  width: 400px;
+  height: 300px;
+  box-shadow: 0px 0px 10px 0px #999;
+  border-radius: 5px;
+  box-sizing: border-box;
+  overflow: hidden;
+  .warntitle {
+    height: 40px;
+    background-color: #f7f8fa;
+    border-bottom: 1px solid #e4e7ed;
+    padding: 0 10px;
+    font-weight: 600;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .warncenter {
+    height: 250px;
+    background-color: #fff;
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+    .warntext {
+      margin-left: 10px;
+      display: flex;
+      flex-direction: column;
+      color: #54595e;
+      .warnname {
+        color: #409eff;
+      }
+      .warnbh {
+        margin-top: 5px;
+        color: rgba(84, 89, 94, 0.6);
+      }
+    }
+  }
+}
 .my-notification {
-    width: 380px;
+  width: 380px;
   .el-notification__group {
     .el-notification__content {
-      .bordercolor{
+      .bordercolor {
         color: #409eff;
       }
     }
   }
- 
 }
 </style>