修改

gassafety-web/src/views/enterprise/mapView/index.vue

 <template>
   <div>
     <div style="width: 100vw; height: 100vh" id="container"></div>
-    <div class="btn-wrapper">
+    <div v-show="false" class="btn-wrapper">
       <div class="myBtn">
         <div
           class="el-btn"
@@ -63,6 +63,8 @@
       </div>
     </div>
 
+
+
     <el-input
       v-model="keyWord"
       placeholder="点击输入"
@@ -93,15 +95,22 @@
         <i class="el-icon-check"></i>
       </div>
     </div>
+
+    <RightBototmData :list="rightBototmData"/>
   </div>
 </template>
 <script>
-import gaodeMap from "utils/gaodeMap.js";
-import { pipeAllInfoList } from "@/api/device/pipe.js";
-import { map, DEVICE_TYPE, mapOperateType } from "utils/gaodeMap.js";
-import { getAllDeviceInfo } from "@/api/device/deviceInfo";
+// import  from "utils/gaodeMapView.js";
+import { pipeAllInfoList, countPipeLength } from "@/api/device/pipe.js";
+import gaodeMap, { map, DEVICE_TYPE, mapOperateType } from "utils/gaodeMapView.js";
+import { getAllDeviceInfo, countDeviceByType } from "@/api/device/deviceInfo";
+import RightBototmData from "./components/RightBototmData.vue";
 import { getInspectionDataByInspector } from "@/api/deviceInspection/inspectionData"
+
 export default {
+  components: {
+    RightBototmData,
+  },
   data() {
     return {
       gaoMap: null,
@@ -146,6 +155,8 @@ export default {
         },
       ],
       keyWord: "",
+      // 右下角的数据data
+      rightBototmData: [],
     };
   },
   async created() {
@@ -444,6 +455,12 @@ export default {
 
 
 <style lang="scss" scoped>
+#container{
+  position: fixed;
+  top: 80px;
+  bottom:0;
+  width: 100%;
+}
 // 左边的bar
 .leftBar-wrapper {
   position: fixed;
@@ -627,37 +644,37 @@ input[type="radio"] {
   padding: 0;
   margin: 0 0.5rem 0 0;
 }
-.btn {
-  display: inline-block;
-  font-weight: 400;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  border: 1px solid transparent;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
-    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  background-color: transparent;
-  background-image: none;
-  color: #25a5f7;
-  border-color: #25a5f7;
-  padding: 0.25rem 0.5rem;
-  line-height: 1.5;
-  border-radius: 1rem;
-  -webkit-appearance: button;
-  cursor: pointer;
-  width: 6rem;
-  margin: 0 1rem 0 2rem;
-}
+// .btn {
+//   display: inline-block;
+//   font-weight: 400;
+//   text-align: center;
+//   white-space: nowrap;
+//   vertical-align: middle;
+//   -webkit-user-select: none;
+//   -moz-user-select: none;
+//   -ms-user-select: none;
+//   user-select: none;
+//   border: 1px solid transparent;
+//   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+//     border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+//   background-color: transparent;
+//   background-image: none;
+//   color: #25a5f7;
+//   border-color: #25a5f7;
+//   padding: 0.25rem 0.5rem;
+//   line-height: 1.5;
+//   border-radius: 1rem;
+//   -webkit-appearance: button;
+//   cursor: pointer;
+//   width: 6rem;
+//   margin: 0 1rem 0 2rem;
+// }
 
-.btn:hover {
-  color: #fff;
-  background-color: #25a5f7;
-  border-color: #25a5f7;
-}
+// .btn:hover {
+//   color: #fff;
+//   background-color: #25a5f7;
+//   border-color: #25a5f7;
+// }
 .input-text {
   width: 4rem;
   margin-right: 1rem;