1

zrg

7 天以前 75a3365af2e78f89c464c9cdf87a91ab5b577e77

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

@@ -12,6 +12,7 @@
    <script src="../../layuiadmin/Scripts/jquery-1.4.1.js"></script>
    <script src="../../layuiadmin/layui/layui1.js"></script>
    <script src="../../layuiadmin/echarts.min.js"></script>
    <script src="../../layuiadmin/dayjs.min.js"></script>
    <link href="../../layuiadmin/layui/css/ReportPlatform.css" rel="stylesheet" />
    <script src="../../layuiadmin/Scripts/webConfig.js"></script>
    <style>
@@ -266,6 +267,8 @@
    var HEquipName = "";//设备名称
    var HSourceID = "";//产线id
    var HDeptID = "";
    var pieData = []; // é¥¼å›¾æ•°æ®é›†åˆ
    var timelineData = []; //时序图数据集合 
    layui.config({
        base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
@@ -345,90 +348,39 @@
            $.ajax({
                url: GetWEBURL() + '/DAQ_EquipRunningSlice/GetHEquipStatusReportList_DAQ',
                type: "GET",
                async: false,
                data: { "HDeptID": HDeptID, "HEquipID": HEquipID, HBeginDate: HBeginDate, HEndDate: HEndDate, "user": sessionStorage["HUserName"] },
                dataType: "json",//数据类型可以为 text xml json  script  jsonp
                success: function (res) {
                    data = res.data
                    debugger

                    if (data.length < 1) {
                        return
                    }

                    var $container = $("#chartContainer");
                    $container.empty();

                    for (var i = 0; i < data.length; i++) {
                        var hmainid = data[i].hmainid;
                        var equipName = data[i].设备名称;
                        var dateStr = data[i].所属日期.split('T')[0];

                        // æ—¶é—´å­—段
                        var runTime = data[i].运行时间;         // è¿è¡Œ
                        var stopTime = data[i].机时间;         // åœæœº
                        var alarmTime = data[i].告警时间;      // å‘Šè­¦
                        var offTime = data[i].关机时间;        // å…³æœº
                        var total = runTime + stopTime + alarmTime + offTime;

                        // ==============================================
                        // 1. åˆ›å»ºæ¯ä¸ªè®¾å¤‡çš„图表外壳（左右布局：饼图 + æ—¶åºå›¾ï¼‰
                        // ==============================================
                        var itemHtml = `
            <div style="width:100%; height:420px; display:flex; gap:20px; margin-bottom:30px; border:1px solid #eee; padding:15px; border-radius:8px;">
                <div id="chart_pie_${hmainid}" style="width:38%; height:100%;"></div>
                <div id="chart_time_${hmainid}" style="width:62%; height:100%;"></div>
            </div>`;
                        $container.append(itemHtml);

                        // ==============================================
                        // 2. å·¦ä¾§çŽ¯å½¢é¥¼å›¾ï¼ˆè¿è¡Œ/停机/告警/关机 å æ¯”）
                        // ==============================================
                        var pieChart = echarts.init(document.getElementById(`chart_pie_${hmainid}`));
                        pieChart.setOption({
                            title: { text: `${dateStr} ${equipName}`, left: 'center', textStyle: { fontSize: 16 } },
                            tooltip: { trigger: 'item', formatter: '{b}: {c}H ({d}%)' },
                            legend: { orient: 'vertical', right: '2%', top: 'middle', textStyle: { fontSize: 13 } },
                            series: [{
                                type: 'pie',
                                radius: ['42%', '70%'],
                                center: ['45%', '55%'],
                                itemStyle: { borderRadius: 4, borderColor: '#fff', borderWidth: 2 },
                                label: { show: false },
                                data: [
                                    { value: runTime, name: '运行', itemStyle: { color: '#4CAF50' } },
                                    { value: stopTime, name: '停机', itemStyle: { color: '#FF9800' } },
                                    { value: alarmTime, name: '告警', itemStyle: { color: '#F44336' } },
                                    { value: offTime, name: '关机', itemStyle: { color: '#9E9E9E' } }
                                ]
                            }]
                        });

                        // ==============================================
                        // 3. å³ä¾§ 24小时 è®¾å¤‡è¿è¡Œæ—¶åºå›¾ï¼ˆå’Œæ•ˆæžœå›¾å®Œå…¨ä¸€è‡´ï¼‰
                        // ==============================================
                        var timeChart = echarts.init(document.getElementById(`chart_time_${hmainid}`));
                        timeChart.setOption({
                            title: {
                                text: `运行:${runTime.toFixed(1)}H | åœæœº:${stopTime.toFixed(1)}H | å‘Šè­¦:${alarmTime.toFixed(1)}H | å…³æœº:${offTime.toFixed(1)}H`,
                                left: 'center',
                                textStyle: { fontSize: 14 }
                            },
                            grid: { left: '3%', right: '3%', top: '20%', bottom: '10%', containLabel: true },
                            xAxis: {
                                type: 'category',
                                data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
                            },
                            yAxis: { type: 'value', max: 1, show: false },
                            series: [
                                { type: 'bar', stack: 'total', barWidth: '80%', itemStyle: { color: '#9E9E9E' }, data: [offTime / 24, 0, 0, 0, 0, 0, 0] },
                                { type: 'bar', stack: 'total', barWidth: '80%', itemStyle: { color: '#FF9800' }, data: [stopTime / 24, 0, 0, 0, 0, 0, 0] },
                                { type: 'bar', stack: 'total', barWidth: '80%', itemStyle: { color: '#F44336' }, data: [alarmTime / 24, 0, 0, 0, 0, 0, 0] },
                                { type: 'bar', stack: 'total', barWidth: '80%', itemStyle: { color: '#4CAF50' }, data: [runTime / 24, 0, 0, 0, 0, 0, 0] }
                            ]
                        });
                    }

                    pieData = data
                }
            })

            $.ajax({
                url: GetWEBURL() + '/DAQ_EquipRunningSlice/GetHEquipStatusReportList2_DAQ',
                type: "GET",
                async: false,
                data: { "HDeptID": HDeptID, "HEquipID": HEquipID, HBeginDate: HBeginDate, HEndDate: HEndDate, "user": sessionStorage["HUserName"] },
                dataType: "json",//数据类型可以为 text xml json  script  jsonp
                success: function (res) {
                    data = res.data

                    if (data.length < 1) {
                        return
                    }
                    console.log(timelineData)
                    timelineData = data
                }
            })

            drawCharts()


            //wktag = 0;
            //$("#btomleft").html("");
@@ -500,6 +452,201 @@
        }


        //#region ç»˜åˆ¶å›¾è¡¨
        function drawCharts() {
            var $container = $("#chartContainer");
            $container.empty();

            var data = pieData
            console.log(pieChart)
            var data1 = timelineData

            for (var i = 0; i < data.length; i++) {
                var hmainid = data[i].hmainid;
                var equipName = data[i].设备名称;
                var dateStr = data[i].所属日期.split('T')[0];

                // æ—¶é—´å­—段
                var runTime = data[i].运行时间 || 0;         // è¿è¡Œ
                var stopTime = data[i].停机时间 || 0;         // åœæœº
                var alarmTime = data[i].告警时间 || 0;      // å‘Šè­¦
                var offTime = data[i].关机时间 || 0;        // å…³æœº
                var total = runTime + stopTime + alarmTime + offTime;

                // ==============================================
                // 1. åˆ›å»ºæ¯ä¸ªè®¾å¤‡çš„图表外壳（左右布局：饼图 + æ—¶åºå›¾ï¼‰
                // ==============================================
                var itemHtml = `
            <div style="width:100%; height:200px; margin-bottom:20px; border:1px solid #eee; padding:15px; border-radius:8px;">
                <div style="display: inline-block; height:20%; display:flex; gap:20px;">
                    <div style="width:40%;">${dateStr} ${equipName}</div>
                    <div style="width:60%; display: flex; justify-content: right; align-items: center; gap: 8px;">
                        <div style="width: 18px; height: 18px; background-color: #73cc3f; display: inline-block"></div>
                        <div style="padding-left: 4px ;display: inline-block">运行(${runTime}H)</div>
                        <div style="width: 18px; height: 18px; background-color: #f2a439; display: inline-block"></div>
                        <div style="padding-left: 4px ;display: inline-block">停机(${stopTime}H)</div>
                        <div style="width: 18px; height: 18px; background-color: #ff796a; display: inline-block"></div>
                        <div style="padding-left: 4px ;display: inline-block">告警(${alarmTime}H)</div>
                        <div style="width: 18px; height: 18px; background-color: #9b9a9b; display: inline-block"></div>
                        <div style="padding-left: 4px ;display: inline-block">关机(${offTime}H)</div>
                    </div>
                </div> 
                <div style="display: inline-block; height:80%; display:flex; gap:20px;">
                    <div id="chart_pie_${hmainid}_${i}" style="width:25%; height:100%;"></div>
                    <div id="chart_time_${hmainid}_${i}" style="width:70%; height:100%;"></div>
                </div>
            </div>`;
                $container.append(itemHtml);


                // ==============================================
                // 2. å·¦ä¾§çŽ¯å½¢é¥¼å›¾ï¼ˆè¿è¡Œ/停机/告警/关机 å æ¯”）
                // ==============================================
                var pieChart = echarts.init(document.getElementById(`chart_pie_${hmainid}_${i}`));
                pieChart.setOption({
                    // title: { text: `${dateStr} ${equipName}`, left: 'center', textStyle: { fontSize: 16 } },
                    tooltip: {
                        trigger: 'item', formatter: '{b}: {c}H ({d}%)', textStyle: {
                            lineHeight: 22  // æ–‡å­—间距更大
                        },
                    },
                    legend: {
                        orient: 'vertical', right: '2%', top: 'middle', textStyle: { fontSize: 13 }
                        , formatter: function (name, value) {
                            var getRate = function () {
                                if (name == '运行') {
                                    return (runTime / total * 100.0).toFixed(2)
                                }
                                if (name == '停机') {
                                    return (stopTime / total * 100.0).toFixed(2)
                                }
                                if (name == '告警') {
                                    return (alarmTime / total * 100.0).toFixed(2)
                                }
                                if (name == '关机') {
                                    return (offTime / total * 100.0).toFixed(2)
                                }
                            }()
                            return name + '率(' + getRate
                                + '%)'
                        }
                    },
                    series: [{
                        type: 'pie',
                        radius: ['42%', '70%'],
                        center: ['25%', '50%'],
                        itemStyle: { borderRadius: 4, borderColor: '#fff', borderWidth: 2 },
                        label: { show: false },
                        data: [
                            { value: runTime, name: '运行', itemStyle: { color: '#73cc3f' } },
                            { value: stopTime, name: '停机', itemStyle: { color: '#f2a439' } },
                            { value: alarmTime, name: '告警', itemStyle: { color: '#ff796a' } },
                            { value: offTime, name: '关机', itemStyle: { color: '#9b9a9b' } }
                        ]
                    }]
                });

                // ==============================================
                // 3. å³ä¾§ 24小时 è®¾å¤‡è¿è¡Œæ—¶åºå›¾
                // ==============================================
                // data的时间和设备id以‘_’进行拼接可得出data1对象的key，简化操作

                var key = dateStr + "_" + hmainid

                var timeChart = echarts.init(document.getElementById(`chart_time_${hmainid}_${i}`));
                // ä½ çš„原始数据
                var data1Instance = data1[key]
                if(!data1Instance){
                    continue
                }
                var startTime = dayjs(dateStr + " 00:00:00").valueOf();
                var endTime = dayjs(dateStr + " 23:59:59").valueOf();
                var categories = [data1Instance[0]["生产资源"]];
                var types = [
                    { name: '正常运行', color: '#73cc3f' },
                    { name: '离线', color: '#9b9a9b' },
                    { name: '待机', color: '#f2a439' },
                ];

                var getColor = function (name) {
                    for (var i = 0; i < types.length; i++) {
                        if (name == types[i].name) {
                            return types[i].color
                        }
                    }
                }

                chartDataTimeline = []
                for (var cursor = 0; cursor < data1Instance.length; cursor++) {
                    chartDataTimeline.push({
                        "name": data1Instance[cursor]["HResult"],
                        "value": [
                            0,
                            dayjs(data1Instance[cursor]["时间"]).valueOf(),
                            dayjs(data1Instance[cursor]["时间"]).add(5, 'm').valueOf(),
                            300000
                        ],
                        "itemStyle": {
                            "normal": {
                                "color": getColor(data1Instance[cursor]["HResult"])
                            }
                        }
                    })
                }
                timeChart.setOption({
                    tooltip: {
                        formatter: function (params) {
                            return params.marker + params.name;
                        }
                    },
                    grid: {
                        top: 0,
                        bottom: 0,
                        left: 20,  // ç»™Y轴文字留一点位置
                        right: 20,
                        containLabel: true
                    },
                    xAxis: {
                        type: 'time',
                        min: startTime,  //  å¼€å§‹æ—¶é—´æˆ³
                        max: endTime,  //  ç»“束时间戳
                        minInterval: 7200000, // é—´éš”两小时
                        scale: true,
                        axisLabel: {
                            formatter: function (val) {
                                return echarts.format.formatTime('hh:mm', val);
                            }
                        },
                        axisLine: {
                            show: false   //  éšè— x è½´è½´çº¿
                        }
                    },
                    yAxis: {
                        data: categories,
                        axisLine: {
                            show: false   //  éšè— y è½´è½´çº¿
                        },
                        name: "",
                        axisLabel: { show: false }, //  éšè—Y轴标签
                    },
                    series: [
                        {
                            type: 'custom',
                            renderItem: renderItem,
                            itemStyle: {
                                opacity: 0.8
                            },
                            encode: {
                                x: [1, 2],
                                y: 0
                            },
                            data: chartDataTimeline
                        }
                    ]
                })
            }
        }
        //#endregion

        // æ ‘状图查询
        function get_Display_Tree() {
@@ -1302,7 +1449,34 @@
        });
    }


    function renderItem(params, api) {
        var categoryIndex = api.value(0);
        var start = api.coord([api.value(1), categoryIndex]);
        var end = api.coord([api.value(2), categoryIndex]);
        var height = api.size([0, 1])[1] * 0.6;
        var rectShape = echarts.graphic.clipRectByRect(
            {
                x: start[0],
                y: start[1] - height / 2,
                width: end[0] - start[0],
                height: height
            },
            {
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
            }
        );
        return (
            rectShape && {
                type: 'rect',
                transition: ['shape'],
                shape: rectShape,
                style: api.style()
            }
        );
    }
    //#endregion
</script>