代码拉取完成，页面将自动刷新
同步操作将从 XinZhou/国投生物PHM系统 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
<!DOCTYPE html>
<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title>时域分析</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>
body{
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(222, 223, 224);
}
.flex-container {
display: -webkit-flex;
display: flex;
width: 1920px;
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: 65%;
height: 700px;
margin: 10px;
border-radius: 3%;
}
.flex-container .flex-item2 {
background-color: rgb(222, 223, 224);
width: 32%;
height: 700px;
margin: 10px;
border-radius: 3%;
}
.flex-container .flex-item2 .it1{
background-color: rgb(248, 248, 252);
width: 97%;
height: 250px;
margin: 10px;
border-radius: 3%;
}
.flex-container .flex-item2 .it2{
background-color: rgb(248, 248, 252);
width: 97%;
height: 430px;
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 {
background-color: rgb(248, 248, 252);
width: 85%;
height: 300px;
margin: 10px;
flex-grow:2;
/* border-radius: 3%; 边界圆弧过渡 */
}
</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; font-size: 25px;"><span >选择设备</span></div>
<div style=" display: inline-block; width: 280px; margin: 15px; vertical-align: top;">
<table width="500px" >
<tr>
<td style="font-size: 18px;" ><select id="device" name="city" xm-select="select1" xm-select-max="1" xm-select-direction="down">
<option value="" >请选择需要预测的设备</option>
</select>
</td>
<td>
<button style="font-size: 17px;" type="button" class="btn btn-primary" onclick= "myFunction()"> 时域分析</button>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="it2" id="main2"></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">时域指标名称</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" style="font-size: 15px;">
<th scope="row">{{l.idx}} </th>
<td>{{l.pst}} </td>
<td>{{l.eqt}}</td>
<td>{{l.nam}}</td>
<td>{{l.E}}</td>
<td>{{l.V}}</td>
<td>{{l.peo}}</td>
<td>{{l.dat}}</td>
<td>{{l.con}}</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",err_name:"方差",value:8.1 ,people:"张三",date:"2020-10-10",condition:"良"},
{position:"防爆（蒸馏）",equi:"机封水泵",name:"电机负荷端2H",err_name:"标准差",value:10.1 ,people:"张三",date:"2020-10-11",condition:"优"},
{position:"防爆（蒸馏）",equi:"机封水泵",name:"泵负荷端3V",err_name:"方差",value:9.1,people:"张三",date:"2020-10-12",condition:"中"},
{position:"防爆（蒸馏）",equi:"机封水泵",name:"泵负荷端3V",err_name:"峭度",value:16,people:"张三",date:"2020-10-13",condition:"良"},
{position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"电机自由端1H",err_name:"均方根",value:15.1,people:"张三",date:"2020-12-14",condition:"良"},
{position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"电机负荷端2H",err_name:"方差",value:10.1,people:"张三",date:"2021-2-15",condition:"优"},
{position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"泵负荷端3V",err_name:"均方根",value:9.1,people:"张三",date:"2021-3-10",condition:"中"},
{position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"泵负荷端3V",err_name:"峭度",value:16.1,people:"张三",date:"2021-4-10",condition:"良"},],
dinary:[{idx:1,pst:"防爆（蒸馏）",eqt:"机封水泵",nam:"电机自由端1H",E:"方差",V:8.1,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,E:item.err_name,V:item.value,peo:item.people,dat:item.date,con:item.condition});
// this.dinary.push({idx:5,pst:"防爆（蒸馏）",eqt:"机封水泵",pot:"驱动端",err:"均方根值", val:5.27});
},
checking:function(){
var getVal = this.machine;
// document.write(getVal);
// getVal.splice(0,4);
// var ind =Object.keys(this.machine).splice(4,10);
getVal.forEach(element => {
if(element.value>7){
// console.log(element.value);
this.update_dinary(element);
}
});
},
clear:function(){
this.dinary.splice(0,this.dinary.length);
}
}
})
</script>
<!-- 时域指标 -->
<script type="text/javascript">
var data_value=[['value','2020-1-2', '2020-1-3', '2020-1-4', '2020-1-5', '2020-1-6', '2020-1-7', '2020-1-8'],
['方差', 120, 132, 101, 134, 90, 230, 210],
['标准差',220, 182, 191, 234, 290, 330, 310],
['峭度',150, 232, 201, 154, 190, 330, 410],
['均方根',320, 332, 301, 334, 390, 330, 320],
['脉冲因子',20, 100, 200, 300, 500, 700, 1000],];
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: '时域分析图',
left:'left',
padding:20,
textStyle: {
fontWeight: 'bold',
fontSize: 22
},
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['方差', '标准差', '峭度', '均方根', '脉冲因子'],
selected:{
'方差':true,
'标准差':true,
'峭度':true,
'均方根':true,
'脉冲因子':true
},
itemGap: 5,//图例每项之间的间隔
height: 40,
itemWidth: 30,//图例标记的图形宽度
itemHeight: 20,
padding: [5, 0, 0, 0],
textStyle: {
padding: [1, 0, 0, -5]
},
data: [
{ name: "方差", textStyle: {fontSize:20}},
{ name: "标准差", textStyle: { fontSize:20} },
{ name: "峭度", textStyle: { fontSize:20} },
{ name: "均方根", textStyle: { fontSize:20} },
{ name: "脉冲因子", textStyle: { fontSize:20} },
]
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
},
right:'right',
padding:15,
},
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'
},
dataset:{
source:data_value
},
series: [
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
],
};
myChart.on('updateAxisPointer', function (event) {
var xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
var dimension = xAxisInfo.value+1;
myChart2.setOption({
series: {
id: 'bar',
encode: {
y: dimension,
x: dimension
}
}
});
}
});
option && myChart.setOption(option);
</script>
<!-- 联动的饼图 -->
<script>
var myChart2 = echarts.init(document.getElementById('main2'));
var option2;
option2={
title: {
text: '数据联动',
padding:20,
textStyle: {
fontWeight: 'bold',
fontSize: 22
},
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
dataset:{
source:data_value
},
xAxis: {
type: 'category',
},
yAxis: {
type: 'value',
},
series: [
{
type: 'bar',
id: 'bar',
// emphasis: {focus: 'data'},
label: {
formatter: '{b}: {@2020-1-2} ({d}%)'
},
encode: {
// itemName: 'value',
itemName: 'value',
y: '2020-1-2',
x: 'value'
}
}
]
};
myChart2.setOption(option2);
</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>
function myFunction(){
for(i=1;i<6;i++){
for(j=1;j<7;j++){
data_value[i][j]=Math.random() * 300;
}
}
myChart.setOption({
dataset:{
source:data_value
},
series: [
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
],
});
// var device_data=$("select[name='city']").val();
// alert(device_data);
}
document.getElementById('device').onclick = function(){
//获取当前多选选中的值
var selectArr = formSelects.getValue();
document.getElementById('device').innerHTML = JSON.stringify(selectArr, null, 2);
}
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手