yunxing 4 years ago
parent
commit
94b7e4cba5
1 changed files with 32 additions and 6 deletions
  1. 32 6
      src/components/editview/leftToolBar/equipmentList.vue

+ 32 - 6
src/components/editview/leftToolBar/equipmentList.vue

@@ -56,21 +56,21 @@
                     <div v-show="items.isShow">
                         <div
                             class="equipType"
-                            @mouseouter="currentEquipment = ''"
-                            @mouseover="currentEquipment = item.id"
                             @click="chioceItem(item)"
                             v-for="(item, i) in items.children"
+                            :class="[item.visible ? 'equip-visible' : 'equip-hidden', item.selected ? 'equip-selected' : '']"
                             :key="i"
                         >
                             <span
                                 class="local-name"
-                                :class="[item.visible ? 'visible' : 'hidden', item.selected ? 'selected' : 'normal']"
                                 :title="`${item.legendData.localName}${item.legendData.localId ? '-' + item.legendData.localId : ''}`"
                                 >{{ item.legendData.localName
                                 }}<span class="local-id" :title="item.legendData.localId">-{{ item.legendData.localId }}</span>
                             </span>
                             <!-- hover行显示小眼睛 -->
-                            <Icon v-show="currentEquipment === item.id" :name="item.visible ? 'preview' : 'hide'" @click="toggleItemVisible(item)" />
+                            <div class="toggle-eyes">
+                                <Icon :name="item.visible ? 'preview' : 'hide'" @click.native.stop="toggleItemVisible(item)" />
+                            </div>
                         </div>
                     </div>
                 </el-collapse-transition>
@@ -126,7 +126,6 @@ export default {
             equipmentTree: [], //三级设备树
             equipmentList: [], //二维数组
             local: null, //table loading
-            currentEquipment: "", //当前列表hover的设备
         };
     },
     computed: {
@@ -208,6 +207,7 @@ export default {
          */
         toggleItemVisible(item) {
             console.log(item);
+            item.visible = !item.visible;
         },
         // 设置hover显示
         sethover(a, b, c) {
@@ -359,6 +359,7 @@ li {
     position: relative;
     display: flex;
     flex-direction: column;
+    background-color: #fff;
     .clp {
         display: flex;
         align-items: center;
@@ -396,8 +397,20 @@ li {
             padding: 0 10px 0 40px;
             display: flex;
             align-items: center;
+            .toggle-eyes {
+                width: 20px;
+                padding-left: 4px;
+                display: flex;
+                align-items: center;
+                .p-icon {
+                    display: none;
+                }
+            }
             &:hover {
                 background-color: #f5f6f7;
+                .p-icon {
+                    display: inline-block;
+                }
             }
             .local-name {
                 flex: 1;
@@ -405,7 +418,7 @@ li {
                 line-height: 40px;
                 font-size: 14px;
                 font-weight: 600;
-                color: #1f2429 !important;
+                color: #1f2429;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
@@ -476,6 +489,19 @@ li {
                 }
             }
         }
+        // 选中的设备样式
+        .equip-selected {
+            background-color: #f5f6f7;
+        }
+        // 隐藏的设备列表样式
+        .equip-hidden {
+            .local-name {
+                color: #8d9399;
+                .local-id {
+                    color: #8d9399;
+                }
+            }
+        }
     }
 
     .addbtn {