1 Star 0 Fork 3

舍得3020/国投生物PHM系统

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
part_2_SVDD_Analyse.html 19.01 KB
一键复制 编辑 原始数据 按行查看 历史
XinZhou 提交于 2021-05-12 18:34 . 模块二更新
<!doctype html>
<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title>SVDD模型指标</title>
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="./css/font.css">
<link rel="stylesheet" href="./css/xadmin.css">
<link rel="stylesheet" href="./css/style3.css">
<link rel="stylesheet" href="./css/formSelects-v4.css" />
<link href="./css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/vue.min.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<!-- 引入 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>
<style>
.flex-container {
display: -webkit-flex;
width: 1900px;
height: 1080px;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
background-color: rgb(222, 223, 224);
}
.flex-container .flex-item1 {
background-color: rgb(248, 248, 252);
width: 60%;
height: 600px;
margin: 15px;
border-radius: 3%;
}
.flex-container .flex-item2 {
background-color: rgb(222, 223, 224);
width: 35%;
height: 600px;
margin: 10px;
}
.flex-container .flex-item2 .it1{
background-color: rgb(248, 248, 252);
width: 97%;
height: 290px;
margin: 10px;
border-radius: 3%;
}
.flex-container .flex-item2 .it2{
background-color: rgb(248, 248, 252);
width: 97%;
height: 290px;
margin: 10px;
border-radius: 3%;
}
div.title span{
font-size: 30px;
font-weight: 800;
padding: 20px;
text-align:"center";
}
span.option{
margin-right:20px;
font-size:20px;
}
.flex-container .flex-item3 {
border: 10px;
padding: 10px;
background-color: rgb(248, 248, 252);
width: 80%;
height: 400px;
margin: 20px;
flex-grow:2;
/* border-radius: 5%; 边界圆弧过渡 */
}
</style>
</head>
<body>
<div>
<div class="flex-container">
<div class ="flex-item1" id="main" ></div>
<div class="flex-item2">
<div class="it1">
<div class="it1">
<div class="title" style="text-align:left "><span style="font-size: 25px;">选择设备</span></div>
<div style=" display: inline-block; width: 280px; margin: 30px; vertical-align: top;">
<table width="500px" >
<tr>
<td style="font-size: 17px;" ><select name="city" xm-select="select1" xm-select-max="1" xm-select-direction="down">
<option value="" >请选择需要预测的设备</option>
</select>
</td>
<td>
<button style="font-size: 15px;" type="button" class="btn btn-primary" onclick= "myFunction()"> SVDD分析</button>
</td>
</tr>
</table>
</div>
<div class="card" style="width: 28rem; margin-left: 100px; margin-top: 10px; background-color: #e3e3e9; text-align: left;">
<div class="card-body">
<h5 class="card-title"> <span class="name" >SVDD参数选择</span></h5>
<span style="float: left; height: 34px; width: 50px; line-height: 34px;font-size: 14px;">$惩罚参数C:$</span>
<input id="tag1" style="width:calc(90% - 50px);resize:none; height: 34px; float: right" maxlength="10" value = 3.2199>
<span style="float: left; height: 34px; width: 50px; line-height: 34px;font-size: 14px;">$Sigma:$</span>
<input id="tag2" style="width:calc(90% - 50px);resize:none; height: 34px; float: right" maxlength="10" value = 0.6838>
</div>
</div>
</div>
</div>
<div class="it2" id="main1"></div>
</div>
<div id="app" class="flex-item3">
<div class="title"><span style="font-size: 25px;">操作日志</span></div>
<div class="table_position">
<table class="table table-hover table-striped">
<thead>
<tr style="font-size: 17px;">
<th scope="col">序号</th>
<th scope="col">设备地点</th>
<th scope="col">监测设备</th>
<th scope="col">测点名称</th>
<th scope="col">SVDD诊断结果</th>
<th scope="col">操作人员</th>
<th scope="col">操作日期</th>
</tr>
</thead>
<tbody>
<tr v-for="l in dinary" style="font-size: 17px;">
<th scope="row">{{l.idx}} </th>
<td>{{l.pst}} </td>
<td>{{l.eqt}}</td>
<td>{{l.nam}}</td>
<td>{{l.SVDD}}</td>
<td>{{l.peo}}</td>
<td>{{l.dat}}</td>
</tr>
</tbody>
</table>
</div>
<div>
<button style="font-size: 18px;" type="button" class="btn btn-primary" @click="checking">更新日志</button>
<button style="font-size: 18px;" type="button" class="btn btn-danger" @click="clear">清除日志</button>
</div>
</div>
</div>
</div>
</div>
<!-- 日志管理 -->
<script src="./js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></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",SVDD:"正常",people:"张三",date:"2020-10-10"},
{position:"防爆(蒸馏)",equi:"机封水泵",name:"电机负荷端2H",SVDD:"异常",people:"张三",date:"2020-10-11"},
{position:"防爆(蒸馏)",equi:"机封水泵",name:"泵负荷端3V",SVDD:"异常",people:"张三",date:"2020-10-12"},
{position:"防爆(蒸馏)",equi:"机封水泵",name:"泵负荷端3V",SVDD:"正常",people:"张三",date:"2020-10-13"},
{position:"防爆(蒸馏)",equi:"二精塔循环泵",name:"电机自由端1H",SVDD:"异常",people:"张三",date:"2020-12-14"},
{position:"防爆(蒸馏)",equi:"二精塔循环泵",name:"电机负荷端2H",SVDD:"异常",people:"张三",date:"2021-2-15"},
{position:"防爆(蒸馏)",equi:"二精塔循环泵",name:"泵负荷端3V",SVDD:"正常",people:"张三",date:"2021-3-10"},
{position:"防爆(蒸馏)",equi:"二精塔循环泵",name:"泵负荷端3V",SVDD:"正常",people:"张三",date:"2021-4-10"},],
dinary:[{idx:1,pst:"防爆(蒸馏)",eqt:"机封水泵",nam:"电机自由端1H",SVDD:"异常",peo:"张三",dat:"2020-10-10"}]
},
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,SVDD:item.SVDD,peo:item.people,dat:item.date});
// 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>
<!-- SVDD指标 -->
<script type="text/javascript">
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
var xLabel=[];
var data1=[];
for (i=0;i<1000;i++){
xLabel[i]=i;
data1[i]=(Math.random() * 10);
}
for(i=300;i<1000;i++){
data1[i]=data1[i]+30;
}
var data_R=10;
option = {
// Make gradient line here
visualMap: {
top: 50,
right: 10,
pieces: [{
gt: 0,
lte: data_R,
color: '#93CE07'
}, {
gt: data_R,
color: '#FD0100'
}],
outOfRange: {
color: '#FD0100'
}
},
grid: {
left: '5%',
right: '15%',
bottom: '10%',
containLabel: true
},
toolbox: {
right: 10,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}//保存按钮
}
},
dataZoom: [{//实现缩放
startValue: '2000-06-01'
}, {
type: 'inside'
}],
title: [{
textStyle: {
color: '#333333',
fontWeight: 'bold',
fontSize: 22
},
left:"left",
padding:20,
text: 'SVVD分析图'
}],
tooltip: {
trigger: 'axis'
},
xAxis: {
data: xLabel,
gridIndex: 0
},
yAxis:
{
gridIndex: 0
},
series: {
name: 'SVDD值',
type: 'line',
showSymbol: false,
data: data1,
markLine: {
silent: true,
lineStyle: {
color: '#333'
},
data: [{
yAxis: data_R,
}]
}
}
};
option && myChart.setOption(option);
</script>
<!-- 按钮功能 -->
<script>
function myFunction(){
var xLabel=[];
var data1=[];
var data_R=(Math.random())*25;
for (i=0;i<1000;i++){
xLabel[i]=i;
data1[i]=(Math.random() * 10);
}
for(i=300;i<1000;i++){
data1[i]=data1[i]+30;
}
//温度变化值
var hot_data=[];
for(i=0;i<7;i++){
hot_data[i]=(Math.random() * 10);
}
myChart.setOption({
visualMap: {
top: 50,
right: 10,
pieces: [{
gt: 0,
lte: data_R,
color: '#93CE07'
}, {
gt: data_R,
color: '#FD0100'
}],
outOfRange: {
color: '#FD0100'
}
},
series:{
data:data1,
markLine: {
silent: true,
lineStyle: {
color: '#333'
},
data: [{
yAxis: data_R,
}]
}
}
})
//温度变化趋势图的变化
myChart1.setOption({
series:{
data:hot_data,
}
})
// 获取SVDD输入参数
var tag1=$("#tag1").val();
var tag2=$("#tag2").val();
}
</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 src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script type="text/javascript">
var chartDom = document.getElementById('main1');
var myChart1 = echarts.init(chartDom);
var option1;
option1 = {
title: {
textStyle: {
color: '#333333',
fontWeight: 'bold',
fontSize: 22
},
text: '温度变化趋势',
left:"left",
padding:10,
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['温度'],
x:"right",
y:35,
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2020-1-2', '2020-1-3', '2020-1-4', '2020-1-5', '2020-1-6', '2020-1-7', '2020-1-8']
},
yAxis: {
type: 'value'
},
series: [
{
name: '温度',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
]
};
option && myChart1.setOption(option1);
</script>
</body>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/275648208/guotou.git
git@gitee.com:275648208/guotou.git
275648208
guotou
国投生物PHM系统
master

搜索帮助

0d507c66 1850385 C8b1a773 1850385