sl-sfy-safety/src/views/datamanager/alertformdata/components/common/DetailDialog.vue

<template>
  <div>
    <el-dialog v-model="visible" title="问题详情" width="80%" align-center :close-on-click-modal="false">
      <div class="description-box">
        <div class="title">问题描述</div>
        <p>{{ description }}</p>
      </div>
      <div>
        <div class="title">问题图片/视频</div>
        <div class="media-box">
          <div class="img-box" v-for="(imagePath, index) in imagePaths" :key="index">
            <img :src="imagePath" alt="" style="object-fit:contain; width:200px; height:200px; border: solid 1px #CCC"
              @mouseenter="handleOpenPre(imagePath, index)">
            <div class="cover-box" v-if="isCoverVisible(index)" @mouseleave="handleClosePre(index)">
              <el-icon :size="40" color="#e6e6e6" style="cursor: pointer;" @click="handlePreview">
                <ZoomIn />
              </el-icon>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, toRefs, watch } from 'vue';
import { ZoomIn } from '@element-plus/icons-vue';

const props = defineProps({
  showDrawer: Boolean,
  description: String,
  imagePaths: Array<string>,
});
const { showDrawer } = toRefs(props);

const emits = defineEmits(['toggleStatus']);
const visible = ref(false);

const toggle = (newVal: boolean) => {
  visible.value = newVal;
};

watch(
  () => showDrawer.value,
  (newVal) => {
    toggle(newVal)
  }
);

watch(
  () => visible.value,
  (newVal) => {
    emits('toggleStatus', newVal)
  }
);

const showPreview = ref<boolean[]>(new Array(props.imagePaths?.values.length).fill(false));
const dialogVisible = ref(false);
const dialogImageUrl = ref('');

const handleOpenPre = (val, index) => {
  dialogImageUrl.value = val;
  showPreview.value[index] = true;
};

const handleClosePre = (index) => {
  showPreview.value[index] = false;
};

const isCoverVisible = (index) => {
  return showPreview.value[index];
};

const handlePreview = () => {
  dialogVisible.value = true;
};


</script>

<style scoped>
:deep(.el-dialog) {
  padding: 0;
  background: #FFFFFF;
  box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);

  .el-dialog__header {
    display: flex;
    align-items: center;
    height: 56px;
    padding-left: 24px;
    padding-bottom: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .el-dialog__title {
    color: rgba(0, 0, 0, 0.88);
    font-size: 16px;
    font-weight: 500;
  }

  .el-dialog__headerbtn .el-dialog__close {
    color: #000;
  }

  .el-dialog__body {
    height: 564px;
    padding: 40px;
    overflow: scroll;
  }
}

.title {
  margin-bottom: 20px;
  color: #303133;
  font-size: 16px;
  font-weight: 500;
}

.title:before {
  margin-right: 8px;
  content: '';
  border-left: 3px solid #1777FF;
}

.description-box {
  margin-bottom: 20px;

  p {
    color: #606266;
  }
}

.media-box {
  display: flex;

  .img-box {
    position: relative;
    width: 200px;
    height: 200px;
    margin-right: 10px;
  }

  .cover-box {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    width: 200px;
    height: 200px;
    background-color: rgba(0, 0, 0, 0.5);
  }

}
</style>