drone/drone-web-manage.git

<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"
    >
      <template #menu-left>
        <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>
      </template>
 
      <template #menu="scope">
        <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>
        <el-button type="primary" text icon="el-icon-delete" @click="rowDel(scope.row)"
          >删除
        </el-button>
      </template>
    </avue-crud>
 
    <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="请选择图斑类型">
            <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-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>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 图斑详情 -->
    <SpotDetails
      v-model:show="uploadPatchDialog"
      :title="spotDetailsTitle"
      :detailid="detailid"
      :detailList="detailList"
      :spotTypeOption="spotTypeOption"
    ></SpotDetails>
  
  </basic-container>
</template>
<script setup>
import {
  spotManagementTableApi,
  searchManagementApi,
  uploadManagementApi,
  tableMapListApi,
  exportExcel,
  patchDeleteApi,
} 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 detailList = ref('')
const store = useStore();
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: '',
  region: '',
});
const rules = reactive({
  name: [{ required: true, message: '请输入', trigger: 'blur' }, { trigger: 'blur' }],
  region: [
    {
      required: true,
      message: '请选择',
      trigger: 'change',
    },
  ],
});
 
// ===== state =====
const form = ref({});
const query = ref({});
const loading = ref(true);
const box = ref(false);
 
const page = ref({
  pageSize: 20,
  currentPage: 1,
  total: 0,
  lotTypeId: '',
  createUser: '',
  areaCode:'',
  fileName:''
});
 
const selectionList = ref([]);
 
const option = ref({
 align: 'center', 
  headerAlign: 'center',
  addBtn: false,
  tip: false,
  searchShow: true,
  searchMenuSpan: 8,
  searchMenuPosition: 'right',
  border: true,
  index: true,
  selection: true,
  grid: false,
  menuWidth: 240,
  labelWidth: 100,
  dialogWidth: 880,
  dialogClickModal: false,
  height: 'auto',
  calcHeight: 20,
  refreshBtn: false,
  gridBtn: false,
  searchShowBtn: false,
  columnBtn: false,
  viewBtn: false,
  editBtn: false,
  delBtn: false,
  column: [
    {
      label: '文件名称',
      prop: 'file_name',
      span: 24,
      search: true,
      searchSpan: 4,
      rules: [{ required: true, message: '请输入文件名称', trigger: 'blur' }],
    },
    {
      label: '图斑类型',
      prop: 'patches_type_desc',
      span: 24,
      searchLabelWidth: 100,
      search: true,
      searchSpan: 4,
      type: 'select',
      dicData: spotTypeOption,
      props: {
        label: 'label',
        value: 'value',
      },
      rules: [{ required: true, message: '请选择图斑类型', trigger: 'blur' }],
    },
    {
      label: '图斑数量',
      prop: 'patches_num',
      span: 24,
      rules: [{ required: true, message: '请输入图斑数量', trigger: 'blur' }],
    },
    {
      label: '异常图斑数量',
      prop: 'exception_num',
      span: 24,
      rules: [{ required: true, message: '请输入异常图斑数量', trigger: 'blur' }],
    },
    {
      label: '行政区划',
      prop: 'areaName',
      span: 24,
      width:180,
      searchLabelWidth: 100,
      search: true,
      searchSpan: 4,
      type: 'tree',
      dicData: deptTreeData,
      props: {
        label: 'name',
        value: 'id',
        children: 'childrens',
      },
      rules: [{ required: true, message: '请选择行政区划', trigger: 'blur' }],
    },
    {
      label: '数据来源',
      prop: 'dataFrom',
      span: 24,
      rules: [{ required: true, message: '请输入数据来源', trigger: 'blur' }],
    },
    {
      label: '创建时间',
      prop: 'create_time',
      span: 24,
      rules: [{ required: true, message: '请输入创建时间', trigger: 'blur' }],
    },
    {
      label: '创建人',
      prop: 'user_name',
      span: 24,
      searchLabelWidth: 100,
      search: true,
      searchSpan: 4,
      type: 'select',
      dicData: creatorOption,
      props: {
        label: 'label',
        value: 'value',
      },
      rules: [{ required: true, message: '请输入创建人', trigger: 'blur' }],
    },
  ],
});
 
const data = ref([]);
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);
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 regionalData = ref([])
const requestDockInfo = () => {
  getRegionTreeAll({ parentCode: userAreaCode.value }).then(res => { 
    const rawData = res.data.data ? [res.data.data] : []; 
    regionalData.value = rawData; 
    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)
        );
 
        if (node.childrens && node.childrens.length) {
          node.childrens = filterTree(node.childrens);
          if (node.childrens.length) return true;
        }
 
        return isMatched;
      });
    };
    deptTreeData.value = filterTree(rawData);
    onLoad(page.value); 
  });
};
// 获取搜索数据
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);
      }
    });
        const creatorOptionuniqueMap = new Map();
    res.data.data.user_names.forEach(item => {
      const [key, value] = Object.entries(item)[0];
      if (!creatorOptionuniqueMap.has(key)) {
        creatorOptionuniqueMap.set(key, value);
      }
    });
    spotTypeOption.value = Array.from(uniqueMap).map(([key, value]) => ({
      label: value,
      value: key,
    }));
    creatorOption.value = Array.from(creatorOptionuniqueMap).map(([key, value]) => ({
      label: value,
      value: key,
    }));
    regionalScope.value = res.data.data.area_codes;
    requestDockInfo();
 
    
  });
};
// ===== watch =====
watch(
  () => form.value.category,
  () => {
    const category = func.toInt(form.value.category);
    option.value.column.forEach(item => {
      if (item.prop === 'appId') {
        item.display = category === 4;
      }
    });
  }
);
// ===== methods =====
const rowSave = (row, done, loading) => {
  add(row).then(
    () => {
      onLoad(page.value);
      ElMessage.success('操作成功!');
      done();
    },
    error => {
      console.log(error);
      loading();
    }
  );
};
 
const rowUpdate = (row, index, done, loading) => {
  update(row).then(
    () => {
      onLoad(page.value);
      ElMessage.success('操作成功!');
      done();
    },
    error => {
      console.log(error);
      loading();
    }
  );
};
 
const rowDel = row => {
 
 ElMessageBox.confirm('确定将选择数据删除?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
  .then(() => patchDeleteApi(row.id))  // 直接传递ID
  .then(() => {
    onLoad(page.value)
    ElMessage.success('操作成功!')
  })
};
 
const searchReset = () => {
page.value.areaCode=''
page.value.createUser=''
page.value.fileName=''
  page.value.lotTypeId =''
page.value.currentPage=1
page.value.pageSize=20
  onLoad(page.value);
};
 
const searchChange = (params, done) => {
  page.value.currentPage = 1;
  page.value.lotTypeId = params.patches_type_desc;
  page.value.createUser = params.user_name;
  page.value.fileName=params.file_name
  page.value.areaCode=params.areaName
  page.value.createUser= params.user_name
  onLoad(page.value);
  done();
};
const selectionChange = list => {
  selectionList.value = list;
};
 
const selectionClear = () => {
  selectionList.value = [];
  crudRef.value?.toggleSelection();
};
 
const handleDebug = row => {
  box.value = true;
};
const beforeOpen = (done, type) => {
  // if (['edit', 'view'].includes(type)) {
  //   getDetail(form.value.id).then(res => {
  //     form.value = res.data.data
  //   })
  // }
  done();
};
 
const currentChange = currentPage => {
  page.value.currentPage = currentPage;
};
 
const sizeChange = pageSize => {
  page.value.pageSize = pageSize;
};
 
const refreshChange = () => {
  onLoad(page.value);
};
 
const onLoad = (pageInfo, params = {}) => {
  const searchparams = {
    current: pageInfo.currentPage,
    size: pageInfo.pageSize,
    lotTypeId: pageInfo.lotTypeId,
    fileName:pageInfo.fileName,
    areaCode:pageInfo.areaCode,
    createUser:pageInfo.createUser
  };
  loading.value = true;
  spotManagementTableApi(searchparams).then(res => {
    const d = res.data.data;
    page.value.total = d.total;
    data.value = d.records
    .map(i=>({
      ...i,
      dataFrom:i.date_from === 0? '本地上传':'国土调查云',
      areaName: findAreaName(i.area_code)
    }));
     console.log('表格数据',data.value );
    loading.value = false;
    selectionClear();
  });
};
const findAreaName = (areaCode) => {
  const nodes = regionalData.value;
  if (!nodes || nodes.length === 0) return areaCode;
 
  const normalizeCode = (code) => {
    if (!code) return '';
    const strCode = String(code).replace(/0+$/, '');
    return strCode.length >= 6 ? strCode : '';
  };
  const targetCode = normalizeCode(areaCode);
  const findInTree = (treeNodes, needFullPath = false, parentPath = []) => {
    for (const node of treeNodes) {
      const currentPath = [...parentPath, node.name];
      
      if (normalizeCode(node.id) === targetCode) {
        return needFullPath ? currentPath.join('/') : node.name;
      }
 
      if (node.childrens?.length > 0) {
        const found = findInTree(node.childrens, needFullPath, currentPath);
        if (found) return found;
      }
    }
    return null;
  };
 
  return findInTree(nodes, true) || areaCode;
};
// 图斑详情/编辑
const uploadPatch = (row, type = 'detail') => {
  detailid.value = row.id;
  uploadPatchDialog.value = true;
  spotDetailsTitle.value = type === 'detail' ? '图斑详情' : '图斑编辑';
  detailList.value = row
};
 
// 跳转至图斑类型管理页面
const goTypeManagement = () => {
  router.push({ path: '/resource/patchTypeManagement' });
};
 
// 下载图斑
const downloadPatch = () => {
  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) => {
  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('上传成功');
box.value = false
searchReset()
    init();
  });
};
provide('searchReset', searchReset);
onMounted(() => {
  getsearchManagementApi();
 
});
</script>
 
<style scoped lang="scss">
.center-align :deep(.el-form-item__content) {
  justify-content: center !important;
}
</style>