地图详细显示

device-manager-ui/admin/src/components/Map.vue

@@ -2,6 +2,7 @@
 
 <template>
   <div class="my-map">
+
     <el-amap
       ref="map"
       vid="amapDemo"
@@ -12,6 +13,8 @@
       :events="events"
       class="amap-demo"
     >
+    <div class="tuli" ><slot name="leftTop"></slot></div>
+      
       <!-- <el-amap-search-box :on-search-result="onSearchResult" :events='searchEvents'/> -->
 
       <!--marker  -->
@@ -290,14 +293,14 @@ export default {
       //  },
       // 一些工具插件
       plugin: [
-        {
-          pName: "Geocoder",
-          events: {
-            init(o) {
-              //console.log("一些工具插件--地址"+o.getAddress())
-            },
-          },
-        },
+        // {
+        //   pName: "Geocoder",
+        //   events: {
+        //     init(o) {
+        //       //console.log("一些工具插件--地址"+o.getAddress())
+        //     },
+        //   },
+        // },
         {
           // 定位
           pName: "Geolocation",
@@ -322,24 +325,24 @@ export default {
             },
           },
         },
-        {
-          // 工具栏
-          pName: "ToolBar",
-          events: {
-            init(instance) {
-              //console.log("工具栏:"+instance);
-            },
-          },
-        },
-        {
-          // 鹰眼
-          pName: "OverView",
-          events: {
-            init(instance) {
-              //console.log("鹰眼:"+instance);
-            },
-          },
-        },
+        // {
+        //   // 工具栏
+        //   pName: "ToolBar",
+        //   events: {
+        //     init(instance) {
+        //       //console.log("工具栏:"+instance);
+        //     },
+        //   },
+        // },
+        // {
+        //   // 鹰眼
+        //   pName: "OverView",
+        //   events: {
+        //     init(instance) {
+        //       //console.log("鹰眼:"+instance);
+        //     },
+        //   },
+        // },
         {
           // 地图类型
           pName: "MapType",
@@ -366,6 +369,14 @@ export default {
 </script>
 
 <style lang="less">
+.tuli{
+  width: 300px;
+  top: 20px;
+  left: 34px;
+  position: absolute;
+  float: left;
+  background-color:rgba(255, 255, 255, 0.7);
+}
 .amap-info-content {
   position: relative;
   background: #fff;

device-manager-ui/admin/src/views/sitestat/list.vue

@@ -4,10 +4,12 @@
       <el-col :span="6" :xs="12" class="mytree">
         <el-card>
           <div slot="header">
-            <span style="font-size: 13px">站点分布</span>
+            <span 
+              ><b class="cardTitle">站点分布</b></span
+            >
 
             <el-button
-              style="float: right; padding: 3px 0"
+              style="float: right; "
               @click="switchStat"
               type="text"
               >切换为地图模式</el-button
@@ -143,7 +145,7 @@ export default {
 
         if (node.id.search(",")) {
           //this.query = { siteId: node.id.split(",")[0] ,siteIdList:node.id.split(",")};
-           this.query = {siteIdList:node.id.split(",")};
+          this.query = { siteIdList: node.id.split(",") };
         } else {
           this.query = { siteId: node.id };
         }
@@ -224,6 +226,13 @@ export default {
 </style>
 
 <style lang="scss" scoped>
+.cardTitle {
+  font-size: 16px;
+  color: rgb(20, 134, 248);
+  list-style-type: none;
+  border-bottom: 3px solid  rgb(20, 134, 248);
+  padding-bottom: 2px;
+}
 .mytree ::v-deep {
   .el-tree--highlight-current
     ::v-deep

device-manager-ui/admin/src/views/sitestat/maplist.vue

 <template>
   <div class="page">
-    <el-row :gutter="20">
-      <el-col :span="6" :xs="12" class="mytree">
+   
+
+
+  <Map ref="map" :markersData="originData" @choose="getDetailData" >  <el-row :gutter="20" slot="leftTop">
+   
         <el-card>
           <div slot="header">
-            <span style="font-size: 13px">站点分布</span>
+            <span><b  class="cardTitle">站点分布</b></span>
 
             <el-button
-              style="float: right; padding: 3px 0"
+              style="float: right;"
               @click="switchStat"
               type="text"
               >切换为列表模式</el-button
@@ -32,12 +35,8 @@
             </el-tree>
           </el-scrollbar>
         </el-card>
-      </el-col>
  
-      <el-col :span="18" :xs="12">
-        <Map ref="map" :markersData="originData" @choose="getDetailData" />
-      </el-col>
-    </el-row>
+    </el-row></Map>
 
     <dialog-show ref="dialogform" @ok="getData" />
   </div>
@@ -236,6 +235,13 @@ export default {
 </style>
 
 <style lang="scss" scoped>
+.cardTitle {
+  font-size: 16px;
+  color: rgb(20, 134, 248);
+  list-style-type: none;
+  border-bottom: 3px solid  rgb(20, 134, 248);
+  padding-bottom: 2px;
+}
 .mytree ::v-deep {
   .el-tree--highlight-current
     ::v-deep