无人机管理后台前端(已迁走)
张含笑
2025-09-05 403bfae8cec401993661f411861fa5f48d6092e9
feat:添加接口,调整参数
4 files modified
1 files added
188 ■■■■■ changed files
src/api/patchManagement/index.js 8 ●●●●● patch | view | raw | blame | history
src/utils/areaUtils.js 37 ●●●●● patch | view | raw | blame | history
src/utils/cesium/publicCesium.js 1 ●●●● patch | view | raw | blame | history
src/views/resource/components/spotDetails.vue 111 ●●●●● patch | view | raw | blame | history
src/views/resource/patchManagement.vue 31 ●●●●● patch | view | raw | blame | history
src/api/patchManagement/index.js
@@ -103,4 +103,12 @@
        method: 'delete',
        params,
    })
}
// 获取所有图斑数据
export const AlltableMapListApi = params => {
    return request({
        url: `/drone-device-core/patches/api/v1/Patches/getLotInfoList`,
        method: 'get',
        params,
    })
}
src/utils/areaUtils.js
New file
@@ -0,0 +1,37 @@
/**
 * 根据行政区划代码查找对应的行政区划名称
 * @param {string|number} areaCode - 行政区划代码
 * @param {Array} regionalData - 行政区划树形数据
 * @param {boolean} [needFullPath=false] - 是否需要完整路径
 * @returns {string} 行政区划名称或完整路径
 */
export const findAreaName = (areaCode, regionalData = [], needFullPath = false) => {
    if (!regionalData || regionalData.length === 0) return areaCode;
    const normalizeCode = code => {
      if (!code) return '';
      const strCode = String(code).replace(/0+$/, '');
      return strCode.length >= 6 ? strCode : '';
    };
    const targetCode = normalizeCode(areaCode);
    const findInTree = (treeNodes, parentPath = []) => {
      for (const node of treeNodes) {
        const currentPath = [...parentPath, node.name];
        if (normalizeCode(node.id) === targetCode) {
          return needFullPath ? currentPath.join('/') : node.name;
        }
        if (node.childrens?.length > 0) {
          const found = findInTree(node.childrens, currentPath);
          if (found) return found;
        }
      }
      return null;
    };
    return findInTree(regionalData) || areaCode;
  };
src/utils/cesium/publicCesium.js
@@ -209,6 +209,7 @@
    async switchContour (open) {
        if (open) {
            await this.boundary?.openContour()
        } else {
            this.boundary?.closeContour()
        }
src/views/resource/components/spotDetails.vue
@@ -122,10 +122,13 @@
<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
import { findAreaName } from '@/utils/areaUtils';
import {
  patchEditApi,
  tableMapListApi,
  deletePatches,
  AlltableMapListApi,
  spotManagementTableApi,
} from '@/api/patchManagement/index';
import { getCenterPoint } from '@/utils/cesium/mapUtil.js';
@@ -134,19 +137,21 @@
import { ref, watch, onBeforeUnmount, onMounted } from 'vue';
import FunButton from '@/views/resource/components/FunButton.vue';
const uploadPatchDialog = defineModel('show');
const props = defineProps(['title', 'detailid', 'detailList', 'spotTypeOption']);
const props = defineProps(['title', 'detailid', 'detailList', 'spotTypeOption', 'regionalData']);
const polygonTableEle = ref(null);
let publicCesiumInstance = null;
let viewer = null;
const viewInstance = shallowRef(null);
const homeViewer = shallowRef(null);
let tbJwdList = [];
const tableData = ref([]);
const AlltableData = ref([]);
let total = ref(0);
const refreshonload = inject('searchReset');
const initialFileName = ref('');
const initialSpotTypeId = ref('');
const initialSpotTypeLabel = ref('');
// 当前选中的图斑面数据
const spotManagementData = ref(null);
// 记录上一次点击高亮
let lastHighlightRow = null;
// 功能按钮区域相关:编辑图斑等
@@ -187,48 +192,47 @@
  { immediate: true }
);
watch(
  () => props.detailList,
  () => spotManagementData.value,
  newVal => {
    if (newVal) {
      updateInfoList(newVal);
    }
    if (newVal) updateInfoList(newVal);
  },
  { immediate: true }
);
// 图斑编辑详情
const getspotManagementTableApi = () => {
  spotManagementTableApi({ id: props.detailid }).then(res => {
    spotManagementData.value = {
      ...res.data.data.records[0],
      dataFrom: res.data.data.records[0].date_from === 0 ? '本地上传' : '国土调查云',
      areaName: findAreaName(res.data.data.records[0].area_code, props.regionalData, true),
    };
  });
};
// 将 lot_type_id 转换为对应的 label
const getPatchTypeLabel = lotTypeId => {
  const option = spotTypeOptions.value.find(opt => opt.value === String(lotTypeId));
  return option ? option.label : '';
};
const updateInfoList = detailData => {
  if (detailData && (initialFileName.value === '' || initialSpotTypeId.value === '')) {
  if (!detailData) return;
  if (initialFileName.value === '' || initialSpotTypeId.value === '') {
    initialFileName.value = detailData.file_name || '';
    initialSpotTypeId.value = detailData.lot_type_id || '';
    initialSpotTypeLabel.value = detailData.patches_type_desc
      ? detailData.patches_type_desc
      : getPatchTypeLabel(detailData.lot_type_id);
    initialSpotTypeLabel.value =
      detailData.patches_type_desc || getPatchTypeLabel(detailData.lot_type_id);
  }
  infoList.value = infoList.value.map(item => {
    let value = detailData[item.field] !== undefined ? detailData[item.field] : item.value;
    const value = detailData[item.field] ?? item.value;
    if (item.name === '图斑类型') {
      if (detailData.patches_type_desc !== undefined) {
        return {
          ...item,
          value: detailData.patches_type_desc,
          originalValue: detailData.lot_type_id,
        };
      } else if (detailData.lot_type_id !== undefined) {
        return {
          ...item,
          value: getPatchTypeLabel(detailData.lot_type_id),
          originalValue: detailData.lot_type_id,
        };
      }
      return {
        ...item,
        value: detailData.patches_type_desc || getPatchTypeLabel(detailData.lot_type_id),
        originalValue: detailData.lot_type_id,
      };
    }
    return { ...item, value: value };
    return { ...item, value };
  });
};
const params = ref({
@@ -253,7 +257,22 @@
    entitiesAddSpot();
  });
};
// 所有图斑数据
const getAlltableMapListApi = () => {
  const requestParams = {
    patchesInfoId: props.detailid,
  };
  AlltableMapListApi(requestParams).then(res => {
    AlltableData.value = res.data.data?.map(item => ({
      ...item,
      dkfw: item.sdfw && item.is_exception == 1 ? item.sdfw : item.dkfw,
    }));
    tbJwdList = [];
    viewer?.entities.removeAll();
    entitiesAddSpot();
  });
};
const handleSizeChange = val => {
  params.value.pageSize = val;
  params.value.page = 1;
@@ -263,7 +282,7 @@
  params.value.page = val;
  getTableList();
};
const tableData = ref([]);
// 地图
const initMap = () => {
  if (!document.getElementById('spotMap')) {
@@ -280,11 +299,12 @@
  viewer = publicCesiumInstance.getViewer();
  viewInstance.value = publicCesiumInstance;
  viewer.scene.globe.depthTestAgainstTerrain = true;
  viewInstance.value.switchContour(true);
};
// 初始化所有图斑
const entitiesAddSpot = () => {
  viewer?.entities.removeAll();
  tableData.value.forEach(item => {
  AlltableData.value.forEach(item => {
    // 取出当中经纬度
    const numbersWithCommas = item.dkfw.match(/\d+(\.\d+)?/g);
    if (!numbersWithCommas) return;
@@ -330,10 +350,7 @@
      const boundingSphere = Cesium.BoundingSphere.fromPoints(positions);
      homeViewer.value?.camera.flyToBoundingSphere(boundingSphere, {
        duration: 0,
        offset: new Cesium.HeadingPitchRange(
          Cesium.Math.toRadians(-45),
          Cesium.Math.toRadians(-90)
        ),
        offset: new Cesium.HeadingPitchRange(Cesium.Math.toRadians(0), Cesium.Math.toRadians(-90)),
      });
    }
    viewInstance.value?.removeLeftClickEvent('spotHighlighting');
@@ -342,9 +359,7 @@
};
// 高亮当前选中图斑,并定位
// const handleLocationPolygon = data => {
//   updateMapSpotInfo(data);
// };
const getEntityByDataId = dataId => {
  if (!homeViewer.value) return null;
  const entityId = `polygon_dk${dataId}`;
@@ -376,7 +391,7 @@
    .filter(item => item.id)
    .map(i => i.id)
    .filter(i => i._customType === 'pattern_spot_polygon');
    if (!pick || !(pick.id?.customType == 'pattern_spot_polygon')) return;
  if (!pick || !(pick.id?.customType == 'pattern_spot_polygon')) return;
  const nowEntity = entities?.[0];
  const nowData = nowEntity.customInfo;
  const clickTableID = tableData.value.findIndex(i => i.id === nowData.id);
@@ -408,15 +423,14 @@
    const lastData = lastEntity.customInfo;
    const originalFillColor =
      lastData.is_exception === 2
          ? Cesium.Color.RED.withAlpha(0.5)
          : Cesium.Color.YELLOW.withAlpha(0.5);
     const originalOutlineColor = lastData.is_exception == 2
    ? Cesium.Color.RED
    : Cesium.Color.YELLOW;
        ? Cesium.Color.RED.withAlpha(0.5)
        : Cesium.Color.YELLOW.withAlpha(0.5);
    const originalOutlineColor =
      lastData.is_exception == 2 ? Cesium.Color.RED : Cesium.Color.YELLOW;
  lastEntity.polygon.material = originalFillColor;
  lastEntity.polygon.outlineColor = originalOutlineColor;
  lastEntity.polyline.material = originalOutlineColor;
    lastEntity.polygon.material = originalFillColor;
    lastEntity.polygon.outlineColor = originalOutlineColor;
    lastEntity.polyline.material = originalOutlineColor;
  }
  lastEntity = nowEntity;
  const numbersWithCommas = nowData.dkfw.match(/\d+(\.\d+)?/g);
@@ -426,7 +440,7 @@
      if (index % 2 === 0) acc.push(src.slice(index, index + 2));
      return acc;
    }, []);
    const polygonCenter = getCenterPoint(groupedArr);
    const polygonCenter = getCenterPoint(groupedArr);
    // 相机定位
    homeViewer.value.scene.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(
@@ -470,6 +484,7 @@
      if (res.data.code !== 0) return ElMessage.warning('删除失败');
      ElMessage.success('删除成功');
      getTableList();
      getspotManagementTableApi();
    });
  });
};
@@ -539,6 +554,8 @@
    setTimeout(() => {
      initMap();
      getTableList();
      getAlltableMapListApi();
      getspotManagementTableApi();
    }, 0);
  } else {
    if (funButtonEle.value) {
src/views/resource/patchManagement.vue
@@ -84,10 +84,12 @@
      :detailid="detailid"
      :detailList="detailList"
      :spotTypeOption="allspotTypeOption"
      :regionalData="regionalData"
    ></SpotDetails>
  </basic-container>
</template>
<script setup>
import {findAreaName} from '@/utils/areaUtils'
import {
  spotManagementTableApi,
  searchManagementApi,
@@ -466,40 +468,13 @@
    data.value = d.records.map(i => ({
      ...i,
      dataFrom: i.date_from === 0 ? '本地上传' : '国土调查云',
      areaName: findAreaName(i.area_code),
      areaName: findAreaName(i.area_code, regionalData.value, true)
    }));
    loading.value = false;
    selectionClear();
  });
};
const findAreaName = areaCode => {
  const nodes = regionalData.value;
  if (!nodes || nodes.length === 0) return areaCode;
  const normalizeCode = code => {
    if (!code) return '';
    const strCode = String(code).replace(/0+$/, '');
    return strCode.length >= 6 ? strCode : '';
  };
  const targetCode = normalizeCode(areaCode);
  const findInTree = (treeNodes, needFullPath = false, parentPath = []) => {
    for (const node of treeNodes) {
      const currentPath = [...parentPath, node.name];
      if (normalizeCode(node.id) === targetCode) {
        return needFullPath ? currentPath.join('/') : node.name;
      }
      if (node.childrens?.length > 0) {
        const found = findInTree(node.childrens, needFullPath, currentPath);
        if (found) return found;
      }
    }
    return null;
  };
  return findInTree(nodes, true) || areaCode;
};
// 图斑详情/编辑
const uploadPatch = (row, type = 'detail') => {
  detailid.value = row.id;