平台添加设备管理

src/router/platform.js

@@ -65,10 +65,12 @@ export default {
       }
     },
     {
-      path: "deviceImport",
+      path: "deviceManageImport",
       component: () =>
-        import("@/views/platformSection/deviceImport/deviceImport.vue"),
-      name: "deviceImport",
+        import(
+          "@/views/platformSection/deviceManage/deviceManageImport/deviceManageImport.vue"
+        ),
+      name: "deviceManageImport",
       meta: {
         keepAlive: true,
         isAuth: true,
@@ -76,13 +78,27 @@ export default {
       }
     },
     {
-      path: "deviceExport",
-      component: () => import("@/views/platformSection/log/deviceExport.vue"),
-      name: "deviceExport",
+      path: "deviceManageExport",
+      component: () =>
+        import(
+          "@/views/platformSection/deviceManage/deviceManageExport/deviceManageExport.vue"
+        ),
+      name: "deviceManageExport",
       meta: {
         keepAlive: true,
         isAuth: true,
-        title: "平台管控-设备导出"
+        title: "平台管控-设备管理-设备导出"
+      }
+    },
+    {
+      path: "logDeviceExport",
+      component: () =>
+        import("@/views/platformSection/log/logDeviceExport.vue"),
+      name: "logDeviceExport",
+      meta: {
+        keepAlive: true,
+        isAuth: true,
+        title: "平台管控-日志-设备导出"
       }
     },
     {

src/views/platformSection/index.vue

@@ -48,9 +48,31 @@
             >
           </div>
         </div>
-        <router-link tag="div" to="/platform/deviceImport" class="module_item">
-          <span>设备导入</span>
-        </router-link>
+        <div
+          :class="[
+            'module_item drop_down',
+            deviceManageSelected ? 'selected' : ''
+          ]"
+        >
+          <span class="module_title">设备管理</span>
+          <Icon class="arrow_dropdown" type="md-arrow-dropdown" :size="20" />
+          <div class="drop_down_list" v-if="routeDropdown">
+            <router-link
+              @click.native="routeDropdownChange()"
+              tag="div"
+              to="/platform/deviceManageImport"
+              class="drop_down_list_item"
+              >设备导入</router-link
+            >
+            <router-link
+              @click.native="routeDropdownChange()"
+              tag="div"
+              to="/platform/deviceManageExport"
+              class="drop_down_list_item"
+              >设备导出</router-link
+            >
+          </div>
+        </div>
         <div :class="['module_item drop_down', logSelected ? 'selected' : '']">
           <span class="module_title">日志</span>
           <Icon class="arrow_dropdown" type="md-arrow-dropdown" :size="20" />
@@ -58,7 +80,7 @@
             <router-link
               @click.native="routeDropdownChange()"
               tag="div"
-              to="/platform/deviceExport"
+              to="/platform/logDeviceExport"
               class="drop_down_list_item"
               >设备导出</router-link
             >
@@ -94,9 +116,16 @@ export default {
     networkManageSelected() {
       return this.$route.path.includes("/platform/whitelistLibrary");
     },
+    // 设备管理路由选中
+    deviceManageSelected() {
+      return (
+        this.$route.path.includes("/platform/deviceManageImport") ||
+        this.$route.path.includes("/platform/deviceManageExport")
+      );
+    },
     // 日志路由选中
     logSelected() {
-      return this.$route.path.includes("/platform/deviceExport");
+      return this.$route.path.includes("/platform/logDeviceExport");
     }
   },
   methods: {

src/views/platformSection/log/logDeviceExport.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="main_root">
+    <div class="search_header">
+      <div class="search_left">
+        <Input
+          v-model="searchForm.name"
+          placeholder="请输入名称"
+          search
+          @on-search="searchList()"
+          style="width: 150px"
+        />
+      </div>
+      <Button type="primary" class="primary_btn" @click="toExport()"
+        >导出</Button
+      >
+    </div>
+    <div class="table_wrap">
+      <Table :columns="columns" :data="searchForm.list">
+        <template slot-scope="{ row }" slot="actionSlot">
+          <div class="action_list">
+            <div @click="toExport(row)">导出</div>
+          </div>
+        </template>
+      </Table>
+    </div>
+    <div class="page_wrap">
+      <Page
+        :transfer="true"
+        :total="searchForm.total"
+        :current="searchForm.page"
+        :page-size="searchForm.size"
+        :page-size-opts="[10, 20, 40, 60]"
+        @on-change="pageChange"
+        @on-page-size-change="pageSizeChange"
+        show-total
+        show-sizer
+      ></Page>
+    </div>
+  </div>
+</template>
+
+<script>
+import { exportToExcel } from "@/utils/exportToExcel";
+import { logDeviceBind_list, logDeviceBind_list_all } from "@/api/log";
+export default {
+  data() {
+    return {
+      searchForm: {
+        name: "",
+        page: 1,
+        size: 10,
+        list: [],
+        total: 0
+      },
+      columns: [
+        {
+          title: "序号",
+          align: "center",
+          width: 70,
+          render: (h, params) => {
+            return h(
+              "span",
+              params.index +
+                (this.searchForm.page - 1) * this.searchForm.size +
+                1
+            );
+          }
+        },
+        {
+          title: "区域名称",
+          key: "regionName",
+          align: "center"
+        },
+        {
+          title: "学校数",
+          key: "schoolnum",
+          align: "center"
+        },
+        {
+          title: "用户数",
+          key: "usernum",
+          align: "center"
+        },
+        {
+          title: "设备数",
+          key: "snnum",
+          align: "center"
+        },
+        {
+          title: "操作",
+          slot: "actionSlot",
+          width: 90,
+          align: "center"
+        }
+      ]
+    };
+  },
+  created() {
+    this.searchList();
+  },
+  computed: {
+    powerParams() {
+      return this.$store.getters.powerParams;
+    }
+  },
+  methods: {
+    // 搜索
+    searchList() {
+      this.searchForm.page = 1;
+      this.getList();
+    },
+    // 页码改变
+    pageChange(page) {
+      this.searchForm.page = page;
+      this.getList();
+    },
+    // 每页显示数量改变
+    pageSizeChange(size) {
+      this.searchForm.size = size;
+      this.searchForm.page = 1;
+      this.getList();
+    },
+    // 获取列表
+    getList() {
+      logDeviceBind_list({
+        rtype: this.powerParams.rtype,
+        objectid: this.powerParams.objectid,
+        page: this.searchForm.page,
+        size: this.searchForm.size,
+        name: this.searchForm.name
+      }).then((data) => {
+        if (data.code === 0) {
+          this.searchForm.list = data.obj.data;
+          this.searchForm.total = data.obj.total;
+        } else {
+          this.$Message.error(data.msg);
+        }
+      });
+    },
+    toExport(row) {
+      let form = {
+        rtype: this.powerParams.rtype,
+        objectid: this.powerParams.objectid
+      };
+      if (row) {
+        form.regionid = row.regionid;
+      }
+      logDeviceBind_list_all(form).then((data) => {
+        if (data.code === 0) {
+          exportToExcel(
+            [
+              {
+                list: data.obj.map((item) => {
+                  return {
+                    区域名称: item.regionName,
+                    学校数: item.schoolnum,
+                    用户数: item.usernum,
+                    设备数: item.snnum
+                  };
+                }),
+                name: "设备导出"
+              }
+            ],
+            `设备导出`
+          );
+        } else {
+          this.$Message.error(data.msg);
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.search_header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 16px 16px;
+  .search_left {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+}
+</style>