web_sh_audit/src/components/common/BottomForm/UploadingData.vue

<template>
  <!-- 上传数据弹窗 -->
  <el-dialog title="上传数据" :visible.sync="dialogVisible" :before-close="handleClose" width="400px">
    <template slot="title">
      <div class="dialogTitle">
        <div class="dialogTitleIcon"></div>
        请选择你要上传的文件
      </div>
    </template>
    <div id="uploadingBox">
      <el-upload
        class="upload-demo"
        drag
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :before-remove="beforeRemove"
        :before-upload="beforeAvatarUpload"
        multiple
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></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" @click="subMitDialogVisible()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
/**
 * 底部菜单（上传数据）组件
 * @author: LiuMengxiang
 * @Date: 2022年11月21-25日
 */
export default {
  name: "UploadingData",
  components: {},
  data() {
    return {
      // 文件目标路径
      filePath: "",
      // 上传文件列表
      fileList: [],
      // 上传数据弹窗显示状态
      dialogVisible: false
    };
  },
  mounted() {
    // 上传数据事件监听
    this.$bus.$off("scsj");
    this.$bus.$on("scsj", () => {
      this.changeShowBottomMenusStatus();
    });
  },
  destroy() {
    // 当容器销毁时，需要停止监听该事件
    this.$bus.$off("scsj");
  },
  props: [],
  methods: {
    // 当用户点击svg底座时，切换底部菜单显示隐藏状态。
    changeShowBottomMenusStatus() {
      // 打开弹窗
      this.dialogVisible = true;
      this.$emit("changeShowBottomMenusStatus", false);
    },
    // 弹窗关闭询问
    handleClose() {
      if (this.dialogVisible) {
        this.clearDialogVisible();
      }
    },
    // 上传数据关闭
    clearDialogVisible() {
      // 关闭弹窗
      this.dialogVisible = false;
      // 修改父级菜单变量（弹窗显示状态和显示底部菜单）
      this.$emit("changeShowBottomMenusStatus", true);
    },
    // 上传数据表单提交
    subMitDialogVisible() {
      setTimeout(() => {
        if (map2DViewer.analysisGroups[`upload_layer_unique`]) {
          this.$message.success("数据上传成功!");
          map2DViewer.map.fitBounds(map2DViewer.analysisGroups[`upload_layer_unique`].getBounds());
        }
        let options = {
          id: "upload_layer_unique",
          label: "我的图层1"
        };
        this.$bus.$emit("addUploadLayerEvent", options);
      }, 1000);

      this.clearDialogVisible();
    },
    // 文件列表移除文件时
    handleRemove(file, fileList) {
      console.log("删除数据中移除文件", file, fileList);
    },
    // 点击文件列表中已上传的文件时
    handlePreview(file) {
      console.log(file);
    },
    // 文件超出个数限制时
    handleExceed(files, fileList) {
      // this.$message.warning(
      //   `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
      //     files.length + fileList.length
      //   } 个文件`
      // );
    },
    // 删除文件之前
    beforeRemove(file, fileList) {
      this.$message.success(`文件${file.name}移除成功！`);
      return true;
    },
    // 文件上传成功时
    handleSuccess(response, file, fileList) {
      this.getActionData(file);
    },
    // 根据上传的文件渲染到地图中
    uploadRENDER(geoJson) {
      // 呈现数据已经成功
      let uniqueId = `upload_layer_unique`;
      if (!map2DViewer.analysisGroups[uniqueId]) {
        map2DViewer.analysisGroups[uniqueId] = L.featureGroup();
        map2DViewer.analysisGroups[uniqueId].addTo(map2DViewer.map);
        if (!this.$store.state.selectSelectDataMap["singlePolygon"]) {
          this.$store.state.selectSelectDataMap["singlePolygon"] = [];
        }
        let firstPolygon = JSON.parse(JSON.stringify(geoJson));
        console.log("上传文件读取到的数据", firstPolygon);
        firstPolygon.features.forEach((ele, index) => {
          let cid = `myLayer_${index}`;
          let geometry = JSON.stringify(ele);
          this.$store.state.mapMethodsCollection
            .get("RENDER")
            .addSinglePolygon(geometry, cid, "rgb(0,255,255)", uniqueId, "我的图层", "土地资源");
        });
      }
    },
    // 读取file对象内容
    getActionData(file) {
      // console.log();
      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);
      };
    },
    // 上传文件之前
    beforeAvatarUpload(file) {
      const isJPG = file.name.indexOf(".geojson") === file.name.length - 8;
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isJPG) {
        this.$message.error("仅支持Geojson格式文件!");
      }
      if (!isLt5M) {
        this.$message.error("上传文件大小不能超过 5MB!");
      }
      return isJPG && isLt5M;
    }
  },
  watch: {}
};
</script>
<style lang="less" scoped>
#uploadingBox {
  display: flex;
  .el-upload *:not(em) {
    color: #f2f6fc;
  }
  .el-upload__tip {
    color: #c0c4cc;
  }
}
</style>