mitric_dict.html
<!DOCTYPE html>
<html lang="en" class="width-height-100">
<head>
<meta charset="UTF-8">
<title>mitric_dict</title>
<link rel="stylesheet" type="text/css" href="../../../thx/layui/css/layui.css" />
<style>
* {
box-sizing: border-box;
}
.width-height-100 {
width: 100%;
height: 100%;
}
.container {
padding: 24px;
}
.padding-12 {
padding: 12px;
}
.btn-btn {
padding-bottom: 10px;
border-bottom: 1px solid #ddd;
}
.layui-btn-none {
background-color: transparent;
border-color: transparent;
}
.layui-btn-none:hover{
color:#333;
}
.color-black {
color: black;
}
.btn-active {
background: #337ab7;
color: white;
}
.btn-check {
background: #269abc;
}
.context {
background: white;
border-radius: 10px;
padding: 12px;
}
.padding10 {
border: 1px solid #ccc;
margin-top: 10px;
padding: 10px;
}
.height-45 {
height: calc(100% - 45px);
}
</style>
</head>
<body class="width-height-100">
<div class="container width-height-100">
<div class="layui-row btn-btn" style="height:45px;">
<button class="layui-btn color-black layui-btn-none btn-active">设备</button>
<button class="layui-btn color-black layui-btn-none">业务</button>
</div>
<div class="context layui-form height-45" style="overflow: auto;">
<div class="layui-row padding10">
<div class="layui-col-xs5">
<button class="layui-btn btn-active" onclick="to_add()">新增指标</button>
<button class="layui-btn btn-active" onclick="to_manage()">分组管理</button>
</div>
<div class="layui-col-xs7">
<div class="layui-col-xs5">
<label class="layui-form-label">名称</label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" placeholder=""
autocomplete="off" class="layui-input" id="name">
</div>
</div>
<div class="layui-col-xs5">
<label class="layui-form-label">编码</label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" placeholder=""
autocomplete="off" class="layui-input" id="code">
</div>
</div>
<div class="layui-col-xs2">
<button class="layui-btn btn-check" style="margin-left:4px;"
onclick="to_searchData()">查询</button>
</div>
</div>
</div>
<div class="layui-row padding10 width-height-100" style="
height: calc(100% - 5rem);overflow: auto;
">
<table id="tablelist" class="layui-table" lay-filter="test"></table>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../../../thx/jquery-2.0.0.js"></script>
<script type="text/javascript" src="../../../thx/layui/layui.all.js"></script>
<script type="text/javascript" src="../../../js/app_conf.js"></script>
<script type="text/javascript" src="../../../js/app_common_fn.js"></script>
<script>
var template_url = "template";//模板接口
var layui_layer_index = "";//当前弹出层
var copy_req = {
code: "",
count: ""
};//copy的请求参数
var table = null;//table
var form = null;//表单渲染layui的样式的全局参数
var physicsList_data = null;//机房下拉列表的数据
var businessList_data = null;//业务下拉列表的数据
var sysuserList_data = null;//运维人员下拉列表的数据
var show = false;//是否有展开的情况
var options = {
code: "",
go: "mitricDictPage",
name: "",
temptype: "phyobj"
};//请求table的参数
var add_params = {
go: "saveMitricDict",
objType: "phyobj",
id: ""
}//新增分组按钮
//页面加载完成时调用
$(window).load(function () {
// 初始化页面
init_view();
// 加载数据
load_data();
// 页面渲染
init_page();
});
function init_view() {
console.error();
//表格初始化
layui.use('table', function () {
table = layui.table;
table.render({
id: "dict_table",
elem: '#tablelist',
height: $("#tablelist").parent().height()-30,
method: 'post',
where: options,
url: app_url + template_url,
limit: 10,
limits: [10, 20, 30, 40],
page: true,
page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
layout: ['count', 'limit', 'skip', 'prev', 'page', 'next'] //自定义分页布局，以及顺序
},
contentType: 'application/json',
request: {
pageName: "page" //页码的参数名称，默认：page
, limitName: "rows" //每页数据量的参数名，默认：limit
},
response: {
statusName: 'ret_code' //数据状态的字段名称，默认：code
, statusCode: 0 //成功的状态码，默认：0
, msgName: 'ret_msg' //状态信息的字段名称，默认：msg
, countName: 'total' //数据总数的字段名称，默认：count
, dataName: 'data' //数据列表的字段名称，默认：data
},
cols: [
[ //表头
{ field: 'cname', title: '分组名称', align: "center" },
{ field: 'name', title: '指标名称', align: "center" },
{ field: 'code', title: '指标编码', align: "center" },
{ field: 'desc', title: '指标描述', align: "center", },
{
field: 'do', title: '操作', align: "center",
templet: function (d) {
var button = addMyButton(d);
return button;
}
}
]
],
done: function (res, curr, count) { //成功走的方法
var count = res.row_count;
}
});
});
//监听设备和业务按钮
$(".btn-btn").on("click", "button", function () {
$(".btn-btn").children().removeClass("btn-active");
$(this).addClass("btn-active");
if ($(this).html() == "设备") {
re_table_list("phyobj");
add_params.objType = "phyobj";
} else if ($(this).html() == "业务") {
re_table_list("serviceobj");
add_params.objType = "serviceobj"
}
});
}
//加载数据
function load_data() {
}
//重新配置页面
function init_page() {
}
//详情
function to_check(name, code, summ_tx, desc) {
var jsonData = {
name: name,
code: code,
summ_tx: summ_tx,
desc: desc,
objType:add_params.objType//该变量保持和新增的传参一直
}
var strData = JSON.stringify(jsonData);
console.log(strData);
var href = 'mitric_dict_detail.html?jsonstr=' + encodeURI(strData);
layui_layer_index = layer.open({
title: ['详情'],//, 'font-size:18px;'
type: 2,
area: ['60%', '55%'],
fixed: false, //不固定
maxmin: false,
content: href
, btnAlign: 'r'//按钮左对齐
, btn: ['取消']
, btn1: function (index, layero) {
layer.close(index); //关闭弹窗
}
});
}
//新增
function to_add() {
var jsonData = {
objType: add_params.objType,
};
var strData = JSON.stringify(jsonData);
console.log(strData);
var href = 'mitric_dict_add.html?jsonstr=' + encodeURI(strData);
layer.open({
title: ['新增指标'],//, 'font-size:18px;'
type: 2,
area: ['55%', '50%'],
fixed: false, //不固定
maxmin: false,
content: href
, btnAlign: 'r'//按钮左对齐
, btn: ['确定', '取消']
, yes: function (index, layero) {
var layui_layer_ = "layui-layer-iframe" + layero[0].id.replace("layui-layer", "");
add_params.name = window.frames[layui_layer_].$("#name").val();
add_params.code = window.frames[layui_layer_].$("#code").val();
add_params.type = window.frames[layui_layer_].$("#type").val();
add_params.active_type = window.frames[layui_layer_].$("#active_type").val();
add_params.script_id = window.frames[layui_layer_].$("#script_id").val();
add_params.category = window.frames[layui_layer_].$("#category").val();
add_params.summ_tx = window.frames[layui_layer_].$("#summ_tx").val();
add_params.desc = window.frames[layui_layer_].$("#desc").val();
console.log(add_params)
if (!check_null_param(add_params['name'])) {
layer.msg("请输入名称", { time: '1000' });
} else if (!check_null_param(add_params['code'])) {
layer.msg("请输入编号", { time: '1000' });
} else {
ajax_post(function (data) {
layer.close(index);
reloadTable();
}, template_url, add_params);
}
}, btn2: function (index, layero) { //按钮【按钮二】的回调
layer.close(index);//return false 开启该代码可禁止点击该按钮关闭
}
});
}
//刷新表格
function reloadTable() {
var current = 1;
if ($(".layui-laypage-skip").find("input").val()) {
current = $(".layui-laypage-skip").find("input").val();
};
table.reload('dict_table', {
height: "full",
page: {
'curr': current,//获取当前页
}
});
}
//切换业务和设备
function re_table_list(temptype) {
options.temptype = temptype;
options.code = fmt_param($("#code").val());
options.name = fmt_param($("#name").val());
table.reload('dict_table', {
where: options,
page: {
curr: 1 //重新从第 1 页开始
}
})
}
//表格添加按钮方法
function addMyButton(data) {
var { id, name, code, summ_tx, desc } = data;
var button = "";
button = `<button class='layui-btn layui-btn-sm btn-check' onclick="to_check('${name}','${code}','${summ_tx}','${desc}')">详情</button>`;
button += `<button class="layui-btn layui-btn-sm layui-btn-danger" onClick="toDeleteData('${id}','${name}')">删除</button>`
return button;
}
//表格数据-操作按钮 = 删除
function toDeleteData(id, name) {
var checkStatus = table.checkStatus('dict_table');
layer.confirm('<span style="text-align: center;display:block">' + '确定要删除"' + name + '"吗？ </span>', {
title: '删除',
btn: ['确定', '取消'] //可以无限个按钮
}, function (index, layero) {//按钮【按钮一】的回调
ajax_post(function (data) {
layer.close(index); //关闭弹窗
reloadTable();
}, template_url, {
"id": id,
"go": "delMitricDict"
});
}, function (index) {//按钮【按钮二】的回调
layer.close(index); //关闭弹窗
});
}
//表格数据-查询
function to_searchData() {
options.name = fmt_param($("#name").val());
options.code = fmt_param($("#code").val());
//重载table
table.reload('dict_table', {
where: options,
page: {
curr: 1 //重新从第 1 页开始
}
});
}
//表格数据-分组管理
function to_manage() {
var jsonData = {
objType: add_params.objType,
};
var strData = JSON.stringify(jsonData);
console.log(strData);
var href = 'mitric_dict_manage.html?jsonstr=' + encodeURI(strData);
layer.open({
title: ['分组名称管理'],//, 'font-size:18px;'
type: 2,
area: ['55%', '50%'],
fixed: false, //不固定
maxmin: false,
content: href
, btnAlign: 'r'//按钮左对齐
, btn: ['关闭']
, yes: function (index, layero) {
layer.close(index);
}
});
}
</script>
</html>
本文介绍了一个设备与业务指标管理系统的界面设计与功能实现，包括设备与业务的切换、新增指标、分组管理、查询与删除操作等功能。系统采用HTML、CSS、JavaScript等前端技术，结合layui框架进行界面美化与交互设计。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
