dyf/dyf-vue-ui
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'liubiao-main'

Browse Source
This commit is contained in:
fengerli
2025-09-29 16:54:18 +08:00
parent 7eb64f2d70 13f72a49ae
commit 08c0d8ebd3
2 changed files with 206 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
src/api/largeScreen/mapOpt.ts
View File

@ -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
}

130
src/views/homeIndex/components/MapComponent.vue
View File

@ -7,32 +7,46 @@
<div class="vertiLine"></div>
<div class="input" @click.stop="showCheck('showCheckGroup')">
<div>{{ groupName }}</div>
<div>
<el-icon v-show="!Status.showCheckGroup"><CaretBottom /></el-icon>
<el-icon v-show="Status.showCheckGroup"><CaretTop /></el-icon>
<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')"
:class="item.value === search.groupId ? 'active' : ''"
v-for="item in groups"
:style="{ paddingLeft: `${(item.level - 1) * 16}px` }"
<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` }"
>
{{ 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) {
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;
}
</style>