百度地图
仲么了
20
index.html
@@ -1,13 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<html lang='en'>
|
||||
<head>
|
||||
<meta charset='UTF-8' />
|
||||
<link rel='icon' type='image/svg+xml' href='/favicon.ico' />
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
|
||||
<title>电能质量数据监测云平台</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</head>
|
||||
<body>
|
||||
<div id='app'></div>
|
||||
<script type='module' src='/src/main.ts'></script>
|
||||
</body>
|
||||
</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)
|
||||
|
||||
app.use(BaiduMap, {
|
||||
ak: 'RpQi6WNFZ9tseKzhdwOQsXwFsoVntnsN'
|
||||
ak: 'RpQi6WNFZ9tseKzhdwOQsXwFsoVntnsN',
|
||||
|
||||
// type: 'WebGL' // ||API 默认API (使用此模式 BMap=BMapGL)
|
||||
})
|
||||
app.use(router)
|
||||
|
||||
@@ -2,3 +2,4 @@
|
||||
@use '@/styles/vxeTable';
|
||||
@use '@/styles/element';
|
||||
@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>
|
||||
<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
|
||||
class="bm-view"
|
||||
:zoom="zoom"
|
||||
:center="{ lng: 116.404, lat: 39.915 }"
|
||||
@ready="handler"
|
||||
:style="height"
|
||||
></baidu-map>
|
||||
class='bm-view'
|
||||
:zoom='zoom'
|
||||
:map-click='false'
|
||||
:scroll-wheel-zoom='true'
|
||||
:center='center'
|
||||
@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>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
<script setup lang='ts'>
|
||||
import { BmlMarkerClusterer } from 'vue-baidu-map-3x'
|
||||
import { ref } from 'vue'
|
||||
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 zoom = ref(12)
|
||||
const center = ref({lng: 0, lat: 0});
|
||||
const handler = ({ BMap, map }: any) => {
|
||||
console.log(BMap, map)
|
||||
center.value.lng = 116.404
|
||||
center.value.lat = 39.915
|
||||
const adminInfo = useAdminInfo()
|
||||
const datePickerRef = ref()
|
||||
const zoom = ref(11)
|
||||
const center = ref({
|
||||
lng: 0,
|
||||
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
|
||||
map.enableScrollWheelZoom(true)
|
||||
}
|
||||
const markerClick = (e: any) => {
|
||||
console.log(e)
|
||||
infoWindowPoint.value = e
|
||||
infoWindowPoint.value.show = true
|
||||
console.log(infoWindowPoint.value)
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
<style lang='scss' scoped>
|
||||
.bm-view {
|
||||
width: 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>
|
||||
|
||||