|
@@ -1,11 +1,6 @@
|
|
<template>
|
|
<template>
|
|
<!-- 上传数据弹窗 -->
|
|
<!-- 上传数据弹窗 -->
|
|
- <el-dialog
|
|
|
|
- title="上传数据"
|
|
|
|
- :visible.sync="dialogVisible"
|
|
|
|
- :before-close="handleClose"
|
|
|
|
- width="400px"
|
|
|
|
- >
|
|
|
|
|
|
+ <el-dialog title="上传数据" :visible.sync="dialogVisible" :before-close="handleClose" width="400px">
|
|
<template slot="title">
|
|
<template slot="title">
|
|
<div class="dialogTitle">
|
|
<div class="dialogTitle">
|
|
<div class="dialogTitleIcon"></div>
|
|
<div class="dialogTitleIcon"></div>
|
|
@@ -23,15 +18,12 @@
|
|
:before-remove="beforeRemove"
|
|
:before-remove="beforeRemove"
|
|
:before-upload="beforeAvatarUpload"
|
|
:before-upload="beforeAvatarUpload"
|
|
multiple
|
|
multiple
|
|
- :limit="1"
|
|
|
|
:on-exceed="handleExceed"
|
|
:on-exceed="handleExceed"
|
|
:file-list="fileList"
|
|
:file-list="fileList"
|
|
>
|
|
>
|
|
<i class="el-icon-upload"></i>
|
|
<i class="el-icon-upload"></i>
|
|
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
|
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
|
- <div class="el-upload__tip" slot="tip">
|
|
|
|
- *仅支持Geojson格式文件,且不超过5MB
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div class="el-upload__tip" slot="tip">*仅支持Geojson格式文件,且不超过5MB</div>
|
|
</el-upload>
|
|
</el-upload>
|
|
</div>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<span slot="footer" class="dialog-footer">
|
|
@@ -57,7 +49,7 @@ export default {
|
|
// 上传文件列表
|
|
// 上传文件列表
|
|
fileList: [],
|
|
fileList: [],
|
|
// 上传数据弹窗显示状态
|
|
// 上传数据弹窗显示状态
|
|
- dialogVisible: false,
|
|
|
|
|
|
+ dialogVisible: false
|
|
};
|
|
};
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
@@ -83,13 +75,6 @@ export default {
|
|
handleClose() {
|
|
handleClose() {
|
|
if (this.dialogVisible) {
|
|
if (this.dialogVisible) {
|
|
this.clearDialogVisible();
|
|
this.clearDialogVisible();
|
|
- this.$confirm("确认关闭?")
|
|
|
|
- .then((_) => {
|
|
|
|
- console.log("确认关闭吗");
|
|
|
|
-
|
|
|
|
- this.clearDialogVisible();
|
|
|
|
- })
|
|
|
|
- .catch((_) => {});
|
|
|
|
}
|
|
}
|
|
},
|
|
},
|
|
// 上传数据关闭
|
|
// 上传数据关闭
|
|
@@ -101,16 +86,14 @@ export default {
|
|
},
|
|
},
|
|
// 上传数据表单提交
|
|
// 上传数据表单提交
|
|
subMitDialogVisible() {
|
|
subMitDialogVisible() {
|
|
- this.$message.success("数据上传成功!");
|
|
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
if (map2DViewer.analysisGroups[`upload_layer_unique`]) {
|
|
if (map2DViewer.analysisGroups[`upload_layer_unique`]) {
|
|
- map2DViewer.map.fitBounds(
|
|
|
|
- map2DViewer.analysisGroups[`upload_layer_unique`].getBounds()
|
|
|
|
- );
|
|
|
|
|
|
+ this.$message.success("数据上传成功!");
|
|
|
|
+ map2DViewer.map.fitBounds(map2DViewer.analysisGroups[`upload_layer_unique`].getBounds());
|
|
}
|
|
}
|
|
let options = {
|
|
let options = {
|
|
id: "upload_layer_unique",
|
|
id: "upload_layer_unique",
|
|
- label: "我的图层1",
|
|
|
|
|
|
+ label: "我的图层1"
|
|
};
|
|
};
|
|
this.$bus.$emit("addUploadLayerEvent", options);
|
|
this.$bus.$emit("addUploadLayerEvent", options);
|
|
}, 1000);
|
|
}, 1000);
|
|
@@ -119,7 +102,7 @@ export default {
|
|
},
|
|
},
|
|
// 文件列表移除文件时
|
|
// 文件列表移除文件时
|
|
handleRemove(file, fileList) {
|
|
handleRemove(file, fileList) {
|
|
- console.log(file, fileList);
|
|
|
|
|
|
+ console.log("删除数据中移除文件", file, fileList);
|
|
},
|
|
},
|
|
// 点击文件列表中已上传的文件时
|
|
// 点击文件列表中已上传的文件时
|
|
handlePreview(file) {
|
|
handlePreview(file) {
|
|
@@ -127,25 +110,20 @@ export default {
|
|
},
|
|
},
|
|
// 文件超出个数限制时
|
|
// 文件超出个数限制时
|
|
handleExceed(files, fileList) {
|
|
handleExceed(files, fileList) {
|
|
- this.$message.warning(
|
|
|
|
- `当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${
|
|
|
|
- files.length + fileList.length
|
|
|
|
- } 个文件`
|
|
|
|
- );
|
|
|
|
|
|
+ // this.$message.warning(
|
|
|
|
+ // `当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${
|
|
|
|
+ // files.length + fileList.length
|
|
|
|
+ // } 个文件`
|
|
|
|
+ // );
|
|
},
|
|
},
|
|
// 删除文件之前
|
|
// 删除文件之前
|
|
beforeRemove(file, fileList) {
|
|
beforeRemove(file, fileList) {
|
|
- this.$store.state.mapMethodsCollection
|
|
|
|
- .get("RENDER")
|
|
|
|
- .deletePolygonLayer("upload_layer");
|
|
|
|
- delete map2DViewer.polygons["upload_layer"];
|
|
|
|
this.$message.success(`文件${file.name}移除成功!`);
|
|
this.$message.success(`文件${file.name}移除成功!`);
|
|
return true;
|
|
return true;
|
|
},
|
|
},
|
|
// 文件上传成功时
|
|
// 文件上传成功时
|
|
handleSuccess(response, file, fileList) {
|
|
handleSuccess(response, file, fileList) {
|
|
this.getActionData(file);
|
|
this.getActionData(file);
|
|
- // console.log("文件上传成功", response, file, fileList);
|
|
|
|
},
|
|
},
|
|
// 根据上传的文件渲染到地图中
|
|
// 根据上传的文件渲染到地图中
|
|
uploadRENDER(geoJson) {
|
|
uploadRENDER(geoJson) {
|
|
@@ -164,19 +142,13 @@ export default {
|
|
let geometry = JSON.stringify(ele);
|
|
let geometry = JSON.stringify(ele);
|
|
this.$store.state.mapMethodsCollection
|
|
this.$store.state.mapMethodsCollection
|
|
.get("RENDER")
|
|
.get("RENDER")
|
|
- .addSinglePolygon(
|
|
|
|
- geometry,
|
|
|
|
- cid,
|
|
|
|
- "rgb(0,255,255)",
|
|
|
|
- uniqueId,
|
|
|
|
- "我的图层",
|
|
|
|
- "土地资源"
|
|
|
|
- );
|
|
|
|
|
|
+ .addSinglePolygon(geometry, cid, "rgb(0,255,255)", uniqueId, "我的图层", "土地资源");
|
|
});
|
|
});
|
|
}
|
|
}
|
|
},
|
|
},
|
|
// 读取file对象内容
|
|
// 读取file对象内容
|
|
getActionData(file) {
|
|
getActionData(file) {
|
|
|
|
+ // console.log();
|
|
const __this = this;
|
|
const __this = this;
|
|
var reader = new FileReader(); // 新建一个FileReader
|
|
var reader = new FileReader(); // 新建一个FileReader
|
|
reader.readAsText(file.raw, "UTF-8"); // 读取文件
|
|
reader.readAsText(file.raw, "UTF-8"); // 读取文件
|
|
@@ -184,7 +156,6 @@ export default {
|
|
//读取文件完毕执行此函数
|
|
//读取文件完毕执行此函数
|
|
const dataJson = JSON.parse(evt.target.result);
|
|
const dataJson = JSON.parse(evt.target.result);
|
|
__this.uploadRENDER(dataJson);
|
|
__this.uploadRENDER(dataJson);
|
|
- // console.log("上传的文件内容:", dataJson);
|
|
|
|
};
|
|
};
|
|
},
|
|
},
|
|
// 上传文件之前
|
|
// 上传文件之前
|
|
@@ -198,9 +169,9 @@ export default {
|
|
this.$message.error("上传文件大小不能超过 5MB!");
|
|
this.$message.error("上传文件大小不能超过 5MB!");
|
|
}
|
|
}
|
|
return isJPG && isLt5M;
|
|
return isJPG && isLt5M;
|
|
- },
|
|
|
|
|
|
+ }
|
|
},
|
|
},
|
|
- watch: {},
|
|
|
|
|
|
+ watch: {}
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|