admin-sjzx/src/views/pqs/qualityInspeection/panorama/components/map.vue

<template>
    <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">
import { onMounted, reactive, ref, nextTick } from 'vue'
import { mainHeight } from '@/utils/layout'
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'])
const prop = defineProps({
    lineInfo: {
        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(2)
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)
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)
const LngLat = [
    {
        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]
    }
]
import { getAssessOverview } from '@/api/device-boot/panorama'

narimap.Require(['PSRMap', 'Thematic', 'Components.Query','Components.MapSelector', 'Components.RegionSelector'], () => {
    if (narimap.Config.examples.notlogin) {
        initMap(narimap.Config.styles.sjRaster)
    } else {
        //电网GIS地图服务登录
        narimap.SGAuth.login()
            .then((result: any) => {
                if (result.success) {
                    console.log('登录成功')
                } else {
                    console.log('登录失败', result)
                }

                //默认打开电网GIS影像图
                initMap(narimap.Config.styles.sjRaster)
            })
            .catch((err: any) => {
                console.log('错误', err)
            })
    }
})
function initMap(styleurl: any) {
    map.value = new narimap.Map({
        container: 'map',
        style: styleurl,
        zoom: 6,
        center: [116.478935, 39.997761],
        controls: false,
        country: true,
        // 地图默认字体
        localIdeographFontFamily: 'Microsoft YoHei'
    })
    map.value.on('load', () => {
        createMapSelectorComponent()
        DeviceQuery.value = new narimap.ResourceQuery.DeviceQuery()
        addLayer()

        nextTick(() => {
            // 添加图层
            Query()
        })
    })
}

const Query = () => {
    // 添加行政区划
    powerManageGridMap.value = new narimap.ManageGrid.PowerManageGridMap(map.value)
    powerManageGridMap.value.init(
        {
            base: {
                outline: {
                    paint: {
                        'line-color': '#0D867F',
                        'line-width': 1,
                        'line-opacity': 1
                    }
                },
                fill: {
                    paint: {
                        'fill-color': '#0D867F',
                        'fill-opacity': 0.3
                    }
                },
                label: {
                    paint: {
                        'text-color': '#063094',
                        'text-halo-color': '#ffffff',
                        'text-halo-width': 1
                    }
                },
                hover: {
                    type: 'all',
                    fill: {
                        paint: {
                            'fill-color': 'rgba(1,1,1,0)',
                            'fill-opacity': 0
                        }
                    },
                    outline: {
                        paint: {
                            'line-color': '#0D867F',
                            'line-width': 4,
                            'line-opacity': 1
                        }
                    }
                }
            },
            levels: {
                city: {
                    // minzoom: 10,
                    maxzoom: 9
                }
            }
        },
        {
            initOrgIds: [orgId.value],
            //是否联级，包含下属全部子部门，即同样显示编码对应的所属下级
            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)

        setTimeout(() => {
            locatePositions({ data: dictData.state.area[0] })
        }, 500)
    }, 500)
}

// 添加变电站线路
const addLine = () => {
    //添加电网图层
    let psrmap = new narimap.PSRMap(map.value, {
        orgId: orgId.value == '1100F3DE20806FADE050007F01006CBE' ? '' : orgId.value
    })
    psrmap.addPSR()

    initDeviceCard()
    setTimeout(() => {
        psrmap.filterByDomain(1)
    }, 0)
    //添加电网要素点击事件
    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()

    let options = {
        map: map.value, // map实例
        container: 'nrDeviceCard', // details容器id，为用户自定义的容器名
        narimap: narimap, //nariMap实例
        //用户自定义功能
        customButtons: {
            popupButtons: {
                buttons: []
            },
            detailsButtons: {
                buttons: []
            }
        }
    }

    deviceCard.value = new nrgisCommon.EquipmentAccount.DeviceCard(options)
    deviceCard.value.on('click', (res: any) => {
        if (res.button.id == 'nariPopupViewDetail') {
            emit('show', true)
        }
        setTimeout(() => {
            document.querySelectorAll('.nari-tabs__close')[0].onclick = function (v: any) {
                emit('show', false)
            }
        }, 10)
    })
    //
}

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: [],
            outline: {
                color: '#fff'
            },
            fill: {
                color: '#00b07d'
            }
        },
        {
            orgIds: [],
            outline: {
                color: '#fff'
            },
            fill: {
                color: '#3399ff'
            }
        },
        {
            orgIds: [],
            outline: {
                color: '#fff'
            },
            fill: {
                color: '#ffcc33'
            }
        },
        {
            orgIds: [],
            outline: {
                color: '#fff'
            },
            fill: {
                color: '#db0887'
            }
        },
        {
            orgIds: [],
            outline: {
                color: '#fff'
            },
            fill: {
                color: '#ff0000'
            }
        }
    ]

    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(
        new URL('@/assets/txzcwzj.png', import.meta.url).href, // 图片地址
        (error: any, image: any) => {
            if (error) throw error

            //添加图片到map，第一个参数为图片设置id
            map.value.addImage('poi1', image)
            map.value.addLayer({
                id: 'spotImg-ZY',
                type: 'symbol',
                minzoom: 8,
                source: {
                    type: 'geojson',
                    data: {
                        type: 'FeatureCollection',
                        features: []
                    }
                },
                layout: {
                    // 为图层设置引用的图片ID
                    'icon-image': 'poi1',
                    'icon-size': 0.7,
                    'icon-ignore-placement': false,
                    'icon-allow-overlap': false
                }
            })
            map.value.addLayer({
                id: 'spotName',
                type: 'symbol',
                minzoom: 10,
                source: {
                    type: 'geojson',
                    data: {
                        type: 'FeatureCollection',
                        features: []
                    }
                },
                layout: {
                    // 为图层设置引用的图片ID

                    'text-field': '{name}',
                    'icon-ignore-placement': false,
                    'text-ignore-placement': true,
                    'text-size': 12,
                    'text-max-width': 8,
                    'text-offset': [0, 2],
                    'text-font': ['Microsoft YaHei Regular']
                },
                paint: {
                    'text-color': '#ccc',

                    'text-halo-width': 1.33333
                }
            })
        }
    )

    map.value.loadImage(
        new URL('@/assets/txzdwzj.png', import.meta.url).href, // 图片地址
        (error: any, image: any) => {
            if (error) throw error

            //添加图片到map，第一个参数为图片设置id
            map.value.addImage('poi2', image)
            map.value.addLayer({
                id: 'spotImg-TY',
                type: 'symbol',
                minzoom: 8,
                source: {
                    type: 'geojson',

                    data: {
                        type: 'FeatureCollection',
                        features: []
                    }
                },
                layout: {
                    // 为图层设置引用的图片ID
                    'icon-image': 'poi2',
                    'icon-size': 0.7,
                    // 'text-field': '{name}',
                    'icon-ignore-placement': false,
                    'icon-allow-overlap': false
                }
            })
        }
    )
    map.value.loadImage(
        new URL('@/assets/point.png', import.meta.url).href, // 图片地址
        (error: any, image: any) => {
            if (error) throw error

            //添加图片到map，第一个参数为图片设置id
            map.value.addImage('poi3', image)
            map.value.addLayer({
                id: 'spotImg-GJ',
                type: 'symbol',
                minzoom: 8,
                source: {
                    type: 'geojson',
                    data: {
                        type: 'FeatureCollection',
                        features: []
                    }
                },
                layout: {
                    // 为图层设置引用的图片ID
                    'icon-image': 'poi3',
                    'icon-size': 0.6,
                    'icon-ignore-placement': false,
                    'icon-allow-overlap': false
                },
                Paint: {
                    'icon-opacity': 10
                }
            })
        }
    )
    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', 'spotImg-DW']
        })

        if (features.length > 0) {
            popup.value && popup.value.remove()
            setTimeout(() => {
                deviceCard.value.popup && deviceCard.value.popup.remove()
            }, 10)
            let data = JSON.parse(features[0].properties.list)

            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>`
                )
                .addTo(map.value)
            let html = document.getElementById('ids')
            if (html)
                html.onclick = function (v: any) {
                    // console.log(e.target.dataset.sid)
                    emit('drop', v.target.dataset.sid)
                }
        }
    })

    // 监听地图缩放完成事件
    map.value.on('zoomend', (e: any) => {
        // console.log(123, map.value.getCenter())

        if (map.value.getZoom() > 8.5 || map.value.getZoom() < 6) {
            rPopList.value.map((item: any) => item.remove())
            rPopList.value = []
        } else {
            if (mapList.value.length > 0) radiusPop()
        }
    })
}
//添加多个监测点
const addMarkers = async (row?: any, key?: any, num?: any) => {
    if (map.value == null) return
    let params = {
        deptIndex: deptIndex.value,
        monitorFlag: 2,
        powerFlag: 2,
        searchBeginTime: datePickerRef.value.timeValue[0],
        searchEndTime: datePickerRef.value.timeValue[1],
        serverName: 'event-boot',
        statisticalType: {},
        ...row
    }

    let { data } = await getAreaLineInfo(params)

    let r = 0.0035
    let tempFeatureZ: any = []
    let tempFeatureT: any = []
    data.forEach((item: any) => {
        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.imageUrl =
                val.comFlag == 0
                    ? new URL('@/assets/txzdwzj.png', import.meta.url).href
                    : new URL('@/assets/txzcwzj.png', import.meta.url).href
            // // 监测点图标

            let tempFeature = {
                type: 'Feature',

                geometry: {
                    type: 'Point',
                    coordinates: [val.lng, val.lat]
                },
                properties: {
                    name: val.lineName,
                    list: val
                }
            }
            if (key == 1) {
                switch (val.type) {
                    case 0:
                        tempFeatureZ.push(tempFeature)

                        break
                    case 1:
                        tempFeatureT.push(tempFeature)
                        break
                }
            } else {
                switch (val.comFlag) {
                    case 0:
                        tempFeatureT.push(tempFeature)
                        break
                    case 1:
                        tempFeatureZ.push(tempFeature)
                        break
                }
            }
        })
    })

    if (flag.value) {
        linList.value = [...tempFeatureZ, ...tempFeatureT]

        flag.value = false
    }
    //    清除图层图片
    map.value.getSource('spotImg-ZY').setData({
        type: 'FeatureCollection',
        features: []
    })
    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 && num == undefined) map.value.easeTo({ zoom: 8.1 })

    if (key == undefined) {
        map.value.getSource('spotImg-DW').setData({
            type: 'FeatureCollection',
            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: tempFeatureT
        })
    } else {
        map.value.getSource('spotImg-ZY').setData({
            type: 'FeatureCollection',
            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 = () => {
    LngLat.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 = '#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.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, i: number) => {
        let infoText = ''

        if (PopKey.value == 2) {
            // 监测点
            infoText = `<img src="${new URL(`@/assets/img/JCD-ZS.png`, import.meta.url)}" />
                        <div class="infoBox">
                            <div   id="clickZs${i}" data-line="${item.lineList}" data-alarm="${
                item.alarmList
            }" data-key="0" data-LngLat="${item.LngLat}">总数<br/>${item.lineNum}</div>
                            <div id="clickZx${i}"  data-alarm="${item.onlineList}" data-key="0" data-LngLat="${
                item.LngLat
            }">在线<br/>${item.onlineNum}</div>
                            <div id="clickGj${i}" data-line="" data-alarm="${
                item.alarmList
            }" data-key="1" data-LngLat="${item.LngLat}">告警<br/>${item.alarm}</div>
                        </div>`
        } else if (PopKey.value == 0) {
            // 变电站
            infoText = `<img src="${new URL(`@/assets/img/BDZ-ZS.png`, import.meta.url)}" />
                        <div class="infoBox">
                            <div id="clickZs${i}" data-line="${item.lineList}" data-alarm="${
                item.alarmSubList
            }" data-key="1" data-LngLat="${item.LngLat}">总数<br/>${item.subNum}</div>
                            <div id="clickGj${i}" data-line="" data-alarm="${
                item.alarmSubList
            }" data-key="1" data-LngLat="${item.LngLat}">告警<br/>${item.alarmSubNum}</div>
                        </div>`
        } else if (PopKey.value == 1) {
            // 终端
            infoText = `<img src="${new URL(`@/assets/img/ZD-ZS.png`, import.meta.url)}" />
                        <div class="infoBox">
                            <div id="clickZs${i}" data-line="${item.lineList}" data-alarm="${
                item.onlineList
            }" data-key="2" data-LngLat="${item.LngLat}">总数<br/>${item.deviceNum}</div>
                            <div id="clickGj${i}" data-line="" data-alarm="${
                item.onlineList
            }" data-key="2" data-LngLat="${item.LngLat}">在运<br/>${item.onDevice}</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)
        let html: any = document.getElementById(`clickZs${i}`)
        let html1: any = document.getElementById(`clickZx${i}`)
        let html2: any = document.getElementById(`clickGj${i}`)
        if (html)
            html.onclick = function (v: any) {
                popMarkers(
                    v.target.dataset.line?.split(','),
                    v.target.dataset.alarm?.split(','),
                    v.target.dataset.key,
                    v.target.dataset.lnglat?.split(',')
                )
            }
        if (html1)
            html1.onclick = function (v: any) {
                popMarkers(
                    [],
                    v.target.dataset.alarm?.split(','),
                    v.target.dataset.key,
                    v.target.dataset.lnglat?.split(',')
                )
            }
        if (html2)
            html2.onclick = function (v: any) {
                popMarkers(
                    [],
                    v.target.dataset.alarm?.split(','),
                    v.target.dataset.key,
                    v.target.dataset.lnglat?.split(',')
                )
            }
    })
}
// 点击弹框调用点加载
const popMarkers = (coutList: any, alarmList: any, key: any, LngLat: any) => {
    addMarkers(
        {
            coutList: coutList,
            alarmList: alarmList,
            type: 1
        },
        key,
        0
    )

    flyTo(
        {
            coordinate: LngLat
        },
        8.1
    )
}

const locatePositions = (e: any) => {
    if (map.value != null) {
        deptIndex.value = e.data.id
        // 加载点
        addMarkers()

        powerManageGridMap.value.drillDown({
            // 判断超高压
            orgId: e.data.code == '1100F3DE246A6FADE050007F01006CBE' ? '1100F3DE20806FADE050007F01006CBE' : e.data.code,
            onlyDisplay: true
        })
    }
}
// 电网查询功能
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 // 地图视图移动速度
    })
}

// 添加地图选择
const createMapSelectorComponent = () => {
    const mapSelector = new narimap.Components.MapSelector();

    mapSelector.init(
        map.value,
        // ['sjBase', 'sjDark'],
        // [
        //     {
        //         styleKey: 'sjRaster',
        //         styleName: '影像图',
        //         styleUrl: narimap.Config.styles.sjRaster,
        //         // styleIcon: WebGIS.Config.apiRoot + 'libs/webgis/images/map/map_sjRasterStyle.png'
        //     }
        // ]
    )
}

defineExpose({ locatePositions, addMarkers, grids, DeviceQ, radiusPop, flyTo })
const height = mainHeight(20)
</script>

<style lang="scss" scoped>
@use '@/views/pqs/qualityInspeection/panorama/components/style/map.scss';
</style>