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
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> ${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>
|