底部菜单上传数据组件开发，同屏对比组件优化

src/components/common/BottomForm/SameScreenComparison.vue

@@ -8,14 +8,9 @@
       </div>
     </template>
     <!-- 同屏对比主题 -->
-    <div
-      class="ssc_main"
-      id="doPrint"
-      ref="doPrint"
-      :style="{ height: !subMitStatus ? 'calc(100vh - 190px)' : 'calc(100vh - 310px)' }"
-    >
+    <div class="ssc_main" :style="{ height: !subMitStatus ? 'calc(100vh - 190px)' : 'calc(100vh - 310px)' }">
       <!-- 地图列表 -->
-      <div class="ssc_main_mapList">
+      <div class="ssc_main_mapList" id="doPrint" ref="doPrint">
         <div
           class="ssc_main_mapList_showList"
           :id="'map' + index"
@@ -35,7 +30,7 @@
         </div>
       </div>
       <!-- 底图列表 -->
-      <div class="ssc_main_aimapList" v-show="!subMitStatus">
+      <div class="ssc_main_aimapList">
         <span>地图底图(最多选择6个) </span>
         <div>
           已选择<span class="checkLength">{{ checkedCities.length }}</span
@@ -55,14 +50,14 @@
     </div>
     <!-- 底部文本域 -->
     <div id="textareaBox" v-if="subMitStatus">
-      <div class="textareaTitle">描述记录</div>
+      <div class="textareaTitle">描述记录:</div>
       <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 4 }" placeholder="请输入内容" v-model="textarea1"> </el-input>
     </div>
     <!-- 打印区域 -->
     <div id="imgBox">
       <span>基本农田被侵占</span>
       <img src="" id="imgOut" style="width: 1240px; background-repeat: no-repeat; background-size: 100% 100%" />
-      <span><div>描述记录</div></span>
+      <span><div>描述记录:</div></span>
       <div>{{ textarea1 }}</div>
     </div>
     <span slot="footer" class="dialog-footer">
@@ -88,6 +83,8 @@ export default {
       // 同屏对比弹窗显示状态
       dialogVisible: false,
       checkedCities: [],
+      // 定时器暂存
+      interval: "",
       // 地图暂存显示变量
       centerZoom: {},
       mouseIndex: -1,
@@ -240,23 +237,36 @@ export default {
     },
     // 同屏对比取消
     clearDialogVisible() {
-      // 返回上级
-      if (this.subMitStatus) {
-        this.subMitStatus = !this.subMitStatus;
+      if (this.interval) {
+        this.$message.info("取消打印！");
+        this.clearDiyInterval();
       } else {
-        // 关闭弹窗
-        this.dialogVisible = false;
-        // 修改父级菜单变量（弹窗显示状态和显示底部菜单）
-        this.$emit("changeShowBottomMenusStatus", true);
+        // 返回上级
+        if (this.subMitStatus) {
+          this.subMitStatus = !this.subMitStatus;
+        } else {
+          // 关闭弹窗
+          this.dialogVisible = false;
+          // 修改父级菜单变量（弹窗显示状态和显示底部菜单）
+          this.$emit("changeShowBottomMenusStatus", true);
+        }
       }
     },
     // 同屏对比表单提交
     subMitDialogVisible() {
-      if (!this.subMitStatus) {
-        this.subMitStatus = !this.subMitStatus;
+      if (this.interval) {
+        this.$message.info("正在打印，请稍后操作！");
       } else {
-        // 出现新的弹窗并截图当前地图，以及文本域
-        this.cutDiv();
+        if (!this.subMitStatus) {
+          if (this.checkedCities.length < 2) {
+            this.$message.info("请至少选择两个地图底图！");
+          } else {
+            this.subMitStatus = !this.subMitStatus;
+          }
+        } else {
+          // 出现新的弹窗并截图当前地图，以及文本域
+          this.cutDiv();
+        }
       }
     },
     // div转图片
@@ -274,9 +284,21 @@ export default {
       html2canvas(this.$refs.doPrint, ops).then(canvas => {
         document.getElementById("imgOut").setAttribute("src", canvas.toDataURL("image/png"));
       });
-      setTimeout(() =>{
-        that.doPrint();
-      },300);
+
+      this.interval = setInterval(() => {
+        if ($("#imgOut").attr("src")) {
+          that.clearDiyInterval();
+          setTimeout(() => {
+            that.doPrint();
+          }, 500);
+        }
+      }, 500);
+    },
+    clearDiyInterval() {
+      let that = this;
+      // 先销毁定时器
+      clearInterval(that.interval);
+      that.interval = "";
     },
     // div打印（iframe的方式为最优）
     doPrint() {
@@ -325,7 +347,7 @@ export default {
     bottom: 0;
   }
   &_mapList {
-    width: 100%;
+    width: calc(100% - 20rem);
     height: 100%;
     display: flex;
     flex-wrap: wrap;
@@ -359,23 +381,19 @@ export default {
     }
   }
   &_aimapList {
-    position: absolute;
-    z-index: 999;
-    right: 0;
     width: 20rem;
     height: 100%;
     font-size: 20px;
     color: #fff;
     padding: 10px;
     box-sizing: border-box;
-    border: 1px solid #ccc;
     background: #002645 !important;
     .checkLength {
       font-size: 24px;
       color: #74ffff;
     }
     #mapCheckBox {
-      height: calc(100% - 4rem);
+      height: calc(100% - 58px);
       width: 100%;
       overflow-x: hidden;
       overflow-y: auto;

src/components/common/BottomForm/UploadingData.vue

@@ -1,6 +1,32 @@
 <template>
   <!-- 上传数据弹窗 -->
-  <el-dialog title="上传数据" :visible.sync="dialogVisible" :before-close="handleClose"> 上传数据组件 
+  <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
+        :limit="1"
+        :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>
@@ -19,6 +45,10 @@ export default {
   components: {},
   data() {
     return {
+      // 文件目标路径
+      filePath: "",
+      // 上传文件列表
+      fileList: [],
       // 上传数据弹窗显示状态
       dialogVisible: false
     };
@@ -69,11 +99,57 @@ export default {
       this.$emit("changeShowBottomMenusStatus", true);
     },
     // 上传数据表单提交
-    subMitDialogVisible(){
-      this.$message.success('数据上传成功!');
+    subMitDialogVisible() {
+      this.$message.success("数据上传成功!");
       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) {
+      return true;
+      // return this.$confirm(`确定移除 ${file.name}？`);
+    },
+    // 文件上传成功时
+    handleSuccess(response, file, fileList) {
+      console.log("文件上传成功", response, file, fileList);
+    },
+    // 上传文件之前
+    beforeAvatarUpload(file) {
+      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: {}
 };
 </script>
+<style lang="less" scoped>
+#uploadingBox {
+  display: flex;
+  .el-upload *:not(em){
+    color: #F2F6FC;
+  }
+  .el-upload__tip{
+    color: #C0C4CC;
+  }
+}
+</style>

src/components/common/BottomMenus.vue

@@ -160,7 +160,7 @@ export default {
       //   this.$store.state.bottomMenuIndexs.subIndex == subIndex
       // );
       if (index == 1) {
-        if (subIndex == 0 || subIndex == 1 || subIndex == 3) {
+        if (subIndex == 0 || subIndex == 1) {
           return (
             this.$store.state.bottomMenuIndexs.index == index &&
             this.$store.state.bottomMenuIndexs.subIndex == subIndex