1

zrg

昨天 de25bba1a0e289c78bc42018d97915c10bbd7381

 WebTM/views/Êý²É¹ÜÀí/DAQ_EvidenceEquipmentCockpit.html

@@ -7,7 +7,6 @@
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
    <script src="../../layuiadmin/layui/layui.js"></script>
    <script src="../../layuiadmin/layui/layui.js"></script>
    <script src="../../layuiadmin/Scripts/json2.js"></script>
    <script src="../../layuiadmin/Scripts/jquery-1.4.1.js"></script>
    <script src="../../layuiadmin/layui/layui1.js"></script>
@@ -15,99 +14,51 @@
    <link href="../../layuiadmin/layui/css/ReportPlatform.css" rel="stylesheet" />
    <script src="../../layuiadmin/Scripts/webConfig.js"></script>
    <style>
        /*树状图点击高亮变色*/
        .layui-tree-set-active>.layui-tree-entry .layui-tree-main {
            background: #aef0f7;
        }

        .cnt {
            border: 1px solid #5FB878;
            height: 50px;
            border-radius: 5px;
            /*background: -webkit-gradient(linear, 0% 0%, 0% 50%,from(#262525), to(#262525));*/
            /*谷歌*/
        }

        .bottomright {
            cursor: pointer;
            /*鼠标变成手指样式*/
            transition: all 0.1s;
            /*所有属性变化在0.6秒内执行动画*/
        }

        .bottomright:hover {
            transform: scale(1.3);
            /*鼠标放上之后元素变成1.4倍大小*/
        }

        .imgtitle {
            width: 70%;
            height: 50px;
            text-align: center;
            display: block;
            font-size: 15px;
            float: left;
            line-height: 50px;
        }

        .cns {
            border: 1px solid #5FB878;
            height: 130px;
            border-radius: 5px;
        }

        .cns p {
            font-size: 12px;
            line-height: 18px;
            margin: 0 5px;
            white-space: nowrap;
            text-overflow: ellipsis;
        /* å…¨å±€åŸºç¡€æ ·å¼ */
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .check1 {
        /* æ ‘状图选中高亮 */
        .layui-tree-set-active > .layui-tree-entry .layui-tree-main {
            background: #aef0f7;
        }
        /* åœ¨åŽŸæœ‰<style>标签内修改/新增以下样式 */
        /* è®¾å¤‡å¡ç‰‡æ ·å¼ - è°ƒæ•´é«˜åº¦+溢出处理 */
        .cns {
            border: 1px solid #5FB878;
            height: 220px; /* åŽŸ130px â†’ è°ƒæ•´ä¸º220px，容纳图片+文字 */
            border-radius: 5px;
            width: 100%;
            box-sizing: border-box;
            cursor: pointer;
            /*鼠标变成手指样式*/
            -webkit-transition: border linear .1s, -webkit-box-shadow linear .5s;
            padding: 5px; /* å¢žåŠ å†…边距，避免内容贴边 */
            overflow: hidden; /* é˜²æ­¢æžç«¯æƒ…况溢出 */
        }

            .cns p {
                font-size: 12px;
                line-height: 18px;
                margin: 0 5px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

        /* æ–°å¢žï¼šå›¾ç‰‡å®¹å™¨æ ·å¼ï¼Œå±…中显示图片 */
        .img-container {
            width: 100%; /* å¡ç‰‡å®½åº¦180px â†’ å›¾ç‰‡160px，居中 */
            text-align: center;
            margin: 5px 0; /* ä¸Šä¸‹é—´è·ï¼Œåˆ†éš”文字和图片 */
        }      

        /* è®¾å¤‡å¡ç‰‡é€‰ä¸­æ ·å¼ */
        .check1 {
            border-color: rgba(0, 148, 255, .75);
            -webkit-box-shadow: 0 0 18px rgba(0, 148, 255);
        }

        .prs {
            font-family: "微软雅黑";
            font-weight: bold;
            line-height: 30px;
            margin: 0 0px 0px 10px;
            float: left;
        }

        .layui-progress {
            width: 45%;
            float: left;
            top: 6px;
        }

        .tr1-1,
        .tr1-2,
        .tr1-3,
        .tr1-4 {
            margin-left: 3%;
            margin-top: 4%;
            height: 310px;
            border: 1px solid rgb(0 0 0 / 10%);
            width: 95%;
        }

        .btnM {
            width: 30%;
            height: 50px;
            line-height: 50px;
            float: left;
            text-align: right;
        }

        .layui-icon {
            font-size: 20px;
        }
    </style>
</head>
@@ -115,122 +66,19 @@
<body>
    <div class="layui-fluid">
        <div class="layui-col-md12">
            <div class="layui-card" style="padding: 1px">
                <div class="layui-card-body" style="padding: 1px;">
            <div class="layui-card" style="padding: 0; height: 100%;">
                <div class="layui-card-body" style="padding: 0; height: 100%;">
                    <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 class="layui-row" style="width: 100%; height: 100%;">
                            <!-- å·¦ä¾§æ ‘状图：layui-col-xs2 æ”¹ä¸º layui-col-lg2（适配大屏），高度100%，移除inline -->
                            <div class="layui-col-lg2" style="border: solid 1.5px #e0d6d64d; height: 100%; float: left;">
                                <div id="TreeTable" class="demo-tree demo-tree-box" style="height: 100%; width: 100%; overflow: auto;"></div>
                            </div>
                            <div class="layui-col-xs10 layui-inline" style="border: solid 1.5px #e0d6d64d;">
                                <div id="btomleft" style="height:600px;display:block;overflow-y:auto;">

                                </div>
                            <!-- å³ä¾§è®¾å¤‡åˆ—表：layui-col-xs10 æ”¹ä¸º layui-col-lg10，高度100%，移除inline -->
                            <div class="layui-col-lg10" style="border: solid 1.5px #e0d6d64d; height: 100%; float: left;">
                                <div id="btomleft" style="height: 100%; width: 100%; display:block;overflow-y:auto;"></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;">
                                    <legend style="color: #5FB878">操作台</legend>
                                    <div class="content4">
                                        <div class="layui-row layui-col-space10">
                                            <div class="layui-col-sm12 " onclick="PowerOn(event,this)">
                                                <div class="cnt bottomright">
                                                    <div class="btnM">
                                                        <span class="layui-icon layui-icon-pause imgicon"></span>
                                                    </div>
                                                    <span class="imgtitle">开机</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-row layui-col-space10">
                                            <div class="layui-col-sm12 " onclick="PowerOff(event,this)">
                                                <div class="cnt bottomright">
                                                    <div class="btnM">
                                                        <span class="layui-icon layui-icon-logout imgicon"></span>
                                                    </div>
                                                    <span class="imgtitle">停机</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-row layui-col-space10">
                                            <div class="layui-col-sm12 " onclick="DotCheck(event,this)">
                                                <div class="cnt bottomright">
                                                    <div class="btnM">
                                                        <span class="layui-icon layui-icon-list imgicon"></span>
                                                    </div>
                                                    <span class="imgtitle">点检记录</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-row layui-col-space10">
                                            <div class="layui-col-sm12 " onclick="FaultRegistration(event,this)">
                                                <div class="cnt bottomright">
                                                    <div class="btnM">
                                                        <span class="layui-icon layui-icon-list imgicon"></span>
                                                    </div>
                                                    <span class="imgtitle">故障登记</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-row layui-col-space10">
                                            <div class="layui-col-sm12 " onclick="Maintenance(event,this)">
                                                <div class="cnt bottomright">
                                                    <div class="btnM">
                                                        <span class="layui-icon layui-icon-form imgicon"></span>
                                                    </div>
                                                    <span class="imgtitle">ç»´ä¿®</span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="layui-row layui-col-space10">
                                            <div class="layui-col-sm12 " onclick="Resume(event,this)">
                                                <div class="cnt bottomright">
                                                    <div class="btnM">
                                                        <span class="layui-icon layui-icon-table imgicon"></span>
                                                    </div>
                                                    <span class="imgtitle">履历</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-row layui-col-space10">
                                            <div class="layui-col-sm12 " onclick="Process(event,this)">
                                                <div class="cnt bottomright">
                                                    <div class="btnM">
                                                        <span class="layui-icon layui-icon-file imgicon"></span>
                                                    </div>
                                                    <span class="imgtitle">工艺</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-row layui-col-space10">
                                            <div class="layui-col-sm12 " onclick="HStatus(event,this)">
                                                <div class="cnt bottomright">
                                                    <div class="btnM">
                                                        <span class="layui-icon layui-icon-set imgicon"></span>
                                                    </div>
                                                    <span class="imgtitle">状态</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                            </div> -->
                        </div>
                        <div class="layui-row" style="display: none;">
                            <div class="layui-col-xs3 layui-inline">
                                <div class="tr1-1" id="mychart11"> </div>
                            </div>
                            <div class="layui-col-xs3 layui-inline">
                                <div class="tr1-2" id="mychart22"> </div>
                            </div>
                            <div class="layui-col-xs3 layui-inline">
                                <div class="tr1-3" id="mychart3"> </div>
                            </div>
                            <div class="layui-col-xs3 layui-inline">
                                <div class="tr1-4" id="mychart4"> </div>
                            </div>
                        </div>
                        </div>                       
                    </form>
                </div>
            </div>
@@ -281,33 +129,24 @@
        //#region æœ¬é¡µé¢è¢«è°ƒç”¨çš„所有方法

        //#region åˆå§‹åŒ–界面
        function set_ClearBill() {
            var mychart11 = echarts.init(document.getElementById('mychart11'));
            var mychart22 = echarts.init(document.getElementById('mychart22'));
            var mychart3 = echarts.init(document.getElementById('mychart3'));
            var mychart4 = echarts.init(document.getElementById('mychart4'));
            get_Histogram1(mychart11, '');//柱状图1
            get_LineChart(mychart22, '');//折线
            get_Statistics(mychart3, '');//饼图
            get_Histogram4(mychart4, '');//柱状图4

        function set_ClearBill() {            
            //查询
            get_Display_Tree();
        }
        //#endregion

        //查询工单
        //查询部门设备
        function Check(HDeptID) {
            wktag = 0;
            $("#btomleft").html("");
            $.ajax({
                url: GetWEBURL() + '/Sc_HEquipStateDistribution/Sc_HEquipStateDistribution_Souce',
                url: GetWEBURL() + '/Sc_HEquipStateDistribution/Get_HEquipStateList',
                type: "GET",
                data: { "HDeptID": HDeptID, "user": sessionStorage["HUserName"], "OrganizationID": sessionStorage["OrganizationID"] },
                dataType: "json",//数据类型可以为 text xml json  script  jsonp
                success: function (data) {

                    var LoadData1 = data.data.h_p_sc_HDeptSouceMOList;
                    var LoadData1 = data.data.h_p_sc_HDeptEquipList;
                    if (LoadData1.length > 0)  //工单列表数据
                    {

@@ -317,41 +156,34 @@
                            html1 += '<div class="cns" id="bs' + (i + 1) + '" onclick="CheckBtom(this,' + (i + 1) + ')">';
                            html1 += '<dl>';
                            html1 += '<dd class="tcenter">';
                            html1 += '<h1 style="display:none;"><span>生产订单号主ID：</span><span id="df' + (i + 1) + '">' + LoadData1[i].生产订单主内码 + '</span></h1>';
                            html1 += '<h1 style="display:none;"><span>生产订单子ID：</span><span id="ds' + (i + 1) + '">' + LoadData1[i].生产订单子内码 + '</span></h1>';
                            html1 += '<h1 style="display:none;"><span>产线ID：</span><span id="cs' + (i + 1) + '">' + LoadData1[i].HSourceID + '</span></h1>';
                            html1 += '<h1 style="display:none;"><span>设备ID：</span><span id="sb' + (i + 1) + '">' + LoadData1[i].设备id + '</span></h1>';

                            html1 += '<h1 style="display:none;"><span>设备ID：</span><span id="sb' + (i + 1) + '">' + LoadData1[i].HEquipID + '</span></h1>';
                            html1 += '<p><span>设备编码：</span><span id="sbbm' + (i + 1) + '">' + LoadData1[i].设备编码 + '</span></p>';
                            html1 += '<p><span>设备名称：</span><span id="sbmc' + (i + 1) + '">' + LoadData1[i].设备名称 + '</span></p>';
                            html1 += '<p><span>产线：</span><span id="cxmc' + (i + 1) + '">' + LoadData1[i].产线 + '</span></p>';
                            html1 += '<p><span>当前订单：</span><span id="gd' + (i + 1) + '">' + LoadData1[i].生产订单 + '</span></p>';
                            html1 += '<p><span>订单数量：</span><span id="ddqty' + (i + 1) + '">' + LoadData1[i].任务单数量 + '</span></p>';
                            html1 += '<p><span>完成数量：</span><span id="wcqty' + (i + 1) + '">' + LoadData1[i].流转卡数量 + '</span></p>';
                            switch (LoadData1[i].设备状态) {
                                case "空闲":
                                    html1 += '<p><span>当前状态：</span><span class="gj_icon color_border6"></span><span>' + LoadData1[i].设备状态 + '</span></p>';
                            html1 += '<p><span>运行时长：</span><span id="cxmc' + (i + 1) + '">' + LoadData1[i].运行时间 + '</span></p>';
                            html1 += '<p><span>停机时长：</span><span id="gd' + (i + 1) + '">' + LoadData1[i].停机时间 + '</span></p>';
                            html1 += '<p><span>关机时长：</span><span id="ddqty' + (i + 1) + '">' + LoadData1[i].关机时间 + '</span></p>';
                            switch (LoadData1[i].当前状态) {
                                case "正常运行":
                                    html1 += '<p><span>当前状态：</span><span class="gj_icon color_border4"></span><span>' + LoadData1[i].当前状态 + '</span></p>';
                                    break;
                                case "开机":
                                    html1 += '<p><span>当前状态：</span><span class="gj_icon color_border4"></span><span>' + LoadData1[i].设备状态 + '</span></p>';
                                    html1 += '<p><span>当前状态：</span><span class="gj_icon color_border4"></span><span>' + LoadData1[i].当前状态 + '</span></p>';
                                    break;
                                case "离线":
                                    html1 += '<p><span>当前状态：</span><span class="gj_icon color_border3"></span><span>' + LoadData1[i].当前状态 + '</span></p>';
                                    break;                              
                                case "待机":
                                    html1 += '<p><span>当前状态：</span><span class="gj_icon color_border1"></span><span>' + LoadData1[i].当前状态 + '</span></p>';
                                    break;
                                case "未知":
                                    html1 += '<p><span>当前状态：</span><span class="gj_icon color_border3"></span><span>' + LoadData1[i].当前状态 + '</span></p>';
                                    break;
                                case "停机":
                                    html1 += '<p><span>当前状态：</span><span class="gj_icon color_border3"></span><span>' + LoadData1[i].设备状态 + '</span></p>';
                                    break;
                                case "生产":
                                    html1 += '<p><span>当前状态：</span><span class="gj_icon color_border2"></span><span>' + LoadData1[i].设备状态 + '</span></p>';
                                    break;
                                case "维修中":
                                    html1 += '<p><span>当前状态：</span><span class="gj_icon color_border5"></span><span>' + LoadData1[i].设备状态 + '</span></p>';
                                    break;
                                case "故障":
                                    html1 += '<p><span>当前状态：</span><span class="gj_icon color_border1"></span><span>' + LoadData1[i].设备状态 + '</span></p>';
                                    break;
                                case "维修完成":
                                    html1 += '<p><span>当前状态：</span><span class="gj_icon color_border7"></span><span>' + LoadData1[i].设备状态 + '</span></p>';
                                    html1 += '<p><span>当前状态：</span><span class="gj_icon color_border3"></span><span>' + LoadData1[i].当前状态 + '</span></p>';
                                    break;
                                default:
                            }
                            html1 += '<img src="../../layuiadmin/images/ZSJ.png" style="width:160px; height:80px; object-fit:contain;" alt="注塑机图片">';
                            html1 += '</dd>';
                            html1 += '</dl>';
                            html1 += '</div>';
@@ -455,24 +287,16 @@
    //#endregion

    //工单列表选中
    function CheckBtom(obj, i) {
        workcode = $("#gd" + i + "").html(); //通过样式ID获取html内容(工单号)
        HICMOInterID = $("#df" + i + "").html();     //生产订单主内码
        HICMOEntryID = $("#ds" + i + "").html();     //生产订单子内码
    function CheckBtom(obj, i) {        
        HEquipID = $("#sb" + i + "").html();     //设备id
        HEquipNumber = $("#sbbm" + i + "").html();     //设备编码
        HEquipName = $("#sbmc" + i + "").html();     //设备名称
        HSourceID = $("#cs" + i + "").html();     //产线id
        HEquipName = $("#sbmc" + i + "").html();     //设备名称       

        $('.cns').removeClass('check1');  //删除不同父级clss样式相同的所有元素
        $("#bs" + i + "").addClass('check1'); // æ·»åŠ å½“前元素的样式
        if (HEquipID != "" && HEquipID != null) {
            wktag = 1;
        }
        sWhere = {
            HDeptID: HDeptID
            , HSourceID: HSourceID
        }
        }        

        /* ç‚¹å‡» è®¾å¤‡ å¼€å¯è®¾å¤‡è¯¦æƒ…弹窗，设备状态详情页面 
        *详情页面：日期过滤、设备运行分析、警报（可以先取值为最近的安灯管理）取值用 è®¾å¤‡è¿è¡ŒçŠ¶æ€è¡¨ Sb_EquipRunningStatus(设备当前状态效率分析) 
@@ -493,661 +317,7 @@

            },
        });
        // FourReport(JSON.stringify(sWhere));
    }

    //查询 éƒ¨é—¨+产线 4个图表 èµ‹å€¼
    function FourReport(sWhere) {
        $.ajax({
            url: GetWEBURL() + '/Sc_HEquipStateDistribution/Get_EquipStateDistribution_FourReport',
            type: "GET",
            data: { "sWhere": sWhere, "user": sessionStorage["HUserName"], "OrganizationID": sessionStorage["OrganizationID"] },
            dataType: "json",//数据类型可以为 text xml json  script  jsonp
            success: function (data) {
                var chartData = data.data.h_p_Sc_FourStateDistributionReport;
                var chartData1 = data.data.h_p_Sc_FourStateDistributionReport1;
                var chartData2 = data.data.h_p_Sc_FourStateDistributionReport2;
                var chartData3 = data.data.h_p_Sc_FourStateDistributionReport3;
                var mychart11 = echarts.init(document.getElementById('mychart11'));
                var mychart22 = echarts.init(document.getElementById('mychart22'));
                var mychart3 = echarts.init(document.getElementById('mychart3'));
                var mychart4 = echarts.init(document.getElementById('mychart4'));

                get_Histogram1(mychart11, chartData);
                get_LineChart(mychart22, chartData1);
                get_Statistics(mychart3, chartData2);
                get_Histogram4(mychart4, chartData3);

            },
            error: function (err) {
                layer.alert(err.Message, { time: 1 * 2000, icon: 5 });
                return false;
            }
        });
    }

    //柱状图
    function get_Histogram1(mychart11, chartData) {
        // é»˜è®¤çš„option结构
        var option = {
            title: {
                text: '近七天产能', // é»˜è®¤æ ‡é¢˜ä¸ºç©º
                left: 'center',
                top: '10%', // è°ƒæ•´æ ‡é¢˜ä½ç½®ï¼Œæ”¾åˆ°æœ€ä¸Šé¢
                textStyle: {
                    fontSize: 18,
                    color: '#ff0000'
                }
            },
            grid: {
                top: '25%', // è°ƒæ•´grid的top值，给标题留出空间
                bottom: '20%',
                left: '10%',
                right: '10%'
            },
            xAxis: {
                type: 'category',
                data: [] // é»˜è®¤x轴数据为空
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [], // é»˜è®¤series数据为空
                    type: 'bar'
                }
            ]
        };

        // å¦‚果有数据，更新option的内容
        if (chartData && chartData.length > 0) {
            option.title.text = '近七天产能'; // æ­£å¸¸æ•°æ®æ—¶æ²¡æœ‰æ ‡é¢˜
            option.xAxis.data = chartData.map(item => item.日期); // è®¾ç½®x轴数据
            option.series[0].data = chartData.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 = '暂无数据';
        }

        // æ›´æ–°å›¾è¡¨
        mychart11.setOption(option);
    }

    //柱状图2
    function get_LineChart(mychart22, chartData1) {
        // é»˜è®¤çš„option结构
        var option = {
            title: {
                text: 'ç»´ä¿®', // é»˜è®¤æ ‡é¢˜ä¸ºç©º
                left: 'center',
                top: '10%', // è°ƒæ•´æ ‡é¢˜ä½ç½®ï¼Œæ”¾åˆ°æœ€ä¸Šé¢
                textStyle: {
                    fontSize: 18,
                    color: '#ff0000'
                }
            },
            axisLabel: {
                show: true,
                interval: 0,
                color: '#15b1fa',
                formatter: function (value) {
                    var ret = "";//拼接加\n返回的类目项
                    var maxLength = 1;//每项显示文字个数
                    var valLength = value.length;//X轴类目项的文字个数
                    var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                    if (rowN > 1)//如果类目项的文字大于3,
                    {
                        for (var i = 0; i < rowN; i++) {
                            var temp = "";//每次截取的字符串
                            var start = i * maxLength;//开始截取的位置
                            var end = start + maxLength;//结束截取的位置
                            //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                            temp = value.substring(start, end) + "\n";
                            ret += temp; //凭借最终的字符串
                        }
                        return ret;
                    }
                    else {
                        return value;
                    }
                }
            },
            grid: {
                top: '25%', // è°ƒæ•´grid的top值，给标题留出空间
                bottom: '20%',
                left: '10%',
                right: '10%'
            },
            xAxis: {
                type: 'category',
                data: [] // é»˜è®¤x轴数据为空
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [], // é»˜è®¤series数据为空
                    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);
    }

    //饼图
    function get_Statistics(mychart3, chartData2) {
        // å¦‚æžœ chartData2 ä¸ºç©ºï¼Œæä¾›ä¸€ä¸ªâ€œæ— æ•°æ®â€æç¤º
        if (chartData2.length === 0) {
            mychart3.setOption({
                title: {
                    text: '暂无数据',
                    left: 'center',
                    top: '10%',
                    textStyle: {
                        color: 'red', // è®¾ç½®æ ‡é¢˜é¢œè‰²ä¸ºçº¢è‰²
                        fontSize: 18,
                        fontWeight: 'bold'
                    }
                },
                series: [],  // æ¸…空数据
                graphic: []  // æ¸…空图形中的文本
            });
            return;
        }

        // çŠ¶æ€é¢œè‰²æ˜ å°„
        const statusColorMap = {
            '开机': '#28a745',    // ç»¿è‰²
            '故障': '#ff63a5',    // æ¡ƒçº¢è‰²
            '停机': '#f0ad4e',    // é»„色
            '未知': '#6c757d'     // ç°è‰²
        };

        // è®¡ç®—开机率
        const totalDevices = chartData2.reduce((sum, item) => sum + item.数量, 0);
        const onlineDevices = chartData2.find(item => item.状态 === '开机')?.数量 || 0;
        const onlineRate = totalDevices === 0 ? 0 : (onlineDevices / totalDevices * 100).toFixed(2);

        // åŠ¨æ€ç”Ÿæˆé¥¼å›¾æ•°æ®ï¼Œå¹¶æ ¹æ®çŠ¶æ€è®¾ç½®é¢œè‰²
        var data = chartData2.map(function (item) {
            // èŽ·å–当前状态的颜色，默认为灰色
            var color = statusColorMap[item.状态] || statusColorMap['未知'];

            return {
                value: item.数量,
                name: item.状态,
                itemStyle: {
                    color: color  // ä¸ºæ¯ä¸ªçŠ¶æ€è®¾ç½®å¯¹åº”的颜色
                }
            };
        });

        // å›¾è¡¨çš„配置项
        var option = {
            title: {
                text: '设备状态分析对比',
                left: 'center',
                top: '10%',  // å°†æ ‡é¢˜æ”¾ç½®åˆ°é¡¶éƒ¨
                textStyle: {
                    color: 'red',  // è®¾ç½®æ ‡é¢˜å­—体颜色为红色
                    fontSize: 18,
                    fontWeight: 'bold'
                }
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '设备状态',
                    type: 'pie',
                    radius: '50%',
                    data: data,  // ä½¿ç”¨åŠ¨æ€ç”Ÿæˆçš„数据
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ],
            graphic: [{
                type: 'text',
                left: 'center',
                top: '85%',  // è°ƒæ•´æ–‡æœ¬ä½ç½®ï¼Œè®©å…¶ç¨å¾®æ›´å¾€ä¸‹
                style: {
                    text: `开机率: ${onlineRate}%`,  // æ˜¾ç¤ºå¼€æœºçŽ‡
                    font: '16px Arial',
                    fill: '#00aaff'  // ä½¿ç”¨æµ…蓝色显示开机率
                }
            }]
        };

        // è®¾ç½®å›¾è¡¨çš„配置项
        mychart3.setOption(option);
    }

    //柱状图4
    function get_Histogram4(mychart4, chartData3) {
        // é»˜è®¤çš„option结构
        var option = {
            title: {
                text: 'ç»´ä¿®', // é»˜è®¤æ ‡é¢˜ä¸ºç©º
                left: 'center',
                top: '10%', // è°ƒæ•´æ ‡é¢˜ä½ç½®ï¼Œæ”¾åˆ°æœ€ä¸Šé¢
                textStyle: {
                    fontSize: 18,
                    color: '#ff0000'
                }
            },
            axisLabel: {
                show: true,
                interval: 0,
                color: '#15b1fa',
                formatter: function (value) {
                    var ret = "";//拼接加\n返回的类目项
                    var maxLength = 1;//每项显示文字个数
                    var valLength = value.length;//X轴类目项的文字个数
                    var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                    if (rowN > 1)//如果类目项的文字大于3,
                    {
                        for (var i = 0; i < rowN; i++) {
                            var temp = "";//每次截取的字符串
                            var start = i * maxLength;//开始截取的位置
                            var end = start + maxLength;//结束截取的位置
                            //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                            temp = value.substring(start, end) + "\n";
                            ret += temp; //凭借最终的字符串
                        }
                        return ret;
                    }
                    else {
                        return value;
                    }
                }
            },
            grid: {
                top: '25%', // è°ƒæ•´grid的top值，给标题留出空间
                bottom: '20%',
                left: '10%',
                right: '10%'
            },
            xAxis: {
                type: 'category',
                data: [] // é»˜è®¤x轴数据为空
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [], // é»˜è®¤series数据为空
                    type: 'bar'
                }
            ]
        };

        // å¦‚果有数据，更新option的内容
        if (chartData3 && chartData3.length > 0) {
            option.title.text = 'ç»´ä¿®'; // æ­£å¸¸æ•°æ®æ—¶æ²¡æœ‰æ ‡é¢˜
            option.xAxis.data = chartData3.map(item => item.维修项目); // è®¾ç½®x轴数据
            option.series[0].data = chartData3.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 = '暂无数据';
        }

        // æ›´æ–°å›¾è¡¨
        mychart4.setOption(option);
    }



    //#region   æ“ä½œå°æŒ‰é’®ç‚¹å‡»äº‹ä»¶

    //开机按钮点击事件
    function PowerOn(event, obj) {
        if (wktag == 0) {
            layer.alert("请选择对应设备", { icon: 5 });
            return false;
        }
        layer.open({
            type: 2,
            skin: 'layui-layer-rim', //加上边框
            title: '新增开机单',
            closeBtn: 1,
            shift: 2,
            area: ['100%', '100%'],
            maxmin: true,
            content: '../../设备管理/设备开机单/Sb_EquipBeginBill.html?OperationType=1&linterid=0&HSouceBillType=',
            end: function () {

            },
            success: function (dom, index) {
                var data = [];
                data.push({
                    "HEquipID": HEquipID
                });

                //通过索引获取到当前iframe弹出层
                var iframe = window['layui-layer-iframe' + index];
                //调用iframe弹出层内的方法
                iframe.edit(data);
            },
        });
    }

    //停机按钮点击事件
    function PowerOff(event, obj) {
        if (wktag == 0) {
            layer.alert("请选择对应设备", { icon: 5 });
            return false;
        }
        layer.open({
            type: 2,
            skin: 'layui-layer-rim', //加上边框
            title: '新增停机单',
            closeBtn: 1,
            shift: 2,
            area: ['100%', '100%'],
            maxmin: true,
            content: '../../设备管理/设备停机单/Sb_EquipStopBill.html?OperationType=1&linterid=0&HSouceBillType=',
            end: function () {

            },
            success: function (dom, index) {
                var data = [];
                data.push({
                    "HEquipID": HEquipID
                });

                //通过索引获取到当前iframe弹出层
                var iframe = window['layui-layer-iframe' + index];
                //调用iframe弹出层内的方法
                iframe.edit(data);
            },
        });
    }

    //点检记录按钮点击事件
    function DotCheck(event, obj) {
        if (wktag == 0) {
            layer.alert("请选择对应设备", { icon: 5 });
            return false;
        }
        layer.open({
            type: 2,
            skin: 'layui-layer-rim', //加上边框
            title: '查看设备月点检记录',
            closeBtn: 1,
            shift: 2,
            area: ['100%', '100%'],
            maxmin: true,
            content: '../../车间管理/启动点检单/Sc_WorkDotCheckBillList_Day.html?OperationType=设备&linterid=' + HEquipID + '',
            end: function () {

            },
            success: function (dom, index) {
                var data = [];
                data.push({
                    "HEquipID": HEquipID,
                    "HEquipType": "设备"
                });

                //通过索引获取到当前iframe弹出层
                var iframe = window['layui-layer-iframe' + index];
                //调用iframe弹出层内的方法
                iframe.edit(data);

            },
        });
    }

    //故障登记按钮点击事件
    function FaultRegistration(event, obj) {
        if (wktag == 0) {
            layer.alert("请选择对应设备", { icon: 5 });
            return false;
        }
        layer.open({
            type: 2,
            skin: 'layui-layer-rim', //加上边框
            title: '新增故障登记单',
            closeBtn: 1,
            shift: 2,
            area: ['100%', '100%'],
            maxmin: true,
            content: '../../设备管理/Sb_Add_EqpConkBookBillList.html?OperationType=1&linterid=0&HSouceBillType=',
            end: function () {

            },
            success: function (dom, index) {
                var data = [];
                data.push({
                    "HEquipID": HEquipID
                });

                //通过索引获取到当前iframe弹出层
                var iframe = window['layui-layer-iframe' + index];
                //调用iframe弹出层内的方法
                iframe.edit(data);
            },
        });
    }

    //维修记录按钮点击事件
    function Maintenance(event, obj) {
        if (wktag == 0) {
            layer.alert("请选择对应设备", { icon: 5 });
            return false;
        }
        layer.open({
            type: 2,
            skin: 'layui-layer-rim', //加上边框
            title: '新增维修记录单',
            closeBtn: 1,
            shift: 2,
            area: ['100%', '100%'],
            maxmin: true,
            content: '../../设备管理/Sb_Add_EqpMaintenanceBillList.html?OperationType=1&linterid=0&HSouceBillType=',
            end: function () {

            },
            success: function (dom, index) {
                var data = [];
                data.push({
                    "HEquipID": HEquipID
                });

                //通过索引获取到当前iframe弹出层
                var iframe = window['layui-layer-iframe' + index];
                //调用iframe弹出层内的方法
                iframe.edit(data);
            },
        });
    }

    //履历按钮点击事件
    function Resume(event, obj) {
        if (wktag == 0) {
            layer.alert("请选择对应设备", { icon: 5 });
            return false;
        }
        layer.open({
            type: 2,
            skin: 'layui-layer-rim', //加上边框
            title: '查看设备履历',
            closeBtn: 1,
            shift: 2,
            area: ['100%', '100%'],
            maxmin: true,
            content: '../../设备管理/设备报表/Sb_EquipResumeCheckQuery.html?OperationType=1&linterid=0&HSouceBillType=',
            end: function () {

            },
            success: function (dom, index) {
                var data = [];
                data.push({
                    "HEquipID": HEquipID,
                    "HEquipNumber": HEquipNumber,
                    "HEquipName": HEquipName
                });

                //通过索引获取到当前iframe弹出层
                var iframe = window['layui-layer-iframe' + index];
                //调用iframe弹出层内的方法
                iframe.edit(data);
            },
        });
    }

    //工艺按钮点击事件
    function Process(event, obj) {
        if (wktag == 0) {
            layer.alert("请选择对应设备", { icon: 5 });
            return false;
        }
        layer.open({
            type: 2,
            skin: 'layui-layer-rim', //加上边框
            title: '查看设备工艺参数',
            closeBtn: 1,
            shift: 2,
            area: ['100%', '100%'],
            maxmin: true,
            content: '../../生产管理/订单状态分布/Sc_EquipmentProcessList.html?OperationType=4&linterid=0&HSouceBillType=',
            end: function () {

            },
            success: function (dom, index) {
                var data = [];
                data.push({
                    "HEquipID": HEquipID,
                    "HICMOInterID": HICMOInterID,
                    "HICMOEntryID": HICMOEntryID
                });

                //通过索引获取到当前iframe弹出层
                var iframe = window['layui-layer-iframe' + index];
                //调用iframe弹出层内的方法
                iframe.edit(data);

            },
        });
    }

    //状态按钮点击事件
    function HStatus(event, obj) {
        if (wktag == 0) {
            layer.alert("请选择对应设备", { icon: 5 });
            return false;
        }
        layer.open({
            type: 2,
            skin: 'layui-layer-rim', //加上边框
            title: '查看设备OEE',
            closeBtn: 1,
            shift: 2,
            area: ['100%', '100%'],
            maxmin: true,
            content: '../../生产管理/订单状态分布/Sc_OEEStatusReport.html?OperationType=4&linterid=0&HSouceBillType=',
            end: function () {

            },
            success: function (dom, index) {
                var data = [];
                data.push({
                    "HEquipNumber": HEquipNumber
                });

                //通过索引获取到当前iframe弹出层
                var iframe = window['layui-layer-iframe' + index];
                //调用iframe弹出层内的方法
                iframe.edit(data);

            },
        });
    }


    //#endregion

</script>