图片预览

whychdw

8 小时以前 f976915610988768a33aa9f0e4b31ebac04dfd74

图片预览

 src/components/PicturePreview/const_list.js

New file
@@ -0,0 +1,40 @@
export default [
  {
    time: "2025-10-1 00:00:00",
    list: [
      'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
      'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
      'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
      'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
      'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
      'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
      'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
    ],
  },
  {
    time: "2024-10-1 00:00:00",
    list: [
      'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
      'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
      'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
    ],
  },
  {
    time: "2023-10-1 00:00:00",
    list: [
      'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
      'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
      'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
      'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
    ],
  },
  {
    time: "2022-10-1 00:00:00",
    list: [
      'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
      'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
      'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
    ],
  }
];

 src/components/PicturePreview/dialog/timeLinePicture.vue

New file
@@ -0,0 +1,93 @@
<script setup>
const props = defineProps({
  list: {
    type: Array,
    default() {
      return [];
    }
  }
});
</script>

<template>
  <div class="time-line-picture-wrapper">
    <el-scrollbar>
      <el-timeline>
        <el-timeline-item
          v-for="(item, key) in list" :key="'key'+key"
          :timestamp="item.time" placement="top">
          <el-card>
            <div class="picture-list-wrapper">
              <div
                class="picture-item"
                v-for="(item1, key1) in item.list" :key="'key'+key1"
              >
                <div class="image-wrapper">
                  <el-image
                    style="width: 274px; height: auto"
                    :src="item1"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="[item1]"
                    show-progress
                    icon="timer"
                    fit="fill"
                    :preview-teleported="true"
                  />
                </div>
                <div class="top-tool">
                  <el-button type="danger" icon="delete">删除</el-button>
                </div>
                <div class="footer-tool">
                  <el-button type="default" icon="download">下载</el-button>
                </div>
              </div>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-scrollbar>
  </div>
</template>

<style scoped lang="less">
.time-line-picture-wrapper {
  width: 1200px;
  height: 800px;
}
.picture-list-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  .picture-item {
    position: relative;
    margin-right: 8px;
    margin-bottom: 8px;
    .image-wrapper {
      border-radius: 8px 8px 16px 16px;
      overflow: hidden;
    }
    &:hover {
      .top-tool {
        display: block;
      }
      .footer-tool {
        display: block;
      }
    }
    .top-tool {
      position: absolute;
      display: none;
      top: 8px;
      right: 8px;
    }
    .footer-tool {
      position: absolute;
      display: none;
      bottom: 8px;
      right: 8px;
    }
  }
}
</style>

 src/components/PicturePreview/index.vue

New file
@@ -0,0 +1,88 @@
<script setup>
import {ref, onMounted, computed} from "vue";
import timeLinePicture from './dialog/timeLinePicture.vue';
import const_list from "./const_list.js";

const listRef = ref([]);
const dialogVisible = ref(false);

const previewList = computed(()=>{
   let list = [];
   for(let i=0; i<listRef.value.length; i++) {
    if(list.length === 3) {
      break;
    }
    let picList = listRef.value[i].list;
    for(let j=0; j<picList.length; j++) {
      if(list.length === 3) {
        break;
      }
      list.push(picList[j]);
    }
   }
   return list;
});

function previewMore() {
  dialogVisible.value = true;
}

onMounted(()=>{
  listRef.value = const_list;
});
</script>

<template>
  <div class="picture-preview-wrapper">
    <div class="picture-list">
      <div class="picture-item" v-for="(item, key) in previewList" :key="'key'+key">
        <el-image
          style="width: 100%; height: 100%"
          :src="item"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="[item]"
          show-progress
          fit="cover"
          :preview-teleported="true"
        />
      </div>
    </div>
    <div class="picture-button">
      <el-button type="primary" @click="previewMore">预览更多</el-button>
    </div>
    <el-dialog
      title="图片预览"
      v-model="dialogVisible"
      :close-on-click-modal="false"
      class="dialog-center"
      align-center
      width="auto"
      draggable
      destroy-on-close
      :append-to-body="true"
      center>
      <time-line-picture :list="listRef"></time-line-picture>
    </el-dialog>
  </div>
</template>

<style scoped lang="less">
.picture-preview-wrapper {
  .picture-list {
    display: flex;
    flex-direction: row;
    min-width: 150px;
    height: 50px;
    .picture-item {
      flex: 1;
      padding: 0 2px;
    }
  }
  .picture-button {
    padding-top: 8px;
    text-align: center;
  }
}
</style>

 src/views/dcPowerStatus/standardParams.vue

@@ -9,6 +9,7 @@
import useElement from "@/hooks/useElement.js";
import downloadFile from "@/utils/downloadFile.js";
import {ExportFile} from "@/utils/exportFile.js";
import picturePreview from "@/components/PicturePreview/index.vue";

const {$loading, $message} = useElement();
const headers = [
@@ -50,6 +51,11 @@
  {
    prop: "fileName",
    label: "规范文件名称",
    width: "160",
  },
  {
    prop: "preview",
    label: "预览",
    width: "160",
  },
];
@@ -205,6 +211,14 @@
                  <el-table class="yc-table" stripe height="100%" :data="listRef" style="width: 100%">
                    <el-table-column show-overflow-tooltip v-for="header in headers" :key="header.prop" :prop="header.prop" :label="header.label"
                                     :min-width="header.width" align="center">
                      <template #default="scope">
                        <template v-if="header.prop === 'preview'">
                          <picture-preview></picture-preview>
                        </template>
                        <template v-else>
                          {{ scope.row[header.prop] || '--' }}
                        </template>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="180" align="center">
                      <template #default="scope">