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

chenhaozhe

2026-04-16 40d53099238695700f35ecf645376825a76d5ae5

 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')}`;
                            formatter: function (val) {
                                return echarts.format.formatTime('hh:mm', val);
                            }
                            },
                            interval: 2 * 3600 * 1000 // æ¯2小时显示一个刻度（对应14, 16, 18...）
                        axisLine: {
                            show: false   //  éšè— x è½´è½´çº¿
                        }
                        },
                        axisLine: { show: true },
                        splitLine: { show: true }
                    },
                    // 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>