综合分析列表切换

src/components/map/MapHolder.vue

@@ -48,6 +48,8 @@ export default {
       currentHtml: null,
       currentProperties: null,
       currentSourceType: null,
+      currentModelId: null,
+      currentColumnId: null,
       // 标记疑点
       currentLabelCid: null,
       currentLabelHtml: null,
@@ -173,7 +175,7 @@ export default {
         tileSize: 512,
         url: url,
         minZoom: 0,
-        minNativeZoom: 3,
+        minNativeZoom: 0,
         maxNativeZoom: 7,
         maxZoom: 14,
       });
@@ -247,10 +249,11 @@ export default {
      * @str
      * @properties
      * @sourceType
-     * @defaultStatus
+     * @modelId -- 用于疑点标记修改保存
+     * @columnId -- 用于疑点标记修改保存
      */
-    createAuditDiv(str, geojsonData, sourceType, defaultStatus) {
-      // 根据ref获取组件的dom元素
+    createAuditDiv(str, geojsonData, sourceType, modelId, columnId) {
+      // 根据ref获取组件的dom元素columnId
       this.currentHtml = this.$refs.auditRef.$el.innerHTML;
       if (this.currentHtml) {
         let div = document.createElement("div");
@@ -317,7 +320,7 @@ export default {
                   this.cancelBtnEvent();
                   break;
                 case "确认":
-                  this.confirmBtnEvent(str);
+                  this.confirmBtnEvent(str, modelId, columnId);
                   break;
               }
             });
@@ -366,7 +369,8 @@ export default {
     modifyBtnEvent() {
       console.log("用户点击了地图中的修改按钮！");
     },
-    confirmBtnEvent(str) {
+    confirmBtnEvent(str, modelId, columnId) {
+      debugger;
       console.log(str, "str--当前开启的");
       // isTrue
       let selectVal = $(`#${str}_id .center-table-item-special select`).val();
@@ -390,7 +394,9 @@ export default {
       }
       console.log(map2DViewer.polygons[str]);
 
+      // 修改疑点时必须要写id
       let obj = {
+        id: str,
         c_date_time: this.$dayjs().valueOf(),
         c_boolean: selectVal === "isTrue" ? true : false,
         // 修改人员名称
@@ -401,8 +407,8 @@ export default {
 
       let modifyParams = new FormData();
       modifyParams = {
-        columnId: 510,
-        modelId: 118,
+        columnId: columnId,
+        modelId: modelId,
         content: JSON.stringify(obj),
       };
       this.$Post(this.urlsCollection.updateContent, modifyParams).then(
@@ -541,7 +547,9 @@ export default {
             this.createAuditDiv(
               this.currentCid,
               this.currentProperties,
-              this.currentSourceType
+              this.currentSourceType,
+              this.currentModelId,
+              this.currentColumnId
             )
           );
         }, 300);
@@ -787,6 +795,8 @@ export default {
      * @mainType  所有图层/预设模型
      * @sourceType 土地资源/林地资源/生态资源/水资源/全部
      * @defaultStatus 当前疑点图斑的状态 -- 未标记，疑点，非疑点
+     * @modelId -- modelId
+     * @columnId -- columnId
      */
     addSinglePolygon(
       geometry,
@@ -795,7 +805,9 @@ export default {
       uniqueId,
       mainType,
       sourceType,
-      defaultStatus
+      defaultStatus,
+      modelId,
+      columnId
     ) {
       let uniqueIdList = [];
       if (this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId]) {
@@ -828,6 +840,7 @@ export default {
       map2DViewer.polygons[cid] = polygon;
 
       polygon.on("click", (e) => {
+        console.log(this.defaultValue, "点击面后显示默认的标记状态");
         let geojsonData = geometry;
         // 所有图层下的疑点图层 -- 常规展示
         if (geojsonData) {
@@ -839,26 +852,20 @@ export default {
               图层构成: geoProperties["图层构成"] || "--",
               性质: geoProperties["性质"] || "--",
             };
-            if (defaultStatus === false) {
-              this.defaultStatus = "非疑点";
-            }
-            if (defaultStatus === true) {
-              this.defaultStatus = "疑点";
-            }
-            if (defaultStatus === null) {
-              this.defaultStatus = "未标记";
-            }
-            console.log(defaultStatus, "defaultStatus");
             this.defaultStatus = defaultStatus;
+
             this.$refs.auditRef.$nextTick(() => {
               this.currentCid = cid;
               this.currentProperties = geojsonData;
               this.currentSourceType = sourceType;
+              this.currentModelId = modelId;
+              this.currentColumnId = columnId;
               let domItem = this.createAuditDiv(
                 cid,
                 geojsonData,
                 sourceType,
-                defaultStatus
+                modelId,
+                columnId
               );
               this.auditPopupShow = true;
               this.popup = L.popup({ maxWidth: 700, maxHeight: 600 })
@@ -885,36 +892,6 @@ export default {
               this.normalAttrPopupShow = false;
               this.normalPopup.openOn(map2DViewer.map);
             });
-            // this.$refs.normalRef.$nextTick(() => {
-            //     if (mainType === "所有图层") {
-            //       let domItem = this.createNormalDiv(cid, geojsonData, sourceType);
-            //       this.normalAttrPopupShow = true;
-            //       this.normalPopup = L.popup({ maxWidth: 700, maxHeight: 600 }).setLatLng(e.latlng).setContent(domItem);
-            //       this.normalAttrPopupShow = false;
-            //       this.normalPopup.openOn(map2DViewer.map);
-            //     }
-            //     // 预设模型下图层 -- 需要考虑审计功能
-            //     if (mainType === "预设模型") {
-            //       let domItem = this.createAuditDiv(cid, geojsonData, sourceType);
-            //       this.auditPopupShow = true;
-            //       this.popup = L.popup({ maxWidth: 700, maxHeight: 600 })
-            //         .setLatLng(e.latlng)
-            //         .setContent(domItem);
-            //       this.auditPopupShow = false;
-            //       this.popup.openOn(map2DViewer.map);
-            //       this.currentCid = cid;
-            //       this.currentProperties = geojsonData;
-            //       this.currentSourceType = sourceType;
-            //     }
-            //     // 我的模型图层 -- 无疑点审计功能，无法律法规选项
-            //     if (mainType === "我的模型") {
-            //       let domItem = this.createNormalDiv(cid, geojsonData, sourceType);
-            //       this.normalAttrPopupShow = true;
-            //       this.normalPopup = L.popup({ maxWidth: 700, maxHeight: 600 }).setLatLng(e.latlng).setContent(domItem);
-            //       this.normalAttrPopupShow = false;
-            //       this.normalPopup.openOn(map2DViewer.map);
-            //     }
-            // });
           }
         }
       });

src/views/ComprehensiveAnalysis.vue

@@ -302,7 +302,7 @@
                 :name="key"
               >
                 <template slot="title">
-                  <div class="status-select">
+                  <div class="status-select" @mouseenter="panelMouseEnter(key)">
                     <div class="title">{{ key }}</div>
                     <NewSelect
                       style="width: 100px"
@@ -310,6 +310,7 @@
                       v-model="statusSelectVal"
                       :options="statusOptions"
                       :value="statusSelectVal"
+                      @selectEvent="changeSortMethod"
                     />
                   </div>
                 </template>
@@ -328,6 +329,9 @@
                     }}
                   </div>
                   <span class="normal-icon">
+                    <span v-if="v.mainType === '预设模型'">{{
+                      v.c_boolean
+                    }}</span>
                     <el-button
                       size="normal"
                       type="text"
@@ -343,7 +347,7 @@
                   </span>
                   <!-- {{ v.column_name + "_" + (i + 1) }} -->
                 </div>
-                <div class="panel-footer" @mouseenter="mouseenter(key)">
+                <div class="panel-footer" @mouseenter="panelMouseEnter(key)">
                   <Pagination :paginationData="paginationData" />
                 </div>
               </el-collapse-item>
@@ -465,7 +469,7 @@ export default {
       labelAllVisibleChecked: true,
       townSelectVal: "老港镇",
       townOptions: [],
-      statusSelectVal: "未标记",
+      statusSelectVal: "",
       statusOptions: [
         {
           value: "未标记",
@@ -879,6 +883,49 @@ export default {
     this.$bus.$off("caseAuditEvent2");
   },
   methods: {
+    changeSortMethod(val) {
+      if (this.enteredPanelId) {
+        let data = this.originalDataMap.get(this.enteredPanelId);
+        // console.log(data, "当前数据过滤");
+        let arr1 = data.filter((v) => {
+          return v.c_boolean === "未标记";
+        });
+        let arr2 = data.filter((v) => {
+          return v.c_boolean === "疑点";
+        });
+
+        let arr3 = data.filter((v) => {
+          return v.c_boolean === "非疑点";
+        });
+
+        switch (val) {
+          case "未标记":
+            this.originalData[this.enteredPanelId] = [
+              ...arr1,
+              ...arr2,
+              ...arr3,
+            ];
+            break;
+          case "疑点":
+            this.originalData[this.enteredPanelId] = [
+              ...arr2,
+              ...arr1,
+              ...arr3,
+            ];
+            break;
+          case "非疑点":
+            this.originalData[this.enteredPanelId] = [
+              ...arr3,
+              ...arr1,
+              ...arr2,
+            ];
+            break;
+        }
+
+        // 先对所有的数据进行排序
+        console.log(this.originalData[this.enteredPanelId], "已经排序后的数组");
+      }
+    },
     // 得到底部菜单疑点审计开启状态
     caseAuditEvent() {
       this.caseAuditEventStatus = !this.caseAuditEventStatus;
@@ -1007,11 +1054,11 @@ export default {
     labelAllVisible() {
       this.labelAllVisibleChecked = !this.labelAllVisibleChecked;
     },
-
-    mouseenter(val) {
+    panelMouseEnter(val) {
       if (this.rightPanelDataMap.has(val)) {
         // 方便获取
         this.enteredPanelId = val;
+        console.log(this.enteredPanelId, "enteredPanelId");
         this.enteredColumnId = this.rightPanelDataMap.get(val).id;
         this.enteredMainType = this.rightPanelDataMap.get(val).mainType;
         this.enteredSourceType = this.rightPanelDataMap.get(val).sourceType;
@@ -1030,6 +1077,7 @@ export default {
       );
     },
     getMapData(uniqueId, columnId, mainType, sourceType) {
+      console.log(uniqueId, "uniqueId");
       let layerParams = new FormData();
       layerParams = {
         columnId: columnId,
@@ -1072,13 +1120,40 @@ export default {
               this.$store.state.selectSelectDataMap["singlePolygon"] = [];
             }
 
+            // 初始化时将请求到的疑点数据中是否疑点全部改为未标记，疑点，非疑点三种状态
+            let changeCaseStatusArr = res.content.data.map((ele) => {
+              let targetBoolean = "未标记";
+              // 预设模型下的targetBoolean默认是undefined
+              if (mainType == "预设模型" && ele.c_boolean == true) {
+                targetBoolean = "疑点";
+              }
+              if (mainType == "预设模型" && ele.c_boolean == false) {
+                targetBoolean = "非疑点";
+              }
+
+              return {
+                id: ele.id,
+                column_name: ele.column_name,
+                c_boolean: targetBoolean,
+                c_xzqh: ele.c_xzqh,
+                c_content: ele.c_content,
+                c_date_time: ele.c_date_time,
+                title: ele.title,
+                model_id: ele.model_id,
+                column_id: ele.column_id,
+                content: ele.content,
+                secret_level: ele.secret_level,
+                mainType: mainType,
+              };
+            });
+
             // 存储请求到的疑点数据
             if (!this.originalDataMap.has(uniqueId)) {
-              this.originalDataMap.set(uniqueId, res.content.data);
+              this.originalDataMap.set(uniqueId, changeCaseStatusArr);
             } else {
               let arr = this.originalDataMap
                 .get(uniqueId)
-                .concat(res.content.data);
+                .concat(changeCaseStatusArr);
               this.originalDataMap.set(uniqueId, arr);
             }
 
@@ -1098,10 +1173,13 @@ export default {
               // 统计所有图斑数
               this.currentTotal += res.content.data.length;
               // 请求到数据后直接渲染点
-              res.content.data.forEach((ele) => {
+
+              changeCaseStatusArr.forEach((ele) => {
                 let cid = ele.id;
                 let geometry = ele.c_content;
                 let defaultStatus = ele.c_boolean;
+                let modelId = ele.model_id;
+                let columnId = ele.column_id;
                 this.$store.state.mapMethodsCollection
                   .get("RENDER")
                   .addSinglePolygon(
@@ -1111,7 +1189,9 @@ export default {
                     uniqueId,
                     mainType,
                     sourceType,
-                    defaultStatus
+                    defaultStatus,
+                    modelId,
+                    columnId
                   );
               });
 
@@ -1120,30 +1200,7 @@ export default {
               // 激活当前展开面板
               this.activeNames = ["myLabel", uniqueId];
               // 用于分页数据
-              this.originalData[uniqueId] = this.originalDataMap
-                .get(uniqueId)
-                .map((ele) => {
-                  return {
-                    id: ele.id,
-                    // "垃圾堆放点"
-                    column_name: ele.column_name,
-                    // 是否疑点
-                    c_boolean: ele.c_boolean ? "是" : "否",
-                    // 行政区划
-                    c_xzqh: ele.c_xzqh,
-                    // 空间信息
-                    c_content: ele.c_content,
-                    // 疑点修改时间
-                    c_date_time: ele.c_date_time,
-                    // 修改人员名称
-                    // c_editor_name: ele.c_editor_name,
-                    // 标题
-                    title: ele.title,
-                    column_id: ele.column_id,
-                    content: ele.content,
-                    secret_level: ele.secret_level,
-                  };
-                });
+              this.originalData[uniqueId] = this.originalDataMap.get(uniqueId);
 
               // 进行分页列表展示
               this.changeSingleLayer(
@@ -1248,27 +1305,29 @@ export default {
           val * currentPageSize
         );
 
-        this.originalData[uniqueId] = this.originalData[uniqueId].map((ele) => {
-          return {
-            id: ele.id,
-            column_name: ele.column_name,
-            // 是否疑点
-            c_boolean: ele.c_boolean ? "是" : "否",
-            // 行政区划
-            c_xzqh: ele.c_xzqh,
-            // 空间信息
-            c_content: ele.c_content,
-            // 疑点修改时间
-            c_date_time: ele.c_date_time,
-            // 修改人员名称
-            // c_editor_name: ele.c_editor_name,
-            // 标题
-            title: ele.title,
-            column_id: ele.column_id,
-            content: ele.content,
-            secret_level: ele.secret_level,
-          };
-        });
+        // this.originalData[uniqueId] = this.originalData[uniqueId].map((ele) => {
+        //   return {
+        //     id: ele.id,
+        //     column_name: ele.column_name,
+        //     // 是否疑点
+        //     c_boolean: targetBoolean,
+        //     // 行政区划
+        //     c_xzqh: ele.c_xzqh,
+        //     // 空间信息
+        //     c_content: ele.c_content,
+        //     // 疑点修改时间
+        //     c_date_time: ele.c_date_time,
+        //     // 修改人员名称
+        //     // c_editor_name: ele.c_editor_name,
+        //     // 标题
+        //     title: ele.title,
+        //     column_id: ele.column_id,
+        //     content: ele.content,
+        //     secret_level: ele.secret_level,
+        //     mainType: mainType,
+        //   };
+        // });
+
         // 激活当前展开面板
         this.activeNames = ["myLabel", uniqueId];
       }
@@ -1895,9 +1954,11 @@ export default {
             modelId: data.id,
             userId: localStorage.getItem("USER_ID"),
           };
+
           // 调用我的模型查看接口读取所有图层数据
           this.$Post(this.urlsCollection.getModelCoverAgeInfo, params).then(
             (res) => {
+              debugger;
               if (res.code === 201 && res.message === "未申请任务权限") {
                 this.$message.info("暂无数据!");
               }
@@ -2706,7 +2767,9 @@ export default {
             display: flex;
             align-items: center;
             justify-content: space-around;
-            width: 75px;
+            width: 120px;
+            border: 1px solid palegoldenrod;
+            color: peru;
           }
 
           .operation-icon {