master

分支 (1)

管理

管理

master

guotou
/
part_1_STFT.html

<!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/style3.css">
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/formSelects-v4.css" />

    <title> 时频图（STFT）</title>
    <style>
    html,body{
         display: flex;
         display: -webkit-flex;
         height: 1000px;
         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: 1470px;
             height: 100%;
             background-color: rgb(222, 223, 224);
        }
        .flex-container .flex-item {
             width: 65%;
             height: 650px;
             margin: 10px;
             /* flex-grow:2; */
             border-radius: 2%;
             background-color:rgb(248, 248, 252);
        }
        .flex-container .flex-item1 {
             width: 32%;
             height: 650px;
             margin: 5px;
             border-radius: 5%;
             flex-wrap: wrap;
             background-color:rgb(222, 223, 224);
        }
        .flex-container .flex-item1 .it1{
             width: 100%;
             height: 315px;
             margin: 10px;
              border-radius: 2%;
             background-color:rgb(248, 248, 252);
        }
        .flex-container .flex-item1 .it1 .title span{
             font-size: 20px;
             font-weight: 800;
        }
        .flex-container .flex-item1 .it2 {
             width: 100%;
             height: 270px;
             margin: 10px;
             /* flex-grow:2; */
             border-radius: 5%;
             background-color:rgb(248, 248, 252);
        }
        /* .flex-container .flex-item2 {
            width: 480px;
             height: 30%;
             margin: 10px;
             flex-grow:2;
             border-radius: 2%;
             background-color:rgb(248, 248, 252);
        }
        .flex-container .flex-item2 .title span{
             font-size: 20px;
             font-weight: 800;
        } */
        .flex-container .flex-item3{
             width: 1200px;
             height: 30%;
             margin: 10px;
             /* flex-grow:2; */
             border-radius: 2%;
             background-color:rgb(248, 248, 252);
        }
        .flex-container .flex-item3 .title span{
             font-size: 20px;
             font-weight: 800;
             padding: 20px;
        }
        .flex-container .flex-item3 .btn{
             /* display: inline-block; */
             margin: 10px;
             margin-top: 15px;
        }

    </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="main2" class="flex-item"></div>
        <div class="flex-item1">
            <div class="it1">
              <div class="title"><span>选择设备</span></div>
              <ddiv style=" display: inline-block; width: 280px; margin: 15px; vertical-align: top;">
                <div class="layui-form">
                    <!-- <select style="width:400px;"></select> -->
                    <select name="city" xm-select="select1" xm-select-max="1" xm-select-direction="down">
                        <option value="">请选择需要绘制谱图的设备</option>
                    </select>
                </div>
              </ddiv>
              <button  type="button" class="btn btn-primary" onclick= "myFunction()">谱图绘制</button>
              <div class="card" style="width: 22rem;margin-bottom: 30px;margin-left: 60px;background-color: #e3e3e9;">
                <div class="card-body">
                    <h5 class="card-title"> <span class="name">数据信息</span></h5>
                    <span style="float: left; height: 34px; width: 50px; line-height: 34px;">$数据长度：$</span>
                    <input id="tag1" style="width:calc(90% - 50px);resize:none; height: 34px; float: right" maxlength="10" value = 1024>
                    <span style="float: left; height: 34px; width: 50px; line-height: 34px;">$采样频率：$</span>
                    <input id="tag2" style="width:calc(90% - 50px);resize:none; height: 34px; float: right" maxlength="10" value = 1024>
                    <span style="float: left; height: 34px; width: 50px; line-height: 34px;">$时长：$</span>
                    <input id="tag3" style="width:calc(90% - 50px);resize:none; height: 34px; float: right" maxlength="10" value = 1>
                </div>
              </div>
            </div>
            <div class="it2">

               <ddiv style=" display: inline-block; width: 280px; margin: 15px; vertical-align: top;"></ddiv>
               <div class="card" style="width: 24rem; margin-left: 40px;background-color: #dde2e2e8;">
                <div class="card-body">
                    <h5 class="card-title"> <span class="name">时频图参数设置</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="#">Hanning汉宁窗</a></li>
                      <li><hr class="dropdown-divider"></li>
                      <li><a class="dropdown-item" href="#">矩形窗</a></li>
                      <li><a class="dropdown-item" href="#">三角窗</a></li>
                      <li><a class="dropdown-item" href="#">Hamming海明窗</a></li>
                      <li><a class="dropdown-item" href="#">Blackman布莱克曼窗</a></li>
                      <li><a class="dropdown-item" href="#">Kaiser凯泽窗</a></li>
                    </ul>
                  </div>
                <span style="float: left; height: 38px; width: 110px; line-height: 34px;">窗长设置：</span>
                <input id="tag4" style="width:calc(80% - 50px);resize:none; height: 34px; float: right;margin:2px" maxlength="10" value = 1024>
                <span style="float: left; height: 38px; width: 110px; line-height: 34px;">帧移：</span>
                <input id="tag5" style="width:calc(80% - 50px);resize:none; height: 34px; float: right; margin:2px" maxlength="10" value = 256>
                </div>
            </div>
            </div>
        </div>

        <div id="app" class="flex-item3">
            <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>
                            </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.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>
    <!-- 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",people:"张三",date:"2020-10-10",condition:"良"},
                    {position:"防爆（蒸馏）",equi:"机封水泵",name:"电机负荷端2H",people:"张三",date:"2020-10-11",condition:"优"},
                    {position:"防爆（蒸馏）",equi:"机封水泵",name:"泵负荷端3V",people:"张三",date:"2020-10-12",condition:"中"},
                    {position:"防爆（蒸馏）",equi:"机封水泵",name:"泵负荷端3V",people:"张三",date:"2020-10-13",condition:"良"},
                    {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"电机自由端1H",people:"张三",date:"2020-12-14",condition:"良"},
                    {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"电机负荷端2H",people:"张三",date:"2021-2-15",condition:"优"},
                    {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"泵负荷端3V",people:"张三",date:"2021-3-10",condition:"中"},
                    {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"泵负荷端3V",people:"张三",date:"2021-4-10",condition:"良"},],
                dinary:[{idx:1,pst:"防爆（蒸馏）",eqt:"机封水泵",nam:"电机自由端1H",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.RUL,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 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 >
        var chartDom = document.getElementById('main2');
        var myChart = echarts.init(chartDom);
        var option;

        // var data1=[[0,0,1],[1,1,100],[8,5,20]];
        var data=[];
        for(i=0;i<1024;i++){
            data[i]=[];
            for(j=0;j<5;j++){
                data[i]=[i,j,Math.random() * 300];
            }
        }

        var data_1=[];
        for(i=0;i<1024;i++){data_1[i]=i;}
        var data_2=[];
        for(i=0;i<512;i++){data_2[i]=i;}
        console.log(data);
        // console.log(data1);

        option = {

            grid: {
                left: '3%',
                right: '4%',
                bottom: '5%',
            },

            visualMap: {
               show: true,
               dimension: 2,
               min: 0,
               max: 300,
               inRange: {
               color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
               }
            },

            toolbox: {//保存按钮
                feature: {
                    saveAsImage: {},
                    right:'right',
                    padding:20,
                }
            },


            title: [{
                left: 'left',
                padding:20,
                text: '时频图',
                textStyle: {
                    color: '#333333',
                    fontWeight: 'bold',
                    fontSize: 22
                }

            }],
            tooltip: {
            },


            xAxis: [
                {
                data:data_1,
                type:'value',
                splitArea: {
                    show: true
                }
                },
            ],
            yAxis: [
                {
                data:data_2,
                type:'value',
                splitArea: {
                    show: true
                }
                },

            ],
            series:[{
                name: 'Punch Card',
                type:'heatmap',
                data: data,
                emphasis: {
                itemStyle: {
                    borderColor: '#333',
                    borderWidth: 1,
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
                },
                progressive: 1000,
                animation: false
            },
            ]

        };

        function myFunction(){


            for(i=0;i<1024;i++){
                data[i]=[];
                for(j=0;j<512;j++){
                    data[i][j]=(Math.random() * 300);
                }

            }

          myChart.setOption({
            series:[{
                data:data,

             },
            ]
          });
        }

        option && myChart.setOption(option);

    </script>
</body>
</html>