代码拉取完成，页面将自动刷新
同步操作将从 XinZhou/国投生物PHM系统 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
<!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/tablestyle.css">
<link rel="stylesheet" href="./css/formSelects-v4.css" />
<title> rule_diagnosis</title>
<style>
html,body{
display: flex;
height: 750px;
justify-content: center;
align-items: center;
background-image: url("../images/fac.jpg");
}
.flex-container {
display: flex;
/* justify-content: space-around; */
flex-direction: column;
flex-wrap: wrap;
width: 1350px;
margin-top: 7%;
height: 100%;
background-color: rgb(255, 255, 255);
}
.flex-container .flex-item {
width: 445px;
height: 25%;
margin-top: 5px;
margin-bottom: 10px;
margin-left: 10px;
/* flex-grow:2; */
border-radius: 5%;
background-color:rgba(247, 245, 252);
}
.flex-container .flex-item_4 {
width: 860px;
height: 45%;
margin: 10px;
/* flex-grow:2; */
border-radius: 5%;
background-color:rgb(247, 245, 252);
}
.flex-container .flex-item1 {
width: 500px;
height: 45%;
margin-left: 50px;
/* flex-grow:2; */
border-radius: 5%;
background-color:rgb(247, 245, 252);
}
.flex-container .flex-item2 {
width: 500px;
height: 49%;
margin-bottom: 20px;
margin-left: 10px;
border-radius: 5%;
/* flex-grow:2; */
background-color:rgb(247, 245, 252);
}
.flex-container .flex-item2 .title span{
font-size: 20px;
font-weight: 800;
}
.flex-container .flex-item3 {
width: 450px;
height: 40%;
margin: 10px;
/* flex-grow:2; */
border-radius: 5%;
background-color:rgb(247, 245, 252);
}
.flex-container .flex-item3 .title span{
font-size: 20px;
font-weight: 800;
padding: 20px;
}
.flex-container .flex-item3 .btn{
/* display: inline-block; */
margin: 8px;
margin-top: 15px;
}
.flex-container .flex-item5 {
width: 450px;
height: 30%;
margin-left: 10px;
border-radius: 5%;
/* flex-grow:2; */
background-color:rgb(247, 245, 252);
}
</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="main1" class="flex-item_4"></div>
<div id="app" class="flex-item2">
<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>
<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.R}}</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 class="flex-item3">
<div class="title"><span>选择设备</span></div>
<div style=" display: inline-block; width: 300px; margin: 15px; vertical-align: top;">
<div class="layui-form">
<!-- <select style="width:200px;"></select> -->
<select name="city" xm-select="select1" xm-select-max="1" xm-select-direction="down">
<option value="">请选择需要诊断的设备</option>
</select>
</div>
</div>
<button type="button" class="btn btn-primary" onclick= "myFunction()">SVM诊断</button>
<div class="card" style="width: 24rem; margin-left: 35px; background-color: #d4f1f1;">
<div class="card-body">
<h5 class="card-title"> <span class="name">SVM参数设置</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="#">linear线性核</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Sigmoid核</a></li>
<li><a class="dropdown-item" href="#">RBF核</a></li>
</ul>
</div>
<span style="float: left; height: 38px; width: 110px; line-height: 34px;">Gamma设置：</span>
<input id="tag4" style="width:calc(80% - 50px);resize:none; height: 34px; float: right;margin:2px" maxlength="10" value = 0.5>
<span style="float: left; height: 38px; width: 110px; line-height: 34px;">惩罚因子C：</span>
<input id="tag5" style="width:calc(80% - 50px);resize:none; height: 34px; float: right; margin:2px" maxlength="10" value = 5>
</div>
</div>
</div>
<div class="flex-item5">
<div class="card" style="width: 24rem; margin-left: 35px; margin-top: 25px; background-color: #bee0f0;">
<div class="card-body">
<h5 class="card-title"> <span class="name">SVM诊断结果</span></h5>
<span style="float: left; height: 34px; width: 100px; line-height: 34px;">故障类型：</span>
<input id="tag1" style="width:calc(80% - 50px);resize:none; height: 34px; float: right" maxlength="10" value = '设备正常' disabled>
<span style="float: left; height: 34px; width: 100px; line-height: 34px;">累计诊断次数</span>
<input id="tag2" style="width:calc(80% - 50px);resize:none; height: 34px; float: right" maxlength="10" value = 100 disabled>
<span style="float: left; height: 34px; width: 100px; line-height: 34px;">诊断精度</span>
<input id="tag3" style="width:calc(80% - 50px);resize:none; height: 34px; float: right" maxlength="10" value = 90% disabled>
</div>
</div>
</div>
<div id="main2" class="flex-item"></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",Result:"设备正常",people:"张三",date:"2020-10-10",condition:"优"},
{position:"防爆（蒸馏）",equi:"机封水泵",name:"电机负荷端2H",Result:"轴承内圈故障",people:"张三",date:"2020-10-11",condition:"中"},
{position:"防爆（蒸馏）",equi:"机封水泵",name:"泵负荷端3V",Result:"轴承内圈故障",people:"张三",date:"2020-10-12",condition:"中"},
{position:"防爆（蒸馏）",equi:"机封水泵",name:"泵负荷端3V",Result:"轴承滚动体故障",people:"张三",date:"2020-10-13",condition:"中"},
{position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"电机自由端1H",Result:"设备正常",people:"张三",date:"2020-12-14",condition:"优"},
{position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"电机负荷端2H",Result:"设备正常",people:"张三",date:"2021-2-15",condition:"优"},
{position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"泵负荷端3V",Result:"轴承外圈故障",people:"张三",date:"2021-3-10",condition:"中"},
{position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"泵负荷端3V",Result:"轴承外圈故障",people:"张三",date:"2021-4-10",condition:"中"},],
dinary:[{idx:1,pst:"防爆（蒸馏）",eqt:"机封水泵",nam:"电机自由端1H",R:"设备正常",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.Result,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>
var chartDom = document.getElementById('main1');
var myChart1 = echarts.init(chartDom);
var option_1;
option_1 = {
title: {
text: '设备故障类型SVM诊断概率',
//subtext: 'Example in MetricsGraphics.js',
left: 'left',
padding: 15
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['设备正常概率', '轴承内圈故障概率', '轴承外圈故障概率', '轴承滚动体故障概率', '轴承保持架故障概率'],
axisLabel: {
fontWeight:'bold',
fontSize:13
},
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value',
axisLabel: {
fontWeight:'bold',
fontSize:13
},
max:1
}
],
series: [
{
type: 'bar',
barWidth: '40%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#4889fb" // 0% 处的颜色
}, {
offset: 1,
color: "#15b3ff" // 100% 处的颜色
}], false)
}
},
data: [0.8,0.15,0.05,0.7,0.5]
},
{
type: 'line',
symbol: 'triangle',
symbolSize: 10,
itemStyle: {
borderWidth: 0,
borderColor: '#000',
color: '#ffd300'
},
data:[0.8,0.15,0.05,0.7,0.5]
}
]
};
</script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script>
var chartDom = document.getElementById('main2');
var myChart2 = echarts.init(chartDom);
var option_2;
option_2 = {
title:{
left:'25%',
top:'5%',
text:'不同参数设置的SVM准确率'
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
fontWeight:'bold'
},
data: ['gamma:0.6\nC:1,linear', 'gamma:0.75\nC:4,linear', 'gamma:0.8\nC:1,RBF', 'gamma:0.9\nC:5,sigmoid', 'gamma:0.4\nC:3,linear']
},
tooltip: {
trigger: 'axis'
},
yAxis: {
type: 'value',
max:1
},
series: [{
data: [0.8, 0.9, 0.85, 0.75, 0.95],
type: 'line',
areaStyle: {}
}]
};
option_2 && myChart2.setOption(option_2);
</script>
<script>
var times;
times = 100;
function myFunction(){
var tmp_1 = Math.random(). toFixed(2) ;
var tmp_2 = Math.random() .toFixed(2) ;
var tmp_3 = Math.random() .toFixed(2) ;
var tmp_4 = Math.random() .toFixed(2) ;
var tmp_5 = Math.random() .toFixed(2) ;
var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');
option_1.series[0].data[0] = tmp_1;
option_1.series[0].data[1] = tmp_2;
option_1.series[0].data[2] = tmp_3;
option_1.series[0].data[3] = tmp_4;
option_1.series[0].data[4] = tmp_5;
option_1.series[1].data[0] = tmp_1;
option_1.series[1].data[1] = tmp_2;
option_1.series[1].data[2] = tmp_3;
option_1.series[1].data[3] = tmp_4;
option_1.series[1].data[4] = tmp_5;
myChart1.setOption(option_1, true);
var items = ['linear','Sigmoid','RBF'];
var item = items[Math.floor(Math.random()*items.length)];
var data0 = option_2.series[0].data;
var data1 = option_2.xAxis.data;
data0.shift();
data0.push(Math.random());
data1.shift();
data1.push('gamma:'+ Math.random().toFixed(2)+'\nC:'+Math.random().toFixed(1)*20 + ',' + item);
myChart2.setOption(option_2,true);
var diags = ['设备正常', '轴承内圈故障', '轴承外圈故障', '轴承滚动体故障', '轴承保持架故障'];
var diag = diags[Math.floor(Math.random()*diags.length)];
document.getElementById('tag1').value = diag;
document.getElementById('tag2').value = ++times;
document.getElementById('tag3').value = Math.random().toFixed(2)*100+'%';
}
option_1 && myChart1.setOption(option_1);
</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>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
