master

分支 (1)

管理

管理

master

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

    <title> RUL-prediction</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: 100%;
            background-color: rgb(222, 223, 224);
        }
        .flex-container .flex-item {
            width: 395px;
            height: 45%;
            margin: 5px;
            /* flex-grow:2; */
            /* border-radius: 5%; */
            background-color:#0c61043a;
        }
        .flex-container .flex-item .iconfont{
            padding-left: 110px;
        }
        .flex-container .flex-itemt {
            width: 395px;
            height: 45%;
            margin: 5px;
            /* flex-grow:2; */
            /* border-radius: 5%; */
            background-color:#0c61043a;
        }
        .flex-container .flex-itemt .iconfont{
            padding-left: 20px;
        }
        .flex-container .flex-item1 {
            width: 500px;
            height: 45%;
            margin: 5px;
            flex-grow:2;
            /* border-radius: 5%; */
            background-color:rgb(248, 248, 252);
        }
        .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-item2 .title span{
            font-size: 20px;
            font-weight: 800;
        }
        .flex-container .flex-item3 {
            width: 424px;
            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;
        }

    </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">
            <div id="main2" style="width: 395px; height: 275px; background-color:rgb(248, 248, 252);"></div>
            <i class="iconfont" style=" padding-top: 15px;">&#xe756;</i>
            <label for="temp1">设备当前温度：</label>
            <input style=" padding-top: 15px; width: 50px; background-color: transparent; border: 0; outline: none;" type="text" value="正常" id = "temp1">
        </div>
        <div id="main1" class="flex-item1"></div>
        <div class="flex-itemt">
            <div id="main3" style="width: 395px; height: 275px; background-color:rgb(248, 248, 252);"></div>
            <i class="iconfont" style=" padding-top: 15px;">&#xe6bb;</i>
            <label for="shichang">该设备预计剩余服役时长为（小时）：</label>
            <input style="padding-top: 15px; width: 75px; background-color: transparent; border: 0; outline: none; font-weight:bold" type="text" value=3000 id = "shichang">
        </div>
        <div class="flex-item3">
            <p class="topmargin">选择设备</span></p>
            <div style=" display: inline-block; width: 280px; margin-left: 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="auto">
                        <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: #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>
        <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" style="background-color: #fcfcfcc4; border: 1px solid #386910;">清除日志</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",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 src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <script type="module">
        var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
        var chartDom = document.getElementById('main1');
        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: 'DarkSeaGreen',
                    data: data.map(function (item) {
                        return item.u - item.l;
                    }),
                    lineStyle: {
                    opacity: 0
                    },
                    areaStyle: {
                        color: 'DarkSeaGreen'
                    },
                    stack: 'confidence-band',
                    symbol: 'none'
                }, {
                    name: '预测值',
                    type: 'line',
                    data: data.map(function (item) {
                        return item.value + base;
                    }),
                    hoverAnimation: false,
                    symbolSize: 6,
                    itemStyle: {
                        color: 'SeaGreen'
                    },
                    showSymbol: false
                }]
            });
        });

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

    <script >
        var chartDom = document.getElementById('main2');
        var myChart = echarts.init(chartDom);
        var option;

        var tmp=50;

        option = {
            title: {
                    text: '设备当前温度',
                    //subtext: 'Example in MetricsGraphics.js',
                    left: 'left',
                    padding: 15
                },
            series: [{
                    type: 'gauge',
                    center: ["50%", "75%"],
                    startAngle: 200,
                    endAngle: -20,
                    min: 20,
                    max: 100,
                    splitNumber: 16,
                    itemStyle: {
                        color: '#4169E1'
                    },
                    progress: {
                        show: true,
                        width: 20
                    },

                    pointer: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            width: 25
                        }
                    },
                    axisTick: {
                        distance: -30,
                        splitNumber: 5,
                        lineStyle: {
                            width: 2,
                            color: '#999'
                        }
                    },
                    splitLine: {
                        distance: -40,
                        length: 14,
                        lineStyle: {
                            width: 3,
                            color: '#999'
                        }
                    },
                    axisLabel: {
                        distance: -8,//数字的距离
                        color: '#999',
                        fontSize: 13
                    },
                    anchor: {
                        show: false
                    },
                    title: {
                        show: true
                    },
                    detail: {
                        valueAnimation: true,
                        width: '30%',
                        lineHeight: 40,
                        height: '10%',
                        borderRadius: 8,
                        offsetCenter: [0, '-15%'],
                        fontSize: 25,
                        fontWeight: 'bolder',
                        formatter: '{value} °C',
                        color: 'auto'
                    },
                    data: [{
                        value: 20
                    }]
                },

                {
                    type: 'gauge',
                    center: ["50%", "75%"],
                    startAngle: 200,
                    endAngle: -20,
                    min: 20,
                    max: 100,
                    itemStyle: {
                        color: '#00008B',
                    },
                    progress: {
                        show: true,
                        width: 10
                    },

                    pointer: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{
                        value: 20,
                    }]

                }
            ],
        };

        // // 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>
        var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
        var chartDom = document.getElementById('main3');
        var myChart1 = echarts.init(chartDom);
        var option1;

        var _panelImageURL = ROOT_PATH + '/data/asset/img/custom-gauge-panel.png';
        var _animationDuration = 1000;//动画持续时间
        var _animationDurationUpdate = 1000;
        var _animationEasingUpdate = 'quarticInOut';
        var _valOnRadianMax = 200;
        var _outerRadius = 100;
        var _innerRadius = 80;
        var _pointerInnerRadius = 40;
        var _insidePanelRadius = 70;
        var _currentDataIndex = 0;
        var rest = 1;

        function renderItem(params, api) {
            var valOnRadian = api.value(1);
            var coords = api.coord([api.value(0), valOnRadian]);
            var polarEndRadian = coords[3];
            var imageStyle = {
                image: _panelImageURL,
                x: params.coordSys.cx - _outerRadius,
                y: params.coordSys.cy - _outerRadius,
                width: _outerRadius * 2,
                height: _outerRadius * 2
            };

            return {
                type: 'group',
                children: [{
                    type: 'image',
                    style: imageStyle,
                    clipPath: {
                        type: 'sector',
                        shape: {
                            cx: params.coordSys.cx,
                            cy: params.coordSys.cy,
                            r: _outerRadius,
                            r0: _innerRadius,
                            startAngle: 0,
                            endAngle: -polarEndRadian,
                            transition: 'endAngle',
                            enterFrom: { endAngle: 0 }
                        }
                    }
                }, {
                    type: 'image',
                    style: imageStyle,
                    clipPath: {
                        type: 'polygon',
                        shape: {
                            points: makePionterPoints(params, polarEndRadian)
                        },
                        extra: {
                            polarEndRadian: polarEndRadian,
                            transition: 'polarEndRadian',
                            enterFrom: { polarEndRadian: 0 }
                        },
                        during: function (apiDuring) {
                            apiDuring.setShape(
                                'points',
                                makePionterPoints(params, apiDuring.getExtra('polarEndRadian'))
                            );
                        }
                    }
                }, {
                    type: 'circle',
                    shape: {
                        cx: params.coordSys.cx,
                        cy: params.coordSys.cy,
                        r: _insidePanelRadius
                    },
                    style: {
                        fill: '#fff',
                        shadowBlur: 25,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowColor: 'rgba(76,107,167,0.4)'
                    }
                }, {
                    type: 'text',
                    extra: {
                        valOnRadian: valOnRadian,
                        transition: 'valOnRadian',
                        enterFrom: { valOnRadian: 0 }
                    },
                    style: {
                        text: makeText(valOnRadian),
                        fontSize: 50,
                        fontWeight: 700,
                        x: params.coordSys.cx,
                        y: params.coordSys.cy,
                        fill: 'rgb(0,50,190)',
                        align: 'center',
                        verticalAlign: 'middle',
                        enterFrom: { opacity: 0 }
                    },
                    during: function (apiDuring) {
                        apiDuring.setStyle('text', makeText(apiDuring.getExtra('valOnRadian')));
                    }
                }]
            };
        }

        function convertToPolarPoint(renderItemParams, radius, radian) {
            return [
                Math.cos(radian) * radius + renderItemParams.coordSys.cx,
                -Math.sin(radian) * radius + renderItemParams.coordSys.cy
            ];
        }

        function makePionterPoints(renderItemParams, polarEndRadian) {
            return [
                convertToPolarPoint(renderItemParams, _outerRadius, polarEndRadian),
                convertToPolarPoint(renderItemParams, _outerRadius, polarEndRadian + Math.PI * 0.03),
                convertToPolarPoint(renderItemParams, _pointerInnerRadius, polarEndRadian)
            ];
        }

        function makeText(valOnRadian) {
            // Validate additive animation calc.
            if (valOnRadian < -10) {
                alert('illegal during val: ' + valOnRadian);
            }
            return (valOnRadian / _valOnRadianMax * 100).toFixed(0) + '%';
        }

        option1 = {
            animationEasing: _animationEasingUpdate,
            animationDuration: _animationDuration,
            animationDurationUpdate: _animationDurationUpdate,
            animationEasingUpdate: _animationEasingUpdate,
            title: {
                    text: '设备剩余服役寿命',
                    //subtext: 'Example in MetricsGraphics.js',
                    left: 'left',
                    padding: 15
                },
            dataset: {
                source: [[1, 200]]
            },
            tooltip: {},
            angleAxis: {
                type: 'value',
                startAngle: 0,
                axisLine: { show: false },
                axisTick: { show: false },
                axisLabel: { show: false },
                splitLine: { show: false },
                min: 0,
                max: _valOnRadianMax
            },
            radiusAxis: {
                type: 'value',
                axisLine: { show: false },
                axisTick: { show: false },
                axisLabel: { show: false },
                splitLine: { show: false }
            },
            polar: {},
            series: [{
                type: 'custom',
                coordinateSystem: 'polar',
                renderItem: renderItem
            }]
        };

        function myFunction(){
            if (document.getElementsByName("city")[0].value == ""){
                    alert( "未选择需要预测的设备" );
                }else{
                    tmp = (Math.random() * 60).toFixed(2) - 0;
                    if(0<=tmp && tmp<=50){
                        document.getElementById('temp1').value = "正常";
                        document.getElementById('temp1').style = "padding-top: 15px; width: 50px; font-weight: bold; background-color: transparent; border: 0; outline: none;";
                        // console.log(document.getElementById('temp1').value);
                    }else{
                        document.getElementById('temp1').value = "偏高";
                        document.getElementById('temp1').style = "padding-top: 15px; width: 50px; color:red; font-weight: bold; background-color: transparent; border: 0; outline: none;";
                        // console.log(document.getElementById('temp1').value);
                    };
                    option.series[0].data[0].value = tmp;
                    option.series[1].data[0].value = tmp;
                    myChart.setOption(option, true);

                    rest = Math.random();
                    nextSource = [[1, Math.round(rest * _valOnRadianMax)]];
                    // console.log(nextSource[0][1])
                    myChart1.setOption({
                        dataset: {
                            source: nextSource
                        }
                    });
                    document.getElementById('tag1').value = 4.1345;
                    document.getElementById('tag2').value = 1.2288;
                    document.getElementById('tag3').value = 0.1345;

                    var equipSelect = document.getElementsByName("city")[0].value;
                    console.log(equipSelect)

                    var da = (3000 * (nextSource[0][1]/200)).toFixed(2);
                    console.log(da)
                    document.getElementById("shichang").value = da;
                }
        }
        // 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);

        var nextSource = [[1, rest * _valOnRadianMax]];
        // console.log(nextSource)
        myChart1.setOption({
            dataset: {
                source: nextSource
            }
        });

        // setInterval(function () {
        //     var nextSource = [[1, Math.round(Math.random() * _valOnRadianMax)]];
        //     myChart1.setOption({
        //         dataset: {
        //             source: nextSource
        //         }
        //     });
        // }, 10000);

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