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

shuishen

2025-04-28 52400689983bf1240a6bca88236d99191d7e6056

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

 src/views/tickets/ticket.vue

@@ -50,10 +50,10 @@
              </template>
            </template>
            <template #status="{ row }">
  <span :style="getStatusTagType(row.status) ? 'color:' + getStatusTagType(row.status) : ''">
    {{ mapStatus(row.status) }}
  </span>
</template>
              <span :style="getStatusTagType(row.status) ? 'color:' + getStatusTagType(row.status) : ''">
                {{ mapStatus(row.status) }}
              </span>
            </template>
            <template #keyData="{ row }">
              <span>{{ row.address }}</span>
            </template>
@@ -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>
                    <map-container v-if='detailVisible' ref="MapContainer"></map-container>
                  </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">
          <!-- 修改左右箭头的显示条件 -->
@@ -1207,18 +1191,18 @@
    },

    getStatusTagType(status) {
  // 草稿不加颜色
  if (status === -1 || status === "-1") return '';
  // 状态颜色映射
  const colorMap = {
    "0": "#ffb6b6",    // 待处理-淡红
    "3": "#e57373",    // 处理中-更淡红
    "2": "#faad14",    // 待审核-橙色
    "4": "#a0cfff",    // 已完成-淡蓝
    "5": "#67c23a",    // 已完结-绿色
  };
  return colorMap[String(status)] || '';
},
      // 草稿不加颜色
      if (status === -1 || status === "-1") return '';
      // 状态颜色映射
      const colorMap = {
        "0": "#ffb6b6",    // 待处理-淡红
        "3": "#e57373",    // 处理中-更淡红
        "2": "#faad14",    // 待审核-橙色
        "4": "#a0cfff",    // 已完成-淡蓝
        "5": "#67c23a",    // 已完结-绿色
      };
      return colorMap[String(status)] || '';
    },

    async fetchTabCounts() {
      try {
@@ -1689,7 +1673,7 @@
    },
    async approveAndDispatch() {
      if (this.dispatchLoading) return;
      

      // 添加必填项检查
      if (!this.currentDetail.orderName || !this.currentDetail.orderName.trim()) {
        this.$message.warning('请填写工单名称');
@@ -1703,7 +1687,7 @@
        this.$message.warning('请填写工单内容');
        return;
      }
      

      // 通过验证后,打开派发对话框
      this.dispatchDialogVisible = true;
    },
@@ -2058,10 +2042,10 @@

    cancleBatchReject() {
      this.reviewDialogVisible = false;
  this.selections = [];
  this.currentImageIndex = 1;
  this.currentReviewImage = '';
  this.fetchTableData();
      this.selections = [];
      this.currentImageIndex = 1;
      this.currentReviewImage = '';
      this.fetchTableData();
    },
    // 批量审核不通过
    async handleBatchReject() {
@@ -2517,20 +2501,32 @@
}

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

.media-title {
  font-weight: bold;
  margin-bottom: 10px;
}
  .media-title {
    font-weight: bold;
    margin-bottom: 10px;
  }

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

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

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

.image-placeholder,
@@ -2804,12 +2800,12 @@
    height: 100px;
    line-height: 100px;
  }
  

  /* 隐藏额外的上传按钮 */
  :deep(.el-upload.el-upload--picture-card) {
    display: none;
  }
  

  /* 当没有图片时显示上传按钮 */
  :deep(.el-upload.el-upload--picture-card:first-child) {
    display: flex;
@@ -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;
    }
  }
}

@@ -2849,7 +2831,7 @@
.required-label {
  position: relative;
  display: inline-block;
  

  .required-star {
    color: #F56C6C;
    margin-right: 4px;
@@ -2859,7 +2841,7 @@
/* 必填输入框样式 */
.required-input {
  width: 100%;
  

  :deep(.el-input__inner),
  :deep(.el-textarea__inner) {
    &:focus {