更新地图组件

This commit is contained in:
g82tt
2025-10-18 03:34:32 +08:00
parent 64a731b4a5
commit e1c2e6e4aa
13 changed files with 84 additions and 61 deletions

View File

@@ -10,7 +10,7 @@
<link rel="stylesheet" href="./fonts/iconfont.css" />
<script>
window.$config = {
api: "./api.vgomap.com/",
api: "/api.vgomap.com/",
offline: true,
mapTheme: "home",
tenantId: "1958120048849719296",

Binary file not shown.

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -7,7 +7,7 @@ const map = inject("map")
const {
pathIdList,
addPathId,
addPath,
startNavi,
pauseNavi,
restoreNavi,
@@ -18,11 +18,11 @@ map.value.on('click', (e) => {
const polygon = e.object?.userData?.polygonData // 获取点位数据
if(!polygon?.isNavi) return
addPathId(polygon.id)
addPath(polygon)
})
defineExpose({
addPathId,
addPath,
})
</script>

View File

@@ -53,8 +53,8 @@ const markerStatus = ref({});
const checkedStatus = ref({})
watch(checkedStatus, (checked) => {
for (let key in checked) {
markerStatus.value[key].forEach((marker) => {
marker.visible = checked[key]
markerStatus.value?.[key]?.forEach((marker) => {
marker.visible = !checked[key]
})
}
}, {
@@ -67,7 +67,8 @@ function createDivMarker(content, polygon) {
contentNode.className = "marker"
contentNode.textContent = content
contentNode.onclick = (e) => {
routeLineRef.value.addPathId(polygon.id)
if(!polygon?.isNavi) return
routeLineRef.value.addPath(polygon)
}
wrapper.appendChild(contentNode)

View File

@@ -2,9 +2,20 @@ import { ref, watch } from "vue"
export function useNavi(map) {
const pathIdList = ref([])
function addPath(polygon) {
if(polygon?.id && pathIdList.value[pathIdList.value.length - 1] === polygon?.id) return // 不连续添加相同的项
const modelId = polygon.extrasModelId;
const model = map.value.getModelById(modelId)
const modelName = model.userData.modelData.name
console.log(modelName, 'model.name')
addPathId(polygon.id)
}
function addPathId(id) {
if(pathIdList.value[pathIdList.value.length - 1] === id) return
if(id && pathIdList.value[pathIdList.value.length - 1] === id) return
pathIdList.value.push(id)
}
@@ -70,6 +81,7 @@ export function useNavi(map) {
return {
pathIdList,
addPath,
addPathId,
startNavi,
pauseNavi,

View File

@@ -74,54 +74,54 @@ const router = createRouter({
}
},
{
path: '/Path/PathManager',
name: 'pathManager',
components: {
map: HomeView, // 左侧显示地图视图
right: PathManager // 右侧显示巡检路径管理视图
}
},
{
path: '/Path/PathSchedule',
name: 'pathSchedule',
components: {
map: HomeView, // 左侧显示地图视图
right: PathSchedule // 右侧显示巡检计划管理视图
}
},
{
path: '/Path/PathLog',
name: 'pathLog',
components: {
map: HomeView, // 左侧显示地图视图
right: PathLog // 右侧显示巡检日志管理视图
}
},
{
path: '/Car/CarManager',
name: 'carManager',
components: {
map: HomeView, // 左侧显示地图视图
right: CarManager // 右侧显示车辆管理视图
}
},
{
path: '/Car/CarUseLog',
name: 'carUseLog',
components: {
map: HomeView, // 左侧显示地图视图
right: CarUseLog // 右侧显示车辆使用记录视图
}
},
{
path: '/Car/CarEntryExitLog',
name: 'carEntryExitLog',
components: {
map: HomeView, // 左侧显示地图视图
right: CarEntryExitLog // 右侧显示车辆进出记录视图
}
}
// 可以在这里添加更多子路由
path: '/Path/PathManager',
name: 'pathManager',
components: {
map: HomeView, // 左侧显示地图视图
right: PathManager // 右侧显示巡检路径管理视图
}
},
{
path: '/Path/PathSchedule',
name: 'pathSchedule',
components: {
map: HomeView, // 左侧显示地图视图
right: PathSchedule // 右侧显示巡检计划管理视图
}
},
{
path: '/Path/PathLog',
name: 'pathLog',
components: {
map: HomeView, // 左侧显示地图视图
right: PathLog // 右侧显示巡检日志管理视图
}
},
{
path: '/Car/CarManager',
name: 'carManager',
components: {
map: HomeView, // 左侧显示地图视图
right: CarManager // 右侧显示车辆管理视图
}
},
{
path: '/Car/CarUseLog',
name: 'carUseLog',
components: {
map: HomeView, // 左侧显示地图视图
right: CarUseLog // 右侧显示车辆使用记录视图
}
},
{
path: '/Car/CarEntryExitLog',
name: 'carEntryExitLog',
components: {
map: HomeView, // 左侧显示地图视图
right: CarEntryExitLog // 右侧显示车辆进出记录视图
}
}
// 可以在这里添加更多子路由
]
}
]
@@ -134,7 +134,7 @@ const router = createRouter({
router.beforeEach((to, from, next) => {
const userStore = useUserStore() // 获取用户状态管理实例
const isLoggedIn = userStore.isLoggedIn // 检查用户是否已登录
// 检查路由是否需要身份验证
if (to.matched.some(record => record.meta.requiresAuth)) {
// 需要身份验证的路由

View File

@@ -290,6 +290,10 @@ onMounted(() => {
backdrop-filter: blur(5px);
}
:deep(.el-table tr){
background: transparent !important;
}
:deep(.el-table__header th) {
background: rgba(12, 43, 77, 0.7) !important;
border-bottom: 1px solid #68c9ff !important;

View File

@@ -41,12 +41,13 @@
</div>
<!-- 地图展示区域 -->
<!--建立 一个全局变量用于存放用户点击的设备名称列表同步到编辑框的点位设备列表中-->
<div class="mb-6">
<h3 class="text-lg font-medium text-blue-300 mb-4">路径地图</h3>
<div class="border border-blue-400 rounded-lg overflow-hidden relative">
<!-- 地图容器设置固定高度 -->
<div class="path-map-container">
<Map />
<Map el-id="etsfs"/>
</div>
<!-- 地图操作提示 -->
<div class="map-tip">