130 lines
3.8 KiB
HTML
130 lines
3.8 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>挖掘机配置</title>
|
|||
|
|
<style>
|
|||
|
|
* {
|
|||
|
|
margin: 0 0;
|
|||
|
|
padding: 0 0;
|
|||
|
|
}
|
|||
|
|
.big_box {
|
|||
|
|
width: 90vw;
|
|||
|
|
height: 90vh;
|
|||
|
|
border: 1px solid red;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 3vh;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
.left {
|
|||
|
|
width: 30vw;
|
|||
|
|
border-right: 1px solid red;
|
|||
|
|
}
|
|||
|
|
.left_c {
|
|||
|
|
width: 100%;
|
|||
|
|
font-size: 4vw;
|
|||
|
|
text-align: center;
|
|||
|
|
margin: 3vw 0;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.left_c:hover {
|
|||
|
|
background-color: #f0f0f0;
|
|||
|
|
}
|
|||
|
|
.right {
|
|||
|
|
width: 60vw;
|
|||
|
|
}
|
|||
|
|
.right_c {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
margin: 2vw 0;
|
|||
|
|
padding: 0 2vw;
|
|||
|
|
}
|
|||
|
|
.title {
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
.child {
|
|||
|
|
width: 50%;
|
|||
|
|
cursor: pointer;
|
|||
|
|
margin: 5px 0;
|
|||
|
|
padding: 5px;
|
|||
|
|
border: 1px solid #ccc;
|
|||
|
|
}
|
|||
|
|
.child:hover {
|
|||
|
|
background-color: #f0f0f0;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<script src="../x_admin/js/jq.js"></script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="big_box">
|
|||
|
|
<div class="left" id="left-box">
|
|||
|
|
<!-- 动态加载配置名 -->
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="right" id="right-box">
|
|||
|
|
<!-- 动态加载配置项 -->
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var initial_data
|
|||
|
|
var temporary_str = ''
|
|||
|
|
var leftBox = $('#left-box');
|
|||
|
|
var rightBox = $('#right-box');
|
|||
|
|
$(document).ready(function(){
|
|||
|
|
// 页面加载完成后执行的代码
|
|||
|
|
load_action();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function load_action(){
|
|||
|
|
$.ajax({
|
|||
|
|
url:"/kitchenscale/get_default_configuration", //请求的url地址
|
|||
|
|
dataType:"json", //返回格式为json
|
|||
|
|
async:true,//请求是否异步，默认为异步，这也是ajax重要特性
|
|||
|
|
data:{"id":"value"}, //参数值
|
|||
|
|
type:"POST", //请求方式
|
|||
|
|
success:function(req){
|
|||
|
|
//请求成功时处理
|
|||
|
|
console.log(req);
|
|||
|
|
initial_data = req.data; // 将请求结果保存到initial_data中
|
|||
|
|
renderLeftBox(); // 渲染左侧配置名
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
error:function(){
|
|||
|
|
//请求出错处理
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
function renderLeftBox() {
|
|||
|
|
leftBox.empty(); // 清空左侧内容
|
|||
|
|
rightBox.empty(); // 清空左侧内容
|
|||
|
|
for (var key in initial_data) {
|
|||
|
|
temporary_str = '';
|
|||
|
|
if(initial_data[key]['type'] == 'configuration'){
|
|||
|
|
leftBox.append('<div class="left_c">' + initial_data[key]['name'] + '</div>');
|
|||
|
|
temporary_str = '<div class="right_c"><div class="title">'+initial_data[key]['name']+'</div>'
|
|||
|
|
}
|
|||
|
|
// if(){
|
|||
|
|
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
for (var k in initial_data[key]['list']) {
|
|||
|
|
if(initial_data[key]['list'][k]['type'] == 'parameter'){
|
|||
|
|
temporary_str = temporary_str + '<div class="child" onclick="get_configuration('+initial_data[key]['list'][k]['id']+')">'+initial_data[key]['list'][k]['name']+'</div>'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
temporary_str = temporary_str + '</div>';
|
|||
|
|
rightBox.append(temporary_str);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|