摄像头管理，增加分页 和 视频播放可全屏

src/views/Home/Home.vue

@@ -119,9 +119,7 @@ export default {
             localStorage.getItem("defaultUnfoldedMenu")
         ];
         this.menuCollapse = JSON.parse(localStorage.getItem("menuCollapse"));
-        this.tags = JSON.parse(localStorage.getItem("tagsNavList")) || [
-            { name: "设备类型", routerName: "deviceInfo", key: "0" }
-        ];
+        this.tags = JSON.parse(localStorage.getItem("tagsNavList")) || [];
     },
     methods: {
         // 收取菜单按钮

src/views/deviceManagement/CameraManagement.vue

@@ -2,26 +2,13 @@
 <template>
     <div class="CameraManagement">
         <el-row :gutter="20">
-            <!-- <el-col :span="2">
-                <span style="line-height:32px;">工具栏:</span>
-            </el-col>
-            <el-col :span="12">
-                <el-input
-                    placeholder="请输入内容"
-                    v-model="searchParams"
-                    class="input-with-select"
-                    @keyup.enter.native="getDeviceList"
-                >
-                    <el-button slot="append" icon="el-icon-search" @click="getDeviceList"></el-button>
-                </el-input>
-            </el-col>-->
             <el-col :span="8">
                 <el-button @click="add" type="primary" icon="el-icon-document-add">新建</el-button>
             </el-col>
         </el-row>
         <hr style="border-top: 2px solid #eee;margin: 10px 0;" />
         <el-row>
-            <el-table :data="deviceList">
+            <el-table :data="deviceList.content">
                 <el-table-column prop="id" label="序号" width="120px"></el-table-column>
                 <el-table-column prop="name" label="名称"></el-table-column>
                 <el-table-column prop="deviceNo" label="设备序列号"></el-table-column>
@@ -46,6 +33,16 @@
                     </template>
                 </el-table-column>
             </el-table>
+            <el-row type="flex" justify="end">
+                <el-col :span="8" class="pagination">
+                    <el-pagination
+                        @current-change="pageChange"
+                        background
+                        layout="prev, pager, next"
+                        :page-count="deviceList.totalPages"
+                    ></el-pagination>
+                </el-col>
+            </el-row>
         </el-row>
 
         <!-- 设备信息新建、编辑 -->
@@ -133,7 +130,7 @@
             </div>
         </el-dialog>
         <!-- 摄像头播放 -->
-        <el-dialog :title="videoData.title" @close="handleStop" :visible.sync="isShowVideo">
+        <el-dialog :title="videoData.title" @close="handleStop" :visible.sync="isShowVideo" :fullscreen="true">
             <rtsp-player ref="rtspPlayer" :rtspData="videoData"></rtsp-player>
         </el-dialog>
     </div>
@@ -149,6 +146,10 @@ const rules = {
     deviceNo: [{ required: true, message: "请输入设备序列号", trigger: "blur" }]
 };
 
+const cameraCode = "ip-cam";
+// 每页数据条数
+const pageSize = 10;
+
 export default {
     name: "CameraManagement",
     components: { rtspPlayer },
@@ -174,12 +175,14 @@ export default {
             },
             configItems: 2, // 配置项的通道配置项数
             isAdd: true,
-            rules
+            rules,
+            pageSize,
+            page: 1
         };
     },
     created() {
         // 获取摄像头 树
-        this.getTreeByCode("ip-cam");
+        this.getTreeByCode(cameraCode);
     },
     methods: {
         ...mapActions(["fetch"]),
@@ -197,10 +200,18 @@ export default {
             this.fetch({
                 api: "/publics/treenode/getTreeByCode",
                 method: "POST",
-                data: { code }, //目前只有一个组织,其他参数调整钟
+                data: { code },
                 success: res => {
+                    debugger;
                     this.id = res.id;
-                    this.getDeviceList(res.id);
+                    let categoryId = res.id;
+                    let data = {
+                        categoryId,
+                        pageSize,
+                        page: this.page
+                    };
+                    //重新加载摄像头列表
+                    this.getDeviceList(data);
                     this.getCameraList(res.id);
                 },
                 fail: err => {
@@ -214,13 +225,14 @@ export default {
                 }
             });
         },
-        getDeviceList(categoryId) {
+        // 请求 拿到摄像头列表
+        getDeviceList(data) {
             this.fetch({
                 api: "/device/device/list",
                 method: "POST",
-                data: { categoryId }, //目前只有一个组织,其他参数调整钟 732971735112749056
+                data,
                 success: res => {
-                    this.deviceList = res.content;
+                    this.deviceList = res;
                 },
                 fail: err => {
                     if (err.errCode == "request_not_authorize") {
@@ -234,7 +246,7 @@ export default {
             });
         },
 
-        // 请求 拿到摄像头列表
+        // 请求 拿到摄像头分类树
         getCameraList(parentId) {
             this.fetch({
                 api: "/publics/treenode/listNodeByParent",
@@ -266,7 +278,14 @@ export default {
                 api,
                 data: this.formData,
                 success: res => {
-                    this.getDeviceList(this.id); //重新加载
+                    let categoryId = this.id;
+                    let data = {
+                        categoryId,
+                        pageSize,
+                        page: this.page
+                    };
+                    //重新加载摄像头列表
+                    this.getDeviceList(data);
                     // this.isShowDialog = false;
                     this.$message.success(
                         this.isAdd
@@ -287,7 +306,14 @@ export default {
                 api: "/device/delete",
                 data: { id },
                 success: res => {
-                    this.getDeviceList(this.id); //重新加载
+                    let categoryId = this.id;
+                    let data = {
+                        categoryId,
+                        pageSize,
+                        page: this.page
+                    };
+                    //重新加载摄像头列表
+                    this.getDeviceList(data);
                 },
                 fail: err => {
                     console.log(err);
@@ -323,8 +349,9 @@ export default {
                 let ws = channals[0].ws;
                 console.log("rtsp==>>  " + rtsp);
                 console.log("ws==>>  " + ws);
-                if(row.data && row.data["curr-ip"]){//要更换IP
-                    ws = ws.replace("ip-addr",row.data["curr-ip"])
+                if (row.data && row.data["curr-ip"]) {
+                    //要更换IP
+                    ws = ws.replace("ip-addr", row.data["curr-ip"]);
                 }
                 this.videoData = {
                     rtsp,
@@ -335,7 +362,7 @@ export default {
             } else this.$message.info("配置信息不正确");
         },
         handleStop(done) {
-            console.log(this.$refs.rtspPlayer)
+            console.log(this.$refs.rtspPlayer);
             // if (this.$refs.rtspPlayer) this.$refs.rtspPlayer.close();
         },
         // 编辑
@@ -345,7 +372,6 @@ export default {
             this.isShowDialog = true;
             this.formData = row;
             this.meta = JSON.parse(row.meta.channel);
-            // this.createArr(row.categoryId);
         },
         // 删除
         del(row) {
@@ -364,55 +390,19 @@ export default {
         },
         show() {
             this.deviceList.forEach;
+        },
+        // 页码改变
+        pageChange(p) {
+            console.log(p);
+            this.page = p;
+            let categoryId = this.id;
+            let data = {
+                categoryId,
+                pageSize,
+                page: p
+            };
+            this.getDeviceList(data);
         }
-        // 传入一个id 生成树（ cameraInfoTree ）的id数组  "732971850158313472"  "732997784550772736"
-        /* createArr(id) {
-            let tmpArr = [id]
-            let tree = this.cameraInfoTree;
-            aa(id)
-            console.log(tmpArr);
-            function aa(id) {
-                recursion(tree);
-                function recursion(tree) {
-                    tree.forEach(item => {
-                        if (item.id == id) {
-                            let rse = isWarp(item.parentId)
-                            console.log(rse)
-                            if(rse == 0) {
-                                tmpArr.unshift(item.parentId)
-                            } else if(rse == 1) {
-                                tmpArr.unshift(item.parentId)
-                                aa(item.parentId)
-                            } 
-                            return;
-                        } else {
-                            if (item.childs && item.childs.length > 0) {
-                                // debugger
-                                return recursion(item.childs);
-                            } else {
-                                // tmpArr = []
-                                return;
-                            }
-                        }
-                    });
-                }
-            }
-            
-            // 判断是否到最外层
-            function isWarp(parentId) {
-                let res = null
-                 tree.forEach(item => {
-                    if(item.id == parentId){
-                        res = 0 // 刚好到
-                    } else if(item.parentId == parentId){
-                        res = -1 // 已经到外面一层了
-                    } else {
-                        res = 1 // 还在内层
-                    }
-                })
-                return res
-            }
-        } */
     }
 };
 </script>
@@ -425,4 +415,8 @@ export default {
         }
     }
 }
+
+.pagination {
+    margin-top: 20px;
+}
 </style>

src/views/deviceManagement/DeviceInfo.vue

@@ -167,7 +167,7 @@ const deviceTypeCode = "device-type";
 // 区域树 code
 const arearCode = "area-info";
 // 每页数据条数
-const pageSize = 5;
+const pageSize = 10;
 
 const formDataInit = {
     name: "",