Merge branch 'refs/heads/feature/v5.0/5.0.5' into patch_management

张含笑

2025-09-01 2ca94de8ede18ac07ccfd8dec7b6f6a707adde9b

 src/views/resource/components/spotDetails.vue

@@ -1,7 +1,7 @@
<template>
  <el-dialog
    class="spotDialog"
    :title="props.title"
    append-to-body
    v-model="uploadPatchDialog"
    width="75%"
    align-center
@@ -12,13 +12,21 @@
        <div class="itemBoxLeft">
          <div v-for="(item, index) in infoList" :key="index" class="itemCon">
            <div class="itemBox">
              <div class="itemTitle">{{ item.name }}：</div>
              <div class="itemTitle">
                <span
                  v-if="
                    props.title === '图斑编辑' &&
                    (item.name === '文件名称' || item.name === '图斑类型')
                  "
                  style="color: red"
                  >*</span
                >{{ item.name }}：
              </div>
              <div class="itemContent">
                <template v-if="props.title === '图斑编辑' && item.editable">
                  <template v-if="item.name === '图斑类型'">
                    <el-select
                      v-model="item.value"
                      size="small"
                      placeholder="请选择图斑类型"
                      style="width: 100%"
                    >
@@ -31,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>
@@ -63,22 +71,22 @@
                </template>
              </el-table-column>
              <el-table-column prop="dkbh" align="center" label="图斑名称" />
              <el-table-column prop="investigate" align="center" label="图斑状态" />
              <el-table-column prop="is_exception" align="center" label="图斑状态">
                <template #default="scope">
                  <span>{{ scope.row.is_exception === 2 ? '异常' : '正常' }}</span>
                </template>
              </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
                  >
                  <!-- <el-button type="text">删除</el-button>
                  <el-button type="text" @click.stop="handleSelectionChange(scope.row)"
                    >编辑</el-button
                  > -->
                  <span class="operationspan" @click="handleDelete(scope.row)">删除</span>
                  <span class="operationspan" @click="handleSelectionChange(scope.row)">编辑</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination-container">
              <el-pagination
                :current-page="params.current"
                :page-size="params.size"
                background
                layout="prev, pager, next"
                prev-text="上一页"
@@ -98,8 +106,8 @@
        ></FunButton>
        <!-- 完成/取消 -->
        <div class="btnGroups" v-if="props.title === '图斑编辑'">
          <el-button type="primary">完成</el-button>
          <el-button>取消</el-button>
          <img @click="handleSave" src="@/assets/images/home/territory/savebtn.png" alt="" />
          <img @click="handleCancel" src="@/assets/images/home/territory/cancelbtn.png" alt="" />
        </div>
        <!-- 地图 -->
        <div id="spotMap" class="ztzf-cesium" v-show="uploadPatchDialog"></div>
@@ -109,21 +117,23 @@
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  getCenterPoint,
  getLnglatDist,
  getLnglatAltitude,
  getPolygonMaxHeight,
  cartesian3Convert,
  getWaylineShowHeight,
} from '@/utils/cesium/mapUtil.js';
  patchEditApi,
  spotManagementTableApi,
  searchManagementApi,
  uploadManagementApi,
  tableMapListApi,
  deletePatches,
} from '@/api/patchManagement/index';
import { getCenterPoint } from '@/utils/cesium/mapUtil.js';
import { getPatchesSpotList } from '@/api/patchManagement/index';
import * as Cesium from 'cesium';
import { PublicCesium } from '@/utils/cesium/publicCesium';
import { ref, watch, onBeforeUnmount } from 'vue';
import { ref, watch, onBeforeUnmount, onMounted } from 'vue';
import FunButton from '@/views/resource/components/FunButton.vue';
const uploadPatchDialog = defineModel('show');
const props = defineProps(['title']);
const props = defineProps(['title', 'detailid', 'detailList', 'spotTypeOption']);
const polygonTableEle = ref(null);
let publicCesiumInstance = null;
let viewer = null;
@@ -131,6 +141,7 @@
const homeViewer = shallowRef(null);
let tbJwdList = [];
let total = ref(0);
const refreshonload = inject('searchReset');
// 当前选中的图斑面数据
let nowSelectObj = ref({});
// 记录上一次点击高亮
@@ -148,59 +159,98 @@
const tableRowClassName = ({ rowIndex }) => {
  return rowIndex % 2 === 1 ? 'oddNumberRow' : 'even-row';
};
const spotTypeOptions = ref([
  { value: '1', label: '综合类' },
  { value: '2', label: '矿山类' },
  { value: '3', label: '农田类' },
]);
const spotTypeOptions = ref([]);
const infoList = ref([
  { name: '文件名称', value: '55', field: 'job_info_num', editable: true },
  { name: '图斑类型', value: 'ee', field: 'name', editable: true },
  { name: '图斑数量', value: '', field: 'industry_type_str', editable: false },
  { name: '异常图斑数量', value: '', field: 'event_number', editable: false },
  { name: '行政区划', value: '', field: 'device_names', editable: false },
  { name: '数据来源', value: '', field: 'dept_name', editable: false },
  { name: '创建时间', value: '', field: 'cycle_time_value', editable: false },
  { name: '创建人', value: '', field: 'ai_type_str', editable: false },
  { name: '文件名称', value: '', field: 'file_name', 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 },
  { name: '数据来源', value: '', field: 'dataFrom', editable: false },
  { name: '创建时间', value: '', field: 'create_time', editable: false },
  { name: '创建人', value: '', field: 'user_name', editable: false },
]);
watch(
  () => props.spotTypeOption,
  newOptions => {
    if (newOptions) {
      spotTypeOptions.value = newOptions.map(opt => ({
        label: opt.label,
        value: String(opt.value),
      }));
    }
  },
  { immediate: true }
);
watch(
  () => props.detailList,
  newVal => {
    if (newVal) {
      updateInfoList(newVal);
    }
  },
  { immediate: 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 => {
  infoList.value = infoList.value.map(item => {
    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: value,
    };
  });
};
const params = ref({
  current: 1,
  size: 20,
});
// 图斑管理表格
const getTableList = () => {
  const params = {
    patchesInfoId: props.detailid,
  };
  tableMapListApi(params).then(res => {
    tableData.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 = () => {};
const handleCurrentChange = () => {};
const tableData = ref([]);
const polygonSearch = ref({
  investigate: '',
  isPush: '',
  isException: '',
  inRange: '1',
  dkbh: '',
  dkmj: '',
  page: 1,
  page_size: 1000,
  total: 0,
  workspaceId: 'ede19ef4-2e92-42f3-83cc-89afb54e95a7',
  area_code: '360000000000',
  device_sn: '',
});
// 获取列表数据
const getTableList = async () => {
  tableData.value = [];
  const res = await getPatchesSpotList(polygonSearch.value);
  if (res.data.code !== 0) return;
  tableData.value = res.data.data.list.map(item => ({
    ...item,
    dkfw: item.sdfw && item.is_exception == 1 ? item.sdfw : item.dkfw,
  }));
  total.value = res.data.data.pagination.total;
  // 先清空地图现有图斑
  tbJwdList = [];
  viewer.entities.removeAll(); // 清除所有实体
  // 加载图斑
  entitiesAddSpot();
};

// 地图
const initMap = () => {
  if (!document.getElementById('spotMap')) {
@@ -235,8 +285,8 @@
    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({
    viewInstance.value?.removeById('polygon_dk' + item.id);
    homeViewer.value?.entities?.add({
      id: 'polygon_dk' + item.id,
      customType: 'pattern_spot_polygon',
      customInfo: {
@@ -262,10 +312,10 @@

    if (tbJwdList.length > 0) {
      const positions = tbJwdList.flatMap(item => Cesium.Cartesian3.fromDegreesArray(item.grouped));
      homeViewer.value.camera.flyToBoundingSphere(new Cesium.BoundingSphere.fromPoints(positions));
      homeViewer.value?.camera.flyToBoundingSphere(new Cesium.BoundingSphere.fromPoints(positions));
    }
    viewInstance.value.removeLeftClickEvent('spotHighlighting');
    viewInstance.value.addLeftClickEvent(null, spotHighlighting, 'spotHighlighting');
    viewInstance.value?.removeLeftClickEvent('spotHighlighting');
    viewInstance.value?.addLeftClickEvent(null, spotHighlighting, 'spotHighlighting');
  });
};

@@ -276,6 +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]);
    }
  });
  // 表格也对应选中数据 TODO
  const data = pick.id?.customInfo;
  // 高亮图斑
@@ -340,7 +405,6 @@
};
// 编辑
const handleSelectionChange = row => {
  // console.log('编辑', row.id);
  let curRowIsSelect = row;
  selectionIds.value = row.id;
  selectionList.value = row;
@@ -353,6 +417,42 @@
    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?.originalValue || patchTypeItem?.value || '',
    type: patchTypeItem?.originalValue || patchTypeItem?.value || '',
    id: props.detailList.id,
  };

  patchEditApi(updateParams).then(res => {
    console.log('111', res.data.data);

    ElMessage.success(res.data.data);
    refreshonload();
    uploadPatchDialog.value = false;
  });
};
// 取消
const handleCancel = () => {};
provide('selectionIds', selectionIds);
provide('homeViewer', homeViewer);
provide('viewInstance', viewInstance);
@@ -381,85 +481,98 @@
    destroyMap();
  }
});

onMounted(() => {});
onBeforeUnmount(() => {
  destroyMap();
});
</script>

<style lang="scss">
.spotDialog {
  .el-dialog.is-align-center .el-dialog__header .el-dialog__title {
    padding-left: 16px !important;
  }
}
</style>
<style scoped lang="scss">
// :deep(.el-dialog.is-align-center) {
//   :deep(.el-dialog__header) {
//     .el-dialog__title {
//       padding-left: 14px !important;
//     }
//   }
// }
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px 20px 23px 20px;
}

.infoBox {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  border: 1px solid;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

  .itemBoxLeft {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 0;
    padding: 10px;
    padding: 0; // 移除内边距，让边框贴合
    font-size: 14px;
  }

    .itemCon:nth-last-child(-n + 2) {
      border-bottom: 2px solid #efefef;
  .itemCon {
    border-bottom: 1px solid #e8e8e8;

    &:nth-child(2n) {
      .itemBox {
        border-right: none;
      }
    }

    &:nth-last-child(-n + 2) {
      border-bottom: none;
    }
  }

  .itemBox {
    display: flex;
    align-items: center;
    background: #fff;
    height: 33px;
    border-top: 2px solid #efefef;
    padding: 0 10px;
    border-right: 1px solid #e8e8e8;
    border-bottom: none; // 由.itemCon控制底部边框

    .itemTitle {
      flex: 0 0 150px;
      color: #0b1d38;
      text-align: center;
      background: #f3f6ff;
      height: 33px;
      width: 202px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #383838;
      text-align: right;
      background: #fafafa;
      height: 100%;
      line-height: 33px;
      padding-right: 10px;
      border-top: 1px solid #efefef;
      margin: 0 -10px 0 -10px; // 拉伸背景色
    }

    .itemContent {
      flex: 1;
      padding-left: 10px;

      .el-input {
        width: 100%;

        :deep(.el-input__inner) {
          height: 28px;
          line-height: 28px;
          background: transparent;
          border: none;
          padding: 0 10px;
          color: #747e91;
        }
      }

      .itemValue {
        font-size: 14px;
        color: #747e91;
        text-align: left;
        line-height: 33px;
      }
    }
  }
}

.map-container {
  position: relative;
  height: 600px;
  height: 620px;
  width: 100%;
}
.table-overlay {
@@ -470,10 +583,10 @@
  z-index: 999;
  width: 277px;
  overflow: hidden;
 background: rgba(0, 0, 0, 0.4);
   backdrop-filter: blur(5px);
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  border-radius: 8px 8px 8px 8px;
  padding: 7px 10px 0 10px;
  padding: 6px 10px 0 10px;
  display: flex;
  flex-direction: column;
}
@@ -489,11 +602,22 @@
    font-size: 14px;
    color: #ffffff;
  }
// 表格样式
  // 表格样式
  :deep(.el-table) {
    // 清除表格内部横线和竖线
    &::before,
    &::after,
    .el-table__inner-wrapper::before,
    .el-table__inner-wrapper::after {
      background-color: transparent !important;
      display: none !important; // 彻底隐藏伪元素边框
    }
    .el-table__header-wrapper th {
      border: none !important;
    }
    --el-table-bg-color: transparent !important;
    --el-table-tr-bg-color: transparent !important;
    // --el-table-header-bg-color: transparent !important;

    --el-table-row-hover-bg-color: rgba(30, 58, 138, 0.5) !important;
    --el-table-current-row-bg-color: rgba(30, 58, 138, 0.7) !important;
    color: #fff !important;
@@ -502,10 +626,10 @@
    }
    // 隔行变色
    .even-row {
      background-color: rgba(255,255,255,0.17) !important;
      background-color: rgba(255, 255, 255, 0.17) !important;
    }
    .oddNumberRow {
      background-color: rgba(255,255,255,0.08) !important;
      background-color: rgba(255, 255, 255, 0.08) !important;
    }

    // 表头样式
@@ -540,49 +664,51 @@
      background-color: var(--el-table-current-row-bg-color) !important;
    }
  }
.operationspan {
cursor: pointer;}
.operationspan:first-child{
margin-right: 10px;}

  .operationspan {
    cursor: pointer;
  }
  .operationspan:first-child {
    margin-right: 10px;
  }
  // 分页
    :deep(.pagination-container) {
  :deep(.pagination-container) {
    background: transparent !important;
  }
  :deep(.el-pagination) {
  .btn-prev, .btn-next {
    padding: 5px 13px;

    .btn-prev,
    .btn-next {
      padding: 5px 13px;
    }
  }
  
 
}
:deep(.el-pager li) {
  margin: 0 0.4rem;
  background: rgba(34, 34, 34, 0.9) !important;
  box-shadow: 0px 4px 72px 0px rgba(0, 0, 0, 0.25) !important;
  border-radius: 8px 8px 8px 8px !important;
 
  font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #EDEDED !important;
}
:deep(.el-pager li.is-active) {
  border: 1px solid rgba(255, 255, 255, 0.99) !important;
}
:deep(.el-pagination button) {
  background: rgba(34, 34, 34, 0.9) !important;
color: #EDEDED !important;
  border-radius: 8px 8px 8px 8px !important;
}
.pagination-container {
  margin-top: auto;
  padding: 10px 0;
  background: white;
  display: flex;
  justify-content: center;
  height: 20px;
}
  :deep(.el-pager li) {
    margin: 0 0.4rem;
    background: rgba(34, 34, 34, 0.9) !important;
    box-shadow: 0px 4px 72px 0px rgba(0, 0, 0, 0.25) !important;
    border-radius: 8px 8px 8px 8px !important;

    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 14px;
    color: #ededed !important;
  }
  :deep(.el-pager li.is-active) {
    border: 1px solid rgba(255, 255, 255, 0.99) !important;
  }
  :deep(.el-pagination button) {
    background: rgba(34, 34, 34, 0.9) !important;
    color: #ededed !important;
    border-radius: 8px 8px 8px 8px !important;
  }
  .pagination-container {
    margin-top: auto;
    padding: 10px 0;
    background: white;
    display: flex;
    justify-content: center;
    height: 20px;
    margin: 24px 0 14px 0;
  }
}

.el-table {
@@ -591,8 +717,16 @@
}
.btnGroups {
  position: absolute;
  bottom: 8%;
  bottom: 49px;
  left: 50%;
  img {
    width: 125px;
    height: 45px;
    cursor: pointer;
  }
}
.btnGroups img:first-child {
  margin-right: 21px;
}
#spotMap {
  height: 100%;