1 Star 0 Fork 3

11_Man/国投生物PHM系统

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
part_1_STFT.html 16.09 KB
一键复制 编辑 原始数据 按行查看 历史
XinZhou 提交于 2021-06-15 12:56 . daily update
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <title>ECharts</title> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link href="./css/bootstrap.min.css" rel="stylesheet">
<!-- <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script> -->
<link rel="stylesheet" href="./css/style3.css">
<link rel="stylesheet" href="./css/font.css">
<link rel="stylesheet" href="./css/formSelects-v4.css" />
<title> 时频图(STFT)</title>
<style>
html,body{
display: flex;
display: -webkit-flex;
height: 1000px;
justify-content: center;
align-items: center;
background-image: url("../images/fac.jpg");
}
.flex-container {
display: flex;
/* justify-content: space-around; */
flex-direction: row;
flex-wrap: wrap;
width: 1470px;
height: 100%;
background-color: rgb(222, 223, 224);
}
.flex-container .flex-item {
width: 65%;
height: 650px;
margin: 10px;
/* flex-grow:2; */
border-radius: 2%;
background-color:rgb(248, 248, 252);
}
.flex-container .flex-item1 {
width: 32%;
height: 650px;
margin: 5px;
border-radius: 5%;
flex-wrap: wrap;
background-color:rgb(222, 223, 224);
}
.flex-container .flex-item1 .it1{
width: 100%;
height: 315px;
margin: 10px;
border-radius: 2%;
background-color:rgb(248, 248, 252);
}
.flex-container .flex-item1 .it1 .title span{
font-size: 20px;
font-weight: 800;
}
.flex-container .flex-item1 .it2 {
width: 100%;
height: 270px;
margin: 10px;
/* flex-grow:2; */
border-radius: 5%;
background-color:rgb(248, 248, 252);
}
/* .flex-container .flex-item2 {
width: 480px;
height: 30%;
margin: 10px;
flex-grow:2;
border-radius: 2%;
background-color:rgb(248, 248, 252);
}
.flex-container .flex-item2 .title span{
font-size: 20px;
font-weight: 800;
} */
.flex-container .flex-item3{
width: 1200px;
height: 30%;
margin: 10px;
/* flex-grow:2; */
border-radius: 2%;
background-color:rgb(248, 248, 252);
}
.flex-container .flex-item3 .title span{
font-size: 20px;
font-weight: 800;
padding: 20px;
}
.flex-container .flex-item3 .btn{
/* display: inline-block; */
margin: 10px;
margin-top: 15px;
}
</style>
<!-- 引入 echarts.js -->
<script src="./js/echarts.min.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script>
MathJax = {
tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
</head>
<body>
<div class="flex-container">
<div id="main2" class="flex-item"></div>
<div class="flex-item1">
<div class="it1">
<div class="title"><span>选择设备</span></div>
<ddiv style=" display: inline-block; width: 280px; margin: 15px; vertical-align: top;">
<div class="layui-form">
<!-- <select style="width:400px;"></select> -->
<select name="city" xm-select="select1" xm-select-max="1" xm-select-direction="down">
<option value="">请选择需要绘制谱图的设备</option>
</select>
</div>
</ddiv>
<button type="button" class="btn btn-primary" onclick= "myFunction()">谱图绘制</button>
<div class="card" style="width: 22rem;margin-bottom: 30px;margin-left: 60px;background-color: #e3e3e9;">
<div class="card-body">
<h5 class="card-title"> <span class="name">数据信息</span></h5>
<span style="float: left; height: 34px; width: 50px; line-height: 34px;">$数据长度:$</span>
<input id="tag1" style="width:calc(90% - 50px);resize:none; height: 34px; float: right" maxlength="10" value = 1024>
<span style="float: left; height: 34px; width: 50px; line-height: 34px;">$采样频率:$</span>
<input id="tag2" style="width:calc(90% - 50px);resize:none; height: 34px; float: right" maxlength="10" value = 1024>
<span style="float: left; height: 34px; width: 50px; line-height: 34px;">$时长:$</span>
<input id="tag3" style="width:calc(90% - 50px);resize:none; height: 34px; float: right" maxlength="10" value = 1>
</div>
</div>
</div>
<div class="it2">
<ddiv style=" display: inline-block; width: 280px; margin: 15px; vertical-align: top;"></ddiv>
<div class="card" style="width: 24rem; margin-left: 40px;background-color: #dde2e2e8;">
<div class="card-body">
<h5 class="card-title"> <span class="name">时频图参数设置</span></h5>
<span style="float: left; height: 38px; width: 110px; line-height: 34px;">窗函数类型:</span>
<div class="dropdown">
<button class="btn btn-outline-dark dropdown-toggle" style="width:calc(80% - 60px); resize:none; height: 32px; float: right ; margin:5px" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
窗函数类型选择
</button>
<ul class="dropdown-menu dropdown-menu" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item active" href="#">Hanning汉宁窗</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">矩形窗</a></li>
<li><a class="dropdown-item" href="#">三角窗</a></li>
<li><a class="dropdown-item" href="#">Hamming海明窗</a></li>
<li><a class="dropdown-item" href="#">Blackman布莱克曼窗</a></li>
<li><a class="dropdown-item" href="#">Kaiser凯泽窗</a></li>
</ul>
</div>
<span style="float: left; height: 38px; width: 110px; line-height: 34px;">窗长设置:</span>
<input id="tag4" style="width:calc(80% - 50px);resize:none; height: 34px; float: right;margin:2px" maxlength="10" value = 1024>
<span style="float: left; height: 38px; width: 110px; line-height: 34px;">帧移:</span>
<input id="tag5" style="width:calc(80% - 50px);resize:none; height: 34px; float: right; margin:2px" maxlength="10" value = 256>
</div>
</div>
</div>
</div>
<div id="app" class="flex-item3">
<div class="title"><span>操作日志</span></div>
<div class="table_position">
<table class="table table-hover table-striped">
<thead>
<tr>
<th scope="col">序号</th>
<th scope="col">设备地点</th>
<th scope="col">监测设备</th>
<th scope="col">测点名称</th>
<th scope="col">操作人员</th>
<th scope="col">操作日期</th>
<th scope="col">设备状况</th>
</tr>
</thead>
<tbody>
<tr v-for="l in dinary">
<th scope="row">{{l.idx}} </th>
<td>{{l.pst}} </td>
<td>{{l.eqt}}</td>
<td>{{l.nam}}</td>
<td>{{l.peo}}</td>
<td>{{l.dat}}</td>
<td>{{l.con}}</td>
</tr>
</tbody>
</table>
</div>
<div>
<button type="button" class="btn btn-primary" @click="checking">更新日志</button>
<button type="button" class="btn btn-danger" @click="clear">清除日志</button>
</div>
</div>
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="./js/bootstrap.bundle.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
machine:[{position:"防爆(蒸馏)",equi:"机封水泵",name:"电机自由端1H",people:"张三",date:"2020-10-10",condition:""},
{position:"防爆(蒸馏)",equi:"机封水泵",name:"电机负荷端2H",people:"张三",date:"2020-10-11",condition:""},
{position:"防爆(蒸馏)",equi:"机封水泵",name:"泵负荷端3V",people:"张三",date:"2020-10-12",condition:""},
{position:"防爆(蒸馏)",equi:"机封水泵",name:"泵负荷端3V",people:"张三",date:"2020-10-13",condition:""},
{position:"防爆(蒸馏)",equi:"二精塔循环泵",name:"电机自由端1H",people:"张三",date:"2020-12-14",condition:""},
{position:"防爆(蒸馏)",equi:"二精塔循环泵",name:"电机负荷端2H",people:"张三",date:"2021-2-15",condition:""},
{position:"防爆(蒸馏)",equi:"二精塔循环泵",name:"泵负荷端3V",people:"张三",date:"2021-3-10",condition:""},
{position:"防爆(蒸馏)",equi:"二精塔循环泵",name:"泵负荷端3V",people:"张三",date:"2021-4-10",condition:""},],
dinary:[{idx:1,pst:"防爆(蒸馏)",eqt:"机封水泵",nam:"电机自由端1H",peo:"张三",dat:"2020-10-10",con:""}]
},
methods:{
update_dinary:function(item){
// item,err,val
var L = this.dinary.length+1;
// console.log(L);
this.dinary.push({idx:L,pst:item.position,eqt:item.equi,nam:item.name,R:item.RUL,peo:item.people,dat:item.date,con:item.condition});
// this.dinary.push({idx:5,pst:"防爆(蒸馏)",eqt:"机封水泵",pot:"驱动端",err:"均方根值", val:5.27});
},
checking:function(){
this.machine.forEach(element => {
// console.log(element);
this.update_dinary(element);
});
},
clear:function(){
this.dinary.splice(0,this.dinary.length);
}
}
})
</script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script src="../js/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/formSelects-v4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var formSelects = layui.formSelects;
formSelects.data('select1', 'local', {
arr: [
{
"name": "蒸馏(防爆)",
"value": 1,
"children": [
{"name": "机封水泵", "value": 12, "children": []},
{"name": "二精塔循环泵", "value": 17, "children": []},
{"name": "粗塔循环泵", "value": 18, "children": []},
]
},
{
"name": "饲料",
"value": 2,
"children": [
{"name": "风送(风机)", "value": 51, "children": []},
]
},
{
"name": "空压冷冻站",
"value": 3,
"children": [
{"name": "工艺空气压缩机", "value": 13, "children": []},
{"name": "仪表空气压缩机", "value": 14, "children": []},
]
},
],
linkage: true //开启联动模式
});
</script>
<!-- 绘制时频图 -->
<script >
var chartDom = document.getElementById('main2');
var myChart = echarts.init(chartDom);
var option;
// var data1=[[0,0,1],[1,1,100],[8,5,20]];
var data=[];
for(i=0;i<1024;i++){
data[i]=[];
for(j=0;j<5;j++){
data[i]=[i,j,Math.random() * 300];
}
}
var data_1=[];
for(i=0;i<1024;i++){data_1[i]=i;}
var data_2=[];
for(i=0;i<512;i++){data_2[i]=i;}
console.log(data);
// console.log(data1);
option = {
grid: {
left: '3%',
right: '4%',
bottom: '5%',
},
visualMap: {
show: true,
dimension: 2,
min: 0,
max: 300,
inRange: {
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
}
},
toolbox: {//保存按钮
feature: {
saveAsImage: {},
right:'right',
padding:20,
}
},
title: [{
left: 'left',
padding:20,
text: '时频图',
textStyle: {
color: '#333333',
fontWeight: 'bold',
fontSize: 22
}
}],
tooltip: {
},
xAxis: [
{
data:data_1,
type:'value',
splitArea: {
show: true
}
},
],
yAxis: [
{
data:data_2,
type:'value',
splitArea: {
show: true
}
},
],
series:[{
name: 'Punch Card',
type:'heatmap',
data: data,
emphasis: {
itemStyle: {
borderColor: '#333',
borderWidth: 1,
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
progressive: 1000,
animation: false
},
]
};
function myFunction(){
for(i=0;i<1024;i++){
data[i]=[];
for(j=0;j<512;j++){
data[i][j]=(Math.random() * 300);
}
}
myChart.setOption({
series:[{
data:data,
},
]
});
}
option && myChart.setOption(option);
</script>
</body>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/ljhupahu/guotou.git
git@gitee.com:ljhupahu/guotou.git
ljhupahu
guotou
国投生物PHM系统
master

搜索帮助

0d507c66 1850385 C8b1a773 1850385