Merge branch 'develop_jzl'

gassafety-web/src/components/PopWindow/flowMeter.vue

@@ -13,6 +13,7 @@
                 v-model="form.pipeId"
                 placeholder="请选择所属管道"
                 style="width: 100%"
+                @change="selectChange"
               >
                 <el-option
                   v-for="item in pipeList"
@@ -200,6 +201,10 @@ export default {
     MyFileUpload,
   },
   methods: {
+    selectChange(e){
+      const arr = this.pipeList.filter(item=>item.pipeId == e);
+      this.form.pipeName = arr[0].pipeName;
+    },
     show() {
       this.dialogVisible = true;
     },
@@ -210,7 +215,7 @@ export default {
       this.form.iconUrl = res.url;
     },
     submitForm() {
-      console.log(this.form);
+      // console.log("this.form",this.form);
       this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.deviceId != null) {

gassafety-web/src/components/PopWindow/lineInfoWindow.vue

 <template>
   <div class="wrapper">
     <div class="top display-default">
-      <div class="left text">{{ obj.pipeName }}</div>
+      <div class="left text ddd" :title="obj.pipeName">{{ obj.pipeName }}</div>
       <div class="right text">
         <img @click="close" src="../../assets/images/closeBtn.png" alt="" />
       </div>
@@ -132,27 +132,30 @@ export default {
 .wrapper {
   width: 406px;
   // height: 488px;
-  background: #fff;
+  // background: #fff;
   border-radius: 4px;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+  background: rgba(7, 29, 51, 0.9);
+  color: #fff;
   // overflow: hidden;
+
+  .top {
+    width: 100%;
+    height: 51px;
+    // background-color: #053b6a;
+    background-image: url(../../assets/images/blueTopBg.png);
+    background-size: 100% 100%;
+    background-position: center;
     &:before {
       content: "";
       position: absolute;
       left: -20px;
       top: 5px;
-    width: 0px;
-    height: 0px;
-    /* border: 20px solid red; */
-    border-top: 15px solid transparent;
-    border-bottom: 15px solid transparent;
-    /* border-left: 50px solid greenyellow; */
-    border-right: 30px solid #053b6a;
+      z-index: -1;
+      width: 33px;
+      height: 33px;
+      background-image: url(../../assets/images/blueLeftTriangle.png);
     }
-  .top {
-    width: 100%;
-    height: 51px;
-    background-color: #053b6a;
     .text {
       font-weight: 600;
       font-size: 16px;
@@ -187,7 +190,7 @@ export default {
         .eq-text {
           font-size: 14px;
           font-weight: 400;
-          color: #1d1d1d;
+          color: #fff;
           opacity: 1;
           & > span {
             vertical-align: top;

gassafety-web/src/components/PopWindow/markerInfoWindow.vue

@@ -2,7 +2,7 @@
   <div class="wrapper">
     <span class="dot-left"></span>
     <div class="top display-default">
-      <div class="left text">{{ data.deviceName }}</div>
+      <div class="left text ddd" :title="data.deviceName">{{ data.deviceName }}</div>
       <div class="right text">
         <img
           src="../../assets/images/closeBtn.png"
@@ -51,8 +51,8 @@
         </el-col>
 
         <div>
-          <span>管道所在地址：</span>
-          <span>{{ data.pipeAddr }}</span>
+          <span>设备所在地址：</span>
+          <span>{{ data.deviceAddr }}</span>
         </div>
         <div>
           <span>备注信息：</span>
@@ -88,26 +88,28 @@ export default {
 .wrapper {
   width: 406px;
   // height: 488px;
-  background: #fff;
   border-radius: 4px;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+  // background: #fff;
   // overflow: hidden;
+  background: rgba(7, 29, 51, 0.9);
+  color: #fff;
   .top {
     width: 100%;
     height: 51px;
-    background-color: #053b6a;
+    background-image: url(../../assets/images/blueTopBg.png);
+    background-size: 100% 100%;
+    background-position: center;
+    color: #fff;
     &:before {
       content: "";
       position: absolute;
       left: -20px;
       top: 5px;
-      width: 0px;
-      height: 0px;
-      /* border: 20px solid red; */
-      border-top: 15px solid transparent;
-      border-bottom: 15px solid transparent;
-      /* border-left: 50px solid greenyellow; */
-      border-right: 30px solid #053b6a;
+      z-index: -1;
+      width: 33px;
+      height: 33px;
+      background-image: url(../../assets/images/blueLeftTriangle.png);
     }
     .text {
       font-weight: 600;
@@ -143,7 +145,7 @@ export default {
         .eq-text {
           font-size: 14px;
           font-weight: 400;
-          color: #1d1d1d;
+          color: #fff;
           opacity: 1;
           & > span {
             vertical-align: top;

gassafety-web/src/components/PopWindow/pipelineView.vue

@@ -349,7 +349,6 @@ export default {
     // 图片列表移除
     listRemove(e) {
       this.editForm.iconUrl = "";
-
       this.fileArr = [];
     },
   },

gassafety-web/src/components/PopWindow/pressureGage.vue

@@ -13,6 +13,7 @@
                 v-model="form.pipeId"
                 placeholder="请选择所属管道"
                 style="width: 100%"
+                @change="selectChange"
               >
                 <el-option
                   v-for="item in pipeList"
@@ -201,6 +202,10 @@ export default {
     MyFileUpload,
   },
   methods: {
+    selectChange(e){
+      const arr = this.pipeList.filter(item=>item.pipeId == e);
+      this.form.pipeName = arr[0].pipeName;
+    },
     show() {
       this.dialogVisible = true;
     },

gassafety-web/src/components/PopWindow/regulatorBox.vue

@@ -13,6 +13,7 @@
                 v-model="form.pipeId"
                 placeholder="请选择所属管道"
                 style="width: 100%"
+                @change="selectChange"
               >
                 <el-option
                   v-for="item in pipeList"
@@ -200,6 +201,10 @@ export default {
     MyFileUpload,
   },
   methods: {
+    selectChange(e){
+      const arr = this.pipeList.filter(item=>item.pipeId == e);
+      this.form.pipeName = arr[0].pipeName;
+    },
     show() {
       this.dialogVisible = true;
       //this.getPipeInfo();

gassafety-web/src/components/PopWindow/valveWell.vue

@@ -13,6 +13,7 @@
                 v-model="form.pipeId"
                 placeholder="请选择所属管道"
                 style="width: 100%"
+                @change="selectChange"
               >
                 <el-option
                   v-for="item in pipeList"
@@ -198,6 +199,10 @@ export default {
     MyFileUpload,
   },
   methods: {
+    selectChange(e){
+      const arr = this.pipeList.filter(item=>item.pipeId == e);
+      this.form.pipeName = arr[0].pipeName;
+    },
     show() {
       this.dialogVisible = true;
     },

gassafety-web/src/components/PopWindowGis/lineInfoWindow.vue

@@ -151,9 +151,9 @@ export default {
 .wrapper {
   width: 406px;
   max-height: 430px;
-  background: rgba(7, 29, 51, 0.9);
   border-radius: 4px;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+  background: rgba(7, 29, 51, 0.9);
   color: #fff;
 
   // overflow: hidden;

gassafety-web/src/utils/gaodeMap.js

@@ -54,6 +54,7 @@ class gaodeMap {
       // labelzIndex: 110,
       pitch: 8,
       zoom: 9,
+      mapStyle: "amap://styles/1c84d2203793b0f622df2cda53db1afd"
       // mapStyle: 'amap://styles/darkblue',
       // mapStyle: 'amap://styles/3b679a15f448a4740ba2ff7524e1a4ae',
     });
@@ -77,7 +78,7 @@ class gaodeMap {
             this.createNewLine();
             console.log("map点击事件新建");
           })
-          .catch(() => { });
+          .catch(() => {});
       }
       // console.log("抬起来了");
     });
@@ -116,7 +117,7 @@ class gaodeMap {
       let options = this.myMap.getStatus();
       options.scrollWheel = true;
       this.myMap.setStatus(options);
-      console.log("飞行结束")
+      console.log("飞行结束");
     });
 
     this.districtBoundaries(latlng);
@@ -124,6 +125,21 @@ class gaodeMap {
   panTo(lnglat) {
     this.myMap.panTo(lnglat);
   }
+
+  changeMap(bool) {
+    // 卫星图
+
+    if (!bool) {
+      if (this.satellite) return;
+      this.satellite = new AMap.TileLayer.Satellite();
+      this.myMap.addLayer(this.satellite);
+    } else {
+      if (this.satellite) {
+        this.myMap.removeLayer(this.satellite);
+        this.satellite = null;
+      }
+    }
+  }
   /**
    * 获取map
    * @returns {AMap.Map}
@@ -157,9 +173,8 @@ class gaodeMap {
       level: "city"
     };
     let district = new AMap.DistrictSearch(opts);
-    district.search(that.center, function (status, result) {
+    district.search(that.center, function(status, result) {
       if (status == "complete") {
-
         let defaultCenter = [];
         defaultCenter.push(result.districtList[0].center.lng);
         defaultCenter.push(result.districtList[0].center.lat);
@@ -169,7 +184,7 @@ class gaodeMap {
           map.setCenter(defaultCenter);
         }
 
-        console.log("defaultCenter", defaultCenter)
+        console.log("defaultCenter", defaultCenter);
 
         let bounds = result.districtList[0].boundaries;
         for (let i = 0; i < bounds.length; i += 1) {
@@ -199,12 +214,12 @@ class gaodeMap {
       offset: new AMap.Pixel(24, -38),
       anchor: "left-top"
     });
-    infoWindow.on("mouseover", function () {
+    infoWindow.on("mouseover", function() {
       let options = map.getStatus();
       options.scrollWheel = false;
       map.setStatus(options);
     });
-    infoWindow.on("mouseout", function () {
+    infoWindow.on("mouseout", function() {
       let options = map.getStatus();
       options.scrollWheel = true;
       map.setStatus(options);
@@ -234,7 +249,7 @@ class gaodeMap {
       editWindow.obj = marker;
       editWindow.gaoMap = that;
       editWindow.map = map;
-      marker.on("click", function (e) {
+      marker.on("click", function(e) {
         if ("edit" == that.mapOperateType) {
           editWindow.form = e.target.getExtData();
           editWindow.show();
@@ -296,19 +311,19 @@ class gaodeMap {
           infoWindow.open(map, e.target.getPosition());
         }*/
       });
-      marker.on("dragend", function (e) {
+      marker.on("dragend", function(e) {
         editWindow.form.longitude = e.lnglat.lng;
         editWindow.form.latitude = e.lnglat.lat;
       });
     } else {
-      marker.on("mouseover", function () {
+      marker.on("mouseover", function() {
         marker.setLabel({
           offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
           content: "<div class='info'>" + data.deviceName + "</div>", //设置文本标注内容
           direction: "top" //设置文本标注方位
         });
       });
-      marker.on("mouseout", function () {
+      marker.on("mouseout", function() {
         marker.setLabel({
           content: null
         });
@@ -447,7 +462,7 @@ class gaodeMap {
       case DEVICE_TYPE.REGEULATORBOX: {
         let icon = new AMap.Icon({
           //size: new AMap.Size(51, 23),
-          image: require("../assets/oldImages/tiaoyaxiang.png")
+          image: require("../assets/images/tiaoyaxiang.png")
         });
         marker.setIcon(icon);
         break;
@@ -455,7 +470,7 @@ class gaodeMap {
       case DEVICE_TYPE.VALUEWELL: {
         let icon = new AMap.Icon({
           //size: new AMap.Size(51, 23),
-          image: require("../assets/oldImages/famenjing.png")
+          image: require("../assets/images/famenjing.png")
         });
         marker.setIcon(icon);
         break;
@@ -463,7 +478,7 @@ class gaodeMap {
       case DEVICE_TYPE.FLOWMETER: {
         let icon = new AMap.Icon({
           //size: new AMap.Size(51, 23),
-          image: require("../assets/oldImages/liuliangji.png")
+          image: require("../assets/images/liuliangji.png")
         });
         marker.setIcon(icon);
         break;
@@ -487,7 +502,7 @@ class gaodeMap {
       case DEVICE_TYPE.PRESSUREGAGE: {
         let icon = new AMap.Icon({
           //size: new AMap.Size(51, 23),
-          image: require("../assets/oldImages/yalibiao.png")
+          image: require("../assets/images/yalibiao.png")
         });
         marker.setIcon(icon);
         break;
@@ -952,14 +967,14 @@ class gaodeMap {
     this.overlays = [];
     let that = this;
     this.markerOverlays = [];
-    this.mouseTool.on("draw", function (e) {
+    this.mouseTool.on("draw", function(e) {
       if (e.obj.getExtData().type != "newLine") {
         map.remove(that.markerOverlays);
         const device = that.createInfowindow("新增");
         device.map = map;
         device.obj = e.obj;
         device.gaoMap = that;
-        e.obj.on("click", function (aa) {
+        e.obj.on("click", function(aa) {
           let postion = aa.target._position;
           //兼容拖拽后单击事件，拖拽后点击事件返回位置为数组
           if (postion instanceof Array) {
@@ -971,11 +986,11 @@ class gaodeMap {
           }
           device.show();
         });
-        e.obj.on("mouseover", function () {
+        e.obj.on("mouseover", function() {
           that.mouseTool.close();
         });
 
-        e.obj.on("mouseout", function () {
+        e.obj.on("mouseout", function() {
           that.draw(that.deviceType);
         });
 
@@ -1086,7 +1101,7 @@ class gaodeMap {
         "AMap.MapType",
         "AMap.Geolocation"
       ],
-      function () {
+      function() {
         // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
         //map.addControl(new AMap.ToolBar());
 
@@ -1109,7 +1124,7 @@ class gaodeMap {
 
   searchTips(inputId) {
     let that = this;
-    AMap.plugin(["AMap.AutoComplete", "AMap.PlaceSearch"], function () {
+    AMap.plugin(["AMap.AutoComplete", "AMap.PlaceSearch"], function() {
       //输入提示
       // var autoOptions = {
       //   input: inputId
@@ -1170,7 +1185,10 @@ class gaodeMap {
     const path1 = eval(coordinates)[0];
     const path2 = eval(coordinates)[1];
     // map.setFitView();
-    const path3 = [(Number(path1[0])+Number(path2[0]) )/2 ,(Number(path1[1])+Number(path2[1]) )/2];
+    const path3 = [
+      (Number(path1[0]) + Number(path2[0])) / 2,
+      (Number(path1[1]) + Number(path2[1])) / 2
+    ];
     map.setCenter(path3, false);
 
     // const lntlat = eval(coordinates)[0];

gassafety-web/src/utils/gaodeMapView.js

@@ -15,6 +15,7 @@ import workerManInfowindow from "../components/PopWindowGis/workerManInfowindow.
 import workerManView from "../components/PopWindowGis/workerManView.vue";
 
 import { getArray } from "@/utils/gassafety.js";
+import { lineColor } from "./mapCommon.js";
 import { delPipe } from "@/api/device/pipe.js";
 import vue from "../main";
 import { Card } from "element-ui";
@@ -32,6 +33,7 @@ export const DEVICE_TYPE = {
   SMALLINSPECTOR: "workPoint",
   TROUBLE: "trouble"
 };
+
 class gaodeMap {
   // 所有线的数组
   polyLines = [];
@@ -112,6 +114,8 @@ class gaodeMap {
     this.myMap.on("zoomstart", () => {
       // console.log("缩放开始")
       this.closeInfoWindow();
+      this.polyLinesColorClear()
+
     });
     this.myMap.on("moveend", () => {
       if (this.handleInfoWindowOpenFunc) {
@@ -284,7 +288,7 @@ class gaodeMap {
       marker.on("mouseover", this.wokerManOpen);
       marker.on("mouseout", e => {
         e.target.infoWindow.close();
-        this.domAllShow()
+        this.domAllShow();
       });
 
       marker.on("mousedown", e => {
@@ -805,14 +809,15 @@ class gaodeMap {
     //console.log("包装的数组", arr);
     for (let i = 0; i < arr.length; i++) {
       const item = arr[i];
-      let { coordinates } = item;
+      let { coordinates, pipePressure } = item;
+      console.log(pipePressure);
       // //console.log("coordinates",coordinates)
       // let path = coordinates ? getArray(coordinates) :[];
       // 字符串转二维数组
       let path = coordinates ? eval(coordinates) : [];
       let polyline = new AMap.Polyline({
         path,
-        strokeColor: "#2EE7E7",
+        strokeColor: lineColor[pipePressure],
         strokeWeight: 4,
         strokeOpacity: 0.9,
         zIndex: 50,
@@ -834,6 +839,8 @@ class gaodeMap {
       //添加事件
       polyline.on("mousedown", this.polylineMouseOver);
       polyline.on("mouseover", () => {
+        // lineColor
+
         polyline.setOptions({ strokeColor: "#F7FE38" });
       });
       polyline.on("mouseout", e => {
@@ -841,7 +848,7 @@ class gaodeMap {
         if (polyline.getExtData().lineData.alarmState == 1) {
           polyline.setOptions({ strokeColor: "#ff0000" });
         } else {
-          polyline.setOptions({ strokeColor: "#2EE7E7" });
+          polyline.setOptions({ strokeColor: lineColor[pipePressure] });
         }
         // infoWindow.close();
       });
@@ -935,7 +942,8 @@ class gaodeMap {
         if (item.getExtData().lineData.alarmState == 1) {
           item.setOptions({ strokeColor: "#ff0000" });
         } else {
-          item.setOptions({ strokeColor: "#2EE7E7" });
+          const { pipePressure } = item.getExtData().lineData;
+          item.setOptions({ strokeColor: lineColor[pipePressure] });
         }
       }
     });

gassafety-web/src/utils/mapCommon.js

+// 管道压力（1低压，2中压，3次高压，4高压）  颜色不同
+
+ export const lineColor ={
+  "1":"#2EE7E7",
+  "2":"#FFFFFF",
+  "3":"#18FF0F",
+  "4":"#DE67FA"
+}
\ No newline at end of file

gassafety-web/src/views/device/map/index.vue

@@ -103,6 +103,11 @@
       :class="{ back: backFlag, opacity: drawerOpacity }"
       @click.stop="drawerdrawer"
     >
+      <div class="mapChange">
+        <div :class="{ active: !mapStyle }" @click="mapChange(1)">卫星地图</div>
+        <div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div>
+      </div>
+
       <div class="switch" @click="backFlag = !backFlag">
         <img v-if="!backFlag" src="@/assets/images/l.png" alt="" />
         <img v-else src="@/assets/images/r.png" alt="" />
@@ -213,7 +218,7 @@
                 </template>
                 <!-- 无数据 -->
                 <template v-else>
-                  <div style="padding-left: 5px">暂无数据</div>
+                  <div style="padding-left: 5px; color: #fff">暂无数据</div>
                 </template>
               </div>
             </el-collapse-transition>
@@ -240,6 +245,8 @@ export default {
       targetNum: 0,
 
       backFlag: true,
+      // 卫星与全景地图的切换
+      mapStyle: true,
       // 抽屉内的滚动条的高需要赋值赋值
       boxHeight: "",
       boxWidth: "",
@@ -307,7 +314,7 @@ export default {
   },
   methods: {
     onResize() {
-      this.boxHeight = document.body.clientHeight - 81;
+      this.boxHeight = document.body.clientHeight - 80;
       this.boxWidth = document.body.clientWidth - 100;
     },
     async initMap() {
@@ -371,6 +378,15 @@ export default {
         this.gaoMap.markerShow(4, false);
       }
     },
+    // 卫星地图与全景地图的切换
+    mapChange(num) {
+      if (num == 1) {
+        this.mapStyle = false;
+      } else {
+        this.mapStyle = true;
+      }
+      this.gaoMap.changeMap(this.mapStyle);
+    },
     addDevice() {
       if (this.iconClass == "icon-create") {
         this.targetNum = this.targetNum != 1 ? 1 : 0;
@@ -1116,7 +1132,9 @@ input[type="radio"] {
   left: 100px;
   width: 348px;
   transition: 0.2s linear;
-  background: #fff;
+  // background: #fff;
+  background: rgba(6, 29, 51, 0.8);
+
   // background: red;
   opacity: 0;
   &.opacity {
@@ -1125,6 +1143,24 @@ input[type="radio"] {
   &.back {
     left: -248px;
   }
+  .mapChange {
+    right: -178px;
+    top: 10px;
+    color: #fff;
+    position: absolute;
+    display: flex;
+    div {
+      padding: 4px 8px;
+      border: 1px solid #fff;
+      margin-left: 8px;
+      cursor: pointer;
+      &.active,
+      &:hover {
+        background-color: #053b6a;
+        color: #31eaea;
+      }
+    }
+  }
   .scroll {
     // height: 100%;
     position: relative;
@@ -1188,7 +1224,9 @@ input[type="radio"] {
           // border-right: 1px solid #cccccc;
           box-sizing: border-box;
           // padding-left: 5px;
-          color: #053b6a;
+          // color: #053b6a;
+          color: #fff;
+
           font-weight: 600;
         }
       }
@@ -1200,9 +1238,14 @@ input[type="radio"] {
         color: #1d1d1d;
         &:hover {
           box-sizing: border-box;
-          border-bottom: 1px solid #053b6a;
-          color: #053b6a;
+          // border-bottom: 1px solid #053b6a;
+          border-bottom: 1px solid #7fc0f8;
+
+          // color: #053b6a;
           font-weight: 600;
+          > div {
+            color: #7fc0f8;
+          }
         }
         &.topActive {
           // border-top: 1px solid #cccccc;
@@ -1219,6 +1262,8 @@ input[type="radio"] {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
+          color: #fff;
+
           // border-right: 1px solid #cccccc;
         }
       }
@@ -1242,14 +1287,16 @@ input[type="radio"] {
       height: 48px;
       padding-left: 20px;
       display: flex;
-      background-color: #ffffff;
+      // background-color: #ffffff;
       box-sizing: border-box;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.5);
       cursor: pointer;
       position: relative;
       // box-sizing: border-box;
       &.firstbox {
-        border-top: 1px solid rgba(0, 0, 0, 0.1);
+        // border-top: 1px solid rgba(0, 0, 0, 0.1);
+        border-top: 1px solid rgba(5, 59, 106, 0);
+
         // box-sizing: border-box;
         &:hover {
           border-top: 1px solid rgba(5, 59, 106, 0);
@@ -1257,15 +1304,24 @@ input[type="radio"] {
       }
       &:hover {
         box-sizing: border-box;
-        background-color: rgba(5, 59, 106, 0.1);
+        // background-color: rgba(5, 59, 106, 0.1);
+        background-color: #053b6a;
         border-bottom: none !important;
+        .upPic {
+          color: #31eaea;
+        }
+        .left,
+        .right {
+          color: #31eaea !important;
+        }
       }
       .upPic {
         display: inline-block;
         margin-left: 40px;
         line-height: 48px;
         font-size: 16px;
-        color: #053b6a;
+        // color: #053b6a;
+        color: #fff;
       }
       > i.ju {
         position: absolute;
@@ -1289,6 +1345,7 @@ input[type="radio"] {
         color: #fff;
       }
       > i.arrow-right {
+        color: #fff !important;
         position: absolute;
         right: 32px;
         top: 16px;
@@ -1299,16 +1356,21 @@ input[type="radio"] {
       }
       &.active {
         // background-color: #053b6a;
-        .left,
-        .right {
-          color: #053b6a;
-        }
+        // .left,
+        // .right {
+        //   color: #053b6a;
+        // }
+        // > i {
+        //   color: #053b6a;
+        // }
         > i {
-          color: #053b6a;
+          color: #31eaea;
+          font-weight: 600;
         }
       }
       .left {
-        color: #053b6a;
+        // color: #053b6a;
+        color: #fff;
         line-height: 48px;
         margin-left: 28px;
         .iconfont {
@@ -1316,7 +1378,8 @@ input[type="radio"] {
         }
       }
       .right {
-        color: #1d1d1d;
+        // color: #1d1d1d;
+        color: #fff;
         line-height: 48px;
         font-size: 16px;
         margin-left: 4px;
@@ -1337,6 +1400,8 @@ input[type="radio"] {
         padding-bottom: 2px;
         .btn {
           border-radius: 50%;
+          background: none;
+
           // width: 14px;
           // height: 14px;
           padding: 2px;
@@ -1345,6 +1410,7 @@ input[type="radio"] {
           display: inline-block;
           font-size: 14px;
           padding: 0px 5px;
+          color: #fff;
         }
       }
     }
@@ -1353,9 +1419,9 @@ input[type="radio"] {
   .switch {
     position: absolute;
     font-size: 30px;
-    right: -27px;
+    right: -30px;
     top: 50%;
-    margin-top: -30px;
+    margin-top: -123px;
     width: 40px;
     border-radius: 40%;
     overflow: hidden;

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

@@ -103,6 +103,14 @@
         <div :class="{ active: !mapStyle }" @click="mapChange(1)">卫星地图</div>
         <div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div>
       </div>
+      <!-- 管道压力 -->
+      <div class="pipePressure">
+        <!-- <div>管道压力</div> -->
+        <div class="hasColorBox" :style="{color:lineColor[`1`]}">低压</div>
+        <div class="hasColorBox" :style="{color:lineColor[`2`]}">中压</div>
+        <div class="hasColorBox" :style="{color:lineColor[`3`]}">次高</div>
+        <div class="hasColorBox" :style="{color:lineColor[`4`]}">高压</div>
+      </div>
       <div class="switch" @click="backFlag = !backFlag">
         <img v-if="!backFlag" src="@/assets/images/l.png" alt="" />
         <img v-else src="@/assets/images/r.png" alt="" />
@@ -295,6 +303,7 @@ import Right from "./components/Right.vue";
 import CreateWork from "./components/CreateWork.vue";
 import CreateWorkTrouble from "./components/CreateWorkTrouble.vue";
 import { getInspectorLocations } from "@/api/inspectorLocation/location";
+import { lineColor } from "@/utils/mapCommon.js";
 
 export default {
   components: {
@@ -305,6 +314,7 @@ export default {
   },
   data() {
     return {
+      lineColor,
       gaoMap: null,
       deviceType: false,
       value: "",
@@ -448,11 +458,10 @@ export default {
       const RightBottom = pageDomRight.offsetTop + pageDomRight.offsetHeight;
       // 下边的上边
       const bottomTop = pageDomBottom.offsetTop;
-      if(RightBottom>bottomTop){
+      if (RightBottom > bottomTop) {
         // 重叠了，bottom右移动
-        this.bottomMarginRight=true;
+        this.bottomMarginRight = true;
       }
-
     },
 
     initMap() {
@@ -1512,7 +1521,7 @@ export default {
   width: 100%;
 }
 // 如果right与bottom 重叠，则bottom左移动
-.bottomMarginRight{
+.bottomMarginRight {
   right: 280px;
 }
 // .btn-wrapper {
@@ -1688,6 +1697,20 @@ input[type="radio"] {
       }
     }
   }
+  .pipePressure {
+    position: absolute;
+    color: #fff;
+    right: -52px;
+    top: 50px;
+    padding:1px;
+    // background: rgba(6, 29, 51, 0.8);
+    .hasColorBox{
+      border:1px solid #053b6a;
+      padding:2px 5px;
+      margin-bottom:5px;
+    }
+
+  }
   .scroll {
     // height: 100%;
     position: relative;
@@ -1833,7 +1856,9 @@ input[type="radio"] {
       position: relative;
       // box-sizing: border-box;
       &.firstbox {
-        border-top: 1px solid rgba(0, 0, 0, 0.5);
+        // border-top: 1px solid rgba(0, 0, 0, 0.5);
+        border-top: 1px solid rgba(5, 59, 106, 0);
+
         // box-sizing: border-box;
         &:hover {
           border-top: 1px solid rgba(5, 59, 106, 0);