无人机管理后台前端(已迁走)
chenyao
2025-09-05 d17824cbcb9b76f5c5c4d6b90f7059a03cae9c08
Merge branch 'feature/v5.0/5.0.5' into test
4 files modified
345 ■■■■■ changed files
src/utils/cesium/publicCesium.js 6 ●●●● patch | view | raw | blame | history
src/views/device/addDevice.vue 20 ●●●● patch | view | raw | blame | history
src/views/resource/components/spotDetails.vue 316 ●●●● patch | view | raw | blame | history
src/views/resource/patchManagement.vue 3 ●●●● patch | view | raw | blame | history
src/utils/cesium/publicCesium.js
@@ -99,8 +99,8 @@
            dockOptions = {},
            boundaryColor = '#7FFFD4',
            boundaryChange,
            dockRangeType = 1,
            useDockHeight = false
        } = options
@@ -135,7 +135,7 @@
        this.viewer.clockViewModel.currentTime = Cesium.JulianDate.addHours(utc, 0, new Cesium.JulianDate())
        // 边界,机巢
        this.boundary = useBoundary(this.viewer, { multiple, dockOptions, boundaryChange, boundaryColor, dockRangeType, useDockHeight })
        this.viewer?.imageryLayers.removeAll()
        this.viewer._cesiumWidget._creditContainer.style.display = 'none'
        handler = new Cesium.ScreenSpaceEventHandler(this.viewer?.scene.canvas)
src/views/device/addDevice.vue
@@ -277,18 +277,32 @@
                        },
                    },
                    {
                        label: '设备描述',// '工作空间描述',
                        label: '设备描述', // '工作空间描述',
                        prop: 'workspace_desc',
                        labelWidth: 130,
                        // search: true,
                        searchSpan: 4,
                        // editDisabled: true,
                        rules: [
                            {
                                required: true,
                                message: '请输入设备描述',
                                trigger: 'blur',
                            },
                            {
                                max: 30,
                                message: '设备描述不能超过30个字',
                                trigger: 'blur',
                            },
                            // 如果需要更严格的校验(如中文字符计算),可以使用 validator
                            {
                                validator: (rule, value, callback) => {
                                    if (value && value.length > 30) {
                                        callback(new Error('设备描述不能超过30个字'));
                                    } else {
                                        callback();
                                    }
                                },
                                trigger: 'blur',
                            },
                        ],
                    },
                    
src/views/resource/components/spotDetails.vue
@@ -3,7 +3,7 @@
    class="spotDialog"
    :title="props.title"
    v-model="uploadPatchDialog"
    width="75%"
    width="78%"
    align-center
  >
    <div class="container">
@@ -39,11 +39,13 @@
                    </el-select>
                  </template>
                  <template v-else-if="item.name === '文件名称'">
                    <el-input  style="width: 102%" v-model="item.value" />
                    <el-input style="width: 102%" v-model="item.value" />
                  </template>
                </template>
                <template v-else >
                  <div class="itemValue"  :class="{ 'error-text': item.name === '异常图斑数量' }">{{ item.value }}</div>
                <template v-else>
                  <div class="itemValue" :class="{ 'error-text': item.name === '异常图斑数量' }">
                    {{ item.value }}
                  </div>
                </template>
              </div>
            </div>
@@ -59,9 +61,9 @@
            <div class="tabname">图斑列表</div>
            <el-table
              ref="polygonTableEle"
              highlight-current-row
              highlight-current-row
              :row-class-name="tableRowClassName"
              :data="tableData"
              :data="tableData"
              @row-click="handleLocationPolygon"
            >
              <el-table-column type="index" align="center" width="30" label="序号">
@@ -144,8 +146,8 @@
let tbJwdList = [];
let total = ref(0);
const refreshonload = inject('searchReset');
const initialFileName = ref('');
const initialSpotTypeId = ref('');
const initialFileName = ref('');
const initialSpotTypeId = ref('');
const initialSpotTypeLabel = ref('');
// 当前选中的图斑面数据
let nowSelectObj = ref({});
@@ -160,7 +162,7 @@
const selectionList = ref([]);
// 当前在编辑状态的异常图斑
let curCustomPolygon = null;
let lastEntity = null;
// 表格隔行变色
const tableRowClassName = ({ rowIndex }) => {
  return rowIndex % 2 === 1 ? 'oddNumberRow' : 'even-row';
@@ -203,13 +205,12 @@
  return option ? option.label : '';
};
const updateInfoList = detailData => {
  if (detailData && (initialFileName.value === '' || initialSpotTypeId.value === '')) {
    initialFileName.value = detailData.file_name || '';
    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
      ? detailData.patches_type_desc
      : getPatchTypeLabel(detailData.lot_type_id);
  }
  infoList.value = infoList.value.map(item => {
@@ -217,9 +218,17 @@
    if (item.name === '图斑类型') {
      if (detailData.patches_type_desc !== undefined) {
        return { ...item, value: detailData.patches_type_desc, originalValue: detailData.lot_type_id };
        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: getPatchTypeLabel(detailData.lot_type_id),
          originalValue: detailData.lot_type_id,
        };
      }
    }
@@ -278,7 +287,7 @@
};
// 初始化所有图斑
const entitiesAddSpot = () => {
 viewer?.entities.removeAll();  //清除旧实体
  viewer?.entities.removeAll();
  tableData.value.forEach(item => {
    // 取出当中经纬度
    const numbersWithCommas = item.dkfw.match(/\d+(\.\d+)?/g);
@@ -290,11 +299,12 @@
      ...item,
      grouped: grouped,
    });
    viewInstance.value.removeById('polygon_dk' + item.id);
    // 根据 is_exception 设置颜色
    const color =
      item.is_exception == 2 ? Cesium.Color.RED.withAlpha(0.5) : Cesium.Color.YELLOW.withAlpha(0.5);
    const outlineColor = item.is_exception == 2 ? Cesium.Color.RED : Cesium.Color.YELLOW;
    viewInstance.value?.removeById('polygon_dk' + item.id);
    homeViewer.value?.entities?.add({
      id: 'polygon_dk' + item.id,
      customType: 'pattern_spot_polygon',
@@ -324,11 +334,10 @@
      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(-45),
          Cesium.Math.toRadians(-90)
        ),
      });
    }
    viewInstance.value?.removeLeftClickEvent('spotHighlighting');
@@ -337,88 +346,108 @@
};
// 高亮当前选中图斑,并定位
const handleLocationPolygon = (data, Deselect) => {
  heightlightSpot(data);
// const handleLocationPolygon = data => {
//   updateMapSpotInfo(data);
// };
const getEntityByDataId = dataId => {
  if (!homeViewer.value) return null;
  const entityId = `polygon_dk${dataId}`;
  return homeViewer.value.entities.getById(entityId);
};
const handleLocationPolygon = data => {
  if (!data) return;
  const targetEntity = getEntityByDataId(data.id);
  if (targetEntity) {
    updateMapSpotInfo(targetEntity);
    // 同步表格选中状态
    const clickTableID = tableData.value.findIndex(i => i.id === data.id);
    const rows = polygonTableEle?.value.$el.querySelectorAll('.el-table__body tr');
    const targetRow = rows[clickTableID];
    nextTick(() => {
      const table = polygonTableEle?.value;
      if (table && targetRow) {
        table.setCurrentRow(tableData.value[clickTableID]);
        targetRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
      }
    });
  }
};
// 鼠标触发点击图斑高亮 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);
  // 计算表格滚动至中间位置
function spotHighlighting(click, pick, viewer) {
  let entities = viewer?.scene
    .drillPick(click.position)
    .filter(item => item.id)
    .map(i => i.id)
    .filter(i => i._customType === 'pattern_spot_polygon');
    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);
  const rows = polygonTableEle?.value.$el.querySelectorAll('.el-table__body tr');
  let targetRow = rows[clickTableID];
  const 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]);
    }
    if (!table || !targetRow) return;
    // 表格滚动到中间位置
    targetRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
    // 同步表格选中状态
    table.setCurrentRow(tableData.value[clickTableID]);
  });
  // 表格也对应选中数据 TODO
  const data = pick.id?.customInfo;
  // 高亮图斑
  heightlightSpot(data);
};
// 选中列表或者点击地图内的图斑 高亮图斑
const heightlightSpot = data => {
  nowSelectObj.value = data;
  if (!data) {
    clearSelect();
    return;
  }
  const numbersWithCommas = data.dkfw.match(/\d+(\.\d+)?/g);
  const groupedArr = numbersWithCommas.reduce((acc, val, index, src) => {
    if (index % 2 === 0) acc.push(src.slice(index, index + 2));
    return acc;
  }, []);
  updateMapSpotInfo(nowEntity);
}
  const polygonCenter = getCenterPoint(groupedArr);
  if (viewInstance.value.getEntityById('polygon_center')) {
    viewInstance.value.removeById('polygon_center');
  }
  // 恢复上一个高亮图斑的原始颜色
  if (lastHighlightRow) {
    let lastentity = homeViewer.value.entities?.getById('polygon_dk' + lastHighlightRow.id);
    if (lastentity && lastentity.polygon) {
      // 根据is_exception恢复原始颜色
      const originalColor =
        lastHighlightRow.is_exception == 2
// 更新上一个和这一个信息
function updateMapSpotInfo(nowEntity) {
  const nowData = nowEntity.customInfo;
  if (!nowEntity) return;
  if (nowEntity.customInfo.id === lastEntity?.customInfo.id) return;
  // 设置新的
  nowEntity.polygon.material = Cesium.Color.RED.withAlpha(0);
  nowEntity.polyline.material = Cesium.Color.RED;
  // 重置上一个
  if (lastEntity) {
    const lastData = lastEntity.customInfo;
    const originalFillColor =
      lastData.is_exception === 2
          ? Cesium.Color.RED.withAlpha(0.5)
          : Cesium.Color.YELLOW.withAlpha(0.5);
      const originalOutline =
        lastHighlightRow.is_exception == 2 ? Cesium.Color.RED : Cesium.Color.YELLOW;
     const originalOutlineColor = lastData.is_exception == 2
    ? Cesium.Color.RED
    : Cesium.Color.YELLOW;
      lastentity.polygon.material = originalColor;
      lastentity.polygon.outlineColor = originalOutline;
      lastentity.polygon.outlineWidth = 2;
    }
  lastEntity.polygon.material = originalFillColor;
  lastEntity.polygon.outlineColor = originalOutlineColor;
  lastEntity.polyline.material = originalOutlineColor;
  }
  let Nowentity = homeViewer.value.entities?.getById('polygon_dk' + data.id);
  if (Nowentity && Nowentity.polygon) {
    Nowentity.polygon.material = Cesium.Color.RED.withAlpha(0);
    Nowentity.polygon.outlineColor = Cesium.Color.RED;
  lastEntity = nowEntity;
  const numbersWithCommas = nowData.dkfw.match(/\d+(\.\d+)?/g);
  if (numbersWithCommas) {
    // 解析经纬度数组
    const groupedArr = numbersWithCommas.reduce((acc, val, index, src) => {
      if (index % 2 === 0) acc.push(src.slice(index, index + 2));
      return acc;
    }, []);
    const polygonCenter = getCenterPoint(groupedArr);
    // 相机定位
    homeViewer.value.scene.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(
        Number(polygonCenter.lng),
        Number(polygonCenter.lat),
        1500
      ),
      zIndex: 100,
    });
  }
  homeViewer.value.scene.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(
      Number(polygonCenter.lng),
      Number(polygonCenter.lat),
      1500
    ),
    zIndex: 100,
  });
  lastHighlightRow = data;
};
  // flyMapSpot(nowEntity?.customInfo)
}
// 清空选中的数据
const clearSelect = () => {
  lastHighlightRow = null;
  selectionList.value = [];
  viewer?.entities.removeAll();
};
// 编辑
const handleSelectionChange = row => {
@@ -451,49 +480,47 @@
// 保存
const handleSave = () => {
 const fileNameItem = infoList.value.find(item => item.name === '文件名称');
 const patchTypeItem = infoList.value.find(item => item.name === '图斑类型');
 let lotTypeId;
 // 检查value是否为数字类型(包括字符串形式的数字)
 const isValueNumber =
  !isNaN(Number(patchTypeItem.value)) &&
  patchTypeItem.value !== '' &&
  patchTypeItem.value !== null &&
  patchTypeItem.value !== undefined;
   console.log('isValueNumber',isValueNumber);
 if (isValueNumber) {
  // 转换为数字类型
  lotTypeId = Number(patchTypeItem.value);
 } else {
  // 使用原始值
  lotTypeId = patchTypeItem.originalValue;
 }
 // 构建请求参数
 const updateParams = {
  file_name: fileNameItem.value,
  lot_type_id: lotTypeId,
  type: lotTypeId,
  id: props.detailList.id,
 };
 patchEditApi(updateParams).then(res => {
  ElMessage.success(res.data.data);
  refreshonload();
  uploadPatchDialog.value = false;
 });
  const fileNameItem = infoList.value.find(item => item.name === '文件名称');
  const patchTypeItem = infoList.value.find(item => item.name === '图斑类型');
  let lotTypeId;
  // 检查value是否为数字类型(包括字符串形式的数字)
  const isValueNumber =
    !isNaN(Number(patchTypeItem.value)) &&
    patchTypeItem.value !== '' &&
    patchTypeItem.value !== null &&
    patchTypeItem.value !== undefined;
  if (isValueNumber) {
    // 转换为数字类型
    lotTypeId = Number(patchTypeItem.value);
  } else {
    // 使用原始值
    lotTypeId = patchTypeItem.originalValue;
  }
  // 构建请求参数
  const updateParams = {
    file_name: fileNameItem.value,
    lot_type_id: lotTypeId,
    type: lotTypeId,
    id: props.detailList.id,
  };
  patchEditApi(updateParams).then(res => {
    ElMessage.success(res.data.data);
    refreshonload();
    uploadPatchDialog.value = false;
  });
};
// 取消
const handleCancel = () => {
  const fileNameItem = infoList.value.find(item => item.name === '文件名称');
  const spotTypeItem = infoList.value.find(item => item.name === '图斑类型');
  if (fileNameItem) {
    fileNameItem.value = initialFileName.value;
    fileNameItem.value = initialFileName.value;
  }
  if (spotTypeItem) {
    spotTypeItem.value = initialSpotTypeLabel.value;
    spotTypeItem.originalValue = initialSpotTypeId.value;
    spotTypeItem.value = initialSpotTypeLabel.value;
    spotTypeItem.originalValue = initialSpotTypeId.value;
  }
  clearSelect();
  clearSelect();
  isDrawPolygon.value = false; // 关闭地图绘制状态
  uploadPatchDialog.value = false;
};
@@ -536,10 +563,9 @@
:global(.spotDialog .el-dialog__header span) {
  padding-left: 16px !important;
  display: inline-block;
}
:global(.spotDialog .el-dialog__header) .el-dialog__title {
  font-family: "Source Han Sans CN" !important;
  font-family: 'Source Han Sans CN' !important;
  font-weight: bold !important;
  font-size: 16px !important;
  color: #363636 !important;
@@ -611,11 +637,11 @@
      flex: 1;
      padding-left: 10px;
      .itemValue {
      padding-left: 6px;
      color: #7B7B7B;
        padding-left: 6px;
        color: #7b7b7b;
      }
      .error-text{
      color: #FF0A0A;
      .error-text {
        color: #ff0a0a;
      }
    }
  }
@@ -653,7 +679,7 @@
    font-size: 14px;
    color: #ffffff;
  }
  // 表格样式
  :deep(.el-table) {
    // 清除表格内部横线和竖线
@@ -703,7 +729,7 @@
    // 表格主体
    .el-table__body {
      tr:hover > td {
        background-color: var(--el-table-row-hover-bg-color) !important;
        background-color: rgba(0, 0, 0, 0.6) !important;
      }
      td {
@@ -713,30 +739,29 @@
    // 选中行
    .current-row td {
      background-color: var(--el-table-current-row-bg-color) !important;
      background-color: rgba(0, 0, 0, 0.6) !important;
    }
  }
:deep(.el-table__body) {
  tr {
    height: 46px;
  :deep(.el-table__body) {
    tr {
      height: 46px;
    }
    td {
      padding: 8px 0;
    }
  }
  td {
    padding: 8px 0;
  }
}
  .operationspan {
    cursor: pointer;
  }
  .operationspan:first-child {
    margin-right: 10px;
  }
  // 分页
  :deep(.pagination-container) {
    background: transparent !important;
  }
  :deep(.el-pagination) {
    .btn-prev,
    .btn-next {
      padding: 5px 6px;
@@ -762,15 +787,15 @@
    border-radius: 8px 8px 8px 8px !important;
  }
  .pagination-container {
  margin-top: auto;
     padding: 8px 5px !important;
    margin-top: auto;
    padding: 8px 5px !important;
    background: white;
    display: flex;
    justify-content: center;
    height: auto; // 取消固定高度20px,避免内容被截断
    margin: 24px 0 14px 0;
    width: 100%;
     box-sizing: border-box
    width: 100%;
    box-sizing: border-box;
  }
}
:deep(.el-tooltip__popper) {
@@ -778,13 +803,14 @@
  max-width: 300px;
}
.el-table {
  flex: 1;
  flex: 1;
  overflow: auto;
}
.btnGroups {
  position: absolute;
  bottom: 49px;
  left: 50%;
  transform: translate(-50%);
  img {
    width: 125px;
    height: 45px;
src/views/resource/patchManagement.vue
@@ -535,6 +535,7 @@
};
// 图斑上传
const uploadFlightFile = (file, t) => {
loading.value = true
  const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1);
  if (!['kmz', 'kml', 'zip'].includes(fileSuffix)) {
    return ElMessage.error('请上传zip/kmz/kml格式的文件');
@@ -567,7 +568,7 @@
    if (ruleFormRef.value) {
      ruleFormRef.value.resetFields();
    }
loading.value = true
    searchReset();
  });
};