lxb
/
xs_imcs-code-platform


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649
							<!DOCTYPE html>
<html lang="en">
<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 rel="stylesheet" href="css/index.css">
    <title>设备监测平台大数据</title>
    <script src="js/jquery-2.2.1.min.js"></script>
    <script src="js/rem.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/guangxi.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <div class="t_container">
        <header class="t_header">
            <span>设备监测平台</span>
        </header>
        <main class="t_main">
            <div class="t_left_box">

            </div>
            <div class="t_center_box">
                <div class="t_top_box">
                </div>
                <div class="t_bottom_box">
                    <img class="t_l_line" src="img/left_line.png" alt="">
                    <div id="chart_3" class="echart" style="width: 100%; height: 3.6rem;"><img class="t_r_line" src="img/img.jpeg" alt="" style="margin-right: 5%;margin-bottom: 1%;"></div>
                    <img class="t_r_line" src="img/right_line.png" alt="">
                </div>
            </div>
            <div class="t_right_box">

            </div>
            <div class="b_left_box">
                    <img class="t_l_line" src="img/left_line.png" alt="">
                    <div id="chart_2" class="echart" style="width: 100%; height: 3.6rem;"></div>
                    <img class="t_r_line" src="img/right_line.png" alt="">
            </div>
            <div class="b_center_box">
                    <img class="t_l_line" src="img/left_line.png" alt="">
                    <div id="chart_1" class="echart" style="width: 100%; height: 3.6rem;"></div>
                    <img class="t_r_line" src="img/right_line.png" alt="">
            </div>
            <div class="b_right_box">
                    <img class="t_l_line" src="img/left_line.png" alt="">
                    <h1 class="t_title">设备实时数据</h1>
                    <table class="t_table">
                        <thead>
                            <tr>
                                <th>主轴进给率</th>
                                <th>主轴倍率</th>
                                <th>主轴转速</th>
                                <th>开机时长</th>
                            </tr>
                        </thead>
                        <tbody class="b_right_box_tbody">
                        </tbody>
                    </table>
                    <img class="t_r_line" src="img/right_line.png" alt="">
            </div>
        </main>
    </div>
</body>
<script type="text/javascript">
    var currentURL = window.location.href;

    // 解析 URL 获取参数
    var paramStartIndex = currentURL.indexOf('=') + 1; // 获取 "=" 后的位置
    var id = currentURL.substring(paramStartIndex);

    var requestData = {
            "id": id
    };

    const leftBox = document.querySelector('.t_left_box');
    const topBox = document.querySelector('.t_top_box');
    const rightBox = document.querySelector('.t_right_box');
    const rightBoxtbody = document.querySelector('.b_right_box_tbody');


    var echart4date;
    var echart4titlename;
    var avgDeviceRate;
    var difAvgDeviceRate;
    var yearMonthList;
    var avgYearMonth;

    function init(){
        callAPI();
        // 首次调用函数开始刷新
        refreshPage();


    }
    function refreshPage() {
        setTimeout(function() {
            location.reload(true); // 重新加载页面，参数为 true 表示强制从服务器重新加载
            callAPI();
        }, 10000); // 设置10秒钟的定时器
    }
    function callAPI(){
        $.ajax({
            url: "/bigScreen/detail",
            type: "POST", // 指定请求类型为 POST
            contentType: "application/json", // 设置请求的内容类型为 JSON
            dataType: "JSON",
            data: JSON.stringify(requestData), // 将请求数据转换为 JSON 字符串
            success: function (resp) {
                var data=resp.data;

                leftBox.innerHTML=`<img class="t_l_line" src="img/left_line.png" alt="">
                    <div class="t_mbox t_rbox">
                    <i></i>
                                        <span>主程序号</span>
                                        <h2>${data.mainProg}</h2>
                                    </div>
                                    <div class="t_mbox t_gbox">
                                        <i></i>
                                        <span>设备系统</span>
                                        <h2>${data.deviceSystem}</h2>
                                    </div>
                                    <div class="t_mbox t_ybox">
                                        <i></i>
                                        <span>设备型号</span>
                                        <h2>${data.deviceModel}</h2>
                                    </div>
                                    <img class="t_r_line" src="img/right_line.png" alt="">
                    `;
                topBox.innerHTML=`
                    <img class="t_l_line" src="img/left_line.png" alt="">
                    <ul class="t_nav">
                        <li>
                            <span>设备类型</span>
                            <h1>${data.deviceType}</h1>
                            <i></i>
                        </li>
                        <li>
                            <span>当日开机时长(分钟)</span>
                            <h1>${data.todayPowerOnTime}</h1>
                            <i></i>
                        </li>
                        <li>
                            <span>主轴利用率</span>
                            <h1>${data.deviceRate}%</h1>
                        </li>
                    </ul>
                    <img class="t_r_line" src="img/right_line.png" alt="">
                    `;
                rightBox.innerHTML=`
                <img class="t_l_line" src="img/left_line.png" alt="">
                    <div id="chart_4" class="echart" style="width: 50%; height: 4.6rem; position: absolute;"></div>
                    <header class="t_b_h">
                        <span>设备状态</span>
                        <img src="img/end.png"></img>
                        <h3>${data.deviceState}</h3>
                    </header>
                    <main class="t_b_m">
                        <img src="img/map.png" alt="">
                        <div class="t_b_box">
                            <span>主轴进给率</span>
                            <i></i>
                            <h2>${data.actFeed}</h2>
                        </div>
                        <div class="t_b_box1">
                            <span>主轴倍率</span>
                            <i></i>
                            <h2>${data.spindleMagnification}</h2>
                        </div>
                        <div class="t_b_box2">
                            <span>主轴转速</span>
                            <i></i>
                            <h2>${data.actSpindle}</h2>
                        </div>
                        <div class="t_b_box3">
                            <span>当日开机时长</span>
                            <i></i>
                            <h2>${data.todayPowerOnTime}</h2>
                        </div>
                    </main>
                    <img class="t_r_line" src="img/right_line.png" alt="">
                    `;
                var bodyText=``;
                data.detailInfo.forEach(item => {
                    bodyText+=`
                    <tr>
                        <td>${item.actFeed}</td>
                        <td>${item.spindleMagnification}</td>
                        <td>${item.actSpindle}</td>
                        <td>${item.powerOnTime}</td>
                    </tr>
                    `;
                });
                rightBoxtbody.innerHTML=bodyText;
                echart4date=data.deviceRates;
                echart4titlename=data.dateList;
                avgDeviceRate=data.avgDeviceRate;
                difAvgDeviceRate=data.difAvgDeviceRate;
                yearMonthList=data.yearMonthList;
                avgYearMonth=data.avgYearMonth;
                echart_1();
                echart_2();
                echart_4();
            }
        });
    }
    init();

    function echart_1() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart_1'));
        option = {
            title: {
                text: '本月设备主轴利用率统计',
                top: 35,
                left: 20,
                textStyle: {
                    fontSize: 18,
                    color: '#fff'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)",

            },
            legend: {
                right: 20,
                top: 35,
                data: ['未使用', '主轴利用率'],
                textStyle: {
                    color: '#fff'
                }
            },
            series: [{
                name: '设备状态',
                type: 'pie',
                radius: ['0', '60%'],
                center: ['50%', '60%'],
                color: ['#e72325', '#98e002', '#2ca3fd'],
                label: {
                    normal: {
                        formatter: '{b}\n{d}%'
                    },

                },
                data: [{
                    value: difAvgDeviceRate,
                    name: '未使用'
                },
                    {
                        value: avgDeviceRate,
                        name: '主轴利用率',
                        selected: true
                    }
                ]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    function echart_2() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart_2'));
        var data = {
            id: 'multipleBarsLines',
            title: '近一年主轴利用率占比',
            legendBar: ['正面占比', '中立占比', '负面占比'],
            symbol: '', //数值是否带百分号        --默认为空 ''
            legendLine: ['同期对比'],
            xAxis: yearMonthList,
            yAxis: [
                avgYearMonth
            ],
            barColor: ['#3FA7DC', '#7091C4', '#5170A2'], //柱子颜色 必填参数
            lineColor: ['#D9523F'], // 折线颜色

        };
        /////////////end/////////

        var myData = (function test() {
            var yAxis = data.yAxis || [];
            var lines = data.lines || [];
            var legendBar = data.legendBar || [];
            var legendLine = data.legendLine || [];
            var symbol = data.symbol || ' ';
            var seriesArr = [];
            var legendArr = [];
            yAxis && yAxis.forEach((item, index) => {
                legendArr.push({
                    name: legendBar && legendBar.length > 0 && legendBar[index]
                });
                seriesArr.push({
                    name: legendBar && legendBar.length > 0 && legendBar[index],
                    type: 'bar',
                    barGap: '0.5px',
                    data: item,
                    barWidth: data.barWidth || 12,
                    label: {
                        normal: {
                            show: true,
                            formatter: '{c}' + symbol,
                            position: 'top',
                            textStyle: {
                                color: '#fff',
                                fontStyle: 'normal',
                                fontFamily: '微软雅黑',
                                textAlign: 'left',
                                fontSize: 11,
                            },
                        },
                    },
                    itemStyle: { //图形样式
                        normal: {
                            barBorderRadius: 4,
                            color: data.barColor[index]
                        },
                    }
                });
            });

            lines && lines.forEach((item, index) => {
                legendArr.push({
                    name: legendLine && legendLine.length > 0 && legendLine[index]
                })
                seriesArr.push({
                    name: legendLine && legendLine.length > 0 && legendLine[index],
                    type: 'line',
                    data: item,
                    itemStyle: {
                        normal: {
                            color: data.lineColor[index],
                            lineStyle: {
                                width: 3,
                                type: 'solid',
                            }
                        }
                    },
                    label: {
                        normal: {
                            show: false, //折线上方label控制显示隐藏
                            position: 'top',
                        }
                    },
                    symbol: 'circle',
                    symbolSize: 10
                });
            });

            return {
                seriesArr,
                legendArr
            };
        })();


        option = {
            title: {
                show: true,
                top: '10%',
                left: '3%',
                text: data.title,
                textStyle: {
                    fontSize: 18,
                    color: '#fff'
                },
                subtext: data.subTitle,
                link: ''
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    var time = '';
                    var str = '';
                    for (var i of params) {
                        time = i.name.replace(/\n/g, '') + '<br/>';
                        if (i.data == 'null' || i.data == null) {
                            str += i.seriesName + '：无数据' + '<br/>'
                        } else {
                            str += i.seriesName + '：' + i.data + symbol + '%<br/>'
                        }

                    }
                    return time + str;
                },
                axisPointer: {
                    type: 'none'
                },
            },
            legend: {
                right: data.legendRight || '30%',
                top: '12%',
                right: '5%',
                itemGap: 16,
                itemWidth: 10,
                itemHeight: 10,
                data: myData.legendArr,
                textStyle: {
                    color: '#fff',
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 12,
                }
            },
            grid: {
                x: 30,
                y: 80,
                x2: 30,
                y2: 60,
            },
            xAxis: {
                type: 'category',
                data: data.xAxis,
                axisTick: {
                    show: false,
                },

                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#1AA1FD',
                    },
                    symbol: ['none', 'arrow']
                },
                axisLabel: {
                    show: true,
                    interval: '0',
                    textStyle: {
                        lineHeight: 16,
                        padding: [2, 2, 0, 2],
                        height: 50,
                        fontSize: 12,
                    },
                    rich: {
                        Sunny: {
                            height: 50,
                            // width: 60,
                            padding: [0, 5, 0, 5],
                            align: 'center',
                        },
                    },
                    formatter: function (params, index) {
                        var newParamsName = "";
                        var splitNumber = 5;
                        var paramsNameNumber = params && params.length;
                        if (paramsNameNumber && paramsNameNumber <= 4) {
                            splitNumber = 4;
                        } else if (paramsNameNumber >= 5 && paramsNameNumber <= 7) {
                            splitNumber = 4;
                        } else if (paramsNameNumber >= 8 && paramsNameNumber <= 9) {
                            splitNumber = 5;
                        } else if (paramsNameNumber >= 10 && paramsNameNumber <= 14) {
                            splitNumber = 5;
                        } else {
                            params = params && params.slice(0, 15);
                        }

                        var provideNumber = splitNumber; //一行显示几个字
                        var rowNumber = Math.ceil(paramsNameNumber / provideNumber) || 0;
                        if (paramsNameNumber > provideNumber) {
                            for (var p = 0; p < rowNumber; p++) {
                                var tempStr = "";
                                var start = p * provideNumber;
                                var end = start + provideNumber;
                                if (p == rowNumber - 1) {
                                    tempStr = params.substring(start, paramsNameNumber);
                                } else {
                                    tempStr = params.substring(start, end) + "\n";
                                }
                                newParamsName += tempStr;
                            }

                        } else {
                            newParamsName = params;
                        }
                        params = newParamsName;
                        return '{Sunny|' + params + '}';
                    },
                    color: '#1AA1FD',
                },

            },
            yAxis: {
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#1AA1FD',
                    },
                    symbol: ['none', 'arrow']
                },
                type: 'value',
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#1AA1FD',
                        type: 'solid'
                    },
                }
            },
            series: myData.seriesArr
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    function echart_4() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart_4'));
        var data = echart4date;
        var titlename = echart4titlename;
        var valdata =[];
        for(let i=0;i<echart4date.length;i++){
            valdata.push(100);
        }
        var myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6'];
        option = {
            title: {
                text: '主轴利用率',
                x: 'center',
                textStyle: {
                    color: '#FFF'
                },
                left: '6%',
                top: '10%'
            },
            //图标位置
            grid: {
                top: '20%',
                left: '32%'
            },
            xAxis: {
                show: false
            },
            yAxis: [{
                show: true,
                data: titlename,
                inverse: true,
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#fff',
                    formatter: (value, index) => {
                        return [

                            `{lg|${index+1}}  ` + '{title|' + value + '} '
                        ].join('\n')
                    },
                    rich: {
                        lg: {
                            backgroundColor: '#339911',
                            color: '#fff',
                            borderRadius: 15,
                            // padding: 5,
                            align: 'center',
                            width: 15,
                            height: 15
                        },
                    }
                },


            }, {
                show: true,
                inverse: true,
                data: valdata,
                axisLabel: {
                    textStyle: {
                        fontSize: 12,
                        color: '#fff',
                    },
                },
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },

            }],
            series: [{
                name: '条',
                type: 'bar',
                yAxisIndex: 0,
                data: data,
                barWidth: 10,
                itemStyle: {
                    normal: {
                        barBorderRadius: 20,
                        color: function(params) {
                            var num = myColor.length;
                            return myColor[params.dataIndex % num]
                        },
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'inside',
                        formatter: '{c}%'
                    }
                },
            }, {
                name: '框',
                type: 'bar',
                yAxisIndex: 1,
                barGap: '-100%',
                data: valdata,
                barWidth: 15,
                itemStyle: {
                    normal: {
                        color: 'none',
                        borderColor: '#00c1de',
                        borderWidth: 3,
                        barBorderRadius: 15,
                    }
                }
            }, ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        // window.addEventListener("resize", function () {
        //     myChart.resize();
        // });
    }
</script>
</html>