Merge branch 'master' of http://39.106.31.193:9211/xiepufeng/jihe-hs

 Conflicts:

	ruoyi-ui/src/views/information/board/index.vue

ruoyi-ui/src/assets/styles/sidebar-dark.scss

@@ -209,27 +209,26 @@
 
       .menuBox {
         .edit {
-          background-image: url(../../assets/cloudControl/edit2.png);
+          background-image: url('~@/assets/screen/xtb/gg.png');
         }
-
         .del {
-          background-image: url(../../assets/cloudControl/edit4.png);
+          background-image: url('~@/assets/screen/xtb/xx.png');
         }
-
         .toLeft {
-          background-image: url(../../assets/cloudControl/toLeft2.png);
+          
+          background-image: url('~@/assets/screen/xtb/zz.png');
         }
 
         .edit:hover {
-          background-image: url(../../assets/cloudControl/edit1.png);
+          background-image: url('../../assets/cloudControl/edit1.png');
         }
 
         .del:hover {
-          background-image: url(../../assets/cloudControl/closeIcon1.png);
+          background-image: url('../../assets/cloudControl/closeIcon1.png');
         }
 
         .toLeft:hover {
-          background-image: url(../../assets/cloudControl/toLeft1.png);
+          background-image: url('../../assets/cloudControl/toLeft1.png');
         }
       }
     }

ruoyi-ui/src/layout/index.vue

@@ -28,7 +28,7 @@
               </div>
             </div>
           </div>
-          <div :class="{hasTagsView:needTagsView}" class="main-container" :style="topNav?'margin-left:0;height:91vh;':''">
+          <div :class="{hasTagsView:needTagsView}" class="main-container" :style="topNav?'margin-left:0;height:92.4vh;':''">
             <div :class="{'fixed-header':fixedHeader}"></div>
             <!-- 面包屑导航 -->
             <!-- <breadcrumb ref="Breadcrumb" id="breadcrumb-container" class="breadcrumb-container" style="margin-left:20px;" /> -->
@@ -200,6 +200,7 @@ export default {
   position: relative;
   height: 100%;
   width: 100%;
+  // background-color: #11232a;
   // overflow: hidden;
   &.mobile.openSidebar {
     position: fixed;

ruoyi-ui/src/views/index.vue

@@ -2,7 +2,11 @@
   <div class="home_page">
     <!-- 地图 -->
     <div class="home_page_map">
-      <GaoDeMap />
+      <GaoDeMap @mapClickEventFn="mapClickEvent" />
+    </div>
+    <!-- 地图弹框 -->
+    <div ref="mapDialog" class="map_dialog" :style="{'top':mapDialogTop,'left':mapDialogLeft}">
+
     </div>
     <!-- 左边 -->
     <div class="home_page_left">
@@ -92,6 +96,8 @@ export default {
   name: 'indexView',
   data() {
     return {
+      mapDialogTop: '0px',
+      mapDialogLeft: '0px',
       keyMonitoringList: [
         { id: 1, name: '日累计车流量', val: 59876, unit: '', col: '#00D1FF' },
         { id: 2, name: '当前在途车辆', val: 4618, unit: '', col: '#00D1FF' },
@@ -147,12 +153,22 @@ export default {
   // },
   // 事件函数
   methods: {
+    // 地图点位
+    mapClickEvent(e) {
+      console.log('父组件地图点位', e)
+      console.log()
+      // this.mapDialogTop = e.pixel.y + 'px'
+      // this.mapDialogLeft = e.pixel.x + 'px'
+      this.$refs.mapDialog.style.top = e.pixel.y + 'px'
+      this.$refs.mapDialog.style.left = e.pixel.x + 'px'
+      console.log(this.$refs.mapDialog)
+    },
     subjectBtnFn(item) {
       this.subjectBtn = item.id
     }
   }
 }
-</script>
+</script>xy
 <style lang='scss' scoped>
 .home_page {
   width: 100%;
@@ -490,4 +506,13 @@ export default {
   transform: translateX(-50%);
   display: flex;
 }
+.map_dialog {
+  width: 10vw;
+  height: 20vh;
+  background-color: pink;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  transform: translate(-110%, -110%);
+}
 </style>

ruoyi-ui/src/views/map/index.vue

@@ -17,22 +17,24 @@ export default {
       markDataList: [
         {
           id: 1601,
-          tit: '淄博光伏电站',
+          tit: '服务区',
-          longitude: 117.420411,
+          longitude: 116.86532,
-          latitude: 36.634429,
+          latitude: 36.57979,
-          http: 'powerstation',
+          imgUrl: require('@/assets/screen/xtb/fwqdot.png')
-          imgSrc: require('@/assets/screen/r1.png'),
+        },
-          imgUrl: require('@/assets/screen/sd.png'),
+        {
-          po: '山东潍坊安丘市安丘东服务区',
+          id: 1601,
-          na1: '装机容量',
+          tit: '立交',
-          val1: 23,
+          longitude: 116.665377,
-          unit1: 'MW',
+          latitude: 36.396199,
-          na2: '电压等级',
+          imgUrl: require('@/assets/screen/xtb/ljdot.png')
-          val2: 10,
+        },
-          unit2: 'kV',
+        {
-          na3: '并网方式',
+          id: 1601,
-          val3: '高压并网',
+          tit: '收费站',
-          na4: ''
+          longitude: 116.500411,
+          latitude: 36.297617,
+          imgUrl: require('@/assets/screen/xtb/sfzdot.png')
         }
       ]
     }
@@ -349,40 +351,27 @@ export default {
             })
             this.addMarkDataList.push(marker)
 
-            marker.content =
+            marker.content = ''
-              "<div style='width:23vw;height:18vh;background-color:#00152b;'><div style='width:100%;height:3vh;position: relative;'><div style='position:absolute;left:19.4%;top:160%;border-radius:10px;background-color:#134063;color:#fff;font-size:12px;padding-left:0.5vw;padding-top:0.2vh;padding-bottom:0.3vh;padding-right:0.3vw;'>能效23%</div><img style='width:100%;height:100%;' src=" +
+            // marker.on('mouseover', e => {
-              titImgSrc +
+            //   this.infoWindow.setContent(e.target.content)
-              ' /><div style=' +
+            //   this.infoWindow.open(this.map, e.target.getPosition())
-              'position:absolute;left:0%;top:0%;line-height:3vh;margin-left:1.7vw;color:rgba(255,255,255,0.8);font-size:0.875rem;' +
+            // })
-              '>' +
-              item.tit +
-              '</div></div><div style="display:flex;"><div style=' +
-              'width:14vw;height:14.5vh;padding:1vh;box-sizing:border-box;' +
-              '><img style=' +
-              'width:100%;height:100%;' +
-              ' src=' +
-              item.imgSrc +
-              ' /></div><div style=' +
-              'width:100%;height:100%;padding:0.5vw 0 0 0.6vw;box-sizing:border-box;' +
-              '><div style="color:rgba(255,255,255,0.8);font-size:0.75rem;"><span style="color:#0a75c7">电站位置 : </span> 山东潍坊安丘市安丘东服务区</div><div style="display:flex;font-size:0.75rem;margin-top:1vh;"><div style="width:50%"><span style="color:#0a75c7">装机容量 : </span> <span style="color:rgba(255,255,255,0.8)">23 MW</span></div><div><span style="color:#0a75c7">电压等级 : </span> <span style="color:rgba(255,255,255,0.8)">10 kW</span></div></div><div style="display:flex;font-size:0.75rem;margin-top:1vh;"><div style="width:50%"><span style="color:#0a75c7">并网方式 : </span> <span style="color:rgba(255,255,255,0.8)">高压并网</span></div><div><span style="color:#0a75c7">变压器容量 : </span> <span style="color:rgba(255,255,255,0.8)">63 Kva</span></div></div><div style="display:flex;font-size:0.75rem;margin-top:1vh;"><div style="width:50%"><span style="color:#0a75c7">光伏产能 : </span> <span style="color:rgba(255,255,255,0.8)">23 GW</span></div><div><span style="color:#0a75c7">并网日期 : </span> <span style="color:rgba(255,255,255,0.8)">2023.03.17</span></div></div><div style="display:flex;font-size:0.75rem;margin-top:1vh;"><div style="width:50%"><span style="color:#0a75c7">运行状态 : </span> <span style="color:#20bd5d"> 正常</span></div><div><span style="color:#0a75c7">设备数量 : </span> <span style="color:rgba(255,255,255,0.8)">23 </span></div></div></div></div>'
-            marker.on('mouseover', e => {
-              this.infoWindow.setContent(e.target.content)
-              this.infoWindow.open(this.map, e.target.getPosition())
-            })
 
-            marker.on('mouseout', () => {
+            // marker.on('mouseout', () => {
-              this.map.clearInfoWindow()
+            //   this.map.clearInfoWindow()
-            })
+            // })
 
             marker.on('click', e => {
-              console.log(e.target._opts.extData)
+              // console.log('地图点击事件', e)
-              this.$router.push({
+              this.$emit('mapClickEventFn', e)
-                path: e.target._opts.extData.http,
+              // console.log(e.target._opts.extData)
-                name: e.target._opts.extData.http,
+              // this.$router.push({
-                query: {
+              //   path: e.target._opts.extData.http,
-                  id: e.target._opts.extData
+              //   name: e.target._opts.extData.http,
-                }
+              //   query: {
-              })
+              //     id: e.target._opts.extData
+              //   }
+              // })
             })
           })
           // 将创建的点标记添加到已有的地图实例：