{"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ư hạ tầng công nghệ thông tin Chi cục, Trung tâm không giường bệnh và Bệnh viện tuyến quận/ huyện, thành phố Thủ Đức</td>\r\n                </tr>\r\n                <tr>\r\n                    <th>Tên chủ đầu tư</th>\r\n                    <td>Ban Quản lý dự án đầu tư xây dựng các công trình dân dụng và công nghiệp</td>\r\n                </tr>\r\n                <tr>\r\n                    <th>Địa điểm thực hiện</th>\r\n                    <td>Địa điểm thực hiện: Bệnh viện Quận 1, Bệnh viện Lê Văn Thịnh, Bệnh viện Quận 4, Bệnh viện Quận 6, Bệnh viện Quận 7, Bệnh viện Quận 8, Bệnh viện Lê Văn Việt, Bệnh viện Quận 11, Bệnh viện Quận 12, Bệnh viện quận Bình Tân, Bệnh viện quận Bình Thạnh, Bệnh viện quận Gò Vấp, Bệnh viện quận Phú Nhuận, Bệnh viện quận Tân Bình, Bệnh viện quận Tân Phú, Bệnh viện thành phố Thủ Đức, Bệnh viện huyện Bình Chánh, Bệnh viện huyện Củ Chi, Bệnh viện huyện Nhà Bè, Trung tâm cấp cứu 115, Trung tâm Kiểm soát bệnh tật, Trung tâm Kiểm chuẩn xét nghiệm, Trung tâm Pháp y, Trung tâm Giám định Y khoa, Chi cục dân số.</td>\r\n                </tr>\r\n                <tr>\r\n                    <th>Tổng mức đầu tư</th>\r\n                    <td>680.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ư hạ tầng công nghệ thông tin Chi cục, Trung tâm không giường bệnh và Bệnh viện tuyến quận/ huyện, thành phố Thủ Đức',\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>"}