提交：项目详情 设备管理模块增加 tab 选择展示效果

src/views/iot/project/profileV2/AlarmManage/index.vue

@@ -70,9 +70,9 @@
             >查询</el-button
           >
         </div>
-        <div class="other-print">
+        <!-- <div class="other-print">
           <i class="el-icon-printer"></i>
-        </div>
+        </div> -->
       </div>
     </div>
 

src/views/iot/project/profileV2/DeviceManage/index.vue

@@ -1,52 +1,142 @@
 <template>
   <div class="e-object-device-manage">
     <el-tabs v-model="activeName">
-      <el-tab-pane :label="tabLabel.dictLabel" :name="tabLabel.dictValue" v-for="(tabLabel, idx) in projectDeviceTagGroup" :key="idx">
-        <e-device-table v-if="tabLabel.dictValue === activeName" :sourceId="sourceId" :deviceType="tabLabel.dictValue" />
+      <el-tab-pane
+        :label="tabLabel.dictLabel"
+        :name="tabLabel.dictValue"
+        v-for="(tabLabel, idx) in filterList"
+        :key="idx"
+      >
+        <e-device-table
+          v-if="tabLabel.dictValue === activeName"
+          :sourceId="sourceId"
+          :deviceType="tabLabel.dictValue"
+        />
       </el-tab-pane>
     </el-tabs>
+    <div class="e-tabs-screen" v-show="dialogWrapper">
+      <el-dropdown :hide-on-click="false" @visible-change="handleVisibleChange">
+        <i class="iconfont iconshaixuan icon-screen"></i>
+        <el-dropdown-menu slot="dropdown">
+          <el-checkbox-group v-model="filterSelect">
+            <el-dropdown-item
+              v-for="(dropItem, index) in projectDeviceTagGroup"
+              :key="index"
+            >
+              <el-checkbox
+                :label="dropItem.dictValue"
+                :disabled="activeName === dropItem['dictValue']"
+                >{{ dropItem.dictLabel }}</el-checkbox
+              >
+            </el-dropdown-item>
+            <el-dropdown-item divided>
+              <div
+                style="
+                  width: 100%;
+                  display: flex;
+                  justify-content: space-evenly;
+                "
+              >
+                <el-button type="text" @click="handleTabReduction">全选</el-button>
+                <el-button type="primary" size="mini" @click="handleTabScreen"
+                  >确定</el-button
+                >
+              </div>
+            </el-dropdown-item>
+          </el-checkbox-group>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
   </div>
 </template>
 <script>
-import EDeviceTable from './EDeviceTable'
+import EDeviceTable from "./EDeviceTable";
 export default {
-  name: 'EObjectDeviceManage',
+  name: "EObjectDeviceManage",
   components: {
-    EDeviceTable
+    EDeviceTable,
   },
   props: {
     projectInfo: {
       type: Object,
-      require: true
+      require: true,
     },
     sourceId: {
       type: [Number, String],
-      require: true
-    }
+      require: true,
+    },
   },
   data() {
     return {
-      activeName: '',
-      projectDeviceTagGroup: []
-    }
-  },
-  created() {
-    this.getDicts("project_device_tag_group").then(response => {
-      this.projectDeviceTagGroup = response.data;
-      if (this.projectDeviceTagGroup &&　this.projectDeviceTagGroup.length > 0) {
-        this.activeName = this.projectDeviceTagGroup[0]['dictValue'] || ''
+      activeName: "",
+      projectDeviceTagGroup: [],
+      filterList: [],
+      filterSelect: [],
+      dialogWrapper: false,
     };
+  },
+  watch: {},
+  created() {
+    this.getDicts("project_device_tag_group").then((response) => {
+      this.projectDeviceTagGroup = response.data;
+      // 默认数据存入记录
+      this.filterList = [...this.projectDeviceTagGroup];
+      this.filterSelect = [...this.filterList].map((v) => {
+        return v["dictValue"];
+      });
+      this.dialogWrapper = true;
+      if (this.projectDeviceTagGroup && this.projectDeviceTagGroup.length > 0) {
+        this.activeName = this.projectDeviceTagGroup[0]["dictValue"] || "";
+      }
     });
   },
   methods: {
+    handleVisibleChange(e) {
+      if (e) {
+        this.filterSelect = [...this.filterList].map((v) => {
+          return v["dictValue"];
+        });
+      }
+    },
+    handleTabReduction() {
+      this.filterList = [];
+      this.filterList = [...this.projectDeviceTagGroup];
+      this.filterSelect = [...this.filterList].map((v) => {
+        return v["dictValue"];
+      });
+      this.$forceUpdate();
+    },
+    handleTabScreen() {
+      this.filterList = [];
+      this.filterList = this.projectDeviceTagGroup.filter(
+        (v) => this.filterSelect.indexOf(v["dictValue"]) >= 0
+      );
+      console.log(this.filterList)
+      this.$forceUpdate();
+    },
     // 菜单状态字典翻译
     statusFormat(row, column) {
       return this.selectDictLabel(this.projectDeviceTagGroup, row.industry);
     },
     // 获取 网关设备列表
-    getGatewayDeviceList() {
-
+    getGatewayDeviceList() {},
   },
-  }
-}
+};
 </script>
+<style lang="scss">
+.e-object-device-manage {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  .e-tabs-screen {
+    width: 0;
+    .icon-screen {
+      position: relative;
+      right: 25px;
+      top: 5px;
+      font-size: 20px;
+      color: #606266;
+    }
+  }
+}
+</style>