| | |
| | | <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-select size="mini" @change="search" style="margin-right: 1rem; width:6rem" 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-select size="mini" style="margin-right: 1rem; width:6rem" v-model="choosed" @change="search" 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> |
| | | |
| | | 在线状态: <el-select size="mini" style="margin-right: 1rem; width:6rem" @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> |
| | | |
| | | <el-checkbox @change="shareAllCheckedChanage">全部共享</el-checkbox> |
| | | </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 ref="gbChannelsTable" :data="gbChannels" border style="width: 100%" @selection-change="checkedChanage" > |
| | | <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 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 style="float: right;margin-top: 1rem;" @size-change="handleSizeChange" @current-change="currentChange" :current-page="currentPage" :page-size="count" :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next" :total="total"> |
| | | </el-pagination> |
| | | </div> |
| | | </template> |
| | |
| | | // }; |
| | | // } |
| | | }, |
| | | props: ['chooseChanage'], |
| | | props: ['platformId'], |
| | | created() { |
| | | this.initData(); |
| | | }, |
| | | data() { |
| | | return { |
| | | gbChannels: [], |
| | | gbChoosechannel:{}, |
| | | searchSrt: "", |
| | | channelType: "", |
| | | online: "", |
| | | currentPage: parseInt(this.$route.params.page), |
| | | count: parseInt(this.$route.params.count), |
| | | total: 0 |
| | | |
| | | choosed: "", |
| | | currentPage: 0, |
| | | count: 10, |
| | | total: 0, |
| | | eventEnanle: false |
| | | |
| | | }; |
| | | }, |
| | | watch:{ |
| | | platformId(newData, oldData){ |
| | | console.log(newData) |
| | | this.initData() |
| | | |
| | | }, |
| | | }, |
| | | methods: { |
| | | initData: function() { |
| | |
| | | this.initData(); |
| | | }, |
| | | handleSizeChange: function (val) { |
| | | this.count = val; |
| | | this.count = val; |
| | | console.log(val) |
| | | this.initData(); |
| | | |
| | | }, |
| | | rowcheckedChanage: function (val, row) { |
| | | console.log(val) |
| | | console.log(row) |
| | | }, |
| | | checkedChanage: function (val) { |
| | | var that = this; |
| | | if (!that.eventEnanle) { |
| | | return; |
| | | } |
| | | var tabelData = JSON.parse(JSON.stringify(this.$refs.gbChannelsTable.data)); |
| | | console.log("checkedChanage") |
| | | console.log(val) |
| | | |
| | | var newData = {}; |
| | | var addData = []; |
| | | var delData = []; |
| | | if (val.length > 0) { |
| | | for (let i = 0; i < val.length; i++) { |
| | | const element = val[i]; |
| | | var key = element.deviceId + "_" + element.channelId; |
| | | newData[key] = element; |
| | | if (!!!that.gbChoosechannel[key]){ |
| | | addData.push(element) |
| | | }else{ |
| | | delete that.gbChoosechannel[key] |
| | | } |
| | | } |
| | | |
| | | var oldKeys = Object.keys(that.gbChoosechannel); |
| | | if (oldKeys.length > 0) { |
| | | for (let i = 0; i < oldKeys.length; i++) { |
| | | const key = oldKeys[i]; |
| | | delData.push(that.gbChoosechannel[key]) |
| | | } |
| | | } |
| | | |
| | | }else{ |
| | | var oldKeys = Object.keys(that.gbChoosechannel); |
| | | if (oldKeys.length > 0) { |
| | | for (let i = 0; i < oldKeys.length; i++) { |
| | | const key = oldKeys[i]; |
| | | delData.push(that.gbChoosechannel[key]) |
| | | } |
| | | } |
| | | } |
| | | |
| | | that.gbChoosechannel = newData; |
| | | if (Object.keys(addData).length >0) { |
| | | that.$axios({ |
| | | method:"post", |
| | | url:"/api/platforms/updateChannelForGB", |
| | | data:{ |
| | | platformId: that.platformId, |
| | | channelReduces: addData |
| | | } |
| | | }).then((res)=>{ |
| | | console.log("保存成功") |
| | | }).catch(function (error) { |
| | | console.log(error); |
| | | }); |
| | | } |
| | | if (Object.keys(delData).length >0) { |
| | | that.$axios({ |
| | | method:"post", |
| | | url:"/api/platforms/delChannelForGB", |
| | | data:{ |
| | | platformId: that.platformId, |
| | | channelReduces: delData |
| | | } |
| | | }).then((res)=>{ |
| | | console.log("移除成功") |
| | | }).catch(function (error) { |
| | | console.log(error); |
| | | }); |
| | | } |
| | | |
| | | }, |
| | | shareAllCheckedChanage: function (val) { |
| | | this.chooseChanage(null, val) |
| | | }, |
| | | getChannelList: function () { |
| | | let that = this; |
| | | |
| | | this.$axios.get(`/api/platforms/channelList`, { |
| | | params: { |
| | | page: that.currentPage - 1, |
| | | page: that.currentPage, |
| | | count: that.count, |
| | | query: that.searchSrt, |
| | | online: that.online, |
| | | choosed: that.choosed, |
| | | platformId: that.platformId, |
| | | channelType: that.channelType |
| | | } |
| | | }) |
| | | .then(function (res) { |
| | | console.log(res); |
| | | that.total = res.data.total; |
| | | that.gbChannels = res.data.list; |
| | | that.gbChoosechannel = {}; |
| | | // 防止出现表格错位 |
| | | that.$nextTick(() => { |
| | | that.$refs.gbChannelsTable.doLayout(); |
| | | // 默认选中 |
| | | var chooseGBS = []; |
| | | for (let i = 0; i < res.data.list.length; i++) { |
| | | const row = res.data.list[i]; |
| | | console.log(row.platformId) |
| | | if (row.platformId == that.platformId) { |
| | | that.$refs.gbChannelsTable.toggleRowSelection(row, true); |
| | | chooseGBS.push(row) |
| | | that.gbChoosechannel[row.deviceId+ "_" + row.channelId] = row; |
| | | |
| | | } |
| | | } |
| | | that.eventEnanle = true; |
| | | // that.checkedChanage(chooseGBS) |
| | | }) |
| | | console.log(that.gbChoosechannel) |
| | | }) |
| | | .catch(function (error) { |
| | | console.log(error); |