疑点详细信息弹窗组件样式以及显示隐藏功能

src/assets/global.css

@@ -84,19 +84,19 @@
   color: #fff;
 }
 
-.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
   background-color: rgba(79, 172, 254, 0.4);
-  color:rgba(0, 242, 254, 1);
+  color: rgba(0, 242, 254, 1);
 }
 
 .el-select-dropdown__item.selected {
-  color:rgba(0, 242, 254, 1);
+  color: rgba(0, 242, 254, 1);
 }
 
-
-.el-popper[x-placement^=bottom] .popper__arrow::after {
+.el-popper[x-placement^="bottom"] .popper__arrow::after {
   border-bottom-color: rgba(47, 184, 255, 0.7);
 }
-.el-popper[x-placement^=bottom] .popper__arrow {
+.el-popper[x-placement^="bottom"] .popper__arrow {
   border-bottom-color: rgba(47, 184, 255, 0.7);
 }

src/components/map/Legend.vue

@@ -107,7 +107,7 @@ export default {
         height: 20px;
         display: flex;
         align-items: center;
-        justify-content: center;
+        justify-content: flex-start;
         color: white;
       }
     }

src/components/popup/AttributePopup.vue

@@ -3,8 +3,19 @@
     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 class="close-btn" @click="closeEvent"></div>
+    <el-table :data="tableData" v-if="tableType === 'normal'" height="100%">
+      <el-table-column label="版本"></el-table-column>
+      <el-table-column label="shape-long"></el-table-column>
+      <el-table-column label="shape-area"></el-table-column>
+      <el-table-column label="性质"></el-table-column>
+      <el-table-column label="面积"></el-table-column>
+    </el-table>
+    <el-table height="100%" v-if="tableType === 'personal'">
+      <el-table-column label="名称"></el-table-column>
+      <el-table-column label="类别"></el-table-column>
+      <el-table-column label="描述"></el-table-column>
+    </el-table>
   </div>
 </template>
 <script>
@@ -20,17 +31,130 @@
 export default {
   name: "AttributePopup",
   components: {},
-  props: ["tableType", "boxWidth", "boxHeight"],
-  watch() {},
-  methods: {},
+  props: ["tableType", "boxWidth", "boxHeight", "tableData"],
+  watch: {},
+  methods: {
+    closeEvent() {
+      this.$emit("close");
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
+@borderColor: #00aaff;
+@borderColor32: #00aaff32;
+@borderColor64: #00aaff64;
+@topTitleBgLeft: #002645;
+@topTitleMinLeft: #002f56;
+@lightColor: #74ffff;
 .attribute {
-  .table {
-    width: 90%;
-    height: 90%;
-    // background: ;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .close-btn {
+    cursor: pointer;
+    position: absolute;
+    right: -15px;
+    top: -15px;
+    width: 40px;
+    height: 40px;
+    background: url("../../assets/image/close.png") no-repeat center;
+    z-index: 1;
+  }
+  /deep/.el-table__empty-text {
+    color: #fff;
+  }
+
+  /deep/.el-table {
+    font-size: 0.95rem;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #ffffff;
+    background: rgba(0, 39, 77, 0.6);
+    border: 1px solid #2fb8ff;
+
+    // background: transparent;
+    //  .el-table__body-wrapper is-scrolling-none{
+    //   .el-table_body{
+    //     width:400px !important;
+    //   }
+    // }
+
+    .el-table__header {
+      // width: calc(100% - 2px);
+    }
+
+    // .el-table__empty-text {
+    //   position: absolute;
+    //   left: 25%;
+    // }
+
+    .el-table__body-wrapper,
+    .el-table__footer-wrapper,
+    .el-table__header-wrapper {
+      width: 100%;
+      // margin: 0 auto;
+      /* .el-table_body{
+            width:400px !important;
+          } */
+    }
+
+    // .el-table__body-wrapper is-scrolling-none{
+    //   .el-table_body{
+    //     width:400px !important;
+    //   }
+    // }
+
+    thead {
+      color: #fff;
+      background-image: --webkit-linear-gradient(
+        to left,
+        @topTitleMinLeft,
+        @borderColor,
+        @topTitleMinLeft
+      );
+      background-image: --moz-linear-gradient(
+        to left,
+        @topTitleMinLeft,
+        @borderColor,
+        @topTitleMinLeft
+      );
+      background-image: linear-gradient(
+        to left,
+        @topTitleMinLeft,
+        @borderColor,
+        @topTitleMinLeft
+      );
+
+      // position: relative;
+      // left: 0;
+    }
+    th {
+      position: relative;
+      left: 2px;
+      padding: 5px 0;
+      background: transparent;
+    }
+    tr {
+      background: transparent;
+      .is-leaf {
+        border-bottom: 0px solid #ebeef5;
+      }
+    }
+    td {
+      padding: 2px 0;
+      position: relative;
+      left: 10px;
+      border-bottom: 0px solid #ebeef5;
+      font-size: 0.85rem;
+    }
+    tbody tr:hover > td {
+      // background-color: rgba(0, 0, 0, 0) !important;
+    }
+  }
+  /deep/.el-table::before {
+    height: 0px;
   }
 }
 </style>

src/utils/publicFunction.js

@@ -2,31 +2,51 @@
  * 公共函数库
  */
 //随机id生成
-const buildGuid = function(options) {
-    var text = "";
-    var mar = options || 'default';
-    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-    for (var i = 0; i < 18; i++) text += possible.charAt(Math.floor(Math.random() * possible.length));
-    return mar + '_' + (new Date()).getTime().toString() + text;
-}
+const buildGuid = function (options) {
+  var text = "";
+  var mar = options || "default";
+  var possible =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  for (var i = 0; i < 18; i++)
+    text += possible.charAt(Math.floor(Math.random() * possible.length));
+  return mar + "_" + new Date().getTime().toString() + text;
+};
 
 /**
- * 根据数组属性排序 
+ * 根据数组属性排序
  */
- const compare = function (property) {//property:根据什么属性排序
-  return function(a,b){
-   var value1 = a[property];
-   var value2 = b[property];
-   /*
-   * value2 - value1; ——> 降序
-   * value1 - value2; ——> 升序
-   */
-   return value1 - value2;//升序排序
+const compare = function (property) {
+  //property:根据什么属性排序
+  return function (a, b) {
+    var value1 = a[property];
+    var value2 = b[property];
+    /*
+     * value2 - value1; ——> 降序
+     * value1 - value2; ——> 升序
+     */
+    return value1 - value2; //升序排序
+  };
+};
+
+/**
+ * 获取随机颜色
+ */
+const getRandomColor = function () {
+  let rgb = [];
+
+  for (let i = 0; i < 3; ++i) {
+    let color = Math.floor(Math.random() * 256).toString(16);
+
+    color = color.length == 1 ? "0" + color : color;
+
+    rgb.push(color);
   }
- }
-  
+
+  return "#" + rgb.join("");
+};
 
 export default {
   buildGuid,
-  compare
-}
+  compare,
+  getRandomColor
+};

src/views/ComprehensiveAnalysis.vue

@@ -7,10 +7,11 @@
     <!-- 属性弹窗 -->
     <AttributePopup
       class="comprehensive-analysis-popup"
-      v-if="true"
-      :boxWidth="'600'"
-      :boxHeight="'600'"
+      v-if="attrTableShow"
+      :boxWidth="boxWidth"
+      :boxHeight="boxHeight"
       :tableType="tableType"
+      @close="closeEvent"
     />
     <!-- <div class="comprehensive-analysis-popup" v-if="true"></div> -->
     <!-- 右上角工具栏 -->
@@ -49,8 +50,8 @@
     <Legend
       class="comprehensive-analysis-legendbox"
       :legendData="{
-        boxWidth: '200',
-        boxHeight: '200',
+        boxWidth: '250',
+        boxHeight: '350',
         menuIndex: '3',
         legendIcon: legendIcon,
         legendTitle: legendTitle,
@@ -166,6 +167,8 @@ export default {
   data() {
     return {
       tableType: "normal",
+      boxWidth: "600",
+      boxHeight: "600",
       attrTableShow: false,
       activeNames: ["myLabel"],
       rightPanelTitle: "",
@@ -224,35 +227,8 @@ export default {
         children: "children",
         label: "label",
       },
-      legendIcon: [
-        {
-          background: "transparent",
-          border: "1px solid rgba(255, 152, 51, 1)",
-        },
-        {
-          background: "transparent",
-          border: "1px solid rgba(253, 255, 76, 1)",
-        },
-        {
-          background: "transparent",
-          border: "1px solid rgba(75, 195, 19, 1)",
-        },
-        {
-          background: "transparent",
-          border: "1px solid rgba(65, 239, 255, 1)",
-        },
-        {
-          background: "transparent",
-          border: "1px solid rgba(255, 64, 0, 1)",
-        },
-      ],
-      legendTitle: [
-        "永久基本农田",
-        "一般耕地",
-        "建设用地减量化",
-        "特征地",
-        "基本农田被侵占",
-      ],
+      legendIcon: [],
+      legendTitle: [],
     };
   },
   watch: {
@@ -343,14 +319,22 @@ export default {
     },
     handleCheckChange(data, checked) {
       if (checked) {
+        this.showRightBox = true;
         this.rightPanelTitle = data.label;
-        // 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"];
       }
+      this.legendTitle = Object.keys(this.originalData);
+      this.legendIcon = this.legendTitle.map((v) => {
+        let color = publicFun.getRandomColor();
+        return {
+          background: "transparent",
+          border: `1px solid ${color}`,
+        };
+      });
     },
     listItemClick(type, data) {
       // data
@@ -359,16 +343,19 @@ export default {
       this.attrTableShow = true;
       if (type === "default") {
         this.tableType = "normal";
-
+        this.boxWidth = "600";
+        this.boxHeight = "600";
         console.log(data, "defaultTable");
       }
       if (type === "new") {
         this.tableType = "personal";
+        this.boxWidth = "300";
+        this.boxHeight = "300";
         console.log(data, "newTable");
       }
     },
-    collapseHandleChange(data) {
-      console.log(data, "collapseHandleChange");
+    closeEvent() {
+      this.attrTableShow = false;
     },
   },
 };
@@ -551,10 +538,11 @@ export default {
   }
   /* 弹窗 */
   &-popup {
-    background: red;
+    // background: red;
     position: absolute;
     top: 10%;
     left: 35%;
+    pointer-events: auto;
   }
   /* 左边树状面板 */
   &-left {