master

分支 (1)

管理

管理

master

guotou
/
part_3_rule diagnosis.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/tablestyle.css">
    <link rel="stylesheet" href="./css/formSelects-v4.css" />

    <title> rule_diagnosis</title>
    <style>
    html,body{
        display: flex;
        height: 750px;
        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: 1350px;
            margin-top: 70px;
            height: 100%;
            background-color: rgb(255, 255, 255);
        }
        .flex-container .flex-item {
            width: 395px;
            height: 45%;
            margin: 10px;
            /* flex-grow:2; */
            border-radius: 5%;
            background-color:rgb(247, 245, 252);
        }
        .flex-container .flex-item_4 {
            width: 910px;
            height: 45%;
            margin: 10px;
            /* flex-grow:2; */
            border-radius: 5%;
            background-color:rgb(247, 245, 252);
        }
        .flex-container .flex-item1 {
            width: 500px;
            height: 45%;
            margin: 10px;
            /* flex-grow:2; */
            border-radius: 5%;
            background-color:rgb(247, 245, 252);
        }
        .flex-container .flex-item2 {
            width: 800px;
            height: 50%;
            margin: 10px;
            border-radius: 5%;
            flex-grow:2;
            background-color:rgb(247, 245, 252);
        }
        .flex-container .flex-item2 .title span{
            font-size: 20px;
            font-weight: 800;
        }
        .flex-container .flex-item3 {
            width: 424px;
            height: 50%;
            margin: 10px;
            /* flex-grow:2; */
            border-radius: 5%;
            background-color:rgb(247, 245, 252);
        }
        .flex-container .flex-item3 .title span{
            font-size: 20px;
            font-weight: 800;
            padding: 20px;
        }
        .flex-container .flex-item3 .btn{
            /* display: inline-block; */
            margin: 8px;
            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 id="main1" class="flex-item_4"></div>
        <div class="flex-item3">
            <div class="title"><span>选择设备</span></div>
            <div style=" display: inline-block; width: 280px; margin: 15px; vertical-align: top;">
                <div class="layui-form">
                    <!-- <select style="width:200px;"></select> -->
                    <select name="city" xm-select="select1" xm-select-max="1" xm-select-direction="down">
                        <option value="">请选择需要诊断的设备</option>
                    </select>
                </div>
            </div>
            <button  type="button" class="btn btn-primary" onclick= "myFunction()">规则诊断</button>
            <div class="card" style="width: 22rem; margin: 30px; background-color: #d4f1f1;">
                <div class="card-body">
                    <h5 class="card-title"> <span class="name">输入样本设置</span></h5>
                    <span style="float: left; height: 34px; width: 100px; line-height: 34px;">数据截取长度</span>
                    <input id="tag1" style="width:calc(80% - 50px);resize:none; height: 34px; float: right" maxlength="10" value = 100000>
                    <span style="float: left; height: 34px; width: 100px; line-height: 34px;">样本数设置</span>
                    <input id="tag2" style="width:calc(80% - 50px);resize:none; height: 34px; float: right" maxlength="10" value = 100>
                    <span style="float: left; height: 34px; width: 100px; line-height: 34px;">诊断精度</span>
                    <input id="tag3" style="width:calc(80% - 50px);resize:none; height: 34px; float: right" maxlength="10" value = 90% disabled>
                </div>
            </div>
        </div>
        <div id="app" class="flex-item2">
            <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>
                                <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.R}}</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",Result:"设备正常",people:"张三",date:"2020-10-10",condition:"优"},
                    {position:"防爆（蒸馏）",equi:"机封水泵",name:"电机负荷端2H",Result:"轴承内圈故障",people:"张三",date:"2020-10-11",condition:"中"},
                    {position:"防爆（蒸馏）",equi:"机封水泵",name:"泵负荷端3V",Result:"轴承内圈故障",people:"张三",date:"2020-10-12",condition:"中"},
                    {position:"防爆（蒸馏）",equi:"机封水泵",name:"泵负荷端3V",Result:"轴承滚动体故障",people:"张三",date:"2020-10-13",condition:"中"},
                    {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"电机自由端1H",Result:"设备正常",people:"张三",date:"2020-12-14",condition:"优"},
                    {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"电机负荷端2H",Result:"设备正常",people:"张三",date:"2021-2-15",condition:"优"},
                    {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"泵负荷端3V",Result:"轴承外圈故障",people:"张三",date:"2021-3-10",condition:"中"},
                    {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"泵负荷端3V",Result:"轴承外圈故障",people:"张三",date:"2021-4-10",condition:"中"},],
                dinary:[{idx:1,pst:"防爆（蒸馏）",eqt:"机封水泵",nam:"电机自由端1H",R:"设备正常",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.Result,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>
        var chartDom = document.getElementById('main1');
        var myChart1 = echarts.init(chartDom);
        var option_1;

            option_1 = {
                title: {
                text: '设备故障类型诊断累计',
                //subtext: 'Example in MetricsGraphics.js',
                left: 'left',
                padding: 15
            },
                tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
            type: 'category',
            data: ['设备正常', '轴承内圈故障', '轴承外圈故障', '轴承滚动体故障', '轴承保持架故障'],
            axisLabel: {
            fontWeight:'bold',
            fontSize:13
            },
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
            yAxis: [
                {
            axisLabel: {
            fontWeight:'bold',
            fontSize:13
            },
            type: 'value'
                 },

    ],
            series: [
                {
            type: 'bar',
            barWidth: '40%',
            data: [120, {
            value: 52,
            itemStyle: {
                color: 'rgba(66,228,139)'
            }
        }, {
            value: 79,
            itemStyle: {
                color: 'rgba(223,176,76)'
            }
        }, {
            value: 107,
            itemStyle: {
                color: 'rgba(243,98,98)'
            }
        }, {
            value: 45,
            itemStyle: {
                color: 'rgba(72,203,243)'
            }
        }]
        }
    ]
};
    </script>

    <script >
        var chartDom = document.getElementById('main2');
        var myChart = echarts.init(chartDom);
        var option_2;
        option_2 = {
            title: {
                    text: '累计所诊断故障的类型占比',
                    //subtext: 'Example in MetricsGraphics.js',
                    left: 'left',
                    padding: 15
                },
                tooltip: {
            trigger: 'axis'
            },
            legend: {
                orient: 'horizontal',
                bottom: 10,
            },
            series: [
            {
                type: 'pie',
                radius: '50%',
                data: [
                    {value: 20, name: '设备正常'},
                    {value: 13, name: '轴承内圈故障'},
                    {value: 41, name: '轴承外圈故障'},
                    {value: 25, name: '轴承滚动体故障'},
                    {value: 31, name: '轴承保持架故障'}
                ],
                label: {
                    formatter: '{d}%'
                },
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

        // // setInterval(function() {
        // //     let random = (Math.random() * 60).toFixed(2) - 0;
        // option.series[0].data[0].value = tmp;
        // option.series[1].data[0].value = tmp;
        // myChart.setOption(option, true);
        // // }, 10000);//时间

        // option && myChart.setOption(option);
    </script>

    <script>
        function myFunction(){
            var tmp_1 = (Math.random() * 60).toFixed(2) - 0;
            var tmp_2 = (Math.random() * 60).toFixed(2) - 0;
            var tmp_3 = (Math.random() * 60).toFixed(2) - 0;
            var tmp_4 = (Math.random() * 60).toFixed(2) - 0;
            var tmp_5 = (Math.random() * 60).toFixed(2) - 0;
            var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');

            option_2.series[0].data[0].value = tmp_1;
            option_2.series[0].data[1].value = tmp_2;
            option_2.series[0].data[2].value = tmp_3;
            option_2.series[0].data[3].value = tmp_4;
            option_2.series[0].data[4].value = tmp_5;
            myChart.setOption(option_2, true);

            option_1.series[0].data[0] = tmp_1;
            option_1.series[0].data[1].value = tmp_2;
            option_1.series[0].data[2].value = tmp_3;
            option_1.series[0].data[3].value = tmp_4;
            option_1.series[0].data[4].value = tmp_5;
            myChart1.setOption(option_1, true);
            // var TMP_1 = option_1.series[0].data[-1] + tmp_1;
            // var TMP_2 = option_1.series[1].data[-1] + tmp_2;
            // var TMP_3 = option_1.series[2].data[-1] + tmp_3;
            // var TMP_4 = option_1.series[3].data[-1] + tmp_4;
            // var TMP_5 = option_1.series[4].data[-1] + tmp_5;

            // var data_1 = option_1.series[0].data;
            // var data_2 = option_1.series[1].data;
            // var data_3 = option_1.series[2].data;
            // var data_4 = option_1.series[3].data;
            // var data_5 = option_1.series[4].data;


            // data_1.shift();
            // data_1.push(TMP_1);
            // data_2.shift();
            // data_2.push(TMP_2);
            // data_3.shift();
            // data_3.push(TMP_3);
            // data_4.shift();
            // data_4.push(TMP_4);
            // data_5.shift();
            // data_5.push(TMP_5);

            // option_1.xAxis[0].data.shift();
            // option_1.xAxis[0].data.push(axisData);

            myChart1.setOption(option_1, true);

            document.getElementById('tag3').value = Math.random().toFixed(2)*100+'%';
        }

        option_2 && myChart.setOption(option_2);
        option_1 && myChart1.setOption(option_1);
    </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>