From 4cf5a6c10a564e26a87447ee586d8fae431ff119 Mon Sep 17 00:00:00 2001
From: coco1986509808 <1986509808@qq.com>
Date: Wed, 10 Jan 2024 20:34:13 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E6=90=9C=E7=B4=A2=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=EF=BC=8C=E4=BF=A1=E6=81=AF=E7=AA=97=E4=BD=93=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=BF=AE=E6=94=B9=EF=BC=8C=E7=BC=A9=E7=95=A5=E5=9B=BE?=
 =?UTF-8?q?=EF=BC=8C=E5=8D=AB=E6=98=9F=E6=8E=A7=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/modules/monitoring/map.vue  | 307 +++++++++++++++++++-------
 src/views/modules/monitoring/test.vue | 176 +++++++++------
 2 files changed, 346 insertions(+), 137 deletions(-)

diff --git a/src/views/modules/monitoring/map.vue b/src/views/modules/monitoring/map.vue
index 61d30dc..8065d84 100644
--- a/src/views/modules/monitoring/map.vue
+++ b/src/views/modules/monitoring/map.vue
@@ -1,126 +1,285 @@
 <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 class="contain">
+    <baidu-map
+        class="map"
+        :scroll-wheel-zoom="true"
+        :double-click-zoom="false"
+        @zoomend="mouseEvent"
+        :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','BMAP_SATELLITE_MAP']" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type>
+      <!--右下角缩略图-->
+      <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
+<!--      右下角定位-->
+      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
+      <!-- 搜索框 -->
+      <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-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>-->
+      <bm-marker v-for="(item,key ) of this.mapList" :key="key"
+                 :title="item.content"
+                 :icon="iconUrl"
+                 :position="item.position"
+                 :dragging="true"
+                 @click="infoWindowOpen(item)"
+                 :animation="item.animal">
+        <!--        信息窗体-->
+        <bm-info-window   :auto-pan="true" :show="item.show"   @close="infoWindowClose(item)">
+          <div style="color:#fff;font-size:16px;">
+            <div style="width:220px;font-size: 20px">摄像头数据信息</div>
+            <div style="margin-top:5px;height: 3px; width:100%;background-color: #1981E1 !important;"></div>
+            <div style="margin-top:10px;width:300px">  所属组织：{{ item.origin }}</div>
+            <div style="margin-top:5px;width:300px">  详细地址：{{ item.address }}</div>
+            <div style="margin-top:5px;width:300px">  经度：{{ item.position.lng  }}</div>
+            <div style="margin-top:5px;width:300px">  纬度：{{ item.position.lng }}</div>
+            <div style="margin-top:5px;width:300px">  IP地址：{{ item.ip  }}</div>
+            <div style="margin-top:5px;width:220px">  摄像机类型：{{ item.type  }}</div>
+            <div style="margin-top:5px;width:220px">  备注：{{ item.name  }}</div>
+<!--                      <img :src="iconUrl.url" style="width:100%" />-->
           </div>
         </bm-info-window>
       </bm-marker>
-    </div>
-
-  </baidu-map>
+    </baidu-map>
+  </div>
 
 
 </template>
 <script>
-
-
-</script>
-<style>
-.baidu-map {
-
-.BMap_bottom {
-  display: none;
+export default {
+  data(){
+    return{
+      mapList:[
+        {
+          position: { lng: 103.931057, lat: 30.755467 },
+          show:false,
+          origin:"公共安全中心实验室",
+          address:"广东省深圳市观澜街道银星智界二期3号楼",
+          ip:"192.168.1.108",
+          type:"华为",
+          content:"这是一个摄像头",
+          name:"摄像头1",
+          animal:"BMAP_ANIMATION_DROP"
+        },
+        {
+          position: { lng: 103.831057, lat: 30.755467 },
+          show:false,
+          content:"这是一个摄像头",
+          name:"2",
+          animal:"BMAP_ANIMATION_DROP"
+        },
+        {
+          position: { lng: 103.931057, lat: 30.765467 },
+          show:false,
+          content:"这是一个摄像头",
+          name:"3",
+          animal:"BMAP_ANIMATION_DROP"
+        }
+      ],
+      keyword: '',
+      // item:{
+      //   position: { lng: 103.931057, lat: 30.755467 },
+      //   show:false,
+      //   content:"这是一个摄像头"
+      // },
+      iconUrl: {
+        url: require("../../../assets/img/video.png"),
+        size: { width: 30, height: 30 }
+      },
+      zoom:14,
+      center: {
+        lng: 103.931057, lat: 30.755467
+      },
+      point:{
+        lng: 103.931057, lat: 30.755467,
+        showFlag:true,
+        regionName:"11",
+        location:"22",
+        severity:"",
+        reporterName:"",
+        reporterPhone:"",
+        orderPeopleStr:"",
+        repairStartTime:"",
+        information:"",
+      },
+    }
+  },
+  methods:{
+    //逆地址解析
+    search() {
+      console.log("kaishishou")
+      console.log(this.mapList)
+      console.log(this.keyword)
+      for (let i = 0; i <this.mapList.length ; i++) {
+        if (this.mapList[i].name == this.keyword ){
+          //到摄像头列表中搜索，将信息窗体显示出来
+          console.log(this.mapList[i])
+            this.mapList[i].show = true;
+            this.mapList[i].animal ="BMAP_ANIMATION_BOUNCE";
+        }
+      }
+    },
+    // 覆盖物 点 信息窗体 关闭 --------- bm-info-window  暂时不用
+    infoWindowClose(param) {
+      param.show = false
+      console.log(param.show)
+    },
+    // 覆盖物 点 信息窗体 打开,同时获取地图视野的中心点
+    infoWindowOpen(param) {
+      // bm-info-window  暂时不用
+      console.log(param)
+      param.show = true
+      param.animal = "BMAP_ANIMATION_BOUNCE"
+      this.center.lat = param.position.lat;
+      this.center.lng = param.position.lng;
+    },
+    //上下文菜单跳转
+    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 隐藏
+      if (type.currentTarget.Oa > 14) {
+        this.lableOpen = true;
+      } else {
+        this.lableOpen = false;
+      }
+    },
+  }
 }
 
-.BMap_pop {
+</script>
 
-> div,
-> img:nth-child(10) {
+<style scoped>
+/*调试信息窗格的样式*/
+/*地图标题 infoWindow*/
+/deep/ .BMap_bubble_title{
+  color:#fff;
+  font-size:18px;
+  /*font-weight: bold;*/
+  text-align:left;
+  background:transparent !important;
+}
+/deep/ .BMap_bottom {
+  display: none;
+}
+/*去除四个角的方块*/
+/deep/ .BMap_pop div:nth-child(1){
+  border-radius:7px 0 0 0;
+  background:transparent !important;
+  border:0 !important;
+}
+/deep/ .BMap_pop > div, > img:nth-child(10) {
   display: none;
   overflow: unset;
 }
-
-> div:nth-child(9) {
+/deep/ .BMap_pop > div:nth-child(9) {
   display: block;
   overflow: unset;
   width: 340px !important;
 }
-
-> div:nth-child(8) {
+/deep/ .BMap_pop > div:nth-child(8) {
   /*display: block;*/
 }
-
-.BMap_top {
+/deep/ .BMap_pop .BMap_top{
   display: none;
 }
-
-.BMap_center {
+/deep/ .BMap_pop .BMap_center{
   background: transparent;
   border: none;
   position: sticky !important;
   height: 100%;
 }
-
-}
-.BMap_bubble_content {
+/deep/ .BMap_bubble_content {
   background: rgba(0, 0, 0, .5);
   border-radius: 5px;
   padding: 20px;
-
-.info-window {
+}
+/deep/ .BMap_bubble_content .info-window{
   padding-right: 8px;
   width: 100%;
   max-height: 280px;
   overflow: auto;
-
-.el-divider {
+}
+/deep/ .BMap_bubble_content .info-window .el-divider{
   background: #ccccccbf;
 }
-
-.address {
+/deep/ .BMap_bubble_content .info-window .address{
   color: #fff;
 }
-
+/*//此处修改百度地图信息窗口的小箭头样式,里面的图标也可以在这里自定义,直接添加 img{}自定义就好了*/
+/deep/ .BMap_pop div:nth-child(8) {
+    background-color: rgb(255, 255, 255, 0) !important;
+    /*color: white !important;*/
+    /*!/设置透明度*!*!*/
+    /*opacity: 0.6;*/
 }
-/*//自定义滚动条样式*/
-.info-window::-webkit-scrollbar {
+/*自定义滚动条*/
+/deep/ .BMap_bubble_content .info-window::-webkit-scrollbar{
   width: 6px;
   height: 1px;
 }
-
-.info-window::-webkit-scrollbar-thumb {
+/deep/ .BMap_bubble_content .info-window::-webkit-scrollbar-thumb{
   border-radius: 6px;
-  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  -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);
+/deep/ .BMap_bubble_content .info-window::-webkit-scrollbar-track{
+  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
   border-radius: 6px;
   background: #EDEDED;
 }
 
+/*修改地图信息窗口对象样式*/
+.contain{
+  width: 100%;
+  height: 100%;
 }
+.complete {
+  width: 210px;
+  margin-right:15px
+}
+.map {
+  /*height: 750px;*/
+  /*height: 850px;*/
+  width: 100%;
+  height: 800px;
+}
+/*
+ 去除百度地图版权
+ 去除右上角[地图、卫星、三维]控件
+ 去除百度地图右上角平移缩放控件的市县区文字
+  */
+.map >>> .anchorBL,
+/*.map >>> .anchorTR,*/
+.map >>> .BMap_zlHolder {
+  display: none;
+  visibility: hidden;
+}
+.conditions-div >>> .el-form-item {
+  margin: 10px;
 }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/modules/monitoring/test.vue b/src/views/modules/monitoring/test.vue
index f080551..e8b1723 100644
--- a/src/views/modules/monitoring/test.vue
+++ b/src/views/modules/monitoring/test.vue
@@ -1,73 +1,32 @@
 <template>
-
-
-<!--  <iframe style="width: 800px; height: 600px;" src="../../../../020/index.html"/>-->
-<!--  <iframe :src="this.txtUrl"  width="100%" :style="{height:calHeight}"  sandbox></iframe>-->
-<!--  <iframe src="../../../../public/index.html"  width="100%" :style="{height:calHeight}" ></iframe>-->
-<!--  <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 class="contain">
     <baidu-map
         class="map"
         :scroll-wheel-zoom="true"
         :double-click-zoom="false"
-        @zoomend="mouseEvent"
         :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-map-type :map-types="['BMAP_NORMAL_MAP','BMAP_PERSPECTIVE_MAP','BMAP_SATELLITE_MAP']"  anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type>
+      <div >
+        <bm-marker :position="{lng: item.position.lng,lat: item.position.lat}" >
+          <bm-info-window  :show="true"  class="bminfowindow" >
+            <div style="color:#fff;font-size:16px;">
+              <div style="width:220px;font-size: 20px">摄像头数据</div>
+              <div style="margin-top:5px;height: 3px; width:100%;background-color: #1981E1 !important;"></div>
 
-      <!--缩放控件-->
-      <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"
-          :key="key"
-          :position="{'lng':item.cameraLongitude,'lat':item.cameraLatitude}"
-          @rightclick="rightmons(item.idFaceCamera)"
-          :dragging="false"
-      >
-        <bm-label
-            :massClear="false"
-            @dblclick="deletePoint(item)"
-            v-if="lableOpen"
-            :content="'<div style=display:'+item.displayCss+ '><div >名称:' + item.cameraName+'</div>'+ '<div>位置:' + item.cameraRegionFirstlevelBackUp+'</div>'+'<div>坐标:' + item.cameraLongitude+','+ item.cameraLatitude+'</div></div >'"
-            :labelStyle="{backgroundColor :'0.05',border :'0',color: 'blue', fontSize : '14px' ,padding:'10px'}"
-            :offset="{width: -100, height: -90}"
-        />
-      </bm-marker>
+              <div style="margin-top:10px;width:220px">  异常区域：</div>
+              <div style="margin-top:5px;width:220px">  详细地址：</div>
+              <div style="margin-top:5px;width:220px">  严重程度：</div>
+              <div style="margin-top:5px;width:220px">  上报人：</div>
+              <div style="margin-top:5px;width:220px">  联系方式：</div>
+              <div style="margin-top:5px;width:220px">  指派人：</div>
+              <div style="margin-top:5px;width:220px">  故障开始时间：</div>
+              <div style="margin-top:5px;width:220px">  详细信息：</div>
+            </div>
+          </bm-info-window>
+        </bm-marker>
+      </div>
     </baidu-map>
   </div>
 
@@ -84,6 +43,13 @@ export default {
   },
   data() {
     return {
+      //信息窗口数据导入
+      Informationwindowdata: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
       keyword: '',
       item:{
           position: { lng: 103.931057, lat: 30.755467 },
@@ -92,7 +58,7 @@ export default {
       },
       content:"shexiangtou",
       lableOpen: false,
-      zoom:14,
+      zoom:18,
       center: {
         lng: 103.931057, lat: 30.755467
       },
@@ -141,6 +107,11 @@ export default {
     //逆地址解析
     search() {
       this.item.show = true
+      for (let i = 0; i <this.mapList.length ; i++) {
+          if (this.mapList[i].name == this.keyword ){
+            //到摄像头列表中搜索，将信息窗体显示出来
+          }
+      }
     },
     // 覆盖物 点 信息窗体 关闭 --------- bm-info-window  暂时不用
     infoWindowClose(param) {
@@ -245,6 +216,84 @@ export default {
 };
 </script>
 <style scoped>
+/*地图标题 infoWindow*/
+/deep/ .BMap_bubble_title{
+  color:#fff;
+  font-size:18px;
+  /*font-weight: bold;*/
+  text-align:left;
+  background:transparent !important;
+}
+/deep/ .BMap_bottom {
+  display: none;
+}
+/*去除四个角的方块*/
+/deep/ .BMap_pop div:nth-child(1){
+  border-radius:7px 0 0 0;
+  background:transparent !important;
+  border:0 !important;
+}
+/deep/ .BMap_pop > div, > img:nth-child(10) {
+  display: none;
+  overflow: unset;
+}
+/deep/ .BMap_pop > div:nth-child(9) {
+  display: block;
+  overflow: unset;
+  width: 300px !important;
+}
+/deep/ .BMap_pop > div:nth-child(8) {
+  /*display: block;*/
+}
+/deep/ .BMap_pop .BMap_top{
+  display: none;
+}
+/deep/ .BMap_pop .BMap_center{
+  background: transparent;
+  border: none;
+  position: sticky !important;
+  height: 100%;
+}
+/deep/ .BMap_bubble_content {
+  background: rgba(0, 0, 0, .5);
+  border-radius: 5px;
+  padding: 20px;
+}
+/deep/ .BMap_bubble_content .info-window{
+  padding-right: 8px;
+  width: 100%;
+  max-height: 280px;
+  overflow: auto;
+}
+/deep/ .BMap_bubble_content .info-window .el-divider{
+  background: #ccccccbf;
+}
+/deep/ .BMap_bubble_content .info-window .address{
+  color: #fff;
+}
+/*//此处修改百度地图信息窗口的小箭头样式,里面的图标也可以在这里自定义,直接添加 img{}自定义就好了*/
+/*/deep/ .BMap_pop div:nth-child(8) {*/
+/*    background-color: rgb(255, 255, 255, 0) !important;*/
+/*    !*color: rgb(0, 220, 255) !important;*!*/
+/*    !/设置透明度*!*!*/
+/*    !*opacity: 0.6;*!*/
+/*}*/
+/*自定义滚动条*/
+/deep/ .BMap_bubble_content .info-window::-webkit-scrollbar{
+  width: 6px;
+  height: 1px;
+}
+/deep/ .BMap_bubble_content .info-window::-webkit-scrollbar-thumb{
+  border-radius: 6px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+  background: #535353;
+}
+/deep/ .BMap_bubble_content .info-window::-webkit-scrollbar-track{
+  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+  border-radius: 6px;
+  background: #EDEDED;
+}
+  /*修改地图信息窗口对象样式*/
 .contain{
   width: 100%;
   height: 100%;
@@ -265,7 +314,7 @@ export default {
  去除百度地图右上角平移缩放控件的市县区文字
   */
 .map >>> .anchorBL,
-.map >>> .anchorTR,
+/*.map >>> .anchorTR,*/
 .map >>> .BMap_zlHolder {
   display: none;
   visibility: hidden;
@@ -273,4 +322,5 @@ export default {
 .conditions-div >>> .el-form-item {
   margin: 10px;
 }
-</style>
\ No newline at end of file
+
+</style>