左侧bar样式修改完毕

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

@@ -144,8 +144,21 @@
         <el-button class="refresh-but" @click="refreshMap()">
           <i class="iconfont icon-reset"></i>
         </el-button>
-
         <div class="leftBar-wrapper">
+          燃气公司
+
+          <div class="comp-wrapper">
+            <div
+              class="comp"
+              :class="{ active: compChangeArr.indexOf(item) >= 0 }"
+              v-for="item in comp"
+              :key="item"
+              @click="compChange(item)"
+            >
+              {{ item }}
+            </div>
+          </div>
+
           <div
             class="box-wrapper"
             v-for="(item, index) in changeBtnData"
@@ -157,8 +170,10 @@
                 active: leftBarNum.indexOf(item.value) >= 0,
                 firstbox: index == 0,
               }"
-              @click="arrowRightChange(item)"
+              @click.stop="leftBarChange(item)"
             >
+              <!-- @click="arrowRightChange(item)" -->
+
               <span class="upPic"> 上图 </span>
               <div class="left">
                 <i class="iconfont" :class="item.icon"></i>
@@ -166,14 +181,12 @@
               <div class="right">
                 {{ item.label }}
               </div>
-              <i
-                @click.stop="leftBarChange(item)"
-                class="el-icon-check bingo"
-              ></i>
+              <i class="el-icon-check bingo"></i>
               <i class="ju"></i>
               <i
                 class="arrow-right el-icon-arrow-right"
                 :class="{ active: arrowRightNum.indexOf(item.value) >= 0 }"
+                @click.stop="arrowRightChange(item)"
               ></i>
             </div>
             <el-collapse-transition>
@@ -371,6 +384,11 @@ export default {
       iconClass: "icon-create",
       createValue: 0,
       createLabel: "新增",
+      //所有燃气公司
+      comp: ["公司A", "公司B", "公司C"],
+      // 公司被选中状态
+      compChangeArr: [],
+
       changeBtnData: [
         {
           type: "0",
@@ -885,7 +903,16 @@ export default {
         }
       });
     },
-
+    // 选择公司
+    compChange(item) {
+      const index = this.compChangeArr.indexOf(item);
+      if (index < 0) {
+        this.compChangeArr.push(item);
+      } else {
+        this.compChangeArr.splice(index, 1);
+      }
+      console.log(this.compChangeArr);
+    },
     // 左边的Bar修改值 左边抽屉
     leftBarChange(item) {
       // this.leftBarNum= this.leftBarNum != item.value ? item.value:0;
@@ -1163,6 +1190,8 @@ export default {
         this.arrowRightNum.push(item.value);
       }
       this.domAllShow();
+      // 原本是卸载抽屉上的方法，由于冒泡，要单独写一次
+      this.drawerClick();
     },
 
     // 管道储存
@@ -1875,13 +1904,32 @@ input[type="radio"] {
       }
     }
   }
-
+  // 燃气公司选项
+  .comp-wrapper {
+    display: flex;
+    color: #fff;
+    padding-left: 35px;
+    padding-bottom: 10px;
+    .comp {
+      margin-right: 10px;
+      cursor: pointer;
+      padding: 2px 4px;
+      border-radius: 5px;
+      &:hover {
+        background-color: #053b6a94;
+      }
+      &.active {
+        background-color: #053b6a;
+        color: #31eaea !important;
+      }
+    }
+  }
   // 左边的bar
   .leftBar-wrapper {
     // position: fixed;
     width: 340px;
     // margin-left: 20px;
-    margin-top: 60px;
+    margin-top: 35px;
     // box-sizing: border-box;
     .box-wrapper {
       width: 340px;
@@ -1991,17 +2039,20 @@ input[type="radio"] {
           border-top: 1px solid rgba(5, 59, 106, 0);
         }
       }
+      // box浮动上去的颜色
       &:hover {
         box-sizing: border-box;
         // background-color: rgba(5, 59, 106, 0.1);
-        background-color: #053b6a;
-        border-bottom: none !important;
+        // background-color: #053b6a;
+        background-color: #053b6a94;
+
+        // border-bottom: none !important;
         .upPic {
-          color: #31eaea;
+          color: #31eaeaab;
         }
         .left,
         .right {
-          color: #31eaea !important;
+          color: #31eaeaab !important;
         }
       }
       .upPic {
@@ -2035,23 +2086,49 @@ input[type="radio"] {
       > i.arrow-right {
         color: #fff !important;
         position: absolute;
-        right: 32px;
-        top: 16px;
+        right: 0px;
+        top: 0px;
+        padding: 16px 15px;
         transition: 0.3s linear;
+        font-weight: 700;
         &.active {
+          color: #fff !important;
+          font-weight: 700;
           transform: rotate(90deg);
         }
       }
+      // 当点击下拉框选项的样式
       &.active {
-        // background-color: #053b6a;
-        // .left,
-        // .right {
-        //   color: #fff;
-        // }
-        > i {
+        // 选中状态
+        box-sizing: border-box;
+        background-color: #053b6a;
+        // border-bottom: none !important;
+        .upPic {
           color: #31eaea;
+        }
+        .left,
+        .right {
+          color: #31eaea !important;
+        }
+        > i {
+          // color: #31eaea;
+          color: #053b6a;
           font-weight: 600;
         }
+
+        &:hover {
+          box-sizing: border-box;
+          background-color: #053b6a94;
+          // background-color: #053b6a;
+          // border-bottom: none !important;
+          .upPic {
+            color: #31eaeaab;
+          }
+          .left,
+          .right {
+            color: #31eaeaab !important;
+          }
+        }
       }
       .left {
         color: #fff;