fix 定时刷新

src/store/useIncidentStore.ts

@@ -57,11 +57,12 @@ export default defineStore<
     },
     async getIncidentItem(id) {
       try {
-        this.toggleLoading();
+        this.loading = false;
+        // this.toggleLoading();
         const { data } = await getIncidentItem(id);
         this.incidentDetail = data;
       } finally {
-        this.toggleLoading();
+        // this.toggleLoading();
       }
     },
 

src/views/IncidentDetail/ExecutionLogCard/index.tsx

@@ -9,6 +9,14 @@ export default defineComponent({
   name: 'ExecutionLogCard',
   setup(props) {
     const store = useIncidentStore();
+    // const divc = ref();
+
+    // const doscroll = () => {
+    //   debugger;
+    //   // alert('sd');
+    //   console.log(divc.value.scrollHeight);
+    //   divc.value.scrollTop = divc.value.scrollHeight;
+    // };
 
     // const medias = computed(() =>
     //   (store.incidentDetail?.baseInfo?.pic?.split(',') ?? []).concat(
@@ -16,11 +24,15 @@ export default defineComponent({
     //   ),
     // );
 
+    return { store };
 
-    return () => (
-      <Card cardType="execution-log">
-        <div class="execution-log-container">
-          {/* {store.incidentDetail?.process?.map((item, idx) => (
+   
+  },
+  render() { 
+     return  (
+       <Card cardType="execution-log">
+         <div class="execution-log-container" id="cardlog1">
+           {/* {store.incidentDetail?.process?.map((item, idx) => (
             <div class={clsx('log-item', `log-item-${idx % 4}`)}>
               <span class="log-label">
                 {item.des?.includes('>>>>') ? (
@@ -61,64 +73,77 @@ export default defineComponent({
             </div>
           ))} */}
 
-          {store.incidentDetail?.process?.map((item, idx) => (
-            <div
-              class={`pitem pitem${
-                item.incidentStatus == null ? 3 : item.incidentStatus
-              }`}
-              datatype={`${
-                idx + 1 == store.incidentDetail?.process?.length ? 'last' : '1'
-              }`}>
-              <div class="pcontent">
-                <div class="ptime">
-                  <div class="ptime-bg"></div>
-                  <span>
-                    {moment(item.createTime).format('YYYY-MM-DD HH:mm')}
-                  </span>
-                </div>
-                <div class="pdesc">
-                  <div> {item.des} </div>
-                  <div
-                    class="exdesc"
-                    style={`${item.userUnRead == null||item.userUnRead == "" ? 'display:none' : ''}`}>
-                    {(
-                      ((item.userUnRead ?? '').split('、') ?? []).slice(0, 5) ??
-                      []
-                    )
-                      .filter((i) => {
-                        return i != '';
-                      })
-                      .join('、')}{' '}
-                    等
-                    <span style="color:#39D6FE;margin-left:5px;margin-right:5px">
-                      {((item.userUnRead ?? '').split('、') ?? []).length - 1}
-                    </span>
-                    人未读。
-                  </div>
-                  <div
-                    class="exdesc"
-                    style={`${item.userRead == null||item.userRead == "" ? 'display:none' : ''}`}>
-                    {(
-                      ((item.userRead ?? '').split('、') ?? []).slice(0, 5) ??
-                      []
-                    )
-                      .filter((i) => {
-                        return i != '';
-                      })
-                      .join('、')}{' '}
-                    等
-                    <span style="color:#39D6FE;margin-left:5px;margin-right:5px">
-                      {((item.userRead ?? '').split('、') ?? []).length - 1}
-                    </span>
-                    人已读。
-                  </div>
-                </div>
-              </div>
-              <div class="pline"></div>
-            </div>
-          ))}
-        </div>
-      </Card>
-    );
-  },
+           {this.store.incidentDetail?.process?.map((item, idx) => (
+             <div
+               class={`pitem pitem${
+                 item.incidentStatus == null ? 3 : item.incidentStatus
+               }`}
+               datatype={`${
+                 idx + 1 == this.store.incidentDetail?.process?.length
+                   ? 'last'
+                   : '1'
+               }`}>
+               <div class="pcontent">
+                 <div class="ptime">
+                   <div class="ptime-bg"></div>
+                   <span>
+                     {moment(item.createTime).format('YYYY-MM-DD HH:mm')}
+                   </span>
+                 </div>
+                 <div class="pdesc">
+                   <div> {item.des} </div>
+                   <div
+                     class="exdesc"
+                     style={`${
+                       item.userUnRead == null || item.userUnRead == ''
+                         ? 'display:none'
+                         : ''
+                     }`}>
+                     {(
+                       ((item.userUnRead ?? '').split('、') ?? []).slice(
+                         0,
+                         5,
+                       ) ?? []
+                     )
+                       .filter((i) => {
+                         return i != '';
+                       })
+                       .join('、')}{' '}
+                     等
+                     <span style="color:#39D6FE;margin-left:5px;margin-right:5px">
+                       {((item.userUnRead ?? '').split('、') ?? []).length - 1}
+                     </span>
+                     人未读。
+                   </div>
+                   <div
+                     class="exdesc"
+                     style={`${
+                       item.userRead == null || item.userRead == ''
+                         ? 'display:none'
+                         : ''
+                     }`}>
+                     {(
+                       ((item.userRead ?? '').split('、') ?? []).slice(0, 5) ??
+                       []
+                     )
+                       .filter((i) => {
+                         return i != '';
+                       })
+                       .join('、')}{' '}
+                     等
+                     <span style="color:#39D6FE;margin-left:5px;margin-right:5px">
+                       {((item.userRead ?? '').split('、') ?? []).length - 1}
+                     </span>
+                     人已读。
+                   </div>
+                 </div>
+               </div>
+               <div class="pline"></div>
+             </div>
+           ))}
+         </div>
+       </Card>
+     );
+
+  }
 });

src/views/IncidentDetail/index.tsx

@@ -41,6 +41,7 @@ export default defineComponent({
     const route = useRoute();
     const router = useRouter();
 
+    const logcard = ref();
     const liveVideoRef = ref<HTMLElement>();
 
     watchEffect(() => {
@@ -99,6 +100,7 @@ export default defineComponent({
     }
 
 
+    var timer = null;
 
     onMounted(async () => {
       store.getIncidentList({
@@ -113,16 +115,34 @@ export default defineComponent({
         if (el.target && liveVideoRef.value?.contains(el.target as Node)) {
         }
       });
+      
       // if (!store.incidentDetail) {
       //   router.push("/home");
 
       // }
     });
+    timer = setInterval(() => {
+      if (route.query.id != undefined) {
+        // store.toggleLoading();
+        store.getIncidentItem(route.query.id as string);
+        // console.log('刷新------' + route.query.id);
+        // div.scrollTop = div.scrollHeight;
+        try {
+          var div = document.getElementById('cardlog1');
+          console.log(div?.scrollTop);
+          if (div && div.scrollTop == 0) div.scrollTop = div.scrollHeight;
+        } catch (error) {
+          // debugger
+        }
+      }
+      // store.getIncidentItem(item.id);
+    }, 5 * 1000);
     onUnmounted(() => {
       store.incidentDetail = {};
       markerStore.currentIncident = {};
       markerStore.livevideovisible = false;
       markerStore.livevideos = [];
+      clearInterval(timer);
     });
 
     return () => (
@@ -195,7 +215,7 @@ export default defineComponent({
             <div class="detail-right">
               <EmergencyCard />
               <IncidentPlanCard />
-              <ExecutionLogCard />
+              <ExecutionLogCard ref={logcard}/>
 
               {/* <LiveMonitoringCard /> */}
             </div>