Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

复刻冀北地图

Browse Source
This commit is contained in:
GGJ
2025-01-15 10:44:57 +08:00
parent 72f2c5d0f3
commit 9c688c3bd3
30 changed files with 5996 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

217
src/views/pqs/panorama/components/map.vue
View File

@@ -43,7 +43,7 @@
<div class="collapse_none" style="color: red;cursor: pointer" @click="showWrap = false">关闭</div>
</div>
<baidu-map class="map" :style="height" @ready="initMap" @zoomend='syncCenterAndZoom' :center="center"
:zoom="zoomMap" :scroll-wheel-zoom='true'>
:zoom="zoomMap" :scroll-wheel-zoom='true' >
<!-- 线-->
<div v-if='zoom > 13'>
<bm-polyline :path='path' v-for='(path, index) in polyline' :key='index'></bm-polyline>
@@ -55,7 +55,7 @@
@click='markerClick(path)'></bm-marker>
</template>
<!-- 点 -->
<BmlMarkerClusterer maxZoom='12' v-if='zoom > 9'>
<div :maxZoom='12' v-if='zoom > 9'>
<bm-marker :position='path' v-for='path in areaLineInfo' :key='path.lineId' :icon='path.icon'
@click='markerClick(path)' :zIndex="1">
@@ -64,7 +64,7 @@
:offset="{ height: 33 }" />
</bm-marker>
</BmlMarkerClusterer>
</div>
<!-- 详情 -->
<bm-marker :position='infoWindowPoint' :icon="{ url: '1', size: { width: 0, height: 0 } }">
<bm-info-window :show='infoWindowPoint.show' @close='infoWindowPoint.show = false'>
@@ -98,8 +98,43 @@
</bm-info-window>
</bm-marker>
<!-- 行政区划 -->
<!-- <bm-boundary v-for="item in boundaryList" :name="item.name" :strokeWeight="2" strokeColor="#0e8780"
fillColor="#0e8780" fillOpacity="0.05"></bm-boundary> -->
<div v-if='zoom <= 11'>
<div v-for="item in AreaData">
<bm-polygon v-for="timeK in item.boundary" :path="timeK" :strokeWeight="2" strokeColor="#fff"
:strokeOpacity="1" :fillColor="item.background || ''" :fillOpacity="0.5"></bm-polygon>
</div>
</div>
<!-- 信息弹框 -->
<div v-if='zoom <= 9'>
<bm-overlay v-for="item in AreaData" pane="labelPane" :class="{ sample: true, }"
@draw="draw($event, item.LngLat)">
<div class="my-radiusPop" :style="{ background: item.background }">
<img :src="PopKey == 2 ? imgUrl2 : PopKey == 1 ? imgUrl1 : PopKey == 0 ? imgUrl0 : ''" />
<div class="infoBox">
<div>
总数<br />{{ PopKey == 2 ? item.lineNum : PopKey == 1 ? item.deviceNum : PopKey == 0 ?
item.subNum :
'/' }}
</div>
<div>
{{ PopKey == 2 ? '在线' : PopKey == 1 ? '在运' : '告警' }}<br />{{ PopKey == 2 ?
item.onlineNum :
PopKey
== 1
?
item.alarmSubNum : PopKey == 0 ?
item.onDevice : '/' }}
</div>
<div v-if="PopKey == 2">
告警<br />{{ PopKey == 2 ? item.alarm : PopKey == 1 ? item.xx : PopKey == 0 ? item.xx :
'/' }}
</div>
</div>
</div>
</bm-overlay>
</div>
</baidu-map>
@@ -113,9 +148,11 @@ import { ref, reactive, onMounted } from 'vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import { useDictData } from '@/stores/dictData'
import { Search } from '@element-plus/icons-vue'
import { BaiduMap, BmBoundary, BmPolygon } from 'vue-baidu-map-3x'
import { BaiduMap, BmOverlay } from 'vue-baidu-map-3x'
import { getAssessOverview } from '@/api/device-boot/panorama'
import { getGridDiagramAreaData } from '@/api/device-boot/panorama'
const emit = defineEmits(['changeValue', 'drop', 'show'])
import mapJson from './boundary';
const datePickerRef = ref()
const height = mainHeight(20)
// 页面中直接引入就可以
@@ -123,18 +160,44 @@ const dictData = useDictData()
const inputQuery: any = ref('')
const QueryList: any = ref([])
const activeName: any = ref(0)
const zoomMap = ref(9)
const zoomMap = ref(8.8)
const colorKey = ref('')
const showCollapse: any = ref(true)
const showWrap: any = ref(false)
const deptIndex = ref(dictData.state.area[0].id)
const boundaryList = ref([
{ name: '张家口市' },
{ name: '唐山市' },
{ name: '秦皇岛市' },
{ name: '承德市' },
{ name: '廊坊市' },
const assessList: any = ref([])
const AreaData: any = ref([])
const PopKey: any = ref(2)
const imgUrl0 = new URL('@/assets/img/BDZ-ZS.png', import.meta.url).href
const imgUrl1 = new URL('@/assets/img/ZD-ZS.png', import.meta.url).href
const imgUrl2 = new URL('@/assets/img/JCD-ZS.png', import.meta.url).href
const boundaryList: any = ref([
{
orgName: '唐山',
LngLat: [118.335849137, 39.7513593355],
boundary: mapJson.tsJSON
},
{
orgName: '张家口',
LngLat: [115.032504679, 40.8951549951],
boundary: mapJson.zjkJSON
},
{
orgName: '秦皇岛',
LngLat: [119.185113833, 40.1179119754],
boundary: mapJson.qhdJSON
},
{
orgName: '承德',
LngLat: [117.548498365, 41.3775890632],
boundary: mapJson.cdJSON
},
{
orgName: '廊坊',
LngLat: [116.628004129, 39.0589378611],
boundary: mapJson.lfJSON
}
])
const zoom = ref(13)
@@ -143,7 +206,7 @@ const siteList = ref<any>([])
const polyline = ref<any>([])
const lineId = ref('')
const center = ref({
lng: 116.403765, lat: 39.914850
lng: 116.84428600000001, lat: 40.57707185292256
})
const infoWindowPoint = ref<anyObj>({
lng: 0,
@@ -310,18 +373,90 @@ const DeviceQ = () => {
}
// 定位
const flyTo = (e: any) => {
console.log("🚀 ~ flyTo ~ e:", e)
const flyTo = (e: any, zoom?: number) => {
let regex = new RegExp(e.psrName, 'i')
center.value.lng = e.coordinate[0]
center.value.lat = e.coordinate[1]
zoomMap.value = 15
let data = areaLineInfo.value.filter((item: any) => regex.test(item.lineName))[0]
if (data) {
markerClick(data)
if (zoom) { zoomMap.value = zoom }
else {
zoomMap.value = 15
let data = areaLineInfo.value.filter((item: any) => regex.test(item.lineName))[0]
if (data) {
markerClick(data)
}
}
}
// 市级统计数据
const grids = (row: any) => {
let form = {
...row,
id: row.orgNo,
deptIndex: row.orgNo,
orgId: row.orgNo,
ids: [],
statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
isUpToGrid: row.isUpToGrid,
monitorFlag: row.isUpToGrid == 0 ? null : row.isUpToGrid
}
AreaData.value=[]
assessList.value=[]
// 综合评估
getAssessOverview(form).then(res => {
assessList.value = res.data?.children
getGridDiagramAreaData({ ...form, deptIndex: deptIndex.value }).then((res: any) => {
AreaData.value = res.data
GridDiagramArea()
})
// if (powerManageGridMap.value) powerLoad()
})
}
const radiusPop = (k: any) => {
console.log("🚀 ~ radiusPop ~ k:", k)
if (k != undefined) PopKey.value = k
}
const GridDiagramArea = () => {
boundaryList.value.forEach((item: any) => {
assessList.value.forEach((y: any) => {
if (item.orgName == y.name) {
if (y.score == 3.14159) {
} else if (y.score > 4.5) {
item.background = '#33996699'
} else if (y.score > 4) {
item.background = '#3399ff99'
} else if (y.score > 3) {
item.background = '#ffcc3399'
} else if (y.score > 2) {
item.background = '#db088799'
} else if (y.score > 0) {
item.background = '#ff000099'
}
}
})
AreaData.value.forEach((k: any, i: any) => {
if (item.orgName == k.orgName) {
for (let kk in item) {
k[kk] = item[kk]
}
}
})
})
AreaData.value = AreaData.value.filter((item: any) => item.orgName != '超高压' && item.orgName != '风光储')
setTimeout(() => {
// radiusPop()
}, 0)
}
// 市级统计
const draw = ({ el, BMap, map }, val) => {
const pixel = map.pointToOverlayPixel(new BMap.Point(val[0], val[1]))
el.style.left = pixel.x - 60 + 'px'
el.style.top = pixel.y - 20 + 'px'
}
// 重置
const reset = () => {
@@ -330,7 +465,7 @@ const reset = () => {
}
onMounted(() => {
})
defineExpose({ addMarkers, locatePositions, reset })
defineExpose({ addMarkers, locatePositions, reset, grids, radiusPop, flyTo })
</script>
<style lang="scss" scoped>
@use '@/views/pqs/qualityInspeection/panorama/components/style/map.scss';
@@ -348,4 +483,38 @@ defineExpose({ addMarkers, locatePositions, reset })
padding-bottom: 0px !important;
}
// @use '@/views/pqs/panorama/components/style/map.scss';</style>
.sample {
position: absolute;
.my-radiusPop {
width: 200px;
height: 50px;
border-radius: 5px;
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
// box-shadow: 0 0 5px #000;
color: #fff;
text-align: center;
padding: 5px 5px !important;
display: flex;
img {
height: 40px;
margin-right: 10px;
}
.infoBox {
flex: 1;
display: flex;
justify-content: space-around;
text-align: center;
div {
cursor: pointer;
}
}
}
}
</style>
./cds.js./boundary