无人机管理后台前端(已迁走)
张含笑
2025-08-28 e1cb0923a89efbaddeec71a292607c4fa5cb33ac
feat:添加接口
5 files modified
531 ■■■■■ changed files
src/api/patchManagement/index.js 41 ●●●●● patch | view | raw | blame | history
src/views/resource/components/DrawPolygon.vue 45 ●●●●● patch | view | raw | blame | history
src/views/resource/components/spotDetails.vue 25 ●●●● patch | view | raw | blame | history
src/views/resource/patchManagement.vue 413 ●●●●● patch | view | raw | blame | history
src/views/resource/patchTypeManagement.vue 7 ●●●● patch | view | raw | blame | history
src/api/patchManagement/index.js
@@ -38,4 +38,45 @@
        method:'delete',
        data
    })
}
//图斑管理表格
export const spotManagementTableApi = params => {
    return request({
        url: `/drone-device-core/patches/api/v1/Patches/getPatchesPage`,
        method: 'get',
        params,
    })
}
// 图斑管理搜索
export const searchManagementApi = params => {
    return request({
        url: `/drone-device-core/patches/api/v1/Patches/getPatchesInfoUserAndArea`,
        method: 'get',
        params,
    })
}
// 图斑上传
export const uploadManagementApi = data => {
    return request({
        url: `/drone-device-core/patches/api/v1/Patches/uploadLot`,
        method: 'post',
        data,
    })
}
// 图斑地图表格接口
export const tableMapListApi = params => {
    return request({
        url: `/drone-device-core/patches/api/v1/Patches/getLotInfoByPatchesId`,
        method: 'get',
        params,
    })
}
// 导出
export const exportExcel = ids => {
    return request({
        url: `/drone-device-core/patches/api/v1/Patches/getExcel?ids=${ids}`,
        method: 'get',
        responseType: 'blob',
    })
}
src/views/resource/components/DrawPolygon.vue
@@ -223,41 +223,32 @@
  }, []);
  polygon.push(polygon[0]);
  console.log('绘制', `POLYGON((${polygon.join(',')}))`);
  ElMessage.success('重新绘制图斑成功!!');
  if (selectionIds.value) {
    emit('upDateDrawState');
    selectionIds.value = null;
    clearSelect();
  }
getTableList()
cancel()
  // 接口
  // sdfwUpdate({
  //     ids: selectionIds.value,
  //     sdfw: `POLYGON((${polygon.join(',')}))`,
  // })
  //     .then(res => {
  //         if (selectionIds.value) {
  //             emit('upDateDrawState')
  //             selectionIds.value = null
  //             // clearSelect()
  //         }
  sdfwUpdate({
      ids: selectionIds.value,
      sdfw: `POLYGON((${polygon.join(',')}))`,
  })
      .then(res => {
          if (selectionIds.value) {
              emit('upDateDrawState')
              selectionIds.value = null
              clearSelect()
          }
  //         if (res.data.code !== 0) return ElMessage.error(res.message)
  //         ElMessage.success('重新绘制图斑成功!!')
  //         // getTableList()
  //     })
  //     .catch(e => {
  //         cancel()
  //     })
          if (res.data.code !== 0) return ElMessage.error(res.message)
          ElMessage.success('重新绘制图斑成功!!')
          getTableList()
      })
      .catch(e => {
          cancel()
      })
}
function cancel() {
  remove();
  removeMenuPanel();
  clearPlanar();
removeSaveMenuPanel();
  removeSaveMenuPanel();
  init();
}
src/views/resource/components/spotDetails.vue
@@ -76,7 +76,7 @@
            <div class="pagination-container">
              <el-pagination
              :current-page="params.current"
      :page-size="params.size"
              :page-size="params.size"
                background
                layout="prev, pager, next"
                prev-text="上一页"
@@ -107,18 +107,12 @@
</template>
<script setup>
import {
  getCenterPoint,
  getLnglatDist,
  getLnglatAltitude,
  getPolygonMaxHeight,
  cartesian3Convert,
  getWaylineShowHeight,
} from '@/utils/cesium/mapUtil.js';
import {spotManagementTableApi,searchManagementApi,uploadManagementApi,tableMapListApi} 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']);
@@ -165,6 +159,12 @@
  current: 1,
  size: 20,
});
// 图斑管理表格
const getspotManagementTableApi =()=>{
  spotManagementTableApi(params).then(res => {
    console.log('管理表格数据',res);
  })
}
const handleSizeChange = () => {};
const handleCurrentChange = () => {};
const tableData = ref([]);
@@ -379,7 +379,9 @@
    destroyMap();
  }
});
onMounted(()=>{
  getspotManagementTableApi()
})
onBeforeUnmount(() => {
  destroyMap();
});
@@ -390,7 +392,6 @@
  padding-left: 16px !important;
}
}
</style>
<style scoped lang="scss">
// :deep(.el-dialog.is-align-center) {
src/views/resource/patchManagement.vue
@@ -1,66 +1,137 @@
<template>
  <basic-container>
    <avue-crud :option="option" :table-loading="loading" :data="data" v-model:page="page" :permission="permissionList"
      v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel" :before-open="beforeOpen"
      @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
      @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      v-model:page="page"
      :permission="permissionList"
      v-model="form"
      ref="crud"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @row-del="rowDel"
      :before-open="beforeOpen"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template #menu-left>
        <el-button type="primary" icon="el-icon-upload" @click=" handleDebug">
          上传图斑
        </el-button>
        <el-button type="primary" icon="el-icon-upload" @click="handleDebug"> 上传图斑 </el-button>
        <el-button type="primary" icon="el-icon-setting" @click="goTypeManagement">
          类型管理
        </el-button>
        <el-button type="success" icon="el-icon-download" @click="downloadPatch">
          导出
        </el-button>
        <el-button type="success" icon="el-icon-download" @click="downloadPatch"> 导出 </el-button>
      </template>
      <template #menu="scope">
        <el-button type="primary" text icon="el-icon-view" @click="uploadPatch(scope.row,'detail')">详情
        <el-button type="primary" text icon="el-icon-view" @click="uploadPatch(scope.row, 'detail')"
          >详情
        </el-button>
        <el-button type="primary" text icon="el-icon-edit" @click="uploadPatch(scope.row,'edit')">编辑
        <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="handleDebug(scope.row)">删除
        </el-button>
        <el-button type="primary" text icon="el-icon-delete" @click="rowDel">删除 </el-button>
      </template>
    </avue-crud>
    <el-dialog title="上传图斑" append-to-body v-model="box" width="550px">
      <avue-form ref="form" :option="debugOption" v-model="debugForm" @submit="handleSubmit" />
    <el-dialog title="上传图斑" append-to-body align-center v-model="box" width="550px">
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
      >
        <el-form-item label="文件名称" prop="name">
          <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>
        </el-form-item>
        <el-form-item class="center-align">
          <el-button type="primary"> 图斑上传 </el-button>
        </el-form-item>
        <el-form-item class="center-align">
          <span>注:仅支持gis平台导出的zip压缩文件</span>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 图斑详情 -->
  <SpotDetails v-model:show="uploadPatchDialog" :title="spotDetailsTitle"></SpotDetails>
    <SpotDetails v-model:show="uploadPatchDialog" :title="spotDetailsTitle"></SpotDetails>
    <!-- <patchDetails ref="patchDetails" /> -->
  </basic-container>
</template>
<script setup>
import { ref, computed, watch } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getListPage, getDetail, add, update, remove, enable, disable } from '@/api/resource/oss'
import func from '@/utils/func'
import patchDetails from '@/views/resource/components/patchDetails.vue'
import {
  spotManagementTableApi,
  searchManagementApi,
  uploadManagementApi,
  tableMapListApi,
  exportExcel
} from '@/api/patchManagement/index';
import { getRegionTreeAll } from '@/api/job/task';
import { ref, computed, watch } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getListPage, getDetail, add, update, remove, enable, disable } from '@/api/resource/oss';
import func from '@/utils/func';
import patchDetails from '@/views/resource/components/patchDetails.vue';
import SpotDetails from '@/views/resource/components/spotDetails.vue';
const spotDetailsTitle = ref('');
const store = useStore()
const router = useRouter()
const store = useStore();
const router = useRouter();
const ruleFormRef = ref(null);
let deptTreeData = ref([]);
const userAreaCode = computed(() => store.getters.userInfo.detail.areaCode);
const ruleForm = reactive({
  name: 'Hello',
  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' },
  ],
  region: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
});
// ===== state =====
const form = ref({})
const query = ref({})
const loading = ref(true)
const box = ref(false)
const form = ref({});
const query = ref({});
const loading = ref(true);
const box = ref(false);
const page = ref({
  pageSize: 10,
  currentPage: 1,
  total: 0,
})
});
const selectionList = ref([])
const selectionList = ref([]);
const option = ref({
  addBtn: false,
@@ -101,6 +172,15 @@
      searchLabelWidth: 100,
      search: true,
      searchSpan: 4,
      type: 'select',
      dicData: [
        { label: 'Zone one', value: 'shanghai' },
        { label: 'Zone two', value: 'beijing' },
      ],
      props: {
        label: 'label',
        value: 'value',
      },
      rules: [{ required: true, message: '请输入图斑类型', trigger: 'blur' }],
    },
    {
@@ -117,12 +197,19 @@
    },
    {
      label: '行政区划',
      prop: 'ossCode',
      prop: 'ossCode111',
      span: 24,
      searchLabelWidth: 100,
      search: true,
      searchSpan: 4,
      rules: [{ required: true, message: '请输入行政区划', trigger: 'blur' }],
      type: 'tree',
      dicData: deptTreeData,
      props: {
        label: 'name',
        value: 'id',
        children: 'childrens',
      },
      rules: [{ required: true, message: '请选择行政区划', trigger: 'blur' }],
    },
    {
      label: '数据来源',
@@ -143,229 +230,185 @@
      searchLabelWidth: 100,
      search: true,
      searchSpan: 4,
      type: 'select',
      dicData: [
        { label: '张三', value: 'zhangsan' },
        { label: '李四', value: 'lisi' },
        { label: '王五', value: 'wangwu' },
      ],
      props: {
        label: 'label',
        value: 'value',
      },
      rules: [{ required: true, message: '请输入创建人', trigger: 'blur' }],
    },
  ],
})
});
const data = ref([])
const debugForm = ref({
  code: '',
  backgroundUrl: '',
})
const debugOption = ref({
  submitText: '提交',
  column: [
    {
      label: '资源编号',
      prop: 'code',
      disabled: true,
      span: 24,
    },
    {
      label: '上传背景',
      prop: 'backgroundUrl',
      type: 'upload',
      listType: 'picture-img',
      dataType: 'string',
      action: '/blade-resource/oss/endpoint/put-file',
      propsHttp: { res: 'data', url: 'link' },
      span: 24,
    },
  ],
})
const data = ref([]);
// ===== refs =====
const crudRef = ref(null)
const uploadPatchDialog = ref(null)
const crudRef = ref(null);
const uploadPatchDialog = ref(null);
// ===== computed =====
const userInfo = computed(() => store.getters.userInfo)
const permission = computed(() => store.getters.permission)
const userInfo = computed(() => store.getters.userInfo);
const permission = computed(() => store.getters.permission);
const permissionList = computed(() => ({
  addBtn: !!permission.value.oss_add,
  viewBtn: !!permission.value.oss_view,
  delBtn: !!permission.value.oss_delete,
  editBtn: !!permission.value.oss_edit,
}))
}));
const ids = computed(() => selectionList.value.map(ele => ele.id).join(','))
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] : [];
    console.log('xingzhengquhua', deptTreeData.value);
  });
};
// ===== watch =====
watch(
  () => form.value.category,
  () => {
    const category = func.toInt(form.value.category)
    const category = func.toInt(form.value.category);
    option.value.column.forEach(item => {
      if (item.prop === 'appId') {
        item.display = category === 4
        item.display = category === 4;
      }
    })
    });
  }
)
watch(
  () => debugForm.value.code,
  () => {
    const column = debugOption.value.column.find(item => item.prop === 'backgroundUrl')
    if (column) {
      column.action = `/blade-resource/oss/endpoint/put-file?code=${debugForm.value.code}`
    }
  }
)
);
// ===== methods =====
const rowSave = (row, done, loading) => {
  add(row).then(
    () => {
      onLoad(page.value)
      ElMessage.success('操作成功!')
      done()
      onLoad(page.value);
      ElMessage.success('操作成功!');
      done();
    },
    error => {
      console.log(error)
      loading()
      console.log(error);
      loading();
    }
  )
}
  );
};
const rowUpdate = (row, index, done, loading) => {
  update(row).then(
    () => {
      onLoad(page.value)
      ElMessage.success('操作成功!')
      done()
      onLoad(page.value);
      ElMessage.success('操作成功!');
      done();
    },
    error => {
      console.log(error)
      loading()
      console.log(error);
      loading();
    }
  )
}
  );
};
const rowDel = row => {
  ElMessageBox.confirm('确定将选择数据删除?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => remove(row.id))
    .then(() => {
      onLoad(page.value)
      ElMessage.success('操作成功!')
    })
}
  });
  // .then(() => remove(row.id))
  // .then(() => {
  //   onLoad(page.value);
  //   ElMessage.success('操作成功!');
  // });
};
const searchReset = () => {
  query.value = {}
  onLoad(page.value)
}
  query.value = {};
  onLoad(page.value);
};
const searchChange = (params, done) => {
  query.value = params
  page.value.currentPage = 1
  onLoad(page.value, params)
  done()
}
  query.value = params;
  page.value.currentPage = 1;
  onLoad(page.value, params);
  done();
};
const selectionChange = list => {
  selectionList.value = list
}
  selectionList.value = list;
};
const selectionClear = () => {
  selectionList.value = []
  crudRef.value?.toggleSelection()
}
const handleEnable = row => {
  ElMessageBox.confirm('是否确定启用这条配置?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => enable(row.id))
    .then(() => {
      onLoad(page.value)
      ElMessage.success('操作成功!')
      crudRef.value?.toggleSelection()
    })
}
const handleDisable = row => {
  ElMessageBox.confirm('是否确定禁用用这条配置?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => disable(row.id))
    .then(() => {
      onLoad(page.value)
      ElMessage.success('操作成功!')
      crudRef.value?.toggleSelection()
    })
}
  selectionList.value = [];
  crudRef.value?.toggleSelection();
};
const handleDebug = row => {
  box.value = true
  debugForm.value.code = row.ossCode
  debugForm.value.backgroundUrl = ''
}
const handleSubmit = (formData, done) => {
  ElMessage.success(`获取到图片地址:[${formData.backgroundUrl}]`)
  done()
}
  box.value = true;
};
const beforeOpen = (done, type) => {
  if (['edit', 'view'].includes(type)) {
    getDetail(form.value.id).then(res => {
      form.value = res.data.data
    })
  }
  done()
}
  // if (['edit', 'view'].includes(type)) {
  //   getDetail(form.value.id).then(res => {
  //     form.value = res.data.data
  //   })
  // }
  done();
};
const currentChange = currentPage => {
  page.value.currentPage = currentPage
}
  page.value.currentPage = currentPage;
};
const sizeChange = pageSize => {
  page.value.pageSize = pageSize
}
  page.value.pageSize = pageSize;
};
const refreshChange = () => {
  onLoad(page.value, query.value)
}
  onLoad(page.value, query.value);
};
const onLoad = (pageInfo, params = {}) => {
  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()
  })
}
  console.log('参数', pageInfo);
  const searchparams = {
    current: pageInfo.currentPage,
    size: pageInfo.pageSize,
  };
  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();
    }
  );
};
// 图斑详情/编辑
const uploadPatch = (row, type = 'detail') => {
  uploadPatchDialog.value = true;
  spotDetailsTitle.value = type === 'detail' ? '图斑详情' : '图斑编辑';
}
};
// 跳转至图斑类型管理页面
const goTypeManagement = () => {
  router.push({ path: '/resource/patchTypeManagement' })
}
  router.push({ path: '/resource/patchTypeManagement' });
};
// 下载图斑
const downloadPatch = () => {
  crudRef.value?.download()
}
  crudRef.value?.download();
};
onMounted(() => {
  requestDockInfo();
});
</script>
<style scoped lang="scss"></style>
<style scoped lang="scss">
.center-align :deep(.el-form-item__content) {
  justify-content: center !important;
}
</style>
src/views/resource/patchTypeManagement.vue
@@ -21,17 +21,15 @@
</template>
<script setup>
import {listOfSpotTypesApi,spotTypesCreateApi,editSpotTypeApi,deleteSpotTypeApi} from '@/api/patchManagement/index'
import { ref, computed, watch } from 'vue'
import { getListPage, getDetail, add, remove, enable, disable } from '@/api/resource/oss'
import { enable, disable } from '@/api/resource/oss'
import { useStore } from 'vuex'
import func from '@/utils/func'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
const store = useStore()
const router = useRouter()
// ---------------- data ----------------
const form = ref({})
const query = ref({})
@@ -43,7 +41,6 @@
  lotValue:"",
  userName:''
})
const selectionList = ref([])
const option = ref({
  addBtn: true,
@@ -186,8 +183,6 @@
}
const searchChange = (params, done) => {
console.log('params',params);
  page.value.currentPage = 1
  page.value.lotValue = params.patches_type
  page.value.userName = params.user_name