|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Document</title>
|
|
|
|
|
|
|
|
|
|
<link type="text/css" rel="stylesheet" href="./common/css/common.css">
|
|
|
|
|
<style>
|
|
|
|
|
* {
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#chartDiv {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#setting {
|
|
|
|
|
position: relative;
|
|
|
|
|
position: fixed;
|
|
|
|
|
bottom: 30px;
|
|
|
|
|
left: 10px;
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
border: 1px #ccc solid;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
width: calc(100% - 40px);
|
|
|
|
|
padding: 20px 10px;
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#setting::before {
|
|
|
|
|
content: "";
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: inherit;
|
|
|
|
|
background-color: #1890ff;
|
|
|
|
|
opacity: 0.2;
|
|
|
|
|
z-index: -1;
|
|
|
|
|
/* 确保伪元素在子元素后面 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.row {
|
|
|
|
|
height: 18px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
label {
|
|
|
|
|
height: 32px;
|
|
|
|
|
color: rgba(0, 0, 0, 0.88);
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.label-text {
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
line-height: 14px;
|
|
|
|
|
width: 58px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
text-shadow: none;
|
|
|
|
|
padding: 1px 5px;
|
|
|
|
|
background: #1890ff;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slide {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 160px;
|
|
|
|
|
height: 8px;
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
background-image: url('./common/img/sprite-skin-nice.png');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch-container {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 36px;
|
|
|
|
|
height: 18px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slider {
|
|
|
|
|
position: absolute;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
background-color: #ccc;
|
|
|
|
|
-webkit-transition: .4s;
|
|
|
|
|
transition: .4s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slider:before {
|
|
|
|
|
position: absolute;
|
|
|
|
|
content: "";
|
|
|
|
|
height: 14px;
|
|
|
|
|
width: 14px;
|
|
|
|
|
left: 2px;
|
|
|
|
|
bottom: 2px;
|
|
|
|
|
background-color: white;
|
|
|
|
|
-webkit-transition: .4s;
|
|
|
|
|
transition: .4s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch.active .slider {
|
|
|
|
|
background-color: #2196F3;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch.active .slider:before {
|
|
|
|
|
-webkit-transform: translateX(18px);
|
|
|
|
|
-ms-transform: translateX(18px);
|
|
|
|
|
transform: translateX(18px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slider.round {
|
|
|
|
|
border-radius: 34px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slider.round:before {
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
color: #3d3b4f;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.setting-content {
|
|
|
|
|
border: 1px #fff solid;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.setting-title {
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #3d3b4f;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-weight: 800;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<!-- 第一个 -->
|
|
|
|
|
<div id="realdata" class="realdata">
|
|
|
|
|
<div id="echarts-btn" class="col echarts-btn menu-top">
|
|
|
|
|
<span class="btn" title="PRPS">
|
|
|
|
|
<span id="prps" class="prps ready"></span>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<span class="btn" title="PRPD">
|
|
|
|
|
<span id="prpd" class="prpd"></span>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<span class="btn" title="开启">
|
|
|
|
|
<span id="start" class="start"></span>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<span class="btn" title="设置">
|
|
|
|
|
<span id="setting-btn" class="setting-btn"></span>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="setting">
|
|
|
|
|
<div style="width: 49%;display: inline-block;">
|
|
|
|
|
<div class="setting-title">图谱相关</div>
|
|
|
|
|
<div class="setting-content">
|
|
|
|
|
<div class="row" id="total-prpd">
|
|
|
|
|
<span class="total-prpd-text label-text" name="phaseOffset">PRPD累计</span>
|
|
|
|
|
<span class="total-prpd-slide slide" data-price="0"></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row" id="total-prpd">
|
|
|
|
|
<span class="total-prpd-text label-text" name="phaseOffset">相位偏移</span>
|
|
|
|
|
<span class="total-prpd-slide slide" data-price="0"></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row" id="total-prpd">
|
|
|
|
|
<span class="total-prpd-text label-text" name="phaseOffset">手动降噪</span>
|
|
|
|
|
<span class="total-prpd-slide slide" data-price="0"></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row" id="total-prpd">
|
|
|
|
|
<div class="total-prpd-text label-text" name="phaseOffset">频段选择</div>
|
|
|
|
|
<select id="channelFiltering" class="selectStyle">
|
|
|
|
|
<option value="0" class="selectFrequency">选择频段</option>
|
|
|
|
|
<option value="1" class="lowband">低频</option>
|
|
|
|
|
<option value="2" class="fullband">全频</option>
|
|
|
|
|
<option value="3" class="narrowband">窄频</option>
|
|
|
|
|
<option value="4" class="highband">高频</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row" id="total-prpd">
|
|
|
|
|
<div class="total-prpd-text label-text" name="phaseOffset">录播开关</div>
|
|
|
|
|
<div class="switch-container">
|
|
|
|
|
<div class="switch" id="toggleSwitch">
|
|
|
|
|
<div class="slider round"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row" id="total-prpd">
|
|
|
|
|
<div class="total-prpd-text label-text" name="phaseOffset">自适应降噪</div>
|
|
|
|
|
<div class="switch-container">
|
|
|
|
|
<div class="switch" id="toggleSwitch">
|
|
|
|
|
<div class="slider round"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row" id="total-prpd">
|
|
|
|
|
<div class="total-prpd-text label-text" name="phaseOffset">关联降噪</div>
|
|
|
|
|
<div class="switch-container">
|
|
|
|
|
<div class="switch" id="toggleSwitch">
|
|
|
|
|
<div class="slider round"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div style="width: 50%;display: inline-block;height: 100%;vertical-align:top;">
|
|
|
|
|
<div class="setting-title">趋势相关</div>
|
|
|
|
|
<div class="setting-content">
|
|
|
|
|
|
|
|
|
|
<div class="row" id="total-prpd">
|
|
|
|
|
<span class="total-prpd-text label-text" name="phaseOffset">趋势保持</span>
|
|
|
|
|
<span class="total-prpd-slide slide" data-price="0"></span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="row" id="total-prpd">
|
|
|
|
|
<span class="total-prpd-text label-text" name="phaseOffset">显示参数</span>
|
|
|
|
|
<div class="checkbox-group">
|
|
|
|
|
<label>
|
|
|
|
|
<input type="checkbox" name="fruits[]" value="apple"> 脉冲最大值
|
|
|
|
|
</label>
|
|
|
|
|
<label>
|
|
|
|
|
<input type="checkbox" name="fruits[]" value="banana"> 脉冲数量
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row" id="total-prpd">
|
|
|
|
|
<div class="total-prpd-text label-text" name="phaseOffset">趋势显示</div>
|
|
|
|
|
<div class="switch-container">
|
|
|
|
|
<div class="switch" id="toggleSwitch">
|
|
|
|
|
<div class="slider round"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="box2D6" class="loading-box-mini" style="display: none;"></div>
|
|
|
|
|
<div id="chartDiv" class="col echarts-chart charts">
|
|
|
|
|
<div id="box3D1" class="loading-box"></div>
|
|
|
|
|
<div id="box2D1" class="loading-box" style="display: none;"></div>
|
|
|
|
|
<div id="echarts-text" class="echarts-text text-bottom">
|
|
|
|
|
<span class="maxValue" name="maxValue">
|
|
|
|
|
<span class="name">脉冲最大值：</span>
|
|
|
|
|
<span id="maxValue">0</span>
|
|
|
|
|
<span class="unit">dBm</span>
|
|
|
|
|
</span>
|
|
|
|
|
<span class="avgValue" name="averageValue">
|
|
|
|
|
<span class="name">脉冲平均值：</span>
|
|
|
|
|
<span id="averageValue">0</span>
|
|
|
|
|
<span class="unit">dBm</span>
|
|
|
|
|
</span>
|
|
|
|
|
<span class="pulseNumber" name="impulseQuantity">
|
|
|
|
|
<span class="name">脉冲数量：</span>
|
|
|
|
|
<span id="impulseQuantity">0</span>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="zoom">
|
|
|
|
|
<span class="btn" title="放大">
|
|
|
|
|
<span id="scale" class="scale big ready"></span>
|
|
|
|
|
</span>
|
|
|
|
|
<span class="btn" title="缩小">
|
|
|
|
|
<span id="scale" class="scale small"></span>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="./common/js/jquery.min.js"></script>
|
|
|
|
|
<!-- <script type="text/javascript" src="./common/js/jquery-ui.min.js"></script>
|
|
|
|
|
<script type="text/javascript" src="./common/js/simpleAlert.js"></script> -->
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="./common/js/three/three.min.js"></script>
|
|
|
|
|
<script type="text/javascript" src="./common/js/three/OrbitControls.js"></script>
|
|
|
|
|
<script type="text/javascript" src="./common/js/three/Lut.js"></script>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="./common/js/echarts/echarts.js"></script>
|
|
|
|
|
<!-- 使不支持es模块的浏览器支持es -->
|
|
|
|
|
<!-- <script type="text/javascript" async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script> -->
|
|
|
|
|
<script type="module" src="./common/js/index.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
