法律法规以及频发问题

src/components/map/MapHolder.vue

@@ -1,9 +1,5 @@
 <template>
   <div id="map2DViewer">
-    <!-- <LabelCasePopup
-      v-show="true"
-      style="position: fixed; left: 40%; top: 30%; z-index: 99999"
-    /> -->
     <CaseAuditPopup v-show="auditPopupShow" ref="auditPopup" />
   </div>
 </template>
@@ -50,7 +46,7 @@ export default {
     this.$store.state.mapMethodsCollection.set("RENDER", {
       addPolygonLayer: this.addPolygonLayer,
       setView: this.setView,
-      deletePolygonLayer: this.deletePolygonLayer
+      deletePolygonLayer: this.deletePolygonLayer,
     });
   },
   beforeDestroyed() {
@@ -76,13 +72,13 @@ export default {
         $(() => {
           // 法律法规点击事件
           if ($(`#${str}_id a`)) {
-            $(`#${str}_id a`).click(e => {
+            $(`#${str}_id a`).click((e) => {
               console.log(e, "a label");
             });
           }
           // input添加点击事件
           if ($(`#${str}_id input`)[1]) {
-            $(`#${str}_id input`).click(e => {
+            $(`#${str}_id input`).click((e) => {
               switch (e.target.defaultValue) {
                 case "修改":
                   this.modifyBtnEvent();
@@ -111,7 +107,9 @@ export default {
         map2DViewer.jlMap = L.tileLayer(
           "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d"
         ).addTo(map2DViewer.map);
-        map2DViewer.jlControl = L.control.sideBySide(map2DViewer.map, map2DViewer.jlMap).addTo(map2DViewer.map);
+        map2DViewer.jlControl = L.control
+          .sideBySide(map2DViewer.map, map2DViewer.jlMap)
+          .addTo(map2DViewer.map);
       } else {
         map2DViewer.map.removeControl(map2DViewer.jlControl);
         map2DViewer.map.removeLayer(map2DViewer.jlMap);
@@ -142,7 +140,7 @@ export default {
         attributionControl: false,
         zoomControl: false,
         minZoom: 10,
-        maxZoom: 16
+        maxZoom: 16,
       }).setView(systemConfig.mapViewer.center, systemConfig.mapViewer.zoom);
 
       //添加默认图层
@@ -151,7 +149,9 @@ export default {
         .tiledMapLayer({
           url:
             // "http://aimap.pudong.sh:5236/maps/rest/services/basemap-shanghai-gem-blue-sh2000/mapserver/"
-            systemConfig.mapService + "?servertype=Street_Purplish_Blue&token=" + systemConfig.token
+            systemConfig.mapService +
+            "?servertype=Street_Purplish_Blue&token=" +
+            systemConfig.token,
         })
         .addTo(map2DViewer.map);
       layer.guid = guid;
@@ -162,9 +162,11 @@ export default {
       if (!map2DViewer.map) {
         this.mapInit();
       } else {
-        get("./static/json/pdgeojson.json", "").then(geoJson => {
-          geoJson.features.map(feature => {
-            if (this.town.indexOf(feature.properties.NAME.replace("镇", "")) > -1) {
+        get("./static/json/pdgeojson.json", "").then((geoJson) => {
+          geoJson.features.map((feature) => {
+            if (
+              this.town.indexOf(feature.properties.NAME.replace("镇", "")) > -1
+            ) {
               let center = turf.center(feature.geometry);
               this.renderPolygon(feature);
             }
@@ -187,7 +189,7 @@ export default {
         weight: 3,
         fillColor: this.getColor(itemvalue),
         opacity: 1,
-        fillOpacity: 0.4
+        fillOpacity: 0.4,
       }).addTo(map2DViewer.map);
       center = JSON.parse(JSON.stringify(center)).geometry.coordinates;
       center.reverse();
@@ -195,25 +197,25 @@ export default {
         radius: 10,
         weight: 1,
         fillOpacity: 0,
-        color: "#e6d273"
+        color: "#e6d273",
       });
       wmarker.bindLabel(feature.properties.NAME, {
         noHide: true,
         clickable: true,
-        offset: [-25, 10]
+        offset: [-25, 10],
       });
       wmarker.addTo(map2DViewer.map);
       L.circleMarker(center, {
         radius: 8,
         weight: 1,
         fillOpacity: 0,
-        color: "#e6d273"
+        color: "#e6d273",
       }).addTo(map2DViewer.map);
       L.circleMarker(center, {
         radius: 5,
         weight: 1,
         fillOpacity: 1,
-        color: "#e6d273"
+        color: "#e6d273",
       }).addTo(map2DViewer.map);
     },
     latLngsToReverse: function (latlngsAry) {
@@ -241,7 +243,7 @@ export default {
     addPolygonLayer(data, cid, color) {
       // cid -- 'yongjiu'
       // console.log(data, cid, color);
-      data.map(feature => {
+      data.map((feature) => {
         let polygonData = JSON.parse(JSON.stringify(feature));
         let coordinates = polygonData.geometry.coordinates[0];
         let infos = polygonData.properties;
@@ -250,7 +252,7 @@ export default {
           weight: 3,
           fillColor: color,
           opacity: 1,
-          fillOpacity: 0.4
+          fillOpacity: 0.4,
         }).addTo(map2DViewer.map);
         map2DViewer.polygons[`${cid}_layer`].push(polygon);
         polygon.infos = infos;
@@ -272,11 +274,11 @@ export default {
 
     //综合分析 - 标记疑点 - 删除面
     deletePolygonLayer(layer) {
-      map2DViewer.polygons[layer].forEach(polygon => {
+      map2DViewer.polygons[layer].forEach((polygon) => {
         map2DViewer.map.removeLayer(polygon);
       });
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped>

src/components/popup/AttributePopup.vue

@@ -74,38 +74,12 @@ export default {
     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(
@@ -126,9 +100,6 @@ export default {
         @borderColor,
         @topTitleMinLeft
       );
-
-      // position: relative;
-      // left: 0;
     }
     th {
       position: relative;
@@ -149,9 +120,6 @@ export default {
       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;

src/views/ComprehensiveAnalysis.vue

@@ -443,11 +443,6 @@ export default {
 .comprehensive-analysis {
   .el-checkbox {
     color: #fff;
-    // .el-checkbox__input.is-checked .el-checkbox__inner,
-    // /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
-    //   border-color: #fff;
-    //   background: #74ffff;
-    // }
     /deep/.el-checkbox__input.is-checked + .el-checkbox__label {
       color: rgba(116, 255, 255, 1);
     }

src/views/FrequencyView.vue

@@ -1,5 +1,70 @@
 <template>
-  <div class="frenquency-container"></div>
+  <div class="frenquency-container">
+    <div class="frenquency-container-inner">
+      <div class="header">
+        <div class="header-title">频发问题</div>
+        <div class="header-select">
+          <div>
+            <div class="text">类型 :</div>
+            <NewSelect
+              class="select-input"
+              v-model="typeSelectVal"
+              :options="typeOptions"
+              :value="typeSelectVal"
+            />
+          </div>
+          <div>
+            <div class="text">被审计街镇 :</div>
+            <NewSelect
+              class="select-input"
+              v-model="streetSelectVal"
+              :options="streetOptions"
+              :value="streetSelectVal"
+            />
+          </div>
+          <div>
+            <div class="text">立项年度 :</div>
+            <NewSelect
+              class="select-input"
+              v-model="timeSelectVal"
+              :options="timeOptions"
+              :value="timeSelectVal"
+            />
+          </div>
+        </div>
+        <div class="reset-btn" @click="resetEvent">重置</div>
+        <div class="query-btn" @click="queryEvent">查询</div>
+      </div>
+      <div class="center">
+        <el-table :data="tableData" style="width: 100%">
+          <el-table-column type="index" width="70"> </el-table-column>
+          <el-table-column
+            prop="createYear"
+            label="立项年度"
+            width="150"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="auditTown"
+            label="被审计镇"
+            align="center"
+            width="180"
+          >
+          </el-table-column>
+          <el-table-column prop="type" label="类别" align="center">
+          </el-table-column>
+          <el-table-column prop="keyPoint" label="重点审计事项" align="center">
+          </el-table-column>
+          <el-table-column prop="problemType" label="问题分类" align="center">
+          </el-table-column>
+          <el-table-column prop="problemNature" label="问题定性" align="center">
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="footer"></div>
+    </div>
+  </div>
 </template>
 <script>
 import NewSelect from "@/components/common/NewSelect.vue";
@@ -13,14 +78,62 @@ export default {
   components: { NewSelect },
   data() {
     return {
-      typeSelectVal: "",
-      typeOptions: [],
-      streetSelectVal: "",
-      streetOptions: [],
-      timeSelectVal: "",
-      timeOptions: [],
+      typeSelectVal: "土地资源",
+      typeOptions: [
+        {
+          value: "土地资源",
+          label: "土地资源",
+        },
+      ],
+      streetSelectVal: "全部街道",
+      streetOptions: [
+        {
+          value: "全部街道",
+          label: "全部街道",
+        },
+      ],
+      timeSelectVal: "2018",
+      timeOptions: [
+        {
+          value: "2018",
+          label: "2018",
+        },
+      ],
       paginationData: {},
-      tableData: [],
+      tableData: [
+        {
+          createYear: "2021",
+          auditTown: "周浦",
+          type: "1土地资源审计",
+          keyPoint: "1-4建设用地减量化实施及腾出土地养护情况",
+          problemType: "贯彻执行国家和本市生态文明建设政策规定和决策部署方面",
+          problemNature: "环保督察问题整改落实不力",
+        },
+        {
+          createYear: "2021",
+          auditTown: "周浦",
+          type: "1土地资源审计",
+          keyPoint: "1-4建设用地减量化实施及腾出土地养护情况",
+          problemType: "贯彻执行国家和本市生态文明建设政策规定和决策部署方面",
+          problemNature: "环保督察问题整改落实不力",
+        },
+        {
+          createYear: "2021",
+          auditTown: "周浦",
+          type: "1土地资源审计",
+          keyPoint: "1-4建设用地减量化实施及腾出土地养护情况",
+          problemType: "贯彻执行国家和本市生态文明建设政策规定和决策部署方面",
+          problemNature: "环保督察问题整改落实不力",
+        },
+        {
+          createYear: "2021",
+          auditTown: "周浦",
+          type: "1土地资源审计",
+          keyPoint: "1-4建设用地减量化实施及腾出土地养护情况",
+          problemType: "贯彻执行国家和本市生态文明建设政策规定和决策部署方面",
+          problemNature: "环保督察问题整改落实不力",
+        },
+      ],
     };
   },
   methods: {
@@ -35,5 +148,101 @@ export default {
 </script>
 <style lang="less" scoped>
 .frenquency-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &-inner {
+    width: 98%;
+    height: 97%;
+    background: rgba(0, 39, 77, 0.5);
+    .header {
+      height: 13%;
+      width: 100%;
+      position: relative;
+      &-title {
+        width: 84px;
+        height: 20px;
+        font-size: 20px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #4dc3ff;
+        line-height: 30px;
+        position: absolute;
+        top: 1px;
+        left: 10px;
+      }
+      &-select {
+        position: absolute;
+        left: 10px;
+        bottom: 5px;
+        width: 900px;
+        height: 40px;
+        color: #e6e6e6;
+        display: flex;
+        justify-content: space-between;
+        & > div {
+          // position: absolute;
+          display: flex;
+          justify-content: space-around;
+          width: 320px;
+          .text {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            width: 100px;
+            height: 28px;
+          }
+          .select-input {
+            width: 170px;
+          }
+        }
+      }
+      .reset-btn,
+      .query-btn {
+        width: 60px;
+        height: 30px;
+        border-radius: 3px;
+        border: none;
+        color: #fff;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        top: 15px;
+      }
+      .reset-btn {
+        right: 110px;
+        background: rgba(129, 140, 164, 1);
+      }
+      .query-btn {
+        right: 30px;
+        background-image: linear-gradient(
+          to top,
+          rgba(79, 172, 254, 1),
+          rgba(0, 242, 254, 1)
+        );
+      }
+    }
+    .center {
+      height: 77%;
+      width: 100%;
+      /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;
+        }
+      }
+    }
+    .footer {
+      height: 10%;
+      width: 100%;
+      background: palevioletred;
+    }
+  }
 }
 </style>

src/views/HomeView.vue

@@ -731,7 +731,7 @@ export default {
   width: 100%;
   top: 60px;
   z-index: 999;
-  background: pink;
+  background: rgba(0,0,0,0.9);
 }
 
 /* 频发问题 */
@@ -741,7 +741,7 @@ export default {
   width: 100%;
   top: 60px;
   z-index: 999;
-  background: lightgreen;
+  background: rgba(0,0,0,0.9);
 }
 
 /* Home目录 -- 左侧菜单列 */

src/views/LawView.vue

@@ -1,5 +1,62 @@
 <template>
-  <div class="law-container"></div>
+  <div class="law-container">
+    <div class="law-container-inner">
+      <div class="header">
+        <div class="header-title">法律法规</div>
+        <div class="header-select">
+          <div>
+            <div class="text">类型 :</div>
+            <NewSelect
+              class="select-input"
+              v-model="typeSelectVal"
+              :options="typeOptions"
+              :value="typeSelectVal"
+            />
+          </div>
+          <div>
+            <div class="text">年份 :</div>
+            <NewSelect
+              class="select-input"
+              v-model="timeSelectVal"
+              :options="timeOptions"
+              :value="timeSelectVal"
+            />
+          </div>
+          <div style="position: relative">
+            <el-button
+              size="big"
+              type="text"
+              icon="el-icon-search"
+              style="
+                position: absolute;
+                bottom: 4px;
+                right: 10px;
+                z-index: 99;
+                color: #fff;
+              "
+            ></el-button>
+            <el-input class="search-input" v-model="searchInput"> </el-input>
+          </div>
+        </div>
+        <div class="reset-btn" @click="resetEvent">重置</div>
+        <div class="query-btn" @click="queryEvent">查询</div>
+      </div>
+      <div class="center">
+        <el-table :data="tableData" style="width: 100%">
+          <el-table-column type="index" width="70"> </el-table-column>
+          <el-table-column prop="code" label="编号" align="center" width="150">
+          </el-table-column>
+          <el-table-column prop="folder" label="文件名称" align="center">
+          </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>
+        </el-table>
+      </div>
+      <div class="footer"></div>
+    </div>
+  </div>
 </template>
 <script>
 import NewSelect from "@/components/common/NewSelect.vue";
@@ -16,12 +73,55 @@ export default {
       searchInput: "",
       sortSelectVal: "",
       sortOptions: [],
-      searchSelectVal: "",
-      searchOptions: [],
+      typeSelectVal: "",
+      typeOptions: [],
       timeSelectVal: "",
       timeOptions: [],
       paginationData: {},
-      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",
+        },
+      ],
     };
   },
   methods: {
@@ -36,5 +136,107 @@ export default {
 </script>
 <style lang="less" scoped>
 .law-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &-inner {
+    width: 98%;
+    height: 97%;
+    background: rgba(0, 39, 77, 0.5);
+    .header {
+      height: 13%;
+      width: 100%;
+      position: relative;
+      &-title {
+        width: 84px;
+        height: 20px;
+        font-size: 20px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #4dc3ff;
+        line-height: 30px;
+        position: absolute;
+        top: 1px;
+        left: 10px;
+      }
+      &-select {
+        position: absolute;
+        left: 10px;
+        bottom: 5px;
+        width: 950px;
+        height: 40px;
+        color: #e6e6e6;
+        display: flex;
+        justify-content: space-between;
+        & > div {
+          // position: absolute;
+          display: flex;
+          justify-content: flex-start;
+          width: 280px;
+          .text {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 80px;
+            height: 28px;
+          }
+          .select-input {
+            width: 170px;
+          }
+          .search-input {
+            position: absolute;
+            // right: -50px;
+            bottom: 5px;
+            width: 280px;
+          }
+        }
+      }
+      .reset-btn,
+      .query-btn {
+        width: 60px;
+        height: 30px;
+        border-radius: 3px;
+        border: none;
+        color: #fff;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        top: 15px;
+      }
+      .reset-btn {
+        right: 110px;
+        background: rgba(129, 140, 164, 1);
+      }
+      .query-btn {
+        right: 30px;
+        background-image: linear-gradient(
+          to top,
+          rgba(79, 172, 254, 1),
+          rgba(0, 242, 254, 1)
+        );
+      }
+    }
+    .center {
+      height: 77%;
+      width: 100%;
+      /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;
+        }
+      }
+    }
+    .footer {
+      height: 10%;
+      width: 100%;
+      background: palevioletred;
+    }
+  }
 }
 </style>