分页组件，综合分析疑点详细信息弹窗

src/components/popup/AttributePopup.vue

@@ -0,0 +1,36 @@
+<template>
+  <div
+    class="attribute"
+    :style="{ width: boxWidth + 'px', height: boxHeight + 'px' }"
+  >
+    <el-table v-if="tableType === 'normal'"></el-table>
+    <el-table v-if="tableType === 'personal'"></el-table>
+  </div>
+</template>
+<script>
+/**
+ * 疑点详细属性(预设模型 - 图层详细信息)
+ *
+ * tableType (normal,personal)
+ *
+ * normal -- 预设模型中的默认图层详细属性
+ *
+ * personal -- 我的标记
+ */
+export default {
+  name: "AttributePopup",
+  components: {},
+  props: ["tableType", "boxWidth", "boxHeight"],
+  watch() {},
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+.attribute {
+  .table {
+    width: 90%;
+    height: 90%;
+    // background: ;
+  }
+}
+</style>

src/components/popup/LabelCasePopup.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="attribute"></div>
+</template>
+<script>
+/**
+ * 标记疑点时辅助录入属性弹窗
+ */
+export default {
+  name: "LabelCasePopup",
+  components: {},
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+.attribute {
+}
+</style>

src/views/ComprehensiveAnalysis.vue

@@ -4,6 +4,15 @@
       <div class="left-arrow"></div>
       <div class="title">返回上级</div>
     </div>
+    <!-- 属性弹窗 -->
+    <AttributePopup
+      class="comprehensive-analysis-popup"
+      v-if="true"
+      :boxWidth="'600'"
+      :boxHeight="'600'"
+      :tableType="tableType"
+    />
+    <!-- <div class="comprehensive-analysis-popup" v-if="true"></div> -->
     <!-- 右上角工具栏 -->
     <!-- <div class="comprehensive-analysis-toolbar">
       <div
@@ -36,6 +45,7 @@
       </div>
     </div> -->
     <!-- 图例 -->
+
     <Legend
       class="comprehensive-analysis-legendbox"
       :legendData="{
@@ -44,9 +54,9 @@
         menuIndex: '3',
         legendIcon: legendIcon,
         legendTitle: legendTitle,
-        leftWidth:'30%',
-        rightWidth:'70%',
-        rightItemWidth:'120'
+        leftWidth: '30%',
+        rightWidth: '70%',
+        rightItemWidth: '120',
       }"
     />
 
@@ -106,20 +116,28 @@
         <div class="contant-container">
           <div class="contant-container-innerbox">
             <el-collapse v-model="activeNames">
-              <el-collapse-item :title="rightPanelTitle" name="1">
+              <el-collapse-item
+                v-for="key in Object.keys(originalData)"
+                :key="key"
+                :title="key"
+                :name="key"
+              >
                 <div
                   class="panel-list-item"
-                  v-for="item in originalData"
-                  :key="item.id"
+                  v-for="i in originalData[key]"
+                  :key="i.id"
+                  @click="listItemClick('default', i)"
                 >
-                  {{ item.name }}
+                  {{ i.name }}
                 </div>
               </el-collapse-item>
-              <el-collapse-item title="我的标记" name="2">
+
+              <el-collapse-item title="我的标记" name="myLabel">
                 <div
                   class="panel-list-item"
                   v-for="item in rightLabelData"
                   :key="item.id"
+                  @click="listItemClick('new', item)"
                 >
                   {{ item.name }}
                 </div>
@@ -137,20 +155,53 @@ import MenuCard from "@/components/layout/MenuCard.vue";
 import Legend from "@/components/map/Legend.vue";
 import publicFun from "@/utils/publicFunction.js";
 import { treeModel, soilLabelData, waterLabelData } from "@/config/common";
+import AttributePopup from "@/components/popup/AttributePopup.vue";
 export default {
   name: "ComprehensiveAnalysis",
   components: {
     MenuCard,
     Legend,
+    AttributePopup,
   },
   data() {
     return {
-      activeNames: ["1", "2"],
+      tableType: "normal",
+      attrTableShow: false,
+      activeNames: ["myLabel"],
       rightPanelTitle: "",
       rightPanelDataMap: new Map(),
-      rightLabelDataMap: new Map(),
-      originalData: [],
-      rightLabelData: [],
+      // rightLabelDataMap: new Map(),
+      originalData: {},
+      rightLabelData: [
+        {
+          id: publicFun.buildGuid(),
+          name: "疑点1",
+        },
+        {
+          id: publicFun.buildGuid(),
+          name: "疑点2",
+        },
+        {
+          id: publicFun.buildGuid(),
+          name: "疑点3",
+        },
+        {
+          id: publicFun.buildGuid(),
+          name: "疑点4",
+        },
+        {
+          id: publicFun.buildGuid(),
+          name: "疑点5",
+        },
+        {
+          id: publicFun.buildGuid(),
+          name: "疑点6",
+        },
+        {
+          id: publicFun.buildGuid(),
+          name: "疑点7",
+        },
+      ],
       // searchInput: "",
       // showLayersValue: false,
       // layerControlBtn: false,
@@ -245,12 +296,12 @@ export default {
       };
     });
 
-    for (let key in soilLabelData) {
-      this.rightLabelDataMap.set(key, soilLabelData[key]);
-    }
-    for (let key in waterLabelData) {
-      this.rightLabelDataMap.set(key, waterLabelData[key]);
-    }
+    // for (let key in soilLabelData) {
+    //   this.rightLabelDataMap.set(key, soilLabelData[key]);
+    // }
+    // for (let key in waterLabelData) {
+    //   this.rightLabelDataMap.set(key, waterLabelData[key]);
+    // }
   },
   mounted() {},
   methods: {
@@ -293,18 +344,31 @@ export default {
     handleCheckChange(data, checked) {
       if (checked) {
         this.rightPanelTitle = data.label;
-        this.originalData = this.rightPanelDataMap.get(data.label);
-        this.$refs.tree.setCheckedKeys([data.id]);
-        if (this.rightLabelDataMap.has(data.label)) {
-          this.rightLabelData = this.rightLabelDataMap.get(data.label);
-        } else {
-          this.rightLabelData = [];
-        }
+        // this.originalData = this.rightPanelDataMap.get(data.label);
+        this.originalData[data.label] = this.rightPanelDataMap.get(data.label);
+        this.activeNames = ["myLabel", data.label];
+      } else {
+        delete this.originalData[data.label];
+        this.activeNames = ["myLabel"];
       }
+    },
+    listItemClick(type, data) {
+      // data
+      // id: "default_1669007689253APblgwSrDZlV1kSFim";
+      // name: "疑点1";
+      this.attrTableShow = true;
+      if (type === "default") {
+        this.tableType = "normal";
 
-      // if(data.children.length>0){
-
-      // }
+        console.log(data, "defaultTable");
+      }
+      if (type === "new") {
+        this.tableType = "personal";
+        console.log(data, "newTable");
+      }
+    },
+    collapseHandleChange(data) {
+      console.log(data, "collapseHandleChange");
     },
   },
 };
@@ -485,6 +549,13 @@ export default {
     bottom: 30px;
     z-index: 1;
   }
+  /* 弹窗 */
+  &-popup {
+    background: red;
+    position: absolute;
+    top: 10%;
+    left: 35%;
+  }
   /* 左边树状面板 */
   &-left {
     width: 400px;
@@ -656,8 +727,8 @@ export default {
           padding-left: 20px;
           border-left: 1px solid rgba(207, 222, 255, 0.2);
           border-right: 1px solid rgba(207, 222, 255, 0.2);
-
           border-bottom: 1px solid rgba(207, 222, 255, 0.2);
+          cursor: pointer;
         }
       }
     }

src/views/HomeView.vue

@@ -29,7 +29,7 @@
           <MenuCard
             :menuData="{
               type: 'card',
-              title: '资源问题',
+              title: streetSelectVal+'资源问题',
               titleWidth: 40,
               boxWidth: '780'
             }"