| <div class="layui-card"> |
| <div class="layui-card-header"> |
| <h2 class="header-title">设备时间周管理</h2> |
| <span class="layui-breadcrumb pull-right"> |
| <a href="#">门控中心</a> |
| <a><cite>设备时间周管理</cite></a> |
| </span> |
| </div> |
| <div class="layui-card-body"> |
| <div id="devweek"> |
| <el-form :inline="true" ref="devweekform" :model="devweekform" data-parsley-validate class="form-horizontal form-label-left"> |
| <div class="col-md-3"> |
| <div class="form-group"> |
| <label class="control-label col-md-4 col-sm-12 col-xs-12" style="font-size: 14px;">设备名称:</span> |
| </label> |
| <div class="col-md-8 col-sm-12 col-xs-12"> |
| <el-input v-model="devweekform.devname" id="devname"></el-input> |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4"> |
| <div class="form-group"> |
| <label class="control-label col-md-5 col-sm-12 col-xs-12" style="font-size: 14px;">时间周名称:</span> |
| </label> |
| <div class="col-md-7 col-sm-12 col-xs-12"> |
| <el-select v-model="devweekform.weekid" filterable clearable placeholder="请选择"> |
| <el-option |
| v-for="week in weeklist" |
| :key="week.value" |
| :label="week.label" |
| :value="week.value"> |
| </el-option> |
| </el-select> |
| </div> |
| </div> |
| </div> |
| <div class="col-md-3"> |
| <div class="form-group"> |
| <button type="button" class="btn btn-info" @click="query" id="qrybtn">查 询</button> |
| <button class="btn btn-primary" type="button" @click="addDevWeek">添加设备时间周</button> |
| </div> |
| </div> |
| </el-form> |
| |
| <template> |
| <el-table |
| ref="singletable" |
| :data="tableData" |
| highlight-current-row |
| @current-change="currRowChange" |
| stripe |
| border |
| max-height="2000" |
| style="width: 100%;"> |
| |
| <el-table-column |
| prop="devname" |
| label="设备名称" |
| sortable |
| width="480"> |
| </el-table-column> |
| <el-table-column |
| prop="weekname" |
| label="时间周名称" |
| sortable> |
| </el-table-column> |
| <el-table-column |
| fixed="right" |
| label="操作" |
| width="150"> |
| <template scope="scope"> |
| <button type="button" class="btn btn-danger btn-xs" title="删除设备" @click="delDevWeek(scope.row.id.devid,scope.row.id.weekid)">删除</button> |
| </template> |
| </el-table-column> |
| </el-table> |
| <div class="clearfix"></div> |
| <el-pagination |
| @size-change="handleSizeChange" |
| @current-change="currPageChange" |
| :current-page="currPage" |
| :page-sizes="[10, 20, 50, 100]" |
| :page-size="pageSize" |
| layout="prev, pager, next,sizes, jumper,total" |
| :total="totSize"> |
| </el-pagination> |
| </template> |
| |
| <el-dialog :title="devweekTitle" :visible.sync="dialogFormVisible" size=large top="30px" style="width: 900px;height:700px;left: 220px;top:0px" > |
| <el-form ref="devweekDiaform" :model="devweekDiaform" :rules="rules" label-width="100px" > |
| <el-form-item label="选择时间周:" prop="weekid"> |
| <el-col :span="24"> |
| <el-select v-model="devweekDiaform.weekid" filterable placeholder="请选择" @change="getReWeekId"> |
| <el-option |
| v-for="week in weeklist" |
| :key="week.value" |
| :label="week.label" |
| :value="week.value" |
| > |
| </el-option> |
| </el-select> |
| </el-col> |
| </el-form-item> |
| <el-form-item label="选择设备:" prop="devids"> |
| <el-col style="width: 100%"> |
| <template> |
| <el-transfer |
| v-model="chosenDevs" |
| :data="devs" |
| :target-keys="selectDevList" |
| :list-style="listStyle" |
| :panelWidth="panelWidth" |
| :operations="['移除','选择']" |
| :button-texts="['移除', '选择']" |
| :titles="['待选设备','已选设备']" |
| filterable |
| @on-change="devChange"> |
| </el-transfer> |
| </template> |
| </el-col> |
| </el-form-item> |
| </el-form> |
| <div slot="footer" class="dialog-footer"> |
| <el-button @click="resetForm('devweekDiaform') ">取 消</el-button> |
| <el-button type="primary" @click="saveDevWeek">确 定</el-button> |
| </div> |
| </el-dialog> |
| |
| |
| </div> |
| </div> |
| </div> |
| <script> |
| var vue = new Vue({ |
| el:'#devweek', |
| data:{ |
| tableData:[], |
| currPage: 1, |
| pageSize:10, |
| totSize:0, |
| currentRow: null, |
| devweekform:{ |
| weekid:'', |
| devname:'' |
| }, |
| weeklist:[], |
| devs:[], |
| dialogFormVisible: false, |
| dlgAllotDevVisible:false, |
| devweekDiaform:{ |
| weekid:'', |
| devids:[] |
| }, |
| addDev:[], |
| selectDevList:[], |
| listStyle: { |
| width: '500px', |
| height: '600px' |
| }, |
| panelWidth:300, |
| reWeekId:0, |
| chosenDevs:[], |
| rules:{ |
| weekid:[ |
| {type:'number',required:true,message:'请选择时间周',trigger:'blur'} |
| ], |
| devs:[ |
| {type:'array',required:true,message:'请至少选择一个设备',trigger:'blur'} |
| ] |
| }, |
| devweekTitle:'添加设备' |
| }, |
| methods:{ |
| handleSizeChange:function(val) { |
| this.pageSize=val; |
| commonQuery(this,this.devweekform.weekid,this.devweekform.devname,this.currPage,val); |
| //console.log('每页条'+val); |
| }, |
| currPageChange:function(val) { |
| this.currPage=val; |
| commonQuery(this,this.devweekform.weekid,this.devweekform.devname,this.currPage,this.pageSize); |
| //console.log('当前页:'+val); |
| }, |
| currRowChange:function(val) { |
| this.currentRow = val; |
| }, |
| query:function(){ |
| this.pagesize=10; |
| this.currPage=1; |
| commonQuery(this,this.devweekform.weekid,this.devweekform.devname,this.currPage,this.pageSize); |
| }, |
| devChange:function (newTargetKeys) { |
| //console.log(newTargetKeys); |
| this.selectDevList=newTargetKeys; |
| }, |
| delDevWeek:function(devid,weekid){ |
| deletedata(devid,weekid); |
| }, |
| addDevWeek:function () { |
| getFillData(this,"-1"); |
| this.dialogFormVisible = true; |
| this.timetitile="添加时间段" |
| }, |
| resetForm:function(formName) { |
| this.$refs[formName].resetFields(); |
| this.chosenDevs=[]; |
| this.devs=[]; |
| this.dialogFormVisible = false |
| }, |
| saveDevWeek:function () { |
| var _that=this; |
| var vali = false; |
| /*this.$refs[formName].validate( |
| function(valid){ |
| if (valid){ |
| vali = true; |
| //console.log(JSON.stringify(_that.operOperform)); |
| }else{ |
| vali=false; |
| } |
| }); |
| if (vali==true){ |
| |
| saveData(_that,_that.devweekDiaform,formName); |
| }*/ |
| saveData(_that,_that.devweekDiaform,_that.chosenDevs); |
| |
| //_that.chosenDevs=[]; |
| //_that.devs=[]; |
| _that.dialogFormVisible = false; |
| }, |
| handleSelectionChange:function(val) { |
| this.multipleSelection = val; |
| }, |
| getReWeekId:function(val){ |
| var _self=this; |
| getChosenDev(_self,val); |
| |
| }, |
| |
| }, |
| created:function(){ |
| var _self=this; |
| $.ajax({ |
| type:"get", |
| dataType:"json", |
| url:encodeURI("[[@{/ncmgr/loaddevweekList?weekid=}]]0&devname="), |
| success:function(ret){ |
| //console.log(ret); |
| _self.totSize=ret.PageResult.totalCount; |
| _self.tableData=ret.PageResult.list; |
| var weeks = []; |
| var weektimes=ret.weektime; |
| for (var i = 0; i < weektimes.length; i++) { |
| weeks.push({ |
| value: weektimes[i]["weekid"], |
| label: weektimes[i]["weekname"] |
| |
| }); |
| } |
| _self.weeklist=weeks; |
| } |
| }) |
| } |
| }); |
| function refreshThisTable(){ |
| |
| commonQuery(vue,vue.devweekform.weekid,vue.devweekform.devname,vue.currPage,vue.pageSize); |
| }; |
| function commonQuery(_self,weekid,devname,pageNo,pageSize){ |
| var id=weekid; |
| if(!weekid){ |
| id=0; |
| } |
| $.ajax({ |
| type:"get", |
| dataType:"json", |
| url:encodeURI("[[@{/ncmgr/loaddevweekList?weekid=}]]"+id+"&devname="+devname+"&pageNo="+pageNo+"&pageSize="+pageSize), |
| success:function(ret){ |
| _self.totSize=ret.PageResult.totalCount; |
| _self.tableData=ret.PageResult.list; |
| if(_self.totSize == 0 ){ |
| layer.msg("暂无数据", {icon: 2, time: 1000}); |
| } |
| } |
| }) |
| } |
| function deletedata(devid,weekid){ |
| layer.confirm('是否删除该设备时间周?', {icon: 3, title:'请确认',offset:'30%'},function(index){ |
| $.ajax({ |
| type:"get", |
| dataType:"json", |
| url:"[[@{/ncmgr/deleteNcdevweek?devid=}]]"+devid+"&weekid="+weekid, |
| success:function(ret){ |
| if(ret.message == undefined){ |
| layer.msg('用户认证已过期，请重新登录', {icon:2,time:1000}); |
| window.location="login"; |
| return; |
| } |
| if (ret.message != "") { |
| layer.msg(ret.message, {icon:2,time:1000}); |
| }else{ |
| layer.msg('删除成功', {icon: 1,time:1000}); |
| refreshThisTable(); |
| } |
| } |
| }) |
| }) |
| } |
| function getFillData(_self,id){ |
| $.ajax({ |
| type:"get", |
| dataType:"json", |
| url:encodeURI("[[@{/ncmgr/loadforadddevweek}]]"), |
| success:function(ret){ |
| var weeks = []; |
| var weektimes=ret.weektime; |
| for (var i = 0; i < weektimes.length; i++) { |
| weeks.push({ |
| value: weektimes[i]["weekid"], |
| label: weektimes[i]["weekname"] |
| |
| }); |
| } |
| var devlist = []; |
| var dev = ret.device; |
| for (var i = 0; i < dev.length; i++) { |
| devlist.push({ |
| label: dev[i].devname+"-"+dev[i]["devtype"], |
| key: dev[i].deviceid |
| }); |
| } |
| _self.weeklist=weeks; |
| _self.devs=devlist; |
| |
| } |
| }) |
| } |
| function saveData(_that,formdata,formName){ |
| |
| var weekid = formdata.weekid; |
| var devs = formName; |
| |
| var devids = ""; |
| for(var j = 0; j < devs.length; j ++){ |
| if(devids == ""){ |
| devids = devs[j]; |
| }else{ |
| devids += ","+devs[j]; |
| } |
| } |
| var dataStr = '{"weekid":"' + weekid+ '","devids":"' + devids+ '"}'; |
| var token=$("meta[name='_csrf_token']").attr("value"); |
| $.ajax({ |
| type: "POST", |
| url: encodeURI("[[@{/ncmgr/addNcdevweek?weekid=}]]"+weekid+"&devids="+devids), |
| dataType: "json", |
| contentType: "application/json", |
| headers: { |
| 'Accept': 'application/json', |
| 'Content-Type': 'application/json', |
| 'X-CSRF-TOKEN':token, |
| }, |
| data:JSON.stringify(_that.chosenDevs), |
| success: function (data) { |
| /*if(data.errStr == undefined){ |
| layer.msg('用户认证已过期，请重新登录', {icon: 2,time:1000}); |
| window.location="login"; |
| return ; |
| }*/ |
| if (data.errStr != "") { |
| layer.msg(data.errStr, {icon: 2,time:1000}); |
| } else { |
| layer.msg('保存信息成功!', {icon: 1,time:1000}); |
| _that.selectDevList=[]; |
| refreshThisTable(); |
| |
| } |
| } |
| }); |
| } |
| |
| function getChosenDev(_self,reData){ |
| |
| var reWeekId=reData; |
| $.ajax({ |
| type:"get", |
| url: encodeURI("[[@{/ncmgr/getChosenDev?reWeekId=}]]"+reWeekId), |
| dataType:"json", |
| success:function(info){ |
| var chosenDevList=[]; |
| var chosenDev=info.chosenDev; |
| |
| for (var i=0;i<chosenDev.length;i++){ |
| chosenDevList.push( |
| chosenDev[i].id.devid |
| |
| ); |
| } |
| _self.chosenDevs=chosenDevList; |
| } |
| }); |
| } |
| |
| </script> |
| |
| <style> |
| .el-checkbox-group.el-transfer-panel__list{ |
| height:250px; |
| } |
| .el-transfer-panel{ |
| width:260px; |
| } |
| .el-transfer-panel__body{ |
| height:330px; |
| width:250px; |
| } |
| </style> |