blob: 65e7069f86af3ebeaee769a4ac5f57891017b6d5 [file] [log] [blame]
<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="devapp">
<el-form :inline="true" ref="devform" :model="devform" 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="devform.devname" id="devname"></el-input>
</div>
</div>
</div>
<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-select v-model="devform.devtype"
filterable
clearable
@Change="devtypeChange"
placeholder="请选择">
<el-option
v-for="devtype in devtypes"
:key="devtype.value"
:label="devtype.label"
:value="devtype.value">
</el-option>
</el-select>
</div>
</div>
</div>
<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-select v-model="devform.regionid"
filterable
clearable
@Change="regionChange"
placeholder="请选择">
<el-option
v-for="regionid in regions"
:key="regionid.value"
:label="regionid.label"
:value="regionid.value">
</el-option>
</el-select>
</div>
</div>
</div>
<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-select v-model="devform.buildingid"
filterable
clearable
placeholder="请选择">
<el-option
v-for="buildingid in buildings"
:key="buildingid.value"
:label="buildingid.label"
:value="buildingid.value">
</el-option>
</el-select>
</div>
</div>
</div>
<div class="col-md-12" style="padding-left: 905px">
<div class="form-group">
<button type="button" class="btn btn-info" @click="query" id="qrybtn">查 询</button>
<button class="btn btn-primary" type="button" @click="addDev">添加设备</button>
</div>
</div>
</el-form>
<template>
<el-table
ref="singleTable"
:data="tableData"
highlight-current-row
@current-change="currRowChange"
stripe
max-height="2000"
border
style="width: 100%;">
<el-table-column
prop="deviceid"
label="编号"
sortable
width="100">
</el-table-column>
<el-table-column
prop="devphyid"
label="物理编号"
sortable
width="180">
</el-table-column>
<el-table-column
prop="devno"
label="读头号"
width="100">
</el-table-column>
<el-table-column
prop="devname"
label="设备名称"
width="200">
</el-table-column>
<el-table-column
prop="devtype"
label="设备类型"
width="120"
:formatter="typeform">
</el-table-column>
<el-table-column
prop="buildingname"
label="设备所在楼栋"
width="140">
</el-table-column>
<el-table-column
prop="regionid"
label="区域编号"
width="100">
</el-table-column>
<el-table-column
prop="ip"
label="IP"
width="150">
</el-table-column>
<el-table-column
prop="syncflag"
label="同步标志"
width="120"
:formatter="flagform">
</el-table-column>
<el-table-column
prop="synctime"
label="同步时间"
width="200"
:formatter="syncform">
</el-table-column>
<el-table-column
prop="updtime"
label="更新时间"
min-width="200"
:formatter="updform">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="213">
<template scope="scope">
<button type="button" class="btn btn-info btn-xs" title="编辑设备"
@click="editDev(scope.row.deviceid)">编辑
</button>
<button type="button" class="btn btn-danger btn-xs" title="删除设备"
@click="delDev(scope.row.deviceid)">删除
</button>
<button type="button" class="btn btn-warning btn-xs" title="名单清空"
@click="listClean(scope.row.deviceid)" v-if="scope.row.devtype=='R'">清空
</button>
<button type="button" class="btn btn-success btn-xs" title="名单重下"
@click="listReload(scope.row.deviceid)" v-if="scope.row.devtype=='R'">重下
</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="devtitle" :visible.sync="dialogFormVisible" center="true" top="3%" size="tiny">
<el-form ref="devUpform" :model="devUpform" :rules="rules" size="mini" label-width="36%">
<el-form-item label="设备名称:" prop="devname">
<div class="el-col el-col-18">
<div class="el-input" style="width: 187px;">
<el-input v-model="devUpform.devname">
</el-input>
</div>
</div>
</el-form-item>
<el-form-item label="设备类型:" prop="devtype">
<el-col :span="18">
<el-select v-model="devUpform.devtype" style="width: 187px;"
filterable
@Change="devtypeChange"
placeholder="请选择">
<el-option
v-for="devtype in devtypes"
:key="devtype.value"
:label="devtype.label"
:value="devtype.value">
</el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="设备使用类型:" prop="usetype">
<el-col :span="18">
<el-select v-model="devUpform.usetype" style="width: 187px;" filterable placeholder="请选择">
<el-option
v-for="usetype in devusetypes"
:key="usetype.value"
:label="usetype.label"
:value="usetype.value">
</el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="上级设备:" prop="fdevid">
<el-col :span="18">
<el-select v-model="devUpform.fdevid"
style="width: 187px;" clearable
filterable
:disabled="fdevDis"
placeholder="请选择">
<el-option
v-for="fdevid in fdevs"
:key="fdevid.value"
:label="fdevid.label"
:value="fdevid.value">
</el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="物理编号:" prop="devphyid">
<el-col :span="18">
<el-input v-model="devUpform.devphyid" style="width: 187px;">
</el-input>
</el-col>
</el-form-item>
<el-form-item label="读头号:" prop="devno">
<el-col :span="18">
<el-input v-model.number="devUpform.devno" :disabled="devnoDis" style="width: 187px;">
</el-input>
</el-col>
</el-form-item>
<el-form-item label="IP:" prop="ip">
<el-col :span="18">
<el-input v-model="devUpform.ip" style="width: 187px;">
</el-input>
</el-col>
</el-form-item>
<el-form-item label="所在区域:" prop="regionid">
<el-col :span="18">
<el-select v-model="devUpform.regionid"
style="width: 187px;" clearable
filterable
@Change="regionfillChange"
placeholder="请选择">
<el-option
v-for="regionid in regionsfill"
:key="regionid.value"
:label="regionid.label"
:value="regionid.value">
</el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="所在楼栋:" prop="buildingid">
<el-col :span="18">
<el-select v-model="devUpform.buildingid"
style="width: 187px;" clearable
filterable
placeholder="请选择">
<el-option
v-for="buildingid in buildingsfill"
:key="buildingid.value"
:label="buildingid.label"
:value="buildingid.value">
</el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="继续添加:" prop="continueadd" v-show="checkvisible === true">
<el-col :span="18">
<el-checkbox v-model="continueadd">选中后保存不会退出窗口</el-checkbox>
</el-col>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="resetForm('devUpform') ">取 消</el-button>
<el-button type="primary" @click="saveDev('devUpform')">确 定</el-button>
</div>
</el-dialog>
</div>
</div>
</div>
<script>
var validatePass = function (rule, value, callback) {
//console.log(vue.devnoDis)
if (!vue.devnoDis) {
if (!value) {
return callback(new Error('请输入读头号'));
}
if (!Number.isInteger(value)) {
callback(new Error('读头号为0~15数字'));
} else {
if (value <= 15 && value >= 0) {
callback();
} else {
callback(new Error('读头号为0~15数字'));
}
}
} else {
callback();
}
}
var vue = new Vue({
el: '#devapp',
data: {
tableData: [],
currPage: 1,
pageSize: 10,
totSize: 0,
currentRow: null,
devnoDis: false,
fdevDis: false,
buildingDis:false,
phyDis: false,
devform: {
devname: '',
buildingid: '',
devtype: '',
regionid:''
},
regions:[],
regionsfill:[],
buildings:[],
buildingsfill:[],
checkvisible: true,
continueadd: true,
devtypes: [],
fdevs: [],
devusetypes: [],
dialogFormVisible: false,
dlgAllotDevVisible: false,
devtitle: '添加设备',
devUpform: {
deviceid: '',
devname: '',
devtype: '',
usetype: '',
fdevid: '',
devphyid: '',
devno: '',
ip: '',
buildingid:'',
regionid:''
},
rules: {
devname: [
{required: true, message: '请输入设备名', trigger: 'blur'},
{min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
],
devtype: [
{required: true, message: '请选择设备类型', trigger: 'blur'}
],
usetype: [
{required: true, message: '请选择设备使用类型', trigger: 'blur'}
],
devphyid: [
{required: true, message: '请输入设备编号', trigger: 'blur'}
],
devno: [
{validator: validatePass, trigger: 'blur'}
],
regionid: [
{required: true, message: '请选择设备所在区域', trigger: 'blur'}
],
buildingid: [
{required: true, message: '请选择设备所在楼栋', trigger: 'blur'}
],
},
usetypeVals: [],
usetypeNames: []
},
methods: {
handleSizeChange: function (val) {
this.pageSize = val;
commonQuery(this, this.devform, this.currPage, val);
},
currPageChange: function (val) {
this.currPage = val;
commonQuery(this, this.devform, this.currPage, this.pageSize);
},
currRowChange: function (val) {
this.currentRow = val;
},
delDev: function (row) {
deletedata(row);
},
listClean: function(row){
listCleanMethod(row);
},
listReload: function(row){
listReloadMethod(row);
},
query: function () {
this.pagesize = 10;
this.currPage = 1;
commonQuery(this, this.devform, this.currPage, this.pageSize);
},
addDev: function (formName) {
getFillData(this, "-1");
this.dialogFormVisible = true;
this.devtitle = "添加设备"
this.continueadd = true;
this.checkvisible = true;
},
resetForm: function (formName) {
this.devUpform.deviceid = '';
this.$refs[formName].resetFields();
this.dialogFormVisible = false;
},
saveDev: function (formName) {
var _that = this;
var vali = false;
if (this.devUpform.devtype == "C") {
if (this.devUpform.devphyid.length != 12) {
layer.msg("控制器设备编号为12位,不足前面补零!", {icon: 2, time: 3000});
return;
}
}
this.$refs[formName].validate(
function (valid) {
if (valid) {
vali = true;
} else {
vali = false;
}
});
if (vali == true) {
saveData(_that, _that.devUpform, formName);
}
},
devtypeChange: function (value) {
if (value == 'R') {
this.fdevDis = false;
this.devnoDis = false;
//this.continueadd=true;
//this.checkvisible=true;
} else if (value == 'C') {
this.devnoDis = true;
this.fdevDis = true;
this.devUpform.devno = '';
this.devUpform.fdevid = '';
//this.continueadd=false;
//this.checkvisible=false;
}
},
regionChange:function(value){
this.buildings=[];
this.devform.buildingid='';
getRegionBuilding(this,value);
if (this.devform.regionid==''){
getRegionBuilding(this,'0');
}
},
regionfillChange:function(value){
this.buildingsfill=[];
this.devUpform.buildingid='';
getRegionBuildingfill(this,value);
},
editDev: function (deviceid) {
this.devnoDis = false;
this.fdevDis = false;
this.phyDis = true;
getFillData(this, deviceid);
this.dialogFormVisible = true;
this.devtitle = "设备信息修改"
this.continueadd = false;
this.checkvisible = false;
},
typeform: function (row, column, cellValue) {
if (row.devtype == 'C') {
return '控制器';
}
else if (row.devtype == 'R') {
return '读头';
} else {
return row.devtype;
}
},
flagform: function (row, column, cellValue) {
if (row.syncflag == 'S') {
return '已同步';
} else {
return '未同步';
}
},
usetypeform: function (row, column, cellValue) {
var i = this.usetypeVals.indexOf(row.usetype);
return this.usetypeNames[i];
// if (row.usetype == 'MJ') {
// return '门禁';
// } else if (row.usetype == 'TD') {
// return '通道';
// } else if (row.usetype == 'KQ') {
// return "考勤";
// } else if (row.usetype == 'HY') {
// return "会议签到";
// } else {
// return row.usetype;
// }
},
syncform: function (row, column, cellValue) {
if (row.synctime != null) {
return timeformatter(row.synctime);
}
},
updform: function (row, column, cellValue) {
if (row.updtime != null) {
return timeformatter(row.updtime);
}
}
},
created: function () {
var _self = this;
$.ajax({
type: "get",
dataType: "json",
url: "[[@{/ncmgr/loadDevList}]]",
success: function (ret) {
//console.log(ret);
_self.totSize = ret.PageResult.totalCount;
_self.tableData = ret.PageResult.list;
var rt = ret.regions;
var uows = [];
uows.push({
value:'',
label:''
});
if (rt.length==1){
vue.devform.regionid = rt[0].regionid;
}
for (var j=0;j<rt.length;j++){
uows.push({
value: rt[j].regionid,
label: rt[j].regionname
});
}
var ut = ret.buildings;
var rows = [];
rows.push({
value: '',
label: ''
});
for (var i = 0; i < ut.length; i++) {
rows.push({
value: ut[i].buildingid,
label: ut[i].buildingname
});
}
var dictlist = [];
var dict = ret.dicts;
dictlist.push({
value: '',
label: "全部"
});
for (var i = 0; i < dict.length; i++) {
dictlist.push({
value: dict[i]["dictval"],
label: dict[i]["dictcaption"]
});
}
vue.devtypes = dictlist;
vue.regions = uows;
vue.buildings = rows;
}
})
}
})
function timeformatter(time) {
return time.substr(0, 4) + '-' + time.substr(4, 2) + '-' + time.substr(6, 2) + ' '
+ time.substr(8, 2) + ':' + time.substr(10, 2) + ':' + time.substr(12, 2);
}
function commonQuery(_self, rolename, pageno, pagesize) {
$.ajax({
type: "get",
dataType: "json",
url: encodeURI("[[@{/ncmgr/loadDevList?devname=}]]" + rolename.devname + "&pageNo=" + pageno + "&pageSize=" + pagesize + "&buildingid=" + rolename.buildingid + "&devtype=" + rolename.devtype+"&regionid="+rolename.regionid),
success: function (ret) {
_self.totSize = ret.PageResult.totalCount;
_self.tableData = ret.PageResult.list;
if (_self.totSize == 0) {
layer.msg("暂无数据", {icon: 2, time: 1000});
}
}
})
}
function getFillData(_self, id) {
$.ajax({
type: "get",
dataType: "json",
url: encodeURI("[[@{/ncmgr/loadNcDevForUpdate?deviceid}]]=" + id),
success: function (ret) {
var dictlist = [];
var dict = ret.dicts;
for (var i = 0; i < dict.length; i++) {
dictlist.push({
value: dict[i]["dictval"],
label: dict[i]["dictcaption"]
});
}
var devUseType = [];
var useTypes = ret.devUseType;
for (var i = 0; i < useTypes.length; i++) {
devUseType.push({
value: useTypes[i]["dictval"],
label: useTypes[i]["dictcaption"]
});
}
var devlist = [];
var dev = ret.devices;
for (var i = 0; i < dev.length; i++) {
devlist.push({
label: dev[i].devname,
value: dev[i].deviceid
});
}
var regionlist=[];
var regiondata = ret.regionsfill;
for (var i = 0; i < regiondata.length; i++) {
regionlist.push({
label: regiondata[i].regionname,
value: regiondata[i].regionid
});
}
var buildinglist=[];
var buildingdata = ret.buildingsfill;
for (var i = 0; i < buildingdata.length; i++) {
buildinglist.push({
label: buildingdata[i].buildingname,
value: buildingdata[i].buildingid
});
}
if (ret.device != null) {
//console.log(ret.oper);
_self.devUpform.deviceid = ret.device.deviceid;
_self.devUpform.devname = ret.device.devname;
_self.devUpform.devno = ret.device.devno;
_self.devUpform.devphyid = ret.device.devphyid;
_self.devUpform.devtype = ret.device.devtype;
if (ret.device.devtype == 'R') {
_self.fdevDis = false;
_self.devnoDis = false;
} else if (ret.device.devtype == 'C') {
_self.devnoDis = true;
_self.fdevDis = true;
}
_self.devUpform.usetype = ret.device.usetype;
_self.devUpform.fdevid = ret.device.fdevid;
_self.devUpform.ip = ret.device.ip;
_self.devUpform.regionid = ret.device.regionid;
_self.devUpform.buildingid = ret.device.buildingid;
}
_self.devtypes = dictlist;
_self.fdevs = devlist;
_self.regionsfill = regionlist;
_self.buildingsfill = buildinglist;
_self.devusetypes = devUseType;
}
})
}
function saveData(_that, formdata, formName) {
if (!checkNumber(formdata.devno) && formdata.devtype == 'R') {
layer.msg('读头号为1~4位数字', {icon: 2, time: 1000});
return;
}
if (formdata.fdevid == '' && formdata.devtype == 'R') {
layer.msg('需要选择上级设备', {icon: 2, time: 1000});
return;
}
var token=$("meta[name='_csrf_token']").attr("value");
$.ajax({
type: "post",
url: encodeURI("[[@{/ncmgr/saveNcDev}]]"),
dataType: "json",
contentType: "application/json",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'X-CSRF-TOKEN':token,
},
data: JSON.stringify(formdata),
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: 2000});
} else {
if (vue.continueadd == false) {
layer.msg('保存信息成功!', {icon: 1, time: 1000});
vue.devUpform.deviceid = '';
_that.$refs[formName].resetFields();
_that.dialogFormVisible = false;
} else {
layer.msg('保存信息成功,继续添加!', {icon: 1, time: 1000});
vue.devUpform.deviceid = '';
}
refreshThisTable();
}
}
});
}
function checkNumber(theObj) {
var reg = /^\d{1,4}$/;
if (reg.test(theObj)) {
return true;
}
return false;
}
function refreshThisTable() {
$("#qrybtn").click();
};
function deletedata(id) {
layer.confirm('你确定要删除选择的设备吗?', {icon: 3, title: '请确认', offset: '30%'}, function (index) {
$.ajax({
type: "get",
dataType: "json",
url: encodeURI("[[@{/ncmgr/deleteNcDev?devid=}]]" + id),
success: function (ret) {
//console.log(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 listCleanMethod(id){
layer.confirm('你确定要清空该设备名单吗?',{icon: 3,title: '请确认',offset: '30%'},function (index) {
$.ajax({
type: "get",
dataType: "json",
url:encodeURI("[[@{/ncmgr/listClean?devid=}]]" +id),
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});
}
}
})
});
};
function listReloadMethod(id){
layer.confirm('你确定要重下该设备名单吗?',{icon: 3,title: '请确认',offset: '30%'},function (index) {
$.ajax({
type: "get",
dataType: "json",
url:encodeURI("[[@{/ncmgr/listReload?devid=}]]" +id),
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});
}
}
})
});
}
function getRegionBuilding(_self,value){
$.ajax({
type: "get",
dataType: "json",
url: encodeURI("[[@{/ncmgr/getRegionBuilding?regionid=}]]" + value),
success: function (ret) {
var bList = [];
var rB = ret.reBuilding;
if (rB!=null) {
for (var j = 0; j < rB.length; j++) {
bList.push({
value: rB[j]["buildingid"],
label: rB[j]["buildingname"]
});
}
}
_self.buildings = bList;
}
})
}
function getRegionBuildingfill(_self,value) {
$.ajax({
type: "get",
dataType: "json",
url: encodeURI("[[@{/ncmgr/getRegionBuilding?regionid=}]]" + value),
success: function (ret) {
var bfList = [];
var rBf = ret.reBuilding;
if (rBf != null) {
for (var j = 0; j < rBf.length; j++) {
bfList.push({
value: rBf[j]["buildingid"],
label: rBf[j]["buildingname"]
});
}
}
_self.buildingsfill = bfList;
}
})
}
</script>