修改地图

This commit is contained in:
GGJ
2024-12-13 09:26:37 +08:00
parent 4b91d9793d
commit 155cff879c
4 changed files with 53 additions and 2 deletions

View File

@@ -22,7 +22,7 @@
<el-dialog draggable v-model="addShow" width="400px" :title="title" :before-close="handleClose">
<el-form :model="form" ref="formRef" :rules="rules" label-width="auto">
<el-form-item label="终端名称" prop="devName">
<el-input v-model.trim="form.devName" placeholder="请输入终端名称" />
<el-input v-model.trim="form.devName" placeholder="请输入终端名称" maxlength="32" show-word-limit clearable/>
</el-form-item>
<el-form-item label="电压等级" prop="devScale">
<el-select v-model="form.devScale" clearable placeholder="请选择电压等级">
@@ -34,6 +34,7 @@
v-model="form.protocolCapacity"
style="width: 100%"
:min="0"
:max="10000000"
placeholder="请选择终端容量"
/>
</el-form-item>

View File

@@ -0,0 +1,44 @@
<template>
<div>
<baidu-map class="map" @ready="initMap" :center="{ lng: 116.403765, lat: 39.914850 }" :zoom="10"
:scroll-wheel-zoom='true'>
<BmBoundary name="北京市" :strokeWeight="12" strokeColor="blue" fillColor="blue" uid="110000"
@mouseover="mouseover"></BmBoundary>
<!-- <bm-polygon :path="polygonPath" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" :editing="true"
@lineupdate="updatePolygonPath" /> -->
</baidu-map>
</div>
</template>
<script setup lang='ts'>
import { ref, reactive } from 'vue'
// 页面中直接引入就可以
import { BaiduMap, BmBoundary, BmPolygon } from 'vue-baidu-map-3x'
const polygonPath = ref([
{ lng: 116.412732, lat: 39.911707 },
{ lng: 116.39455, lat: 39.910932 },
{ lng: 116.403461, lat: 39.921336 }
]);
const initMap = async ({ BMap, map }: any) => {
// this.map = map
// let city = "北京市"
// let region = "丰台区"
// this.drawPolygon(region)
// this.addRegionLabel(city,region)
}
const mouseover = () => {
console.log(123);
}
</script>
<style lang="scss" scoped>
.map {
width: 100%;
height: 100vh;
}
</style>

View File

@@ -13,6 +13,9 @@
<el-tab-pane label="运行情况" name="4" lazy :style="height" v-if="!isReload">
<RunningCondition />
</el-tab-pane>
<!-- <el-tab-pane label="运行情况" name="5" lazy >
<aaa />
</el-tab-pane> -->
</el-tabs>
<div class="monitoring-point">当前位置{{ monitoringPoint.state.lineName }}</div>
</div>
@@ -23,6 +26,7 @@ import Navigation from './navigation/index.vue'
import EventStatistics from './eventStatistics/index.vue'
import EventStudy from './eventStudy/index.vue'
import RunningCondition from './runningCondition/index.vue'
import aaa from './aaa.vue'
import { mainHeight } from '@/utils/layout'
import router from '@/router'
import { useMonitoringPoint } from '@/stores/monitoringPoint'

View File

@@ -10,7 +10,7 @@
></PointTree>
</pane>
<pane>
<Map v-bind="$attrs"></Map>
<Map v-bind="$attrs" v-if="flag"></Map>
</pane>
</splitpanes>
</template>
@@ -25,6 +25,7 @@ import { useMonitoringPoint } from '@/stores/monitoringPoint'
const monitoringPoint = useMonitoringPoint()
const size = ref(0)
const flag = ref(false)
onMounted(() => {
const dom = document.getElementById('navigation-splitpanes')
if (dom) {
@@ -34,6 +35,7 @@ onMounted(() => {
const handleNodeClick = (data: any, node: any) => {
if (data.level === 6) {
monitoringPoint.setValue('lineId', data.id)
flag.value = true
}
}
</script>