Merge pull request #10 from bosscheng/master

add N line page list

ui/src/App.vue

@@ -51,22 +51,16 @@
             </mu-data-table>
         </div>
         <div class="tabpanel" v-if="$parent.titleTabActive === 1">
-            <div class="search">
-            <i-select v-model="channelSelectedList" multiple>
-              <i-option v-for="(channel,index) in channelList"
-                      :value="channel"
-                      :label="channel.DeviceID + '(' + channel.Name + ')'"
-                      :key="index">
-              </i-option>
-            </i-select>
-            </div>
             <div class="flex-box">
-                <template v-for="(channel,index) in channelSelectedList">
+                <template v-for="(channel,index) in channelShowList">
                     <div class="flex-item" :key="index" v-if="channel.DeviceID">
                         <webrtc-player2 :stream-path="'gb28181/'+channel.DeviceID"></webrtc-player2>
                     </div>
                 </template>
             </div>
+            <template v-if="channelList.length > 0">
+                <Page :total="channelList.length" :page-size="pageInfo.onePageSize" @on-change="handlePageChange"></Page>
+            </template>
         </div>
         <webrtc-player
             ref="player"
@@ -99,7 +93,12 @@ export default {
             Devices: [],
             previewStreamPath: false,
             channelList: [],
-            channelSelectedList: [],
+            channelShowList: [],
+            pageInfo: {
+                onePageSize: 9,
+                totalPage: 0,
+                currentPage: 0
+            },
             context: {
                 id: null,
                 channel: 0,
@@ -149,6 +148,7 @@ export default {
                 });
                 if (channelList.length > 0) {
                     this.channelList = channelList;
+                    this.updatePageInfo(channelList.length);
                 }
             };
             this.$once("hook:destroyed", () => listES.close());
@@ -189,6 +189,33 @@ export default {
                     }, 500);
                 });
         },
+
+        handlePageChange(page){
+            let showList = [];
+            const onePageSize = this.pageInfo.onePageSize;
+            const firstIndex = page * onePageSize - onePageSize;
+            const lastIndex = page * onePageSize - 1 ;
+            showList = this.channelList.filter((item, index) => {
+                return index >= firstIndex && index <= lastIndex;
+            });
+
+            this.channelShowList = showList;
+            if(showList.length > 0){
+                this.pageInfo.currentPage = page;
+            }
+        },
+        updatePageInfo(totalSize){
+            const onePageSize = this.pageInfo.onePageSize;
+            let totalPage = totalSize / onePageSize;
+
+            if (totalSize % onePageSize > 0) {
+                totalPage = totalPage + 1;
+            }
+            this.pageInfo.totalPage = totalPage;
+            if(this.pageInfo.currentPage === 0){
+                this.handlePageChange(1)
+            }
+        },
         invite(id, channel, item) {
             this.ajax.get("/gb28181/invite", { id, channel }).then((x) => {
                 item.Connected = true;
@@ -212,6 +239,7 @@ export default {
 .flex-item {
     flex: 0 0 33.3333%;
     height: 275px;
+    box-sizing: border-box;
     padding: 10px;
 }
 </style>

ui/src/components/Player2.vue

@@ -99,6 +99,8 @@
     .player-wrap {
         width: 100%;
         height: 100%;
+        border-radius: 4px;
+        box-shadow: 0 0 5px #40d3fc, inset 0 0 5px #40d3fc, 0 0 0 1px #40d3fc;
     }
 
     .player-wrap video {