master

分支 (1)

管理

管理

master

guotou
/
part_4_LSTM.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/tablestyle.css">
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/formSelects-v4.css" />

    <title>LSTM-pre</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;
            height: 750px;
            background-color: rgb(222, 223, 224);
        }
        .flex-container .flex-item {
            /* border: 1px solid rgb(133, 133, 130); */
            width: 395px;
            height: 350px;
            margin: 5px;
            /* flex-grow:2; */
            /* border-radius: 5%; */
            background-color:rgba(248, 248, 252);
        }
        .flex-container .flex-item .btn{
            height: 50px;
            width: 131.5px;
            border-radius: 0;
            border: 1px solid rgb(133, 133, 130);
            background-color:#04680480;
            color: black;
            margin: 0;
            padding: 0;
        }
        .flex-container .flex-item2 {
            width: 800px;
            height: 50%;
            margin: 5px;
            /* border-radius: 5%; */
            flex-grow:2;
            background-color:rgb(248, 248, 252);
        }
        .flex-container .flex-item .topmargin {
            /* padding: 10px; */
            padding-top: 10px;
            padding-left: 10px;
            font-size: 20px;
            font-weight: 800;
        }
        .flex-container .flex-item1 {
            width: 500px;
            height: 350px;
            /* height: 240px;
            width: 390px; */
            margin: 5px;
            flex-grow:2;
            /* border-radius: 5%; */
            background-color:rgb(248, 248, 252);
        }

        .flex-container .flex-item2 .topmargin {
            font-size: 20px;
            font-weight: 800;
            /* background-color:#04680480;
            color: white; */
        }
        .flex-container .flex-item3 {
            /* width: 424px; */
            width: 395px;
            height: 50%;
            margin: 5px;
            /* flex-grow:2; */
            /* border-radius: 5%; */
            background-color:rgb(248, 248, 252);
        }
        .flex-container .flex-item3 .topmargin {
            padding-left: 15px;
            padding-top: 10px;
            font-size: 20px;
            font-weight: 800;
        }
        .flex-container .flex-item3 .btn1 {
            padding-left: 120px;
            background-color:rgba(56, 128, 72, 0);
            padding-top: 5px;
        }

    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .content{
        background-color:#0c61043a;
        border: 1px solid rgb(133, 133, 130);
        height: 243px;
        width: 394px;
        margin: 0;
        padding: 0;
        /* margin-left: 20px; */
        /* border-radius: 5%; */
        /* float: left; */
    }
    </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 class="flex-item">
            <p class="topmargin">寿命标签</p>
            <button  type="button" class="btn btn-primary" id="data_one">线性</button><button  type="button" class="btn btn-primary" id="data_two">分段式</button><button  type="button" class="btn btn-primary" id="data_three">自适应</button>
            <div class="content" id="new_line"></div>
        </div>
        <div id="qushi" class="flex-item1"></div>
        <div class="flex-item">
            <p class="topmargin">预测结果评估</span></p>
            <div class="card" style="width: 22rem; margin: 20px; background-color: #0c61043a;">
                <div class="card-body">
                    <h5 class="card-title"> <span class="name">评估指标</span></h5>
                    <span style="float: left; height: 34px; width: 50px; line-height: 34px;">$Score：$</span>
                    <input id="tag1" style="width:calc(90% - 50px);resize:none; height: 34px; float: right" maxlength="10" value = 0>
                    <span style="float: left; height: 34px; width: 50px; line-height: 34px;">$RMSE：$</span>
                    <input id="tag2" style="width:calc(90% - 50px);resize:none; height: 34px; float: right" maxlength="10" value = 0>
                    <span style="float: left; height: 34px; width: 50px; line-height: 34px;">$R^2：$</span>
                    <input id="tag3" style="width:calc(90% - 50px);resize:none; height: 34px; float: right" maxlength="10" value = 0>
                </div>
            </div>
            <div class="card" style="width: 23rem; margin-left: 15px; background-color: #0c61043a;">
                <div class="card-body">
                    <i class="iconfont">&#xe6bb;</i>
                    <label for="shichang">该设备预计剩余服役时长为（小时）：</label>
                    <input style="float: right; height: 30px; width: 12rem; background-color: transparent; border: 0; outline: none; font-weight:bold" type="text" value=3000 id = "shichang">
                </div>
            </div>
        </div>
        <div class="flex-item3">
            <p class="topmargin">选择设备</span></p>
            <div style=" display: inline-block; width: 350px; margin-left: 15px; vertical-align: top;">
                <div class="layui-form">
                    <!-- <select style="width:200px;"></select> -->
                    <select name="city" xm-select="select11" xm-select-max="1" xm-select-direction="auto">
                        <option value="">请选择需要预测的设备</option>
                    </select>
                </div>
            </div>
            <p class="topmargin">模型参数设置</span></p>
            <div style="width: 395px; height: 180px; background-color: #0c61043a;  margin-top: 5px;">
                <label style="margin-left: 55px; margin-bottom: 15px; margin-top: 15px;" for="canshu1">参数1：</label>
                <input type="text" value="" id="canshu1"  name="参数1"><br>
                <label style="margin-left: 55px; margin-bottom: 15px;" for="canshu2">参数2：</label>
                <input type="text" value="" id="canshu2"  name="参数2"><br>
                <label style="margin-left: 55px; margin-bottom: 15px;" for="canshu3">参数3：</label>
                <input type="text" value="" id="canshu3"  name="参数3"><br>
                <label style="margin-left: 55px; margin-bottom: 15px;" for="canshu4">参数4：</label>
                <input type="text" value="" id="canshu4"  name="参数4"><br>
            </div>
            <div class="btn1">
                <button  type="button" class="btn btn-primary" id ="chuancan" style="background-color: #e7a618; border: 1px solid #e7a618;">确定</button>
                <button  type="button" class="btn btn-primary" id ="yuce" style="margin-left: 5px; background-color: #e74818; border: 1px solid #e74818;">开始预测</button>
            </div>
        </div>
        <div id="app" class="flex-item2">
            <p class="topmargin">操作日志</span></p>
                <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" style="background-color: #386910; border: 1px solid #386910;">清除日志</button>
                </div>
        </div>
    </div>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <script type="text/javascript" src="./js/myjs.js"></script>
    <script type="text/javascript">
        draw(myColumns)
    </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('select11', 'local', {
            arr: [
                {
                    "name": "蒸馏（防爆）",
                    "value": 1,
                    "children": [
                        {"name": "机封水泵", "value": 15, "children": []},
                        {"name": "二精塔循环泵", "value": 16, "children": []},
                        {"name": "粗塔循环泵", "value": 20, "children": []},
                    ]
                },
                {
                    "name": "饲料",
                    "value": 2,
                    "children": [
                        {"name": "风送（风机）", "value": 21, "children": []},
                    ]
                },
                {
                    "name": "空压冷冻站",
                    "value": 3,
                    "children": [
                        {"name": "工艺空气压缩机", "value": 23, "children": []},
                        {"name": "仪表空气压缩机", "value": 24, "children": []},
                    ]
                },
            ],
            linkage: true   //开启联动模式
        });
    </script>

    <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",RUL:3.14,people:"张三",date:"2020-10-10",condition:"良"},
                    {position:"防爆（蒸馏）",equi:"机封水泵",name:"电机负荷端2H",RUL:1.48,people:"张三",date:"2020-10-11",condition:"优"},
                    {position:"防爆（蒸馏）",equi:"机封水泵",name:"泵负荷端3V",RUL:7.48,people:"张三",date:"2020-10-12",condition:"中"},
                    {position:"防爆（蒸馏）",equi:"机封水泵",name:"泵负荷端3V",RUL:3.48,people:"张三",date:"2020-10-13",condition:"良"},
                    {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"电机自由端1H",RUL:3.48,people:"张三",date:"2020-12-14",condition:"良"},
                    {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"电机负荷端2H",RUL:3.48,people:"张三",date:"2021-2-15",condition:"优"},
                    {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"泵负荷端3V",RUL:3.48,people:"张三",date:"2021-3-10",condition:"中"},
                    {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"泵负荷端3V",RUL:3.48,people:"张三",date:"2021-4-10",condition:"良"},],
                dinary:[{idx:1,pst:"防爆（蒸馏）",eqt:"机封水泵",nam:"电机自由端1H",R:3.14,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 type="module">
        var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
        var chartDom = document.getElementById('qushi');
        var myChart1 = echarts.init(chartDom);
        var option;

        myChart1.showLoading();
        $.get(ROOT_PATH + '/data/asset/data/confidence-band.json', function (data) {
            myChart1.hideLoading();

            var base = -data.reduce(function (min, val) {
                return Math.floor(Math.min(min, val.l));
            }, Infinity);
            myChart1.setOption(option = {
                title: {
                    text: '剩余寿命趋势预测',
                    //subtext: 'Example in MetricsGraphics.js',
                    left: 'left',
                    padding: 15
                },
                // 图例
                legend: {
                    orient: 'horizontal',          // 布局方式，默认为水平布局，可选为：
                                    // 'horizontal' ¦ 'vertical'
                    x: 'right',                // 水平安放位置，默认为全图居中，可选为：
                                            // 'center' ¦ 'left' ¦ 'right'
                                    // ¦ {number}（x坐标，单位px）
                    y: 'top',              // 垂直安放位置，默认为全图顶端，可选为：
                                    // 'top' ¦ 'bottom' ¦ 'center'
                                    // ¦ {number}（y坐标，单位px）
                    backgroundColor: 'rgba(0,0,0,0)',
                    borderColor: '#ccc',            // 图例边框颜色
                    borderWidth: 0,                // 图例边框线宽，单位px，默认为0（无边框）
                    padding: 25,                  // 图例内边距，单位px，默认各方向内边距为5，
                                            // 接受数组分别设定上右下左边距，同css
                    itemGap: 10,              // 各个item之间的间隔，单位px，默认为10，
                                        // 横向布局时为水平间隔，纵向布局时为纵向间隔
                    itemWidth: 20,             // 图例图形宽度
                    itemHeight: 14,            // 图例图形高度
                    textStyle: {
                        color: '#333'                              // 图例文字颜色
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        animation: false,
                        label: {
                            backgroundColor: '#ccc',
                            borderColor: '#aaa',
                            borderWidth: 1,
                            shadowBlur: 0,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,

                            color: '#222'
                        }
                    },
                    formatter: function (params) {
                        return params[2].name + '<br />' + ((params[2].value - base) * 100).toFixed(1) + '%';
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: data.map(function (item) {
                        return item.date;
                    }),
                    axisLabel: {
                        formatter: function (value, idx) {
                            var date = new Date(value);
                            return idx === 0 ? value : [date.getMonth() + 1, date.getDate()].join('-');
                        }
                    },
                    boundaryGap: false
                },
                yAxis: {
                    axisLabel: {
                        formatter: function (val) {
                            return (val - base) * 100 + '%';
                        }
                    },
                    axisPointer: {
                        label: {
                            formatter: function (params) {
                                return ((params.value - base) * 100).toFixed(1) + '%';
                            }
                        }
                    },
                    splitNumber: 3
                },
                series: [{
                    // name: 'L',
                    type: 'line',
                    data: data.map(function (item) {
                        return item.l + base;
                    }),
                    lineStyle: {
                        opacity: 0
                    },
                    stack: 'confidence-band',
                    symbol: 'none'
                }, {
                    name: '置信区间',
                    type: 'line',
                    color: 'PeachPuff',
                    data: data.map(function (item) {
                        return item.u - item.l;
                    }),
                    lineStyle: {
                    opacity: 0
                    },
                    areaStyle: {
                        color: 'PeachPuff'
                    },
                    stack: 'confidence-band',
                    symbol: 'none'
                }, {
                    name: '预测值',
                    type: 'line',
                    data: data.map(function (item) {
                        return item.value + base;
                    }),
                    hoverAnimation: false,
                    symbolSize: 6,
                    itemStyle: {
                        color: 'orange'
                    },
                    showSymbol: false
                }]
            });
        });

        option && myChart1.setOption(option);
    </script>
</body>
</html>