百度地图

src/views/pms/voltage-sags/overview.vue

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