<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>Layui</title>
|
<meta name="renderer" content="webkit">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
|
</head>
|
<body>
|
|
<div style="margin: 0 auto; max-width: 1140px;background-color:darkblue;color: #FFFFFF">
|
|
<div class="layui-row">
|
<div class="layui-col-xs3">
|
<div class="grid-demo grid-demo-bg1" style="text-align: center;">
|
频率列表
|
</div>
|
<div class="layui-panel" style="background-color: darkblue;border: darkblue;color: #FFFFFF;">
|
<ul class="layui-menu" id="docDemoMenu1" style="height:300px;overflow-y:scroll;overflow-x:hidden;background-color: darkblue;scrollBar-face-color: green;scrollBar-track-color:black;scrollBar-base-color:pink;color: #FFFFFF">
|
<li lay-options="{id: 101,fn:100}" style="color: #FFFFFF;">
|
<div class="layui-menu-body-title">100 MHz</div>
|
</li>
|
<li lay-options="{id: 102,fn:101}" style="color: #FFFFFF;">
|
<div class="layui-menu-body-title">101 MHz <span class="layui-badge-dot"></span></div>
|
</li>
|
<li lay-options="{id: 103,fn:102}" style="color: #FFFFFF;">
|
<div class="layui-menu-body-title">102 MHz</div>
|
</li>
|
<li lay-options="{id: 101,fn:103}" style="color: #FFFFFF;">
|
<div class="layui-menu-body-title">103 MHz</div>
|
</li>
|
<li lay-options="{id: 102,fn:104}" style="color: #FFFFFF;">
|
<div class="layui-menu-body-title">104 MHz<span class="layui-badge-dot"></span></div>
|
</li>
|
<li lay-options="{id: 103,fn:105}" style="color: #FFFFFF;">
|
<div class="layui-menu-body-title">105 MHz</div>
|
</li>
|
<li lay-options="{id: 101,fn:106}" style="color: #FFFFFF;">
|
<div class="layui-menu-body-title">106 MHz</div>
|
</li>
|
<li lay-options="{id: 102,fn:107}" style="color: #FFFFFF;">
|
<div class="layui-menu-body-title">107 MHz</div>
|
</li>
|
<li lay-options="{id: 103,fn:108}" style="color: #FFFFFF;">
|
<div class="layui-menu-body-title">108 MHz</div>
|
</li>
|
<li lay-options="{id: 101,fn:109}" style="color: #FFFFFF;">
|
<div class="layui-menu-body-title">109 MHz</div>
|
</li>
|
<li lay-options="{id: 102,fn:110}" style="color: #FFFFFF;">
|
<div class="layui-menu-body-title">110 MHz<span class="layui-badge-dot"></span></div>
|
</li>
|
<li lay-options="{id: 103,fn:111}" style="color: #FFFFFF;">
|
<div class="layui-menu-body-title">111 MHz</div>
|
</li>
|
<li lay-options="{id: 101,fn:112}" style="color: #FFFFFF;">
|
<div class="layui-menu-body-title">112 MHz</div>
|
</li>
|
<li lay-options="{id: 102,fn:113}" style="color: #FFFFFF;">
|
<div class="layui-menu-body-title">113 MHz</div>
|
</li>
|
<li lay-options="{id: 103,fn:114}" style="color: #FFFFFF;">
|
<div class="layui-menu-body-title">114 MHz</div>
|
</li>
|
<li lay-options="{id: 101,fn:115}" style="color: #FFFFFF;">
|
<div class="layui-menu-body-title">115 MHz</div>
|
</li>
|
<li lay-options="{id: 102,fn:116}" style="color: #FFFFFF;">
|
<div class="layui-menu-body-title">116 MHz</div>
|
</li>
|
<li lay-options="{id: 103,fn:117}" style="color: #FFFFFF;">
|
<div class="layui-menu-body-title">117 MHz</div>
|
</li>
|
</ul>
|
</div>
|
|
</div>
|
<div class="layui-col-xs9">
|
<div class="layui-row">
|
<div class="layui-col-xs4" style="text-align: center;">
|
<div style="padding: 5px;" >监听1 ： <span id="panel_fren_no_1">1557</span> MHz</div>
|
</div>
|
<div class="layui-col-xs4" style="text-align: center;margin-top: 5px;">
|
<button type="button" class="layui-btn layui-btn-xs layui-btn-radius" id="record_list_play">play
|
</button>
|
<button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger" id="record_list_stop">stop
|
</button>
|
</div>
|
<div class="layui-col-xs4" style="text-align: center;">
|
<div style="padding: 5px;"><span id="panel_fren_yazhi_1">-80</span> 压制1</div>
|
</div>
|
</div>
|
<div class="layui-row">
|
<div class="layui-col-xs6" style="text-align: center;">
|
<button type="button" class="layui-btn layui-btn-xs layui-btn-radius" id="add_to_record_list_1">加入录制
|
</button>
|
</div>
|
<div class="layui-col-xs6" style="text-align: center;">
|
<button type="button" class="layui-btn layui-btn-xs layui-btn-radius" id="add_to_record_list_2">加入录制
|
</button>
|
</div>
|
</div>
|
<div class="layui-row">
|
<div class="layui-col-xs6">
|
<div style="padding: 5px;" >录制2 ： <span id="panel_fren_no_2">1557</span> MHz <span id="panel_fren_yazhi_2">-70</span> 压制2 </div>
|
</div>
|
<div class="layui-col-xs6">
|
<div style="padding: 5px;" >录制3 ： <span id="panel_fren_no_3">1557</span> MHz <span id="panel_fren_yazhi_3">-70</span> 压制2 </div>
|
</div>
|
</div>
|
<hr>
|
<div class="layui-row">
|
<div id="main_chart" style="width: 450px;height:200px;"></div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src="./layui/layui.js" charset="utf-8"></script>
|
<script type="text/javascript" src="script/jquery-3.0.0.min.js"></script>
|
<script type="text/javascript" src="./echart/echarts4.0.js"></script>
|
<script type="text/javascript" src="./echart/theme/dark.js"></script>
|
<script type="text/javascript" charset="utf-8">
|
|
|
layui.use('dropdown', function(){
|
var dropdown = layui.dropdown;
|
|
//菜单点击事件，其中 docDemoMenu1 对应的是菜单结构上的 id 指
|
dropdown.on('click(docDemoMenu1)', function(options){
|
var othis = $(this); //当前菜单列表的 DOM 对象
|
console.log(options); //菜单列表的 lay-options 中的参数
|
$("#panel_fren_no_1").html(options.fn);
|
});
|
});
|
|
$("#add_to_record_list_1").click(function(){
|
layer.msg("add_to_record_list_1");
|
|
});
|
$("#add_to_record_list_2").click(function(){
|
layer.msg("add_to_record_list_2");
|
});
|
$("#record_list_play").click(function(){
|
layer.msg("record_list_play");
|
});
|
$("#record_list_stop").click(function(){
|
layer.msg("record_list_stop");
|
});
|
|
|
// 基于准备好的dom，初始化echarts实例
|
var myChart = echarts.init(document.getElementById('main_chart'));
|
|
option = {
|
title: {
|
text: '历史压制效果',
|
textStyle:{
|
color:'#FFFFFF'
|
}
|
},
|
tooltip: {
|
trigger: 'axis'
|
},
|
legend: {
|
data: ['人工打分', '自动评估'],
|
textStyle:{
|
color:'#FFFFFF'
|
}
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
toolbox: {
|
feature: {
|
saveAsImage: {},
|
dataView:{} ,
|
},
|
iconStyle:{
|
borderColor:'#FFFFFF'
|
}
|
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: ['12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'],
|
axisLine:{
|
lineStyle:{
|
color:'#FFFFFF',
|
width:1,//这里是为了突出显示加上的
|
}
|
}
|
},
|
yAxis: {
|
type: 'value',
|
splitLine: {
|
lineStyle: {
|
color: ['#FFFFFF']
|
}
|
},
|
nameTextStyle: {
|
color: ['#FFFFFF']
|
},
|
axisLine:{
|
lineStyle:{
|
color:'#FFFFFF',
|
width:1,
|
}
|
}
|
},
|
series: [
|
{
|
name: '人工打分',
|
type: 'line',
|
data: [2, 2, 3, 4, 3, 3, 2]
|
},
|
{
|
name: '自动评估',
|
type: 'line',
|
data: [2, 2, 2, 3, 4, 4, 3]
|
}
|
]
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
myChart.setOption(option);
|
|
|
</script>
|
</body>
|
</html>
|
