Merge branch 'lukeyan' of http://8.136.197.230:3000/ZheJiangNingBo/pingAnQiYeWeb into lukeyan

src/api/offLineMap/index.js

@@ -6,4 +6,12 @@ export function topMap(params) {
         method: 'post',
         params
     })
-}
+}
+//单个企业信息
+export function topMapOne(params) {
+    return request({
+        url: '/safety/index/company/top/map/one',
+        method: 'post',
+        params
+    })
+}

src/api/realtimeWarning/index.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+//预警信息列表
+export function mapList(params) {
+    return request({
+        url: '/safety/system/tbSafeCompanyAlarm/map/list',
+        method: 'post',
+        params
+    })
+}

src/components/offLineMap/index.vue

@@ -7,9 +7,9 @@
 
 <script>
 import MapLine from "../../../public/zhenhaiLine.json"
-//import MapPoint from "../../../public/zhenhaiPoint.json"
+import MapPoint from "../../../public/zhenhaiPoint.json"
 import styleJson from "../../../public/custom_map_config.json"
-import { topMap } from '@/api/offLineMap'
+import { topMap, topMapOne } from '@/api/offLineMap'
 export default {
     name: 'zhenhaimap',
     data() {
@@ -19,11 +19,16 @@ export default {
             villageList: [],
             villageSumList: [],
             flag: true,
+            companyList: []
         }
     },
     mounted() {
-        topMap({ scoreType: 'season' })
-        this.initMap()
+        topMap({ scoreType: 'season' }).then(res => {
+            this.companyList = res.data
+            this.initMap()
+        })
+        topMapOne({ companyId: 4, companyName: '宁波顺帆净水剂有限公司' })
+
     },
     methods: {
         goBack() {
@@ -33,7 +38,7 @@ export default {
         },
         initMap() {
             var BMap = window.BMap
-            console.log(BMap, 'BMap');
+            // console.log(BMap, 'BMap');
             var map = new BMap.Map('container', {
                 style: {
                     styleJson
@@ -41,7 +46,7 @@ export default {
             });
             let that = this
             map.centerAndZoom(new BMap.Point(this.dongtaiPoint[0], this.dongtaiPoint[1]), 12);
-            map.setMinZoom(11)
+            // map.setMinZoom(11)
             map.setMaxZoom(19)
             map.enableScrollWheelZoom(true);
             // hjrequest({
@@ -51,11 +56,12 @@ export default {
             // }).then((res) => {
             //     that.villageSumList = res.data
             // })
-            console.log(MapLine, 'MapLine');
+            // console.log(MapLine, 'MapLine');
             for (var i = 0, n = MapLine.features.length; i < n; i++) {
                 showBoundaryEx(MapLine.features[i]);
             }
-
+            var label = new BMap.Label();
+            showPoint()
             function showBoundaryEx(city) {
                 var paths = []
                 var list = city.geometry.coordinates
@@ -79,9 +85,8 @@ export default {
                         map.addOverlay(polygon); //增加多边形
                     }
                     // // console.log(list, 'length');
-
                 } else {
-                    console.log(list[0], ' list[0]');
+                    // console.log(list[0], ' list[0]');
                     for (let i = 0; i < list[0].length; i++) {
                         let lat = list[0][i][1],
                             lng = list[0][i][0];
@@ -105,6 +110,8 @@ export default {
                     map.removeOverlay(label);
                     polygon.setFillColor('#3b4c44');
                 });
+
+
                 //开始用"mouseover","mouseout"发现,鼠标移动过快,会多个省份也高亮了.所以改成 click了
                 polygon.addEventListener("click", function () {
                     console.log(city.properties.name, 'city.properties.name');
@@ -143,33 +150,72 @@ export default {
                     //     params: goStreetData
                     // }).then((res) => {
                     //     that.villageList = res.data
-                    //     that.villageList.forEach((item) => {
-                    //         var point = new BMap.Point(item.longitude, item.latitude);
-                    //         var marker = new BMap.Marker(point);        // 创建标注   
-                    //         map.addOverlay(marker);
-                    //         var content = item.villageName;
-                    //         var label = new BMap.Label(content, {       // 创建文本标注
-                    //             position: point,                          // 设置标注的地理位置
-                    //             offset: new BMap.Size(-10, -50)           // 设置标注的偏移量
-                    //         })
-                    //         label.setStyle({ backgroundColor: ' rgba(0, 0, 0, 0)', border: '0', color: 'yellow', fontSize: '20px' })
-                    //         map.addOverlay(label);
-                    //         marker.addEventListener("click", function (e) {
-                    //            // Cookies.set('village_current', item.villageCode)
-                    //             window.open(window.location.origin + '/#/communityShow', '_blank');
-                    //         });
+                    // that.villageList.forEach((item) => {
+                    //     var point = new BMap.Point(item.longitude, item.latitude);
+                    //     var marker = new BMap.Marker(point);        // 创建标注   
+                    //     map.addOverlay(marker);
+                    //     var content = item.villageName;
+                    //     var label = new BMap.Label(content, {       // 创建文本标注
+                    //         position: point,                          // 设置标注的地理位置
+                    //         offset: new BMap.Size(-10, -50)           // 设置标注的偏移量
                     //     })
+                    //     label.setStyle({ backgroundColor: ' rgba(0, 0, 0, 0)', border: '0', color: 'yellow', fontSize: '20px' })
+                    //     map.addOverlay(label);
+                    //     marker.addEventListener("click", function () {
+                    //        // Cookies.set('village_current', item.villageCode)
+                    //         window.open(window.location.origin + '/#/communityShow', '_blank');
+                    //     });
+                    // })
                     // })
 
+                    that.companyList.forEach((item) => {
+                        var point = new BMap.Point(item.longitude, item.latitude);
+                        console.log(point, 'point');
+                        var marker = new BMap.Marker(point);        // 创建标注   
+                        map.addOverlay(marker);
+                        var content = item.companyName;
+                        var label = new BMap.Label(content, {       // 创建文本标注
+                            position: point,                          // 设置标注的地理位置
+                            offset: new BMap.Size(-10, -50)           // 设置标注的偏移量
+                        })
+                        label.setStyle({ backgroundColor: ' rgba(0, 0, 0, 0)', border: '0', color: '#0060ce', fontSize: '16px' })
+                        map.addOverlay(label);
+                        marker.addEventListener("click", function () {
+                            // Cookies.set('village_current', item.villageCode)
+                            // window.open(window.location.origin + '/#/communityShow', '_blank');
+                        });
+                    })
                     polygon.removeEventListener('mousemove')
-
-
-
                 });
-                var label = new BMap.Label();
 
             }
-
+            function showPoint() {
+                console.log(MapPoint, 'MapPoint');
+
+                for (let i = 0; i < MapPoint.features.length; i++) {
+                    var opts = {
+                        position: new BMap.Point(MapPoint.features[i].geometry.coordinates[0], MapPoint.features[i].geometry.coordinates[1]), // 指定文本标注所在的地理位置
+                        offset: new BMap.Size(-30, -30) // 设置文本偏移量
+                    };
+
+                    // 创建文本标注对象
+                    var label1 = new BMap.Label(MapPoint.features[i].properties.name, opts);
+                    // 自定义文本标注样式
+                    label1.setStyle({
+                        color: 'orange',
+                        borderRadius: '5px',
+                        borderColor: '#ccc',
+                        padding: '10px',
+                        fontSize: '16px',
+                        height: '20px',
+                        lineHeight: '20px',
+                        backgroundColor: 'rgba(0,0,0,0)',
+                        border: '0',
+                        fontFamily: '微软雅黑'
+                    });
+                    map.addOverlay(label1);
+                }
+            }
 
         },
     }
@@ -180,7 +226,7 @@ export default {
 .bmap {
     width: 100%;
     height: 100%;
-    border: 1px solid #000;
+    border: 1px solid #000000;
 }
 
 
@@ -191,7 +237,6 @@ export default {
     height: 20px;
     position: absolute;
     left: 49%;
-
     bottom: 30px;
     display: flex;
     justify-content: center;

src/router/index.js

@@ -38,12 +38,21 @@ const routes = [
             name: 'companyCanban',
             component: () => import('@/views/companyCanban'),
           },
+          //企业排名
           {
             path: 'enterpriseRank',
             name: 'enterpriseRank',
             component: () => import('@/views/enterpriseRank'),
 
           },
+          //实时预警         
+          {
+            path: 'realtimeWarning',
+            name: 'realtimeWarning',
+            component: () => import('@/views/realtimeWarning'),
+
+          },
+
           // 系统管理
           {
             path: 'systemManagement',

src/views/archives/wupin.vue

@@ -34,7 +34,7 @@
                 </el-table-column>
                 <el-table-column show-overflow-tooltip prop="emergencyContactPhone" label="联系方式" width="150">
                 </el-table-column>
-                <el-table-column show-overflow-tooltip label="登记时间" prop="registerTime" width="250">
+                <el-table-column show-overflow-tooltip label="更新时间" prop="registerTime" width="250">
                 </el-table-column>
                 <el-table-column show-overflow-tooltip label="操作" width="80">
                     <template slot-scope="scope">
@@ -55,7 +55,7 @@
             <el-table :cell-style="{ background: 'revert' }" :data="goodsDetailData" class="table"
                 style="width: calc(100% - 40px);  margin:0 20px;" :row-style="tableRowStyle"
                 :header-row-style="tableHeaderColor" :header-cell-style="tableHeaderCellColor">
-                <el-table-column show-overflow-tooltip prop="unloadTime" label="登记时间" width="150">
+                <el-table-column show-overflow-tooltip prop="unloadTime" label="更新时间" width="150">
                 </el-table-column>
                 <el-table-column show-overflow-tooltip label="总量" width="90">
                     <template slot-scope="scope">

src/views/head.vue

@@ -10,7 +10,7 @@
         <div class="shu"></div>
         <el-menu-item index="1" route="/home/safetyIndex">综合指数</el-menu-item>
         <div class="shu"></div>
-        <el-menu-item index="2" route="/home">实时预警</el-menu-item>
+        <el-menu-item index="2" route="/home/realtimeWarning">实时预警</el-menu-item>
         <div class="shu"></div>
         <el-menu-item index="3" route="/home/closeLoopDispose">闭环处置</el-menu-item>
         <div class="shu"></div>

src/views/realtimeWarning/index.vue

@@ -0,0 +1,392 @@
+<template>
+    <div class="main">
+        <div class="box">
+            <div class="title">实时预警</div>
+            <div class="leftBox">
+                <zhmap class="map" :waringList="waringList" v-if="waringList && waringList.length"></zhmap>
+            </div>
+            <div class="rightBox">
+                <div class="totalTitle">
+                    <div class="titleText">预警列表</div><span>&nbsp;（ <span class="redText">{{ total }}</span> ）</span>
+                </div>
+                <div class="bottomBody">
+                    <div class="yujingItem" v-for="(item, index) in waringList" :key="index">
+                        <div class="yujingTop">
+                            <div class="companyName">{{ item.companyName }}</div>
+                            <div class="impBtnList">
+
+                                <div :class="{ 'shewei': a == '剧毒' || a == '易制毒', 'zhongdian': a == '消防重点' || a == '所管消防', 'zhibao': a == '放射源' || a == '易制爆', 'zhian': a == '治安重点' || a == '创安单位' }"
+                                    v-for="a in item.companyTypeList" :key="a">{{ a }}
+                                </div>
+                            </div>
+                        </div>
+                        <div class="yujingBottom">
+                            <div class="bottomTOP">
+                                一级指标：<span class="numValue">{{ item.levelIndexOne }}</span> &nbsp;&nbsp;预警指标：<span
+                                    class="numValue">“{{ item.levelIndexThree }}”异常</span>
+                            </div>
+                            <div class="bottomTOP">
+                                预警时间：<span class="numValue">{{ item.alarmTime }}</span>
+                            </div>
+                        </div>
+                        <div class="chuzhi" @click="chuzhi(item)">转处置</div>
+                    </div>
+                </div>
+            </div>
+            <el-dialog title="选择处置部门" :visible.sync="diaVisible" class="picForm">
+                <div class="czTitle">可选择多个部门联合处置：</div>
+                <div class="czBody"></div>
+                <div slot="footer" class="dialog-footer">
+                    <el-button @click="dialogFormVisible = false, tableDisable = false" v-if="!tableDisable">取 消
+                    </el-button>
+                    <el-button type="primary" @click="addForm('uleForm')" v-if="!tableDisable">确 定</el-button>
+                </div>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapList } from '@/api/realtimeWarning'
+import zhmap from './map.vue'
+export default {
+    components: {
+        zhmap,
+    },
+    data() {
+        return {
+            total: 0,
+            waringList: [],
+            diaVisible: false,
+        }
+    },
+
+    created() {
+        mapList({ pageSize: 10, pageNum: 1 }).then(res => {
+            this.waringList = res.data
+            this.total = res.total
+        })
+    },
+    methods: {
+        chuzhi(val) {
+            console.log(val)
+            this.diaVisible = true
+        }
+    }
+
+}
+</script>
+
+<style lang="less" scoped>
+.main {
+    width: 100%;
+    height: calc(100% - 80px);
+
+    box-sizing: border-box;
+
+    padding: 20px;
+
+    .box {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        padding: 70px 25px 20px;
+        background: url('~@/assets/realtimeWarning/231.png') no-repeat;
+        background-size: 100% 100%;
+        box-sizing: border-box;
+        display: flex;
+
+        .title {
+            position: absolute;
+            top: 25px;
+            left: 25px;
+            font-size: 18px;
+            color: #FFFFFF;
+            letter-spacing: 1px;
+            font-weight: 500;
+        }
+
+        .leftBox {
+            width: calc(100% - 590px);
+            height: 100%;
+            margin-right: 20px;
+            box-sizing: border-box;
+            background: url('~@/assets/realtimeWarning/矩形备份 289981.png') no-repeat;
+            background-size: 100% 100%;
+            padding: 20px;
+
+            .map {
+                height: 100%;
+                width: 100%;
+            }
+        }
+
+        .rightBox {
+            width: 570px;
+            height: 100%;
+            box-sizing: border-box;
+            background: url('~@/assets/realtimeWarning/矩形备份 289981.png') no-repeat;
+            background-size: 100% 100%;
+
+            .totalTitle {
+                height: 60px;
+                width: 100%;
+                border-bottom: 1px solid rgba(91, 116, 140, 0.6);
+                padding: 0 20px;
+                display: flex;
+                align-items: center;
+                color: #EBFFF4;
+
+                .titleText {
+                    font-size: 16px;
+                    color: #EBFFF4;
+                    letter-spacing: 2px;
+
+                    text-shadow: 0 0 9px rgba(21, 255, 195, 0.60);
+                    font-weight: 400;
+                }
+
+                .redText {
+                    font-size: 16px;
+                    color: #FF9191;
+                    letter-spacing: 2px;
+
+                    font-weight: 400
+                }
+            }
+
+            .bottomBody {
+                height: calc(100% - 60px);
+                width: 100%;
+                padding: 14px;
+                box-sizing: border-box;
+                overflow: auto;
+
+                &::-webkit-scrollbar {
+                    width: 6px;
+
+                }
+
+                // 滚动条里面默认的小方块,自定义样式
+                &::-webkit-scrollbar-thumb {
+                    background: rgba(255, 255, 255, 0.44);
+                    border-radius: 5px;
+                }
+
+                // 滚动条里面的轨道
+                &::-webkit-scrollbar-track {
+                    background: transparent;
+
+                }
+
+                .yujingItem {
+                    height: 138px;
+                    width: 100%;
+                    background: rgba(108, 128, 151, 0.20);
+                    border: 1px solid rgba(73, 84, 97, 1);
+                    position: relative;
+
+                    .yujingTop {
+                        border-bottom: 1px solid #495461;
+                        height: 54px;
+                        width: 100%;
+                        display: flex;
+                        align-items: center;
+                        padding: 0 14px;
+
+
+                        .companyName {
+                            font-size: 16px;
+                            color: #30C4FF;
+                            letter-spacing: 1.14px;
+                            font-weight: 500;
+                            margin-right: 20px;
+                            width: 220px;
+
+                            //white-space: nowrap; //禁止换行
+                        }
+
+                        .impBtnList {
+                            height: 40px;
+                            width: 100%;
+                            display: flex;
+                            align-items: center;
+                            overflow: hidden;
+                            white-space: nowrap; //禁止换行
+                            width: 270px;
+                            text-overflow: ellipsis; //...
+
+                            .shewei {
+                                height: 26px;
+                                line-height: 26px;
+                                width: auto;
+                                background: url('~@/assets/companyFile/编组 11991.png') no-repeat;
+                                padding: 0 5px;
+                                font-size: 14px;
+                                color: #B5EBFF;
+                                letter-spacing: 0.44px;
+                                font-weight: 400;
+                                background-size: 100% 100%;
+                                margin-right: 10px;
+                            }
+
+                            .zhongdian {
+                                height: 26px;
+                                line-height: 26px;
+                                width: auto;
+                                background: url('~@/assets/companyFile/编组 11222221.png') no-repeat;
+                                padding: 0 5px;
+                                font-size: 14px;
+                                color: #E3DEFF;
+                                letter-spacing: 0.44px;
+                                font-weight: 400;
+                                background-size: 100% 100%;
+                                margin-right: 10px;
+                            }
+
+                            .zhibao {
+                                height: 26px;
+                                line-height: 26px;
+                                width: auto;
+                                background: url('~@/assets/companyFile/编组 11991备份 10.png') no-repeat;
+                                padding: 0 5px;
+                                font-size: 14px;
+                                color: #E3DEFF;
+                                letter-spacing: 0.44px;
+                                font-weight: 400;
+                                background-size: 100% 100%;
+                                margin-right: 10px;
+                            }
+
+                            .zhian {
+                                height: 26px;
+                                line-height: 26px;
+                                width: auto;
+                                background: url('~@/assets/companyFile/编组 11991备份 21.png') no-repeat;
+                                padding: 0 5px;
+                                font-size: 14px;
+                                color: #E3DEFF;
+                                letter-spacing: 0.44px;
+                                font-weight: 400;
+                                background-size: 100% 100%;
+                                margin-right: 10px;
+                            }
+
+                        }
+                    }
+
+                    .chuzhi {
+                        position: absolute;
+                        right: 14px;
+                        bottom: 14px;
+                        cursor: pointer;
+                        height: 20px;
+                        width: 50px;
+                        line-height: 20px;
+                        font-size: 14px;
+                        color: #30C4FF;
+                        letter-spacing: 1px;
+                        font-weight: 400;
+                    }
+
+                    .yujingBottom {
+                        width: 100%;
+                        height: 84px;
+                        padding: 0 14px;
+
+                        .bottomTOP {
+                            width: 100%;
+                            height: 50%;
+                            display: flex;
+                            align-items: center;
+
+                            font-family: PingFangSC-Regular;
+                            font-size: 14px;
+                            color: rgba(255, 255, 255, 0.8);
+                            letter-spacing: 0;
+                            font-weight: 400;
+
+                            .numValue {
+                                font-size: 14px;
+                                color: #FFFFFF;
+                                letter-spacing: 0;
+                                font-weight: 400;
+                            }
+
+                        }
+                    }
+                }
+            }
+        }
+
+        .picForm {
+            /deep/ .el-dialog {
+                background-color: rgba(0, 0, 0, 0);
+                background: url('~@/assets/realtimeWarning/导入弹窗.png') no-repeat;
+                background-size: 100% 100%;
+                width: 461px;
+                height: 412px;
+                position: relative;
+
+                .el-dialog__title {
+                    font-size: 16px;
+                    color: #EBFFF4;
+                    letter-spacing: 2px;
+
+                    text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
+                    font-weight: 400;
+                }
+
+                .el-dialog__body {
+                    box-sizing: border-box;
+                    padding: 14px 10px;
+                    height: 300px;
+                    box-sizing: border-box;
+
+                    .czTitle {
+                        opacity: 0.7;
+                        font-family: PingFangSC-Regular;
+                        font-size: 14px;
+                        color: #EAF6FF;
+                        letter-spacing: 1px;
+                        font-weight: 400;
+                        margin-bottom: 12px;
+                    }
+
+                    .czBody {
+                        width: 440px;
+                        height: 232px;
+                        background: rgba(108, 128, 151, 0.20);
+                        border: 1px solid #495461;
+                    }
+                }
+
+                .el-dialog__footer {
+                    padding: 0px 30px 20px;
+
+                    .el-button--default {
+                        width: 96px;
+                        height: 35px;
+                        opacity: 0.8;
+                        background: rgba(0, 0, 0, 0);
+                        background-image: linear-gradient(180deg, rgba(234, 241, 248, 0.10) 0%, rgba(208, 222, 238, 0.10) 100%);
+                        border: 1px solid rgba(91, 116, 140, 1);
+                        border-radius: 4px;
+                        color: #E3DEFF
+                    }
+
+                    .el-button--primary {
+                        width: 96px;
+                        height: 35px;
+                        background: rgba(0, 0, 0, 0);
+                        border: 0;
+                        background: url('~@/assets/realtimeWarning/2121.png') no-repeat;
+                        background-size: 100% 100%;
+                    }
+                }
+            }
+        }
+    }
+
+}
+</style>

src/views/realtimeWarning/map.vue

@@ -0,0 +1,250 @@
+<template>
+    <div>
+        <div class="bmap" id="container" ref="container"></div>
+
+    </div>
+</template>
+
+<script>
+import MapLine from "../../../public/zhenhaiLine.json"
+import MapPoint from "../../../public/zhenhaiPoint.json"
+import styleJson from "../../../public/custom_map_config.json"
+
+export default {
+    name: 'zhenhaimap',
+    props: ['waringList'],
+    data() {
+        return {
+            dongtaiPoint: [121.604192, 29.977299],
+            WaringList: this.waringList,
+            villageList: [],
+            villageSumList: [],
+            flag: true,
+            companyList: [],
+        }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.initMap()
+        })
+
+    },
+    methods: {
+        goBack() {
+            this.initMap()
+
+            this.$emit('goBack')
+        },
+        initMap() {
+            var BMap = window.BMap
+            // console.log(BMap, 'BMap');
+            var map = new BMap.Map('container', {
+                style: {
+                    styleJson
+                }
+            });
+
+            //  console.log(this.WaringList, 'waringList');
+            let that = this
+            map.centerAndZoom(new BMap.Point(this.dongtaiPoint[0], this.dongtaiPoint[1]), 13);
+            // map.setMinZoom(11)
+            map.setMaxZoom(19)
+            map.enableScrollWheelZoom(true);
+            // hjrequest({
+            //     url: '/yc/dt/statistical/village',
+            //     method: 'get',
+            //     params: { areaCode: that.areaCode }
+            // }).then((res) => {
+            //     that.villageSumList = res.data
+            // })
+            // console.log(MapLine, 'MapLine');
+            for (var i = 0, n = MapLine.features.length; i < n; i++) {
+                showBoundaryEx(MapLine.features[i]);
+            }
+            var label = new BMap.Label();
+            showPoint()
+            showPic()
+
+            function showBoundaryEx(city) {
+                var paths = []
+                var list = city.geometry.coordinates
+
+                // console.log(list.length, 'list[0].length')
+                //console.log(list[1], 'list[1].length')
+                var polygon = {}
+                if (list.length > 1) {
+                    for (let a = 0; a < list.length; a++) {
+                        paths = []
+                        for (let i = 0; i < list[a][0].length; i++) {
+                            let lat = list[a][0][i][1],
+                                lng = list[a][0][i][0];
+                            paths.push(new BMap.Point(lng, lat));
+                        }
+                        polygon = new BMap.Polygon(paths, {
+                            fillColor: '#3b4c44',
+                            strokeColor: "#0f1423",
+                            fillOpacity: 0.6,
+                            strokeWeight: 1
+                        }); //创建多边形
+                        map.addOverlay(polygon); //增加多边形
+                    }
+                    // // console.log(list, 'length');
+                } else {
+                    // console.log(list[0], ' list[0]');
+                    for (let i = 0; i < list[0].length; i++) {
+                        let lat = list[0][i][1],
+                            lng = list[0][i][0];
+                        paths.push(new BMap.Point(lng, lat));
+                    }
+                    // console.log(list, 'length');
+                    polygon = new BMap.Polygon(paths, {
+                        fillColor: '#3b4c44',
+                        strokeColor: "#0f1423",
+                        fillOpacity: 0.6,
+                        strokeWeight: 1
+                    }); //创建多边形
+                    map.addOverlay(polygon); //增加多边形
+                }
+                polygon.infowindow = new BMap.InfoWindow();
+                polygon.infowindow.name = city.properties.name;
+                polygon.addEventListener("mouseover", function () {
+                    polygon.setFillColor("#ffa500");
+                });
+                polygon.addEventListener("mouseout", function () {
+                    map.removeOverlay(label);
+                    polygon.setFillColor('#3b4c44');
+                });
+
+
+            }
+            function showPoint() {
+                // console.log(MapPoint, 'MapPoint');
+
+                for (let i = 0; i < MapPoint.features.length; i++) {
+                    var opts = {
+                        position: new BMap.Point(MapPoint.features[i].geometry.coordinates[0], MapPoint.features[i].geometry.coordinates[1]), // 指定文本标注所在的地理位置
+                        offset: new BMap.Size(-30, -30) // 设置文本偏移量
+                    };
+
+                    // 创建文本标注对象
+                    var label1 = new BMap.Label(MapPoint.features[i].properties.name, opts);
+                    // 自定义文本标注样式
+                    label1.setStyle({
+                        color: 'orange',
+                        borderRadius: '5px',
+                        borderColor: '#ccc',
+                        padding: '10px',
+                        fontSize: '16px',
+                        height: '20px',
+                        lineHeight: '20px',
+                        backgroundColor: 'rgba(0,0,0,0)',
+                        border: '0',
+                        fontFamily: '微软雅黑'
+                    });
+                    map.addOverlay(label1);
+                }
+            }
+            function showPic() {
+                // console.log(that.WaringList, 'that.WaringList');
+
+                that.WaringList.forEach(item => {
+                    // 创建小车图标
+                    var myIcon = new BMap.Icon("public/dongtai/awrni.png", new BMap.Size(80, 80));
+                    myIcon.setImageUrl("/dongtai/awrni.png")
+                    // 创建Marker标注，使用小车图标
+                    var marker = new BMap.Marker(new BMap.Point(item.longitude, item.latitude), {
+                        icon: myIcon
+                    });
+                    // console.log(marker, 'marker');
+                    map.addOverlay(marker);
+                    marker.addEventListener("click", function () {
+
+                        var label = new BMap.Label();
+                        label.setStyle({
+                            color: 'blue',
+                            borderRadius: '5px',
+                            borderColor: '#ccc',
+                            padding: '10px',
+                            fontSize: '16px',
+                            fontFamily: '微软雅黑',
+                            transform: 'translateX(-50%) translateY(calc(-100% - 10px))'
+                        });
+
+                        label.setPosition(new BMap.Point(item.longitude, item.latitude));
+                        label.setOffset(new BMap.Size(130, -10))
+                        label.setStyle({ width: '340px', height: '238px', background: 'url(pbImg/气泡弹窗1.png) no-repeat', backgroundSize: '100% 100%', border: '0', color: '#fff' })
+                        label.setContent(`
+                               <div style='width:100%;display:flex;justify-content: space-between;align-items: center;'> <h4 style='margin:12px;font-size: 14px;color: #FFE6D9;'>${item.companyName}</h4><div class='closeBtn' style='background: url(pbImg/关闭.png)  no-repeat;width:20px;height:20px;background-size: 100% 100%;margin-right:10px;"'></div></div>
+                                <div style='margin:0 auto;font-size: 14px;width:316px;height:108px;padding:0 12px;background: rgba(108,128,151,0.20);border: 1px solid rgba(73,84,97,1);'>
+                                    <h4 style='height:33%;opacity: 0.8;margin:0;line-height:38px;font-weight:300;'><span style="color:#D0DEEE;">一级指标：</span>${item.levelIndexOne}</h4>
+                                    <h4 style='height:33%;opacity: 0.8;margin:0;line-height:38px;font-weight:300;'><span style="color:#D0DEEE;">预警指标：</span>"${item.levelIndexThree}"异常</h4>
+                                    <h4 style='height:33%;opacity: 0.8;margin:0;line-height:38px;font-weight:300;'><span style="color:#D0DEEE;">预警时间：</span>${item.alarmTime}</h4>
+<div class='zhuanchuzhiBtn' style='width:80px;height:34px;font-size: 14px;
+color: #FFFFFF;
+text-align:center;
+line-height:34px;
+background: url(pbImg/2121.png)  no-repeat;
+margin-top:20px;
+background-size: 100% 100%;
+letter-spacing: 0;
+font-weight: 400;'>转处置</div>
+                                </div>
+                              `);
+                        map.addOverlay(label);
+                        let btn = document.querySelector('.zhuanchuzhiBtn')
+                        //console.log(btn, 'btn');
+                        btn.addEventListener('click', () => {
+                            console.log(item, 'item');
+                        })
+                        let closebtn = document.querySelector('.closeBtn')
+                        //console.log(btn, 'btn');
+                        closebtn.addEventListener('click', () => {
+                            map.removeOverlay(label);
+                        })
+                        // label.addEventListener('mouseout', function () {
+                        //     map.removeOverlay(label);
+                        // })
+                    });
+                })
+                //that.flexPoint()
+            }
+        },
+        flexPoint() {
+            var pointAll = document.querySelectorAll('.BMap_Marker.BMap_noprint')
+            console.log(pointAll, 'pointAll');
+
+
+        }
+    }
+}
+</script>
+
+<style scoped lang="less">
+.bmap {
+    width: 100%;
+    height: 100%;
+    border: 1px solid #000000;
+
+}
+
+
+/deep/ .BMap_Marker {
+    z-index: 1000;
+    background: url('../../../public/dongtai/awrni.png') no-repeat !important;
+    background-size: 100% 100% !important;
+}
+
+.fanhui {
+    display: inline-block;
+    width: 50px;
+    height: 20px;
+    position: absolute;
+    left: 49%;
+    bottom: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 50;
+
+}
+</style>