完善数采报表

zrg

7 天以前 1022579768ef1e8ec02565ef6e007bc946e3a89a

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

@@ -14,9 +14,10 @@
    <script src="../../layuiadmin/echarts.min.js"></script>
    <link href="../../layuiadmin/layui/css/ReportPlatform.css" rel="stylesheet" />
    <script src="../../layuiadmin/Scripts/webConfig.js"></script>
    <script src="../../layuiadmin/zgqCustom/zgqCustom.js"></script>
    <style>
        /*树状图点击高亮变色*/
        .layui-tree-set-active>.layui-tree-entry .layui-tree-main {
        .layui-tree-set-active > .layui-tree-entry .layui-tree-main {
            background: #aef0f7;
        }

@@ -35,10 +36,10 @@
            /*所有属性变化在0.6秒内执行动画*/
        }

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

        .imgtitle {
            width: 70%;
@@ -56,14 +57,14 @@
            border-radius: 5px;
        }

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

        .check1 {
            cursor: pointer;
@@ -126,131 +127,42 @@
                            <div class="layui-col-xs10 layui-inline" style="border: solid 1.5px #e0d6d64d;">
                                <div class="layui-form-item" style="display: flex; justify-content: space-around;">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">日期范围</label>
                                        <div class="layui-inline" id="ID-laydate-range">
                                            <div class="layui-input-inline">
                                                <input type="text" autocomplete="off" id="ID-laydate-start-date"
                                                    class="layui-input" placeholder="开始日期">
                                            </div>
                                            <div class="layui-form-mid">-</div>
                                            <div class="layui-input-inline">
                                                <input type="text" autocomplete="off" id="ID-laydate-end-date"
                                                    class="layui-input" placeholder="结束日期">
                                            </div>
                                        <label class="layui-form-label">日期间隔</label>
                                        <div class="layui-input-block">
                                            <select name="HInitTimeCycle" id="HInitTimeCycle"
                                                    class="ForFilteringSchemes" lay-filter="HInitTimeCycle"
                                                    style="width:190px;">
                                            </select>
                                        </div>
                                    </div>

                                    <div class="layui-btn-group layui-inline" id="modeBtnGroup">
                                        <button type="button" class="layui-btn" data-mode="day">单日数据</button>
                                        <button type="button" class="layui-btn layui-btn-primary layui-border"
                                            data-mode="history">历史数据</button>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">开始日期</label>
                                        <div class="layui-input-block">
                                            <input type="date" class="layui-input ForFilteringSchemes" name="HDate1"
                                                   id="HDate1">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">结束日期</label>
                                        <div class="layui-input-block">
                                            <input type="date" class="layui-input ForFilteringSchemes" name="HDate2"
                                                   id="HDate2" style="width:190px;">
                                        </div>
                                    </div>                                  
                                    <button class="layui-btn layuiadmin-btn-order" type="button" lay-submit=""
                                            lay-filter="btnSearch" id="btnSearch">
                                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                    </button>
                                    <button class="layui-btn layuiadmin-btn-order" type="button" lay-submit=""
                                            lay-filter="btnReSearch" id="btnReSearch" style="padding:0 5px">
                                        é€€å‡º
                                    </button>
                                </div>
                                <div id="chartContainer" style="height:600px;display:block;overflow-y:auto;">
                                <div id="chartContainer" style="height:800px;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>
                        <div class="layui-row">
                            <!-- <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 class="layui-row">                           
                        </div>
                    </form>
                </div>
@@ -259,13 +171,7 @@
    </div>
</body>

<script>
    var wktag = 0;
    var HEquipID = 0;//设备id
    var HEquipNumber = "";//设备编码
    var HEquipName = "";//设备名称
    var HSourceID = "";//产线id
    var HDeptID = "";
<script>   
    layui.config({
        base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
@@ -293,6 +199,25 @@

        //#region è§¦å‘事件：包括form.on(){}格式的所有点击事件、选择事件等

        //日期间隔下拉列表监听
        form.on('select(HInitTimeCycle)', function (data) {
            var HInitTimeCycle = $("#HInitTimeCycle").val() * 1;
            //若日期间隔不为 ä»»æ„é—´éš”，则禁用开始日期与结束日期的选择
            if (HInitTimeCycle != -1) {
                $('#HDate1').prop('disabled', true);
                $('#HDate2').prop('disabled', true);

                $("#HDate1").val(Format(new Date(new Date() - 1000 * 60 * 60 * 24 * HInitTimeCycle), "yyyy-MM-dd"));
                $("#HDate2").val(Format(new Date(), "yyyy-MM-dd"));

                //执行查询方法
                Check();
            } else {
                $('#HDate1').prop('disabled', false);
                $('#HDate2').prop('disabled', false);
            }
        });


        //#endregion

@@ -301,46 +226,50 @@

        //#region åˆå§‹åŒ–界面
        function set_ClearBill() {
            Init_dateRange()

            // 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
           
            //初始化日期间隔、开始日期、结束日期
            setSelect_HInitTimeCycle();
            //若日期间隔不为 ä»»æ„é—´éš”，则禁用开始日期与结束日期的选择
            var HInitTimeCycle = $("#HInitTimeCycle").val() * 1;
            if (HInitTimeCycle != -1) {
                $('#HDate1').prop('disabled', true);
                $('#HDate2').prop('disabled', true);
            } else {
                $('#HDate1').prop('disabled', false);
                $('#HDate2').prop('disabled', false);
            }
            $("#HDate1").val(Format(new Date(new Date() - 1000 * 60 * 60 * 24 * HInitTimeCycle), "yyyy-MM-dd"));
            $("#HDate2").val(Format(new Date(), "yyyy-MM-dd"));

            //查询
            get_Display_Tree();
        }
        //#endregion

        //#region åˆå§‹åŒ–日期选择器
        function Init_dateRange() {
            $("#ID-laydate-start-date").val(util.toDateString(new Date(), 'yyyy-MM-dd'))
            $("#ID-laydate-end-date").val(util.toDateString(new Date(), 'yyyy-MM-dd'))

            var laydate = layui.laydate;
            // æ—¥æœŸèŒƒå›´ - å·¦å³é¢æ¿ç‹¬ç«‹é€‰æ‹©æ¨¡å¼
            laydate.render({
                elem: '#ID-laydate-range',
                range: ['#ID-laydate-start-date', '#ID-laydate-end-date']
            });
            // æ—¥æœŸèŒƒå›´ - å·¦å³é¢æ¿è”动选择模式
            laydate.render({
                elem: '#ID-laydate-rangeLinked',
                range: ['#ID-laydate-start-date-1', '#ID-laydate-end-date-1'],
                rangeLinked: true // å¼€å¯æ—¥æœŸèŒƒå›´é€‰æ‹©æ—¶çš„区间联动标注模式 ---  2.8+ æ–°å¢ž
            });
        //#region åˆå§‹æ—¥æœŸé—´éš” ä¸‹æ‹‰åˆ—表
        function setSelect_HInitTimeCycle() {
            var valueList = [0, 1, 2, 3, 4, 5, 6, 29];
            var titleList = ["今天", "近两天", "近三天", "近四天", "近五天", "近六天", "近七天", "近30天"];

            var HInitTimeCycle_ArrayList = '<option  value="-1" selected="selected" >任意间隔</option>';
            for (var i = 0; i < valueList.length; i++) {
                HInitTimeCycle_ArrayList += '<option  style="color:blue;" value="' + valueList[i] + '">' + titleList[i] + '</option>';
            }

            $("#HInitTimeCycle").empty();
            $("#HInitTimeCycle").append(HInitTimeCycle_ArrayList);
           

            $("#HInitTimeCycle").val("0");
            form.render('select');
        }
        //#endregion

       
        //查询部门 è®¾å¤‡å¯¹åº”的报表
        function Check() {
            var HBeginDate = $("#ID-laydate-start-date").val()
            var HEndDate = $("#ID-laydate-end-date").val()
            var HBeginDate = $("#HDate1").val()
            var HEndDate = $("#HDate2").val()

            $.ajax({
                url: GetWEBURL() + '/DAQ_EquipRunningSlice/GetHEquipStatusReportList_DAQ',
@@ -429,74 +358,6 @@

                }
            })

            //wktag = 0;
            //$("#btomleft").html("");
            //$.ajax({
            //    url: GetWEBURL() + '/Sc_HEquipStateDistribution/Sc_HEquipStateDistribution_Souce',
            //    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;
            //        if (LoadData1.length > 0)  //工单列表数据
            //        {
            //
            //            for (var i = 0; i < LoadData1.length; i++) {
            //                var html1 = '';
            //                html1 += '<div class="layui-col-sm12 layui-col-md2" style="margin: 6px;width: 180px;">';
            //                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 += '<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>';
            //                        break;
            //                    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_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>';
            //                        break;
            //                    default:
            //                }
            //                html1 += '</dd>';
            //                html1 += '</dl>';
            //                html1 += '</div>';
            //                html1 += '</div>';
            //                $("#btomleft").append(html1);
            //            }
            //        }
            //    },
            //    error: function (err) {
            //        layer.alert(err.Message, { time: 1 * 2000, icon: 5 });
            //        return false;
            //    }
            //});
        }


@@ -590,720 +451,9 @@
                subStr += '{"title": "' + subMenu.id + "-" + subMenu.title + '", "id": "' + subMenu.id + '","HPID": "' + parentID + '"},';
            }
            return subStr;
        }


        $('#modeBtnGroup').on('click', 'button', function (e) {
            console.log("点击成功！event =", e);  // event äº‹ä»¶æ‹¿åˆ°

            var $btn = $(this);
            var $btnGroup = $btn.closest('div');
            $btnGroup.find('button').addClass("layui-btn-primary").addClass("layui-border")
            $btn.removeClass("layui-btn-primary").removeClass("layui-border")
            var mode = $btn.data('mode');  // day / history


            //通过mode判断执行哪个查询，如果是day，则查询的时候，开始日期和结束日期都是当天(与日期范围无关),如果是history，则按照日期范围和历史数据进行筛选
        });
        }       

    });
    //#endregion

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

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

        /* ç‚¹å‡» è®¾å¤‡ å¼€å¯è®¾å¤‡è¯¦æƒ…弹窗，设备状态详情页面 
        *详情页面：日期过滤、设备运行分析、警报（可以先取值为最近的安灯管理）取值用 è®¾å¤‡è¿è¡ŒçŠ¶æ€è¡¨ Sb_EquipRunningStatus(设备当前状态效率分析) 
        */
        layer.open({
            type: 2,
            skin: 'layui-layer-rim', //加上边框
            title: '设备详情',
            closeBtn: 1,
            shift: 2,
            area: ['100%', '100%'],
            maxmin: true,
            content: './DAQ_EvidenceEquipmentCockpitDetail.html?HEquipID=' + HEquipID,
            end: function () {

            },
            success: function (dom, index) {

            },
        });
        // 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>

</html>