Explorar o código

地图隐藏遮罩

Hwf hai 4 meses
pai
achega
2aef4950c5

+ 1 - 1
src/components/Map/map.scss

@@ -14,7 +14,7 @@ $vh_base: 2520;
   border: vw(7) solid #2a81fc;
   padding: vw(5) vw(32) vw(32);
   width: vw(1569);
-  font-size: vw(38);
+  font-size: vw(44);
   display: flex;
   flex-wrap: wrap;
   background-color: #1c294c;

+ 21 - 21
src/hooks/AMap/useAMap.ts

@@ -282,28 +282,28 @@ export function useAMap(options) {
     } else {
       data = convertCoordinates(data);
       // 遮罩部分
-      const outer = [
-        new AMap.LngLat(-180, 90, true),
-        new AMap.LngLat(-180, -90, true),
-        new AMap.LngLat(180, -90, true),
-        new AMap.LngLat(180, 90, true)
-      ];
-      const pathArray = [outer];
+      // const outer = [
+      //   new AMap.LngLat(-180, 90, true),
+      //   new AMap.LngLat(-180, -90, true),
+      //   new AMap.LngLat(180, -90, true),
+      //   new AMap.LngLat(180, 90, true)
+      // ];
+      // const pathArray = [outer];
       // 合并区边界
-      const data2 = mergeGeoJsonPolygons(data);
-      data2.geometry.coordinates.forEach((coords) => {
-        pathArray.push(coords[0]);
-      });
-      const maskPolygon = new AMap.Polygon({
-        path: pathArray,
-        strokeColor: option.strokeColor ? option.strokeColor : '#268ab9',
-        strokeOpacity: 1,
-        strokeWeight: option.strokeWeight ? option.strokeWeight : 1,
-        fillColor: option.fillColor ? option.fillColor : '#10243b',
-        fillOpacity: option.fillOpacity ? option.fillOpacity : 0.65
-      });
-      maskPolygon2.push(maskPolygon);
-      map.add(maskPolygon);
+      // const data2 = mergeGeoJsonPolygons(data);
+      // data2.geometry.coordinates.forEach((coords) => {
+      //   pathArray.push(coords[0]);
+      // });
+      // const maskPolygon = new AMap.Polygon({
+      //   path: pathArray,
+      //   strokeColor: option.strokeColor ? option.strokeColor : '#268ab9',
+      //   strokeOpacity: 1,
+      //   strokeWeight: option.strokeWeight ? option.strokeWeight : 1,
+      //   fillColor: option.fillColor ? option.fillColor : '#10243b',
+      //   fillOpacity: option.fillOpacity ? option.fillOpacity : 0.65
+      // });
+      // maskPolygon2.push(maskPolygon);
+      // map.add(maskPolygon);
       // 边界部分
       data.features.forEach((feature) => {
         if (feature.geometry.type === 'Polygon') {

+ 33 - 33
src/utils/olMap/olMap.ts

@@ -338,39 +338,39 @@ export class olMap {
         this.map.addLayer(layer);
       });
     } else {
-      const layer = new VectorLayer({
-        source: new VectorSource(),
-        style: new Style({
-          fill: new Fill({
-            color: options.fillColor ? options.fillColor : 'rgba(16, 36, 59, 0.65)'
-          }),
-          stroke: new Stroke({
-            color: options.strokeColor ? options.strokeColor : 'rgba(38, 138, 185, 1)',
-            width: 2
-          })
-        }),
-        zIndex: options.zIndex ? options.zIndex : 99
-      });
-      // 合并区边界
-      const format = new GeoJSON();
-      const data2 = mergeGeoJsonPolygons(json);
-      const fs = format.readFeatures(data2);
-      const extent = [-180, -90, 180, 90];
-      const polygonRing = fromExtent(extent);
-      fs.forEach((x) => {
-        const ft = x.values_.geometry;
-        const coords = ft.getCoordinates();
-        coords.forEach((coord) => {
-          const linearRing = new LinearRing(coord[0]);
-          polygonRing.appendLinearRing(linearRing);
-        });
-      });
-      const convertFt = new Feature({
-        geometry: polygonRing
-      });
-      layer.getSource().addFeature(convertFt);
-      this.maskLayer2.push(layer);
-      this.map.addLayer(layer);
+      // const layer = new VectorLayer({
+      //   source: new VectorSource(),
+      //   style: new Style({
+      //     fill: new Fill({
+      //       color: options.fillColor ? options.fillColor : 'rgba(16, 36, 59, 0.65)'
+      //     }),
+      //     stroke: new Stroke({
+      //       color: options.strokeColor ? options.strokeColor : 'rgba(38, 138, 185, 1)',
+      //       width: 2
+      //     })
+      //   }),
+      //   zIndex: options.zIndex ? options.zIndex : 99
+      // });
+      // // 合并区边界
+      // const format = new GeoJSON();
+      // const data2 = mergeGeoJsonPolygons(json);
+      // const fs = format.readFeatures(data2);
+      // const extent = [-180, -90, 180, 90];
+      // const polygonRing = fromExtent(extent);
+      // fs.forEach((x) => {
+      //   const ft = x.values_.geometry;
+      //   const coords = ft.getCoordinates();
+      //   coords.forEach((coord) => {
+      //     const linearRing = new LinearRing(coord[0]);
+      //     polygonRing.appendLinearRing(linearRing);
+      //   });
+      // });
+      // const convertFt = new Feature({
+      //   geometry: polygonRing
+      // });
+      // layer.getSource().addFeature(convertFt);
+      // this.maskLayer2.push(layer);
+      // this.map.addLayer(layer);
       // 边界部分
       json.features.forEach((feature) => {
         if (feature.geometry.type === 'Polygon') {

+ 75 - 7
src/views/globalMap/RightMenu/Fireproofing.vue

@@ -3,7 +3,7 @@
     <div class="container">
       <div class="gradient-text title">森林防火</div>
       <div class="box-left">
-        <el-input v-model="queryParams.keyword" class="custom-input" placeholder="搜索" @input="initData">
+        <el-input v-model="queryParams.keyword" class="custom-input" placeholder="搜索" @keyup.enter="initData">
           <template #prefix>
             <el-icon class="el-input__icon"><search /></el-icon>
           </template>
@@ -38,6 +38,17 @@
           </div>
         </div>
       </div>
+      <div class="footer">
+        <el-pagination
+          background
+          :hide-on-single-page="true"
+          layout="total, prev, pager, next"
+          :total="total"
+          :page-size="queryParams.size"
+          :current-page="queryParams.current"
+          @current-change="handleChangePage"
+        />
+      </div>
       <Dialog v-if="showDialog" v-model="showDialog" type="md" title="森林防火" hide-footer>
         <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
           <HKVideo :dot_data="videoMonitorData" />
@@ -56,7 +67,7 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { district_type } = toRefs<any>(proxy?.useDict('district_type'));
 const queryParams = reactive({
   current: 1,
-  size: 10,
+  size: 6,
   keyword: '',
   area: ''
 });
@@ -73,6 +84,10 @@ const handleShowDialog = (row) => {
     showDialog.value = true;
   });
 };
+const handleChangePage = (newNum) => {
+  queryParams.current = newNum;
+  initData();
+};
 const initData = () => {
   let newQueryParams = deepClone(queryParams);
   newQueryParams.query = {
@@ -83,6 +98,7 @@ const initData = () => {
   delete newQueryParams.keyword;
   getForest(newQueryParams).then((res) => {
     listData.value = res.rows;
+    queryParams.current += 1;
     total.value = res.total;
   });
 };
@@ -110,21 +126,20 @@ initData();
   left: 160px;
 }
 .custom-table {
-  width: 1499px;
+  width: 100%;
   .table-content {
-    height: 880px;
+    height: 835px;
     overflow-y: auto;
     overflow-x: hidden;
   }
   .th {
-    width: 1499px;
+    width: 100%;
     height: 151px;
     background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
     display: flex;
   }
   .tr {
-
-    height: 139px;
+    min-height: 139px;
     background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
     //margin-left: -23px;
     display: flex;
@@ -177,4 +192,57 @@ initData();
     margin-left: 20px;
   }
 }
+.footer {
+  height: 64px;
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 25px;
+  .pagination-container {
+    height: 64px;
+    margin: 0;
+  }
+  :deep(.el-pagination__total) {
+    color: #a7ccdf;
+    font-size: 32px;
+  }
+  :deep(.el-pagination) {
+    .btn-next,
+    .btn-prev {
+      background-color: transparent;
+      border: none;
+      .el-icon {
+        font-size: 22px;
+        color: #a7ccdf;
+      }
+    }
+    .btn-prev:disabled,
+    .btn-next:disabled {
+      background-color: transparent;
+      border: none;
+    }
+    .el-pager li {
+      width: 64px;
+      height: 64px;
+      line-height: 64px;
+      text-align: center;
+      font-size: 38px;
+      color: #a7ccdf;
+      background-color: #0e3064;
+      border: 1px solid #0c57a7;
+      margin: 0 6px;
+      &:hover {
+        background-color: #038dff;
+        border: 1px solid #038dff;
+      }
+    }
+    .el-pager li.is-active {
+      background-color: #038dff;
+      border: 1px solid #038dff;
+    }
+    .el-pagination__goto {
+      font-size: 38px;
+      color: #a7ccdf;
+    }
+  }
+}
 </style>

+ 1 - 0
src/views/globalMap/data/mapData.ts

@@ -4936,6 +4936,7 @@ export const pointDetailTemplate = {
     jt_cd_operation: '增量标识',
     line_name: '线路名称'
   },
+  '33': {},
   '41': {
     name: '救援队伍名称',
     team_type: '救援队伍类型',