物联网平台 +Web 组态
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.

284 lines
8.0 KiB

2 years ago
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="com.lp.cfg.ProConfig"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/oss/iot/common/variable.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/variable_js.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/resource_lib.jsp"%>
<script src="../../lib/bigscreen/js/vue.min.js"></script>
<style type="text/css">
.index_theLeft ul {
width: 100%;
padding: 0px;
margin: 0px;
overflow: auto;
}
.mapContainer{
height: 550px;width:100%;padding-left:170px;
}
.app-container{
background: #f2f2f2;width: 100%;border-top:1px solid #ecf0f5;
}
.box-white {
width: 97%;
min-width: 897px;
padding-bottom: 0;
margin: 0 auto;
}
.box {
border: 0!important;
box-shadow: 0 0 2px 1px rgba(13,5,9,.08)!important;
position: relative;
border-radius: 3px;
background: #fff;
border-top: 3px solid #d2d6de;
margin-bottom: 20px;
width: 100%;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
padding: 10px;
padding-top:1px;
border-left: 1px solid #d2d6de;
border-right: 1px solid #d2d6de;
border-bottom: 1px solid #d2d6de;
}
.sceneList-info{
padding-top: 10px;
padding-left: 10px;
}
.info{
float: left;
height: 160px;
background: #f5f7fa;
border: 1px solid #e5e8eb;
border-radius: 8px;
padding: 10px;
margin: 10px;
}
.info .title{
font-size: 16px;
padding: 5px 10px;
border-bottom: 1px solid #d9d9d9;
}
.info-body{
height: 70px;
padding: 5px 10px;
}
.info-bottons{
padding: 10px 10px;
}
.tag-style{
margin: -3px 5px 0 0px;
float:right ;
}
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div>
<div>
<!-- 左边栏 -->
<div class="float-left index_theLeft" style="width:170px;">
<div class="prolist">
<span>项目列表</span>
</div>
<ul class="dashboard-menu">
<c:forEach items="${info.data.getData()}" varStatus="status" var="obj">
<li onclick="changeScene(this)"
<c:if test="${id !=null }">
<c:if test="${obj.id ==id}">
class="active"
</c:if>
</c:if>
<c:if test="${id ==null }">
<c:if test="${status.index ==0}">
class="active"
</c:if>
</c:if>
sid="${obj.id}">
<span class="icon-stack-overflow"></span>&nbsp;${obj.name }
</li>
</c:forEach>
</ul>
</div>
<div class="mapContainer" id="app" v-cloak >
<div class="app-container">
<div class="container-layout sceneList-info">
<div class="box join-device-box">
<div class="search-container" >
<span class="titleName">可视化管理</span>
<span>名称:</span>
<input type-name="name" v-model="modelname" placeholder="名称查询" class="input input-self" />
<input type-name="scene_id" class="scene_id" type="hidden" />
<button onclick="add()" class="button ml-20 bg-iot float-right"><span class="icon-plus"></span> 新增</button>
<button id="searchbtns" @click="search()" class="button ml-20 bg-iot float-right"><span class="icon-search"></span> 查询</button>
</div>
<div style="margin-top:10px;overflow: hidden;margin-top:20px;">
<div class="info" v-for="item in visualList" style="width:350px;" >
<div class="title">
<span v-text="item.name"></span>
<span style="float:right;cursor: pointer;"
class="intro-ico iconfont icon-edit" @click="editVisual(item.id)" ></span>
<span class="tag tag-style" v-if="item.parent_id != null" >子界面</span>
<span class="tag bg-green tag-style" v-if="item.dis_type == 0 " >电脑</span>
<span class="tag bg-yellow tag-style" v-if="item.dis_type == 1" >手机</span>
</div>
<div class="info-body">
<div v-text="item.description"></div>
</div>
<div class="info-bottons">
<button type="button" @click="run(item.keycode)" class="layui-btn layui-btn-sm layui-btn-normal">运行</button>
<button type="button" @click="editInfo(item.keycode)" v-if="item.parent_id == null" class="layui-btn layui-btn-sm layui-btn-normal">编辑</button>
<button type="button" @click="setting(item.id)" class="layui-btn layui-btn-sm layui-btn-normal">设置</button>
<button type="button" @click="copyInfo(item.id,item.keycode)" v-if="item.parent_id == null" class="layui-btn layui-btn-sm layui-btn-normal">复制</button>
<button type="button" @click="deleteInfo(item.id)" class="layui-btn layui-btn-sm layui-btn-normal">删除</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: function() {
return {
visualList: [] ,
scene_id: 0 ,
modelname: ''
}
},
methods:{
editVisual :function(id){
layer.open({
type: 2,
title: '编辑信息',
shadeClose: true,
shade: 0.7,
maxmin: true, //开启最大化最小化按钮
area: ['700px', '480px'],
content: localUrl + '/iot/visual_detail?id='+id
});
},
deleteInfo:function(id){
var that = this ;
lcomfirm('是否确定删除?',function(){
commonAjax("DELETE",localUrl+"/visual/display?id="+id, "",function(){
tip("删除成功");
setTimeout(function(){
closeAll();
that.initVisual();
},1000)
});
});
},
initVisual :function(){
// 请求改用户下组态信息的数据
var that = this ;
postAjax(localUrl + '/page/visual/display?pageSize=100&paged=1' , {scene_id : that.scene_id } ,function(res){
if(isOK(res)){
that.visualList = res.data.data ;
}else{
that.visualList =[] ;
}
});
},
run: function(keyCode){
window.open( basePath + '/page/visual/show.html?keyCode='+ keyCode );
},
editInfo: function(keyCode){
window.open( basePath + '/page/visual/index.html?keyCode='+ keyCode );
},
copyInfo: function(id , keycode){
layer.open({
type: 2,
title: '复制信息',
shadeClose: true,
shade: 0.7,
maxmin: true, //开启最大化最小化按钮
area: ['700px', '480px'],
content: localUrl + '/iot/visual_detail?keycode='+ keycode
});
},
setting: function(id ){
layer.open({
type: 2,
title: '设置信息',
shadeClose: true,
shade: 0.7,
maxmin: true, //开启最大化最小化按钮
area: ['700px', '480px'],
content: localUrl + '/iot/visual_setting?id='+ id
});
},
search: function(){
var that = this ;
postAjax(localUrl + '/page/visual/display?pageSize=100&paged=1' , {scene_id : that.scene_id , name: that.modelname } ,function(res){
if(isOK(res)){
that.visualList = res.data.data ;
}else{
that.visualList =[] ;
}
});
}
},created(){
},mounted() {
this.scene_id = $(".dashboard-menu li.active").attr("sid") ;
if(this.scene_id == null){
this.scene_id = -1 ;
}
this.initVisual();
}
}) ;
function changeScene(obj){
$(".dashboard-menu li").removeClass("active");
$(obj).addClass("active");
$(".scene_id").val($(".dashboard-menu li.active").attr("sid"));
app.scene_id = $(".dashboard-menu li.active").attr("sid") ;
reflash();
}
function reflash(){
app.initVisual();
}
function add(){
layer.open({
type: 2,
title: '新增信息',
shadeClose: true,
shade: 0.7,
maxmin: true, //开启最大化最小化按钮
area: ['700px', '480px'],
content: localUrl + '/iot/visual_detail'
});
}
$(function(){
$(".scene_id").val($(".dashboard-menu li.active").attr("sid"));
app.scene_id = $(".dashboard-menu li.active").attr("sid") ;
if(app.scene_id == null ){
app.scene_id = -1 ;
}
})
</script>
</html>