法律法规弹窗修改，综合分析地址栏搜索

public/static/config/config.js

@@ -30,3 +30,7 @@ var map2DViewer = {
 
 // 存放tree中图层node id
 var treeIdMap = new Map();
+
+// 各镇域中心区域位置
+var streetLocationMap = new Map();
+streetLocationMap.set("浦东新区", [31.209453, 121.555531]);

src/components/map/MapHolder.vue

@@ -8,6 +8,7 @@
 <script>
 import publicFun from "@/utils/publicFunction.js";
 import { get } from "@/utils/request";
+import { streetLocation, townData } from "@/config/common";
 import CaseAuditPopup from "@/components/popup/CaseAuditPopup.vue";
 import LabelCasePopup from "@/components/popup/LabelCasePopup.vue";
 import BasemapChange from "@/components/map/BasemapChange.vue";
@@ -329,43 +330,45 @@ export default {
     // 传入街道参数，重新渲染区域图层
     getJSonDataToStreet(url, param) {
       // 先删除历史图层
-      if (map2DViewer.map.hasLayer(map2DViewer.groups["district_polygon"])) {
-        map2DViewer.groups["district_label"].remove();
-        map2DViewer.groups["district_polygon"].remove();
+      if (map2DViewer.map.hasLayer(map2DViewer.groups["浦东新区_polygon"])) {
+        map2DViewer.groups["浦东新区_label"].remove();
+        map2DViewer.groups["浦东新区_polygon"].remove();
       }
       // 请求并渲染新的区域图层
       get("./static/json/pdgeojson.json", "").then((geoJson) => {
-        map2DViewer.groups["district_polygon"] = L.featureGroup();
-        map2DViewer.groups["district_label"] = L.featureGroup();
-        // console.log(map2DViewer.groups["district_polygon"], "district_polygon group");
-        map2DViewer.groups["district_polygon"].addTo(map2DViewer.map);
-        map2DViewer.groups["district_label"].addTo(map2DViewer.map);
+        // 存放所有的面数据
+        map2DViewer.groups["浦东新区_polygon"] = L.featureGroup();
+        map2DViewer.groups["浦东新区_label"] = L.featureGroup();
+        map2DViewer.groups["浦东新区_polygon"].addTo(map2DViewer.map);
+        map2DViewer.groups["浦东新区_label"].addTo(map2DViewer.map);
         geoJson.features.map((feature) => {
           if (
             this.town.indexOf(feature.properties.NAME.replace("镇", "")) > -1
           ) {
-            let center = turf.center(feature.geometry);
             this.renderPolygon(feature);
           }
         });
       });
     },
+    // 可视化单一的镇域面
+    getSingleJsonData(name) {},
+    // 默认获取浦东新区全区的图层数据
     getJSonData() {
       if (!map2DViewer.map) {
         this.mapInit();
       } else if (
         // 切换到首页和疑点筛查页且图层不存在时重新渲染区域图
         (this.$ifMenu("1", "") || this.$ifMenu("2", "")) &&
-        !map2DViewer.map.hasLayer(map2DViewer.groups["district_polygon"])
+        !map2DViewer.map.hasLayer(map2DViewer.groups["浦东新区_polygon"])
       ) {
         this.getJSonDataToStreet("", "");
       } else if (
         !(this.$ifMenu("1", "") || this.$ifMenu("2", "")) &&
-        map2DViewer.map.hasLayer(map2DViewer.groups["district_polygon"])
+        map2DViewer.map.hasLayer(map2DViewer.groups["浦东新区_polygon"])
       ) {
         // 当前页不是首页和疑点筛查页时移除区域图且图层存在时
-        map2DViewer.groups["district_label"].remove();
-        map2DViewer.groups["district_polygon"].remove();
+        map2DViewer.groups["浦东新区_label"].remove();
+        map2DViewer.groups["浦东新区_polygon"].remove();
       }
     },
     setView: function (coord, zoom) {
@@ -375,18 +378,24 @@ export default {
     },
     renderPolygon: function (feature) {
       let center = turf.center(feature.geometry);
-      let itemvalue = JSON.parse((Math.random() * 1000).toFixed(0));
+      // let itemvalue = JSON.parse((Math.random() * 1000).toFixed(0));
+      let name = feature.properties.NAME;
+
       let polygonData = JSON.parse(JSON.stringify(feature));
       let coordinates = polygonData.geometry.coordinates[0];
+      // 几何体
       let polygon = L.polygon(this.latLngsToReverse(coordinates), {
         color: "#87d8fd",
         weight: 3,
-        fillColor: this.getColor(itemvalue),
+        fillColor: this.getColor(name),
         opacity: 1,
         fillOpacity: 0.4,
-      }).addTo(map2DViewer.groups["district_polygon"]);
+      }).addTo(map2DViewer.groups["浦东新区_polygon"]);
+
       center = JSON.parse(JSON.stringify(center)).geometry.coordinates;
       center.reverse();
+      // 坐标
+      streetLocationMap.set(name, center);
       let wmarker = L.circleMarker(center, {
         radius: 10,
         weight: 1,
@@ -398,19 +407,19 @@ export default {
         clickable: true,
         offset: [-25, 10],
       });
-      wmarker.addTo(map2DViewer.groups["district_label"]);
-      L.circleMarker(center, {
+      wmarker.addTo(map2DViewer.groups["浦东新区_label"]);
+      let circle1 = L.circleMarker(center, {
         radius: 8,
         weight: 1,
         fillOpacity: 0,
         color: "#e6d273",
-      }).addTo(map2DViewer.groups["district_polygon"]);
-      L.circleMarker(center, {
+      }).addTo(map2DViewer.groups["浦东新区_polygon"]);
+      let circle2 = L.circleMarker(center, {
         radius: 5,
         weight: 1,
         fillOpacity: 1,
         color: "#e6d273",
-      }).addTo(map2DViewer.groups["district_polygon"]);
+      }).addTo(map2DViewer.groups["浦东新区_polygon"]);
     },
     latLngsToReverse: function (latlngsAry) {
       var tempLatlngsAry = JSON.parse(JSON.stringify(latlngsAry));
@@ -423,13 +432,12 @@ export default {
       }
       return tempLatlngsAry;
     },
-    getColor: function (val) {
-      var that = this;
-      if (val < 350) {
+    getColor(name) {
+      if (townData.A.indexOf(name) > -1) {
         return "#e565ff";
-      } else if (val < 700 && val >= 350) {
+      } else if (townData.B.indexOf(name) > -1) {
         return "#0055ff";
-      } else {
+      } else if (townData.C.indexOf(name) > -1) {
         return "#00ffd5";
       }
     },

src/components/popup/LawDetailsPopup.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="law-details" v-if="lawDetailsPopupShow">
+    <div class="law-details-closebtn" @click="detailsCloseEvent"></div>
+    <div class="law-details-inner">
+      <div class="law-inner-title">
+        <div>{{ title }}</div>
+        <div>{{ time }}</div>
+      </div>
+      <div class="law-inner-content">
+        <FilePreView ref="filePreview" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import FilePreView from "@/components/common/FilePreView.vue";
+/**
+ * XXXX 疑点相关的法律法规详细内容
+ * @author: Gao Lu
+ * @Date: 2022.11.25
+ */
+export default {
+  name: "LawDetailsPopup",
+  components: { FilePreView },
+  data() {
+    return {
+      lawDetailsPopupShow: false,
+      title: "",
+      time: "",
+      address: "",
+      fileView:false
+    };
+  },
+  created() {},
+
+  mounted() {
+    if (this.address != "") {
+      this.$refs.filePreview.showView(this.address);
+    }
+  },
+  beforeDestroy(){
+    
+  },
+  methods: {
+    // 法律法规详细信息弹窗关闭
+    detailsCloseEvent() {
+      this.lawDetailsPopupShow = false;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.law-details {
+  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%;
+    .law-inner-title {
+      width: 100%;
+      height: 20%;
+      & > div {
+        width: 80%;
+        height: 40%;
+        margin: 0 auto;
+        text-align: center;
+        color: #fff;
+      }
+      & > div:nth-child(1) {
+        font-size: 20px;
+        font-weight: 500;
+      }
+      & > div:nth-child(2) {
+        color: rgb(192, 196, 204, 0.8);
+      }
+    }
+    .law-inner-content {
+      width: 100%;
+      height: 80%;
+      overflow: auto;
+      color: rgb(192, 196, 204, 0.8);
+      //   background: red;
+    }
+  }
+}
+</style>

src/components/popup/LawPopup.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="law-related" v-if="lawPopupShow" v-drag>
-    <div class="law-details-popup" v-if="lawDetailsPopupShow">
+    <LawDetailsPopup ref="lawDetailsRef" class="law-details-popup" />
+    <!-- <div class="law-details-popup" v-if="lawDetailsPopupShow">
       <div class="law-details-popup-closebtn" @click="detailsCloseEvent"></div>
       <div class="law-details-popup-inner">
         <div class="law-inner-title">
@@ -59,7 +60,7 @@
           区审计局在实施区级政府投资项目审计时，可以对被审计单位委托中介机构出具的审价、审计报告进行核查。发现违反合同约定、违反招投标文件等确定的结算原则、审核质量低劣、结算价格误差较大、重大事项未予以披露等问题的，应书面反馈核查结果，并可以按相关规定在向社会公布的审计结果中，一并公布对社会中介机构相关报告核查的结果。
         </div>
       </div>
-    </div>
+    </div> -->
     <div class="title">
       <div class="title-text">XXXX疑点相关的法律法规</div>
       <div class="title-close-btn" @click="closeEvent"></div>
@@ -97,6 +98,8 @@
 <script>
 import NewSelect from "@/components/common/NewSelect.vue";
 import Pagination from "@/components/common/Pagination.vue";
+// 法律法规细节文档弹窗
+import LawDetailsPopup from "@/components/popup/LawDetailsPopup.vue";
 /**
  * XXXX 疑点相关的法律法规
  * @author: Gao Lu
@@ -104,10 +107,10 @@ import Pagination from "@/components/common/Pagination.vue";
  */
 export default {
   name: "LawPopup",
-  components: { NewSelect, Pagination },
+  components: { NewSelect, Pagination, LawDetailsPopup },
   data() {
     return {
-      lawDetailsPopupShow: false,
+      // lawDetailsPopupShow: false,
       sortSelectVal: "土地资源",
       sortOptions: [
         {
@@ -179,15 +182,13 @@ export default {
     closeEvent() {
       this.$store.state.lawPopupShow = false;
     },
-    // 法律法规详细信息弹窗关闭
-    detailsCloseEvent() {
-      this.lawDetailsPopupShow = false;
-    },
     // 选中当前行
     handleRowChange(val) {
       console.log(val, "currentRow");
       this.currentRow = val;
-      this.lawDetailsPopupShow = true;
+      this.$refs.lawDetailsRef.title = val.name;
+      this.$refs.lawDetailsRef.time = val.date;
+      this.$refs.lawDetailsRef.lawDetailsPopupShow = true;
     },
   },
 };
@@ -205,49 +206,53 @@ export default {
     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%;
-      .law-inner-title {
-        width: 100%;
-        height: 20%;
-        & > div {
-          width: 80%;
-          height: 40%;
-          margin: 0 auto;
-          text-align: center;
-          color: #fff;
-        }
-        & > div:nth-child(1) {
-          font-size: 20px;
-          font-weight: 500;
-        }
-        & > div:nth-child(2) {
-          color: rgb(192, 196, 204, 0.8);
-        }
-      }
-      .law-inner-content {
-        width: 100%;
-        height: 80%;
-        overflow: auto;
-        color: rgb(192, 196, 204, 0.8);
-      }
-    }
   }
+  // .law-details-popup {
+  //   position: absolute;
+
+  //   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%;
+  //     .law-inner-title {
+  //       width: 100%;
+  //       height: 20%;
+  //       & > div {
+  //         width: 80%;
+  //         height: 40%;
+  //         margin: 0 auto;
+  //         text-align: center;
+  //         color: #fff;
+  //       }
+  //       & > div:nth-child(1) {
+  //         font-size: 20px;
+  //         font-weight: 500;
+  //       }
+  //       & > div:nth-child(2) {
+  //         color: rgb(192, 196, 204, 0.8);
+  //       }
+  //     }
+  //     .law-inner-content {
+  //       width: 100%;
+  //       height: 80%;
+  //       overflow: auto;
+  //       color: rgb(192, 196, 204, 0.8);
+  //     }
+  //   }
+  // }
   .title {
     margin: 0 auto;
     width: 99%;

src/config/common.js

@@ -4,19 +4,30 @@ import publicFun from "@/utils/publicFunction.js";
  * 街道
  */
 export const street = {
-  全部街道: "全部街道",
-  潍坊新村街道: "潍坊新村街道",
-  陆家嘴街道: "陆家嘴街道",
-  周家渡街道: "周家渡街道",
-  塘桥街道: "塘桥街道",
-  上钢新村街道: "上钢新村街道",
-  南码头路街道: "南码头路街道",
-  沪东新村街道: "沪东新村街道",
-  金杨新村街道: "金杨新村街道",
-  洋泾街道: "洋泾街道",
-  浦兴路街道: "浦兴路街道",
-  东明路街道: "东明路街道",
-  花木街道: "花木街道",
+  浦东新区:"浦东新区",
+  祝桥镇: "祝桥镇",
+  大团镇: "大团镇",
+  老港镇: "老港镇",
+  泥城镇: "泥城镇",
+  书院镇: "书院镇",
+  新场镇: "新场镇",
+  川沙新镇: "川沙新镇",
+  万祥镇: "万祥镇",
+  南汇新城镇: "南汇新城镇",
+  曹路镇: "曹路镇",
+  宣桥镇: "宣桥镇",
+  合庆镇: "合庆镇",
+  惠南镇: "惠南镇",
+  周浦镇: "周浦镇",
+  张江镇: "张江镇",
+  高东镇: "高东镇",
+  康桥镇: "康桥镇",
+  三林镇: "三林镇",
+  唐镇: "唐镇",
+  高桥镇: "高桥镇",
+  北蔡镇: "北蔡镇",
+  金桥镇: "金桥镇",
+  高行镇: "高行镇",
 };
 
 /**
@@ -38,6 +49,33 @@ export const streetLocation = {
   花木街道: [31.209453, 121.555531],
 };
 
+/**
+ * A,B,C类 对应的镇 -- 按镇耕、林地面积总和排序；
+ *
+ * 首页地图分类标准；
+ */
+export const townData = {
+  A: ["南汇新城镇", "祝桥镇", "川沙新镇"],
+  B: [
+    "老港镇",
+    "新场镇",
+    "航头镇",
+    "惠南镇",
+    "泥城镇",
+    "大团镇",
+    "宣桥镇",
+    "曹路镇",
+    "张江镇",
+    "合庆镇",
+    "万祥镇",
+    "周浦镇",
+    "高桥镇",
+    "康桥镇",
+  ],
+
+  C: ["高东镇", "唐镇", "三林镇", "北蔡镇", "高行镇", "金桥镇"],
+};
+
 /**
  * 土壤资源
  */
@@ -108,6 +146,9 @@ export const soilData = {
     C: 182,
   },
 };
+// export const soilData = {
+
+// }
 
 /**
  * 水资源

src/views/ComprehensiveAnalysis.vue

@@ -5,6 +5,15 @@
       <div class="left-arrow"></div>
       <div class="title">返回上级</div>
     </div>
+    <div class="comprehensive-analysis-searchbox">
+      <el-input placeholder="请输入地点" v-model="addressInput">
+        <el-button
+          type="primary"
+          slot="append"
+          icon="el-icon-search"
+        ></el-button>
+      </el-input>
+    </div>
     <!-- 属性弹窗 -->
     <AttributePopup
       v-drag
@@ -206,6 +215,7 @@ export default {
   },
   data() {
     return {
+      addressInput: "",
       legendShow: false,
       tableType: "normal",
       tableData: [],
@@ -643,6 +653,19 @@ export default {
     }
   }
 
+  &-searchbox {
+    width: 300px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    left: 21%;
+    top: 5%;
+    pointer-events: auto;
+    
+  }
+
   &-backbtn {
     width: 120px;
     height: 35px;

src/views/HomeView.vue

@@ -13,7 +13,7 @@
           menuIndex: '2',
           subMenuIndex: '5',
           legendIcon: legendIcon,
-          legendTitle: legendTitle
+          legendTitle: legendTitle,
         }"
       />
       <div class="select-title">所属街道</div>
@@ -31,7 +31,7 @@
               type: 'card',
               title: streetSelectVal + '资源问题',
               titleWidth: 40,
-              boxWidth: '780'
+              boxWidth: '780',
             }"
           >
             <template slot="top">
@@ -47,7 +47,7 @@
               type: 'card',
               title: '资金投入TOP10',
               titleWidth: 85,
-              boxWidth: '400'
+              boxWidth: '400',
             }"
             ><template slot="top"><TopCard :dataSize="10" /></template
           ></MenuCard>
@@ -56,7 +56,7 @@
               type: 'card',
               title: '历年频发问题TOP10',
               titleWidth: 85,
-              boxWidth: '400'
+              boxWidth: '400',
             }"
             ><template slot="top"><TopCard :dataSize="10" /></template
           ></MenuCard>
@@ -65,7 +65,10 @@
     </div>
 
     <!-- 综合分析 -->
-    <ComprehensiveAnalysis id="ComprehensiveContainer" v-if="$ifMenu('3', '')" />
+    <ComprehensiveAnalysis
+      id="ComprehensiveContainer"
+      v-if="$ifMenu('3', '')"
+    />
 
     <!-- 法律法规 -->
     <LawView id="LawContainer" v-if="$ifMenu('5', '1')" />
@@ -80,7 +83,8 @@
     </div>
     <!-- 左侧菜单列(较宽，两列) -- 疑点筛查 -->
     <div id="leftMenusW">
-      <MenuCard v-for="item in menus.leftW" :menuData="item" :key="item.title"> </MenuCard>
+      <MenuCard v-for="item in menus.leftW" :menuData="item" :key="item.title">
+      </MenuCard>
     </div>
     <!-- 中部菜单列 -->
     <div id="mainMenus">
@@ -125,7 +129,7 @@
           boxHeight: '180',
           menuIndex: '1',
           legendIcon: legendIcon,
-          legendTitle: legendTitle
+          legendTitle: legendTitle,
         }"
       />
     </div>
@@ -147,7 +151,8 @@
             <TagCard :data="tagCardData3"></TagCard>
           </div>
         </template>
-        <template slot="bottom"> <ChartCard :title="'近三年土地类问题变化'" /> </template
+        <template slot="bottom">
+          <ChartCard :title="'近三年土地类问题变化'" /> </template
       ></MenuCard>
       <MenuCard :menuData="menus.right[4]">
         <template slot="top">
@@ -171,7 +176,13 @@ import Header from "@/components/layout/Header.vue";
 import MenuCard from "@/components/layout/MenuCard";
 import NewSelect from "@/components/common/NewSelect.vue";
 import BarChart from "@/components/chart/BarChart.vue";
-import { street, streetLocation, soilData, waterData, forestryData } from "@/config/common";
+import {
+  street,
+  streetLocation,
+  soilData,
+  waterData,
+  forestryData,
+} from "@/config/common";
 import publicFun from "@/utils/publicFunction.js";
 import TagCard from "@/components/common/TagCard";
 import ChartCard from "@/components/common/ChartCard.vue";
@@ -188,6 +199,7 @@ import WholeProcessManagement from "@/components/common/WholeProcessManagement.v
 import FrequencyView from "@/views/FrequencyView.vue";
 // 智能辅助 -- 法律法规
 import LawView from "@/views/LawView.vue";
+
 export default {
   name: "HomeView",
   components: {
@@ -205,7 +217,7 @@ export default {
     Legend,
     WholeProcessManagement,
     FrequencyView,
-    LawView
+    LawView,
   },
   data() {
     return {
@@ -213,19 +225,19 @@ export default {
         type: "tb",
         title: "土地资源",
         value: 100,
-        unit: "公顷"
+        unit: "公顷",
       },
       tagCardData2: {
         type: "tb",
         title: "土地资源面积",
         value: 172,
-        unit: "公顷"
+        unit: "公顷",
       },
       tagCardData3: {
         type: "lr",
         title: "林地面积",
         value: 654,
-        unit: "公顷"
+        unit: "公顷",
       },
       testTitle: "土地资源",
       activeIndex: 1,
@@ -246,37 +258,37 @@ export default {
                   title: "基本农田面积",
                   value: 150,
                   categoryData: ["2019", "2020", "2021"],
-                  valueData: [100, 120, 150]
+                  valueData: [100, 120, 150],
                 },
                 {
                   title: "储备土地面积",
                   value: 250,
                   categoryData: ["2019", "2020", "2021"],
-                  valueData: [2000, 220, 250]
+                  valueData: [2000, 220, 250],
                 },
                 {
                   title: "减量化面积",
                   value: 350,
                   categoryData: ["2019", "2020", "2021"],
-                  valueData: [300, 20, 350]
+                  valueData: [300, 20, 350],
                 },
                 {
                   title: "一般耕地面积",
                   value: 450,
                   categoryData: ["2019", "2020", "2021"],
-                  valueData: [40, 420, 450]
+                  valueData: [40, 420, 450],
                 },
                 {
                   type: "tb",
                   title: "土地资源面积",
                   value: 172,
-                  unit: "公顷"
-                }
-              ]
+                  unit: "公顷",
+                },
+              ],
             },
             bottomSolt: {
-              commonName: "ChartCard"
-            }
+              commonName: "ChartCard",
+            },
           },
           {
             type: "card",
@@ -294,7 +306,7 @@ export default {
                   value: 654,
                   unit: "条",
                   categoryData: ["2019", "2020", "2021"],
-                  valueData: [40, 420, 654]
+                  valueData: [40, 420, 654],
                 },
                 {
                   type: "tb",
@@ -302,7 +314,7 @@ export default {
                   value: 654,
                   unit: "条",
                   categoryData: ["2019", "2020", "2021"],
-                  valueData: [400, 420, 654]
+                  valueData: [400, 420, 654],
                 },
                 {
                   type: "tb",
@@ -310,13 +322,13 @@ export default {
                   value: 654,
                   unit: "条",
                   categoryData: ["2019", "2020", "2021"],
-                  valueData: [400, 40, 654]
-                }
-              ]
+                  valueData: [400, 40, 654],
+                },
+              ],
             },
             bottomSolt: {
-              commonName: "ChartCard"
-            }
+              commonName: "ChartCard",
+            },
           },
           {
             type: "card",
@@ -334,7 +346,7 @@ export default {
                   value: 654,
                   unit: "公顷",
                   categoryData: ["2019", "2020", "2021"],
-                  valueData: [40, 420, 654]
+                  valueData: [40, 420, 654],
                 },
                 {
                   type: "lr",
@@ -342,14 +354,14 @@ export default {
                   value: 654,
                   unit: "公顷",
                   categoryData: ["2019", "2020", "2021"],
-                  valueData: [400, 420, 654]
-                }
-              ]
+                  valueData: [400, 420, 654],
+                },
+              ],
             },
             bottomSolt: {
-              commonName: "ChartCard"
-            }
-          }
+              commonName: "ChartCard",
+            },
+          },
         ],
         leftW: [
           {
@@ -362,7 +374,7 @@ export default {
             menuIndex: "2",
             subMenuIndex: "1",
             position: "left",
-            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" }
+            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
           },
           {
             type: "imageMenu",
@@ -374,7 +386,7 @@ export default {
             menuIndex: "2",
             subMenuIndex: "1",
             position: "left",
-            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" }
+            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
           },
           {
             type: "imageMenu",
@@ -386,7 +398,7 @@ export default {
             menuIndex: "2",
             subMenuIndex: "1",
             position: "left",
-            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" }
+            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
           },
           {
             type: "imageMenu",
@@ -398,8 +410,8 @@ export default {
             menuIndex: "2",
             subMenuIndex: "1",
             position: "left",
-            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" }
-          }
+            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
+          },
         ],
         main: [
           {
@@ -410,8 +422,8 @@ export default {
             boxBackground: "rgba(0,39,77,0.6)",
             menuIndex: "1",
             position: "top",
-            minDomWidth: 1500
-          }
+            minDomWidth: 1500,
+          },
         ],
         right: [
           {
@@ -430,13 +442,13 @@ export default {
                   value: 72,
                   unit: "万元",
                   categoryData: ["2019", "2020", "2021"],
-                  valueData: [100, 120, 72]
-                }
-              ]
+                  valueData: [100, 120, 72],
+                },
+              ],
             },
             bottomSolt: {
-              commonName: "ChartCard"
-            }
+              commonName: "ChartCard",
+            },
           },
           {
             type: "card",
@@ -454,7 +466,7 @@ export default {
                   value: 172,
                   unit: "个",
                   categoryData: ["2019", "2020", "2021"],
-                  valueData: [40, 420, 172]
+                  valueData: [40, 420, 172],
                 },
                 {
                   type: "tb",
@@ -462,7 +474,7 @@ export default {
                   value: 156,
                   unit: "个",
                   categoryData: ["2019", "2020", "2021"],
-                  valueData: [400, 420, 156]
+                  valueData: [400, 420, 156],
                 },
                 {
                   type: "tb",
@@ -470,13 +482,13 @@ export default {
                   value: 188,
                   unit: "个",
                   categoryData: ["2019", "2020", "2021"],
-                  valueData: [100, 40, 188]
-                }
-              ]
+                  valueData: [100, 40, 188],
+                },
+              ],
             },
             bottomSolt: {
-              commonName: "ChartCard"
-            }
+              commonName: "ChartCard",
+            },
           },
           {
             type: "card",
@@ -485,7 +497,7 @@ export default {
             menuIndex: "1",
             position: "right",
             minDomWidth: 1000,
-            gotoPageInfo: { index: "5", subIndex: "2", name: "频发问题" }
+            gotoPageInfo: { index: "5", subIndex: "2", name: "频发问题" },
           },
           {
             type: "card",
@@ -504,13 +516,13 @@ export default {
                   value: 72,
                   unit: "个",
                   categoryData: ["2019", "2020", "2021"],
-                  valueData: [100, 120, 72]
-                }
-              ]
+                  valueData: [100, 120, 72],
+                },
+              ],
             },
             bottomSolt: {
-              commonName: "ChartCard"
-            }
+              commonName: "ChartCard",
+            },
           },
           {
             type: "card",
@@ -519,73 +531,73 @@ export default {
             menuIndex: "2",
             subMenuIndex: "1",
             position: "right",
-            minDomWidth: 1200
-          }
-        ]
+            minDomWidth: 1200,
+          },
+        ],
       },
       // 首页饼图相关
       buttonData: ["A", "B", "C"],
       legendTitle: [
         {
           name: "A类",
-          info: "耕地林地总和占镇域面积约 45%以上,或超过3000公顷"
+          info: "耕地林地总和占镇域面积约 45%以上,或超过3000公顷",
         },
         {
           name: "B类",
-          info: "有一定的自然资源资产(耕地林地总和 900-3000公项)"
+          info: "有一定的自然资源资产(耕地林地总和 900-3000公项)",
         },
         {
           name: "C类",
-          info: "自然资源资产较少(耕地林地总和低于 900公项)"
-        }
+          info: "自然资源资产较少(耕地林地总和低于 900公项)",
+        },
       ],
       // legendData: ["#E565FF", "#0055FF", "#00FFD5"],
       legendIcon: [
         {
           background: "#E565FF",
-          border: "none"
+          border: "none",
         },
         {
           background: "#0055FF",
-          border: "none"
+          border: "none",
         },
         {
           background: "#00FFD5",
-          border: "none"
-        }
+          border: "none",
+        },
       ],
       btnChecked: "A",
       AData: {
         soil: [],
         water: [],
         forestry: [],
-        categoryData: []
+        categoryData: [],
       },
       BData: {
         soil: [],
         water: [],
         forestry: [],
-        categoryData: []
+        categoryData: [],
       },
       CData: {
         soil: [],
         water: [],
         forestry: [],
-        categoryData: []
+        categoryData: [],
       },
-      streetSelectVal: "全部街道",
+      streetSelectVal: "浦东新区",
       streetOptions: [],
       // 街镇专题
       townCollection: [
         { name: "土地资源问题", num: 67 },
         { name: "水资源问题", num: 37 },
         { name: "林地资源问题", num: 60 },
-        { name: "生态资源问题", num: 55 }
+        { name: "生态资源问题", num: 55 },
       ],
       // 综合分析
       analysis: {
-        searchInput: ""
-      }
+        searchInput: "",
+      },
     };
   },
   methods: {
@@ -618,16 +630,16 @@ export default {
     // home页面下拉框
     homeSelect(val) {
       console.log(val, "current street");
-      this.$refs.mapLoaderRef.setView(streetLocation[val], 11);
+      this.$refs.mapLoaderRef.setView(streetLocationMap.get(val), 11);
     },
     // 镇域专题下拉框
     specialTownSelect(val) {
-      this.$refs.mapLoaderRef.setView(streetLocation[val], 11);
-    }
+      this.$refs.mapLoaderRef.setView(streetLocationMap.get(val), 11);
+    },
   },
   created() {
     // 目录
-    let category = Object.keys(street);
+    let category = Object.keys(streetLocation);
     // 默认A类
     this.soil = [];
     this.water = [];
@@ -638,10 +650,19 @@ export default {
     let CDataArr = [];
     // 街道排序
     for (let i in category) {
-      let ADataSum = soilData[category[i]].A + waterData[category[i]].A + forestryData[category[i]].A;
-      let BDataSum = soilData[category[i]].B + waterData[category[i]].B + forestryData[category[i]].B;
+      let ADataSum =
+        soilData[category[i]].A +
+        waterData[category[i]].A +
+        forestryData[category[i]].A;
+      let BDataSum =
+        soilData[category[i]].B +
+        waterData[category[i]].B +
+        forestryData[category[i]].B;
 
-      let CDataSum = soilData[category[i]].C + waterData[category[i]].C + forestryData[category[i]].C;
+      let CDataSum =
+        soilData[category[i]].C +
+        waterData[category[i]].C +
+        forestryData[category[i]].C;
       ADataArr.push({ name: category[i], sum: ADataSum });
       BDataArr.push({ name: category[i], sum: BDataSum });
       CDataArr.push({ name: category[i], sum: CDataSum });
@@ -652,21 +673,21 @@ export default {
     CDataArr.sort(publicFun.compare("sum"));
 
     // 按A,B,C分出各自资源的排序数组
-    ADataArr.forEach(item => {
+    ADataArr.forEach((item) => {
       this.AData.soil.push(soilData[item.name].A);
       this.AData.water.push(waterData[item.name].A);
       this.AData.forestry.push(forestryData[item.name].A);
       this.AData.categoryData.push(item.name);
     });
 
-    BDataArr.forEach(item => {
+    BDataArr.forEach((item) => {
       this.BData.soil.push(soilData[item.name].B);
       this.BData.water.push(waterData[item.name].B);
       this.BData.forestry.push(forestryData[item.name].B);
       this.BData.categoryData.push(item.name);
     });
 
-    CDataArr.forEach(item => {
+    CDataArr.forEach((item) => {
       this.CData.soil.push(soilData[item.name].C);
       this.CData.water.push(waterData[item.name].C);
       this.CData.forestry.push(forestryData[item.name].C);
@@ -682,10 +703,10 @@ export default {
     for (let key in street) {
       this.streetOptions.push({
         value: street[key],
-        label: street[key]
+        label: street[key],
       });
     }
-  }
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -794,6 +815,16 @@ export default {
   background: rgba(0, 0, 0, 0.9);
 }
 
+/* 法律法规详细细节弹窗 */
+// #LawDetailsContainer {
+//   position: absolute;
+//   height: calc(90% - 60px);
+//   width: 50%;
+//   top: 80px;
+//   z-index: 999;
+//   left: 25%;
+// }
+
 /* 频发问题 */
 #FrequencyContainer {
   position: relative;
@@ -953,14 +984,22 @@ export default {
     transform: translate(-50%, -50%) rotate(45deg);
     width: 110px;
     height: 100px;
-    background: linear-gradient(to left, @commonBorderColor, @commonBorderColor) left top no-repeat,
-      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left top no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right top no-repeat,
-      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) right top no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) left bottom no-repeat,
-      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left bottom no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right bottom no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right bottom no-repeat;
+    background: linear-gradient(to left, @commonBorderColor, @commonBorderColor)
+        left top no-repeat,
+      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left
+        top no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right top
+        no-repeat,
+      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) right
+        top no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) left
+        bottom no-repeat,
+      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left
+        bottom no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right
+        bottom no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right
+        bottom no-repeat;
     background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px;
   }
 }

src/views/LawView.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="law-container">
     <div class="law-container-inner">
+      <LawDetailsPopup ref="lawRef" class="law-container-inner-details" />
       <div class="header">
         <div class="header-title">法律法规</div>
         <div class="header-select">
@@ -47,14 +48,15 @@
           style="width: 100%"
           @current-change="handleClick"
         >
-          <el-table-column type="index" width="70"> </el-table-column>
-          <el-table-column prop="code" label="编号" align="center" width="150">
+          <el-table-column type="index" width="70" label="序号">
           </el-table-column>
-          <el-table-column prop="folder" label="文件名称" align="center">
+          <el-table-column prop="date" label="日期" align="center">
+          </el-table-column>
+          <el-table-column prop="title" label="标题" align="center" width="150">
           </el-table-column>
           <el-table-column prop="type" label="分类" align="center">
           </el-table-column>
-          <el-table-column prop="date" label="日期" align="center">
+          <el-table-column prop="class" label="等级" align="center">
           </el-table-column>
         </el-table>
       </div>
@@ -67,6 +69,8 @@
 <script>
 import NewSelect from "@/components/common/NewSelect.vue";
 import Pagination from "@/components/common/Pagination.vue";
+// 法律法规细节文档弹窗
+import LawDetailsPopup from "@/components/popup/LawDetailsPopup.vue";
 /**
  * 法律法规 页面 -- 智能辅助，疑点相关的法律法规
  * @author: Gao Lu
@@ -74,7 +78,7 @@ import Pagination from "@/components/common/Pagination.vue";
  */
 export default {
   name: "LawView",
-  components: { NewSelect, Pagination },
+  components: { NewSelect, Pagination, LawDetailsPopup },
   data() {
     return {
       searchInput: "",
@@ -84,50 +88,51 @@ export default {
       typeOptions: [],
       timeSelectVal: "",
       timeOptions: [],
-      tableData: [
-        {
-          code: "PDSJJ2011223",
-          folder: "浦东新区区级政府投资项目审计监督办法",
-          type: "土地资源",
-          date: "2018.12.12",
-        },
-        {
-          code: "PDSJJ2011223",
-          folder: "浦东新区区级政府投资项目审计监督办法",
-          type: "土地资源",
-          date: "2018.12.12",
-        },
-        {
-          code: "PDSJJ2011223",
-          folder: "浦东新区区级政府投资项目审计监督办法",
-          type: "土地资源",
-          date: "2018.12.12",
-        },
-        {
-          code: "PDSJJ2011223",
-          folder: "浦东新区区级政府投资项目审计监督办法",
-          type: "土地资源",
-          date: "2018.12.12",
-        },
-        {
-          code: "PDSJJ2011223",
-          folder: "浦东新区区级政府投资项目审计监督办法",
-          type: "土地资源",
-          date: "2018.12.12",
-        },
-        {
-          code: "PDSJJ2011223",
-          folder: "浦东新区区级政府投资项目审计监督办法",
-          type: "土地资源",
-          date: "2018.12.12",
-        },
-        {
-          code: "PDSJJ2011223",
-          folder: "浦东新区区级政府投资项目审计监督办法",
-          type: "土地资源",
-          date: "2018.12.12",
-        },
-      ],
+      tableData:[],
+      // tableData: [
+      //   {
+      //     code: "PDSJJ2011223",
+      //     folder: "浦东新区区级政府投资项目审计监督办法",
+      //     type: "土地资源",
+      //     date: "2018.12.12",
+      //   },
+      //   {
+      //     code: "PDSJJ2011223",
+      //     folder: "浦东新区区级政府投资项目审计监督办法",
+      //     type: "土地资源",
+      //     date: "2018.12.12",
+      //   },
+      //   {
+      //     code: "PDSJJ2011223",
+      //     folder: "浦东新区区级政府投资项目审计监督办法",
+      //     type: "土地资源",
+      //     date: "2018.12.12",
+      //   },
+      //   {
+      //     code: "PDSJJ2011223",
+      //     folder: "浦东新区区级政府投资项目审计监督办法",
+      //     type: "土地资源",
+      //     date: "2018.12.12",
+      //   },
+      //   {
+      //     code: "PDSJJ2011223",
+      //     folder: "浦东新区区级政府投资项目审计监督办法",
+      //     type: "土地资源",
+      //     date: "2018.12.12",
+      //   },
+      //   {
+      //     code: "PDSJJ2011223",
+      //     folder: "浦东新区区级政府投资项目审计监督办法",
+      //     type: "土地资源",
+      //     date: "2018.12.12",
+      //   },
+      //   {
+      //     code: "PDSJJ2011223",
+      //     folder: "浦东新区区级政府投资项目审计监督办法",
+      //     type: "土地资源",
+      //     date: "2018.12.12",
+      //   },
+      // ],
       paginationData: {
         pageSize: 0,
         pagerCount: 5,
@@ -144,9 +149,7 @@ export default {
     };
   },
   created() {
-    this.getTableData(1)
-
-    
+    this.getTableData(1);
   },
   methods: {
     queryEvent() {
@@ -160,13 +163,14 @@ export default {
       console.log(`当前页: ${val}`);
 
       let params = new FormData();
-      let columnId = 56;
-      let search = [
-        { field: "title", searchType: 2, content: { value: "1234" } },
-      ];
+      // 新法律法规
+      // let search = [
+      //   { field: "title", searchType: 2, content: { value: "1234" } },
+      // ];
       params = {
-        columnId: columnId,
-        search: search,
+        columnId: 58,
+        states: 3,
+        pageSize: 10,
       };
 
       this.$Post(this.urlsCollection.selectContentListInfo, params).then(
@@ -174,6 +178,9 @@ export default {
           if (res.code === 200) {
             console.log(res.content, "查询到的法律法规相关的数据");
             this.paginationData.currentPage = val;
+            this.tableData = res.content.map((v)=>{
+              
+            })
           }
         },
         (error) => {
@@ -186,7 +193,9 @@ export default {
       console.log(`每页 ${val} 条`);
     },
     handleClick(row) {
-      alert("正在开发中!");
+      this.$refs.lawRef.title = row.folder;
+      this.$refs.lawRef.time = row.date;
+      this.$refs.lawRef.lawDetailsPopupShow = true;
     },
   },
 };
@@ -196,14 +205,22 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
+
   &-inner {
     width: 98%;
     height: 97%;
     background: rgba(0, 39, 77, 0.5);
+    position: relative;
+    &-details {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      z-index: 9;
+    }
     .header {
-      height: 13%;
+      height: 120px;
       width: 100%;
-      position: relative;
+      position: absolute;
       &-title {
         width: 84px;
         height: 20px;
@@ -276,8 +293,11 @@ export default {
       }
     }
     .center {
-      height: 77%;
+      height: calc(90% - 120px);
       width: 100%;
+      position: absolute;
+      top: 130px;
+      // background: red;
       /deep/.el-table {
         background: rgba(0, 39, 77, 0.6);
         // font-size: 0.95rem;
@@ -292,6 +312,7 @@ export default {
     .footer {
       position: absolute;
       right: 50px;
+      bottom: 30px;
     }
   }
 }