master

分支 (1)

管理

管理

master

guotou
/
booststrape4.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" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <!-- <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="./css/style3.css">

    <title>状态监测</title>
  </head>
  <body>
    <div id="app">
      <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 class="conditon_now">
        <div class="card" style="width: 18rem;" v-for="item in machine">
          <img src="./images/motor.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title"> <span class="name">{{item.name}}</span>  </h5>
            <!-- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> -->
            <ul class="list-group list-group-flush">
              <li class="list-group-item"> <span class="key">均方根值: </span> <span :class='[item.RMS>5? "not_good":"value"]'>{{item.RMS}}</span>  </li>
              <li class="list-group-item"> <span class="key">峭度值:</span>  <span :class='[item.kurtosis>5? "not_good":"value"]'>{{item.kurtosis}}</span>  </li>
              <li class="list-group-item"> <span class="key">状态评估:</span>  <span :class='[item.condition=="中"? "not_good":"value"]'>{{item.condition}}</span>  </li>
              <li class="list-group-item"> <span class="key">当前温度</span>  <span :class='[item.tmp>100? "not_good":"value"]'>{{item.tmp}}</span>  </li>
            </ul>
            <a href="#" class="btn btn-primary">详细信息</a>
          </div>
        </div>
      </div>


    </div>


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

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <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:{
          standard:{RMS:5,kurtosis:5},
          machine:[{name:"1.电机自由端1H",RMS:3.14,kurtosis:5.75,tmp:50,condition:"良"},
                   {name:"1.电机负荷端2H",RMS:1.48,kurtosis:2.33,tmp:66,condition:"优"},
                   {name:"1.风机轴承箱输入3H",RMS:7.48,kurtosis:6.33,tmp:38,condition:"中"},
                   {name:"1.风机轴承箱输入3V",RMS:3.48,kurtosis:4.33,tmp:72,condition:"良"},
                   {name:"1.风机轴承箱输出4H",RMS:3.14,kurtosis:5.75,tmp:43,condition:"良"},
                   {name:"1.风机轴承箱输出4V",RMS:1.48,kurtosis:2.33,tmp:80,condition:"优"},
                   {name:"2.电机自由端1H",RMS:3.14,kurtosis:5.75,tmp:50,condition:"良"},
                   {name:"2.电机负荷端2H",RMS:1.48,kurtosis:2.33,tmp:66,condition:"优"},
                   {name:"2.风机轴承箱输入3H",RMS:7.48,kurtosis:6.33,tmp:38,condition:"中"},
                   {name:"2.风机轴承箱输入3V",RMS:3.48,kurtosis:4.33,tmp:72,condition:"良"},
                   {name:"2.风机轴承箱输出4H",RMS:3.14,kurtosis:5.75,tmp:43,condition:"良"},
                   {name:"2.风机轴承箱输出4V",RMS:1.48,kurtosis:2.33,tmp:80,condition:"优"},
                   {name:"3.电机自由端1H",RMS:3.14,kurtosis:5.75,tmp:50,condition:"良"},
                   {name:"3.电机负荷端2H",RMS:1.48,kurtosis:2.33,tmp:66,condition:"优"},
                   {name:"3.风机轴承箱输入3H",RMS:7.48,kurtosis:6.33,tmp:38,condition:"中"},
                   {name:"3.风机轴承箱输入3V",RMS:3.48,kurtosis:4.33,tmp:72,condition:"良"},
                   {name:"3.风机轴承箱输出4H",RMS:3.14,kurtosis:5.75,tmp:43,condition:"良"},
                   {name:"3.风机轴承箱输出4V",RMS:1.48,kurtosis:2.33,tmp:80,condition:"优"},
                   {name:"4.电机自由端1H",RMS:3.14,kurtosis:5.75,tmp:50,condition:"良"},
                   {name:"4.电机负荷端2H",RMS:1.48,kurtosis:2.33,tmp:66,condition:"优"},
                   {name:"4.风机轴承箱输入3H",RMS:7.48,kurtosis:6.33,tmp:38,condition:"中"},
                   {name:"4.风机轴承箱输入3V",RMS:3.48,kurtosis:4.33,tmp:72,condition:"良"},
                   {name:"4.风机轴承箱输出4H",RMS:3.14,kurtosis:5.75,tmp:43,condition:"良"},
                   {name:"4.风机轴承箱输出4V",RMS:1.48,kurtosis:2.33,tmp:80,condition:"优"},
                   {name:"5.电机自由端1H",RMS:3.14,kurtosis:5.75,tmp:50,condition:"良"},
                   {name:"5.电机负荷端2H",RMS:1.48,kurtosis:2.33,tmp:66,condition:"优"},
                   {name:"5.风机轴承箱输入3H",RMS:7.48,kurtosis:6.33,tmp:38,condition:"中"},
                   {name:"5.风机轴承箱输入3V",RMS:3.48,kurtosis:4.33,tmp:72,condition:"良"},
                   {name:"5.风机轴承箱输出4H",RMS:3.14,kurtosis:5.75,tmp:43,condition:"良"},
                   {name:"5.风机轴承箱输出4V",RMS:1.48,kurtosis:2.33,tmp:80,condition:"优"},],
          dinary:[{idx:1,pst:"防爆（蒸馏）",eqt:"机封水泵",pot:"驱动端",err:"峭度值", val:6.33}]
        },
        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.name,eqt:item.name,pot:"驱动端",err:err, val:val});
            // this.dinary.push({idx:5,pst:"防爆（蒸馏）",eqt:"机封水泵",pot:"驱动端",err:"均方根值", val:5.27});
          },
          checking:function(){
            this.machine.forEach(element => {
              // console.log(element);
              if(element.RMS>this.standard.RMS){
                // console.log(element.RMS);
                this.update_dinary(element,"均方根值",element.RMS);
              }
              if(element.kurtosis>this.standard.kurtosis){
                this.update_dinary(element,"峭度值",element.kurtosis);
              }
            });
          },
          clear:function(){
            this.dinary.splice(0,this.dinary.length);
          }

        }
      })
    </script>


    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
    -->
  </body>
</html>