法律犯规弹窗

src/components/map/MapHolder.vue

@@ -20,12 +20,10 @@ export default {
       auditPopupStatus: "normal",
       popup: null,
       currentCid: null,
-      currentHtml: null
+      currentHtml: null,
     };
   },
   mounted() {
-    // let a = new Vue()
-    // console.log(a,"print Vue");
     // 监听全局事件总线中的卷帘对比事件（JLControl）
     this.$bus.$on("JLControl", () => {
       this.JLControl();
@@ -60,6 +58,11 @@ export default {
   methods: {
     // 地图弹窗修改
     createDynamicDiv(str) {
+      // 相关属性数据
+      // 表格里的数据
+      let popuppef = this.$refs.auditPopup;
+      let tableArr = popuppef.tableArr;
+      console.log(tableArr, "shuju");
       // 根据ref获取组件的dom元素
       this.currentHtml = this.$refs.auditPopup.$el.innerHTML;
       console.log($(`#${str}_id`), "8888");
@@ -123,7 +126,9 @@ export default {
       // 每次点击按钮后重绘弹窗
       if (this.currentHtml && this.currentCid) {
         setTimeout(() => {
-          this.popup.setContent(this.createDynamicDiv(this.currentCid)).openOn(map2DViewer.map);
+          this.popup
+            .setContent(this.createDynamicDiv(this.currentCid))
+            .openOn(map2DViewer.map);
         }, 300);
       }
     },
@@ -139,12 +144,13 @@ export default {
         "+proj=tmerc +lat_0=0 +lon_0=121.2751921 +k=1 +x_0=-3457147.81 +y_0=0 +ellps=krass +units=m +no_defs",
         {
           resolutions: [
-            529.1666666666666, 264.5833333333333, 132.29166666666666, 52.916666666666664, 26.458333333333332,
-            13.229166666666666, 5.291666666666666, 2.645833333333333, 1.3229166666666665, 0.5291666666666666,
-            0.2645833333333333, 0.13229166666666664
+            529.1666666666666, 264.5833333333333, 132.29166666666666,
+            52.916666666666664, 26.458333333333332, 13.229166666666666,
+            5.291666666666666, 2.645833333333333, 1.3229166666666665,
+            0.5291666666666666, 0.2645833333333333, 0.13229166666666664,
           ],
           origin: [-66000, 75000],
-          bounds: L.bounds([-65000, -76000], [75000, 72000])
+          bounds: L.bounds([-65000, -76000], [75000, 72000]),
         }
       );
       map2DViewer.map = L.map("map2DViewer", {
@@ -268,11 +274,13 @@ export default {
         }).addTo(map2DViewer.map);
         map2DViewer.polygons[`${cid}_layer`].push(polygon);
         polygon.infos = infos;
-        polygon.on("click", e => {
+        polygon.on("click", (e) => {
           // console.log(e, "polygon");
           this.auditPopupShow = true;
 
-          this.popup = L.popup({ maxWidth: 700, maxHeight: 600 }).setLatLng(e.latlng).setContent(this.createDynamicDiv("cid"));
+          this.popup = L.popup({ maxWidth: 700, maxHeight: 600 })
+            .setLatLng(e.latlng)
+            .setContent(this.createDynamicDiv("cid"));
           // .openOn(map2DViewer.map);
           this.auditPopupShow = false;
           this.popup.openOn(map2DViewer.map);

src/components/popup/LawPopup.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="law-related">
+    <div class="title">
+      <div class="title-text">XXXX疑点相关的法律法规</div>
+    </div>
+    <div class="option"></div>
+    <div class="table"></div>
+    <div class="footer"></div>
+  </div>
+</template>
+<script>
+import NewSelect from "@/components/common/NewSelect.vue";
+import Pagination from "@/components/common/Pagination.vue";
+/**
+ * XXXX 疑点相关的法律法规
+ * @author: Gao Lu
+ * @Date: 2022.11.25
+ */
+export default {
+  name: "LawPopup",
+  components: { NewSelect, Pagination },
+  data() {
+    return {
+      sortSelectVal: "土地资源",
+      sortOptions: [
+        {
+          value: "土地资源",
+          label: "土地资源",
+        },
+      ],
+      scopeSelectVal: "浦东新区",
+      scopeOptions: [
+        {
+          value: "浦东新区",
+          label: "浦东新区",
+        },
+      ],
+      timeSelectVal: "2018",
+      timeOptions: [
+        {
+          value: "2018",
+          label: "2018",
+        },
+      ],
+      paginationData: {},
+      tableData: [
+        {
+          name: "浦东新区区级政府投资项目审计监督办法",
+          date: "2022.09.25",
+        },
+        {
+          name: "审计法律法规文件1111",
+          date: "2022.09.25",
+        },
+      ],
+      paginationData: {
+        pageSize: 0,
+        pagerCount: 7,
+        currentPage: 1,
+        pageSizes: [5, 10, 20, 50],
+        total: 200,
+        currentChange: (val) => {
+          this.handleCurrentChange(val);
+        },
+        handleSizeChange: (val) => {
+          this.handleSizeChange(val);
+        },
+      },
+    };
+  },
+  methods: {
+    queryEvent() {
+      console.log("查询");
+    },
+    resetEvent() {
+      console.log("重置");
+    },
+    // 切换页
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      this.paginationData.currentPage = val;
+    },
+    // 切换条数
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.law-related {
+  width: 620px;
+  height: 500px;
+  background: rgba(0, 39, 77, 0.9);
+  border: 1px solid #2fb8ff;
+  .title {
+    width: 100%;
+    height: 8%;
+    background: #2fb8ff;
+    position: relative;
+    &-text {
+      position: absolute;
+      left: 10px;
+      top: 7px;
+      color: #fff;
+      word-spacing: 2px;
+      letter-spacing: 2px;
+      font-size: 18px;
+      font-family: PingFang SC;
+      font-weight: 300;
+    }
+    &-close-btn {
+      position: absolute;
+      top: 7px;
+      right: 10px;
+    }
+  }
+  .option {
+    width: 100%;
+    height: 12%;
+    background: yellow;
+  }
+  .table {
+    width: 100%;
+    height: 70%;
+    background: red;
+  }
+  .footer {
+    width: 100%;
+    height: 10%;
+    background: orange;
+  }
+}
+</style>

src/views/ComprehensiveAnalysis.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="comprehensive-analysis">
+    <!-- <LawPopup class="popup-style" /> -->
     <div class="comprehensive-analysis-backbtn" @click="backEvent">
       <div class="left-arrow"></div>
       <div class="title">返回上级</div>
@@ -176,7 +177,7 @@ import Legend from "@/components/map/Legend.vue";
 import publicFun from "@/utils/publicFunction.js";
 import { treeModel, defaultLayers } from "@/config/common";
 import AttributePopup from "@/components/popup/AttributePopup.vue";
-import CustomModelDialog from "@/components/common/BottomForm/CustomModelDialog.vue";
+import LawPopup from "@/components/popup/LawPopup.vue";
 import { get } from "@/utils/request";
 export default {
   name: "ComprehensiveAnalysis",
@@ -184,7 +185,7 @@ export default {
     MenuCard,
     Legend,
     AttributePopup,
-    CustomModelDialog,
+    LawPopup,
   },
   data() {
     return {
@@ -441,6 +442,12 @@ export default {
 <style lang="less" scoped>
 @commonBorderColor: #00aaff;
 .comprehensive-analysis {
+  .popup-style {
+    position: absolute;
+    top: 10%;
+    left: 33%;
+    pointer-events: auto;
+  }
   .el-checkbox {
     color: #fff;
     /deep/.el-checkbox__input.is-checked + .el-checkbox__label {