You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
289 lines
9.5 KiB
289 lines
9.5 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<link rel="shortcut icon" href="../../image/oss/iot/favicon2.ico" type="image/x-icon" />
|
|
<link rel="stylesheet" href="../../lib/element-ui/index.css" />
|
|
<link rel="stylesheet" href="./css/index.css" />
|
|
<script src="../common/util.js"></script>
|
|
<script src="../../lib/bigscreen/js/vue.min.js"></script>
|
|
<script src="../../lib/bigscreen/lib/jquery/jquery-1.9.1.min.js"></script>
|
|
<script type="text/javascript" src="../../lib/layer/layer.js"></script>
|
|
<script src="../../lib/element-ui/index.js"></script>
|
|
<title>子设备管理</title>
|
|
</head>
|
|
<body>
|
|
<el-container id="app" v-cloak v-loading.fullscreen.lock="fullscreenLoading">
|
|
<el-aside width="170px" :height="aheight">
|
|
<div class="prolist">
|
|
<span>项目列表</span>
|
|
</div>
|
|
<ul class="dashboard-menu">
|
|
<li v-for="(item,index) in sceneData" @click="selectScene(index,item.id)" :class="{'active':(oindex==index)}">
|
|
<i class="el-icon-box"></i><span class="pro-name" v-text="item.name"></span>
|
|
</li>
|
|
</ul>
|
|
</el-aside>
|
|
<el-container class="sub-el-container">
|
|
<el-header>
|
|
<div class="search">
|
|
<el-form :inline="true" :model="param" class="demo-form-inline">
|
|
<el-form-item label="名称">
|
|
<el-input v-model="param.name" size="medium" placeholder="名称" clearable ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="网关">
|
|
<el-select v-model="param.node_id" size="medium" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in nodeData"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="info" size="small" icon="el-icon-search" @click="search" >查询</el-button>
|
|
<el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="add" >新增</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</el-header>
|
|
<el-main>
|
|
<el-table :data="deviceData" :height="height" style="width: 100%">
|
|
<el-table-column type="index" label="序号" width="100"></el-table-column>
|
|
<el-table-column prop="name" label="设备名称" >
|
|
</el-table-column>
|
|
<el-table-column prop="node_name" label="网关名称" >
|
|
</el-table-column>
|
|
<el-table-column prop="address" label="设备ID" >
|
|
</el-table-column>
|
|
<el-table-column label="属性设置" >
|
|
<template slot-scope="scope">
|
|
<el-button type="primary" @click="detailInfo(scope.row)" size="mini" icon="el-icon-document" circle></el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作">
|
|
<template slot-scope="scope">
|
|
<el-button type="primary" @click="editDevice(scope.row)" size="mini" icon="el-icon-edit" circle></el-button>
|
|
<el-button type="danger" @click="deleteDevice(scope.row.id)" size="mini" icon="el-icon-delete" circle></el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-main>
|
|
</el-container>
|
|
|
|
<el-dialog :title="titleName" :visible.sync="dialogFormVisible" width="50%" >
|
|
<el-form :model="postparam" size="medium" class="postparam" >
|
|
<el-form-item label="名称" :label-width="formLabelWidth" :rules="[{required: true}]" >
|
|
<el-input v-model="postparam.name" autocomplete="off" placeholder="请输入" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="设备ID" :label-width="formLabelWidth" :rules="[{required: true}]">
|
|
<el-input v-model="postparam.address" placeholder="请输入" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="网关" :label-width="formLabelWidth" :rules="[{required: true}]">
|
|
<el-select v-model="postparam.node_id" size="medium" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in nodeData"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="排序" :label-width="formLabelWidth">
|
|
<el-input v-model="postparam.seq" type="number" placeholder="请输入" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="saveDeviceData" >确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
</el-container>
|
|
|
|
<script type="text/javascript">
|
|
var app = new Vue({
|
|
el: '#app' ,
|
|
data: function(){
|
|
return {
|
|
fullscreenLoading :true , // 加载提示
|
|
param: {
|
|
name: '' ,
|
|
node_id: ''
|
|
} ,
|
|
postparam:{ // 提交数据
|
|
},
|
|
formLabelWidth: '120px' ,
|
|
height: '' ,
|
|
dialogFormVisible: false , // 新增弹窗
|
|
scene_id: '' , // 项目id
|
|
aheight:'' ,
|
|
sceneData: '' , // 项目信息
|
|
oindex: 0, // 项目选中
|
|
nodeData: '' , // 网关信息
|
|
deviceData : '' ,// 设备信息
|
|
titleName: '新增设备', // 操作栏名字
|
|
}
|
|
},
|
|
methods: {
|
|
getSceneInfo(data){
|
|
commonAjax('POST',baseurl+"/service/page/scene?paged=1&pageSize=100", data ,function(res){
|
|
if(res.status == 2){
|
|
var dt = res.data.data ;
|
|
app.sceneData = dt ;
|
|
app.scene_id = dt[0].id ;
|
|
// 查询第一个场景下网关信息
|
|
app.getNodeData( {scene_id: dt[0].id } );
|
|
// 查询网关下的设备信息
|
|
app.getDeviceData( {scene_id: dt[0].id } );
|
|
}
|
|
});
|
|
},
|
|
add(){
|
|
this.titleName = '新增设备' ;
|
|
this.dialogFormVisible=true ;
|
|
app.postparam = {} ;
|
|
},
|
|
getNodeData(data){
|
|
commonAjax('POST',baseurl+"/service/page/node?paged=1&pageSize=100", data ,function(res){
|
|
if(res.status == 2){
|
|
var dt = res.data.data ;
|
|
app.nodeData = dt ;
|
|
}else{
|
|
app.nodeData = [] ;
|
|
}
|
|
// 清空
|
|
app.param.node_id = '' ;
|
|
});
|
|
},
|
|
getDeviceData(data){
|
|
commonAjax('POST',baseurl+"/service/page/sensor/device?paged=1&pageSize=100", data ,function(res){
|
|
if(res.status == 2){
|
|
var dt = res.data.data ;
|
|
app.deviceData = dt ;
|
|
}else{
|
|
app.deviceData = [] ;
|
|
}
|
|
});
|
|
},
|
|
search(){
|
|
app.getDeviceData( {scene_id:this.scene_id, node_id: this.param.node_id } );
|
|
},
|
|
selectScene(i,id){
|
|
this.scene_id = id ;
|
|
this.oindex = i ;
|
|
this.getNodeData( {scene_id: id } );
|
|
// 回调查询
|
|
app.search() ;
|
|
},
|
|
detailInfo(obj){
|
|
layer.open({
|
|
type: 2,
|
|
title: '传感器列表',
|
|
shadeClose: true,
|
|
shade: 0.7,
|
|
maxmin: true, //开启最大化最小化按钮
|
|
area: ['900px', '90%'],
|
|
content: baseurl + "/service/iot/sensors_manger?node_id=" + obj.node_id+"&sensor_device_id="+obj.address
|
|
});
|
|
},
|
|
saveDeviceData(){
|
|
if(util.isEmpty(this.postparam.name)){
|
|
app.$message({
|
|
message: '名称不能为空',
|
|
type: 'warning',
|
|
duration:1500
|
|
});
|
|
return ;
|
|
}
|
|
if(util.isEmpty(this.postparam.address)){
|
|
app.$message({
|
|
message: '设备ID不能为空',
|
|
type: 'warning',
|
|
duration:1500
|
|
});
|
|
return ;
|
|
}
|
|
|
|
if( this.postparam.id != null ){
|
|
commonAjax('PUT',baseurl+"/service/sensor/device.json" , this.postparam ,function(res){
|
|
if(res.status == 2){
|
|
app.$message({
|
|
message: '编辑成功',
|
|
type: 'success',
|
|
duration:1000
|
|
});
|
|
|
|
// 回调查询
|
|
app.search() ;
|
|
}else{
|
|
app.$message.error(res.statusMsg);
|
|
}
|
|
app.postparam = {} ;
|
|
app.dialogFormVisible = false ;
|
|
});
|
|
}else{
|
|
// 保存设备
|
|
commonAjax('POST',baseurl+"/service/sensor/device.json" , this.postparam ,function(res){
|
|
if(res.status == 2){
|
|
app.$message({
|
|
message: '添加成功',
|
|
type: 'success'
|
|
});
|
|
|
|
// 回调查询
|
|
app.search() ;
|
|
}else{
|
|
app.$message.error(res.statusMsg);
|
|
}
|
|
app.postparam = {} ;
|
|
app.dialogFormVisible = false ;
|
|
});
|
|
}
|
|
},
|
|
editDevice(obj){
|
|
this.postparam = obj ;
|
|
this.titleName = '编辑设备' ;
|
|
app.dialogFormVisible = true ;
|
|
},
|
|
deleteDevice(id){
|
|
this.$confirm('是否删除该条信息？', '信息确认', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
commonAjax('DELETE',baseurl+"/service/sensor/device.json?id="+id , "" ,function(res){
|
|
if(res.status == 2){
|
|
app.$message({
|
|
message: '删除成功',
|
|
type: 'success'
|
|
});
|
|
|
|
// 回调查询
|
|
app.search() ;
|
|
}else{
|
|
app.$message.error(res.statusMsg);
|
|
}
|
|
});
|
|
|
|
}).catch(()=>{} ) ;
|
|
}
|
|
},
|
|
created(){
|
|
this.height = window.innerHeight - 60; ;
|
|
this.aheight = window.innerHeight ;
|
|
this.getSceneInfo({}) ;
|
|
},
|
|
mounted(){
|
|
setTimeout(() => {
|
|
this.fullscreenLoading = false ;
|
|
}, 300);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|