master

分支 (1)

管理

管理

master

guotou
/
booststrape1.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 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/style4.css">

    <title>状态监测</title>
  </head>
  <body>
    <div id="app">
      <div class="left_part">
        <div class="basic_information">
          <div class="title"><span>基本状态信息</span></div>
          <div class="info_box">
            <div class="machine">
              <img src="./images/motor.jpg" class="img-thumbnail" alt="...">
            </div>
            <div class="info">
              <div class="basic">
                <div class="lig">
                  <table class="table table-success table-striped">
                    <tbody>
                      <tr>
                        <td>设备名称:</td>
                        <td class="namehere">{{allInfomation.machine}} </td>
                      </tr>
                      <tr>
                        <td>设备位置:</td>
                        <td class="namehere">{{allInfomation.equipment}} </td>
                      </tr>
                      <tr>
                        <td>测点位置:</td>
                        <td class="namehere">{{allInfomation.name}} </td>
                      </tr>
                      <tr>
                        <td>传感器类型:</td>
                        <td class="namehere">{{allInfomation.kind}} </td>
                      </tr>
                    </tbody>

                  </table>
                </div>

              </div>

              <div class="all_val">

                <div class="card border-primary mb-3" style="min-width: 50%;max-height: 100px;">
                  <div class="card-header">均方根值</div>
                  <div class="card-body text-primary">
                    <span :class='[allInfomation.RMS>therehold[0]? "negative":"positive"]'>{{allInfomation.RMS}} </span>
                  </div>
                </div>

                <div class="card border-primary mb-3" style="min-width: 50%;max-height: 100px;">
                  <div class="card-header">峭度值</div>
                  <div class="card-body text-primary">
                    <span :class='[allInfomation.kurtosis>therehold[1]? "negative":"positive"]'>{{allInfomation.kurtosis}} </span>
                  </div>
                </div>

                <div class="card border-primary mb-3" style="min-width: 50%;max-height: 100px;">
                  <div class="card-header">一阶频域指标</div>
                  <div class="card-body text-primary">
                    <span :class='[allInfomation.F1>therehold[4]? "negative":"positive"]'>{{allInfomation.F1}} </span>
                  </div>
                </div>

                <div class="card border-primary mb-3" style="min-width: 50%;max-height: 100px;">
                  <div class="card-header">二阶频域指标</div>
                  <div class="card-body text-primary">
                    <span :class='[allInfomation.F2>therehold[5]? "negative":"positive"]'>{{allInfomation.F2}} </span>
                  </div>
                </div>
                <div class="card border-primary mb-3" style="min-width: 50%;max-height: 100px;">
                  <div class="card-header">三阶频域指标</div>
                  <div class="card-body text-primary">
                    <span :class='[allInfomation.F3>therehold[6]? "negative":"positive"]'>{{allInfomation.F3}} </span>
                  </div>
                </div>
                <div class="card border-primary mb-3" style="min-width: 50%;max-height: 100px;">
                  <div class="card-header">SVDD</div>
                  <div class="card-body text-primary">
                    <span :class='[allInfomation.SVDD>therehold[7]? "negative":"positive"]'>{{allInfomation.SVDD}} </span>
                  </div>
                </div>
                <div class="card border-primary mb-3" style="min-width: 50%;max-height: 100px;">
                  <div class="card-header">当前温度（摄氏度）</div>
                  <div class="card-body text-primary">
                    <span :class='[allInfomation.tmp>therehold[2]? "negative":"positive"]'>{{allInfomation.tmp}} </span>
                  </div>
                </div>
                <div class="card border-primary mb-3" style="min-width: 50%;max-height: 100px;">
                  <div class="card-header">剩余寿命预测（小时）</div>
                  <div class="card-body text-primary">
                    <span :class='[therehold[9] >allInfomation.resLife? "negative":"positive"]'>{{allInfomation.resLife}} </span>
                  </div>
                </div>
                <div class="card border-primary mb-3" style="min-width: 50%;max-height: 100px;">
                  <div class="card-header">运行状态评估</div>
                  <div class="card-body text-primary">
                    <span :class='[allInfomation.condition==therehold[3]? "positive":"negative"]'>{{allInfomation.condition}} </span>
                  </div>
                </div>
                <div class="card border-primary mb-3" style="min-width: 50%;max-height: 100px;">
                  <div class="card-header">故障类型诊断</div>
                  <div class="card-body text-primary">
                    <span :class='[allInfomation.dia==therehold[8]? "positive":"negative"]'>{{allInfomation.dia}} </span>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>


        <div class="head_dinary">
          <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>
                </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.pot}}</td>
                  <td>{{l.err}}</td>
                  <td>{{l.val}}</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="right_part">
        <div class="title"><span>信号分析与诊断</span></div>
        <div class="goto">
          <div>
            <div class="btn-group">
              <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                基本谱图展示
              </button>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">时域波形图</a></li>
                <li><a class="dropdown-item" href="#">频域波形图</a></li>
                <li><a class="dropdown-item" href="#">轴心轨迹图</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">时频域分析图</a></li>
              </ul>
            </div>
          </div>
        </div>

        <div class="goto">
          <div>
            <div class="btn-group">
              <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                实时状态监测
              </button>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">时域指标</a></li>
                <li><a class="dropdown-item" href="#">频域指标</a></li>
                <!-- <li><a class="dropdown-item" href="#">Something else here</a></li> -->
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">SVDD监测指标</a></li>
              </ul>
            </div>
          </div>

        </div>
        <div class="goto">
          <div>
            <div class="btn-group">
              <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                故障诊断分析
              </button>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">支持向量算法</a></li>
                <li><a class="dropdown-item" href="#">神经网络算法</a></li>
                <!-- <li><a class="dropdown-item" href="#">Something else here</a></li> -->
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">诊断规则算法</a></li>
              </ul>
            </div>
          </div>

        </div>
        <div class="goto">
          <div>
            <div class="btn-group">
              <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                剩余寿命预测
              </button>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">统计回归分析</a></li>
                <li><a class="dropdown-item" href="#">网络预测寿命</a></li>
                <!-- <li><a class="dropdown-item" href="#">Something else here</a></li> -->
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
              </ul>
            </div>
          </div>

        </div>


      </div>


    </div>


    <!-- Optional JavaScript; choose one of the two! -->

    <!-- 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 request = {
        QueryString : function(val) {

          var uri = window.location.search;

          var re = new RegExp("" +val+ "=([^&?]*)", "ig");

          return ((uri.match(re))?(uri.match(re)[0].substr(val.length+1)):null);

        }
      }
      let rt = request.QueryString("machine");
      var get = {};
      get.machine = decodeURIComponent(request.QueryString("machine"));
      get.equipment = decodeURIComponent(request.QueryString("equipment"));
      get.name = decodeURIComponent(request.QueryString("name"));
      get.kind = decodeURIComponent(request.QueryString("kind"));
      get.RMS = decodeURIComponent(request.QueryString("RMS"));
      get.kurtosis = decodeURIComponent(request.QueryString("kurtosis"));
      get.tmp = decodeURIComponent(request.QueryString("tmp"));
      get.condition = decodeURIComponent(request.QueryString("condition"));
      get.F1 = decodeURIComponent(request.QueryString("F1"));
      get.F2 = decodeURIComponent(request.QueryString("F2"));
      get.F3 = decodeURIComponent(request.QueryString("F3"));
      get.SVDD = decodeURIComponent(request.QueryString("SVDD"));
      get.dia = decodeURIComponent(request.QueryString("dia"));
      get.resLife = decodeURIComponent(request.QueryString("resLife"));
      // console.log(get);


      var app = new Vue({
        el:"#app",
        data:{
          standard:{RMS:5,kurtosis:5},
          // allInfomation1:{machine:"水泵电机", equipment:"蒸馏（防爆）-机封水泵", name:"1.电机自由端1H",
          //                 kind:"RH505",RMS:3.14,kurtosis:5.75,tmp:50,condition:"优",
          //               F1:3.55,F2:1.67,F3:5.68,SVDD:3.11,dia:"正常",resLife:50},
          allInfomation:get,
          therehold:[5,5,80,"优",5,5,5,5,"正常",100],
          dinary:[]
        },
        methods:{
          update_dinary:function(item,err,val){
            // item,err,val
            var L = this.dinary.length+1;
            // console.log(L);
            this.dinary.push({idx:L,pst:item.equipment,eqt:item.machine,pot:item.name,err:err, val:val});
            // this.dinary.push({idx:5,pst:"防爆（蒸馏）",eqt:"机封水泵",pot:"驱动端",err:"均方根值", val:5.27});
          },
          checking:function(){
            var getVal = Object.values(this.allInfomation);
            getVal.splice(0,4);
            // getVal.splice(getVal,4);
            // console.log(getVal);
            var ind = Object.keys(this.allInfomation).splice(4,10);
            for(var i=0;i<getVal.length-1;i++){
              if(!isNaN(getVal[i])){
                if(getVal[i]>this.therehold[i]){

                  // console.log(ind);
                  this.update_dinary(this.allInfomation,ind[i],getVal[i]);
                }
              }
            }
            if(getVal[getVal.length-1]<100){
              this.update_dinary(this.allInfomation,ind[getVal.length-1],getVal[getVal.length-1]);
            }
          },
          clear:function(){
            this.dinary.splice(0,this.dinary.length);
          }

        }
      })
    </script>

  </body>
</html>