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) {
+        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,72 +99,135 @@ 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) {
-    if (!map) {
-        return;
-    }
-    if (!points) {
-        return;
-    }
-    let path = [];
-    let path1 = [];
 
-    setTimeout(() => {
+    return new Promise((resolve, reject) => {
-        points.coordinates.filter(v => {
+        if (!map) {
-            path.push(new AMap.LngLat(v.longitude, v.latitude));
+            reject("map未初始化");
-            path1.push(new AMap.LngLat(v.longitude * 0.5, v.latitude * 0.5));
+            return;
-            return true;
+        }
-        });
+        if (!points) {
+            reject("points未初始化");
+            return;
+        }
+        if (!points.coordinates) {
+            reject("coordinates未初始化");
+            return;
+        }
 
-        let polygon = new AMap.Polygon({
+        if (!Array.isArray(points.coordinates)) {
-            path: path,
+            points.coordinates = JSON.parse(points.coordinates);
-            fillColor: '#F00C0C',
+        }
-            fillOpacity: 0.03,
+
-            strokeOpacity: 0.1,
+        let path = [];
-            strokeColor: '#F00C0C',
+
+
+        setTimeout(() => {
+            points.coordinates.filter(v => {
+                if (v.lng && v.lat) {
+                    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',
+                fillOpacity: 0.03,
+                strokeOpacity: 0.1,
+                strokeColor: '#F00C0C',
+
+                strokeWeight: 3,
+                strokeStyle: 'dashed',
+                // strokeDasharray: [50,50,50],
+                extData: points
+            });
+            map.add(polygon);
+            resolve("添加多边形成功");
+        }, 0);
+    });
 
-            strokeWeight: 3,
-            strokeStyle: 'dashed',
-            // strokeDasharray: [50,50,50],
-            extData: points
-        });
-        map.add(polygon);
-    }, 0);
 
 }
 //画圆形
 function DrawCicle(points, raduis, dragEnd) {
-    if (!map) {
+    return new Promise((resolve, reject) => {
-        return;
+        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].lng, points.coordinates[0].lat],
+            radius: raduis ? raduis : 1000, //半径
+            borderWeight: 3,
+            strokeColor: "#F00C0C",
+            strokeWeight: 1,
+            strokeOpacity: 0.2,
+            fillOpacity: 0.4,
+            strokeStyle: 'dashed',
+            strokeDasharray: [10, 10],
+            // 线样式还支持 'dashed'
+            fillColor: '#1791fc',
+            zIndex: 50,
+        })
+        map.add(circle);
+        resolve("添加圆成功");
+    });
 
 
-    let circle = new AMap.Circle({
-        center: [points.coordinates[0].longitude, points.coordinates[0].latitude],
-        radius: raduis ? raduis : 1000, //半径
-        borderWeight: 3,
-        strokeColor: "#F00C0C",
-        strokeWeight: 1,
-        strokeOpacity: 0.2,
-        fillOpacity: 0.4,
-        strokeStyle: 'dashed',
-        strokeDasharray: [10, 10],
-        // 线样式还支持 'dashed'
-        fillColor: '#1791fc',
-        zIndex: 50,
-    })
-
-
-
-    map.add(circle);
-    // 缩放地图到合适的视野级别
 
 }
 
 //清除所有
 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,32 +7,46 @@
           <div class="vertiLine"></div>
           <div class="input" @click.stop="showCheck('showCheckGroup')">
             <div>{{ groupName }}</div>
-            <div>
+            <div class="iconContent">
-              <el-icon v-show="!Status.showCheckGroup"><CaretBottom /></el-icon>
+              <div class="arrow">
-              <el-icon v-show="Status.showCheckGroup"><CaretTop /></el-icon>
+                <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="item.value === search.groupId ? 'active' : ''" 
+              class="li"
-            v-for="item in groups"
+              @click.stop="checkItem(item, 'groupId')"
-            :style="{ paddingLeft: `${(item.level - 1) * 16}px` }"
+              :class="item.value === search.groupId ? 'active' : ''"
+              v-for="item in groups"
+              :style="{ paddingLeft: `${(item.level - 1) * 16}px` }"
             >
               {{ item.label }}
             </div>
           </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);
           }
@@ -424,36 +443,32 @@ function getGroups() {
 
   promise.then((res) => {
     if (res && res.code && res.code == 200) {
-       let arr = res.data;
+      let arr = res.data;
-       arr = flattenTree(arr);
+      arr = flattenTree(arr);
-       if (arr.length) {
+      if (arr.length) {
-         groups.value = arr.map((v) => {
+        groups.value = arr.map((v) => {
-           return {
+          return {
-             value: v.id,
+            value: v.id,
-             label: v.groupName,
+            label: v.groupName,
-             level: v.level
+            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,17 +510,17 @@ function hideCheck() {
 }
 
 function showCheck(type) {
-  if(type=='showCheckGroup'){
+  if (type == 'showCheckGroup') {
     Status.showCheckType = false;
-  }else{
+  } else {
-     Status.showCheckGroup = false;
+    Status.showCheckGroup = false;
   }
   Status[type] = !Status[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;
 }
 
@@ -555,14 +568,13 @@ onMounted(() => {
 :deep .el-select__wrapper,
 :deep .el-input__wrapper {
   border: none;
-   height: 7vh;
+  height: 7vh;
 }
 
 :deep .el-select__wrapper,
 :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;
@@ -628,7 +640,7 @@ onMounted(() => {
   font-family: MicrosoftYaHei;
   font-size: 15px;
   color: #deefff;
-    line-height: 4vh;
+  line-height: 4vh;
 }
 .topTool .form-item input:focus {
   outline: none;
@@ -678,4 +690,16 @@ onMounted(() => {
 .displayNone {
   display: none !important;
 }
+
+.iconContent:hover .arrow{
+display: none;
+}
+
+.iconContent .clear{
+  display: none;
+}
+
+.iconContent:hover .clear{
+  display: block;
+}
 </style>