gis地图抽屉样式调整

gassafety-web/src/assets/styles/element-ui.scss

@@ -69,7 +69,7 @@
 // dropdown
 .el-dropdown-menu {
   a {
-    display: block
+    display: block;
   }
 }
 
@@ -78,6 +78,19 @@
   display: inline-flex !important;
 }
 
+// gis地图里抽屉的搜索样式
+.search-input {
+  .el-input__inner {
+    height: 28px;
+    min-height: 28px;
+    outline: #053b6a;
+    &:focus {
+      // outline: #053b6a;
+      border-color: #053b6a;
+    }
+
+  }
+}
 // to fix el-date-picker css style
 .el-range-separator {
   box-sizing: content-box;
@@ -89,4 +102,4 @@
   > .el-submenu__title
   .el-submenu__icon-arrow {
   display: none;
-}
\ No newline at end of file
+}

gassafety-web/src/assets/styles/fonticon.scss

 @font-face {
   font-family: "iconfont"; /* Project id 2692138 */
-  src: url('//at.alicdn.com/t/font_2692138_cd9e8nk8yoo.woff2?t=1627718383904') format('woff2'),
-       url('//at.alicdn.com/t/font_2692138_cd9e8nk8yoo.woff?t=1627718383904') format('woff'),
-       url('//at.alicdn.com/t/font_2692138_cd9e8nk8yoo.ttf?t=1627718383904') format('truetype');
+  src: url('//at.alicdn.com/t/font_2692138_spittg1q2rr.woff2?t=1629681541408') format('woff2'),
+       url('//at.alicdn.com/t/font_2692138_spittg1q2rr.woff?t=1629681541408') format('woff'),
+       url('//at.alicdn.com/t/font_2692138_spittg1q2rr.ttf?t=1629681541408') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,19 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-reset:before {
+  content: "\e616";
+}
+
+.icon-search{
+  
+}
+.icon-search:before {
+  content: "\e617";
+  font-size: 13px;
+  
+}
+
 .icon-zhibanrenyuan:before {
   content: "\e613";
 }

gassafety-web/src/utils/gaodeMapView.js

@@ -28,7 +28,8 @@ export const DEVICE_TYPE = {
   WORKORDER: "6",
   PRESSUREGAGE: "7",
   INSPECTOR: "8",
-  SMALLINSPECTOR: "workPoint"
+  SMALLINSPECTOR: "workPoint",
+  TROUBLE:"trouble"
 };
 class gaodeMap {
   // 所有线的数组
@@ -114,11 +115,11 @@ class gaodeMap {
       if (!this.onceFlag) {
         this.onceFlag = true;
         this.view.backFlag = false;
-
-        let options = this.myMap.getStatus();
-        options.scrollWheel = true;
-        this.myMap.setStatus(options);
       }
+      // 每次地图移动结束，就让地图可以缩放
+      let options = this.myMap.getStatus();
+      options.scrollWheel = true;
+      this.myMap.setStatus(options);
     });
     this.districtBoundaries();
   }
@@ -268,10 +269,20 @@ class gaodeMap {
         this.workerManMarkArr.push(marker);
       }
     }
+
+    // 隐患
+    if(DEVICE_TYPE.TROUBLE == markerType){
+      console.log("隐患上图")
+    }
+
+
+
+
     if (
       DEVICE_TYPE.WORKORDER != markerType &&
       DEVICE_TYPE.INSPECTOR != markerType &&
-      DEVICE_TYPE.SMALLINSPECTOR != markerType
+      DEVICE_TYPE.SMALLINSPECTOR != markerType&&
+      DEVICE_TYPE.TROUBLE != markerType
     ) {
       // marker.content = this.getMarketContent(data, markerInfoWindow);
       marker.infoWindow = infoWindow;
@@ -504,6 +515,16 @@ class gaodeMap {
         dom.remove();
         return html;
       }
+      case DEVICE_TYPE.TROUBLE: {
+        const dom = createPop(workerManInfowindow, {
+          title: "隐患",
+          data: data,
+          map: map
+        });
+        const html = dom.$el;
+        dom.remove();
+        return html;
+      }
     }
   }
 
@@ -595,6 +616,16 @@ class gaodeMap {
         marker.setIcon(icon);
         break;
       }
+      //隐患
+      case DEVICE_TYPE.TROUBLE: {
+        let icon = new AMap.Icon({
+          opacity: 0.1,
+          image: require("../assets/images/trouble.png")
+        });
+        marker.workerPoint = true;
+        marker.setIcon(icon);
+        break;
+      }
     }
   }
   changeMarkIcon(marker, iconUrl) {

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

@@ -94,9 +94,17 @@
           placeholder="点击输入"
           id="tipinput"
           class="search-input"
-        />
-        <el-button class="search-but" @click="search()">搜索</el-button>
-        <el-button class="refresh-but" @click="refreshMap()">重置</el-button>
+        >
+          <template slot="suffix">
+            <div @click="search()">
+              <i class="iconfont icon-search"></i>
+            </div>
+          </template>
+        </el-input>
+        <!-- <el-button class="search-but" @click="search()">搜索</el-button> -->
+        <el-button class="refresh-but" @click="refreshMap()">
+          <i class="iconfont icon-reset"></i>
+        </el-button>
 
         <div class="leftBar-wrapper">
           <div
@@ -138,7 +146,7 @@
                 <template v-if="item.list.length > 0">
                   <!-- 设备以及管道 展示内容是一样的 -->
                   <template v-if="item.value != 9">
-                    <div>
+                    <div class="list-wrapper">
                       <div class="thead">
                         <div class="no">序号</div>
                         <div class="code">设备编号</div>
@@ -163,7 +171,7 @@
                   </template>
                   <!-- 值班人员 展示不太一样-->
                   <template v-else-if="item.value == 9">
-                    <div>
+                    <div class="list-wrapper">
                       <div class="thead">
                         <div class="no">序号</div>
                         <div class="code">人员姓名</div>
@@ -188,25 +196,26 @@
                   </template>
 
                   <div class="goback">
-                    <div class="minMax">
+                    <!-- <div class="minMax">
                       页数
                       {{ item.nowPage }}/{{ item.maxPage }}
-                    </div>
-                    <div class="btn">
+                    </div> -->
+                    <div class="btn-w">
                       <el-button
-                        class="backPage"
+                        class="btn backPage"
                         type="mini"
                         :disabled="item.nowPage == 1"
                         @click.stop="pageBack(item, index)"
-                        >上一页</el-button
-                      >
+                        icon="el-icon-arrow-left"
+                      />
+                      <span class="btn-w-num">{{ item.nowPage }}</span>
                       <el-button
-                        class="goPage"
+                        class="btn goPage"
                         type="mini"
                         :disabled="item.nowPage == item.maxPage"
                         @click.stop="pageGo(item, index)"
-                        >下一页</el-button
-                      >
+                        icon="el-icon-arrow-right"
+                      />
                     </div>
                   </div>
                 </template>
@@ -230,8 +239,10 @@ import gaodeMap, {
   DEVICE_TYPE,
   mapOperateType,
 } from "utils/gaodeMapView.js";
+
 import { selectAlarmDevice } from "@/api/dataMonitoring/deviceAlarm.js";
 import { getAllDeviceInfo, countDeviceByType } from "@/api/device/deviceInfo";
+import { getMapHiddenTroublelist } from "@/api/riskManagement/hiddenTrouble";
 import RightBototmData from "./components/RightBototmData.vue";
 import CreateWork from "./components/CreateWork.vue";
 import { getInspectorLocations } from "@/api/inspectorLocation/location";
@@ -342,7 +353,7 @@ export default {
   created() {
     // 让左边的框隐藏
     this.$store.dispatch("app/toggleDevice", "mobile");
-    console.log("sasdasdas")
+    console.log("sasdasdas");
   },
 
   mounted() {
@@ -369,7 +380,6 @@ export default {
       this.gaoMap.view = this;
       // 右下角数据 跟值班人员
       this.rightBottomData();
-
       // this.backFlag = false;
     },
 
@@ -388,6 +398,12 @@ export default {
             return this.getInspectorLocations();
           }
         })
+        .then((res) => {
+          if (res == 200) {
+            //隐患
+            return this.getMapHiddenTroublelist();
+          }
+        })
         .then((res) => {
           if (res == 200) {
             // 所有设备上图结束之后，左边的抽屉加载数据
@@ -397,6 +413,7 @@ export default {
           }
         });
     },
+    // 设备
     getDeviceInfo(queryParams) {
       this.loading = true;
       return getAllDeviceInfo(queryParams).then((response) => {
@@ -426,6 +443,7 @@ export default {
         return response.code;
       });
     },
+    // 管道
     getPipeList(queryParams) {
       return pipeAllInfoList(queryParams).then((res) => {
         console.log("管道", res);
@@ -453,6 +471,18 @@ export default {
         return res.code;
       });
     },
+    // 隐患
+    getMapHiddenTroublelist(queryParams) {
+      return getMapHiddenTroublelist({ dealStatus: 3 }).then((res) => {
+        if (res.code == 200) {
+          res.data.forEach((item) => {
+            console.log("隐患", item);
+            this.gaoMap.addMarker(DEVICE_TYPE.TROUBLE, item);
+          });
+          return res.code;
+        }
+      });
+    },
     // 获取报警资源，并且改变图上的状态
     getSelectAlarmDevice() {
       selectAlarmDevice().then((res) => {
@@ -506,7 +536,6 @@ export default {
               options.lineData.alarmType = alarmType;
               // 报警信息
               options.lineData.alarmValue = alarmValue;
-
               console.log("管道报警");
             }
             polyline.setExtData(options);
@@ -657,9 +686,7 @@ export default {
     // 左边的Bar修改值 左边抽屉
     leftBarChange(item) {
       // this.leftBarNum= this.leftBarNum != item.value ? item.value:0;
-
       const index = this.leftBarNum.indexOf(item.value);
-
       if (index >= 0) {
         this.leftBarNum.splice(index, 1);
       } else {
@@ -926,7 +953,7 @@ export default {
       // });
       // console.log(this.changeBtnData[0], this.allList[0]);
       this.changeBtnData.forEach((item, index) => {
-        console.log("=======", index, this.allList[index]);
+        // console.log("=======", index, this.allList[index]);
         if (this.allList[index]?.length > 0) {
           item.list = this.allList[index].filter((item2, index2) => {
             return (
@@ -1234,7 +1261,6 @@ export default {
       .right {
         padding-right: 38px;
       }
-
       .newLetf {
         margin-left: 20px;
       }
@@ -1335,16 +1361,6 @@ input[type="radio"] {
   margin-right: 1rem;
 }
 
-.refresh-but {
-  // position: fixed;
-  position: absolute;
-
-  top: 10px;
-  left: 285px;
-  // width: 85px;
-  color: white;
-  background-color: #053b6a;
-}
 .classShow {
   opacity: 0;
 }
@@ -1353,12 +1369,12 @@ input[type="radio"] {
   top: 80px;
   bottom: 0;
   left: 0;
-  width: 370px;
+  width: 348px;
   transition: 0.2s linear;
   background: #fff;
   // background: red;
   &.back {
-    left: -370px;
+    left: -348px;
   }
   .scroll {
     // height: 100%;
@@ -1369,191 +1385,245 @@ input[type="radio"] {
     &::-webkit-scrollbar {
       display: none;
     }
-  }
-  .switch {
-    position: absolute;
-    font-size: 30px;
-    right: -27px;
-    top: 50%;
-    margin-top: -30px;
-    width: 40px;
-    border-radius: 40%;
-    overflow: hidden;
-    cursor: pointer;
-    // background: #fff;
-    i {
-      background: #fff;
+    .search-input {
+      position: absolute;
+      top: 14px;
+      left: 39px;
+      width: 236px;
+      .icon-search {
+        line-height: 28px;
+        cursor: pointer;
+        font-size: 13px;
+      }
+    }
+    .refresh-but {
+      // position: fixed;
+      position: absolute;
+      padding: 0px;
+      height: 28px;
+      width: 28px;
+      top: 14px;
+      left: 285px;
+      // width: 85px;
+      color: white;
+      background-color: #053b6a;
+      .icon-reset {
+        font-size: 13px;
+      }
     }
   }
-}
-
-.search-input {
-  position: absolute;
-  top: 10px;
-  left: 20px;
-  width: 200px;
-}
-.search-but {
-  // position: fixed;
-  position: absolute;
-  top: 10px;
-  left: 220px;
-  // width: 85px;
-  color: white;
-  background-color: #053b6a;
-}
-// 左边的bar
-.leftBar-wrapper {
-  // position: fixed;
-  width: 340px;
-  margin-left: 20px;
-  margin-top: 70px;
-  // box-sizing: border-box;
-  .box-wrapper {
-  }
-  .animate {
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-top: none;
 
-    .thead {
-      display: flex;
-      font-size: 14px;
-      > div {
-        border-right: 1px solid #cccccc;
+  // 左边的bar
+  .leftBar-wrapper {
+    // position: fixed;
+    width: 340px;
+    // margin-left: 20px;
+    margin-top: 60px;
+    // box-sizing: border-box;
+    .box-wrapper {
+      width: 340px;
+    }
+    .animate {
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+      border-top: none;
+      width: 340px;
+      .list-wrapper {
+        margin-left: 22px;
+        padding-top: 8px;
+      }
+      .thead {
+        display: flex;
+        font-size: 14px;
+        margin-bottom: 8px;
+        > div {
+          // border-right: 1px solid #cccccc;
+          box-sizing: border-box;
+          // padding-left: 5px;
+          color: #053B6A;
+          font-weight: 600;
+        }
+        
+      }
+      .deviceList {
+        cursor: pointer;
+        margin-bottom: 2px;
         box-sizing: border-box;
-        padding-left: 5px;
-        color: #000;
-        font-weight: 600;
+        border-bottom: 1px solid #053b6a00;
+        color: #1D1D1D;
+        &:hover {
+          box-sizing: border-box;
+          border-bottom: 1px solid #053b6a;
+          color: #053B6A;
+        }
+        &.topActive {
+          // border-top: 1px solid #cccccc;
+        }
+        display: flex;
+        // border-bottom: 1px solid #cccccc;
+        // justify-content: space-between;
+        > div {
+          // flex: 1;
+          font-size: 14px;
+          // border-right: 1px solid #cccccc;
+          box-sizing: border-box;
+          // padding-left: 5px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          // border-right: 1px solid #cccccc;
+        }
+      }
+      .no {
+        width: 50px;
+      }
+      .name {
+        // border-right: none;
+        flex: 1;
+        text-align: center;
+      }
+      .code {
+        width: 112px;
+        text-align: center;
       }
     }
-    .deviceList {
+    .box {
+      width: 348px;
+      height: 48px;
+      padding-left: 20px;
+      display: flex;
+      background-color: #ffffff;
+      box-sizing: border-box;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
       cursor: pointer;
-      &.topActive {
-        border-top: 1px solid #cccccc;
+      position: relative;
+      // box-sizing: border-box;
+      &.firstbox {
+        border-top: 1px solid rgba(0, 0, 0, 0.1);
+        // box-sizing: border-box;
+        &:hover {
+          border-top: 1px solid rgba(5, 59, 106, 0);
+        }
       }
-      display: flex;
-      border-bottom: 1px solid #cccccc;
-      // justify-content: space-between;
-      > div {
-        // flex: 1;
-        font-size: 14px;
-        border-right: 1px solid #cccccc;
+      &:hover {
         box-sizing: border-box;
-        padding-left: 5px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        // border-right: 1px solid #cccccc;
+        background-color: rgba(5, 59, 106, 0.1);
+        border-bottom: none !important;
+      }
+      .upPic {
+        display: inline-block;
+        margin-left: 64px;
+        line-height: 48px;
+        font-size: 16px;
+        color: #053b6a;
+      }
+      > i.ju {
+        position: absolute;
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background: #fff;
+        border: 1px solid #cccccc;
+        left: 45px;
+        top: 16px;
+        // top: ;
+        z-index: 1;
+        border-radius: 2px;
+      }
+      > i.bingo {
+        z-index: 2;
+        position: absolute;
+        // line-height: 48px;
+        left: 45px;
+        top: 16px;
+        color: #fff;
+      }
+      > i.arrow-right {
+        position: absolute;
+        right: 32px;
+        top: 16px;
+        transition: 0.3s linear;
+        &.active {
+          transform: rotate(90deg);
+        }
       }
-    }
-    .no {
-      width: 50px;
-    }
-    .name {
-      // border-right: none;
-      flex: 1;
-    }
-    .code {
-      width: 100px;
-    }
-  }
-  .box {
-    width: 340px;
-    height: 48px;
-    display: flex;
-    background-color: #ffffff;
-    box-sizing: border-box;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-top: none;
-    cursor: pointer;
-    position: relative;
-    .upPic {
-      display: inline-block;
-      margin-left: 32px;
-      line-height: 48px;
-      font-size: 10px;
-      color: #053b6a;
-    }
-    &.firstbox {
-      border-top: 1px solid rgba(0, 0, 0, 0.1);
-    }
-    > i.ju {
-      position: absolute;
-      display: inline-block;
-      width: 15px;
-      height: 15px;
-      background: #fff;
-      border: 1px solid #cccccc;
-      left: 15px;
-      top: 16px;
-      // top: ;
-      z-index: 1;
-      border-radius: 2px;
-    }
-    > i.bingo {
-      z-index: 2;
-      position: absolute;
-      // line-height: 48px;
-      left: 15px;
-      top: 16px;
-      color: #fff;
-    }
-    > i.arrow-right {
-      position: absolute;
-      right: 10px;
-      top: 16px;
-      transition: 0.3s linear;
       &.active {
-        transform: rotate(90deg);
+        // background-color: #053b6a;
+        .left,
+        .right {
+          color: #053b6a;
+        }
+        > i {
+          color: #053b6a;
+        }
       }
-    }
-
-    &:hover {
-      // background-color: #053b6a;
-      // color: #ffffff;
-      // > i {
-      //   color:#fff;
-      // }
-    }
-    &:hover .left,
-    &:hover .right {
-      // color: #ffffff;
-    }
-    &.active {
-      // background-color: #053b6a;
-      .left,
-      .right {
+      .left {
         color: #053b6a;
+        line-height: 48px;
+        margin-left: 28px;
+        .iconfont {
+          font-size: 22px;
+        }
       }
-      > i {
-        color: #053b6a;
+      .right {
+        color: #1d1d1d;
+        line-height: 48px;
+        font-size: 16px;
+        margin-left: 4px;
       }
     }
-    .left {
-      color: #053b6a;
-      line-height: 48px;
-      margin-left: 20px;
-    }
-    .right {
-      color: #1d1d1d;
-      line-height: 48px;
-      // margin-left: 20px;
+    .goback {
+      display: flex;
+      justify-content: space-between;
+      .minMax {
+        font-size: 14px;
+        line-height: 28px;
+        box-sizing: border-box;
+        padding-left: 3px;
+      }
+      .btn-w {
+        width: 100%;
+        text-align: center;
+        padding-bottom: 2px;
+        .btn {
+          border-radius: 50%;
+          // width: 14px;
+          // height: 14px;
+          padding: 2px;
+          &:active {
+            // border-color: #053b6a;
+            // color: #053b6a;
+            // outline: none;
+          }
+          &:hover {
+            // background: #053b6a;
+            // color: #053b6a;
+          }
+        }
+        .goPage {
+          // margin-left: 0;
+        }
+        .btn-w-num {
+          display: inline-block;
+          font-size: 14px;
+          padding: 0px 5px;
+        }
+      }
     }
   }
-  .goback {
-    display: flex;
-    justify-content: space-between;
-    .minMax {
-      font-size: 14px;
-      line-height: 28px;
-      box-sizing: border-box;
-      padding-left: 3px;
-    }
-    .btn {
-      text-align: right;
-      .goPage {
-        margin-left: 0;
-      }
+  // 开关
+  .switch {
+    position: absolute;
+    font-size: 30px;
+    right: -27px;
+    top: 50%;
+    margin-top: -30px;
+    width: 40px;
+    border-radius: 40%;
+    overflow: hidden;
+    cursor: pointer;
+    // background: #fff;
+    i {
+      background: #fff;
     }
   }
 }