Merge branch 'liubiao-main'

src/api/largeScreen/mapOpt.ts

@@ -1,5 +1,5 @@
 var map = null;
-
+var layPoints = [];
 
 function initMap(click) {
     // let key = '90bc158992feb8ccd0145e168cab1307';
@@ -7,12 +7,12 @@ function initMap(click) {
         map = new AMap.Map("map", {
             viewMode: '2D', //默认使用 2D 模式
             zoom: 11, //地图级别
-            center: [114.420739, 30.487514], //地图中心点
+            center: [116.396477 , 39.909278], //地图中心点
             mapStyle: "amap://styles/darkblue"
         });
 
         map.on('click', function (evt) {            
-            //   alert('您点击的位置:'+evt.lnglat.longitude+' , '+ evt.lnglat.latitude);
+            //    alert('您点击的位置:'+evt.lnglat.lng+' , '+ evt.lnglat.lat);
             if (click) {
                 click(evt.lnglat);
             }
@@ -38,7 +38,17 @@ function AddPoint(point, index, dragEnd, click, iconImg) {
 
     return new Promise((resolve, reject) => {
         try {
-            let center = point ? new AMap.LngLat(point.longitude, point.latitude) : map.getCenter();
+            if (!point) {
+                reject("point不可用")
+                return;
+            }
+            if (!point.longitude || !point.latitude) {
+                reject("point的经纬度不可用")
+                return;
+            }
+            layPoints.push({ lng: point.longitude, lat: point.latitude });
+
+            let center = new AMap.LngLat(point.longitude, point.latitude);
 
             let icon = new AMap.Icon({
                 size: new AMap.Size(45, 45), //图标尺寸
@@ -89,24 +99,65 @@ function setCenter(lon, latitude) {
     map.setCenter(position); //简写 设置地图中心点
 
 }
+
+function calcCenter() {
+    
+    if (!layPoints || layPoints.length === 0) {
+        throw new Error("坐标数组不能为空");
+    }
+
+    // 计算所有经度和纬度的总和
+    const total = layPoints.reduce((sum, point) => {
+        return {
+            lng: sum.lng + parseFloat(point.lng),
+            lat: sum.lat + parseFloat(point.lat)
+        };
+    }, { lng: 0, lat: 0 });
+
+    // 计算平均值得到中心点
+    const center = {
+        lng: total.lng / layPoints.length,
+        lat: total.lat / layPoints.length
+    };
+
+    return center;
+}
 //画多边形
 function DrawPoy(points) {
+
+    return new Promise((resolve, reject) => {
         if (!map) {
+            reject("map未初始化");
             return;
         }
         if (!points) {
+            reject("points未初始化");
             return;
         }
+        if (!points.coordinates) {
+            reject("coordinates未初始化");
+            return;
+        }
+
+        if (!Array.isArray(points.coordinates)) {
+            points.coordinates = JSON.parse(points.coordinates);
+        }
+
         let path = [];
-    let path1 = [];
+
 
         setTimeout(() => {
             points.coordinates.filter(v => {
-            path.push(new AMap.LngLat(v.longitude, v.latitude));
+                if (v.lng && v.lat) {
-            path1.push(new AMap.LngLat(v.longitude * 0.5, v.latitude * 0.5));
+                    path.push(new AMap.LngLat(v.lng, v.lat));
+                    layPoints.push({ lng: v.lng, lat: v.lat });
                     return true;
+                }
+                return false;
             });
-
+            if (!path.length) {
+                reject("path为空");
+            }
             let polygon = new AMap.Polygon({
                 path: path,
                 fillColor: '#F00C0C',
@@ -120,18 +171,39 @@ function DrawPoy(points) {
                 extData: points
             });
             map.add(polygon);
+            resolve("添加多边形成功");
         }, 0);
+    });
+
 
 }
 //画圆形
 function DrawCicle(points, raduis, dragEnd) {
+    return new Promise((resolve, reject) => {
         if (!map) {
+            reject("map未初始化");
+            return;
+        }
+        if (!points) {
+            reject("points未初始化");
+            return;
+        }
+        if (!points.coordinates) {
+            reject("coordinates未初始化");
             return;
         }
 
+        if (!Array.isArray(points.coordinates)) {
+            points.coordinates = JSON.parse(points.coordinates);
+        }
 
+        if (!(points.coordinates[0].lng && points.coordinates[0].lat)) {
+            reject("圆的中心点不正确")
+            return;
+        }
+        layPoints.push({ lng: coordinates[0].lng, lat: points.coordinates[0].lat });
         let circle = new AMap.Circle({
-        center: [points.coordinates[0].longitude, points.coordinates[0].latitude],
+            center: [points.coordinates[0].lng, points.coordinates[0].lat],
             radius: raduis ? raduis : 1000, //半径
             borderWeight: 3,
             strokeColor: "#F00C0C",
@@ -144,17 +216,18 @@ function DrawCicle(points, raduis, dragEnd) {
             fillColor: '#1791fc',
             zIndex: 50,
         })
-
-
-
         map.add(circle);
-    // 缩放地图到合适的视野级别
+        resolve("添加圆成功");
+    });
+
+
 
 }
 
 //清除所有
 function clearOverLays() {
     map && map.clearMap();
+    layPoints = [];
 }
 
 
@@ -177,6 +250,7 @@ export default {
     DrawCicle: DrawCicle,
     clearOverLays: clearOverLays,
     removeOverLay: removeOverLay,
-
+    setCenter: setCenter,
+    calcCenter: calcCenter,
     setFitView: setFitView
 }

src/views/homeIndex/components/MapComponent.vue

@@ -7,13 +7,20 @@
           <div class="vertiLine"></div>
           <div class="input" @click.stop="showCheck('showCheckGroup')">
             <div>{{ groupName }}</div>
-            <div>
+            <div class="iconContent">
+              <div class="arrow">
                 <el-icon v-show="!Status.showCheckGroup"><CaretBottom /></el-icon>
                 <el-icon v-show="Status.showCheckGroup"><CaretTop /></el-icon>
               </div>
+              <div class="clear" @click.stop="search.groupId=''">
+                <el-icon ><CloseBold /></el-icon>
+              </div>
+            </div>
           </div>
           <div class="ul" :class="Status.showCheckGroup ? '' : 'displayNone'">
-            <div class="li" @click.stop="checkItem(item, 'groupId')" 
+            <div
+              class="li"
+              @click.stop="checkItem(item, 'groupId')"
               :class="item.value === search.groupId ? 'active' : ''"
               v-for="item in groups"
               :style="{ paddingLeft: `${(item.level - 1) * 16}px` }"
@@ -23,16 +30,23 @@
           </div>
         </div>
 
-
-
         <div class="form-item">
           <div class="vertiLine"></div>
           <div class="input" @click.stop="showCheck('showCheckType')">
             <div>{{ devType }}</div>
-            <div>
+          
-              <el-icon v-show="!Status.showCheckType"><CaretTop /></el-icon>
+
-              <el-icon v-show="Status.showCheckType"><CaretBottom /></el-icon>
+
+              <div class="iconContent">
+              <div class="arrow">
+                <el-icon v-show="!Status.showCheckType"><CaretBottom /></el-icon>
+                <el-icon v-show="Status.showCheckType"><CaretTop /></el-icon>
               </div>
+              <div class="clear" @click.stop="search.deviceType=''">
+                <el-icon ><CloseBold /></el-icon>
+              </div>
+            </div>
+
           </div>
           <div class="ul" :class="Status.showCheckType ? '' : 'displayNone'">
             <div
@@ -300,17 +314,19 @@ function getPoints() {
       method: 'get'
     });
 
-    let fakeData = getFakeData();
+    // let fakeData = getFakeData();
     promise
       .then((res) => {
         map.clearOverLays();
         if (res) {
           if (res.code && res.code == 200) {
             var array = res.data;
-            if (!array.length) {
+            // if (!array.length) {
-              ElMessage.error('未查询到任何数据,以下展示假数据,仅供查看效果,正式上线时取消');
+            //   // ElMessage.error('未查询到任何数据,以下展示假数据,仅供查看效果,正式上线时取消');
-              array = fakeData;
+            //   // array = fakeData;              
-            }
+            //   // return;
+            // }
+            let promise = [];
             for (let i = 0; i < array.length; i++) {
               let v = array[i];
 
@@ -332,21 +348,24 @@ function getPoints() {
               }
               points.value.push(json);
 
-              map.AddPoint(json, '', null, null, json.isAlarming ? mapWarn : mapPoint);
+              promise.push(map.AddPoint(json, '', null, null, json.isAlarming ? mapWarn : mapPoint));
             }
 
             if (fens.value && fens.value.length > 0) {
               for (let i = 0; i < fens.value.length; i++) {
                 let f = fens.value[i];
                 if (f.areaType === 0) {
-                  map.DrawPoy(f);
+                  promise.push(map.DrawPoy(f));
                 } else {
-                  map.DrawCicle(f, f.radius, null);
+                  promise.push(map.DrawCicle(f, f.radius, null));
                 }
               }
             }
-
+            Promise.allSettled(promise).then((res) => {
-            map.setFitView();
+              //  map.setFitView();
+              let center=map.calcCenter();
+             map.setCenter(center.lng,center.lat);
+            });
           } else {
             console.error('接口getDeviceLocationInfo出现了未知的异常', res);
           }
@@ -434,26 +453,22 @@ function getGroups() {
             level: v.level
           };
         });
-       } else 
+      } else {
-      
+        let array = [];
-      {
-        let array=[];
         for (let i = 0; i < 5; i++) {
           array.push({
             value: i,
             label: '假数据' + (i + 1),
-            level:i%3+1
+            level: (i % 3) + 1
           });
         }
 
-        groups.value=array;
+        groups.value = array;
       }
     }
   });
 }
 
-
-
 function checkItem(item, type) {
   if (search.value[type] === item.value) {
     return;
@@ -464,7 +479,6 @@ function checkItem(item, type) {
 }
 
 var groupName = computed(() => {
-  
   if (search.value.groupId) {
     let f = groups.value.find((v) => {
       return v.value === search.value.groupId;
@@ -478,7 +492,6 @@ var groupName = computed(() => {
 });
 
 var devType = computed(() => {
-  
   if (search.value.deviceType) {
     let f = types.value.find((v) => {
       return v.value === search.value.deviceType;
@@ -497,9 +510,9 @@ function hideCheck() {
 }
 
 function showCheck(type) {
-  if(type=='showCheckGroup'){
+  if (type == 'showCheckGroup') {
     Status.showCheckType = false;
-  }else{
+  } else {
     Status.showCheckGroup = false;
   }
   Status[type] = !Status[type];
@@ -507,7 +520,7 @@ function showCheck(type) {
 
 onMounted(() => {
   map.initMap(hideCheck).then((res) => {
-    getPoints();
+    setInterval(getPoints,300000);    
   });
 
   getTypes();
@@ -520,8 +533,8 @@ onMounted(() => {
   width: 100vw;
   height: 100vh;
 }
-.el-icon{
+.el-icon {
-  color: #007EFF;
+  color: #007eff;
   font-size: 1vw;
 }
 
@@ -562,7 +575,6 @@ onMounted(() => {
 :deep .el-input__wrapper,
 .topTool .form-item {
   background: url(@/assets/homeIndex/select.png) no-repeat;
-
 }
 .topTool .form {
   width: 43%;
@@ -610,7 +622,7 @@ onMounted(() => {
   border: none;
   box-sizing: border-box;
   padding: 0px 10px;
-  line-height: 4vh;
+  line-height: 4.5vh;
   outline: none;
   font-family: MicrosoftYaHei;
   font-size: 15px;
@@ -678,4 +690,16 @@ onMounted(() => {
 .displayNone {
   display: none !important;
 }
+
+.iconContent:hover .arrow{
+display: none;
+}
+
+.iconContent .clear{
+  display: none;
+}
+
+.iconContent:hover .clear{
+  display: block;
+}
 </style>