Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua

src/components/MapboxMaps/MapComponent.vue

@@ -51,6 +51,11 @@
         <div class="split-line" @click="handlerDrawLineString()" v-if="props.splitPlugin"></div>
       </a-tooltip>
 
+      <a-tooltip>
+        <template #title>{{isShowPicture?'显示选中图片方位角':'显示全部图片方位角'}}</template>
+        <div :class="isShowPicture?'picture-azimuth':'picture-azimuth-active'"  @click="handlerChangePictureVisible()"></div>
+      </a-tooltip>
+
       <div class="split-polygon" @click="handlerDrawPolygon()" v-if="false"> </div>
     </div>
 
@@ -60,8 +65,23 @@
         <a-button type="default" size="small" @click="handlerPushLocationItem"
           ><PlusOutlined />添加</a-button
         >
+
         &nbsp;
-        <a-button type="default" size="small" @click="handlerClearLocationItem"
+        <a-upload
+          name="file"
+          :before-upload="handleImportCoorinateChange"
+          :showUploadList="false"
+        >
+          <a-button
+            type="default"
+            size="small"
+            ><CloudUploadOutlined />导入
+          </a-button>
+        </a-upload>
+
+          
+        &nbsp;
+        <a-button type="default"  size="small" @click="handlerClearLocationItem"
           ><ClearOutlined />清空</a-button
         >
         &nbsp;
@@ -70,8 +90,10 @@
           size="small"
           v-if="props.splitPlugin"
           @click="onHandlerSplitPolygon"
-          ><SplitCellsOutlined />分割图斑</a-button
-        >
+          ><SplitCellsOutlined />分割图斑</a-button>
+
+        
+
         <span style="float: right">
           <CloseOutlined @click="handlerLocationClose" />
         </span>
@@ -129,6 +151,7 @@
     PlusOutlined,
     ClearOutlined,
     SplitCellsOutlined,
+    CloudUploadOutlined
   } from '@ant-design/icons-vue';
   import mapboxgl, { Map, Popup } from 'mapbox-gl';
   import Icon from '@/components/Icon/Icon.vue';
@@ -617,6 +640,7 @@
   };
   // 分割图斑
   const splitFeature = (line) => {
+
     let splitLineString = {
       type: 'Feature',
       properties: {},
@@ -1184,6 +1208,32 @@
     locationArrays.value.push(item);
   };
 
+
+  // 通过上传txt文件方式导入坐标数据
+  const handleImportCoorinateChange = (e)=>{
+      console.log("woligehoulai",e);
+      const reader =  new FileReader();
+      reader.readAsText(e);
+      reader.onload = function(text){
+        console.log(text.target?.result?.split("\r\n"))
+        handlerImportCoor(text.target?.result?.split("\r\n"));
+      }
+  }
+
+  const handlerImportCoor = (arr)=>{
+    
+    arr?.forEach((item,index)=>{
+      let coor = item.split(",");
+      if(coor[0] && coor[1]){
+        let obj = {
+          lng:parseFloat(coor[1]),
+          lat:parseFloat(coor[0])
+        }
+        locationArrays.value?.push(obj);
+      }
+      
+    })
+  }
   const handlerClearLocationItem = () => {
     locationArrays.value = [];
     locationGeoJson.point.features = [];
@@ -1343,8 +1393,14 @@
   };
 
   // 绘制图片方位角
+
+  // 是否显示全部方位角
+  const isShowPicture = ref<Boolean>(true);
   const imageList = ref<Array>([]);
   const pictureArrowElementArray = ref([]);
+  const pictureParentArrowElementArray = ref([]);
+  const currentPictureIndex = ref(null);
+  const currentPictureZIndex = ref(0);
   function handlerLoadPictureAzimuth(list) {
     imageList.value = list;
     pictureArrowElementArray.value = [];
@@ -1361,13 +1417,18 @@
         childElement.style.transform = 'rotate(' + item.orientation + 'deg)';
         childElement.style.backgroundImage = 'url(/map/arrow.png)';
         childElement.style.backgroundSize = '43px 57px';
+        childElement.style.position = "relative";
         arrowElement.appendChild(childElement);
         pictureArrowElementArray.value?.push(childElement);
+        pictureParentArrowElementArray.value?.push(arrowElement);
         let arrowMark = new mapboxgl.Marker(arrowElement)
           .setLngLat([item.lng, item.lat])
           .addTo(map);
       }
     });
+
+    currentPictureZIndex.value = list?.length;
+
     // setTimeout(function(){
     //   handlerCurrentImageChange(0);
     // },10000)
@@ -1379,19 +1440,50 @@
     imageList.value?.forEach((item, index) => {
       if (item.filePath?.match(fileName)) {
         currentIndex = index;
+        currentPictureIndex.value = index;
       }
     });
     try {
       pictureArrowElementArray.value?.forEach((itme, index) => {
         pictureArrowElementArray.value[index].style.backgroundImage = 'url(/map/arrow.png)';
+        if(isShowPicture.value){
+          pictureArrowElementArray.value[index].style.display = 'block';
+        }else{
+          pictureArrowElementArray.value[index].style.display = 'none';
+        }
       });
 
       pictureArrowElementArray.value[currentIndex].style.backgroundImage = 'url(/map/arrow-a.png)';
+      pictureArrowElementArray.value[currentIndex].style.display = 'block';
+      // 设置显示在最上层
+      currentPictureZIndex.value = currentPictureZIndex.value + 1;
+      pictureParentArrowElementArray.value[currentIndex].style.zIndex = currentPictureZIndex.value;
     } catch (e) {}
 
     return;
   }
 
+
+  function handlerChangePictureVisible(){
+    isShowPicture.value = !isShowPicture.value;
+    // 展示全部
+    if(isShowPicture.value){
+      pictureArrowElementArray.value?.forEach((itme, index) => {
+        pictureArrowElementArray.value[index].style.display = 'block';
+      });
+    }else{
+      pictureArrowElementArray.value?.forEach((itme, index) => {
+        pictureArrowElementArray.value[index].style.display = 'none';
+      });
+      if(pictureArrowElementArray.value?.length){
+        pictureArrowElementArray.value[currentPictureIndex.value].style.display = 'block';
+      }
+    }
+
+    // 展示选中
+
+  }
+
   // 绘制点
   const handlerLocationDrawPoint = () => {};
 
@@ -1609,6 +1701,32 @@
       }
     }
 
+    .picture-azimuth{
+      width: 29px;
+      height: 29px;
+      float: left;
+      background: url(/map/is_show_picture.png);
+      background-size: 20px 20px;
+      background-repeat: no-repeat;
+      background-position: 4px 5px;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .picture-azimuth-active{
+      width: 29px;
+      height: 29px;
+      float: left;
+      background: url(/map/not_show_picture.png);
+      background-size: 20px 20px;
+      background-repeat: no-repeat;
+      background-position: 4px 5px;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
     .draw-polygon {
       width: 29px;
       height: 29px;

src/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue

@@ -244,6 +244,7 @@
                 <a-image-preview-group
                   :preview="{
                     getContainer:getContainer,
+                    onVisibleChange:handlerImageChange
                   }"
                   >
                   <template
@@ -254,6 +255,7 @@
                       v-if="imageItem"
                       width="100px"
                       height="100px"
+                      @click="handlerPreviewImage(imageIndex,imageItem)"
                       :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                       :preview="{
                         getContainer,
@@ -289,6 +291,7 @@
                 <a-image-preview-group
                   :preview="{
                     getContainer:getContainer,
+                    onVisibleChange:handlerImageChange
                   }"
                   >
                   <template v-for="(imageItem, imageIndex) in bubanzhaopianList" :key="imageIndex">
@@ -296,6 +299,7 @@
                       v-if="imageItem"
                       width="100px"
                       height="100px"
+                      @click="handlerPreviewImage(imageIndex,imageItem)"
                       :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                       :preview="{
                         getContainer,
@@ -537,29 +541,23 @@
     shijiyijian,
   } = props.showInfoData;
 
-  const imageList = ref([])
+  const imageList = ref([]);
+
   async function getCaseImgList(){
-
     imageList.value = await getLoadCaseImgList({caseid:id});
-
-
+    MapboxComponent.value.handlerLoadPictureAzimuth(imageList.value);
 
     // 匹配去除无效图片
-    let zhengshiImageList = [];
-    imageList.value?.forEach((item,index)=>{
-      let obj = anjianzhaopianList.value?.find((it,idx)=>{
-        return item.filePath == it;
-      })
-      if(obj){
-        zhengshiImageList.push(imageList.value[index]);
-      }
-    })
+    // let zhengshiImageList = [];
+    // imageList.value?.forEach((item,index)=>{
+    //   let obj = anjianzhaopianList.value?.find((it,idx)=>{
+    //     return item.filePath == it;
+    //   })
+    //   if(obj){
+    //     zhengshiImageList.push(imageList.value[index]);
+    //   }
+    // })
 
-    // console.log("imageList",imageList.value);
-    // console.log("anjianzhaopianList",anjianzhaopianList.value);
-    // console.log("zhengshiImageList",zhengshiImageList);
-
-    MapboxComponent.value.handlerLoadPictureAzimuth(zhengshiImageList);
   }
 
   function handlerPreviewImage(index,url){

src/views/demo/tiankongdi/curbspotcity/MapList/SplitPolygonModal/index.vue

@@ -369,9 +369,9 @@
         />
       </div>
       <div class="split-operation">
-        <a-button type="primary" @click="reductionSplit">取消分割</a-button>
+        <a-button type="primary" :disabled="isSpliting" @click="reductionSplit">取消分割</a-button>
         &nbsp;
-        <a-button type="primary" @click="saveSplitResult">保存分割</a-button>
+        <a-button type="primary" :disabled="isSpliting" @click="saveSplitResult">保存分割</a-button>
       </div>
     </div>
   </div>
@@ -513,6 +513,8 @@
   const activeKey = ref('1');
   const geomsList = ref()
 
+  const  isSpliting = ref<Boolean>(false);;
+
   const mapshow = ref<Boolean>(false);
     onMounted(()=>{
       mapshow.value = true
@@ -820,12 +822,16 @@
 
   // 保存分割
   const saveSplitResult = () => {
+    isSpliting.value = true;
+
     if (splitPolygonForm.value?.length == 0) {
-      createMessage.error('请先使用风格工具分割图斑！');
+      createMessage.error('请先使用分割工具分割图斑！');
+      isSpliting.value = false;
       return null;
     }
     let checkResult = handlerBeforeSubmitCheckArea();
     if (!checkResult) {
+      isSpliting.value = false;
       return null;
     }
 
@@ -834,7 +840,7 @@
       caseid: id,
       processid: props.showInfoData.processid,
     };
-    console.log('params', params);
+
 
     splitPolygonForm.value?.forEach((item, index) => {
       let polygon = {
@@ -849,13 +855,17 @@
       };
       params.parts.push(polygon);
     });
-
-    splitCase(params).then((res) => {
-      if (res) {
-        createMessage.success('操作成功！');
-        emits('closeModal');
-      }
-    });
+    try{
+      splitCase(params).then((res) => {
+        if (res) {
+          createMessage.success('操作成功！');
+          emits('closeModal');
+          isSpliting.value = false;
+        }
+      });
+    }catch(e){
+      isSpliting.value = false;
+    }
   };
 
   // 检查面积

src/views/sys/exception/Converge/SearchComponent.vue

@@ -41,19 +41,16 @@ import {transformGCJ2WGS} from "@/utils/EpsgTransform.ts"
     if(item.location){
         let newCoord = transformGCJ2WGS(item.location[1],item.location[0])
         if(newCoord){
-            console.log("newCoord",newCoord);
             emits("toPosition",[newCoord.lon,newCoord.lat]);
-           
         }
     }else{
         let filter = "\"case_no\"=\'"+item.id+"\'";
         let point = await getPolygonCenter({tablename:"view_drone_shp_data",filter:filter})
-        console.log(point);
         if(point.length>0){
             try{
                 let geojson = WktToGeojson(point[0].centroid_point)
-                item.location = geojson.coordinates;
-                emits("toPosition",item.location);
+                // item.location = geojson.coordinates;
+                emits("toPosition",geojson.coordinates);
             }catch(e){
                 
             }

src/views/sys/exception/Converge/index.vue

@@ -492,6 +492,18 @@ const handlerDealCountry = (countyName:String = "临沂市"):void=>{
     })
 
 }
+
+/**
+ * 
+ * 县区边界：countyLayer
+ * 县区面板图层：countyPanelLayer
+ * 乡镇边界：streetLayer
+ * 乡镇名称图层：streetLabelLayer
+ * 遮罩图层：mb-tag
+ * 图斑线：historyLayerLine
+ * 图斑面：historyLayerFill
+ * 
+ * */ 
 // 渲染县区边界数据
 const handlerLoadCountyLayer = (geojson)=>{
     // 绘制线
@@ -573,16 +585,16 @@ const handlerLoadPanelLayer = (geojson)=>{
                     ],
                     'fill-opacity':0.9
                 }
-            }
+            },
         )
 
 
-        if(map.getLayer("countyLayer")){
-            map.moveLayer("countyLayer","countyPanelLayer");
-            map.moveLayer("historyLayerLine","countyLayer");
-            map.moveLayer("historyLayerFill","countyLayer");
-            map.moveLayer("countyLayer","countyLayer");
-        }
+        // if(map.getLayer("countyPanelLayer")){
+        //     map.moveLayer("countyPanelLayer","countyLayer");
+        //     map.moveLayer("countyPanelLayer","historyLayerLine");
+        //     map.moveLayer("countyPanelLayer","historyLayerFill");
+        // }
+        
     }
 }
 
@@ -687,11 +699,6 @@ const handlerLoadStreetLayer = (geojson)=>{
                 'text-halo-width': 2,
             }
         });
-
-
-        // handlerLoadVillageLayer();
-
-        map.moveLayer("countyLayer");
       }
 }
 
@@ -752,6 +759,8 @@ const handlerLoadVillageLayer = ()=>{
  * 
  * 行政区划：countyLayer
  * 
+ * 
+ * 
  * */ 
 function handlerChangeLayerVisible(layerName,checked){
     if (checked) {
@@ -762,9 +771,11 @@ function handlerChangeLayerVisible(layerName,checked){
 
     if(layerName == 'countyPanelLayer'){
         if(map.getLayer("countyPanelLayer")){
-            map.moveLayer("historyLayerLine","countyLayer");
-            map.moveLayer("historyLayerFill","countyLayer");
-            map.moveLayer("countyLayer","countyLayer");
+            map.moveLayer("countyPanelLayer","streetLayer");
+            map.moveLayer("countyPanelLayer","streetLabelLayer");
+            map.moveLayer("countyPanelLayer","countyLayer");
+            map.moveLayer("countyPanelLayer","historyLayerFill");
+            map.moveLayer("countyPanelLayer","historyLayerLine");
         }
     }
 }

src/views/sys/exception/rightDataScreen/columnar/index.vue

@@ -82,6 +82,9 @@
       month: currentFilter.value,
     };
     caseOffenceEcharts(querys).then((res) => {
+
+      res.sort((a, b) => a.countyid - b.countyid);
+    
       res.forEach((element) => {
         countyList.value.push(element.countyname);
         tbAreaList.value.push(element.tbmj);