百度地图
仲么了
12
index.html
@@ -1,13 +1,13 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang='en'>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset='UTF-8' />
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
<link rel='icon' type='image/svg+xml' href='/favicon.ico' />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
|
||||||
<title>电能质量数据监测云平台</title>
|
<title>电能质量数据监测云平台</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id='app'></div>
|
||||||
<script type="module" src="/src/main.ts"></script>
|
<script type='module' src='/src/main.ts'></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
10
src/api/event-boot/areaInfo.ts
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
//获取地图点位数据
|
||||||
|
export function getAreaLineInfo(data: any) {
|
||||||
|
return request({
|
||||||
|
url: '/event-boot/areaInfo/getAreaLineInfo',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
BIN
src/assets/Wi-Fi.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/XTJS.png
Normal file
|
After Width: | Height: | Size: 48 KiB |
BIN
src/assets/YJT.png
Normal file
|
After Width: | Height: | Size: 427 B |
BIN
src/assets/YYJS.png
Normal file
|
After Width: | Height: | Size: 56 KiB |
BIN
src/assets/ZJT.png
Normal file
|
After Width: | Height: | Size: 434 B |
BIN
src/assets/bg.png
Normal file
|
After Width: | Height: | Size: 3.0 MiB |
BIN
src/assets/dw.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/jcd.png
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
BIN
src/assets/jcd1.png
Normal file
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/assets/jcd2.png
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/jcd3.png
Normal file
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/assets/m0.png
Normal file
|
After Width: | Height: | Size: 2.9 KiB |
BIN
src/assets/m1.png
Normal file
|
After Width: | Height: | Size: 3.2 KiB |
BIN
src/assets/m2.png
Normal file
|
After Width: | Height: | Size: 4.2 KiB |
BIN
src/assets/m3.png
Normal file
|
After Width: | Height: | Size: 5.2 KiB |
BIN
src/assets/m4.png
Normal file
|
After Width: | Height: | Size: 6.5 KiB |
BIN
src/assets/pdf.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/point.png
Normal file
|
After Width: | Height: | Size: 3.1 KiB |
BIN
src/assets/rby.png
Normal file
|
After Width: | Height: | Size: 921 B |
BIN
src/assets/txycyzj.gif
Normal file
|
After Width: | Height: | Size: 2.4 KiB |
BIN
src/assets/txzcwzj.png
Normal file
|
After Width: | Height: | Size: 916 B |
BIN
src/assets/txzcyzj.gif
Normal file
|
After Width: | Height: | Size: 2.4 KiB |
BIN
src/assets/txzd.png
Normal file
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/assets/txzdwzj.png
Normal file
|
After Width: | Height: | Size: 915 B |
BIN
src/assets/ty.png
Normal file
|
After Width: | Height: | Size: 927 B |
BIN
src/assets/wi_fioff.png
Normal file
|
After Width: | Height: | Size: 640 B |
BIN
src/assets/wtys.gif
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/yct.png
Normal file
|
After Width: | Height: | Size: 27 KiB |
BIN
src/assets/zdyc.gif
Normal file
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/ztsj.gif
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
src/assets/zz.png
Normal file
|
After Width: | Height: | Size: 6.5 KiB |
BIN
src/assets/zzxq.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
@@ -21,7 +21,8 @@ window.XEUtils = XEUtils
|
|||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
|
||||||
app.use(BaiduMap, {
|
app.use(BaiduMap, {
|
||||||
ak: 'RpQi6WNFZ9tseKzhdwOQsXwFsoVntnsN'
|
ak: 'RpQi6WNFZ9tseKzhdwOQsXwFsoVntnsN',
|
||||||
|
|
||||||
// type: 'WebGL' // ||API 默认API (使用此模式 BMap=BMapGL)
|
// type: 'WebGL' // ||API 默认API (使用此模式 BMap=BMapGL)
|
||||||
})
|
})
|
||||||
app.use(router)
|
app.use(router)
|
||||||
|
|||||||
@@ -2,3 +2,4 @@
|
|||||||
@use '@/styles/vxeTable';
|
@use '@/styles/vxeTable';
|
||||||
@use '@/styles/element';
|
@use '@/styles/element';
|
||||||
@use '@/styles/var';
|
@use '@/styles/var';
|
||||||
|
@use '@/styles/map';
|
||||||
|
|||||||
6
src/styles/map.scss
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
.BMap_cpyCtrl {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
.anchorBL{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
@@ -1,32 +1,293 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="padding: 10px">
|
<div style='padding: 10px; position: relative'>
|
||||||
|
<div style='display: none'>
|
||||||
|
<DatePicker ref='datePickerRef'></DatePicker>
|
||||||
|
</div>
|
||||||
|
<div class='iconBox'>
|
||||||
|
<div class='div'>
|
||||||
|
<img src='@/assets/jcd.png' alt='' />
|
||||||
|
<span>变电站</span>
|
||||||
|
</div>
|
||||||
|
<div class='div'>
|
||||||
|
<img src='@/assets/rby.png' alt='' />
|
||||||
|
<span>热备用</span>
|
||||||
|
</div>
|
||||||
|
<div class='div'>
|
||||||
|
<img src='@/assets/ty.png' alt='' />
|
||||||
|
<span>停运</span>
|
||||||
|
</div>
|
||||||
|
<div class='div'>投运</div>
|
||||||
|
<div class='div' style='padding-left: 10px'>
|
||||||
|
<span>通讯正常</span>
|
||||||
|
</div>
|
||||||
|
<div class='div' style='padding-left: 20px'>
|
||||||
|
<img src='@/assets/txzcyzj.gif' alt='' />
|
||||||
|
<span>有暂降</span>
|
||||||
|
</div>
|
||||||
|
<div class='div' style='padding-left: 20px'>
|
||||||
|
<img src='@/assets/txzcwzj.png' alt='' />
|
||||||
|
<span>无暂降</span>
|
||||||
|
</div>
|
||||||
|
<div class='div' style='padding-left: 10px'>
|
||||||
|
<span>通讯异常</span>
|
||||||
|
</div>
|
||||||
|
<div class='div' style='padding-left: 20px'>
|
||||||
|
<img src='@/assets/txycyzj.gif' alt='' />
|
||||||
|
<span>有暂降</span>
|
||||||
|
</div>
|
||||||
|
<div class='div' style='padding-left: 20px'>
|
||||||
|
<img src='@/assets/txzdwzj.png' alt='' />
|
||||||
|
<span>无暂降</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class='selectBox'>
|
||||||
|
<el-select
|
||||||
|
@change='pointChange'
|
||||||
|
:popper-append-to-body='false'
|
||||||
|
filterable
|
||||||
|
clearable
|
||||||
|
v-model='lineId'
|
||||||
|
placeholder='输入监测点名称查询'
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for='item in areaLineInfo'
|
||||||
|
:key='item.lineId'
|
||||||
|
:label='item.lineName'
|
||||||
|
:value='item.lineId'
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
<baidu-map
|
<baidu-map
|
||||||
class="bm-view"
|
class='bm-view'
|
||||||
:zoom="zoom"
|
:zoom='zoom'
|
||||||
:center="{ lng: 116.404, lat: 39.915 }"
|
:map-click='false'
|
||||||
@ready="handler"
|
:scroll-wheel-zoom='true'
|
||||||
:style="height"
|
:center='center'
|
||||||
></baidu-map>
|
@ready='handler'
|
||||||
|
:style='height'
|
||||||
|
@zoomend='syncCenterAndZoom'
|
||||||
|
>
|
||||||
|
<bm-map-type
|
||||||
|
:map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
|
||||||
|
anchor='BMAP_ANCHOR_TOP_RIGHT'
|
||||||
|
></bm-map-type>
|
||||||
|
<!-- 线-->
|
||||||
|
<bm-polyline :path='path' v-for='(path,index) in polyline' :key='index'></bm-polyline>
|
||||||
|
<!-- 变电站-->
|
||||||
|
<template v-if='zoom > 12'>
|
||||||
|
<bm-marker :position='path' v-for='(path) in siteList' :key='path.subId' :icon='path.icon'
|
||||||
|
@click='markerClick(path)'>
|
||||||
|
</bm-marker>
|
||||||
|
</template>
|
||||||
|
<!-- 点 -->
|
||||||
|
<BmlMarkerClusterer>
|
||||||
|
<bm-marker :position='path' v-for='(path) in areaLineInfo' :key='path.lineId' :icon='path.icon'
|
||||||
|
@click='markerClick(path)'>
|
||||||
|
</bm-marker>
|
||||||
|
</BmlMarkerClusterer>
|
||||||
|
<bm-marker :position='infoWindowPoint'
|
||||||
|
:icon="{url: '1', size: {width: 0, height: 0}}">
|
||||||
|
<bm-info-window :show='infoWindowPoint.show' @close='infoWindowPoint.show=false'>
|
||||||
|
<el-descriptions :title='infoWindowPoint.lineName' :column='1' v-if='infoWindowPoint.lineId'>
|
||||||
|
<el-descriptions-item label='供电公司'>{{ infoWindowPoint.gdName }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label='变电站'>{{ infoWindowPoint.subName }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label='母线'>{{ infoWindowPoint.voltageName }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label='网络参数'>
|
||||||
|
{{ infoWindowPoint.ip }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label='PT变化'>{{ infoWindowPoint.pt2 }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label='CT变化'>{{ infoWindowPoint.ct2 }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label='生产厂家'>{{ infoWindowPoint.manufacturer }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label='终端状态'>
|
||||||
|
{{ infoWindowPoint.runFlag == 0 ? '投运' : infoWindowPoint.runFlag == 1 ? '热备用' : '停运'
|
||||||
|
}}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label='通讯状态'>{{ infoWindowPoint.comFlag == 0 ? '中断' : '正常' }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item>
|
||||||
|
<el-button type='primary' size='small'>查看监测点</el-button>
|
||||||
|
<el-button type='primary' size='small'>未处理事件({{ infoWindowPoint.noDealCount }})
|
||||||
|
</el-button>
|
||||||
|
</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
<el-descriptions :title='infoWindowPoint.subName' :column='1' v-else-if='infoWindowPoint.subId'
|
||||||
|
style='padding-top: 10px'>
|
||||||
|
</el-descriptions>
|
||||||
|
</bm-info-window>
|
||||||
|
</bm-marker>
|
||||||
|
</baidu-map>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang='ts'>
|
||||||
|
import { BmlMarkerClusterer } from 'vue-baidu-map-3x'
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { mainHeight } from '@/utils/layout'
|
import { mainHeight } from '@/utils/layout'
|
||||||
|
import { getAreaLineInfo } from '@/api/event-boot/areaInfo'
|
||||||
|
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||||
|
import { useAdminInfo } from '@/stores/adminInfo'
|
||||||
|
|
||||||
const height = mainHeight(20)
|
const height = mainHeight(20)
|
||||||
const zoom = ref(12)
|
const adminInfo = useAdminInfo()
|
||||||
const center = ref({lng: 0, lat: 0});
|
const datePickerRef = ref()
|
||||||
const handler = ({ BMap, map }: any) => {
|
const zoom = ref(11)
|
||||||
console.log(BMap, map)
|
const center = ref({
|
||||||
center.value.lng = 116.404
|
lng: 0,
|
||||||
center.value.lat = 39.915
|
lat: 0
|
||||||
|
})
|
||||||
|
const infoWindowPoint = ref<anyObj>({
|
||||||
|
lng: 0,
|
||||||
|
lat: 0,
|
||||||
|
show: false
|
||||||
|
})
|
||||||
|
const areaLineInfo = ref<any>([])
|
||||||
|
const siteList = ref<any>([])
|
||||||
|
const polyline = ref<any>([])
|
||||||
|
const lineId = ref('')
|
||||||
|
const handler = async ({ BMap, map }: any) => {
|
||||||
|
let { data } = await getAreaLineInfo({
|
||||||
|
deptIndex: adminInfo.$state.deptId,
|
||||||
|
monitorFlag: 2,
|
||||||
|
powerFlag: 2,
|
||||||
|
searchBeginTime: datePickerRef.value.timeValue[0],
|
||||||
|
searchEndTime: datePickerRef.value.timeValue[1],
|
||||||
|
serverName: 'event-boot',
|
||||||
|
statisticalType: {}
|
||||||
|
})
|
||||||
|
let r = 0.0035
|
||||||
|
data.forEach((item: any) => {
|
||||||
|
// 变电站图标
|
||||||
|
item.icon = {
|
||||||
|
url: new URL('@/assets/jcd.png', import.meta.url).href,
|
||||||
|
size: {
|
||||||
|
width: 40,
|
||||||
|
height: 40
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (item.children.length > 10 && item.children.length < 100) {
|
||||||
|
r = 0.0055
|
||||||
|
} else if (item.children.length >= 100) {
|
||||||
|
r = 0.01055
|
||||||
|
}
|
||||||
|
item.children.forEach((val: any, i: number) => {
|
||||||
|
val.lng = item.lng + r * Math.cos((2 * Math.PI * i) / item.children.length)
|
||||||
|
val.lat = item.lat + r * Math.sin((2 * Math.PI * i) / item.children.length)
|
||||||
|
// 监测点图标
|
||||||
|
val.icon = {
|
||||||
|
url: '',
|
||||||
|
size: {
|
||||||
|
width: 40,
|
||||||
|
height: 40
|
||||||
|
}
|
||||||
|
}
|
||||||
|
switch (val.runFlag) {
|
||||||
|
case 0:
|
||||||
|
// 投运
|
||||||
|
if (val.comFlag == 0) {
|
||||||
|
// 异常
|
||||||
|
if (val.noDealCount > 0) {
|
||||||
|
// 异常有暂降
|
||||||
|
val.icon.url = new URL('@/assets/txycyzj.gif', import.meta.url).href
|
||||||
|
} else if (val.noDealCount == 0) {
|
||||||
|
// 异常无暂降
|
||||||
|
val.icon.url = new URL('@/assets/txzdwzj.png', import.meta.url).href
|
||||||
|
}
|
||||||
|
} else if (val.comFlag == 1) {
|
||||||
|
// 正常
|
||||||
|
if (val.noDealCount > 0) {
|
||||||
|
// 正常有暂降
|
||||||
|
val.icon.url = new URL('@/assets/txzcyzj.gif', import.meta.url).href
|
||||||
|
} else if (val.noDealCount == 0) {
|
||||||
|
// 正常无暂降
|
||||||
|
val.icon.url = new URL('@/assets/txzcwzj.png', import.meta.url).href
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case 1:
|
||||||
|
val.icon.url = new URL('@/assets/rby.png', import.meta.url).href
|
||||||
|
break
|
||||||
|
case 2:
|
||||||
|
val.icon.url = new URL('@/assets/ty.png', import.meta.url).href
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
break
|
||||||
|
}
|
||||||
|
polyline.value.push([
|
||||||
|
{
|
||||||
|
lng: item.lng,
|
||||||
|
lat: item.lat
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lng: val.lng,
|
||||||
|
lat: val.lat
|
||||||
|
}
|
||||||
|
])
|
||||||
|
})
|
||||||
|
|
||||||
|
areaLineInfo.value.push(...item.children)
|
||||||
|
})
|
||||||
|
siteList.value = data
|
||||||
|
console.log(areaLineInfo.value)
|
||||||
|
console.log(siteList.value)
|
||||||
|
center.value.lng = areaLineInfo.value[0].lng
|
||||||
|
center.value.lat = areaLineInfo.value[0].lat
|
||||||
|
}
|
||||||
|
|
||||||
|
const syncCenterAndZoom = (e: any) => {
|
||||||
|
zoom.value = e.target.getZoom()
|
||||||
|
}
|
||||||
|
const pointChange = (val: string) => {
|
||||||
|
if (!val) return
|
||||||
|
let data = areaLineInfo.value.find((item: any) => item.lineId == val)
|
||||||
|
center.value.lng = data.lng
|
||||||
|
center.value.lat = data.lat
|
||||||
|
infoWindowPoint.value = data
|
||||||
|
infoWindowPoint.value.show = true
|
||||||
zoom.value = 15
|
zoom.value = 15
|
||||||
map.enableScrollWheelZoom(true)
|
}
|
||||||
|
const markerClick = (e: any) => {
|
||||||
|
console.log(e)
|
||||||
|
infoWindowPoint.value = e
|
||||||
|
infoWindowPoint.value.show = true
|
||||||
|
console.log(infoWindowPoint.value)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style lang='scss' scoped>
|
||||||
.bm-view {
|
.bm-view {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.selectBox {
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
left: 165px;
|
||||||
|
z-index: 2000;
|
||||||
|
width: 240px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconBox {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
z-index: 2000;
|
||||||
|
width: 150px;
|
||||||
|
height: 260px;
|
||||||
|
padding: 10px;
|
||||||
|
background: rgba(255, 255, 255, 0.75) !important;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
.div {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 20px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||