同步现场电网一张图代码代码

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

@@ -2,6 +2,54 @@
     <DatePicker ref="datePickerRef" style="display: none" />
     <div id="map" style="width: 100%; height: 100%" v-show="prop.lineInfo"></div>
     <div id="nrDeviceCard"></div>
+    <!-- 搜索框 -->
+    <div class="query-box-wrap">
+        <el-input
+            v-model.trim="inputQuery"
+            style="height: 46px; width: 334px"
+            @keyup.enter="DeviceQ"
+            placeholder="请输入设备名称"
+        >
+            <template #prefix>
+                <div class="Icon"></div>
+            </template>
+
+            <template #suffix>
+                <el-icon @click="DeviceQ" class="el-input__icon"><Search /></el-icon>
+            </template>
+        </el-input>
+    </div>
+    <!-- 搜索内容展示 -->
+    <div class="query-box-wrap collapse" v-show="showWrap">
+        <div v-if="QueryList.length == 0" class="collapse_none">查询无结果</div>
+        <el-collapse v-if="QueryList.length > 0 && showCollapse" v-model="activeName" accordion>
+            <el-collapse-item v-for="(item, i) in QueryList" :name="i">
+                <template #title>
+                    {{ item.psrName }}
+                    <span class="ml10" style="color: #0d867f">{{ item.count }}</span>
+                </template>
+                <div class="collapseBox">
+                    <div
+                        class="group-list__item"
+                        :style="colorKey == k.coordinate ? 'background-color: #009ea81a;' : ''"
+                        v-for="k in item.psrList"
+                        @click="flyTo(k)"
+                    >
+                        <p>{{ k.psrName }}</p>
+                        <p>{{ k.vlevelName }}|{{ k.maintOrgName }}</p>
+                    </div>
+                </div>
+            </el-collapse-item>
+        </el-collapse>
+        <div
+            v-if="QueryList.length > 0 && !showCollapse"
+            class="collapse_none"
+            style="color: #009ea8"
+            @click="showCollapse = true"
+        >
+            展开搜索结果
+        </div>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -11,6 +59,8 @@ import { useDictData } from '@/stores/dictData'
 // import { devicesDemo } from '@/assets/panorama/devicesDemo.js'
 import { getAreaLineInfo } from '@/api/event-boot/areaInfo'
 import DatePicker from '@/components/form/datePicker/index.vue'
+import { getGridDiagramAreaData } from '@/api/device-boot/panorama'
+import { Search } from '@element-plus/icons-vue'
 import '@/assets/panorama/narimap.css'
 import '@/assets/panorama/nrgisCommon.css'
 const emit = defineEmits(['changeValue', 'drop', 'show'])
@@ -19,38 +69,62 @@ const prop = defineProps({
         type: Boolean
     }
 })
+const inputQuery: any = ref('')
+const activeName: any = ref(0)
 const narimap = window?.narimap
 const dictData = useDictData()
 const datePickerRef = ref()
+const form: any = ref({})
+const colorKey = ref('')
+const PopKey = ref(0)
+const assessList: any = ref([])
+const linList: any = ref([])
+const QueryList: any = ref([])
+const AreaData: any = ref([])
 const map: any = ref(null)
+const showCollapse: any = ref(true)
+const showWrap: any = ref(false)
 const deviceCard: any = ref(null)
 const popup: any = ref(null)
+const DeviceQuery: any = ref(null)
+const rPopList: any = ref([])
 const powerManageGridMap: any = ref(null)
 const orgId = ref(dictData.state.area[0].code)
 const deptIndex = ref(dictData.state.area[0].id)
-narimap.Require(
-    ['PSRMap', 'Thematic', 'Components.Query', 'Components.RegionSelector', 'Components.DeviceTreeGW'],
-    () => {
-        if (narimap.Config.examples.notlogin) {
-            initMap(narimap.Config.styles.sjDark)
-        } else {
-            //电网GIS地图服务登录
-            narimap.SGAuth.login()
-                .then((result: any) => {
-                    if (result.success) {
-                        console.log('登录成功')
-                    } else {
-                        console.log('登录失败', result)
-                    }
-                    //默认打开电网GIS影像图
-                    initMap(narimap.Config.styles.sjDark)
-                })
-                .catch((err: any) => {
-                    console.log('错误', err)
-                })
-        }
+const popupOffsets = ref({
+    top: [0, 0],
+    'top-left': [0, 0],
+    'top-right': [0, 0],
+    bottom: [0, -10],
+    'bottom-left': [25, -35],
+    'bottom-right': [-25, -35],
+    left: [10, -10],
+    right: [-10, -10]
+})
+const mapList: any = ref([])
+const flag = ref(true)
+import { getAssessOverview } from '@/api/device-boot/panorama'
+
+narimap.Require(['PSRMap', 'Thematic', 'Components.Query', 'Components.RegionSelector'], () => {
+    if (narimap.Config.examples.notlogin) {
+        initMap(narimap.Config.styles.sjDark)
+    } else {
+        //电网GIS地图服务登录
+        narimap.SGAuth.login()
+            .then((result: any) => {
+                if (result.success) {
+                    console.log('登录成功')
+                } else {
+                    console.log('登录失败', result)
+                }
+                //默认打开电网GIS影像图
+                initMap(narimap.Config.styles.sjDark)
+            })
+            .catch((err: any) => {
+                console.log('错误', err)
+            })
     }
-)
+})
 function initMap(styleurl: any) {
     map.value = new narimap.Map({
         container: 'map',
@@ -63,11 +137,11 @@ function initMap(styleurl: any) {
         localIdeographFontFamily: 'Microsoft YoHei'
     })
     map.value.on('load', () => {
+        DeviceQuery.value = new narimap.ResourceQuery.DeviceQuery()
         addLayer()
 
         nextTick(() => {
             // 添加图层
-
             Query()
         })
     })
@@ -119,7 +193,7 @@ const Query = () => {
             levels: {
                 city: {
                     // minzoom: 10,
-                    maxzoom: 13
+                    maxzoom: 9
                 }
             }
         },
@@ -129,18 +203,22 @@ const Query = () => {
             cascade: true
         }
     )
+    powerManageGridMap.value.on('load', function () {
+        powerLoad()
+    })
 
     setTimeout(() => {
         addLine()
-        const query = new narimap.Components.Query(map.value)
-        query.init(map.value.getContainer())
-        query.setQueryOrgId(orgId.value)
+        // const query = new narimap.Components.Query(map.value)
+        // query.init(map.value.getContainer())
+        // query.setQueryOrgId(orgId.value)
 
         setTimeout(() => {
             locatePositions({ data: dictData.state.area[0] })
         }, 500)
     }, 500)
 }
+
 // 添加变电站线路
 const addLine = () => {
     //添加电网图层
@@ -148,21 +226,17 @@ const addLine = () => {
         orgId: orgId.value == '1100F3DE20806FADE050007F01006CBE' ? '' : orgId.value
     })
     psrmap.addPSR()
+    psrmap.filterByDomain(1)
     initDeviceCard()
-    const devTree = new narimap.Components.DeviceTreeGW(map.value)
 
-    devTree.init({ orgId: orgId.value })
-
-    //添加电网要素点击事件
-    // device-tree-gw__button
-    document.querySelectorAll('.device-tree-gw__button')[0].onclick = function (v: any) {
-        emit('show', true)
-    }
     //添加电网要素点击事件
     psrmap.on('click', (features: any) => {
         console.log(features)
+        showCollapse.value = false
+        if (inputQuery.value.length == 0) showWrap.value = false
     })
 }
+
 // 添加变电站弹框
 const initDeviceCard = () => {
     deviceCard.value && deviceCard.value.close()
@@ -195,6 +269,86 @@ const initDeviceCard = () => {
     })
     //
 }
+
+const grids = (row: any) => {
+    form.value = {
+        ...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
+    }
+
+    // 综合评估
+    getAssessOverview(form.value).then(res => {
+        assessList.value = res.data?.children
+        getGridDiagramAreaData({ ...form.value, deptIndex: deptIndex.value }).then((res: any) => {
+            AreaData.value = res.data
+            GridDiagramArea()
+        })
+        if (powerManageGridMap.value) powerLoad()
+    })
+}
+
+// 加载行政区划
+const powerLoad = () => {
+    // dictData.state.area[0]
+
+    let colors: any = [
+        {
+            orgIds: [],
+            fill: {
+                color: '#339966'
+            }
+        },
+        {
+            orgIds: [],
+            fill: {
+                color: '#3399ff'
+            }
+        },
+        {
+            orgIds: [],
+            fill: {
+                color: '#ffcc33'
+            }
+        },
+        {
+            orgIds: [],
+            fill: {
+                color: '#ff9900'
+            }
+        },
+        {
+            orgIds: [],
+            fill: {
+                color: '#cc0000'
+            }
+        }
+    ]
+
+    assessList.value.forEach((item: any) => {
+        if (item.score == 3.14159) {
+        } else if (item.score > 4.5) {
+            colors[0].orgIds.push(item.code)
+        } else if (item.score > 4) {
+            colors[1].orgIds.push(item.code)
+        } else if (item.score > 3) {
+            colors[2].orgIds.push(item.code)
+        } else if (item.score > 2) {
+            colors[3].orgIds.push(item.code)
+        } else if (item.score > 0) {
+            colors[4].orgIds.push(item.code)
+        }
+    })
+
+    powerManageGridMap.value.setColorByOrgId({
+        orgIdColors: colors
+    })
+}
 // 添加图层
 const addLayer = () => {
     map.value.loadImage(
@@ -219,8 +373,8 @@ const addLayer = () => {
                     // 为图层设置引用的图片ID
                     'icon-image': 'poi1',
                     'icon-size': 0.7,
-                    'icon-ignore-placement': true,
-                    'icon-allow-overlap': true
+                    'icon-ignore-placement': false,
+                    'icon-allow-overlap': false
                 }
             })
             map.value.addLayer({
@@ -238,7 +392,7 @@ const addLayer = () => {
                     // 为图层设置引用的图片ID
 
                     'text-field': '{name}',
-                    'icon-ignore-placement': true,
+                    'icon-ignore-placement': false,
                     'text-ignore-placement': true,
                     'text-size': 12,
                     'text-max-width': 8,
@@ -278,19 +432,9 @@ const addLayer = () => {
                     'icon-image': 'poi2',
                     'icon-size': 0.7,
                     // 'text-field': '{name}',
-                    'icon-ignore-placement': true,
-                    'icon-allow-overlap': true
-                    // 'text-ignore-placement': false,
-                    // 'text-size': 12,
-                    // 'text-max-width': 8,
-                    // 'text-offset': [0, 2],
-                    // 'text-font': ['Microsoft YaHei Regular']
+                    'icon-ignore-placement': false,
+                    'icon-allow-overlap': false
                 }
-                // paint: {
-                //     'text-color': '#ccc',
-                //     // 'text-halo-color': '#FFFFFF',
-                //     'text-halo-width': 1.33333
-                // }
             })
         }
     )
@@ -316,8 +460,8 @@ const addLayer = () => {
                     // 为图层设置引用的图片ID
                     'icon-image': 'poi3',
                     'icon-size': 0.6,
-                    'icon-ignore-placement': true,
-                    'icon-allow-overlap': true
+                    'icon-ignore-placement': false,
+                    'icon-allow-overlap': false
                 },
                 Paint: {
                     'icon-opacity': 10
@@ -325,10 +469,41 @@ const addLayer = () => {
             })
         }
     )
+    map.value.loadImage(
+        new URL('@/assets/dw.png', import.meta.url).href, // 图片地址
+        (error: any, image: any) => {
+            if (error) throw error
+
+            //添加图片到map，第一个参数为图片设置id
+            map.value.addImage('poi4', image)
+            map.value.addLayer({
+                id: 'spotImg-DW',
+                type: 'symbol',
+                minzoom: 8,
+                zIndex: 9999,
+                source: {
+                    type: 'geojson',
+
+                    data: {
+                        type: 'FeatureCollection',
+                        features: []
+                    }
+                },
+                layout: {
+                    // 为图层设置引用的图片ID
+                    'icon-image': 'poi4',
+                    'icon-size': 0.35,
+                    // 'text-field': '{name}',
+                    'icon-ignore-placement': false,
+                    'icon-allow-overlap': false
+                }
+            })
+        }
+    )
     // 添加地图弹框
     map.value.on('click', (e: any) => {
         const features = map.value.queryRenderedFeatures(e.point, {
-            layers: ['spotImg-ZY', 'spotImg-TY', 'spotImg-GJ']
+            layers: ['spotImg-ZY', 'spotImg-TY', 'spotImg-GJ', 'spotImg-DW']
         })
 
         if (features.length > 0) {
@@ -337,45 +512,35 @@ const addLayer = () => {
                 deviceCard.value.popup && deviceCard.value.popup.remove()
             }, 10)
             let data = JSON.parse(features[0].properties.list)
-            let markerHeight = 20
-            let markerRadius = 10
-            let linearOffset = 25
-            let popupOffsets = {
-                top: [0, 0],
-                'top-left': [0, 0],
-                'top-right': [0, 0],
-                bottom: [0, -markerHeight + 10],
-                'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
-                'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
-                left: [markerRadius, (markerHeight - markerRadius) * -1],
-                right: [-markerRadius, (markerHeight - markerRadius) * -1]
-            }
 
-            popup.value = new narimap.Popup({ offset: popupOffsets, className: 'my-popup' })
+            popup.value = new narimap.Popup({ offset: popupOffsets.value, className: 'my-popup' })
                 .setLngLat([data.lng, data.lat])
                 .setHTML(
-                    `<div class="popup-box"><div class="popup_content">
-                  <img src="${data.imageUrl}"/>
-                  <div>
-                      <div style="display: flex">
-                          <span class="title">${data.lineName}</span>
-                          <span class="state" style="background-color: ${data.comFlag == 0 ? '#ff0000' : '#3ab34a'};">${
-                        data.comFlag == 0 ? '停运' : '在运'
-                    }</span>
-                          </div>
-                          <div class="info">
-                           <span>${data.subName} </span>
-                           <span>${data.voltageName}</span>
-                          </div>
-
-                   </div>
-                  </div>
-                  <div class="popup_footer">
-                      <span id="ids" data-sid="${data.lineId}">查看详情</span>
-                  </div>
-                  </div>
-
-                  `
+                    ` <div class="popup-box">
+                        <div class="popup_content">
+                            <img src="${data.imageUrl}" />
+                            <div>
+                                <div style="display: flex">
+                                    <span class="title">${data.lineName}</span>
+                                    <span
+                                        class="state"
+                                        style="background-color: ${data.comFlag == 0 ? '#ff0000' : '#3ab34a'};"
+                                    >
+                                        ${data.comFlag == 0 ? '停运' : '在运'}
+                                    </span>
+                                </div>
+                                <div class="info">
+                                    <span>${data.subName} </span>
+                                    <span>${data.voltageName}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="popup_footer">
+                            <span id="ids" data-sid="${data.lineId}">
+                                查看详情
+                            </span>
+                        </div>
+                    </div>`
                 )
                 .addTo(map.value)
             document.getElementById('ids').onclick = function (v: any) {
@@ -384,10 +549,22 @@ const addLayer = () => {
             }
         }
     })
+
+    // 监听地图缩放完成事件
+    map.value.on('zoomend', (e: any) => {
+        // console.log(123, map.value.getCenter())
+
+        if (map.value.getZoom() > 8 || map.value.getZoom() < 6) {
+            // rPopList.value.remove()
+            rPopList.value.map((item: any) => item.remove())
+            rPopList.value = []
+        } else {
+            if (mapList.value.length > 0) radiusPop()
+        }
+    })
 }
 //添加多个监测点
 const addMarkers = async (row?: any, key?: any) => {
-    console.log('🚀 ~ addMarkers ~ key:', key)
     if (map.value == null) return
     let params = {
         deptIndex: deptIndex.value,
@@ -399,7 +576,9 @@ const addMarkers = async (row?: any, key?: any) => {
         statisticalType: {},
         ...row
     }
+
     let { data } = await getAreaLineInfo(params)
+
     let r = 0.0035
     let tempFeatureZ: any = []
     let tempFeatureT: any = []
@@ -431,7 +610,7 @@ const addMarkers = async (row?: any, key?: any) => {
                     list: val
                 }
             }
-            if (key == 0) {
+            if (key == 1) {
                 switch (val.type) {
                     case 0:
                         tempFeatureZ.push(tempFeature)
@@ -454,90 +633,185 @@ const addMarkers = async (row?: any, key?: any) => {
         })
     })
 
+    if (flag.value) {
+        linList.value = [...tempFeatureZ, ...tempFeatureT]
+
+        flag.value = false
+    }
+    //    清除图层图片
     map.value.getSource('spotImg-ZY').setData({
         type: 'FeatureCollection',
-        features: tempFeatureZ
+        features: []
     })
-  
-    map.value.setLayerZoomRange('spotImg-GJ', key != undefined ? 0 : 8)
-    map.value.setLayerZoomRange('spotImg-TY', key != undefined ? 0 : 8)
-    map.value.setLayerZoomRange('spotImg-ZY', key != undefined ? 0 : 8)
-    if (key == 0) {
-        map.value.getSource('spotImg-GJ').setData({
+    map.value.getSource('spotImg-TY').setData({
+        type: 'FeatureCollection',
+        features: []
+    })
+    map.value.getSource('spotImg-GJ').setData({
+        type: 'FeatureCollection',
+        features: []
+    })
+    map.value.getSource('spotImg-DW').setData({
+        type: 'FeatureCollection',
+        features: []
+    })
+    if (key != undefined) map.value.easeTo({ zoom: 8.1 })
+
+    if (key == undefined) {
+        map.value.getSource('spotImg-DW').setData({
             type: 'FeatureCollection',
-            features: tempFeatureT
+            features: [...tempFeatureT, ...tempFeatureZ]
+        })
+    } else if (key == 1) {
+        map.value.getSource('spotImg-ZY').setData({
+            type: 'FeatureCollection',
+            features: tempFeatureZ
         })
         map.value.getSource('spotImg-TY').setData({
             type: 'FeatureCollection',
-            features: []
+            features: tempFeatureT
         })
     } else {
-        map.value.getSource('spotImg-GJ').setData({
+        map.value.getSource('spotImg-ZY').setData({
             type: 'FeatureCollection',
-            features: []
-        })
-        map.value.getSource('spotImg-TY').setData({
-            type: 'FeatureCollection',
-            features: tempFeatureT
+            features: [...tempFeatureZ, ...tempFeatureT]
         })
+        // map.value.getSource('spotImg-TY').setData({
+        //     type: 'FeatureCollection',
+        //     features: tempFeatureT
+        // })
     }
 
+    // console.log('🚀 ~ addMarkers ~  map.value.getStyle().layers:', map.value.getStyle().layers)
+    const layers = map.value.getStyle().layers
+    const topLayer = layers[layers.length - 1]
+    map.value.moveLayer('spotImg-DW', topLayer.id)
+    map.value.moveLayer('spotImg-ZY', topLayer.id)
+    map.value.moveLayer('spotImg-TY', topLayer.id)
+    map.value.moveLayer('spotImg-GJ', topLayer.id)
+
     map.value.getSource('spotName').setData({
         type: 'FeatureCollection',
         features: [...tempFeatureT, ...tempFeatureZ]
     })
 }
+const GridDiagramArea = () => {
+    let List = [
+        {
+            name: '唐山',
+            LngLat: [118.335849137, 39.7513593355]
+        },
+        {
+            name: '张家口',
+            LngLat: [115.032504679, 40.8951549951]
+        },
+        {
+            name: '秦皇岛',
+            LngLat: [119.185113833, 40.1179119754]
+        },
+        {
+            name: '承德',
+            LngLat: [117.548498365, 41.3775890632]
+        },
+        {
+            name: '廊坊',
+            LngLat: [116.628004129, 39.0589378611]
+        }
+    ]
 
-onMounted(() => {
-    // 监听地图初始化完成事件
-})
+    List.forEach((item: any) => {
+        assessList.value.forEach((y: any) => {
+            if (item.name == y.name) {
+                if (y.score == 3.14159) {
+                } else if (y.score > 4.5) {
+                    item.background = '#33996696'
+                } else if (y.score > 4) {
+                    item.background = '#3399ff96'
+                } else if (y.score > 3) {
+                    item.background = '#ffcc3396'
+                } else if (y.score > 2) {
+                    item.background = '#ff990096'
+                } else if (y.score > 0) {
+                    item.background = '#cc000096'
+                }
+            }
+        })
+
+        AreaData.value.forEach((k: any, i: any) => {
+            if (item.name == k.orgName) {
+                k.LngLat = item.LngLat
+                k.background = item.background
+            }
+        })
+    })
+    mapList.value = AreaData.value.filter((item: any) => item.orgName != '超高压' && item.orgName != '风光储')
+    setTimeout(() => {
+        radiusPop()
+    }, 0)
+}
+// 添加统计弹框
+const radiusPop = (k?: number) => {
+    if (k != undefined) PopKey.value = k
+    if (rPopList.value.length > 0) {
+        rPopList.value.map((item: any) => item.remove())
+        rPopList.value = []
+    }
+
+    mapList.value.forEach((item: any) => {
+        let infoText = ''
+        if (PopKey.value == 0) {
+            // 监测点
+            infoText = `<img src="${new URL(`@/assets/img/JCD-ZS.png`, import.meta.url)}" />
+                        <div class="infoBox">
+                            <div>总数<p>${item.lineNum} 个</p></div>
+                            <div>在线<p>${item.onlineNum} 个</p></div>
+                            <div>告警<p>${item.alarm} 个</p></div>
+                        </div>`
+        } else if (PopKey.value == 1) {
+            // 变电站
+            infoText = `<img src="${new URL(`@/assets/img/BDZ-ZS.png`, import.meta.url)}" />
+                        <div class="infoBox">
+                            <div>总数<p>${item.subNum} 个</p></div>                           
+                            <div>告警<p>${item.alarmSubNum} 个</p></div>
+                        </div>`
+        } else if (PopKey.value == 2) {
+            // 终端
+            infoText = `<img src="${new URL(`@/assets/img/ZD-ZS.png`, import.meta.url)}" />
+                        <div class="infoBox">
+                            <div>总数<p>${item.deviceNum} 个</p></div>                           
+                            <div>在运<p>${item.onDevice} 个</p></div>
+                        </div>`
+        }
+
+        let pop = new narimap.Popup({
+            offset: popupOffsets.value,
+            className: 'my-radiusPop',
+            closeButton: false,
+            closeOnClick: false
+        })
+            .setLngLat(item.LngLat)
+            .setHTML(
+                ` <div class="sgmap-popup-content" style="background-color: ${item.background};">
+
+
+
+
+                    <div style="display: flex;">` +
+                    infoText +
+                    ` </div>
+                </div>`
+            )
+            .addTo(map.value)
+        rPopList.value.push(pop)
+    })
+}
 
 const locatePositions = (e: any) => {
-    // let mapList = [
-    //     {
-    //         code: '1100F3DE20806FADE050007F01006CBE', //冀北
-    //         centralCoordinate: [117.14740482, 40.5478448705],
-    //         zoom: 6
-    //     },
-    //     {
-    //         code: '1100F3DE246A6FADE050007F01006CBE', //超高压
-    //         centralCoordinate: [117.14740482, 40.5478448705],
-    //         zoom: 6
-    //     },
-
-    //     {
-    //         code: '1100F3DE22316FADE050007F01006CBE', //"唐山"
-    //         centralCoordinate: [118.335849137, 39.7213593355],
-    //         zoom: 7
-    //     },
-    //     {
-    //         code: '1100F3DE20816FADE050007F01006CBE', //张家口
-    //         centralCoordinate: [115.032504679, 40.8651549951],
-    //         zoom: 7
-    //     },
-    //     {
-    //         code: '1100F3DE23F96FADE050007F01006CBE', //秦皇岛
-    //         centralCoordinate: [119.185113833, 40.0879119754],
-    //         zoom: 7
-    //     },
-    //     {
-    //         code: '1100F3DE23466FADE050007F01006CBE', //承德
-    //         centralCoordinate: [117.548498365, 41.3475890632],
-    //         zoom: 7
-    //     },
-    //     {
-    //         code: '1100F3DE218D6FADE050007F01006CBE', //廊坊
-    //         centralCoordinate: [116.628004129, 39.2589378611],
-    //         zoom: 7
-    //     }
-    // ]
-    // let data: any = []
-    // data = mapList.filter(item => item.code == e.data.code) || []
-
     if (map.value != null) {
         deptIndex.value = e.data.id
         // 加载点
         addMarkers()
+
         powerManageGridMap.value.drillDown({
             // 判断超高压
             orgId: e.data.code == '1100F3DE246A6FADE050007F01006CBE' ? '1100F3DE20806FADE050007F01006CBE' : e.data.code,
@@ -545,131 +819,92 @@ const locatePositions = (e: any) => {
         })
     }
 }
-defineExpose({ locatePositions, addMarkers })
+// 电网查询功能
+const DeviceQ = () => {
+    showCollapse.value = true
+    if (inputQuery.value.length == 0) return
+
+    let list = []
+    // linList.value
+    DeviceQuery.value.queryDeviceByName(
+        {
+            orgId: orgId.value,
+            maxRecord: 9999,
+            keyword: inputQuery.value,
+            devTypes: [
+                {
+                    devType: 'zf05',
+                    distribution: 1
+                },
+                {
+                    devType: 'zf01',
+                    distribution: 1
+                },
+                {
+                    devType: 'zf02',
+                    distribution: 1
+                },
+                {
+                    devType: 'zf03',
+                    distribution: 1
+                },
+                {
+                    devType: 'zf04',
+                    distribution: 1
+                }
+            ]
+        },
+        (res: any) => {
+            list = res.result.psrDataList.map((item: any) => {
+                item.psrName = item.psrList[0].psrTypeName
+                return item
+            })
+            let regex = new RegExp(inputQuery.value, 'i')
+            let data = linList.value
+                .filter((item: any) => regex.test(item.properties.name))
+                .map((item: any) => {
+                    return {
+                        psrName: item.properties.name,
+                        vlevelName: item.properties.list.voltageScale,
+                        maintOrgName: item.properties.list.gdName,
+                        coordinate: [item.properties.list.lng, item.properties.list.lat]
+                    }
+                })
+            // data.replace(//s/g,',')
+
+            // data
+            if (data.length > 0) {
+                list.push({
+                    count: data.length,
+                    psrList: data,
+                    psrName: '监测点'
+                })
+            }
+            QueryList.value = list
+            showWrap.value = true
+        }
+    )
+}
+// 搜索信息定位
+const flyTo = (row: any, zoom?: number) => {
+    if (!map.value) return
+    colorKey.value = row.coordinate
+    map.value.flyTo({
+        center:
+            typeof row.coordinate === 'string'
+                ? narimap.Projection.mercatorToWgs84(row.coordinate.split(' ').map(Number))
+                : row.coordinate, // 位置，飞行后的地图中心点
+        zoom: zoom || 16, // 飞行后的地图缩放级别
+        bearing: 0, // 地图的旋转角度，0-360之间的数字，0表示正北，90表示正东
+        pitch: 0, // 地图的倾斜角，介于0-60之间的数字，0表示俯视视图，60表示垂直视图
+        speed: 2 // 地图视图移动速度
+    })
+}
+
+defineExpose({ locatePositions, addMarkers, grids, DeviceQ, radiusPop, flyTo })
 const height = mainHeight(20)
 </script>
 
 <style lang="scss" scoped>
-:deep(.query-box-wrap) {
-    position: absolute;
-    top: 10px;
-    left: calc(50% - 345px);
-    .query-box {
-        border-radius: 8px 0 0 8px;
-    }
-}
-:deep(.device-tree-gw__button) {
-    position: absolute;
-    top: 10px;
-    border-radius: 0 8px 8px 0;
-    left: calc(50% - 15px);
-    z-index: 0 !important;
-}
-
-:deep(.province-selector) {
-    position: absolute;
-    top: 10px;
-    left: 50%;
-    .distribution__body {
-        height: auto;
-    }
-    .province-selector__options {
-        height: auto;
-    }
-    .province-op {
-        width: 48%;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    .province-selector__button {
-        width: 100px;
-        padding: 4px 12px;
-        span {
-            display: block;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-    }
-    .province-selector__options {
-        z-index: 1;
-    }
-}
-:deep(.sgmap-canvas) {
-    width: 100% !important;
-}
-:deep(.my-popup) {
-    max-width: 400px !important;
-    .popup-box {
-        width: 300px;
-        height: 70px;
-        .popup_content {
-            display: grid;
-            grid-template-columns: 50px 1fr;
-            img {
-                width: 42px;
-                height: 42px;
-            }
-            .title {
-                font-weight: 550;
-            }
-            .state {
-                width: 45px;
-                margin-left: 5px;
-                text-align: center;
-                border-radius: 3px;
-                color: #fff;
-            }
-            .info {
-                color: #18181b99;
-                margin: 5px 0;
-                span {
-                    display: inline-block;
-                    width: 120px;
-                    height: 14px;
-                    line-height: 14px;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    -webkit-box-orient: vertical;
-                    &::after {
-                        display: inline-block;
-                        margin: 0 3px;
-                        content: ' ';
-                        width: 2px;
-                        height: 11px;
-                        background: #e5e6eb73;
-                        vertical-align: middle;
-                    }
-                }
-            }
-        }
-        .popup_footer {
-            padding: 5px 5px;
-            border-top: 1px solid #e5e6eb;
-            color: var(--el-color-primary);
-            span {
-                margin-right: 8px;
-                cursor: pointer;
-            }
-        }
-    }
-    .sgmap-popup-content {
-        padding: 15px 10px 10px !important;
-    }
-    .sgmap-popup-close-button {
-        position: absolute;
-        right: 5px;
-        top: 5px;
-        font-size: 16px;
-    }
-}
-#nrDeviceCard {
-    position: absolute;
-    top: 11px;
-    right: 70px;
-    width: 450px;
-    z-index: 0;
-}
+@use '@/views/pqs/qualityInspeection/panorama/components/style/map.scss';
 </style>