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