上传数据页面恢复。

src/components/common/BottomForm/UploadingData.vue

@@ -1,11 +1,6 @@
 <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">
       <div class="dialogTitle">
         <div class="dialogTitleIcon"></div>
@@ -13,20 +8,10 @@
       </div>
     </template>
     <div id="uploadingBox">
-      <div v-show="dataUpState" style="width: 100%">
-        <el-progress
-          :percentage="postIndex == 0 ? 0 : (postIndex / postDataSize) * 100"
-          :stroke-width="10"
-          :show-text="false"
-        ></el-progress>
-        <div>当前进度：{{ postIndex + "/" + postDataSize }}</div>
-      </div>
       <el-upload
-        v-show="!dataUpState"
         class="upload-demo"
         drag
-        action=""
-        :auto-upload="false"
+        action="https://jsonplaceholder.typicode.com/posts/"
         :on-preview="handlePreview"
         :on-remove="handleRemove"
         :on-success="handleSuccess"
@@ -39,19 +24,12 @@
       >
         <i class="el-icon-upload"></i>
         <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>
     </div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="clearDialogVisible()">取 消</el-button>
-      <el-button
-        type="primary"
-        :disabled="dataUpState"
-        @click="subMitDialogVisible()"
-        >确 定</el-button
-      >
+      <el-button type="primary" @click="subMitDialogVisible()">确 定</el-button>
     </span>
   </el-dialog>
 </template>
@@ -67,16 +45,12 @@ export default {
   components: {},
   data() {
     return {
-      townMap: new Map(),
-      dataUpState: false,
-      postIndex: 0,
-      postDataSize: 0,
       // 文件目标路径
       filePath: "",
       // 上传文件列表
       fileList: [],
       // 上传数据弹窗显示状态
-      dialogVisible: false,
+      dialogVisible: false
     };
   },
   mounted() {
@@ -85,9 +59,6 @@ export default {
     this.$bus.$on("scsj", () => {
       this.changeShowBottomMenusStatus();
     });
-    this.$Get("./static/json/simplified_pdgeojson.json").then((res) => {
-      this.pd = res;
-    });
   },
   destroy() {
     // 当容器销毁时，需要停止监听该事件
@@ -95,7 +66,6 @@ export default {
   },
   props: [],
   methods: {
-    getMapData() {},
     // 当用户点击svg底座时，切换底部菜单显示隐藏状态。
     changeShowBottomMenusStatus() {
       // 打开弹窗
@@ -106,6 +76,11 @@ export default {
     handleClose() {
       if (this.dialogVisible) {
         this.clearDialogVisible();
+        // this.$confirm("确认关闭？")
+        //   .then((_) => {
+        //     this.clearDialogVisible();
+        //   })
+        //   .catch((_) => {});
       }
     },
     // 上传数据关闭
@@ -117,56 +92,27 @@ export default {
     },
     // 上传数据表单提交
     subMitDialogVisible() {
-      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) {
-        //   window.geojsontu = geojson;
-        //   that.postDataSize = geojson.features.length;
-        //   that.dataUpState = true;
-        //   let pdData = that.pd.features;
-        //   that.addPreModelData(pdData);
-        // });
-        this.$Get(
-          "http://127.0.0.1:5500/output/soil/jlh/zjz/PATROL.geojson"
-        ).then((geojson) => {
-          window.geojsontu = geojson;
-          that.postDataSize = geojson.features.length;
-          that.dataUpState = true;
-          let pdData = that.pd.features;
-          that.addAllLayerData(pdData);
-        });
-      } else {
-        this.$message.error(
-          "浦东新区行政区划数据未获取，请尝试刷新页面并重试！"
-        );
-      }
-      // this.clearDialogVisible();
+      this.$message.success("数据上传成功!");
+      this.clearDialogVisible();
     },
     // 文件列表移除文件时
     handleRemove(file, fileList) {
-      // console.log(file, fileList);
+      console.log(file, fileList);
     },
     // 点击文件列表中已上传的文件时
     handlePreview(file) {
-      // this.getActionData(file);
+      console.log(file);
     },
     // 文件超出个数限制时
     handleExceed(files, fileList) {
       this.$message.warning(
-        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
-          files.length + fileList.length
-        } 个文件`
+        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
       );
     },
     // 删除文件之前
     beforeRemove(file, fileList) {
-      // this.$store.state.mapMethodsCollection.get("RENDER").deletePolygonLayer("upload_layer");
-      // delete map2DViewer.polygons["upload_layer"];
+      this.$store.state.mapMethodsCollection.get("RENDER").deletePolygonLayer("upload_layer");
+      delete map2DViewer.polygons["upload_layer"];
       this.$message.success(`文件${file.name}移除成功！`);
       return true;
     },
@@ -177,211 +123,57 @@ export default {
     },
     // 根据上传的文件渲染到地图中
     uploadRENDER(geoJson) {
-      return true;
-    },
-    // 读取file对象内容
-    getActionData(file) {},
-    // 添加预设模型数据
-    addPreModelData(pdData) {
-      let geojsondata = window.geojsontu.features[this.postIndex];
-      if (geojsondata && this.postIndex < this.postDataSize) {
-        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);
+      debugger
+      map2DViewer.polygons[`upload_layer`] = [];
+      // let cid = "upload";
+      // let color = "#67C23A";
+      // let guid = publicFun.buildGuid("myLayer");
+      // uploadDataIdArr.push({
+      //   id: guid,
 
-          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);
-        //给feature添加属性信息
-        let params = new FormData();
-        params.append("columnId", "510");
-        params.append("modelId", "118");
-        var data = {
-          c_boolean: false,
-          c_content: geojsondata,
-          c_date_time: (new Date().getTime() / 1000).toFixed(0) * 1000,
-          c_editorid: 4,
-          c_editor_name: "liumouren",
-          c_xzqh: xzqh,
-          content: "测试录入数据",
-          title: "lmr-t" + this.postIndex,
-        };
-        params.append("content", JSON.stringify(data));
-        this.$Post(this.urlsCollection.addContent, params).then(
-          (res) => {
-            if (res.code === 200) {
-              this.postIndex += 1;
-              this.addPreModelData(pdData);
-            } else {
-              this.$message.error(res.message);
-            }
-          },
-          (error) => {
-            this.$message.error(error);
-          }
-        );
-      } else {
-        this.$message.success("文件上传完成");
-        this.dataUpState = false;
-      }
+      // });
+      // 地图定位
+      let firstPolygon = JSON.parse(JSON.stringify(geoJson[0]));
+      let coordinates = firstPolygon.geometry.coordinates[0][0][0];
+      this.$store.state.mapMethodsCollection.get("RENDER").setView(coordinates, 16);
+      this.$store.state.mapMethodsCollection.get("RENDER").addPolygonLayer(geoJson, cid, color);
     },
-    // 上传所有图层数据
-    // 当前数据 -- 张江镇 - 永久基本农田
-    addAllLayerData(pdData) {
-      let geojsondata = window.geojsontu.features[this.postIndex];
-      if (geojsondata && this.postIndex < this.postDataSize) {
-        delete geojsondata["geometry"]["bbox"];
-        // 封装参数
-        let townName = geojsondata.properties["镇域名称"];
-        let layerType = geojsondata.properties["土地类型"];
-        let xzqh = this.townMap.get(geojsondata.properties["镇域名称"]);
-        geojsondata = JSON.stringify(geojsondata);
-        let params = new FormData();
-        params.append("columnId", "768");
-        params.append("modelId", "120");
-        var data = {
-          c_boolean: false,
-          c_content: geojsondata,
-          c_date_time: (new Date().getTime() / 1000).toFixed(0) * 1000,
-          // c_editorid: 4,
-          // c_editor_name: "",
-          c_xzqh: xzqh,
-          content: layerType,
-          title: layerType,
-        };
-        params.append("content", JSON.stringify(data));
-        this.$Post(this.urlsCollection.addContent, params).then(
-          (res) => {
-            if (res.code === 200) {
-              this.postIndex += 1;
-              this.addAllLayerData(pdData);
-            } else {
-              this.$message.error(res.message);
-            }
-          },
-          (error) => {
-            this.$message.error(error);
-          }
-        );
-      } else {
-        this.$message.success("文件上传完成");
-        this.dataUpState = false;
-      }
+    // 读取file对象内容
+    getActionData(file) {
+      const __this = this;
+      var reader = new FileReader(); // 新建一个FileReader
+      reader.readAsText(file.raw, "UTF-8"); // 读取文件
+      reader.onload = function (evt) {
+        //读取文件完毕执行此函数
+        const dataJson = JSON.parse(evt.target.result);
+        __this.uploadRENDER(dataJson);
+        // console.log("上传的文件内容：", dataJson);
+      };
     },
     // 上传文件之前
     beforeAvatarUpload(file) {
-      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.type === "application/json" || file.type === "GeoJSON";
+      const isLt5M = file.size / 1024 / 1024 < 5;
+      if (!isJPG) {
+        this.$message.error("仅支持Geojson格式文件!");
+      }
+      if (!isLt5M) {
+        this.$message.error("上传文件大小不能超过 5MB!");
+      }
+      return isJPG && isLt5M;
+    }
   },
-  watch: {},
+  watch: {}
 };
 </script>
 <style lang="less" scoped>
 #uploadingBox {
   display: flex;
-  width: 100%;
   .el-upload *:not(em) {
     color: #f2f6fc;
   }
   .el-upload__tip {
     color: #c0c4cc;
   }
-  ::v-deep .el-progress-bar__outer {
-    background-color: transparent;
-    background-image: linear-gradient(
-      90deg,
-      #007dff32 0%,
-      #00ffff32 100%
-    ) !important;
-  }
-  ::v-deep .el-progress-bar__inner {
-    background-image: linear-gradient(
-      90deg,
-      #007dff 0%,
-      #00ffff 100%
-    ) !important;
-  }
 }
 </style>

src/components/common/BottomMenus.vue

@@ -124,7 +124,7 @@ export default {
               clickEmit: "JLControl",
               stateKey: "jlActiveState"
             },
-            { index: 4, title: "上传数据", bgImage: "scsj", clickRef: "scsj", clickEmit: "notFound" },
+            { index: 4, title: "上传数据", bgImage: "scsj", clickRef: "scsj"},
             {
               index: 5,
               title: "自定义模型",