气瓶标点

gassafetyprogress-web/src/assets/mapinages/meiqiguan.svg

+<svg width="18" height="25" viewBox="0 0 22 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.7 31.3658H5.30019C4.62592 31.3658 4.09277 30.817 4.09277 30.1584V28.559C4.09277 27.8847 4.6416 27.3516 5.30019 27.3516H16.7157C17.39 27.3516 17.9231 27.9004 17.9231 28.559V30.1584C17.9231 30.817 17.3743 31.3658 16.7 31.3658V31.3658Z" fill="#006AA6"/>
+<path d="M5.66113 28.9141H16.3397V29.7765H5.66113V28.9141Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.2417 1.59943H6.74272V4.84533H15.2417V1.59943ZM4.62583 1.56807H17.3742C17.8133 1.56807 18.1583 1.22309 18.1583 0.784034C18.1583 0.344975 17.8133 0 17.3742 0H4.62583C4.18677 0 3.8418 0.344975 3.8418 0.784034C3.8418 1.22309 4.18677 1.56807 4.62583 1.56807ZM9.34556 3.93749H12.6699C13.0932 3.93749 13.4382 3.59251 13.4382 3.15345C13.4382 2.71439 13.0932 2.36942 12.6542 2.36942H9.34556C8.9065 2.36942 8.56152 2.71439 8.56152 3.15345C8.56152 3.59251 8.9065 3.93749 9.34556 3.93749Z" fill="#006AA6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.6181 0.03125H6.38222C5.5825 0.03125 5.1748 0.438948 5.1748 1.23866V5.22156C5.1748 6.02127 5.5825 6.42897 6.38222 6.42897H15.6181C16.4179 6.42897 16.8256 6.02127 16.8256 5.22156V1.23866C16.8256 0.438948 16.4179 0.03125 15.6181 0.03125ZM9.3457 3.93498H12.67C13.0934 3.93498 13.4384 3.59 13.4384 3.15094C13.4384 2.71188 13.0934 2.36691 12.6543 2.36691H9.3457C8.90664 2.36691 8.56166 2.71188 8.56166 3.15094C8.56166 3.59 8.90664 3.93498 9.3457 3.93498Z" fill="#006AA6"/>
+<path d="M19.3189 7.60552C18.6133 6.89989 17.6567 6.49219 16.6532 6.49219H5.3474C4.34384 6.49219 3.38732 6.8842 2.68169 7.60552C1.97606 8.31115 1.56836 9.26767 1.56836 10.2712V23.5685C1.56836 24.572 1.96038 25.5285 2.68169 26.2342C3.38732 26.9398 4.34384 27.3475 5.3474 27.3475H16.6532C17.6567 27.3475 18.6133 26.9555 19.3189 26.2342C20.0245 25.5285 20.4322 24.572 20.4322 23.5685V10.2712C20.4322 9.26767 20.0245 8.31115 19.3189 7.60552ZM16.1671 19.4915C16.1044 20.6518 15.5869 21.7495 14.7401 22.5335C13.6111 23.443 12.1999 23.8977 10.7572 23.8037H10.7259C9.78504 23.8193 8.8442 23.5998 8.01312 23.1608C7.26045 22.7531 6.63322 22.1729 6.19416 21.4516C4.97107 19.2092 4.93971 16.4965 6.10008 14.2228C6.25688 13.8935 6.63322 13.7053 6.99388 13.7837C7.35453 13.8621 7.6211 14.1757 7.60542 14.5521C7.60542 15.2263 7.90336 15.8692 8.4365 16.3083C8.54626 15.6183 8.75011 14.9441 9.04805 14.3012C9.76936 12.7331 10.8356 11.3689 12.1685 10.3026C12.4351 10.0987 12.7957 10.0674 13.078 10.2399C13.3602 10.4124 13.5014 10.7417 13.4386 11.0709C13.078 12.3881 13.0937 13.768 13.4857 15.0695C13.7679 15.4302 14.0815 15.7595 14.4422 16.0417C15.6026 16.7944 16.2768 18.1116 16.1671 19.4915Z" fill="#006AA6"/>
+<path d="M16.6529 4.92578H5.34711C2.39914 4.92578 0 7.32493 0 10.2729V23.5701C0 26.5181 2.39914 28.9172 5.34711 28.9172H16.6529C19.6009 28.9172 22 26.5181 22 23.5701V10.2729C22 7.32493 19.6165 4.92578 16.6529 4.92578ZM16.1668 19.4931C16.1041 20.6535 15.5866 21.7512 14.7398 22.5352C13.6108 23.4447 12.1996 23.8994 10.7569 23.8053H10.7256C9.78475 23.821 8.84391 23.6015 8.01283 23.1624C7.26016 22.7547 6.63293 22.1745 6.19387 21.4532C4.97078 19.2109 4.93941 16.4981 6.09979 14.2244C6.25659 13.8951 6.63293 13.707 6.99359 13.7854C7.35424 13.8638 7.62081 14.1774 7.60513 14.5537C7.60513 15.228 7.90306 15.8709 8.43621 16.31C8.54597 15.62 8.74982 14.9457 9.04776 14.3028C9.76907 12.7348 10.8354 11.3705 12.1682 10.3043C12.4348 10.1004 12.7954 10.069 13.0777 10.2415C13.3599 10.414 13.5011 10.7433 13.4383 11.0726C13.0777 12.3898 13.0934 13.7697 13.4854 15.0712C13.7676 15.4318 14.0813 15.7611 14.4419 16.0434C15.6023 16.7961 16.2766 18.1132 16.1668 19.4931Z" fill="#006AA6"/>
+</svg>

gassafetyprogress-web/src/utils/mapClass/config.js

@@ -42,7 +42,7 @@ export const svgUrl = {
   15: require("@/assets/image/yj-xf.png"),
   16: require("@/assets/image/yj-xj.png"),
   //煤气罐罐  运行监测   气瓶回溯
-  17: require("@/assets/mapinages/meiqiguan.png"),
+  17: require("@/assets/mapinages/meiqiguan.svg"),
 };
 export const svgAlarm = {
   2: require("@/assets/mapImages/tyxAlarm.svg"),

gassafetyprogress-web/src/views/operationMonitor/operationQi/components/operationNum.vue

 <template>
-    <div>
+    <div class="display">
         <div class="leftbar">
             <div class="leftnum">
                 <img src="../../../../assets/mapinages/Group1120.png" alt="" style="width: 80px;">
@@ -184,21 +184,25 @@
 </script>
   
 <style scoped>
+    .display{
+        display: flex;
+        
+    }
 .leftbar{
-    width: 400px;
+    width: 27.5%;
     height: 340px;
-    float: left;
+    /* float: left; */
 }
 .centerbar{
     width: 45%;
     height: 340px;
-    float: left;
+    /* float: left; */
     margin-left: 40px;
 }
 .rightbar{
-    width: 400px;
+    width: 27.5%;
     height: 340px;
-    float: left;
+    /* float: left; */
     margin-left: 40px;
 }
 .leftnum{

gassafetyprogress-web/src/views/operationMonitor/operationQi/index.vue

@@ -85,7 +85,7 @@
                   <img src="../../../assets/mapinages/Group1129.png" alt="" style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;">
               </div>
               <div class="botnumber">
-                <div id="myChartpieone" :style="{width: '400px', height: '200px'}"></div>
+                <div id="myChartpieone" :style="{width: '100%', height: '100%'}"></div>
               </div>
             </div>
           </div>
@@ -101,6 +101,7 @@
   import operationNum from "./components/operationNum";
   import { EditorMap } from "@/utils/mapClass/map";
   import { mapGetters } from "vuex";
+  import Null from "@/components/bigWindow/Null.vue";
   // import { EditorMap } from "@/utils/mapClass/getPath.js";
   export default {
     components: {
@@ -110,6 +111,17 @@
     return {
       //地图
       // map: null,
+      arr:[
+        {longitude:114.186007 , latitude:38.260288 , iconType:17},
+        {longitude:114.185143, latitude:38.260178,  iconType:17},
+        {longitude:114.186345 , latitude:38.261046 , iconType:17},
+        {longitude:114.187007 , latitude:38.262288 , iconType:17},
+        {longitude:114.186143, latitude:38.265178,  iconType:17},
+        {longitude:114.187345 , latitude:38.267046 , iconType:17},
+        {longitude:114.188007 , latitude:38.268288 , iconType:17},
+        {longitude:114.189143, latitude:38.263178,  iconType:17},
+        {longitude:114.189345 , latitude:38.269046 , iconType:17},
+      ]
     }
   },
   computed: {
@@ -126,8 +138,14 @@
           },
           this
         );
+          this.addDevice();
       },
       methods: {
+        addDevice(data, component) {
+          for(let i =0;i<this.arr.length;i++){
+            this.map.addDevice(this.arr[i], Null);
+          }
+        },
         drawLine() {
         // 基于准备好的dom，初始化echarts实例
             let myChart1 = this.$echarts.init(document.getElementById("myChartpieone"));
@@ -220,11 +238,13 @@
     .bottletop{
         width: 100%;
         height: 450px;
+        display: flex;
+
     }
     .bottletopleft{
-        width: 400px;
+        width: 27.5%;
         height: 100%;
-        float: left;
+
     }
     .bottop{
         width: 100%;
@@ -242,7 +262,7 @@
     }
     .botimage{
         float: left;
-        width: 100px;
+        width: 20%;
         height: 200px;
         position: relative;
         margin-left: 20px;
@@ -268,7 +288,7 @@
     .bottletopcenter{
         width: 45%;
         height: 100%;
-        float: left;
+        /* float: left; */
         margin-left: 40px;
     }
     #map{
@@ -276,9 +296,9 @@
       height: 100%;
     }
     .bottletopright{
-        width: 400px;
+        width: 27.5%;
         height: 100%;
-        float: left;
+        /* float: left; */
         margin-left: 40px;
     }
     .bottlebottom{