国标级联--选择通道003-前端页面

web_src/src/components/ParentPlatformList.vue

@@ -95,7 +95,6 @@ export default {
     }
   },
   mounted() {
-     this.$refs.chooseChannelDialog.openDialog()
     this.initData();
     this.updateLooper = setInterval(this.initData, 10000);
   },
@@ -138,7 +137,9 @@ export default {
             });
     },
     chooseChannel: function(platform) {
-       this.$refs.chooseChannelDialog.openDialog()
+       this.$refs.chooseChannelDialog.openDialog(platform.deviceGBId, ()=>{
+         this.initData()
+       })
     },
     initData: function() {
       this.getPlatformList();

web_src/src/components/gb28181/chooseChannel.vue

@@ -1,63 +1,36 @@
 <template>
 <div id="chooseChannel" v-loading="isLoging">
 
-    <el-dialog title="选择通道" top="0" :close-on-click-modal="false" :visible.sync="showDialog" :destroy-on-close="true" @close="close()">
-        <el-container>
-            <el-main style="background-color: #FFF;">
-            <el-tabs v-model="tabActiveName" >
+    <el-dialog title="选择通道" top="2rem" width="70%" :close-on-click-modal="false" :visible.sync="showDialog" :destroy-on-close="true" @close="close()">
+        <el-tabs v-model="tabActiveName" >
+            <el-tab-pane label="国标通道" name="gbChannel">
 
-                    <el-tab-pane label="国标通道" name="gbChannel">
-                        <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
-                            搜索: <el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字" prefix-icon="el-icon-search" v-model="searchSrt" clearable> </el-input>
-
-                            通道类型: <el-select size="mini" @change="search" style="margin-right: 1rem;" v-model="channelType" placeholder="请选择" default-first-option>
-                                <el-option label="全部" value=""></el-option>
-                                <el-option label="设备" value="false"></el-option>
-                                <el-option label="子目录" value="true"></el-option>
-                            </el-select>
-                            在线状态: <el-select size="mini" style="margin-right: 1rem;" @change="search" v-model="online" placeholder="请选择" default-first-option>
-                                <el-option label="全部" value=""></el-option>
-                                <el-option label="在线" value="true"></el-option>
-                                <el-option label="离线" value="false"></el-option>
-                            </el-select>
-                        </div>
-                        <el-table :data="gbChannels" border style="width: 100%" @selection-change="handleGBSelectionChange"  >
-                            <el-table-column type="selection" width="55" align="center" fixed> </el-table-column>
-                            <el-table-column prop="devicelId" label="设备编号" width="210" >
-                            </el-table-column>
-                            <el-table-column prop="channelId" label="通道编号" width="210">
-                            </el-table-column>
-                            <el-table-column prop="channelName" label="通道名称">
-                            </el-table-column>
-                            <el-table-column label="地址" width="180" align="center">
-                                <template slot-scope="scope">
-                                    <div slot="reference" class="name-wrapper">
-                                        <el-tag size="medium">{{ scope.row.hostAddress }}</el-tag>
-                                    </div>
-                                </template>
-                            </el-table-column>
-                            <el-table-column prop="manufacturer" label="厂家" align="center">
-                            </el-table-column>
-                        </el-table>
-                    </el-tab-pane>
-                    <el-tab-pane label="直播流通道" name="streamchannel">
-                        <!-- TODO -->
-                    </el-tab-pane>
-                </el-tabs>
-
-            </el-main>
-    </el-container>
+                <el-container>
+                    <el-main style="background-color: #FFF;">
+                     <chooseChannelForGb :chooseChanage=chooseChanage ></chooseChannelForGb>
+                    </el-main>
+                    <el-footer>
+                         <el-button size="mini" type="primary" style="float: right" @click="save()">保存</el-button>
+                    </el-footer>
+            </el-container>
+               
+               
+            </el-tab-pane>
+            <el-tab-pane label="直播流通道" name="streamchannel">
+                <!-- TODO -->
+            </el-tab-pane>
+        </el-tabs>
     </el-dialog>
 </div>
 </template>
 
 <script>
-// import player from './player.vue'
+import chooseChannelForGb from './chooseChannelForGb.vue'
 export default {
     name: 'chooseChannel',
     props: {},
     components: {
-        // player,
+        chooseChannelForGb,
     },
     computed: {
         // getPlayerShared: function () {
@@ -73,37 +46,20 @@ export default {
         return {
             isLoging: false,
             tabActiveName: "gbChannel",
+            platformId: "",
             isLoging: false,
             showDialog: false,
-            chooseChanageCallback: null,
-            closeCallback: null,
-            gbChannels: [
-                {
-                    devicelId: "34000000000200001",
-                    channelId: "34000000000200001",
-                    channelName: "test",
-                    hostAddress: "192.168.1.1:5060",
-                    manufacturer: "大华"
-                },{
-                    devicelId: "34000000000200001",
-                    channelId: "34000000000200001",
-                    channelName: "test",
-                    hostAddress: "192.168.1.1:5060",
-                    manufacturer: "大华"
-                }
-            ],
-            searchSrt: "",
-            channelType: "",
-            online: "",
+            chooseData: []
             
         };
     },
     methods: {
         
-        openDialog: function (chooseChanageCallback, closeCallback) {
+        openDialog: function (platformId,  closeCallback) {
+            console.log(platformId)
+            this.platformId = platformId
             this.showDialog = true
             this.closeCallback = closeCallback
-            this.chooseChanageCallback = chooseChanageCallback
         },
         close: function() {
 
@@ -111,8 +67,31 @@ export default {
         search: function() {
 
         },
-        handleGBSelectionChange: function() {
+        save: function() {
+            var that = this;
 
+            this.$axios({
+                method:"post",
+                url:"/api/platforms/updateChannelForGB",
+                data:{
+                    platformId:  that.platformId,
+                    channelReduces:  that.chooseData
+                }
+            }).then((res)=>{
+                if (res.data == true) {
+                    that.$message({
+                        showClose: true,
+                        message: '保存成功,',
+                        type: 'success'
+                    });
+                }
+            }).catch(function (error) {
+                console.log(error);
+            });
+        },
+        chooseChanage: function(val) {
+            console.log(val)
+            this.chooseData = val;
         }
     }
 };

web_src/src/components/gb28181/chooseChannelForGb.vue

@@ -0,0 +1,120 @@
+<template>
+<div id="chooseChannelForGb" >
+   <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
+        搜索: <el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字" prefix-icon="el-icon-search" v-model="searchSrt" clearable> </el-input>
+
+        通道类型: <el-select size="mini" @change="search" style="margin-right: 1rem;" v-model="channelType" placeholder="请选择" default-first-option>
+            <el-option label="全部" value=""></el-option>
+            <el-option label="设备" value="false"></el-option>
+            <el-option label="子目录" value="true"></el-option>
+        </el-select>
+        在线状态: <el-select size="mini" style="margin-right: 1rem;" @change="search" v-model="online" placeholder="请选择" default-first-option>
+            <el-option label="全部" value=""></el-option>
+            <el-option label="在线" value="true"></el-option>
+            <el-option label="离线" value="false"></el-option>
+        </el-select>
+    </div>
+    <el-table ref="gbChannelsTable" :data="gbChannels" border style="width: 100%" @selection-change="chooseChanage"  >
+        <el-table-column type="selection" width="55" align="center" fixed> </el-table-column>
+        <el-table-column prop="channelId" label="通道编号" width="210">
+        </el-table-column>
+        <el-table-column prop="name" label="通道名称">
+        </el-table-column>
+        <el-table-column prop="deviceId" label="设备编号" width="210" >
+        </el-table-column>
+        <el-table-column label="设备地址" width="180" align="center">
+            <template slot-scope="scope">
+                <div slot="reference" class="name-wrapper">
+                    <el-tag size="medium">{{ scope.row.hostAddress }}</el-tag>
+                </div>
+            </template>
+        </el-table-column>
+        <el-table-column prop="manufacturer" label="厂家" align="center">
+        </el-table-column>
+    </el-table>
+    <el-pagination style="float: right;margin-top: 1rem;" @size-change="handleSizeChange" @current-change="currentChange" :current-page="currentPage" :page-size="count" :page-sizes="[15, 20, 30, 50]" layout="total, sizes, prev, pager, next" :total="total">
+    </el-pagination>
+</div>
+</template>
+
+<script>
+export default {
+    name: 'chooseChannelForGb',
+    props: {},
+    computed: {
+        // getPlayerShared: function () {
+        //     return {
+        //         sharedUrl: window.location.host + '/' + this.videoUrl,
+        //         sharedIframe: '<iframe src="' + window.location.host + '/' + this.videoUrl + '"></iframe>',
+        //         sharedRtmp: this.videoUrl
+        //     };
+        // }
+    },
+    props: ['chooseChanage'],
+    created() {
+        this.initData();
+    },
+    data() {
+        return {
+            gbChannels: [],
+            searchSrt: "",
+            channelType: "",
+            online: "",
+            currentPage: parseInt(this.$route.params.page),
+            count: parseInt(this.$route.params.count),
+            total: 0
+            
+        };
+    },
+    methods: {
+        initData: function() {
+            this.getChannelList();
+        },
+        currentChange: function (val) {
+            this.currentPage = val;
+            this.initData();
+        },
+        handleSizeChange: function (val) {
+             this.count = val;
+            this.initData();
+
+        },
+        getChannelList: function () {
+            let that = this;
+
+            this.$axios.get(`/api/platforms/channelList`, {
+                    params: {
+                        page: that.currentPage - 1,
+                        count: that.count,
+                        query: that.searchSrt,
+                        online: that.online,
+                        channelType: that.channelType
+                    }
+                })
+                .then(function (res) {
+                    console.log(res);
+                    that.total = res.data.total;
+                    that.gbChannels = res.data.list;
+                    // 防止出现表格错位
+                    that.$nextTick(() => {
+                        that.$refs.gbChannelsTable.doLayout();
+                    })
+                })
+                .catch(function (error) {
+                    console.log(error);
+                });
+
+        },
+        search: function() {
+            this.initData();
+        },
+        handleGBSelectionChange: function() {
+            this.initData();
+        },
+    }
+};
+</script>
+
+<style>
+
+</style>