538 lines
16 KiB
Vue
538 lines
16 KiB
Vue
<template>
|
||
<a-modal
|
||
class="insert-shp-modal"
|
||
width="1290px"
|
||
:destroyOnClose="true"
|
||
v-model:open="props.openModal"
|
||
@cancel="closeModal"
|
||
>
|
||
<template #closeIcon>
|
||
<CloseCircleOutlined />
|
||
</template>
|
||
<div class="title">上传数据</div>
|
||
<div class="content">
|
||
<a-steps
|
||
class="steps"
|
||
:current="current"
|
||
label-placement="vertical"
|
||
:items="[{ title: '选择文件' }, { title: '编辑信息' }, { title: '完成' }]"
|
||
></a-steps>
|
||
<div class="select-file-div" v-show="current === 0">
|
||
<div class="upload-div">
|
||
<a-upload-dragger
|
||
style="height: 174px; width: 174px"
|
||
class="upload-dragger"
|
||
v-model:fileList="fileList"
|
||
name="file"
|
||
:multiple="false"
|
||
:maxCount="1"
|
||
:before-upload="beforeUpload"
|
||
accept=".zip,.xlsx"
|
||
>
|
||
<p class="ant-upload-drag-icon">
|
||
<inbox-outlined></inbox-outlined>
|
||
</p>
|
||
<div style="opacity: 0.7">
|
||
<a-button :icon="h(PlusOutlined)">文件上传</a-button>
|
||
</div>
|
||
</a-upload-dragger>
|
||
</div>
|
||
<div class="upload-span">
|
||
<div class="upload-span-content">
|
||
<div style="opacity: 0.7">将文件拖拽到这里或点击上传按钮</div>
|
||
<div style="color: #1e5eff">支持扩展名：zip,xlsx</div>
|
||
<div style="opacity: 0.7">zip中需要包含 .shp .shx .dbf 文件 且.shp文件大小小于10MB</div>
|
||
</div>
|
||
</div>
|
||
<div class="upload-form">
|
||
|
||
<a-form
|
||
ref="formRef"
|
||
:model="uploadFrom"
|
||
:label-col="{ style: { width: '75px' } }"
|
||
labelAlign="right"
|
||
:rules="uploadFormRules"
|
||
>
|
||
<a-form-item label="服务名称" name="serverName">
|
||
<a-input v-model:value="uploadFrom.serverName" placeholder="请输入服务名称" />
|
||
</a-form-item>
|
||
|
||
<!-- 显示条件：文件类型为Excel时 -->
|
||
<a-form-item label="图斑数据" name="hasFeature" v-if="!isShp">
|
||
<a-select v-model:value="uploadFrom.hasFeature" placeholder="请选择是否具有图斑数据">
|
||
<a-select-option value="1">是</a-select-option>
|
||
<a-select-option value="0">否</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
|
||
<!-- 显示条件：文件类型为shp 或者 类型为Excel时有图斑数据 -->
|
||
<a-form-item label="空间参考" name="spaceType" v-if="isShp || (!isShp && uploadFrom.hasFeature == '1')">
|
||
<a-select v-model:value="uploadFrom.spaceType" placeholder="请选择空间参考">
|
||
<a-select-option value="EPSG:4326">EPSG:4326</a-select-option>
|
||
<a-select-option value="3857">EPSG:3857</a-select-option>
|
||
<a-select-option value="900913">EPSG:900913</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
|
||
<!-- 显示条件：文件类型为Excel有图斑时 -->
|
||
<a-form-item label="数据类型" name="spaceType" v-if="!isShp && uploadFrom.hasFeature == '1'">
|
||
<a-select v-model:value="uploadFrom.layerType" placeholder="请选择数据类型">
|
||
<a-select-option value="point">点</a-select-option>
|
||
<a-select-option value="linestring">线</a-select-option>
|
||
<a-select-option value="polygon">面</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
|
||
<a-form-item label="数据表名" name="tableName">
|
||
<a-row :gutter="12">
|
||
<a-col :span="20">
|
||
<a-input v-model:value="uploadFrom.tableName" placeholder="请输入表名" />
|
||
</a-col>
|
||
<a-col :span="4">
|
||
<!-- <a-tooltip title="从现有数据表中选择">
|
||
<a-button type="primary" :icon="h(PlusOutlined)" @click="handlerGetExistsTableList"/>
|
||
</a-tooltip> -->
|
||
|
||
<a-popover placement="topLeft">
|
||
<template #content>
|
||
<a-table :dataSource="dataSource" :columns="columns" :size="'small'" >
|
||
<template #bodyCell="{ column,record }">
|
||
<template v-if="column.key === 'operation'">
|
||
<a-button type="" :icon="h(PlusOutlined)" @click="handlerGetExistsTableList(record)" />
|
||
</template>
|
||
</template>
|
||
</a-table>
|
||
</template>
|
||
|
||
<template #title>
|
||
<span>从现有数据表中选择</span>
|
||
</template>
|
||
<a-button type="primary" :icon="h(PlusOutlined)" />
|
||
</a-popover>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form-item>
|
||
</a-form>
|
||
|
||
<div class="upload-span-button">
|
||
<a-button type="primary" :icon="h(CloudUploadOutlined)" @click="submitShp">上传</a-button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="edit-info-div" v-show="current === 1">
|
||
<a-table
|
||
:columns="tablecolumns"
|
||
:data-source="dataList"
|
||
:pagination="false"
|
||
:bordered="true"
|
||
:scroll="{ y: 260 }"
|
||
>
|
||
<template #bodyCell="{ column, record }">
|
||
<template v-if="column.key === 'type'">
|
||
<a-select v-model:value="record.type" style="width: 120px">
|
||
<a-select-option value="geometry">geometry</a-select-option>
|
||
<a-select-option value="varchar">varchar</a-select-option>
|
||
<a-select-option value="text">text</a-select-option>
|
||
</a-select>
|
||
</template>
|
||
<template v-if="column.key === 'length'">
|
||
<a-input v-model:value="record.length" />
|
||
</template>
|
||
<template v-if="column.key === 'refName'">
|
||
<a-input v-model:value="record.refName" />
|
||
</template>
|
||
<template v-if="column.key === 'initName'">
|
||
<a-input v-model:value="record.initName" />
|
||
</template>
|
||
<template v-if="column.key === 'operation'">
|
||
<a-button shape="round" :icon="h(DeleteOutlined)" @click="deleteListItem(record)">
|
||
删除
|
||
</a-button>
|
||
</template>
|
||
</template>
|
||
</a-table>
|
||
<div class="insert-list-button" @click="insertListItem">新增一条</div>
|
||
<div class="footer-button">
|
||
<a-button @click="current--">取消</a-button>
|
||
<a-button style="margin-left: 25px" type="primary" @click="submitDataList"
|
||
>下一步</a-button
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="submit-success" v-show="current === 2">
|
||
<div class="success-content">
|
||
<CheckCircleOutlined style="font-size: 100px; color: #1fd286; margin-bottom: 30px" />
|
||
<div style="margin-bottom: 19px; font-size: 26px">导入成功</div>
|
||
<div><a-button type="primary">查看数据</a-button></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 已有数据表 -->
|
||
<div class="exist-table-list" v-if="showExistTableList">
|
||
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { defineEmits, defineProps, ref, h, reactive, onUnmounted, toRaw } from 'vue';
|
||
import {
|
||
CloseCircleOutlined,
|
||
PlusOutlined,
|
||
DeleteOutlined,
|
||
CheckCircleOutlined,
|
||
} from '@ant-design/icons-vue';
|
||
import './index.scss';
|
||
import { InboxOutlined,CloudUploadOutlined } from '@ant-design/icons-vue';
|
||
import { message } from 'ant-design-vue';
|
||
import type { UploadChangeParam } from 'ant-design-vue';
|
||
import type { UploadProps } from 'ant-design-vue';
|
||
// import { uploadShp } from '@/api/sys/analysis.ts'
|
||
import axios from 'axios';
|
||
import { v4 as uuidv4 } from 'uuid';
|
||
import { FILETYPE } from '../util'
|
||
import {ObjectToUrl} from '../src/tool'
|
||
const dataSource = reactive([
|
||
{
|
||
"tablename":"monitor"
|
||
},
|
||
{
|
||
"tablename":"monitor0527"
|
||
},
|
||
])
|
||
|
||
const columns = reactive([
|
||
{
|
||
title: '数据表名称',
|
||
dataIndex: 'tablename',
|
||
key: 'tablename',
|
||
},{
|
||
title: '选择数据表',
|
||
dataIndex: 'operation',
|
||
key: 'operation',
|
||
}
|
||
])
|
||
|
||
const current = ref(0);
|
||
const fileList = ref<UploadProps['fileList']>([]);
|
||
const props = defineProps(['openModal']);
|
||
const emits = defineEmits(['update:openModal']);
|
||
const uploadFrom = reactive({
|
||
serverName: null,
|
||
hasFeature:null,
|
||
spaceType: null,
|
||
layerType:null,
|
||
tableName: null,
|
||
});
|
||
const formRef = ref();
|
||
const dataList = ref([]);
|
||
const isShp = ref<Boolean>(true);
|
||
const showExistTableList = ref<Boolean>(false)
|
||
|
||
// todo
|
||
const tablecolumns = [
|
||
{ title: 'Shp原始字段', dataIndex: 'name', key: 'name' },
|
||
{ title: '数据类型', dataIndex: 'type', key: 'type' },
|
||
{ title: '数据长度', dataIndex: 'length', key: 'length' },
|
||
{ title: '英文名称', dataIndex: 'refName', key: 'refName' },
|
||
{ title: '中文名称', dataIndex: 'initName', key: 'initName' },
|
||
{ title: '操作', dataIndex: 'operation', key: 'operation' },
|
||
];
|
||
|
||
|
||
|
||
const uploadFormRules = reactive({
|
||
serverName: [{ required: true, message: '请输入服务名称', trigger: 'blur' }],
|
||
hasFeature: [{ required: true, message: '请选择是否有图斑数据', trigger: 'blur' }],
|
||
spaceType: [{ required: true, message: '请选择参考系', trigger: 'blur' }],
|
||
layerType: [{ required: true, message: '请选数据类型', trigger: 'blur' }],
|
||
tableName: [{ required: true, message: '请输入表名', trigger: 'blur' }],
|
||
});
|
||
|
||
|
||
const beforeUpload:UploadProps['beforeUpload'] = (file) => {
|
||
file.type === FILETYPE.ZIP ? isShp.value = true: isShp.value = false
|
||
fileList.value = [file];
|
||
return false;
|
||
};
|
||
|
||
|
||
const handlerUploadFile = ()=>{
|
||
let url = "http://192.168.10.102:9500/api/Files/Upload"
|
||
|
||
const [proxyFile] = fileList.value
|
||
let file = proxyFile.originFileObj
|
||
|
||
let formData = new FormData();
|
||
formData.append('files', file)
|
||
// formData.append('serverName',uploadFrom.serverName)
|
||
// formData.append('spaceType',uploadFrom.spaceType)
|
||
// formData.append('tableName',uploadFrom.tableName)
|
||
|
||
|
||
axios.post(url,formData,{headers: {'Content-Type': 'multipart/form-data;charset=UTF-8','X-Token':"95a1a7a8"}}).then(res => {
|
||
alert(res.data.result[0].filePath);
|
||
handlerCreateLayer(res.data.result[0].filePath)
|
||
})
|
||
}
|
||
|
||
const handlerCreateLayer =(filePath)=>{
|
||
|
||
// upload 接口返回路径的反斜杠替换 20240528\\2024052814563161320172.zip → 20240528/2024052814563161320172.zip
|
||
|
||
filePath = filePath.replace(/\\/,'/');
|
||
|
||
let addForm = {
|
||
filePath:filePath,
|
||
tableName:uploadFrom.tableName,
|
||
srid:uploadFrom.spaceType
|
||
}
|
||
let params = ObjectToUrl(addForm);
|
||
|
||
axios.post("http://192.168.10.102:9500/api/PolygonalShape/CreateGISLayer"+params,{},{headers:{'Content-Type': 'multipart/form-data;charset=UTF-8','X-Token':"95a1a7a8"}}).then(res=>{
|
||
console.log("helloworld",res);
|
||
})
|
||
}
|
||
|
||
const submitShp = () => {
|
||
formRef.value.validate().then(() => {
|
||
if(fileList.value?.length < 1){
|
||
message.warning('请选择需要上传的文件')
|
||
return
|
||
}
|
||
|
||
// 文件上传FormData()
|
||
let formData = new FormData();
|
||
|
||
const [proxyFile] = fileList.value
|
||
|
||
let file = proxyFile.originFileObj
|
||
|
||
formData.append('file', file)
|
||
formData.append('serverName',uploadFrom.serverName)
|
||
formData.append('spaceType',uploadFrom.spaceType)
|
||
formData.append('tableName',uploadFrom.tableName)
|
||
let url = ""
|
||
isShp.value? url = 'http://221.2.83.254:9006/geoserver/uploadFile': url = 'http://221.2.83.254:9006/geoserver/uploadExcelFile'
|
||
|
||
// isShp.value ? url = "http://192.168.10.102:9500/api/Files/Upload" : url = "http://192.168.10.102:9500/api/Files/Upload"
|
||
|
||
// let data = [
|
||
// {
|
||
// "length": 1024,
|
||
// "name": "name",
|
||
// "type": "varchar"
|
||
// },
|
||
// {
|
||
// "length": 1024,
|
||
// "name": "num",
|
||
// "type": "varchar"
|
||
// },
|
||
// {
|
||
// "length": 1024,
|
||
// "name": "type",
|
||
// "type": "varchar"
|
||
// },
|
||
// {
|
||
// "length": 1024,
|
||
// "name": "shebeiid",
|
||
// "type": "varchar"
|
||
// },
|
||
// {
|
||
// "length": 1024,
|
||
// "name": "forestryty",
|
||
// "type": "varchar"
|
||
// },
|
||
// {
|
||
// "length": "",
|
||
// "name": "geom",
|
||
// "type": "geometry"
|
||
// },
|
||
// {
|
||
// "length": 1024,
|
||
// "name": "road",
|
||
// "type": "varchar"
|
||
// },
|
||
// {
|
||
// "length": 1024,
|
||
// "name": "checksite",
|
||
// "type": "varchar"
|
||
// },
|
||
// {
|
||
// "length": 1024,
|
||
// "name": "lng",
|
||
// "type": "varchar"
|
||
// },
|
||
// {
|
||
// "length": 1024,
|
||
// "name": "lat",
|
||
// "type": "varchar"
|
||
// }
|
||
// ]
|
||
|
||
axios.post(url,formData,{headers: {'Content-Type': 'multipart/form-data;charset=UTF-8'}}).then(res => {
|
||
let data = res.data.data.heads
|
||
let showData = data.map(item => {
|
||
return {...item,refName:item.name.toLowerCase(),initName:item.name,key:uuidv4()}
|
||
})
|
||
dataList.value = showData
|
||
current.value++
|
||
|
||
}).catch(err => {
|
||
console.log(err)
|
||
})
|
||
}).catch(err => {
|
||
console.log(err)
|
||
})
|
||
}
|
||
|
||
const closeModal = () => {
|
||
emits('update:openModal', false)
|
||
formRef.value.resetFields()
|
||
fileList.value = []
|
||
current.value = 0
|
||
}
|
||
|
||
const deleteListItem = (record) => {
|
||
dataList.value = dataList.value.filter(item => item.key !== record.key)
|
||
}
|
||
const insertListItem = () => {
|
||
dataList.value.push({
|
||
key:uuidv4(),
|
||
name:'',
|
||
type:'',
|
||
length:'',
|
||
refName:'',
|
||
initName:'',
|
||
})
|
||
}
|
||
const submitDataList = () => {
|
||
|
||
|
||
// let refRelation = {}
|
||
|
||
// dataList.value.forEach((item,index)=>{
|
||
// refRelation[item.refName] = item.initName;
|
||
// })
|
||
|
||
// console.log("refRelation",refRelation);
|
||
|
||
|
||
// let exportForm = {
|
||
// "newHeads": dataList.value,
|
||
// "refRelation": JSON.stringify(refRelation),
|
||
// }
|
||
|
||
// console.log(dataList.value)
|
||
current.value++
|
||
}
|
||
|
||
// 获取现有数据表
|
||
const handlerGetExistsTableList = (record )=>{
|
||
uploadFrom.tableName = record.tablename
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.insert-shp-modal {
|
||
.title {
|
||
height: 77px;
|
||
border-bottom: 1px solid #d7dbec;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 63px;
|
||
font-size: 28px;
|
||
}
|
||
.content {
|
||
padding: 106px;
|
||
}
|
||
.steps {
|
||
// margin-bottom: 80px;
|
||
}
|
||
.select-file-div {
|
||
padding-left: 52px;
|
||
padding-top: 80px;
|
||
display: flex;
|
||
.upload-div {
|
||
width: 200px;
|
||
height: 200px;
|
||
background: #ffffff;
|
||
box-shadow: 0px 52px 103px 0px rgba(192, 199, 218, 0.35);
|
||
border-radius: 4px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.upload-dragger {
|
||
height: 174px;
|
||
}
|
||
}
|
||
.upload-span {
|
||
margin-left: 40px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
.upload-span-content {
|
||
font-size: 16px;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
.upload-form {
|
||
flex: 1;
|
||
margin-left: 40px;
|
||
.upload-span-button {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
}
|
||
}
|
||
.edit-info-div {
|
||
padding-top: 26px;
|
||
.footer-button {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
.insert-list-button {
|
||
background-color: #91b0ff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
user-select: none;
|
||
cursor: pointer;
|
||
height: 30px;
|
||
border-bottom-left-radius: 10px;
|
||
border-bottom-right-radius: 10px;
|
||
font-weight: 400;
|
||
transition: 1s;
|
||
}
|
||
.insert-list-button:hover {
|
||
font-weight: 900;
|
||
color: #000;
|
||
}
|
||
}
|
||
.submit-success {
|
||
.success-content {
|
||
width: 200px;
|
||
align-items: center;
|
||
margin: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
.exist-table-list{
|
||
width:100%;
|
||
height: calc( 100% - 60px);
|
||
position:absolute;
|
||
top:60px;
|
||
left:0px;
|
||
background:#fff;
|
||
border-radius: 12px;
|
||
}
|
||
}
|
||
</style>
|