feat: message needs display unread

src/api/common.ts

@@ -84,9 +84,21 @@ export const getUserInfo = (ticket: string) =>
       AppId: '3bcb760743ea456faba29a1dfb247bf4',
     },
   });
-
+export const NeedsReadUserName = [
+  '武泽义',
+  '戈亚武',
+  '徐健',
+  '邵岩',
+  '许辉',
+  '周卫东',
+  '宋学文',
+  '卢勇',
+  '李刚',
+  '韦宇',
+  '解剑铭',
+];
 export const NeedsReadUser = [
-  '4be8a4ea9c574734ab4acb49965b076b', //  武泽义
+  '4be8a4ea9c574734ab4acb49965b076b', // 武泽义
   'f977a5593521478499f86dd00b2fe5d1', // 戈亚武
   'b30f4e6d73cf49a2a99f85b1d4e5f511', // 徐健
   '41c8d22e9bfa4009bc04eb9c6ee3c3ee', // 邵岩
@@ -113,20 +125,23 @@ export interface NoticeInfo {
   msType?: string;
   msTime?: string;
   msNo?: string;
-  /** 阅读状态，0：未读，1：已读 */
-  messageReadInfoList?: { userId: string; readState: '0' | '1' }[];
+  messageReadInfoList?: {
+    userId: string;
+    /** 阅读状态，0：未读，1：已读 */
+    readState: '0' | '1';
+  }[];
   fileList: { msAccessoryName?: string; msAccessory?: string }[];
 }
 
 export interface NoticeInfoResponse extends BaseResponse {
-  rows: NoticeInfo;
+  rows: NoticeInfo[];
 }
 
 export const getMessage = (params: NoticeInfoParams) =>
   request<NoticeInfoResponse>('GET', {
-    url: `http://61.147.254.211:30876/notice-info/messagepushinfo`,
+    url: `http://61.147.254.211:30876/notice-info/messagepushinfo/list`,
     headers: {
       AppId: '3bcb760743ea456faba29a1dfb247bf4',
     },
-    data: params,
+    params: params,
   });

src/components/MarkerMap/index.tsx

@@ -27,8 +27,6 @@ import icon_map_dcz from '@/assets/icons/home/dcz.svg';
 /** @ts-ignore */
 import icon_map_dpf from '@/assets/icons/home/dpf.svg';
 
-console.log(icon_map_dpf);
-
 import './index.scss';
 import {
   GET_INCIDENT_DIALOG_HTML,
@@ -77,7 +75,7 @@ interface ActionType {
 }
 
 // 路况信息刷新间隔
-const REFESH_TRAFFIC_TIME = 60000;
+const REFRESH_TRAFFIC_TIME = 60000;
 
 const getIncidentImage = (status: MarkerType['status']) =>
   status?.toString() === '1'
@@ -173,8 +171,9 @@ export default defineComponent({
         // case '待派发事件':
         // case '预警事件':
         default:
-          return GET_INCIDENT_DIALOG_HTML(marker, () => {
-            router.push(`/incidentDetail?id=${marker?.id}`);
+          return GET_INCIDENT_DIALOG_HTML(marker, async () => {
+            marker.id && (await incidentStore.getIncidentItem(marker.id));
+            await router.push(`/incidentDetail?id=${marker?.id}`);
             handleSetDetailMarker(marker);
             store.currentIncident = marker;
           });
@@ -265,7 +264,7 @@ export default defineComponent({
         updateTrafficSource();
         state.timer = setInterval(function () {
           updateTrafficSource();
-        }, REFESH_TRAFFIC_TIME);
+        }, REFRESH_TRAFFIC_TIME);
         updateTrafficLayerVisibility('visible');
       }
     };

src/store/useMainStore.ts

@@ -18,7 +18,7 @@ export interface MainActionsType {
   pushReqToken(cancelToken: Canceler): void;
   clearReqToken(): void;
   getUserInfo(ticket: string): Promise<true | undefined>;
-  getMessage(params: NoticeInfoParams): Promise<NoticeInfo | undefined>;
+  getMessage(params: NoticeInfoParams): Promise<NoticeInfo[] | undefined>;
 }
 
 export default defineStore<'main', MainStateType, {}, MainActionsType>('main', {
@@ -32,7 +32,6 @@ export default defineStore<'main', MainStateType, {}, MainActionsType>('main', {
         const { rows } = await getMessage(params);
         return rows;
       } catch (err) {
-        window.location.href = BaseLoginUrl;
         console.log(err);
       }
     },

src/views/HomePage/MessageCard/index.tsx

@@ -21,9 +21,10 @@ export default defineComponent({
         <div class="message-card-container">
           {store.incidents.rows?.map((item, idx) => (
             <a
-              onClick={(e) => {
+              onClick={async (e) => {
                 e.preventDefault();
                 markerStore.currentIncident = item;
+                item.id && (await store.getIncidentItem(item.id));
                 router.push(`/incidentDetail?id=${item.id}`);
               }}>
               <div class="message-item">

src/views/IncidentDetail/ExecutionLogCard/index.tsx

@@ -19,7 +19,34 @@ export default defineComponent({
         <div class="execution-log-container">
           {store.incidentDetail?.process?.map((item, idx) => (
             <div class={clsx('log-item', `log-item-${idx % 4}`)}>
-              <span class="log-label">{item.des}</span>
+              <span class="log-label">
+                {item.des?.includes('++++') ? (
+                  <>
+                    <span>{item.des.split('++++')[0]}</span>
+                    <span>
+                      <span
+                        style={{
+                          boxSizing: 'border-box',
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                          width: '75%',
+                        }}>
+                        {item.des.split('++++')[1]}
+                      </span>
+                      等
+                      {
+                        <span style={{ color: '#00d0ff' }}>
+                          {item.des.split('++++')[1]?.length ?? 0}
+                        </span>
+                      }
+                      人未读
+                    </span>
+                  </>
+                ) : (
+                  item.des
+                )}
+              </span>
               <span class="log-time">
                 {item.createTime}
                 <span class="logo-icon">

src/views/IncidentDetail/index.scss

@@ -368,6 +368,14 @@
             width: calc(50% - 42px);
             position: absolute;
             left: 0;
+            & > span {
+              display: flex;
+              overflow: hidden;
+
+              &:last-child {
+                font-size: px2rem(16px * 2);
+              }
+            }
           }
 
           .log-time {

src/views/IncidentDetail/index.tsx

@@ -1,6 +1,11 @@
-import { onMounted, onUnmounted, defineComponent, ref } from 'vue';
+import { onMounted, onUnmounted, defineComponent, ref, watchEffect } from 'vue';
 import { useRoute } from 'vue-router';
-import { useCommonStore, useIncidentStore, useMarkerStore } from '@/store';
+import {
+  useCommonStore,
+  useIncidentStore,
+  useMainStore,
+  useMarkerStore,
+} from '@/store';
 import IncidentInfoCard from './IncidentInfoCard';
 import CommandChainCard from './CommandChainCard';
 import EmergencyLinkageCard from './EmergencyLinkageCard';
@@ -11,6 +16,8 @@ import LiveVideoCard from './LiveVideoCard';
 import './index.scss';
 import { watch } from 'fs';
 import { isEmpty } from 'lodash';
+import isString from 'lodash/isString';
+import { NeedsReadUser, NeedsReadUserName } from '@/api/common';
 
 export default defineComponent({
   name: 'IncidentDetail',
@@ -18,11 +25,51 @@ export default defineComponent({
   setup() {
     const store = useIncidentStore();
     const commonStore = useCommonStore();
+    const mainStore = useMainStore();
     const markerStore = useMarkerStore();
     const route = useRoute();
 
     const liveVideoRef = ref<HTMLElement>();
 
+    watchEffect(() => {
+      const messageIDs =
+        store.incidentDetail?.process
+          ?.map((item) => (item.des === '发送消息' ? item.id : null))
+          .filter(isString) ?? [];
+      if (messageIDs.length > 0) {
+        Promise.all(
+          messageIDs.map((id) =>
+            mainStore.getMessage({
+              msType: '2',
+              msSource: '1',
+              msNo: id,
+            }),
+          ),
+        ).then((rows) => {
+          rows.forEach((message) => {
+            if (message?.[0]) {
+              const m = message[0];
+              const idx = store.incidentDetail.process?.findIndex(
+                (p) => p.id === m.msNo,
+              );
+              if (idx && idx >= 0) {
+                // @ts-ignore
+                store.incidentDetail.process[idx].des =
+                  m.msText?.split('事件的')[1] +
+                  '++++' +
+                  NeedsReadUserName.map((user) => user).join(',');
+                // (m.messageReadInfoList
+                //   ?.map((user) =>
+                //     user.readState === '0' ? user.userId : null,
+                //   )
+                //   .filter(isString)) ?? '' ;
+              }
+            }
+          });
+        });
+      }
+    });
+
     onMounted(async () => {
       commonStore.getGlobalDict('zhdd_incident_type');
       commonStore.getGlobalDict('zhdd_incident_source');
@@ -32,9 +79,6 @@ export default defineComponent({
         if (el.target && liveVideoRef.value?.contains(el.target as Node)) {
         }
       });
-      if (isEmpty(store.incidentDetail)) {
-        await store.getIncidentItem(route.query.id as string);
-      }
     });
     onUnmounted(() => {
       store.incidentDetail = {};