事件工单详情图片和地图显示异常处理

shuishen

2025-04-28 52400689983bf1240a6bca88236d99191d7e6056

事件工单详情图片和地图显示异常处理

 src/views/tickets/ticket.vue

@@ -133,17 +133,9 @@
            </el-col>
            <el-col :span="12">
              <el-form-item label="附件图片" prop="photos" required class="upload-wrapper">
                <el-upload ref="upload" 
                  :action="'#'" 
                  :auto-upload="false" 
                  list-type="picture-card"
                  :on-change="handleFileChange" 
                  :on-remove="handleUploadRemove" 
                  :before-upload="beforeUpload"
                  :file-list="form.photos" 
                  :limit="1" 
                  accept="image/*" 
                  class="create-upload">
                <el-upload ref="upload" :action="'#'" :auto-upload="false" list-type="picture-card"
                  :on-change="handleFileChange" :on-remove="handleUploadRemove" :before-upload="beforeUpload"
                  :file-list="form.photos" :limit="1" accept="image/*" class="create-upload">
                  <template v-if="form.photos.length < 1">
                    <i class="el-icon-plus">+</i>
                  </template>
@@ -244,7 +236,8 @@
          <el-table-column prop="label2" label="基本信息" width="150">
            <template #default="{ row }">
              <!-- 添加必填星号的标签 -->
              <span v-if="currentDetail.status === 0 && (row.label2 === '工单类型' || row.label2 === '工单内容')" class="required-label">
              <span v-if="currentDetail.status === 0 && (row.label2 === '工单类型' || row.label2 === '工单内容')"
                class="required-label">
                <span class="required-star">*</span>{{ row.label2 }}
              </span>
              <span v-else>{{ row.label2 }}</span>
@@ -259,7 +252,8 @@
                </el-select>
              </template>
              <template v-else-if="currentDetail.status === 0 && row.label2 === '工单内容' && hasProcessingBtnPermission()">
                <el-input type="textarea" v-model="currentDetail.content" placeholder="请输入工单内容" class="required-input" />
                <el-input type="textarea" v-model="currentDetail.content" placeholder="请输入工单内容"
                  class="required-input" />
              </template>
              <template v-else>{{ row.value2 }}</template>
            </template>
@@ -305,17 +299,9 @@
              上传图片
            </template>
          </div>
          <el-upload v-if="hasProcessedAndOverBtnPermission()" 
            ref="upload" 
            :action="'#'" 
            :auto-upload="false"
            list-type="picture-card" 
            :on-change="handleFileChange" 
            :on-remove="handleUploadRemove"
            :before-upload="beforeUpload" 
            :file-list="currentDetail.photos || []" 
            :limit="1"
            accept="image/*"
          <el-upload v-if="hasProcessedAndOverBtnPermission()" ref="upload" :action="'#'" :auto-upload="false"
            list-type="picture-card" :on-change="handleFileChange" :on-remove="handleUploadRemove"
            :before-upload="beforeUpload" :file-list="currentDetail.photos || []" :limit="1" accept="image/*"
            class="detail-upload">
            <template v-if="!currentDetail.photos || currentDetail.photos.length < 1">
              <i class="el-icon-plus">+</i>
@@ -360,8 +346,7 @@
                  <div class="media-title">工单处理图片</div>
                  <div class="media-content">
                    <el-image v-if="currentDetail.updatePhotoUrl" :src="getThumbUrl(currentDetail.updatePhotoUrl)"
                      :preview-src-list="[getPreviewUrl(currentDetail.updatePhotoUrl)]" fit="fill"
                      style="width: 700px; height: 520px; cursor: pointer;">
                      :preview-src-list="[getPreviewUrl(currentDetail.updatePhotoUrl)]" fit="fill">
                      <template #placeholder>
                        <div class="image-placeholder">
                          <i class="el-icon-picture-outline"></i>
@@ -381,9 +366,7 @@
                <template v-else>
                  <div class="media-title">地图标记事件点</div>
                  <div class="media-content">
                    <div id="map-container" style="width: 700px; height: 520px; background: #f5f5f5;">
                      <map-container v-if='detailVisible' ref="MapContainer"></map-container>
                    </div>
                  </div>
                </template>
              </div>
@@ -449,7 +432,8 @@
    </el-dialog>

    <!-- 添加在其他 dialog 组件之后 -->
    <el-dialog v-model="reviewDialogVisible" title="批量审核" width="70%" append-to-body custom-class="review-dialog"   @close="cancleBatchReject">
    <el-dialog v-model="reviewDialogVisible" title="批量审核" width="70%" append-to-body custom-class="review-dialog"
      @close="cancleBatchReject">
      <div class="review-container">
        <div class="review-image-wrapper">
          <!-- 修改左右箭头的显示条件 -->
@@ -2517,11 +2501,12 @@
}

.media-box {
  width: 100%;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 10px;
  background: #fff;
}
  box-sizing: border-box;

.media-title {
  font-weight: bold;
@@ -2530,7 +2515,18 @@

.media-content {
  position: relative;
  // height: 300px;
    height: 500px;

    :deep(.el-image) {
      width: 100% !important;

      .el-image__inner {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }
}

.image-placeholder,
@@ -2819,20 +2815,6 @@
  :deep(.el-upload-list--picture-card .el-upload-list__item) {
    width: 120px;
    height: 100px;
  }
}

/* 事件图片和处理图片的预览样式 */
.media-content {
  :deep(.el-image) {
    width: 700px !important;
    height: 520px !important;
    
    .el-image__inner {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}