From c7b0c34472dd952651d0e5f2ab9cd407014d66fa Mon Sep 17 00:00:00 2001
From: 15036302109 <zhp5211314>
Date: Tue, 16 Jul 2024 16:40:57 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9A=90=E6=82=A3=E7=85=A7=E7=89=87=E5=92=8C?=
 =?UTF-8?q?=E6=95=B4=E6=94=B9=E7=85=A7=E7=89=87=E5=8F=AF=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=A4=9A=E5=BC=A0=E5=9B=BE=E7=89=87=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/ehs/ehsHiddenDanger/index.vue   |  9 +-
 .../ehs/ehsHiddenDanger/myImagePreview.vue    | 90 +++++++++++++++++++
 2 files changed, 96 insertions(+), 3 deletions(-)
 create mode 100644 ruoyi-ui/src/views/ehs/ehsHiddenDanger/myImagePreview.vue

diff --git a/ruoyi-ui/src/views/ehs/ehsHiddenDanger/index.vue b/ruoyi-ui/src/views/ehs/ehsHiddenDanger/index.vue
index b3d4c56..a2e4474 100644
--- a/ruoyi-ui/src/views/ehs/ehsHiddenDanger/index.vue
+++ b/ruoyi-ui/src/views/ehs/ehsHiddenDanger/index.vue
@@ -561,7 +561,8 @@
       </el-row>
       <el-form-item label="隐患照片" prop="hiddenDangerImg">
         <image-upload  v-if="!isReadOnly" v-model="form.hiddenDangerImg"  />
-        <image-preview  v-if="isReadOnly" :src="form.hiddenDangerImg"  />
+<!--        <image-preview :width="100" :height="100" v-if="isReadOnly" :src="form.hiddenDangerImg"  />-->
+        <myImagePreview :width="100" :height="100" v-if="isReadOnly" :src="form.hiddenDangerImg"  />
       </el-form-item>
       <el-form-item label="整改措施" prop="rectifyMeasure">
         <el-input v-model="form.rectifyMeasure" type="textarea" placeholder="请输入整改措施" :readonly="isReadOnly"/>
@@ -585,7 +586,8 @@
       </el-row>
       <el-form-item label="整改照片" prop="rectifyImg">
         <image-upload  v-if="!isReadOnly" v-model="form.rectifyImg"  />
-        <image-preview  v-if="isReadOnly" :src="form.rectifyImg"  />
+<!--        <image-preview :width="100" :height="100" v-if="isReadOnly" :src="form.rectifyImg"  />-->
+        <myImagePreview :width="100" :height="100" v-if="isReadOnly" :src="form.rectifyImg"  />
       </el-form-item>
       <el-row>
         <el-col :span="12">
@@ -689,12 +691,13 @@ import { listEhsHiddenDanger, getEhsHiddenDanger, delEhsHiddenDanger, addEhsHidd
 import {listAllDept } from "@/api/system/dept";
 import enterpriseSelect from "./enterpriseSelect"
 import importUpload from "@/components/upload/upload";
+import myImagePreview from "./myImagePreview.vue";
 import { eventBus } from '@/main.js';
 export default {
   name: "EhsHiddenDanger",
   dicts: ['hidden_danger_type', 'hidden_danger_grade', 'hidden_danger_label', 'enterprise_type','enterprise_scale',
     'economic_type','area_id', "hidden_danger_status","check_type", "ehs_yes_no"],
-  components:{ importUpload,enterpriseSelect  },
+  components:{ importUpload,enterpriseSelect,myImagePreview  },
   data() {
     return {
       // 遮罩层
diff --git a/ruoyi-ui/src/views/ehs/ehsHiddenDanger/myImagePreview.vue b/ruoyi-ui/src/views/ehs/ehsHiddenDanger/myImagePreview.vue
new file mode 100644
index 0000000..de8c3c6
--- /dev/null
+++ b/ruoyi-ui/src/views/ehs/ehsHiddenDanger/myImagePreview.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="image-preview-container">
+    <el-image
+      v-for="(imageSrc, index) in realSrcList"
+      :key="index"
+      :src="imageSrc"
+      fit="cover"
+      :style="`width:${realWidth};height:${realHeight};`"
+      :preview-src-list="realSrcList"
+    >
+      <div slot="error" class="image-slot">
+        <i class="el-icon-picture-outline"></i>
+      </div>
+    </el-image>
+  </div>
+</template>
+
+<script>
+import { isExternal } from "@/utils/validate";
+
+export default {
+  name: "ImagePreview",
+  props: {
+    src: {
+      type: String,
+      default: ""
+    },
+    width: {
+      type: [Number, String],
+      default: ""
+    },
+    height: {
+      type: [Number, String],
+      default: ""
+    }
+  },
+  computed: {
+    realSrcList() {
+      if (!this.src) {
+        return [];
+      }
+      return this.src.split(",").map(item => {
+        if (isExternal(item)) {
+          return item;
+        }
+        return `${process.env.VUE_APP_BASE_API}${item}`;
+      });
+    },
+    realWidth() {
+      return typeof this.width === "string" ? this.width : `${this.width}px`;
+    },
+    realHeight() {
+      return typeof this.height === "string" ? this.height : `${this.height}px`;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.image-preview-container {
+  display: flex;
+  flex-wrap: wrap;
+  .el-image {
+    margin-right: 10px;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    background-color: #ebeef5;
+    box-shadow: 0 0 5px 1px #ccc;
+
+    ::v-deep .el-image__inner {
+      transition: all 0.3s;
+      cursor: pointer;
+
+      &:hover {
+        transform: scale(1.2);
+      }
+    }
+
+    ::v-deep .image-slot {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      color: #909399;
+      font-size: 30px;
+    }
+  }
+}
+</style>