设备录入上图页面的样式修改完毕

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;
-  &: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;
-  }
+
   .top {
     width: 100%;
     height: 51px;
-    background-color: #053b6a;
+    // 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;
+      z-index: -1;
+      width: 33px;
+      height: 33px;
+      background-image: url(../../assets/images/blueLeftTriangle.png);
+    }
     .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);
@@ -157,9 +158,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 +169,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 +199,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 +234,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();
@@ -248,10 +248,10 @@ class gaodeMap {
           vue
             .$confirm(
               '是否删除名称为"' +
-              e.target.getExtData().deviceName +
-              '"的' +
-              diviceType[markerType] +
-              " ?",
+                e.target.getExtData().deviceName +
+                '"的' +
+                diviceType[markerType] +
+                " ?",
               "提示",
               {
                 type: "warning"
@@ -296,19 +296,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 +447,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 +455,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 +463,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 +487,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 +952,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 +971,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 +1086,7 @@ class gaodeMap {
         "AMap.MapType",
         "AMap.Geolocation"
       ],
-      function () {
+      function() {
         // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
         //map.addControl(new AMap.ToolBar());
 
@@ -1109,7 +1109,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 +1170,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/views/device/map/index.vue

@@ -213,7 +213,7 @@
                 </template>
                 <!-- 无数据 -->
                 <template v-else>
-                  <div style="padding-left: 5px">暂无数据</div>
+                  <div style="padding-left: 5px; color: #fff">暂无数据</div>
                 </template>
               </div>
             </el-collapse-transition>
@@ -307,7 +307,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() {
@@ -1116,7 +1116,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 {
@@ -1188,7 +1190,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 +1204,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 +1228,8 @@ input[type="radio"] {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
+          color: #fff;
+
           // border-right: 1px solid #cccccc;
         }
       }
@@ -1242,14 +1253,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 +1270,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 +1311,7 @@ input[type="radio"] {
         color: #fff;
       }
       > i.arrow-right {
+        color: #fff !important;
         position: absolute;
         right: 32px;
         top: 16px;
@@ -1299,16 +1322,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 +1344,8 @@ input[type="radio"] {
         }
       }
       .right {
-        color: #1d1d1d;
+        // color: #1d1d1d;
+        color: #fff;
         line-height: 48px;
         font-size: 16px;
         margin-left: 4px;
@@ -1337,6 +1366,8 @@ input[type="radio"] {
         padding-bottom: 2px;
         .btn {
           border-radius: 50%;
+          background: none;
+
           // width: 14px;
           // height: 14px;
           padding: 2px;
@@ -1345,17 +1376,18 @@ input[type="radio"] {
           display: inline-block;
           font-size: 14px;
           padding: 0px 5px;
+          color: #fff;
         }
       }
     }
   }
   // 开关
-  .switch {
+   .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

@@ -448,11 +448,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 +1511,7 @@ export default {
   width: 100%;
 }
 // 如果right与bottom 重叠，则bottom左移动
-.bottomMarginRight{
+.bottomMarginRight {
   right: 280px;
 }
 // .btn-wrapper {
@@ -1833,7 +1832,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);