复刻冀北地图

src/views/pqs/panorama/components/map.vue

@@ -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

src/views/pqs/panorama/components/style/map.scss

@@ -169,32 +169,7 @@
         font-size: 16px;
     }
 }
-:deep(.my-radiusPop) {
-    .sgmap-popup-tip {
-        display: none;
-    }
-    .sgmap-popup-content {
-        width: 200px;
-        height: 50px;
-        border-radius: 5px;
-        padding: 5px 5px !important;
-        background-color: #00000000;
-        color: #fff;
-    }
-    img {
-        height: 40px;
-        margin-right: 10px;
-    }
-    .infoBox {
-        flex: 1;
-        display: flex;
-        justify-content: space-around;
-        text-align: center;
-        div {
-            cursor: pointer;
-        }
-    }
-}
+
 
 #nrDeviceCard {
     position: absolute;

src/views/pqs/panorama/index.vue

@@ -167,7 +167,7 @@ const GridDiagram = (k?: number, num?: number) => {
 
         if (value) VITE_FLAG ? mapRef.value.flyTo({ coordinate: value.LngLat }, value.zoom) : ''
     } else {
-        VITE_FLAG ? mapRef.value.flyTo({ coordinate: [116.84428600000001, 40.57707185292256] }, 6.709267680647425) : ''
+        VITE_FLAG ? mapRef.value.flyTo({ coordinate: [116.84428600000001, 40.57707185292256] }, 8) : ''
     }
 }
 const info = () => {
@@ -176,9 +176,9 @@ const info = () => {
     form.value.endTime = datePickerRef.value.timeValue[1]
     form.value.searchEndTime = datePickerRef.value.timeValue[1]
 
-    form.value.type = datePickerRef.value.interval
+    form.value.type = 1//datePickerRef.value.interval
 
-    // VITE_FLAG ? mapRef.value.grids(form.value) : ''
+    VITE_FLAG ? mapRef.value.grids(form.value) : ''
     if (control.value == 1) {
         mapLRef.value.info(form.value)
         mapRRef.value.info(form.value)
@@ -249,14 +249,14 @@ onMounted(() => {
 
 .mapL {
     position: absolute;
-    top: 10px;
+    top: 5px;
     // z-index: 1;
     left: 10px;
 }
 
 .mapR {
     position: absolute;
-    top: 10px;
+    top: 5px;
     // z-index: 1;
     right: 10px;
 }