related to lawPopup events in comprehensive analysis

src/components/common/BottomForm/MyMission.vue

@@ -85,7 +85,7 @@ export default {
       // 分页组件（根据后台返回结果赋值）
       paginationData: {
         pageSize: 0,
-        pagerCount: 7,
+        pagerCount: 5,
         pageSizes: [5, 10, 20, 50],
         total: 200,
         currentPage: 1,

src/components/common/Pagination.vue

@@ -31,20 +31,20 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.pagination {
-  /deep/.btn-prev,
-  .btn-next,
-  .el-pager li {
-    // color: #404040;
-    font-size: 20px;
-    font-family: PingFang SC;
-    font-weight: 400;
-    // background: rgba(99, 165, 164, 0.1) ;
-    // border: 1px solid rgba(0, 255, 255, 0.3) ;
-  }
-  .el-pager li:not(.disabled).active {
-    // background-color: #00e9e6 ;
-    // color: #fff ;
-  }
-}
+// .pagination {
+//   /deep/.btn-prev,
+//   .btn-next,
+//   .el-pager li {
+//     // color: #404040;
+//     font-size: 20px;
+//     font-family: PingFang SC;
+//     font-weight: 400;
+//     // background: rgba(99, 165, 164, 0.1) ;
+//     // border: 1px solid rgba(0, 255, 255, 0.3) ;
+//   }
+//   .el-pager li:not(.disabled).active {
+//     // background-color: #00e9e6 ;
+//     // color: #fff ;
+//   }
+// }
 </style>

src/components/map/MapHolder.vue

@@ -77,6 +77,7 @@ export default {
           if ($(`#${str}_id a`)) {
             $(`#${str}_id a`).click((e) => {
               console.log(e, "显示疑点相关的弹窗");
+              this.$store.state.lawPopupShow = true
             });
           }
           // input添加点击事件

src/components/popup/LawPopup.vue

@@ -1,11 +1,41 @@
 <template>
-  <div class="law-related">
+  <div class="law-related" v-if="lawPopupShow" v-drag>
+    <div class="law-details-popup" v-if="lawDetailsPopupShow">
+      <div class="law-details-popup-closebtn" @click="detailsCloseEvent"></div>
+      <div class="law-details-popup-inner"></div>
+    </div>
     <div class="title">
       <div class="title-text">XXXX疑点相关的法律法规</div>
+      <div class="title-close-btn" @click="closeEvent"></div>
+    </div>
+    <div class="option">
+      <div class="option-left">
+        <el-input class="search-input" placeholder="请输入关键字"></el-input>
+        <div class="search-icon"><i class="el-icon-search"></i></div>
+      </div>
+      <div class="option-right">
+        <NewSelect class="option-right-item" />
+        <NewSelect class="option-right-item" />
+        <NewSelect class="option-right-item" />
+      </div>
+    </div>
+    <div class="table">
+      <el-table
+        ref="singleTable"
+        highlight-current-row
+        style="width: 100%"
+        :data="tableData"
+        @current-change="handleCurrentChange"
+      >
+        <el-table-column prop="name" label="名称" align="center">
+        </el-table-column>
+        <el-table-column prop="date" label="日期" align="center">
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="footer">
+      <Pagination :paginationData="paginationData" />
     </div>
-    <div class="option"></div>
-    <div class="table"></div>
-    <div class="footer"></div>
   </div>
 </template>
 <script>
@@ -21,6 +51,7 @@ export default {
   components: { NewSelect, Pagination },
   data() {
     return {
+      lawDetailsPopupShow: false,
       sortSelectVal: "土地资源",
       sortOptions: [
         {
@@ -42,7 +73,6 @@ export default {
           label: "2018",
         },
       ],
-      paginationData: {},
       tableData: [
         {
           name: "浦东新区区级政府投资项目审计监督办法",
@@ -54,8 +84,8 @@ export default {
         },
       ],
       paginationData: {
-        pageSize: 0,
-        pagerCount: 7,
+        pageSize: 10,
+        pagerCount: 5,
         currentPage: 1,
         pageSizes: [5, 10, 20, 50],
         total: 200,
@@ -66,8 +96,14 @@ export default {
           this.handleSizeChange(val);
         },
       },
+      currentRow: null,
     };
   },
+  computed: {
+    lawPopupShow() {
+      return this.$store.state.lawPopupShow;
+    },
+  },
   methods: {
     queryEvent() {
       console.log("查询");
@@ -84,20 +120,82 @@ export default {
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
     },
+    closeEvent() {
+      this.$store.state.lawPopupShow = false;
+    },
+    // 法律法规详细信息弹窗关闭
+    detailsCloseEvent() {
+      this.lawDetailsPopupShow = false;
+    },
+    // 选中当前行
+    handleCurrentChange(val) {
+      console.log(val, "currentRow");
+      this.currentRow = val;
+      this.lawDetailsPopupShow = true;
+    },
   },
 };
 </script>
 <style lang="less" scoped>
 .law-related {
-  width: 620px;
+  width: 700px;
   height: 500px;
-  background: rgba(0, 39, 77, 0.9);
+  background: rgba(0, 39, 77, 0.95);
   border: 1px solid #2fb8ff;
-  .title {
+  pointer-events: auto;
+  // 单击每一行后弹出法律相关的详细内容
+  .law-details-popup {
+    position: absolute;
     width: 100%;
+    height: 100%;
+    z-index: 99;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 39, 77, 0.9);
+    border: 1px solid #2fb8ff;
+    &-closebtn {
+      width: 30px;
+      height: 30px;
+      position: absolute;
+      top: 1px;
+      right: 1px;
+      background: url("../../assets/image/close.png") no-repeat center;
+      cursor: pointer;
+    }
+    &-inner {
+      width: 95%;
+      height: 90%;
+    }
+  }
+  .title {
+    margin: 0 auto;
+    width: 99%;
     height: 8%;
-    background: #2fb8ff;
     position: relative;
+    border-bottom: 1px solid;
+    border-image: -webkit-linear-gradient(
+        -90deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(47, 184, 255, 1) 50%,
+        rgba(255, 255, 255, 0) 99%
+      )
+      2 2 2 2;
+    border-image: -moz-linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(47, 184, 255, 1) 50%,
+        rgba(255, 255, 255, 0) 99%
+      )
+      2 2 2 2;
+    border-image: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(47, 184, 255, 1) 50%,
+        rgba(255, 255, 255, 0) 99%
+      )
+      2 2 2 2;
+
     &-text {
       position: absolute;
       left: 10px;
@@ -110,25 +208,78 @@ export default {
       font-weight: 300;
     }
     &-close-btn {
+      width: 30px;
+      height: 30px;
       position: absolute;
-      top: 7px;
-      right: 10px;
+      top: 1px;
+      right: 1px;
+      background: url("../../assets/image/close.png") no-repeat center;
+      cursor: pointer;
     }
   }
   .option {
     width: 100%;
-    height: 12%;
-    background: yellow;
+    height: 11%;
+    position: relative;
+    &-left {
+      position: absolute;
+      left: 0;
+      width: 35%;
+      .search-input {
+        position: absolute;
+        top: 7px;
+        left: 5px;
+        width: 225px;
+      }
+      /deep/.el-input__inner {
+        height: 35px;
+      }
+      .search-icon {
+        position: absolute;
+        top: 12px;
+        right: 25px;
+        color: #fff;
+        cursor: pointer;
+      }
+    }
+    &-right {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      position: absolute;
+      right: 0;
+      width: 65%;
+      &-item {
+        width: 120px;
+        height: 40px;
+        line-height: 50px;
+      }
+    }
   }
   .table {
     width: 100%;
     height: 70%;
-    background: red;
+    /deep/.el-table {
+      background: rgba(0, 39, 77, 0.6);
+      // font-size: 0.95rem;
+      font-family: PingFang SC;
+      font-weight: 500;
+      thead {
+        color: #4dc3ff;
+        font-size: 15px;
+      }
+      td {
+        cursor: pointer;
+      }
+    }
   }
   .footer {
+    margin: 0 auto;
     width: 100%;
     height: 10%;
-    background: orange;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 }
 </style>

src/directives/drag.js

@@ -0,0 +1,57 @@
+export const drag = {
+ 
+    inserted(el) {
+ 
+        let oDiv = el
+        
+        //  左边距最大值   
+        let maxLeft = el.parentNode.clientWidth - el.clientWidth
+ 
+        //  上边距最大值    
+        let maxTop = el.parentNode.clientHeight - el.clientHeight
+ 
+        oDiv.onmousedown = function (e) {
+            //  鼠标按下，计算当前元素距离可视区的距离
+            let disX = e.clientX - oDiv.offsetLeft
+ 
+            let disY = e.clientY - oDiv.offsetTop
+ 
+            document.onmousemove = function (e) {
+ 
+                //  获取到鼠标拖拽后的横向位移(距离父级元素)        
+                let l = e.clientX - disX
+ 
+                //  获取到鼠标拖拽后的纵向位移(距离父级元素)
+                let t = e.clientY - disY
+ 
+                oDiv.style.left = l + 'px'
+ 
+                oDiv.style.top = t + 'px'
+ 
+                if (e.clientX - disX <= 0) {
+                    oDiv.style.left = 0 + 'px'
+                }
+ 
+                if (e.clientY - disY <= 0) {
+                    oDiv.style.top = 0 + 'px'
+                }
+ 
+                if (e.clientX - disX >= maxLeft) {
+                    oDiv.style.left = maxLeft + 'px'
+                }
+ 
+                if (e.clientY - disY >= maxTop) {
+                    oDiv.style.top = maxTop + 'px'
+                }
+ 
+            }
+ 
+            //    松开事件后，移除事件
+ 
+            document.onmouseup = function () {
+                document.onmousemove = null
+                document.onmouseup = null
+            }
+        }
+    }
+}

src/main.js

@@ -10,6 +10,10 @@ import "./assets/global.css";
 
 import $ from "jquery";
 
+import { drag } from "./directives/drag";
+
+Vue.directive("drag", drag);
+
 Vue.config.productionTip = false;
 
 Vue.use(ElementUI);

src/store/index.js

@@ -21,9 +21,12 @@ export default new Vuex.Store({
     },
     // 地图常用方法集合
     mapMethodsCollection: new Map(),
+    // 自定义模型数组
     customModelsArr: [],
     // 自定义模型状态改变 -- 修改或创建
     modelStatus: "create",
+    // 法律法规弹窗
+    lawPopupShow:false
   },
   getters: {
     customModelsArr: (state) => state.customModelsArr,
@@ -36,7 +39,7 @@ export default new Vuex.Store({
     },
     // 用户点击左侧菜单，更新暂存对象（当menus为true时，点击相同的菜单会取消选中）
     changeLeftMenuTitle(state, leftMenuTitle) {
-        state.leftMenuTitle = leftMenuTitle;
+      state.leftMenuTitle = leftMenuTitle;
     },
     // 用户点击底部菜单，更新暂存对象（当menus为true时，点击相同的菜单会取消选中）
     changeBottomMenu(state, bottomMenuIndex) {

src/views/ComprehensiveAnalysis.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="comprehensive-analysis">
-    <!-- <LawPopup class="popup-style" /> -->
+    <LawPopup class="popup-style" />
     <div class="comprehensive-analysis-backbtn" @click="backEvent">
       <div class="left-arrow"></div>
       <div class="title">返回上级</div>
@@ -444,9 +444,10 @@ export default {
 .comprehensive-analysis {
   .popup-style {
     position: absolute;
-    top: 10%;
+    top: 15%;
     left: 33%;
-    pointer-events: auto;
+    // pointer-events: auto;
+    z-index: 2;
   }
   .el-checkbox {
     color: #fff;

src/views/FrequencyView.vue

@@ -139,7 +139,7 @@ export default {
       ],
       paginationData: {
         pageSize: 0,
-        pagerCount: 7,
+        pagerCount: 5,
         currentPage: 1,
         pageSizes: [5, 10, 20, 50],
         total: 200,

src/views/LawView.vue

@@ -80,7 +80,6 @@ export default {
       typeOptions: [],
       timeSelectVal: "",
       timeOptions: [],
-      paginationData: {},
       tableData: [
         {
           code: "PDSJJ2011223",
@@ -127,7 +126,7 @@ export default {
       ],
       paginationData: {
         pageSize: 0,
-        pagerCount: 7,
+        pagerCount: 5,
         currentPage: 1,
         pageSizes: [5, 10, 20, 50],
         total: 200,