MES-WEB-LayUI.git

parent: 27d9bb82 | 补丁 | 提交 | ignore whitespace
zrg
7 天以前 75a3365af2e78f89c464c9cdf87a91ab5b577e77
2个文件已添加
5个文件已修改
	WebTM/WebTM.csproj	1 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	WebTM/layuiadmin/Scripts/webConfig.js	4 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	WebTM/views/Baseset/基础资料/saomazutuo_xiaowei.html	8 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	WebTM/views/仓存管理/仓库报表/Kf_WMSDailyRunStateReport.html	542 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	WebTM/views/数采管理/DAQ_EquipRunningSlice copy.html	1476 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	WebTM/views/数采管理/DAQ_EquipRunningSlice.html	1370 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	WebTM/views/数采管理/DAQ_EvidenceEquipmentCockpitDetail.html	191 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
 WebTM/WebTM.csproj

@@ -210,6 +210,7 @@
    <Content Include="views\WMSæ«ç æ¨¡å\éè´å¥åº\Kf_POStockInBackBill_Check_PDA.html" />
    <Content Include="views\WMSæ«ç æ¨¡å\éå®åºåº\Kf_SellOutBackBill_CheckList_PDA.html" />
    <Content Include="views\WMSæ«ç æ¨¡å\éå®åºåº\Kf_SellOutBackBill_Check_PDA.html" />
    <Content Include="views\ä»åç®¡ç\ä»åºæ¥è¡¨\Kf_WMSDailyRunStateReport.html" />
    <Content Include="views\ä»åç®¡ç\æ¡ç çæ\Gy_BarCodeBill_HuaZhou.html" />
    <Content Include="views\åºç¡èµæ\å¬ç¨åºç¡èµæ\Add_Edit_Gy_Car.html" />
    <Content Include="views\åºç¡èµæ\å¬ç¨åºç¡èµæ\Add_Edit_Gy_CostCenter.html" />

 WebTM/layuiadmin/Scripts/webConfig.js

@@ -4,8 +4,8 @@
  //var WEBURL = "http://localhost/API/";             //é¢æåæ¬å°éç½®
  //var WEBURL = "http://localhost:8082/API/";        //æè´ºæ¬å°éç½®
/*  var WEBURL = "http://localhost:81/API/"           //ç¿æ¶æ¶æ¬å°éç½®*/
  var WEBURL = "http://localhost:8082/API/"; //å¼ çå¹¿æ¬å°éç½®
  //var WEBURL = "http://localhost:81/API/";          //ééå²æ¬å°éç½®
  // var WEBURL = "http://localhost:8082/API/"; //å¼ çå¹¿æ¬å°éç½®
  var WEBURL = "http://localhost:81/API/";          //ééå²æ¬å°éç½®
  // var WEBURL = "http://localhost:8082/LuBaoAPI/";   //ææä¿æ¬å°éç½®
  //var WEBURL = "http://localhost:8080/API/";        //çä»ªæ¬å°éç½®
  //var WEBURL = "http://localhost:8082/LuBaoAPI/";   //ä½ææ°æ¬å°éç½®

 WebTM/views/Baseset/»ù´¡×ÊÁÏ/saomazutuo_xiaowei.html

@@ -508,11 +508,11 @@
                    if (listData.length > 0) {
                        // è·åå½åæ¡ç çå9-10ä½ï¼ä»åå¾åæ°ç¬¬9åç¬¬8ä½ï¼
                        if (sBarCode.length >= 10) {
                            var currentLast9to10 = sBarCode.substr(-14, 2); // è·ååæ°ç¬¬9ä½å¼å§ç2ä½åç¬¦
                            var currentLast9to10 = sBarCode.substr(-15, 2); // è·ååæ°ç¬¬9ä½å¼å§ç2ä½åç¬¦
                            // è·åä¸ä¸æ¡æ¡ç çå¯¹åºä½ç½®
                            var lastBarCode = listData[listData.length - 1]['æ¡ç ç¼å·'];
                            if (lastBarCode.length >= 10) {
                                var lastLast9to10 = lastBarCode.substr(-14, 2);
                                var lastLast9to10 = lastBarCode.substr(-15, 2);
                                if (currentLast9to10 !== lastLast9to10) {
                                    layer.msg(`å½åæ¡ç åæ°14-15ä½(${currentLast9to10})ä¸ä¸ä¸æ¡æ¡ç (${lastLast9to10})ä¸åï¼è¯·æ£æ¥ï¼`, { icon: 5 });
                                    $('#HBarCode').val('');
@@ -526,11 +526,11 @@
                    if (listData.length > 0) {
                        // è·åå½åæ¡ç çå9-10ä½ï¼ä»åå¾åæ°ç¬¬9åç¬¬8ä½ï¼
                        if (sBarCode.length >= 10) {
                            var currentLast9to10 = sBarCode.substr(-10, 2); // è·ååæ°ç¬¬9ä½å¼å§ç2ä½åç¬¦
                            var currentLast9to10 = sBarCode.substr(-11, 2); // è·ååæ°ç¬¬9ä½å¼å§ç2ä½åç¬¦
                            // è·åä¸ä¸æ¡æ¡ç çå¯¹åºä½ç½®
                            var lastBarCode = listData[listData.length - 1]['æ¡ç ç¼å·'];
                            if (lastBarCode.length >= 10) {
                                var lastLast9to10 = lastBarCode.substr(-10, 2);
                                var lastLast9to10 = lastBarCode.substr(-11, 2);
                                if (currentLast9to10 !== lastLast9to10) {
                                    layer.msg(`å½åæ¡ç åæ°10-11ä½(${currentLast9to10})ä¸ä¸ä¸æ¡æ¡ç (${lastLast9to10})ä¸åï¼è¯·æ£æ¥ï¼`, { icon: 5 });
                                    $('#HBarCode').val('');

 WebTM/views/²Ö´æ¹ÜÀí/²Ö¿â±¨±í/Kf_WMSDailyRunStateReport.html

New file
@@ -0,0 +1,542 @@
ï»¿
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>WMSæ¯æ¥è¿è¡ç¶ææ¥è¡¨</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
    <script src="../../../layuiadmin/layui/layui.js"></script>
    <script src="../../../layuiadmin/Scripts/json2.js"></script>
    <script src="../../../layuiadmin/Scripts/jquery-1.4.1.js"></script>
    <script src="../../../layuiadmin/Scripts/webConfig.js"></script>
    <script src="../../../layuiadmin/PubCustom.js"></script>
    <script src="../../../layuiadmin/zgqCustom/zgqCustom.js"></script>
    <script src="../../../layuiadmin/HideButton.js"></script>
    <script src='../../../layuiadmin/lib/extend/echarts.min.js'></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
        }

        .page-container {
            height: 100%;
            padding: 10px;
            display: flex;
            flex-direction: column;
        }

        .query-bar {
            background: #fff;
            padding: 10px 15px;
            border-radius: 6px;
            margin-bottom: 10px;
            flex-shrink: 0;
        }

        .summary-row {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 10px;
            flex-shrink: 0;
        }

        .chart-container {
            background: #fff;
            border-radius: 6px;
            padding: 8px;
            flex: 1;
            overflow: auto;
            min-height: 0;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 8px;
        }

        .chart-box {
            margin: 4px;
            border: 1px solid #eee;
            border-radius: 4px;
            background: #fafbfc;
            position: relative;
            min-height: 260px;
            display: flex;
            align-items: stretch;
            justify-content: stretch;
        }

        .empty-tip {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 12px;
        }

        .summary-card {
            margin: 4px;
            border: 1px solid #eee;
            border-radius: 4px;
            background: #fafbfc;
            text-align: center;
            padding: 8px 4px;
            min-width: 200px;
        }

            .summary-card.total-card {
                background: linear-gradient(135deg, #1e9fff 0%, #5fb3ff 100%);
                border-color: #1e9fff;
            }

                .summary-card.total-card .summary-number,
                .summary-card.total-card .summary-label {
                    color: #fff;
                }

        .summary-number {
            font-size: 16px;
            font-weight: bold;
            color: #1e9fff;
        }

        .summary-label {
            font-size: 11px;
            color: #888;
            margin-top: 2px;
        }
    </style>
</head>
<body>
    <div class="page-container">
        <div class="query-bar">
            <form class="layui-form" action="" lay-filter="component-form-group">
                <div class="layui-collapse">
                    <div class="layui-colla-item">
                        <div class="layui-colla-title layui-inline">
                            <div class="layui-inline"><span>æ´å¤</span></div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:100px;">æ¥æé´é</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-inline">
                            <label class="layui-form-label" style="width:100px;">å¼å§æ¥æ</label>
                            <div class="layui-input-block">
                                <input type="date" class="layui-input ForFilteringSchemes" id="HBeginDate" style="width:160px;">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:100px;">ç»ææ¥æ</label>
                            <div class="layui-input-block">
                                <input type="date" class="layui-input ForFilteringSchemes" id="HEndDate" style="width:160px;">
                            </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 class="layui-colla-content">
                    </div>
                </div>
            </form>
        </div>

        <div class="summary-row" id="summaryRow"></div>
        <div class="chart-container" id="chartContainer"></div>
    </div>

    <script>
        layui.config({
            base: '../../../layuiadmin/'
        }).extend({
            index: 'lib/index',
        }).use(['index', 'form', 'element'], function () {

            var $ = layui.$, layer = layui.layer, form = layui.form;
            var chartInstances = {};
            var chartConfigKeys = [];

            // å¾è¡¨éç½®
            var ChartConfig = {
                cgrk: { chartTitle: 'éè´å¥åºç»è®¡', chartType: 'bar', dataTableIndex: 0 },
                cgtl: { chartTitle: 'éè´éæç»è®¡', chartType: 'bar', dataTableIndex: 1 },
                scll: { chartTitle: 'çäº§é¢æç»è®¡', chartType: 'bar', dataTableIndex: 2 },
                scbl: { chartTitle: 'çäº§è¡¥æç»è®¡', chartType: 'bar', dataTableIndex: 3 },
                wcll: { chartTitle: 'å§å¤é¢æç»è®¡', chartType: 'bar', dataTableIndex: 4 },
                schb: { chartTitle: 'çäº§æ±æ¥ç»è®¡', chartType: 'bar', dataTableIndex: 5 },
                scrk: { chartTitle: 'çäº§å¥åºç»è®¡', chartType: 'bar', dataTableIndex: 6 },
                wcrk: { chartTitle: 'å§å¤å¥åºç»è®¡', chartType: 'bar', dataTableIndex: 7 },
                sctk: { chartTitle: 'çäº§éåºç»è®¡', chartType: 'bar', dataTableIndex: 8 },
                sctl: { chartTitle: 'çäº§éæç»è®¡', chartType: 'bar', dataTableIndex: 9 },
                xscK: { chartTitle: 'éå®åºåºç»è®¡', chartType: 'bar', dataTableIndex: 10 },
                zjdb: { chartTitle: 'ç´æ¥è°æ¨ç»è®¡', chartType: 'bar', dataTableIndex: 11 },
                fbsdr: { chartTitle: 'åå¸å¼è°å¥ç»è®¡', chartType: 'bar', dataTableIndex: 12 },
                fbsdc: { chartTitle: 'åå¸å¼è°åºç»è®¡', chartType: 'bar', dataTableIndex: 13 },
                stjgrk: { chartTitle: 'åæå å·¥å¥åºç»è®¡', chartType: 'bar', dataTableIndex: 14 },
                stjgtl: { chartTitle: 'åæå å·¥éæç»è®¡', chartType: 'bar', dataTableIndex: 15 },
                qtrk: { chartTitle: 'å¶ä»å¥åºç»è®¡', chartType: 'bar', dataTableIndex: 16 },
                qtck: { chartTitle: 'å¶ä»åºåºç»è®¡', chartType: 'bar', dataTableIndex: 17 }
            };

            // çæé¡µé¢ç»æ
            function generatePageStructure() {
                chartConfigKeys = [];
                for (var key in ChartConfig) { chartConfigKeys.push(key); }
                generateSummaryCards();
                generateChartBoxes();
            }
            function generateSummaryCards() {
                var $summaryRow = $('#summaryRow'); $summaryRow.empty();
                $summaryRow.append('<div class="summary-card total-card" id="card-total"><div class="summary-number">0</div><div class="summary-label">æ»è®¡</div></div>');
                chartConfigKeys.forEach(key => {
                    var config = ChartConfig[key];
                    var label = config.chartTitle.replace('ç»è®¡', '');
                    $summaryRow.append(`<div class="summary-card" id="card-${key}"><div class="summary-number">0</div><div class="summary-label">${label}</div></div>`);
                });
            }
            function generateChartBoxes() {
                var $c = $('#chartContainer'); $c.empty();
                chartConfigKeys.forEach(key => {
                    $c.append(`<div class="chart-box" id="chart-${key}"><div class="empty-tip">ææ æ°æ®</div></div>`);
                });
            }

            //æ¥è¯¢
            form.on('submit(btnReSearch)', function (data) {
                set_ClearQuery();
            });
            //éç½®
            form.on('submit(btnSearch)', function (data) {
                get_FastQuery();
            });
            //æ¥æé´éä¸æåè¡¨çå¬
            form.on('select(HInitTimeCycle)', function (data) {
                var HInitTimeCycle = $("#HInitTimeCycle").val() * 1;
                if (HInitTimeCycle != -1) {
                    $('#HBeginDate').prop('disabled', true);
                    $('#HEndDate').prop('disabled', true);
                    $("#HBeginDate").val(Format(new Date(new Date() - 1000 * 60 * 60 * 24 * HInitTimeCycle), "yyyy-MM-dd"));
                    $("#HEndDate").val(Format(new Date(), "yyyy-MM-dd"));
                    get_FastQuery();
                } else {
                    $('#HBeginDate').prop('disabled', false);
                    $('#HEndDate').prop('disabled', false);
                }
            });

            //åå§å
            function set_ClearBill() {
                generatePageStructure();
                setSelect_HInitTimeCycle();
                var HInitTimeCycle = $("#HInitTimeCycle").val() * 1;
                if (HInitTimeCycle != -1) {
                    $('#HBeginDate').prop('disabled', true);
                    $('#HEndDate').prop('disabled', true);
                } else {
                    $('#HBeginDate').prop('disabled', false);
                    $('#HEndDate').prop('disabled', false);
                }
                $("#HBeginDate").val(Format(new Date(new Date() - 1000 * 60 * 60 * 24 * HInitTimeCycle), "yyyy-MM-dd"));
                $("#HEndDate").val(Format(new Date(), "yyyy-MM-dd"));
                get_FastQuery();
            }

            //éç½®
            function set_ClearQuery() {
                var today = Format(new Date(), "yyyy-MM-dd");
                $("#HBeginDate").val(today);
                $("#HEndDate").val(today);
                get_FastQuery();
            }

            //åå§æ¥æé´é ä¸æåè¡¨
            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().append(HInitTimeCycle_ArrayList);
                $("#HInitTimeCycle").val("0");
                form.render('select');
            }
            // ==============================================
            // æ¥è¯¢ èªå¨è¡¥é½æææ¥æï¼ç©ºæ°æ®=0ï¼
            // ==============================================
            function get_FastQuery() {
                var wait = layer.load();
                var beginDate = $("#HBeginDate").val();
                var endDate = $("#HEndDate").val();

                var sWhere = JSON.stringify({ HBeginDate: beginDate, HEndDate: endDate });
                var params = { sWhere: sWhere, user: sessionStorage["HUserName"] || '' };

                $.ajax({
                    url: GetWEBURL() + 'WEBSController/GetKf_WMSDailyRunStateReport_Json',
                    type: 'GET',
                    data: params,
                    success: function (result) {
                        var data = {};
                        var fullDateList = getDateRange(beginDate, endDate);

                        if (result && result.code == "1" && result.data) {
                            chartConfigKeys.forEach(key => {
                                var cfg = ChartConfig[key];
                                var tb = "h_p_Kf_WMSDailyRunStateReport" + (cfg.dataTableIndex > 0 ? cfg.dataTableIndex : "");
                                var list = (result.data[tb] && Array.isArray(result.data[tb])) ? result.data[tb] : [];

                                // è½¬ mapï¼æ¥æç»ä¸æ ¼å¼åï¼
                                var dataMap = {};
                                list.forEach(x => {
                                    var date = x.æ¥æ || "";
                                    try {
                                        date = Format(new Date(date), "yyyy-MM-dd");
                                    } catch (e) {
                                        date = "";
                                    }
                                    var num = parseInt(x.æ°é) || 0;
                                    if (date) dataMap[date] = num;
                                });

                                // è¡¥é½æææ¥æ
                                data[key] = fullDateList.map(date => ({
                                    name: date,
                                    value: dataMap[date] || 0
                                }));
                            });
                        } else {
                            // åç«¯æ æææ°æ®ï¼å¨é¨åå§åä¸º 0
                            chartConfigKeys.forEach(key => {
                                data[key] = fullDateList.map(date => ({ name: date, value: 0 }));
                            });
                        }

                        renderAll(data);
                        layer.close(wait);
                    },
                    error: function () {
                        var fullDateList = getDateRange(beginDate, endDate);
                        var data = {};
                        chartConfigKeys.forEach(key => {
                            data[key] = fullDateList.map(date => ({ name: date, value: 0 }));
                        });
                        renderAll(data);
                        layer.close(wait);
                    }
                });
            }

            // ==============================================
            // çæå¼å§~ç»æçæææ¥æï¼èªå¨è·¨æ/è·¨å¹´ï¼
            // ==============================================
            function getDateRange(startDate, endDate) {
                var arr = [];
                var start = new Date(startDate);
                var end = new Date(endDate);
                while (start <= end) {
                    arr.push(Format(start, "yyyy-MM-dd"));
                    start.setDate(start.getDate() + 1);
                }
                return arr;
            }

            // ==============================================
            // æ¸²æææå¾è¡¨åå¡çï¼åæ¶âå¨0è·³è¿âï¼å§ç»ç»å¾ï¼
            // ==============================================
            function renderAll(data) {
                chartConfigKeys.forEach(key => {
                    var cfg = ChartConfig[key];
                    var d = data[key] || [];
                    var $chartBox = $('#chart-' + key);
                    var dom = $chartBox[0];
                    var chartKey = 'chart-' + key;

                    // 1. éæ¯æ§å®ä¾ï¼æå¼ ResizeObserver å¹¶æ¸ç©ºå®¹å¨
                    if (chartInstances[chartKey]) {
                        try {
                            if (chartInstances[chartKey]._resizeObserver) chartInstances[chartKey]._resizeObserver.disconnect();
                        } catch (e) { }
                        chartInstances[chartKey].dispose();
                        delete chartInstances[chartKey];
                    }
                    $chartBox.empty();

                    // 2. æ´æ°å¡çæ»æ°
                    var total = d.reduce((a, b) => a + b.value, 0);
                    $('#card-' + key + ' .summary-number').text(total);

                    // 3. å§ç»ç»å¶å¾è¡¨ï¼æ±ç¶å¾ä¼æ¾ç¤º0å¼æ±åï¼é¥¼å¾å¨0æ¶ç¹æ®å¤çï¼
                    if (cfg.chartType === 'pie') {
                        // é¥¼å¾æ è®ºæ¯å¦æ0é½ç»å¶
                        renderPie(key, cfg.chartTitle, d);
                    } else if (cfg.chartType === 'bar') {
                        // æ±ç¶å¾æ è®ºæ¯å¦æ0é½ç»å¶ï¼è®©æ¨ªè½´æ¥æå®æ´å±ç¤º
                        renderBar(key, cfg.chartTitle, d);
                    }
                });

                // æ´æ°æ»è®¡å¡ç
                var totalAll = 0;
                chartConfigKeys.forEach(key => {
                    var d = data[key] || [];
                    totalAll += d.reduce((a, b) => a + b.value, 0);
                });
                $("#card-total .summary-number").text(totalAll);
            }

            function renderPie(key, title, data) {
                var dom = document.getElementById('chart-' + key);
                var $chartBox = $('#chart-' + key);
                $chartBox.empty();

                var chart = echarts.init(dom);
                chartInstances['chart-' + key] = chart;
                // èªå¨ååºå®¹å¨å°ºå¯¸ååï¼ä¼åä½¿ç¨ ResizeObserverï¼
                if (window.ResizeObserver) {
                    try {
                        var ro = new ResizeObserver(function () { try { chart.resize(); } catch (e) { } });
                        ro.observe(dom);
                        chart._resizeObserver = ro;
                    } catch (e) { }
                }

                // è®¡ç®æ»å
                var total = data.reduce((s, x) => s + x.value, 0);
                var isAllZero = total === 0;

                // ç»å¶æ°æ®ï¼å¨0æ¶ç¨æå°å¼å ä½ï¼
                var pieData = data.map(x => ({
                    name: x.name,
                    value: isAllZero ? 0.0001 : x.value,
                    originalValue: x.value
                }));

                // åºç¡ç³»åéç½®
                var seriesConfig = {
                    type: 'pie',
                    radius: ['30%', '50%'],
                    data: pieData,
                    label: {
                        show: true,
                        fontSize: 11,
                        // å¼ºå¶æ¾ç¤ºæ ç¾ï¼é²æ¢è¢«éè
                        overflow: 'none',
                        hideOverlap: false
                    },
                    labelLine: {
                        show: true,
                        length: 10,
                        length2: 8
                    },
                    avoidLabelOverlap: false // åè®¸æ ç¾éå ï¼ç¡®ä¿é½æ¾ç¤º
                };

                chart.setOption({
                    title: { text: title, left: 'center', textStyle: { fontSize: 12 } },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            return `${params.name}: ${params.data.originalValue}`;
                        }
                    },
                    series: [
                        // ç¬¬ä¸å±ï¼å¤é¨æ¾ç¤ºæ¥æ
                        {
                            ...seriesConfig,
                            label: {
                                ...seriesConfig.label,
                                position: 'outside',
                                formatter: function (params) {
                                    // å¤é¨å§ç»æ¾ç¤ºæ¥æï¼åç§°ï¼
                                    return params.name;
                                }
                            }
                        },
                        // ç¬¬äºå±ï¼åé¨æ¾ç¤ºæ°éï¼å¨0æ¶ä¹æ¾ç¤º0ï¼
                        {
                            ...seriesConfig,
                            label: {
                                ...seriesConfig.label,
                                position: 'inside',
                                formatter: function (params) {
                                    // åé¨æ¾ç¤ºåå§æ°éï¼å¨0æ¶æ¾ç¤º '0'
                                    return params.data.originalValue;
                                }
                            },
                            labelLine: { show: false } // åé¨ä¸éè¦å¼å¯¼çº¿
                        }
                    ]
                });
            }

            // ==============================================
            // æ±ç¶å¾æ¸²æï¼æ¯æå¨0æ°æ®ï¼æ¾ç¤ºæ¨ªè½´æ ç¾å0å¼ï¼
            // ==============================================
            function renderBar(key, title, data) {
                var dom = document.getElementById('chart-' + key);
                var chart = echarts.init(dom);
                chartInstances['chart-' + key] = chart;
                if (window.ResizeObserver) {
                    try {
                        var ro = new ResizeObserver(function () { try { chart.resize(); } catch (e) { } });
                        ro.observe(dom);
                        chart._resizeObserver = ro;
                    } catch (e) { }
                }
                var colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];

                chart.setOption({
                    title: { text: title, left: 'center', textStyle: { fontSize: 12 } },
                    tooltip: { trigger: 'axis' },
                    xAxis: { type: 'category', data: data.map(x => x.name) },
                    yAxis: { type: 'value' },
                    series: [{
                        type: 'bar',
                        data: data.map(x => x.value),
                        barWidth: '40%',
                        itemStyle: {
                            color: function (params) {
                                return colorList[params.dataIndex % colorList.length];
                            },
                            borderRadius: [4, 4, 0, 0]
                        },
                        label: {
                            show: true,
                            position: 'top',
                            fontSize: 11,
                            formatter: '{c}'
                        }
                    }]
                });
            }
            // åå§å
            set_ClearBill();

            window.onresize = function () {
                for (var k in chartInstances) {
                    if (chartInstances[k]) chartInstances[k].resize();
                }
            };
        });
    </script>
</body>
</html>

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

New file
@@ -0,0 +1,1476 @@
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>è®¾å¤è¿è¡åç</title>
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
    <script src="../../layuiadmin/layui/layui.js"></script>
    <script src="../../layuiadmin/layui/layui.js"></script>
    <script src="../../layuiadmin/Scripts/json2.js"></script>
    <script src="../../layuiadmin/Scripts/jquery-1.4.1.js"></script>
    <script src="../../layuiadmin/layui/layui1.js"></script>
    <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>
        /*æ ç¶å¾ç¹å»é«äº®åè²*/
        .layui-tree-set-active>.layui-tree-entry .layui-tree-main {
            background: #aef0f7;
        }

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

        .bottomright {
            cursor: pointer;
            /*é¼ æ åææææ ·å¼*/
            transition: all 0.1s;
            /*ææå±æ§ååå¨0.6ç§åæ§è¡å¨ç»*/
        }

        .bottomright:hover {
            transform: scale(1.3);
            /*é¼ æ æ¾ä¸ä¹ååç´ åæ1.4åå¤§å°*/
        }

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

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

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

        .check1 {
            cursor: pointer;
            /*é¼ æ åææææ ·å¼*/
            -webkit-transition: border linear .1s, -webkit-box-shadow linear .5s;
            border-color: rgba(0, 148, 255, .75);
            -webkit-box-shadow: 0 0 18px rgba(0, 148, 255);
        }

        .prs {
            font-family: "å¾®è½¯éé»";
            font-weight: bold;
            line-height: 30px;
            margin: 0 0px 0px 10px;
            float: left;
        }

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

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

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

        .layui-icon {
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-col-md12">
            <div class="layui-card" style="padding: 1px">
                <div class="layui-card-body" style="padding: 1px;">
                    <form class="layui-form" action="" lay-filter="component-form-group">
                        <div class="layui-row">
                            <div class="layui-col-xs2 layui-inline" style="border: solid 1.5px #e0d6d64d;">
                                <div id="TreeTable" class="demo-tree demo-tree-box"
                                    style="height: 600px; overflow: scroll;"></div>
                            </div>
                            <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>
                                        </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>
                                </div>
                                <div id="chartContainer" style="height:600px;display:block;overflow-y:auto;">
                                </div>
                            </div>
                            <!-- <div class="layui-col-xs1 layui-inline" style="border: solid 1.5px #e0d6d64d;">
                                <fieldset style="border: 1px solid #eee; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%); height: 585px;">
                                    <legend style="color: #5FB878">æä½å°</legend>
                                    <div class="content4">
                                        <div class="layui-row layui-col-space10">
                                            <div class="layui-col-sm12 " onclick="PowerOn(event,this)">
                                                <div class="cnt bottomright">
                                                    <div class="btnM">
                                                        <span class="layui-icon layui-icon-pause imgicon"></span>
                                                    </div>
                                                    <span class="imgtitle">å¼æº</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-row layui-col-space10">
                                            <div class="layui-col-sm12 " onclick="PowerOff(event,this)">
                                                <div class="cnt bottomright">
                                                    <div class="btnM">
                                                        <span class="layui-icon layui-icon-logout imgicon"></span>
                                                    </div>
                                                    <span class="imgtitle">åæº</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-row layui-col-space10">
                                            <div class="layui-col-sm12 " onclick="DotCheck(event,this)">
                                                <div class="cnt bottomright">
                                                    <div class="btnM">
                                                        <span class="layui-icon layui-icon-list imgicon"></span>
                                                    </div>
                                                    <span class="imgtitle">ç¹æ£è®°å½</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-row layui-col-space10">
                                            <div class="layui-col-sm12 " onclick="FaultRegistration(event,this)">
                                                <div class="cnt bottomright">
                                                    <div class="btnM">
                                                        <span class="layui-icon layui-icon-list imgicon"></span>
                                                    </div>
                                                    <span class="imgtitle">æéç»è®°</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-row layui-col-space10">
                                            <div class="layui-col-sm12 " onclick="Maintenance(event,this)">
                                                <div class="cnt bottomright">
                                                    <div class="btnM">
                                                        <span class="layui-icon layui-icon-form imgicon"></span>
                                                    </div>
                                                    <span class="imgtitle">ç»´ä¿®</span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="layui-row layui-col-space10">
                                            <div class="layui-col-sm12 " onclick="Resume(event,this)">
                                                <div class="cnt bottomright">
                                                    <div class="btnM">
                                                        <span class="layui-icon layui-icon-table imgicon"></span>
                                                    </div>
                                                    <span class="imgtitle">å±¥å</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-row layui-col-space10">
                                            <div class="layui-col-sm12 " onclick="Process(event,this)">
                                                <div class="cnt bottomright">
                                                    <div class="btnM">
                                                        <span class="layui-icon layui-icon-file imgicon"></span>
                                                    </div>
                                                    <span class="imgtitle">å·¥èº</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-row layui-col-space10">
                                            <div class="layui-col-sm12 " onclick="HStatus(event,this)">
                                                <div class="cnt bottomright">
                                                    <div class="btnM">
                                                        <span class="layui-icon layui-icon-set imgicon"></span>
                                                    </div>
                                                    <span class="imgtitle">ç¶æ</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                            </div> -->
                        </div>
                        <div class="layui-row">
                            <!-- <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>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>

<script>
    var wktag = 0;
    var HEquipID = 0;//è®¾å¤id
    var HEquipNumber = "";//è®¾å¤ç¼ç 
    var HEquipName = "";//è®¾å¤åç§°
    var HSourceID = "";//äº§çº¿id
    var HDeptID = "";
    var pieData = []; // é¥¼å¾æ°æ®éå
    var timelineData = []; //æ¶åºå¾æ°æ®éå 
    layui.config({
        base: '../../layuiadmin/' //éæèµæºæå¨è·¯å¾
    }).extend({
        index: 'lib/index', //ä¸»å¥å£æ¨¡å
    }).use(['index', 'form', 'table', 'element', 'laypage', 'laydate', 'tree', 'util'], function () {
        //#region å¬ç¨åé
        var $ = layui.$
            , admin = layui.admin
            , layer = layui.layer
            , table = layui.table
            , form = layui.form
            , element = layui.element
            , laypage = layui.laypage
            , laydate = layui.laydate
            , tree = layui.tree
            , util = layui.util
        //#endregion

        //#region è¿å¥é¡µé¢å³å è½½

        //åå§åçé¢
        set_ClearBill();

        //#endregion

        //#region è§¦åäºä»¶ï¼åæ¬form.on(){}æ ¼å¼çææç¹å»äºä»¶ãéæ©äºä»¶ç


        //#endregion


        //#region æ¬é¡µé¢è¢«è°ç¨çæææ¹æ³

        //#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

            //æ¥è¯¢
            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+ æ°å¢
            });
        }
        //#endregion

        //æ¥è¯¢é¨é¨ è®¾å¤å¯¹åºçæ¥è¡¨
        function Check() {
            var HBeginDate = $("#ID-laydate-start-date").val()
            var HEndDate = $("#ID-laydate-end-date").val()

            $.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

                    if (data.length < 1) {
                        return
                    }

                    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("");
            //$.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;
            //    }
            //});
        }


        //#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() {
            var sWhere = " AND HUSEORGID=" + sessionStorage["OrganizationID"];
            var ajaxLoad = layer.load();
            $.ajax({
                url: GetWEBURL() + '/DAQ_EquipRunningSlice/GetHEquipTreeList_DAQ',
                data: { "sWhere": "" },
                type: "GET",
                success: function (data1) {
                    if (data1.count == 1) {
                        layer.close(ajaxLoad);
                        var data = data1.data;
                        MenuMain(data);
                    } else {
                        layer.close(ajaxLoad);
                        layer.alert(data1.code + data1.Message, { icon: 5 });
                    }
                }, error: function () {
                    layer.close(ajaxLoad);
                    layer.alert("æ¥å£è¯·æ±å¤±è´¥!", { icon: 5 });
                }
            });
        }

        //éåçæä¸»èå
        function MenuMain(data) {
            var liStr = '[';
            //éåçæä¸»èå
            HDeptID = data[0].id
            for (var i = 0; i < data.length; i++) {
                // å¤ææ¯å¦åå¨åèå
                if (data[i].children != null && data[i].children.length > 0) {
                    liStr += '{"title": "' + data[i].id + "-" + data[i].title + '", "id": "' + data[i].id + '","spread":true, "children":[ ';
                    // éåè·ååèå
                    for (var k = 0; k < data[i].children.length; k++) {
                        liStr += getChildMenu(data[i].children[k], 0, data[i].id);
                    }
                    liStr = liStr.substring(0, liStr.length - 1);
                    liStr += ']},';
                } else {
                    liStr += '{"title": "' + data[i].id + "-" + data[i].title + '", "id": "' + data[i].id + '"},';
                }
            };
            liStr = liStr.substring(0, liStr.length - 1);
            liStr += "]";
            var treeTable = JSON.parse(liStr);
            tree.render({
                elem: '#TreeTable' //é»è®¤æ¯ç¹å»èç¹å¯è¿è¡æ¶ç¼©
                , data: treeTable
                , click: function (obj) {
                    //é«äº®åè²
                    $(".layui-tree-set").removeClass('layui-tree-set-active');
                    obj.elem.addClass('layui-tree-set-active');

                    var data = obj.data;  //è·åå½åç¹å»çèç¹æ°æ®
                    HDeptID = 0;
                    HEquipID = 0;
                    if (data.HPID) {
                        // æPID å¤å®ä¸ºåèç¹
                        HDeptID = data.HPID || 0
                        HEquipID = data.id
                    } else {
                        HDeptID = data.id || 0
                    }



                    Check();
                }
            });
        }

        // éå½çæåèå
        function getChildMenu(subMenu, num, parentID) {
            num++;
            var subStr = '';
            if (subMenu.children != null && subMenu.children.length > 0) {
                subStr += '{"title": "' + subMenu.id + "-" + subMenu.title + '", "id": "' + subMenu.id + '", "HPID": "' + parentID + '","children":[';
                for (var j = 0; j < subMenu.children.length; j++) {
                    subStr += getChildMenu(subMenu.children[j], num, parentID);
                    if (j + 1 == subMenu.children.length) {
                        subStr = subStr.substring(0, subStr.length - 1);
                    }
                }
                subStr += ']},';
            } else {
                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);

            },
        });
    }

    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>

</html>

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

@@ -12,12 +12,12 @@
    <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>
    <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;
        }

@@ -36,10 +36,10 @@
            /*ææå±æ§ååå¨0.6ç§åæ§è¡å¨ç»*/
        }

            .bottomright:hover {
                transform: scale(1.3);
                /*é¼ æ æ¾ä¸ä¹ååç´ åæ1.4åå¤§å°*/
            }
        .bottomright:hover {
            transform: scale(1.3);
            /*é¼ æ æ¾ä¸ä¹ååç´ åæ1.4åå¤§å°*/
        }

        .imgtitle {
            width: 70%;
@@ -57,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;
@@ -127,42 +127,131 @@
                            <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-input-block">
                                            <select name="HInitTimeCycle" id="HInitTimeCycle"
                                                    class="ForFilteringSchemes" lay-filter="HInitTimeCycle"
                                                    style="width:190px;">
                                            </select>
                                        <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>
                                        </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="HDate1"
                                                   id="HDate1">

                                    <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>
                                </div>
                                <div id="chartContainer" style="height:600px;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>
                                    <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:800px;display:block;overflow-y:auto;">
                                </div>
                            </div>                           
                                </fieldset>
                            </div> -->
                        </div>
                        <div class="layui-row">                           
                        <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>
                    </form>
                </div>
@@ -171,7 +260,15 @@
    </div>
</body>

<script>   
<script>
    var wktag = 0;
    var HEquipID = 0;//è®¾å¤id
    var HEquipNumber = "";//è®¾å¤ç¼ç 
    var HEquipName = "";//è®¾å¤åç§°
    var HSourceID = "";//äº§çº¿id
    var HDeptID = "";
    var pieData = []; // é¥¼å¾æ°æ®éå
    var timelineData = []; //æ¶åºå¾æ°æ®éå 
    layui.config({
        base: '../../layuiadmin/' //éæèµæºæå¨è·¯å¾
    }).extend({
@@ -199,25 +296,6 @@

        //#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

@@ -226,141 +304,349 @@

        //#region åå§åçé¢
        function set_ClearBill() {
           
            //åå§åæ¥æé´éãå¼å§æ¥æãç»ææ¥æ
            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"));
            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

            //æ¥è¯¢
            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'))

        //#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');
            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+ æ°å¢
            });
        }
        //#endregion
       

        //æ¥è¯¢é¨é¨ è®¾å¤å¯¹åºçæ¥è¡¨
        function Check() {
            var HBeginDate = $("#HDate1").val()
            var HEndDate = $("#HDate2").val()
            var HBeginDate = $("#ID-laydate-start-date").val()
            var HEndDate = $("#ID-laydate-end-date").val()

            $.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("");
            //$.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;
            //    }
            //});
        }


        //#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() {
@@ -451,9 +737,747 @@
                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);

            },
        });
    }

    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>

</html>

 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">
@@ -299,106 +300,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çåå®¹
@@ -450,16 +440,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;
@@ -524,6 +516,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>
			@@ -210,6 +210,7 @@
			<Content Include="views\WMSæ«ç æ¨¡å\éè´å¥åº\Kf_POStockInBackBill_Check_PDA.html" />
			<Content Include="views\WMSæ«ç æ¨¡å\éå®åºåº\Kf_SellOutBackBill_CheckList_PDA.html" />
			<Content Include="views\WMSæ«ç æ¨¡å\éå®åºåº\Kf_SellOutBackBill_Check_PDA.html" />
			<Content Include="views\ä»åç®¡ç\ä»åºæ¥è¡¨\Kf_WMSDailyRunStateReport.html" />
			<Content Include="views\ä»åç®¡ç\æ¡ç çæ\Gy_BarCodeBill_HuaZhou.html" />
			<Content Include="views\åºç¡èµæ\å¬ç¨åºç¡èµæ\Add_Edit_Gy_Car.html" />
			<Content Include="views\åºç¡èµæ\å¬ç¨åºç¡èµæ\Add_Edit_Gy_CostCenter.html" />
			@@ -4,8 +4,8 @@
			//var WEBURL = "http://localhost/API/"; //é¢æåæ¬å°éç½®
			//var WEBURL = "http://localhost:8082/API/"; //æè´ºæ¬å°éç½®
			/* var WEBURL = "http://localhost:81/API/" //ç¿æ¶æ¶æ¬å°éç½®*/
			var WEBURL = "http://localhost:8082/API/"; //å¼ çå¹¿æ¬å°éç½®
			//var WEBURL = "http://localhost:81/API/"; //ééå²æ¬å°éç½®
			// var WEBURL = "http://localhost:8082/API/"; //å¼ çå¹¿æ¬å°éç½®
			var WEBURL = "http://localhost:81/API/"; //ééå²æ¬å°éç½®
			// var WEBURL = "http://localhost:8082/LuBaoAPI/"; //ææä¿æ¬å°éç½®
			//var WEBURL = "http://localhost:8080/API/"; //çä»ªæ¬å°éç½®
			//var WEBURL = "http://localhost:8082/LuBaoAPI/"; //ä½ææ°æ¬å°éç½®
			@@ -508,11 +508,11 @@
			if (listData.length > 0) {
			// è·åå½åæ¡ç çå9-10ä½ï¼ä»åå¾åæ°ç¬¬9åç¬¬8ä½ï¼
			if (sBarCode.length >= 10) {
			var currentLast9to10 = sBarCode.substr(-14, 2); // è·ååæ°ç¬¬9ä½å¼å§ç2ä½åç¬¦
			var currentLast9to10 = sBarCode.substr(-15, 2); // è·ååæ°ç¬¬9ä½å¼å§ç2ä½åç¬¦
			// è·åä¸ä¸æ¡æ¡ç çå¯¹åºä½ç½®
			var lastBarCode = listData[listData.length - 1]['æ¡ç ç¼å·'];
			if (lastBarCode.length >= 10) {
			var lastLast9to10 = lastBarCode.substr(-14, 2);
			var lastLast9to10 = lastBarCode.substr(-15, 2);
			if (currentLast9to10 !== lastLast9to10) {
			layer.msg(`å½åæ¡ç åæ°14-15ä½(${currentLast9to10})ä¸ä¸ä¸æ¡æ¡ç (${lastLast9to10})ä¸åï¼è¯·æ£æ¥ï¼`, { icon: 5 });
			$('#HBarCode').val('');
			@@ -526,11 +526,11 @@
			if (listData.length > 0) {
			// è·åå½åæ¡ç çå9-10ä½ï¼ä»åå¾åæ°ç¬¬9åç¬¬8ä½ï¼
			if (sBarCode.length >= 10) {
			var currentLast9to10 = sBarCode.substr(-10, 2); // è·ååæ°ç¬¬9ä½å¼å§ç2ä½åç¬¦
			var currentLast9to10 = sBarCode.substr(-11, 2); // è·ååæ°ç¬¬9ä½å¼å§ç2ä½åç¬¦
			// è·åä¸ä¸æ¡æ¡ç çå¯¹åºä½ç½®
			var lastBarCode = listData[listData.length - 1]['æ¡ç ç¼å·'];
			if (lastBarCode.length >= 10) {
			var lastLast9to10 = lastBarCode.substr(-10, 2);
			var lastLast9to10 = lastBarCode.substr(-11, 2);
			if (currentLast9to10 !== lastLast9to10) {
			layer.msg(`å½åæ¡ç åæ°10-11ä½(${currentLast9to10})ä¸ä¸ä¸æ¡æ¡ç (${lastLast9to10})ä¸åï¼è¯·æ£æ¥ï¼`, { icon: 5 });
			$('#HBarCode').val('');
New file
			@@ -0,0 +1,542 @@
			ï»¿
			<!DOCTYPE html>
			<html>
			<head>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			<title>WMSæ¯æ¥è¿è¡ç¶ææ¥è¡¨</title>
			<meta name="renderer" content="webkit">
			<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
			<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
			<script src="../../../layuiadmin/layui/layui.js"></script>
			<script src="../../../layuiadmin/Scripts/json2.js"></script>
			<script src="../../../layuiadmin/Scripts/jquery-1.4.1.js"></script>
			<script src="../../../layuiadmin/Scripts/webConfig.js"></script>
			<script src="../../../layuiadmin/PubCustom.js"></script>
			<script src="../../../layuiadmin/zgqCustom/zgqCustom.js"></script>
			<script src="../../../layuiadmin/HideButton.js"></script>
			<script src='../../../layuiadmin/lib/extend/echarts.min.js'></script>
			<style type="text/css">
			* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			}

			html, body {
			height: 100%;
			}

			.page-container {
			height: 100%;
			padding: 10px;
			display: flex;
			flex-direction: column;
			}

			.query-bar {
			background: #fff;
			padding: 10px 15px;
			border-radius: 6px;
			margin-bottom: 10px;
			flex-shrink: 0;
			}

			.summary-row {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 10px;
			flex-shrink: 0;
			}

			.chart-container {
			background: #fff;
			border-radius: 6px;
			padding: 8px;
			flex: 1;
			overflow: auto;
			min-height: 0;
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
			gap: 8px;
			}

			.chart-box {
			margin: 4px;
			border: 1px solid #eee;
			border-radius: 4px;
			background: #fafbfc;
			position: relative;
			min-height: 260px;
			display: flex;
			align-items: stretch;
			justify-content: stretch;
			}

			.empty-tip {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #999;
			font-size: 12px;
			}

			.summary-card {
			margin: 4px;
			border: 1px solid #eee;
			border-radius: 4px;
			background: #fafbfc;
			text-align: center;
			padding: 8px 4px;
			min-width: 200px;
			}

			.summary-card.total-card {
			background: linear-gradient(135deg, #1e9fff 0%, #5fb3ff 100%);
			border-color: #1e9fff;
			}

			.summary-card.total-card .summary-number,
			.summary-card.total-card .summary-label {
			color: #fff;
			}

			.summary-number {
			font-size: 16px;
			font-weight: bold;
			color: #1e9fff;
			}

			.summary-label {
			font-size: 11px;
			color: #888;
			margin-top: 2px;
			}
			</style>
			</head>
			<body>
			<div class="page-container">
			<div class="query-bar">
			<form class="layui-form" action="" lay-filter="component-form-group">
			<div class="layui-collapse">
			<div class="layui-colla-item">
			<div class="layui-colla-title layui-inline">
			<div class="layui-inline"><span>æ´å¤</span></div>
			</div>
			<div class="layui-inline">
			<label class="layui-form-label" style="width:100px;">æ¥æé´é</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-inline">
			<label class="layui-form-label" style="width:100px;">å¼å§æ¥æ</label>
			<div class="layui-input-block">
			<input type="date" class="layui-input ForFilteringSchemes" id="HBeginDate" style="width:160px;">
			</div>
			</div>
			<div class="layui-inline">
			<label class="layui-form-label" style="width:100px;">ç»ææ¥æ</label>
			<div class="layui-input-block">
			<input type="date" class="layui-input ForFilteringSchemes" id="HEndDate" style="width:160px;">
			</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 class="layui-colla-content">
			</div>
			</div>
			</form>
			</div>

			<div class="summary-row" id="summaryRow"></div>
			<div class="chart-container" id="chartContainer"></div>
			</div>

			<script>
			layui.config({
			base: '../../../layuiadmin/'
			}).extend({
			index: 'lib/index',
			}).use(['index', 'form', 'element'], function () {

			var $ = layui.$, layer = layui.layer, form = layui.form;
			var chartInstances = {};
			var chartConfigKeys = [];

			// å¾è¡¨éç½®
			var ChartConfig = {
			cgrk: { chartTitle: 'éè´å¥åºç»è®¡', chartType: 'bar', dataTableIndex: 0 },
			cgtl: { chartTitle: 'éè´éæç»è®¡', chartType: 'bar', dataTableIndex: 1 },
			scll: { chartTitle: 'çäº§é¢æç»è®¡', chartType: 'bar', dataTableIndex: 2 },
			scbl: { chartTitle: 'çäº§è¡¥æç»è®¡', chartType: 'bar', dataTableIndex: 3 },
			wcll: { chartTitle: 'å§å¤é¢æç»è®¡', chartType: 'bar', dataTableIndex: 4 },
			schb: { chartTitle: 'çäº§æ±æ¥ç»è®¡', chartType: 'bar', dataTableIndex: 5 },
			scrk: { chartTitle: 'çäº§å¥åºç»è®¡', chartType: 'bar', dataTableIndex: 6 },
			wcrk: { chartTitle: 'å§å¤å¥åºç»è®¡', chartType: 'bar', dataTableIndex: 7 },
			sctk: { chartTitle: 'çäº§éåºç»è®¡', chartType: 'bar', dataTableIndex: 8 },
			sctl: { chartTitle: 'çäº§éæç»è®¡', chartType: 'bar', dataTableIndex: 9 },
			xscK: { chartTitle: 'éå®åºåºç»è®¡', chartType: 'bar', dataTableIndex: 10 },
			zjdb: { chartTitle: 'ç´æ¥è°æ¨ç»è®¡', chartType: 'bar', dataTableIndex: 11 },
			fbsdr: { chartTitle: 'åå¸å¼è°å¥ç»è®¡', chartType: 'bar', dataTableIndex: 12 },
			fbsdc: { chartTitle: 'åå¸å¼è°åºç»è®¡', chartType: 'bar', dataTableIndex: 13 },
			stjgrk: { chartTitle: 'åæå å·¥å¥åºç»è®¡', chartType: 'bar', dataTableIndex: 14 },
			stjgtl: { chartTitle: 'åæå å·¥éæç»è®¡', chartType: 'bar', dataTableIndex: 15 },
			qtrk: { chartTitle: 'å¶ä»å¥åºç»è®¡', chartType: 'bar', dataTableIndex: 16 },
			qtck: { chartTitle: 'å¶ä»åºåºç»è®¡', chartType: 'bar', dataTableIndex: 17 }
			};

			// çæé¡µé¢ç»æ
			function generatePageStructure() {
			chartConfigKeys = [];
			for (var key in ChartConfig) { chartConfigKeys.push(key); }
			generateSummaryCards();
			generateChartBoxes();
			}
			function generateSummaryCards() {
			var $summaryRow = $('#summaryRow'); $summaryRow.empty();
			$summaryRow.append('<div class="summary-card total-card" id="card-total"><div class="summary-number">0</div><div class="summary-label">æ»è®¡</div></div>');
			chartConfigKeys.forEach(key => {
			var config = ChartConfig[key];
			var label = config.chartTitle.replace('ç»è®¡', '');
			$summaryRow.append(`<div class="summary-card" id="card-${key}"><div class="summary-number">0</div><div class="summary-label">${label}</div></div>`);
			});
			}
			function generateChartBoxes() {
			var $c = $('#chartContainer'); $c.empty();
			chartConfigKeys.forEach(key => {
			$c.append(`<div class="chart-box" id="chart-${key}"><div class="empty-tip">ææ æ°æ®</div></div>`);
			});
			}

			//æ¥è¯¢
			form.on('submit(btnReSearch)', function (data) {
			set_ClearQuery();
			});
			//éç½®
			form.on('submit(btnSearch)', function (data) {
			get_FastQuery();
			});
			//æ¥æé´éä¸æåè¡¨çå¬
			form.on('select(HInitTimeCycle)', function (data) {
			var HInitTimeCycle = $("#HInitTimeCycle").val() * 1;
			if (HInitTimeCycle != -1) {
			$('#HBeginDate').prop('disabled', true);
			$('#HEndDate').prop('disabled', true);
			$("#HBeginDate").val(Format(new Date(new Date() - 1000 * 60 * 60 * 24 * HInitTimeCycle), "yyyy-MM-dd"));
			$("#HEndDate").val(Format(new Date(), "yyyy-MM-dd"));
			get_FastQuery();
			} else {
			$('#HBeginDate').prop('disabled', false);
			$('#HEndDate').prop('disabled', false);
			}
			});

			//åå§å
			function set_ClearBill() {
			generatePageStructure();
			setSelect_HInitTimeCycle();
			var HInitTimeCycle = $("#HInitTimeCycle").val() * 1;
			if (HInitTimeCycle != -1) {
			$('#HBeginDate').prop('disabled', true);
			$('#HEndDate').prop('disabled', true);
			} else {
			$('#HBeginDate').prop('disabled', false);
			$('#HEndDate').prop('disabled', false);
			}
			$("#HBeginDate").val(Format(new Date(new Date() - 1000 * 60 * 60 * 24 * HInitTimeCycle), "yyyy-MM-dd"));
			$("#HEndDate").val(Format(new Date(), "yyyy-MM-dd"));
			get_FastQuery();
			}

			//éç½®
			function set_ClearQuery() {
			var today = Format(new Date(), "yyyy-MM-dd");
			$("#HBeginDate").val(today);
			$("#HEndDate").val(today);
			get_FastQuery();
			}

			//åå§æ¥æé´é ä¸æåè¡¨
			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().append(HInitTimeCycle_ArrayList);
			$("#HInitTimeCycle").val("0");
			form.render('select');
			}
			// ==============================================
			// æ¥è¯¢ èªå¨è¡¥é½æææ¥æï¼ç©ºæ°æ®=0ï¼
			// ==============================================
			function get_FastQuery() {
			var wait = layer.load();
			var beginDate = $("#HBeginDate").val();
			var endDate = $("#HEndDate").val();

			var sWhere = JSON.stringify({ HBeginDate: beginDate, HEndDate: endDate });
			var params = { sWhere: sWhere, user: sessionStorage["HUserName"] \|\| '' };

			$.ajax({
			url: GetWEBURL() + 'WEBSController/GetKf_WMSDailyRunStateReport_Json',
			type: 'GET',
			data: params,
			success: function (result) {
			var data = {};
			var fullDateList = getDateRange(beginDate, endDate);

			if (result && result.code == "1" && result.data) {
			chartConfigKeys.forEach(key => {
			var cfg = ChartConfig[key];
			var tb = "h_p_Kf_WMSDailyRunStateReport" + (cfg.dataTableIndex > 0 ? cfg.dataTableIndex : "");
			var list = (result.data[tb] && Array.isArray(result.data[tb])) ? result.data[tb] : [];

			// è½¬ mapï¼æ¥æç»ä¸æ ¼å¼åï¼
			var dataMap = {};
			list.forEach(x => {
			var date = x.æ¥æ \|\| "";
			try {
			date = Format(new Date(date), "yyyy-MM-dd");
			} catch (e) {
			date = "";
			}
			var num = parseInt(x.æ°é) \|\| 0;
			if (date) dataMap[date] = num;
			});

			// è¡¥é½æææ¥æ
			data[key] = fullDateList.map(date => ({
			name: date,
			value: dataMap[date] \|\| 0
			}));
			});
			} else {
			// åç«¯æ æææ°æ®ï¼å¨é¨åå§åä¸º 0
			chartConfigKeys.forEach(key => {
			data[key] = fullDateList.map(date => ({ name: date, value: 0 }));
			});
			}

			renderAll(data);
			layer.close(wait);
			},
			error: function () {
			var fullDateList = getDateRange(beginDate, endDate);
			var data = {};
			chartConfigKeys.forEach(key => {
			data[key] = fullDateList.map(date => ({ name: date, value: 0 }));
			});
			renderAll(data);
			layer.close(wait);
			}
			});
			}

			// ==============================================
			// çæå¼å§~ç»æçæææ¥æï¼èªå¨è·¨æ/è·¨å¹´ï¼
			// ==============================================
			function getDateRange(startDate, endDate) {
			var arr = [];
			var start = new Date(startDate);
			var end = new Date(endDate);
			while (start <= end) {
			arr.push(Format(start, "yyyy-MM-dd"));
			start.setDate(start.getDate() + 1);
			}
			return arr;
			}

			// ==============================================
			// æ¸²æææå¾è¡¨åå¡çï¼åæ¶âå¨0è·³è¿âï¼å§ç»ç»å¾ï¼
			// ==============================================
			function renderAll(data) {
			chartConfigKeys.forEach(key => {
			var cfg = ChartConfig[key];
			var d = data[key] \|\| [];
			var $chartBox = $('#chart-' + key);
			var dom = $chartBox[0];
			var chartKey = 'chart-' + key;

			// 1. éæ¯æ§å®ä¾ï¼æå¼ ResizeObserver å¹¶æ¸ç©ºå®¹å¨
			if (chartInstances[chartKey]) {
			try {
			if (chartInstances[chartKey]._resizeObserver) chartInstances[chartKey]._resizeObserver.disconnect();
			} catch (e) { }
			chartInstances[chartKey].dispose();
			delete chartInstances[chartKey];
			}
			$chartBox.empty();

			// 2. æ´æ°å¡çæ»æ°
			var total = d.reduce((a, b) => a + b.value, 0);
			$('#card-' + key + ' .summary-number').text(total);

			// 3. å§ç»ç»å¶å¾è¡¨ï¼æ±ç¶å¾ä¼æ¾ç¤º0å¼æ±åï¼é¥¼å¾å¨0æ¶ç¹æ®å¤çï¼
			if (cfg.chartType === 'pie') {
			// é¥¼å¾æ è®ºæ¯å¦æ0é½ç»å¶
			renderPie(key, cfg.chartTitle, d);
			} else if (cfg.chartType === 'bar') {
			// æ±ç¶å¾æ è®ºæ¯å¦æ0é½ç»å¶ï¼è®©æ¨ªè½´æ¥æå®æ´å±ç¤º
			renderBar(key, cfg.chartTitle, d);
			}
			});

			// æ´æ°æ»è®¡å¡ç
			var totalAll = 0;
			chartConfigKeys.forEach(key => {
			var d = data[key] \|\| [];
			totalAll += d.reduce((a, b) => a + b.value, 0);
			});
			$("#card-total .summary-number").text(totalAll);
			}

			function renderPie(key, title, data) {
			var dom = document.getElementById('chart-' + key);
			var $chartBox = $('#chart-' + key);
			$chartBox.empty();

			var chart = echarts.init(dom);
			chartInstances['chart-' + key] = chart;
			// èªå¨ååºå®¹å¨å°ºå¯¸ååï¼ä¼åä½¿ç¨ ResizeObserverï¼
			if (window.ResizeObserver) {
			try {
			var ro = new ResizeObserver(function () { try { chart.resize(); } catch (e) { } });
			ro.observe(dom);
			chart._resizeObserver = ro;
			} catch (e) { }
			}

			// è®¡ç®æ»å
			var total = data.reduce((s, x) => s + x.value, 0);
			var isAllZero = total === 0;

			// ç»å¶æ°æ®ï¼å¨0æ¶ç¨æå°å¼å ä½ï¼
			var pieData = data.map(x => ({
			name: x.name,
			value: isAllZero ? 0.0001 : x.value,
			originalValue: x.value
			}));

			// åºç¡ç³»åéç½®
			var seriesConfig = {
			type: 'pie',
			radius: ['30%', '50%'],
			data: pieData,
			label: {
			show: true,
			fontSize: 11,
			// å¼ºå¶æ¾ç¤ºæ ç¾ï¼é²æ¢è¢«éè
			overflow: 'none',
			hideOverlap: false
			},
			labelLine: {
			show: true,
			length: 10,
			length2: 8
			},
			avoidLabelOverlap: false // åè®¸æ ç¾éå ï¼ç¡®ä¿é½æ¾ç¤º
			};

			chart.setOption({
			title: { text: title, left: 'center', textStyle: { fontSize: 12 } },
			tooltip: {
			trigger: 'item',
			formatter: function (params) {
			return `${params.name}: ${params.data.originalValue}`;
			}
			},
			series: [
			// ç¬¬ä¸å±ï¼å¤é¨æ¾ç¤ºæ¥æ
			{
			...seriesConfig,
			label: {
			...seriesConfig.label,
			position: 'outside',
			formatter: function (params) {
			// å¤é¨å§ç»æ¾ç¤ºæ¥æï¼åç§°ï¼
			return params.name;
			}
			}
			},
			// ç¬¬äºå±ï¼åé¨æ¾ç¤ºæ°éï¼å¨0æ¶ä¹æ¾ç¤º0ï¼
			{
			...seriesConfig,
			label: {
			...seriesConfig.label,
			position: 'inside',
			formatter: function (params) {
			// åé¨æ¾ç¤ºåå§æ°éï¼å¨0æ¶æ¾ç¤º '0'
			return params.data.originalValue;
			}
			},
			labelLine: { show: false } // åé¨ä¸éè¦å¼å¯¼çº¿
			}
			]
			});
			}

			// ==============================================
			// æ±ç¶å¾æ¸²æï¼æ¯æå¨0æ°æ®ï¼æ¾ç¤ºæ¨ªè½´æ ç¾å0å¼ï¼
			// ==============================================
			function renderBar(key, title, data) {
			var dom = document.getElementById('chart-' + key);
			var chart = echarts.init(dom);
			chartInstances['chart-' + key] = chart;
			if (window.ResizeObserver) {
			try {
			var ro = new ResizeObserver(function () { try { chart.resize(); } catch (e) { } });
			ro.observe(dom);
			chart._resizeObserver = ro;
			} catch (e) { }
			}
			var colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];

			chart.setOption({
			title: { text: title, left: 'center', textStyle: { fontSize: 12 } },
			tooltip: { trigger: 'axis' },
			xAxis: { type: 'category', data: data.map(x => x.name) },
			yAxis: { type: 'value' },
			series: [{
			type: 'bar',
			data: data.map(x => x.value),
			barWidth: '40%',
			itemStyle: {
			color: function (params) {
			return colorList[params.dataIndex % colorList.length];
			},
			borderRadius: [4, 4, 0, 0]
			},
			label: {
			show: true,
			position: 'top',
			fontSize: 11,
			formatter: '{c}'
			}
			}]
			});
			}
			// åå§å
			set_ClearBill();

			window.onresize = function () {
			for (var k in chartInstances) {
			if (chartInstances[k]) chartInstances[k].resize();
			}
			};
			});
			</script>
			</body>
			</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">
			@@ -299,106 +300,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çåå®¹
			@@ -450,16 +440,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;
			@@ -524,6 +516,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>