代码拉取完成，页面将自动刷新
同步操作将从 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: row;
flex-wrap: wrap;
width: 950px;
margin-top: 10%;
height: 110%;
background-color: rgb(255, 255, 255);
}
.flex-container_2 {
display: flex;
/* justify-content: space-around; */
flex-direction: column;
flex-wrap: wrap;
width: 460px;
margin-top: 10%;
height: 110%;
background-color: rgb(255, 255, 255);
}
.flex-container_2 .flex-item {
width: 450px;
height: 30%;
/* 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: 450px;
height: 45%;
margin: 10px;
/* flex-grow:2; */
border-radius: 5%;
background-color:rgb(247, 245, 252);
}
.flex-container .flex-item_6 {
width: 450px;
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: 550px;
height: 47%;
margin-bottom: 20px;
margin-left: 10px;
border-radius: 5%;
flex-grow:0.8;
background-color:rgb(247, 245, 252);
}
.flex-container .flex-item2 .title span{
font-size: 20px;
font-weight: 800;
}
.flex-container_2 .flex-item3 {
width: 450px;
height: 35%;
margin: 10px;
/* flex-grow:2; */
border-radius: 5%;
background-color:rgb(247, 245, 252);
}
.flex-container_2 .flex-item3 .title span{
font-size: 20px;
font-weight: 800;
padding: 20px;
}
.flex-container_2 .flex-item3 .btn{
/* display: inline-block; */
margin: 8px;
margin-top: 15px;
}
.flex-container_2 .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="main3" class="flex-item_6"></div>
<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>
<div class='flex-container_2'>
<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()">CNN诊断</button>
<div class="card" style="width: 24rem; margin-left: 35px; background-color: #d4f1f1;">
<div class="card-body">
<h5 class="card-title"> <span class="name">CNN参数设置</span></h5>
<span style="float: left; height: 34px; width: 115px; line-height: 34px;">数据截取长度：</span>
<input id="tag1" style="width:calc(80% - 50px);resize:none; height: 34px; float: right" maxlength="10" value = 100000>
<span style="float: left; height: 34px; width: 115px; line-height: 34px;">样本数设置</span>
<input id="tag2" style="width:calc(80% - 50px);resize:none; height: 34px; float: right" maxlength="10" value = 100>
<span style="float: left; height: 34px; width: 115px; 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 class="flex-item5">
<div class="card" style="width: 24rem; margin-left: 35px; margin-top: 10px; background-color: #bee0f0;">
<div class="card-body">
<h5 class="card-title"> <span class="name">CNN重训练设置</span></h5>
<span style="float: left; height: 40px; width: 115px; line-height: 34px;">优化算法选择：</span>
<div class="dropdown">
<button class="btn btn-outline-dark dropdown-toggle" style="width:calc(70% - 35px); 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="#">Adam算法</a></li>
<li><a class="dropdown-item" href="#">SGD算法</a></li>
<li><a class="dropdown-item" href="#">Adadelta算法</a></li>
</ul>
</div>
<span style="float: left; height: 40px; width: 110px; line-height: 34px;">迭代次数：</span>
<input id="tag2" style="width:calc(70% - 30px);resize:none; height: 34px; float: right;margin:2px" maxlength="10" value = 300>
<span style="float: left; height: 40px; width: 120px; line-height: 34px;">每种故障样本数:</span>
<input id="tag3" style="width:calc(70% - 30px);resize:none; height: 34px; float: right; margin:2px" maxlength="10" value = 300>
<button class="btn btn-primary" style="width:30%; resize:none; height: 35px; margin-top:7px; margin-left:0" type="button" onclick= "mytraning()">
开始训练
</button>
</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: '设备故障类型CNN诊断概率',
//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:10,
interval:0
},
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: "rgba(67, 148, 80)" // 0% 处的颜色
}, {
offset: 1,
color: "rgba(124, 209, 116)" // 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 = {
tooltip: {
trigger: 'axis'
},
title:{
left:'35%',
top:'5%',
text:'CNN训练损失图'
},
xAxis: [{
type: 'category',
data: [],
axisLine: {
lineStyle: {
color: "#999"
}
}
}],
yAxis: [{
show:true,
type: 'value',
splitNumber: 4,
splitLine: {
lineStyle: {
type: 'dashed',
color: '#DDD'
}
},
axisLine: {
show: false,
lineStyle: {
color: "#333"
},
},
nameTextStyle: {
color: "#999"
},
splitArea: {
show: false
}
}],
series: [{
name: 'loss',
type: 'line',
data: [],
lineStyle: {
normal: {
width: 3,
color: {
type: 'linear',
colorStops: [{
offset: 0,
color: '#A9F387' // 0% 处的颜色
}, {
offset: 1,
color: '#48D8BF' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
},
itemStyle: {
normal: {
color: '#fff',
borderWidth: 10,
/*shadowColor: 'rgba(72,216,191, 0.3)',
shadowBlur: 100,*/
borderColor: "#A9F387"
}
},
smooth: true
}]
};
option_2 && myChart2.setOption(option_2);
</script>
</script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script>
var chartDom = document.getElementById('main3');
var myChart3 = echarts.init(chartDom);
var option_3;
option_3 = {
title:{
text: "CNN网络模型结构分解图",
top: "top",
left: "center"
},
tooltip: {},
legend: [{
formatter: function (name) {
return echarts.format.truncateText(name, 40, '11px Microsoft Yahei', '…');
},
tooltip: {
show: true
},
selectedMode: 'false',
bottom: 20,
data: ['卷积层Cov','池化层Pol','全连接层Des','激活层Act','丢弃层Drp','分类层Softmax']
}],
toolbox: {
show : true,
feature : {
restore : {show: true},
saveAsImage : {show: true}
}
},
animationDuration: 1000,
animationEasingUpdate: 'quinticInOut',
series: [{
name: 'CNN网络',
type: 'graph',
layout: 'force',
force: {
repulsion: 60,
gravity:0.03
},
data: [{
"name": "CNN网络",
// "x": 0,
// y: 0,
"symbol":'circle',
"symbolSize": 30,
"draggable": "true"
}, {
"name": "卷积层Cov",
"symbolSize": 25,
"symbol":'rect',
"category": "卷积层Cov",
"draggable": "true"
}, {
"name": "卷积层_1@5×1,32",
"symbolSize": 15,
"symbol":'rect',
"category": "卷积层Cov",
"draggable": "true"
}, {
"name": "卷积层_2@2×1,64",
"symbolSize": 15,
"symbol":'rect',
"category": "卷积层Cov",
"draggable": "true"
}, {
"name": "卷积层_3@2×1,64",
"symbolSize": 15,
"symbol":'rect',
"category": "卷积层Cov",
"draggable": "true"
}, {
"name": "池化层Pol",
"symbolSize": 25,
"symbol":'triangle',
"category": "池化层Pol",
"draggable": "true"
}, {
"name": "Max池化层_1@2×1",
"symbolSize": 15,
"symbol":'triangle',
"category": "池化层Pol",
"draggable": "true"
}, {
"name": "Max池化层_2@2×1",
"symbolSize": 15,
"symbol":'triangle',
"category": "池化层Pol",
"draggable": "true"
}, {
"name": "Max池化层_3@2×1",
"symbolSize": 15,
"symbol":'triangle',
"category": "池化层Pol",
"draggable": "true"
}, {
"name": "全连接层Des",
"symbolSize": 25,
"symbol":'diamond',
"category": "全连接层Des",
"draggable": "true"
}, {
"name": "全连接层_1@100",
"symbolSize": 15,
"symbol":'diamond',
"category": "全连接层Des",
"draggable": "true"
},{
"name": "全连接层_2@类别数",
"symbolSize": 15,
"symbol":'diamond',
"category": "全连接层Des",
"draggable": "true"
}, {
"name": "激活层Act",
"symbol":'pin',
"symbolSize": 25,
"category": "激活层Act",
"draggable": "true"
}, {
"name": "激活函数Relu_1",
"symbolSize": 15,
"symbol":'pin',
"category": "激活层Act",
"draggable": "true"
},{
"name": "激活函数Relu_2",
"symbolSize": 15,
"symbol":'pin',
"category": "激活层Act",
"draggable": "true"
},{
"name": "激活函数Relu_3",
"symbolSize": 15,
"symbol":'pin',
"category": "激活层Act",
"draggable": "true"
}, {
"name": "丢弃层Drp",
"symbol":'arrow',
"symbolSize": 25,
"category": "丢弃层Drp",
"draggable": "true"
}, {
"name": "丢弃层_1@50%",
"symbol":'arrow',
"symbolSize": 15,
"category": "丢弃层Drp",
"draggable": "true"
}, {
"name": "丢弃层_2@50%",
"symbol":'arrow',
"symbolSize": 15,
"category": "丢弃层Drp",
"draggable": "true"
}, {
"name": "分类层Softmax",
"value": 10,
"symbolSize": 25,
"category": "分类层Softmax",
"draggable": "true"
}, {
"name": "Class类别_1",
"symbolSize": 15,
"category": "分类层Softmax",
"draggable": "true"
}, {
"name": "Class类别_2",
"symbolSize": 15,
"category": "分类层Softmax",
"draggable": "true"
}, {
"name": "Class类别_3",
"symbolSize": 15,
"category": "分类层Softmax",
"draggable": "true"
}, {
"name": "Class类别_4",
"symbolSize": 15,
"category": "分类层Softmax",
"draggable": "true"
}, {
"name": "Class类别_5",
"symbolSize": 15,
"category": "分类层Softmax",
"draggable": "true"
}],
links: [{
"source": "CNN网络",
"target": "卷积层Cov"
}, {
"source": "卷积层Cov",
"target": "卷积层_1@5×1,32"
}, {
"source": "卷积层Cov",
"target": "卷积层_2@2×1,64"
}, {
"source": "卷积层Cov",
"target": "卷积层_3@2×1,64"
}, {
"source": "CNN网络",
"target": "池化层Pol"
}, {
"source": "池化层Pol",
"target": "Max池化层_1@2×1"
}, {
"source": "池化层Pol",
"target": "Max池化层_2@2×1"
}, {
"source": "池化层Pol",
"target": "Max池化层_3@2×1"
}, {
"source": "CNN网络",
"target": "全连接层Des"
}, {
"source": "全连接层Des",
"target": "全连接层_1@100"
}, {
"source": "全连接层Des",
"target": "全连接层_2@类别数"
}, {
"source": "CNN网络",
"target": "激活层Act"
}, {
"source": "激活层Act",
"target": "激活函数Relu_1"
}, {
"source": "激活层Act",
"target": "激活函数Relu_2"
}, {
"source": "激活层Act",
"target": "激活函数Relu_3"
}, {
"source": "CNN网络",
"target": "丢弃层Drp"
}, {
"source": "丢弃层Drp",
"target": "丢弃层_1@50%"
}, {
"source": "丢弃层Drp",
"target": "丢弃层_2@50%"
}, {
"source": "CNN网络",
"target": "分类层Softmax"
}, {
"source": "分类层Softmax",
"target": "Class类别_1"
}, {
"source": "分类层Softmax",
"target": "Class类别_2"
}, {
"source": "分类层Softmax",
"target": "Class类别_3"
}, {
"source": "分类层Softmax",
"target": "Class类别_4"
}, {
"source": "分类层Softmax",
"target": "Class类别_5"
}],
categories: [{
'name': '卷积层Cov'
}, {
'name': '池化层Pol'
}, {
'name': '全连接层Des'
}, {
'name': '激活层Act'
}, {
'name': '丢弃层Drp'
}, {
'name': '分类层Softmax'
}],
focusNodeAdjacency: true,
roam: true,
// label: {
// normal: {
// show: true,
// position: 'top',
// }
// },
lineStyle: {
normal: {
color: 'source',
curveness: 0.2,
type: "solid"
}
}
}]
};
option_3 && myChart3.setOption(option_3);
</script>
<script>
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);
document.getElementById('tag3').value = Math.random().toFixed(2)*100+'%';
}
function mytraning(){
var loss;
var times;
loss = [];
times = [];
for (let i = 1,j = Math.random().toFixed(2); i <= 300; i++) {
times.push(i);
loss.push(j);
j =j /1.02;
}
myChart2.setOption({
xAxis: {
data: times
},
series: [{
data: loss,
animationDelay: function (idx) {
return idx * 10;
}
}],
animationEasing: 'linear',
animationDelayUpdate: function (idx) {
return idx * 5;
}
});
}
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 助手
