master

分支 (1)

管理

管理

master

guotou
/
part_2_SVDD_Analyse.html

<!doctype html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>SVDD模型指标</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>
        .flex-container {
            display: -webkit-flex;
            width: 1900px;
            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: 60%;
            height: 600px;
            margin: 15px;
            border-radius: 3%;
        }
        .flex-container .flex-item2 {
            background-color: rgb(222, 223, 224);
            width: 35%;
            height: 600px;
            margin: 10px;


        }
        .flex-container .flex-item2 .it1{
            background-color: rgb(248, 248, 252);
            width: 97%;
            height: 290px;
            margin: 10px;
            border-radius: 3%;

        }
        .flex-container .flex-item2 .it2{
            background-color: rgb(248, 248, 252);
            width: 97%;
            height: 290px;
            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 {
            border: 10px;
            padding: 10px;
            background-color: rgb(248, 248, 252);
            width: 80%;
            height: 400px;
            margin: 20px;
            flex-grow:2;
            /* border-radius: 5%; 边界圆弧过渡 */
        }


        </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 "><span style="font-size: 25px;">选择设备</span></div>
                            <div style=" display: inline-block; width: 280px; margin: 30px; 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: 15px;" type="button" class="btn btn-primary" onclick= "myFunction()"> SVDD分析</button>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div class="card" style="width: 28rem; margin-left: 100px; margin-top: 10px; background-color: #e3e3e9; text-align: left;">
                                <div class="card-body">
                                    <h5 class="card-title"> <span class="name" >SVDD参数选择</span></h5>
                                    <span style="float: left; height: 34px; width: 50px; line-height: 34px;font-size: 14px;">$惩罚参数C：$</span>
                                    <input id="tag1" style="width:calc(90% - 50px);resize:none; height: 34px; float: right" maxlength="10" value = 3.2199>
                                    <span style="float: left; height: 34px; width: 50px; line-height: 34px;font-size: 14px;">$Sigma：$</span>
                                    <input id="tag2" style="width:calc(90% - 50px);resize:none; height: 34px; float: right" maxlength="10" value = 0.6838>

                                </div>
                            </div>

                        </div>

                    </div>
                    <div class="it2" id="main1"></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">SVDD诊断结果</th>
                                        <th scope="col">操作人员</th>
                                        <th scope="col">操作日期</th>

                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="l in dinary" style="font-size: 17px;">
                                        <th scope="row">{{l.idx}} </th>
                                        <td>{{l.pst}} </td>
                                        <td>{{l.eqt}}</td>
                                        <td>{{l.nam}}</td>
                                        <td>{{l.SVDD}}</td>
                                        <td>{{l.peo}}</td>
                                        <td>{{l.dat}}</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",SVDD:"正常",people:"张三",date:"2020-10-10"},
                        {position:"防爆（蒸馏）",equi:"机封水泵",name:"电机负荷端2H",SVDD:"异常",people:"张三",date:"2020-10-11"},
                        {position:"防爆（蒸馏）",equi:"机封水泵",name:"泵负荷端3V",SVDD:"异常",people:"张三",date:"2020-10-12"},
                        {position:"防爆（蒸馏）",equi:"机封水泵",name:"泵负荷端3V",SVDD:"正常",people:"张三",date:"2020-10-13"},
                        {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"电机自由端1H",SVDD:"异常",people:"张三",date:"2020-12-14"},
                        {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"电机负荷端2H",SVDD:"异常",people:"张三",date:"2021-2-15"},
                        {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"泵负荷端3V",SVDD:"正常",people:"张三",date:"2021-3-10"},
                        {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"泵负荷端3V",SVDD:"正常",people:"张三",date:"2021-4-10"},],
                    dinary:[{idx:1,pst:"防爆（蒸馏）",eqt:"机封水泵",nam:"电机自由端1H",SVDD:"异常",peo:"张三",dat:"2020-10-10"}]
                },
                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,SVDD:item.SVDD,peo:item.people,dat:item.date});
                        // 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>


        <!-- SVDD指标 -->
        <script type="text/javascript">

            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;

            var xLabel=[];
            var data1=[];
            for (i=0;i<1000;i++){
                xLabel[i]=i;
                data1[i]=(Math.random() * 10);
            }
            for(i=300;i<1000;i++){
                data1[i]=data1[i]+30;
            }
            var data_R=10;


            option = {
                // Make gradient line here
                visualMap: {
                    top: 50,
                    right: 10,
                    pieces: [{
                        gt: 0,
                        lte: data_R,
                        color: '#93CE07'
                    }, {
                        gt: data_R,
                        color: '#FD0100'
                    }],
                    outOfRange: {
                        color: '#FD0100'
                    }
                },

                grid: {
                    left: '5%',
                    right: '15%',
                    bottom: '10%',
                    containLabel: true
                },
                toolbox: {
                    right: 10,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        restore: {},
                        saveAsImage: {}//保存按钮
                    }
                },
                dataZoom: [{//实现缩放
                    startValue: '2000-06-01'
                }, {
                    type: 'inside'
                }],


                title: [{
                    textStyle: {
                        color: '#333333',
                        fontWeight: 'bold',
                        fontSize: 22
                    },
                    left:"left",
                    padding:20,
                    text: 'SVVD分析图'
                }],
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    data: xLabel,
                    gridIndex: 0
                },
                yAxis:
                    {
                    gridIndex: 0
                },
                series: {
                    name: 'SVDD值',
                    type: 'line',

                    showSymbol: false,
                    data: data1,
                    markLine: {
                        silent: true,
                        lineStyle: {
                            color: '#333'
                        },
                        data: [{
                            yAxis: data_R,
                        }]
                    }
                }
            };

        option && myChart.setOption(option);

        </script>


        <!-- 按钮功能 -->
        <script>
            function myFunction(){
                var xLabel=[];
                var data1=[];
                var data_R=(Math.random())*25;
                for (i=0;i<1000;i++){
                    xLabel[i]=i;
                    data1[i]=(Math.random() * 10);
                }
                for(i=300;i<1000;i++){
                    data1[i]=data1[i]+30;
                }

                //温度变化值
                var hot_data=[];
                for(i=0;i<7;i++){
                    hot_data[i]=(Math.random() * 10);
                }

                myChart.setOption({
                    visualMap: {
                        top: 50,
                        right: 10,
                        pieces: [{
                            gt: 0,
                            lte: data_R,
                            color: '#93CE07'
                        }, {
                            gt: data_R,
                            color: '#FD0100'
                        }],
                        outOfRange: {
                            color: '#FD0100'
                        }
                    },
                    series:{
                        data:data1,
                        markLine: {
                            silent: true,
                            lineStyle: {
                                color: '#333'
                            },
                            data: [{
                                yAxis: data_R,
                            }]
                        }
                    }
                })

                //温度变化趋势图的变化
                myChart1.setOption({
                    series:{
                        data:hot_data,
                    }
                })

                // 获取SVDD输入参数
                var tag1=$("#tag1").val();
                var tag2=$("#tag2").val();


            }
        </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 src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
        <script type="text/javascript">

        var chartDom = document.getElementById('main1');
        var myChart1 = echarts.init(chartDom);
        var option1;


        option1 = {
            title: {
                textStyle: {
                        color: '#333333',
                        fontWeight: 'bold',
                        fontSize: 22
                    },
                text: '温度变化趋势',
                left:"left",
                padding:10,
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['温度'],
                x:"right",
                y:35,

            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            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'
            },
            series: [
                {
                    name: '温度',
                    type: 'line',
                    stack: '总量',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },

            ]
        };

        option && myChart1.setOption(option1);

        </script>


    </body>
</html>