fix: 报警弹窗修改

src/components/custom-notivue/notification.vue

@@ -3,8 +3,8 @@
     <div class="titleWrapper">
       <img class="alarmIcon" :src="alarmIcon" />
       <div class="title"> 告警通知 </div>
-      <div class="close" @click.stop="item.clear">
-        <img :src="closeIcon" alt="close" />
+      <div class="close">
+        <img :src="closeIcon" alt="close" @click.stop="item.clear" />
       </div>
     </div>
 
@@ -14,9 +14,16 @@
         class="thumbnail"
         v-if="item.props?.thumbnail"
       ></div>
-      <div class="info"></div>
+      <div class="info">
+        <div class="info-text"> {{ '告警类型：' + item.props.type }} </div>
+        <div class="info-text"> {{ '告警设备：' + item.props.device }} </div>
+        <div class="info-text"> {{ '告警场所：' + item.props.place }} </div>
+        <div class="info-text"> {{ '告警时间：' + item.props.time }} </div>
+      </div>
+    </div>
+    <div class="footerWrapper">
+      <el-button type="primary" @click="handleClick(item)">查看详情</el-button>
     </div>
-    <div class="footerWrapper"></div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -47,15 +54,17 @@
     background: url('@/assets/images/institute-safety/gd-hbimg.png') 100% 100%;
     top: 150px;
     display: flex;
+    flex-direction: column;
     position: relative;
     padding: 20px 24px;
     width: 490px;
     height: 260px;
     border-radius: 8px;
-    cursor: pointer;
 
     .contentWrapper {
-      margin-left: 16px;
+      margin-top: 20px;
+      display: flex;
+      gap: 20px;
     }
 
     .titleWrapper {
@@ -64,9 +73,10 @@
     }
     .title {
       text-align: left;
+      font-weight: 500;
       font-size: 20px;
-      color: #fff;
-      margin-left: 5px;
+      color: #333333;
+      margin-left: 8px;
     }
     .thumbnail {
       width: 199px;
@@ -80,23 +90,39 @@
       flex-shrink: 0;
       margin-top: 5px;
     }
+    .info {
+      width: calc(100% - 20px - 199px);
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+
+      font-weight: 400;
+      font-size: 16px;
+      color: #000000;
+    }
+    .info-text {
+      width: 100%;
+      white-space: nowrap; /* 防止文本换行 */
+      overflow: hidden; /* 隐藏溢出的文本 */
+      text-overflow: ellipsis; /* 显示省略号 */
+    }
     .close {
-      position: absolute;
-      right: -12px;
-      top: -12px;
-      width: 24px;
+      flex-grow: 1;
+      text-align: end;
       height: 24px;
-      cursor: pointer;
 
       img {
-        width: 100%;
+        cursor: pointer;
+        width: 24px;
         height: 100%;
       }
     }
-    // .textWrapper {
-    //   text-align: left;
-    //   color: rgba(255, 255, 255, 0.9);
-    // }
+
+    .footerWrapper {
+      width: 100%;
+      margin-top: 20px;
+      text-align: end;
+    }
 
     .alarmIcon {
       width: 23px;

src/views/emergency/emergency-drill/components/DrillPlanRecordItem.vue

@@ -66,7 +66,7 @@
         )
       ).join(',') +
       ']';
-    formData.drillImagesFile = undefined;
+    // formData.drillImagesFile = undefined;
     if (!formData.drillPlanId) formData.drillPlanId = Number(id);
 
     try {

src/views/institute-safety/modules/safety-company-home/CompanyHome.vue

@@ -1,13 +1,7 @@
 <template>
   <div class="company-home" id="company-home">
     <RealtimeSurveillance v-if="curCamera?.code" />
-    <img
-      v-else
-      style="width: 100%"
-      src="@/assets/images/sfy.jpg"
-      alt=""
-      @click="push.success('Your message has been successfully sent.')"
-    />
+    <img v-else style="width: 100%" src="@/assets/images/sfy.jpg" alt="" />
     <CompanyRating v-if="!curCamera?.code" />
     <ControlTab @open-surveillance-list="showSurveillanceList = true" @open-question-list="handleOpenQuestionList" />
     <SurveillanceList v-if="showSurveillanceList" @close="showSurveillanceList = false" />
@@ -31,8 +25,6 @@
   import { storeToRefs } from 'pinia';
   import { WORKSHOP_INFOS } from '../safety-workshop-list/constants';
 
-  import { push } from 'notivue';
-
   const showSurveillanceList = ref(false);
 
   useViolationNoticeCompany();
@@ -60,7 +52,7 @@
     });
   }
   function handleQuestionListClose() {
-    showQuestionList.value = false;
+    questionListStore.closeList();
   }
 
   onUnmounted(() => {

src/views/institute-safety/modules/safety-company-home/hooks/use-violation-notice-company.ts

@@ -2,10 +2,13 @@
 
 import { getNewIssueList, updateReadIssueId } from '../apis';
 import useViolationNoticeStore, { getPlace, emitter } from '../stores/use-violation-notice-store';
-import { onUnmounted, onMounted } from 'vue';
+import { onUnmounted, onMounted, nextTick } from 'vue';
 import dayjs from 'dayjs';
 import { push } from 'notivue';
-import TestImg from 'D:/任务/机场节点.2png.png';
+import useQuestionListStore from '@/views/institute-safety/modules/safety-company-home/stores/use-question-list';
+import { WORKSHOP_INFOS } from '../../safety-workshop-list/constants';
+
+const questionListStore = useQuestionListStore();
 const useViolationRealtimeCompany = () => {
   /** 消息队列，最新的排在最前面，最老的排在最后面 */
   // 报警消息最后返回数据的id
@@ -18,55 +21,35 @@ const useViolationRealtimeCompany = () => {
     const showItem = violationStore.getLastNotice();
     // 从数组最末尾弹出消息
 
-    if (!showItem) {
-      const renderTime = dayjs().format('HH:mm:ss');
-      const renderPlace = 'test place';
-      push.success({
-        props: {
-          thumbnail: TestImg,
-          title: '报警标题',
-          message: `<div>
-      <div>地点：${renderPlace}</div>
-      <div>时间：${renderTime}</div>
-      </div>`,
-          onClick: () => {
-            // 这里打开问题列表
-          },
-        },
-        onAutoClear(item) {
-          showNotice();
-        },
-        onManualClear(item) {
-          showNotice();
-        },
-      });
-    }
-    // if (!showItem) return;
+    if (!showItem) return;
 
-    // 只显示当天的时分秒
-    // const renderTime = dayjs(showItem.createdAt).format('HH:mm:ss');
-    // const renderPlace = getPlace([showItem.workshopName, showItem.workspaceName]);
-    // push.success({
-    //   props: {
-    //     thumbnail: showItem.pictures?.[0],
-    //     title: showItem.title,
-    //     message: `<div>
-    //   <div>地点：${renderPlace}</div>
-    //   <div>时间：${renderTime}</div>
-    //   </div>`,
-    //     onClick: () => {
-    //       // 这里打开问题列表
-    //     },
-    //   },
-    //   onAutoClear(item) {
-    //     showNotice();
-    //   },
-    //   onManualClear(item) {
-    //     showNotice();
-    //   },
-    // });
+    const renderTime = dayjs(showItem.createdAt).format('yyyy-MM-dd HH:mm:ss');
+    const renderPlace = getPlace([showItem.workshopName, showItem.workspaceName]);
+    push.success({
+      props: {
+        thumbnail: showItem.pictures?.[0],
+        type: showItem.title,
+        device: showItem.cameraCode,
+        place: renderPlace,
+        time: renderTime,
+        onClick: () => {
+          questionListStore.setState({
+            type: 'all',
+            workshopCodes: WORKSHOP_INFOS.map((item) => item.workshopCode),
+          });
+          nextTick(() => {
+            questionListStore.openList();
+          });
+        },
+      },
+      onAutoClear(item) {
+        showNotice();
+      },
+      onManualClear(item) {
+        showNotice();
+      },
+    });
   };
-  showNotice();
   emitter.on('showNotice', showNotice);
 
   const getViolationsRealtime = () => {