编辑地图 搜索节点 节点滚动到中间
This commit is contained in:
yyy
parent
ca0a561058
commit
9cec9dacb1
@ -4,9 +4,9 @@ NODE_ENV=development
|
||||
VITE_DEV=true
|
||||
|
||||
# 请求路径
|
||||
VITE_BASE_URL='http://192.168.0.74:48080'
|
||||
# VITE_BASE_URL='http://192.168.0.74:48080'
|
||||
# VITE_BASE_URL='http://192.168.0.153:48080'
|
||||
# VITE_BASE_URL='http://192.168.0.45:48080'
|
||||
VITE_BASE_URL='http://192.168.0.45:48080'
|
||||
|
||||
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
|
||||
VITE_UPLOAD_TYPE=server
|
||||
|
||||
BIN
src/assets/search.png
Normal file
BIN
src/assets/search.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="edit-map-page" @wheel="handleWheel">
|
||||
<div class="top-tool">
|
||||
<div class="top-tool-list-container">
|
||||
<div class="top-tool-list">
|
||||
<div v-for="item in state.topToolList" :key="item.switchType" class="top-tool-item">
|
||||
<el-popover
|
||||
@ -55,7 +56,11 @@
|
||||
</div>
|
||||
</el-form>
|
||||
<!-- 旋转 -->
|
||||
<el-form :model="state.rotationForm" v-if="item.switchType === 'revolve'" class="mt-2">
|
||||
<el-form
|
||||
:model="state.rotationForm"
|
||||
v-if="item.switchType === 'revolve'"
|
||||
class="mt-2"
|
||||
>
|
||||
<el-form-item label="角度">
|
||||
<el-input-number
|
||||
v-model="state.rotationForm.angle"
|
||||
@ -298,6 +303,32 @@
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-select">
|
||||
<img
|
||||
class="search-icon"
|
||||
v-if="!state.isSearchSelectVisible"
|
||||
@click="toggleSelect"
|
||||
src="@/assets/search.png"
|
||||
/>
|
||||
<el-select
|
||||
class="!w-160px"
|
||||
v-else
|
||||
v-model="state.searchSelectedOption"
|
||||
@blur="toggleSelect"
|
||||
placeholder="请选择"
|
||||
@change="searchSelectChange"
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in state.haveSortNumMapPointInfo"
|
||||
:key="item.sortNum"
|
||||
:label="item.sortNum"
|
||||
:value="item.sortNum"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right-tool-list" v-if="state.isShowToolbar">
|
||||
<div
|
||||
v-for="item in state.rightToolList"
|
||||
@ -340,6 +371,7 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-popover>
|
||||
|
||||
<div v-else>
|
||||
<Icon :icon="item.icon" :size="20" />
|
||||
<div class="name"> {{ item.name }} </div>
|
||||
@ -350,7 +382,7 @@
|
||||
|
||||
<div
|
||||
class="map-container"
|
||||
ref="mapContainer"
|
||||
ref="mapContainerRef"
|
||||
:style="{ cursor: state.cursorStyle }"
|
||||
v-if="imgBgObj.width && imgBgObj.height"
|
||||
>
|
||||
@ -840,6 +872,7 @@ const equipmentToolDialogRef = ref() //设备弹窗
|
||||
const textFormToolDialogRef = ref() //文字输入弹窗
|
||||
const editMapRouteDialogRef = ref() //编辑地图路线的弹窗
|
||||
const mapBackgroundRef = ref()
|
||||
const mapContainerRef = ref()
|
||||
const inputBoxRef = ref() //文字输入框
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
@ -1522,7 +1555,10 @@ const state = reactive({
|
||||
},
|
||||
routeWidthForm: {
|
||||
routeWidth: 3
|
||||
}
|
||||
},
|
||||
isSearchSelectVisible: false, //是否显示选择框
|
||||
searchSelectedOption: '',
|
||||
haveSortNumMapPointInfo: []
|
||||
})
|
||||
//网格的样式
|
||||
const gradientBackground = computed(() => {
|
||||
@ -2490,36 +2526,6 @@ const mapPointsToLine = (points, startPointId, endPointId) => {
|
||||
locationY: newY
|
||||
}
|
||||
})
|
||||
|
||||
// const dx = startPoint.locationX - endPoint.locationX
|
||||
// const dy = startPoint.locationY - endPoint.locationY
|
||||
|
||||
// // 处理垂直直线的情况
|
||||
// if (dx === 0) {
|
||||
// return points.map((point) => {
|
||||
// if (point === endPoint || point === startPoint) {
|
||||
// return point
|
||||
// }
|
||||
// return {
|
||||
// ...point,
|
||||
// locationX: endPoint.locationX
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
// const slope = dy / dx
|
||||
// const intercept = endPoint.locationY - slope * endPoint.locationX
|
||||
|
||||
// return points.map((point) => {
|
||||
// if (point === endPoint || point === startPoint) {
|
||||
// return point
|
||||
// }
|
||||
// const newY = slope * point.locationX + intercept
|
||||
// return {
|
||||
// ...point,
|
||||
// locationY: newY
|
||||
// }
|
||||
// })
|
||||
}
|
||||
|
||||
//计算是不是在同一条直线的
|
||||
@ -3088,6 +3094,11 @@ const getAllNodeList = async () => {
|
||||
|
||||
state.allMapPointInfo.push(item)
|
||||
})
|
||||
|
||||
//包含sortNumber的
|
||||
state.haveSortNumMapPointInfo = state.allMapPointInfo.filter((item) => {
|
||||
return item.sortNum
|
||||
})
|
||||
}
|
||||
//获取所有的路线
|
||||
const getAllMapRoute = async () => {
|
||||
@ -3384,6 +3395,37 @@ const computedCurveTextY = (item) => {
|
||||
4
|
||||
)
|
||||
}
|
||||
//搜索
|
||||
const toggleSelect = () => {
|
||||
state.isSearchSelectVisible = !state.isSearchSelectVisible
|
||||
state.searchSelectedOption = ''
|
||||
}
|
||||
const searchSelectChange = (sortNum) => {
|
||||
const currentIndex = state.allMapPointInfo.findIndex((item) => item.sortNum === sortNum)
|
||||
const currentItem = state.allMapPointInfo.find((item) => item.sortNum === sortNum)
|
||||
|
||||
// 计算并限制边界 滚动到指定位置
|
||||
const rect = mapContainerRef.value
|
||||
const maxScrollLeft = rect.scrollWidth - rect.clientWidth
|
||||
const maxScrollTop = rect.scrollHeight - rect.clientHeight
|
||||
const scrollToX = Math.max(
|
||||
0,
|
||||
Math.min(currentItem.locationX - rect.clientWidth / 2, maxScrollLeft)
|
||||
)
|
||||
const scrollToY = Math.max(
|
||||
0,
|
||||
Math.min(currentItem.locationY - rect.clientHeight / 2, maxScrollTop)
|
||||
)
|
||||
|
||||
rect.scrollTo({
|
||||
left: scrollToX,
|
||||
top: scrollToY,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
|
||||
state.currentItemIndex = currentIndex
|
||||
}
|
||||
|
||||
document.onmousedown = function (e) {
|
||||
//右击
|
||||
if (e.button == 2) {
|
||||
@ -3498,15 +3540,12 @@ onUnmounted(() => {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
// height: 85vh;
|
||||
height: calc(100vh - 120px);
|
||||
|
||||
.map-bg {
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
// top: 1.125rem;
|
||||
// left: 1.125rem;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
@ -3519,15 +3558,22 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.top-tool {
|
||||
margin-bottom: 0.125rem;
|
||||
margin-bottom: 2px;
|
||||
|
||||
.top-tool-list-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
box-shadow: rgba(0, 0, 0, 0.06) 0rem 0.125rem 0.1875rem;
|
||||
height: 60px;
|
||||
padding: 0 0.75rem;
|
||||
|
||||
.top-tool-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
padding: 0 0.75rem;
|
||||
height: 60px;
|
||||
box-shadow: rgba(0, 0, 0, 0.06) 0rem 0.125rem 0.1875rem;
|
||||
position: relative;
|
||||
|
||||
.top-tool-item {
|
||||
display: flex;
|
||||
@ -3564,6 +3610,7 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-tool-list {
|
||||
position: absolute;
|
||||
@ -3673,4 +3720,11 @@ onUnmounted(() => {
|
||||
font-size: 0.875rem;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.search-select {
|
||||
.search-icon {
|
||||
widows: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user