|
@@ -10,7 +10,7 @@
|
|
<div id="uploadingBox">
|
|
<div id="uploadingBox">
|
|
<div v-show="dataUpState" style="width: 100%">
|
|
<div v-show="dataUpState" style="width: 100%">
|
|
<el-progress
|
|
<el-progress
|
|
- :percentage="postIndex == 0 ? 0 : postIndex / postDataSize"
|
|
|
|
|
|
+ :percentage="postIndex == 0 ? 0 : (postIndex / postDataSize) * 100"
|
|
:stroke-width="10"
|
|
:stroke-width="10"
|
|
:show-text="false"
|
|
:show-text="false"
|
|
></el-progress>
|
|
></el-progress>
|
|
@@ -39,7 +39,7 @@
|
|
</div>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="clearDialogVisible()">取 消</el-button>
|
|
<el-button @click="clearDialogVisible()">取 消</el-button>
|
|
- <el-button type="primary" @click="subMitDialogVisible()">确 定</el-button>
|
|
|
|
|
|
+ <el-button type="primary" :disabled="dataUpState" @click="subMitDialogVisible()">确 定</el-button>
|
|
</span>
|
|
</span>
|
|
</el-dialog>
|
|
</el-dialog>
|
|
</template>
|
|
</template>
|
|
@@ -55,6 +55,7 @@ export default {
|
|
components: {},
|
|
components: {},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ townMap: new Map(),
|
|
dataUpState: false,
|
|
dataUpState: false,
|
|
postIndex: 0,
|
|
postIndex: 0,
|
|
postDataSize: 0,
|
|
postDataSize: 0,
|
|
@@ -72,6 +73,9 @@ export default {
|
|
this.$bus.$on("scsj", () => {
|
|
this.$bus.$on("scsj", () => {
|
|
this.changeShowBottomMenusStatus();
|
|
this.changeShowBottomMenusStatus();
|
|
});
|
|
});
|
|
|
|
+ this.$Get("./static/json/simplified_pdgeojson.json").then(res => {
|
|
|
|
+ this.pd = res;
|
|
|
|
+ });
|
|
},
|
|
},
|
|
destroy() {
|
|
destroy() {
|
|
// 当容器销毁时,需要停止监听该事件
|
|
// 当容器销毁时,需要停止监听该事件
|
|
@@ -100,26 +104,32 @@ export default {
|
|
},
|
|
},
|
|
// 上传数据表单提交
|
|
// 上传数据表单提交
|
|
subMitDialogVisible() {
|
|
subMitDialogVisible() {
|
|
- let that = this;
|
|
|
|
- try {
|
|
|
|
|
|
+ if (this.townMap.size == 0) {
|
|
|
|
+ this.$store.state.selectSelectDataMap.associatedItems.forEach(v => {
|
|
|
|
+ this.townMap.set(v.name, v.index);
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ if (this.townMap.size > 0) {
|
|
|
|
+ let that = this;
|
|
shp("http://127.0.0.1:8089/dz").then(function (geojson) {
|
|
shp("http://127.0.0.1:8089/dz").then(function (geojson) {
|
|
window.geojsontu = geojson;
|
|
window.geojsontu = geojson;
|
|
that.postDataSize = geojson.features.length;
|
|
that.postDataSize = geojson.features.length;
|
|
that.dataUpState = true;
|
|
that.dataUpState = true;
|
|
- that.addData();
|
|
|
|
|
|
+ let pdData = that.pd.features;
|
|
|
|
+ that.addData(pdData);
|
|
});
|
|
});
|
|
- } catch (e) {
|
|
|
|
- console.log(e);
|
|
|
|
|
|
+ } else {
|
|
|
|
+ this.$message.error("浦东新区行政区划数据未获取,请尝试刷新页面并重试!");
|
|
}
|
|
}
|
|
// this.clearDialogVisible();
|
|
// this.clearDialogVisible();
|
|
},
|
|
},
|
|
// 文件列表移除文件时
|
|
// 文件列表移除文件时
|
|
handleRemove(file, fileList) {
|
|
handleRemove(file, fileList) {
|
|
- console.log(file, fileList);
|
|
|
|
|
|
+ // console.log(file, fileList);
|
|
},
|
|
},
|
|
// 点击文件列表中已上传的文件时
|
|
// 点击文件列表中已上传的文件时
|
|
handlePreview(file) {
|
|
handlePreview(file) {
|
|
- this.getActionData(file);
|
|
|
|
|
|
+ // this.getActionData(file);
|
|
},
|
|
},
|
|
// 文件超出个数限制时
|
|
// 文件超出个数限制时
|
|
handleExceed(files, fileList) {
|
|
handleExceed(files, fileList) {
|
|
@@ -145,10 +155,79 @@ export default {
|
|
},
|
|
},
|
|
// 读取file对象内容
|
|
// 读取file对象内容
|
|
getActionData(file) {},
|
|
getActionData(file) {},
|
|
- addData() {
|
|
|
|
- var geojsondata = window.geojsontu.features[this.postIndex];
|
|
|
|
|
|
+ addData(pdData) {
|
|
|
|
+ let geojsondata = window.geojsontu.features[this.postIndex];
|
|
if (geojsondata && this.postIndex < this.postDataSize) {
|
|
if (geojsondata && this.postIndex < this.postDataSize) {
|
|
delete geojsondata["geometry"]["bbox"];
|
|
delete geojsondata["geometry"]["bbox"];
|
|
|
|
+ // 参数转换
|
|
|
|
+ // 先获取面积
|
|
|
|
+ let area = 0;
|
|
|
|
+ // 设置字段
|
|
|
|
+ let targetProperties = {
|
|
|
|
+ 面积: "",
|
|
|
|
+ 镇域名称: "",
|
|
|
|
+ xzqh: "",
|
|
|
|
+ 图层构成: "",
|
|
|
|
+ 性质: ""
|
|
|
|
+ };
|
|
|
|
+ let coordinates = "";
|
|
|
|
+ let testPolygon = "";
|
|
|
|
+ let outer = "";
|
|
|
|
+ let outerPolygon = "";
|
|
|
|
+ let inner = "";
|
|
|
|
+ let innerPolygon = "";
|
|
|
|
+ let type = geojsondata.geometry.type;
|
|
|
|
+ if (type === "Polygon") {
|
|
|
|
+ coordinates = geojsondata.geometry.coordinates;
|
|
|
|
+ testPolygon = turf.polygon(coordinates);
|
|
|
|
+ area = turf.area(testPolygon);
|
|
|
|
+ } else {
|
|
|
|
+ outer = geojsondata.geometry.coordinates[0];
|
|
|
|
+ outerPolygon = turf.polygon(outer);
|
|
|
|
+ inner = geojsondata.geometry.coordinates[1];
|
|
|
|
+ innerPolygon = turf.polygon(inner);
|
|
|
|
+ area = Math.abs(turf.area(outerPolygon) - turf.area(innerPolygon));
|
|
|
|
+ }
|
|
|
|
+ for (let j = 0; j < pdData.length; j++) {
|
|
|
|
+ let pdPolygonCoord = pdData[j].geometry.coordinates;
|
|
|
|
+ let pdPolygon = turf.polygon(pdPolygonCoord);
|
|
|
|
+
|
|
|
|
+ if (type === "Polygon") {
|
|
|
|
+ if (testPolygon != "" && pdPolygon != "" && turf.intersect(testPolygon, pdPolygon)) {
|
|
|
|
+ targetProperties.面积 = area;
|
|
|
|
+ targetProperties.性质 = "基本农田被侵占";
|
|
|
|
+ targetProperties.图层构成 = "基本农田和2020年森林";
|
|
|
|
+ targetProperties.镇域名称 = pdData[j].properties.NAME;
|
|
|
|
+ targetProperties.xzqh = this.townMap.get(pdData[j].properties.NAME);
|
|
|
|
+ geojsondata.properties = targetProperties;
|
|
|
|
+ break;
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ if (
|
|
|
|
+ outerPolygon != "" &&
|
|
|
|
+ innerPolygon != "" &&
|
|
|
|
+ (turf.intersect(pdPolygon, outerPolygon) || turf.intersect(pdPolygon, innerPolygon))
|
|
|
|
+ ) {
|
|
|
|
+ targetProperties.面积 = area;
|
|
|
|
+ targetProperties.性质 = "基本农田被侵占";
|
|
|
|
+ targetProperties.图层构成 = "基本农田和2020年森林";
|
|
|
|
+ targetProperties.镇域名称 = pdData[j].properties.NAME;
|
|
|
|
+ targetProperties.xzqh = this.townMap.get(pdData[j].properties.NAME);
|
|
|
|
+ geojsondata.properties = targetProperties;
|
|
|
|
+ break;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ if (!geojsondata.properties.xzqh) {
|
|
|
|
+ targetProperties.面积 = area;
|
|
|
|
+ targetProperties.性质 = "基本农田被侵占";
|
|
|
|
+ targetProperties.图层构成 = "基本农田和2020年森林";
|
|
|
|
+ targetProperties.镇域名称 = "浦东新区";
|
|
|
|
+ targetProperties.xzqh = 5000000;
|
|
|
|
+ geojsondata.properties = targetProperties;
|
|
|
|
+ }
|
|
|
|
+ let xzqh = geojsondata.properties.xzqh;
|
|
|
|
+ // 封装参数
|
|
geojsondata = JSON.stringify(geojsondata);
|
|
geojsondata = JSON.stringify(geojsondata);
|
|
//给feature添加属性信息
|
|
//给feature添加属性信息
|
|
let params = new FormData();
|
|
let params = new FormData();
|
|
@@ -160,7 +239,7 @@ export default {
|
|
c_date_time: (new Date().getTime() / 1000).toFixed(0) * 1000,
|
|
c_date_time: (new Date().getTime() / 1000).toFixed(0) * 1000,
|
|
c_editorid: 4,
|
|
c_editorid: 4,
|
|
c_editor_name: "liumouren",
|
|
c_editor_name: "liumouren",
|
|
- c_xzqh: geojsondata.properties.xzqh,
|
|
|
|
|
|
+ c_xzqh: xzqh,
|
|
content: "测试录入数据",
|
|
content: "测试录入数据",
|
|
title: "lmr-t" + this.postIndex
|
|
title: "lmr-t" + this.postIndex
|
|
};
|
|
};
|
|
@@ -168,9 +247,8 @@ export default {
|
|
this.$Post(this.urlsCollection.addContent, params).then(
|
|
this.$Post(this.urlsCollection.addContent, params).then(
|
|
res => {
|
|
res => {
|
|
if (res.code === 200) {
|
|
if (res.code === 200) {
|
|
- this.$message.success(res.message);
|
|
|
|
this.postIndex += 1;
|
|
this.postIndex += 1;
|
|
- this.addData();
|
|
|
|
|
|
+ this.addData(pdData);
|
|
} else {
|
|
} else {
|
|
this.$message.error(res.message);
|
|
this.$message.error(res.message);
|
|
}
|
|
}
|
|
@@ -180,21 +258,22 @@ export default {
|
|
}
|
|
}
|
|
);
|
|
);
|
|
} else {
|
|
} else {
|
|
|
|
+ this.$message.success("文件上传完成")
|
|
this.dataUpState = false;
|
|
this.dataUpState = false;
|
|
}
|
|
}
|
|
},
|
|
},
|
|
// 上传文件之前
|
|
// 上传文件之前
|
|
beforeAvatarUpload(file) {
|
|
beforeAvatarUpload(file) {
|
|
return true;
|
|
return true;
|
|
- const isJPG = file.name.indexOf(".shp") === file.name.length - 4;
|
|
|
|
- const isLt5M = file.size / 1024 / 1024 < 10;
|
|
|
|
- if (!isJPG) {
|
|
|
|
- this.$message.error("仅支持Geojson格式文件!");
|
|
|
|
- }
|
|
|
|
- if (!isLt5M) {
|
|
|
|
- this.$message.error("上传文件大小不能超过 10MB!");
|
|
|
|
- }
|
|
|
|
- return isJPG && isLt5M;
|
|
|
|
|
|
+ // const isJPG = file.name.indexOf(".shp") === file.name.length - 4;
|
|
|
|
+ // const isLt5M = file.size / 1024 / 1024 < 10;
|
|
|
|
+ // if (!isJPG) {
|
|
|
|
+ // this.$message.error("仅支持Geojson格式文件!");
|
|
|
|
+ // }
|
|
|
|
+ // if (!isLt5M) {
|
|
|
|
+ // this.$message.error("上传文件大小不能超过 10MB!");
|
|
|
|
+ // }
|
|
|
|
+ // return isJPG && isLt5M;
|
|
}
|
|
}
|
|
},
|
|
},
|
|
watch: {}
|
|
watch: {}
|