证据设备驾驶舱 设备运行切片模块使用自定义ECharts 图表实现 时序图。

chenhaozhe

2026-04-16 40d53099238695700f35ecf645376825a76d5ae5

证据设备驾驶舱 设备运行切片模块使用自定义ECharts 图表实现 时序图。

 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,194 @@
        }


        //#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小时 è®¾å¤‡è¿è¡Œæ—¶åºå›¾
                // ==============================================
                var timeChart = echarts.init(document.getElementById(`chart_time_${hmainid}_${i}`));
                // ä½ çš„原始数据
                var data1Instance = data1["2026-04-16"]

                var startTime = dayjs("2026-04-16 00:00:00").valueOf();
                var endTime = dayjs("2026-04-16 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 +1442,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>


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

@@ -16,6 +16,7 @@
    <script src="../../layuiadmin/soulTable.slim.js"></script>
    <script src="../../layuiadmin/PageTitle.js"></script>
    <script src="../../layuiadmin/echarts.min.js"></script>
    <script src="../../layuiadmin/dayjs.min.js"></script>
    <script src="../../layuiadmin/Scripts/webConfig.js"></script>

    <style type="text/css">
@@ -284,106 +285,95 @@
            function get_LineChart(mychart22, chartData1) {
                var baseTime = $("HBeginDate").val()
                var endTime = $("HEndDate").val()
                var startTime = dayjs(baseTime).valueOf();
                var endTime = dayjs(endTime).valueOf();
                var yAxisData = [$("#HDeptName").val()]
                var seriesData = chartData1.map(item => [
                    item.StartTime,
                    item.EndTime,
                    item.EquipName,
                    item.Status
                ]);
                // é»˜è®¤çš„option结构
                chartsOption = {
                    // æ ‡é¢˜
                    title: {
                        text: '设备运行时序',
                        left: 'left',
                        show: false
                    },
                    // å›¾ä¾‹ï¼ˆå³ä¸Šè§’的状态标识）
                    legend: {
                        data: ['运行', '开机', '停机', '告警', '关机'],
                        right: 10,
                        top: 5,
                        show: true
                    },
                    // æç¤ºæ¡†ï¼ˆé¼ æ ‡æ‚¬æµ®æ—¶æ˜¾ç¤ºï¼‰
                if (chartData1.length == 0) {
                    return
                }
                var categories = [chartData1[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
                        }
                    }
                }

                var chartDataTimeline = []
                for (var cursor = 0; cursor < chartData1.length; cursor++) {
                    chartDataTimeline.push({
                        "name": chartData1[cursor]["HResult"],
                        "value": [
                            0,
                            dayjs(chartData1[cursor]["时间"]).valueOf(),
                            dayjs(chartData1[cursor]["时间"]).add(5, 'm').valueOf(),
                            300000
                        ],
                        "itemStyle": {
                            "normal": {
                                "color": getColor(chartData1[cursor]["HResult"])
                            }
                        }
                    })
                }
                var chartsOption = {
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params) {
                            // params æ˜¯ä¸€ä¸ªæ•°ç»„，这里只有一条数据
                            const data = params[0];
                            const start = new Date(data.value[0]);
                            const end = new Date(data.value[1]);
                            // æ ¼å¼åŒ–时间显示
                            return `${data.name}<br/>${start.toLocaleTimeString()} ~ ${end.toLocaleTimeString()}`;
                            return params.marker + params.name;
                        }
                    },
                    // ç½‘格（调整图表内边距，给Y轴和X轴标签留出空间）
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: 0,
                        bottom: 0,
                        left: 20,  // ç»™Y轴文字留一点位置
                        right: 20,
                        containLabel: true
                    },
                    // X轴配置：时间轴
                    xAxis: {
                        type: 'time', // å…³é”®ï¼šæ—¶é—´ç±»åž‹è½´
                        min: baseTime, // å›ºå®šæœ€å°æ—¶é—´ï¼š14:00
                        max: endTime,  // å›ºå®šæœ€å¤§æ—¶é—´ï¼šæ¬¡æ—¥12:00
                        type: 'time',
                        min: startTime,  //  å¼€å§‹æ—¶é—´æˆ³
                        max: endTime,  //  ç»“束时间戳
                        minInterval: 7200000, // é—´éš”两小时
                        scale: true,
                        axisLabel: {
                            // æ ¼å¼åŒ–X轴标签显示为 14:00, 16:00 æ ¼å¼
                            formatter: function (value) {
                                const date = new Date(value);
                                return `${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;
                            },
                            interval: 2 * 3600 * 1000 // æ¯2小时显示一个刻度（对应14, 16, 18...）
                            formatter: function (val) {
                                return echarts.format.formatTime('hh:mm', val);
                            }
                        },
                        axisLine: { show: true },
                        splitLine: { show: true }
                        axisLine: {
                            show: false   //  éšè— x è½´è½´çº¿
                        }
                    },
                    // Y轴配置：类目轴
                    yAxis: {
                        type: 'category',
                        data: yAxisData,
                        axisLine: { show: false },
                        axisTick: { show: false } // éšè—Y轴刻度线
                        data: categories,
                        axisLine: {
                            show: false   //  éšè— y è½´è½´çº¿
                        },
                        name: "",
                        axisLabel: { show: false }, //  éšè—Y轴标签
                    },
                    // ç³»åˆ—数据
                    series: [
                        {
                            name: ['运行', '开机', '停机', '告警', '关机'],
                            type: 'bar', // ä½¿ç”¨æŸ±çŠ¶å›¾å®žçŽ°ç”˜ç‰¹å›¾æ•ˆæžœ
                            barWidth: '80%', // æŸ±å­é«˜åº¦
                            // æ•°æ®æ˜ å°„：将时间戳数据关联到Xè½´
                            encode: {
                                x: [0, 1], // value çš„第0项作为起始，第1项作为结束
                                y: 2       // value çš„第2项作为Y轴类目
                            },
                            // å…·ä½“数据
                            data: seriesData,
                            // çŠ¶æ€é¢œè‰²æ˜ å°„
                            type: 'custom',
                            renderItem: renderItem,
                            itemStyle: {
                                color: function (params) {
                                    // æ ¹æ®æ•°æ®åç§°åŒ¹é…é¢œè‰²
                                    const name = params.data[2];
                                    const colorMap = {
                                        '运行': '#67C23A',
                                        '运行中': '#67C23A',
                                        '开机': '#409EFF',
                                        '停机': '#E6A23C',
                                        '告警': '#F56C6C',
                                        '关机': '#909399',
                                        '维修中': '#F56C6C',
                                        '维护中': '#F56C6C'
                                    };
                                    return colorMap[name] || '#ccc';
                                }
                                opacity: 0.8
                            },
                            // æŸ±å­ä¸Šä¸æ˜¾ç¤ºæ–‡å­—标签
                            label: { show: false }
                            encode: {
                                x: [1, 2],
                                y: 0
                            },
                            data: chartDataTimeline
                        }
                    ]
                };
                }


                // å¦‚果有数据，更新option的内容
@@ -435,16 +425,18 @@

                // èŽ·å–设备运行时序信息
                $.ajax({
                    url: GetWEBURL() + '/SB_EquipRunningStatus/ReportByID',
                    url: GetWEBURL() + '/DAQ_EquipRunningSlice/GetHEquipStatusReportList2_DAQ',
                    type: "GET",
                    data: { "HEquipID": HEquipID, "sWhere": sWhere2, "user": sessionStorage["HUserName"] },
                    data: { "HEquipID": HEquipID, HDeptID: 0, HBeginDate: util.toDateString(HBeginDate, 'yyyy-MM-dd'), HEndDate: util.toDateString(HEndDate, 'yyyy-MM-dd'), "user": sessionStorage["HUserName"] },
                    dataType: "json",//数据类型可以为 text xml json  script  jsonp
                    success: function (data) {
                        console.log(data)

                        if (data.count == 1) {
                            var dataInstance = []
                            for (var key in data.data) {
                                $.merge(dataInstance, data.data[key])
                            }
                            var EquipRunningStatusCharts = echarts.init(document.getElementById("EquipRunningStatusCharts"))
                            get_LineChart(EquipRunningStatusCharts, data.data);//折线
                            get_LineChart(EquipRunningStatusCharts, dataInstance);//折线
                        } else {
                            layer.alert(data.Message, { time: 1 * 2000, icon: 5 });
                            return false;
@@ -509,6 +501,35 @@
            //#endregion

        })

        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()
            }
        );
    }
    </script>
</body>