fix 上报图片

src/api/incident.ts

@@ -65,6 +65,7 @@ export interface IncidentItemDetailProcessItem {
   createTime?: string;
   createBy?: null;
   taskId?: string;
+  child?: Array<IncidentItemDetailProcessItem>;
 }
 export interface IncidentItemDetailTaskItem {
   id?: string;
@@ -173,6 +174,8 @@ export interface IncidentProcessParam {
   incidentId?: string; // 事件id
   des?: string; // 处置内容
   taskId?: string;
+  video?: string;
+  pic?: string;
 }
 
 /** 添加处置过程 */

src/utils/index.ts

@@ -36,6 +36,7 @@ const videos = [
 ];
 
 export const isVideo = (video: UploadData): Boolean => {
+  if (video.fileName === '') return false;
   for (const type of videos) {
     const reg = new RegExp(`${type}`, 'g');
     if (video.fileName?.match(reg)) {
@@ -46,6 +47,11 @@ export const isVideo = (video: UploadData): Boolean => {
 };
 
 export const isImage = (image: UploadData): Boolean => {
+
+
+
+    if (image.fileName === '' || image.fileName === null) return false;
+
   for (const type of images) {
     const reg = new RegExp(`${type}`, 'g');
     if (image.fileName?.match(reg)) {

src/views/IncidentManagementDetail/index.tsx

@@ -9,6 +9,7 @@ import {
 import { useRouter, useRoute } from 'vue-router';
 import './index.scss';
 import { useCommonStore, useIncidentStore } from '@/store';
+import { BaseMediaUrl, isImage, isVideo } from '@/utils';
 import {
   DropdownItemOption,
   NavBar,
@@ -26,6 +27,8 @@ import {
   Step,
   Steps,
   Dialog,
+  ImagePreview,
+  Popup,
 } from 'vant';
 /** @ts-ignore */
 import icon_communication from '@/assets/icons/incident/communication@2x.png';
@@ -39,6 +42,8 @@ import icon_plan from '@/assets/icons/incident/plan@2x.png';
 import icon_yjck from '@/assets/icons/incident/yjck@2x.png';
 /** @ts-ignore */
 import icon_yjya from '@/assets/icons/incident/yjya@2x.png';
+/** @ts-ignore */
+import icon_video from '@/assets/icons/incident/video.png';
 import { cloneDeep, take } from 'lodash';
 
 
@@ -151,11 +156,17 @@ export default defineComponent({
               });
             }
           }
+           
         });
+        console.log(process.value);
+       
 
       },
     );
 
+     const videop = ref();
+     const videopsrc = ref('');
+     const isshowprew = ref(false);
     onMounted(() => {
       commonStore.getGlobalDict('zhdd_incident_level');
       commonStore.getGlobalDict('zhdd_incident_type');
@@ -223,6 +234,19 @@ export default defineComponent({
         <Sticky offsetTop={'46px'}>
           <div class="title">{store.incidentDetail?.baseInfo?.name}</div>
         </Sticky>
+        <Popup
+          style="width:100%;background:rgba(0,0,0,0)"
+          v-model:show={isshowprew.value}
+          onClose={() => {
+            videop.value.pause();
+          }}>
+          <video
+            ref={videop}
+            src={videopsrc.value}
+            controls
+            autoplay="true"
+            style="width:100%"></video>
+        </Popup>
         <Collapse v-model={activeNames.value}>
           <CollapseItem
             title="事件信息"
@@ -312,7 +336,7 @@ export default defineComponent({
                   <div
                     class="cz-line"
                     style={`display:${
-                      index == (process.value?.length ?? 0) - 1
+                      index === (process.value?.length ?? 0) - 1
                         ? 'none'
                         : 'block'
                     }`}></div>
@@ -322,19 +346,77 @@ export default defineComponent({
                     {i.des}
                     <div
                       style={'margin-top: 4px;'}
-                      class={i.taskId == currenttaskid.value ? 'active' : ''}>
+                      class={i.taskId === currenttaskid.value ? 'active' : ''}>
                       {(i.child ?? [])?.map((ii, index) => (
                         <div class="czxq-item">
                           <div class="cz-yuan"></div>
                           <div
                             class="cz-line"
                             style={`display:${
-                              index == ((i.child ?? [])?.length ?? 0) - 1
+                              index === ((i.child ?? [])?.length ?? 0) - 1
                                 ? 'none'
                                 : 'block'
                             }`}></div>
                           <div class="cz-time"> {ii.createTime}</div>
-                          <div class="cz-des"> {ii.des}</div>
+                          <div class="cz-des">
+                            <div style={'margin-bottom:8px'}>{ii.des}</div>
+
+                            <div
+                              class={'img'}
+                              style={
+                                ii.pic === '' && ii.video === ''
+                                  ? 'display:none'
+                                  : ''
+                              }>
+                              {((ii.pic ?? '') + ',' + (ii.video ?? '') ?? '')
+                                .split(',')
+                                .map((iim,idxq) => {
+                                  iim = iim ?? '';
+                                  if (isImage({ fileName: iim, url: iim })) {
+                                    return (
+                                      <img
+                                        src={BaseMediaUrl + iim}
+                                        onClick={() => {
+                                          ImagePreview({
+                                            images: ii.pic
+                                              .split(',')
+                                              .filter((cc) => cc != '')
+                                              .map((cc) => {
+                                                return BaseMediaUrl + cc;
+                                              }),
+                                            startPosition: idxq,
+                                          });
+                                        }}
+                                        style={
+                                          'width:20px;height:30px;object-fit: contain;margin-right:10px;padding:0 10px;background:rgb(240 236 236);'
+                                        }></img>
+                                    );
+                                  }
+                                  
+                                  if (isVideo({ fileName: iim, url: iim })) {
+                                    // console.log(iim);
+                                    return (
+                                      <img
+                                        onClick={() => {
+                                          isshowprew.value = true;
+                                          try {
+                                            videopsrc.value =
+                                              BaseMediaUrl + iim;
+                                            videop.value.play();
+                                            videop.value.currentTime = 0;
+                                          } catch (error) {}
+                                        }}
+                                        src={icon_video}
+                                        style={
+                                          'width:20px;height:30px;object-fit: contain;margin-right:10px;background:rgb(240 236 236);padding:0 10px;border-radius:4px'
+                                        }></img>
+                                    );
+                                  }
+                                   return <div></div>;
+                                 
+                                })}
+                            </div>
+                          </div>
                         </div>
                       ))}
                     </div>

src/views/IncidentManagementDetailLite/index.scss

@@ -85,13 +85,14 @@
             font-weight: 400;
             text-align: left;
             color: #333333;
-            padding-bottom: 16px;
+            padding-bottom: 10px;
         }
     }
     .active {
         background-color: #F6F7FB !important;
         padding: 10px;
         border-radius: 5px;
+        padding-bottom: 0;
     }
     .textarea {
         background: #ffffff;

src/views/IncidentManagementDetailLite/index.tsx

@@ -12,6 +12,7 @@ import './index.scss';
 import { upload, UploadData } from '@/api/common';
 import { isArray } from 'lodash';
 import { useCommonStore, useIncidentStore } from '@/store';
+import { BaseMediaUrl, isImage, isVideo } from '@/utils';
 import {
   DropdownItemOption,
   NavBar,
@@ -28,9 +29,11 @@ import {
   Toast,
   Step,
   Steps,
-  Dialog,Popup,
+  Dialog,
+  Popup,
   Uploader,
   UploaderFileListItem,
+  ImagePreview,
 } from 'vant';
 /** @ts-ignore */
 import icon_communication from '@/assets/icons/incident/communication@2x.png';
@@ -44,6 +47,11 @@ import icon_plan from '@/assets/icons/incident/plan@2x.png';
 import icon_yjck from '@/assets/icons/incident/yjck@2x.png';
 /** @ts-ignore */
 import icon_yjya from '@/assets/icons/incident/yjya@2x.png';
+
+/** @ts-ignore */
+import icon_video from '@/assets/icons/incident/video.png';
+
+;
 import { cloneDeep, take } from 'lodash';
 
 
@@ -74,14 +82,21 @@ export default defineComponent({
       if (!store.incidentDetail.baseInfo?.id || message.value == "") {
         Toast.fail('信息不完整');
       }
-        store.addIncidentProcess({
-          incidentId: store.incidentDetail.baseInfo?.id,
-          des: message.value,
-          taskId:currenttaskid.value,
-        }).then(() => { 
-          message.value = "";
+        store
+          .addIncidentProcess({
+            incidentId: store.incidentDetail.baseInfo?.id,
+            des: message.value,
+            taskId: currenttaskid.value,
+            video: videosrclist.map((i: UploadData) => i.url).join(','),
+            pic: imagessrclist.map((i: UploadData) => i.url).join(','),
+          })
+          .then(() => {
+            message.value = '';
+            videosrclist.splice(0);
+            imagessrclist.splice(0);
+            form.value = { pic: [], video: [] };
             store.getIncidentItem(store.incidentDetail.baseInfo?.id ?? '');
-        });
+          });
       
       
     };
@@ -231,7 +246,6 @@ export default defineComponent({
             } catch (E) {}
             //window.history.back();
           }}
-         
         />
         <Sticky offsetTop={'46px'}>
           <div class="title">{store.incidentDetail?.baseInfo?.name}</div>
@@ -374,7 +388,7 @@ export default defineComponent({
                     取消
                   </Button>
                   <Button
-                    color='red'
+                    color="red"
                     style={getisbj() ? 'display:none' : ''}
                     size="small"
                     type="default"
@@ -413,7 +427,7 @@ export default defineComponent({
             v-slots={{ icon: <img class="icon-i" src={icon_detail} /> }}>
             <div>
               {process.value
-                ?.filter((i) => i.taskId == currenttaskid.value)
+                ?.filter((i) => i.taskId === currenttaskid.value)
                 .map((i, index) => (
                   <div class="czxq-item">
                     <div class="cz-yuan"></div>
@@ -422,7 +436,7 @@ export default defineComponent({
                       style={`display:${
                         index ==
                         (process.value?.filter(
-                          (i) => i.taskId == currenttaskid.value,
+                          (i) => i.taskId === currenttaskid.value,
                         )?.length ?? 0) -
                           1
                           ? 'none'
@@ -448,7 +462,64 @@ export default defineComponent({
                                   : 'block'
                               }`}></div>
                             <div class="cz-time"> {ii.createTime}</div>
-                            <div class="cz-des"> {ii.des}</div>
+                            <div class="cz-des">
+                              <div style={'margin-bottom:8px'}>{ii.des}</div>
+
+                              <div
+                                class={'img'}
+                                style={
+                                  ii.pic === '' && ii.video === ''
+                                    ? 'display:none'
+                                    : ''
+                                }>
+                                {((ii.pic ?? '') + ',' + (ii.video ?? '') ?? '')
+                                  .split(',')
+                                  .map((iim, idxq) => {
+                                    iim = iim ?? '';
+                                    if (isImage({ fileName: iim, url: iim })) {
+                                      // console.log(iim);
+                                      return (
+                                        <img
+                                          src={BaseMediaUrl + iim}
+                                          onClick={() => {
+                                            ImagePreview({
+                                              images: ii.pic
+                                                .split(',')
+                                                .filter((cc) => cc != '')
+                                                .map((cc) => {
+                                                  return BaseMediaUrl + cc;
+                                                }),
+                                              startPosition: idxq,
+                                            });
+                                          }}
+                                          style={
+                                            'width:20px;height:30px;object-fit: contain;margin-right:10px;padding:0 10px;background:rgb(240 236 236);'
+                                          }></img>
+                                      );
+                                    }
+                                    if (isVideo({ fileName: iim, url: iim })) {
+                                      // console.log(iim);
+                                      return (
+                                        <img
+                                          onClick={() => {
+                                            isshowprew.value = true;
+                                            try {
+                                              videopsrc.value =
+                                                BaseMediaUrl + iim;
+                                              videop.value.play();
+                                              videop.value.currentTime = 0;
+                                            } catch (error) {}
+                                          }}
+                                          src={icon_video}
+                                          style={
+                                            'width:20px;height:30px;object-fit: contain;margin-right:10px;background:rgb(240 236 236);padding:0 10px;border-radius:4px'
+                                          }></img>
+                                      );
+                                    }
+                                    return <div></div>;
+                                  })}
+                              </div>
+                            </div>
                           </div>
                         ))}
                       </div>

src/views/IncidentManagementReport/index.tsx

@@ -13,7 +13,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import { useCommonStore, useIncidentStore } from '@/store';
 import QueryMap from '@/components/QueryMap';
 import Map from '@/components/MapView';
-import { BaseMediaUrl } from '@/utils/index';
+import { BaseMediaUrl,isImage,isVideo } from '@/utils/index';
 import { api_getusergps } from '@/service/login';
 import { api_getuserInfo } from '@/service/warehouse';
 // import MediaUpload from '@/components/MediaUpload';