地图边界

src/components/Map/YztMap/index.vue

@@ -8,7 +8,7 @@
 <script setup lang="ts">
 import 'ol/ol.css';
 import ScaleLine from 'ol/control/ScaleLine';
-import mmJson from '@/assets/json/mm.json';
+import mmJson from '@/assets/json/mm2.json';
 import { olMap } from '@/utils/olMap/olMap';
 import { PointType } from '@/api/globalMap/type';
 import QuickZoom from '@/components/Map/quickZoom.vue';

src/components/Map/index.vue

@@ -46,7 +46,7 @@ import { pointDetailTemplate } from '@/views/globalMap/data/mapData';
 import useAppStore from '@/store/modules/app';
 import { getWaterList } from '@/api/globalMap/reservoir';
 import { getRescueTeamsInfo } from '@/api/globalMap/rescueTeam';
-
+import mmJson from '@/assets/json/mm2.json';
 interface Props {
   activeMap: string;
   pointType: PointType[];
@@ -113,6 +113,7 @@ const mapUtils = useAMap({
     map.on('zoomchange', zoomChangeHandler);
     // 添加遮罩
     if (props.showMask) {
+      // creatMask2(mmJson, { strokeWeight: 2 });
       creatMask([{ strokeWeight: 2 }]);
     }
     drawTool.initMouseTool({ container: 'aMap', map, AMap });
@@ -190,6 +191,7 @@ const {
   hideInfo,
   handleHover,
   creatMask,
+  creatMask2,
   removeMask,
   trackPlayback
 } = { ...mapUtils };

src/hooks/AMap/useAMap.ts

@@ -19,7 +19,7 @@ export function useAMap(options) {
       version: !!options.version ? options.version : '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
       plugins: options.plugins
         ? options.plugins
-        : ['AMap.Scale', 'AMap.RangingTool', 'AMap.MouseTool', 'AMap.PolygonEditor', 'AMap.MarkerCluster', 'AMap.DistrictSearch', 'AMap.MoveAnimation', 'AMap.Driving', 'AMap.Geocoder', 'AMap.PlaceSearch']
+        : ['AMap.Scale', 'AMap.RangingTool', 'AMap.MouseTool', 'AMap.PolygonEditor', 'AMap.MarkerCluster', 'AMap.DistrictSearch', 'AMap.MoveAnimation', 'AMap.Driving', 'AMap.Geocoder', 'AMap.PlaceSearch', 'AMap.GeoJSON']
     }).then((res) => {
       AMap = res;
       map = new AMap.Map(options.el ? options.el : 'aMap', {
@@ -82,7 +82,7 @@ export function useAMap(options) {
     }
     addPoints = points;
     const count = points.length;
-    const _renderClusterMarker = function (context) {
+    const _renderClusterMarker = function(context) {
       // 聚合中点个数
       const clusterCount = context.count;
       const div = document.createElement('div');
@@ -103,7 +103,7 @@ export function useAMap(options) {
         map.setZoomAndCenter(map.getZoom() + 1, bounds.getCenter());
       });
     };
-    const _renderMarker = function (context) {
+    const _renderMarker = function(context) {
       const content =
         '<div style="display: flex;flex-direction: column;align-items: center;justify-content: center">' +
         '<div style="background: url(' +
@@ -119,7 +119,7 @@ export function useAMap(options) {
       context.marker.setContent(content);
       context.marker.setOffset(offset);
       context.marker.setExtData(context.data[0]);
-      context.marker.on('click', function (e) {
+      context.marker.on('click', function(e) {
         const extData = e.target.getExtData();
         let index = 0;
         let index2 = 0;
@@ -241,7 +241,7 @@ export function useAMap(options) {
     new AMap.DistrictSearch({
       extensions: 'all',
       subdistrict: 0
-    }).search(name, function (status, result) {
+    }).search(name, function(status, result) {
       // 外多边形坐标数组和内多边形坐标数组
       const outer = [
         new AMap.LngLat(-360, 90, true),
@@ -251,12 +251,6 @@ export function useAMap(options) {
       ];
       options.forEach((option) => {
         const holes = result.districtList[0].boundaries;
-        // if (option.offset) {
-        //
-        //   holes.forEach((items) => {
-        //
-        //   })
-        // }
         let pathArray = [outer];
         pathArray.push.apply(pathArray, holes);
         maskPolygon = new AMap.Polygon({
@@ -278,6 +272,43 @@ export function useAMap(options) {
       maskPolygon = null;
     }
   };
+  const creatMask2 = (data, option) => {
+    // 外多边形坐标数组和内多边形坐标数组
+    const outer = [
+      new AMap.LngLat(-360, 90, true),
+      new AMap.LngLat(-360, -90, true),
+      new AMap.LngLat(360, -90, true),
+      new AMap.LngLat(360, 90, true)
+    ];
+    //outer
+    const pathArray = [outer];
+    data.features.forEach((item, index) => {
+      let arr = [];
+      const geometry = item.geometry;
+      geometry.coordinates.forEach((coordinate) => {
+        if (geometry.type === 'MultiPolygon') {
+          coordinate[0].forEach(coordinate2 => {
+            arr.push(coordinate2);
+          });
+          pathArray.push(arr);
+          arr = [];
+        } else {
+          arr.push(coordinate);
+        }
+      });
+      if (arr.length == 0) return;
+      pathArray.push(arr);
+    });
+    maskPolygon = new AMap.Polygon({
+      path: pathArray,
+      strokeColor: option.strokeColor ? option.strokeColor : '#268ab9',
+      strokeOpacity: option.strokeOpacity ? option.strokeOpacity : 1,
+      strokeWeight: option.strokeWeight ? option.strokeWeight : 1,
+      fillColor: option.fillColor ? option.fillColor : '#10243b',
+      fillOpacity: option.fillOpacity ? option.fillOpacity : 0.65
+    });
+    map.add(maskPolygon);
+  };
   let moveMarker, movePolyline, movePassedPolyline, timerId;
   const trackPlayback = (lineArr) => {
     if (timerId) {
@@ -314,12 +345,12 @@ export function useAMap(options) {
       strokeWeight: 6 //线宽
     });
 
-    moveMarker.on('moving', function (e) {
+    moveMarker.on('moving', function(e) {
       movePassedPolyline.setPath(e.passedPath);
       map.setCenter(e.target.getPosition(), true);
     });
 
-    moveMarker.on('moveend', function (e) {
+    moveMarker.on('moveend', function(e) {
       index++;
       if (index === lineArr.length - 1) {
         timerId = setTimeout(() => {
@@ -481,6 +512,7 @@ export function useAMap(options) {
     handleHover,
     creatMask,
     removeMask,
+    creatMask2,
     trackPlayback,
     drawData
   };

src/views/comprehensiveGuarantee/materialReserves/materialsDeclarationAdd.vue

@@ -28,7 +28,7 @@
                 </el-form-item>
               </template>
             </el-table-column>
-            <el-table-column label="仓库" prop="warehouse_id" align="center" />
+            <el-table-column label="仓库" prop="warehouse_name" align="center" />
             <el-table-column label="物资类型" prop="material_type" align="center" />
             <el-table-column label="物资数量（件）" prop="material_quantity" align="center">
               <template #default="scope">
@@ -119,7 +119,7 @@ const calcTotalAmount = () => {
 
 const handleAddRow = () => {
   const newRow = {
-    warehouse_id: '',
+    warehouse_name: '',
     material_name: '',
     material_type: '',
     material_code: '',
@@ -175,7 +175,7 @@ const handleShowSelect = (index) => {
 const handleSelectChange = (data) => {
   detailData.detail[selectIndex.value].material_code = data.id;
   detailData.detail[selectIndex.value].material_name = data.label;
-  detailData.detail[selectIndex.value].warehouse_id = data.warehouse_id;
+  detailData.detail[selectIndex.value].warehouse_name = data.warehouse_name;
   detailData.detail[selectIndex.value].material_type = data.type;
 };
 

src/views/comprehensiveGuarantee/materialReserves/materialsDeclarationView.vue

@@ -15,8 +15,11 @@
           </el-col>
           <el-col :span="12">
             <div class="text-box">
-              <div class="text1">审批状态：</div>
-              <div class="text2">{{ detailData.approval_status }}</div>
+              <div class="text1">审批状态2：</div>
+              <div class="text2">
+                {{detailData.declaration_details}}f
+                <dict-tag :options="material_approval_status" :value="detailData.declaration_details" />
+              </div>
             </div>
           </el-col>
         </el-row>
@@ -46,7 +49,6 @@
 </template>
 
 <script setup lang="ts">
-import { getMaterialList } from '@/api/comprehensiveGuarantee/materialReserveManagement/MaterialStatistics';
 import { getDeclarationDetail } from '@/api/comprehensiveGuarantee/materialReserveManagement/materialsDeclaration';
 import { formatToTwoDecimalPlaces } from '@/utils';
 
@@ -55,15 +57,13 @@ const props = defineProps({
 });
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { material_type } = toRefs<any>(proxy?.useDict('material_type'));
+const { material_approval_status } = toRefs<any>(proxy?.useDict('material_approval_status'));
 const emits = defineEmits(['close']);
 let detailData = reactive({
   declaration_amount: '',
-  approval_status: '',
+  declaration_details: '',
   detail: []
 });
-let materialList = ref([]);
-const approvalStatus = ref('待审批');
 
 const handleReturn = () => {
   emits('close');
@@ -78,12 +78,9 @@ const calcHeight = () => {
 onMounted(() => {
   getDeclarationDetail(props.id).then((res) => {
     detailData.declaration_amount = res.data.declaration_amount;
-    detailData.approval_status = res.data.approval_status;
+    detailData.declaration_details = res.data.declaration_details;
     detailData.detail = res.data.detail;
   });
-  getMaterialList().then((res) => {
-    materialList.value = res.data;
-  });
   calcHeight();
   window.addEventListener('resize', calcHeight);
 });