‘所有图层’ 详细信息弹窗

src/components/map/MapHolder.vue

@@ -546,9 +546,9 @@ export default {
       coordinates = coordinates.map((v) => {
         return [v[1], v[0]];
       });
-      console.log(coordinates, "疑点坐标");
-      console.log(cid, "cid");
-      console.log(color, "color");
+      // console.log(coordinates, "疑点坐标");
+      // console.log(cid, "cid");
+      // console.log(color, "color");
       let polygon = L.polygon(coordinates, {
         color: color,
         weight: 3,

src/components/popup/AttributePopup.vue

@@ -4,21 +4,28 @@
     :style="{ width: boxWidth + 'px', height: boxHeight + 'px' }"
   >
     <div class="close-btn" @click="closeEvent"></div>
-    <el-table
-      :header-cell-style="{ 'text-align': 'center' }"
-      :data="tableData"
-      v-if="tableType === 'normal'"
-      height="100%"
-    >
-      <el-table-column label="版本" prop="version"></el-table-column>
-      <el-table-column label="shape-long" prop="long"></el-table-column>
-      <el-table-column label="shape-area" prop="area"></el-table-column>
+    <el-table :data="tableData" v-if="tableType === 'normal'" height="100%">
+      <el-table-column
+        label="名称"
+        prop="name"
+        align="center"
+      ></el-table-column>
       <el-table-column
         label="性质"
         prop="nature"
         align="center"
       ></el-table-column>
-      <el-table-column label="面积" prop="area"></el-table-column>
+      <el-table-column
+        label="shape-area"
+        prop="area"
+        align="center"
+      ></el-table-column>
+
+      <el-table-column
+        label="年份"
+        prop="year"
+        align="center"
+      ></el-table-column>
     </el-table>
     <el-table height="100%" v-if="tableType === 'personal'" :data="tableData">
       <el-table-column label="名称" prop="name"></el-table-column>

src/views/ComprehensiveAnalysis.vue

@@ -283,6 +283,7 @@ export default {
       // 存放对应图层的坐标
       treeCoordMap: new Map(),
       layerIdMap: new Map(),
+      randomColor: new Map(),
       isLeftLock: true,
       isRightLock: true,
     };
@@ -506,6 +507,11 @@ export default {
                                               item4.children
                                             );
 
+                                            this.randomColor.set(
+                                              `${item4.title}_${item2.title}`,
+                                              publicFun.getRandomColor()
+                                            );
+
                                             return {
                                               id: `${item4.title}_${item4.id}`,
                                               label: item4.title,
@@ -629,9 +635,8 @@ export default {
         console.log(data, "选中的数据");
         this.showRightBox = true;
         this.rightPanelTitle = data.label;
-        this.originalData[data.label] = this.rightPanelDataMap.get(data.label);
-        // 激活当前展开面板
-        this.activeNames = ["myLabel", data.label];
+        this.originalData[`${data.label}_${data.town}`] =
+          this.rightPanelDataMap.get(data.label);
 
         let searchParam = [];
         let targetTown = this.classTextToIndex["浦东新区行政区划"].get(
@@ -675,7 +680,7 @@ export default {
 
         this.$Post(this.urlsCollection.selectContentList, params).then(
           (res) => {
-            console.log(res, "获取数据");
+            // console.log(res, "获取数据");
             if (res.code === 202 && res.content === "数据不存在") {
               this.$message.info("当前用户无权限!");
             }
@@ -695,16 +700,33 @@ export default {
               ).then((res) => {
                 if (res.code === 200 && res.content.data.length > 0) {
                   console.log(res.content, "获取到的数据");
-                  res.content.data.forEach((ele) => {
+                  let uniqueId = `${data.label}_${data.town}`;
+                  this.originalData[uniqueId] = res.content.data.map((ele) => {
                     let cid = `${data.label}_${ele.id}`;
 
                     let geometry = ele.c_geometry;
                     map2DViewer.polygons[`${cid}_polygon`] = [];
                     this.layerIdMap.set(data.id, `${cid}_polygon`);
-                    // this.treeCoordMap.set(data.label, coord.reverse());
+                    // 激活当前展开面板
+                    this.activeNames = [
+                      "myLabel",
+                      `${data.label}_${data.town}`,
+                    ];
                     this.$store.state.mapMethodsCollection
                       .get("RENDER")
-                      .addSinglePolygon(geometry, cid, data.color);
+                      .addSinglePolygon(
+                        geometry,
+                        cid,
+                        this.randomColor.get(uniqueId)
+                      );
+                    return {
+                      id: ele.id,
+                      name: ele.c_yichang,
+                      columnName: ele.column_name,
+                      town: data.town,
+                      area: ele.c_c_shui_area,
+                      year: ele.c_c_year,
+                    };
                   });
                 }
               });
@@ -758,7 +780,8 @@ export default {
         // }
       } else {
         // 设置右侧折叠面板item数量
-        delete this.originalData[data.label];
+        delete this.originalData[`${data.label}_${data.town}`];
+        this.layerIdMap.delete(data.id);
         //关联自定义模型
         this.$store.state.treeDataCollection.delete(data.label);
         console.log(this.$store.state.treeDataCollection, "treeDataCollection");
@@ -775,15 +798,26 @@ export default {
           }
         }
       }
+
       this.legendTitle = Object.keys(this.originalData).map((v) => {
         return { name: v, info: v };
       });
-      this.legendIcon = this.legendTitle.map((v) => {
+      console.log(this.legendTitle, "legendTitle");
+      this.legendIcon = this.legendTitle.map((c) => {
+        let a = this.randomColor.get(c.name);
+        console.log(a, "a");
         return {
           background: "transparent",
-          border: `1px solid ${data.color}`,
+          border: `1px solid ${this.randomColor.get(c.name)}`,
         };
       });
+      // console.log(legendTItle);
+      // this.legendIcon = this.legendTitle.map((v) => {
+      //   return {
+      //     background: "transparent",
+      //     border: `1px solid ${data.color}`,
+      //   };
+      // });
     },
     // 右侧面板项点击事件
     listItemClick(type, data) {
@@ -793,17 +827,23 @@ export default {
       this.updateCasePopupShow = false;
       this.tableData = [];
       if (type === "default") {
-        let coord = data.geometry.coordinates[0][0][0];
-        this.$store.state.mapMethodsCollection.get("RENDER").setView(coord, 16);
+        console.log(data, "右侧面板需要显示的详细数据");
+        // let coord = data.geometry.coordinates[0][0][0];
+        // this.$store.state.mapMethodsCollection.get("RENDER").setView(coord, 16);
         this.tableType = "normal";
         this.boxWidth = "600";
         this.boxHeight = "200";
         console.log(data, "defaultTable");
         this.tableData.push({
-          version: data.properties["版本"],
-          nature: data.properties["性质"],
-          area: data.properties["面积"],
-          long: data.properties["周长"] || "--",
+          nature:data.name,
+          area: data.area,
+          town: data.town,
+          year: this.$dayjs(data.year).format("YYYY"),
+          name:data.columnName
+          // version: data.properties["版本"],
+          // nature: data.properties["性质"],
+          // area: data.properties["面积"],
+          // long: data.properties["周长"] || "--",
         });
         console.log(this.tableData);
       }