地图功能添加

src/views/modules/monitoring/camera.vue

@@ -68,8 +68,7 @@
         :double-click-zoom="false"
         @zoomend="mouseEvent"
         :center="{lng: 103.943382, lat: 30.750594 }"
-        :zoom="zoom"
+        :zoom="zoom">
-      >
         <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
         <bm-marker
           :icon="iconUrl"
@@ -192,36 +191,6 @@ export default {
       }
       this.commonSeach();
     },
-    // 查询
-    searchClick() {
-      this.pageObj.note = {
-        ...this.pageObj.note,
-        ...this.formModel
-      };
-      if (this.pageObj.note.cameraName != "") {
-        this.pageObj.pageNo = 1;
-      } else if (this.pageObj.note.cameratLocationtypeId != "") {
-        this.pageObj.pageNo = 1;
-      }
-      if (this.pageObj.note.cameraRegion.length === 0) {
-        this.pageObj.note.cameraRegion = "";
-      } else {
-        this.pageObj.note.cameraRegion = String(
-          this.pageObj.note.cameraRegion[
-            this.pageObj.note.cameraRegion.length - 1
-          ]
-        );
-        this.pageObj.pageNo = 1;
-      }
-      this.commonSeach();
-    },
-    searchClicks() {
-      this.$http
-        .get(`/camera/getAllList?cameraName=${this.formModel.cameraName}`)
-        .then(res => {
-          this.mapList = res.data.data;
-        });
-    },
     // 新增/修改
     addOrUpdateClick(param, row = {}) {
       console.log(this.$refs.reference);

src/views/modules/monitoring/map.vue

@@ -0,0 +1,126 @@
+<template>
+  <baidu-map
+      class="map"
+      :center="center"
+      :zoom="zoom"
+      scroll-wheel-zoom
+      @ready="changeCenterAndZoom"
+      :mapStyle="mapStyle"
+  >
+    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
+
+    <div v-for="(item, index) in markers" :key="index">
+      <bm-marker
+          :position="item.position"
+          :icon="item.icon"
+          @click="infoWindowOpen(item)"
+      >
+        <bm-info-window
+            :show="item.show"
+            @close="infoWindowClose(item)"
+            @open="infoWindowOpen(item)"
+        >
+          <div class="info-window">
+            <div v-for="device in item.deviceInfo">
+              <div style="cursor: pointer; color: #fff;" @click="goDevice(device.gateway.mac)">{{$t('lang.device')}} {{device.gateway.mac}}</div>
+              <div style="margin-top:5px">
+                <span style="color: red" v-if="device.status==0">{{$t('lang.offline')}}</span>
+                <span style="color: #67c23a" v-if="device.status==1">{{$t('lang.online')}}</span>
+                <span v-if="device.status==2">{{$t('lang.alarm')}}</span>
+                <span v-if="device.status==3">{{$t('lang.fault')}}</span>
+              </div>
+              <el-divider></el-divider>
+            </div>
+            <div class="address">{{$t('lang.detail-site')}}:{{item.address}}</div>
+          </div>
+        </bm-info-window>
+      </bm-marker>
+    </div>
+
+  </baidu-map>
+
+
+</template>
+<script>
+
+
+</script>
+<style>
+.baidu-map {
+
+.BMap_bottom {
+  display: none;
+}
+
+.BMap_pop {
+
+> div,
+> img:nth-child(10) {
+  display: none;
+  overflow: unset;
+}
+
+> div:nth-child(9) {
+  display: block;
+  overflow: unset;
+  width: 340px !important;
+}
+
+> div:nth-child(8) {
+  /*display: block;*/
+}
+
+.BMap_top {
+  display: none;
+}
+
+.BMap_center {
+  background: transparent;
+  border: none;
+  position: sticky !important;
+  height: 100%;
+}
+
+}
+.BMap_bubble_content {
+  background: rgba(0, 0, 0, .5);
+  border-radius: 5px;
+  padding: 20px;
+
+.info-window {
+  padding-right: 8px;
+  width: 100%;
+  max-height: 280px;
+  overflow: auto;
+
+.el-divider {
+  background: #ccccccbf;
+}
+
+.address {
+  color: #fff;
+}
+
+}
+/*//自定义滚动条样式*/
+.info-window::-webkit-scrollbar {
+  width: 6px;
+  height: 1px;
+}
+
+.info-window::-webkit-scrollbar-thumb {
+  border-radius: 6px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: #535353;
+}
+
+.info-window::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  background: #EDEDED;
+}
+
+}
+}
+
+</style>

src/views/modules/monitoring/test.vue

@@ -7,16 +7,50 @@
 <!--  <iframe src="http://www.baidu.com/"  width="100%" :style="{height:calHeight}" ></iframe>-->
   <!-- 摄像头分布图 -->
   <!-- 观澜：lng: 114.036331, lat: 22.730421 -->
+<!--  成都lng: 103.943382, lat: 30.750594-->
 
-  <div >
+  <div class="contain">
     <baidu-map
         class="map"
         :scroll-wheel-zoom="true"
         :double-click-zoom="false"
         @zoomend="mouseEvent"
-        :center="{lng: 114.036331, lat: 22.730421 }"  
+        :center="center"
         :zoom="zoom">
+<!--      跳转菜单-->
+      <bm-context-menu width="250">
+        <bm-context-menu-item :callback="gotoshenzhen" text="去深圳采集点"></bm-context-menu-item>
+        <bm-context-menu-item :callback="gotochengdu" text="去成都采集点"></bm-context-menu-item>
+      </bm-context-menu>
+<!--      地图类型切换-->
+      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-map-type>
+<!--右下角缩略图-->
+      <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
+
+      <!--缩放控件-->
       <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
+      <bm-marker :title="item.content"
+                 :icon="iconUrl"
+                 :position="item.position"
+                 :dragging="true"
+                 @click="infoWindowOpen(item)">
+        <!-- 搜索框 -->
+        <bm-control :offset="{width: '10px', height: '10px'}">
+          <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 999999}">
+            <el-input class="complete" v-model="keyword"></el-input>
+          </bm-auto-complete>
+          <el-button type="primary" @click="search">搜索</el-button>
+        </bm-control>
+<!--        信息窗体-->
+        <bm-info-window :show="item.show"   @close="infoWindowClose(item)">
+<!--           <p v-text="item.content"></p>-->
+          <p>经度：{{item.position.lat}}</p>
+          <p>纬度：{{item.position.lng}}</p>
+          <img :src="iconUrl.url" style="width:100%" />
+        </bm-info-window>
+      </bm-marker>
+      <bm-marker :title="item.content" :icon="iconUrl" :position="{lng: 103.943382, lat: 30.750594}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
+      <!--聚合动态添加的点坐标-->
       <bm-marker
           :icon="iconUrl"
           v-for="(item,key ) of this.mapList"
@@ -50,15 +84,24 @@ export default {
   },
   data() {
     return {
+      keyword: '',
+      item:{
+          position: { lng: 103.931057, lat: 30.755467 },
+          show:false,
+          content:"这是一个摄像头"
+      },
+      content:"shexiangtou",
       lableOpen: false,
-      zoom: 14,
+      zoom:14,
+      center: {
+        lng: 103.931057, lat: 30.755467
+      },
       iconUrl: {
         url: require("../../../assets/img/video.png"),
         size: { width: 30, height: 30 }
       },
       list: true,
       mapList: [],
-      position: { lng: 103.931057, lat: 30.755467 },
       mapOpen: false,
       // camera 和 camreaView切换，camreaView暂时不用
       viewState: false,
@@ -95,6 +138,35 @@ export default {
       });
       this.mapList = arr;
     },
+    //逆地址解析
+    search() {
+      this.item.show = true
+    },
+    // 覆盖物 点 信息窗体 关闭 --------- bm-info-window  暂时不用
+    infoWindowClose(param) {
+    	this.item.show = false
+    },
+    // 覆盖物 点 信息窗体 打开
+    infoWindowOpen(param) {
+      // bm-info-window  暂时不用
+      console.log(param)
+      this.item.show = true
+    },
+    //上下文菜单跳转
+    gotochengdu (e) {
+      this.center = {
+        // 103.943382, lat: 30.750594
+        lng: 103.943382,
+        lat:30.750594
+      }
+    },
+    gotoshenzhen (e) {
+      this.center = {
+        // 114.036331, lat: 22.730421
+        lng: 114.036331,
+        lat: 22.730421
+      }
+    },
     //鼠标缩放触发函数
     mouseEvent(type, target) {
       //14  大于 14 显示  小于14 隐藏
@@ -165,118 +237,27 @@ export default {
             this.mapList = res.data.data;
           });
     },
-    // 新增/修改
-    addOrUpdateClick(param, row = {}) {
-      console.log(this.$refs.reference);
 
-      this.$nextTick(() => {
-        this.$refs.addUpdateFaceRef.init(param, row.idFaceCamera);
-      });
-    },
-    // 新增/修改回调
-    refreshClick(param) {
-      param === "add" ? (this.pageObj.pageNo = 1) : this.pageObj.pageNo;
-      this.pageObj.note = {
-        ...this.pageObj.note,
-        ...this.formModel
-      };
-      if (this.pageObj.note.cameraName != "") {
-        this.pageObj.pageNo = 1;
-      } else if (this.pageObj.note.cameratLocationtypeId != "") {
-        this.pageObj.pageNo = 1;
-      }
-      if (this.pageObj.note.cameraRegion.length === 0) {
-        this.pageObj.note.cameraRegion = "";
-      } else {
-        this.pageObj.note.cameraRegion = String(
-            this.pageObj.note.cameraRegion[
-            this.pageObj.note.cameraRegion.length - 1
-                ]
-        );
-        this.pageObj.pageNo = 1;
-      }
-      this.commonSeach();
-    },
-    // 删除
-    deleteClick(row) {
-      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
-        confirmButtonText: "确认",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-          .then(() => {
-            this.$http.get(`/camera/delete/${row.idFaceCamera}`).then(res => {
-              if (res.data.code === 0) {
-                this.pageObj.note = { ...this.pageObj.note, ...this.formModel };
-                if (this.pageObj.note.cameraName != "") {
-                  this.pageObj.pageNo = 1;
-                } else if (this.pageObj.note.cameratLocationtypeId != "") {
-                  this.pageObj.pageNo = 1;
-                }
-                if (this.pageObj.note.cameraRegion.length === 0) {
-                  this.pageObj.note.cameraRegion = "";
-                } else {
-                  this.pageObj.note.cameraRegion = String(
-                      this.pageObj.note.cameraRegion[
-                      this.pageObj.note.cameraRegion.length - 1
-                          ]
-                  );
-                  this.pageObj.pageNo = 1;
-                }
-                if (this.cameraList.length === 1 && this.pageObj.pageNo > 1) {
-                  this.pageObj.pageNo = this.pageObj.pageNo - 1;
-                }
-                this.commonSeach();
-                this.$message.success("删除成功");
-              } else {
-                this.$message.warning(res.data.message);
-              }
-            });
-          })
-          .catch(err => {
-            this.$message.info("已取消删除");
-            console.log(err);
-          });
-    },
-    // 公共查询
-    commonSeach(pageObj = this.pageObj) {
-      this.$http.post("/camera/getList", pageObj).then(res => {
-        if (res.data.code === 0) {
-          this.cameraList = res.data.data.records;
-          this.total = Number(res.data.data.total);
-        } else if (res.data.code == 60001) {
-          this.$message.warning(res.data.message);
-        } else {
-          console.log(res);
-        }
-      });
-      this.$http.get("/camera/getAllList").then(res => {
-        this.mapList = res.data.data;
-        this.mapList.forEach(item => {
-          item.displayCss = "block";
-        });
-      });
-    }
   },
   created() {
-    // 公共查询
+
-    this.commonSeach();
-    // 调用树形结构数据
-    this.$http.get("/camera/getRegion").then(res => {
-      if (res.data.code === 0) {
-        this.areaOptions = res.data.data;
-      }
-    });
   }
 };
 </script>
 <style scoped>
-.map {
+.contain{
-  height: 750px;
+  width: 100%;
+  height: 100%;
 }
-.conditions-div {
+.complete {
-  background-color: #fff;
+  width: 210px;
-  border-radius: 2px;
+  margin-right:15px
+}
+.map {
+  /*height: 750px;*/
+  /*height: 850px;*/
+  width: 100%;
+  height: 800px;
 }
 /*
  去除百度地图版权

src/views/modules/monitoring/warning-map.vue

@@ -35,7 +35,7 @@
 	export default {
 		data() {
 			return {
-				visible: false,
+				visible:true,
 				warningList: [],
 				// 定义经维度和zoom
 				center: {
@@ -184,10 +184,7 @@
 				this.visible = false
 			},
 			// ready
-			handler({
+			handler({Bmap, map}) {
-				Bmap,
-				map
-			}) {
 				this.center.lng = 103.907065
 				this.center.lat = 30.701563
 				this.zoom = 18