feat:删除，导出

张含笑

2025-08-28 df56c62977cbfc6eeea1a868055a20d8075af5c1

feat:删除，导出

 src/api/patchManagement/index.js

@@ -79,4 +79,11 @@
        method: 'get',
        responseType: 'blob',
    })
}
}
// 图斑管理删除
export const patchDeleteApi = (id) => {
    return request({
      url: `/drone-device-core/patches/api/v1/Patches/delete/${id}`,
      method: 'delete'
    })
  }

 src/views/resource/components/spotDetails.vue

@@ -115,7 +115,7 @@
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']);
const polygonTableEle = ref(null);
let publicCesiumInstance = null;
let viewer = null;
@@ -160,11 +160,21 @@
  size: 20,
});
// 图斑管理表格
const getspotManagementTableApi =()=>{
  spotManagementTableApi(params).then(res => {
    console.log('管理表格数据',res);
const getTableList =()=>{
const params={
  patchesInfoId:props.detailid
}
  tableMapListApi(params).then(res => {
    console.log('地图表格数据',res.data.data);
     tableData.value = res.data.data
     // 先清空地图现有图斑
  tbJwdList = [];
  viewer?.entities.removeAll(); // 清除所有实体
  // 加载图斑
  entitiesAddSpot();
  })
}

const handleSizeChange = () => {};
const handleCurrentChange = () => {};
const tableData = ref([]);
@@ -183,21 +193,23 @@
  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 getTableList = async () => {
//   tableData.value = [];
//   const res = await getPatchesSpotList(polygonSearch.value);
//   if (res.data.code !== 0) return;
//   console.log('rrrrr',res.data.data);
  
//   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 = () => {
@@ -233,8 +245,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: {
@@ -260,10 +272,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');
  });
};

@@ -370,6 +382,7 @@
    setTimeout(() => {
      initMap();
      getTableList();
   
    }, 0);
  } else {
    if (funButtonEle.value) {
@@ -380,7 +393,7 @@
  }
});
onMounted(()=>{
  getspotManagementTableApi()

})
onBeforeUnmount(() => {
  destroyMap();

 src/views/resource/patchManagement.vue

@@ -35,7 +35,9 @@
        <el-button type="primary" text icon="el-icon-edit" @click="uploadPatch(scope.row, 'edit')"
          >编辑
        </el-button>
        <el-button type="primary" text icon="el-icon-delete" @click="rowDel">删除 </el-button>
        <el-button type="primary" text icon="el-icon-delete" @click="rowDel(scope.row)"
          >删除
        </el-button>
      </template>
    </avue-crud>

@@ -51,13 +53,25 @@
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="图斑类型" prop="region">
          <el-select v-model="ruleForm.region" placeholder="Activity zone">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          <el-select v-model="ruleForm.region" placeholder="请选择图斑类型">
            <el-option
              v-for="item in spotTypeOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="center-align">
          <el-button type="primary"> 图斑上传 </el-button>
          <!-- <el-button type="primary"> 图斑上传 </el-button> -->
          <el-upload
            action="#"
            :show-file-list="false"
            :before-upload="e => uploadFlightFile(e, '1')"
            accept=".kmz, .kml, .zip"
          >
            <el-button type="primary"> 图斑上传 </el-button>
          </el-upload>
        </el-form-item>
        <el-form-item class="center-align">
          <span>注：仅支持gis平台导出的zip压缩文件</span>
@@ -65,7 +79,11 @@
      </el-form>
    </el-dialog>
    <!-- 图斑详情 -->
    <SpotDetails v-model:show="uploadPatchDialog" :title="spotDetailsTitle"></SpotDetails>
    <SpotDetails
      v-model:show="uploadPatchDialog"
      :title="spotDetailsTitle"
      :detailid="detailid"
    ></SpotDetails>
    <!-- <patchDetails ref="patchDetails" /> -->
  </basic-container>
</template>
@@ -76,7 +94,8 @@
  searchManagementApi,
  uploadManagementApi,
  tableMapListApi,
  exportExcel
  exportExcel,
  patchDeleteApi,
} from '@/api/patchManagement/index';
import { getRegionTreeAll } from '@/api/job/task';
import { ref, computed, watch } from 'vue';
@@ -92,28 +111,20 @@
const router = useRouter();
const ruleFormRef = ref(null);
let deptTreeData = ref([]);
const regionalScope = ref([]);
const spotTypeOption = ref([]);
const creatorOption = ref([]);
const userAreaCode = computed(() => store.getters.userInfo.detail.areaCode);
const ruleForm = reactive({
  name: 'Hello',
  name: '',
  region: '',
  count: '',
  date1: '',
  date2: '',
  delivery: false,
  location: '',
  type: [],
  resource: '',
  desc: '',
});
const rules = reactive({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  name: [{ required: true, message: '请输入', trigger: 'blur' }, { trigger: 'blur' }],
  region: [
    {
      required: true,
      message: 'Please select Activity zone',
      message: '请选择',
      trigger: 'change',
    },
  ],
@@ -126,9 +137,11 @@
const box = ref(false);

const page = ref({
  pageSize: 10,
  pageSize: 20,
  currentPage: 1,
  total: 0,
  lotValue: '',
  createUser: '',
});

const selectionList = ref([]);
@@ -159,7 +172,7 @@
  column: [
    {
      label: '文件名称',
      prop: 'name',
      prop: 'file_name',
      span: 24,
      search: true,
      searchSpan: 4,
@@ -167,31 +180,28 @@
    },
    {
      label: '图斑类型',
      prop: 'ossCode',
      prop: 'patches_type_desc',
      span: 24,
      searchLabelWidth: 100,
      search: true,
      searchSpan: 4,
      type: 'select',
      dicData: [
        { label: 'Zone one', value: 'shanghai' },
        { label: 'Zone two', value: 'beijing' },
      ],
      dicData: spotTypeOption,
      props: {
        label: 'label',
        value: 'value',
      },
      rules: [{ required: true, message: '请输入图斑类型', trigger: 'blur' }],
      rules: [{ required: true, message: '请选择图斑类型', trigger: 'blur' }],
    },
    {
      label: '图斑数量',
      prop: 'ossCode',
      prop: 'patches_num',
      span: 24,
      rules: [{ required: true, message: '请输入图斑数量', trigger: 'blur' }],
    },
    {
      label: '异常图斑数量',
      prop: 'ossCode',
      prop: 'exception_num',
      span: 24,
      rules: [{ required: true, message: '请输入异常图斑数量', trigger: 'blur' }],
    },
@@ -205,9 +215,9 @@
      type: 'tree',
      dicData: deptTreeData,
      props: {
        label: 'name', 
        value: 'id', 
        children: 'childrens', 
        label: 'name',
        value: 'id',
        children: 'childrens',
      },
      rules: [{ required: true, message: '请选择行政区划', trigger: 'blur' }],
    },
@@ -219,23 +229,19 @@
    },
    {
      label: '创建时间',
      prop: 'ossCode',
      prop: 'create_time',
      span: 24,
      rules: [{ required: true, message: '请输入创建时间', trigger: 'blur' }],
    },
    {
      label: '创建人',
      prop: 'bucketName',
      prop: 'user_name',
      span: 24,
      searchLabelWidth: 100,
      search: true,
      searchSpan: 4,
      type: 'select',
      dicData: [
        { label: '张三', value: 'zhangsan' },
        { label: '李四', value: 'lisi' },
        { label: '王五', value: 'wangwu' },
      ],
      dicData: creatorOption,
      props: {
        label: 'label',
        value: 'value',
@@ -246,10 +252,9 @@
});

const data = ref([]);
// ===== refs =====
const crudRef = ref(null);
const uploadPatchDialog = ref(null);

const detailid = ref(null);
// ===== computed =====
const userInfo = computed(() => store.getters.userInfo);
const permission = computed(() => store.getters.permission);
@@ -263,11 +268,50 @@

const ids = computed(() => selectionList.value.map(ele => ele.id).join(','));
// 获取行政区划

const requestDockInfo = () => {
  getRegionTreeAll({ parentCode: userAreaCode.value }).then(res => {
    deptTreeData.value = res.data.data ? [res.data.data] : [];
    const areaCodes = [361104, 361124, 3611040, 361104000000];
    const rawData = res.data.data ? [res.data.data] : [];
    // 过滤函数
    const filterTree = nodes => {
      return nodes.filter(node => {
        const nodeCodeStr = node.id.toString();
        const isMatched = regionalScope.value.some(
          code => nodeCodeStr.startsWith(code.toString()) || code.toString().startsWith(nodeCodeStr)
        );

    console.log('xingzhengquhua', deptTreeData.value);
        if (node.childrens && node.childrens.length) {
          node.childrens = filterTree(node.childrens);
          if (node.childrens.length) return true;
        }

        return isMatched;
      });
    };
    deptTreeData.value = filterTree(rawData);
  });
};
// 获取搜索数据
const getsearchManagementApi = () => {
  searchManagementApi().then(res => {
    const uniqueMap = new Map();
    res.data.data.lot_values.forEach(item => {
      const [key, value] = Object.entries(item)[0];
      if (!uniqueMap.has(key)) {
        uniqueMap.set(key, value);
      }
    });
    spotTypeOption.value = Array.from(uniqueMap).map(([key, value]) => ({
      label: value,
      value: key,
    }));
    creatorOption.value = res.data.data.user_names.map(item => ({
      label: item,
      value: item,
    }));
    regionalScope.value = res.data.data.area_codes;
    requestDockInfo();
  });
};
// ===== watch =====
@@ -312,30 +356,34 @@
};

const rowDel = row => {
  ElMessageBox.confirm('确定将选择数据删除?', '提示', {
 
 ElMessageBox.confirm('确定将选择数据删除?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  });
  // .then(() => remove(row.id))
  // .then(() => {
  //   onLoad(page.value);
  //   ElMessage.success('操作成功!');
  // });
  })
  .then(() => patchDeleteApi(row.id))  // 直接传递ID
  .then(() => {
    onLoad(page.value)
    ElMessage.success('操作成功!')
  })
};

const searchReset = () => {
  query.value = {};
  page.value.lotValue =''
page.value.currentPage=1
page.value.pageSize=20
  onLoad(page.value);
};

const searchChange = (params, done) => {
  query.value = params;
  page.value.currentPage = 1;
  onLoad(page.value, params);
  page.value.lotValue = params.patches_type_desc;
  page.value.createUser = params.user_name;

  onLoad(page.value);
  done();
};

const selectionChange = list => {
  selectionList.value = list;
};
@@ -366,31 +414,32 @@
};

const refreshChange = () => {
  onLoad(page.value, query.value);
  onLoad(page.value);
};

const onLoad = (pageInfo, params = {}) => {
  console.log('参数', pageInfo);
  const searchparams = {
    current: pageInfo.currentPage,
    size: pageInfo.pageSize,
    lotValue: pageInfo.lotValue,
    createUser: pageInfo.createUser,
  };
  loading.value = true;
  getListPage(pageInfo.currentPage, pageInfo.pageSize, Object.assign({}, params, query.value)).then(
    res => {
      const d = res.data.data;
      page.value.total = d.total;
      data.value = d.records;
      loading.value = false;
      selectionClear();
    }
  );
  spotManagementTableApi(searchparams).then(res => {
    const d = res.data.data;
    page.value.total = d.total;
    data.value = d.records;
    loading.value = false;
    selectionClear();
  });
};

// 图斑详情/编辑
const uploadPatch = (row, type = 'detail') => {
  detailid.value = row.id;
  uploadPatchDialog.value = true;
  spotDetailsTitle.value = type === 'detail' ? '图斑详情' : '图斑编辑';

};

// 跳转至图斑类型管理页面
@@ -400,10 +449,52 @@

// 下载图斑
const downloadPatch = () => {
  crudRef.value?.download();

  if (!selectionList.value.length) {
    return ElMessage.warning('请选择需要导出的数据');
  }
  exportExcel(selectionList.value?.map(i => i.id).join(',')).then(res => {
    const elink = document.createElement('a');
    elink.download = new Date().getTime() + '.xls';
    elink.style.display = 'none';
    const blob = new Blob([res.data], {
      type: 'application/x-msdownload',
    });
    elink.href = URL.createObjectURL(blob);
    document.body.appendChild(elink);
    elink.click();
    document.body.removeChild(elink);

    loading.value = false;
  });
};
// 图斑上传
const uploadFlightFile = (file, t) => {
  console.log('ruleForm', ruleForm, file);

  const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1);
  if (!['kmz', 'kml', 'zip'].includes(fileSuffix)) {
    return ElMessage.error('请上传zip/kmz/kml格式的文件');
  }
  let data = new FormData();
  let type = t === '3' ? '' : t;
  const params = {
    file: file,
    fileName: ruleForm.name,
    LotTypeId: ruleForm.region,
  };
  Object.keys(params).forEach(key => {
    data.append(key, params[key]);
  });
  uploadManagementApi(data).then(res => {
    if (res.data.code !== 0) return ElMessage.error('上传失败');
    ElMessage.success('上传成功');

    init();
  });
};
onMounted(() => {
  requestDockInfo();
  getsearchManagementApi();
});
</script>


 src/views/resource/patchTypeManagement.vue

@@ -49,7 +49,7 @@
  searchShow: true,
  searchMenuSpan: 16,
  searchMenuPosition: 'right',
  border: true,
  border: true,    
  index: true,
  selection: true,
  grid: false,