预警优化

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

@@ -1,8 +1,8 @@
 <template>
   <transition name="slide-right">
-    <div class="warn" v-if="showWarning" :draggable="true" @dragstart="onDragStart" @dragend="onDragEnd" @mousedown.prevent.stop="onMouseDown" @mousemove="onMouseMove" @mouseup="onMouseUp">
+    <div class="warn" :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> 设计预警通知</span>
+        <span style="color:rgb(255,120,0)">设计预警通知</span>
         <div>
           <span @click="ExpandWran" class="warnclose"> <el-icon>
               <Expand />
@@ -16,7 +16,7 @@
       <!-- 折叠 -->
       <div class="warncenter">
         <div class="warntext" v-for="item in warnings" :key="item">
-      <span style="margin-top:5px"><img :src="warnimg" alt="" /></span>
+          <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">项目编号【{{ item.projectCode}}】, 子项目编号【{{ item.projectSubCode }}】的图纸设计{{item.remainingTime < 0 ? '已超时' : '即将超时'}}，请及时完成。</span>
@@ -42,16 +42,16 @@
 import { useCommonStore } from '@/store/modules/common'
 import { CloseBold, Expand, WarningFilled } from '@element-plus/icons-vue'
 import warnimg from '/src/assets/imgs/warnicon.png'
-import {getProcessDesignDeferredWarning} from "@/api/heli/processdesign";
+import { getProcessDesignDeferredWarning } from '@/api/heli/processdesign'
 const commonStore = useCommonStore()
 const showWarning = computed(() => commonStore.showWarning)
 const showFilled = ref(false)
 const warnings = ref([])
 const processDesignTypeDict = {
-  "BLUEPRINT_FOUNDRY_TECHNOLOGY": "铸造工艺",
-  "BLUEPRINT_3D": "3D",
-  "BLUEPRINT_2D": "2D",
-  "BLUEPRINT_WORKBLANK": "毛坯"
+  BLUEPRINT_FOUNDRY_TECHNOLOGY: '铸造工艺',
+  BLUEPRINT_3D: '3D',
+  BLUEPRINT_2D: '2D',
+  BLUEPRINT_WORKBLANK: '毛坯'
 }
 const FoldWran = () => {
   showFilled.value = false
@@ -95,22 +95,28 @@ const onMouseMove = (event: MouseEvent) => {
 // const onDragEnd = () => {
 //   // 可以在此处执行拖拽结束后的操作（如果需要）
 // };
+const wranout = ref(false)
 const queryData = async () => {
+  const data = await getProcessDesignDeferredWarning()
 
-  const data = await getProcessDesignDeferredWarning();
   if (data.hasWarning) {
-    warnings.value = data.warnings;
+    warnings.value = data.warnings
     commonStore.setStore('showWarning', true)
   } else {
-    commonStore.setStore('showWarning', false)
+    // commonStore.setStore('showWarning', false)
   }
 }
 
 onMounted(() => {
-  queryData();
+  queryData()
 })
 </script>
 <style scoped lang="scss">
+.warn.no-data {
+  /* 当warnings数组为空时，隐藏元素并禁用过渡动画 */
+  display: none;
+  transition: none !important; /* 确保过渡动画被禁用 */
+}
 .FoldWran {
   cursor: pointer;
   margin-left: 15px;
@@ -119,7 +125,7 @@ onMounted(() => {
   right: 0;
   width: 40px;
   height: 40px;
-  background-color: #e6a23c;
+  background-color: rgb(255, 120, 0);
   color: #fff;
   display: flex;
   justify-content: center;
@@ -133,11 +139,12 @@ onMounted(() => {
   right: 60px;
   z-index: 5000;
   width: 400px;
-  height: 300px;
+  height: 450px;
   box-shadow: 0px 0px 10px 0px #999;
   border-radius: 5px;
   box-sizing: border-box;
   overflow: hidden;
+
   .warntitle {
     height: 40px;
     background-color: #f7f8fa;
@@ -153,11 +160,11 @@ onMounted(() => {
     }
   }
   .warncenter {
-    height: 250px;
+    height: 400px;
     background-color: #fff;
     padding: 10px;
     overflow-y: auto;
-    max-height: 250px;
+    max-height: 400px;
     .warntext {
       display: flex;
       justify-content: space-between;
@@ -172,6 +179,8 @@ onMounted(() => {
         }
         .warnbh {
           margin-top: 5px;
+          line-height: 23px;
+          font-size: 16px !important;
           color: rgba(84, 89, 94, 0.6);
         }
       }
@@ -200,7 +209,6 @@ onMounted(() => {
   border-radius: 6px;
 }
 
-
 .slide-right-enter-active,
 .slide-right-leave-active {
   transition: all 0.5s;