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

修改地图后端有真实数据后跟假想的数据字段名称不一致导致的地图假死问题

Browse Source
This commit is contained in:
liub
2025-09-29 16:49:25 +08:00
parent 28aa794e3f
commit 13f72a49ae
3 changed files with 212 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>