自定义模型创建及叠置分析操作流程简化

src/components/common/BottomForm/CustomModelDialog.vue

@@ -104,26 +104,10 @@
         </el-checkbox-group>
       </div>
     </div>
-    <div
-      v-if="overlayBtnShow"
-      class="overlay-container"
-      :class="{ forbidden: forbidOverlayBtn }"
-      @click="executeOverlay"
-    >
-      <div
-        class="overlay-container-icon"
-        :class="{ checked: overlayBtnChecked }"
-      ></div>
-      <div
-        class="overlay-container-btn"
-        :class="{ checked: overlayBtnChecked }"
-      >
-        叠置分析
-      </div>
-    </div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="clearDialogVisible()">取 消</el-button>
-      <el-button type="primary" @click="saveModel()">保存模型</el-button>
+      <!-- 保存模型时直接进行叠置分析 -->
+      <el-button type="primary" @click="saveModel()">叠置分析</el-button>
     </span>
   </el-dialog>
 </template>
@@ -139,13 +123,13 @@ export default {
   components: {},
   data() {
     return {
-      layerLoading:false,
+      layerLoading: false,
       uploadBaseUrl: "/dms",
       classTextToIndex: {},
       overlayBtnChecked: false,
       outerDialogVisible: false,
       innerDialogVisible: false,
-      overlayBtnShow: false,
+      // overlayBtnShow: false,
       modelTitle: null,
       inputName: "自定义模型1",
       checkArr: [],
@@ -182,8 +166,6 @@ export default {
         cursor: "pointer",
       },
       currentModifiedModelId: "",
-      currentOverlayFile: "",
-      forbidOverlayBtn: "",
     };
   },
   watch: {
@@ -236,23 +218,7 @@ export default {
     // 监听模型修改事件
     this.$bus.$off("updateModel");
     this.$bus.$on("updateModel", (node) => {
-      // console.log("监听模型中");
-      this.overlayBtnChecked = false;
-      // console.log(node, "节点数据");
-      
-      // 允许多次叠置 -- 后续根据需求调整
-      // if (node.data.c_dzfx_file) {
-      //   // console.log("已有叠置分析结果");
-      //   this.forbidOverlayBtn = true;
-      // }
-
-      if (!node.data.c_dzfx_file) {
-        // console.log("未进行叠置分析");
-        this.forbidOverlayBtn = false;
-      }
       this.currentModifiedModelId = node.data.modelId;
-      console.log(this.currentModifiedModelId);
-      this.currentOverlayFile = node.data.c_dzfx_file;
 
       this.$nextTick(() => {
         if (this.$refs.transferTree) {
@@ -279,7 +245,7 @@ export default {
       }
       // this.checkedList = node.data.data;
       this.inputName = node.data.label;
-      this.overlayBtnShow = true;
+      // this.overlayBtnShow = true;
       this.modelTitle = node.data.label;
       this.$store.state.modelStatus = "modify";
     });
@@ -288,7 +254,7 @@ export default {
     // 当容器销毁时，需要停止监听该事件
     this.$bus.$off("customModelEvent");
     this.$bus.$off("updateModel");
-    this.overlayBtnShow = false;
+    // this.overlayBtnShow = false;
   },
   methods: {
     /**
@@ -478,10 +444,8 @@ export default {
             }
           });
         }
-
         // 转为树结构的数据格式
         let finalData = this.createTree(treeArr);
-
         this.createModelParams.c_layer_name = JSON.stringify(this.checkedList);
         this.createModelParams.c_bind_layer = JSON.stringify(finalData);
         let params = new FormData();
@@ -492,14 +456,31 @@ export default {
         };
         this.$Post(this.urlsCollection.addContent, params)
           .then((res) => {
-            // console.log(res, "保存自定义模型的res");
+            console.log(res, "保存自定义模型的res");
             if (res.code === 200) {
-              this.$message.success("模型已保存");
-              this.$store.state.customModelsArr.push({
-                name: this.inputName,
-                data: JSON.stringify(finalData),
+              // 获取模型id
+              let myModelParams = new FormData();
+              myModelParams = {
+                columnId: 49,
+                states: "0,1,2,3",
+                pageSize: 50,
+                page: 0,
+              };
+              this.$Post(
+                this.urlsCollection.selectContentList,
+                myModelParams
+              ).then((overlayRes) => {
+                if (
+                  overlayRes.code === 200 &&
+                  overlayRes.content.data.length > 0
+                ) {
+                  overlayRes.content.data.forEach((ele) => {
+                    if (this.inputName === ele.title) {
+                      this.startModelOverlay(ele.id);
+                    }
+                  });
+                }
               });
-              this.clearDialogVisible();
             }
           })
           .catch(() => {
@@ -508,16 +489,25 @@ export default {
       }
     },
     // 修改模型 -- 直接调用修改模型接口
-    modifyModel(type, bindData) {
+    modifyModel() {
+      let treeArr = [];
+      this.customTreeMap.forEach((v, i) => {
+        if (this.checkedList.includes(i)) {
+          treeArr.push(v);
+        }
+      });
+      let bindLayer = this.createTree(treeArr);
+      console.log(bindLayer);
       let obj = {
         id: this.currentModifiedModelId,
         title: this.inputName,
         content: this.inputName,
         // c_level: "1",
         c_layer_name: JSON.stringify(this.checkedList),
-        c_bind_layer: JSON.stringify(bindData),
+        c_bind_layer: JSON.stringify(bindLayer),
         c_user_id: localStorage.getItem("USER_ID"),
       };
+      // 修改当前模型图层数据，并重新进行叠置
       let modifyParams = new FormData();
       modifyParams = {
         columnId: 49,
@@ -527,21 +517,8 @@ export default {
       this.$Post(this.urlsCollection.updateContent, modifyParams).then(
         (res) => {
           if (res.code === 200) {
-            this.$store.state.customModelsArr.filter((v) => {
-              return v.name !== this.inputName;
-            });
-            this.$store.state.customModelsArr.push({
-              name: this.inputName,
-              data: JSON.stringify(bindData),
-            });
-            this.clearDialogVisible();
-            if (type === "alreadyOverlay") {
-              this.$message.success("系统已完成叠置分析,数据已保存!");
-            }
-
-            if (type === "notOverlay") {
-              this.$message.success("模型修改成功");
-            }
+            console.log("当前模型已修改，系统重新进行叠置分析!");
+            this.startModelOverlay(this.currentModifiedModelId);
           }
         }
       );
@@ -570,14 +547,6 @@ export default {
       if (!value) return true;
       return data.label.indexOf(value) !== -1;
     },
-    // 弹窗关闭时询问
-    handleClose() {
-      // if (this.outerDialogVisible) {
-      //   this.$confirm("").then(() => {
-      //     this.clearDialogVisible();
-      //   });
-      // }
-    },
     clearDialogVisible() {
       this.outerDialogVisible = false;
       this.innerDialogVisible = false;
@@ -590,7 +559,7 @@ export default {
         }
       });
       this.modelTitle = null;
-      this.overlayBtnShow = false;
+      // this.overlayBtnShow = false;
       this.$store.state.modelStatus = "create";
       this.outerDialogVisible = true;
       this.checkedList = [];
@@ -608,6 +577,9 @@ export default {
 
       this.inputName = `自定义模型${Math.round(Math.random() * 100)}`;
     },
+    /**
+     * 保存模型时直接进行叠置分析，若叠置分析失败显示默认图层
+     */
     saveModel() {
       if (this.checkedList.length < 2) {
         this.$message.info("请至少选择两个类型!");
@@ -621,67 +593,64 @@ export default {
     },
     confirm() {
       this.$confirm("确认保存吗?").then(() => {
-        // modify -- 改变数组类型
+        // 修改模型所选图层
         if (this.$store.state.modelStatus === "modify") {
-          let treeArr = [];
-          this.customTreeMap.forEach((v, i) => {
-            if (this.checkedList.includes(i)) {
-              treeArr.push(v);
-            }
-          });
-          let bindLayer = this.createTree(treeArr);
-          console.log(bindLayer);
-          this.modifyModel("notOverlay", bindLayer);
+          this.modifyModel();
         }
 
-        // console.log(this.$store.state.customModelsArr, "先获取的模型数据");
-        // create -- 创建新的数组
+        // 新建模型
         if (this.$store.state.modelStatus === "create") {
           this.addModel();
         }
       });
     },
-    // 呈现叠置分析的数据
+    // 打印叠置分析的结果数据
     displayOverlayGeometry(url) {
       // console.log(url);
       this.$Get(url).then((res) => {
         console.log(res, "叠置分析的结果数据");
       });
     },
-    // 执行叠置分析
-    executeOverlay() {
-      this.overlayBtnChecked = !this.overlayBtnChecked;
-      if (this.overlayBtnChecked && !this.forbidOverlayBtn) {
-        // 进行叠置分析后，叠置分析结果会自动保存
-        // 当前勾选的图层并未自动保存，需要重新调用一次保存接口
-        let treeArr = [];
-        this.customTreeMap.forEach((v, i) => {
-          if (this.checkedList.includes(i)) {
-            treeArr.push(v);
-          }
-        });
 
-        let bindLayer = this.createTree(treeArr);
-        let params = new FormData();
-        params = {
-          modelId: this.currentModifiedModelId,
-          userId: localStorage.getItem("USER_ID"),
-        };
-        this.layerLoading = true
-        this.$Post(this.urlsCollection.overlayAnalysis, params).then((res) => {
-          console.log(res, "res");
-          if (res.code === 200) {
-            this.layerLoading = false
-            let address = this.uploadBaseUrl + res.content;
+    // 创建模型时进行的叠置分析
+    startModelOverlay(modelId) {
+      let overlayParams = new FormData();
+      overlayParams.append("modelId", modelId);
+      overlayParams.append("userId", localStorage.getItem("USER_ID"));
+      this.layerLoading = true;
+      this.$Post(this.urlsCollection.overlayAnalysis, overlayParams)
+        .then((response) => {
+          console.log(response, "创建模型时进行的叠置分析");
+          if (response.message === "未申请任务权限") {
+            this.layerLoading = false;
+            this.$message.info(
+              "所选的图层未申请任务权限,叠置分析失败,将呈现默认选中的图层!"
+            );
+            // 呈现默认选中的图层
+            this.$store.state.mapMethodsCollection
+              .get("METHODS")
+              .getMyModelData(false, "");
+            this.clearDialogVisible();
+          }
+          if (response.code === 200) {
+            this.layerLoading = false;
+            let address = this.uploadBaseUrl + response.content;
             this.displayOverlayGeometry(address);
-            this.modifyModel("alreadyOverlay", bindLayer);
+            this.$store.state.mapMethodsCollection
+              .get("METHODS")
+              .getMyModelData(true, modelId);
+            this.clearDialogVisible();
           }
-        }).catch((err)=>{
-          this.$message.error("叠置分析失败")
-          this.layerLoading = false
-          console.log(err,"请求错误");
         })
-      }
+        .catch((err) => {
+          this.$message.error("叠置分析失败，将呈现默认选中的图层!");
+          // 呈现默认选中的图层
+          this.layerLoading = false;
+          this.$store.state.mapMethodsCollection
+            .get("METHODS")
+            .getMyModelData(false, "");
+          this.clearDialogVisible();
+        });
     },
   },
 };

src/store/index.js

@@ -26,8 +26,6 @@ export default new Vuex.Store({
     },
     // 地图常用方法集合
     mapMethodsCollection: new Map(),
-    // 自定义模型数组
-    customModelsArr: [],
     // 自定义模型状态改变 -- 修改或创建
     modelStatus: "create",
     // 法律法规弹窗
@@ -59,7 +57,6 @@ export default new Vuex.Store({
     JLControlRightMapUrl: "",
   },
   getters: {
-    customModelsArr: (state) => state.customModelsArr,
     myLabelPointsArr: (state) => state.myLabelPointsArr,
     treeDataCollection: (state) => state.treeDataCollection,
   },
@@ -107,9 +104,6 @@ export default new Vuex.Store({
     mapMethods: (state, options) => {
       state.mapMethodsCollection.set(options.name, options.value);
     },
-    changeCustomModelsArr: (state, data) => {
-      state.customModelsArr = data;
-    },
     changeModelStatus: (state, data) => {
       state.modelStatus = data;
     },

src/views/ComprehensiveAnalysis.vue

@@ -607,9 +607,6 @@ export default {
         subIndex: _subIndex,
       };
     },
-    getCustomModel() {
-      return this.$store.state.customModelsArr;
-    },
     getLeftMenuTitle() {
       return this.$store.state.leftMenuTitle;
     },
@@ -758,13 +755,6 @@ export default {
     filterText(val) {
       this.$refs.tree.filter(val);
     },
-    getCustomModel: {
-      handler(val) {
-        // console.log(val, "目前存在的自定义模型");
-        this.getMyModelData();
-      },
-      deep: true,
-    },
     getMyLabelData: {
       handler(val) {
         // console.log("标记点保存事件成功，允许开始定位");
@@ -923,10 +913,12 @@ export default {
       this.caseAuditEvent();
     });
 
-    // 统计标记的疑点或非疑点数并排序
     this.$store.state.mapMethodsCollection.set("METHODS", {
+      // 统计标记的疑点或非疑点数并排序
       changeSortMethod: this.changeSortMethod,
       changeCaseBoolean: this.changeCaseBoolean,
+      // 更新左侧我的模型节点
+      getMyModelData: this.getMyModelData,
     });
   },
   destroy() {
@@ -1719,7 +1711,7 @@ export default {
 
           // 获取我的模型数据
           let oldOptions = [];
-          this.getMyModelData();
+          this.getMyModelData(false, "");
           this.classTextToIndex["浦东新区行政区划"].forEach((v, i) => {
             if (this.townSelectTreeMap.has(i)) {
               oldOptions.push({
@@ -1772,7 +1764,11 @@ export default {
         }
       });
     },
-    getMyModelData() {
+    /**
+     *@isShow 是否显示我的模型中特定节点的图层数据
+     *@treeKeyId 具体是哪个节点
+     */
+    getMyModelData(isShow, treeKeyId) {
       let params = new FormData();
       params = {
         columnId: 49,
@@ -1781,10 +1777,32 @@ export default {
         page: 0,
       };
 
+      // 如果刚执行完自定义模型叠置功能 -- 更新节点后需要显示叠置的数据,指定需要的变量
+      let uniqueKeyId = "";
+      let uniqueKeyChild = "";
+
       this.$Post(this.urlsCollection.selectContentList, params)
         .then((res) => {
           if (res.code === 200 && res.content.data.length > 0) {
             let children = res.content.data.map((ele) => {
+              // 如果刚执行完自定义模型叠置功能 -- 更新节点后需要显示叠置的数据
+              if (isShow && ele.id === treeKeyId) {
+                uniqueKeyId = `${ele.title}_${ele.id}`;
+                uniqueKeyChild = {
+                  id: `${ele.title}_${ele.id}`,
+                  label: ele.title,
+                  modelId: ele.id,
+                  children: [],
+                  column_id: ele.column_id,
+                  model_name: ele.model_name,
+                  model_id: ele.model_id,
+                  state: ele.state,
+                  mainType: "我的模型",
+                  c_bind_layer: ele.c_bind_layer,
+                  c_layer_name: ele.c_layer_name,
+                  c_dzfx_file: ele.c_dzfx_file || "",
+                };
+              }
               customModelIdMap.set(ele.title, {
                 column_id: ele.column_id,
                 id: `${ele.title}_${ele.id}`,
@@ -1817,14 +1835,27 @@ export default {
                   this.firstLevelIdMap.get("我的模型").id,
                   children
                 );
-              }
 
-              // this.expandedKeys.push(this.firstLevelIdMap.get("我的模型").id);
-              // this.modelData.forEach((ele) => {
-              //   if (ele.label == "我的模型") {
-              //     ele.children = children;
-              //   }
-              // });
+                if (isShow) {
+                  // 如果已显示过叠置分析数据，需要先删除图层
+                  if (map2DViewer.analysisGroups[uniqueKeyId]) {
+                    this.handleCheckChange(uniqueKeyChild, false);
+                  }
+                  console.log("开始更新我的模型节点了!!!");
+                  this.expandedKeys.push(
+                    this.firstLevelIdMap.get("我的模型").id
+                  );
+                  console.log(
+                    treeKeyId,
+                    "显示特定节点的我的模型数据",
+                    uniqueKeyId
+                  );
+                  console.log(uniqueKeyChild, "uniqueKeyChild");
+                  this.$refs.tree.setCheckedKeys([uniqueKeyId]);
+                  this.$refs.tree.setCurrentKey(uniqueKeyId);
+                  this.handleCheckChange(uniqueKeyChild, true);
+                }
+              }
             }
           }
         })
@@ -1940,13 +1971,8 @@ export default {
       this.$Post(this.urlsCollection.updateAudit, deleteParams).then((res) => {
         if (res.code === 200) {
           this.$message.info("模型已删除!");
-          this.$store.state.customModelsArr =
-            this.$store.state.customModelsArr =
-              this.$store.state.customModelsArr.filter((v) => {
-                return v.name !== node.data.label;
-              });
 
-          // this.getMyModelData();
+          this.getMyModelData(false, "");
         }
       });
     },
@@ -2198,8 +2224,14 @@ export default {
                   let color = this.collectColorMap.get(
                     this.collectColorMapIndex
                   );
+                  // 仅显示面数据
                   response.geometries.forEach((v) => {
-                    if (v.type != "" && v.coordinates.length > 0) {
+                    if (
+                      v.type != "" &&
+                      v.type != "Point" &&
+                      v.type != "LineString" &&
+                      v.coordinates.length > 0
+                    ) {
                       let geoData = this.overlayStandardGeojson(v);
                       let singlePolygonItem = {
                         uniqueId: `overlay_${uniqueId}`,