master

分支 (1)

管理

管理

master

guotou
/
part_2_frequency_Analyse.html

<!DOCTYPE html>
<html >
    <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>

        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!-- [if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        [endif] -->
        <style>
        .flex-container {
            display: -webkit-flex;
            justify-content: center;
            display: flex;
            width: 1920px;
            height: 1080px;
            flex-direction: row;
            flex-wrap: wrap;

            background-color: rgb(222, 223, 224);
        }

        .flex-container .flex-item1 {
            background-color: rgb(248, 248, 252);
            width: 65%;
            height: 700px;
            margin: 15px;
            border-radius: 3%;
        }
        .flex-container .flex-item2 {
            background-color: rgb(222, 223, 224);
            width: 30%;
            height: 700px;
            margin: 10px;
            border-radius: 3%;
            flex-wrap: wrap;
        }
        .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%;

        }
        .flex-container .flex-item3 {
            background-color: rgb(248, 248, 252);
            width: 800;
            height: 300px;
            margin: 10px;
            flex-grow:2;
            border-radius: 5%;

        }

        span.option{
            margin-right:20px;
            font-size:20px;
        }
        h1.type{
            font-size:30px;
        }

        div.title span{
            font-size: 30px;
            font-weight: 800;
            padding: 20px;
            text-align:"center";

        }
        .flex-container .flex-item3 .btn{
            /* display: inline-block; */
            margin: 8px;
            margin-top: 15px;
        }

        .tr{/*行元素的属性*/
        background-color:#11141B;
        border-top-color:#11141B;/*上边框的颜色；top,bottom,left,right 分别对应上下左右*/
        }

        </style>


    </head>

    <body>
        <div>


            <div class="flex-container">

                <div class ="flex-item1" id="main" ></div>
                <div class="flex-item2">
                    <div class="it1">
                        <div class="title" style="text-align: left;"><span style="font-size: 25px;">选择设备</span></div>
                        <div style=" display: inline-block; width: 280px; margin: 15px; vertical-align: top;">
                            <table width="500px" >
                                <tr>
                                    <td style="font-size: 17px;" ><select 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 class="it2" id=main1>

                    </div>
                </div>


                <div id="app" class="flex-item3">
                    <div class="title"><span style="font-size: 27px;">操作日志</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.E}}</td>
                                        <td>{{l.V}}</td>
                                        <td>{{l.peo}}</td>
                                        <td>{{l.dat}}</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>
        </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"},
                        {position:"防爆（蒸馏）",equi:"机封水泵",name:"电机负荷端2H",err_name:"均方频率",value:10.1 ,people:"张三",date:"2020-10-11"},
                        {position:"防爆（蒸馏）",equi:"机封水泵",name:"泵负荷端3V",err_name:"均方根频率",value:9.1,people:"张三",date:"2020-10-12"},
                        {position:"防爆（蒸馏）",equi:"机封水泵",name:"泵负荷端3V",err_name:"均方根频率",value:16,people:"张三",date:"2020-10-13"},
                        {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"电机自由端1H",err_name:"重心频率",value:15.1,people:"张三",date:"2020-12-14"},
                        {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"电机负荷端2H",err_name:"均方频率",value:10.1,people:"张三",date:"2021-2-15"},
                        {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"泵负荷端3V",err_name:"重心频率",value:9.1,people:"张三",date:"2021-3-10"},
                        {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"泵负荷端3V",err_name:"均方频率",value:16.1,people:"张三",date:"2021-4-10"},],
                    dinary:[{idx:1,pst:"防爆（蒸馏）",eqt:"机封水泵",nam:"电机自由端1H",E:"重心频率",V:8.1,peo:"张三",dat:"2020-10-10"}]
                },
                methods:{
                    update_dinary:function(item,val){
                        // 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});
                        // this.dinary.push({idx:5,pst:"防爆（蒸馏）",eqt:"机封水泵",name:"驱动端",E:"均方根值",V:5.27, peo:"张三",dat:"2021-4-5"});
                    },
                    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);
                            }
                        });


            //             if(getVal[getVal.length-1]<100){
            //                this.update_dinary(this.machine,ind[getVal.length-1],getVal[getVal.length-1]);
            //             }


                    },
                    clear:function(){
                        this.dinary.splice(0,this.dinary.length);
                    }
                }
            })
        </script>


       <!-- 绘制频域指标的折线图 -->
        <script >
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;

        //     var data_value=[["2000-06-05","2000-06-06","2000-06-07","2000-06-08","2000-06-09","2000-06-10","2000-06-11","2000-06-12","2000-06-13","2000-06-14","2000-06-15","2000-06-16","2000-06-17","2000-06-18","2000-06-19","2000-06-20","2000-06-21","2000-06-22","2000-06-23","2000-06-24","2000-06-25","2000-06-26","2000-06-27","2000-06-28","2000-06-29","2000-06-30","2000-07-01","2000-07-02","2000-07-03","2000-07-04","2000-07-05","2000-07-06","2000-07-07","2000-07-08","2000-07-09","2000-07-10","2000-07-11","2000-07-12","2000-07-13","2000-07-14","2000-07-15","2000-07-16","2000-07-17","2000-07-18","2000-07-19","2000-07-20","2000-07-21","2000-07-22","2000-07-23","2000-07-24"],
        // [ 120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230, 210],
        // [220, 182, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330, 310],
        // [150, 232, 201, 154, 190, 330, 410, 232, 201, 154, 190, 330, 410],
        // [320, 332, 301, 334, 390, 330, 320, 332, 301, 334, 390, 330, 320],
        // [20, 100, 200, 300, 500, 700, 1000, 100, 200, 300, 500, 700, 1000],];

            var data = [["2000-06-05",116],["2000-06-06",129],["2000-06-07",135],["2000-06-08",86],["2000-06-09",73],["2000-06-10",85],["2000-06-11",73],["2000-06-12",68],["2000-06-13",92],["2000-06-14",130],["2000-06-15",245],["2000-06-16",139],["2000-06-17",115],["2000-06-18",111],["2000-06-19",309],["2000-06-20",206],["2000-06-21",137],["2000-06-22",128],["2000-06-23",85],["2000-06-24",94],["2000-06-25",71],["2000-06-26",106],["2000-06-27",84],["2000-06-28",93],["2000-06-29",85],["2000-06-30",73],["2000-07-01",83],["2000-07-02",125],["2000-07-03",107],["2000-07-04",82],["2000-07-05",44],["2000-07-06",72],["2000-07-07",106],["2000-07-08",107],["2000-07-09",66],["2000-07-10",91],["2000-07-11",92],["2000-07-12",113],["2000-07-13",107],["2000-07-14",131],["2000-07-15",111],["2000-07-16",64],["2000-07-17",69],["2000-07-18",88],["2000-07-19",77],["2000-07-20",83],["2000-07-21",111],["2000-07-22",57],["2000-07-23",55],["2000-07-24",60]];
            var data2 = [["2000-06-05",216],["2000-06-06",229],["2000-06-07",235],["2000-06-08",186],["2000-06-09",173],["2000-06-10",285],["2000-06-11",273],["2000-06-12",268],["2000-06-13",292],["2000-06-14",230],["2000-06-15",345],["2000-06-16",239],["2000-06-17",215],["2000-06-18",211],["2000-06-19",409],["2000-06-20",306],["2000-06-21",237],["2000-06-22",228],["2000-06-23",185],["2000-06-24",194],["2000-06-25",171],["2000-06-26",206],["2000-06-27",184],["2000-06-28",193],["2000-06-29",185],["2000-06-30",173],["2000-07-01",183],["2000-07-02",225],["2000-07-03",207],["2000-07-04",182],["2000-07-05",144],["2000-07-06",172],["2000-07-07",206],["2000-07-08",207],["2000-07-09",166],["2000-07-10",191],["2000-07-11",92],["2000-07-12",213],["2000-07-13",207],["2000-07-14",231],["2000-07-15",211],["2000-07-16",164],["2000-07-17",169],["2000-07-18",188],["2000-07-19",177],["2000-07-20",183],["2000-07-21",211],["2000-07-22",157],["2000-07-23",155],["2000-07-24",160]];
            var data3 = [["2000-06-05",216],["2000-06-06",329],["2000-06-07",335],["2000-06-08",286],["2000-06-09",273],["2000-06-10",485],["2000-06-11",173],["2000-06-12",168],["2000-06-13",192],["2000-06-14",330],["2000-06-15",225],["2000-06-16",239],["2000-06-17",215],["2000-06-18",211],["2000-06-19",409],["2000-06-20",306],["2000-06-21",227],["2000-06-22",118],["2000-06-23",155],["2000-06-24",244],["2000-06-25",271],["2000-06-26",156],["2000-06-27",174],["2000-06-28",233],["2000-06-29",255],["2000-06-30",173],["2000-07-01",183],["2000-07-02",115],["2000-07-03",307],["2000-07-04",242],["2000-07-05",134],["2000-07-06",172],["2000-07-07",206],["2000-07-08",207],["2000-07-09",166],["2000-07-10",191],["2000-07-11",92],["2000-07-12",213],["2000-07-13",107],["2000-07-14",231],["2000-07-15",211],["2000-07-16",264],["2000-07-17",169],["2000-07-18",288],["2000-07-19",277],["2000-07-20",183],["2000-07-21",211],["2000-07-22",157],["2000-07-23",155],["2000-07-24",160]];


            var dateList = data.map(function (item) {
                return item[0];
            });
            var valueList = data.map(function (item) {
                return item[1];
            });

            var dateList2 = data2.map(function (item) {
                return item[0];
            });
            var valueList2 = data2.map(function (item) {
                return item[1];
            });
            var dateList3 = data3.map(function (item) {
                return item[0];
            });
            var valueList3 = data3.map(function (item) {
                return item[1];
            });

            var dataValue=["true","true","true"];

            //获取最大值
            var valueList_max=Math.max.apply(null,valueList);
            var valueList2_max=Math.max.apply(null,valueList2);
            var valueList3_max=Math.max.apply(null,valueList3);


            option = {

                // Make gradient line here

                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                toolbox: {  //保存按钮
                    feature: {
                        saveAsImage: {}
                    },
                    right:'right',
                    padding:20,
                },


                title: [{
                    left: 'left',
                    padding:25,
                    text: '频域分析图',
                    textStyle: {
                        color: '#333333',
                        fontWeight: 'bold',
                        fontSize: 22
                    }

                }],
                tooltip: {
                    trigger: 'axis'
                },

                legend: {

                    itemGap: 5,//图例每项之间的间隔
                    height: 20,
                    itemWidth: 30,//图例标记的图形宽度
                    itemHeight: 20,

                    padding: [5, 0, 0, 0],
                    textStyle: {
                        padding: [1, 0, 0, -5]
                    },

                    data: [
                    { name: "重心频率", textStyle: { color: "#18c196" ,fontSize:20}},
                    { name: "均方频率", textStyle: { color: "#7164B0"  ,fontSize:20}},
                    {name:"均方根频率", textStyle:{ color: "#887871"  ,fontSize:20}},
                    ]
                },
                xAxis: [{
                    data: dateList,
                    gridIndex: 0
                }],
                yAxis: [
                    {
                    gridIndex: 0
                    },

                ],

                series: [
                    {
                        name: '重心频率',
                        type: 'line',

                        showSymbol: false,
                        data: valueList,
                        itemStyle : {
                            normal : {
                                lineStyle:{
                                    color:'#18c196'
                                }
                            }
                        },

                    },
                    {
                        name: '均方频率',
                        type: 'line',


                        showSymbol: false,
                        data: valueList2,
                        itemStyle : {
                            normal : {
                                lineStyle:{
                                    color:'#7164B0'
                                }
                            }
                        },


                    },
                    {
                        name: '均方根频率',
                        type: 'line',
                        showSymbol: false,
                        data: valueList3,
                        itemStyle : {
                            normal : {
                                lineStyle:{
                                    color:'#887871'
                                }
                            }
                        },


                    }
                ]
            };

            function myFunction(){

                for(i=0;i<data.length;i++){
                    for(j=1;j<data[i].length;j++){
                        var m=(Math.random() * 10);
                        var n=(Math.random() * 10);
                        data[i][j]=m;
                        data2[i][j]=n;
                        data3[i][j]=n;

                    }
                }


                dateList = data.map(function (item) {//需要数据库传进值，进行改变
                    return item[0];
                });
                var valueList = data.map(function (item) {
                    return item[1];
                });

                dateList2 = data2.map(function (item) {
                    return item[0];
                });
                valueList2 = data2.map(function (item) {
                    return item[1];
                });
                dateList3 = data3.map(function (item) {
                    return item[0];
                });
                valueList3 = data3.map(function (item) {
                    return item[1];
                });
                //获取最大值
                var valueList_max=Math.max.apply(null,valueList);
                var valueList2_max=Math.max.apply(null,valueList2);
                var valueList3_max=Math.max.apply(null,valueList3);

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

                    },
                    {
                        data:valueList2,
                    },
                    {
                        data:valueList3,
                    }
                ]
                });

                myChart1.setOption({
                    series:[{
                        data:[{
                            value: valueList_max,
                            itemStyle: {
                                color: '#18c196'
                            }
                        },
                        {
                            value: valueList2_max,
                            itemStyle: {
                                color: '#7164B0'
                            }
                        },
                        {
                            value: valueList3_max,
                            itemStyle: {
                                color: '#887871'
                            }
                        }
                    ],
                    }]
                })


            }


            option && myChart.setOption(option);


        </script>
            <script>
            var chartDom = document.getElementById('main1');
            var myChart1 = echarts.init(chartDom);
            var option;

            option1 = {
                title: {
                    text: '频域指标最大值',
                    textStyle: {

                        fontWeight: 'bold',
                        fontSize: 22
                    },
                    padding:20,

                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },

                xAxis: {
                    type: 'category',
                    data: ['重心频率', '均方频率',"均方根频率"]
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [{
                            value: valueList_max,
                            itemStyle: {
                                color: '#18c196'
                            }
                        },
                        {
                            value: valueList2_max,
                            itemStyle: {
                                color: '#7164B0'
                            }
                        },
                        {
                            value: valueList3_max,
                            itemStyle: {
                                color: '#887871'
                            }
                        }
                    ],
                    type: 'bar'
                }]
            };

            option && myChart1.setOption(option1);
        </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>


    </body>
</html>