无人机管理后台前端(已迁走)
张含笑
2025-09-01 2ca94de8ede18ac07ccfd8dec7b6f6a707adde9b
src/views/resource/components/spotDetails.vue
@@ -27,7 +27,6 @@
                  <template v-if="item.name === '图斑类型'">
                    <el-select
                      v-model="item.value"
                      size="small"
                      placeholder="请选择图斑类型"
                      style="width: 100%"
                    >
@@ -40,7 +39,7 @@
                    </el-select>
                  </template>
                  <template v-else-if="item.name === '文件名称'">
                    <el-input v-model="item.value" size="small" />
                    <el-input v-model="item.value" />
                  </template>
                </template>
                <template v-else>
@@ -79,10 +78,8 @@
              </el-table-column>
              <el-table-column label="操作" align="center" v-if="props.title === '图斑编辑'">
                <template #default="scope">
                  <span class="operationspan">删除</span>
                  <span class="operationspan" @click.stop="handleSelectionChange(scope.row)"
                    >编辑</span
                  >
                  <span class="operationspan" @click="handleDelete(scope.row)">删除</span>
                  <span class="operationspan" @click="handleSelectionChange(scope.row)">编辑</span>
                </template>
              </el-table-column>
            </el-table>
@@ -120,13 +117,14 @@
</template>
<script setup>
import { ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  patchEditApi,
  spotManagementTableApi,
  searchManagementApi,
  uploadManagementApi,
  tableMapListApi,
  deletePatches,
} from '@/api/patchManagement/index';
import { getCenterPoint } from '@/utils/cesium/mapUtil.js';
import { getPatchesSpotList } from '@/api/patchManagement/index';
@@ -164,7 +162,7 @@
const spotTypeOptions = ref([]);
const infoList = ref([
  { name: '文件名称', value: '', field: 'file_name', editable: true },
  { name: '图斑类型', value: '', field: 'patches_type_desc', editable: true },
  { name: '图斑类型', value: '', field: 'lot_type_id', editable: true },
  { name: '图斑数量', value: '', field: 'patches_num', editable: false },
  { name: '异常图斑数量', value: '', field: 'exception_num', editable: false },
  { name: '行政区划', value: '', field: 'areaName', editable: false },
@@ -176,7 +174,10 @@
  () => props.spotTypeOption,
  newOptions => {
    if (newOptions) {
      spotTypeOptions.value = newOptions;
      spotTypeOptions.value = newOptions.map(opt => ({
        label: opt.label,
        value: String(opt.value),
      }));
    }
  },
  { immediate: true }
@@ -190,15 +191,38 @@
  },
  { immediate: true }
);
// 更新infoList的方法
// 将 lot_type_id 转换为对应的 label
const getPatchTypeLabel = lotTypeId => {
  const option = spotTypeOptions.value.find(opt => opt.value === String(lotTypeId));
  return option ? option.label : '';
};
const updateInfoList = detailData => {
  infoList.value = infoList.value.map(item => {
    // 根据field字段匹配props.detailList中的值
    const fieldValue = detailData[item.field];
    let value = detailData[item.field] !== undefined ? detailData[item.field] : item.value;
    // 处理图斑类型字段
    if (item.name === '图斑类型') {
      // 如果有 patches_type_desc,显示它(但存储的是 lot_type_id)
      if (detailData.patches_type_desc !== undefined) {
        return {
          ...item,
          value: detailData.patches_type_desc,
          // 保留原始 lot_type_id 用于提交
          originalValue: detailData.lot_type_id,
        };
      }
      // 否则根据 lot_type_id 查找对应的 label
      else if (detailData.lot_type_id !== undefined) {
        return {
          ...item,
          value: getPatchTypeLabel(detailData.lot_type_id),
          originalValue: detailData.lot_type_id,
        };
      }
    }
    return {
      ...item,
      value: fieldValue !== undefined ? fieldValue : item.value,
      value: value,
    };
  });
};
@@ -212,8 +236,10 @@
    patchesInfoId: props.detailid,
  };
  tableMapListApi(params).then(res => {
    console.log('地图表格数据', res.data.data);
    tableData.value = res.data.data;
    tableData.value = res.data.data.map(item => ({
      ...item,
      dkfw: item.sdfw && item.is_exception == 1 ? item.sdfw : item.dkfw,
    }));
    // 先清空地图现有图斑
    tbJwdList = [];
    viewer?.entities.removeAll(); // 清除所有实体
@@ -300,21 +326,21 @@
// 鼠标触发点击图斑高亮 pick:可以获取当前图斑数据
const spotHighlighting = (click, pick, viewer) => {
  if (!pick || !(pick.id?.customType == 'pattern_spot_polygon')) return;
     let clickTableID = tableData.value.findIndex(i => i.id == pick.id?.customInfo.id)
       // 计算表格滚动至中间位置
   const rows = polygonTableEle?.value.$el.querySelectorAll('.el-table__body tr')
   let targetRow = rows[clickTableID]
   nextTick(() => {
      const table = polygonTableEle?.value
      if (!table) return
      if (targetRow) {
         targetRow.scrollIntoView({
            behavior: 'smooth',
            block: 'center',
         })
         polygonTableEle?.value.setCurrentRow(tableData.value[clickTableID])
      }
   })
  let clickTableID = tableData.value.findIndex(i => i.id == pick.id?.customInfo.id);
  // 计算表格滚动至中间位置
  const rows = polygonTableEle?.value.$el.querySelectorAll('.el-table__body tr');
  let targetRow = rows[clickTableID];
  nextTick(() => {
    const table = polygonTableEle?.value;
    if (!table) return;
    if (targetRow) {
      targetRow.scrollIntoView({
        behavior: 'smooth',
        block: 'center',
      });
      polygonTableEle?.value.setCurrentRow(tableData.value[clickTableID]);
    }
  });
  // 表格也对应选中数据 TODO
  const data = pick.id?.customInfo;
  // 高亮图斑
@@ -379,7 +405,6 @@
};
// 编辑
const handleSelectionChange = row => {
  // console.log('编辑', row.id);
  let curRowIsSelect = row;
  selectionIds.value = row.id;
  selectionList.value = row;
@@ -392,19 +417,35 @@
    isDrawPolygon.value = false;
  }
};
// 删除
const handleDelete = row => {
  ElMessageBox.confirm('确认删除当前行图斑?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deletePatches({ ids: row.id }).then(res => {
      if (res.data.code !== 0) return ElMessage.warning('删除失败');
      ElMessage.success('删除成功');
      getTableList();
    });
  });
};
// 完成
const handleSave = () => {
  const fileNameItem = infoList.value.find(item => item.name === '文件名称');
  const patchTypeItem = infoList.value.find(item => item.name === '图斑类型');
  const updateParams = {
    file_name: fileNameItem?.value || '',
    lot_type_id: patchTypeItem?.value || '',
    type: patchTypeItem?.value || '',
    lot_type_id: patchTypeItem?.originalValue || patchTypeItem?.value || '',
    type: patchTypeItem?.originalValue || patchTypeItem?.value || '',
    id: props.detailList.id,
  };
  console.log('保存', updateParams);
  patchEditApi(updateParams).then(res => {
    console.log('111', res.data.data);
    ElMessage.success(res.data.data);
    refreshonload();
    uploadPatchDialog.value = false;