<template>
|
<div class="authorityManagement_box">
|
<My-bread :list="['数据管理', '数据入库']"></My-bread>
|
<el-divider />
|
|
<div class="selectComp">
|
<!-- <div class="selectBox">
|
<div class="title">类型选择</div>
|
<el-select v-model="value" clearable placeholder="请选择">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</div> -->
|
<el-tabs type="border-card">
|
<el-tab-pane label="SHP入库">
|
<el-form ref="form" :model="shp_form" label-width="120px">
|
<el-form-item label="表名">
|
<el-input
|
name="name"
|
v-model="shp_form.name"
|
style="width: 215px"
|
/>
|
<code>表名(不支持中文)</code>
|
</el-form-item>
|
<!-- <el-form-item label="数据标题">
|
<el-input
|
name="title"
|
v-model="shp_form.title"
|
style="width: 215px"
|
/>
|
<code>数据标题名(支持中文)</code>
|
</el-form-item> -->
|
<el-form-item label="Shape文件" class="flex_box">
|
<!-- <a href="javascript:;" class="file"
|
>选择文件
|
<input
|
id="input_shp"
|
name="shapefile"
|
size="small"
|
type="file"
|
accept=".shp"
|
style="width: 215px; border-radius: 4px; border-color: #dcdfe6"
|
/>
|
</a> -->
|
|
<input
|
id="input_shp"
|
name="shapefile"
|
size="small"
|
type="file"
|
accept=".shp"
|
style="
|
width: 215px;
|
border-radius: 4px;
|
border: 1px solid #dcdfe6;
|
"
|
/>
|
|
<code>(*.shp)</code>
|
</el-form-item>
|
<el-form-item label="DBF文件">
|
<input
|
id="input_dbf"
|
name="dbasefile"
|
type="file"
|
accept=".dbf"
|
style="
|
width: 215px;
|
border-radius: 4px;
|
border: 1px solid #dcdfe6;
|
"
|
/>
|
<!-- <input id="input_shp" name="shapefile" type="file" @change="validateFile(this,'.shp');" accept=".shp"/> -->
|
<code>(*.dbf)</code>
|
</el-form-item>
|
<el-form-item label="字符集">
|
<el-input
|
name="charset"
|
type="text"
|
v-model="shp_form.charset"
|
style="width: 215px"
|
/>
|
<code>字符集（utf-8或gbk）</code>
|
</el-form-item>
|
<el-form-item label="坐标系">
|
<el-input
|
name="srs"
|
v-model="shp_form.srs"
|
style="width: 215px"
|
/>
|
<code>坐标系, 可选：4326</code>
|
</el-form-item>
|
<el-form-item label="操作方式">
|
<el-select name="action" v-model="shp_form.action">
|
<el-option value="create">create</el-option>
|
<el-option value="recreate">recreate</el-option>
|
<el-option value="append">append</el-option>
|
</el-select>
|
<code
|
>导入方式 create: 新建表; recreate: 如果表已存在, 则删除重建;
|
append: 如果表已存在, 则添加新数据</code
|
>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="primary"
|
style="width: 215px"
|
:disabled="tijiaoFlag"
|
@click="tijiao('shp')"
|
>导入</el-button
|
>
|
<el-button style="width: 215px">取消</el-button>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
<el-tab-pane label="GDB入库">
|
<el-form ref="form" :model="gdb_form" label-width="120px">
|
<el-form-item label="数据文件">
|
<!-- <input
|
id="input_gdb"
|
name="dbasefile"
|
type="file"
|
accept=".zip"
|
style="
|
width: 215px;
|
border-radius: 4px;
|
border: 1px solid #dcdfe6;
|
"
|
/> -->
|
<el-upload
|
class="upload-demo"
|
action="general/upload"
|
multiple
|
:limit="1"
|
accept=".zip"
|
:on-exceed="handleExceed"
|
:file-list="fileList1"
|
:http-request="handlerequest"
|
>
|
<el-button size="small">浏览文件</el-button>
|
<span slot="tip" class="el-upload__tip">*选择gdb文件</span>
|
</el-upload>
|
<!-- <input id="input_shp" name="shapefile" type="file" @change="validateFile(this,'.shp');" accept=".shp"/> -->
|
<!-- <code>(*浏览文件)</code> -->
|
</el-form-item>
|
<el-form-item label="操作方式">
|
<el-select name="action" v-model="gdb_form.action">
|
<el-option value="create">create</el-option>
|
<el-option value="recreate">recreate</el-option>
|
<el-option value="append">append</el-option>
|
</el-select>
|
<code
|
>导入方式 create: 新建表; recreate: 如果表已存在, 则删除重建;
|
append: 如果表已存在, 则添加新数据</code
|
>
|
</el-form-item>
|
</el-form>
|
<el-table :data="tableData" style="width: 50%" v-show="isshow">
|
<el-table-column type="selection" width="55"> </el-table-column>
|
<el-table-column prop="name" label="源表名称"> </el-table-column>
|
<el-table-column prop="type" label="类型"> </el-table-column>
|
<el-table-column prop="storageName" label="入库表名称">
|
<template slot-scope="scope">
|
<el-input
|
v-model="tableData[scope.$index].storageName"
|
placeholder="请输入外包商,以英文逗号分隔;例如:（user1,user2）"
|
></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column prop="coding" label="坐标系编码">
|
<template slot-scope="scope">
|
<el-input
|
v-model="tableData[scope.$index].coding"
|
placeholder="请输入外包商,以英文逗号分隔;例如:（user1,user2）"
|
></el-input>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div style="margin-top: 20px; padding-left: 50px">
|
<el-button type="primary" style="width: 215px" @click="daoru()"
|
>导入</el-button
|
>
|
<el-button style="width: 215px">取消</el-button>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
|
<!-- <div>
|
<div class="checkbox" v-if="showbox1">
|
<div class="title">数据格式</div>
|
<el-checkbox-group v-model="checkList">
|
<el-checkbox label="xls"></el-checkbox>
|
<el-checkbox label="mdb"></el-checkbox>
|
</el-checkbox-group>
|
</div>
|
<div class="checkbox" v-else>
|
<div class="title">数据格式</div>
|
<el-checkbox-group v-model="checkList">
|
<el-checkbox label="GDB"></el-checkbox>
|
<el-checkbox label="SHP"></el-checkbox>
|
</el-checkbox-group>
|
</div>
|
</div> -->
|
</div>
|
|
<!-- <div class="bottom">
|
<div class="title">数据文件</div>
|
<div class="upload">
|
<el-upload
|
class="upload-demo"
|
ref="upload"
|
action="#"
|
:on-preview="handlePreview"
|
:on-remove="handleRemove"
|
:on-success="handleSuccess"
|
:file-list="fileList"
|
:auto-upload="false"
|
>
|
<el-button slot="trigger" size="medium" type="primary"
|
>选择数据</el-button
|
>
|
<div class="btnBox">
|
<el-button size="medium" @click="submitUpload">确定</el-button>
|
<el-button class="cancel" size="medium" @click="submitAbort"
|
>取消</el-button
|
>
|
</div>
|
</el-upload>
|
</div>
|
</div> -->
|
</div>
|
</template>
|
|
<script>
|
import MyBread from "../../components/MyBread.vue";
|
import axios from "axios";
|
export default {
|
name: "Chart",
|
components: { MyBread },
|
data() {
|
return {
|
fileList1: [],
|
|
tableData: [
|
{
|
coding: "4326",
|
name: "站场点",
|
storageName: "sitepoiint",
|
type: "点",
|
},
|
{
|
coding: "4326",
|
name: "标桩",
|
storageName: "marker",
|
type: "点",
|
},
|
],
|
gdb_form: {
|
action: "create",
|
},
|
tijiaoFlag: false,
|
shp_form: {
|
url: "jdbc:postgresql://192.168.20.39:5432/lfgddb",
|
username: "postgres",
|
password: "postgres",
|
charset: "utf-8",
|
driver: "org.postgresql.Driver",
|
buildSpatialDB: true,
|
name: " ",
|
srs: "4326",
|
action: "create",
|
title: "shp数据",
|
group: "廊坊管道",
|
},
|
xls_form: {
|
url: "jdbc:postgresql://10.205.11.245:5434/test",
|
driver: "org.postgresql.Driver",
|
username: "postgres",
|
password: "1qaSW@3ed",
|
buildSpatialDB: true,
|
name: "bbbxlsx",
|
geoFields: "lon,lat",
|
geoType: "POINT",
|
charset: "utf-8",
|
srs: "4326",
|
action: "create",
|
title: "xls数据",
|
group: "廊坊管道",
|
},
|
options: [
|
{
|
value: "slsj",
|
label: "矢量数据",
|
},
|
{
|
value: "chart",
|
label: "图表",
|
},
|
],
|
value: "slsj",
|
showbox1: false,
|
checkList: [],
|
fileList: [],
|
isshow: false,
|
};
|
},
|
methods: {
|
daoru() {
|
this.$message({
|
showClose: true,
|
message: "导入成功",
|
type: "success",
|
});
|
|
},
|
handlerequest(file) {
|
this.isshow = true;
|
console.log(file);
|
},
|
handleExceed(files, fileList) {
|
this.$message.warning(
|
`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
|
files.length + fileList.length
|
} 个文件`
|
);
|
},
|
|
tijiao(type) {
|
this.$message({
|
showClose: true,
|
message: "导入成功",
|
type: "success",
|
});
|
},
|
submitUpload() {
|
this.$refs.upload.submit();
|
},
|
handleRemove(file, fileList) {
|
console.log(file, fileList);
|
},
|
handlePreview(file) {
|
console.log(file);
|
},
|
handleSuccess(file) {
|
console.log(file);
|
},
|
submitAbort() {
|
// console.log(file);
|
},
|
},
|
watch: {
|
value(n, o) {
|
if (n == "chart") {
|
this.showbox1 = true;
|
} else {
|
this.showbox1 = false;
|
}
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.authorityManagement_box {
|
background: rgb(240, 242, 245);
|
border-radius: 10px;
|
height: 100%;
|
padding: 10px;
|
box-sizing: border-box;
|
.selectComp {
|
// margin: 50px 0 0 30px;
|
// width: 600px;
|
// height: 5%;
|
// display: flex;
|
// justify-content: space-around;
|
// align-items: center;
|
.title {
|
width: 100px;
|
}
|
.selectBox,
|
.checkbox {
|
display: flex;
|
align-items: center;
|
margin-bottom: 30px;
|
}
|
.checkbox {
|
width: 500px;
|
}
|
}
|
.bottom {
|
// margin: 50px 0 0 30px;
|
width: 600px;
|
height: 500px;
|
// background-color: #fff;
|
display: flex;
|
.title {
|
width: 100px;
|
}
|
.upload {
|
/deep/ .el-upload-list {
|
// background-color: #bfa;
|
overflow: auto;
|
width: 500px;
|
height: 200px;
|
border: 1px solid rgb(126, 125, 125);
|
// border-radius: 10px;
|
}
|
}
|
.btnBox {
|
position: relative;
|
top: 250px;
|
left: 100px;
|
width: 300px;
|
display: flex;
|
justify-content: space-between;
|
}
|
}
|
code {
|
margin-left: 10px;
|
color: grey;
|
font-size: 12px;
|
}
|
.el-upload__tip {
|
margin-left: 10px;
|
color: grey;
|
font-size: 12px;
|
}
|
// .file {
|
// position: relative;
|
// display: inline-block;
|
// background: #d0eeff;
|
// border: 1px solid #99d3f5;
|
// border-radius: 4px;
|
// padding: 4px 12px;
|
// overflow: hidden;
|
// color: #1e88c7;
|
// text-decoration: none;
|
// text-indent: 0;
|
// line-height: 20px;
|
// }
|
// .file input {
|
// position: absolute;
|
// font-size: 100px;
|
// // right: 0;
|
// top: 0;
|
// opacity: 0;
|
// }
|
// .file:hover {
|
// background: #aadffd;
|
// border-color: #78c3f3;
|
// color: #004974;
|
// text-decoration: none;
|
// }
|
.flex_box {
|
// display: flex;
|
// align-items: center;
|
}
|
}
|
</style>
|
