Merge branch 'fix-wyf' into 'dev'

报警弹窗修改

See merge request product-group-fe/sfy-safety-group/sfy-safety!266

src/components/custom-notivue/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <Notivue v-slot="item">
+    <Notification :item="item"></Notification>
+  </Notivue>
+</template>
+<script lang="ts" setup>
+  import { Notivue } from 'notivue';
+  import Notification from './notification.vue';
+</script>
+<style>
+  :root {
+    --nv-root-top: 200px;
+  }
+</style>

src/components/custom-notivue/notification.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="custom-notification">
+    <div class="titleWrapper">
+      <img class="alarmIcon" :src="alarmIcon" />
+      <div class="title"> 告警通知 </div>
+      <div class="close">
+        <img :src="closeIcon" alt="close" @click.stop="item.clear" />
+      </div>
+    </div>
+
+    <div class="contentWrapper">
+      <div
+        :style="{ 'background-image': `url('${item.props?.thumbnail}')` }"
+        class="thumbnail"
+        v-if="item.props?.thumbnail"
+      ></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>
+</template>
+<script lang="ts" setup>
+  import type { NotivueItem } from 'notivue';
+  import closeIcon from '@/assets/icons/close-icon.png';
+  import alarmIcon from '@/assets/icons/alarm-icon.png';
+
+  export interface FollowerNotificationProps {
+    thumbnail: string;
+    type: string;
+    device: string;
+    place: string;
+    time: string;
+    onClick: () => unknown;
+  }
+
+  const props = defineProps<{
+    item: NotivueItem<FollowerNotificationProps>;
+  }>();
+
+  const handleClick = (item) => {
+    item.props.onClick();
+    item.clear();
+  };
+</script>
+<style scoped lang="scss">
+  .custom-notification {
+    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;
+
+    .contentWrapper {
+      margin-top: 20px;
+      display: flex;
+      gap: 20px;
+    }
+
+    .titleWrapper {
+      display: flex;
+      align-items: center;
+    }
+    .title {
+      text-align: left;
+      font-weight: 500;
+      font-size: 20px;
+      color: #333333;
+      margin-left: 8px;
+    }
+    .thumbnail {
+      width: 199px;
+      height: 112px;
+      border-radius: 4px;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      display: inline-block;
+      flex-grow: 0;
+      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 {
+      flex-grow: 1;
+      text-align: end;
+      height: 24px;
+
+      img {
+        cursor: pointer;
+        width: 24px;
+        height: 100%;
+      }
+    }
+
+    .footerWrapper {
+      width: 100%;
+      margin-top: 20px;
+      text-align: end;
+    }
+
+    .alarmIcon {
+      width: 23px;
+      height: 23px;
+    }
+  }
+</style>

src/components/custom-notivue/notivue-conf.ts

@@ -0,0 +1,14 @@
+import { createNotivue } from 'notivue';
+
+export const notivue = createNotivue({
+  position: 'top-center',
+  transition: 'none',
+  limit: 1,
+  enqueue: true,
+  teleportTo: '#company-home',
+  notifications: {
+    global: {
+      duration: 1000000000,
+    },
+  },
+});

src/layout/FixedScreenLayout.vue

@@ -4,6 +4,7 @@
       <Nav :usePx="true" />
       <router-view />
     </div>
+    <CustomNotice />
   </div>
 </template>
 
@@ -12,6 +13,10 @@
   import { storeToRefs } from 'pinia';
   import usePageSizeStore from '@/hooks/usePageSizeStore';
   import Nav from '@/components/Nav.vue';
+  import useViolationNoticeStore from '@/views/institute-safety/modules/safety-company-home/stores/use-violation-notice-store';
+  import CustomNotice from '@/components/custom-notivue/index.vue';
+
+  useViolationNoticeStore();
 
   const pageSize = usePageSizeStore();
   const { ratio, rotate } = storeToRefs(pageSize);

src/main.ts

@@ -9,6 +9,8 @@ import { setupElement, setupDirectives } from '@/plugins';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
 import '@/utils/g6Extensions';
+import 'notivue/animations.css'; // Only needed if using built-in animations
+import { notivue } from '@/components/custom-notivue/notivue-conf';
 
 import 'virtual:svg-icons-register';
 
@@ -16,6 +18,7 @@ dayjs.locale('zh-cn');
 
 async function bootstrap() {
   const app = createApp(App);
+  app.use(notivue);
 
   // 全局完整引入 element 组件
   setupElement(app);

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,5 +1,5 @@
 <template>
-  <div class="company-home">
+  <div class="company-home" id="company-home">
     <RealtimeSurveillance v-if="curCamera?.code" />
     <img v-else style="width: 100%" src="@/assets/images/sfy.jpg" alt="" />
     <CompanyRating v-if="!curCamera?.code" />
@@ -52,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 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
@@ -17,21 +20,26 @@ const useViolationRealtimeCompany = () => {
   const showNotice = () => {
     const showItem = violationStore.getLastNotice();
     // 从数组最末尾弹出消息
+
     if (!showItem) return;
 
-    // 只显示当天的时分秒
-    const renderTime = dayjs(showItem.createdAt).format('HH:mm:ss');
+    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],
-        title: showItem.title,
-        message: `<div>
-      <div>地点：${renderPlace}</div>
-      <div>时间：${renderTime}</div>
-      </div>`,
+        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) {
@@ -42,7 +50,6 @@ const useViolationRealtimeCompany = () => {
       },
     });
   };
-
   emitter.on('showNotice', showNotice);
 
   const getViolationsRealtime = () => {