吉安感知网项目-前端
张含笑
2026-01-21 792403d97b0b0e06b9faba5c18c4886bf9f7586b
applications/drone-command/src/views/resource/components/spotDetails.vue
@@ -61,24 +61,24 @@
        <div class="table-overlay">
          <div class="table-content">
            <div class="tabname">图斑列表</div>
       <div class="tabBoxLoading"
       <div class="tabBoxLoading"
        v-loading="tableLoading"
            element-loading-text="加载中..."
            element-loading-text="加载中..."
            element-loading-background="rgba(0, 0, 0, 0.1)"
            >
             <el-table
             v-if="tableData.length > 0"
              ref="polygonTableEle"
              highlight-current-row
              :row-class-name="tableRowClassName"
              :data="tableData"
              @row-click="handleLocationPolygon"
            >
              <el-table-column type="index" align="center" :width="pxToRemNum(30)" label="序号">
               <template #default="{ $index }">
                {{ ($index + 1).toString().padStart(2, '0') }}
                {{ ($index + 1).toString().padStart(2, '0') }}
              </template>
              </el-table-column>
              <el-table-column prop="dkbh" align="center"  label="图斑名称" show-overflow-tooltip />
@@ -99,25 +99,25 @@
                    {{ isEditing && selectionIds === scope.row.id ? '取消编辑' : '编辑' }}
                  </span> -->
               <template v-if="scope.row.is_exception == 2">
                    <el-button
                    <el-button
                      v-if="!isEditing || selectionIds !== scope.row.id"
                      icon="el-icon-edit"
                      link
                      icon="el-icon-edit"
                      link
                      @click.stop="handleSelectionChange(scope.row)"
                    />
                    <el-button
                    <el-button
                      v-else
                      icon="el-icon-circle-close"
                      link
                      icon="el-icon-circle-close"
                      link
                      @click.stop="handleSelectionChange(scope.row)"
                    />
                  </template>
                </template>
              </el-table-column>
            </el-table>
       </div>
          </div>
        </div>
        <!--绘制按钮-->
@@ -126,7 +126,7 @@
          ref="drawPolygonRef"
          v-if="isEditing"
          @upDateDrawState="handleUpDateDrawState"
        />
        <!-- 完成/取消 -->
        <div class="btnGroups" v-if="props.title === '图斑编辑'">
@@ -141,7 +141,7 @@
</template>
<script setup>
import { flyVisual } from '@/utils/cesium/mapUtil'
import { flyVisual } from '@ztzf/utils'
import { pxToRem, pxToRemNum } from '@/utils/rem'
import DrawPolygon from '@/views/resource/components/DrawPolygon.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
@@ -270,7 +270,7 @@
const isInit = ref(true);
// 图斑管理表格
const getTableList = () => {
  tableLoading.value = true;
  tableLoading.value = true;
  const requestParams = {
    patchesInfoId: props.detailid,
  };
@@ -297,7 +297,7 @@
// 地图
const initMap = () => {
  if (!document.getElementById('spotMap') || isMapReady.value) return;
  publicCesiumInstance = new PublicCesium({
    dom: 'spotMap',
    flatMode: false,
@@ -305,17 +305,17 @@
    layerMode: 4,
    contour: false,
  });
  homeViewer.value = publicCesiumInstance.getViewer();
  viewer = publicCesiumInstance.getViewer();
  viewInstance.value = publicCesiumInstance;
  viewInstance.value = publicCesiumInstance;
  viewer.scene.globe.depthTestAgainstTerrain = true;
  viewInstance.value.switchContour(true);
  // 确保 readyPromise 存在
  if (viewer.readyPromise) {
    viewer.readyPromise.then(() => {
      isMapReady.value = true;
      isMapReady.value = true;
      getTableList();
    }).catch((error) => {
      console.error('地图加载失败:', error);
@@ -335,18 +335,18 @@
// 仅弹框初始化时执行的定位逻辑
const initMapLocation = () => {
  if (tbJwdList.length === 0 || !homeViewer.value) return;
  // 计算所有图斑的包围球(用于初始化定位)
  const allPositions = tbJwdList.flatMap(item =>
  const allPositions = tbJwdList.flatMap(item =>
    Cesium.Cartesian3.fromDegreesArray(item.grouped)
  );
  const boundingSphere = Cesium.BoundingSphere.fromPoints(allPositions);
  // 初始化定位(仅执行一次)
  homeViewer.value.camera.flyToBoundingSphere(boundingSphere, {
    duration: 0,
    offset: new Cesium.HeadingPitchRange(
      Cesium.Math.toRadians(0),
      Cesium.Math.toRadians(0),
      Cesium.Math.toRadians(-90)
    ),
  });
@@ -356,7 +356,7 @@
if (!isMapReady.value || !viewer) return;
  viewer?.entities.removeAll();
  tbJwdList = []; // 重置经纬度列表
  tableData.value.forEach(item => {
    const numbersWithCommas = item.dkfw.match(/\d+(\.\d+)?/g);
    if (!numbersWithCommas) return;
@@ -365,11 +365,11 @@
    tbJwdList.push({ ...item, grouped }); // 存储经纬度用于后续操作
    // 绘制图斑(保留原有逻辑,仅移除定位相关代码)
    const fillColor = item.is_exception === 2
      ? Cesium.Color.RED.withAlpha(0.5)
    const fillColor = 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
    const outlineColor = item.is_exception === 2
      ? Cesium.Color.RED
      : Cesium.Color.YELLOW;
    homeViewer.value?.entities?.add({
@@ -492,13 +492,13 @@
    for (let i = 0; i < numbersWithCommas.length; i += 2) {
      const lon = Number(numbersWithCommas[i]);
      const lat = Number(numbersWithCommas[i + 1]);
      positionsData.push([lon, lat, 10]);
      positionsData.push([lon, lat, 10]);
    }
    flyVisual({
      positionsData: positionsData,
      viewer: homeViewer.value,
      multiple: 15,
      positionsData: positionsData,
      viewer: homeViewer.value,
      multiple: 15,
    });
  }
}
@@ -522,7 +522,7 @@
  // 定位到选中的图斑
  handleLocationPolygon(row);
  // 仅异常图斑可编辑
  if (row.is_exception !== 2) {
    ElMessage.warning('仅异常图斑支持编辑绘制');
@@ -645,21 +645,21 @@
watch(uploadPatchDialog, newVal => {
  if (newVal) {
    isInit.value = true;
    isMapReady.value = false;
    isInit.value = true;
    isMapReady.value = false;
    setTimeout(() => {
      initMap();
      getspotManagementTableApi();
      initMap();
      getspotManagementTableApi();
    }, 0);
  } else {
 tableLoading.value = false;
    tableData.value = [];
    tableData.value = [];
    isEditing.value = false;
    handleUpDateDrawState(false);
    destroyMap();
    isInit.value = false;
    isInit.value = false;
    clearSelect();
    isMapReady.value = false;
    isMapReady.value = false;
  }
  refreshonload();
});
@@ -682,7 +682,7 @@
}
:global(.spotDialog .el-dialog__body) {
    padding: 2rem 2rem 0 !important;
  }
.container {
  display: flex;
@@ -854,7 +854,7 @@
    // 选中行
    .current-row td {
      background-color: rgba(64, 158, 255,0.3) !important;
    }
  }
@@ -948,8 +948,8 @@
  width: 100%;
}
.el-button {
 padding: 0;
      color: #fff;
 padding: 0;
      color: #fff;
      width: 17px;
}
</style>