设计延期预警（浮窗）根据有无预警内容展示

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

@@ -8,7 +8,7 @@ import {SizeDropdown} from '@/layout/components/SizeDropdown'
 import {useAppStore} from '@/store/modules/app'
 import {useDesign} from '@/hooks/web/useDesign'
 import {ThemeSwitch} from '@/layout/components/ThemeSwitch'
-
+import Warnmessage from '@/layout/components/warnmessage.vue'
 const { getPrefixCls, variables } = useDesign()
 
 const prefixCls = getPrefixCls('tool-header')
@@ -68,6 +68,7 @@ export default defineComponent({
           ) : undefined}
           <ThemeSwitch />
           <UserInfo></UserInfo>
+          <Warnmessage />
         </div>
       </div>
     )

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

@@ -0,0 +1,266 @@
+<template>
+  <transition name="slide-right">
+    <div class="warn" ref="warnRef" :class="{ 'no-data': !warnings.length }" v-if="showWarning" :style="{ display: warnings.length ? 'block' : 'none'}" :draggable="true" @dragstart="onDragStart" @dragend="onDragEnd" @mousedown.prevent.stop="onMouseDown" @mousemove="onMouseMove" @mouseup="onMouseUp">
+      <div class="warntitle">
+        <span class="titleText">设计预警通知</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 warnings" :key="item">
+          <span style="margin-top:2px"><img :src="warnimg" alt="" /></span>
+          <div class="warnnr" v-if="item.processDesignType != 'BLUEPRINT_FOUNDRY_TECHNOLOGY'">
+            <span>{{processDesignTypeDict[item.processDesignType]}}设计负责人: <span class="warnname">{{item.ownerName}}</span> 请注意!</span>
+            <span class="warnbh">项目编号【<span class="warnbhx" style="color:#409EFF;font-size: 16px !important;" @click="projectDetail(item)">{{ item.projectCode}}</span>】, 子项目编号【{{ item.projectSubCode }}】的图纸设计{{item.remainingTime < 0 ? '已超时' : '即将超时'}}，请及时完成。</span>
+          </div>
+          <div class="warnnr" v-else>
+            <span>{{processDesignTypeDict[item.processDesignType]}}设计负责人: <span class="warnname">{{item.ownerName}}</span> 请注意!</span>
+            <span class="warnbh">项目编号【<span style="color:#409EFF;font-size: 16px !important;" @click="projectDetail(item)">{{ item.projectCode}}</span>】的图纸设计{{item.remainingTime < 0 ? '已超时' : '即将超时'}}，请及时完成。</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+
+  <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 { ref, onMounted } from 'vue'
+import { CloseBold, Expand, WarningFilled } from '@element-plus/icons-vue'
+import warnimg from '/src/assets/imgs/warnicon.png'
+import { getProcessDesignDeferredWarning } from '@/api/biz/processdesign'
+const warnRef = ref<HTMLElement | null>(null)
+const router = useRouter()
+const commonStore = useCommonStore()
+const showWarning = computed(() => commonStore.showWarning)
+const warnHeight = computed(() => commonStore.warnHeight)
+
+const showFilled = ref(false)
+const warnings = ref([])
+const processDesignTypeDict = {
+  BLUEPRINT_3D: '3D',
+  BLUEPRINT_2D: '2D',
+}
+const FoldWran = () => {
+  showFilled.value = false
+  commonStore.setStore('showWarning', true)
+}
+const closeWran = () => {
+  commonStore.setStore('showWarning', false)
+  commonStore.setStore('artificialWarningClose', true)
+}
+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 = () => {
+//   // 可以在此处执行拖拽结束后的操作（如果需要）
+// };
+const wranout = ref(false)
+const queryData = async () => {
+  const data = await getProcessDesignDeferredWarning()
+  if (data.hasWarning) {
+    warnings.value = data.warnings
+    commonStore.setStore('showWarning', true)
+  } else {
+    commonStore.setStore('showWarning', false)
+  }
+}
+
+//点击跳转详情
+const projectDetail = (val) => {
+  if (val.processDesignType == 'BLUEPRINT_3D') {
+    openDetail('update', val.id, val.processDesignType) //3D
+  } else if (val.processDesignType == 'BLUEPRINT_2D') {
+    openDetail('update', val.id, val.processDesignType) //2D
+  }
+}
+
+const openDetail = (type, id, DesignType) => {
+  commonStore.setStore('active', type)
+  commonStore.setStore('id', id)
+  commonStore.setStore('processDesignType', DesignType)
+  router.push({
+    name: 'ProcessDesignDetail',
+    query: {
+      operateId: Math.random()
+    }
+  })
+}
+
+onMounted(() => {
+  if (!commonStore.getStore('artificialWarningClose')) {
+    queryData()
+  }
+  setTimeout(() => {
+    const warnHeight = warnRef.value?.offsetHeight + 120
+    // console.log('警告框高度:', warnHeight);
+    commonStore.setStore('warnHeight', warnHeight)
+  }, 1000)
+})
+</script>
+<style scoped lang="scss">
+.warn.no-data {
+  /* 当warnings数组为空时，隐藏元素并禁用过渡动画 */
+  display: none;
+  transition: none !important; /* 确保过渡动画被禁用 */
+}
+
+.FoldWran {
+  cursor: pointer;
+  margin-left: 15px;
+  position: absolute;
+  top: 150px;
+  right: 0;
+  width: 40px;
+  height: 40px;
+  background-color: rgb(255, 120, 0);
+  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: 999 !important;
+  width: 400px;
+  box-shadow: 0px 0px 10px 0px #999;
+  border-radius: 5px;
+  box-sizing: border-box;
+  overflow: hidden;
+  .warntitle {
+    .titleText {
+      color: rgb(255, 120, 0);
+    }
+    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 {
+    background-color: #fff;
+    padding: 10px;
+    overflow-y: auto;
+    max-height: 410px;
+    .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;
+          line-height: 23px;
+          font-size: 16px !important;
+          color: rgba(84, 89, 94, 0.6);
+          .warnbhx {
+            cursor: pointer;
+            &:hover {
+             text-decoration: underline;
+          }
+          }
+          
+        }
+      }
+    }
+  }
+}
+
+//滚动条整体部分
+.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;
+}
+
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 0.5s;
+}
+
+.slide-right-enter-from,
+.slide-right-leave-to {
+  transform: translateX(100%);
+  opacity: 0;
+}
+
+.slide-right-enter-to,
+.slide-right-leave-from {
+  transform: translateX(0);
+}
+</style>

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

@@ -5,6 +5,7 @@ export interface CommonStoreState {
   storeMap: object
   showWarning: boolean;
   showInventWarning:boolean;
+  warnHeight:number;
 }
 
 export const useCommonStore = defineStore(
@@ -14,7 +15,8 @@ export const useCommonStore = defineStore(
       return {
         storeMap: {},
         showWarning: true,
-        showInventWarning: true
+        showInventWarning: true,
+        warnHeight: 600
       }
     },
     actions: {
@@ -23,6 +25,8 @@ export const useCommonStore = defineStore(
           this.showWarning = value;
         }else if (key == 'showInventWarning'){
           this.showInventWarning = value;
+        }else if (key == 'warnHeight'){
+          this.warnHeight = value;
         }else{
           this.storeMap[key] = value;
         }
@@ -32,6 +36,8 @@ export const useCommonStore = defineStore(
           return this.showWarning;
         }else if (key == 'showInventWarning'){
           return this.showInventWarning;
+        }else if (key == 'warnHeight'){
+          return  this.warnHeight;
         }else{
           return this.storeMap[key];
         }