1
wangyi
2026-04-02 96785ebcfe1bc9210f3d9d4056f4ec29fb60d810
WebTM/views/Éú²ú¹ÜÀí/¶©µ¥×´Ì¬·Ö²¼/Sc_OrderStateDistribution.html
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>设备状态分布</title>
@@ -15,7 +16,7 @@
    <link href="../../../layuiadmin/layui/css/ReportPlatform.css" rel="stylesheet" />
    <style>
        /*树状图点击高亮变色*/
        .layui-tree-set-active > .layui-tree-entry .layui-tree-main {
        .layui-tree-set-active>.layui-tree-entry .layui-tree-main {
            background: #aef0f7;
        }
@@ -23,17 +24,22 @@
            border: 1px solid #5FB878;
            height: 50px;
            border-radius: 5px;
            /*background: -webkit-gradient(linear, 0% 0%, 0% 50%,from(#262525), to(#262525));*/ /*谷歌*/
            /*background: -webkit-gradient(linear, 0% 0%, 0% 50%,from(#262525), to(#262525));*/
            /*谷歌*/
        }
        .bottomright {
            cursor: pointer; /*鼠标变成手指样式*/
            transition: all 0.1s; /*所有属性变化在0.6秒内执行动画*/
            cursor: pointer;
            /*鼠标变成手指样式*/
            transition: all 0.1s;
            /*所有属性变化在0.6秒内执行动画*/
        }
        .bottomright:hover {
           transform: scale(1.3); /*鼠标放上之后元素变成1.4倍大小*/
        }
            transform: scale(1.3);
            /*鼠标放上之后元素变成1.4倍大小*/
        }
        .imgtitle {
            width: 70%;
            height: 50px;
@@ -57,13 +63,14 @@
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            }
        }
        .check1 {
            cursor: pointer; /*鼠标变成手指样式*/
            -webkit-transition: border linear .1s,-webkit-box-shadow linear .5s;
            border-color: rgba(0,148, 255,.75);
            -webkit-box-shadow: 0 0 18px rgba(0,148,255);
            cursor: pointer;
            /*鼠标变成手指样式*/
            -webkit-transition: border linear .1s, -webkit-box-shadow linear .5s;
            border-color: rgba(0, 148, 255, .75);
            -webkit-box-shadow: 0 0 18px rgba(0, 148, 255);
        }
        .prs {
@@ -80,7 +87,10 @@
            top: 6px;
        }
        .tr1-1, .tr1-2, .tr1-3, .tr1-4 {
        .tr1-1,
        .tr1-2,
        .tr1-3,
        .tr1-4 {
            margin-left: 3%;
            margin-top: 4%;
            height: 310px;
@@ -99,8 +109,43 @@
        .layui-icon {
            font-size: 20px;
        }
        .param-group {
            margin-bottom: 15px;
            border: 1px solid #e6e6e6;
            border-radius: 4px;
            overflow: hidden;
        }
        .group-title {
            background-color: #007dff;
            color: #fff;
            padding: 8px 12px;
            font-size: 20px;
            font-weight: bold;
        }
        .param-list {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
            padding: 10px 20px;
            background-color: #f2f2f2;
        }
        .param-item {
            width: 10%;
            margin-bottom: 8px;
            font-size: 14px;
            color: #333;
        }
        .param-item span {
            color: #666;
        }
    </style>
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-col-md12">
@@ -109,7 +154,8 @@
                    <form class="layui-form" action="" lay-filter="component-form-group">
                        <div class="layui-row">
                            <div class="layui-col-xs2 layui-inline" style="border: solid 1.5px #e0d6d64d;">
                                <div id="TreeTable" class="demo-tree demo-tree-box" style="height: 600px; overflow: scroll;"></div>
                                <div id="TreeTable" class="demo-tree demo-tree-box"
                                    style="height: 600px; overflow: scroll;"></div>
                            </div>
                            <div class="layui-col-xs9 layui-inline" style="border: solid 1.5px #e0d6d64d;">
                                <div id="btomleft" style="height:600px;display:block;overflow-y:auto;">
@@ -117,7 +163,8 @@
                                </div>
                            </div>
                            <div class="layui-col-xs1 layui-inline" style="border: solid 1.5px #e0d6d64d;">
                                <fieldset style="border: 1px solid #eee; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%); height: 585px;">
                                <fieldset
                                    style="border: 1px solid #eee; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%); height: 585px;">
                                    <legend style="color: #5FB878">操作台</legend>
                                    <div class="content4">
                                        <div class="layui-row layui-col-space10">
@@ -201,22 +248,32 @@
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-row layui-col-space10">
                                            <div class="layui-col-sm12 " onclick="showTechParam()">
                                                <div class="cnt bottomright">
                                                    <div class="btnM">
                                                        <span class="layui-icon layui-icon-layer imgicon"></span>
                                                    </div>
                                                    <span class="imgtitle">工艺参数</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                        <div class="layui-row">
                            <div class="layui-col-xs3 layui-inline">
                                <div class="tr1-1" id="mychart11">   </div>
                                <div class="tr1-1" id="mychart11"> </div>
                            </div>
                            <div class="layui-col-xs3 layui-inline">
                                <div class="tr1-2" id="mychart22">   </div>
                                <div class="tr1-2" id="mychart22"> </div>
                            </div>
                            <div class="layui-col-xs3 layui-inline">
                                <div class="tr1-3" id="mychart3">   </div>
                                <div class="tr1-3" id="mychart3"> </div>
                            </div>
                            <div class="layui-col-xs3 layui-inline">
                                <div class="tr1-4" id="mychart4">   </div>
                                <div class="tr1-4" id="mychart4"> </div>
                            </div>
                        </div>
                    </form>
@@ -224,7 +281,10 @@
            </div>
        </div>
    </div>
    <!-- ç”¨äºŽé¢„渲染列表数据 é¡µé¢ä¸Šä¸æ˜¾ç¤º -->
    <div id="TechParamWrapper" style="padding: 10px; display: none;"></div>
</body>
</html>
<script>
    var wktag = 0;
@@ -233,6 +293,9 @@
    var HEquipName = "";//设备名称
    var HSourceID = "";//产线id
    var HDeptID = "";
    var Timer = null; // æ•°æ®è¯»å–定时器
    var EquipTechParamHtml = ''; // è®¾å¤‡å‚数弹窗渲染html
    var firstRunning = true;
    layui.config({
        base: '../../../layuiadmin/' //静态资源所在路径
    }).extend({
@@ -356,7 +419,7 @@
        // æ ‘状图查询
        function get_Display_Tree() {
            var sWhere = " and HUSEORGID=" + sessionStorage["OrganizationID"];
            var sWhere = " and  HWorkShopFlag =1   and HUSEORGID=" + sessionStorage["OrganizationID"];
            var ajaxLoad = layer.load();
            $.ajax({
                url: GetWEBURL() + '/Gy_Department/Gy_DepartmentTreeList',
@@ -441,6 +504,22 @@
    });
    //#endregion
    //#region æ˜¾ç¤º å·¥è‰ºå‚数弹窗
    function showTechParam() {
        var TechParamPreLoading = document.getElementById("TechParamWrapper").innerHTML
        layer.open({
            skin: 'layui-layer-rim', //加上边框
            title: '查看设备工艺参数',
            type: 1,
            area: ['80%', '80%'], // å®½é«˜
            scrollbar: false,
            content: '<div id="TechParamWrapper-Modal" style="padding: 10px;">' + TechParamPreLoading + '</div>'
        });
    }
    //#endregon
    //工单列表选中
    function CheckBtom(obj, i) {
        workcode = $("#gd" + i + "").html(); //通过样式ID获取html内容(工单号)
@@ -453,19 +532,23 @@
        $('.cns').removeClass('check1');  //删除不同父级clss样式相同的所有元素
        $("#bs" + i + "").addClass('check1'); // æ·»åŠ å½“å‰å…ƒç´ çš„æ ·å¼
        if (workcode != "" && workcode != null) {
        if (HEquipID != "" && HEquipID != null) {
            wktag = 1;
        }
        sWhere = {
            HDeptID: HDeptID
            , HSourceID: HSourceID
        // sWhere = {
        //     HDeptID: HDeptID
        //     , HSourceID: HSourceID,
        //     HEquipID: HEquipID
        // }
        // FourReport(JSON.stringify(sWhere));
        if (Timer.isRunning() == true) {
            Timer.stop()
        }
        FourReport(JSON.stringify(sWhere));
        Timer.start()
    }
    //查询 éƒ¨é—¨+产线 4个图表 èµ‹å€¼
    function FourReport(sWhere) {
        wktag = 0;
        $.ajax({
            url: GetWEBURL() + '/Sc_HEquipStateDistribution/Get_EquipStateDistribution_FourReport',
            type: "GET",
@@ -494,12 +577,14 @@
        });
    }
    window.FourReport = FourReport;
    //柱状图
    function get_Histogram1(mychart11, chartData) {
        // é»˜è®¤çš„option结构
        var option = {
            title: {
                text: '产能', // é»˜è®¤æ ‡é¢˜ä¸ºç©º
                text: '近七天产能', // é»˜è®¤æ ‡é¢˜ä¸ºç©º
                left: 'center',
                top: '10%', // è°ƒæ•´æ ‡é¢˜ä½ç½®ï¼Œæ”¾åˆ°æœ€ä¸Šé¢
                textStyle: {
@@ -530,7 +615,7 @@
        // å¦‚果有数据,更新option的内容
        if (chartData && chartData.length > 0) {
            option.title.text = '产能'; // æ­£å¸¸æ•°æ®æ—¶æ²¡æœ‰æ ‡é¢˜
            option.title.text = '近七天产能'; // æ­£å¸¸æ•°æ®æ—¶æ²¡æœ‰æ ‡é¢˜
            option.xAxis.data = chartData.map(item => item.日期); // è®¾ç½®x轴数据
            option.series[0].data = chartData.map(item => item['生产总数']); // è®¾ç½®y轴数据
@@ -561,12 +646,12 @@
        mychart11.setOption(option);
    }
    //折线图
    //柱状图2
    function get_LineChart(mychart22, chartData1) {
        // é»˜è®¤çš„option结构
        var option = {
            title: {
                text: '不良原因', // é»˜è®¤æ ‡é¢˜ä¸ºç©º
                text: 'ç»´ä¿®', // é»˜è®¤æ ‡é¢˜ä¸ºç©º
                left: 'center',
                top: '10%', // è°ƒæ•´æ ‡é¢˜ä½ç½®ï¼Œæ”¾åˆ°æœ€ä¸Šé¢
                textStyle: {
@@ -616,32 +701,43 @@
            series: [
                {
                    data: [], // é»˜è®¤series数据为空
                    type: 'line', // å°†æŸ±çŠ¶å›¾æ”¹ä¸ºæŠ˜çº¿å›¾
                    smooth: true, // ä½¿æŠ˜çº¿å›¾å¹³æ»‘
                    lineStyle: {
                        color: '#15b1fa' // è®¾ç½®çº¿æ¡é¢œè‰²
                    },
                    label: {
                        show: true, // åœ¨æŠ˜çº¿å›¾ä¸Šæ˜¾ç¤ºæ•°æ®
                        position: 'top',
                        formatter: function (params) {
                            return echarts.format.addCommas(params.value);
                        }
                    }
                    type: 'bar'
                }
            ]
        };
        // å¦‚果有数据,更新option的内容
        if (chartData1 && chartData1.length > 0) {
            option.title.text = '不良原因'; // æ­£å¸¸æ•°æ®æ—¶æ²¡æœ‰æ ‡é¢˜
            option.xAxis.data = chartData1.map(item => item.不良原因); // è®¾ç½®x轴数据
            option.series[0].data = chartData1.map(item => item['数量']); // è®¾ç½®y轴数据
            option.series[0].label = {
                normal: {
                    show: true,
                    position: 'top',
                    formatter: function (params) {
                        return echarts.format.addCommas(params.value);
                    }
                }
            };
            option.series[0].itemStyle = {
                normal: {
                    color: '#15b1fa',
                    label: {
                        show: true // åœ¨æŸ±çŠ¶å›¾ä¸Šæ˜¾ç¤ºæ•°æ®
                    }
                }
            };
        } else {
            // æ²¡æœ‰æ•°æ®æ—¶ï¼Œæ˜¾ç¤º"暂无数据"提示
            option.title.text = '暂无数据';
        }
        // æ›´æ–°å›¾è¡¨
        mychart22.setOption(option);
    }
@@ -1104,7 +1200,146 @@
        });
    }
    // è®¢å•读取定时器 é»˜è®¤1分钟读取一次
    function TimerClock(interval = 60000, immediate = true) {
        // ç§æœ‰å˜é‡ï¼šå­˜å‚¨å®šæ—¶å™¨ID
        let timerId = null;
        // ç§æœ‰å˜é‡ï¼šè®°å½•执行次数
        let executeCount = 0;
        // ç§æœ‰å˜é‡ï¼šæ ‡è®°å®šæ—¶å™¨æ˜¯å¦æ­£åœ¨è¿è¡Œ
        let isRunning = false;
        // ç§æœ‰å˜é‡: æ ‡è®°å®šæ—¶å™¨æ˜¯å¦ç¬¬ä¸€æ¬¡å¯åŠ¨ï¼Œå½“ç¬¬ä¸€æ¬¡å¯åŠ¨(即通过点击卡片的方式访问数据时) éœ€è¦æ˜¾ç¤ºåŠ è½½ï¼Œå¼¹çª—ä¸­éœ€è¦é™é»˜æ›´æ–°
        const task = () => {
            var EmptyHtml = '<div style="Width: 100%; text-align: center; font-size: 46px;">该设备没有工艺参数</div>'
            if (firstRunning) {
                var loadIndex = layui.layer.load(0, { shade: 0.3 });
            }
            $.ajax({
                url: GetWEBURL() + '/Web/getSB_EquipTechParamBillListByEquipID',
                type: "GET",
                data: { HEquipID: HEquipID },
                dataType: "json",
                success: function (data) {
                    if (data.code == 1) {
                        EquipTechParamHtml = "";
                        data.data.forEach(group => {
                            EquipTechParamHtml += `<div class="param-group">`;
                            EquipTechParamHtml += `<div class="group-title">${group['分组名称']}</div>`;
                            EquipTechParamHtml += `<div class="param-list">`;
                            group['参数列表'].forEach(param => {
                                EquipTechParamHtml += `<div class="param-item">${param.HTechParamName}:<span>${param.HResult}</span></div>`;
                            });
                            EquipTechParamHtml += `</div></div>`;
                        });
                        // èµ‹å€¼ç»™é¢„渲染模版
                        document.getElementById("TechParamWrapper").innerHTML = EquipTechParamHtml
                        // èµ‹å€¼ç»™æ¸²æŸ“模板
                        if (document.getElementById("TechParamWrapper-Modal")) {
                            document.getElementById("TechParamWrapper-Modal").innerHTML = EquipTechParamHtml
                        }
                        layui.layer.close(loadIndex);
                        firstRunning = false
                    } else {
                        document.getElementById("TechParamWrapper").innerHTML = EmptyHtml
                        // èµ‹å€¼ç»™æ¸²æŸ“模板
                        if (document.getElementById("TechParamWrapper-Modal")) {
                            document.getElementById("TechParamWrapper-Modal").innerHTML = EmptyHtml
                        }
                        if (firstRunning) {
                            layui.layer.close(loadIndex);
                        }
                    }
                },
                error: function (err) {
                    document.getElementById("TechParamWrapper").innerHTML = EmptyHtml
                    // èµ‹å€¼ç»™æ¸²æŸ“模板
                    if (document.getElementById("TechParamWrapper-Modal")) {
                        document.getElementById("TechParamWrapper-Modal").innerHTML = EmptyHtml
                    }
                    if (firstRunning) {
                        layui.layer.close(loadIndex);
                    }
                    return false;
                }
            });
            var sWhere = {
                HDeptID: HDeptID
                , HSourceID: HSourceID,
                HEquipID: HEquipID
            }
            window.FourReport(JSON.stringify(sWhere));
        }
        // å¯åŠ¨å®šæ—¶å™¨æ–¹æ³•
        this.start = function () {
            // é˜²æ­¢é‡å¤å¯åЍ
            if (isRunning) {
                console.log('定时器已在运行中');
                return;
            }
            if (immediate) {
                task();
            }
            // è®¾ç½®å®šæ—¶å™¨ï¼ˆinterval æ¯«ç§’执行一次)
            timerId = setInterval(() => {
                executeCount++;
                task();
                console.log(`定时器执行第 ${executeCount} æ¬¡`);
            }, interval);
            // æ›´æ–°çŠ¶æ€æ ‡è®°
            isRunning = true;
            // document.getElementById('status').textContent = '运行中';
            console.log(`定时器已启动,间隔:${interval} æ¯«ç§’`);
        };
        // åœæ­¢å®šæ—¶å™¨æ–¹æ³•
        this.stop = function () {
            // é˜²æ­¢é‡å¤åœæ­¢
            if (!isRunning) {
                console.log('定时器未运行');
                return;
            }
            firstRunning = true
            // æ¸…除定时器
            clearInterval(timerId);
            // é‡ç½®çŠ¶æ€
            timerId = null;
            isRunning = false;
            // document.getElementById('status').textContent = '已停止';
            console.log('定时器已停止');
        };
        // èŽ·å–å½“å‰å®šæ—¶å™¨çŠ¶æ€
        this.isRunning = function () {
            return isRunning;
        };
    }
    // é¡µé¢åŠ è½½å®Œæ¯•åŽè°ƒç”¨
    window.addEventListener('load', function () {
        console.log('页面所有资源都加载完成!');
        Timer = new TimerClock()
        console.log(Timer)
    });
    // é¡µé¢å¸è½½å‰è°ƒç”¨
    window.addEventListener('beforeunload', function (e) {
        if (Timer) {
            Timer.stop()
        }
        delete window.FourReport
    })
    //#endregion
</script>