合规性分析样式调整，添加form验证

src/components/mapView/range.vue

@@ -5,7 +5,7 @@
         <el-button plain v-if="model.xzmj == 0" icon="edit-pen" size="mini"
           >绘制</el-button
         >
-        <span v-if="model.xzmj != 0">{{ model.xzmj }} m²</span>
+        <span v-if="model.xzmj != 0">{{ model.xzmj }} km²</span>
       </div>
       <el-upload
         class="upload-demo"
@@ -109,6 +109,7 @@ export default {
       // this.addPolygon();
       ShapeUpload(formdata).then((res) => {
         if (res.success) {
+          this.model.xzmj = 62.1;
           viewer.entities.removeAll();
           this.fileDataID = res.data.id;
           let geoms = res.data.geom
@@ -270,6 +271,7 @@ export default {
           // this.addPolygon();
           ShapeUpload(formdata).then((res) => {
             if (res.success) {
+              this.model.xzmj = 62.1;
               this.$message({
                 message: "绘制成功!",
                 type: "success",
@@ -349,7 +351,7 @@ export default {
       width: 80px;
     }
     /deep/ .el-button--mini {
-      background: #0F7AC8;
+      background: #0f7ac8;
       border: none;
       border-radius: 0;
       color: #fff;

src/views/complianceAnalysis/components/hgxsc.vue

@@ -1,11 +1,15 @@
 <template>
   <div class="hgxsc">
-    <div class="rangDiv">
-      <div class="block-title">选址范围</div>
-      <range type="hgxfx" :keys="['hx', 'sc']" class="range" ref="range" />
-    </div>
-    <el-form :model="ruleForm" label-width="75px">
-      <div class="block-title">基本信息</div>
+    <el-form
+      :model="ruleForm"
+      ref="ruleForm"
+      label-width="100px"
+      :rules="rules"
+    >
+      <el-form-item label="选址范围:" prop="xzmj">
+        <range type="hgxfx" :keys="['hx', 'sc']" class="range" ref="range" />
+      </el-form-item>
+      <!-- <div class="block-title">基本信息</div> -->
       <el-form-item label="项目名称:" prop="xmmc">
         <el-input
           v-model="ruleForm.xmmc"
@@ -102,6 +106,15 @@ export default {
         xzfw: "",
         xzmj: 0,
       },
+      rules: {
+        xzmj: [{ required: true, message: "请填写范围的数据" }],
+        xmmc: [
+          { required: true, message: "请输入项目名称", trigger: "blur" },
+          { min: 3, max: 10, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        jsdw: [{ required: true, message: "请输入建设单位", trigger: "blur" }],
+        xmlx: [{ required: true, message: "请输入项目类型", trigger: "blur" }],
+      },
 
       options: [],
     };
@@ -201,9 +214,11 @@ export default {
       var _temp = this.$refs.range.getRange();
       this.ruleForm.xzfw = _temp.xzfw;
       this.ruleForm.xzmj = _temp.xzmj || hgxfx.xzmj;
-
-      this.is_form()
-        .then((res) => {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          if (this.ruleForm.scxs.length == 0) {
+            Message.warning("至少选择一个项目信息");
+          }
           MessageBox.confirm("是否开始进行合规性检查?", "合规性检查", {
             confirmButtonText: "确定",
             cancelButtonText: "取消",
@@ -227,10 +242,14 @@ export default {
             //   this.$emit("updateParent", "loading", false);
             // });
           });
-        })
-        .catch((res) => {
+        } else {
           Message.warning(res);
-        });
+        }
+      });
+
+      this.is_form()
+        .then((res) => {})
+        .catch((res) => {});
     },
     is_form() {
       this.ruleForm.scxs = this.$refs.tree.getCheckedNodes(true).map((item) => {
@@ -275,9 +294,9 @@ export default {
   }
   .range {
     flex: 1;
-    width: calc(100% - 100px);
-    position: absolute;
-    left: 100px;
+    width: 100%;
+    // position: absolute;
+    // left: 100px;
   }
 
   .treeDiv {
@@ -288,4 +307,13 @@ export default {
     overflow-y: auto;
   }
 }
+/deep/ .el-input .el-input--mini .el-input--suffix {
+  width: 278px !important;
+}
+/deep/ .el-select {
+  width: 278px !important;
+}
+/deep/ .el-form-item__error {
+  top: 32px !important;
+}
 </style>