From 13f72a49ae995376827c3f2772e2e995d59d25f7 Mon Sep 17 00:00:00 2001 From: liub Date: Mon, 29 Sep 2025 16:49:25 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9C=B0=E5=9B=BE=E5=90=8E?= =?UTF-8?q?=E7=AB=AF=E6=9C=89=E7=9C=9F=E5=AE=9E=E6=95=B0=E6=8D=AE=E5=90=8E?= =?UTF-8?q?=E8=B7=9F=E5=81=87=E6=83=B3=E7=9A=84=E6=95=B0=E6=8D=AE=E5=AD=97?= =?UTF-8?q?=E6=AE=B5=E5=90=8D=E7=A7=B0=E4=B8=8D=E4=B8=80=E8=87=B4=E5=AF=BC?= =?UTF-8?q?=E8=87=B4=E7=9A=84=E5=9C=B0=E5=9B=BE=E5=81=87=E6=AD=BB=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 10 +- src/api/largeScreen/mapOpt.ts | 184 ++++++++++++------ .../homeIndex/components/MapComponent.vue | 130 ++++++++----- 3 files changed, 212 insertions(+), 112 deletions(-) diff --git a/.env.development b/.env.development index cdbfb0f..80af97a 100644 --- a/.env.development +++ b/.env.development @@ -5,11 +5,13 @@ VITE_APP_TITLE = 云平台管理系统 VITE_APP_ENV = 'development' # 开发环境 - #VITE_APP_BASE_API = 'https://fuyuanshen.com/backend' - #VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq' - +# VITE_APP_BASE_API = 'https://fuyuanshen.com/backend' +# 正式环境 +# VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq' +# 内网测试 +VITE_APP_BASE_API = 'http://192.168.110.56:8000' #代永飞接口 -VITE_APP_BASE_API = 'http://192.168.2.23:8000' +# VITE_APP_BASE_API = 'http://457102h2d6.qicp.vip:24689' # 应用访问路径 例如使用前缀 /admin/ diff --git a/src/api/largeScreen/mapOpt.ts b/src/api/largeScreen/mapOpt.ts index cf67b69..32c2d7d 100644 --- a/src/api/largeScreen/mapOpt.ts +++ b/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); + map.on('click', function (evt) { + // 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(() => { - points.coordinates.filter(v => { - path.push(new AMap.LngLat(v.longitude, v.latitude)); - path1.push(new AMap.LngLat(v.longitude * 0.5, v.latitude * 0.5)); - return true; - }); + return new Promise((resolve, reject) => { + if (!map) { + reject("map未初始化"); + return; + } + if (!points) { + reject("points未初始化"); + return; + } + if (!points.coordinates) { + reject("coordinates未初始化"); + return; + } - let polygon = new AMap.Polygon({ - path: path, - fillColor: '#F00C0C', - fillOpacity: 0.03, - strokeOpacity: 0.1, - strokeColor: '#F00C0C', + if (!Array.isArray(points.coordinates)) { + points.coordinates = JSON.parse(points.coordinates); + } + + let path = []; + + + 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; - } + 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].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 } \ No newline at end of file diff --git a/src/views/homeIndex/components/MapComponent.vue b/src/views/homeIndex/components/MapComponent.vue index 160240f..7a2afd5 100644 --- a/src/views/homeIndex/components/MapComponent.vue +++ b/src/views/homeIndex/components/MapComponent.vue @@ -7,32 +7,46 @@
{{ groupName }}
-
- - +
+
+ + +
+
+ +
-
{{ item.label }}
- -
{{ devType }}
-
- - + + + +
+
+ + +
+
+ +
+
{ map.clearOverLays(); if (res) { if (res.code && res.code == 200) { var array = res.data; - if (!array.length) { - ElMessage.error('未查询到任何数据,以下展示假数据,仅供查看效果,正式上线时取消'); - array = fakeData; - } + // if (!array.length) { + // // ElMessage.error('未查询到任何数据,以下展示假数据,仅供查看效果,正式上线时取消'); + // // 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)); } } } - - map.setFitView(); + Promise.allSettled(promise).then((res) => { + // 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; - arr = flattenTree(arr); - if (arr.length) { - groups.value = arr.map((v) => { - return { - value: v.id, - label: v.groupName, - level: v.level - }; - }); - } else - - { - let array=[]; + let arr = res.data; + arr = flattenTree(arr); + if (arr.length) { + groups.value = arr.map((v) => { + return { + value: v.id, + label: v.groupName, + level: v.level + }; + }); + } else { + 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{ - Status.showCheckGroup = false; + } else { + 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{ - color: #007EFF; +.el-icon { + 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; +}