{"title":"Thông tin chi tiết dự án đầu tư","content":"\r\n<div class=\"row\">\r\n    <div class=\"col-lg-12\">\r\n        <div class=\"table-responsive\">\r\n            <table class=\"table table-bordered table-sm\">\r\n                <tr>\r\n                    <th>Tên dự án</th>\r\n                    <td>Đầu tư bổ sung hạ tầng công nghệ thông tin (phần mềm, thiết bị phần cứng) phục vụ xây dựng dữ liệu dùng chung của Sở Giao thông vận tải Tp. Hồ Chí Minh</td>\r\n                </tr>\r\n                <tr>\r\n                    <th>Tên chủ đầu tư</th>\r\n                    <td>Trung tâm Quản lý điều hành giao thông đô thị</td>\r\n                </tr>\r\n                <tr>\r\n                    <th>Địa điểm thực hiện</th>\r\n                    <td>TPHCM trước sáp nhập</td>\r\n                </tr>\r\n                <tr>\r\n                    <th>Tổng mức đầu tư</th>\r\n                    <td>172.000 (triệu đồng)</td>\r\n                </tr>\r\n                <tr>\r\n                    <th>Lũy kế giải ngân đến hết 2020</th>\r\n                    <td>0 (triệu đồng)</td>\r\n                </tr>\r\n                <tr>\r\n                    <th>Tổng KHTH 2021-2025</th>\r\n                    <td>0 (triệu đồng)</td>\r\n                </tr>\r\n            </table>\r\n        </div>\r\n        <h3 class=\"content-heading\">Tình hình giải ngân</h3>\r\n        <div class=\"table-responsive\">\r\n            <table class=\"table table-bordered table-sm\">\r\n                <tr>\r\n                    <th class=\"text-center\">Năm</th>\r\n                    <th class=\"text-center\">Đã giao</th>\r\n                    <th class=\"text-center\">Kế hoạch thực hiện</th>\r\n                    <th class=\"text-center\">Thực hiện giải ngân</th>\r\n                    <th class=\"text-center\">Tỉ lệ giải ngân</th>\r\n                </tr>\r\n                <tr>\r\n                    <th class=\"text-center\">2024</th>\r\n                    <td>0 (triệu đồng)</td>\r\n                    <td>0 (triệu đồng)</td>\r\n                    <td>0 (triệu đồng)</td>\r\n                    <td>0,00 (%)</td>\r\n                </tr>\r\n                <tr>\r\n                    <th class=\"text-center\">2025</th>\r\n                    <td>0 (triệu đồng)</td>\r\n                    <td>0 (triệu đồng)</td>\r\n                    <td>0 (triệu đồng)</td>\r\n                    <td>0,00 (%)</td>\r\n                </tr>\r\n            </table>\r\n        </div>\r\n        <div id=\"chart-container\" style=\"width:100%;height:60vh\"></div>\r\n    </div>\r\n</div>\r\n\r\n<script>\r\n    $('#ajaxCrudModal').on('shown.bs.modal', function() {\r\n        // 1. Dữ liệu (Giữ nguyên)\r\n        const singleProjectData = {\r\n            name: 'Đầu tư bổ sung hạ tầng công nghệ thông tin (phần mềm, thiết bị phần cứng) phục vụ xây dựng dữ liệu dùng chung của Sở Giao thông vận tải Tp. Hồ Chí Minh',\r\n            dagiao2024: ,\r\n            plan2024: ,\r\n            actual2024: ,\r\n            dagiao2025: ,\r\n            plan2025: ,\r\n            actual2025:         };\r\n\r\n        // 2. Cấu hình ECharts\r\n        var chartDom = document.getElementById('chart-container');\r\n        var myChart = echarts.init(chartDom);\r\n        var option;\r\n\r\n        // Hàm format tiền tệ (1.000.000)\r\n        const formatCurrency = (value) => {\r\n            return value ? value.toLocaleString('vi-VN') : '0';\r\n        };\r\n\r\n        option = {\r\n            textStyle: {\r\n                fontFamily: 'Nunito, sans-serif'\r\n            },\r\n            title: {\r\n                text: 'Tiến độ thực hiện vốn dự án',\r\n                subtext: singleProjectData.name,\r\n                left: 'center',\r\n                top: 0\r\n            },\r\n\r\n            // --- NÂNG CẤP TOOLTIP ---\r\n            tooltip: {\r\n                trigger: 'axis',\r\n                axisPointer: {\r\n                    type: 'shadow'\r\n                },\r\n                formatter: function(params) {\r\n                    // params[0].dataIndex: 0 là năm 2024, 1 là năm 2025\r\n                    let index = params[0].dataIndex;\r\n                    let yearLabel = params[0].name; // \"Năm 2024\" hoặc \"Năm 2025\"\r\n\r\n                    // 1. Lấy số liệu thô để tính toán\r\n                    let assigned = index === 0 ? singleProjectData.dagiao2024 : singleProjectData.dagiao2025;\r\n                    let plan = index === 0 ? singleProjectData.plan2024 : singleProjectData.plan2025;\r\n                    let actual = index === 0 ? singleProjectData.actual2024 : singleProjectData.actual2025;\r\n\r\n                    // 2. Tính tỷ lệ % (Tránh chia cho 0)\r\n                    let ratePlan = plan > 0 ? ((actual / plan) * 100).toFixed(1) : 0;\r\n                    let rateAssigned = assigned > 0 ? ((actual / assigned) * 100).toFixed(1) : 0;\r\n\r\n                    // 3. Xây dựng nội dung Tooltip\r\n                    let result = `<div style=\"min-width: 200px;\"><b>${yearLabel}</b><hr style=\"margin: 5px 0; border-color: #ddd\"/>`;\r\n\r\n                    // Vòng lặp hiển thị các dòng giá trị (Đảo ngược để cái to nhất xuống dưới)\r\n                    [...params].reverse().forEach(item => {\r\n                        let value = formatCurrency(item.value);\r\n                        result += `<div style=\"display: flex; justify-content: space-between;\">\r\n                                <span>${item.marker} ${item.seriesName}:</span>\r\n                                <span style=\"font-weight: bold; margin-left: 15px;\">${value} triệu đồng</span>\r\n                               </div>`;\r\n                    });\r\n\r\n                    // Thêm phần tính toán tỷ lệ vào cuối\r\n                    result += `<hr style=\"margin: 5px 0; border-color: #ddd\"/>\r\n                           <div style=\"color: #333;\">\r\n                               • Đạt so với KH: <b style=\"color: ${ratePlan >= 50 ? 'green' : 'red'}\">${ratePlan}%</b><br/>\r\n                               • Đạt so với Giao: <b>${rateAssigned}%</b>\r\n                           </div>\r\n                           </div>`;\r\n\r\n                    return result;\r\n                }\r\n            },\r\n            legend: {\r\n                data: ['Kinh phí được giao', 'Kế hoạch giải ngân', 'Giải ngân thực tế'],\r\n                bottom: 0\r\n            },\r\n            grid: {\r\n                left: '3%',\r\n                right: '10%',\r\n                bottom: '12%', // Tăng bottom chút để legend không bị dính\r\n                containLabel: true\r\n            },\r\n\r\n            // --- NÂNG CẤP XAXIS (Group phần ngàn) ---\r\n            xAxis: {\r\n                type: 'value',\r\n                axisLabel: {\r\n                    formatter: function(value) {\r\n                        // Hiển thị đầy đủ số có dấu chấm (1.000.000)\r\n                        return value.toLocaleString('vi-VN');\r\n                    },\r\n                    rotate: 0, // Nếu số quá dài có thể chỉnh rotate: 30 để nghiêng chữ\r\n                    hideOverlap: true // Tự ẩn nếu chữ đè lên nhau\r\n                }\r\n            },\r\n            yAxis: {\r\n                type: 'category',\r\n                data: ['Năm 2024', 'Năm 2025'],\r\n                inverse: true,\r\n                axisTick: {\r\n                    show: false\r\n                }\r\n            },\r\n            series: [\r\n                // LỚP 1: NỀN\r\n                {\r\n                    name: 'Kinh phí được giao',\r\n                    type: 'bar',\r\n                    data: [singleProjectData.dagiao2024, singleProjectData.dagiao2025],\r\n                    barWidth: 60,\r\n                    z: 0,\r\n                    itemStyle: {\r\n                        color: '#1cc0c0ff',\r\n                        borderRadius: [0, 5, 5, 0]\r\n                    },\r\n                    label: {\r\n                        show: true,\r\n                        position: 'right',\r\n                        formatter: function(p) {\r\n                            return formatCurrency(p.value);\r\n                        },\r\n                        color: '#073f52ff'\r\n                    }\r\n                },\r\n                // LỚP 2: KẾ HOẠCH\r\n                {\r\n                    name: 'Kế hoạch giải ngân',\r\n                    type: 'bar',\r\n                    data: [singleProjectData.plan2024, singleProjectData.plan2025],\r\n                    barWidth: 40,\r\n                    barGap: '-100%',\r\n                    z: 1,\r\n                    itemStyle: {\r\n                        color: '#FAC858',\r\n                        borderRadius: [0, 5, 5, 0]\r\n                    },\r\n                    label: {\r\n                        show: true,\r\n                        position: 'insideRight',\r\n                        formatter: function(p) {\r\n                            return formatCurrency(p.value);\r\n                        },\r\n                        color: '#000',\r\n                        fontWeight: 'bold'\r\n                    }\r\n                },\r\n                // LỚP 3: GIẢI NGÂN\r\n                {\r\n                    name: 'Giải ngân thực tế',\r\n                    type: 'bar',\r\n                    data: [singleProjectData.actual2024, singleProjectData.actual2025],\r\n                    barWidth: 20,\r\n                    barGap: '-100%',\r\n                    z: 2,\r\n                    itemStyle: {\r\n                        color: '#5470C6',\r\n                        borderRadius: [0, 5, 5, 0]\r\n                    },\r\n                    label: {\r\n                        show: true,\r\n                        position: 'right', // Đã chỉnh lại position right cho dễ nhìn\r\n                        formatter: function(p) {\r\n                            return p.value > 0 ? formatCurrency(p.value) : '';\r\n                        },\r\n                        color: '#5470C6',\r\n                        fontWeight: 'bold'\r\n                    }\r\n                }\r\n            ]\r\n        };\r\n\r\n        option && myChart.setOption(option);\r\n\r\n        setTimeout(function() {\r\n            myChart.resize();\r\n        }, 200);\r\n    });\r\n</script><script src=\"/assets/ff42df01/js/echarts.min.js?v=1761556697\"></script>","footer":"<button type=\"button\" class=\"btn btn-light float-end\" data-bs-dismiss=\"modal\">Đóng</button>"}