安检照片修改

huaxin-web/src/views/checktask/task/components/CoverPhotoView.vue

@@ -16,28 +16,38 @@
     :close-on-click-modal="false"
   >
     <div class="flex flex-w bb">
-      <div class="item" v-for="photo in meterImg" :key="photo.key">
-        <div class="view-label">
-          {{ photo.label?photo.label:photo.name }}
-        </div>
-        <div v-if="photo.img">
-          <MyImage
-            class="view-img"
-            :src="photo.img.split(',')[0]"
-            :previewSrcList="photo.img.split(',')"
-          >
-          </MyImage>
-        </div>
-        <div v-else-if="photo.src">
-          <MyImage
-            class="view-img"
-            :src="photo.src.split(',')[0]"
-            :previewSrcList="photo.src.split(',')"
-          >
-          </MyImage>
-        </div>
-        <div class="error" v-else>暂无图片</div>
-      </div>
+      <el-image
+        v-if="imageList"
+        v-for="img in imageList"
+        :src="img"
+        :preview-src-list="[img]"
+        :z-index="9999"
+        class="picture"
+      />
+      <div class="error" v-else>暂无图片</div>
+      <!-- <div class="item" v-for="photo in meterImg" :key="photo.key">
+
+         <div class="view-label">
+           {{ photo.label?photo.label:photo.name }}
+         </div>
+         <div v-if="photo.img">
+           <MyImage
+             class="view-img"
+             :src="photo.img.split(',')[0]"
+             :previewSrcList="photo.img.split(',')"
+           >
+           </MyImage>
+         </div>
+         <div v-else-if="photo.src">
+           <MyImage
+             class="view-img"
+             :src="photo.src.split(',')[0]"
+             :previewSrcList="photo.src.split(',')"
+           >
+           </MyImage>
+         </div>
+         <div class="error" v-else>暂无图片</div>
+      </div>-->
     </div>
   </el-dialog>
 </template>
@@ -60,11 +70,29 @@ export default {
         },
       ],
       open: false,
+      imageList: []
     };
   },
   methods: {
     viewCoverPhoto(meterImg) {
-      this.meterImg = JSON.parse(meterImg);
+      this.imageList = [];
+      if(meterImg){
+        var meterImgJsonArr = JSON.parse(meterImg);
+        meterImgJsonArr.forEach(item =>{
+          if(item.img){
+            var imgs= item.img.split(',');
+            if(imgs){
+              this.imageList.push(...imgs)
+            }
+          }
+          if(item.src){
+            var imgs= item.img.split(',');
+            if(imgs){
+              this.imageList.push(...imgs)
+            }
+          }
+        })
+      }
       this.open = true;
     },
   },
@@ -83,8 +111,8 @@ export default {
 //   margin: 3px;
 // }
 .item{
-  width: 200px;
   margin-bottom:30px;
+  display: flex;
 }
 .error {
   width: 130px;
@@ -93,4 +121,10 @@ export default {
   line-height: 139px;
   background: #f5f7fa;
 }
+
+.picture {
+  width: 130px;
+  height: 130px;
+  margin: 2px;
+}
 </style>