预警通告 拖动 隐藏

mes-ui/mes-ui-admin-vue3/src/layout/components/ToolHeader.vue

@@ -11,8 +11,10 @@ import RouterSearch from '@/components/RouterSearch/index.vue'
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
 import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
+import warnmessage from './warnmessage.vue'
 const { getPrefixCls, variables } = useDesign()
 
+
 const prefixCls = getPrefixCls('tool-header')
 
 const appStore = useAppStore()
@@ -71,6 +73,7 @@ export default defineComponent({
           <ThemeSwitch />
           <UserInfo></UserInfo>
         </div>
+        <warnmessage />
       </div>
     )
   }

mes-ui/mes-ui-admin-vue3/src/layout/components/warnmessage.vue

@@ -0,0 +1,180 @@
+<template>
+
+  <div class="warn" v-if="showWarning"  :draggable="true"
+    @dragstart="onDragStart"
+    @dragend="onDragEnd"
+    @mousedown.prevent.stop="onMouseDown"
+    @mousemove="onMouseMove"
+    @mouseup="onMouseUp">
+    <div class="warntitle">
+      <span> 设计预警通知</span>
+      <div>
+        <span @click="ExpandWran" class="warnclose"> <el-icon>
+            <Expand />
+          </el-icon></span>
+        <span @click="closeWran" class="warnclose"> <el-icon>
+            <CloseBold />
+          </el-icon></span>
+      </div>
+    </div>
+
+    <!-- 折叠 -->
+    <div class="warncenter">
+      <div class="warntext" v-for="item in 5" :key="item">
+        <span style="margin-top:5px"><img :src="warnimg" alt="" /></span>
+        <div class="warnnr">
+          <span>铸造工艺设计负责人: <span class="warnname">{{`薛小宝`}}</span> 请注意!</span>
+          <span class="warnbh">项目编号【{{ item}}】的图纸设计即将超时，请及时完成。</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div v-if="showFilled" @click="FoldWran" class="FoldWran">
+    <span>
+      <el-icon>
+        <WarningFilled />
+      </el-icon>
+    </span>
+  </div>
+</template>
+<script setup lang="ts">
+import { useCommonStore } from '@/store/modules/common'
+import { CloseBold, Expand, WarningFilled } from '@element-plus/icons-vue'
+import warnimg from '/src/assets/imgs/warnicon.png'
+const commonStore = useCommonStore()
+const showWarning = computed(() => commonStore.showWarning)
+const showFilled = ref(false)
+const FoldWran = () => {
+  showFilled.value = false
+
+  commonStore.setStore('showWarning', true)
+}
+const closeWran = () => {
+  commonStore.setStore('showWarning', false)
+}
+const ExpandWran = () => {
+  commonStore.setStore('showWarning', false)
+  showFilled.value = true
+}
+
+// 拖动
+let dragStartX = 0;
+let dragStartY = 0;
+
+const onMouseDown = (event: MouseEvent) => {
+  dragStartX = event.clientX - document.querySelector('.warn')!.offsetLeft;
+  dragStartY = event.clientY - document.querySelector('.warn')!.offsetTop;
+};
+
+const onMouseMove = (event: MouseEvent) => {
+  if (event.buttons === 1) {
+    const target = document.querySelector('.warn')!;
+    target.style.left = `${event.clientX - dragStartX}px`;
+    target.style.top = `${event.clientY - dragStartY}px`;
+  }
+};
+
+// const onMouseUp = () => {
+//   // 可以在这里保存最终位置到store中（如果需要持久化）
+// };
+
+// const onDragStart = (event: DragEvent) => {
+//   // 阻止默认的拖放行为，因为我们自己处理拖拽
+//   event.preventDefault();
+// };
+
+// const onDragEnd = () => {
+//   // 可以在此处执行拖拽结束后的操作（如果需要）
+// };
+</script>
+<style scoped lang="scss">
+.FoldWran {
+  cursor: pointer;
+  margin-left: 15px;
+  position: absolute;
+  top: 150px;
+  right: 0;
+  width: 50px;
+  height: 40px;
+  background-color: #e6a23c;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+}
+.warn {
+  position: absolute;
+  top: 110px;
+  right: 60px;
+  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;
+    .warnclose {
+      cursor: pointer;
+      margin-left: 15px;
+    }
+  }
+  .warncenter {
+    height: 250px;
+    background-color: #fff;
+    padding: 10px;
+    overflow-y: auto;
+    max-height: 250px;
+    .warntext {
+      display: flex;
+      justify-content: space-between;
+      color: #54595e;
+      margin-bottom: 10px;
+      .warnnr {
+        margin-left: 10px;
+        display: flex;
+        flex-direction: column;
+        .warnname {
+          color: #409eff;
+        }
+        .warnbh {
+          margin-top: 5px;
+          color: rgba(84, 89, 94, 0.6);
+        }
+      }
+    }
+  }
+}
+
+//滚动条整体部分
+.warncenter::-webkit-scrollbar {
+  width: 10px; /* 水平滚动条宽度 */
+  height: 10px; /* 垂直滚动条高度 */
+}
+//滚动条两端的按钮
+.warncenter::-webkit-scrollbar-button {
+  display: none;
+}
+// 外层轨道
+.warncenter::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+  border-radius: 6px;
+}
+
+//滚动条里面可以拖动的那个
+.warncenter::-webkit-scrollbar-thumb {
+  background-color: #888;
+  border-radius: 6px;
+}
+</style>

mes-ui/mes-ui-admin-vue3/src/store/modules/common.ts

@@ -3,18 +3,26 @@ import { store } from '../index'
 
 export interface CommonStoreState {
   storeMap: object
+  showWarning: boolean; 
 }
 
 export const useCommonStore = defineStore('commonStore', () => {
   const storeMap = ref({})
+  const showWarning = ref(true); 
   const getStore = (key) => {
+    return key === 'showWarning' ? showWarning.value : storeMap.value[key];
     return storeMap.value[key]
   }
   const setStore = (key, value) => {
+    if (key === 'showWarning') {
+      showWarning.value = value;
+    } else {
+      storeMap.value[key] = value;
+    }
     return storeMap.value[key] = value
   }
 
-  return {getStore, setStore}
+  return {getStore, setStore,showWarning}
 })
 
 export const useCommonStateWithOut = () => {

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

@@ -3,24 +3,6 @@
     <template #header>
       <span>首页</span>
     </template>
-    <div class="warn" v-if="showWarning">
-      <div class="warntitle">
-        <span> 设计预警通知</span>
-        <span @click="closeWran" class="warnclose"> <el-icon>
-            <CloseBold />
-          </el-icon></span>
-      </div>
-      <div class="warncenter">
-        <div class="warntext" v-for="item in 5" :key="item">
-          <span style="margin-top:5px"><img :src="warnimg" alt="" /></span>
-          <div class="warnnr">
-            <span>铸造工艺设计负责人: <span class="warnname">{{`薛小宝`}}</span> 请注意!</span>
-            <span class="warnbh">项目编号【{{ item}}】的图纸设计即将超时，请及时完成。</span>
-          </div>
-        </div>
-      </div>
-
-    </div>
 
     <div>
       <el-card shadow="never">
@@ -191,14 +173,12 @@ 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'
+import { useCommonStore } from '@/store/modules/common'
-
 defineOptions({ name: 'Home' })
-
+const commonStore = useCommonStore()
 const { t } = useI18n()
 const userStore = useUserStore()
 const { setWatermark } = useWatermark()
@@ -418,66 +398,12 @@ const openwarn = () => {
   })
 }
 
-const showWarning = ref(false)
-const closeWran = () => {
-  showWarning.value = false
-}
 onMounted(() => {
-  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;
-    .warnclose{
-      cursor: pointer;
-    }
-  }
-  .warncenter {
-    height: 250px;
-    background-color: #fff;
-    padding: 10px;
-    overflow-y: auto;
-    max-height: 250px;
-    .warntext {
-      display: flex;
-      justify-content: space-between;
-      color: #54595e;
-      margin-bottom: 10px;
-      .warnnr {
-        margin-left: 10px;
-        display: flex;
-        flex-direction: column;
-        .warnname {
-          color: #409eff;
-        }
-        .warnbh {
-          margin-top: 5px;
-          color: rgba(84, 89, 94, 0.6);
-        }
-      }
-    }
-  }
-}
 .my-notification {
   width: 380px;
   .el-notification__group {
@@ -489,27 +415,6 @@ onMounted(() => {
   }
 }
 
-//滚动条整体部分
-.warncenter::-webkit-scrollbar {
-  width: 10px; /* 水平滚动条宽度 */
-  height: 10px; /* 垂直滚动条高度 */
-} 
-//滚动条两端的按钮
-.warncenter::-webkit-scrollbar-button {
-  display: none;
-} 
-// 外层轨道
-.warncenter::-webkit-scrollbar-track {
-  background-color: #f1f1f1;
-  border-radius: 6px; 
-} 
-
-//滚动条里面可以拖动的那个
-.warncenter::-webkit-scrollbar-thumb {
-  background-color: #888;
-  border-radius: 6px;
-} 
-
 </style>