新疆马铃薯 1.设备巡检查看附件只看生产异常的

gaoluyang

2026-06-01 951e12b5564d7c9556606b82ebc92136a06659df

新疆马铃薯
1.设备巡检查看附件只看生产异常的

 src/views/equipmentManagement/inspectionManagement/components/viewFiles.vue

@@ -3,77 +3,23 @@
    <el-dialog title="查看附件"
               v-model="dialogVisitable" width="800px" @close="cancel">
      <div class="upload-container">
        <!-- 生产前 -->
        <!-- 生产异常 -->
        <div class="form-container">
          <div class="title">生产前</div>
          
          <div class="title">生产异常</div>

          <!-- 图片列表 -->
          <div style="display: flex; flex-wrap: wrap;">
            <img v-for="(item, index) in beforeProductionImgs" :key="index"
                 @click="showMedia(beforeProductionImgs, index, 'image')"
            <img v-for="(item, index) in productionAbnormalImgs" :key="index"
                 @click="showMedia(productionAbnormalImgs, index, 'image')"
                 :src="item" style="max-width: 100px; height: 100px; margin: 5px;" alt="">
          </div>
          

          <!-- 视频列表 -->
          <div style="display: flex; flex-wrap: wrap;">
            <div
                v-for="(videoUrl, index) in beforeProductionVideos"
                v-for="(videoUrl, index) in productionAbnormalVideos"
                :key="index"
                @click="showMedia(beforeProductionVideos, index, 'video')"
                style="position: relative; margin: 10px; cursor: pointer;"
            >
              <div style="width: 160px; height: 90px; background-color: #333; display: flex; align-items: center; justify-content: center;">
                <img src="@/assets/images/video.png" alt="播放" style="width: 30px; height: 30px; opacity: 0.8;" />
              </div>
              <div style="text-align: center; font-size: 12px; color: #666;">点击播放</div>
            </div>
          </div>
        </div>
				
                <!-- 生产中 -->
                <div class="form-container">
                    <div class="title">生产中</div>
					
                    <!-- 图片列表 -->
                    <div style="display: flex; flex-wrap: wrap;">
                        <img v-for="(item, index) in productionIssuesImgs" :key="index"
                       @click="showMedia(productionIssuesImgs, index, 'image')"
                       :src="item" style="max-width: 100px; height: 100px; margin: 5px;" alt="">
                    </div>
					
                    <!-- 视频列表 -->
                    <div style="display: flex; flex-wrap: wrap;">
                        <div
                            v-for="(videoUrl, index) in productionIssuesVideos"
                      :key="index"
                      @click="showMedia(productionIssuesVideos, index, 'video')"
                      style="position: relative; margin: 10px; cursor: pointer;"
                        >
                            <div style="width: 160px; height: 90px; background-color: #333; display: flex; align-items: center; justify-content: center;">
                                <img src="@/assets/images/video.png" alt="播放" style="width: 30px; height: 30px; opacity: 0.8;" />
                            </div>
                            <div style="text-align: center; font-size: 12px; color: #666;">点击播放</div>
                        </div>
                    </div>
                </div>
				
        <!-- 生产后 -->
        <div class="form-container">
          <div class="title">生产后</div>
          
          <!-- 图片列表 -->
          <div style="display: flex; flex-wrap: wrap;">
            <img v-for="(item, index) in afterProductionImgs" :key="index"
                 @click="showMedia(afterProductionImgs, index, 'image')"
                 :src="item" style="max-width: 100px; height: 100px; margin: 5px;" alt="">
          </div>
          
          <!-- 视频列表 -->
          <div style="display: flex; flex-wrap: wrap;">
            <div
                v-for="(videoUrl, index) in afterProductionVideos"
                :key="index"
                @click="showMedia(afterProductionVideos, index, 'video')"
                @click="showMedia(productionAbnormalVideos, index, 'video')"
                style="position: relative; margin: 10px; cursor: pointer;"
            >
              <div style="width: 160px; height: 90px; background-color: #333; display: flex; align-items: center; justify-content: center;">
@@ -85,7 +31,7 @@
        </div>
      </div>
    </el-dialog>
    

    <!-- 统一媒体查看器 -->
    <div v-if="isMediaViewerVisible" class="media-viewer-overlay" @click.self="closeMediaViewer">
      <div class="media-viewer-content" @click.stop>
@@ -97,7 +43,7 @@
            :index="currentMediaIndex"
            @hide="closeMediaViewer"
        ></vue-easy-lightbox>
        

        <!-- 视频 -->
        <div v-else-if="mediaType === 'video'" style="position: relative;">
          <video
@@ -112,7 +58,7 @@
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { ref, getCurrentInstance } from 'vue';
import VueEasyLightbox from 'vue-easy-lightbox';
const { proxy } = getCurrentInstance();

@@ -120,14 +66,10 @@
const dialogVisitable = ref(false);

// 图片数组
const beforeProductionImgs = ref([]);
const afterProductionImgs = ref([]);
const productionIssuesImgs = ref([]);
const productionAbnormalImgs = ref([]);

// 视频数组
const beforeProductionVideos = ref([]);
const afterProductionVideos = ref([]);
const productionIssuesVideos = ref([]);
const productionAbnormalVideos = ref([]);

// 媒体查看器状态
const isMediaViewerVisible = ref(false);
@@ -139,7 +81,7 @@
// 处理 URL：将 Windows 路径转换为可访问的 URL
function processFileUrl(fileUrl) {
  if (!fileUrl) return '';
  

  // 如果 URL 是 Windows 路径格式（包含反斜杠），需要转换
  if (fileUrl && fileUrl.indexOf('\\') > -1) {
    // 查找 uploads 关键字的位置，从那里开始提取相对路径
@@ -155,7 +97,7 @@
      fileUrl = '/uploads/' + fileName;
    }
  }
  

  // 确保所有非 http 开头的 URL 都拼接 baseUrl
  if (fileUrl && !fileUrl.startsWith('http')) {
    // 确保路径以 / 开头
@@ -165,7 +107,7 @@
    // 拼接 baseUrl
    fileUrl = javaApi + fileUrl;
  }
  

  return fileUrl;
}

@@ -173,18 +115,18 @@
function processItems(items) {
  const images = [];
  const videos = [];
  

  // 检查 items 是否存在且为数组
  if (!items || !Array.isArray(items)) {
    return { images, videos };
  }
  

  items.forEach(item => {
    if (!item || !item.url) return;
    

    // 处理文件 URL
    const fileUrl = processFileUrl(item.url);
    

    // 根据文件扩展名判断是图片还是视频
    const urlLower = fileUrl.toLowerCase();
    if (urlLower.match(/\.(jpg|jpeg|png|gif|bmp|webp)$/)) {
@@ -200,27 +142,19 @@
      }
    }
  });
  

  return { images, videos };
}

// 打开弹窗并加载数据
const openDialog = async (row) => {
  // 使用正确的字段名：commonFileListBefore, commonFileListAfter
  // productionIssues 可能不存在，使用空数组
  const { images: beforeImgs, videos: beforeVids } = processItems(row.commonFileListBefore || []);
  const { images: afterImgs, videos: afterVids } = processItems(row.commonFileListAfter || []);
  const { images: issueImgs, videos: issueVids } = processItems(row.productionIssues || []);
  
  beforeProductionImgs.value = beforeImgs;
  beforeProductionVideos.value = beforeVids;
  
  afterProductionImgs.value = afterImgs;
  afterProductionVideos.value = afterVids;
  
  productionIssuesImgs.value = issueImgs;
  productionIssuesVideos.value = issueVids;
  
  // 使用 commonFileListBeforeDTO 或 commonFileListBeforeVO 字段
  const fileList = row.commonFileListBeforeDTO || row.commonFileListBeforeVO || [];
  const { images, videos } = processItems(fileList);

  productionAbnormalImgs.value = images;
  productionAbnormalVideos.value = videos;

  dialogVisitable.value = true;
};

@@ -254,7 +188,7 @@
  padding: 20px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  

  .form-container {
    flex: 1;
    width: 100%;
@@ -270,7 +204,7 @@
  padding-left: 10px;
  position: relative;
  margin: 6px 0;
  

  &::before {
    content: "";
    position: absolute;
@@ -301,4 +235,4 @@
  max-height: 90vh;
  overflow: hidden;
}
</style>
</style>

 src/views/equipmentManagement/inspectionManagement/index.vue

@@ -81,7 +81,6 @@
          total,
          layout: 'total, sizes, prev, pager, next, jumper',
        }"
        :table-style="{ width: '100%', height: 'calc(100vh - 23em)' }"
        @selection-change="handleSelectionChange"
        @pagination="handlePagination"
      >